CLASSROOMIO-T-108: Attendance improvement + complete lms exercise

src/lib/components/Course/components/Lesson/Exercise/UpdateDescription.svelte

@@ -7,8 +7,8 @@
   import { marked } from 'marked';
   export let preview;
 
-  function getTotalPossibleGrade() {
+  function getTotalPossibleGrade(questions) {
-    return $questionnaire.questions.reduce((acc, question) => {
+    return questions.reduce((acc, question) => {
       acc += parseFloat(question.points, 10);
       return acc;
     }, 0);
@@ -48,7 +48,7 @@
         </p>
         |
         <p class="dark:text-white mx-2">
-          <strong>{getTotalPossibleGrade()}</strong> points.
+          <strong>{getTotalPossibleGrade($questionnaire.questions)}</strong> points.
         </p>
         |
         <p class="dark:text-white mx-2">All required</p>

src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -63,7 +63,7 @@
     // If last question send to server
     if (isFinished) {
       $questionnaireMetaData.status = 1;
-      $questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade();
+      $questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade($questionnaire.questions);
       $questionnaireMetaData.grades = {};
       submitExercise(
         $questionnaireMetaData.answers,
@@ -87,8 +87,8 @@
     return Math.round(((currentQuestionIndex - 1) / $questionnaire.questions.length) * 100) || 0;
   }
 
-  function getTotalPossibleGrade() {
+  function getTotalPossibleGrade(questions) {
-    return $questionnaire.questions.reduce((acc, question) => {
+    return questions.reduce((acc, question) => {
       acc += parseFloat(question.points, 10);
       return acc;
     }, 0);
@@ -119,7 +119,7 @@
         answers: submission.answers
       });
 
-      $questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade();
+      $questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade($questionnaire.questions);
 
       $questionnaireMetaData.currentQuestionIndex = $questionnaire.questions.length;
       $questionnaireMetaData.isFinished = true;
@@ -192,7 +192,7 @@
         </p>
         |
         <p class="dark:text-white mx-2">
-          <strong>{getTotalPossibleGrade()}</strong> points.
+          <strong>{getTotalPossibleGrade($questionnaire.questions)}</strong> points.
         </p>
         |
         <p class="dark:text-white mx-2">All required</p>

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -218,6 +218,8 @@
 
   $: addBadgeValueToTab($lesson.materials);
 
+  $: console.log('$lesson.materials', $lesson.materials);
+
   $: updateNoteByCompletion($completion);
 
   $: initPlyr(player, $lesson.materials.videos);

src/lib/components/Course/store.ts

@@ -2,7 +2,7 @@ import { writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
 import { lessons } from './components/Lesson/store/lessons';
 import { ROLE } from '$lib/utils/constants/roles';
-import type { Course } from '$lib/utils/types';
+import type { Course, GroupPerson } from '$lib/utils/types';
 
 export const course: Writable<Course> = writable({
   id: '',
@@ -16,6 +16,7 @@ export const course: Writable<Course> = writable({
   is_published: false,
   created_at: new Date().toDateString(),
   updated_at: new Date().toDateString(),
+  attendance: [],
   metadata: {
     requirements: '',
     description: '',
@@ -61,7 +62,12 @@ export const mockGroupMember = {
   }
 };
 
-export const group = writable({
+export const group = writable<{
+  id: number | null;
+  tutors: GroupPerson[];
+  students: GroupPerson[];
+  people: GroupPerson[];
+}>({
   id: null,
   tutors: [],
   students: [],

src/lib/components/PageNav/index.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <div
-  class="header dark:bg-black bg-white flex items-center justify-between {!disableSticky &&
+  class="header dark:bg-black dark:border-neutral-600 bg-white flex items-center justify-between {!disableSticky &&
     'sticky'} {paddingClass} {dynamicRootClass}"
   style={overidableStyle}
 >

src/lib/components/PrimaryButton/constants.js

@@ -24,7 +24,7 @@ export const VARIANTS_CLASS = {
   [VARIANTS.OUTLINED]:
     'border border-primary-700 hover:border-black-300 hover:bg-primary-700 text-black dark:text-white',
   [VARIANTS.NONE]:
-    'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
+    'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-neutral-800 text-black',
   [VARIANTS.TEXT]: 'text-black hover:underline',
   [VARIANTS.LINK]: 'text-primary-500 dark:text-primary-500 hover:underline',
   [VARIANTS.TEXT_DANGER]:

src/lib/components/Question/CheckboxQuestion/index.svelte

@@ -82,7 +82,7 @@
   <div class="ml-4">
     {#each options as option}
       <button
-        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-500 w-full {getValidationClassName(
+        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-neutral-800 w-full {getValidationClassName(
           option
         )}"
         type="button"
@@ -107,9 +107,7 @@
         variant={VARIANTS.OUTLINED}
       />
       <PrimaryButton
-        variant={nextButtonProps.isActive
+        variant={nextButtonProps.isActive ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
-          ? VARIANTS.CONTAINED
-          : VARIANTS.OUTLINED}
         type="submit"
         label={nextButtonProps.label}
         {name}

src/lib/components/Question/RadioQuestion/index.svelte

@@ -91,7 +91,7 @@
   <div class={!disableOptContainerMargin && 'ml-4'}>
     {#each options as option}
       <button
-        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-500 w-full {getValidationClassName(
+        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-neutral-800 w-full {getValidationClassName(
           option
         )}"
         type="button"

src/lib/components/Tabs/index.svelte

@@ -7,20 +7,20 @@
 </script>
 
 <div class="w-full flex flex-col">
-  <div class="flex items-center border-b-2 w-full overflow-x-auto">
+  <div class="flex items-center border-b w-full overflow-x-auto">
     {#each tabs as tab}
       {#if !tab.icon && !tab.badgeValue}
         <button
           class="relative {currentTab === tab.value
             ? 'text-primary-700'
-            : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-8 text-center py-3"
+            : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-4 text-center py-3 px-2"
           on:click={onChange(tab.value)}
         >
           <div class="flex items-center justify-center w-full text-center">
             {tab.label}
           </div>
           <span
-            class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
+            class="absolute bottom-0 left-0 h-[2px] bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
             tab.value
               ? 'w-full'
               : 'w-0'}"
@@ -30,7 +30,7 @@
         <button
           class="relative {currentTab === tab.value
             ? 'text-primary-700'
-            : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
+            : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-8 px-2"
           on:click={onChange(tab.value)}
         >
           <div class="grid grid-cols-5 md:grid-cols-4 gap-5 md:gap-3 items-center">
@@ -43,12 +43,12 @@
                 value={tab.badgeValue}
                 size="sm"
                 shape="rounded-full"
-                className=" bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
+                className="bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
               />
             {/if}
           </div>
           <span
-            class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
+            class="absolute bottom-0 left-0 h-[2px] bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
             tab.value
               ? 'w-full'
               : 'w-0'}"

src/lib/utils/services/courses/index.ts

@@ -10,6 +10,7 @@ import type {
   LessonCompletion
 } from '$lib/utils/types';
 import { STATUS } from '$lib/utils/constants/course';
+import type { PostgrestError, PostgrestSingleResponse } from '@supabase/supabase-js';
 
 export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']) {
   let match: { slug?: string; id?: string; status?: string } = {};
@@ -22,7 +23,7 @@ export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']
 
   match.status = STATUS[STATUS.ACTIVE];
 
-  const { data, error } = await supabase
+  const response: PostgrestSingleResponse<Course | null> = await supabase
     .from('course')
     .select(
       `
@@ -53,6 +54,9 @@ export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']
     )
     .match(match)
     .single();
+
+  const { data, error } = response;
+
   console.log(`error`, error);
   if (!data || error) {
     console.log(`data`, data);
@@ -185,7 +189,6 @@ function isNew(item: any) {
   return isNaN(item);
 }
 
-// TODO: Add questionnaire type
 export async function upsertExercise(questionnaire: any, exerciseId: Exercise['id']) {
   const {
     questions,
@@ -214,7 +217,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
     const { title, id, name, question_type, options, deleted_at, order, points, is_dirty } =
       question;
 
-    // DELETE /delete/:questionId - Don't delete if answer already given
+    // "DELETE" /delete/:questionId - Don't delete if answer already given
     if (deleted_at) {
       // Delete from server only if this question exists in the database
       if (!isNew(id)) {
@@ -232,7 +235,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
       continue;
     }
 
-    // INSERT or UPDATE /update/:questionId or /insert/:questionId
+    // "INSERT" or "UPDATE" /update/:questionId or /insert/:questionId
     const newQuestion = {
       id: isNew(id) ? undefined : id,
       name: isNew(id) ? undefined : name,
@@ -274,7 +277,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
         for (const option of options) {
           const { deleted_at, is_dirty } = option;
 
-          // DELETE /delete/:optionId
+          // "DELETE" /delete/:optionId
           if (deleted_at) {
             // if this option exists in the database
             if (!isNew(option.id)) {
@@ -285,7 +288,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
             continue;
           }
 
-          // INSERT and UPDATE
+          // "INSERT" and "UPDATE"
           const newOption = {
             ...option,
             is_dirty: undefined,

src/lib/utils/services/lms/exercises.ts

@@ -0,0 +1,96 @@
+import { supabase } from '$lib/utils/functions/supabase';
+import type { PostgrestError } from '@supabase/supabase-js';
+
+export interface LMSExercise {
+  id: string;
+  title: string;
+  updated_at: string;
+  submission: {
+    status_id: number;
+    updated_at: string;
+    groupmember: {
+      id: string;
+      profile: {
+        id: string;
+      }[];
+    }[];
+  }[];
+  lesson: {
+    id: string;
+    title: string;
+    order: number;
+    course: {
+      id: string;
+      title: string;
+      group: {
+        organisation: {
+          id: string;
+        }[];
+      }[];
+      groupmember: {
+        id: string;
+        profile: {
+          id: string;
+        }[];
+      }[];
+    };
+  };
+}
+
+interface FetchLMSExercisesResponse {
+  exercises: LMSExercise[] | null;
+  error: PostgrestError | null;
+}
+
+export async function fetchLMSExercises(
+  profileId: string,
+  orgId: string
+): Promise<FetchLMSExercisesResponse> {
+  const { data, error } = await supabase
+    .from('exercise')
+    .select(
+      `
+      id,
+      title,
+      updated_at,
+      submission (
+        status_id,
+        updated_at,
+        groupmember:submitted_by!inner (
+          id,
+          profile!inner (
+            id
+          )
+        )
+      ),
+      lesson!inner (
+        id,
+        title,
+        order,
+        course!inner (
+          id,
+          title,
+          group:group_id!inner (
+            organisation:organization_id!inner (
+              id
+            )
+          ),
+          groupmember:group_id!inner(
+            id,
+            profile!inner (
+              id
+            )
+          )
+        )
+      )
+    `
+    )
+    .eq('lesson.course.group.organisation.id', orgId)
+    .eq('lesson.course.groupmember.profile.id', profileId)
+    .eq('submission.groupmember.profile.id', profileId);
+
+  return {
+    exercises: data,
+    error
+  };
+}

src/lib/utils/store/attendance.js

@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const attendance = writable({});

src/lib/utils/store/attendance.ts

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+
+export const attendance = writable<{
+  [key: string]: {
+    [key: string]: {
+      is_present: boolean;
+      id: number;
+    };
+  };
+}>({});

src/lib/utils/types/index.ts

@@ -1,6 +1,19 @@
 export * from './config';
 export * from './dashboard';
 
+//===============Custom Type===============
+export interface GroupPerson {
+  assigned_student_id: number | null;
+  created_at: string;
+  email: string | null;
+  group_id: string;
+  id: string;
+  profile: Profile;
+  profile_id: string;
+  role_id: Role['id'];
+}
+//===========================================
+
 interface CourseMetadata {
   requirements: string;
   description: string;
@@ -109,6 +122,12 @@ export interface Course {
   is_published?: boolean;
   progress_rate?: number;
   total_lessons?: number;
+  attendance: {
+    student_id: string;
+    lesson_id: string;
+    is_present: boolean;
+    id: number;
+  }[];
 }
 
 export interface Groupmember {

src/routes/courses/[id]/attendance/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { onMount } from 'svelte';
   import {
     Search,
@@ -22,16 +22,25 @@
   import { ROLE } from '$lib/utils/constants/roles';
   import { takeAttendance } from '$lib/utils/services/attendance';
   import { snackbar } from '$lib/components/Snackbar/store';
-  import { attendance } from '$lib/utils/store/attendance';
+  import { attendance } from '$lib/utils/store/attendance.js';
   import { profile } from '$lib/utils/store/user';
+  import type { GroupPerson, Lesson } from '$lib/utils/types/index';
 
   export let data;
+  interface CourseData {
+    attendance: {
+      student_id: string;
+      lesson_id: string;
+      is_present: boolean;
+      id: number;
+    }[];
+  }
 
-  let students = [];
+  let students: GroupPerson[] = [];
-  let isStudent;
+  let isStudent: boolean;
   let searchValue = '';
 
-  function setAttendance(courseData) {
+  function setAttendance(courseData: CourseData) {
     for (const attendanceItem of courseData.attendance) {
       const { student_id, lesson_id, is_present, id } = attendanceItem;
 
@@ -54,10 +63,12 @@
     }
   }
 
-  function handleAttendanceChange(e, student, lesson) {
+  function handleAttendanceChange(e: any, student: GroupPerson, lesson: Lesson) {
     if (isStudent) return;
 
-    const attendanceItem = $attendance[student.id] ? $attendance[student.id][lesson.id] || {} : {};
+    const attendanceItem = $attendance[student.id]
+      ? $attendance[student.id][lesson.id] || { id: undefined }
+      : { id: undefined };
 
     /* 
     This validation is useless. We shouldn't assume we already have an attendance item id 
@@ -102,7 +113,7 @@
   }
 
   // function for the searchbar
-  function searchStudents(query) {
+  function searchStudents(query: string) {
     const lowercaseQuery = query.toLowerCase();
     return students.filter((student) =>
       student.profile.fullname.toLowerCase().includes(lowercaseQuery)
@@ -118,6 +129,8 @@
     }
 
     const { data: _data } = await fetchCourse(data.courseId);
+    if (!_data) return;
+
     setCourse(_data);
     setAttendance(_data);
   });
@@ -125,7 +138,7 @@
   $: students = isStudent
     ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
-  console.log(students);
+  $: console.log(students);
 </script>
 
 <CourseContainer bind:isStudent>
@@ -180,7 +193,7 @@
               {#each $lessons as lesson}
                 <StructuredListCell class="">
                   <Checkbox
-                    class={isStudent && 'cursor-not-allowed'}
+                    class={isStudent ? 'cursor-not-allowed' : ''}
                     disabled={isStudent}
                     checked={$attendance[student.id]
                       ? $attendance[student.id][lesson.id]

src/routes/courses/[id]/lessons/+page.svelte

@@ -50,7 +50,6 @@
     return `${ye}-${mo}-${da}`;
   }
 
-  // TODO: CRUD of lessons
   function addLesson() {
     openModal = true;
   }

src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -51,7 +51,7 @@
     }
   }
 
-  async function fetchReqData(lessonId = '') {
+  async function fetchReqData(lessonId = '', isMaterialsTabActive: false) {
     isFetching = true;
 
     let lessonData;
@@ -61,11 +61,12 @@
       lessonData = _data?.lessons.find((lesson) => lesson.id === lessonId);
 
       setCourse(_data);
-    } else if (prevLessonId !== lessonId) {
+    } else if (isMaterialsTabActive) {
       const lesson = await fetchLesson(lessonId);
       lessonData = lesson.data;
     }
 
+    console.log('lessonData', lessonData);
     prevLessonId = lessonId;
 
     const totalExercises = lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
@@ -197,7 +198,7 @@
 
   $: if (data.courseId && browser) {
     mode = MODES.view;
-    fetchReqData(data.lessonId);
+    fetchReqData(data.lessonId, data.isMaterialsTabActive);
   }
 </script>
 

src/routes/courses/[id]/submissions/+page.svelte

@@ -242,14 +242,14 @@
     <PageNav title="Submitted Exercises" />
 
     <PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">
-      <div class="flex items-center w-full overflow-x-scroll">
+      <div class="flex items-center w-full">
         {#each sections as { id, title, items }, idx (id)}
           <div
-            class="section rounded-md bg-gray-100 dark:bg-black border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
+            class="section rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-600 p-3 h-80 mr-3 overflow-hidden"
             animate:flip={{ duration: flipDurationMs }}
           >
             <div class="flex items-center mb-2">
-              <Chip value={items.length} class="bg-set" />
+              <Chip value={items.length} className="bg-set dark:bg-neutral-800" />
               <p class="dark:text-white ml-2 font-bold">{title}</p>
             </div>
             <div
@@ -264,9 +264,9 @@
             >
               {#each items as item (item.id)}
                 <div
-                  class="border {item.isEarly
+                  class="{item.isEarly
-                    ? 'border-grey-700'
+                    ? 'border-none'
-                    : 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-black py-3 px-3"
+                    : 'border border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-neutral-800 py-3 px-3"
                   animate:flip={{ duration: flipDurationMs }}
                 >
                   <a

src/routes/lms/exercises/+page.svelte

@@ -1,91 +1,120 @@
-<script>
+<script lang="ts">
-  import { page } from '$app/stores';
+  import { cloneDeep } from 'lodash';
   import Chip from '$lib/components/Chip/index.svelte';
+  import { profile } from '$lib/utils/store/user';
+  import { browser } from '$app/environment';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { fetchLMSExercises } from '$lib/utils/services/lms/exercises';
+  import type { LMSExercise } from '$lib/utils/services/lms/exercises';
+  import dayjs from 'dayjs';
+  import relativeTime from 'dayjs/plugin/relativeTime';
 
-  let sections = [
+  dayjs.extend(relativeTime);
+
+  const defaultSections = [
     {
-      id: 1,
+      id: 0,
-      title: 'Pending',
+      title: 'Not Submitted',
-      value: 0,
+      items: [],
-      items: [
-        {
-          id: 1,
-          statusId: 'pending',
-          isEarly: true,
-          submittedAt: '5 min ago',
-          exercise: {
-            id: 1,
-            title: 'Ai for dummies'
-          },
-          // answers,
-          student: {
-            username: 'user'
-          },
-          lesson: {
-            id: 1,
-            title: 'Introduction to AI'
-          }
-        }
-      ],
       className: 'text-[#E35353] bg-[#FDDFE4]'
     },
     {
-      id: 2,
+      id: 1,
       title: 'Submitted',
-      value: 0,
+      items: [],
-      items: [
+      className: 'text-orange-700 bg-orange-200'
-        {
+    },
-          id: 2,
+    {
-          statusId: 'pending',
+      id: 2,
-          isEarly: true,
+      title: 'Grading',
-          submittedAt: '5 min ago',
+      items: [],
-          exercise: {
+      className: 'text-yellow-700 bg-yellow-200'
-            id: 2,
-            title: 'Digital photography for dummies'
-          },
-          // answers,
-          student: {
-            username: 'user'
-          },
-          lesson: {
-            id: 2,
-            title: 'Introduction to Photography'
-          }
-        }
-      ],
-      className: 'text-[#0233BD] bg-[#D9E0F5]'
     },
     {
       id: 3,
       title: 'Graded',
       value: 0,
-      items: [
+      items: [],
-        {
+      className: 'text-green-700 bg-green-200'
-          id: 3,
-          statusId: 'pending',
-          isEarly: true,
-          submittedAt: '5 min ago',
-          exercise: {
-            id: 3,
-            title: 'Landscaping and its deep secrets'
-          },
-          // answers,
-          student: {
-            username: 'user'
-          },
-          lesson: {
-            id: 1,
-            title: 'Introduction to Landscape'
-          }
-        }
-      ],
-      className: 'text-[#0F9D58] bg-[#E2FEEA]'
     }
   ];
+  let sections: Section[] = cloneDeep(defaultSections);
+
+  interface Section {
+    id: number;
+    title: string;
+    className: string;
+    items: ExerciseItem[];
+  }
+
+  interface ExerciseItem {
+    courseTitle: string;
+    courseURL: string;
+    exerciseTitle: string;
+    exerciseId: string;
+    exerciseURL: string;
+    lessonNo: string;
+    lessonURL: string;
+    submissionStatus: number;
+    submissionUpdatedAt: string;
+  }
+
+  function generateSections(exercises: LMSExercise[]): Section[] {
+    const _sections: Section[] = cloneDeep(defaultSections);
+
+    for (const exercise of exercises) {
+      const { id, title, updated_at, submission, lesson } = exercise;
+
+      const submissionItem = submission[0] || {
+        status_id: 0,
+        updated_at
+      };
+
+      const courseURL = `/courses/${lesson.course.id}`;
+      const lessonURL = `${courseURL}/lessons/${lesson.id}`;
+      const exerciseURL = `${lessonURL}/exercises/${id}`;
+
+      const item: ExerciseItem = {
+        exerciseId: id,
+        courseTitle: lesson.course.title,
+        courseURL,
+        exerciseTitle: title,
+        exerciseURL,
+        lessonNo: lesson.order < 9 ? '0' + (lesson.order + 1) : `${lesson.order}`,
+        lessonURL,
+        submissionStatus: submissionItem.status_id,
+        submissionUpdatedAt: dayjs(submissionItem.updated_at).fromNow(true) + ` ago`
+      };
+
+      _sections[submissionItem.status_id].items.push(item);
+    }
+
+    return _sections;
+  }
+
+  async function fetchData(profileId: string, orgId: string) {
+    const { exercises, error } = await fetchLMSExercises(profileId, orgId);
+    console.log('exercises', exercises);
+    console.log('error', error);
+
+    if (error) {
+      snackbar.error('Fetching exercises failed, please reload the page');
+      return;
+    }
+
+    if (!exercises) return;
+
+    sections = generateSections(exercises);
+  }
+
+  $: if (browser && $profile.id && $currentOrg.id) {
+    fetchData($profile.id, $currentOrg.id);
+  }
 </script>
 
 <section class="w-full max-w-6xl mx-auto">
-  <div class="py-10 px-5">
+  <div class="p-5">
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-3xl font-bold">Exercises</h1>
     </div>
@@ -94,41 +123,34 @@
       <div class="flex items-center w-full">
         {#each sections as { title, items, className }}
           <div
-            class="min-w-[355px] max-w-[355px] h-[516px] rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-700 p-3 mr-3 overflow-hidden"
+            class="min-w-[355px] max-w-[355px] h-[70vh] rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-700 p-3 mr-3 overflow-hidden"
           >
             <div class="flex items-center mb-2 gap-2">
               <p class="dark:text-white ml-2 font-bold">{title}</p>
               <Chip value={items.length} {className} />
             </div>
-            <div class="content pr-2 overflow-y-auto mb-3">
+            <div class="pr-2 h-full overflow-y-auto pb-3">
-              {#each items as item (item.id)}
+              {#each items as item}
                 <div class=" w-full my-2 mx-0 rounded-md bg-white dark:bg-neutral-800 py-3 px-3">
                   <a
-                    class="flex w-full items-center cursor-pointer text-black mb-2"
+                    class="flex w-full items-center cursor-pointer text-primary-600 mb-2"
-                    href={`${$page.url.pathname}?submissionId=${item.id}`}
+                    href={item.courseURL}
                   >
-                    <p class="dark:text-white ml-2 text-sm">
+                    <p class="text-xs">{item.courseTitle}</p>
-                      {item.student.username}
+                  </a>
-                    </p>
+                  <a class="text-black dark:text-white text-md font-bold" href={item.exerciseURL}>
+                    {item.exerciseTitle}
                   </a>
                   <a
-                    class="text-primary-700 dark:text-white text-md font-bold"
+                    class="flex items-center no-underline hover:underline text-black my-2 w-fit"
-                    href="{$page.url.pathname}?submissionId={item.id}"
+                    href={item.lessonURL}
-                  >
-                    {item.exercise.title}
-                  </a>
-                  <a
-                    class="flex items-center no-underline hover:underline text-black my-2"
-                    href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
-                      .id}/exercises/{item.exercise.id}"
                   >
                     <p class="dark:text-white text-grey text-sm">
-                      #{item.lesson.title}
+                      #Lesson {item.lessonNo}
-                      {`${item.tutor ? 'created by' + item.tutor.name : ''}`}
                     </p>
                   </a>
                   <p class="dark:text-white text-gray-500 text-xs">
-                    {item.submittedAt}
+                    {item.submissionUpdatedAt}
                   </p>
                 </div>
               {/each}

src/routes/lms/mylearning/+page.svelte

@@ -7,6 +7,7 @@
   import { profile } from '$lib/utils/store/user';
   import { currentOrg } from '$lib/utils/store/org';
   import { courses, courseMetaDeta, coursesComplete } from '$lib/components/Courses/store';
+  import { browser } from '$app/environment';
 
   const tabs = [
     {
@@ -26,13 +27,15 @@
   }
 
   async function getCourses(userId: string | null, orgId: string) {
+    console.log('hasFetched', hasFetched);
     if (hasFetched || !userId || !orgId) {
       return;
     }
+    hasFetched = true;
     $courseMetaDeta.isLoading = true;
 
     const coursesResult = await fetchCourses(userId, orgId);
-    console.log(`coursesResult`, coursesResult);
+    console.log(`get courses result`, coursesResult);
 
     $courseMetaDeta.isLoading = false;
     if (!coursesResult) return;
@@ -41,7 +44,9 @@
     hasFetched = true;
   }
 
-  $: getCourses($profile.id, $currentOrg.id);
+  $: if (browser && $profile.id && $currentOrg.id) {
+    getCourses($profile.id, $currentOrg.id);
+  }
 </script>
 
 <section class="max-w-6xl mx-auto">