enhance(apps/analytics): allow switching between courses and activity on analytics dashboards

apps/frontend-manage/src/components/analytics/activity/ActivityAnalyticsNavigation.tsx

@@ -9,6 +9,7 @@ function ActivityAnalyticsNavigation({ courseId }: { courseId: string }) {
       labelLeft={<QuizDashboardLabel />}
       hrefRight={`/analytics/${courseId}/performance`}
       labelRight={<PerformanceDashboardLabel />}
+      slug="activity"
     />
   )
 }

apps/frontend-manage/src/components/analytics/overview/AnalyticsNavigation.tsx

@@ -1,30 +1,69 @@
+import { useQuery } from '@apollo/client'
 import {
   faChevronLeft,
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { GetUserCoursesDocument } from '@klicker-uzh/graphql/dist/ops'
+import Loader from '@klicker-uzh/shared-components/src/Loader'
+import { SelectField } from '@uzh-bf/design-system'
+import { useTranslations } from 'next-intl'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 interface AnalyticsNavigationProps {
   hrefLeft: string
   labelLeft: React.ReactNode
   hrefRight: string
   labelRight: React.ReactNode
+  slug: string
 }
 
 function AnalyticsNavigation({
   hrefLeft,
   labelLeft,
   hrefRight,
   labelRight,
+  slug,
 }: AnalyticsNavigationProps) {
+  const { data, loading } = useQuery(GetUserCoursesDocument)
+  const router = useRouter()
+  const t = useTranslations()
+
+  if (loading) {
+    return <Loader />
+  }
+
   return (
-    <div className="flex w-full flex-row justify-between">
-      <Link href={hrefLeft} className="mb-6 flex flex-row items-center gap-2">
+    <div className="mb-6 grid w-full grid-cols-2 md:grid-cols-3">
+      <Link
+        href={hrefLeft}
+        className="flex flex-row items-center justify-start gap-2"
+      >
         <FontAwesomeIcon icon={faChevronLeft} size="lg" />
         <div className="flex flex-row items-center gap-0.5">{labelLeft}</div>
       </Link>
-      <Link href={hrefRight} className="mb-6 flex flex-row items-center gap-2">
+      <div className="hidden justify-center md:flex">
+        <SelectField
+          label={`${t('shared.generic.course')}:`}
+          labelType="large"
+          value={router.query.courseId as string}
+          items={
+            data?.userCourses?.map((course) => ({
+              label: course.name,
+              value: course.id,
+            })) ?? []
+          }
+          onChange={(value) => {
+            router.push({ pathname: `/analytics/${value}/${slug}` })
+          }}
+          className={{ select: { trigger: 'h-8' } }}
+        />
+      </div>
+      <Link
+        href={hrefRight}
+        className="flex flex-row items-center justify-end gap-2"
+      >
         <div className="flex flex-row items-center gap-0.5">{labelRight}</div>
         <FontAwesomeIcon icon={faChevronRight} size="lg" />
       </Link>

apps/frontend-manage/src/components/analytics/performance/PerformanceAnalyticsNavigation.tsx

@@ -9,6 +9,7 @@ function PerformanceAnalyticsNavigation({ courseId }: { courseId: string }) {
       labelLeft={<ActivityDashboardLabel />}
       hrefRight={`/analytics/${courseId}/quizzes`}
       labelRight={<QuizDashboardLabel />}
+      slug="performance"
     />
   )
 }

apps/frontend-manage/src/components/analytics/quiz/QuizSelectionNavigation.tsx

@@ -9,6 +9,7 @@ function QuizSelectionNavigation({ courseId }: { courseId: string }) {
       labelLeft={<PerformanceDashboardLabel />}
       hrefRight={`/analytics/${courseId}/activity`}
       labelRight={<ActivityDashboardLabel />}
+      slug="quizzes"
     />
   )
 }