feat: org and course student analytics page (#509)

* UI initialization

* feat: structure API

* feat: audience & people analytics

* feat: quick changes

* feat: add comments

* redesign course student page

* chore: make requests to db more efficient

* clean up analytics page for course

* feat: finish up audience analytics page

* chore: minor UI tweaks

* translate all

* replace inserts of log in events to update

* catch error if last_login isn't inserted

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/components/Analytics/ActivityCard.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  interface Activity {
+    icon: any;
+    title: string;
+    percentage: number;
+    description: string;
+    hidePercentage?: boolean;
+  }
+
+  export let activity: Activity;
+</script>
+
+<div
+  class="flex flex-col items-center justify-center gap-5 rounded-xl border p-3 dark:border-neutral-600 md:flex-row md:p-5"
+>
+  <div class="bg-primary-200 w-fit rounded-full p-4 text-black">
+    <svelte:component this={activity.icon} size={24} />
+  </div>
+
+  <div>
+    <p class="text-center text-sm font-medium text-gray-600 dark:text-gray-200 md:text-left">
+      {activity.title}
+    </p>
+    <p class="text-center text-2xl font-bold md:text-left">
+      {activity.percentage}
+      {#if !activity.hidePercentage}
+        %
+      {/if}
+    </p>
+    <p class="text-center text-xs text-gray-500 dark:text-gray-300 md:text-left md:text-sm">
+      {activity.description}
+    </p>
+  </div>
+</div>

apps/dashboard/src/lib/components/Analytics/HeroProfileCard.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Avatar from '$lib/components/Avatar/index.svelte';
+  import { calDateDiff } from '$lib/utils/functions/date';
+  import { t } from '$lib/utils/functions/translations';
+  import type { UserAnalytics } from '$lib/utils/types/analytics';
+  import Alarm from 'carbon-icons-svelte/lib/Alarm.svelte';
+  import Email from 'carbon-icons-svelte/lib/Email.svelte';
+
+  export let user: UserAnalytics['user'];
+</script>
+
+<div class="rounded-md border p-5 dark:border-neutral-600">
+  <div class="flex w-full flex-col items-center justify-start gap-4 text-start md:flex-row">
+    <Avatar src={user.avatarUrl} name={user.fullName} width="w-16" height="h-16" />
+    <div class="flex flex-col space-y-2">
+      <p class="text-center text-2xl font-bold dark:text-white md:text-left">
+        {user.fullName}
+      </p>
+
+      <div class="flex flex-col items-center gap-1 md:flex-row md:gap-4">
+        <p class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
+          <Email />
+          {user.email}
+        </p>
+
+        <p class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
+          <Alarm />
+          {$t('analytics.last_seen')}:
+          <span class="italic">
+            {user.lastSeen ? calDateDiff(user.lastSeen) : $t('analytics.a_while_ago')}
+          </span>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

apps/dashboard/src/lib/components/Analytics/LoadingPage.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { SkeletonPlaceholder } from 'carbon-components-svelte';
+</script>
+
+<div class="mx-auto max-w-4xl pt-14">
+  <SkeletonPlaceholder style="width: 100%; height: 10rem;" />
+  <div class="mt-10 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+    <SkeletonPlaceholder style="width: 270px; height: 10rem;" />
+    <SkeletonPlaceholder style="width: 270px; height: 10rem;" />
+    <SkeletonPlaceholder style="width: 270px; height: 10rem;" />
+  </div>
+</div>

apps/dashboard/src/lib/components/Analytics/index.ts

@@ -0,0 +1,3 @@
+export { default as ActivityCard } from './ActivityCard.svelte';
+export { default as HeroProfileCard } from './HeroProfileCard.svelte';
+export { default as LoadingPage } from './LoadingPage.svelte';

apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
-  import PageNav from '$lib/components/PageNav/index.svelte';
   import CloseButton from '$lib/components/Buttons/Close/index.svelte';
+  import { course, group } from '$lib/components/Course/store';
+  import PageNav from '$lib/components/PageNav/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { getSupabase } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
+  import { globalStore } from '$lib/utils/store/app';
+  import { profile } from '$lib/utils/store/user';
+  import type { Groupmember } from '$lib/utils/types';
+  import type {
+    PostgrestSingleResponse,
+    RealtimeChannel,
+    RealtimePostgresChangesPayload
+  } from '@supabase/supabase-js';
+  import { onDestroy, onMount } from 'svelte';
   import CreatePollForm from './components/CreatePollForm.svelte';
   import Poll from './components/Poll.svelte';
   import Tabs from './components/Tabs.svelte';
-  import { polls } from './store';
-  import type { PollType, TabsType, PollOptionsSubmissionType } from './types';
-  import { globalStore } from '$lib/utils/store/app';
-  import { getSupabase } from '$lib/utils/functions/supabase';
-  import { profile } from '$lib/utils/store/user';
-  import { group, course } from '$lib/components/Course/store';
-  import type { Groupmember } from '$lib/utils/types';
   import { fetchPolls, handleVote } from './service';
+  import { polls } from './store';
+  import type { PollOptionsSubmissionType, PollType, TabsType } from './types';
   import { getPollsData } from './utils';
-  import { snackbar } from '$lib/components/Snackbar/store';
-  import { onMount, onDestroy } from 'svelte';
-  import type {
-    RealtimeChannel,
-    RealtimePostgresChangesPayload,
-    PostgrestSingleResponse
-  } from '@supabase/supabase-js';
-  import { t } from '$lib/utils/functions/translations';
 
   export let handleClose = () => {};
 
@@ -213,7 +213,10 @@
     supabase.removeChannel(pollSubmissionsChannel);
   });
 
