From 20e2a2b1724c019fde09e44cb1d1555b4f3c2506 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 11 Nov 2024 17:03:30 +0100
Subject: [PATCH 01/32] Clean up router index, add route names

---
 client/src/router/index.ts | 474 ++++++++++++++++++++-----------------
 client/src/router/names.ts |   3 +
 2 files changed, 254 insertions(+), 223 deletions(-)

diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index a2118426..a24e53b2 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -14,9 +14,12 @@ import { addToHistory, setLastNavigationWasPush } from "@/router/history";
 import { onboardingRedirect } from "@/router/onboarding";
 import { createRouter, createWebHistory } from "vue-router";
 import {
+  ATTENDANCE_ROUTE,
   CERTIFICATES_ROUTE,
+  COCKPIT_ROUTE,
   COMPETENCE_ROUTE,
   COMPETENCES_ROUTE,
+  DOCUMENTS_ROUTE,
   SELF_EVALUATION_ROUTE,
   SETTINGS_ROUTE,
 } from "./names";
@@ -86,88 +89,265 @@ const router = createRouter({
       props: true,
     },
     {
-      path: "/course/:courseSlug/media",
+      path: "/course/:courseSlug",
       props: true,
-      component: () => import("@/pages/mediaLibrary/MediaLibraryParentPage.vue"),
       children: [
         {
-          path: "",
-          component: () => import("@/pages/mediaLibrary/MediaLibraryIndexPage.vue"),
+          path: "media",
+          component: () => import("@/pages/mediaLibrary/MediaLibraryParentPage.vue"),
+          children: [
+            {
+              path: "",
+              component: () => import("@/pages/mediaLibrary/MediaLibraryIndexPage.vue"),
+            },
+            {
+              path: ":categorySlug",
+              props: true,
+              component: () =>
+                import("@/pages/mediaLibrary/MediaLibraryCategoryPage.vue"),
+            },
+            {
+              path: ":categorySlug/:contentSlug",
+              props: true,
+              component: () =>
+                import("@/pages/mediaLibrary/MediaLibraryContentPage.vue"),
+            },
+          ],
         },
         {
-          path: ":categorySlug",
-          props: true,
-          component: () => import("@/pages/mediaLibrary/MediaLibraryCategoryPage.vue"),
+          path: "competence",
+          component: () => import("@/pages/competence/CompetenceParentPage.vue"),
+          children: [
+            {
+              path: "",
+              props: true,
+              name: COMPETENCE_ROUTE,
+              component: () => import("@/pages/competence/CompetenceIndexPage.vue"),
+            },
+            {
+              path: "certificates",
+              name: CERTIFICATES_ROUTE,
+              props: true,
+              component: () =>
+                import("@/pages/competence/CompetenceCertificateListPage.vue"),
+            },
+            {
+              path: "certificates/:certificateSlug",
+              props: true,
+              component: () =>
+                import("@/pages/competence/CompetenceCertificateDetailPage.vue"),
+            },
+            {
+              name: SELF_EVALUATION_ROUTE,
+              path: "self-evaluation-and-feedback",
+              props: true,
+              component: () =>
+                import("@/pages/competence/SelfEvaluationAndFeedbackPage.vue"),
+            },
+            {
+              path: "competences",
+              name: COMPETENCES_ROUTE,
+              props: true,
+              component: () =>
+                import("@/pages/competence/ActionCompetenceListPage.vue"),
+            },
+          ],
         },
         {
-          path: ":categorySlug/:contentSlug",
+          path: "learn",
+          children: [
+            {
+              path: "",
+              component: () =>
+                import("../pages/learningPath/learningPathPage/LearningPathPage.vue"),
+            },
+            {
+              path: ":circleSlug",
+              component: () =>
+                import("../pages/learningPath/circlePage/CirclePage.vue"),
+              props: true,
+            },
+            {
+              path: ":circleSlug/evaluate/:learningUnitSlug",
+              component: () =>
+                import(
+                  "../pages/learningPath/selfEvaluationPage/SelfEvaluationPage.vue"
+                ),
+              props: true,
+            },
+            {
+              path: ":circleSlug/:contentSlug",
+              component: () =>
+                import(
+                  "../pages/learningPath/learningContentPage/LearningContentPage.vue"
+                ),
+              props: true,
+            },
+          ],
+        },
+        {
+          path: "profile/:userId",
+          component: () => import("@/pages/userProfile/UserProfilePage.vue"),
+          children: [
+            {
+              path: "learning-path",
+              component: () =>
+                import("@/pages/userProfile/LearningPathProfilePage.vue"),
+              props: true,
+              name: "profileLearningPath",
+              meta: {
+                hideChrome: true,
+                showCloseButton: true,
+              },
+            },
+            {
+              path: "competence",
+              component: () => import("@/pages/userProfile/CompetenceProfilePage.vue"),
+              props: true,
+              name: "profileCompetence",
+              meta: {
+                hideChrome: true,
+                showCloseButton: true,
+              },
+              children: [
+                {
+                  path: "",
+                  name: "competenceMain",
+                  component: () =>
+                    import(
+                      "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue"
+                    ),
+                },
+                {
+                  path: "evaluations",
+                  name: "competenceEvaluations",
+                  component: () =>
+                    import(
+                      "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue"
+                    ),
+                },
+                {
+                  path: "certificates/:certificateSlug",
+                  name: "competenceCertificateDetail",
+                  props: true,
+                  component: () =>
+                    import("@/pages/competence/CompetenceCertificateDetailPage.vue"),
+                },
+                {
+                  path: "certificates",
+                  name: "competenceCertificates",
+                  component: () =>
+                    import("@/pages/competence/CompetenceCertificateListPage.vue"),
+                },
+              ],
+            },
+          ],
+        },
+        {
+          path: "learning-mentor",
+          component: () => import("@/pages/learningMentor/mentor/MentorIndexPage.vue"),
+          name: "learningMentor",
+          children: [
+            {
+              path: "",
+              component: () =>
+                import("@/pages/learningMentor/mentor/MentorParticipantsPage.vue"),
+              name: "mentorsAndParticipants",
+            },
+            {
+              path: "tasks",
+              component: () =>
+                import("@/pages/learningMentor/mentor/MentorOverviewPage.vue"),
+              name: "learningMentorOverview",
+            },
+            {
+              path: "self-evaluation-feedback/:learningUnitId",
+              component: () =>
+                import("@/pages/learningMentor/mentor/SelfEvaluationFeedbackPage.vue"),
+              name: "mentorSelfEvaluationFeedback",
+              props: true,
+            },
+            {
+              path: "details",
+              component: () =>
+                import("@/pages/learningMentor/mentor/MentorDetailParentPage.vue"),
+              children: [
+                {
+                  path: "praxis-assignments/:praxisAssignmentId",
+                  component: () =>
+                    import(
+                      "@/pages/learningMentor/mentor/MentorPraxisAssignmentPage.vue"
+                    ),
+                  name: "learningMentorPraxisAssignments",
+                  props: true,
+                },
+                {
+                  path: "self-evaluation-feedback-assignments/:learningUnitId",
+                  component: () =>
+                    import(
+                      "@/pages/learningMentor/mentor/MentorSelfEvaluationFeedbackAssignmentPage.vue"
+                    ),
+                  name: "learningMentorSelfEvaluationFeedbackAssignments",
+                  props: true,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          path: "assignment-evaluation/:assignmentId/:userId",
+          component: () =>
+            import("@/pages/assignmentEvaluation/AssignmentEvaluationPage.vue"),
           props: true,
-          component: () => import("@/pages/mediaLibrary/MediaLibraryContentPage.vue"),
+        },
+        {
+          path: "cockpit",
+          name: "cockpit",
+          component: () =>
+            import("@/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue"),
+          props: true,
+          children: [
+            {
+              path: "",
+              component: () =>
+                import("@/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue"),
+              name: COCKPIT_ROUTE,
+              props: true,
+            },
+            {
+              path: "profile/:userId/:circleSlug",
+              component: () => import("@/pages/cockpit/CockpitUserCirclePage.vue"),
+              props: true,
+            },
+            {
+              path: "feedback/:circleId",
+              component: () => import("@/pages/cockpit/FeedbackPage.vue"),
+              props: true,
+            },
+            {
+              path: "assignment/:assignmentId",
+              component: () =>
+                import("@/pages/cockpit/assignmentsPage/AssignmentsPage.vue"),
+              props: true,
+            },
+            {
+              path: "attendance",
+              component: () =>
+                import("@/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue"),
+              props: true,
+              name: ATTENDANCE_ROUTE,
+            },
+            {
+              path: "documents",
+              component: () => import("@/pages/cockpit/documentPage/DocumentPage.vue"),
+              props: true,
+              name: DOCUMENTS_ROUTE,
+            },
+          ],
         },
       ],
     },
-    {
-      path: "/course/:courseSlug/competence",
-      props: true,
-      component: () => import("@/pages/competence/CompetenceParentPage.vue"),
-      children: [
-        {
-          path: "",
-          props: true,
-          name: COMPETENCE_ROUTE,
-          component: () => import("@/pages/competence/CompetenceIndexPage.vue"),
-        },
-        {
-          path: "certificates",
-          name: CERTIFICATES_ROUTE,
-          props: true,
-          component: () =>
-            import("@/pages/competence/CompetenceCertificateListPage.vue"),
-        },
-        {
-          path: "certificates/:certificateSlug",
-          props: true,
-          component: () =>
-            import("@/pages/competence/CompetenceCertificateDetailPage.vue"),
-        },
-        {
-          name: SELF_EVALUATION_ROUTE,
-          path: "self-evaluation-and-feedback",
-          props: true,
-          component: () =>
-            import("@/pages/competence/SelfEvaluationAndFeedbackPage.vue"),
-        },
-        {
-          path: "competences",
-          name: COMPETENCES_ROUTE,
-          props: true,
-          component: () => import("@/pages/competence/ActionCompetenceListPage.vue"),
-        },
-      ],
-    },
-    {
-      path: "/course/:courseSlug/learn",
-      component: () =>
-        import("../pages/learningPath/learningPathPage/LearningPathPage.vue"),
-      props: true,
-    },
-    {
-      path: "/course/:courseSlug/learn/:circleSlug",
-      component: () => import("../pages/learningPath/circlePage/CirclePage.vue"),
-      props: true,
-    },
-    {
-      path: "/course/:courseSlug/learn/:circleSlug/evaluate/:learningUnitSlug",
-      component: () =>
-        import("../pages/learningPath/selfEvaluationPage/SelfEvaluationPage.vue"),
-      props: true,
-    },
-    {
-      path: "/course/:courseSlug/learn/:circleSlug/:contentSlug",
-      component: () =>
-        import("../pages/learningPath/learningContentPage/LearningContentPage.vue"),
-      props: true,
-    },
+
     {
       path: "/lernbegleitung/:courseId/invitation/:invitationId",
       component: () => import("@/pages/learningMentor/InvitationAcceptPage.vue"),
@@ -178,158 +358,6 @@ const router = createRouter({
         public: true,
       },
     },
-    {
-      path: "/course/:courseSlug/profile/:userId",
-      component: () => import("@/pages/userProfile/UserProfilePage.vue"),
-      props: true,
-      children: [
-        {
-          path: "learning-path",
-          component: () => import("@/pages/userProfile/LearningPathProfilePage.vue"),
-          props: true,
-          name: "profileLearningPath",
-          meta: {
-            hideChrome: true,
-            showCloseButton: true,
-          },
-        },
-        {
-          path: "competence",
-          component: () => import("@/pages/userProfile/CompetenceProfilePage.vue"),
-          props: true,
-          name: "profileCompetence",
-          meta: {
-            hideChrome: true,
-            showCloseButton: true,
-          },
-          children: [
-            {
-              path: "",
-              name: "competenceMain",
-              component: () =>
-                import(
-                  "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue"
-                ),
-            },
-            {
-              path: "evaluations",
-              name: "competenceEvaluations",
-              component: () =>
-                import(
-                  "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue"
-                ),
-            },
-            {
-              path: "certificates/:certificateSlug",
-              name: "competenceCertificateDetail",
-              props: true,
-              component: () =>
-                import("@/pages/competence/CompetenceCertificateDetailPage.vue"),
-            },
-            {
-              path: "certificates",
-              name: "competenceCertificates",
-              component: () =>
-                import("@/pages/competence/CompetenceCertificateListPage.vue"),
-            },
-          ],
-        },
-      ],
-    },
-    {
-      path: "/course/:courseSlug/learning-mentor",
-      component: () => import("@/pages/learningMentor/mentor/MentorIndexPage.vue"),
-      props: true,
-      name: "learningMentor",
-      children: [
-        {
-          path: "",
-          component: () =>
-            import("@/pages/learningMentor/mentor/MentorParticipantsPage.vue"),
-          name: "mentorsAndParticipants",
-        },
-        {
-          path: "tasks",
-          component: () =>
-            import("@/pages/learningMentor/mentor/MentorOverviewPage.vue"),
-          name: "learningMentorOverview",
-        },
-        {
-          path: "self-evaluation-feedback/:learningUnitId",
-          component: () =>
-            import("@/pages/learningMentor/mentor/SelfEvaluationFeedbackPage.vue"),
-          name: "mentorSelfEvaluationFeedback",
-          props: true,
-        },
-        {
-          path: "details",
-          component: () =>
-            import("@/pages/learningMentor/mentor/MentorDetailParentPage.vue"),
-          children: [
-            {
-              path: "praxis-assignments/:praxisAssignmentId",
-              component: () =>
-                import("@/pages/learningMentor/mentor/MentorPraxisAssignmentPage.vue"),
-              name: "learningMentorPraxisAssignments",
-              props: true,
-            },
-            {
-              path: "self-evaluation-feedback-assignments/:learningUnitId",
-              component: () =>
-                import(
-                  "@/pages/learningMentor/mentor/MentorSelfEvaluationFeedbackAssignmentPage.vue"
-                ),
-              name: "learningMentorSelfEvaluationFeedbackAssignments",
-              props: true,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      path: "/course/:courseSlug/assignment-evaluation/:assignmentId/:userId",
-      component: () =>
-        import("@/pages/assignmentEvaluation/AssignmentEvaluationPage.vue"),
-      props: true,
-    },
-    {
-      path: "/course/:courseSlug/cockpit",
-      name: "cockpit",
-      children: [
-        {
-          path: "",
-          component: () => import("@/pages/cockpit/cockpitPage/CockpitExpertPage.vue"),
-          props: true,
-        },
-        {
-          path: "profile/:userId/:circleSlug",
-          component: () => import("@/pages/cockpit/CockpitUserCirclePage.vue"),
-          props: true,
-        },
-        {
-          path: "feedback/:circleId",
-          component: () => import("@/pages/cockpit/FeedbackPage.vue"),
-          props: true,
-        },
-        {
-          path: "assignment/:assignmentId",
-          component: () =>
-            import("@/pages/cockpit/assignmentsPage/AssignmentsPage.vue"),
-          props: true,
-        },
-        {
-          path: "attendance",
-          component: () =>
-            import("@/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue"),
-          props: true,
-        },
-        {
-          path: "documents",
-          component: () => import("@/pages/cockpit/documentPage/DocumentPage.vue"),
-          props: true,
-        },
-      ],
-    },
     {
       path: "/statistic/:courseSlug",
       props: true,
diff --git a/client/src/router/names.ts b/client/src/router/names.ts
index a8f5d4f3..b52d9c8a 100644
--- a/client/src/router/names.ts
+++ b/client/src/router/names.ts
@@ -3,3 +3,6 @@ export const CERTIFICATES_ROUTE = "certificates";
 export const SELF_EVALUATION_ROUTE = "selfEvaluationAndFeedback";
 export const COMPETENCES_ROUTE = "competences";
 export const SETTINGS_ROUTE = "settings";
+export const COCKPIT_ROUTE = "cockpit-home";
+export const ATTENDANCE_ROUTE = "attendance";
+export const DOCUMENTS_ROUTE = "documents";

From bc2dd2ba6e642feefb2f671c696b3849e20bac7f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 11 Nov 2024 17:03:58 +0100
Subject: [PATCH 02/32] Fix styling issue

---
 client/src/components/header/SubNavItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/header/SubNavItem.vue b/client/src/components/header/SubNavItem.vue
index cb38f36b..65f26eeb 100644
--- a/client/src/components/header/SubNavItem.vue
+++ b/client/src/components/header/SubNavItem.vue
@@ -27,7 +27,7 @@ const isExternalLink = computed(() => {
     target="_blank"
   >
     <slot />
-    <it-icon-external-link class="w-6" />
+    <it-icon-external-link class="h-6 w-6" />
   </a>
   <!-- make `:to` explicit -->
   <router-link

From 3f5d837db9ec43ecef141cf034da4607e68c2ded Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 11 Nov 2024 17:04:16 +0100
Subject: [PATCH 03/32] Add subpages and subnavigation to cockpit page

---
 .../cockpitPage/CockpitExpertHomePage.vue     | 112 +++++++++++
 .../cockpit/cockpitPage/CockpitExpertPage.vue | 186 ------------------
 .../cockpitPage/CockpitExpertParentPage.vue   |  53 +++++
 .../pages/competence/CompetenceParentPage.vue |  11 --
 4 files changed, 165 insertions(+), 197 deletions(-)
 create mode 100644 client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
 delete mode 100644 client/src/pages/cockpit/cockpitPage/CockpitExpertPage.vue
 create mode 100644 client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue

diff --git a/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue b/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
new file mode 100644
index 00000000..052f347b
--- /dev/null
+++ b/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import SubmissionsOverview from "@/components/cockpit/SubmissionsOverview.vue";
+import UserStatusCount from "@/components/cockpit/UserStatusCount.vue";
+import CourseSessionDueDatesList from "@/components/dueDates/CourseSessionDueDatesList.vue";
+import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
+import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+import ItPersonRow from "@/components/ui/ItPersonRow.vue";
+import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables";
+import { useExpertCockpitStore } from "@/stores/expertCockpit";
+import AttendanceOverview from "./AttendanceOverview.vue";
+
+const expertCockpitStore = useExpertCockpitStore();
+const courseSession = useCurrentCourseSession();
+const courseSessionDetailResult = useCourseSessionDetailQuery();
+
+const props = defineProps<{
+  courseSlug: string;
+}>();
+</script>
+<template>
+  <div v-if="expertCockpitStore.circles?.length">
+    <div v-if="expertCockpitStore.currentCircle" class="container-large">
+      <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
+        <ItDropdownSelect
+          :model-value="expertCockpitStore.currentCircle"
+          class="mt-4 w-full lg:mt-0 lg:w-96"
+          :items="expertCockpitStore.circles"
+          @update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent"
+        ></ItDropdownSelect>
+      </div>
+      <!-- Status -->
+      <div class="mb-4 gap-4">
+        <AttendanceOverview />
+      </div>
+
+      <div class="mb-4 bg-white p-6">
+        <CourseSessionDueDatesList
+          :course-session-id="courseSession.id"
+          :circle-id="expertCockpitStore.currentCircle.id"
+          :max-count="4"
+        ></CourseSessionDueDatesList>
+      </div>
+      <SubmissionsOverview
+        :course-session="courseSession"
+        :selected-circle="expertCockpitStore.currentCircle.id"
+      ></SubmissionsOverview>
+      <div class="pt-4">
+        <!-- progress -->
+        <div
+          v-if="courseSessionDetailResult.filterMembers().length > 0"
+          class="bg-white p-6"
+        >
+          <h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
+          <ul>
+            <ItPersonRow
+              v-for="csu in courseSessionDetailResult.filterMembers()"
+              :key="csu.user_id"
+              :name="`${csu.first_name} ${csu.last_name}`"
+              :avatar-url="csu.avatar_url"
+            >
+              <template #center>
+                <div
+                  class="mt-2 flex w-full flex-col items-center justify-start lg:mt-0 lg:flex-row"
+                >
+                  <LearningPathDiagram
+                    :course-session-id="courseSession.id"
+                    :course-slug="props.courseSlug"
+                    :user-id="csu.user_id"
+                    :show-circle-slugs="[expertCockpitStore.currentCircle.slug]"
+                    diagram-type="singleSmall"
+                    class="mr-4"
+                  ></LearningPathDiagram>
+                  <p class="lg:min-w-[150px]">
+                    {{ expertCockpitStore.currentCircle.title }}
+                  </p>
+                  <UserStatusCount
+                    :course-slug="props.courseSlug"
+                    :user-id="csu.user_id"
+                  ></UserStatusCount>
+                </div>
+              </template>
+              <template #link>
+                <router-link
+                  :to="{
+                    name: 'profileLearningPath',
+                    params: { userId: csu.user_id, courseSlug: props.courseSlug },
+                  }"
+                  class="link w-full lg:text-right"
+                >
+                  {{ $t("general.profileLink") }}
+                </router-link>
+              </template>
+            </ItPersonRow>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div v-else class="container-large mt-4">
+      <!-- No circle selected -->
+      <span class="text-lg text-orange-600">
+        {{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
+      </span>
+    </div>
+  </div>
+  <div v-else class="container-large mt-4">
+    <span class="text-lg text-orange-600">
+      <!-- No circle at all (should never happen, mostly
+        for us to reduce confusion why the cockpit is just empty...) -->
+      {{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
+    </span>
+  </div>
+</template>
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitExpertPage.vue b/client/src/pages/cockpit/cockpitPage/CockpitExpertPage.vue
deleted file mode 100644
index c93483a5..00000000
--- a/client/src/pages/cockpit/cockpitPage/CockpitExpertPage.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<script setup lang="ts">
-import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
-import ItPersonRow from "@/components/ui/ItPersonRow.vue";
-
-import SubmissionsOverview from "@/components/cockpit/SubmissionsOverview.vue";
-import UserStatusCount from "@/components/cockpit/UserStatusCount.vue";
-import CourseSessionDueDatesList from "@/components/dueDates/CourseSessionDueDatesList.vue";
-import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables";
-import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
-import { useExpertCockpitStore } from "@/stores/expertCockpit";
-import log from "loglevel";
-
-const props = defineProps<{
-  courseSlug: string;
-}>();
-
-log.debug("CockpitIndexPage created", props.courseSlug);
-
-const { loading } = useExpertCockpitPageData(props.courseSlug);
-
-const expertCockpitStore = useExpertCockpitStore();
-const courseSession = useCurrentCourseSession();
-const courseSessionDetailResult = useCourseSessionDetailQuery();
-</script>
-
-<template>
-  <div v-if="!loading" class="bg-gray-200">
-    <div v-if="expertCockpitStore.circles?.length">
-      <div v-if="expertCockpitStore.currentCircle" class="container-large">
-        <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
-          <h1>Cockpit</h1>
-          <ItDropdownSelect
-            :model-value="expertCockpitStore.currentCircle"
-            class="mt-4 w-full lg:mt-0 lg:w-96"
-            :items="expertCockpitStore.circles"
-            @update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent"
-          ></ItDropdownSelect>
-        </div>
-        <!-- Status -->
-        <div class="mb-4 gap-4 lg:grid lg:grid-cols-3 lg:grid-rows-none">
-          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
-            <div>
-              <h3 class="heading-3 mb-4 flex items-center gap-2">
-                {{ $t("Trainerunterlagen") }}
-              </h3>
-              <div class="mb-4">
-                {{ $t("cockpit.trainerFilesText") }}
-              </div>
-            </div>
-            <div>
-              <a
-                href="https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI"
-                class="btn-secondary min-w-min"
-                target="_blank"
-              >
-                {{ $t("MS Teams öffnen") }}
-              </a>
-            </div>
-          </div>
-          <div
-            v-if="courseSession.course.configuration.enable_circle_documents"
-            class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0"
-            data-cy="circle-documents"
-          >
-            <div>
-              <h3 class="heading-3 mb-4 flex items-center gap-2">
-                {{ $t("a.Unterlagen für Teilnehmenden") }}
-              </h3>
-              <div class="mb-4">
-                {{ $t("a.Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.") }}
-              </div>
-            </div>
-            <div>
-              <router-link
-                :to="`/course/${props.courseSlug}/cockpit/documents`"
-                class="btn-secondary min-w-min"
-              >
-                {{ $t("a.Zum Unterlagen-Upload") }}
-              </router-link>
-            </div>
-          </div>
-          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
-            <div>
-              <h3 class="heading-3 mb-4 flex items-center gap-2">
-                {{ $t("a.Anwesenheitskontrolle Präsenzkurse") }}
-              </h3>
-              <div class="mb-4">
-                {{
-                  $t(
-                    "Hier überprüfst und bestätigst du die Anwesenheit deiner Teilnehmenden."
-                  )
-                }}
-              </div>
-            </div>
-            <div>
-              <router-link
-                :to="`/course/${props.courseSlug}/cockpit/attendance`"
-                class="btn-secondary min-w-min"
-              >
-                {{ $t("Anwesenheit prüfen") }}
-              </router-link>
-            </div>
-          </div>
-        </div>
-
-        <div class="mb-4 bg-white p-6">
-          <CourseSessionDueDatesList
-            :course-session-id="courseSession.id"
-            :circle-id="expertCockpitStore.currentCircle.id"
-            :max-count="4"
-          ></CourseSessionDueDatesList>
-        </div>
-        <SubmissionsOverview
-          :course-session="courseSession"
-          :selected-circle="expertCockpitStore.currentCircle.id"
-        ></SubmissionsOverview>
-        <div class="pt-4">
-          <!-- progress -->
-          <div
-            v-if="courseSessionDetailResult.filterMembers().length > 0"
-            class="bg-white p-6"
-          >
-            <h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
-            <ul>
-              <ItPersonRow
-                v-for="csu in courseSessionDetailResult.filterMembers()"
-                :key="csu.user_id"
-                :name="`${csu.first_name} ${csu.last_name}`"
-                :avatar-url="csu.avatar_url"
-              >
-                <template #center>
-                  <div
-                    class="mt-2 flex w-full flex-col items-center justify-start lg:mt-0 lg:flex-row"
-                  >
-                    <LearningPathDiagram
-                      :course-session-id="courseSession.id"
-                      :course-slug="props.courseSlug"
-                      :user-id="csu.user_id"
-                      :show-circle-slugs="[expertCockpitStore.currentCircle.slug]"
-                      diagram-type="singleSmall"
-                      class="mr-4"
-                    ></LearningPathDiagram>
-                    <p class="lg:min-w-[150px]">
-                      {{ expertCockpitStore.currentCircle.title }}
-                    </p>
-                    <UserStatusCount
-                      :course-slug="props.courseSlug"
-                      :user-id="csu.user_id"
-                    ></UserStatusCount>
-                  </div>
-                </template>
-                <template #link>
-                  <router-link
-                    :to="{
-                      name: 'profileLearningPath',
-                      params: { userId: csu.user_id, courseSlug: props.courseSlug },
-                    }"
-                    class="link w-full lg:text-right"
-                  >
-                    {{ $t("general.profileLink") }}
-                  </router-link>
-                </template>
-              </ItPersonRow>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div v-else class="container-large mt-4">
-        <!-- No circle selected -->
-        <span class="text-lg text-orange-600">
-          {{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
-        </span>
-      </div>
-    </div>
-    <div v-else class="container-large mt-4">
-      <span class="text-lg text-orange-600">
-        <!-- No circle at all (should never happen, mostly
-        for us to reduce confusion why the cockpit is just empty...) -->
-        {{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue b/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
new file mode 100644
index 00000000..a5fca484
--- /dev/null
+++ b/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import SubNavigation from "@/components/header/SubNavigation.vue";
+import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
+import { ATTENDANCE_ROUTE, COCKPIT_ROUTE, DOCUMENTS_ROUTE } from "@/router/names";
+import { useTranslation } from "i18next-vue";
+import log from "loglevel";
+
+const props = defineProps<{
+  courseSlug: string;
+}>();
+
+log.debug("CockpitIndexPage created", props.courseSlug);
+
+const { loading } = useExpertCockpitPageData(props.courseSlug);
+
+const defaultRoute = {
+  name: COCKPIT_ROUTE,
+};
+const attendanceRoute = {
+  name: ATTENDANCE_ROUTE,
+};
+const documentsRoute = {
+  name: DOCUMENTS_ROUTE,
+};
+
+const { t } = useTranslation();
+
+const items = [
+  { id: 1, name: t("a.Übersicht"), route: defaultRoute },
+  { id: 2, name: t("a.Teilnehmer"), route: attendanceRoute },
+  { id: 3, name: t("a.Unterlagen"), route: documentsRoute },
+
+  {
+    id: 4,
+    name: "Vorschau Teilnehmer",
+    route: "https://iterativ.ch",
+  },
+  {
+    id: 5,
+    name: "MS Teams",
+    route: "https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI",
+  },
+];
+</script>
+
+<template>
+  <div v-if="!loading" class="bg-gray-200">
+    <SubNavigation :items="items" />
+    <router-view />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index 8c13cb37..c362b1b4 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/client/src/pages/competence/CompetenceParentPage.vue
@@ -56,17 +56,6 @@ const items: SubNavEntry[] = [
     route: selfEvaluationRoute,
   },
   { id: 3, name: t("a.Handlungskompetenzen"), route: competencesRoute },
-
-  {
-    id: 4,
-    name: "MS Teams",
-    route: "https://iterativ.ch",
-  },
-  {
-    id: 5,
-    name: "Vorschau Teilnehmer",
-    route: "https://iterativ.ch",
-  },
 ];
 </script>
 

From db399e2aa286192a82938b67199298fbabf7b469 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 11 Nov 2024 17:04:44 +0100
Subject: [PATCH 04/32] Add attendance widget and status component

---
 .../cockpitPage/AttendanceOverview.vue        | 21 +++++++++
 .../cockpit/cockpitPage/AttendanceStatus.vue  | 43 +++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
 create mode 100644 client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue

diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
new file mode 100644
index 00000000..fd256034
--- /dev/null
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { ATTENDANCE_ROUTE } from "@/router/names";
+import AttendanceStatus from "./AttendanceStatus.vue";
+
+const attendanceRoute = {
+  name: ATTENDANCE_ROUTE,
+};
+</script>
+
+<template>
+  <div class="my-4 flex flex-row items-center justify-between bg-white p-6 lg:my-0">
+    <div>
+      <h2 class="text-base font-bold">Präsenzkurs</h2>
+      <p class="text-sm text-gray-800">4. März 2024</p>
+    </div>
+    <AttendanceStatus status="now" />
+    <router-link :to="attendanceRoute" class="underline">
+      {{ $t("a.Anwesenheit anschauen") }}
+    </router-link>
+  </div>
+</template>
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
new file mode 100644
index 00000000..489e7e7f
--- /dev/null
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export type Status = "done" | "soon" | "now"; // todo: define this
+
+export interface Props {
+  status: Status;
+}
+
+const props = defineProps<Props>();
+
+const style = computed(() => {
+  switch (props.status) {
+    case "done":
+      return "bg-green-200";
+    case "soon":
+      return "bg-gray-200";
+    case "now":
+    default:
+      return "bg-sky-200";
+  }
+});
+
+const icon = computed(() => {
+  switch (props.status) {
+    case "done":
+      return "it-icon-check";
+    case "soon":
+    case "now":
+    default:
+      return "it-icon-info";
+  }
+});
+</script>
+<template>
+  <div
+    class="space-between flex flex-row items-center gap-1 rounded py-1 pl-2 pr-4"
+    :class="style"
+  >
+    <component :is="icon" class="h-7 w-7" />
+    <p>Du hast die Anwesenheit bestätigt.</p>
+  </div>
+</template>

From 55515dd10fa7abbd444ac51b19db661072c26eb2 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 12 Nov 2024 14:53:43 +0100
Subject: [PATCH 05/32] Fix route props

---
 client/src/router/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index a24e53b2..c5f286a7 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -188,6 +188,7 @@ const router = createRouter({
         {
           path: "profile/:userId",
           component: () => import("@/pages/userProfile/UserProfilePage.vue"),
+          props: true,
           children: [
             {
               path: "learning-path",

From 93660cf421416e19f6f89c6083c3509e85152711 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 12 Nov 2024 16:02:50 +0100
Subject: [PATCH 06/32] Hide documents link conditionally

---
 .../cockpitPage/CockpitExpertParentPage.vue   | 23 ++++++++++++++++---
 cypress/e2e/settings.cy.js                    |  8 ++++++-
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue b/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
index a5fca484..3e861216 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
+++ b/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import SubNavigation from "@/components/header/SubNavigation.vue";
+import { useCurrentCourseSession } from "@/composables";
 import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
 import { ATTENDANCE_ROUTE, COCKPIT_ROUTE, DOCUMENTS_ROUTE } from "@/router/names";
 import { useTranslation } from "i18next-vue";
 import log from "loglevel";
+import { computed } from "vue";
 
 const props = defineProps<{
   courseSlug: string;
@@ -25,10 +27,25 @@ const documentsRoute = {
 
 const { t } = useTranslation();
 
-const items = [
+const courseSession = useCurrentCourseSession();
+
+const enableDocuments = computed(() => {
+  return !!courseSession.value.course.configuration.enable_circle_documents;
+});
+
+const items = computed(() => [
   { id: 1, name: t("a.Übersicht"), route: defaultRoute },
   { id: 2, name: t("a.Teilnehmer"), route: attendanceRoute },
-  { id: 3, name: t("a.Unterlagen"), route: documentsRoute },
+  ...(enableDocuments.value
+    ? [
+        {
+          id: 3,
+          name: t("a.Unterlagen"),
+          route: documentsRoute,
+          dataCy: "circle-documents",
+        },
+      ]
+    : []),
 
   {
     id: 4,
@@ -40,7 +57,7 @@ const items = [
     name: "MS Teams",
     route: "https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI",
   },
-];
+]);
 </script>
 
 <template>
diff --git a/cypress/e2e/settings.cy.js b/cypress/e2e/settings.cy.js
index 94e52c7a..70a986df 100644
--- a/cypress/e2e/settings.cy.js
+++ b/cypress/e2e/settings.cy.js
@@ -1,20 +1,24 @@
-import {EXPERT_COCKPIT_URL, login} from "./helpers";
+import { EXPERT_COCKPIT_URL, login } from "./helpers";
 
 describe("settings.cy.js", () => {
   beforeEach(() => {
     cy.manageCommand("cypress_reset");
+    cy.intercept("/server/graphql").as("graphql");
   });
 
   describe("with circle documents enabled", () => {
     it("student can see circle documents", () => {
       login("test-student1@example.com", "test");
       cy.visit("/course/test-lehrgang/learn/fahrzeug");
+      cy.wait(["@graphql", "@graphql"]);
       cy.get('[data-cy="circle-document-section"]').should("exist");
     });
 
     it("trainer can see circle documents", () => {
       login("test-trainer1@example.com", "test");
+
       cy.visit(EXPERT_COCKPIT_URL);
+      cy.wait(["@graphql", "@graphql"]);
       cy.get('[data-cy="circle-documents"]').should("exist");
     });
   });
@@ -27,6 +31,7 @@ describe("settings.cy.js", () => {
     it("student cannot see circle documents", () => {
       login("test-student1@example.com", "test");
       cy.visit("/course/test-lehrgang/learn/fahrzeug");
+      cy.wait(["@graphql", "@graphql"]);
       cy.get('[data-cy="circle-title"]').should("contain", "Fahrzeug");
       cy.get('[data-cy="circle-document-section"]').should("not.exist");
     });
@@ -34,6 +39,7 @@ describe("settings.cy.js", () => {
     it("trainer cannot see circle documents", () => {
       login("test-trainer1@example.com", "test");
       cy.visit(EXPERT_COCKPIT_URL);
+      cy.wait(["@graphql", "@graphql"]);
       cy.get('[data-cy="circle-documents"]').should("not.exist");
     });
   });

From d6c182b5ab012e6de608b8b5fcc0dd37949a87cb Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 12 Nov 2024 16:18:56 +0100
Subject: [PATCH 07/32] Fix more route props

---
 client/src/router/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index c5f286a7..22235cfc 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -95,10 +95,12 @@ const router = createRouter({
         {
           path: "media",
           component: () => import("@/pages/mediaLibrary/MediaLibraryParentPage.vue"),
+          props: true,
           children: [
             {
               path: "",
               component: () => import("@/pages/mediaLibrary/MediaLibraryIndexPage.vue"),
+              props: true,
             },
             {
               path: ":categorySlug",
@@ -158,6 +160,7 @@ const router = createRouter({
           children: [
             {
               path: "",
+              props: true,
               component: () =>
                 import("../pages/learningPath/learningPathPage/LearningPathPage.vue"),
             },

From 1c669474e9461af057a669974e084f2704977f90 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 13 Nov 2024 12:45:53 +0100
Subject: [PATCH 08/32] Extend AttendanceStatus component with date
 functionality

---
 .../src/components/dueDates/dueDatesUtils.ts  |  9 ++++
 .../cockpit/cockpitPage/AttendanceStatus.vue  | 42 +++++++++++++++++--
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/client/src/components/dueDates/dueDatesUtils.ts b/client/src/components/dueDates/dueDatesUtils.ts
index 8a59a428..0e03c76f 100644
--- a/client/src/components/dueDates/dueDatesUtils.ts
+++ b/client/src/components/dueDates/dueDatesUtils.ts
@@ -59,3 +59,12 @@ export const getWeekday = (date: Dayjs) => {
   }
   return "";
 };
+
+export const isInFuture = (date: string) => {
+  // is today before the prop date?
+  return dayjs().isBefore(date, "day");
+};
+
+export const howManyDaysInFuture = (date: string) => {
+  return dayjs(date).diff(dayjs().startOf("day"), "day");
+};
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
index 489e7e7f..f8b74f02 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
@@ -1,16 +1,31 @@
 <script setup lang="ts">
+import { howManyDaysInFuture, isInFuture } from "@/components/dueDates/dueDatesUtils";
+import { useTranslation } from "i18next-vue";
 import { computed } from "vue";
 
 export type Status = "done" | "soon" | "now"; // todo: define this
 
 export interface Props {
-  status: Status;
+  done: boolean;
+  date: string;
 }
 
+const { t } = useTranslation();
+
 const props = defineProps<Props>();
 
+const status = computed(() => {
+  if (props.done) {
+    return "done";
+  }
+  if (isInFuture(props.date)) {
+    return "soon";
+  }
+  return "now";
+});
+
 const style = computed(() => {
-  switch (props.status) {
+  switch (status.value) {
     case "done":
       return "bg-green-200";
     case "soon":
@@ -22,7 +37,7 @@ const style = computed(() => {
 });
 
 const icon = computed(() => {
-  switch (props.status) {
+  switch (status.value) {
     case "done":
       return "it-icon-check";
     case "soon":
@@ -31,13 +46,32 @@ const icon = computed(() => {
       return "it-icon-info";
   }
 });
+
+const days = computed(() => {
+  return howManyDaysInFuture(props.date);
+});
+
+const text = computed(() => {
+  switch (status.value) {
+    case "done":
+      return t("a.Du hast die Anwesenheit bestätigt.");
+    case "soon":
+      return t("a.Der Präsenzkurs findet in {{days}} Tagen statt.", {
+        days: days.value,
+      });
+    case "now":
+    default:
+      return t("a.Überprüfe jetzt die Anwesenheit.");
+  }
+});
 </script>
+
 <template>
   <div
     class="space-between flex flex-row items-center gap-1 rounded py-1 pl-2 pr-4"
     :class="style"
   >
     <component :is="icon" class="h-7 w-7" />
-    <p>Du hast die Anwesenheit bestätigt.</p>
+    <p>{{ text }}</p>
   </div>
 </template>

From eb1d814680090e3fef07a7300913eb43fdd16efd Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 13 Nov 2024 14:43:37 +0100
Subject: [PATCH 09/32] Add test for new component and date helpers

---
 .../__tests__/AttendanceStatus.spec.ts        | 49 +++++++++++++++++++
 .../components/__tests__/dueDateUtils.spec.ts | 16 ++++++
 2 files changed, 65 insertions(+)
 create mode 100644 client/src/components/__tests__/AttendanceStatus.spec.ts
 create mode 100644 client/src/components/__tests__/dueDateUtils.spec.ts

diff --git a/client/src/components/__tests__/AttendanceStatus.spec.ts b/client/src/components/__tests__/AttendanceStatus.spec.ts
new file mode 100644
index 00000000..c9c31a72
--- /dev/null
+++ b/client/src/components/__tests__/AttendanceStatus.spec.ts
@@ -0,0 +1,49 @@
+import { i18nextInit, loadI18nextLocaleMessages } from "@/i18nextWrapper";
+import AttendanceStatus from "@/pages/cockpit/cockpitPage/AttendanceStatus.vue";
+import { config, mount } from "@vue/test-utils";
+import i18next from "i18next";
+import I18NextVue from "i18next-vue";
+import { expect, vi } from "vitest";
+
+describe("AttendanceStatus.vue", async () => {
+  beforeEach(async () => {
+    vi.useFakeTimers();
+    const date = new Date(1999, 2, 31);
+    vi.setSystemTime(date);
+    await i18nextInit();
+    await loadI18nextLocaleMessages("de");
+    config.global.plugins = [[I18NextVue, { i18next }]];
+  });
+
+  test("Attendance check complete", () => {
+    const wrapper = mount(AttendanceStatus, {
+      props: {
+        done: true,
+        date: "",
+      },
+    });
+    expect(wrapper.text()).toContain("Du hast die Anwesenheit bestätigt.");
+  });
+
+  test("Attendance check future", () => {
+    const future = "1999-04-02T06:30:00+00:00";
+    const wrapper = mount(AttendanceStatus, {
+      props: {
+        done: false,
+        date: future,
+      },
+    });
+    expect(wrapper.text()).toContain("Der Präsenzkurs findet in 2 Tagen statt.");
+  });
+
+  test("Attendance check now", () => {
+    const yesterday = "1999-03-30T06:30:00+00:00";
+    const wrapper = mount(AttendanceStatus, {
+      props: {
+        done: false,
+        date: yesterday,
+      },
+    });
+    expect(wrapper.text()).toContain("Überprüfe jetzt die Anwesenheit.");
+  });
+});
diff --git a/client/src/components/__tests__/dueDateUtils.spec.ts b/client/src/components/__tests__/dueDateUtils.spec.ts
new file mode 100644
index 00000000..57422294
--- /dev/null
+++ b/client/src/components/__tests__/dueDateUtils.spec.ts
@@ -0,0 +1,16 @@
+import { expect, vi } from "vitest";
+import { isInFuture } from "../dueDates/dueDatesUtils";
+
+test("Date Utils", () => {
+  vi.useFakeTimers();
+  const date = new Date(1999, 2, 31);
+  vi.setSystemTime(date);
+
+  const today = "1999-03-31T06:30:00+00:00";
+  const yesterday = "1999-03-30T06:30:00+00:00";
+  const tomorrow = "1999-04-01T06:30:00+00:00";
+
+  expect(isInFuture(yesterday)).toBeFalsy();
+  expect(isInFuture(today)).toBeFalsy();
+  expect(isInFuture(tomorrow)).toBeTruthy();
+});

From abe60e746801b02324de136704d19278a992c57b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 13 Nov 2024 16:48:35 +0100
Subject: [PATCH 10/32] Make dropdown component usable as heading

---
 client/src/components/ui/ItDropdownSelect.vue | 30 +++++++++++++------
 .../cockpitPage/CockpitExpertHomePage.vue     |  4 ++-
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ui/ItDropdownSelect.vue b/client/src/components/ui/ItDropdownSelect.vue
index b1cb47df..7947550d 100644
--- a/client/src/components/ui/ItDropdownSelect.vue
+++ b/client/src/components/ui/ItDropdownSelect.vue
@@ -9,6 +9,8 @@ interface Props {
   items?: DropdownSelectable[];
   borderless?: boolean;
   placeholderText?: string | null;
+  asHeading?: boolean; // style the dropdown to be used as a page heading
+  typeName?: string; // to display the type of the selected item, e.g. `Circle: Fahrzeug` instead of `Fahrzeug`
 }
 
 const emit = defineEmits<{
@@ -24,6 +26,8 @@ const props = withDefaults(defineProps<Props>(), {
   },
   items: () => [],
   placeholderText: null,
+  asHeading: false,
+  typeName: "",
 });
 
 const dropdownSelected = computed<DropdownSelectable>({
@@ -36,26 +40,34 @@ const dropdownSelected = computed<DropdownSelectable>({
   <Listbox v-model="dropdownSelected" as="div">
     <div class="relative w-full">
       <ListboxButton
-        class="relative flex w-full cursor-default flex-row items-center bg-white py-3 pl-5 pr-10 text-left"
-        :class="{
-          border: !props.borderless,
-          'font-bold': !props.borderless,
-        }"
+        :class="[
+          {
+            border: !borderless && !asHeading,
+            'font-bold': !borderless,
+          },
+          asHeading
+            ? 'group flex w-full items-center gap-1 rounded-md bg-transparent px-3 text-base focus:outline-none'
+            : 'relative flex w-full cursor-default flex-row items-center bg-white py-3 pl-5 pr-10 text-left',
+        ]"
         data-cy="dropdown-select"
       >
         <span v-if="dropdownSelected.iconName" class="mr-4">
           <component :is="dropdownSelected.iconName"></component>
         </span>
-        <span class="block truncate">
-          {{ dropdownSelected.name }}
+        <span class="block h-11 truncate text-4xl">
+          {{ typeName }} {{ dropdownSelected.name }}
           <span v-if="placeholderText && !dropdownSelected.name" class="text-gray-900">
             {{ placeholderText }}
           </span>
         </span>
         <span
-          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+          class="pointer-events-none flex items-center pr-2"
+          :class="asHeading ? '' : 'absolute inset-y-0 right-0'"
         >
-          <it-icon-arrow-down class="h-5 w-5" aria-hidden="true" />
+          <it-icon-arrow-down
+            :class="asHeading ? 'h-12 w-12' : 'h-5 w-5'"
+            aria-hidden="true"
+          />
         </span>
       </ListboxButton>
 
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue b/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
index 052f347b..1f659dda 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
+++ b/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
@@ -19,10 +19,12 @@ const props = defineProps<{
 </script>
 <template>
   <div v-if="expertCockpitStore.circles?.length">
-    <div v-if="expertCockpitStore.currentCircle" class="container-large">
+    <div v-if="expertCockpitStore.currentCircle" class="container-large pt-10">
       <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
         <ItDropdownSelect
+          :as-heading="true"
           :model-value="expertCockpitStore.currentCircle"
+          type-name="Circle:"
           class="mt-4 w-full lg:mt-0 lg:w-96"
           :items="expertCockpitStore.circles"
           @update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent"

From f8b8347bb9a6c355bb6f9f5a5098561a118dd546 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 13 Nov 2024 16:50:52 +0100
Subject: [PATCH 11/32] Refactor attendance page, add components for the check
 and the status

---
 .../AttendanceCheckPage.vue                   | 211 ++++++++----------
 .../cockpit/cockpitPage/AttendanceCheck.vue   |  45 ++++
 .../cockpit/cockpitPage/AttendanceStatus.vue  |   2 +-
 client/src/stores/expertCockpit.ts            |  95 ++++----
 4 files changed, 196 insertions(+), 157 deletions(-)
 create mode 100644 client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue

diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index 616aafe7..1e9df4fd 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -1,27 +1,29 @@
 <script setup lang="ts">
 import ItCheckbox from "@/components/ui/ItCheckbox.vue";
-import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import ItPersonRow from "@/components/ui/ItPersonRow.vue";
 import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables";
-import type { AttendanceUserStatus } from "@/gql/graphql";
-import { graphqlClient } from "@/graphql/client";
+import type {
+  AttendanceUserStatus,
+  CourseSessionAttendanceCourseObjectType,
+} from "@/gql/graphql";
 import { ATTENDANCE_CHECK_MUTATION } from "@/graphql/mutations";
 import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries";
 import { exportAttendance } from "@/services/dashboard";
+import { useExpertCockpitStore } from "@/stores/expertCockpit";
 import { useUserStore } from "@/stores/user";
-import type { DropdownSelectable } from "@/types";
 import { openDataAsXls } from "@/utils/export";
-import { useMutation } from "@urql/vue";
-import dayjs from "dayjs";
-import { useTranslation } from "i18next-vue";
+import { useMutation, useQuery } from "@urql/vue";
+import { useDateFormat } from "@vueuse/core";
 import log from "loglevel";
-import { computed, onMounted, reactive, watch } from "vue";
+import { computed, onMounted, ref } from "vue";
+import AttendanceCheck from "../cockpitPage/AttendanceCheck.vue";
+import AttendanceStatus from "../cockpitPage/AttendanceStatus.vue";
 
-const { t } = useTranslation();
 const attendanceMutation = useMutation(ATTENDANCE_CHECK_MUTATION);
 const courseSessionDetailResult = useCourseSessionDetailQuery();
 const userStore = useUserStore();
 const courseSession = useCurrentCourseSession();
+const expertCockpitStore = useExpertCockpitStore();
 
 const attendanceCourses = computed(() => {
   return courseSessionDetailResult.courseSessionDetail.value?.attendance_courses ?? [];
@@ -33,44 +35,28 @@ const courseSessionDetail = computed(() => {
 
 const attendanceCourseCircleId = computed(() => {
   const selectedAttendandeCourse = attendanceCourses.value.find(
-    (course) => course.id === state.attendanceCourseSelected.id
+    (course) => course.id === currentCourse.value.id
   );
   return selectedAttendandeCourse?.learning_content?.circle?.id;
 });
 
-const presenceCoursesDropdownOptions = computed(() => {
-  return attendanceCourses.value.map(
-    (attendanceCourse) =>
-      ({
-        id: attendanceCourse.id,
-        name: `${t("a.Präsenzkurs")} ${
-          attendanceCourse.learning_content.circle?.title
-        } ${dayjs(attendanceCourse.due_date?.start).format("DD.MM.YYYY")}`,
-      }) as DropdownSelectable
-  );
-});
+// const currentCircle = computed(() => expertCockpitStore.currentCircle);
 
-const state = reactive({
-  userPresence: new Map<string, boolean>(),
-  attendanceCourseSelected: presenceCoursesDropdownOptions.value[0],
-  disclaimerConfirmed: false,
-  attendanceSaved: false,
-});
+const currentCourse = computed(() => expertCockpitStore.currentCourse);
+// const currentCourse = computed(() => {
+//   return attendanceCourses.value.find(
+//     (i) => i.learning_content.circle?.id == currentCircle.value?.id
+//   );
+// });
 
-watch(
-  attendanceCourses,
-  (newVal) => {
-    if (newVal && newVal.length > 0) {
-      state.attendanceCourseSelected = presenceCoursesDropdownOptions.value[0];
-    }
-  },
-  { immediate: true }
-);
+const userPresence = ref(new Map<string, boolean>());
+const disclaimerConfirmed = ref(false);
+const attendanceSaved = ref(false);
 
 function resetState() {
-  state.userPresence = new Map<string, boolean>();
-  state.disclaimerConfirmed = false;
-  state.attendanceSaved = false;
+  userPresence.value = new Map<string, boolean>();
+  disclaimerConfirmed.value = false;
+  attendanceSaved.value = false;
 }
 
 const onSubmit = async () => {
@@ -78,54 +64,62 @@ const onSubmit = async () => {
     user_id: string;
     status: AttendanceUserStatus;
   };
-  const attendanceUserList: UserPresence[] = Array.from(state.userPresence.keys()).map(
+  console.log(Array.from(userPresence.value.keys()));
+  const attendanceUserList: UserPresence[] = Array.from(userPresence.value.keys()).map(
     (key) => ({
       user_id: key,
-      status: state.userPresence.get(key) ? "PRESENT" : "ABSENT",
+      status: userPresence.value.get(key) ? "PRESENT" : "ABSENT",
     })
   );
+  console.log(attendanceUserList);
   const res = await attendanceMutation.executeMutation({
-    attendanceCourseId: state.attendanceCourseSelected.id.toString(),
+    attendanceCourseId: (
+      currentCourse.value as CourseSessionAttendanceCourseObjectType
+    ).id.toString(),
     attendanceUserList: attendanceUserList,
   });
   if (res.error) {
     log.error("Could not submit attendance check: ", res.error);
     return;
   }
-  state.disclaimerConfirmed = false;
-  state.attendanceSaved = true;
+  disclaimerConfirmed.value = false;
+  attendanceSaved.value = true;
   log.info("Attendance check submitted: ", res);
 };
 
 const loadAttendanceData = async () => {
   resetState();
   // with changing variables `useQuery` does not seem to work correctly
-  if (state.attendanceCourseSelected) {
-    const res = await graphqlClient.query(
-      ATTENDANCE_CHECK_QUERY,
-      {
-        courseSessionId: state.attendanceCourseSelected.id.toString(),
+  if (currentCourse.value) {
+    const result = await useQuery({
+      query: ATTENDANCE_CHECK_QUERY,
+      variables: {
+        courseSessionId: currentCourse.value.id.toString(),
       },
-      {
-        requestPolicy: "network-only",
-      }
-    );
+      requestPolicy: "network-only",
+    });
+    console.log(result.data.value?.course_session_attendance_course);
     const attendanceUserList =
-      res.data?.course_session_attendance_course?.attendance_user_list ?? [];
+      result.data?.value?.course_session_attendance_course?.attendance_user_list ?? [];
+    console.log(attendanceUserList);
     for (const user of attendanceUserList) {
       if (!user) continue;
-      state.userPresence.set(user.user_id, user.status === "PRESENT");
+      userPresence.value.set(user.user_id, user.status === "PRESENT");
     }
     if (attendanceUserList.length !== 0) {
-      state.attendanceSaved = true;
+      attendanceSaved.value = true;
     }
   }
 };
 
 function editAgain() {
-  state.attendanceSaved = false;
+  attendanceSaved.value = false;
 }
 
+const toggleDisclaimer = (newValue: boolean) => {
+  disclaimerConfirmed.value = newValue;
+};
+
 async function exportData() {
   const data = await exportAttendance(
     {
@@ -137,19 +131,26 @@ async function exportData() {
   openDataAsXls(data.encoded_data, data.file_name);
 }
 
-onMounted(() => {
+onMounted(async () => {
   log.debug("AttendanceCheckPage mounted");
   loadAttendanceData();
 });
 
-watch(
-  () => state.attendanceCourseSelected,
-  () => {
-    log.debug("attendanceCourseSelected changed", state.attendanceCourseSelected);
-    loadAttendanceData();
-  },
-  { immediate: true }
-);
+const courseDueDate = computed(() => {
+  if (currentCourse.value && currentCourse.value.due_date?.start) {
+    return currentCourse.value.due_date.start;
+  }
+  return "";
+});
+
+const formattedCourseDueDate = computed(() => {
+  if (courseDueDate.value) {
+    return useDateFormat(courseDueDate.value, "D. MMMM YYYY", {
+      locales: "de-CH",
+    });
+  }
+  return "";
+});
 </script>
 
 <template>
@@ -165,9 +166,8 @@ watch(
         </router-link>
       </nav>
       <div class="flex items-center justify-between">
-        <h3 class="pb-4 text-xl font-bold">{{ $t("a.Anwesenheit Präsenzkurse") }}</h3>
         <button
-          v-if="state.attendanceSaved"
+          v-if="attendanceSaved"
           class="flex"
           data-cy="export-button"
           @click="exportData"
@@ -176,54 +176,32 @@ watch(
           <span class="ml inline-block">{{ $t("a.Als Excel exportieren") }}</span>
         </button>
       </div>
-      <section v-if="attendanceCourses.length && state.attendanceCourseSelected">
-        <div class="flex flex-row flex-wrap justify-between bg-white p-6">
-          <ItDropdownSelect
-            v-model="state.attendanceCourseSelected"
-            :items="presenceCoursesDropdownOptions ?? []"
-          ></ItDropdownSelect>
-          <div
-            v-if="!state.attendanceSaved"
-            class="flex flex-row flex-wrap items-center space-y-2 md:space-y-0"
-          >
-            <ItCheckbox
-              :checkbox-item="{
-                value: true,
-                checked: state.disclaimerConfirmed,
-              }"
-              @toggle="state.disclaimerConfirmed = !state.disclaimerConfirmed"
-            ></ItCheckbox>
-            <p class="w-64 pr-4 text-sm">
-              {{
-                $t(
-                  "Ich will die Anwesenheit der untenstehenden Personen definitiv bestätigen."
-                )
-              }}
-            </p>
-            <button
-              class="btn-primary"
-              :disabled="!state.disclaimerConfirmed"
-              @click="onSubmit"
-            >
-              {{ $t("Anwesenheit bestätigen") }}
-            </button>
+      <section v-if="attendanceCourses.length && currentCourse">
+        <div class="flex flex-col justify-between gap-8 bg-white py-6">
+          <div class="flex flex-col gap-2 px-6">
+            <h3 class="pb-1 text-4xl font-bold">{{ $t("a.Präsenzkurs") }}</h3>
+            <h5>Circle "{{ currentCourse?.learning_content.circle?.title }}"</h5>
+            <h5>{{ formattedCourseDueDate }}</h5>
           </div>
-          <div v-else class="self-center">
-            <p class="text-base">
-              {{ $t("a.Die Anwesenheit wurde definitiv bestätigt") }}
-            </p>
-            <button class="btn-link link" @click="editAgain()">
-              {{ $t("a.Erneut bearbeiten") }}
-            </button>
+          <div class="px-6">
+            <AttendanceStatus
+              class="px-6"
+              :done="attendanceSaved"
+              :date="courseDueDate"
+            />
           </div>
-        </div>
+          <AttendanceCheck
+            :attendance-saved="attendanceSaved"
+            :disclaimer-confirmed="disclaimerConfirmed"
+            @reopen="editAgain"
+            @toggle="toggleDisclaimer"
+            @confirm="onSubmit"
+          />
 
-        <div class="mt-4 flex flex-col bg-white p-6">
-          <div
-            v-for="(csu, index) in courseSessionDetailResult.filterMembers()"
-            :key="csu.user_id"
-          >
+          <div class="border-t border-gray-500 px-6">
             <ItPersonRow
+              v-for="(csu, index) in courseSessionDetailResult.filterMembers()"
+              :key="csu.user_id"
               :name="`${csu.first_name} ${csu.last_name}`"
               :avatar-url="csu.avatar_url"
               :class="0 === index ? 'border-none' : ''"
@@ -233,16 +211,13 @@ watch(
             >
               <template #leading>
                 <ItCheckbox
-                  :disabled="state.attendanceSaved"
+                  :disabled="attendanceSaved"
                   :checkbox-item="{
                     value: true,
-                    checked: state.userPresence.get(csu.user_id) as boolean,
+                    checked: userPresence.get(csu.user_id) as boolean,
                   }"
                   @toggle="
-                    state.userPresence.set(
-                      csu.user_id,
-                      !state.userPresence.get(csu.user_id)
-                    )
+                    userPresence.set(csu.user_id, !userPresence.get(csu.user_id))
                   "
                 ></ItCheckbox>
               </template>
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue b/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
new file mode 100644
index 00000000..a4b66c8b
--- /dev/null
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import ItCheckbox from "@/components/ui/ItCheckbox.vue";
+export interface Props {
+  attendanceSaved: boolean;
+  disclaimerConfirmed: boolean;
+}
+defineProps<Props>();
+defineEmits(["toggle", "reopen", "confirm"]);
+</script>
+
+<template>
+  <div v-if="!attendanceSaved" class="flex flex-col gap-4 px-6">
+    <div class="flex flex-row content-center items-center">
+      <ItCheckbox
+        :checkbox-item="{
+          value: true,
+          checked: disclaimerConfirmed,
+        }"
+        @toggle="$emit('toggle', !disclaimerConfirmed)"
+      ></ItCheckbox>
+      <p class="text-sm">
+        {{
+          $t(
+            "Ich will die Anwesenheit der untenstehenden Personen definitiv bestätigen."
+          )
+        }}
+      </p>
+    </div>
+    <button
+      class="btn-primary w-64"
+      :disabled="!disclaimerConfirmed"
+      @click="$emit('confirm')"
+    >
+      {{ $t("Anwesenheit bestätigen") }}
+    </button>
+  </div>
+  <div v-else class="px-6">
+    <p class="text-base">
+      {{ $t("a.Die Anwesenheit wurde definitiv bestätigt") }}
+    </p>
+    <button class="btn-link link" @click="$emit('reopen')">
+      {{ $t("a.Erneut bearbeiten") }}
+    </button>
+  </div>
+</template>
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
index f8b74f02..13219233 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
@@ -68,7 +68,7 @@ const text = computed(() => {
 
 <template>
   <div
-    class="space-between flex flex-row items-center gap-1 rounded py-1 pl-2 pr-4"
+    class="space-between inline-flex flex-row items-center gap-1 rounded py-1 pl-2 pr-4"
     :class="style"
   >
     <component :is="icon" class="h-7 w-7" />
diff --git a/client/src/stores/expertCockpit.ts b/client/src/stores/expertCockpit.ts
index ba8574d5..10816bca 100644
--- a/client/src/stores/expertCockpit.ts
+++ b/client/src/stores/expertCockpit.ts
@@ -1,50 +1,15 @@
-import { useCourseData } from "@/composables";
+import { useCourseData, useCourseSessionDetailQuery } from "@/composables";
+import type { CourseSessionAttendanceCourseObjectType } from "@/gql/graphql";
 import { useUserStore } from "@/stores/user";
 import type { CircleLight, CourseSessionUser, ExpertSessionUser } from "@/types";
 import log from "loglevel";
 import { defineStore } from "pinia";
+import { computed, ref } from "vue";
 
 type CircleExpertCockpit = CircleLight & {
   name: string;
 };
 
-export type ExpertCockpitStoreState = {
-  courseSessionMembers: CourseSessionUser[] | undefined;
-  circles: CircleExpertCockpit[] | undefined;
-  currentCircle: CircleExpertCockpit | undefined;
-};
-
-export const useExpertCockpitStore = defineStore({
-  id: "expertCockpit",
-  state: () => {
-    return {
-      courseSessionMembers: undefined,
-      circles: [],
-      currentCircle: undefined,
-    } as ExpertCockpitStoreState;
-  },
-  actions: {
-    async loadCircles(
-      courseSlug: string,
-      currentCourseSessionUser: CourseSessionUser | undefined
-    ) {
-      log.debug("loadCircles called", courseSlug);
-
-      this.circles = await courseCircles(courseSlug, currentCourseSessionUser);
-
-      if (this.circles?.length) {
-        await this.setCurrentCourseCircle(this.circles[0].slug);
-      }
-    },
-    async setCurrentCourseCircle(circleSlug: string) {
-      this.currentCircle = this.circles?.find((c) => c.slug === circleSlug);
-    },
-    async setCurrentCourseCircleFromEvent(event: CircleLight) {
-      await this.setCurrentCourseCircle(event.slug);
-    },
-  },
-});
-
 async function courseCircles(
   courseSlug: string,
   currentCourseSessionUser: CourseSessionUser | undefined
@@ -74,3 +39,57 @@ async function courseCircles(
 
   return [];
 }
+
+export type ExpertCockpitStoreState = {
+  courseSessionMembers: CourseSessionUser[] | undefined;
+  circles: CircleExpertCockpit[] | undefined;
+  currentCircle: CircleExpertCockpit | undefined;
+};
+
+export const useExpertCockpitStore = defineStore("expertCockpit", () => {
+  const courseSessionMembers = ref<CourseSessionUser[] | undefined>(undefined);
+  const circles = ref<CircleExpertCockpit[] | undefined>([]);
+  const currentCircle = ref<CircleExpertCockpit | undefined>(undefined);
+  const courseSessionDetailResult = useCourseSessionDetailQuery();
+
+  const attendanceCourses = computed(() => {
+    return (
+      courseSessionDetailResult.courseSessionDetail.value?.attendance_courses ?? []
+    );
+  });
+
+  const currentCourse = computed(() => {
+    return attendanceCourses.value.find(
+      (i) => i.learning_content.circle?.id == currentCircle.value?.id
+    );
+  });
+
+  const loadCircles = async (
+    courseSlug: string,
+    currentCourseSessionUser: CourseSessionUser | undefined
+  ) => {
+    log.debug("loadCircles called", courseSlug);
+
+    circles.value = await courseCircles(courseSlug, currentCourseSessionUser);
+
+    if (circles.value?.length) {
+      await setCurrentCourseCircle(circles.value[0].slug);
+    }
+  };
+
+  const setCurrentCourseCircle = async (circleSlug: string) => {
+    currentCircle.value = circles.value?.find((c) => c.slug === circleSlug);
+  };
+  const setCurrentCourseCircleFromEvent = async (event: CircleLight) => {
+    await setCurrentCourseCircle(event.slug);
+  };
+
+  return {
+    courseSessionMembers,
+    circles,
+    currentCircle,
+    loadCircles,
+    currentCourse,
+    setCurrentCourseCircleFromEvent,
+  };
+});

From 2fc37d0d0be6fdf4cfb23d1f2172ce9489b32481 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 13 Nov 2024 16:55:26 +0100
Subject: [PATCH 12/32] Clean up code

---
 .../AttendanceCheckPage.vue                   | 20 +------------------
 client/src/stores/expertCockpit.ts            |  1 -
 2 files changed, 1 insertion(+), 20 deletions(-)

diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index 1e9df4fd..e55f2484 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -33,21 +33,7 @@ const courseSessionDetail = computed(() => {
   return courseSessionDetailResult.courseSessionDetail.value;
 });
 
-const attendanceCourseCircleId = computed(() => {
-  const selectedAttendandeCourse = attendanceCourses.value.find(
-    (course) => course.id === currentCourse.value.id
-  );
-  return selectedAttendandeCourse?.learning_content?.circle?.id;
-});
-
-// const currentCircle = computed(() => expertCockpitStore.currentCircle);
-
 const currentCourse = computed(() => expertCockpitStore.currentCourse);
-// const currentCourse = computed(() => {
-//   return attendanceCourses.value.find(
-//     (i) => i.learning_content.circle?.id == currentCircle.value?.id
-//   );
-// });
 
 const userPresence = ref(new Map<string, boolean>());
 const disclaimerConfirmed = ref(false);
@@ -64,14 +50,12 @@ const onSubmit = async () => {
     user_id: string;
     status: AttendanceUserStatus;
   };
-  console.log(Array.from(userPresence.value.keys()));
   const attendanceUserList: UserPresence[] = Array.from(userPresence.value.keys()).map(
     (key) => ({
       user_id: key,
       status: userPresence.value.get(key) ? "PRESENT" : "ABSENT",
     })
   );
-  console.log(attendanceUserList);
   const res = await attendanceMutation.executeMutation({
     attendanceCourseId: (
       currentCourse.value as CourseSessionAttendanceCourseObjectType
@@ -98,10 +82,8 @@ const loadAttendanceData = async () => {
       },
       requestPolicy: "network-only",
     });
-    console.log(result.data.value?.course_session_attendance_course);
     const attendanceUserList =
       result.data?.value?.course_session_attendance_course?.attendance_user_list ?? [];
-    console.log(attendanceUserList);
     for (const user of attendanceUserList) {
       if (!user) continue;
       userPresence.value.set(user.user_id, user.status === "PRESENT");
@@ -124,7 +106,7 @@ async function exportData() {
   const data = await exportAttendance(
     {
       courseSessionIds: [Number(courseSession.value.id)],
-      circleIds: [Number(attendanceCourseCircleId.value)],
+      circleIds: [Number(currentCourse.value?.learning_content.circle?.id)],
     },
     userStore.language
   );
diff --git a/client/src/stores/expertCockpit.ts b/client/src/stores/expertCockpit.ts
index 10816bca..4616f101 100644
--- a/client/src/stores/expertCockpit.ts
+++ b/client/src/stores/expertCockpit.ts
@@ -1,5 +1,4 @@
 import { useCourseData, useCourseSessionDetailQuery } from "@/composables";
-import type { CourseSessionAttendanceCourseObjectType } from "@/gql/graphql";
 import { useUserStore } from "@/stores/user";
 import type { CircleLight, CourseSessionUser, ExpertSessionUser } from "@/types";
 import log from "loglevel";

From 995dbb5c78afc6560e38dba554a6bd0fead19893 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 13 Nov 2024 17:20:17 +0100
Subject: [PATCH 13/32] Pass correct props to AttendanceStatus on the overview
 page

---
 .../cockpitPage/AttendanceOverview.vue        | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
index fd256034..30b468b5 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
@@ -1,19 +1,62 @@
 <script lang="ts" setup>
+import type { CourseSessionAttendanceCourseObjectType } from "@/gql/graphql";
+import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries";
 import { ATTENDANCE_ROUTE } from "@/router/names";
+import { useExpertCockpitStore } from "@/stores/expertCockpit";
+import { useQuery } from "@urql/vue";
+import { useDateFormat } from "@vueuse/core";
+import { computed } from "vue";
 import AttendanceStatus from "./AttendanceStatus.vue";
 
 const attendanceRoute = {
   name: ATTENDANCE_ROUTE,
 };
+
+const expertCockpitStore = useExpertCockpitStore();
+const currentCourse = computed(() => expertCockpitStore.currentCourse);
+
+const shouldPause = computed(() => !currentCourse.value);
+const result = useQuery({
+  query: ATTENDANCE_CHECK_QUERY,
+  variables: () => ({
+    courseSessionId: (
+      currentCourse.value as CourseSessionAttendanceCourseObjectType
+    ).id.toString(),
+  }),
+  pause: shouldPause,
+});
+
+// todo: maybe we can move these next 3 computed values somewhere else, as they are also used in the AttendanceCheckPage component
+const courseDueDate = computed(() => {
+  if (currentCourse.value && currentCourse.value.due_date?.start) {
+    return currentCourse.value.due_date.start;
+  }
+  return "";
+});
+
+const attendanceSaved = computed(() => {
+  const attendanceUserList =
+    result.data?.value?.course_session_attendance_course?.attendance_user_list ?? [];
+  return attendanceUserList.length !== 0;
+});
+
+const formattedCourseDueDate = computed(() => {
+  if (courseDueDate.value) {
+    return useDateFormat(courseDueDate.value, "D. MMMM YYYY", {
+      locales: "de-CH",
+    });
+  }
+  return "";
+});
 </script>
 
 <template>
   <div class="my-4 flex flex-row items-center justify-between bg-white p-6 lg:my-0">
     <div>
       <h2 class="text-base font-bold">Präsenzkurs</h2>
-      <p class="text-sm text-gray-800">4. März 2024</p>
+      <p class="text-sm text-gray-800">{{ formattedCourseDueDate }}</p>
     </div>
-    <AttendanceStatus status="now" />
+    <AttendanceStatus :date="courseDueDate" :done="attendanceSaved" />
     <router-link :to="attendanceRoute" class="underline">
       {{ $t("a.Anwesenheit anschauen") }}
     </router-link>

From 3d742fb03a0f5dd4d01f28786cc0bae69dc6a57b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 13 Nov 2024 17:52:04 +0100
Subject: [PATCH 14/32] Add translations

---
 client/src/locales/de/translation.json |  4 ++++
 client/src/locales/fr/translation.json |  4 ++++
 client/src/locales/it/translation.json | 14 +++++---------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/client/src/locales/de/translation.json b/client/src/locales/de/translation.json
index b6e8936d..30e1265d 100644
--- a/client/src/locales/de/translation.json
+++ b/client/src/locales/de/translation.json
@@ -34,6 +34,7 @@
   "a.An Durchführung teilnehmen": "An Durchführung teilnehmen",
   "a.Anmelden": "Anmelden",
   "a.Anwesenheit": "Anwesenheit",
+  "a.Anwesenheit anschauen": "Anwesenheit anschauen",
   "a.Anwesenheit Präsenzkurse": "Anwesenheit Präsenzkurse",
   "a.Anwesenheitskontrolle Präsenzkurse": "Anwesenheitskontrolle Präsenzkurse",
   "a.Arbeiten": "Arbeiten",
@@ -84,6 +85,7 @@
   "a.Deine Änderungen wurden gespeichert": "Deine Änderungen wurden gespeichert",
   "a.Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.": "Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.",
   "a.Der Preis für den Lehrgang {course} beträgt {price}.": "Der Preis für den Lehrgang {course} beträgt {price} exkl. MWSt.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt.": "Der Präsenzkurs findet in {{days}} Tagen statt.",
   "a.Details anschauen": "Details anschauen",
   "a.Details anzeigen": "Details anzeigen",
   "a.Deutsch": "Deutsch",
@@ -95,6 +97,7 @@
   "a.Du hast alles erledigt.": "Du hast alles erledigt.",
   "a.Du hast deine Fremdeinschätzung freigegeben": "Du hast deine Fremdeinschätzung freigegeben.",
   "a.Du hast deine Selbsteinschätzung erfolgreich mit FULL_NAME geteilt.": "Du hast deine Selbsteinschätzung erfolgreich mit {{FULL_NAME}} geteilt.",
+  "a.Du hast die Anwesenheit bestätigt.": "Du hast die Anwesenheit bestätigt.",
   "a.Du hast die Einladung von {name} erfolgreich akzeptiert.": "Du hast die Einladung von {name} erfolgreich akzeptiert.",
   "a.Du hast erfolgreich ein Konto für EMAIL erstellt.": "Du hast erfolgreich ein Konto für {{email}} erstellt.",
   "a.Du kannst deine Selbsteinschätzung mit deiner Lernbegleitung teilen, damit sie eine Fremdeinschätzung vornimmt.": "Du kannst deine Selbsteinschätzung mit deiner Lernbegleitung teilen, damit sie eine Fremdeinschätzung vornimmt.",
@@ -310,6 +313,7 @@
   "a.Überbetriebliche Kurse": "Überbetriebliche Kurse",
   "a.Übergangslösung Innendienst-Mitarbeitende": "Übergangslösung Innendienst-Mitarbeitende",
   "a.Überprüfe deine Eingaben unten und gib anschliessend deine Fremdeinschätzung für FEEDBACK_REQUESTER frei": "Überprüfe deine Eingaben unten und gib anschliessend deine Fremdeinschätzung für {{FEEDBACK_REQUESTER}} frei.",
+  "a.Überprüfe jetzt die Anwesenheit.": "Überprüfe jetzt die Anwesenheit.",
   "a.Übersicht": "Übersicht",
   "a.Übersicht anschauen": "Übersicht anschauen",
   "Abgabe": "Abgabe",
diff --git a/client/src/locales/fr/translation.json b/client/src/locales/fr/translation.json
index 872cdbc9..05c6deac 100644
--- a/client/src/locales/fr/translation.json
+++ b/client/src/locales/fr/translation.json
@@ -34,6 +34,7 @@
   "a.An Durchführung teilnehmen": "Participer à la session",
   "a.Anmelden": "Connexion",
   "a.Anwesenheit": "Présence",
+  "a.Anwesenheit anschauen": "Voir le contrôle de présence",
   "a.Anwesenheit Präsenzkurse": "Présence aux cours",
   "a.Anwesenheitskontrolle Präsenzkurse": "Contrôle de présence aux cours",
   "a.Arbeiten": "Travaux",
@@ -84,6 +85,7 @@
   "a.Deine Änderungen wurden gespeichert": "Tes modifications ont été enregistrées",
   "a.Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.": "Le cours et l'examen pour obtenir le certificat d'association comme courtier/agent d'assurance.",
   "a.Der Preis für den Lehrgang {course} beträgt {price}.": "Le prix de la formation {course} est de {price} hors TVA.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt.": "Le cours de présence se déroule en {{days}} jours.",
   "a.Details anschauen": "Voir les détails",
   "a.Details anzeigen": "Afficher les détails",
   "a.Deutsch": "Allemand",
@@ -95,6 +97,7 @@
   "a.Du hast alles erledigt.": "Tu as tout fini.",
   "a.Du hast deine Fremdeinschätzung freigegeben": "Tu as autorisé ton évaluation externe.",
   "a.Du hast deine Selbsteinschätzung erfolgreich mit FULL_NAME geteilt.": "Tu as partagé avec succès ton auto-évaluation avec {{FULL_NAME}}.",
+  "a.Du hast die Anwesenheit bestätigt.": "Tu as confirmé la présence.",
   "a.Du hast die Einladung von {name} erfolgreich akzeptiert.": "Tu as accepté avec succès l'invitation de {name}.",
   "a.Du hast erfolgreich ein Konto für EMAIL erstellt.": "Vous avez créé un compte avec succès pour {{email}}.",
   "a.Du kannst deine Selbsteinschätzung mit deiner Lernbegleitung teilen, damit sie eine Fremdeinschätzung vornimmt.": "Tu peux partager ton auto-évaluation avec ton accompagnateur d'apprentissage afin qu'il puisse effectuer une évaluation externe.",
@@ -310,6 +313,7 @@
   "a.Überbetriebliche Kurse": "Cours interentreprises",
   "a.Übergangslösung Innendienst-Mitarbeitende": "Solution transitoire pour le service interne",
   "a.Überprüfe deine Eingaben unten und gib anschliessend deine Fremdeinschätzung für FEEDBACK_REQUESTER frei": "Vérifie tes saisies ci-dessous et libère ensuite ton évaluation externe pour {{FEEDBACK_REQUESTER}}.",
+  "a.Überprüfe jetzt die Anwesenheit.": "Vérifie maintenant la présence.",
   "a.Übersicht": "Aperçu",
   "a.Übersicht anschauen": "Consulter l'aperçu",
   "Abgabe": "Remise",
diff --git a/client/src/locales/it/translation.json b/client/src/locales/it/translation.json
index c056d074..b7d1aea1 100644
--- a/client/src/locales/it/translation.json
+++ b/client/src/locales/it/translation.json
@@ -8,7 +8,6 @@
   "a.Abgabetermin": "Termine di consegna",
   "a.Abgezogene Punkte": "Punti detratti",
   "a.Adresse": "Indirizzo",
-  "a.AGB": "Condizioni generali",
   "a.Aktuell begleitest du niemanden als Lernbegleitung.": "Attualmente non stai accompagnando nessuno come mentore di apprendimento.",
   "a.Aktuell begleitest du niemanden als Praxisbildner.": "Attualmente non stai accompagnando nessuno come formatore/-trice pratico/a.",
   "a.Aktuell bist du leider keiner Durchführung zugewiesen.": "Attualmente non sei assegnato a nessuna sessione, purtroppo.",
@@ -34,6 +33,7 @@
   "a.An Durchführung teilnehmen": "Partecipare alla sessione",
   "a.Anmelden": "Login",
   "a.Anwesenheit": "Presenza",
+  "a.Anwesenheit anschauen": "Visualizza il controllo di presenza",
   "a.Anwesenheit Präsenzkurse": "Presenza ai corsi",
   "a.Anwesenheitskontrolle Präsenzkurse": "Controllo di presenza ai corsi",
   "a.Arbeiten": "Lavori",
@@ -74,7 +74,6 @@
   "a.Datei auswählen": "Selezionare il file",
   "a.Datei hochladen": "Carica il file",
   "a.Datei kann nicht gespeichert werden.": "Impossibile salvare il file.",
-  "a.Datenschutzerklärung": "Informativa sulla privacy",
   "a.Datum": "Data",
   "a.Debit-/Kreditkarte/Twint": "Carta di debito/credito / Twint",
   "a.Dein Feedback für x y wurde freigegeben.": "Il tuo feedback per {{x}} {{y}} è stato pubblicato.",
@@ -83,7 +82,8 @@
   "a.Deine Selbsteinschätzung": "La tua autovalutazione",
   "a.Deine Änderungen wurden gespeichert": "Le tue modifiche sono state salvate",
   "a.Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.": "Il corso e l'esame per ottenere il certificato di associazione come intermediario/agente di assicurazione.",
-  "a.Der Preis für den Lehrgang {course} beträgt {price}.": "Il prezzo del {course} è {price} IVA esclusa.",
+  "a.Der Preis für den Lehrgang {course} beträgt {price}.": "Il prezzo del {corso} è {prezzo} IVA esclusa.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt.": "Il corso di presenza si svolge in {{days}} giorni.",
   "a.Details anschauen": "Visualizza dettagli",
   "a.Details anzeigen": "Mostrare i dettagli",
   "a.Deutsch": "Tedesco",
@@ -95,6 +95,7 @@
   "a.Du hast alles erledigt.": "Hai fatto tutto.",
   "a.Du hast deine Fremdeinschätzung freigegeben": "Hai rilasciato la tua valutazione esterna.",
   "a.Du hast deine Selbsteinschätzung erfolgreich mit FULL_NAME geteilt.": "Hai condiviso con successo la tua autovalutazione con {{FULL_NAME}}.",
+  "a.Du hast die Anwesenheit bestätigt.": "Hai confermato la presenza.",
   "a.Du hast die Einladung von {name} erfolgreich akzeptiert.": "Hai accettato con successo l'invito di {name}.",
   "a.Du hast erfolgreich ein Konto für EMAIL erstellt.": "Hai creato con successo un account per {{email}}.",
   "a.Du kannst deine Selbsteinschätzung mit deiner Lernbegleitung teilen, damit sie eine Fremdeinschätzung vornimmt.": "Puoi condividere la tua autovalutazione con il tuo tutor didattico affinché possa effettuare una valutazione esterna.",
@@ -117,7 +118,6 @@
   "a.Ergebnisse bewerten": "Valutare i risultati",
   "a.Ergebnisse teilen": "Condividere i risultati",
   "a.Erneut bearbeiten": "Modifica di nuovo",
-  "a.Es gelten die {cembraTos} und die {cembraPrivacy} der CembraPay AG.": "Si applicano le {cembraTos} e l'{cembraPrivacy} di CembraPay AG.",
   "a.Experte": "Esperto",
   "a.Feedback abschliessen": "Completa il feedback",
   "a.Feedback ansehen": "Visualizza il feedback",
@@ -213,7 +213,6 @@
   "a.Nicht bestanden": "Non superato",
   "a.Nicht bewertet": "Non valutato",
   "a.Nichtleben": "Non vita",
-  "a.Noch nicht bestätigt": "Non ancora confermato",
   "a.Note": "Note",
   "a.NUMBER Elemente abgeschlossen": "{NUMBER} elementi completati",
   "a.NUMBER Präsenztage abgeschlossen": "{NUMBER} giorni di presenza completati",
@@ -225,7 +224,6 @@
   "a.Personen, die du begleitest": "Persone che accompagni",
   "a.Persönliche Informationen": "Informazioni personali",
   "a.PLZ": "CAP",
-  "a.Postleizahl hat das falsche Format": "Il codice postale ha un formato sbagliato",
   "a.Praxisauftrag": "Lavoro pratico",
   "a.Praxisaufträge anschauen": "Visualizzare gli incarichi pratici",
   "a.Praxisbildner": "Formatore pratico",
@@ -270,7 +268,6 @@
   "a.Teilnehmer": "Partecipanti",
   "a.Teilnehmer im": "I partecipanti al",
   "a.Teilnehmer nach Zulassungsprofilen im": "Partecipanti per profilo di ammissione nel",
-  "a.Teilnehmer Vorschau": "Anteprima dei partecipanti",
   "a.Telefonnummer": "Numero di telefono",
   "a.Telefonnummer hat das falsche Format": "Il numero di telefono ha un formato sbagliato",
   "a.Termin": "Data",
@@ -310,6 +307,7 @@
   "a.Überbetriebliche Kurse": "Corsi interaziendali",
   "a.Übergangslösung Innendienst-Mitarbeitende": "Soluzione transitoria per il servizio interno",
   "a.Überprüfe deine Eingaben unten und gib anschliessend deine Fremdeinschätzung für FEEDBACK_REQUESTER frei": "Controlla le tue voci qui sotto e poi rilascia la tua valutazione esterna per {{FEEDBACK_REQUESTER}}.",
+  "a.Überprüfe jetzt die Anwesenheit.": "Controllare la presenza ora.",
   "a.Übersicht": "Panoramica",
   "a.Übersicht anschauen": "Vedere la panoramica",
   "Abgabe": "Consegna",
@@ -357,8 +355,6 @@
   "Berufsbildner": "Formatore professionale",
   "Bestanden": "Superato",
   "Bewertung von x y": "Valutazione di {{x}} {{y}}",
-  "cembraPrivacyLink": "https://cembrapay.ch/it/privacy",
-  "cembraTosLink": "https://cembrapay.ch/it/terms/CP",
   "Circle": "Cerchio",
   "circlePage.circleContentBoxTitle": "Cosa apprenderai in questo Circle",
   "circlePage.contactExpertButton": "Contattare il/la trainer",

From 4bf47efa2d013ecd6cf5842851a2a3634a87cab5 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 18 Nov 2024 16:37:10 +0100
Subject: [PATCH 15/32] Fix font size in dropdown

---
 client/src/components/ui/ItDropdownSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ui/ItDropdownSelect.vue b/client/src/components/ui/ItDropdownSelect.vue
index 7947550d..8b663a46 100644
--- a/client/src/components/ui/ItDropdownSelect.vue
+++ b/client/src/components/ui/ItDropdownSelect.vue
@@ -54,7 +54,7 @@ const dropdownSelected = computed<DropdownSelectable>({
         <span v-if="dropdownSelected.iconName" class="mr-4">
           <component :is="dropdownSelected.iconName"></component>
         </span>
-        <span class="block h-11 truncate text-4xl">
+        <span :class="[asHeading ? 'h-11 text-4xl' : '']" class="block truncate">
           {{ typeName }} {{ dropdownSelected.name }}
           <span v-if="placeholderText && !dropdownSelected.name" class="text-gray-900">
             {{ placeholderText }}

From 2386b5207effa31d2697be9235efce6e8e2f2a10 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 18 Nov 2024 16:41:05 +0100
Subject: [PATCH 16/32] Fix course session select button

---
 .../src/components/header/SelectedCourseSession.vue | 13 ++++++++-----
 .../cockpit/cockpitPage/CockpitExpertParentPage.vue |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/client/src/components/header/SelectedCourseSession.vue b/client/src/components/header/SelectedCourseSession.vue
index 9f082564..ba32dc64 100644
--- a/client/src/components/header/SelectedCourseSession.vue
+++ b/client/src/components/header/SelectedCourseSession.vue
@@ -36,14 +36,13 @@ const showCourseSessionMenu = computed(
     v-if="hasSessionTitle"
     class="nav-item-base inline-flex items-center lg:inline-flex"
   >
-    <div data-cy="current-course-session-title" class="text-bold">
-      {{ selectedCourseSessionTitle }}
-    </div>
-
     <Popover v-if="showCourseSessionMenu" class="relative">
       <PopoverButton
-        class="group flex items-center rounded-md bg-transparent px-3 text-base focus:outline-none"
+        class="group flex items-center gap-1 rounded-md bg-transparent px-3 text-base focus:outline-none"
       >
+        <span class="text-bold">
+          {{ selectedCourseSessionTitle }}
+        </span>
         <it-icon-arrow-down class="h-6 w-6" />
       </PopoverButton>
       <PopoverPanel class="absolute left-0 z-10 mt-3 w-64 px-1 sm:px-0 lg:max-w-3xl">
@@ -59,5 +58,9 @@ const showCourseSessionMenu = computed(
         </div>
       </PopoverPanel>
     </Popover>
+
+    <div v-else data-cy="current-course-session-title" class="text-bold">
+      {{ selectedCourseSessionTitle }}
+    </div>
   </div>
 </template>
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue b/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
index 3e861216..0ff07654 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
+++ b/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
@@ -35,7 +35,7 @@ const enableDocuments = computed(() => {
 
 const items = computed(() => [
   { id: 1, name: t("a.Übersicht"), route: defaultRoute },
-  { id: 2, name: t("a.Teilnehmer"), route: attendanceRoute },
+  // { id: 2, name: t("a.Teilnehmer"), route: attendanceRoute }, // todo: re-enable with correct route in a later issue
   ...(enableDocuments.value
     ? [
         {

From 72f7a7f68c8bcbeac06353572c682e3ac5e006b9 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 18 Nov 2024 16:48:15 +0100
Subject: [PATCH 17/32] Fix profile sidebar on mobile

---
 client/src/components/header/MobileMenu.vue      | 16 ++++++++++++++--
 .../cockpitPage/CockpitExpertParentPage.vue      |  8 ++++----
 client/src/router/index.ts                       |  3 ++-
 client/src/router/names.ts                       |  1 +
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index 5583d87e..b797b191 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
 import { useVVByLink } from "@/composables";
-import { SETTINGS_ROUTE } from "@/router/names";
+import { PERSONAL_PROFILE_ROUTE, SETTINGS_ROUTE } from "@/router/names";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { User } from "@/stores/user";
 import type { CourseSession } from "@/types";
@@ -54,6 +54,9 @@ const mentorTabTitle = computed(() =>
 const settingsRoute = {
   name: SETTINGS_ROUTE,
 };
+const profileRoute = {
+  name: PERSONAL_PROFILE_ROUTE,
+};
 </script>
 
 <template>
@@ -71,6 +74,15 @@ const settingsRoute = {
             </div>
             <div class="ml-6">
               <h3>{{ user?.first_name }} {{ user?.last_name }}</h3>
+
+              <div class="mb-3 text-sm text-gray-800">{{ user.email }}</div>
+              <router-link
+                :to="profileRoute"
+                @click="emit('closemodal')"
+                class="underline"
+              >
+                {{ $t("a.Profil anzeigen") }}
+              </router-link>
             </div>
           </div>
         </div>
@@ -147,7 +159,7 @@ const settingsRoute = {
               </li>
             </ul>
           </div>
-          <div class="mt-6 border-b">
+          <div v-if="courseSession" class="mt-6 border-b">
             <ul>
               <li v-if="courseSession && hasMediaLibraryMenu" class="mb-6 flex">
                 <router-link
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue b/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
index 0ff07654..c034b30c 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
+++ b/client/src/pages/cockpit/cockpitPage/CockpitExpertParentPage.vue
@@ -2,7 +2,7 @@
 import SubNavigation from "@/components/header/SubNavigation.vue";
 import { useCurrentCourseSession } from "@/composables";
 import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
-import { ATTENDANCE_ROUTE, COCKPIT_ROUTE, DOCUMENTS_ROUTE } from "@/router/names";
+import { COCKPIT_ROUTE, DOCUMENTS_ROUTE } from "@/router/names";
 import { useTranslation } from "i18next-vue";
 import log from "loglevel";
 import { computed } from "vue";
@@ -18,9 +18,9 @@ const { loading } = useExpertCockpitPageData(props.courseSlug);
 const defaultRoute = {
   name: COCKPIT_ROUTE,
 };
-const attendanceRoute = {
-  name: ATTENDANCE_ROUTE,
-};
+// const attendanceRoute = {
+//   name: ATTENDANCE_ROUTE,
+// };
 const documentsRoute = {
   name: DOCUMENTS_ROUTE,
 };
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 22235cfc..3f556a71 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -20,6 +20,7 @@ import {
   COMPETENCE_ROUTE,
   COMPETENCES_ROUTE,
   DOCUMENTS_ROUTE,
+  PERSONAL_PROFILE_ROUTE,
   SELF_EVALUATION_ROUTE,
   SETTINGS_ROUTE,
 } from "./names";
@@ -431,7 +432,7 @@ const router = createRouter({
     {
       path: "/profile",
       component: () => import("@/pages/personalProfile/PersonalProfilePage.vue"),
-      name: "personalProfile",
+      name: PERSONAL_PROFILE_ROUTE,
     },
     {
       path: "/settings",
diff --git a/client/src/router/names.ts b/client/src/router/names.ts
index b52d9c8a..9cf94b14 100644
--- a/client/src/router/names.ts
+++ b/client/src/router/names.ts
@@ -6,3 +6,4 @@ export const SETTINGS_ROUTE = "settings";
 export const COCKPIT_ROUTE = "cockpit-home";
 export const ATTENDANCE_ROUTE = "attendance";
 export const DOCUMENTS_ROUTE = "documents";
+export const PERSONAL_PROFILE_ROUTE = "personalProfile";

From 8631fca09d18cad71920a89f23369b1994a02a29 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 18 Nov 2024 17:32:06 +0100
Subject: [PATCH 18/32] Update spacing in top navigation

---
 client/src/components/header/MainNavigationBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 1343b32e..f5661ffa 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -40,7 +40,7 @@ onMounted(() => {
           <CourseSessionNavigation />
         </div>
 
-        <div class="flex items-stretch justify-start space-x-8">
+        <div class="flex items-stretch justify-start gap-2 lg:gap-4">
           <router-link
             v-if="hasMediaLibraryMenu"
             :to="

From 31db223661b2b391f1633598c4127650b2548bc5 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 18 Nov 2024 17:50:37 +0100
Subject: [PATCH 19/32] Fix styling of mobile menu

---
 client/src/components/header/MobileMenu.vue | 83 +++++++++++----------
 1 file changed, 44 insertions(+), 39 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index b797b191..97cd4e6a 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -61,9 +61,9 @@ const profileRoute = {
 
 <template>
   <ItFullScreenModal :show="show" @closemodal="emit('closemodal')">
-    <div>
+    <div class="-mx-4">
       <div>
-        <div v-if="user?.loggedIn" class="-mx-4 border-b px-8 pb-4">
+        <div v-if="user?.loggedIn" class="border-b px-8 pb-4">
           <div class="-ml-4 flex">
             <div v-if="user?.avatar_url">
               <img
@@ -78,8 +78,8 @@ const profileRoute = {
               <div class="mb-3 text-sm text-gray-800">{{ user.email }}</div>
               <router-link
                 :to="profileRoute"
-                @click="emit('closemodal')"
                 class="underline"
+                @click="emit('closemodal')"
               >
                 {{ $t("a.Profil anzeigen") }}
               </router-link>
@@ -87,12 +87,14 @@ const profileRoute = {
           </div>
         </div>
         <div>
-          <div v-if="courseSession" class="mt-6 border-b">
-            <h4 class="px-4 text-sm text-gray-900">{{ courseSession.course.title }}</h4>
-            <ul class="mt-6 flex flex-col">
-              <li v-if="hasCockpitMenu" class="mb-6">
+          <div v-if="courseSession" class="border-b px-4 py-6">
+            <h4 class="mb-4 px-4 text-sm text-gray-900">
+              {{ courseSession.course.title }}
+            </h4>
+            <ul class="flex flex-col gap-2">
+              <li v-if="hasCockpitMenu">
                 <router-link
-                  class="w-full px-4 py-2"
+                  class="block w-full px-4 py-2"
                   active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-cockpit-link"
                   :to="getCockpitUrl(courseSession.course.slug)"
@@ -101,9 +103,9 @@ const profileRoute = {
                   {{ $t("cockpit.title") }}
                 </router-link>
               </li>
-              <li v-if="hasPreviewMenu" class="mb-2 flex">
+              <li v-if="hasPreviewMenu">
                 <router-link
-                  class="w-full px-4 py-2"
+                  class="block w-full px-4 py-2"
                   active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-preview-link"
                   :to="getLearningPathUrl(courseSession.course.slug)"
@@ -112,9 +114,9 @@ const profileRoute = {
                   {{ $t("a.Vorschau Teilnehmer") }}
                 </router-link>
               </li>
-              <li v-if="hasLearningPathMenu" class="mb-2 flex">
+              <li v-if="hasLearningPathMenu">
                 <router-link
-                  class="w-full px-4 py-2"
+                  class="block w-full px-4 py-2"
                   active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-learning-path-link"
                   :to="getLearningPathUrl(courseSession.course.slug)"
@@ -123,9 +125,9 @@ const profileRoute = {
                   {{ $t("general.learningPath") }}
                 </router-link>
               </li>
-              <li v-if="hasCompetenceNaviMenu" class="mb-2 flex">
+              <li v-if="hasCompetenceNaviMenu">
                 <router-link
-                  class="w-full px-4 py-2"
+                  class="block w-full px-4 py-2"
                   active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-competence-profile-link"
                   :to="getCompetenceNaviUrl(courseSession.course.slug)"
@@ -134,9 +136,9 @@ const profileRoute = {
                   {{ $t("competences.title") }}
                 </router-link>
               </li>
-              <li v-if="hasLearningMentor" class="mb-2 flex">
+              <li v-if="hasLearningMentor">
                 <router-link
-                  class="w-full px-4 py-2"
+                  class="block w-full px-4 py-2"
                   active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-mentor-link"
                   :to="getLearningMentorUrl(courseSession.course.slug)"
@@ -159,9 +161,9 @@ const profileRoute = {
               </li>
             </ul>
           </div>
-          <div v-if="courseSession" class="mt-6 border-b">
-            <ul>
-              <li v-if="courseSession && hasMediaLibraryMenu" class="mb-6 flex">
+          <div v-if="courseSession" class="border-b px-4">
+            <ul class="flex flex-col gap-2 py-6">
+              <li v-if="courseSession && hasMediaLibraryMenu" class="flex">
                 <router-link
                   data-cy="medialibrary-link"
                   class="flex w-full items-center gap-2 px-4 py-2"
@@ -173,7 +175,7 @@ const profileRoute = {
                   {{ $t("a.Mediathek") }}
                 </router-link>
               </li>
-              <li v-if="courseSession && hasMediaLibraryMenu" class="mb-6 flex">
+              <li v-if="courseSession && hasMediaLibraryMenu" class="flex">
                 <router-link
                   data-cy="calendar-link"
                   class="flex w-full items-center gap-2 px-4 py-2"
@@ -188,25 +190,28 @@ const profileRoute = {
               </li>
             </ul>
           </div>
-          <router-link
-            :to="settingsRoute"
-            class="mt-6 flex w-full items-center gap-2 px-4 py-2"
-            active-class="bg-gray-200 text-blue-900 font-bold"
-            v-if="user?.loggedIn"
-            type="button"
-          >
-            <it-icon-settings />
-            {{ $t("a.Einstellungen") }}
-          </router-link>
-          <button
-            v-if="user?.loggedIn"
-            type="button"
-            class="mt-6 flex items-center px-4 py-2"
-            @click="$emit('logout')"
-          >
-            <it-icon-logout class="inline-block" />
-            <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
-          </button>
+
+          <div class="flex flex-col gap-2 px-4 py-6">
+            <router-link
+              v-if="user?.loggedIn"
+              :to="settingsRoute"
+              class="flex w-full items-center gap-2 px-4 py-2"
+              active-class="bg-gray-200 text-blue-900 font-bold"
+              type="button"
+            >
+              <it-icon-settings />
+              {{ $t("a.Einstellungen") }}
+            </router-link>
+            <button
+              v-if="user?.loggedIn"
+              type="button"
+              class="flex items-center px-4 py-2"
+              @click="$emit('logout')"
+            >
+              <it-icon-logout class="inline-block" />
+              <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
+            </button>
+          </div>
         </div>
       </div>
     </div>

From 1d5bd245710ab8f62d9f98315d28929c7e0b369d Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 18 Nov 2024 17:53:29 +0100
Subject: [PATCH 20/32] Use french quotation marks

---
 .../pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index e55f2484..e4b8b5ac 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -162,7 +162,7 @@ const formattedCourseDueDate = computed(() => {
         <div class="flex flex-col justify-between gap-8 bg-white py-6">
           <div class="flex flex-col gap-2 px-6">
             <h3 class="pb-1 text-4xl font-bold">{{ $t("a.Präsenzkurs") }}</h3>
-            <h5>Circle "{{ currentCourse?.learning_content.circle?.title }}"</h5>
+            <h5>Circle «{{ currentCourse?.learning_content.circle?.title }}»</h5>
             <h5>{{ formattedCourseDueDate }}</h5>
           </div>
           <div class="px-6">

From 4d367ff40d4504620d0f7761fda1941e32fe7919 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 18 Nov 2024 17:59:10 +0100
Subject: [PATCH 21/32] Fix attendance overview layout on mobile

---
 client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
index 30b468b5..597956a9 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
@@ -51,7 +51,9 @@ const formattedCourseDueDate = computed(() => {
 </script>
 
 <template>
-  <div class="my-4 flex flex-row items-center justify-between bg-white p-6 lg:my-0">
+  <div
+    class="my-4 flex flex-col items-start justify-between gap-4 bg-white p-6 lg:my-0 lg:flex-row lg:items-center lg:gap-0"
+  >
     <div>
       <h2 class="text-base font-bold">Präsenzkurs</h2>
       <p class="text-sm text-gray-800">{{ formattedCourseDueDate }}</p>

From 0536b7a5377492de472d01d74b5526b24f0a7265 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 18 Nov 2024 20:24:57 +0100
Subject: [PATCH 22/32] Remove old confirmation text on presence check page

---
 client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue b/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
index a4b66c8b..d3499c6c 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
@@ -35,9 +35,6 @@ defineEmits(["toggle", "reopen", "confirm"]);
     </button>
   </div>
   <div v-else class="px-6">
-    <p class="text-base">
-      {{ $t("a.Die Anwesenheit wurde definitiv bestätigt") }}
-    </p>
     <button class="btn-link link" @click="$emit('reopen')">
       {{ $t("a.Erneut bearbeiten") }}
     </button>

From 71e2b7cef348b8fcfe5a3b4c26b43e38c6ac18ea Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 19 Nov 2024 12:32:30 +0100
Subject: [PATCH 23/32] Update styling on attendance check page

---
 .../AttendanceCheckPage.vue                   | 53 ++++++++++---------
 .../cockpit/cockpitPage/AttendanceCheck.vue   |  4 +-
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index e4b8b5ac..568d860e 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -147,40 +147,45 @@ const formattedCourseDueDate = computed(() => {
           <span>{{ $t("general.back") }}</span>
         </router-link>
       </nav>
-      <div class="flex items-center justify-between">
-        <button
-          v-if="attendanceSaved"
-          class="flex"
-          data-cy="export-button"
-          @click="exportData"
-        >
-          <it-icon-export></it-icon-export>
-          <span class="ml inline-block">{{ $t("a.Als Excel exportieren") }}</span>
-        </button>
-      </div>
+      <div class="flex items-center justify-between"></div>
       <section v-if="attendanceCourses.length && currentCourse">
-        <div class="flex flex-col justify-between gap-8 bg-white py-6">
-          <div class="flex flex-col gap-2 px-6">
+        <div class="grid grid-cols-[2fr_1fr] justify-between gap-8 bg-white py-6">
+          <div class="col-span-1 flex flex-col gap-2 px-6">
             <h3 class="pb-1 text-4xl font-bold">{{ $t("a.Präsenzkurs") }}</h3>
             <h5>Circle «{{ currentCourse?.learning_content.circle?.title }}»</h5>
             <h5>{{ formattedCourseDueDate }}</h5>
           </div>
-          <div class="px-6">
+          <button
+            v-if="attendanceSaved"
+            class="col-span-1 mr-4 hidden justify-self-end lg:flex"
+            data-cy="export-button"
+            @click="exportData"
+          >
+            <it-icon-export class="fill-current text-blue-900"></it-icon-export>
+            <span class="ml inline-block text-blue-900">
+              {{ $t("a.Als Excel exportieren") }}
+            </span>
+          </button>
+          <div
+            class="col-span-2 flex flex-col gap-4 px-6 lg:gap-6"
+            :class="attendanceSaved ? 'lg:flex-row lg:items-center' : 'gap-8 lg:gap-8'"
+          >
             <AttendanceStatus
-              class="px-6"
+              class="inline-flex px-6"
               :done="attendanceSaved"
               :date="courseDueDate"
             />
-          </div>
-          <AttendanceCheck
-            :attendance-saved="attendanceSaved"
-            :disclaimer-confirmed="disclaimerConfirmed"
-            @reopen="editAgain"
-            @toggle="toggleDisclaimer"
-            @confirm="onSubmit"
-          />
 
-          <div class="border-t border-gray-500 px-6">
+            <AttendanceCheck
+              :attendance-saved="attendanceSaved"
+              :disclaimer-confirmed="disclaimerConfirmed"
+              @reopen="editAgain"
+              @toggle="toggleDisclaimer"
+              @confirm="onSubmit"
+            />
+          </div>
+
+          <div class="col-span-2 border-t border-gray-500 px-6">
             <ItPersonRow
               v-for="(csu, index) in courseSessionDetailResult.filterMembers()"
               :key="csu.user_id"
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue b/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
index d3499c6c..cca597e7 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceCheck.vue
@@ -9,7 +9,7 @@ defineEmits(["toggle", "reopen", "confirm"]);
 </script>
 
 <template>
-  <div v-if="!attendanceSaved" class="flex flex-col gap-4 px-6">
+  <div v-if="!attendanceSaved" class="flex flex-col gap-4">
     <div class="flex flex-row content-center items-center">
       <ItCheckbox
         :checkbox-item="{
@@ -34,7 +34,7 @@ defineEmits(["toggle", "reopen", "confirm"]);
       {{ $t("Anwesenheit bestätigen") }}
     </button>
   </div>
-  <div v-else class="px-6">
+  <div v-else class="flex-inline">
     <button class="btn-link link" @click="$emit('reopen')">
       {{ $t("a.Erneut bearbeiten") }}
     </button>

From 3b8bc42cbe84a14e2b339ac2d59975adb72b4320 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 19 Nov 2024 12:50:09 +0100
Subject: [PATCH 24/32] Re-add missing cypress data property

---
 client/src/components/header/SelectedCourseSession.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/header/SelectedCourseSession.vue b/client/src/components/header/SelectedCourseSession.vue
index ba32dc64..f000e701 100644
--- a/client/src/components/header/SelectedCourseSession.vue
+++ b/client/src/components/header/SelectedCourseSession.vue
@@ -40,7 +40,7 @@ const showCourseSessionMenu = computed(
       <PopoverButton
         class="group flex items-center gap-1 rounded-md bg-transparent px-3 text-base focus:outline-none"
       >
-        <span class="text-bold">
+        <span data-cy="current-course-session-title" class="text-bold">
           {{ selectedCourseSessionTitle }}
         </span>
         <it-icon-arrow-down class="h-6 w-6" />

From 82f086023cb23523b64bf3832697c665a4f89e17 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 19 Nov 2024 16:41:50 +0100
Subject: [PATCH 25/32] Switch heading with dropdown on documents page, remove
 back link

---
 .../pages/cockpit/documentPage/DocumentPage.vue    | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/client/src/pages/cockpit/documentPage/DocumentPage.vue b/client/src/pages/cockpit/documentPage/DocumentPage.vue
index de48a353..2cfd566f 100644
--- a/client/src/pages/cockpit/documentPage/DocumentPage.vue
+++ b/client/src/pages/cockpit/documentPage/DocumentPage.vue
@@ -136,21 +136,13 @@ async function uploadDocument(data: DocumentUploadData) {
 <template>
   <div class="bg-gray-200">
     <div v-if="courseSession" class="container-large">
-      <nav class="py-4 pb-4">
-        <router-link
-          class="btn-text inline-flex items-center pl-0"
-          :to="`/course/${courseSession.course.slug}/cockpit`"
-        >
-          <it-icon-arrow-left />
-          <span>{{ t("general.back") }}</span>
-        </router-link>
-      </nav>
-      <main>
+      <main class="py-4">
         <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
-          <h2>{{ t("a.Unterlagen für Teilnehmenden") }}</h2>
           <ItDropdownSelect
             :model-value="cockpitStore.currentCircle"
             class="mt-4 w-full lg:mt-0 lg:w-96"
+            :as-heading="true"
+            type-name="Circle:"
             :items="cockpitStore.circles"
             @update:model-value="cockpitStore.setCurrentCourseCircleFromEvent"
           ></ItDropdownSelect>

From c68057448e6bd48711e2e16a71c3b9e536cfd107 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 20 Nov 2024 20:06:52 +0100
Subject: [PATCH 26/32] Add translations, clean up code

---
 .../src/components/__tests__/AttendanceStatus.spec.ts | 11 +++++++++++
 client/src/locales/de/translation.json                |  3 ++-
 client/src/locales/fr/translation.json                |  3 ++-
 client/src/locales/it/translation.json                |  3 ++-
 .../attendanceCheckPage/AttendanceCheckPage.vue       |  7 ++++++-
 .../pages/cockpit/cockpitPage/AttendanceOverview.vue  |  5 ++++-
 .../pages/cockpit/cockpitPage/AttendanceStatus.vue    |  4 ++--
 client/src/stores/expertCockpit.ts                    |  6 ------
 8 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/client/src/components/__tests__/AttendanceStatus.spec.ts b/client/src/components/__tests__/AttendanceStatus.spec.ts
index c9c31a72..41fcdaad 100644
--- a/client/src/components/__tests__/AttendanceStatus.spec.ts
+++ b/client/src/components/__tests__/AttendanceStatus.spec.ts
@@ -36,6 +36,17 @@ describe("AttendanceStatus.vue", async () => {
     expect(wrapper.text()).toContain("Der Präsenzkurs findet in 2 Tagen statt.");
   });
 
+  test("Attendance check future", () => {
+    const future = "1999-04-01T06:30:00+00:00";
+    const wrapper = mount(AttendanceStatus, {
+      props: {
+        done: false,
+        date: future,
+      },
+    });
+    expect(wrapper.text()).toContain("Der Präsenzkurs findet in einem Tag statt.");
+  });
+
   test("Attendance check now", () => {
     const yesterday = "1999-03-30T06:30:00+00:00";
     const wrapper = mount(AttendanceStatus, {
diff --git a/client/src/locales/de/translation.json b/client/src/locales/de/translation.json
index 30e1265d..7c94d076 100644
--- a/client/src/locales/de/translation.json
+++ b/client/src/locales/de/translation.json
@@ -85,7 +85,8 @@
   "a.Deine Änderungen wurden gespeichert": "Deine Änderungen wurden gespeichert",
   "a.Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.": "Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.",
   "a.Der Preis für den Lehrgang {course} beträgt {price}.": "Der Preis für den Lehrgang {course} beträgt {price} exkl. MWSt.",
-  "a.Der Präsenzkurs findet in {{days}} Tagen statt.": "Der Präsenzkurs findet in {{days}} Tagen statt.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._one": "Der Präsenzkurs findet in einem Tag statt.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._other": "Der Präsenzkurs findet in {{count}} Tagen statt.",
   "a.Details anschauen": "Details anschauen",
   "a.Details anzeigen": "Details anzeigen",
   "a.Deutsch": "Deutsch",
diff --git a/client/src/locales/fr/translation.json b/client/src/locales/fr/translation.json
index 05c6deac..207dd84e 100644
--- a/client/src/locales/fr/translation.json
+++ b/client/src/locales/fr/translation.json
@@ -85,7 +85,8 @@
   "a.Deine Änderungen wurden gespeichert": "Tes modifications ont été enregistrées",
   "a.Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.": "Le cours et l'examen pour obtenir le certificat d'association comme courtier/agent d'assurance.",
   "a.Der Preis für den Lehrgang {course} beträgt {price}.": "Le prix de la formation {course} est de {price} hors TVA.",
-  "a.Der Präsenzkurs findet in {{days}} Tagen statt.": "Le cours de présence se déroule en {{days}} jours.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._one": "Le cours de présence se déroule en une jour.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._other": "Le cours de présence se déroule en {{count}} jours.",
   "a.Details anschauen": "Voir les détails",
   "a.Details anzeigen": "Afficher les détails",
   "a.Deutsch": "Allemand",
diff --git a/client/src/locales/it/translation.json b/client/src/locales/it/translation.json
index b7d1aea1..6d870cc0 100644
--- a/client/src/locales/it/translation.json
+++ b/client/src/locales/it/translation.json
@@ -83,7 +83,8 @@
   "a.Deine Änderungen wurden gespeichert": "Le tue modifiche sono state salvate",
   "a.Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als Versicherungsvermittler/-in.": "Il corso e l'esame per ottenere il certificato di associazione come intermediario/agente di assicurazione.",
   "a.Der Preis für den Lehrgang {course} beträgt {price}.": "Il prezzo del {corso} è {prezzo} IVA esclusa.",
-  "a.Der Präsenzkurs findet in {{days}} Tagen statt.": "Il corso di presenza si svolge in {{days}} giorni.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._one": "Il corso di presenza si svolge in un giorno.",
+  "a.Der Präsenzkurs findet in {{days}} Tagen statt._other": "Il corso di presenza si svolge in {{count}} giorni.",
   "a.Details anschauen": "Visualizza dettagli",
   "a.Details anzeigen": "Mostrare i dettagli",
   "a.Deutsch": "Tedesco",
diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index 568d860e..d7aef56c 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -14,6 +14,7 @@ import { useUserStore } from "@/stores/user";
 import { openDataAsXls } from "@/utils/export";
 import { useMutation, useQuery } from "@urql/vue";
 import { useDateFormat } from "@vueuse/core";
+import { useTranslation } from "i18next-vue";
 import log from "loglevel";
 import { computed, onMounted, ref } from "vue";
 import AttendanceCheck from "../cockpitPage/AttendanceCheck.vue";
@@ -39,6 +40,8 @@ const userPresence = ref(new Map<string, boolean>());
 const disclaimerConfirmed = ref(false);
 const attendanceSaved = ref(false);
 
+const { t } = useTranslation();
+
 function resetState() {
   userPresence.value = new Map<string, boolean>();
   disclaimerConfirmed.value = false;
@@ -152,7 +155,9 @@ const formattedCourseDueDate = computed(() => {
         <div class="grid grid-cols-[2fr_1fr] justify-between gap-8 bg-white py-6">
           <div class="col-span-1 flex flex-col gap-2 px-6">
             <h3 class="pb-1 text-4xl font-bold">{{ $t("a.Präsenzkurs") }}</h3>
-            <h5>Circle «{{ currentCourse?.learning_content.circle?.title }}»</h5>
+            <h5>
+              {{ t("a.Circle") }} «{{ currentCourse?.learning_content.circle?.title }}»
+            </h5>
             <h5>{{ formattedCourseDueDate }}</h5>
           </div>
           <button
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
index 597956a9..1eac7c31 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
@@ -5,6 +5,7 @@ import { ATTENDANCE_ROUTE } from "@/router/names";
 import { useExpertCockpitStore } from "@/stores/expertCockpit";
 import { useQuery } from "@urql/vue";
 import { useDateFormat } from "@vueuse/core";
+import { useTranslation } from "i18next-vue";
 import { computed } from "vue";
 import AttendanceStatus from "./AttendanceStatus.vue";
 
@@ -12,6 +13,8 @@ const attendanceRoute = {
   name: ATTENDANCE_ROUTE,
 };
 
+const { t } = useTranslation();
+
 const expertCockpitStore = useExpertCockpitStore();
 const currentCourse = computed(() => expertCockpitStore.currentCourse);
 
@@ -55,7 +58,7 @@ const formattedCourseDueDate = computed(() => {
     class="my-4 flex flex-col items-start justify-between gap-4 bg-white p-6 lg:my-0 lg:flex-row lg:items-center lg:gap-0"
   >
     <div>
-      <h2 class="text-base font-bold">Präsenzkurs</h2>
+      <h2 class="text-base font-bold">{{ t("a.Präsenzkurs") }}</h2>
       <p class="text-sm text-gray-800">{{ formattedCourseDueDate }}</p>
     </div>
     <AttendanceStatus :date="courseDueDate" :done="attendanceSaved" />
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
index 13219233..98516a30 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
@@ -14,7 +14,7 @@ const { t } = useTranslation();
 
 const props = defineProps<Props>();
 
-const status = computed(() => {
+const status = computed<Status>(() => {
   if (props.done) {
     return "done";
   }
@@ -57,7 +57,7 @@ const text = computed(() => {
       return t("a.Du hast die Anwesenheit bestätigt.");
     case "soon":
       return t("a.Der Präsenzkurs findet in {{days}} Tagen statt.", {
-        days: days.value,
+        count: days.value,
       });
     case "now":
     default:
diff --git a/client/src/stores/expertCockpit.ts b/client/src/stores/expertCockpit.ts
index 4616f101..b4a6fbd6 100644
--- a/client/src/stores/expertCockpit.ts
+++ b/client/src/stores/expertCockpit.ts
@@ -39,12 +39,6 @@ async function courseCircles(
   return [];
 }
 
-export type ExpertCockpitStoreState = {
-  courseSessionMembers: CourseSessionUser[] | undefined;
-  circles: CircleExpertCockpit[] | undefined;
-  currentCircle: CircleExpertCockpit | undefined;
-};
-
 export const useExpertCockpitStore = defineStore("expertCockpit", () => {
   const courseSessionMembers = ref<CourseSessionUser[] | undefined>(undefined);
   const circles = ref<CircleExpertCockpit[] | undefined>([]);

From b785e327c68812dbe6fa99e94c0edec42b3b6d7c Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 20 Nov 2024 20:17:01 +0100
Subject: [PATCH 27/32] Fix test setup to prevent warning

---
 .../components/__tests__/AttendanceStatus.spec.ts  | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/src/components/__tests__/AttendanceStatus.spec.ts b/client/src/components/__tests__/AttendanceStatus.spec.ts
index 41fcdaad..9599d6b8 100644
--- a/client/src/components/__tests__/AttendanceStatus.spec.ts
+++ b/client/src/components/__tests__/AttendanceStatus.spec.ts
@@ -6,14 +6,12 @@ import I18NextVue from "i18next-vue";
 import { expect, vi } from "vitest";
 
 describe("AttendanceStatus.vue", async () => {
-  beforeEach(async () => {
-    vi.useFakeTimers();
-    const date = new Date(1999, 2, 31);
-    vi.setSystemTime(date);
-    await i18nextInit();
-    await loadI18nextLocaleMessages("de");
-    config.global.plugins = [[I18NextVue, { i18next }]];
-  });
+  vi.useFakeTimers();
+  const date = new Date(1999, 2, 31);
+  vi.setSystemTime(date);
+  await i18nextInit();
+  await loadI18nextLocaleMessages("de");
+  config.global.plugins = [[I18NextVue, { i18next }]];
 
   test("Attendance check complete", () => {
     const wrapper = mount(AttendanceStatus, {

From aa7137b764c80aa041b11860c01a09cb1e4735c1 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 21 Nov 2024 15:02:26 +0100
Subject: [PATCH 28/32] Fix minor styling issues

---
 client/src/components/header/HomeNavigation.vue                 | 2 +-
 .../pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/header/HomeNavigation.vue b/client/src/components/header/HomeNavigation.vue
index c47a99d3..7465c457 100644
--- a/client/src/components/header/HomeNavigation.vue
+++ b/client/src/components/header/HomeNavigation.vue
@@ -11,7 +11,7 @@ const { t } = useTranslation();
     <template v-if="isInCourse">
       <div class="flex h-full items-center border-r border-slate-500">
         <router-link to="/" class="flex items-center pr-3">
-          <it-icon-arrow-left />
+          <it-icon-arrow-left class="fill-current text-slate-500" />
           <span class="hidden text-slate-500 lg:inline">
             {{ t("a.Dashboard") }}
           </span>
diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index d7aef56c..a0e43709 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -172,7 +172,7 @@ const formattedCourseDueDate = computed(() => {
             </span>
           </button>
           <div
-            class="col-span-2 flex flex-col gap-4 px-6 lg:gap-6"
+            class="col-span-2 flex flex-col items-start gap-4 px-6 lg:gap-6"
             :class="attendanceSaved ? 'lg:flex-row lg:items-center' : 'gap-8 lg:gap-8'"
           >
             <AttendanceStatus

From a6208034130144005cf72d2c6600f80975cb45ea Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 21 Nov 2024 15:03:07 +0100
Subject: [PATCH 29/32] Switch between button or link on attendance overview
 conditionally

---
 .../attendanceCheckPage/AttendanceCheckPage.vue  |  5 +++++
 .../cockpit/cockpitPage/AttendanceOverview.vue   | 16 ++++++++++++++--
 .../cockpit/cockpitPage/AttendanceStatus.vue     | 13 +++----------
 client/src/utils/attendance.ts                   | 13 +++++++++++++
 4 files changed, 35 insertions(+), 12 deletions(-)
 create mode 100644 client/src/utils/attendance.ts

diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index a0e43709..2a9d0edb 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -11,6 +11,7 @@ import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries";
 import { exportAttendance } from "@/services/dashboard";
 import { useExpertCockpitStore } from "@/stores/expertCockpit";
 import { useUserStore } from "@/stores/user";
+import { getStatus } from "@/utils/attendance";
 import { openDataAsXls } from "@/utils/export";
 import { useMutation, useQuery } from "@urql/vue";
 import { useDateFormat } from "@vueuse/core";
@@ -136,6 +137,10 @@ const formattedCourseDueDate = computed(() => {
   }
   return "";
 });
+
+const attendanceStatus = computed(() => {
+  return getStatus(attendanceSaved.value, courseDueDate.value);
+});
 </script>
 
 <template>
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
index 1eac7c31..aa21f8e8 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceOverview.vue
@@ -3,6 +3,7 @@ import type { CourseSessionAttendanceCourseObjectType } from "@/gql/graphql";
 import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries";
 import { ATTENDANCE_ROUTE } from "@/router/names";
 import { useExpertCockpitStore } from "@/stores/expertCockpit";
+import { getStatus } from "@/utils/attendance";
 import { useQuery } from "@urql/vue";
 import { useDateFormat } from "@vueuse/core";
 import { useTranslation } from "i18next-vue";
@@ -51,6 +52,9 @@ const formattedCourseDueDate = computed(() => {
   }
   return "";
 });
+const status = computed(() => {
+  return getStatus(attendanceSaved.value, courseDueDate.value);
+});
 </script>
 
 <template>
@@ -62,8 +66,16 @@ const formattedCourseDueDate = computed(() => {
       <p class="text-sm text-gray-800">{{ formattedCourseDueDate }}</p>
     </div>
     <AttendanceStatus :date="courseDueDate" :done="attendanceSaved" />
-    <router-link :to="attendanceRoute" class="underline">
-      {{ $t("a.Anwesenheit anschauen") }}
+    <router-link
+      :to="attendanceRoute"
+      :class="
+        status === 'now' ? 'bg-blue-900 px-4 py-2 font-bold text-white' : 'underline'
+      "
+    >
+      <template v-if="status === 'now'">
+        {{ $t("Anwesenheit prüfen") }}
+      </template>
+      <template v-else>{{ $t("a.Anwesenheit anschauen") }}</template>
     </router-link>
   </div>
 </template>
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
index 98516a30..4331ed7b 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { howManyDaysInFuture, isInFuture } from "@/components/dueDates/dueDatesUtils";
+import { getStatus } from "@/utils/attendance";
 import { useTranslation } from "i18next-vue";
 import { computed } from "vue";
 
-export type Status = "done" | "soon" | "now"; // todo: define this
-
 export interface Props {
   done: boolean;
   date: string;
@@ -14,14 +13,8 @@ const { t } = useTranslation();
 
 const props = defineProps<Props>();
 
-const status = computed<Status>(() => {
-  if (props.done) {
-    return "done";
-  }
-  if (isInFuture(props.date)) {
-    return "soon";
-  }
-  return "now";
+const status = computed(() => {
+  return getStatus(props.done, props.date);
 });
 
 const style = computed(() => {
diff --git a/client/src/utils/attendance.ts b/client/src/utils/attendance.ts
new file mode 100644
index 00000000..cb08d11b
--- /dev/null
+++ b/client/src/utils/attendance.ts
@@ -0,0 +1,13 @@
+import { isInFuture } from "@/components/dueDates/dueDatesUtils";
+
+export type Status = "done" | "soon" | "now";
+
+export const getStatus = (done: boolean, date: string): Status => {
+  if (done) {
+    return "done";
+  }
+  if (isInFuture(date)) {
+    return "soon";
+  }
+  return "now";
+};

From bc5055324cd21c296777bb39b49c118da15d2221 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 21 Nov 2024 15:07:08 +0100
Subject: [PATCH 30/32] Fix icon color on hover

---
 client/src/components/ui/ItDropdownSelect.vue             | 8 ++++++--
 .../cockpit/attendanceCheckPage/AttendanceCheckPage.vue   | 5 -----
 client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue | 2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/client/src/components/ui/ItDropdownSelect.vue b/client/src/components/ui/ItDropdownSelect.vue
index 8b663a46..db671a5d 100644
--- a/client/src/components/ui/ItDropdownSelect.vue
+++ b/client/src/components/ui/ItDropdownSelect.vue
@@ -91,7 +91,7 @@ const dropdownSelected = computed<DropdownSelectable>({
                 active ? 'bg-blue-900 text-white' : 'text-black',
                 'relative cursor-default select-none py-2 pl-3 pr-9',
               ]"
-              class="flex flex-row items-center"
+              class="group flex flex-row items-center"
               :data-cy="`dropdown-select-option-${item.name}`"
             >
               <span v-if="item.iconName" class="mr-4">
@@ -110,7 +110,11 @@ const dropdownSelected = computed<DropdownSelectable>({
                 v-if="dropdownSelected"
                 class="absolute inset-y-0 right-0 flex items-center pr-4 text-blue-900"
               >
-                <it-icon-check v-if="selected" class="h-5 w-5" aria-hidden="true" />
+                <it-icon-check
+                  v-if="selected"
+                  class="h-5 w-5 fill-current group-hover:text-white"
+                  aria-hidden="true"
+                />
               </span>
             </li>
           </ListboxOption>
diff --git a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
index 2a9d0edb..a0e43709 100644
--- a/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
+++ b/client/src/pages/cockpit/attendanceCheckPage/AttendanceCheckPage.vue
@@ -11,7 +11,6 @@ import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries";
 import { exportAttendance } from "@/services/dashboard";
 import { useExpertCockpitStore } from "@/stores/expertCockpit";
 import { useUserStore } from "@/stores/user";
-import { getStatus } from "@/utils/attendance";
 import { openDataAsXls } from "@/utils/export";
 import { useMutation, useQuery } from "@urql/vue";
 import { useDateFormat } from "@vueuse/core";
@@ -137,10 +136,6 @@ const formattedCourseDueDate = computed(() => {
   }
   return "";
 });
-
-const attendanceStatus = computed(() => {
-  return getStatus(attendanceSaved.value, courseDueDate.value);
-});
 </script>
 
 <template>
diff --git a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
index 4331ed7b..dab84706 100644
--- a/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
+++ b/client/src/pages/cockpit/cockpitPage/AttendanceStatus.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { howManyDaysInFuture, isInFuture } from "@/components/dueDates/dueDatesUtils";
+import { howManyDaysInFuture } from "@/components/dueDates/dueDatesUtils";
 import { getStatus } from "@/utils/attendance";
 import { useTranslation } from "i18next-vue";
 import { computed } from "vue";

From cf13030f2481b0d8adf0119bdc388d8e49a9a111 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 21 Nov 2024 15:54:39 +0100
Subject: [PATCH 31/32] Adjust width and padding for the circle dropdown used
 as heading

---
 client/src/components/ui/ItDropdownSelect.vue                  | 2 +-
 client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ui/ItDropdownSelect.vue b/client/src/components/ui/ItDropdownSelect.vue
index db671a5d..f08c044a 100644
--- a/client/src/components/ui/ItDropdownSelect.vue
+++ b/client/src/components/ui/ItDropdownSelect.vue
@@ -46,7 +46,7 @@ const dropdownSelected = computed<DropdownSelectable>({
             'font-bold': !borderless,
           },
           asHeading
-            ? 'group flex w-full items-center gap-1 rounded-md bg-transparent px-3 text-base focus:outline-none'
+            ? 'group flex w-full items-center gap-1 rounded-md bg-transparent text-base focus:outline-none'
             : 'relative flex w-full cursor-default flex-row items-center bg-white py-3 pl-5 pr-10 text-left',
         ]"
         data-cy="dropdown-select"
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue b/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
index 1f659dda..54eb574f 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
+++ b/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
@@ -25,7 +25,7 @@ const props = defineProps<{
           :as-heading="true"
           :model-value="expertCockpitStore.currentCircle"
           type-name="Circle:"
-          class="mt-4 w-full lg:mt-0 lg:w-96"
+          class="mt-4 w-full lg:mt-0 lg:w-auto"
           :items="expertCockpitStore.circles"
           @update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent"
         ></ItDropdownSelect>

From f9d952a5e805cda7f57f876b55e31b16bbe0bf99 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 27 Nov 2024 12:11:05 +0100
Subject: [PATCH 32/32] Fix heading width on document page

---
 client/src/pages/cockpit/documentPage/DocumentPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/cockpit/documentPage/DocumentPage.vue b/client/src/pages/cockpit/documentPage/DocumentPage.vue
index 2cfd566f..f20cff91 100644
--- a/client/src/pages/cockpit/documentPage/DocumentPage.vue
+++ b/client/src/pages/cockpit/documentPage/DocumentPage.vue
@@ -140,7 +140,7 @@ async function uploadDocument(data: DocumentUploadData) {
         <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
           <ItDropdownSelect
             :model-value="cockpitStore.currentCircle"
-            class="mt-4 w-full lg:mt-0 lg:w-96"
+            class="mt-4 w-full lg:mt-0 lg:w-auto"
             :as-heading="true"
             type-name="Circle:"
             :items="cockpitStore.circles"