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/course-app/src/lib/utils.ts

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

apps/dashboard/package.json

@@ -29,12 +29,15 @@
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/adapter-node": "^1.3.1",
     "@sveltejs/adapter-vercel": "^3.0.3",
+    "@sveltekit-i18n/base": "^1.3.7",
+    "@sveltekit-i18n/parser-icu": "^1.0.8",
     "@tailwindcss/forms": "^0.5.4",
     "@types/pluralize": "0.0.30",
     "ai": "^2.1.31",
     "axios": "^1.5.1",
     "body-parser": "^1.20.2",
     "canvas-confetti": "^1.6.0",
+    "clsx": "^2.1.1",
     "color2k": "^2.0.3",
     "cookie-parser": "^1.4.6",
     "copy-to-clipboard": "^3.3.3",
@@ -61,6 +64,7 @@
     "svelte-meta-tags": "^3.1.2",
     "svelte-ui": "workspace:*",
     "sveltekit-i18n": "^2.4.2",
+    "tailwind-merge": "^2.6.0",
     "tldts": "^6.1.41",
     "unsplash-js": "^7.0.18",
     "wait-on": "^7.0.1",

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 UpdateDescription from './UpdateDescription.svelte';
-  import { globalStore } from '$lib/utils/store/app';
+  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}
+      <BreadcrumbItem href={path}>
-        >{$t('course.navItem.lessons.exercises.all_exercises.heading')}</BreadcrumbItem
+        {$t('course.navItem.lessons.exercises.all_exercises.heading')}
-      >
+      </BreadcrumbItem>
-      <BreadcrumbItem href={`${path}${exerciseId}`} isCurrentPage>
+      <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 ComingSoon from '$lib/components/ComingSoon/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  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,
+    ToolbarSearch
-    Pagination,
-    DataTableSkeleton
   } 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 PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import { profile } from '$lib/utils/store/user';
   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 { supabase } from '$lib/utils/functions/supabase';
-  import LanguagePicker from './LanguagePicker.svelte';
+  import { handleLocaleChange, t } from '$lib/utils/functions/translations';
-  import { handleLocaleChange } 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 Avatar from '$lib/components/Avatar/index.svelte';
-  import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
+  import AudienceIcon from '$lib/components/Icons/AudienceIcon.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 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 OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
-  import Avatar from '$lib/components/Avatar/index.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 top-[48px] z-40 -translate-x-[100%] md:relative md:top-0 md:translate-x-0'
-        : 'absolute z-40 translate-x-0 md:relative top-[48px] md:top-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 dark:border-neutral-600 bg-gray-100 transition dark:bg-neutral-900`}
+    } 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(
+                  class="mb-1 flex items-center gap-2.5 px-2.5 py-2 {NavClasses.item} {menuItem.isActive
-                    $page.url.pathname,
-                    `${$currentOrgPath}${menuItem.path}`
-                  )
                     ? 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