-  $: currentGroupMember = $group.people.find((person) => person.profile_id === $profile.id);
+  $: currentGroupMember = $group.people.find(
+    (person) => person.profile_id === $profile.id
+  ) as Groupmember;
+
   $: author = {
     id: currentGroupMember?.id || '',
     username: $profile.username || '',
@@ -253,7 +256,7 @@
   </div>
 </PageNav>
 
-<div class="p-2 overlow-y-auto md:max-w-[350px] md:min-w-[340px] w-full">
+<div class="overlow-y-auto w-full p-2 md:min-w-[340px] md:max-w-[350px]">
   {#if openCreatePollForm}
     <CreatePollForm
       onSubmit={handlePollCreate}

apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/Preview.svelte

@@ -1,18 +1,15 @@
 <script>
-  import RadioQuestion from '$lib/components/Question/RadioQuestion/index.svelte';
   import CheckboxQuestion from '$lib/components/Question/CheckboxQuestion/index.svelte';
+  import RadioQuestion from '$lib/components/Question/RadioQuestion/index.svelte';
   import TextareaQuestion from '$lib/components/Question/TextareaQuestion/index.svelte';
   import { QUESTION_TYPE } from '$lib/components/Question/constants';
   import { getPropsForQuestion } from './functions';
-  import { course } from '$lib/components/Course/store';
-  import { COURSE_TYPE } from '$lib/utils/types';
 
   export let questions = [];
   export let questionnaireMetaData = {};
   export let grades = {};
   export let onSubmit = () => {};
   export let onPrevious = () => {};
-  export let handleGrade = () => {};
   export let disableGrading = true;
   export let isGradeWithAI = false;
   export let isLoading = false;
@@ -36,10 +33,8 @@
       bind:reason={reasons[currentQuestion.id]}
       bind:isLoading
       gradeMax={currentQuestion.points}
-      handleGrade={handleGrade(currentQuestion.id)}
       {disableGrading}
       disabled={true}
-      hideGrading={$course.type === COURSE_TYPE.SELF_PACED}
     />
   {:else if QUESTION_TYPE.CHECKBOX === currentQuestion.question_type.id}
     <CheckboxQuestion
@@ -57,10 +52,8 @@
       bind:reason={reasons[currentQuestion.id]}
       bind:isLoading
       gradeMax={currentQuestion.points}
-      handleGrade={handleGrade(currentQuestion.id)}
       {disableGrading}
       disabled={true}
-      hideGrading={$course.type === COURSE_TYPE.SELF_PACED}
     />
   {:else if QUESTION_TYPE.TEXTAREA === currentQuestion.question_type.id}
     <TextareaQuestion
@@ -78,10 +71,8 @@
       bind:reason={reasons[currentQuestion.id]}
       bind:isLoading
       gradeMax={currentQuestion.points}
-      handleGrade={handleGrade(currentQuestion.id)}
       {disableGrading}
       disabled={true}
-      hideGrading={$course.type === COURSE_TYPE.SELF_PACED}
     />
   {/if}
 {/each}

apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/index.svelte

@@ -1,37 +1,38 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
   import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+  import PageBody from '$lib/components/PageBody/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { t } from '$lib/utils/functions/translations';
+  import { upsertExercise } from '$lib/utils/services/courses';
+  import { globalStore } from '$lib/utils/store/app';
+  import {
+    Breadcrumb,
+    BreadcrumbItem,
+    ContentSwitcher,
+    OverflowMenu,
+    OverflowMenuItem,
+    Switch
+  } from 'carbon-components-svelte';
   import AddAltIcon from 'carbon-icons-svelte/lib/AddAlt.svelte';
   import ViewIcon from 'carbon-icons-svelte/lib/View.svelte';
   import ViewFilledIcon from 'carbon-icons-svelte/lib/ViewFilled.svelte';
+  import { onDestroy, onMount } from 'svelte';
   import {
     handleAddQuestion,
     questionnaire,
-    validateQuestionnaire,
+    questionnaireOrder,
     reset,
-    questionnaireOrder
+    validateQuestionnaire
   } from '../store/exercise';
-  import {
-    ContentSwitcher,
-    Switch,
-    Breadcrumb,
-    BreadcrumbItem,
-    OverflowMenu,
-    OverflowMenuItem
-  } from 'carbon-components-svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import IconButton from '$lib/components/IconButton/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import ViewMode from './ViewMode.svelte';
   import EditMode from './EditMode.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import { upsertExercise } from '$lib/utils/services/courses';
-  import UpdateDescription from './UpdateDescription.svelte';
-  import { snackbar } from '$lib/components/Snackbar/store';
   import Analytics from './Submissions/index.svelte';
-  import { t } from '$lib/utils/functions/translations';
-  import { globalStore } from '$lib/utils/store/app';
+  import UpdateDescription from './UpdateDescription.svelte';
+  import ViewMode from './ViewMode.svelte';
 
   export let exerciseId = '';
   export let path = '';
@@ -78,16 +79,28 @@
     reset();
   });
 
+  $: onSelectedIndexChange(selectedIndex);
+  function onSelectedIndexChange(index: number) {
+    goto($page.url.pathname + '?tabIndex=' + index);
+  }
+
+  onMount(() => {
+    const tabIndex = $page.url.searchParams.get('tabIndex');
+    if (tabIndex) {
+      selectedIndex = parseInt(tabIndex);
+    }
+  });
+
   $: $questionnaire?.questions?.length < 1 && handleAddQuestion();
 </script>
 
 <PageBody bind:isPageNavHidden={$globalStore.isStudent} padding="px-4 overflow-x-hidden">
-  <div class="bg-gray-100 dark:bg-neutral-800 top-0 z-10 sticky p-2 mb-3">
+  <div class="sticky top-0 z-10 mb-3 bg-gray-100 p-2 dark:bg-neutral-800">
     <Breadcrumb noTrailingSlash>
-      <BreadcrumbItem href={path}
-        >{$t('course.navItem.lessons.exercises.all_exercises.heading')}</BreadcrumbItem
-      >
-      <BreadcrumbItem href={`${path}${exerciseId}`} isCurrentPage>
+      <BreadcrumbItem href={path}>
+        {$t('course.navItem.lessons.exercises.all_exercises.heading')}
+      </BreadcrumbItem>
+      <BreadcrumbItem href={`${path}/${exerciseId}`} isCurrentPage>
         {$questionnaire.title}
       </BreadcrumbItem>
     </Breadcrumb>
