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
@@ -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')}