feat: complete dashboard mvp

src/lib/components/Course/store.ts

@@ -4,7 +4,7 @@ import { lessons } from './components/Lesson/store/lessons';
 import { ROLE } from '$lib/utils/constants/roles';
 import type { Course, GroupPerson } from '$lib/utils/types';
 
-export const course: Writable<Course> = writable({
+export const defaultCourse: Course = {
   id: '',
   title: '',
   description: '',
@@ -44,7 +44,9 @@ export const course: Writable<Course> = writable({
     grading: false,
     lessonDownload: true
   }
-});
+};
+
+export const course: Writable<Course> = writable({ ...defaultCourse });
 
 export const mockGroupMember = {
   id: '434534534535',

src/lib/components/CourseContainer/index.svelte

@@ -1,18 +1,40 @@
 <script>
-  // @ts-nocheck
   import { Moon } from 'svelte-loading-spinners';
+  import { browser } from '$app/environment';
   import Navigation from '../Course/components/Navigation/index.svelte';
   import Backdrop from '$lib/components/Backdrop/index.svelte';
-  import { course, group } from '../Course/store';
+  import { course, group, setCourse, defaultCourse } from '../Course/store';
   import Confetti from '../Confetti/index.svelte';
   import { isMobile } from '$lib/utils/store/useMobile';
   import { profile } from '$lib/utils/store/user';
   import { apps } from '$lib/components/Apps/store';
+  import { fetchCourse } from '$lib/utils/services/courses';
+
+  export let courseId = '';
   export let path = '';
   export let isExercisePage = false;
   export let isStudent = false;
   export let isFetching = false;
 
+  let prevCourseId = '';
+
+  async function onCourseIdChange(courseId = '') {
+    console.log('courseid changed', courseId);
+    if (!courseId || prevCourseId === courseId || !browser) return;
+    console.log('making request', courseId);
+    isFetching = true;
+    course.set(defaultCourse);
+
+    const { data: _data } = await fetchCourse(courseId);
+
+    setCourse(_data);
+
+    isFetching = false;
+    prevCourseId = courseId;
+  }
+
+  $: onCourseIdChange(courseId);
+
   $: {
     const user = $group.people.find((person) => person.profile_id === $profile.id);
 

src/lib/components/LMS/components/Learning.svelte

@@ -14,7 +14,7 @@
 <section class="h-full">
   <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Currently Learning</p>
   <div
-    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full lg:h-[40vh] p-3"
+    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full md:h-[40vh] p-3"
   >
     {#if $coursesInProgress.length > 0}
       <div class="w-full h-full flex flex-col justify-start overflow-y-auto">

src/lib/components/Navigation/app.svelte

@@ -1,10 +1,12 @@
 <script>
+  import { goto } from '$app/navigation';
   import { browser } from '$app/environment';
   import NotificationIcon from 'carbon-icons-svelte/lib/Notification.svelte';
   import Moon from 'carbon-icons-svelte/lib/Moon.svelte';
   import Sun from 'carbon-icons-svelte/lib/Sun.svelte';
   import Menu from 'carbon-icons-svelte/lib/Menu.svelte';
   import Close from 'carbon-icons-svelte/lib/Close.svelte';
+  import ArrowLeft from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
 
   import IconButton from '$lib/components/IconButton/index.svelte';
   import { appStore } from '$lib/utils/store/app';
@@ -34,7 +36,11 @@
     }
   }
 
-  $: coursesPath = $appStore.isOrgSite ? '/lms/mylearning' : `${$currentOrgPath}/courses`;
+  $: coursesPath = $appStore.isOrgSite
+    ? '/lms/mylearning'
+    : isCoursePage
+    ? `${$currentOrgPath}/courses`
+    : $currentOrgPath;
 </script>
 
 <nav
@@ -58,12 +64,17 @@
             <Menu size={16} class=" text-white" />
           </IconButton>
         </li>
+        <li class="hidden md:block">
+          <IconButton onClick={() => goto(coursesPath)}>
+            <ArrowLeft size={16} class="text-white" />
+          </IconButton>
+        </li>
       {/if}
       <a
         href={coursesPath}
         title="Go to {isCoursePage ? 'Courses' : 'ClassroomIO Home'}"
         id="logo"
-        class="text-lg {isCoursePage && '-ml-2 md:ml-2'} line-clamp-1"
+        class="text-lg line-clamp-1"
       >
         {isCoursePage ? title : 'ClassroomIO'}
       </a>

src/lib/utils/functions/date.ts

@@ -6,3 +6,9 @@ dayjs.extend(relativeTime);
 export const calDateDiff = (date: string | number | Date): string => {
   return dayjs(date).fromNow(true) + ` ago`;
 };
+
+export const getGreeting = () => {
+  const date = new Date();
+  const hours = date.getHours();
+  return hours < 12 ? 'Good Morning' : hours < 18 ? 'Good Afternoon' : 'Good Evening';
+};

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

@@ -1,19 +1,41 @@
 import type { UserLessonDataType } from '$lib/utils/types';
 import { supabase } from '$lib/utils/functions/supabase';
 
+function getFirstAndLastDayOfMonth(): { firstDay: string; lastDay: string } {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth();
+
+  // Create a date object for the first day of the month
+  const firstDay = new Date(year, month, 1).toISOString();
+
+  // Find the last day of the next month and subtract one day to get the last day of the current month
+  const nextMonth: any = new Date(year, month + 1, 1);
+  const lastDay = new Date(nextMonth - 1).toISOString();
+
+  return {
+    firstDay,
+    lastDay
+  };
+}
+
 export async function fetchUserUpcomingData(
-  profileId: string | null
+  profileId: string | null,
+  orgId: string
 ): Promise<UserLessonDataType[] | []> {
   if (!profileId) {
     return [];
   }
 
-  const { data: userUpcomingData } = await supabase.rpc(
+  const { lastDay, firstDay } = getFirstAndLastDayOfMonth();
-    'get_user_upcoming_lessons',
+
-    {
+  const { data: userUpcomingData } = await supabase
+    .rpc('get_user_upcoming_lessons', {
       profile_id_arg: profileId,
-    }
+      org_id_arg: orgId
-  );
+    })
+    .filter('lesson_at', 'gte', firstDay)
+    .filter('lesson_at', 'lte', lastDay);
 
   console.log(`userUpcomingData`, userUpcomingData);
 

src/lib/utils/store/org.ts

@@ -3,6 +3,7 @@ import { STEPS } from '../constants/quiz';
 import type { Writable } from 'svelte/store';
 import type { CurrentOrg, OrgTeamMember } from '../types/org';
 import { ROLE } from '$lib/utils/constants/roles';
+import type { UserLessonDataType } from '$lib/utils/types';
 
 export const orgs = writable<CurrentOrg[]>([]);
 export const currentOrg: Writable<CurrentOrg> = writable({
@@ -54,3 +55,5 @@ export const quizStore = writable({
 export const playQuizStore = writable({
   step: STEPS.CONNECT_TO_PLAY
 });
+
+export const userUpcomingData = writable<UserLessonDataType[]>([]);

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

@@ -1,27 +1,10 @@
 <script>
   import Overview from '$lib/components/Course/index.svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import { setCourse } from '$lib/components/Course/store';
-  import { fetchCourse } from '$lib/utils/services/courses';
-  import { browser } from '$app/environment';
 
   export let data;
-  const { courseId } = data;
-
-  let prevCourseId = '';
-
-  async function onCourseIdChange(courseId = '') {
-    if (!courseId || prevCourseId === courseId || !browser) return;
-
-    const { data: _data } = await fetchCourse(courseId);
-
-    setCourse(_data);
-    prevCourseId = courseId;
-  }
-
-  $: onCourseIdChange(courseId);
 </script>
 
-<CourseContainer>
+<CourseContainer bind:courseId={data.courseId}>
   <Overview />
 </CourseContainer>

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

@@ -15,9 +15,8 @@
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import Box from '$lib/components/Box/index.svelte';
-  import { course, group, setCourse } from '$lib/components/Course/store';
+  import { course, group } from '$lib/components/Course/store';
   import { getLectureNo } from '$lib/components/Course/function';
-  import { fetchCourse } from '$lib/utils/services/courses';
   import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
   import { ROLE } from '$lib/utils/constants/roles';
   import { takeAttendance } from '$lib/utils/services/attendance';
@@ -27,6 +26,7 @@
   import type { GroupPerson, Lesson } from '$lib/utils/types/index';
 
   export let data;
+
   interface CourseData {
     attendance: {
       student_id: string;
@@ -127,12 +127,6 @@
       }
       return;
     }
-
-    const { data: _data } = await fetchCourse(data.courseId);
-    if (!_data) return;
-
-    setCourse(_data);
-    setAttendance(_data);
   });
 
   $: students = isStudent
@@ -140,7 +134,7 @@
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
 </script>
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Attendance" />
   <PageBody width="w-full max-w-6xl md:w-11/12">
     <section class="flex items-center mx-2 lg:mx-9 my-5">

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
@@ -13,22 +12,14 @@
   // import { Tabs, Tab } from 'carbon-components-svelte';
   // import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
   import StudentCertificate from '$lib/components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
-  import { fetchCourse } from '$lib/utils/services/courses';
-  import { browser } from '$app/environment';
 
   export let courseId: string = '';
   let isStudent = false;
-
-  onMount(async () => {
-    if ($course.id || !browser) return;
-    const { data } = await fetchCourse(courseId);
-    setCourse(data);
-  });
 </script>
 
 <IssueCertificateModal />
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId>
   <PageNav title="Certificates" disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>

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

@@ -2,28 +2,19 @@
   import { fly } from 'svelte/transition';
   import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
   import Editor from '$lib/components/CourseLandingPage/components/Editor/index.svelte';
-  import { profile } from '$lib/utils/store/user';
+  import { course } from '$lib/components/Course/store';
-  import { setCourse, course } from '$lib/components/Course/store';
   import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { fetchCourse } from '$lib/utils/services/courses';
-  import { browser } from '$app/environment';
 
   export let data;
+
   const { courseId } = data;
 
   let courseData = {};
 
-  async function triggerSetCourse(_profile) {
-    if ($course.id || !browser) return;
-    const { data: _data } = await fetchCourse(courseId);
-    setCourse(_data);
-  }
-
   function setCourseData(course = {}, lessons) {
     courseData = { ...course, lessons };
   }
 
-  $: triggerSetCourse($profile);
   $: setCourseData($course, $lessons);
   $: console.log('courseData changed', courseData);
 </script>

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

@@ -17,7 +17,7 @@
   import TextField from '$lib/components/Form/TextField.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import Select from '$lib/components/Form/Select.svelte';
-  import { fetchCourse, updateLesson } from '$lib/utils/services/courses';
+  import { updateLesson } from '$lib/utils/services/courses';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import { profile } from '$lib/utils/store/user';
   import {
@@ -25,14 +25,13 @@
     handleSaveLesson,
     handleDelete
   } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { course, setCourse, group } from '$lib/components/Course/store';
+  import { course, group } from '$lib/components/Course/store';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import TextChip from '$lib/components/Chip/Text.svelte';
   import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
   import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
 
   export let data;
-  const { courseId } = data;
 
   let lessonEditing;
   let isStudent = true;
@@ -85,12 +84,6 @@
     }
   }
 
-  onMount(async () => {
-    if ($course.id) return;
-    const { data: _data } = await fetchCourse(courseId);
-    setCourse(_data);
-  });
-
   $: {
     const user = $group.people.find((person) => person.profile_id === $profile.id);
 
@@ -102,7 +95,7 @@
 
 <AddLessonModal {isStudent} bind:openModal />
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Lessons">
     <div slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>

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

@@ -58,13 +58,7 @@
     isFetching = true;
 
     let lessonData;
-    if (!$course.id) {
+    if (isMaterialsTabActive) {
-      const { data: _data } = await fetchCourse(data.courseId);
-
-      lessonData = _data?.lessons.find((lesson) => lesson.id === lessonId);
-
-      setCourse(_data);
-    } else if (isMaterialsTabActive) {
       const lesson = await fetchLesson(lessonId);
       lessonData = lesson.data;
     }
@@ -222,6 +216,7 @@
   bind:isStudent
   {path}
   isExercisePage={!data.isMaterialsTabActive && data.exerciseId}
+  bind:courseId={data.courseId}
 >
   <PageNav
     bind:hideOnMobile={isStudent}

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

@@ -6,9 +6,9 @@
   import PageBody from '$lib/components/PageBody/index.svelte';
   import Box from '$lib/components/Box/index.svelte';
   import { ROLE } from '$lib/utils/constants/roles';
-  import { setCourse, course, group } from '$lib/components/Course/store';
+  import { group } from '$lib/components/Course/store';
   import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { fetchCourse, fetchExercisesByMarks } from '$lib/utils/services/courses';
+  import { fetchExercisesByMarks } from '$lib/utils/services/courses';
   import { getLectureNo } from '$lib/components/Course/function';
   import { fetchMarks } from '$lib/utils/services/marks';
   import { profile } from '$lib/utils/store/user';
@@ -34,11 +34,6 @@
   }
 
   onMount(async () => {
-    if (!$course.id) {
-      const { data } = await fetchCourse(courseId);
-      setCourse(data);
-    }
-
     const { data: marks } = await fetchMarks(courseId);
 
     marks.forEach((mark) => {
@@ -80,7 +75,7 @@
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
 </script>
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Marks" />
 
   <PageBody width="w-full max-w-6xl md:w-11/12">

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import TextChip from '$lib/components/Chip/Text.svelte';
   import ComingSoon from '$lib/components/ComingSoon/index.svelte';
-  import { onMount } from 'svelte';
   import copy from 'copy-to-clipboard';
   import {
     CopyButton,
@@ -13,7 +12,7 @@
     StructuredListRow
   } from 'carbon-components-svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import { fetchCourse, deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
+  import { deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
@@ -21,7 +20,7 @@
   import Select from '$lib/components/Form/Select.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import { setCourse, course, group } from '$lib/components/Course/store';
+  import { group } from '$lib/components/Course/store';
   import InviationModal from '$lib/components/Course/components/People/InviationModal.svelte';
   import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
   import {
@@ -36,7 +35,6 @@
   import type { GroupPerson } from '$lib/utils/types';
 
   export let data;
-  const { courseId } = data;
 
   let people: Array<Person> = [];
   let member: { id?: string; email?: string; profile?: { email: string } } = {};
@@ -105,12 +103,6 @@
     }
   }
 
-  onMount(async () => {
-    if ($course.id) return;
-    const { data } = await fetchCourse(courseId);
-    setCourse(data);
-  });
-
   $: sortAndFilterPeople($group.people, filterBy);
 </script>
 
@@ -121,7 +113,7 @@
   {deletePerson}
 />
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="People" disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>

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

@@ -1,25 +1,14 @@
 <script>
-  import { course, setCourse } from '$lib/components/Course/store';
-  import { fetchCourse } from '$lib/utils/services/courses';
-  import { onMount } from 'svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import Settings from '$lib/components/Course/components/Settings/index.svelte';
 
   export let data;
-
-  const { courseId } = data;
   let isStudent = false;
-
-  onMount(async () => {
-    if ($course.id) return;
-    const { data } = await fetchCourse(courseId);
-    setCourse(data);
-  });
 </script>
 
-<CourseContainer bind:isStudent>
+<CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Settings" />
   <PageBody>
     <Settings />

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

@@ -10,8 +10,7 @@
   import Chip from '$lib/components/Chip/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import { fetchCourse } from '$lib/utils/services/courses';
+  import { course } from '$lib/components/Course/store';
-  import { setCourse, course } from '$lib/components/Course/store';
   import {
     fetchSubmissions,
     updateSubmission,
@@ -258,8 +257,7 @@
 
   onMount(async () => {
     if (!$course.id) {
-      const { data } = await fetchCourse(courseId);
+      return;
-      setCourse(data);
     }
 
     const { data: submissions } = await fetchSubmissions(courseId || $course.id);
@@ -339,7 +337,7 @@
 />
 
 <RoleBasedSecurity allowedRoles={[1, 2]}>
-  <CourseContainer>
+  <CourseContainer bind:courseId={data.courseId}>
     <PageNav title="Submitted Exercises" />
 
     <PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">

src/routes/lms/+page.svelte

@@ -8,6 +8,7 @@
   import { fetchCourses } from '$lib/components/Courses/api';
   import { courses, courseMetaDeta } from '$lib/components/Courses/store';
   import type { Course } from '$lib/utils/types';
+  import { getGreeting } from '$lib/utils/functions/date';
 
   let hasFetched = false;
   let progressPercentage = 0;
@@ -47,7 +48,10 @@
 
 <section class="max-w-6xl gap-5 mx-auto">
   <div class="m-5">
-    <h1 class="text-3xl font-semibold">Welcome</h1>
+    <h1 class="dark:text-white text-2xl md:text-3xl font-bold">
+      {getGreeting()}
+      {$profile.fullname}!
+    </h1>
     <div
       class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-primary-900 my-2"
     >
@@ -57,7 +61,7 @@
           you learn the better you get.
         </p>
         <PrimaryButton
-          label="Start learning"
+          label="Don't give up"
           variant={VARIANTS.CONTAINED_WHITE}
           className="bg-white text-primary-800"
           onClick={() => goto('/lms/mylearning')}
@@ -69,14 +73,14 @@
         class="w-28 md:block md:w-1/3 lg:w-[275px] lg:h-[205px] mb-3 md:mb-0"
       />
     </div>
-    <section class="flex w-full flex-col xl:flex-row xl:gap-5">
+    <section class="flex w-full flex-col md:flex-row md:gap-5">
-      <div class="w-full md:w-[75%] mt-10 xl:mt-2">
+      <div class="w-full md:w-[50%] mt-10 xl:mt-2">
         <Learning />
       </div>
-      <div class="mt-10 xl:mt-2 w-full md:w-[75%] xl:w-[400px]">
+      <div class="mt-10 xl:mt-2 w-full md:w-[50%]">
         <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Your Progress</p>
         <div
-          class="flex items-center justify-center border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded h-fit lg:h-[40vh] lg:overflow-y-auto p-3"
+          class="flex items-center justify-center border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded h-fit md:h-[40vh] lg:overflow-y-auto p-3"
         >
           <div
             class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center justify-between md:items-center xl:items-start gap-5 md:justify-around"
@@ -96,7 +100,9 @@
                 <p class="text-xs font-normal text-[#656565] dark:text-white">No courses started</p>
               {/if}
             </span>
-            <h1 class="text-5xl md:text-6xl font-bold text-[#262626] dark:text-white my-0">
+            <h1
+              class="text-5xl md:text-6xl font-bold text-[#262626] dark:text-white my-0 whitespace-nowrap"
+            >
               {progressPercentage} %
             </h1>
           </div>

src/routes/org/[slug]/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  // import { profile } from '$lib/utils/store/user';
+  import { profile } from '$lib/utils/store/user';
   // import { supabase } from '$lib/utils/functions/supabase';
   import { goto } from '$app/navigation';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
   import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte';
-  import Avatar from '$lib/components/Avatar/index.svelte';
+  // import Avatar from '$lib/components/Avatar/index.svelte';
   import { InlineCalendar, Datepicker } from 'svelte-calendar';
   import { formatUserUpcomingData, formatDate } from '$lib/utils/functions/routes/dashboard';
   import { user } from '$lib/utils/store/user';
@@ -15,21 +15,17 @@
   import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
   import { onMount } from 'svelte';
   import { Add } from 'carbon-icons-svelte';
-  import { isOrgAdmin } from '$lib/utils/store/org';
+  import { isOrgAdmin, currentOrgPath, currentOrg, userUpcomingData } from '$lib/utils/store/org';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants.js';
   import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
+  import { getGreeting } from '$lib/utils/functions/date';
+  import { appStore } from '$lib/utils/store/app';
 
   export let data;
 
   const { orgName } = data;
 
-  const theme = {
+  let theme = {};
-    calendar: {
-      width: '300px',
-      height: '300px',
-      shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)'
-    }
-  };
 
   let store;
   let calendar: HTMLElement | null = null;
@@ -55,40 +51,6 @@
       value: 0
     }
   ];
-  const activities = [
-    {
-      avatar:
-        'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
-      name: 'Nnancy Okoye',
-      time: '1 hour ago',
-      description: 'Submitted an assignment for lesson Figma prototyping',
-      link: '/'
-    },
-    {
-      avatar:
-        'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
-      name: 'Bro Shagi',
-      time: '2 days ago',
-      description: 'Submitted an assignment for lesson Figma prototyping',
-      link: '/'
-    },
-    {
-      avatar:
-        'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
-      name: 'Bill Gates',
-      time: '13 hours ago',
-      description: 'Submitted an assignment for lesson Figma prototyping',
-      link: '/'
-    },
-    {
-      avatar:
-        'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
-      name: 'Steve Jobs',
-      time: 'yesterday',
-      description: 'Submitted an assignment for lesson Figma prototyping',
-      link: '/'
-    }
-  ];
 
   function createCourse() {
     goto(`/org/${orgName}/courses?create=true`);
@@ -133,12 +95,14 @@
       }
     }, 500);
 
-  async function runFirstThings(currentSession: { id: string } | null) {
+  async function runFirstThings(currentSession: { id: string } | null, orgId: string) {
-    if (!currentSession || !currentSession.id) return;
+    if (!currentSession || !currentSession.id || !orgId) return;
 
-    const userUpcomingData = await fetchUserUpcomingData(currentSession.id);
+    if (!$userUpcomingData.length) {
+      $userUpcomingData = await fetchUserUpcomingData(currentSession.id, orgId);
+    }
 
-    lessonsByMonth = formatUserUpcomingData(userUpcomingData);
+    lessonsByMonth = formatUserUpcomingData($userUpcomingData);
 
     // Only for desktop. Only run on mobile when the user clicks on the date
     if (!$isMobile) {
@@ -146,7 +110,7 @@
     }
   }
 
-  function getDataOfSelectedDate(_selectedDate: string): UserLessonDataType[] | [] {
+  function getDataOfSelectedDate(_selectedDate: string, orgId: string): UserLessonDataType[] | [] {
     if (!_selectedDate) return [];
 
     const selectedDate = new Date(_selectedDate).toUTCString();
@@ -185,10 +149,33 @@
   });
 
   // This is here not called onMount because we want to call it as soon as we have the user's `currentSession` value
-  $: runFirstThings($user.currentSession);
+  $: runFirstThings($user.currentSession, $currentOrg.id);
 
   // Every time the date changes
-  $: selectedDateLessonData = getDataOfSelectedDate($store?.selected);
+  $: selectedDateLessonData = getDataOfSelectedDate($store?.selected, $currentOrg.id);
+
+  $: theme = {
+    calendar: {
+      width: '250px',
+      height: '283px',
+      shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
+      legend: {
+        height: '30px'
+      },
+      colors: {
+        text: {
+          primary: $appStore.isDark ? '#eee' : '#333',
+          highlight: '#fff'
+        },
+        background: {
+          primary: $appStore.isDark ? '#333' : '#fff',
+          highlight: $appStore.isDark ? '#5829d6' : '#eb7400',
+          hover: $appStore.isDark ? '#222' : '#eee'
+        },
+        border: $appStore.isDark ? '#222' : '#eee'
+      }
+    }
+  };
 </script>
 
 <svelte:head>
@@ -199,7 +186,10 @@
 
 <div class="py-10 px-5 w-full max-w-7xl mx-auto">
   <div class="flex items-center justify-between mb-10">
-    <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Dashboard</h1>
+    <h1 class="dark:text-white text-2xl md:text-3xl font-bold">
+      {getGreeting()}
+      {$profile.fullname}!
+    </h1>
     <div class="flex items-center">
       <PrimaryButton
         variant={VARIANTS.OUTLINED}
@@ -218,7 +208,29 @@
     </div>
   </div>
 
-  <div class="flex items-start flex-wrap">
+  <div
+    class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-primary-900 my-2"
+  >
+    <span>
+      <p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
+        Thank you for what you do ❤️. You are changing lives, one classroom at a time, thanks to you
+        the world is a better place. 😊
+      </p>
+      <PrimaryButton
+        label="Keep Building 🚀"
+        variant={VARIANTS.CONTAINED_WHITE}
+        className="bg-white text-primary-800"
+        onClick={() => goto(`${$currentOrgPath}/courses`)}
+      />
+    </span>
+    <img
+      src="/images/student-learning.svg"
+      alt="student Learning Pictogram"
+      class="w-28 md:block md:w-1/3 lg:w-[200px] lg:max-h-[205px] mb-3 md:mb-0"
+    />
+  </div>
+
+  <!-- <div class="flex items-start flex-wrap">
     {#each boxes as box}
       <div
         class="w-full md:w-[246px] h-[165px] flex flex-col rounded border border-gray-200 justify-center px-5 md:mr-5 mb-5"
@@ -227,20 +239,20 @@
         <p class="dark:text-white text-xl font-bold">{box.value}</p>
       </div>
     {/each}
-  </div>
+  </div> -->
 
-  <div class="flex flex-wrap mt-5 gap-4 w-full">
+  <div class="w-full">
     <!-- Your Schedule -->
     <div class="w-full xl:w-auto container">
-      <p class="dark:text-white font-bold mb-7">Your Schedule</p>
+      <p class="dark:text-white font-bold mt-7 mb-4">Your Schedule</p>
-      <div class="rounded border border-gray-200 md:mr-3 md:min-w-[450px] schedule-box w-full">
+      <div
+        class="rounded border border-gray-200 gap-3 flex flex-col md:flex-row items-start px-2 md:px-5 py-5 w-full"
+      >
         {#if !$isMobile}
-          <div id="calendar" class="flex justify-center mt-5">
+          <div id="calendar" class="flex justify-center mt-5 w-2/5">
             <InlineCalendar bind:store {theme} />
           </div>
-        {/if}
+        {:else}
-
-        {#if $isMobile}
           <div class="header w-full flex items-center">
             <Datepicker bind:store let:key let:send let:receive>
               <button
@@ -255,61 +267,64 @@
               </button>
             </Datepicker>
           </div>
-        {:else}
-          <p class="dark:text-white font-bold m-5">
-            {formatDate($store?.selected)}
-          </p>
         {/if}
 
-        {#each selectedDateLessonData as lessonData}
+        <div class="max-h-[400px] overflow-y-scroll w-full">
-          <div class="flex items-center justify-between p-5 lesson-data">
+          {#if !$isMobile}
-            <div class="w-4/5">
+            <p class="dark:text-white font-bold m-5">
-              <a
+              {formatDate($store?.selected)}
-                class="text-black-700 text-lg font-bold flex items-center"
+            </p>
-                href={`/courses/${lessonData.course_id}/lessons/${
+          {/if}
-                  lessonData.is_unlocked ? lessonData.lesson_id : ''
+          {#each selectedDateLessonData as lessonData}
-                }`}
+            <div class="flex items-center justify-between p-5 lesson-data">
-              >
+              <div class="w-full">
-                {lessonData.lesson_title}
+                <a
-                {#if lessonData.is_unlocked}
+                  class="text-black-700 text-lg font-bold flex items-center"
-                  <span class="ml-2 success">
+                  href={`/courses/${lessonData.course_id}/lessons/${
-                    <LockedIcon class="carbon-icon dark:text-white" />
+                    lessonData.is_unlocked ? lessonData.lesson_id : ''
-                  </span>
+                  }`}
-                {:else}
+                >
-                  <UnlockedIcon class="carbon-icon dark:text-white" />
+                  {lessonData.lesson_title}
-                {/if}
+                  {#if lessonData.is_unlocked}
-              </a>
+                    <span class="ml-2 success">
-              <p class="dark:text-white text-grey text-sm flex items-center">
+                      <LockedIcon class="carbon-icon dark:text-white" />
-                <a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
+                    </span>
-                  {` ${lessonData.course_title}`}
+                  {:else}
+                    <UnlockedIcon class="carbon-icon dark:text-white" />
+                  {/if}
                 </a>
-              </p>
+                <p class="dark:text-white text-grey text-sm flex items-center">
+                  <a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
+                    {` ${lessonData.course_title}`}
+                  </a>
+                </p>
+              </div>
+              {#if lessonData.is_unlocked}
+                <a
+                  class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
+                    'opacity-50 pointer-events-none cursor-not-allowed'}"
+                  href={!!lessonData.call_url ? lessonData.call_url : undefined}
+                  target="_blank"
+                  title={!!lessonData.call_url
+                    ? 'Click to join the call'
+                    : 'No call link was added for this lesson. Ask your trainer'}
+                >
+                  Join call
+                </a>
+              {/if}
             </div>
-            {#if lessonData.is_unlocked}
+          {:else}
-              <a
+            <p class="dark:text-white flex items-center justify-center w-full no-data">
-                class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
+              No lesson on this day
-                  'opacity-50 pointer-events-none cursor-not-allowed'}"
+            </p>
-                href={!!lessonData.call_url ? lessonData.call_url : undefined}
+          {/each}
-                target="_blank"
+        </div>
-                title={!!lessonData.call_url
-                  ? 'Click to join the call'
-                  : 'No call link was added for this lesson. Ask your trainer'}
-              >
-                Join call
-              </a>
-            {/if}
-          </div>
-        {:else}
-          <p class="dark:text-white flex items-center justify-center w-full no-data">
-            No lesson on this day
-          </p>
-        {/each}
       </div>
     </div>
 
     <!-- Your Activities -->
 
-    <div class="w-full xl:w-auto container">
+    <!-- <div class="w-full xl:w-auto container">
       <p class="dark:text-white font-bold mb-7">Your Activities</p>
       <div
         class="rounded border border-gray-200 md:min-w-[450px] activities-box py-4 px-2 md:px-5 w-full"
@@ -333,7 +348,7 @@
           </div>
         {/each}
       </div>
-    </div>
+    </div> -->
   </div>
 </div>
 
@@ -346,23 +361,6 @@
     width: 246px;
     height: 165px;
   }
-  .schedule-box,
-  .activities-box {
-    height: 516px;
-    overflow-y: auto;
-    overflow: hidden;
-  }
-
-  .calendar-root {
-    max-width: 1000px;
-    margin: 0 auto;
-  }
-
-  .calendar-info {
-    max-width: 600px;
-    width: 100%;
-    height: 100%;
-  }
 
   .header {
     border-bottom: 1px solid var(--border-color);
@@ -393,6 +391,10 @@
     color: var(--main-primary-color);
   }
 
+  :global(#calendar .controls .button.label) {
+    font-size: 1rem;
+  }
+
   @media (max-width: 640px) {
     :global(span.active-day) {
       font-size: 30px;