@@ -106,7 +119,7 @@
       </ContentSwitcher>
 
       {#if selectedIndex === 0}
-        <div class="flex items-center justify-end right-0 w-full">
+        <div class="right-0 flex w-full items-center justify-end">
           <div class="flex items-center">
             <PrimaryButton
               className="mr-2"

apps/dashboard/src/lib/components/Course/components/People/DeleteConfirmation.svelte

@@ -3,8 +3,8 @@
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
 
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import { deleteMemberModal } from './store';
   import { t } from '$lib/utils/functions/translations';
+  import { deleteMemberModal } from './store';
 
   export let email;
   export let deletePerson = () => {};
@@ -19,10 +19,12 @@
   onClose={() => ($deleteMemberModal.open = false)}
   bind:open={$deleteMemberModal.open}
   width="w-96"
+  containerClass="pt-3"
+  headerClass="py-2 px-5"
   modalHeading={$t('course.navItem.people.delete_confirmation.title')}
 >
   <div>
-    <h1 class="dark:text-white text-lg">
+    <h1 class="mt-0 text-lg dark:text-white">
       {$t('course.navItem.people.delete_confirmation.sure')} <strong>{email}</strong>?
     </h1>
 

apps/dashboard/src/lib/components/Courses/components/NewCourseModal/index.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import ComingSoon from '$lib/components/ComingSoon/index.svelte';
+  import { validateForm } from '$lib/components/Courses/functions';
+  import { courses, createCourseModal } from '$lib/components/Courses/store';
+  import TextArea from '$lib/components/Form/TextArea.svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
   import Modal from '$lib/components/Modal/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { ROLE } from '$lib/utils/constants/roles';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
+  import { addDefaultNewsFeed, addGroupMember } from '$lib/utils/services/courses';
+  import { capturePosthogEvent } from '$lib/utils/services/posthog';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import { COURSE_TYPE, COURSE_VERSION } from '$lib/utils/types';
   import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
   import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
-  import TextField from '$lib/components/Form/TextField.svelte';
-  import TextArea from '$lib/components/Form/TextArea.svelte';
-  import { courses, createCourseModal } from '$lib/components/Courses/store';
-  import { validateForm } from '$lib/components/Courses/functions';
-  import { ROLE } from '$lib/utils/constants/roles';
-  import { addGroupMember, addDefaultNewsFeed } from '$lib/utils/services/courses';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import { profile } from '$lib/utils/store/user';
-  import { currentOrg } from '$lib/utils/store/org';
-  import { goto } from '$app/navigation';
-  import { capturePosthogEvent } from '$lib/utils/services/posthog';
-  import { t } from '$lib/utils/functions/translations';
-  import { COURSE_TYPE, COURSE_VERSION } from '$lib/utils/types';
-  import ComingSoon from '$lib/components/ComingSoon/index.svelte';
 
   let isLoading = false;
   let errors = {
@@ -143,18 +143,19 @@
   onClose={() => onClose($page.url.pathname)}
   bind:open
   width="w-4/5 md:w-2/5 md:min-w-[600px]"
+  containerClass="max-w-2xl mx-auto"
   modalHeading={$t('courses.new_course_modal.heading')}
 >
   {#if step === 0}
     <div>
-      <h2 class="text-xl font-medium my-5">
+      <h2 class="my-5 text-xl font-medium">
         {$t('courses.new_course_modal.type_selector_title')}
       </h2>
 
-      <div class="flex flex-col md:flex-row gap-2 justify-between items-center my-8">
+      <div class="my-8 flex flex-col items-center justify-evenly gap-4 md:flex-row">
         {#each options as option}
           <button
-            class="w-11/12 md:w-[261px] md:h-[240px] p-5 rounded-md dark:bg-neutral-700 border-2 {option.type ===
+            class="w-11/12 rounded-md border-2 p-5 dark:bg-neutral-700 md:h-[240px] md:w-[261px] {option.type ===
             type
               ? 'border-primary-400'
               : `border-gray-200 dark:border-neutral-600 ${
@@ -164,7 +165,7 @@
             type="button"
             on:click={!option.isDisabled ? () => (type = option.type) : undefined}
           >
-            <div class="w-full flex flex-row-reverse h-[70%]">
+            <div class="flex h-[70%] w-full flex-row-reverse">
               {#if option.type === type}
                 <CheckmarkFilledIcon
                   size={16}
@@ -176,19 +177,19 @@
             </div>
 
             <div>
-              <p class="font-bold text-start flex items-center">
+              <p class="flex items-center text-start font-bold">
                 <span class="mr-2 text-sm">{option.title}</span>
                 {#if option.isDisabled}
                   <ComingSoon />
                 {/if}
               </p>
-              <p class="text-xs font-light text-start">{option.subtitle}</p>
+              <p class="text-start text-xs font-light">{option.subtitle}</p>
             </div>
           </button>
         {/each}
       </div>
 
-      <div class="mt-8 flex items-center flex-row-reverse">
+      <div class="mt-8 flex flex-row-reverse items-center">
         <PrimaryButton
           className="px-6 py-3"
           label={$t('courses.new_course_modal.next')}
@@ -199,7 +200,7 @@
     </div>
   {:else}
     <form on:submit|preventDefault={createCourse}>
-      <div class="flex items-end space-x-2 mb-4">
+      <div class="mb-4 flex items-end space-x-2">
         <TextField
           label={$t('courses.new_course_modal.course_name')}
           bind:value={$createCourseModal.title}

apps/dashboard/src/lib/components/IconButton/index.svelte

@@ -9,7 +9,7 @@
   export let contained = false;
   export let value = '';
   export let type: 'button' | 'submit' | 'reset' | null | undefined = 'button';
-  export let size = 'large';
+  export let size: 'small' | 'large' = 'large';
   export let color = '';
   export let toolTipProps: {
     title: string;

apps/dashboard/src/lib/components/Org/Audience/AudienceList.svelte

@@ -1,14 +1,17 @@
 <script>
+  import { page as pageStore } from '$app/stores';
+  import Avatar from '$lib/components/Avatar/index.svelte';
+  import { t } from '$lib/utils/functions/translations';
+  import { currentOrg, orgAudience } from '$lib/utils/store/org';
   import {
     DataTable,
+    DataTableSkeleton,
+    Link,
+    Pagination,
     Toolbar,
     ToolbarContent,
-    ToolbarSearch,
-    Pagination,
-    DataTableSkeleton
+    ToolbarSearch
   } from 'carbon-components-svelte';
-  import { orgAudience } from '$lib/utils/store/org';
-  import { t } from '$lib/utils/functions/translations';
 
   export let isLoading = false;
 
@@ -32,6 +35,22 @@
         <ToolbarSearch persistent value={searchValue} shouldFilterRows bind:filteredRowIds />
       </ToolbarContent>
     </Toolbar>
+    <svelte:fragment slot="cell-header" let:header>
+      {header.value}
+    </svelte:fragment>
+    <svelte:fragment slot="cell" let:row let:cell>
+      {#if cell.key === 'name'}
+        <Link
+          class="flex items-center gap-2 text-black hover:text-black"
+          href={`${$pageStore.url.href}/${row.id}/${$currentOrg.id}`}
+        >
+          <Avatar src={row.avatar_url} width="w-5" height="h-5" />
+          {cell.value}
+        </Link>
+      {:else}
+        {cell.value}
+      {/if}
+    </svelte:fragment>
   </DataTable>
 {/if}
 

apps/dashboard/src/lib/components/Org/Settings/Profile.svelte

@@ -1,18 +1,17 @@
 <script>
-  import { Grid, Row, Column } from 'carbon-components-svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
-  import SectionTitle from '../SectionTitle.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import UploadImage from '$lib/components/UploadImage/index.svelte';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import { profile } from '$lib/utils/store/user';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { snackbar } from '$lib/components/Snackbar/store';
+  import UploadImage from '$lib/components/UploadImage/index.svelte';
   import generateUUID from '$lib/utils/functions/generateUUID';
-  import { t } from '$lib/utils/functions/translations';
-  import LanguagePicker from './LanguagePicker.svelte';
-  import { handleLocaleChange } from '$lib/utils/functions/translations';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { handleLocaleChange, t } from '$lib/utils/functions/translations';
   import { updateProfileValidation } from '$lib/utils/functions/validator';
+  import { profile } from '$lib/utils/store/user';
+  import { Column, Grid, Row } from 'carbon-components-svelte';
+  import SectionTitle from '../SectionTitle.svelte';
+  import LanguagePicker from './LanguagePicker.svelte';
 
   let avatar = '';
   let loading = false;
@@ -38,6 +37,7 @@
         email: $profile.email,
         locale
       };
+      console.log('updates', updates);
 
       if (avatar) {
         const filename = `user/${generateUUID()}.webp`;

apps/dashboard/src/lib/components/Org/SideBar.svelte

@@ -1,30 +1,31 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
-  import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
-  import { ChevronRight, SettingsAdjust } from 'carbon-icons-svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
-  import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
+  import Avatar from '$lib/components/Avatar/index.svelte';
+  import AudienceIcon from '$lib/components/Icons/AudienceIcon.svelte';
   import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
+  import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
   import QuizIcon from '$lib/components/Icons/QuizIcon.svelte';
   import SiteSettingsIcon from '$lib/components/Icons/SiteSettingsIcon.svelte';
-  import AudienceIcon from '$lib/components/Icons/AudienceIcon.svelte';
-  import Avatar from '$lib/components/Avatar/index.svelte';
+  import OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { currentOrgPath, isFreePlan } from '$lib/utils/store/org';
+  import { ChevronRight, SettingsAdjust } from 'carbon-icons-svelte';
+  import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
+  import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
 
-  import { isOrgAdmin } from '$lib/utils/store/org';
-  import { profile } from '$lib/utils/store/user';
-  import { NavClasses } from '$lib/utils/constants/reusableClass';
-  import { sideBar, profileMenu } from './store';
-  import { t } from '$lib/utils/functions/translations';
   import { goto } from '$app/navigation';
   import ProfileMenu from '$lib/components/Org/ProfileMenu/index.svelte';
+  import { NavClasses } from '$lib/utils/constants/reusableClass';
+  import { t } from '$lib/utils/functions/translations';
+  import { isOrgAdmin } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import { profileMenu, sideBar } from './store';
 
   interface menuItems {
     label: string;
     path: string;
     show: boolean;
+    isActive: boolean;
   }
 
   let menuItems: menuItems[] = [];
@@ -51,26 +52,31 @@
     {
       path: '',
       label: $t('org_navigation.dashboard'),
+      isActive: isActive($page.url.pathname, `${$currentOrgPath}`),
       show: true
     },
     {
       path: '/courses',
       label: $t('org_navigation.courses'),
+      isActive: $page.url.pathname.includes(`${$currentOrgPath}/courses`),
       show: true
     },
     {
       path: '/community',
       label: $t('org_navigation.community'),
+      isActive: $page.url.pathname.includes(`${$currentOrgPath}/community`),
       show: true
     },
     {
       path: '/audience',
       label: $t('org_navigation.audience'),
+      isActive: $page.url.pathname.includes(`${$currentOrgPath}/audience`),
       show: true
     },
     {
       path: '/setup',
       label: $t('org_navigation.setup'),
+      isActive: $page.url.pathname.includes(`${$currentOrgPath}/setup`),
       show: $isOrgAdmin
     }
   ];
@@ -80,15 +86,15 @@
   <aside
     class={`${
       $sideBar.hidden
-        ? 'absolute z-40 -translate-x-[100%] md:relative md:translate-x-0 top-[48px] md:top-0'
-        : 'absolute z-40 translate-x-0 md:relative top-[48px] md:top-0'
-    } border-r-1 h-[calc(100vh-48px)] w-[250px] min-w-[250px] overflow-y-auto border border-b-0 border-l-0 border-t-0 border-gray-100 dark:border-neutral-600 bg-gray-100 transition dark:bg-neutral-900`}
+        ? 'absolute top-[48px] z-40 -translate-x-[100%] md:relative md:top-0 md:translate-x-0'
+        : 'absolute top-[48px] z-40 translate-x-0 md:relative md:top-0'
+    } border-r-1 h-[calc(100vh-48px)] w-[250px] min-w-[250px] overflow-y-auto border border-b-0 border-l-0 border-t-0 border-gray-100 bg-gray-100 transition dark:border-neutral-600 dark:bg-neutral-900`}
   >
     <div class="flex h-full flex-col">
       <div class="">
         <OrgSelector />
 
-        <ul class="mt-4 my-2 px-4">
+        <ul class="my-2 mt-4 px-4">
           {#each menuItems as menuItem}
             {#if menuItem.show}
               <a
@@ -97,10 +103,7 @@
                 on:click={toggleSidebar}
               >
                 <li
-                  class="mb-1 flex items-center gap-2.5 px-2.5 py-2 {NavClasses.item} {isActive(
-                    $page.url.pathname,
-                    `${$currentOrgPath}${menuItem.path}`
-                  )
+                  class="mb-1 flex items-center gap-2.5 px-2.5 py-2 {NavClasses.item} {menuItem.isActive
                     ? NavClasses.active
                     : 'dark:text-white'}"
                 >
@@ -130,7 +133,7 @@
 
       {#if $isFreePlan}
         <div
-          class="border-primary-700 mx-4 flex flex-col items-center justify-center gap-4 rounded-md border px-2 py-6 text-center hover:scale-95 transition-all ease-in-out"
+          class="border-primary-700 mx-4 flex flex-col items-center justify-center gap-4 rounded-md border px-2 py-6 text-center transition-all ease-in-out hover:scale-95"
         >
           <img src="/upgrade.png" alt="upgrade" class="h-16 w-16" />
           <span class="flex flex-col gap-1">
@@ -149,7 +152,7 @@
         <a href={$currentOrgPath} class="text-black no-underline" on:click={toggleSidebar}>
           <li class="mb-2 flex items-center rounded px-2.5 py-1.5">
             <HelpIcon size={20} class="carbon-icon dark:text-white" />
-            <p class="ml-2.5 dark:text-white text-sm font-medium">{$t('org_navigation.help')}</p>
+            <p class="ml-2.5 text-sm font-medium dark:text-white">{$t('org_navigation.help')}</p>
           </li>
         </a>
 
@@ -161,20 +164,20 @@
           }}
         >
           <div
-            class="text-black no-underline cursor-pointer flex items-center justify-between gap-2.5 px-2.5 py-2 mb-2 {NavClasses.item} {$page.url.pathname.includes(
+            class="mb-2 flex cursor-pointer items-center justify-between gap-2.5 px-2.5 py-2 text-black no-underline {NavClasses.item} {$page.url.pathname.includes(
               'settings'
             )
               ? NavClasses.active
               : 'dark:text-white'}"
           >
