Add Person count widget (VBV-718)

client/src/components/dashboard/BaseBox.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
+withDefaults(
   defineProps<{
     detailsLink: string;
-}>();
+    slim?: boolean;
+  }>(),
+  {
+    slim: false,
+  }
+);
 </script>
 
 <template>
-  <div class="flex h-full flex-col space-y-4 bg-white">
+  <div :class="['flex h-full flex-col bg-white', slim ? '' : 'space-y-4']">
     <h4 class="mb-1 font-bold">
       <slot name="title"></slot>
     </h4>
     <slot name="content"></slot>
     <div class="flex-grow"></div>
-    <div class="pt-8">
+    <div class="pt-0">
       <router-link class="underline" :to="detailsLink" data-cy="basebox.detailsLink">
         {{ $t("a.Details anschauen") }}
       </router-link>

client/src/components/dashboard/BerufsbildnerStatistics.vue

@@ -9,6 +9,7 @@ import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
 import AssignmentSummaryBox from "@/components/dashboard/AssignmentSummaryBox.vue";
 import BaseBox from "@/components/dashboard/BaseBox.vue";
 import { percentToRoundedGrade } from "@/services/assignmentService";
+import MentorMenteeCount from "@/components/dashboard/MentorMenteeCount.vue";
 
 const props = defineProps<{
   courseSlug: string;
@@ -78,5 +79,11 @@ const averageGrade = computed(() => {
         :details-link="`/statistic/berufsbildner/${props.courseSlug}/assignment`"
       />
     </div>
+    <MentorMenteeCount
+      :course-id="props.courseId"
+      :course-slug="props.courseSlug"
+      :count="mentorData.user_selection_ids.length"
+      :slim="true"
+    />
   </div>
 </template>

client/src/components/dashboard/MentorMenteeCount.vue

@@ -4,16 +4,27 @@ import { onMounted, ref } from "vue";
 import { fetchMenteeCount } from "@/services/dashboard";
 import BaseBox from "@/components/dashboard/BaseBox.vue";
 
-const props = defineProps<{
+const props = withDefaults(
+  defineProps<{
     courseId: string;
     courseSlug: string;
-}>();
+    slim?: boolean;
+    count?: number;
+  }>(),
+  {
+    count: -1,
+    slim: false,
+  }
+);
 
-const menteeCount: Ref<number> = ref(0);
+const menteeCount: Ref<number> = ref(props.count);
 
 onMounted(async () => {
+  if (props.count == -1) {
+    menteeCount.value = 0;
     const data = await fetchMenteeCount(props.courseId);
     menteeCount.value = data?.mentee_count;
+  }
 });
 </script>
 
@@ -22,10 +33,11 @@ onMounted(async () => {
     <BaseBox
       :details-link="`/dashboard/persons?course=${props.courseId}`"
       data-cy="dashboard.mentor.menteeCount"
+      :slim="props.slim"
     >
       <template #title>{{ $t("a.Personen") }}</template>
       <template #content>
-        <div class="flex flex-row space-x-3 bg-white pb-6">
+        <div :class="['flex flex-row space-x-3 bg-white', slim ? '' : 'pb-6']">
           <div
             class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
           >

client/src/pages/cockpit/assignmentsPage/AssignmentDetails.vue

@@ -89,6 +89,11 @@ function findUserPointsHtml(userId: string) {
 
 function generateCertificatesLink(userId: string) {
   const parts = props.learningContent.competence_certificate?.frontend_url?.split("/");
+
+  if (!parts) {
+    return "";
+  }
+
   const certificatePart = parts[parts.length - 1];
   return `/course/${props.courseSession.course.slug}/profile/${userId}/competence/certificates/${certificatePart}`;
 }