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 <[email protected]>
2024-12-30 02:59:10 +01:00
parent 381776f388
commit f69bf920a9
46 changed files with 1916 additions and 437 deletions
@@ -1,62 +1,56 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import { cubicOut } from "svelte/easing";
-import type { TransitionConfig } from "svelte/transition";
+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));
+  return twMerge(clsx(inputs));
 }

 type FlyAndScaleParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
+  y?: number;
+  x?: number;
+  start?: number;
+  duration?: number;
 };

 export const flyAndScale = (
-	node: Element,
-	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+  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 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 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;
+    const percentage = (valueA - minA) / (maxA - minA);
+    const valueB = percentage * (maxB - minB) + minB;

-		return valueB;
-	};
+    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]};`;
-		}, "");
-	};
+  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 {
+    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
-	};
-};
+      return styleToString({
+        transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+        opacity: t
+      });
+    },
+    easing: cubicOut
+  };
+};
@@ -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",
@@ -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>
@@ -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>
@@ -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>
@@ -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';
@@ -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}
@@ -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}
@@ -1,37 +1,38 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+  import PageBody from '$lib/components/PageBody/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { t } from '$lib/utils/functions/translations';
+  import { upsertExercise } from '$lib/utils/services/courses';
+  import { globalStore } from '$lib/utils/store/app';
+  import {
+    Breadcrumb,
+    BreadcrumbItem,
+    ContentSwitcher,
+    OverflowMenu,
+    OverflowMenuItem,
+    Switch
+  } from 'carbon-components-svelte';
  import AddAltIcon from 'carbon-icons-svelte/lib/AddAlt.svelte';
  import ViewIcon from 'carbon-icons-svelte/lib/View.svelte';
  import ViewFilledIcon from 'carbon-icons-svelte/lib/ViewFilled.svelte';
+  import { onDestroy, onMount } from 'svelte';
  import {
    handleAddQuestion,
    questionnaire,
-    validateQuestionnaire,
+    questionnaireOrder,
    reset,
-    questionnaireOrder
+    validateQuestionnaire
  } from '../store/exercise';
-  import {
-    ContentSwitcher,
-    Switch,
-    Breadcrumb,
-    BreadcrumbItem,
-    OverflowMenu,
-    OverflowMenuItem
-  } from 'carbon-components-svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import IconButton from '$lib/components/IconButton/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import ViewMode from './ViewMode.svelte';
  import EditMode from './EditMode.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import { upsertExercise } from '$lib/utils/services/courses';
-  import UpdateDescription from './UpdateDescription.svelte';
-  import { snackbar } from '$lib/components/Snackbar/store';
  import Analytics from './Submissions/index.svelte';
-  import { t } from '$lib/utils/functions/translations';
-  import { globalStore } from '$lib/utils/store/app';
+  import UpdateDescription from './UpdateDescription.svelte';
+  import ViewMode from './ViewMode.svelte';

  export let exerciseId = '';
  export let path = '';
@@ -78,16 +79,28 @@
    reset();
  });

+  $: onSelectedIndexChange(selectedIndex);
+  function onSelectedIndexChange(index: number) {
+    goto($page.url.pathname + '?tabIndex=' + index);
+  }
+
+  onMount(() => {
+    const tabIndex = $page.url.searchParams.get('tabIndex');
+    if (tabIndex) {
+      selectedIndex = parseInt(tabIndex);
+    }
+  });
+
  $: $questionnaire?.questions?.length < 1 && handleAddQuestion();
 </script>

 <PageBody bind:isPageNavHidden={$globalStore.isStudent} padding="px-4 overflow-x-hidden">
-  <div class="bg-gray-100 dark:bg-neutral-800 top-0 z-10 sticky p-2 mb-3">
+  <div class="sticky top-0 z-10 mb-3 bg-gray-100 p-2 dark:bg-neutral-800">
    <Breadcrumb noTrailingSlash>
-      <BreadcrumbItem href={path}
-        >{$t('course.navItem.lessons.exercises.all_exercises.heading')}</BreadcrumbItem
-      >
-      <BreadcrumbItem href={`${path}${exerciseId}`} isCurrentPage>
+      <BreadcrumbItem href={path}>
+        {$t('course.navItem.lessons.exercises.all_exercises.heading')}
+      </BreadcrumbItem>
+      <BreadcrumbItem href={`${path}/${exerciseId}`} isCurrentPage>
        {$questionnaire.title}
      </BreadcrumbItem>
    </Breadcrumb>
@@ -106,7 +119,7 @@
      </ContentSwitcher>

      {#if selectedIndex === 0}
-        <div class="flex items-center justify-end right-0 w-full">
+        <div class="right-0 flex w-full items-center justify-end">
          <div class="flex items-center">
            <PrimaryButton
              className="mr-2"
@@ -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>

@@ -1,24 +1,24 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
  import { page } from '$app/stores';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import ComingSoon from '$lib/components/ComingSoon/index.svelte';
+  import { validateForm } from '$lib/components/Courses/functions';
+  import { courses, createCourseModal } from '$lib/components/Courses/store';
+  import TextArea from '$lib/components/Form/TextArea.svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
  import Modal from '$lib/components/Modal/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { ROLE } from '$lib/utils/constants/roles';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
+  import { addDefaultNewsFeed, addGroupMember } from '$lib/utils/services/courses';
+  import { capturePosthogEvent } from '$lib/utils/services/posthog';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import { COURSE_TYPE, COURSE_VERSION } from '$lib/utils/types';
  import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
  import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
-  import TextField from '$lib/components/Form/TextField.svelte';
-  import TextArea from '$lib/components/Form/TextArea.svelte';
-  import { courses, createCourseModal } from '$lib/components/Courses/store';
-  import { validateForm } from '$lib/components/Courses/functions';
-  import { ROLE } from '$lib/utils/constants/roles';
-  import { addGroupMember, addDefaultNewsFeed } from '$lib/utils/services/courses';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import { profile } from '$lib/utils/store/user';
-  import { currentOrg } from '$lib/utils/store/org';
-  import { goto } from '$app/navigation';
-  import { capturePosthogEvent } from '$lib/utils/services/posthog';
-  import { t } from '$lib/utils/functions/translations';
-  import { COURSE_TYPE, COURSE_VERSION } from '$lib/utils/types';
-  import ComingSoon from '$lib/components/ComingSoon/index.svelte';

  let isLoading = false;
  let errors = {
@@ -143,18 +143,19 @@
  onClose={() => onClose($page.url.pathname)}
  bind:open
  width="w-4/5 md:w-2/5 md:min-w-[600px]"
+  containerClass="max-w-2xl mx-auto"
  modalHeading={$t('courses.new_course_modal.heading')}
 >
  {#if step === 0}
    <div>
-      <h2 class="text-xl font-medium my-5">
+      <h2 class="my-5 text-xl font-medium">
        {$t('courses.new_course_modal.type_selector_title')}
      </h2>

-      <div class="flex flex-col md:flex-row gap-2 justify-between items-center my-8">
+      <div class="my-8 flex flex-col items-center justify-evenly gap-4 md:flex-row">
        {#each options as option}
          <button
-            class="w-11/12 md:w-[261px] md:h-[240px] p-5 rounded-md dark:bg-neutral-700 border-2 {option.type ===
+            class="w-11/12 rounded-md border-2 p-5 dark:bg-neutral-700 md:h-[240px] md:w-[261px] {option.type ===
            type
              ? 'border-primary-400'
              : `border-gray-200 dark:border-neutral-600 ${
@@ -164,7 +165,7 @@
            type="button"
            on:click={!option.isDisabled ? () => (type = option.type) : undefined}
          >
-            <div class="w-full flex flex-row-reverse h-[70%]">
+            <div class="flex h-[70%] w-full flex-row-reverse">
              {#if option.type === type}
                <CheckmarkFilledIcon
                  size={16}
@@ -176,19 +177,19 @@
            </div>

            <div>
-              <p class="font-bold text-start flex items-center">
+              <p class="flex items-center text-start font-bold">
                <span class="mr-2 text-sm">{option.title}</span>
                {#if option.isDisabled}
                  <ComingSoon />
                {/if}
              </p>
-              <p class="text-xs font-light text-start">{option.subtitle}</p>
+              <p class="text-start text-xs font-light">{option.subtitle}</p>
            </div>
          </button>
        {/each}
      </div>

-      <div class="mt-8 flex items-center flex-row-reverse">
+      <div class="mt-8 flex flex-row-reverse items-center">
        <PrimaryButton
          className="px-6 py-3"
          label={$t('courses.new_course_modal.next')}
@@ -199,7 +200,7 @@
    </div>
  {:else}
    <form on:submit|preventDefault={createCourse}>
-      <div class="flex items-end space-x-2 mb-4">
+      <div class="mb-4 flex items-end space-x-2">
        <TextField
          label={$t('courses.new_course_modal.course_name')}
          bind:value={$createCourseModal.title}
@@ -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;
@@ -1,14 +1,17 @@
 <script>
+  import { page as pageStore } from '$app/stores';
+  import Avatar from '$lib/components/Avatar/index.svelte';
+  import { t } from '$lib/utils/functions/translations';
+  import { currentOrg, orgAudience } from '$lib/utils/store/org';
  import {
    DataTable,
+    DataTableSkeleton,
+    Link,
+    Pagination,
    Toolbar,
    ToolbarContent,
-    ToolbarSearch,
-    Pagination,
-    DataTableSkeleton
+    ToolbarSearch
  } from 'carbon-components-svelte';
-  import { orgAudience } from '$lib/utils/store/org';
-  import { t } from '$lib/utils/functions/translations';

  export let isLoading = false;

@@ -32,6 +35,22 @@
        <ToolbarSearch persistent value={searchValue} shouldFilterRows bind:filteredRowIds />
      </ToolbarContent>
    </Toolbar>
+    <svelte:fragment slot="cell-header" let:header>
+      {header.value}
+    </svelte:fragment>
+    <svelte:fragment slot="cell" let:row let:cell>
+      {#if cell.key === 'name'}
+        <Link
+          class="flex items-center gap-2 text-black hover:text-black"
+          href={`${$pageStore.url.href}/${row.id}/${$currentOrg.id}`}
+        >
+          <Avatar src={row.avatar_url} width="w-5" height="h-5" />
+          {cell.value}
+        </Link>
+      {:else}
+        {cell.value}
+      {/if}
+    </svelte:fragment>
  </DataTable>
 {/if}

@@ -1,18 +1,17 @@
 <script>
-  import { Grid, Row, Column } from 'carbon-components-svelte';
  import TextField from '$lib/components/Form/TextField.svelte';
-  import SectionTitle from '../SectionTitle.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import UploadImage from '$lib/components/UploadImage/index.svelte';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import { profile } from '$lib/utils/store/user';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
  import { snackbar } from '$lib/components/Snackbar/store';
+  import UploadImage from '$lib/components/UploadImage/index.svelte';
  import generateUUID from '$lib/utils/functions/generateUUID';
-  import { t } from '$lib/utils/functions/translations';
-  import LanguagePicker from './LanguagePicker.svelte';
-  import { handleLocaleChange } from '$lib/utils/functions/translations';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { handleLocaleChange, t } from '$lib/utils/functions/translations';
  import { updateProfileValidation } from '$lib/utils/functions/validator';
+  import { profile } from '$lib/utils/store/user';
+  import { Column, Grid, Row } from 'carbon-components-svelte';
+  import SectionTitle from '../SectionTitle.svelte';
+  import LanguagePicker from './LanguagePicker.svelte';

  let avatar = '';
  let loading = false;
@@ -38,6 +37,7 @@
        email: $profile.email,
        locale
      };
+      console.log('updates', updates);

      if (avatar) {
        const filename = `user/${generateUUID()}.webp`;
@@ -1,30 +1,31 @@
 <script lang="ts">
  import { page } from '$app/stores';
-  import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
-  import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
-  import { ChevronRight, SettingsAdjust } from 'carbon-icons-svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
-  import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
+  import Avatar from '$lib/components/Avatar/index.svelte';
+  import AudienceIcon from '$lib/components/Icons/AudienceIcon.svelte';
  import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
+  import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
  import QuizIcon from '$lib/components/Icons/QuizIcon.svelte';
  import SiteSettingsIcon from '$lib/components/Icons/SiteSettingsIcon.svelte';
-  import AudienceIcon from '$lib/components/Icons/AudienceIcon.svelte';
-  import Avatar from '$lib/components/Avatar/index.svelte';
+  import OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
  import { currentOrgPath, isFreePlan } from '$lib/utils/store/org';
+  import { ChevronRight, SettingsAdjust } from 'carbon-icons-svelte';
+  import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
+  import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';

-  import { isOrgAdmin } from '$lib/utils/store/org';
-  import { profile } from '$lib/utils/store/user';
-  import { NavClasses } from '$lib/utils/constants/reusableClass';
-  import { sideBar, profileMenu } from './store';
-  import { t } from '$lib/utils/functions/translations';
  import { goto } from '$app/navigation';
  import ProfileMenu from '$lib/components/Org/ProfileMenu/index.svelte';
+  import { NavClasses } from '$lib/utils/constants/reusableClass';
+  import { t } from '$lib/utils/functions/translations';
+  import { isOrgAdmin } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import { profileMenu, sideBar } from './store';

  interface menuItems {
    label: string;
    path: string;
    show: boolean;
+    isActive: boolean;
  }

  let menuItems: menuItems[] = [];
@@ -51,26 +52,31 @@
    {
      path: '',
      label: $t('org_navigation.dashboard'),
+      isActive: isActive($page.url.pathname, `${$currentOrgPath}`),
      show: true
    },
    {
      path: '/courses',
      label: $t('org_navigation.courses'),
+      isActive: $page.url.pathname.includes(`${$currentOrgPath}/courses`),
      show: true
    },
    {
      path: '/community',
      label: $t('org_navigation.community'),
+      isActive: $page.url.pathname.includes(`${$currentOrgPath}/community`),
      show: true
    },
    {
      path: '/audience',
      label: $t('org_navigation.audience'),
+      isActive: $page.url.pathname.includes(`${$currentOrgPath}/audience`),
      show: true
    },
    {
      path: '/setup',
      label: $t('org_navigation.setup'),
+      isActive: $page.url.pathname.includes(`${$currentOrgPath}/setup`),
      show: $isOrgAdmin
    }
  ];
@@ -80,15 +86,15 @@
  <aside
    class={`${
      $sideBar.hidden
-        ? 'absolute z-40 -translate-x-[100%] md:relative md:translate-x-0 top-[48px] md:top-0'
-        : 'absolute z-40 translate-x-0 md:relative top-[48px] md:top-0'
-    } border-r-1 h-[calc(100vh-48px)] w-[250px] min-w-[250px] overflow-y-auto border border-b-0 border-l-0 border-t-0 border-gray-100 dark:border-neutral-600 bg-gray-100 transition dark:bg-neutral-900`}
+        ? 'absolute top-[48px] z-40 -translate-x-[100%] md:relative md:top-0 md:translate-x-0'
+        : 'absolute top-[48px] z-40 translate-x-0 md:relative md:top-0'
+    } border-r-1 h-[calc(100vh-48px)] w-[250px] min-w-[250px] overflow-y-auto border border-b-0 border-l-0 border-t-0 border-gray-100 bg-gray-100 transition dark:border-neutral-600 dark:bg-neutral-900`}
  >
    <div class="flex h-full flex-col">
      <div class="">
        <OrgSelector />

-        <ul class="mt-4 my-2 px-4">
+        <ul class="my-2 mt-4 px-4">
          {#each menuItems as menuItem}
            {#if menuItem.show}
              <a
@@ -97,10 +103,7 @@
                on:click={toggleSidebar}
              >
                <li
-                  class="mb-1 flex items-center gap-2.5 px-2.5 py-2 {NavClasses.item} {isActive(
-                    $page.url.pathname,
-                    `${$currentOrgPath}${menuItem.path}`
-                  )
+                  class="mb-1 flex items-center gap-2.5 px-2.5 py-2 {NavClasses.item} {menuItem.isActive
                    ? NavClasses.active
                    : 'dark:text-white'}"
                >
@@ -130,7 +133,7 @@

      {#if $isFreePlan}
        <div
-          class="border-primary-700 mx-4 flex flex-col items-center justify-center gap-4 rounded-md border px-2 py-6 text-center hover:scale-95 transition-all ease-in-out"
+          class="border-primary-700 mx-4 flex flex-col items-center justify-center gap-4 rounded-md border px-2 py-6 text-center transition-all ease-in-out hover:scale-95"
        >
          <img src="/upgrade.png" alt="upgrade" class="h-16 w-16" />
          <span class="flex flex-col gap-1">
@@ -149,7 +152,7 @@
        <a href={$currentOrgPath} class="text-black no-underline" on:click={toggleSidebar}>
          <li class="mb-2 flex items-center rounded px-2.5 py-1.5">
            <HelpIcon size={20} class="carbon-icon dark:text-white" />
-            <p class="ml-2.5 dark:text-white text-sm font-medium">{$t('org_navigation.help')}</p>
+            <p class="ml-2.5 text-sm font-medium dark:text-white">{$t('org_navigation.help')}</p>
          </li>
        </a>

@@ -161,20 +164,20 @@
          }}
        >
          <div
-            class="text-black no-underline cursor-pointer flex items-center justify-between gap-2.5 px-2.5 py-2 mb-2 {NavClasses.item} {$page.url.pathname.includes(
+            class="mb-2 flex cursor-pointer items-center justify-between gap-2.5 px-2.5 py-2 text-black no-underline {NavClasses.item} {$page.url.pathname.includes(
              'settings'
            )
              ? NavClasses.active
              : 'dark:text-white'}"
          >
-            <div class="flex text-start items-center justify-start space-x-1 w-full">
+            <div class="flex w-full items-center justify-start space-x-1 text-start">
              <Avatar
                src={$profile.avatar_url}
                name={$profile.username}
                width="w-[1.2rem]"
                height="h-[1.2rem]"
              />
-              <p class="text-sm dark:text-white font-medium truncate max-w-full">
+              <p class="max-w-full truncate text-sm font-medium dark:text-white">
                {$profile.fullname}
              </p>
            </div>
@@ -1,7 +1,6 @@
 <script lang="ts">
-  // import { Moon } from 'svelte-loading-spinners';
-  import { VARIANTS, VARIANTS_CLASS } from './constants';
  import { Loading } from 'carbon-components-svelte';
+  import { VARIANTS, VARIANTS_CLASS } from './constants';

  export let label = '';
  export let className = '';
@@ -13,18 +12,22 @@
  export let isDisabled = false;
  export let isLoading = false;
  export let disableScale = false;
+
+  $: loadingClass =
+    isLoading || isDisabled
+      ? 'cursor-not-allowed opacity-25'
+      : `cursor-pointer ${!disableScale && 'hover:scale-95'}`;
+  $: cname = `flex items-center h-auto ${loadingClass} ${
+    VARIANTS_CLASS[isLoading ? VARIANTS.OUTLINED : variant]
+  } ${
+    !disablePadding && 'px-5 py-[0.2rem]'
+  } rounded-md min-h-[36px] w-fit justify-center sm:w-auto ${
+    variant !== VARIANTS.TEXT && 'hover:shadow-xl'
+  } transition-all delay-150 duration-300 ease-in-out`;
 </script>

 <button
-  class="{isLoading || isDisabled
-    ? 'opacity-25 cursor-not-allowed'
-    : `cursor-pointer ${
-        !disableScale && 'hover:scale-95'
-      }`} flex items-center h-auto {VARIANTS_CLASS[
-    isLoading ? VARIANTS.OUTLINED : variant
-  ]} {!disablePadding &&
-    'py-[0.5rem] px-6'} rounded-md {className} w-fit min-h-[36px] justify-center sm:w-auto {variant !==
-    VARIANTS.TEXT && 'hover:shadow-xl'} transition-all delay-150 duration-300 ease-in-out"
+  class={`${cname} ${className}`}
  on:click={onClick}
  {name}
  {type}
@@ -32,7 +35,6 @@
 >
  {#if isLoading}
    <Loading withOverlay={false} small class="mr-2" />
-    <!-- <Moon size="20" color="#1d4ed8" unit="px" duration="1s" /> -->
  {/if}
  {#if !!label}
    {label}
@@ -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>
@@ -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')}
@@ -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
+  };
+};
@@ -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';
 };
@@ -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 || '';
+};
@@ -1,17 +1,10 @@
 import { LOCALE } from '$lib/utils/types';
+import i18n from '@sveltekit-i18n/base';
+import parser from '@sveltekit-i18n/parser-icu';
 import { writable } from 'svelte/store';
-import i18n, { type Config } from 'sveltekit-i18n';

-interface Params {
-  dateValue: number;
-  value: number;
-  download: number;
-  award: number;
-  val: Date;
-}
-
-export const config: Config<Partial<Params>> = {
-  // parser: parser(),
+export const config = {
+  parser: parser(),
  loaders: [
    {
      locale: 'en',
@@ -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')
@@ -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();
@@ -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"
  }
 }
@@ -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",
@@ -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"
  }
 }
@@ -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"
  }
 }
@@ -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": "सभी पूर्ण किए गए असाइनमेंट का औसत ग्रेड"
  }
 }
@@ -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"
  }
 }
@@ -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": "Средняя оценка за все выполненные задания"
  }
 }
@@ -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"
  }
 }
@@ -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;
+      }[];
+    }[];
+  }[];
+}
@@ -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;
+}
@@ -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: '[email protected]',
+      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 [];
+  }
+}
@@ -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>
@@ -0,0 +1,6 @@
+export const load = ({ params = { id: '', personId: '' } }) => {
+  return {
+    courseId: params.id,
+    personId: params.personId
+  };
+};
@@ -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 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';
+  import copy from 'copy-to-clipboard';

-  export let data;
-
-  let people: Array<Person> = [];
+  let people: Array<GroupPerson> = [];
  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((a: Person, b: Person) => a.role_id - b.role_id);
+      .sort(
+        (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}>
-  <PageNav title={$t('course.navItem.people.title')} disableSticky={true}>
-    <slot:fragment slot="widget">
-      <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton
-          className="mr-2"
-          label={$t('course.navItem.people.add')}
-          onClick={handleClick}
-        />
-      </RoleBasedSecurity>
-    </slot:fragment>
-  </PageNav>
-  <PageBody width="w-full max-w-6xl md:w-11/12">
-    <section class="my-5 mx-2 md:mx-9">
-      <div
-        class="flex flex-col md:flex-row flex-end gap-2 justify-end items-start md:items-center mb-7"
-      >
-        <div class="max-w-[320px]">
-          <Search
-            class="dark:text-slate-950 border-0 bg-zinc-100 w-full"
-            placeholder={$t('course.navItem.people.search')}
-            bind:value={searchValue}
-          />
-        </div>
-        <div class="mb-3">
-          <Select
-            bind:value={filterBy}
-            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>
+<section class="mx-2 my-5 md:mx-9">
+  <div
+    class="flex-end mb-7 flex flex-col items-start justify-end gap-2 md:flex-row md:items-center"
+  >
+    <div class="max-w-[320px]">
+      <Search
+        class="w-full border-0 bg-zinc-100 dark:text-slate-950"
+        placeholder={$t('course.navItem.people.search')}
+        bind:value={searchValue}
+      />
+    </div>
+    <div class="mb-3">
+      <Select
+        bind:value={filterBy}
+        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="hidden w-20 text-lg dark:text-white lg:block" />
+    </RoleBasedSecurity>
+  </div>

-      <StructuredList class="m-0">
-        <StructuredListHead
-          class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
+  <StructuredList class="m-0">
+    <StructuredListHead
+      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"
-              >{$t('course.navItem.people.name')}</StructuredListCell
-            >
-            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-              >{$t('course.navItem.people.role')}</StructuredListCell
-            >
-            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-              >{$t('course.navItem.people.action')}</StructuredListCell
-            >
-            <RoleBasedSecurity allowedRoles={[1, 2]}>
-              <p class="dark:text-white hidden lg:block text-lg w-20" />
-            </RoleBasedSecurity>
-          </StructuredListRow>
-        </StructuredListHead>
+        <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+          >{$t('course.navItem.people.role')}</StructuredListCell
+        >
+        <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+          >{$t('course.navItem.people.action')}</StructuredListCell
+        >
+        <RoleBasedSecurity allowedRoles={[1, 2]}>
+          <p class="hidden w-20 text-lg dark:text-white lg:block" />
+        </RoleBasedSecurity>
+      </StructuredListRow>
+    </StructuredListHead>

-        {#each filterPeople(searchValue, people) as person}
-          <StructuredListBody>
-            <StructuredListRow class="relative">
-              <!-- first column -->
-              <StructuredListCell class="w-4/6 md:w-3/6">
-                {#if person.profile}
-                  <div class="flex items-start lg:items-center">
-                    <Avatar
-                      src={person.profile.avatar_url}
-                      name={person.profile.fullname}
-                      width="w-8"
-                      height="h-8"
-                      className="mr-3"
-                    />
-                    <div class="flex flex-col lg:flex-row items-start lg:items-center">
-                      <div class="mr-2">
-                        <p class="dark:text-white text-base font-normal">
-                          {person.profile.fullname}
-                        </p>
-                        <p class="text-xs text-primary-600 line-clamp-1">
-                          {obscureEmail(getEmail(person))}
-                        </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>
+    {#each filterPeople(searchValue, people) as person}
+      <StructuredListBody>
+        <StructuredListRow class="relative">
+          <!-- first column -->
+          <StructuredListCell class="w-4/6 md:w-3/6">
+            {#if person.profile}
+              <div class="flex items-start lg:items-center">
+                <Avatar
+                  src={person.profile.avatar_url}
+                  name={person.profile.fullname}
+                  width="w-8"
+                  height="h-8"
+                  className="mr-3"
+                />
+                <div class="flex flex-col items-start lg:flex-row lg:items-center">
+                  <div class="mr-2">
+                    <p class="text-base font-normal dark:text-white">
+                      {person.profile.fullname}
+                    </p>
+                    <p class="text-primary-600 line-clamp-1 text-xs">
+                      {obscureEmail(getEmail(person))}
+                    </p>
                  </div>
-                {:else}
-                  <div class="flex items-start lg:items-center w-2/4">
-                    <TextChip
-                      value={person.email.substring(0, 2).toUpperCase()}
-                      className="bg-primary-200 text-black font-semibold text-xs mr-3"
-                      shape="rounded-full"
-                    />
-                    <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>
+                  <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>
-                </RoleBasedSecurity>
-              </StructuredListCell>
-            </StructuredListRow>
-          </StructuredListBody>
-        {/each}
-      </StructuredList>
-      <!-- <Pagination totalItems={10} pageSizes={[10, 15, 20]} /> -->
-    </section>
-  </PageBody>
-</CourseContainer>
+                </div>
+              </div>
+            {:else}
+              <div class="flex w-2/4 items-start lg:items-center">
+                <TextChip
+                  value={person.email.substring(0, 2).toUpperCase()}
+                  className="bg-primary-200 text-black font-semibold text-xs mr-3"
+                  shape="rounded-full"
+                />
+                <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>
@@ -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}
@@ -0,0 +1,8 @@
+export const load = async ({ params }) => {
+  const { id, personId } = params;
+
+  return {
+    userId: personId,
+    courseId: id
+  };
+};
@@ -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="flex items-center justify-between mb-10">
-    <h1 class="dark:text-white text-2xl md:text-3xl font-bold mb-3">
+<div class="w-full max-w-5xl px-5 py-10 md:mx-auto">
+  <div class="mb-10 flex items-center justify-between">
+    <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">
-      <p class="dark:text-white font-bold mt-7 mb-4">{$t('dashboard.your_schedule')}</p>
+    <div class="container w-full xl:w-auto">
+      <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">
-                  <a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
+                <p class="text-grey flex items-center text-sm dark:text-white">
+                  <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 &&
-                    'opacity-50 pointer-events-none cursor-not-allowed'}"
+                  class="join-call bg-primary-600 rounded-3xl py-3 font-bold text-white shadow-lg {!lessonData.call_url &&
+                    'pointer-events-none cursor-not-allowed opacity-50'}"
                  href={!!lessonData.call_url ? lessonData.call_url : undefined}
                  target="_blank"
                  title={!!lessonData.call_url
@@ -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}
@@ -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
+  };
+};
@@ -286,6 +286,12 @@ importers:
      '@sveltejs/adapter-vercel':
        specifier: ^3.0.3
        version: 3.0.3(@sveltejs/[email protected])
+      '@sveltekit-i18n/base':
+        specifier: ^1.3.7
+        version: 1.3.7([email protected])
+      '@sveltekit-i18n/parser-icu':
+        specifier: ^1.0.8
+        version: 1.0.8
      '@tailwindcss/forms':
        specifier: ^0.5.4
        version: 0.5.4([email protected])
@@ -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([email protected])
+      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/[email protected]:
+    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/[email protected]:
+    resolution: {integrity: sha512-6PoewUMrrcqxSoBXAOJDiW1m+AmkrAj0RiXnOMD59GRaswjXhm3MDhgepXPBgonc09oSirAJTsAggzAGQf6A6g==}
+    dependencies:
+      tslib: 2.8.1
+    dev: false
+
+  /@formatjs/[email protected]:
+    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/[email protected]:
+    resolution: {integrity: sha512-8LlHHE/yL/zVJZHAX3pbKaCjZKmBIO6aJY1mkVh4RMSEu/2WRZ4Ysvv3kKXJ9M8RJLBHdnk1/dUQFdod1Dt7Dw==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.1
+      tslib: 2.8.1
+    dev: false
+
+  /@formatjs/[email protected]:
+    resolution: {integrity: sha512-8zkGu/sv5euxbjfZ/xmklqLyDGQSxsLqg8XOq88JW3cmJtzhCP8EtSJXlaKZnVO4beEaoiT9wj4eIoCQ9smwxA==}
+    dependencies:
+      tslib: 2.8.1
+    dev: false
+
  /@hapi/[email protected]:
    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)([email protected])(vite@5.4.11)
+      '@sveltejs/kit': 2.10.1(@sveltejs/vite-plugin-svelte@5.0.0)([email protected])(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/[email protected]:
+    resolution: {integrity: sha512-/LnvE1EJv+higIxB5cWIV+9neiOe+CfC7VKhpv9mnU35NcZO3yOhEZ8y6F8nHHkMYIABLcqr15yk4hSvmRGWDw==}
+    dependencies:
+      intl-messageformat: 10.7.10
+    dev: false
+
  /@swc/[email protected]:
    resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
    dependencies:
@@ -9354,7 +9408,6 @@ packages:

  /[email protected]:
    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
-    dev: true

  /[email protected]:
    resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
@@ -11780,6 +11833,15 @@ packages:
    resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
    dev: false

+  /[email protected]:
+    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
+
  /[email protected]:
    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

+  /[email protected]:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+    dev: false
+
  /[email protected]([email protected]):
    resolution: {integrity: sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==}
    engines: {node: '>=16.x', pnpm: '>=7.x'}
@@ -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);