-            <div class="flex text-start items-center justify-start space-x-1 w-full">
+            <div class="flex w-full items-center justify-start space-x-1 text-start">
               <Avatar
                 src={$profile.avatar_url}
                 name={$profile.username}
                 width="w-[1.2rem]"
                 height="h-[1.2rem]"
               />
-              <p class="text-sm dark:text-white font-medium truncate max-w-full">
+              <p class="max-w-full truncate text-sm font-medium dark:text-white">
                 {$profile.fullname}
               </p>
             </div>

apps/dashboard/src/lib/components/PrimaryButton/index.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  // import { Moon } from 'svelte-loading-spinners';
-  import { VARIANTS, VARIANTS_CLASS } from './constants';
   import { Loading } from 'carbon-components-svelte';
+  import { VARIANTS, VARIANTS_CLASS } from './constants';
 
   export let label = '';
   export let className = '';
@@ -13,18 +12,22 @@
   export let isDisabled = false;
   export let isLoading = false;
   export let disableScale = false;
+
+  $: loadingClass =
+    isLoading || isDisabled
+      ? 'cursor-not-allowed opacity-25'
+      : `cursor-pointer ${!disableScale && 'hover:scale-95'}`;
+  $: cname = `flex items-center h-auto ${loadingClass} ${
+    VARIANTS_CLASS[isLoading ? VARIANTS.OUTLINED : variant]
+  } ${
+    !disablePadding && 'px-5 py-[0.2rem]'
+  } rounded-md min-h-[36px] w-fit justify-center sm:w-auto ${
+    variant !== VARIANTS.TEXT && 'hover:shadow-xl'
+  } transition-all delay-150 duration-300 ease-in-out`;
 </script>
 
 <button
