VBV-674: Add avatar images to dueDates for lerning mentors

client/src/components/dueDates/DueDateSingle.vue

@@ -78,6 +78,15 @@ const url = computed(() => {
           {{ $t("a.Circle") }} «{{ props.dueDate.circle?.title }}»
         </div>
       </div>
+      <div v-if="props.dueDate.persons?.length" class="flex gap-2">
+        <div v-for="person in props.dueDate.persons" :key="person.user_id">
+          <img
+            class="inline-block h-11 w-11 rounded-full"
+            :src="person.avatar_url_small || '/static/avatars/myvbv-default-avatar.png'"
+            :alt="`${person.first_name} ${person.last_name}`"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>

client/src/composables.ts

@@ -509,7 +509,7 @@ export function useDashboardPersons() {
   const dashboardDueDates = ref<DashboardDueDate[]>([]);
   const loading = ref(false);
 
-  // due dates from today to the next year
+  // due dates from today to future
   const currentDueDates = ref<DashboardDueDate[]>([]);
 
   const fetchData = async () => {
@@ -536,10 +536,24 @@ export function useDashboardPersons() {
           refDate = dayjs(dueDate.end);
         }
 
-        return (
-          refDate >= dayjs().startOf("day") &&
-          refDate <= dayjs().add(1, "year").endOf("day")
+        return refDate >= dayjs().startOf("day");
+      });
+
+      // attach `LEARNING_MENTEE` to due dates for `LEARNING_MENTOR` persons
+      currentDueDates.value.forEach((dueDate) => {
+        if (dueDate.course_session.my_role === "LEARNING_MENTOR") {
+          dueDate.persons = dashboardPersons.value.filter((person) => {
+            if (
+              person.course_sessions
+                .map((cs) => cs.id)
+                .includes(dueDate.course_session.id)
+            ) {
+              return person.course_sessions.some(
+                (cs) => cs.user_role === "LEARNING_MENTEE"
               );
+            }
+          });
+        }
       });
     } catch (error) {
       console.error("Error fetching data:", error);

client/src/pages/dashboard/DashboardPersonsPage.vue

@@ -166,7 +166,7 @@ watch(selectedCourse, () => {
                     person.avatar_url_small ||
                     '/static/avatars/myvbv-default-avatar.png'
                   "
-                  :alt="person.last_name"
+                  :alt="`${person.first_name} ${person.last_name}`"
                 />
                 <div>
                   <div class="text-bold">

client/src/services/dashboard.ts

@@ -76,6 +76,7 @@ export type DashboardCourseConfigType = {
 export type DashboardDueDate = DueDate & {
   course_session: DashboardPersonCourseSessionType;
   translatedType: string;
+  persons?: DashboardPersonType[];
 };
 
 export const fetchStatisticData = async (