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(
-    'get_user_upcoming_lessons',
-    {
+  const { lastDay, firstDay } = getFirstAndLastDayOfMonth();
+
+  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[]>([]);