-  class="{isLoading || isDisabled
-    ? 'opacity-25 cursor-not-allowed'
-    : `cursor-pointer ${
-        !disableScale && 'hover:scale-95'
-      }`} flex items-center h-auto {VARIANTS_CLASS[
-    isLoading ? VARIANTS.OUTLINED : variant
-  ]} {!disablePadding &&
-    'py-[0.5rem] px-6'} rounded-md {className} w-fit min-h-[36px] justify-center sm:w-auto {variant !==
-    VARIANTS.TEXT && 'hover:shadow-xl'} transition-all delay-150 duration-300 ease-in-out"
+  class={`${cname} ${className}`}
   on:click={onClick}
   {name}
   {type}
@@ -32,7 +35,6 @@
 >
   {#if isLoading}
     <Loading withOverlay={false} small class="mr-2" />
-    <!-- <Moon size="20" color="#1d4ed8" unit="px" duration="1s" /> -->
   {/if}
   {#if !!label}
     {label}

apps/dashboard/src/lib/components/Progress/index.svelte

@@ -2,9 +2,11 @@
   export let value = 0;
 </script>
 
-<div class="w-full h-3 rounded-md bg-gray-300 relative">
+<div class="relative h-2 w-full rounded-md bg-gray-300">
   <span
-    class="progress absolute top-0 left-0 rounded-md bg-primary-700 h-full"
+    class="progress bg-primary-700 absolute left-0 top-0 h-full rounded-l-md {value === 100
+      ? 'rounded-r-md'
+      : ''}"
     style="width: {value}%;"
   />
 </div>

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

@@ -1,13 +1,13 @@
 <script lang="ts">
   import CodeSnippet from '$lib/components/CodeSnippet/index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import Checkbox from '$lib/components/Form/Checkbox.svelte';
   import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import Grade from '$lib/components/Question/Grade.svelte';
   import { t } from '$lib/utils/functions/translations';
-  import ReasonBox from '../ReasonBox.svelte';
   import QuestionTitle from '../QuestionTitle.svelte';
+  import ReasonBox from '../ReasonBox.svelte';
 
   export let title = '';
   export let index = 1;
@@ -81,6 +81,8 @@
   }
 
   $: gradeWithAI = isGradeWithAI;
+
+  $: console.log('grade', grade, 'hideGrading', hideGrading);
 </script>
 
 <form on:submit|preventDefault={handleFormSubmit}>
@@ -102,7 +104,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-neutral-800 w-full {getValidationClassName(
+        class="my-2 w-full cursor-pointer rounded-md border-2 border-gray-300 text-left hover:bg-gray-200 dark:hover:bg-neutral-800 {getValidationClassName(
           option
         )}"
         type="button"
@@ -123,7 +125,7 @@
   {/if}
 
   {#if !isPreview}
-    <div class="mt-3 flex items-center justify-between w-full">
+    <div class="mt-3 flex w-full items-center justify-between">
       <PrimaryButton
         onClick={handlePrevious}
         label={$t('course.navItem.lessons.exercises.all_exercises.previous')}

apps/dashboard/src/lib/utils/functions/cn.ts

@@ -0,0 +1,56 @@
+import { type ClassValue, clsx } from 'clsx';
+import { cubicOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+  y?: number;
+  x?: number;
+  start?: number;
+  duration?: number;
+};
+
+export const flyAndScale = (
+  node: Element,
+  params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+  const style = getComputedStyle(node);
+  const transform = style.transform === 'none' ? '' : style.transform;
+
+  const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
+    const [minA, maxA] = scaleA;
+    const [minB, maxB] = scaleB;
+
+    const percentage = (valueA - minA) / (maxA - minA);
+    const valueB = percentage * (maxB - minB) + minB;
+
+    return valueB;
+  };
+
+  const styleToString = (style: Record<string, number | string | undefined>): string => {
+    return Object.keys(style).reduce((str, key) => {
+      if (style[key] === undefined) return str;
+      return str + `${key}:${style[key]};`;
+    }, '');
+  };
+
+  return {
+    duration: params.duration ?? 200,
+    delay: 0,
+    css: (t) => {
+      const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+      const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+      const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+      return styleToString({
+        transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+        opacity: t
+      });
+    },
+    easing: cubicOut
+  };
+};

apps/dashboard/src/lib/utils/functions/date.ts