+  class={`${cname} ${className}`}
-    ? '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"
   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 {
+export const config = {
-  dateValue: number;
+  parser: parser(),
-  value: number;
-  download: number;
-  award: number;
-  val: Date;
-}
-
-export const config: Config<Partial<Params>> = {
-  // 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;
+}

apps/dashboard/src/routes/api/analytics/user/+server.ts

@@ -0,0 +1,288 @@
+import { getServerSupabase } from '$lib/utils/functions/supabase.server';
+import { fetchCourses, fetchProfileCourseProgress } from '$lib/utils/services/courses';
+import {
+  UserAnalytics,
+  UserCourseAnalytics,
+  UserExerciseStatsQuery,
+  UserExercisesStats
+} from '$lib/utils/types/analytics';
+import { json } from '@sveltejs/kit';
+
+const supabase = getServerSupabase();
+
+const CACHE_DURATION = 60; // 1 minute
+
+export async function POST({ setHeaders, request }) {
+  const { userId, courseId, orgId } = await request.json();
+
+  const accessToken = request.headers.get('Authorization');
+
+  if (!userId || !accessToken) {
+    return json({ success: false, message: 'Request is missing required fields' }, { status: 400 });
+  }
+
+  let user;
+  try {
+    const { data } = await supabase.auth.getUser(accessToken);
+    user = data.user;
+  } catch (error) {
+    console.error(error);
+  }
+
+  if (!user) {
+    return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
+  }
+
+  setHeaders({
+    'cache-control': `max-age=${CACHE_DURATION}`,
+    'content-type': 'application/json'
+  });
+
+  if (courseId) {
+    const userCourseAnalytics = await getStudentAnalyticsData(userId, courseId);
+    return json(userCourseAnalytics);
+  }
+
+  if (orgId) {
+    const userAnalytics = await getAudienceData(userId, orgId);
+    return json(userAnalytics);
+  }
+
+  return json({ error: 'Invalid request' }, { status: 400 });
+}
+
+function sumArrObject<T>(arr: T[], key: keyof T) {
+  return arr.reduce((sum, item) => sum + (item[key] as number), 0);
+}
+
+async function getLastLogin(userId: string): Promise<string | undefined> {
+  try {
+    const { data, error } = await supabase
+      .from('analytics_login_events')
+      .select('logged_in_at')
+      .eq('user_id', userId)
+      .single();
+
+    if (error) throw error;
+
+    return data?.logged_in_at;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function getAudienceData(userId: string, orgId: string): Promise<UserAnalytics> {
+  const audienceAnalytics: UserAnalytics = {
+    user: {
+      id: userId,
+      fullName: 'John Doe',
+      email: 'john.doe@example.com',
+      avatarUrl: 'https://example.com/avatar.png',
+      lastSeen: new Date().toISOString()
+    },
+    courses: [],
+    overallCourseProgress: 0,
+    overallAverageGrade: 0
+  };
+
+  const userResult = await supabase
+    .from('profile')
+    .select('fullname, email, avatar_url')
+    .eq('id', userId)
+    .single();
+
+  if (userResult.error) throw new Error('Failed to fetch user profile');
+
+  audienceAnalytics.user.fullName = userResult.data.fullname;
+  audienceAnalytics.user.email = userResult.data.email;
+  audienceAnalytics.user.avatarUrl = userResult.data.avatar_url || '';
+  audienceAnalytics.user.lastSeen = await getLastLogin(userId);
+
+  const { allCourses = [] } = (await fetchCourses(userId, orgId)) || {};
+
+  for (const course of allCourses) {
+    const [userExercisesStats, userCourseProgress] = await Promise.all([
+      fetchUserExercisesStats(course.id, userId),
+      fetchProfileCourseProgress(course.id, userId)
+    ]);
+
+    const courseProgress = userCourseProgress?.data?.[0];
+
+    const exercisesStats = userExercisesStats || [];
+    const totalEarnedPoints = sumArrObject(exercisesStats, 'score');
+    const totalPoints = sumArrObject(exercisesStats, 'totalPoints');
+
+    const averageGrade = Math.round((totalEarnedPoints / totalPoints) * 100);
+    const lessonsCompleted = courseProgress?.lessons_completed || 0;
+    const lessonsCount = courseProgress?.lessons_count || 0;
+
+    audienceAnalytics.courses.push({
+      ...course,
+      ...courseProgress,
+      progress_percentage: Math.round((lessonsCompleted / lessonsCount) * 100),
+      average_grade: averageGrade
+    });
+  }
+
+  const totalLessons = audienceAnalytics.courses.reduce(
+    (acc, course) => acc + course.lessons_count,
+    0
+  );
+  const completedLessons = audienceAnalytics.courses.reduce(
+    (acc, course) => acc + course.lessons_completed,
+    0
+  );
+  const overallCourseProgress = Math.round((completedLessons / totalLessons) * 100);
+
+  const allGrades = sumArrObject(audienceAnalytics.courses, 'average_grade');
+  const overallAverageGrade = Math.round(allGrades / audienceAnalytics.courses.length);
+
+  audienceAnalytics.overallCourseProgress = overallCourseProgress;
+  audienceAnalytics.overallAverageGrade = overallAverageGrade;
+
+  return audienceAnalytics;
+}
+
+async function getStudentAnalyticsData(
+  userId: string,
+  courseId: string
+): Promise<UserCourseAnalytics> {
+  const userCourseAnalytics: UserCourseAnalytics = {
+    user: {
+      id: userId,
+      fullName: '',
+      avatarUrl: '',
+      lastSeen: '',
+      email: ''
+    },
+    averageGrade: 0,
+    userExercisesStats: [],
+    totalExercises: 0,
+    completedExercises: 0,
+    progressPercentage: 0
+  };
+
+  // fetch user details
+  const { data: userResult, error: userError } = await supabase
+    .from('profile')
+    .select('fullname, email, avatar_url')
+    .eq('id', userId)
+    .single();
+
+  if (userError) throw new Error('Failed to fetch user profile' + userError.message);
+
+  userCourseAnalytics.user.fullName = userResult.fullname;
+  userCourseAnalytics.user.email = userResult.email;
+  userCourseAnalytics.user.avatarUrl = userResult.avatar_url || '';
+  userCourseAnalytics.user.lastSeen = await getLastLogin(userId);
+
+  // fetch marks, lessons, and exercise progress
+  const [userExercisesStats, lessonCompletions, exerciseResponse] = await Promise.all([
+    fetchUserExercisesStats(courseId, userId),
+    fetchLessonCompletion(courseId, userId),
+    fetchProfileCourseProgress(courseId, userId)
+  ]);
+
+  if (!userExercisesStats || !lessonCompletions || !exerciseResponse.data) {
+    throw new Error('Failed to fetch course analytics data');
+  }
+
+  const totalEarnedPoints = sumArrObject(userExercisesStats, 'score');
+  const totalPoints = sumArrObject(userExercisesStats, 'totalPoints');
+
+  userCourseAnalytics.averageGrade = Math.round((totalEarnedPoints / totalPoints) * 100);
+  userCourseAnalytics.userExercisesStats = userExercisesStats;
+
+  const completedLessons = lessonCompletions.filter((lesson) => lesson.completed);
+
+  userCourseAnalytics.totalExercises = exerciseResponse.data[0].exercises_count;
+  userCourseAnalytics.completedExercises = exerciseResponse.data[0].exercises_completed;
+
+  userCourseAnalytics.progressPercentage = Math.round(
+    (completedLessons.length / lessonCompletions.length) * 100
+  );
+
+  return userCourseAnalytics;
+}
+
+async function fetchUserExercisesStats(
+  courseId: string,
+  userId: string
+): Promise<UserExercisesStats[] | undefined> {
+  try {
+    const { data: courseData, error: queryError } = await supabase
+      .from('course')
+      .select(
+        `
+        lesson!inner (
+          title,exercise!inner (
+            id,title,lesson_id,created_at,question (points),
+            submission!left (
+              id,total,status_id,submitted_by,groupmember!inner (id,profile_id)
+            )
+          )
+        )
+      `
+      )
+      .eq('lesson.exercise.submission.groupmember.profile_id', userId)
+      .eq('id', courseId)
+      .returns<UserExerciseStatsQuery[]>();
+
+    if (queryError) {
+      console.error('Error fetching exercise data:', queryError);
+      return;
+    }
+
+    const userExercisesStats = courseData[0].lesson.flatMap((lesson) =>
+      lesson.exercise.map((exercise) => {
+        const totalPoints = exercise.question.reduce((sum, q) => sum + (q.points || 0), 0);
+
+        const userSubmission = exercise.submission[0];
+
+        return {
+          id: exercise.id,
+          lessonId: exercise.lesson_id,
+          lessonTitle: lesson.title,
+          title: exercise.title,
+          status: userSubmission?.status_id,
+          score: userSubmission?.total || 0,
+          totalPoints,
+          isCompleted: !!userSubmission
+        };
+      })
+    );
+
+    return userExercisesStats;
+  } catch (error) {
+    console.error('Unexpected error:', error);
+  }
+}
+
+async function fetchLessonCompletion(courseId, userId) {
+  try {
+    const { data: lessons, error: lessonsError } = await supabase
+      .from('lesson')
+      .select(
+        `
+        id,title,created_at,
+        exercise:exercise(id),
+        lesson_completion!left (lesson_id)
+      `
+      )
+      .eq('course_id', courseId)
+      .eq('lesson_completion.profile_id', userId);
+
+    if (lessonsError) throw lessonsError;
+
+    return lessons.map((lesson) => ({
+      id: lesson.id,
+      title: lesson.title,
+      created_at: lesson.created_at,
+      completed: lesson.lesson_completion.length > 0,
+      exerciseNo: lesson.exercise.length
+    }));
+  } catch (error) {
+    console.error('Error fetching lessons or completions:', error);
+    return [];
+  }
+}

apps/dashboard/src/routes/courses/[id]/people/+layout.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+  import PageBody from '$lib/components/PageBody/index.svelte';
+  import PageNav from '$lib/components/PageNav/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { t } from '$lib/utils/functions/translations';
+  import ArrowLeft from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
+
+  export let data;
+
+  const handleClick = () => {
+    const url = $page.url.href + '?add=true';
+    goto(url);
+  };
+</script>
+
+<CourseContainer bind:courseId={data.courseId}>
+  <PageNav title={$t('course.navItem.people.title')} disableSticky={true}>
+    <slot:fragment slot="image">
+      {#if data.personId}
+        <RoleBasedSecurity allowedRoles={[1, 2]}>
+          <IconButton
+            size="large"
+            onClick={() => {
+              goto(`/courses/${data.courseId}/people`);
+            }}
+          >
+            <ArrowLeft size={16} class="carbon-icon dark:text-white " />
+          </IconButton>
+        </RoleBasedSecurity>
+      {/if}
+    </slot:fragment>
+    <slot:fragment slot="widget">
+      {#if !data.personId}
+        <RoleBasedSecurity allowedRoles={[1, 2]}>
+          <PrimaryButton
+            className="mr-2"
+            label={$t('course.navItem.people.add')}
+            onClick={handleClick}
+          />
+        </RoleBasedSecurity>
+      {/if}
+    </slot:fragment>
+  </PageNav>
+  <PageBody width="w-full max-w-6xl md:w-11/12">
+    <slot />
+  </PageBody>
+</CourseContainer>

apps/dashboard/src/routes/courses/[id]/people/+layout.ts

@@ -0,0 +1,6 @@
+export const load = ({ params = { id: '', personId: '' } }) => {
+  return {
+    courseId: params.id,
+    personId: params.personId
+  };
+};

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

@@ -1,5 +1,25 @@
 <script lang="ts">
-  import copy from 'copy-to-clipboard';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import Avatar from '$lib/components/Avatar/index.svelte';
+  import TextChip from '$lib/components/Chip/Text.svelte';
+  import ComingSoon from '$lib/components/ComingSoon/index.svelte';
+  import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
+  import InvitationModal from '$lib/components/Course/components/People/InvitationModal.svelte';
+  import { deleteMemberModal } from '$lib/components/Course/components/People/store';
+  import type { Person, ProfileRole } from '$lib/components/Course/components/People/types';
+  import { group } from '$lib/components/Course/store';
+  import Select from '$lib/components/Form/Select.svelte';
+  import IconButton from '$lib/components/IconButton/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 { ROLE_LABEL, ROLES } from '$lib/utils/constants/roles';
+  import { t } from '$lib/utils/functions/translations';
+  import { deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
+  import { profile } from '$lib/utils/store/user';
+  import type { GroupPerson } from '$lib/utils/types';
   import {
     CopyButton,
     Search,
@@ -9,34 +29,10 @@
     StructuredListHead,
     StructuredListRow
   } from 'carbon-components-svelte';
-  import TextChip from '$lib/components/Chip/Text.svelte';
-  import ComingSoon from '$lib/components/ComingSoon/index.svelte';
-  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  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 copy from 'copy-to-clipboard';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  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 { group } from '$lib/components/Course/store';
-  import InvitationModal from '$lib/components/Course/components/People/InvitationModal.svelte';
-  import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
-  import { deleteMemberModal } from '$lib/components/Course/components/People/store';
-  import type { Person, ProfileRole } from '$lib/components/Course/components/People/types';
-  import { ROLE_LABEL, ROLES } from '$lib/utils/constants/roles';
-  import { profile } from '$lib/utils/store/user';
-  import { snackbar } from '$lib/components/Snackbar/store';
-  import Avatar from '$lib/components/Avatar/index.svelte';
-  import type { GroupPerson } from '$lib/utils/types';
-  import { t } from '$lib/utils/functions/translations';
-  import { page } from '$app/stores';
-  import { goto } from '$app/navigation';
 
-  export let data;
+  let people: Array<GroupPerson> = [];
-
-  let people: Array<Person> = [];
   let member: { id?: string; email?: string; profile?: { email: string } } = {};
   let shouldEditMemberId: string | null = null;
   let filterBy: ProfileRole = ROLES[0];
@@ -59,6 +55,7 @@
   }
 
   async function deletePerson() {
+    if (!member.id) return;
     $group.people = $group.people.filter((person: { id: string }) => person.id !== member.id);
     $group.tutors = $group.tutors.filter((person: GroupPerson) => person.memberId !== member.id);
 
@@ -73,15 +70,18 @@
     shouldEditMemberId = null;
   }
 
-  function sortAndFilterPeople(_people: Array<Person>, filterBy: ProfileRole) {
+  function sortAndFilterPeople(_people: Array<GroupPerson>, filterBy: ProfileRole) {
     people = (_people || [])
       .filter((person) => {
         if (filterBy.value === 'all') return true;
 
         return person.role_id === filterBy.value;
       })
-      .sort((a: Person, b: Person) => new Date(a.created_at) - new Date(b.created_at))
+      .sort(
-      .sort((a: Person, b: Person) => a.role_id - b.role_id);
+        (a: GroupPerson, b: GroupPerson) =>
+          new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+      )
+      .sort((a: GroupPerson, b: GroupPerson) => a.role_id - b.role_id);
   }
 
   function getEmail(person) {
@@ -115,6 +115,10 @@
     goto(url);
   };
 
+  function gotoPerson(person) {
+    goto(`${$page.url.href}/${person.profile_id}`);
+  }
+
   $: sortAndFilterPeople($group.people, filterBy);
 </script>
 
@@ -125,163 +129,156 @@
   {deletePerson}
 />
 
-<CourseContainer bind:courseId={data.courseId}>
+<section class="mx-2 my-5 md:mx-9">
-  <PageNav title={$t('course.navItem.people.title')} disableSticky={true}>
+  <div
-    <slot:fragment slot="widget">
+    class="flex-end mb-7 flex flex-col items-start justify-end gap-2 md:flex-row md:items-center"
-      <RoleBasedSecurity allowedRoles={[1, 2]}>
+  >
-        <PrimaryButton
+    <div class="max-w-[320px]">
-          className="mr-2"
+      <Search
-          label={$t('course.navItem.people.add')}
+        class="w-full border-0 bg-zinc-100 dark:text-slate-950"
-          onClick={handleClick}
+        placeholder={$t('course.navItem.people.search')}
-        />
+        bind:value={searchValue}
-      </RoleBasedSecurity>
+      />
-    </slot:fragment>
+    </div>
-  </PageNav>
+    <div class="mb-3">
-  <PageBody width="w-full max-w-6xl md:w-11/12">
+      <Select
-    <section class="my-5 mx-2 md:mx-9">
+        bind:value={filterBy}
-      <div
+        options={ROLES.map((role) => ({ label: $t(role.label), value: role.value }))}
-        class="flex flex-col md:flex-row flex-end gap-2 justify-end items-start md:items-center mb-7"
+        className="dark:text-black mt-3 max-w-[80px]"
-      >
+      />
-        <div class="max-w-[320px]">
+      <!-- <select bind:value={filterBy} class="mt-3">
-          <Search
+        {#each ROLES as option}
-            class="dark:text-slate-950 border-0 bg-zinc-100 w-full"
+          <option value={option.value}>{option.label}</option>
-            placeholder={$t('course.navItem.people.search')}
+        {/each}
-            bind:value={searchValue}
+      </select> -->
-          />
+    </div>
-        </div>
+    <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <div class="mb-3">
+      <p class="hidden w-20 text-lg dark:text-white lg:block" />
-          <Select
+    </RoleBasedSecurity>
-            bind:value={filterBy}
+  </div>
-            options={ROLES.map((role) => ({ label: $t(role.label), value: role.value }))}
-            className="dark:text-black mt-3 max-w-[80px]"
-          />
-          <!-- <select bind:value={filterBy} class="mt-3">
-            {#each ROLES as option}
-              <option value={option.value}>{option.label}</option>
-            {/each}
-          </select> -->
-        </div>
-        <RoleBasedSecurity allowedRoles={[1, 2]}>
-          <p class="dark:text-white hidden lg:block text-lg w-20" />
-        </RoleBasedSecurity>
-      </div>
 
-      <StructuredList class="m-0">
+  <StructuredList class="m-0">
-        <StructuredListHead
+    <StructuredListHead
-          class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
+      class="bg-slate-100 dark:border-2 dark:border-neutral-800 dark:bg-neutral-800"
+    >
+      <StructuredListRow head class="mx-7">
+        <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+          >{$t('course.navItem.people.name')}</StructuredListCell
         >
-          <StructuredListRow head class="mx-7">
+        <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+          >{$t('course.navItem.people.role')}</StructuredListCell
-              >{$t('course.navItem.people.name')}</StructuredListCell
+        >
-            >
+        <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+          >{$t('course.navItem.people.action')}</StructuredListCell
-              >{$t('course.navItem.people.role')}</StructuredListCell
+        >
-            >
+        <RoleBasedSecurity allowedRoles={[1, 2]}>
-            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+          <p class="hidden w-20 text-lg dark:text-white lg:block" />
-              >{$t('course.navItem.people.action')}</StructuredListCell
+        </RoleBasedSecurity>
-            >
+      </StructuredListRow>
-            <RoleBasedSecurity allowedRoles={[1, 2]}>
+    </StructuredListHead>
-              <p class="dark:text-white hidden lg:block text-lg w-20" />
-            </RoleBasedSecurity>
-          </StructuredListRow>
-        </StructuredListHead>
 
-        {#each filterPeople(searchValue, people) as person}
+    {#each filterPeople(searchValue, people) as person}
-          <StructuredListBody>
+      <StructuredListBody>
-            <StructuredListRow class="relative">
+        <StructuredListRow class="relative">
-              <!-- first column -->
+          <!-- first column -->
-              <StructuredListCell class="w-4/6 md:w-3/6">
+          <StructuredListCell class="w-4/6 md:w-3/6">
-                {#if person.profile}
+            {#if person.profile}
-                  <div class="flex items-start lg:items-center">
+              <div class="flex items-start lg:items-center">
-                    <Avatar
+                <Avatar
-                      src={person.profile.avatar_url}
+                  src={person.profile.avatar_url}
-                      name={person.profile.fullname}
+                  name={person.profile.fullname}
-                      width="w-8"
+                  width="w-8"
-                      height="h-8"
+                  height="h-8"
-                      className="mr-3"
+                  className="mr-3"
-                    />
+                />
-                    <div class="flex flex-col lg:flex-row items-start lg:items-center">
+                <div class="flex flex-col items-start lg:flex-row lg:items-center">
-                      <div class="mr-2">
+                  <div class="mr-2">
-                        <p class="dark:text-white text-base font-normal">
+                    <p class="text-base font-normal dark:text-white">
-                          {person.profile.fullname}
+                      {person.profile.fullname}
-                        </p>
+                    </p>
-                        <p class="text-xs text-primary-600 line-clamp-1">
+                    <p class="text-primary-600 line-clamp-1 text-xs">
-                          {obscureEmail(getEmail(person))}
+                      {obscureEmail(getEmail(person))}
-                        </p>
+                    </p>
-                      </div>
-                      <div class="flex items-center">
-                        <RoleBasedSecurity allowedRoles={[1, 2]}>
-                          <CopyButton
-                            text={getEmail(person)}
-                            feedback="Copied Email to clipboard"
-                          />
-                        </RoleBasedSecurity>
-                        {#if person.profile_id == $profile.id}
-                          <ComingSoon label={$t('course.navItem.people.you')} />
-                        {/if}
-                      </div>
-                    </div>
                   </div>
-                {:else}
+                  <div class="flex items-center">
-                  <div class="flex items-start lg:items-center w-2/4">
+                    <RoleBasedSecurity allowedRoles={[1, 2]}>
-                    <TextChip
+                      <CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
-                      value={person.email.substring(0, 2).toUpperCase()}
+                    </RoleBasedSecurity>
-                      className="bg-primary-200 text-black font-semibold text-xs mr-3"
+                    {#if person.profile_id == $profile.id}
-                      shape="rounded-full"
+                      <ComingSoon label={$t('course.navItem.people.you')} />
-                    />
-                    <a
-                      href="mailto:{person.email}"
-                      class="text-md text-primary-600 mr-2 dark:text-white"
-                    >
-                      {person.email}
-                    </a>
-                    <div class="flex items-center justify-between">
-                      <RoleBasedSecurity allowedRoles={[1, 2]}>
-                        <CopyButton
-                          text={getEmail(person)}
-                          feedback={$t('course.navItem.people.feedback')}
-                        />
-                      </RoleBasedSecurity>
-
-                      <TextChip
-                        value={$t('course.navItem.people.pending')}
-                        className="text-xs bg-yellow-200 text-yellow-700 h-fit"
-                        size="sm"
-                      />
-                    </div>
-                  </div>
-                {/if}
-              </StructuredListCell>
-
-              <!-- second column -->
-              <StructuredListCell class="w-1/4 px-3">
-                <p class=" dark:text-white font-normal text-center text-base w-1/4">
-                  {$t(ROLE_LABEL[person.role_id])}
-                </p>
-              </StructuredListCell>
-
-              <!-- third column -->
-              <StructuredListCell class="p-0 w-1/4">
-                <RoleBasedSecurity allowedRoles={[1, 2]}>
-                  <div class="hidden sm:flex sm:justify-between sm:items-center w-20">
-                    {#if person.profile_id !== $profile.id}
-                      <IconButton
-                        onClick={() => {
-                          member = person;
-                          $deleteMemberModal.open = true;
-                        }}
-                      >
-                        <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
-                      </IconButton>
                     {/if}
                   </div>
-                </RoleBasedSecurity>
+                </div>
-              </StructuredListCell>
+              </div>
-            </StructuredListRow>
+            {:else}
-          </StructuredListBody>
+              <div class="flex w-2/4 items-start lg:items-center">
-        {/each}
+                <TextChip
-      </StructuredList>
+                  value={person.email.substring(0, 2).toUpperCase()}
-      <!-- <Pagination totalItems={10} pageSizes={[10, 15, 20]} /> -->
+                  className="bg-primary-200 text-black font-semibold text-xs mr-3"
-    </section>
+                  shape="rounded-full"
-  </PageBody>
+                />
-</CourseContainer>
+                <a
+                  href="mailto:{person.email}"
+                  class="text-md text-primary-600 mr-2 dark:text-white"
+                >
+                  {person.email}
+                </a>
+                <div class="flex items-center justify-between">
+                  <RoleBasedSecurity allowedRoles={[1, 2]}>
+                    <CopyButton
+                      text={getEmail(person)}
+                      feedback={$t('course.navItem.people.feedback')}
+                    />
+                  </RoleBasedSecurity>
+
+                  <TextChip
+                    value={$t('course.navItem.people.pending')}
+                    className="text-xs bg-yellow-200 text-yellow-700 h-fit"
+                    size="sm"
+                  />
+                </div>
+              </div>
+            {/if}
+          </StructuredListCell>
+
+          <!-- second column -->
+          <StructuredListCell class="w-1/4">
+            <p class=" w-1/4 text-center text-base font-normal dark:text-white">
+              {$t(ROLE_LABEL[person.role_id])}
+            </p>
+          </StructuredListCell>
+
+          <!-- third column -->
+          <StructuredListCell class="w-1/4 p-0">
+            <RoleBasedSecurity allowedRoles={[1, 2]}>
+              <div class="hidden space-x-2 sm:flex sm:items-center">
+                {#if person.profile_id !== $profile.id}
+                  <IconButton
+                    onClick={() => {
+                      member = person;
+                      $deleteMemberModal.open = true;
+                    }}
+                  >
+                    <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
+                  </IconButton>
+                  <!-- <IconButton
+                    onClick={() => gotoPerson(person)}
+                  >
+                    <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
+                  </IconButton> -->
+
+                  <PrimaryButton
+                    variant={VARIANTS.OUTLINED}
+                    label={$t('course.navItem.people.view')}
+                    onClick={() => gotoPerson(person)}
+                  />
+                {/if}
+              </div>
+            </RoleBasedSecurity>
+          </StructuredListCell>
+        </StructuredListRow>
+      </StructuredListBody>
+    {/each}
+  </StructuredList>
+  <!-- <Pagination totalItems={10} pageSizes={[10, 15, 20]} /> -->
+</section>

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

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import { ActivityCard, HeroProfileCard, LoadingPage } from '$lib/components/Analytics';
+  import Progress from '$lib/components/Progress/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { getAccessToken } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
+  import type { UserCourseAnalytics } from '$lib/utils/types/analytics';
+  import { Grid, Tag } from 'carbon-components-svelte';
+  import Notebook from 'carbon-icons-svelte/lib/Notebook.svelte';
+  import Report from 'carbon-icons-svelte/lib/Report.svelte';
+  import RowExpand from 'carbon-icons-svelte/lib/RowExpand.svelte';
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+
+  export let data;
+
+  let userCourseAnalytics: UserCourseAnalytics;
+
+  function getPercentage(a: number, b: number): number {
+    if (b === 0) {
+      return 0;
+    }
+    return Math.round((a / b) * 100);
+  }
+
+  let exerciseFilter: 'all' | 'completed' | 'incomplete' = 'all';
+  function toggleExerciseFilter(filter: 'completed' | 'incomplete') {
+    if (exerciseFilter === filter) {
+      exerciseFilter = 'all';
+    } else {
+      exerciseFilter = filter;
+    }
+  }
+
+  async function fetchUserCourseAnalytics() {
+    const accessToken = await getAccessToken();
+    const response = await fetch('/api/analytics/user', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: accessToken
+      },
+      body: JSON.stringify(data)
+    });
+
+    if (response.ok) {
+      userCourseAnalytics = (await response.json()) as UserCourseAnalytics;
+    } else {
+      console.error(response);
+      snackbar.error('Failed to fetch analytics data');
+    }
+  }
+
+  onMount(() => {
+    fetchUserCourseAnalytics();
+  });
+
+  $: learningActivities = [
+    {
+      description: $t('analytics.overall_course_progress_user_description'),
+      icon: Notebook,
+      percentage: userCourseAnalytics?.progressPercentage,
+      title: $t('analytics.overall_course_progress')
+    },
+    {
+      description: $t('analytics.assignment_completion_description'),
+      icon: Report,
+      percentage: getPercentage(
+        userCourseAnalytics?.userExercisesStats?.filter((exercise) => exercise.isCompleted)?.length,
+        userCourseAnalytics?.userExercisesStats?.length
+      ),
+      title: $t('analytics.assignment_completion')
+    },
+    {
+      description: $t('analytics.average_grade_description'),
+      icon: RowExpand,
+      percentage: userCourseAnalytics?.averageGrade,
+      title: $t('analytics.average_grade')
+    }
+  ];
+
+  $: filteredExercises = userCourseAnalytics?.userExercisesStats?.filter((exercise) => {
+    if (exerciseFilter === 'all') {
+      return true;
+    }
+    return exercise.isCompleted === (exerciseFilter === 'completed');
+  });
+  $: completedExercises = userCourseAnalytics?.userExercisesStats?.filter(
+    (exercise) => exercise.isCompleted
+  )?.length;
+  $: incompleteExercises = userCourseAnalytics?.userExercisesStats?.filter(
+    (exercise) => !exercise.isCompleted
+  )?.length;
+</script>
+
+{#if userCourseAnalytics}
+  <section class="px-1">
+    <HeroProfileCard user={userCourseAnalytics.user} />
+
+    <Grid class="mt-5 px-0" fullWidth>
+      <div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {#each learningActivities as activity}
+          <ActivityCard {activity} />
+        {/each}
+      </div>
+    </Grid>
+
+    <div class="mt-5 rounded-md border p-3 dark:border-neutral-600 md:p-5">
+      <h3 class="text-2xl font-bold">
+        {$t('analytics.exercises')}
+      </h3>
+
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <p class="text-sm font-medium text-gray-600 dark:text-gray-200">
+            {$t('analytics.exercises')}
+          </p>
+          <p class="text-sm font-medium text-gray-600 dark:text-gray-200">
+            {$t('analytics.progress_description', {
+              value: completedExercises,
+              total: userCourseAnalytics?.userExercisesStats?.length
+            })}
+          </p>
+        </div>
+        <Progress
+          value={getPercentage(completedExercises, userCourseAnalytics?.userExercisesStats?.length)}
+        />
+        <div class="flex items-center justify-between">
+          <Tag
+            interactive
+            filter={exerciseFilter === 'incomplete'}
+            type={exerciseFilter === 'incomplete' ? 'gray' : 'outline'}
+            class="text-yellow-700 dark:text-yellow-500"
+            on:click={() => toggleExerciseFilter('incomplete')}
+          >
+            {incompleteExercises}
+            {$t('analytics.incomplete')}
+          </Tag>
+          <Tag
+            interactive
+            filter={exerciseFilter === 'completed'}
+            type={exerciseFilter === 'completed' ? 'gray' : 'outline'}
+            class="text-green-700 dark:text-green-500"
+            on:click={() => toggleExerciseFilter('completed')}
+          >
+            {completedExercises}
+            {$t('analytics.complete')}
+          </Tag>
+        </div>
+      </div>
+
+      {#each filteredExercises as exercise, index}
+        {#key index}
+          <div
+            class={`mt-5 flex items-center justify-between gap-4 rounded-md border p-5  ${
+              exercise.isCompleted
+                ? 'border-green-200 bg-green-50 dark:bg-green-100'
+                : 'border-yellow-200 bg-yellow-50 dark:bg-yellow-100'
+            }`}
+            transition:fade={{ duration: 300 }}
+          >
+            <div class="flex w-2/3 items-center gap-4">
+              <Notebook size={24} class="text-black" />
+              <div>
+                <div class="mb-2">
+                  <a
+                    href={`/courses/${data.courseId}/lessons/${exercise.lessonId}/exercises/${exercise.id}?tabIndex=1`}
+                  >
+                    <p class="text-lg font-semibold text-gray-600">
+                      {exercise.title}
+                    </p>
+                  </a>
+
+                  <a href={`/courses/${data.courseId}/lessons/${exercise.lessonId}`}>
+                    <p class="text-sm text-gray-500">
+                      #{exercise.lessonTitle}
+                    </p>
+                  </a>
+                </div>
+                <p class="text-sm text-gray-500">
+                  Score: {exercise.score}/{exercise.totalPoints}
+
+                  {#if exercise.isCompleted}
+                    <Tag type={exercise.status === 3 ? 'high-contrast' : 'outline'} size="sm">
+                      {exercise.status === 3 ? $t('analytics.graded') : $t('analytics.not_graded')}
+                    </Tag>
+                  {/if}
+                </p>
+              </div>
+            </div>
+
+            <Tag
+              class={`${
+                exercise.isCompleted
+                  ? 'bg-green-200 text-green-700'
+                  : 'bg-yellow-200 text-yellow-700'
+              }`}
+            >
+              {exercise.isCompleted ? $t('analytics.complete') : $t('analytics.incomplete')}
+            </Tag>
+          </div>
+        {/key}
+      {/each}
+    </div>
+  </section>
+{:else}
+  <LoadingPage />
+{/if}

apps/dashboard/src/routes/courses/[id]/people/[personId]/+page.ts

@@ -0,0 +1,8 @@
+export const load = async ({ params }) => {
+  const { id, personId } = params;
+
+  return {
+    userId: personId,
+    courseId: id
+  };
+};

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

@@ -1,26 +1,26 @@
 <script lang="ts">
-  import { profile } from '$lib/utils/store/user';
-  import { onMount } from 'svelte';
-  import { Add } from 'carbon-icons-svelte';
   import { goto } from '$app/navigation';
-  import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
+  import { profile } from '$lib/utils/store/user';
+  import { Add } from 'carbon-icons-svelte';
   import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte';
-  import { InlineCalendar, Datepicker } from 'svelte-calendar';
+  import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
+  import { onMount } from 'svelte';
+  import { Datepicker, InlineCalendar } from 'svelte-calendar';
   // import { supabase } from '$lib/utils/functions/supabase';
   // import Avatar from '$lib/components/Avatar/index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { formatUserUpcomingData, formatDate } from '$lib/utils/functions/routes/dashboard';
-  import { user } from '$lib/utils/store/user';
-  import { fetchUserUpcomingData } from '$lib/utils/services/dashboard';
-  import { isMobile } from '$lib/utils/store/useMobile';
-  import type { UserLessonDataType, LessonsByMonthIndexType } from '$lib/utils/types';
-  import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
-  import { isOrgAdmin, currentOrgPath, currentOrg, userUpcomingData } from '$lib/utils/store/org';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
   import { getGreeting } from '$lib/utils/functions/date';
-  import { globalStore } from '$lib/utils/store/app';
+  import { formatDate, formatUserUpcomingData } from '$lib/utils/functions/routes/dashboard';
   import { t } from '$lib/utils/functions/translations';
+  import { fetchUserUpcomingData } from '$lib/utils/services/dashboard';
+  import { globalStore } from '$lib/utils/store/app';
+  import { currentOrg, currentOrgPath, isOrgAdmin, userUpcomingData } from '$lib/utils/store/org';
+  import { isMobile } from '$lib/utils/store/useMobile';
+  import { user } from '$lib/utils/store/user';
+  import type { LessonsByMonthIndexType, UserLessonDataType } from '$lib/utils/types';
 
   export let data;
 
@@ -185,9 +185,9 @@
 
 <WelcomeModal />
 
-<div class="py-10 px-5 w-full max-w-5xl md:mx-auto">
+<div class="w-full max-w-5xl px-5 py-10 md:mx-auto">
-  <div class="flex items-center justify-between mb-10">
+  <div class="mb-10 flex items-center justify-between">
-    <h1 class="dark:text-white text-2xl md:text-3xl font-bold mb-3">
+    <h1 class="mb-3 text-2xl font-bold dark:text-white md:text-3xl">
       {$t(getGreeting())}
       {$profile.fullname}!
     </h1>
@@ -210,10 +210,10 @@
   </div>
 
   <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"
+    class="bg-primary-900 my-2 flex h-fit w-full flex-col-reverse justify-between rounded-md p-5 md:flex-row md:items-center lg:h-[265px] lg:p-10"
   >
     <span>
-      <p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
+      <p class="mb-5 w-full text-xs font-normal text-white md:w-[75%] lg:w-[80%] lg:text-xl">
         {$t('dashboard.hero_content')}
       </p>
       <PrimaryButton
@@ -225,7 +225,7 @@
     <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"
+      class="mb-3 w-28 md:mb-0 md:block md:w-1/3 lg:max-h-[205px] lg:w-[200px]"
     />
   </div>
 
@@ -242,20 +242,20 @@
 
   <div class="w-full">
     <!-- Your Schedule -->
-    <div class="w-full xl:w-auto container">
+    <div class="container w-full xl:w-auto">
-      <p class="dark:text-white font-bold mt-7 mb-4">{$t('dashboard.your_schedule')}</p>
+      <p class="mb-4 mt-7 font-bold dark:text-white">{$t('dashboard.your_schedule')}</p>
       <div
-        class="rounded border border-gray-200 dark:border-neutral-600 gap-3 flex flex-col md:flex-row items-start px-2 md:px-5 py-5 w-full"
+        class="flex w-full flex-col items-start gap-3 rounded border border-gray-200 px-2 py-5 dark:border-neutral-600 md:flex-row md:px-5"
       >
         {#if !$isMobile}
-          <div id="calendar" class="flex justify-center mt-5 w-2/5 min-w-[250px]">
+          <div id="calendar" class="mt-5 flex w-2/5 min-w-[250px] justify-center">
             <InlineCalendar bind:store {theme} />
           </div>
         {:else}
-          <div class="header w-full flex items-center">
+          <div class="header flex w-full items-center">
             <Datepicker bind:store let:key let:send let:receive>
               <button
-                class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
+                class="text-primary-700 rounded-md p-3 text-lg font-bold hover:bg-gray-300"
                 in:receive|local={{ key }}
                 out:send|local={{ key }}
                 on:click={() => {
@@ -268,40 +268,40 @@
           </div>
         {/if}
 
-        <div class="max-h-[400px] overflow-y-scroll w-full">
+        <div class="max-h-[400px] w-full overflow-y-scroll">
           {#if !$isMobile}
-            <p class="dark:text-white font-bold m-5">
+            <p class="m-5 font-bold dark:text-white">
               {formatDate($store?.selected)}
             </p>
           {/if}
           {#each selectedDateLessonData as lessonData}
-            <div class="flex items-center justify-between p-5 lesson-data">
+            <div class="lesson-data flex items-center justify-between p-5">
               <div class="w-full">
                 <a
-                  class="text-black-700 text-lg font-bold flex items-center"
+                  class="text-black-700 flex items-center text-lg font-bold"
                   href={`/courses/${lessonData.course_id}/lessons/${
                     lessonData.is_unlocked ? lessonData.lesson_id : ''
                   }`}
                 >
                   {lessonData.lesson_title}
                   {#if lessonData.is_unlocked}
-                    <span class="ml-2 success">
+                    <span class="success ml-2">
                       <LockedIcon class="carbon-icon dark:text-white" />
                     </span>
                   {:else}
                     <UnlockedIcon class="carbon-icon dark:text-white" />
                   {/if}
                 </a>
-                <p class="dark:text-white text-grey text-sm flex items-center">
+                <p class="text-grey flex items-center text-sm dark:text-white">
-                  <a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
+                  <a class="text-primary-700 my-2 underline" 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 &&
+                  class="join-call bg-primary-600 rounded-3xl py-3 font-bold text-white shadow-lg {!lessonData.call_url &&
-                    'opacity-50 pointer-events-none cursor-not-allowed'}"
+                    'pointer-events-none cursor-not-allowed opacity-50'}"
                   href={!!lessonData.call_url ? lessonData.call_url : undefined}
                   target="_blank"
                   title={!!lessonData.call_url

apps/dashboard/src/routes/org/[slug]/audience/[...params]/+page.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+  import { ActivityCard, HeroProfileCard, LoadingPage } from '$lib/components/Analytics';
+  import Progress from '$lib/components/Progress/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { getAccessToken } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
+  import { currentOrgPath } from '$lib/utils/store/org';
+  import type { UserAnalytics } from '$lib/utils/types/analytics';
+  import { Grid, Tag } from 'carbon-components-svelte';
+  import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
+  import Notebook from 'carbon-icons-svelte/lib/Notebook.svelte';
+  import Report from 'carbon-icons-svelte/lib/Report.svelte';
+  import RowExpand from 'carbon-icons-svelte/lib/RowExpand.svelte';
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+
+  export let data;
+
+  let userAnalytics: UserAnalytics;
+
+  let courseFilter = 'all';
+  function toggleCourseFilter(filter: 'completed' | 'incomplete') {
+    if (courseFilter === filter) {
+      courseFilter = 'all';
+    } else {
+      courseFilter = filter;
+    }
+  }
+
+  async function fetchUserAnalytics() {
+    const accessToken = await getAccessToken();
+    const response = await fetch('/api/analytics/user', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: accessToken
+      },
+      body: JSON.stringify(data)
+    });
+
+    if (!response.ok) {
+      console.error(response);
+      snackbar.error('Failed to fetch analytics data');
+    }
+
+    userAnalytics = (await response.json()) as UserAnalytics;
+  }
+
+  onMount(() => {
+    fetchUserAnalytics();
+  });
+
+  $: userMetrics = [
+    {
+      icon: Notebook,
+      title: $t('analytics.enrolled_courses'),
+      description: $t('analytics.enrolled_courses_description'),
+      percentage: userAnalytics?.courses?.length,
+      hidePercentage: true
+    },
+    {
+      icon: Report,
+      title: $t('analytics.overall_course_progress'),
+      description: $t('analytics.overall_course_progress_description'),
+      percentage: userAnalytics?.overallCourseProgress
+    },
+    {
+      icon: RowExpand,
+      title: $t('analytics.total_average_grade'),
+      description: $t('analytics.total_average_grade_description'),
+      percentage: userAnalytics?.overallAverageGrade
+    }
+  ];
+
+  $: completedCourses = userAnalytics?.courses?.filter(
+    (course) => course.lessons_count === course.lessons_completed
+  )?.length;
+  $: incompleteCourses = userAnalytics?.courses?.filter(
+    (course) => course.lessons_count !== course.lessons_completed
+  )?.length;
+
+  $: filteredCourses = userAnalytics?.courses?.filter((course) => {
+    if (courseFilter === 'all') {
+      return true;
+    }
+    return (course.lessons_count === course.lessons_completed) === (courseFilter === 'completed');
+  });
+</script>
+
+{#if userAnalytics}
+  <section class="w-full md:mx-auto md:max-w-5xl">
+    <div class="p-5">
+      <a
+        class="text-md flex items-center text-gray-500 dark:text-white"
+        href={`${$currentOrgPath}/audience`}
+      >
+        <ArrowLeftIcon size={24} class="carbon-icon dark:text-white" />
+        {$t('community.ask.go_back')}
+      </a>
+    </div>
+
+    <div class="px-5 py-1">
+      <HeroProfileCard user={userAnalytics.user} />
+
+      <Grid class="mt-5 px-0" fullWidth>
+        <div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {#each userMetrics as activity}
+            <ActivityCard {activity} />
+          {/each}
+        </div>
+      </Grid>
+
+      <div class="mt-5 rounded-md border p-3 dark:border-neutral-600 md:p-5">
+        <h3 class="text-2xl font-bold">
+          {$t('analytics.courses')}
+        </h3>
+
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center justify-between">
+            <p class="text-sm font-medium text-gray-600 dark:text-gray-200">
+              {$t('analytics.progress')}
+            </p>
+            <p class="text-sm font-medium text-gray-600 dark:text-gray-200">
+              {$t('analytics.progress_description', {
+                value: completedCourses,
+                total: userAnalytics.courses.length
+              })}
+            </p>
+          </div>
+          <Progress value={userAnalytics.overallCourseProgress} />
+          <div class="flex items-center justify-between">
+            <Tag
+              interactive
+              filter={courseFilter === 'incomplete'}
+              type={courseFilter === 'incomplete' ? 'gray' : 'outline'}
+              class="text-yellow-700 dark:text-yellow-500"
+              on:click={() => toggleCourseFilter('incomplete')}
+            >
+              {incompleteCourses}
+              {$t('analytics.incomplete')}
+            </Tag>
+            <Tag
+              interactive
+              filter={courseFilter === 'completed'}
+              type={courseFilter === 'completed' ? 'gray' : 'outline'}
+              class="text-green-700 dark:text-green-500"
+              on:click={() => toggleCourseFilter('completed')}
+            >
+              {completedCourses}
+              {$t('analytics.complete')}
+            </Tag>
+          </div>
+        </div>
+
+        {#each filteredCourses as course, index}
+          {#key index}
+            <div
+              class={`mt-5 w-full rounded-md border border-gray-200 p-5 ${
+                course.lessons_count === course.lessons_completed
+                  ? 'border-green-200 bg-green-50 dark:bg-green-100'
+                  : 'border-yellow-200 bg-yellow-50 dark:bg-yellow-100'
+              }`}
+              transition:fade={{ duration: 300 }}
+            >
+              <div class="flex items-center justify-between gap-4">
+                <div class="flex w-4/5 items-center gap-4">
+                  <img src={course.logo} alt={course.title} class="h-20 w-24 rounded-md" />
+                  <div class="mb-4 gap-4">
+                    <a href={`/courses/${course.id}`}>
+                      <p class="text-lg font-semibold text-gray-600">
+                        {course.title}
+                      </p>
+                    </a>
+
+                    <p class="line-clamp-2 text-sm text-gray-600">
+                      {course.description}
+                    </p>
+                  </div>
+                </div>
+
+                <Tag
+                  class={`${
+                    course.lessons_count === course.lessons_completed
+                      ? 'bg-green-200 text-green-700'
+                      : 'bg-yellow-200 text-yellow-700'
+                  }`}
+                >
+                  {course.lessons_count === course.lessons_completed
+                    ? $t('analytics.complete')
+                    : $t('analytics.incomplete')}
+                </Tag>
+              </div>
+
+              <div class="flex w-full items-center gap-1">
+                <Progress value={course.progress_percentage} />
+                <p>{course.progress_percentage}%</p>
+              </div>
+            </div>
+          {/key}
+        {/each}
+      </div>
+    </div>
+  </section>
+{:else}
+  <LoadingPage />
+{/if}

apps/dashboard/src/routes/org/[slug]/audience/[...params]/+page.ts

@@ -0,0 +1,11 @@
+export const load = async ({ params }) => {
+  const paramParts = params.params?.split('/') ?? [];
+
+  const userId = paramParts[0];
+  const orgId = paramParts[1];
+
+  return {
+    userId,
+    orgId
+  };
+};

pnpm-lock.yaml

@@ -286,6 +286,12 @@ importers:
       '@sveltejs/adapter-vercel':
         specifier: ^3.0.3
         version: 3.0.3(@sveltejs/kit@1.29.0)
+      '@sveltekit-i18n/base':
+        specifier: ^1.3.7
+        version: 1.3.7(svelte@4.1.2)
+      '@sveltekit-i18n/parser-icu':
+        specifier: ^1.0.8
+        version: 1.0.8
       '@tailwindcss/forms':
         specifier: ^0.5.4
         version: 0.5.4(tailwindcss@3.3.2)
@@ -304,6 +310,9 @@ importers:
       canvas-confetti:
         specifier: ^1.6.0
         version: 1.6.0
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       color2k:
         specifier: ^2.0.3
         version: 2.0.3
@@ -382,6 +391,9 @@ importers:
       sveltekit-i18n:
         specifier: ^2.4.2
         version: 2.4.2(svelte@4.1.2)
+      tailwind-merge:
+        specifier: ^2.6.0
+        version: 2.6.0
       tldts:
         specifier: ^6.1.41
         version: 6.1.41
@@ -3938,6 +3950,42 @@ packages:
     resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
     dev: true
 
+  /@formatjs/ecma402-abstract@2.3.1:
+    resolution: {integrity: sha512-Ip9uV+/MpLXWRk03U/GzeJMuPeOXpJBSB5V1tjA6kJhvqssye5J5LoYLc7Z5IAHb7nR62sRoguzrFiVCP/hnzw==}
+    dependencies:
+      '@formatjs/fast-memoize': 2.2.5
+      '@formatjs/intl-localematcher': 0.5.9
+      decimal.js: 10.4.3
+      tslib: 2.8.1
+    dev: false
+
+  /@formatjs/fast-memoize@2.2.5:
+    resolution: {integrity: sha512-6PoewUMrrcqxSoBXAOJDiW1m+AmkrAj0RiXnOMD59GRaswjXhm3MDhgepXPBgonc09oSirAJTsAggzAGQf6A6g==}
+    dependencies:
+      tslib: 2.8.1
+    dev: false
+
+  /@formatjs/icu-messageformat-parser@2.9.7:
+    resolution: {integrity: sha512-cuEHyRM5VqLQobANOjtjlgU7+qmk9Q3fDQuBiRRJ3+Wp3ZoZhpUPtUfuimZXsir6SaI2TaAJ+SLo9vLnV5QcbA==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.1
+      '@formatjs/icu-skeleton-parser': 1.8.11
+      tslib: 2.8.1
+    dev: false
+
+  /@formatjs/icu-skeleton-parser@1.8.11:
+    resolution: {integrity: sha512-8LlHHE/yL/zVJZHAX3pbKaCjZKmBIO6aJY1mkVh4RMSEu/2WRZ4Ysvv3kKXJ9M8RJLBHdnk1/dUQFdod1Dt7Dw==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.1
+      tslib: 2.8.1
+    dev: false
+
+  /@formatjs/intl-localematcher@0.5.9:
+    resolution: {integrity: sha512-8zkGu/sv5euxbjfZ/xmklqLyDGQSxsLqg8XOq88JW3cmJtzhCP8EtSJXlaKZnVO4beEaoiT9wj4eIoCQ9smwxA==}
+    dependencies:
+      tslib: 2.8.1
+    dev: false
+
   /@hapi/hoek@9.3.0:
     resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==}
     dev: false
@@ -6115,7 +6163,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
     dependencies:
-      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@4.0.0)(svelte@5.10.1)(vite@5.4.11)
+      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@5.0.0)(svelte@5.10.1)(vite@6.0.0)
       import-meta-resolve: 4.1.0
     dev: true
 
@@ -6403,6 +6451,12 @@ packages:
     resolution: {integrity: sha512-/gtzLlqm/sox7EoPKD56BxGZktK/syGc79EbJAPWY5KVitQD9SM0TP8yJCqDxTVPk7Lk0WJhrBGUE2Nn0f5M1w==}
     dev: false
 
+  /@sveltekit-i18n/parser-icu@1.0.8:
+    resolution: {integrity: sha512-/LnvE1EJv+higIxB5cWIV+9neiOe+CfC7VKhpv9mnU35NcZO3yOhEZ8y6F8nHHkMYIABLcqr15yk4hSvmRGWDw==}
+    dependencies:
+      intl-messageformat: 10.7.10
+    dev: false
+
   /@swc/helpers@0.4.14:
     resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
     dependencies:
@@ -9354,7 +9408,6 @@ packages:
 
   /decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
-    dev: true
 
   /decode-named-character-reference@1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
@@ -11780,6 +11833,15 @@ packages:
     resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
     dev: false
 
+  /intl-messageformat@10.7.10:
+    resolution: {integrity: sha512-hp7iejCBiJdW3zmOe18FdlJu8U/JsADSDiBPQhfdSeI8B9POtvPRvPh3nMlvhYayGMKLv6maldhR7y3Pf1vkpw==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.1
+      '@formatjs/fast-memoize': 2.2.5
+      '@formatjs/icu-messageformat-parser': 2.9.7
+      tslib: 2.8.1
+    dev: false
+
   /ioredis@5.3.2:
     resolution: {integrity: sha512-1DKMMzlIHM02eBBVOFQ1+AolGjs6+xEcM4PDL7NqOS6szq7H9jSaEkIUH6/a5Hl241LzW6JLSiAbNvTQjUupUA==}
     engines: {node: '>=12.22.0'}
@@ -17153,6 +17215,10 @@ packages:
     resolution: {integrity: sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==}
     dev: true
 
+  /tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+    dev: false
+
   /tailwind-variants@0.2.1(tailwindcss@3.4.16):
     resolution: {integrity: sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==}
     engines: {node: '>=16.x', pnpm: '>=7.x'}

supabase/migrations/20241016235827_student_analytics.sql

@@ -0,0 +1,122 @@
+create table "public"."analytics_login_events" (
+    "id" uuid not null default uuid_generate_v4(),
+    "user_id" uuid not null,
+    "logged_in_at" timestamp with time zone default now()
+);
+
+alter table "public"."analytics_login_events" enable row level security;
+
+CREATE UNIQUE INDEX analytics_login_events_pkey ON public.analytics_login_events USING btree (id);
+
+CREATE INDEX idx_analytics_login_events_logged_in_at ON public.analytics_login_events USING btree (logged_in_at);
+
+CREATE INDEX idx_analytics_login_events_user_id ON public.analytics_login_events USING btree (user_id);
+
+CREATE UNIQUE INDEX analytics_login_events_user_id_unique ON public.analytics_login_events USING btree (user_id);
+
+alter table "public"."analytics_login_events" add constraint "analytics_login_events_pkey" PRIMARY KEY using index "analytics_login_events_pkey";
+
+alter table "public"."analytics_login_events" add constraint "analytics_login_events_user_id_fkey" FOREIGN KEY (user_id) REFERENCES auth.users(id) not valid;
+
+alter table "public"."analytics_login_events" validate constraint "analytics_login_events_user_id_fkey";
+
+alter table "public"."analytics_login_events" add constraint "analytics_login_events_user_id_unique" UNIQUE using index "analytics_login_events_user_id_unique";
+
+set check_function_bodies = off;
+
+CREATE OR REPLACE FUNCTION public.insert_login_event_on_user_login()
+ RETURNS trigger
+ LANGUAGE plpgsql
+ SECURITY DEFINER
+AS $function$
+BEGIN
+  IF (NEW.last_sign_in_at IS NOT NULL) THEN
+    INSERT INTO public.analytics_login_events (logged_in_at, user_id)
+    VALUES (NEW.last_sign_in_at, NEW.id)
+    ON CONFLICT (user_id) DO UPDATE
+    SET logged_in_at = NEW.last_sign_in_at;
+  END IF;
+  RETURN NEW;
+END;
+$function$
+;
+
+CREATE TRIGGER insert_login_event_on_user_login_trigger
+AFTER UPDATE OF last_sign_in_at ON auth.users
+FOR EACH ROW
+EXECUTE FUNCTION public.insert_login_event_on_user_login();
+
+CREATE OR REPLACE FUNCTION public.insert_login_event_on_user_session_update()
+ RETURNS trigger
+ LANGUAGE plpgsql
+ SECURITY DEFINER
+AS $function$
+BEGIN
+  IF (NEW.updated_at IS NOT NULL) THEN
+    INSERT INTO public.analytics_login_events (logged_in_at, user_id)
+    VALUES (NEW.updated_at, NEW.user_id);
+  END IF;
+  RETURN NEW;
+END;
+$function$
+;
+
+CREATE TRIGGER insert_login_event_on_user_session_update_trigger
+AFTER UPDATE OF updated_at ON auth.sessions
+FOR EACH ROW
+EXECUTE FUNCTION public.insert_login_event_on_user_session_update();
+
+grant delete on table "public"."analytics_login_events" to "anon";
+
+grant insert on table "public"."analytics_login_events" to "anon";
+
+grant references on table "public"."analytics_login_events" to "anon";
+
+grant select on table "public"."analytics_login_events" to "anon";
+
+grant trigger on table "public"."analytics_login_events" to "anon";
+
+grant truncate on table "public"."analytics_login_events" to "anon";
+
+grant update on table "public"."analytics_login_events" to "anon";
+
+grant delete on table "public"."analytics_login_events" to "authenticated";
+
+grant insert on table "public"."analytics_login_events" to "authenticated";
+
+grant references on table "public"."analytics_login_events" to "authenticated";
+
+grant select on table "public"."analytics_login_events" to "authenticated";
+
+grant trigger on table "public"."analytics_login_events" to "authenticated";
+
+grant truncate on table "public"."analytics_login_events" to "authenticated";
+
+grant update on table "public"."analytics_login_events" to "authenticated";
+
+grant delete on table "public"."analytics_login_events" to "service_role";
+
+grant insert on table "public"."analytics_login_events" to "service_role";
+
+grant references on table "public"."analytics_login_events" to "service_role";
+
+grant select on table "public"."analytics_login_events" to "service_role";
+
+grant trigger on table "public"."analytics_login_events" to "service_role";
+
+grant truncate on table "public"."analytics_login_events" to "service_role";
+
+grant update on table "public"."analytics_login_events" to "service_role";
+
+create policy "Users can insert their own login events"
+on "public"."analytics_login_events"
+as permissive
+for insert
+to authenticated
+with check ((auth.uid() = user_id));
+
+CREATE POLICY "Enable delete for users based on user_id"
+ON "public"."analytics_login_events"
+AS PERMISSIVE FOR DELETE
+TO public
+USING (auth.uid() = user_id);