@@ -10,5 +10,9 @@ export const calDateDiff = (date: string | number | Date): string => {
 export const getGreeting = () => {
   const date = new Date();
   const hours = date.getHours();
-  return hours < 12 ? 'dashboard.morning_heading' : hours < 18 ? 'dashboard.afternoon_heading' : 'dashboard.evening_heading';
+  return hours < 12
+    ? 'dashboard.morning_heading'
+    : hours < 18
+      ? 'dashboard.afternoon_heading'
+      : 'dashboard.evening_heading';
 };

apps/dashboard/src/lib/utils/functions/supabase.ts

@@ -1,5 +1,5 @@
-import { createClient, SupabaseClient } from '@supabase/supabase-js';
 import { config } from '$lib/config';
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
 
 export let supabase: SupabaseClient;
 
@@ -22,3 +22,8 @@ export const isSupabaseTokenInLocalStorage = () => {
 
   return false;
 };
+
+export const getAccessToken = async () => {
+  const { data } = await getSupabase().auth.getSession();
+  return data.session?.access_token || '';
+};

apps/dashboard/src/lib/utils/functions/translations.ts

@@ -1,17 +1,10 @@
 import { LOCALE } from '$lib/utils/types';
+import i18n from '@sveltekit-i18n/base';
+import parser from '@sveltekit-i18n/parser-icu';
 import { writable } from 'svelte/store';
-import i18n, { type Config } from 'sveltekit-i18n';
 
-interface Params {
-  dateValue: number;
-  value: number;
-  download: number;
-  award: number;
-  val: Date;
-}
-
-export const config: Config<Partial<Params>> = {
-  // parser: parser(),
+export const config = {
+  parser: parser(),
   loaders: [
     {
       locale: 'en',

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

@@ -253,6 +253,17 @@ export function deleteGroupMember(groupMemberId: Groupmember['id']) {
   return supabase.from('groupmember').delete().match({ id: groupMemberId });
 }
 
+export async function getMarks(courseId) {
+  if (!courseId) return;
+
+  // Gets courses for a particular organisation where the current logged in user is a groupmember
+  const { data: marks } = await supabase
+    .rpc('get_marks')
+    .eq('course_id', courseId);
+
+  return { marks };
+}
+
 export function fetchLesson(lessonId: Lesson['id']) {
   return supabase
     .from('lesson')

apps/dashboard/src/lib/utils/services/notification/notification.ts

@@ -1,4 +1,4 @@
-import { supabase } from '$lib/utils/functions/supabase';
+import { getAccessToken } from '$lib/utils/functions/supabase';
 
 export const NOTIFICATION_NAME = {
   WELCOME_TO_APP: 'WELCOME TO APP',
@@ -29,11 +29,6 @@ const NAME_TO_PATH = {
   [NOTIFICATION_NAME.NEWSFEED]: '/api/email/course/newsfeed'
 };
 
-const getAccessToken = async () => {
-  const { data } = await supabase.auth.getSession();
-  return data.session?.access_token || '';
-};
-
 export const triggerSendEmail = async (name: string, body: { [k: string]: unknown }) => {
   try {
     const accessToken = await getAccessToken();

apps/dashboard/src/lib/utils/translations/de.json

@@ -480,7 +480,9 @@
           "invite_sent": "Einladung gesendet",
           "you": "Du",
           "remove": "Entfernen"
-        }
+        },
+        "view": "Sicht",
+        "delete_profile": "Profil löschen"
       },
       "marks": {
         "title": "Markierungen",
@@ -1478,5 +1480,29 @@
     "content": "Bist du sicher?",
     "no": "NEIN",
     "yes": "Ja"
+  },
+  "analytics": {
+    "courses": "Kurse",
+    "progress": "Fortschritt",
+    "progress_description": "{value, number} von {total, number} abgeschlossen",
+    "incomplete": "Unvollständig",
+    "completed": "Vollendet",
+    "complete": "vollständig",
+    "last_seen": "Zuletzt gesehen",
+    "a_while_ago": "vor einiger Zeit",
+    "exercises": "Übungen",
+    "graded": "Benotet",
+    "not_graded": "Nicht benotet",
+    "enrolled_courses": "Eingeschriebene Kurse",
+    "enrolled_courses_description": "Alle eingeschriebenen Kurse",
+    "overall_course_progress": "Gesamtkursfortschritt",
+    "overall_course_progress_description": "Prozentsatz der abgeschlossenen Lektionen",
+    "total_average_grade": "Gesamtdurchschnittsnote",
+    "total_average_grade_description": "Basierend auf den Übungsnoten im gesamten Kurs",
+    "overall_course_progress_user_description": "Basierend auf dem Abschluss der Lektion",
+    "assignment_completion": "Abschluss der Aufgabe",
+    "assignment_completion_description": "Prozentsatz der abgeschlossenen Aufgaben",
+    "average_grade": "Durchschnittsnote",
+    "average_grade_description": "Durchschnittsnote aller abgeschlossenen Aufgaben"
   }
 }

apps/dashboard/src/lib/utils/translations/en.json

@@ -889,6 +889,8 @@
         "role": "Role",
         "action": "Action",
         "feedback": "Copied Email to clipboard",
+        "view": "View",
+        "delete_profile": "Delete profile",
         "invite_modal": {
           "title": "Invite people",
           "invite": "Invite Tutors",
@@ -1185,6 +1187,31 @@
     "upgrade": "Upgrade your plan to invite more students"
   },
 
+  "analytics": {
+    "courses": "Courses",
+    "progress": "Progress",
+    "progress_description": "{value, number} of {total, number} complete",
+    "incomplete": "Incomplete",
+    "completed": "Completed",
+    "complete": "complete",
+    "last_seen": "Last seen",
+    "a_while_ago": "a while ago",
+    "exercises": "Exercises",
+    "graded": "Graded",
+    "not_graded": "Not Graded",
+    "enrolled_courses": "Enrolled Courses",
+    "enrolled_courses_description": "All enrolled courses",
+    "overall_course_progress": "Overall Course Progress",
+    "overall_course_progress_description": "Percentage of completed lessons",
+    "total_average_grade": "Total Average Grade",
+    "total_average_grade_description": "Based on exercise grades across all course",
+    "overall_course_progress_user_description": "Based on lesson completion",
+    "assignment_completion": "Assignment Completion",
+    "assignment_completion_description": "Percentage of completed assignments",
+    "average_grade": "Average Grade",
+    "average_grade_description": "Average grade of all completed assignments"
+  },
+
   "upgrade": {
     "certificate": "Upgrade your plan to generate certificates",
     "team": "Upgrade your plan to add team members",

apps/dashboard/src/lib/utils/translations/es.json

@@ -480,7 +480,9 @@
           "invite_sent": "Invitar enviado",
           "you": "Tú",
           "remove": "Eliminar"
-        }
+        },
+        "view": "Vista",
+        "delete_profile": "Eliminar perfil"
       },
       "marks": {
         "title": "Marcas",
@@ -1478,5 +1480,29 @@
     "content": "¿Está seguro?",
     "no": "No",
     "yes": "Sí"
+  },
+  "analytics": {
+    "courses": "Cursos",
+    "progress": "Progreso",
+    "progress_description": "{valor, número} de {total, número} completo",
+    "incomplete": "Incompleto",
+    "completed": "Terminado",
+    "complete": "completo",
+    "last_seen": "visto por última vez",
+    "a_while_ago": "hace un tiempo",
+    "exercises": "Ceremonias",
+    "graded": "Calificado",
+    "not_graded": "No calificado",
+    "enrolled_courses": "Cursos inscritos",
+    "enrolled_courses_description": "Todos los cursos inscritos",
+    "overall_course_progress": "Progreso general del curso",
+    "overall_course_progress_description": "Porcentaje de lecciones completadas",
+    "total_average_grade": "Calificación promedio total",
+    "total_average_grade_description": "Basado en calificaciones de ejercicios en todo el curso.",
+    "overall_course_progress_user_description": "Basado en la finalización de la lección",
+    "assignment_completion": "Finalización de la tarea",
+    "assignment_completion_description": "Porcentaje de tareas completadas",
+    "average_grade": "Calificación promedio",
+    "average_grade_description": "Calificación promedio de todas las tareas completadas"
   }
 }

apps/dashboard/src/lib/utils/translations/fr.json

@@ -480,7 +480,9 @@
           "invite_sent": "Invitation envoyée",
           "you": "Toi",
           "remove": "Retirer"
-        }
+        },
+        "view": "Voir",
+        "delete_profile": "Supprimer le profil"
       },
       "marks": {
         "title": "Des marques",
@@ -1478,5 +1480,29 @@
     "content": "Es-tu sûr?",
     "no": "Non",
     "yes": "Oui"
+  },
+  "analytics": {
+    "courses": "Cours",
+    "progress": "Progrès",
+    "progress_description": "{value, number} sur {total, number} terminé",
+    "incomplete": "Incomplet",
+    "completed": "Complété",
+    "complete": "complet",
+    "last_seen": "Vu pour la dernière fois",
+    "a_while_ago": "il y a quelque temps",
+    "exercises": "Exercices",
+    "graded": "Noté",
+    "not_graded": "Non noté",
+    "enrolled_courses": "Cours inscrits",
+    "enrolled_courses_description": "Tous les cours inscrits",
+    "overall_course_progress": "Progression globale du cours",
+    "overall_course_progress_description": "Pourcentage de leçons terminées",
+    "total_average_grade": "Note moyenne totale",
+    "total_average_grade_description": "Basé sur les notes des exercices dans tous les cours",
+    "overall_course_progress_user_description": "Basé sur l'achèvement de la leçon",
+    "assignment_completion": "Achèvement de la mission",
+    "assignment_completion_description": "Pourcentage de missions terminées",
+    "average_grade": "Note moyenne",
+    "average_grade_description": "Note moyenne de tous les devoirs terminés"
   }
 }

apps/dashboard/src/lib/utils/translations/hi.json

@@ -480,7 +480,9 @@
           "invite_sent": "आमंत्रण भेज दिया",
           "you": "आप",
           "remove": "निकालना"
-        }
+        },
+        "view": "देखना",
+        "delete_profile": "प्रोफ़ाइल हटाएं"
       },
       "marks": {
         "title": "निशान",
@@ -1478,5 +1480,29 @@
     "content": "क्या आपको यकीन है?",
     "no": "नहीं",
     "yes": "हाँ"
+  },
+  "analytics": {
+    "courses": "पाठ्यक्रम",
+    "progress": "प्रगति",
+    "progress_description": "{value, number} का {total, number} पूर्ण",
+    "incomplete": "अधूरा",
+    "completed": "पुरा होना।",
+    "complete": "पूरा",
+    "last_seen": "अंतिम बार देखा गया",
+    "a_while_ago": "कुछ देर पहले",
+    "exercises": "अभ्यास",
+    "graded": "ग्रेड दिया गया",
+    "not_graded": "वर्गीकृत नहीं किया",
+    "enrolled_courses": "नामांकित पाठ्यक्रम",
+    "enrolled_courses_description": "सभी नामांकित पाठ्यक्रम",
+    "overall_course_progress": "समग्र पाठ्यक्रम प्रगति",
+    "overall_course_progress_description": "पूर्ण किए गए पाठों का प्रतिशत",
+    "total_average_grade": "कुल औसत ग्रेड",
+    "total_average_grade_description": "संपूर्ण पाठ्यक्रम में व्यायाम ग्रेड के आधार पर",
+    "overall_course_progress_user_description": "पाठ पूरा होने पर आधारित",
+    "assignment_completion": "असाइनमेंट पूरा करना",
+    "assignment_completion_description": "पूर्ण किये गये कार्यों का प्रतिशत",
+    "average_grade": "औसत क्षेणी",
+    "average_grade_description": "सभी पूर्ण किए गए असाइनमेंट का औसत ग्रेड"
   }
 }

apps/dashboard/src/lib/utils/translations/pt.json

@@ -480,7 +480,9 @@
           "invite_sent": "Convite enviado",
           "you": "Você",
           "remove": "Remover"
-        }
+        },
+        "view": "Visualizar",
+        "delete_profile": "Excluir perfil"
       },
       "marks": {
         "title": "Marcas",
@@ -1478,5 +1480,29 @@
     "content": "Tem certeza?",
     "no": "Não",
     "yes": "Sim"
+  },
+  "analytics": {
+    "courses": "Cursos",
+    "progress": "Progresso",
+    "progress_description": "{value, number} de {total, number} concluído",
+    "incomplete": "Incompleto",
+    "completed": "Concluído",
+    "complete": "completo",
+    "last_seen": "Visto pela última vez",
+    "a_while_ago": "há um tempo atrás",
+    "exercises": "Exercícios",
+    "graded": "Classificado",
+    "not_graded": "Não classificado",
+    "enrolled_courses": "Cursos Inscritos",
+    "enrolled_courses_description": "Todos os cursos inscritos",
+    "overall_course_progress": "Progresso geral do curso",
+    "overall_course_progress_description": "Porcentagem de aulas concluídas",
+    "total_average_grade": "Nota média total",
+    "total_average_grade_description": "Com base nas notas dos exercícios em todo o curso",
+    "overall_course_progress_user_description": "Com base na conclusão da lição",
+    "assignment_completion": "Conclusão da tarefa",
+    "assignment_completion_description": "Porcentagem de tarefas concluídas",
+    "average_grade": "Nota Média",
+    "average_grade_description": "Nota média de todas as tarefas concluídas"
   }
 }

apps/dashboard/src/lib/utils/translations/ru.json

@@ -480,7 +480,9 @@
           "invite_sent": "Приглашение отправлено",
           "you": "Ты",
           "remove": "Удалять"
-        }
+        },
+        "view": "Вид",
+        "delete_profile": "Удалить профиль"
       },
       "marks": {
         "title": "Метки",
@@ -1478,5 +1480,29 @@
     "content": "Вы уверены?",
     "no": "Нет",
     "yes": "Да"
+  },
+  "analytics": {
+    "courses": "Курсы",
+    "progress": "Прогресс",
+    "progress_description": "{value, number} из {total, number} завершено",
+    "incomplete": "Неполный",
+    "completed": "Завершенный",
+    "complete": "полный",
+    "last_seen": "Последний раз видели",
+    "a_while_ago": "некоторое время назад",
+    "exercises": "Упражнения",
+    "graded": "Оцененный",
+    "not_graded": "Не оценено",
+    "enrolled_courses": "Зарегистрированные курсы",
+    "enrolled_courses_description": "Все зарегистрированные курсы",
+    "overall_course_progress": "Общий прогресс курса",
+    "overall_course_progress_description": "Процент завершенных уроков",
+    "total_average_grade": "Общая средняя оценка",
+    "total_average_grade_description": "На основе оценок за упражнения по всему курсу",
+    "overall_course_progress_user_description": "По итогам урока",
+    "assignment_completion": "Выполнение задания",
+    "assignment_completion_description": "Процент выполненных заданий",
+    "average_grade": "Средняя оценка",
+    "average_grade_description": "Средняя оценка за все выполненные задания"
   }
 }

apps/dashboard/src/lib/utils/translations/vi.json

@@ -480,7 +480,9 @@
           "invite_sent": "Lời mời đã gửi",
           "you": "Bạn",
           "remove": "Di dời"
-        }
+        },
+        "view": "Xem",
+        "delete_profile": "Xóa hồ sơ"
       },
       "marks": {
         "title": "Điểm",
@@ -1478,5 +1480,29 @@
     "content": "Bạn có chắc không?",
     "no": "KHÔNG",
     "yes": "Đúng"
+  },
+  "analytics": {
+    "courses": "Khóa học",
+    "progress": "Tiến triển",
+    "progress_description": "{value, number} của {total, number} đã hoàn thành",
+    "incomplete": "Chưa hoàn thành",
+    "completed": "Hoàn thành",
+    "complete": "hoàn thành",
+    "last_seen": "Nhìn thấy lần cuối",
+    "a_while_ago": "cách đây một thời gian",
+    "exercises": "Bài tập",
+    "graded": "Đã chấm điểm",
+    "not_graded": "Không được chấm điểm",
+    "enrolled_courses": "Các khóa học đã đăng ký",
+    "enrolled_courses_description": "Tất cả các khóa học đã đăng ký",
+    "overall_course_progress": "Tiến độ chung của khóa học",
+    "overall_course_progress_description": "Tỷ lệ bài học đã hoàn thành",
+    "total_average_grade": "Tổng điểm trung bình",
+    "total_average_grade_description": "Dựa trên điểm bài tập của tất cả các khóa học",
+    "overall_course_progress_user_description": "Căn cứ vào việc hoàn thành bài học",
+    "assignment_completion": "Hoàn thành bài tập",
+    "assignment_completion_description": "Tỷ lệ bài tập đã hoàn thành",
+    "average_grade": "Điểm trung bình",
+    "average_grade_description": "Điểm trung bình của tất cả các bài tập đã hoàn thành"
   }
 }

apps/dashboard/src/lib/utils/types/analytics.ts

@@ -0,0 +1,100 @@
+interface User {
+  id: string;
+  fullName: string;
+  avatarUrl: string;
+  email: string;
+  lastSeen: string | undefined;
+}
+
+export interface UserCourseWithStats {
+  id: string;
+  org_id: string;
+  title: string;
+  slug: string;
+  description: string;
+  logo: string;
+  banner_image: string;
+  cost: number;
+  currency: string;
+  is_published: boolean;
+  total_lessons: number;
+  total_students: number;
+  progress_rate: number;
+  progress_percentage: number;
+  type: string;
+  member_profile_id: string;
+  lessons_count: number;
+  lessons_completed: number;
+  exercises_count: number;
+  exercises_completed: number;
+  average_grade: number;
+}
+
+// interface LessonData {
+//   id: string;
+//   title: string;
+//   completed: boolean;
+//   exerciseNo: number;
+//   created_at: any;
+// }
+
+// interface Metric {
+//   lesson: {
+//     total: number;
+//     completed: number;
+//   };
+//   exercise: {
+//     total: number;
+//     completed: number;
+//     averageGrade: number;
+//   };
+//   progressPercentage: number;
+// }
+
+export interface UserAnalytics {
+  user: User;
+  courses: UserCourseWithStats[];
+  overallCourseProgress: number;
+  overallAverageGrade: number;
+}
+
+export interface UserCourseAnalytics {
+  user: User;
+  averageGrade: number;
+  userExercisesStats: UserExercisesStats[];
+  totalExercises: number;
+  completedExercises: number;
+  // pendingLessons: LessonData[];
+  // completedLessons: LessonData[];
+  progressPercentage: number;
+}
+
+export interface UserExercisesStats {
+  id: string;
+  lessonId: string;
+  lessonTitle: string;
+  title: string;
+  status: number | string | undefined;
+  score: number;
+  totalPoints: number;
+  isCompleted: boolean;
+}
+
+export interface UserExerciseStatsQuery {
+  lesson: {
+    title: string;
+    exercise: {
+      id: string;
+      title: string;
+      lesson_id: string;
+      created_at: string;
+      question: { points: number }[];
+      submission: {
+        groupmember: { id: string; profile_id: string };
+        total: number;
+        id: string;
+        status_id: string;
+      }[];
+    }[];
+  }[];
+}

apps/dashboard/src/lib/utils/types/index.ts

@@ -421,3 +421,15 @@ interface Tabs {
   id: number;
   name: string;
 }
+
+export interface StudentStat {
+  username: string;
+  progressPercentage: number;
+  pendingCourses: Course[];
+  completedCourses: Course[];
+  totalLessons: number;
+  totalLessonsCompleted: number;
+  totalExercise: number;
+  totalExercisesCompleted: number;
+  totalLmsEntry: number;
+}