feat: migrate course UI from supabase (#615)

* chore: fix storybook build

* chore: implement theming

* community list not showing properly

* refactor: migrate Chip component to @cio/ui/custom/chip

- Updated imports for the Chip component across multiple files to use the new location in the @cio/ui package.
- Replaced the previous Chip implementation with a new version that utilizes a Badge for better styling and functionality.
- Adjusted related components to ensure consistent usage of the updated Chip component.

* fix: align course sidebar design to match organization design (#611)

* fix: align course sidebar design to match organization design

* feat: add hideSearch prop to AppHeader and update sidebar layout

---------

Co-authored-by: Rotimi Best <[email protected]>

* refactor: replace PrimaryButton with Button component across multiple files

- Updated various components to use the new Button component from @cio/ui/base/button instead of the deprecated PrimaryButton.
- Ensured consistent button usage throughout the application for improved styling and functionality.
- Removed the PrimaryButton component and its associated constants from the codebase.

* refactor: standardize button and input usage across components

- Replaced instances of deprecated components such as TextField, TextArea, and IconButton with their updated counterparts (InputField, TextareaField, and updated IconButton).
- Ensured consistent event handling by changing `onClick` to `onclick` for better alignment with Svelte's event binding conventions.
- Removed unused components and streamlined imports to enhance code maintainability and readability.

* chore: themeing, course card, use $features

* refactor: centralize UI components and update modal implementations

- Refactored various components to centralize UI elements, improving discoverability and maintainability.
- Replaced deprecated modal components with the new Dialog component for consistent modal behavior across the application.
- Removed unused components and streamlined imports to enhance code clarity and reduce complexity.

* feat: add new documentation and refactor org and lms UI components

- Introduced new documentation files for Auth Flow, Breadcrumbs Refactoring, Page and Route Creation, and Route Page Setup to enhance developer onboarding and reference.
- Refactored various UI components, including the Course Sidebar and Lesson Modal, to improve layout and functionality.
- Removed deprecated components and streamlined imports for better maintainability.
- Updated translations across multiple languages to ensure consistency in user experience.

* refactor: update UI components and improve styling consistency

- Refactored various components to enhance styling consistency, including updates to button and text color classes.
- Removed deprecated components and streamlined imports for better maintainability.
- Replaced instances of PageBody with a more flexible Page component structure across multiple routes.
- Updated translations and UI elements to align with the new design system.
- Deleted unused components to reduce code complexity and improve clarity.

* update output.css

---------

Co-authored-by: Abdulmuizz Hamzat <[email protected]>

apps/dashboard/src/lib/features/app/init.svelte.ts

@@ -12,6 +12,7 @@ import { logout } from '$lib/utils/functions/logout';
 import { page } from '$app/state';
 import { resolve } from '$app/paths';
 import { setSentryUser } from '$lib/utils/services/sentry';
+import { setTheme } from '$lib/utils/functions/theme';
 import shouldRedirectOnAuth from '$lib/utils/functions/routes/shouldRedirectOnAuth';
 
 type AppSetupParams = {
@@ -91,13 +92,24 @@ class AppInitApi extends BaseApi {
     const lastOrg = this.data.organizations.find((org) => org.siteName === lastOrgSiteName);
 
     currentOrg.set(lastOrg || this.data.organizations[0]);
+
+    const theme = get(currentOrg)?.theme;
+
+    if (theme) {
+      setTheme(theme);
+    }
   }
 
   routeUserToNextPage({ isOrgSite }: AppSetupParams) {
+    console.log('routeUserToNextPage', window.location.pathname);
     if (!this.data?.success) {
       return;
     }
 
+    if (isOrgSite && window.location.pathname === '/') {
+      return;
+    }
+
     const userHasOrganizations = this.data.organizations.length > 0;
     const shouldRedirectToOnboarding = !isOrgSite && !userHasOrganizations;
     if (shouldRedirectToOnboarding) {

apps/dashboard/src/lib/features/app/layout-setup.ts

@@ -1,6 +1,6 @@
-import type { AccountOrg } from '$lib/features/app/types';
+import type { AccountOrg } from '$features/app/types';
 import type { Cookies } from '@sveltejs/kit';
-import { OrgApiServer } from '$lib/features/org/api/org.server';
+import { OrgApiServer } from '$features/org/api/org.server';
 import { PUBLIC_IS_SELFHOSTED } from '$env/static/public';
 import { blockedSubdomain } from '$lib/utils/constants/app';
 import { env } from '$env/dynamic/private';

apps/dashboard/src/lib/features/audience/pages/audience.svelte

@@ -5,10 +5,10 @@
   import { Search } from '@cio/ui/custom/search';
   import * as Pagination from '@cio/ui/base/pagination';
   import UsersIcon from '@lucide/svelte/icons/users';
-  import { orgApi } from '$lib/features/org/api/org.svelte';
+  import { orgApi } from '$features/org/api/org.svelte';
   import { t } from '$lib/utils/functions/translations';
   import { Empty } from '@cio/ui/custom/empty';
-  import { UpgradeBanner } from '$lib/features/ui';
+  import { UpgradeBanner } from '$features/ui';
   import { currentOrg, currentOrgMaxAudience } from '$lib/utils/store/org';
   import * as Avatar from '@cio/ui/base/avatar';
   import * as Page from '@cio/ui/base/page';
@@ -80,11 +80,11 @@
                 <Table.Cell>
                   <a
                     href={`${pageStore.url.href}/${row.id}/${$currentOrg.id}`}
-                    class="text-primary-700 flex items-center gap-2 hover:underline"
+                    class="ui:text-primary flex items-center gap-2 hover:underline"
                   >
                     <Avatar.Root class="h-5 w-5">
                       <Avatar.Image
-                        src={row.avatar_url ? row.avatar_url : '/logo-192.png'}
+                        src={row.avatarUrl ? row.avatarUrl : '/logo-192.png'}
                         alt={row.name ? row.name : 'User'}
                       />
                       <Avatar.Fallback>{shortenName(row.name) || 'U'}</Avatar.Fallback>
@@ -93,7 +93,7 @@
                   </a>
                 </Table.Cell>
                 <Table.Cell>{row.email}</Table.Cell>
-                <Table.Cell>{row.date_joined}</Table.Cell>
+                <Table.Cell>{row.createdAt}</Table.Cell>
               </Table.Row>
             {/each}
           </Table.Body>

apps/dashboard/src/lib/features/audience/pages/user-analytics.svelte

@@ -7,12 +7,12 @@
   import BookOpenIcon from '@lucide/svelte/icons/book-open';
   import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
   import ChartLineIcon from '@lucide/svelte/icons/chart-line';
-  import Progress from '$lib/components/Progress/index.svelte';
-  import { ActivityCard, HeroProfileCard, LoadingPage } from '$lib/components/Analytics';
+  import { Progress } from '@cio/ui/base/progress';
+  import { ActivityCard, HeroProfileCard, LoadingPage } from '$features/ui';
 
   import { t } from '$lib/utils/functions/translations';
   import { currentOrgPath } from '$lib/utils/store/org';
-  import { snackbar } from '$lib/components/Snackbar/store';
+  import { snackbar } from '$features/ui/snackbar/store';
   import { getAccessToken } from '$lib/utils/functions/supabase';
   import type { UserAnalytics } from '$lib/utils/types/analytics';
 
@@ -203,4 +203,3 @@
 {:else}
   <LoadingPage />
 {/if}
-

apps/dashboard/src/lib/features/auth/api/forgot.svelte.ts

@@ -2,7 +2,7 @@ import { BaseApiWithErrors } from '$lib/utils/services/api';
 import type { TForgotPasswordForm } from '../utils/types';
 import { authClient } from '$lib/utils/services/auth/client';
 import { forgotPasswordValidation } from '../utils/validation';
-import { snackbar } from '$lib/components/Snackbar/store';
+import { snackbar } from '$features/ui/snackbar/store';
 
 export class ForgotApi extends BaseApiWithErrors {
   async submit(fields: TForgotPasswordForm) {

apps/dashboard/src/lib/features/auth/api/profile.svelte.ts

@@ -7,7 +7,7 @@ import { authClient } from '$lib/utils/services/auth/client';
 import { handleLocaleChange } from '$lib/utils/functions/translations';
 import { mapZodErrorsToTranslations } from '$lib/utils/validation';
 import { profile as profileStore } from '$lib/utils/store/user';
-import { snackbar } from '$lib/components/Snackbar/store';
+import { snackbar } from '$features/ui/snackbar/store';
 import { t } from '$lib/utils/functions/translations';
 import { uploadImage } from '$lib/utils/services/upload';
 

apps/dashboard/src/lib/features/auth/api/reset.svelte.ts

@@ -4,7 +4,7 @@ import { authClient } from '$lib/utils/services/auth/client';
 import { goto } from '$app/navigation';
 import { resetPasswordValidation } from '../utils/validation';
 import { resolve } from '$app/paths';
-import { snackbar } from '$lib/components/Snackbar/store';
+import { snackbar } from '$features/ui/snackbar/store';
 
 export class ResetApi extends BaseApiWithErrors {
   async submit(fields: TResetPasswordForm) {

apps/dashboard/src/lib/features/community/components/ask-community-button.svelte

@@ -6,8 +6,10 @@
   import { isMobileStore } from '@cio/ui/hooks/is-mobile.svelte';
   import PlusIcon from '@lucide/svelte/icons/plus';
 
+  let { isLMS = false }: { isLMS?: boolean } = $props();
+
   function askCommunity() {
-    goto(`${$currentOrgPath}/community/ask`);
+    goto(`${isLMS ? '/lms/community/ask' : `${$currentOrgPath}/community/ask`}`);
   }
 </script>
 

apps/dashboard/src/lib/features/community/components/delete-modal.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import Modal from '$lib/components/Modal/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { Button } from '@cio/ui/base/button';
   import { t } from '$lib/utils/functions/translations';
 
   interface Props {
@@ -21,34 +20,37 @@
   }: Props = $props();
 </script>
 
-<Modal
-  onClose={() => (open = false)}
+<Dialog.Root
   bind:open
-  width="w-96"
-  modalHeading="{$t('community.delete.title')} {isQuestion
-    ? $t('community.delete.question')
-    : $t('community.delete.comment')}"
 >
-  <div>
+  <Dialog.Content class="w-96">
+    <Dialog.Header>
+      <Dialog.Title>
+        {$t('community.delete.title')} {isQuestion
+          ? $t('community.delete.question')
+          : $t('community.delete.comment')}
+      </Dialog.Title>
+    </Dialog.Header>
+    <div>
     <p class="mt-0 text-base dark:text-white">
       {$t('community.delete.sure')}
       {isQuestion ? $t('community.delete.question') : $t('community.delete.comment')}?
     </p>
 
     <div class="mt-5 flex items-center justify-between">
-      <PrimaryButton
-        className="px-6 py-3"
-        variant={VARIANTS.OUTLINED}
-        label={$t('community.delete.no')}
-        onClick={onCancel}
-      />
-      <PrimaryButton
-        className="px-6 py-3"
-        variant={VARIANTS.CONTAINED}
-        label={$t('community.delete.yes')}
-        onClick={onDelete}
-        isLoading={isDeleting}
-      />
+      <Button
+        variant="outline"
+        onclick={onCancel}
+      >
+        {$t('community.delete.no')}
+      </Button>
+      <Button
+        onclick={onDelete}
+        loading={isDeleting}
+      >
+        {$t('community.delete.yes')}
+      </Button>
     </div>
   </div>
-</Modal>
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/community/pages/community.svelte

@@ -7,7 +7,7 @@
 
   import { profile } from '$lib/utils/store/user';
   import { t } from '$lib/utils/functions/translations';
-  import { courses } from '$lib/features/course/utils/store';
+  import { courses } from '$features/course/utils/store';
   import { calDateDiff } from '$lib/utils/functions/date';
   import { supabase } from '$lib/utils/functions/supabase';
   import { fetchCourses } from '$lib/utils/services/courses';
@@ -15,10 +15,10 @@
   import MessageSquareMoreIcon from '@lucide/svelte/icons/message-square-more';
 
   import { CommunityListLoader } from '../components';
-  import Vote from '$lib/components/Vote/index.svelte';
-  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import { Vote } from '$features/ui';
   import { Empty } from '@cio/ui/custom/empty';
   import * as Page from '@cio/ui/base/page';
+  import * as Item from '@cio/ui/base/item';
 
   import { AskCommunityButton } from '../components';
 
@@ -133,33 +133,32 @@
   <CommunityListLoader />
 {:else}
   {#each filteredDiscussions as discussion}
-    <div
-      class="border-c m-auto my-4 flex flex-wrap items-center justify-center rounded bg-gray-100 lg:justify-start dark:bg-neutral-800"
-    >
-      <div class="border-bottom-c flex w-full p-3">
-        <Vote value={discussion.votes} />
-        <div class="flex flex-col gap-y-0.5 text-sm">
-          <h4 class="mt-0">
-            <a class="text-black dark:text-white" href="{isLMS ? '/lms' : $currentOrgPath}/community/{discussion.slug}">
+    <Item.Root variant="outline">
+      {#snippet child({ props })}
+        <a href="{isLMS ? '/lms' : $currentOrgPath}/community/{discussion.slug}" {...props}>
+          <Vote value={discussion.votes} />
+          <Item.Content class="gap-y-0.5">
+            <Item.Title class="mt-0">
               {discussion.title}
+            </Item.Title>
+            <Item.Description>
+              {discussion.author} asked {discussion.createdAt}
+            </Item.Description>
+            <a class="m-0" href="/courses/{discussion.courseId}" onclick={(e) => e.stopPropagation()}>
+              <span class="text-muted-foreground p-0 text-xs">
+                #{discussion.courseTitle}
+              </span>
             </a>
-          </h4>
-          <span class="text-gray-600 dark:text-white">
-            {discussion.author} asked {discussion.createdAt}
-          </span>
-          <a class="m-0" href="/courses/{discussion.courseId}">
-            <span class="text-primary-200 text-primary-700 p-0 text-xs dark:text-black">
-              #{discussion.courseTitle}
-            </span>
-          </a>
-        </div>
-        <div class="flex-grow"></div>
-        <div class="flex items-center">
-          <MessageCirclePlusIcon size={16} />
-          <span class="ml-1">{discussion.comments}</span>
-        </div>
-      </div>
-    </div>
+          </Item.Content>
+          <Item.Actions>
+            <div class="flex items-center">
+              <MessageCirclePlusIcon size={16} />
+              <span class="ml-1">{discussion.comments}</span>
+            </div>
+          </Item.Actions>
+        </a>
+      {/snippet}
+    </Item.Root>
   {:else}
     <Empty
       title={$t('community.no_question')}
@@ -171,13 +170,3 @@
     </Empty>
   {/each}
 {/if}
-
-<style>
-  h4 {
-    font-size: 16px;
-    font-weight: 900;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    margin: 0;
-  }
-</style>

apps/dashboard/src/lib/features/community/utils/store.ts

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+
+export interface CurrentCommunityQuestion {
+  title: string | null;
+}
+
+export const currentCommunityQuestion = writable<CurrentCommunityQuestion>({
+  title: null
+});
+

apps/dashboard/src/lib/features/course/api/course-clone.svelte.ts

@@ -9,7 +9,7 @@ import { get } from 'svelte/store';
 import { goto } from '$app/navigation';
 import { mapZodErrorsToTranslations } from '$lib/utils/validation';
 import { resolve } from '$app/paths';
-import { snackbar } from '$lib/components/Snackbar/store';
+import { snackbar } from '$features/ui/snackbar/store';
 import { t } from '$lib/utils/functions/translations';
 
 /**

apps/dashboard/src/lib/features/course/components/card-dropdown.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
+  import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import { copyCourseModal, deleteCourseModal } from '$features/course/utils/store';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import { t } from '$lib/utils/functions/translations';
+
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+
+  interface Props {
+    id: string;
+    title: string;
+    description: string;
+  }
+
+  let { id, title, description }: Props = $props();
+
+  function redirect(url: string) {
+    goto(resolve(url, {}));
+  }
+
+  function handleShareCourse() {
+    redirect(`/courses/${id}/settings#share`);
+  }
+
+  function handleInvite() {
+    redirect(`/courses/${id}/people?add=true`);
+  }
+
+  function handleDeleteCourse() {
+    $deleteCourseModal.open = true;
+    $deleteCourseModal.id = id;
+    $deleteCourseModal.title = title;
+  }
+
+  function handleCloneCourse() {
+    $copyCourseModal.open = true;
+    $copyCourseModal.id = id;
+    $copyCourseModal.title = title;
+    $copyCourseModal.description = description;
+  }
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger
+    class="ui:data-[state=open]:opacity-100 absolute right-6 top-6 z-40 flex items-center justify-center opacity-0 transition-all delay-150 duration-200 ease-in-out group-hover:opacity-100"
+    onclick={(e) => e.stopPropagation()}
+  >
+    <IconButton variant="outline">
+      <EllipsisVerticalIcon size={16} />
+    </IconButton>
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="end">
+    <DropdownMenu.Item onclick={handleCloneCourse}>
+      {$t('courses.course_card.context_menu.clone')}
+    </DropdownMenu.Item>
+    <DropdownMenu.Item onclick={handleShareCourse}>
+      {$t('courses.course_card.context_menu.share')}
+    </DropdownMenu.Item>
+    <DropdownMenu.Item onclick={handleInvite}>
+      {$t('courses.course_card.context_menu.invite')}
+    </DropdownMenu.Item>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item class="text-red-600" onclick={handleDeleteCourse}>
+      {$t('courses.course_card.context_menu.delete')}
+    </DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

apps/dashboard/src/lib/features/course/components/card-list.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import * as Item from '@cio/ui/base/item';
+  import Card, { type Props as CardProps } from './card.svelte';
+
+  type Props = Omit<CardProps, 'course'> & {
+    courses: CardProps['course'][];
+  };
+
+  let { courses, ...rest }: Props = $props();
+</script>
+
+<Item.Group class="grid! w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+  {#each courses as course (course.id)}
+    <Card {course} {...rest} />
+  {/each}
+</Item.Group>

apps/dashboard/src/lib/features/course/components/card.svelte

@@ -1,45 +1,37 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
+  import type { Component } from 'svelte';
+  import get from 'lodash/get';
+  import { resolve } from '$app/paths';
   import { Badge } from '@cio/ui/base/badge';
   import UserIcon from '@lucide/svelte/icons/user';
-  import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
   import CircleDotIcon from '@lucide/svelte/icons/circle-dot';
   import TrendingUpIcon from '@lucide/svelte/icons/trending-up';
-  import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+  import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
 
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import ImageRenderer from '$lib/components/Org/ImageRenderer.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { Button } from '@cio/ui/base/button';
+  import { Separator } from '@cio/ui/base/separator';
+  import * as Item from '@cio/ui/base/item';
+  import { Progress } from '@cio/ui/base/progress';
 
-  import { COURSE_TYPE } from '$lib/utils/types';
+  import { Image } from '$features/ui';
+  import { COURSE_TYPE, type Course } from '$lib/utils/types';
   import { t } from '$lib/utils/functions/translations';
   import { calcCourseDiscount } from '$lib/utils/functions/course';
   import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
-  import { copyCourseModal, deleteCourseModal } from '$lib/features/course/utils/store';
+  import { calcProgressRate } from '$features/course/utils/functions';
+  import CardDropdown from './card-dropdown.svelte';
 
-  interface Props {
-    bannerImage: string | undefined;
-    id?: string;
-    slug?: string;
-    title?: string;
-    description?: string;
-    isPublished?: boolean;
-    totalLessons?: number;
-    totalStudents?: number;
-    currency?: string;
+  export interface Props {
+    course: Course;
     isOnLandingPage?: boolean;
     isLMS?: boolean;
     isExplore?: boolean;
-    progressRate?: number;
-    type: COURSE_TYPE;
-    pricingData?: {
-      cost: number;
-      currency?: string;
-      showDiscount?: boolean;
-      discount?: number;
-    };
   }
 
+  let { course, isOnLandingPage, isLMS, isExplore }: Props = $props();
+
+  $inspect('isLMS', isLMS);
+
   let {
     bannerImage,
     id = '',
@@ -50,45 +42,40 @@
     totalLessons = 0,
     totalStudents = 0,
     currency = 'USD',
-    isOnLandingPage = false,
-    isLMS = false,
-    isExplore = false,
     progressRate = 45,
     type,
     pricingData = {
-      cost: 0
+      cost: 0,
+      discount: 0,
+      showDiscount: false
     }
-  }: Props = $props();
+  } = $derived({
+    id: course.id,
+    slug: course.slug,
+    bannerImage: course.logo || '/images/classroomio-course-img-template.jpg',
+    title: course.title,
+    type: course.type,
+    description: course.description,
+    isPublished: course.is_published,
+    pricingData: {
+      cost: course.cost,
+      discount: course.metadata?.discount || 0,
+      showDiscount: course.metadata?.showDiscount || false
+    },
+    currency: course.currency,
+    totalLessons: get(course, 'lessons[0].count', 0),
+    progressRate: calcProgressRate(course.progress_rate, course.total_lessons),
+    totalStudents: course.total_students
+  });
 
   let formatter = $derived(getCurrencyFormatter(currency));
 
-  function handleCloneCourse() {
-    $copyCourseModal.open = true;
-    $copyCourseModal.id = id;
-    $copyCourseModal.title = title;
-    $copyCourseModal.description = description;
-  }
-
-  function handleShareCourse() {
-    goto(`/courses/${id}/settings#share`);
-  }
-
-  function handleInvite() {
-    goto(`/courses/${id}/people?add=true`);
-  }
-
-  function handleDeleteCourse() {
-    $deleteCourseModal.open = true;
-    $deleteCourseModal.id = id;
-    $deleteCourseModal.title = title;
-  }
-
   const COURSE_TAG: Record<
     string,
     {
       style: string;
       label: string;
-      icon: any;
+      icon: Component;
       iconStyle?: string;
     }
   > = {
@@ -102,7 +89,7 @@
       style: '',
       label: $t('course.navItem.settings.self_paced'),
       icon: UserIcon,
-      iconStyle: 'custom text-primary-700'
+      iconStyle: 'custom ui:text-primary'
     },
     SPECIALIZATION: {
       style: '',
@@ -118,146 +105,91 @@
   );
 </script>
 
-<div
-  role="button"
-  tabindex="0"
-  onclick={() => {
-    goto(courseUrl);
-  }}
-  onkeydown={(e) => {
-    if (e.key === 'Enter') {
-      goto(courseUrl);
-    }
-  }}
-  class="border-gray group relative w-full max-w-[320px] rounded border text-black dark:border-neutral-600"
->
-  <div class="p-4">
-    <div class="relative mb-5">
+<Item.Root variant="outline" class="p-3! group relative max-w-[320px]">
+  {#snippet child({ props })}
+    <a href={resolve(courseUrl, {})} {...props}>
       {#if !isLMS && !isOnLandingPage}
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger
-            class="absolute right-2 top-2 z-40 flex items-center justify-center rounded-full bg-gray-200 p-2 opacity-0 transition-all delay-150 duration-200 ease-in-out group-hover:opacity-100 dark:bg-neutral-800"
-            onclick={(e) => e.stopPropagation()}
-          >
-            <EllipsisVerticalIcon size={16} />
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content align="end">
-            <DropdownMenu.Item onclick={handleCloneCourse}>
-              {$t('courses.course_card.context_menu.clone')}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onclick={handleShareCourse}>
-              {$t('courses.course_card.context_menu.share')}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onclick={handleInvite}>
-              {$t('courses.course_card.context_menu.invite')}
-            </DropdownMenu.Item>
-            <DropdownMenu.Separator />
-            <DropdownMenu.Item class="text-red-600" onclick={handleDeleteCourse}>
-              {$t('courses.course_card.context_menu.delete')}
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
+        <CardDropdown {id} {title} {description} />
       {/if}
 
-      <ImageRenderer
-        src={bannerImage}
-        alt="Banner Image"
-        className="relative h-[200px] w-full rounded dark:border dark:border-neutral-600"
-      />
+      <Item.Header>
+        <Item.Media variant="image" class="h-50! w-full! relative">
+          <Image src={bannerImage} alt="Course banner image" className="w-full h-full rounded-sm object-cover" />
 
-      {#if type}
-        {@const tag = COURSE_TAG[type]}
-        <span
-          class="bg-primary-50 absolute bottom-2 left-2 z-10 flex items-center gap-1 rounded-sm p-1 font-mono text-xs capitalize"
-        >
-          <tag.icon class={tag.iconStyle} />
-          {tag.label}
-        </span>
-      {/if}
-    </div>
+          {#if type}
+            {@const tag = COURSE_TAG[type]}
+            <Badge class="rounded-md! absolute bottom-2 left-2 z-10 flex items-center capitalize" variant="secondary">
+              <tag.icon class={tag.iconStyle} />
+              {tag.label}
+            </Badge>
+          {/if}
+        </Item.Media>
+      </Item.Header>
 
-    <h3 class="title text-xl dark:text-white">{title}</h3>
-    <p class="description mt-2 text-sm text-gray-500 dark:text-gray-300">
-      {description}
-    </p>
-  </div>
+      <Item.Content>
+        <Item.Title class="text-base! line-clamp-1 min-h-[44px]">
+          {title}
+        </Item.Title>
 
-  <div
-    class="border-gray flex justify-between border border-b-0 border-l-0 border-r-0 px-4 py-2 dark:border-neutral-600 {isLMS &&
-      'items-center'}"
-  >
-    <div>
-      <p class="text-xs {!isLMS && 'pl-2'} dark:text-white">
-        {totalLessons}
-        {$t('courses.course_card.lessons_number')}
-      </p>
-      <p class="py-2 text-xs">
-        {#if isOnLandingPage}
-          <span class="px-2">
-            {#if !cost}
-              {$t('course.navItem.landing_page.pricing_section.free')}
-            {:else if pricingData.showDiscount}
-              {formatter.format(cost)}
-              <span class="line-through">
-                {formatter?.format(pricingData?.cost)}
-              </span>
-            {:else}
-              {formatter.format(cost)}
-            {/if}
-          </span>
-        {:else if isLMS}
-          {#if !isExplore}
-            <div class="flex items-center gap-2">
-              <div class=" relative h-1 w-[50px] bg-[#EAEAEA]">
-                <div style="width:{progressRate}%" class="bg-primary-700 absolute left-0 top-0 h-full"></div>
-              </div>
-              <p class="text-xs text-[#656565] dark:text-white">{progressRate}%</p>
+        <Item.Description class="min-h-[63px]">{description}</Item.Description>
+
+        <Separator class="my-3" />
+
+        <div class="flex justify-between {isLMS && 'items-center'} w-full">
+          <div class="w-[50%]">
+            <p class="text-xs {!isLMS && 'pl-2'} dark:text-white">
+              {totalLessons}
+              {$t('courses.course_card.lessons_number')}
+            </p>
+            <div class="py-2 text-xs">
+              {#if isOnLandingPage}
+                <span class="px-2">
+                  {#if !cost}
+                    {$t('course.navItem.landing_page.pricing_section.free')}
+                  {:else if pricingData.showDiscount}
+                    {formatter.format(cost)}
+                    <span class="line-through">
+                      {formatter?.format(pricingData?.cost)}
+                    </span>
+                  {:else}
+                    {formatter.format(cost)}
+                  {/if}
+                </span>
+              {:else if isLMS}
+                {#if !isExplore}
+                  <div class="flex w-3/4 items-center gap-2">
+                    <Progress value={50} />
+                    <p class="ui:text-muted-foreground text-xs">{progressRate}%</p>
+                  </div>
+                {/if}
+              {:else}
+                <Badge variant={isPublished ? 'default' : 'outline'}>
+                  {#if isPublished}
+                    {$t('courses.course_card.published')}
+                  {:else}
+                    {$t('courses.course_card.unpublished')}
+                  {/if}
+                </Badge>
+              {/if}
+            </div>
+          </div>
+
+          {#if isLMS}
+            <Button variant="outline">
+              {isExplore ? $t('courses.course_card.learn_more') : $t('courses.course_card.continue_course')}
+
+              <ArrowRightIcon class="custom" />
+            </Button>
+          {:else if !isOnLandingPage}
+            <div class="flex flex-col justify-between">
+              <p class="pl-2 text-xs dark:text-white">
+                {totalStudents}
+                {$t('courses.course_card.students')}
+              </p>
             </div>
           {/if}
-        {:else}
-          <Badge variant={isPublished ? 'default' : 'secondary'}>
-            {#if isPublished}
-              {$t('courses.course_card.published')}
-            {:else}
-              {$t('courses.course_card.unpublished')}
-            {/if}
-          </Badge>
-        {/if}
-      </p>
-    </div>
-
-    {#if isLMS}
-      <PrimaryButton
-        label={isExplore ? $t('courses.course_card.learn_more') : $t('courses.course_card.continue_course')}
-        variant={VARIANTS.OUTLINED}
-        className="rounded-none"
-      />
-    {:else if !isOnLandingPage}
-      <div class="flex flex-col justify-between">
-        <p class="pl-2 text-xs dark:text-white">
-          {totalStudents}
-          {$t('courses.course_card.students')}
-        </p>
-        <div></div>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .title,
-  .description {
-    height: 42px;
-    line-height: 20px;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -moz-box-orient: vertical;
-    -ms-box-orient: vertical;
-    box-orient: vertical;
-    -webkit-line-clamp: 2;
-    -moz-line-clamp: 2;
-    -ms-line-clamp: 2;
-    line-clamp: 2;
-    overflow: hidden;
-  }
-</style>
+        </div>
+      </Item.Content>
+    </a>
+  {/snippet}
+</Item.Root>

apps/dashboard/src/lib/features/course/components/copy-course-modal.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { preventDefault } from '$lib/utils/functions/svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import Modal from '$lib/components/Modal/index.svelte';
-  import TextField from '$lib/components/Form/TextField.svelte';
-  import TextArea from '$lib/components/Form/TextArea.svelte';
-  import { copyCourseModal } from '$lib/features/course/utils/store';
-  import { courseCloneApi } from '$lib/features/course/api';
+  import { Button } from '@cio/ui/base/button';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { InputField } from '@cio/ui/custom/input-field';
+  import { TextareaField } from '@cio/ui/custom/textarea-field';
+  import { copyCourseModal } from '$features/course/utils/store';
+  import { courseCloneApi } from '$features/course/api';
   import { t } from '$lib/utils/functions/translations';
 
   async function createCourse() {
@@ -20,14 +20,15 @@
   });
 </script>
 
-<Modal
-  onClose={() => ($copyCourseModal.open = false)}
+<Dialog.Root
   bind:open={$copyCourseModal.open}
-  width="w-96"
-  modalHeading={$t('courses.copy_course.title')}
 >
-  <form onsubmit={preventDefault(createCourse)}>
-    <TextField
+  <Dialog.Content class="w-96">
+    <Dialog.Header>
+      <Dialog.Title>{$t('courses.copy_course.title')}</Dialog.Title>
+    </Dialog.Header>
+    <form onsubmit={preventDefault(createCourse)}>
+    <InputField
       label={$t('courses.copy_course.course_name_label')}
       bind:value={$copyCourseModal.title}
       autoFocus={true}
@@ -38,7 +39,7 @@
       errorMessage={courseCloneApi.errors.title}
     />
 
-    <TextArea
+    <TextareaField
       label={$t('courses.copy_course.course_description_label')}
       bind:value={$copyCourseModal.description}
       placeholder={$t('courses.copy_course.course_description_placeholder')}
@@ -52,12 +53,10 @@
     {/if}
 
     <div class="mt-5 flex flex-row-reverse items-center">
-      <PrimaryButton
-        className="px-6 py-3"
-        label={$t('courses.copy_course.create_button')}
-        type="submit"
-        isLoading={$copyCourseModal.isSaving}
-      />
+      <Button type="submit" loading={$copyCourseModal.isSaving}>
+        {$t('courses.copy_course.create_button')}
+      </Button>
     </div>
   </form>
-</Modal>
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/course/components/course-header.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { Separator } from '@cio/ui/base/separator';
+  import * as Sidebar from '@cio/ui/base/sidebar';
+  import BellIcon from '@lucide/svelte/icons/bell';
+  import { Button } from '@cio/ui/base/button';
+  import * as Popover from '@cio/ui/base/popover';
+  import Search from '$features/ui/search.svelte';
+  import RefreshCcwIcon from '@lucide/svelte/icons/refresh-ccw';
+  import * as Empty from '@cio/ui/base/empty';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { setupProgressApi } from '$features/setup/api/setup-progress.svelte';
+  import { course } from '$lib/components/Course/store';
+
+  const siteName = $derived($currentOrg.siteName);
+
+  $effect(() => {
+    if (!siteName) return;
+
+    setupProgressApi.fetchSetupProgress(siteName);
+  });
+</script>
+
+<header
+  class="group-has-data-[collapsible=icon]/sidebar-wrapper:h-8 border-border ui:bg-background bg-background sticky top-0 z-50 flex h-12 w-full shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear"
+>
+  <div class="flex w-full items-center gap-2 px-4">
+    <Sidebar.Trigger />
+
+    <div class="h-4 w-2">
+      <Separator orientation="vertical" />
+    </div>
+
+    <p class="max-w-2xs truncate text-sm font-medium">
+      {$course.title}
+    </p>
+
+    <span class="grow"></span>
+
+    <Search />
+
+    <Popover.Root>
+      <Popover.Trigger>
+        <Button variant="outline" size="icon">
+          <BellIcon class="custom rounded-full" />
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content>
+        <Empty.Root class="ui:from-muted/50 ui:to-background ui:h-full ui:bg-gradient-to-b ui:from-30%">
+          <Empty.Header>
+            <Empty.Media variant="icon">
+              <BellIcon />
+            </Empty.Media>
+            <Empty.Title>No Notifications</Empty.Title>
+            <Empty.Description>You're all caught up. New notifications will appear here.</Empty.Description>
+          </Empty.Header>
+          <Empty.Content>
+            <Button variant="outline" size="sm">
+              <RefreshCcwIcon />
+              Refresh
+            </Button>
+          </Empty.Content>
+        </Empty.Root>
+      </Popover.Content>
+    </Popover.Root>
+  </div>
+</header>

apps/dashboard/src/lib/features/course/components/index.ts

@@ -1,6 +1,8 @@
 export { default as CourseCard } from './card.svelte';
+export { default as CourseCardList } from './card-list.svelte';
 export { default as CourseCardLoader } from './card-loader.svelte';
 export { default as CopyCourseModal } from './copy-course-modal.svelte';
+export { default as CourseHeader } from './course-header.svelte';
 export { default as CreateCourseButton } from './create-course-button.svelte';
 export { default as CourseList } from './list.svelte';
 export { default as CourseListLoader } from './list-loader.svelte';

apps/dashboard/src/lib/features/course/components/list.svelte

@@ -63,7 +63,7 @@
     <Table.Cell>{totalLessons}</Table.Cell>
     <Table.Cell>{totalStudents}</Table.Cell>
     <Table.Cell>
-      <Badge variant={isPublished ? 'default' : 'secondary'}>
+      <Badge variant={isPublished ? 'default' : 'outline'}>
         {#if isPublished}
           {$t('courses.course_card.published')}
         {:else}

apps/dashboard/src/lib/features/course/components/new-course-modal.svelte

@@ -3,15 +3,15 @@
 
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { ComingSoon } from '$lib/features/ui';
   import { validateForm } from '../utils/functions';
   import { courses, createCourseModal } from '../utils/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 { TextareaField } from '@cio/ui/custom/textarea-field';
+  import { InputField } from '@cio/ui/custom/input-field';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { Button } from '@cio/ui/base/button';
   import { ROLE } from '@cio/utils/constants';
+  import * as Field from '@cio/ui/base/field';
+  import * as RadioGroup from '@cio/ui/base/radio-group';
   import { supabase } from '$lib/utils/functions/supabase';
   import { t } from '$lib/utils/functions/translations';
   import { addDefaultNewsFeed, addGroupMember } from '$lib/utils/services/courses';
@@ -19,7 +19,6 @@
   import { currentOrg } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import { COURSE_TYPE, COURSE_VERSION } from '$lib/utils/types';
-  import CircleCheckIcon from '$lib/components/Icons/CircleCheckIcon.svelte';
 
   let isLoading = $state(false);
   let errors = $state({
@@ -30,12 +29,14 @@
 
   const options = [
     {
+      id: 'live-class',
       title: $t('new_course_modal.live_class_label'),
       subtitle: $t('new_course_modal.live_class_subtitle'),
       type: COURSE_TYPE.LIVE_CLASS,
       isDisabled: false
     },
     {
+      id: 'self-paced',
       title: $t('new_course_modal.self_paced_label'),
       subtitle: $t('new_course_modal.self_paced_subtitle'),
       type: COURSE_TYPE.SELF_PACED,
@@ -131,6 +132,8 @@
     isLoading = false;
   }
 
+  $inspect(type);
+
   let open = $derived(new URLSearchParams(page.url.search).get('create') === 'true');
 </script>
 
@@ -138,97 +141,80 @@
   <title>Create a new course</title>
 </svelte:head>
 
-<Modal
-  onClose={() => onClose(page.url.pathname)}
+{#snippet course_type_selector()}
+  <Field.Description>{$t('courses.new_course_modal.type_selector_title')}</Field.Description>
+
+  <RadioGroup.Root bind:value={type} class="grid-cols-2">
+    {#each options as option (option.id)}
+      <Field.Label for={option.id}>
+        <Field.Field orientation="horizontal">
+          <Field.Content>
+            <Field.Title>{option.title}</Field.Title>
+            <Field.Description>{option.subtitle}</Field.Description>
+          </Field.Content>
+
+          <RadioGroup.Item value={option.type} id={option.id} aria-label={option.title} />
+        </Field.Field>
+      </Field.Label>
+    {/each}
+  </RadioGroup.Root>
+{/snippet}
+
+<Dialog.Root
   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')}
+  onOpenChange={(isOpen) => {
+    if (!isOpen) onClose(page.url.pathname);
+  }}
 >
-  {#if step === 0}
-    <div>
-      <h2 class="my-5 text-xl font-medium">
-        {$t('courses.new_course_modal.type_selector_title')}
-      </h2>
+  <Dialog.Content class="mx-auto w-4/5 max-w-2xl md:w-2/5 md:min-w-[600px]">
+    <Dialog.Header>
+      <Dialog.Title>{$t('courses.new_course_modal.heading')}</Dialog.Title>
+    </Dialog.Header>
+    {#if step === 0}
+      <div class="my-4 space-y-4">
+        {@render course_type_selector()}
 
-      <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 rounded-md border-2 p-5 md:h-60 md:w-[261px] dark:bg-neutral-700 {option.type === type
-              ? 'border-primary-400'
-              : `border-gray-200 dark:border-neutral-600 ${
-                  !option.isDisabled && 'hover:scale-95'
-                }`} flex flex-col {option.isDisabled && 'cursor-not-allowed opacity-60'} transition-all ease-in-out"
-            type="button"
-            onclick={!option.isDisabled ? () => (type = option.type) : undefined}
-          >
-            <div class="flex h-[70%] w-full flex-row-reverse">
-              <CircleCheckIcon size={16} filled={option.type === type} />
-            </div>
-
-            <div>
-              <p class="flex items-center text-start">
-                <span class="mr-2 text-sm">{option.title}</span>
-                {#if option.isDisabled}
-                  <ComingSoon />
-                {/if}
-              </p>
-              <p class="text-start text-xs font-light">{option.subtitle}</p>
-            </div>
-          </button>
-        {/each}
+        <Dialog.Footer>
+          <Button onclick={() => (step = 1)} disabled={!type}>
+            {$t('courses.new_course_modal.next')}
+          </Button>
+        </Dialog.Footer>
       </div>
+    {:else}
+      <form onsubmit={preventDefault(createCourse)}>
+        <div class="mb-4 flex items-end space-x-2">
+          <InputField
+            label={$t('courses.new_course_modal.course_name')}
+            bind:value={$createCourseModal.title}
+            placeholder={$t('courses.new_course_modal.course_name_placeholder')}
+            className="w-full"
+            isRequired={true}
+            errorMessage={errors.title}
+            autoComplete={false}
+          />
+        </div>
 
-      <div class="mt-8 flex flex-row-reverse items-center">
-        <PrimaryButton
-          className="px-6 py-3"
-          label={$t('courses.new_course_modal.next')}
-          onClick={() => (step = 1)}
-          isDisabled={!type}
-        />
-      </div>
-    </div>
-  {:else}
-    <form onsubmit={preventDefault(createCourse)}>
-      <div class="mb-4 flex items-end space-x-2">
-        <TextField
-          label={$t('courses.new_course_modal.course_name')}
-          bind:value={$createCourseModal.title}
-          placeholder={$t('courses.new_course_modal.course_name_placeholder')}
-          className="w-full "
+        <TextareaField
+          label={$t('courses.new_course_modal.short_description')}
+          bind:value={$createCourseModal.description}
+          rows={4}
+          placeholder={$t('courses.new_course_modal.short_description_placeholder')}
+          className="mb-4"
           isRequired={true}
-          errorMessage={errors.title}
-          autoComplete={false}
+          errorMessage={errors.description}
+          isAIEnabled={true}
+          initAIPrompt="Write a 30 word description for a course titled: {$createCourseModal.title}"
         />
-      </div>
 
-      <TextArea
-        label={$t('courses.new_course_modal.short_description')}
-        bind:value={$createCourseModal.description}
-        rows={4}
-        placeholder={$t('courses.new_course_modal.short_description_placeholder')}
-        className="mb-4"
-        isRequired={true}
-        errorMessage={errors.description}
-        isAIEnabled={true}
-        initAIPrompt="Write a 30 word description for a course titled: {$createCourseModal.title}"
-      />
-
-      <div class="mt-5 flex items-center justify-between">
-        <PrimaryButton
-          className="px-6 py-3"
-          label={$t('courses.new_course_modal.back')}
-          variant={VARIANTS.OUTLINED}
-          onClick={() => (step = 0)}
-        />
-        <PrimaryButton
-          className="px-6 py-3"
-          label={$t('courses.new_course_modal.button')}
-          type="submit"
-          isDisabled={isLoading}
-          {isLoading}
-        />
-      </div>
-    </form>
-  {/if}
-</Modal>
+        <Dialog.Footer>
+          <Button variant="outline" onclick={() => (step = 0)}>
+            {$t('courses.new_course_modal.back')}
+          </Button>
+          <Button type="submit" disabled={isLoading} loading={isLoading}>
+            {$t('courses.new_course_modal.button')}
+          </Button>
+        </Dialog.Footer>
+      </form>
+    {/if}
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/course/components/reorder-material-tabs.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { flip } from 'svelte/animate';
+  import { settings } from '../utils/settings-store';
+  import { dndzone } from 'svelte-dnd-action';
+  import GripVerticalIcon from '@lucide/svelte/icons/grip-vertical';
+  import { t } from '$lib/utils/functions/translations';
+
+  interface Props {
+    onchange: () => void;
+  }
+
+  let { onchange }: Props = $props();
+
+  const flipDurationMs = 300;
+
+  function handleDndConsider(e) {
+    $settings.tabs = e.detail.items;
+  }
+
+  function handleDndFinalize(e) {
+    $settings.tabs = e.detail.items;
+
+    onchange();
+  }
+</script>
+
+<section
+  use:dndzone={{
+    items: $settings.tabs,
+    flipDurationMs,
+    dropTargetStyle: {
+      'border-style': 'dashed'
+    }
+  }}
+  onconsider={handleDndConsider}
+  onfinalize={handleDndFinalize}
+  class="ui:bg-muted ui:text-muted-foreground inline-flex h-12 w-fit items-center justify-start gap-2 rounded-lg px-2 py-1"
+>
+  {#each $settings.tabs as item (item.id)}
+    <div
+      animate:flip={{ duration: flipDurationMs }}
+      class="ui:bg-background ui:dark:text-foreground ui:border-input flex h-[calc(100%-3px)] items-center justify-start gap-2 rounded-md px-3 py-1 text-sm font-medium transition-[color,box-shadow]"
+    >
+      <GripVerticalIcon size={16} class="custom text-primary" />
+      {$t(item.name)}
+    </div>
+  {/each}
+</section>

apps/dashboard/src/lib/features/course/components/sidebar/constants.ts

@@ -0,0 +1,13 @@
+export const NAV_IDS = {
+  NEWS_FEED: 'NEWS_FEED',
+  LESSONS: 'LESSONS',
+  ATTENDANCE: 'ATTENDANCE',
+  SUBMISSIONS: 'SUBMISSIONS',
+  MARKS: 'MARKS',
+  CERTIFICATES: 'CERTIFICATES',
+  LANDING_PAGE: 'LANDING_PAGE',
+  PEOPLE: 'PEOPLE',
+  ANALYTICS: 'ANALYTICS',
+  SETTINGS: 'SETTINGS',
+  SECTION: 'SECTION'
+};

apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar-navigation.svelte

@@ -0,0 +1,389 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { goto } from '$app/navigation';
+  import Plus from '@lucide/svelte/icons/plus';
+  import * as Sidebar from '@cio/ui/base/sidebar';
+  import LockIcon from '@lucide/svelte/icons/lock';
+  import * as Collapsible from '@cio/ui/base/collapsible';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import { Button } from '@cio/ui/base/button';
+  import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
+
+  import UsersIcon from '@lucide/svelte/icons/users';
+  import AwardIcon from '@lucide/svelte/icons/award';
+  import PanelTop from '@lucide/svelte/icons/panel-top';
+  import SettingsIcon from '@lucide/svelte/icons/settings';
+  import MegaphoneIcon from '@lucide/svelte/icons/megaphone';
+  import ChartLineIcon from '@lucide/svelte/icons/chart-line';
+  import BookCheckIcon from '@lucide/svelte/icons/book-check';
+  import ScrollTextIcon from '@lucide/svelte/icons/scroll-text';
+  import SquareLibrary from '@lucide/svelte/icons/square-library';
+  import BookOpenCheck from '@lucide/svelte/icons/book-open-check';
+  import TableOfContentsIcon from '@lucide/svelte/icons/table-of-contents';
+
+  import { NAV_IDS } from './constants';
+  import { profile } from '$lib/utils/store/user';
+  import { course } from '$lib/components/Course/store';
+  import { t } from '$lib/utils/functions/translations';
+  import { handleAddLessonWidget } from '$lib/components/Course/components/Lesson/store';
+  import { getIsLessonComplete } from '$lib/components/Course/components/Lesson/functions';
+  import { currentOrg, isFreePlan, currentOrgPath } from '$lib/utils/store/org';
+  import { globalStore } from '$lib/utils/store/app';
+  import { COURSE_TYPE, COURSE_VERSION } from '$lib/utils/types';
+  import { lessons, lessonSections } from '$lib/components/Course/components/Lesson/store/lessons';
+  import { getNavItemRoute, getLessonsRoute, getLectureNo } from '$lib/components/Course/function';
+
+  import { Chip } from '@cio/ui/custom/chip';
+  import { CircleCheckIcon } from '$features/ui/icons';
+
+  interface Props {
+    path: string;
+    isStudent?: boolean;
+  }
+
+  let { path, isStudent = false }: Props = $props();
+
+  const coursesListPath = $derived($globalStore.isOrgSite ? '/lms/mylearning' : `${$currentOrgPath}/courses`);
+
+  const navItems = $derived(
+    [
+      {
+        id: NAV_IDS.NEWS_FEED,
+        title: $t('course.navItems.nav_news_feed'),
+        url: getNavItemRoute($course.id),
+        isActive: (path || page.url.pathname) === getNavItemRoute($course.id),
+        show() {
+          return isStudent ? $currentOrg.customization?.['course']?.['newsfeed'] : true;
+        },
+        icon: getNavIcon(NAV_IDS.NEWS_FEED)
+      },
+      {
+        id: NAV_IDS.LESSONS,
+        title: $t('course.navItems.nav_content'),
+        url: getLessonsRoute($course.id),
+        isActive:
+          (path || page.url.pathname).includes('/lessons') ||
+          (path || page.url.pathname) === getLessonsRoute($course.id),
+        isLesson: true,
+        icon: getNavIcon(NAV_IDS.LESSONS),
+        items:
+          $course.version === COURSE_VERSION.V1
+            ? ($lessons || []).map((lesson, index) => ({
+                title: lesson.title,
+                url: getLessonsRoute($course.id, lesson.id),
+                lesson,
+                index,
+                isV1: true
+              }))
+            : $lessonSections.flatMap((section) =>
+                section.lessons.map((lesson) => ({
+                  title: lesson.title,
+                  url: getLessonsRoute($course.id, lesson.id),
+                  lesson,
+                  sectionTitle: section.title,
+                  isV1: false
+                }))
+              )
+      },
+      {
+        id: NAV_IDS.ANALYTICS,
+        title: $t('course.navItems.nav_analytics'),
+        url: getNavItemRoute($course.id, 'analytics'),
+        isActive: (path || page.url.pathname) === getNavItemRoute($course.id, 'analytics'),
+        show() {
+          return !isStudent;
+        },
+        icon: getNavIcon(NAV_IDS.ANALYTICS)
+      },
+      {
+        id: NAV_IDS.ATTENDANCE,
+        title: $t('course.navItems.nav_attendance'),
+        url: getNavItemRoute($course.id, 'attendance'),
+        isActive: (path || page.url.pathname) === getNavItemRoute($course.id, 'attendance'),
+        show() {
+          if ($course.type !== COURSE_TYPE.LIVE_CLASS) return false;
+          return true;
+        },
+        icon: getNavIcon(NAV_IDS.ATTENDANCE)
+      },
+      {
+        id: NAV_IDS.SUBMISSIONS,
+        title: $t('course.navItems.nav_submissions'),
+        url: getNavItemRoute($course.id, 'submissions'),
+        isActive: (path || page.url.pathname) === getNavItemRoute($course.id, 'submissions'),
+        show() {
+          if (isStudent) return false;
+          return true;
+        },
+        icon: getNavIcon(NAV_IDS.SUBMISSIONS)
+      },
+      {
+        id: NAV_IDS.MARKS,
+        title: $t('course.navItems.nav_marks'),
+        url: getNavItemRoute($course.id, 'marks'),
+        isActive: (path || page.url.pathname) === getNavItemRoute($course.id, 'marks'),
+        show() {
+          if ($course.type == COURSE_TYPE.LIVE_CLASS) {
+            return isStudent ? ($currentOrg.customization?.['course']?.['grading'] ?? false) : true;
+          }
+          return false;
+        },
+        icon: getNavIcon(NAV_IDS.MARKS)
+      },
+      {
+        id: NAV_IDS.CERTIFICATES,
+        title: $t('course.navItems.nav_certificates'),
+        url: getNavItemRoute($course.id, 'certificates'),
+        isActive: (path || page.url.pathname) === getNavItemRoute($course.id, 'certificates'),
+        show() {
+          if (isStudent && $isFreePlan) {
+            return false;
+          }
+          return true;
+        },
+        icon: getNavIcon(NAV_IDS.CERTIFICATES)
+      },
+      {
+        id: NAV_IDS.LANDING_PAGE,
+        title: $t('course.navItems.nav_landing_page'),
+        url: getNavItemRoute($course.id, 'landingpage'),
+        isActive: (path || page.url.pathname) === getNavItemRoute($course.id, 'landingpage'),
+        show() {
+          return !isStudent;
+        },
+        icon: getNavIcon(NAV_IDS.LANDING_PAGE)
+      },
+      {
+        id: NAV_IDS.PEOPLE,
+        title: $t('course.navItems.nav_people'),
+        url: getNavItemRoute($course.id, 'people'),
+        isActive: (path || page.url.pathname) === getNavItemRoute($course.id, 'people'),
+        show() {
+          return !isStudent;
+        },
+        icon: getNavIcon(NAV_IDS.PEOPLE)
+      },
+      {
+        id: NAV_IDS.SETTINGS,
+        title: $t('course.navItems.nav_settings'),
+        url: getNavItemRoute($course.id, 'settings'),
+        isActive: (path || page.url.pathname) === getNavItemRoute($course.id, 'settings'),
+        show() {
+          return !isStudent;
+        },
+        icon: getNavIcon(NAV_IDS.SETTINGS)
+      }
+    ].filter((item) => !item.show || item.show())
+  );
+
+  function addLesson(isSection: boolean, id: string) {
+    goto('/courses/' + $course.id + '/lessons');
+    $handleAddLessonWidget.open = true;
+
+    if ($course.version === COURSE_VERSION.V2) {
+      $handleAddLessonWidget.isSection = isSection ? false : true;
+
+      if (isSection) {
+        $handleAddLessonWidget.id = id;
+      }
+    }
+  }
+
+  function getNavIcon(id: string) {
+    if (!id) return null;
+
+    if (id === NAV_IDS.SECTION) {
+      return TableOfContentsIcon;
+    } else if (id === NAV_IDS.NEWS_FEED) {
+      return MegaphoneIcon;
+    } else if (id === NAV_IDS.LESSONS) {
+      return ScrollTextIcon;
+    } else if (id === NAV_IDS.ATTENDANCE) {
+      return BookOpenCheck;
+    } else if (id === NAV_IDS.SUBMISSIONS) {
+      return SquareLibrary;
+    } else if (id === NAV_IDS.MARKS) {
+      return BookCheckIcon;
+    } else if (id === NAV_IDS.PEOPLE) {
+      return UsersIcon;
+    } else if (id === NAV_IDS.ANALYTICS) {
+      return ChartLineIcon;
+    } else if (id === NAV_IDS.LANDING_PAGE) {
+      return PanelTop;
+    } else if (id === NAV_IDS.CERTIFICATES) {
+      return AwardIcon;
+    } else if (id === NAV_IDS.SETTINGS) {
+      return SettingsIcon;
+    }
+
+    return null;
+  }
+
+  function toggleSidebarOnMobile() {}
+</script>
+
+<Sidebar.Group class="pt-0!">
+  <Button variant="link" class="justify-start! py-2! px-2! h-fit!" href={coursesListPath}>
+    <ArrowLeftIcon class="custom" />
+    <span class="text-xs">Courses</span>
+  </Button>
+
+  <Sidebar.Menu>
+    {#each navItems as item (item.id)}
+      <Collapsible.Root open={item.isActive} class="group/collapsible">
+        {#snippet child({ props })}
+          <Sidebar.MenuItem {...props}>
+            {#if item.isLesson && item.items}
+              <Collapsible.Trigger>
+                {#snippet child({ props })}
+                  <a href={item.url}>
+                    <Sidebar.MenuButton
+                      {...props}
+                      tooltipContent={item.title}
+                      class="flex w-full items-center gap-4 py-2 pl-1.5"
+                    >
+                      {@const Icon = item.icon}
+                      <Icon size={16} class="nav-icon group-hover:animate-{item.id}" />
+                      {item.title}
+
+                      <div class="ml-auto flex items-center gap-1">
+                        <Plus
+                          size={20}
+                          class="rounded-full p-1 hover:bg-gray-200"
+                          onclick={() => addLesson(false, item.id)}
+                        />
+
+                        <ChevronRightIcon
+                          size={20}
+                          class="rounded-full p-1 transition-transform duration-200 hover:bg-gray-200 group-data-[state=open]/collapsible:rotate-90"
+                        />
+                      </div>
+                    </Sidebar.MenuButton>
+                  </a>
+                {/snippet}
+              </Collapsible.Trigger>
+              <Collapsible.Content>
+                <Sidebar.MenuSub>
+                  {#if $course.version === COURSE_VERSION.V1}
+                    {#each item.items as lessonItem}
+                      <Sidebar.MenuSubItem>
+                        <Sidebar.MenuSubButton isActive={(path || page.url.pathname).includes(lessonItem.lesson.id)}>
+                          {#snippet child({ props })}
+                            <a
+                              href={isStudent && !lessonItem.lesson.is_unlocked ? page.url.pathname : lessonItem.url}
+                              onclick={toggleSidebarOnMobile}
+                              aria-disabled={!lessonItem.lesson.is_unlocked}
+                              title={lessonItem.lesson.title}
+                              class="flex w-full items-center gap-2 {isStudent && !lessonItem.lesson.is_unlocked
+                                ? 'cursor-not-allowed opacity-50'
+                                : ''}"
+                              {...props}
+                            >
+                              {#if lessonItem.isV1 && 'index' in lessonItem}
+                                <Chip value={getLectureNo(lessonItem.index + 1)} />
+                              {/if}
+                              <span class="flex-1 truncate">{lessonItem.lesson.title}</span>
+                              {#if !lessonItem.lesson.is_unlocked}
+                                <LockIcon size={16} class="shrink-0" />
+                              {:else if getIsLessonComplete(lessonItem.lesson.lesson_completion, $profile.id)}
+                                <span class="shrink-0">
+                                  <CircleCheckIcon size={16} filled />
+                                </span>
+                              {/if}
+                            </a>
+                          {/snippet}
+                        </Sidebar.MenuSubButton>
+                      </Sidebar.MenuSubItem>
+                    {/each}
+                  {:else}
+                    {#each $lessonSections as section}
+                      <Collapsible.Root open={true} class="group/section">
+                        {#snippet child({ props })}
+                          <Sidebar.MenuSubItem {...props}>
+                            <Collapsible.Trigger>
+                              {#snippet child({ props })}
+                                <Sidebar.MenuSubButton {...props} class="flex w-full items-center gap-2 font-medium">
+                                  {@const Icon = getNavIcon(NAV_IDS.SECTION)}
+                                  <Icon size={14} />
+                                  <span class="flex-1 truncate">{section.title}</span>
+                                  <div class="ml-auto flex items-center gap-1">
+                                    <Plus
+                                      size={20}
+                                      class="rounded-full p-1 hover:bg-gray-200"
+                                      onclick={() => addLesson(true, section.id)}
+                                    />
+
+                                    <ChevronRightIcon
+                                      size={20}
+                                      class="rounded-full p-1 transition-transform duration-200 hover:bg-gray-200 group-data-[state=open]/collapsible:rotate-90"
+                                    />
+                                  </div>
+                                </Sidebar.MenuSubButton>
+                              {/snippet}
+                            </Collapsible.Trigger>
+                            <Collapsible.Content>
+                              <Sidebar.MenuSub class="ml-2">
+                                {#each section.lessons as lesson}
+                                  <Sidebar.MenuSubItem>
+                                    <Sidebar.MenuSubButton isActive={(path || page.url.pathname).includes(lesson.id)}>
+                                      {#snippet child({ props })}
+                                        <a
+                                          href={isStudent && !lesson.is_unlocked
+                                            ? page.url.pathname
+                                            : getLessonsRoute($course.id, lesson.id)}
+                                          onclick={toggleSidebarOnMobile}
+                                          aria-disabled={!lesson.is_unlocked}
+                                          title={lesson.title}
+                                          class="flex w-full items-center gap-2 {isStudent && !lesson.is_unlocked
+                                            ? 'cursor-not-allowed opacity-50'
+                                            : ''}"
+                                          {...props}
+                                        >
+                                          <span class="flex-1 truncate">{lesson.title}</span>
+                                          {#if !lesson.is_unlocked}
+                                            <LockIcon size={16} class="shrink-0" />
+                                          {:else if getIsLessonComplete(lesson.lesson_completion, $profile.id)}
+                                            <span class="shrink-0">
+                                              <CircleCheckIcon size={16} filled />
+                                            </span>
+                                          {/if}
+                                        </a>
+                                      {/snippet}
+                                    </Sidebar.MenuSubButton>
+                                  </Sidebar.MenuSubItem>
+                                {/each}
+                              </Sidebar.MenuSub>
+                            </Collapsible.Content>
+                          </Sidebar.MenuSubItem>
+                        {/snippet}
+                      </Collapsible.Root>
+                    {/each}
+                  {/if}
+                </Sidebar.MenuSub>
+              </Collapsible.Content>
+            {:else}
+              <a href={item.url} onclick={toggleSidebarOnMobile}>
+                <Sidebar.MenuButton
+                  tooltipContent={item.title}
+                  class="flex w-full cursor-pointer items-center gap-4 px-1.5 py-2 {item.isActive
+                    ? 'ui:bg-accent ui:text-accent-foreground'
+                    : ''}"
+                >
+                  {@const Icon = item.icon}
+                  <Icon size={16} class="nav-icon group-hover:animate-{item.id}" />
+                  {item.title}
+                </Sidebar.MenuButton>
+              </a>
+            {/if}
+          </Sidebar.MenuItem>
+        {/snippet}
+      </Collapsible.Root>
+    {/each}
+  </Sidebar.Menu>
+</Sidebar.Group>
+
+<style>
+  a {
+    text-decoration: none;
+  }
+</style>

apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import * as Sidebar from '@cio/ui/base/sidebar';
+  import { profile } from '$lib/utils/store/user';
+  import { orgs } from '$lib/utils/store/org';
+  import { globalStore } from '$lib/utils/store/app';
+  import { isFreePlan } from '$lib/utils/store/org';
+
+  import OrgLogo from '$features/ui/sidebar/org-sidebar/org-logo.svelte';
+  import Navigation from './course-sidebar-navigation.svelte';
+  import SidebarSkeleton from '$features/ui/sidebar/sidebar-skeleton.svelte';
+  import UpgradePoweredBy from '$features/ui/upgrade-powered-by.svelte';
+  import { useSidebar } from '@cio/ui/base/sidebar';
+
+  const isOrgLoaded = $derived($orgs.length > 0 && $profile.id);
+
+  interface Props {
+    path: string;
+  }
+
+  let { path }: Props = $props();
+
+  const sidebar = useSidebar();
+</script>
+
+{#if !isOrgLoaded}
+  <SidebarSkeleton />
+{:else}
+  <Sidebar.Root collapsible="icon">
+    <Sidebar.Header>
+      <OrgLogo />
+    </Sidebar.Header>
+
+    <Sidebar.Content>
+      <Navigation {path} isStudent={$globalStore.isStudent} />
+    </Sidebar.Content>
+
+    <Sidebar.Rail />
+
+    {#if $isFreePlan}
+      <Sidebar.Footer>
+        <UpgradePoweredBy
+          class="static [&_span]:font-normal [&_span]:shadow-none"
+          showOnlyLogo={!sidebar.open || sidebar.isMobile}
+        />
+      </Sidebar.Footer>
+    {/if}
+  </Sidebar.Root>
+{/if}

apps/dashboard/src/lib/features/course/components/sidebar/index.ts

@@ -0,0 +1 @@
+export { default as CourseSidebar } from './course-sidebar.svelte';

apps/dashboard/src/lib/features/course/pages/analytics.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import ChartBarIcon from '@lucide/svelte/icons/chart-bar';
+  import { t } from '$lib/utils/functions/translations';
+  import { getAccessToken } from '$lib/utils/functions/supabase';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import type { CourseAnalytics } from '$lib/utils/types/analytics';
+  import { fade } from 'svelte/transition';
+  import StudentTable from '$lib/components/Course/components/Analytics/StudentTable.svelte';
+  import AnalyticsGraph from '$lib/components/Course/components/Analytics/AnalyticsGraph.svelte';
+  import AnalyticsSkeleton from '$lib/components/Course/components/Analytics/AnalyticsSkeleton.svelte';
+  import AnalyticsCard from '$lib/components/Course/components/Analytics/AnalyticsCard.svelte';
+  import StudentsIcon from '$lib/components/Course/components/Analytics/icons/StudentsIcon.svelte';
+  import LessonsIcon from '$lib/components/Course/components/Analytics/icons/LessonsIcon.svelte';
+  import ProgressIcon from '$lib/components/Course/components/Analytics/icons/ProgressIcon.svelte';
+  import ExercisesIcon from '$lib/components/Course/components/Analytics/icons/ExercisesIcon.svelte';
+  import EmptyState from '$lib/components/Course/components/Analytics/EmptyState.svelte';
+
+  interface Props {
+    courseId: string;
+  }
+
+  let { courseId }: Props = $props();
+
+  let courseAnalytics: CourseAnalytics | null = $state(null);
+  let isLoading = $state(true);
+
+  async function fetchCourseAnalytics() {
+    try {
+      isLoading = true;
+
+      const accessToken = await getAccessToken();
+      const response = await fetch('/api/analytics/course', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: accessToken
+        },
+        body: JSON.stringify({ courseId })
+      });
+
+      if (response.ok) {
+        courseAnalytics = (await response.json()) as CourseAnalytics;
+      } else {
+        console.error('Failed to fetch course analytics:', response);
+        snackbar.error('Failed to load analytics data');
+        courseAnalytics = null;
+      }
+    } catch (error) {
+      console.error('Failed to fetch course analytics:', error);
+      snackbar.error('Failed to load analytics data');
+      courseAnalytics = null;
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  onMount(() => {
+    fetchCourseAnalytics();
+  });
+</script>
+
+{#if isLoading}
+  <AnalyticsSkeleton />
+{:else if courseAnalytics}
+  <div class="min-h-screen" in:fade>
+    <!-- Main Content Area -->
+    <div class="px-4 py-8">
+      <!-- Course Overview Cards -->
+      <div class="mb-12">
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <!-- Students Card -->
+          <AnalyticsCard
+            title={$t('analytics.students')}
+            value={courseAnalytics?.totalStudents || 0}
+            subtitle="{$t('analytics.tutors')}: {courseAnalytics?.totalTutors || 0}"
+            icon={StudentsIcon}
+            iconColor="blue"
+          />
+
+          <!-- Lessons Card -->
+          <AnalyticsCard
+            title={$t('analytics.lessons')}
+            value={courseAnalytics?.totalLessons || 0}
+            subtitle="{$t('analytics.exercises')}: {courseAnalytics?.totalExercises || 0}"
+            icon={LessonsIcon}
+            iconColor="green"
+          />
+
+          <!-- Progress Card -->
+          <AnalyticsCard
+            title={$t('analytics.progress')}
+            value="{courseAnalytics?.lessonCompletionRate || 0}%"
+            subtitle="{$t('analytics.avg_grade')}: {courseAnalytics?.averageGrade || 0}%"
+            icon={ProgressIcon}
+            iconColor="purple"
+          />
+
+          <!-- Exercise Completion Card -->
+          <AnalyticsCard
+            title={$t('analytics.exercises')}
+            value="{courseAnalytics?.exerciseCompletionRate || 0}%"
+            subtitle={$t('analytics.completion_rate')}
+            icon={ExercisesIcon}
+            iconColor="orange"
+          />
+        </div>
+      </div>
+
+      <!-- Charts Section -->
+      <div class="mb-12">
+        <AnalyticsGraph {courseAnalytics} />
+      </div>
+
+      <!-- Students Overview Table -->
+      <div class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-neutral-800">
+        <div class="border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            {$t('analytics.student_progress_overview')}
+          </h3>
+        </div>
+        <div class="p-6">
+          <StudentTable students={courseAnalytics?.students || []} />
+        </div>
+      </div>
+    </div>
+  </div>
+{:else}
+  <EmptyState
+    title={$t('analytics.no_analytics_data')}
+    description={$t('analytics.no_analytics_description')}
+    icon={ChartBarIcon}
+    className="h-screen"
+  />
+{/if}
+

apps/dashboard/src/lib/features/course/pages/attendance.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+  import { Input } from '@cio/ui/base/input';
+  import * as Table from '@cio/ui/base/table';
+  import Search from '@lucide/svelte/icons/search';
+  import { Checkbox } from '@cio/ui/base/checkbox';
+  import * as Pagination from '@cio/ui/base/pagination';
+
+  import { profile } from '$lib/utils/store/user';
+  import { ROLE } from '@cio/utils/constants';
+  import { globalStore } from '$lib/utils/store/app';
+  import { t } from '$lib/utils/functions/translations';
+  import { attendance } from '$lib/utils/store/attendance';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { course, group } from '$lib/components/Course/store';
+  import { takeAttendance } from '$lib/utils/services/attendance';
+  import { getLectureNo } from '$lib/components/Course/function.js';
+  import type { GroupPerson, Lesson } from '$lib/utils/types/index';
+  import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
+
+  import { Empty } from '@cio/ui/custom/empty';
+  import UserXIcon from '@lucide/svelte/icons/user-x';
+
+  interface Props {
+    courseId: string;
+  }
+
+  let { courseId }: Props = $props();
+  let hasFetched = $state(false);
+
+  interface CourseData {
+    attendance: {
+      student_id: string;
+      lesson_id: string;
+      is_present: boolean;
+      id: number;
+    }[];
+  }
+
+  const students: GroupPerson[] = $derived(
+    $globalStore.isStudent
+      ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
+      : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT)
+  );
+  let searchValue = $state('');
+  let currentPage = $state(1);
+  let pageSize = $state(10);
+
+  const filteredStudents = $derived(searchStudents(searchValue, students));
+  const totalStudents = $derived(filteredStudents.length);
+  const paginatedStudents = $derived(filteredStudents.slice((currentPage - 1) * pageSize, currentPage * pageSize));
+
+  function setAttendance(courseData: CourseData) {
+    for (const attendanceItem of courseData.attendance) {
+      const { student_id, lesson_id, is_present, id } = attendanceItem;
+
+      if (!$attendance[student_id]) {
+        $attendance[student_id] = {
+          [lesson_id]: {
+            id,
+            is_present
+          }
+        };
+      } else {
+        $attendance[student_id] = {
+          ...$attendance[student_id],
+          [lesson_id]: {
+            id,
+            is_present
+          }
+        };
+      }
+    }
+  }
+
+  function handleAttendanceChange(e: any, student: GroupPerson, lesson: Lesson) {
+    if ($globalStore.isStudent) return;
+
+    const attendanceItem = $attendance[student.id]
+      ? $attendance[student.id][lesson.id] || { id: undefined }
+      : { id: undefined };
+
+    const _data = {
+      id: attendanceItem.id,
+      student_id: student.id,
+      is_present: e.target.checked,
+      lesson_id: lesson.id,
+      course_id: courseId
+    };
+
+    takeAttendance(_data).then((res) => {
+      if (res.error) {
+        console.error(`res.error`, res.error);
+        snackbar.error('snackbar.attendance.error.reload');
+      } else {
+        const { id, is_present } = res.data[0];
+        if ($attendance[student.id]) {
+          $attendance[student.id][lesson.id] = {
+            id,
+            is_present
+          };
+        } else {
+          $attendance[student.id] = {
+            [lesson.id]: {
+              id,
+              is_present
+            }
+          };
+        }
+      }
+    });
+  }
+
+  // function for the searchbar
+  function searchStudents(query: string, _students: GroupPerson[]) {
+    const lowercaseQuery = query.toLowerCase();
+    return _students.filter((student) => student.profile?.fullname?.toLowerCase()?.includes(lowercaseQuery));
+  }
+
+  async function firstRender(courseId?: string) {
+    if (!courseId || hasFetched) return;
+
+    hasFetched = true;
+
+    if (!Object.keys($attendance).length) {
+      setAttendance($course);
+    }
+    return;
+  }
+
+  $effect(() => {
+    firstRender($course.id);
+  });
+</script>
+
+<section class="mx-2 my-5 flex items-center lg:mx-9">
+  <div class="flex w-full flex-col items-start justify-between gap-2 lg:flex-row lg:items-center">
+    <div class="flex gap-5">
+      <p class="flex items-center gap-2">
+        <Checkbox disabled />
+        <span>{$t('course.navItem.attendance.present')}</span>
+      </p>
+      <p class="flex items-center gap-2">
+        <Checkbox disabled />
+        <span>{$t('course.navItem.attendance.absent')}</span>
+      </p>
+    </div>
+
+    <div class="relative w-full">
+      <Input type="text" placeholder={$t('course.navItem.attendance.search_students')} bind:value={searchValue} />
+
+      <Search class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+    </div>
+  </div>
+</section>
+
+<section class="mx-2 my-5 lg:mx-9">
+  <div class="rounded-md border">
+    <Table.Root>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head class="w-1/4">{$t('course.navItem.attendance.student')}</Table.Head>
+          {#each $lessons as _lesson, index}
+            <Table.Head class="text-center"
+              >{$t('course.navItem.attendance.lesson')} 0{getLectureNo(index + 1)}</Table.Head
+            >
+          {/each}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {#each paginatedStudents as student}
+          <Table.Row>
+            <Table.Cell class="font-semibold">
+              {student.profile.fullname}
+            </Table.Cell>
+            {#each $lessons as lesson}
+              <Table.Cell class="text-center">
+                <div class="flex justify-center">
+                  <Checkbox
+                    disabled={$globalStore.isStudent}
+                    checked={$attendance[student.id]
+                      ? $attendance[student.id][lesson.id]
+                        ? $attendance[student.id][lesson.id].is_present
+                        : false
+                      : false}
+                    onCheckedChange={(checked) => {
+                      const e = { target: { checked } };
+                      handleAttendanceChange(e, student, lesson);
+                    }}
+                  />
+                </div>
+              </Table.Cell>
+            {/each}
+          </Table.Row>
+        {/each}
+      </Table.Body>
+    </Table.Root>
+  </div>
+  {#if students.length === 0}
+    <Empty title={$t('course.navItem.attendance.no_student')} icon={UserXIcon} variant="page" />
+  {/if}
+  {#if totalStudents > 0}
+    <div class="mt-4">
+      <Pagination.Root
+        count={totalStudents}
+        perPage={pageSize}
+        page={currentPage}
+        onPageChange={(page) => (currentPage = page)}
+      >
+        {#snippet children({ pages, currentPage: activePage })}
+          <Pagination.Content>
+            <Pagination.Item>
+              <Pagination.PrevButton />
+            </Pagination.Item>
+            {#each pages as page (page.key)}
+              {#if page.type === 'ellipsis'}
+                <Pagination.Item>
+                  <Pagination.Ellipsis />
+                </Pagination.Item>
+              {:else}
+                <Pagination.Item>
+                  <Pagination.Link {page} isActive={activePage === page.value}>
+                    {page.value}
+                  </Pagination.Link>
+                </Pagination.Item>
+              {/if}
+            {/each}
+            <Pagination.Item>
+              <Pagination.NextButton />
+            </Pagination.Item>
+          </Pagination.Content>
+        {/snippet}
+      </Pagination.Root>
+    </div>
+  {/if}
+</section>
+

apps/dashboard/src/lib/features/course/pages/certificates.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import IssueCertificateModal from '$lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte';
+  import { RoleBasedSecurity } from '$features/ui';
+  import Design from '$lib/components/Course/components/Ceritficate/Design.svelte';
+  import StudentCertificate from '$lib/components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
+</script>
+
+<IssueCertificateModal />
+
+<RoleBasedSecurity allowedRoles={[1, 2]}>
+  <Design />
+</RoleBasedSecurity>
+<RoleBasedSecurity onlyStudent allowedRoles={[3]}>
+  <StudentCertificate />
+</RoleBasedSecurity>

apps/dashboard/src/lib/features/course/pages/courses.svelte

@@ -7,22 +7,21 @@
   import * as Select from '@cio/ui/base/select';
   import GridIcon from '@lucide/svelte/icons/grid-2x2';
   import ListIcon from '@lucide/svelte/icons/list';
-  import { IconButton } from '$lib/components/IconButton';
+  import { IconButton } from '@cio/ui/custom/icon-button';
 
   import {
-    CourseCard,
+    CourseCardList,
     CourseCardLoader,
     CreateCourseButton,
     CourseList,
     CopyCourseModal,
     NewCourseModal
-  } from '$lib/features/course/components';
+  } from '$features/course/components';
 
-  import DeleteModal from '$lib/components/Modal/DeleteModal.svelte';
+  import { DeleteModal } from '$features/ui';
   import type { Course } from '$lib/utils/types';
-  import { globalStore } from '$lib/utils/store/app';
   import { t } from '$lib/utils/functions/translations';
-  import { snackbar } from '$lib/components/Snackbar/store';
+  import { snackbar } from '$features/ui/snackbar/store';
   import { deleteCourse } from '$lib/utils/services/courses';
   import {
     deleteCourseModal,
@@ -34,9 +33,10 @@
 
   interface Props {
     courses?: Course[];
-    emptyTitle?: any;
-    emptyDescription?: any;
+    emptyTitle?: string;
+    emptyDescription?: string;
     isExplore?: boolean;
+    isLMS?: boolean;
     searchValue?: string;
     selectedId?: string;
   }
@@ -46,6 +46,7 @@
     emptyTitle = $t('courses.course_card.empty_title'),
     emptyDescription = $t('courses.course_card.empty_description'),
     isExplore = false,
+    isLMS = false,
     searchValue = $bindable(''),
     selectedId = $bindable('0')
   }: Props = $props();
@@ -67,14 +68,6 @@
     }
   };
 
-  function calcProgressRate(progressRate?: number, totalLessons?: number): number {
-    if (!progressRate || !totalLessons) {
-      return 0;
-    }
-
-    return Math.round((progressRate / totalLessons) * 100);
-  }
-
   async function handleDeleteCourse() {
     if (!$deleteCourseModal.id) return;
 
@@ -118,17 +111,17 @@
       <p>{selectedId ? selectedLabel : filterOptions[0].label}</p>
     </Select.Trigger>
     <Select.Content>
-      {#each filterOptions as option}
+      {#each filterOptions as option (option.label)}
         <Select.Item value={option.value}>{option.label}</Select.Item>
       {/each}
     </Select.Content>
   </Select.Root>
   {#if $courseMetaDeta.view === 'list'}
-    <IconButton onClick={() => setViewPreference('grid')}>
+    <IconButton onclick={() => setViewPreference('grid')}>
       <GridIcon size={16} />
     </IconButton>
   {:else}
-    <IconButton onClick={() => setViewPreference('list')}>
+    <IconButton onclick={() => setViewPreference('list')}>
       <ListIcon size={16} />
     </IconButton>
   {/if}
@@ -143,7 +136,9 @@
     </section>
   {:else if !courses.length}
     <Empty title={emptyTitle} description={emptyDescription} icon={LibraryBigIcon} variant="page">
-      <CreateCourseButton isResponsive />
+      {#if !isLMS}
+        <CreateCourseButton isResponsive />
+      {/if}
     </Empty>
   {:else if $courseMetaDeta.view === 'list'}
     <div class="w-full overflow-hidden rounded-md border">
@@ -160,7 +155,7 @@
           </Table.Row>
         </Table.Header>
         <Table.Body>
-          {#each courses as courseData}
+          {#each courses as courseData (courseData.id)}
             <CourseList
               id={courseData.id}
               title={courseData.title}
@@ -175,26 +170,6 @@
       </Table.Root>
     </div>
   {:else}
-    <section class={`relative ${$courseMetaDeta.isLoading || courses ? 'cards-container' : ''} `}>
-      {#each courses as courseData}
-        {#key courseData.id}
-          <CourseCard
-            id={courseData.id}
-            slug={courseData.slug}
-            bannerImage={courseData.logo || '/images/classroomio-course-img-template.jpg'}
-            title={courseData.title}
-            description={courseData.description}
-            isPublished={courseData.is_published}
-            type={courseData.type}
-            currency={courseData.currency}
-            totalLessons={courseData.total_lessons}
-            totalStudents={courseData.total_students}
-            isLMS={$globalStore.isOrgSite}
-            {isExplore}
-            progressRate={calcProgressRate(courseData.progress_rate, courseData.total_lessons)}
-          />
-        {/key}
-      {/each}
-    </section>
+    <CourseCardList {courses} {isExplore} {isLMS} />
   {/if}
 </div>

apps/dashboard/src/lib/features/course/pages/index.ts

@@ -1 +1,10 @@
 export { default as CoursesPage } from './courses.svelte';
+export { default as CourseSettingsPage } from './settings.svelte';
+export { default as NewsFeedPage } from './newsfeed.svelte';
+export { default as PeoplePage } from './people.svelte';
+export { default as SubmissionsPage } from './submissions.svelte';
+export { default as LessonsPage } from './lessons.svelte';
+export { default as AnalyticsPage } from './analytics.svelte';
+export { default as AttendancePage } from './attendance.svelte';
+export { default as MarksPage } from './marks.svelte';
+export { default as CertificatesPage } from './certificates.svelte';

apps/dashboard/src/lib/features/course/pages/lessons.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
+  import ActivateSectionsModal from '$lib/components/Course/components/Lesson/ActivateSectionsModal.svelte';
+  import { Empty } from '@cio/ui/custom/empty';
+  import BookOpenIcon from '@lucide/svelte/icons/book-open';
+  import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
+  import LessonList from '$lib/components/Course/components/Lesson/LessonList.svelte';
+  import LessonSectionList from '$lib/components/Course/components/Lesson/LessonSectionList.svelte';
+  import NewLessonModal from '$lib/components/Course/components/Lesson/NewLessonModal.svelte';
+  import { handleAddLessonWidget } from '$lib/components/Course/components/Lesson/store';
+  import { handleDelete, lessons, lessonSections } from '$lib/components/Course/components/Lesson/store/lessons';
+  import { course } from '$lib/components/Course/store';
+  import { RoleBasedSecurity } from '$features/ui';
+  import { t } from '$lib/utils/functions/translations';
+  import { profile } from '$lib/utils/store/user';
+  import type { Lesson } from '$lib/utils/types';
+  import { COURSE_VERSION } from '$lib/utils/types';
+
+  interface Props {
+    courseId: string;
+  }
+
+  let { courseId }: Props = $props();
+
+  const query = new URLSearchParams(page.url.search);
+
+  const lessonsLength = $derived($course.version === COURSE_VERSION.V1 ? $lessons.length : $lessonSections.length);
+
+  let lessonEditing: string | undefined;
+  let lessonToDelete: Lesson | undefined = $state();
+  let openDeleteModal: boolean = $state(false);
+  let isFetching: boolean = $state(false);
+  let reorder = $state(false);
+  let activateSections = $state(false);
+
+  function hasUserCompletedLesson(completion) {
+    return completion?.find((c) => c.profile_id === $profile.id);
+  }
+
+  const getLessons = () => {
+    if ($course.version === COURSE_VERSION.V1) {
+      return $lessons;
+    } else {
+      const _lessons: Lesson[] = [];
+
+      $lessonSections.forEach((section) => {
+        _lessons.push(...section.lessons);
+      });
+
+      return _lessons;
+    }
+  };
+
+  function findFirstIncompleteLesson() {
+    return getLessons().find(
+      (lesson) => !hasUserCompletedLesson(lesson.lesson_completion) && lesson.is_unlocked === true
+    );
+  }
+
+  function onNextQuery(lessons) {
+    if (!isFetching && lessons.length > 0) {
+      const incompleteLesson = findFirstIncompleteLesson();
+
+      if (incompleteLesson) {
+        goto(`/courses/${courseId}/lessons/${incompleteLesson.id}`);
+      } else {
+        goto(`/courses/${courseId}/lessons`);
+      }
+    }
+  }
+
+  let shouldGoToNextLesson = $derived(query.get('next') === 'true');
+  $effect(() => {
+    !isFetching && shouldGoToNextLesson && onNextQuery($lessons);
+  });
+</script>
+
+<NewLessonModal />
+
+<ActivateSectionsModal bind:open={activateSections} />
+
+<DeleteLessonConfirmation bind:openDeleteModal deleteLesson={() => handleDelete(lessonToDelete?.id)} />
+
+{#if shouldGoToNextLesson}
+  <Empty
+    title={$t('course.navItem.lessons.no_lesson')}
+    description={$t('course.navItem.lessons.share_your_knowledge')}
+    icon={BookOpenIcon}
+    variant="page"
+  />
+{:else if lessonsLength > 0}
+  {#if reorder}
+    <p class="text-center text-xs italic text-gray-400 dark:text-white">
+      {$t('course.navItem.lessons.drag')}
+    </p>
+  {/if}
+
+  {#if $course.version === COURSE_VERSION.V1}
+    <LessonList {reorder} {lessonEditing} bind:lessonToDelete bind:openDeleteModal />
+  {:else if $course.version === COURSE_VERSION.V2}
+    <LessonSectionList {reorder} {lessonEditing} />
+  {/if}
+{:else}
+  <Empty
+    title={$t('course.navItem.lessons.body_header')}
+    description={$t('course.navItem.lessons.body_content')}
+    icon={BookOpenIcon}
+    variant="page"
+  />
+{/if}
+

apps/dashboard/src/lib/features/course/pages/marks.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import { Empty } from '@cio/ui/custom/empty';
+  import UserXIcon from '@lucide/svelte/icons/user-x';
+  import { course } from '$lib/components/Course/store';
+  import { t } from '$lib/utils/functions/translations';
+  import { fetchMarks } from '$lib/utils/services/marks';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { getLectureNo } from '$lib/components/Course/function.js';
+  import { fetchExercisesByMarks } from '$lib/utils/services/courses';
+  import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
+  import type { GroupPerson } from '$lib/utils/types';
+
+  let borderBottomGrey = 'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
+  let borderleftGrey = 'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
+  let students: GroupPerson[] = $state([]);
+  let lessonMapping: Record<string, Record<string, { title: string; points: number }>> = $state({}); // { lessonId: { exerciseId: exerciseTitle, ... }, ... }
+  let studentMarksByExerciseId: Record<string, Record<string, string>> = $state({}); // { groupMemberId: { exerciseId: `total_gotten/points`, ... }, ... }
+  let hasFetched = $state(false);
+
+  function calculateStudentTotal(studentExerciseData) {
+    if (!studentExerciseData) return 0;
+
+    return Object.values(studentExerciseData).reduce((total: number, point) => (total += parseInt(point as string)), 0);
+  }
+
+  async function firstRender(courseId?: string) {
+    if (!courseId || hasFetched) return;
+
+    hasFetched = true;
+
+    const { data: marks, error } = await fetchMarks(courseId);
+    if (error) {
+      console.error('Error fetching marks', error);
+      snackbar.error('snackbar.marks.error');
+      return;
+    }
+
+    if (!marks || !Array.isArray(marks)) return;
+
+    marks.forEach((mark) => {
+      const { groupmember_id, exercise_id, total_points_gotten } = mark;
+
+      if (studentMarksByExerciseId[groupmember_id]) {
+        studentMarksByExerciseId[groupmember_id] = {
+          ...studentMarksByExerciseId[groupmember_id],
+          [exercise_id]: total_points_gotten
+        };
+      } else {
+        studentMarksByExerciseId[groupmember_id] = {
+          [exercise_id]: total_points_gotten
+        };
+      }
+    });
+
+    const { data: exercises } = await fetchExercisesByMarks(courseId);
+
+    // Map exercises to { lessonId: { exerciseId: exerciseTitle, ... }, ... }
+    exercises.forEach((exercise) => {
+      const { lesson_id, exercise_id, exercise_title, points } = exercise;
+
+      if (lessonMapping[lesson_id]) {
+        lessonMapping[lesson_id] = {
+          ...lessonMapping[lesson_id],
+          [exercise_id]: { title: exercise_title, points }
+        };
+      } else {
+        lessonMapping[lesson_id] = {
+          [exercise_id]: { title: exercise_title, points }
+        };
+      }
+    });
+  }
+
+  $effect(() => {
+    firstRender($course.id);
+  });
+</script>
+
+<div id="tableContainer" class="table w-full rounded-md border border-gray-300">
+  <div class="flex items-center {borderBottomGrey}">
+    <div class="box flex items-center p-3">
+      <p class="w-40 dark:text-white">{$t('course.navItem.marks.student')}</p>
+    </div>
+    {#each $lessons as lesson, index}
+      {#if lessonMapping[lesson.id]}
+        <div class="box flex flex-col items-center {borderleftGrey}">
+          <p class="col lesson-number dark:text-white" title={lesson.title}>
+            {getLectureNo(index + 1)}
+          </p>
+          <div class="flex h-full items-center border-b-0 border-l-0 border-r-0 border-t border-gray-300">
+            {#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
+              <p
+                class="col text-sm dark:text-white {index && borderleftGrey}"
+                title={lessonMapping[lesson.id][exerciseId].title}
+              >
+                {lessonMapping[lesson.id][exerciseId].title}
+                <span>({lessonMapping[lesson.id][exerciseId].points})</span>
+              </p>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    {/each}
+    <div class="box flex items-center {borderleftGrey}">
+      <p class="w-20 text-center dark:text-white">{$t('course.navItem.marks.total')}</p>
+    </div>
+  </div>
+
+  {#each students as student}
+    <div class="relative flex cursor-pointer items-center p-3 {borderBottomGrey}">
+      <div class="flex w-40 items-center">
+        <img alt="Student avatar" src={student.profile.avatar_url} class="mr-2 h-8 w-8 rounded-full" />
+        <div class="text-sm">
+          <p class="font-semibold dark:text-white">
+            {student.profile.fullname}
+          </p>
+          <p class="dark:text-white">
+            {`${student.assigned_student_id ? '#' + student.assigned_student_id : '-'}`}
+          </p>
+        </div>
+      </div>
+      {#each $lessons as lesson}
+        {#if lessonMapping[lesson.id]}
+          <div class="flex items-center">
+            {#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
+              <p class="col dark:text-white">
+                {studentMarksByExerciseId[student.id] ? studentMarksByExerciseId[student.id][exerciseId] || '-' : '-'}
+              </p>
+            {/each}
+          </div>
+        {/if}
+      {/each}
+
+      <div class="flex w-20 items-center">
+        <div class="text-sm">
+          <p class="col dark:text-white">
+            {calculateStudentTotal(studentMarksByExerciseId[student.id])}
+          </p>
+        </div>
+      </div>
+    </div>
+  {:else}
+    <Empty title={$t('course.navItem.marks.no_student')} icon={UserXIcon} variant="page" />
+  {/each}
+</div>
+
+<style>
+  .col {
+    text-align: center;
+    padding: 5px;
+    width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  .br {
+    border-right: 1px solid rgba(209, 213, 219, var(--tw-border-opacity));
+  }
+
+  .box {
+    height: 95px;
+  }
+
+  .lesson-number {
+    height: 30px;
+  }
+</style>

apps/dashboard/src/lib/features/course/pages/newsfeed.svelte

@@ -0,0 +1,289 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
+  import NewFeedModal from '$lib/components/Course/components/NewsFeed/NewFeedModal.svelte';
+  import NewsFeedCard from '$lib/components/Course/components/NewsFeed/NewsFeedCard.svelte';
+  import NewsFeedLoader from '$lib/components/Course/components/NewsFeed/NewsFeedLoader.svelte';
+  import { newsFeed } from '$lib/components/Course/components/NewsFeed/store';
+  import { group } from '$lib/components/Course/store';
+  import { RoleBasedSecurity } from '$features/ui';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
+  import {
+    createComment,
+    deleteNewsFeed,
+    deleteNewsFeedComment,
+    fetchNewsFeedReaction,
+    fetchNewsFeeds,
+    handleEditFeed,
+    toggleFeedIsPinned
+  } from '$lib/utils/services/newsfeed';
+  import { NOTIFICATION_NAME, triggerSendEmail } from '$lib/utils/services/notification/notification';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import type { Feed } from '$lib/utils/types/feed';
+  import PinIcon from '@lucide/svelte/icons/pin';
+  import { onMount } from 'svelte';
+  import type { AccountOrg } from '$features/app/types';
+  import Empty from '@cio/ui/custom/empty/empty.svelte';
+  import { BookIcon } from '@lucide/svelte';
+
+  interface Props {
+    courseId: string;
+  }
+
+  let { courseId }: Props = $props();
+
+  let createdComment;
+  let edit = $state(false);
+  let isLoading = $state(false);
+  let editFeed: Feed | null = $state(null);
+
+  let query = new URLSearchParams(page.url.search);
+  let feedId = query.get('feedId') || '';
+
+  const author = $derived.by(() => {
+    const groupMember = $group.people.find((person) => person.profile_id === $profile.id);
+
+    return {
+      id: groupMember?.id || '',
+      username: $profile.username || '',
+      fullname: $profile.fullname || '',
+      avatar_url: $profile.avatarUrl || ''
+    };
+  });
+
+  const onEdit = (id: string, content: string) => {
+    handleEditFeed(id, content);
+
+    $newsFeed = $newsFeed.map((feed) => {
+      if (feed.id === id) {
+        return { ...feed, content: content };
+      }
+
+      return feed;
+    });
+  };
+
+  const deleteComment = (id: string) => {
+    deleteNewsFeedComment(id);
+    $newsFeed = $newsFeed.flatMap((feed) => ({
+      ...feed,
+      comment: feed.comment.filter((comment) => comment.id !== id)
+    }));
+
+    return snackbar.success('snackbar.course.success.comment_deleted');
+  };
+
+  const addNewReaction = async (reactionType: string, feedId: string, authorId: string) => {
+    const { data } = await fetchNewsFeedReaction(feedId);
+
+    if (!data) return;
+
+    const reactedFeed = data || $newsFeed.find((feed) => feed.id === feedId);
+
+    let reactedAuthorIds: string[] = reactedFeed.reaction[reactionType];
+
+    if (reactedAuthorIds.includes(authorId)) {
+      reactedAuthorIds = reactedAuthorIds.filter((reactionAuthorId) => reactionAuthorId !== authorId);
+    } else {
+      reactedAuthorIds = [...reactedAuthorIds, authorId];
+    }
+
+    reactedFeed.reaction = {
+      ...reactedFeed.reaction,
+      [reactionType]: reactedAuthorIds
+    };
+
+    const response = await supabase
+      .from('course_newsfeed')
+      .update({
+        reaction: reactedFeed.reaction
+      })
+      .eq('id', feedId);
+
+    if (response.error) {
+      return snackbar.error('snackbar.course.error.reaction_error');
+    }
+
+    $newsFeed = $newsFeed.map((feed) => {
+      if (feed.id === feedId) {
+        feed.reaction = reactedFeed.reaction;
+      }
+
+      return feed;
+    });
+  };
+
+  const addNewComment = async (comment: string, feedId: string, authorId: string) => {
+    const { response } = await createComment({
+      content: comment,
+      author_id: authorId,
+      course_newsfeed_id: feedId
+    });
+
+    if (response.error) {
+      return snackbar.error('snackbar.course.error.commenting_error');
+    }
+
+    if (!response.data) return;
+
+    createdComment = response?.data[0];
+
+    triggerSendEmail(NOTIFICATION_NAME.NEWSFEED, {
+      authorId: author.id,
+      feedId: feedId,
+      comment
+    });
+
+    $newsFeed = $newsFeed.map((feed) => {
+      if (feed.id === feedId) {
+        const newComment = {
+          id: createdComment.id,
+          author: {
+            profile: { ...author }
+          },
+          created_at: createdComment.created_at,
+          content: comment
+        };
+
+        snackbar.success('snackbar.course.success.comment_added');
+
+        return {
+          ...feed,
+          comment: [...feed.comment, { ...newComment }]
+        };
+      }
+
+      return feed;
+    });
+  };
+
+  const onPin = async (feedId, isPinned) => {
+    const newIsPinned = !isPinned;
+    const { response } = await toggleFeedIsPinned(feedId, newIsPinned);
+
+    if (response.error) {
+      return snackbar.error('snackbar.course.error.toggle_error');
+    }
+
+    $newsFeed = $newsFeed.map((feed) => {
+      if (feed.id === feedId) {
+        snackbar.success(
+          `${
+            newIsPinned ? 'snackbar.course.success.pinned' : 'snackbar.course.success.unpinned'
+          } snackbar.course.success.successfully`
+        );
+
+        feed.isPinned = newIsPinned;
+        return feed;
+      }
+
+      return feed;
+    });
+  };
+
+  const deleteFeed = (id: string) => {
+    deleteNewsFeed(id);
+
+    const deletedFeed = $newsFeed.filter((feed) => feed.id !== id);
+    snackbar.success('snackbar.course.success.feed_delete_success');
+
+    $newsFeed = deletedFeed;
+  };
+
+  const initNewsFeed = async (courseId: string) => {
+    if (!courseId) return;
+    try {
+      isLoading = true;
+      const { data, error } = await fetchNewsFeeds(courseId);
+      if (error) {
+        snackbar.error('snackbar.course.error.news_feed_fail');
+      }
+      if (data) {
+        $newsFeed = data
+          .map((feedItem) => ({
+            ...feedItem,
+            isPinned: feedItem.is_pinned
+          }))
+          .sort((a, b) => Number(b.isPinned) - Number(a.isPinned));
+      }
+    } catch (error) {
+      snackbar.error('snackbar.course.error.feed_fetch_error');
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  function getPageRoles(org: AccountOrg) {
+    const roles: number[] = [1, 2];
+
+    if (org.customization.course.newsfeed) {
+      roles.push(3);
+    }
+
+    return roles;
+  }
+
+  onMount(() => {
+    initNewsFeed(courseId);
+  });
+</script>
+
+<RoleBasedSecurity
+  allowedRoles={getPageRoles($currentOrg)}
+  onDenied={() => {
+    goto(`/courses/${courseId}/lessons?next=true`);
+  }}
+>
+  <RoleBasedSecurity allowedRoles={[1, 2]}>
+    <NewFeedModal
+      {courseId}
+      {author}
+      bind:edit
+      bind:editFeed
+      onSave={(newFeed) => {
+        $newsFeed = [newFeed, ...$newsFeed];
+      }}
+      {onEdit}
+    />
+  </RoleBasedSecurity>
+  {#if isLoading}
+    <div>
+      <NewsFeedLoader />
+      <NewsFeedLoader />
+      <NewsFeedLoader />
+    </div>
+  {:else if !$newsFeed.length}
+    <Empty
+      title={$t('course.navItem.news_feed.body_header')}
+      description={$t('course.navItem.news_feed.body_content')}
+      icon={BookIcon}
+      class="h-full"
+    ></Empty>
+  {:else}
+    {#each $newsFeed as feed}
+      {#if feed.isPinned}
+        <div class="mb-3 flex items-center gap-2">
+          <PinIcon size={16} class="filled" />
+
+          <p class="text-sm">{$t('course.navItem.news_feed.pinned')}</p>
+        </div>
+      {/if}
+      <NewsFeedCard
+        {feed}
+        {deleteFeed}
+        {addNewComment}
+        {deleteComment}
+        {addNewReaction}
+        {onPin}
+        {author}
+        bind:edit
+        bind:editFeed
+        isActive={feedId === feed.id}
+      />
+    {/each}
+  {/if}
+</RoleBasedSecurity>
+

apps/dashboard/src/lib/features/course/pages/people.svelte

@@ -0,0 +1,248 @@
+<script lang="ts">
+  interface Props {
+    courseId: string;
+  }
+
+  let { courseId }: Props = $props();
+
+  import { page } from '$app/state';
+  import { goto } from '$app/navigation';
+  import { Input } from '@cio/ui/base/input';
+  import { Button } from '@cio/ui/base/button';
+  import * as Table from '@cio/ui/base/table';
+  import CopyIcon from '@lucide/svelte/icons/copy';
+  import TrashIcon from '@lucide/svelte/icons/trash';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import SearchIcon from '@lucide/svelte/icons/search';
+
+  import { Chip } from '@cio/ui/custom/chip';
+  import * as Avatar from '@cio/ui/base/avatar';
+  import { ComingSoon, RoleBasedSecurity } from '$features/ui';
+  import InvitationModal from '$lib/components/Course/components/People/InvitationModal.svelte';
+  import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
+
+  import { profile } from '$lib/utils/store/user';
+  import type { GroupPerson } from '$lib/utils/types';
+  import { group } from '$lib/components/Course/store';
+  import { t } from '$lib/utils/functions/translations';
+  import { shortenName } from '$lib/utils/functions/string';
+  import * as Select from '@cio/ui/base/select';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import { ROLE_LABEL, ROLES } from '$lib/utils/constants/roles';
+  import { deleteGroupMember } from '$lib/utils/services/courses';
+  import { deleteMemberModal } from '$lib/components/Course/components/People/store';
+
+  let member: { id?: string; email?: string; profile?: { email: string } } = $state({});
+  let filterBy: string = $state(`${ROLES[0].value}`);
+  let searchValue = $state('');
+  let copiedEmail = $state<string | null>(null);
+
+  const people: Array<GroupPerson> = $derived(sortAndFilterPeople($group.people, filterBy));
+
+  function filterPeople(_query, people) {
+    const query = _query.toLowerCase();
+    return people.filter((person) => {
+      const { profile, email } = person;
+      return profile?.fullname?.toLowerCase()?.includes(query) || email?.includes(query);
+    });
+  }
+
+  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);
+
+    await deleteGroupMember(member.id);
+  }
+
+  function sortAndFilterPeople(_people: Array<GroupPerson>, filterBy: string) {
+    return (_people || [])
+      .filter((person) => {
+        if (filterBy === 'all') return true;
+
+        return person.role_id === Number(filterBy);
+      })
+      .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) {
+    const { profile, email } = person;
+
+    return profile ? profile.email : email;
+  }
+
+  function obscureEmail(email) {
+    const [username, domain] = email.split('@');
+    const obscuredUsername =
+      username.charAt(0) + '*'.repeat(username.length - 2) + username.charAt(username.length - 1);
+
+    return `${obscuredUsername}@${domain}`;
+  }
+
+  function gotoPerson(person) {
+    goto(`${page.url.href}/${person.profile_id}`);
+  }
+
+  async function copyToClipboard(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      copiedEmail = text;
+      setTimeout(() => {
+        copiedEmail = null;
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }
+
+  const selectOptions = $derived(ROLES.map((role) => ({ label: $t(role.label), value: `${role.value}` })));
+</script>
+
+<InvitationModal />
+
+<DeleteConfirmation email={member.email || (member.profile && member.profile.email)} {deletePerson} />
+
+<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="relative max-w-[320px]">
+      <Input type="text" placeholder={$t('course.navItem.people.search')} bind:value={searchValue} class="w-full" />
+
+      <SearchIcon class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+    </div>
+    <div class="mb-3">
+      <Select.Root type="single" name="roles" bind:value={filterBy}>
+        <Select.Trigger class="mt-3 max-w-[80px]">
+          {$t(ROLE_LABEL[Number(filterBy)])}
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Group>
+            {#each selectOptions as option (option.value)}
+              <Select.Item value={option.value} label={option.label} disabled={option.value === filterBy}>
+                {option.label}
+              </Select.Item>
+            {/each}
+          </Select.Group>
+        </Select.Content>
+      </Select.Root>
+    </div>
+    <RoleBasedSecurity allowedRoles={[1, 2]}>
+      <p class="hidden w-20 text-lg lg:block dark:text-white"></p>
+    </RoleBasedSecurity>
+  </div>
+
+  <div class="rounded-md border">
+    <Table.Root>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head>{$t('course.navItem.people.name')}</Table.Head>
+          <Table.Head>{$t('course.navItem.people.role')}</Table.Head>
+          <Table.Head>{$t('course.navItem.people.action')}</Table.Head>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {#each filterPeople(searchValue, people) as person}
+          <Table.Row>
+            <!-- first column -->
+            <Table.Cell class="w-4/6 md:w-3/6">
+              {#if person.profile}
+                <div class="flex items-start lg:items-center">
+                  <Avatar.Root class="mr-3">
+                    <Avatar.Image
+                      src={person.profile.avatar_url ? person.profile.avatar_url : '/logo-192.png'}
+                      alt={person.profile.fullname ? person.profile.fullname : 'User'}
+                    />
+                    <Avatar.Fallback>{shortenName(person.profile.fullname) || 'U'}</Avatar.Fallback>
+                  </Avatar.Root>
+                  <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="ui:text-primary line-clamp-1 text-xs">
+                        {obscureEmail(getEmail(person))}
+                      </p>
+                    </div>
+                    <div class="flex items-center">
+                      <RoleBasedSecurity allowedRoles={[1, 2]}>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          class="h-8 w-8"
+                          onclick={() => copyToClipboard(getEmail(person))}
+                        >
+                          {#if copiedEmail === getEmail(person)}
+                            <CheckIcon size={16} class="text-green-600" />
+                          {:else}
+                            <CopyIcon size={16} />
+                          {/if}
+                        </Button>
+                      </RoleBasedSecurity>
+                      {#if person.profile_id == $profile.id}
+                        <ComingSoon label={$t('course.navItem.people.you')} />
+                      {/if}
+                    </div>
+                  </div>
+                </div>
+              {:else}
+                <div class="flex w-2/4 items-start lg:items-center">
+                  <Chip value={shortenName(person.email)} className="mr-3" />
+                  <a href="mailto:{person.email}" class="text-md ui:text-primary mr-2 dark:text-white">
+                    {person.email}
+                  </a>
+                  <div class="flex items-center justify-between">
+                    <RoleBasedSecurity allowedRoles={[1, 2]}>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        class="h-8 w-8"
+                        onclick={() => copyToClipboard(getEmail(person))}
+                      >
+                        {#if copiedEmail === getEmail(person)}
+                          <CheckIcon size={16} class="text-green-600" />
+                        {:else}
+                          <CopyIcon size={16} />
+                        {/if}
+                      </Button>
+                    </RoleBasedSecurity>
+
+                    <Chip value={$t('course.navItem.people.pending')} className="bg-yellow-200 text-yellow-700" />
+                  </div>
+                </div>
+              {/if}
+            </Table.Cell>
+
+            <!-- second column -->
+            <Table.Cell 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>
+            </Table.Cell>
+
+            <!-- third column -->
+            <Table.Cell class="w-1/4">
+              <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;
+                      }}
+                    >
+                      <TrashIcon size={16} />
+                    </IconButton>
+
+                    <Button variant="outline" onclick={() => gotoPerson(person)}>
+                      {$t('course.navItem.people.view')}
+                    </Button>
+                  {/if}
+                </div>
+              </RoleBasedSecurity>
+            </Table.Cell>
+          </Table.Row>
+        {/each}
+      </Table.Body>
+    </Table.Root>
+  </div>
+</section>

apps/dashboard/src/lib/features/course/pages/settings.svelte

@@ -0,0 +1,438 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { Label } from '@cio/ui/base/label';
+  import { Switch } from '@cio/ui/base/switch';
+  import * as RadioGroup from '@cio/ui/base/radio-group';
+  import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
+  import ArrowUpRightIcon from '@lucide/svelte/icons/arrow-up-right';
+
+  import ReorderMaterialTabs from '$features/course/components/reorder-material-tabs.svelte';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import { TextareaField } from '@cio/ui/custom/textarea-field';
+  import { InputField } from '@cio/ui/custom/input-field';
+  import * as Field from '@cio/ui/base/field';
+  import { UpgradeBanner, UnsavedChanges, UploadWidget } from '$features/ui';
+  import { Button } from '@cio/ui/base/button';
+
+  import { settings } from '$features/course/utils/settings-store';
+  import Copy from '@lucide/svelte/icons/copy';
+  import type { Course } from '$lib/utils/types';
+  import { COURSE_TYPE } from '$lib/utils/types';
+  import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
+  import { course } from '$lib/components/Course/store';
+  import { t } from '$lib/utils/functions/translations';
+  import { isObject } from '$lib/utils/functions/isObject';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import generateSlug from '$lib/utils/functions/generateSlug';
+  import { DeleteModal } from '$features/ui';
+  import { deleteCourse, updateCourse } from '$lib/utils/services/courses';
+  import { copyToClipboard } from '$lib/utils/functions/formatYoutubeVideo';
+  import { handleOpenWidget } from '$features/ui/course-landing-page/store';
+  import { currentOrg, currentOrgDomain, currentOrgPath, isFreePlan } from '$lib/utils/store/org';
+
+  let isLoading = $state(false);
+  let isDeleting = $state(false);
+  let errors: {
+    title: string | undefined;
+    description: string | undefined;
+  } = $state({
+    title: undefined,
+    description: undefined
+  });
+  let avatar: string | undefined;
+  let hasUnsavedChanges = $state(false);
+  let openDeleteModal = $state(false);
+
+  function widgetControl() {
+    $handleOpenWidget.open = !$handleOpenWidget.open;
+  }
+
+  function getLessonOrder(id: string) {
+    const index = $lessons.findIndex((lesson) => lesson.id === id);
+    if (index < 9) {
+      return '0' + (index + 1);
+    } else {
+      return index + 1;
+    }
+  }
+
+  const downloadCourse = async () => {
+    alert('Coming soon');
+    return;
+
+    isLoading = true;
+
+    try {
+      const lessonsList = $lessons.map((lesson) => ({
+        lessonTitle: lesson.title,
+        lessonNumber: getLessonOrder(lesson.id),
+        lessonNote: lesson.note,
+        slideUrl: lesson.slide_url || '',
+        video: lesson.videos || ''
+      }));
+
+      const response = await fetch('/downloadCourse', {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          courseTitle: $course.title,
+          orgName: $currentOrg.name,
+          orgTheme: $currentOrg.theme || '',
+          lessons: lessonsList
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(await response.text());
+      }
+
+      const data = await response.blob();
+      const file = new Blob([data], { type: 'application/pdf' });
+      const fileURL = URL.createObjectURL(file);
+
+      let a = document.createElement('a');
+      document.body.append(a);
+      a.download = $course.title + ' - ' + 'Course ';
+      a.href = fileURL;
+      a.click();
+      a.remove();
+
+      snackbar.success('snackbar.course_settings.success.download');
+    } catch (error) {
+      snackbar.error('snackbar.course_settings.error.not_right');
+    }
+
+    isLoading = false;
+  };
+
+  const deleteBannerImage = () => {
+    $settings.logo = '';
+    hasUnsavedChanges = true;
+  };
+
+  async function handleDeleteCourse() {
+    isDeleting = true;
+
+    try {
+      await deleteCourse($course.id);
+      goto($currentOrgPath + '/courses');
+    } catch (error) {
+      snackbar.error('snackbar.course_settings.error.went_wrong');
+    }
+
+    isDeleting = false;
+  }
+
+  export async function handleSave() {
+    if (!$settings.course_title) {
+      errors.title = $t('snackbar.course_settings.error.title');
+      return;
+    }
+
+    if (!$settings.course_description) {
+      errors.description = $t('snackbar.course_settings.error.description');
+      return;
+    }
+
+    try {
+      const updatedCourse = {
+        title: $settings.course_title,
+        description: $settings.course_description,
+        type: $settings.type,
+        logo: $settings.logo,
+        is_published: $settings.is_published,
+        metadata: {
+          ...(isObject($course.metadata) ? $course.metadata : {}),
+          lessonTabsOrder: $settings.tabs,
+          grading: $settings.grading,
+          lessonDownload: $settings.lesson_download,
+          allowNewStudent: $settings.allow_new_students
+        },
+        slug: $course.slug
+      };
+      await updateCourse($course.id, avatar ? new File([avatar], avatar) : undefined, updatedCourse);
+
+      $course = {
+        ...$course,
+        ...updatedCourse
+      };
+
+      snackbar.success('snackbar.course_settings.success.saved');
+
+      hasUnsavedChanges = false;
+    } catch (error) {
+      snackbar.error();
+    }
+  }
+
+  const generateNewCourseLink = () => {
+    $course.slug = generateSlug($course.title);
+    hasUnsavedChanges = true;
+  };
+
+  async function setDefault(course: Course) {
+    if (!course || !Object.keys(course).length) return;
+
+    untrack(() => {
+      settings.set({
+        course_title: course.title,
+        type: course.type,
+        course_description: course.description,
+        logo: course.logo || '',
+        tabs: course.metadata.lessonTabsOrder || $settings.tabs,
+        grading: !!course.metadata.grading,
+        lesson_download: !!course.metadata.lessonDownload,
+        is_published: !!course.is_published,
+        allow_new_students: course.metadata.allowNewStudent
+      });
+    });
+  }
+
+  $effect(() => {
+    setDefault($course);
+  });
+
+  let courseLink = $derived(`${$currentOrgDomain}/course/${$course.slug}`);
+</script>
+
+<UnsavedChanges bind:hasUnsavedChanges />
+
+<DeleteModal onDelete={handleDeleteCourse} bind:open={openDeleteModal} />
+
+<Field.Group class="max-w-md! w-full px-2">
+  <Field.Set>
+    <Field.Legend>{$t('course.navItem.settings.cover_image')}</Field.Legend>
+    <Field.Description>{$t('course.navItem.settings.optional_image')}</Field.Description>
+    <Field.Group>
+      <Field.Field>
+        <div class="flex items-center gap-2">
+          <Button onclick={widgetControl}>
+            {$t('course.navItem.settings.replace')}
+          </Button>
+          <Button variant="outline" onclick={deleteBannerImage}>
+            {$t('ai.reset')}
+          </Button>
+        </div>
+        {#if $handleOpenWidget.open}
+          <UploadWidget
+            bind:imageURL={$settings.logo}
+            onchange={() => {
+              hasUnsavedChanges = true;
+            }}
+          />
+        {/if}
+      </Field.Field>
+      <Field.Field>
+        <div class="relative z-20 w-fit">
+          <img
+            style="min-width:280px; min-height:200px"
+            alt="Course cover"
+            src={$settings.logo ? $settings.logo : '/images/classroomio-course-img-template.jpg'}
+            class="relative mt-2 h-[200px] w-[280px] rounded-md md:mt-0"
+          />
+        </div>
+      </Field.Field>
+    </Field.Group>
+  </Field.Set>
+
+  <Field.Separator />
+
+  <Field.Set id="share">
+    <Field.Legend>{$t('course.navItem.settings.course_details')}</Field.Legend>
+    <Field.Group>
+      <Field.Field>
+        <InputField
+          label={$t('course.navItem.settings.course_title')}
+          placeholder="Write the course title here"
+          className="w-full"
+          isRequired
+          bind:value={$settings.course_title}
+          errorMessage={errors?.title}
+          onInputChange={() => {
+            hasUnsavedChanges = true;
+          }}
+        />
+      </Field.Field>
+      <Field.Field>
+        <TextareaField
+          label={$t('course.navItem.settings.course_description')}
+          placeholder={$t('course.navItem.settings.placeholder')}
+          className="w-full"
+          isRequired
+          bind:value={$settings.course_description}
+          errorMessage={errors?.description}
+          onchange={() => {
+            hasUnsavedChanges = true;
+          }}
+        />
+      </Field.Field>
+      <Field.Field>
+        <Field.Label>{$t('course.navItem.settings.link')}</Field.Label>
+        <div class="mb-2 flex items-center gap-2">
+          <IconButton onclick={generateNewCourseLink}>
+            <RotateCcwIcon size={16} />
+          </IconButton>
+          <span class="grow"></span>
+          <IconButton onclick={() => goto(courseLink)}>
+            <ArrowUpRightIcon size={16} />
+          </IconButton>
+        </div>
+        <div class="flex items-center justify-between rounded-md border p-3">
+          {#if $course.slug}
+            <p class="text-sm">{courseLink}</p>
+            <IconButton
+              onclick={() => {
+                copyToClipboard(courseLink);
+              }}
+            >
+              <Copy size={16} />
+            </IconButton>
+          {:else}
+            <p class="text-sm">Setup landing page to get course link</p>
+          {/if}
+        </div>
+      </Field.Field>
+    </Field.Group>
+  </Field.Set>
+
+  <Field.Separator />
+
+  <Field.Set>
+    <Field.Legend>{$t('course.navItem.settings.order')}</Field.Legend>
+    <Field.Description>{$t('course.navItem.settings.drag')}</Field.Description>
+    <Field.Field>
+      <ReorderMaterialTabs
+        onchange={() => {
+          hasUnsavedChanges = true;
+        }}
+      />
+    </Field.Field>
+  </Field.Set>
+
+  <Field.Separator />
+
+  <Field.Set>
+    <Field.Legend>{$t('course.navItem.settings.lesson_download')}</Field.Legend>
+    <Field.Description>{$t('course.navItem.settings.available')}</Field.Description>
+    <Field.Field>
+      {#if $isFreePlan}
+        <UpgradeBanner>{$t('upgrade.download_lessons')}</UpgradeBanner>
+      {:else}
+        <div class="flex items-center space-x-2">
+          <Switch
+            id="lesson-download"
+            checked={$settings.lesson_download}
+            onCheckedChange={(checked) => {
+              $settings.lesson_download = checked;
+              hasUnsavedChanges = true;
+            }}
+          />
+          <Label for="lesson-download" class="text-sm text-gray-500">
+            {$settings.lesson_download ? $t('course.navItem.settings.enabled') : $t('course.navItem.settings.disabled')}
+          </Label>
+        </div>
+      {/if}
+    </Field.Field>
+  </Field.Set>
+
+  <Field.Separator />
+
+  <Field.Set>
+    <Field.Legend>{$t('course.navItem.settings.course_download')}</Field.Legend>
+    <Field.Description>{$t('course.navItem.settings.course_avail')}</Field.Description>
+    <Field.Field>
+      {#if $isFreePlan}
+        <UpgradeBanner>{$t('upgrade.download_course')}</UpgradeBanner>
+      {:else}
+        <Button variant="outline" onclick={downloadCourse} disabled={isLoading} loading={isLoading}>
+          {$t('course.navItem.settings.download')}
+        </Button>
+      {/if}
+    </Field.Field>
+  </Field.Set>
+
+  <Field.Separator />
+
+  <Field.Set>
+    <Field.Legend>{$t('course.navItem.settings.type')}</Field.Legend>
+    <Field.Description>{$t('course.navItem.settings.course_type_desc')}</Field.Description>
+    <Field.Field>
+      <RadioGroup.Root
+        value={$settings.type}
+        onValueChange={(value) => {
+          $settings.type = value as COURSE_TYPE;
+          if (hasUnsavedChanges) return;
+          hasUnsavedChanges = true;
+        }}
+      >
+        <div class="mb-3 flex items-center space-x-2">
+          <RadioGroup.Item value={COURSE_TYPE.LIVE_CLASS} id="live-class" />
+          <Label for="live-class">{$t('course.navItem.settings.live_class')}</Label>
+        </div>
+        <div class="flex items-center space-x-2">
+          <RadioGroup.Item value={COURSE_TYPE.SELF_PACED} id="self-paced" />
+          <Label for="self-paced">{$t('course.navItem.settings.self_paced')}</Label>
+        </div>
+      </RadioGroup.Root>
+    </Field.Field>
+  </Field.Set>
+
+  <Field.Separator />
+
+  <Field.Set>
+    <Field.Legend>{$t('course.navItem.settings.allow')}</Field.Legend>
+    <Field.Description>{$t('course.navItem.settings.access')}</Field.Description>
+    <Field.Field orientation="horizontal">
+      <Switch
+        id="allow-new-students"
+        checked={$settings.allow_new_students}
+        onCheckedChange={(checked) => {
+          $settings.allow_new_students = checked;
+          hasUnsavedChanges = true;
+        }}
+      />
+      <Label for="allow-new-students" class="text-sm text-gray-500">
+        {$settings.allow_new_students ? $t('course.navItem.settings.enabled') : $t('course.navItem.settings.disabled')}
+      </Label>
+    </Field.Field>
+  </Field.Set>
+
+  <Field.Separator />
+
+  <Field.Set>
+    <Field.Legend>{$t('course.navItem.settings.publish')}</Field.Legend>
+    <Field.Description>{$t('course.navItem.settings.determines')}</Field.Description>
+    <Field.Field orientation="horizontal">
+      <Switch
+        id="is-published"
+        checked={$settings.is_published}
+        onCheckedChange={(checked) => {
+          hasUnsavedChanges = true;
+          $settings.allow_new_students = checked;
+          if (!$course.slug) {
+            generateNewCourseLink();
+          }
+        }}
+      />
+      <Label for="is-published" class="text-sm text-gray-500">
+        {$settings.is_published ? $t('course.navItem.settings.published') : $t('course.navItem.settings.unpublished')}
+      </Label>
+    </Field.Field>
+  </Field.Set>
+
+  <Field.Separator />
+
+  <Field.Set id="delete">
+    <Field.Legend>{$t('course.navItem.settings.delete')}</Field.Legend>
+    <Field.Description>{$t('course.navItem.settings.delete_text')}</Field.Description>
+    <Field.Field>
+      <Button variant="destructive" onclick={() => (openDeleteModal = true)} loading={isDeleting} disabled={isDeleting}>
+        {$t('course.navItem.settings.delete')}
+      </Button>
+    </Field.Field>
+  </Field.Set>
+</Field.Group>

apps/dashboard/src/lib/features/course/pages/submissions.svelte

@@ -0,0 +1,445 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { flip } from 'svelte/animate';
+  import { goto } from '$app/navigation';
+  import { dndzone } from 'svelte-dnd-action';
+
+  import {
+    deleteSubmission,
+    fetchSubmissions,
+    updateQuestionAnswer,
+    updateSubmission
+  } from '$lib/utils/services/submissions';
+  import { course } from '$lib/components/Course/store';
+  import { t } from '$lib/utils/functions/translations';
+  import formatDate from '$lib/utils/functions/formatDate';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { formatAnswers } from '$lib/components/Course/function.js';
+  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
+  import isSubmissionEarly from '$lib/utils/functions/isSubmissionEarly';
+  import { NOTIFICATION_NAME, triggerSendEmail } from '$lib/utils/services/notification/notification';
+  import type { SubmissionIdData, SubmissionItem, SubmissionSection } from '$lib/utils/types/submission';
+
+  import { Skeleton } from '@cio/ui/base/skeleton';
+  import { Chip } from '@cio/ui/custom/chip';
+  import MarkExerciseModal from '$lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
+
+  interface Props {
+    courseId: string;
+  }
+
+  let { courseId }: Props = $props();
+
+  const flipDurationMs = 300;
+  let exerciseDetails: { id: string; title: string };
+  let lessonDetails: { id: string; title: string };
+  let totalMark = 0;
+  let maxMark = 0;
+  let submissionIdData: { [key: number]: SubmissionIdData } = $state({});
+  let isGradeWithAI = $state(false);
+  let fetching = $state(false);
+  let isSaving = $state(false);
+  let hasFetched = $state(false);
+
+  const submissionId = $derived(new URLSearchParams(page.url.search).get('submissionId') ?? '');
+  let openExercise = $derived.by(() => {
+    return !!submissionId && !!submissionIdData[submissionId];
+  });
+
+  const submissionStatus: { [key: number]: string } = {
+    1: $t('course.navItem.submissions.submission_status.submitted'),
+    2: $t('course.navItem.submissions.submission_status.in_progress'),
+    3: $t('course.navItem.submissions.submission_status.graded')
+  };
+
+  let sections: SubmissionSection[] = $state([
+    {
+      id: 1,
+      title: $t('course.navItem.submissions.submission_status.submitted'),
+      value: 0,
+      items: []
+    },
+    {
+      id: 2,
+      title: $t('course.navItem.submissions.submission_status.in_progress'),
+      value: 0,
+      items: []
+    },
+    {
+      id: 3,
+      title: $t('course.navItem.submissions.submission_status.graded'),
+      value: 10,
+      items: []
+    }
+  ]);
+
+  function getMaxPoints(questions) {
+    return (questions || []).reduce((acc, question) => acc + question.points, 0);
+  }
+
+  function calculateTotal(grades: string[]): number {
+    if (!grades) return 0;
+    return Object.values(grades).reduce((acc, grade) => acc + parseInt(grade), 0);
+  }
+
+  const notifyStudent = (submissionData) => {
+    maxMark = getMaxPoints(submissionData?.questions);
+    totalMark = calculateTotal(submissionData?.questionAnswerByPoint);
+
+    const { fullname, email } = submissionData?.student;
+    const { title, statusId }: { title: string; statusId: number } = submissionData;
+    const exerciseLink = `${$currentOrgDomain}/courses/${courseId}/lessons/${lessonDetails.id}/exercises/${exerciseDetails.id}`;
+
+    const content = `
+      <p>Hello ${fullname},</p>
+        <p>The status of your submitted exercise on <strong>${title}</strong> has been updated to ${
+          submissionStatus[statusId]
+        }</p>
+        ${
+          statusId == 3
+            ? `<p>Your score was ${totalMark}/${maxMark}</p>
+              <a class="button" href="${exerciseLink}">View your Result</a>
+            `
+            : `<a class="button" href="${exerciseLink}">Open Exercise</a>`
+        }
+        <p>This exercise is for <strong>${
+          lessonDetails.title
+        }</strong> in a course you are taking titled <strong>${$course.title}</strong></p>
+      `;
+
+    triggerSendEmail(NOTIFICATION_NAME.SUBMISSION_UPDATE, {
+      to: email,
+      content,
+      orgName: $currentOrg?.name
+    });
+  };
+
+  function handleItemFinalize(
+    columnIdx: number,
+    newItems: { map: (arg0: (item: SubmissionItem) => SubmissionItem) => SubmissionItem[] }
+  ) {
+    let itemToWithNewStatus: SubmissionItem | undefined;
+
+    const { id } = sections[columnIdx];
+
+    // Set column in the UI
+    sections[columnIdx].items = newItems.map((item) => {
+      if (item.statusId !== id) {
+        itemToWithNewStatus = item;
+        item.statusId = id;
+      }
+
+      return item;
+    });
+
+    // Update backend
+    if (itemToWithNewStatus) {
+      // Update key mapping for each submission also
+      submissionIdData[itemToWithNewStatus.id] = {
+        ...submissionIdData[itemToWithNewStatus.id],
+        statusId: itemToWithNewStatus.statusId
+      };
+
+      notifyStudent(submissionIdData[itemToWithNewStatus.id]);
+
+      updateSubmission({
+        id: itemToWithNewStatus.id,
+        status_id: itemToWithNewStatus.statusId
+      }).then((res) => console.log('Updated submission', res));
+    }
+  }
+
+  function handleDndConsiderCards(columnIdx: number) {
+    return function (e) {
+      sections[columnIdx].items = e.detail.items;
+    };
+  }
+
+  function handleDndFinalizeCards(columnIdx: number) {
+    return (e) => handleItemFinalize(columnIdx, e.detail.items);
+  }
+
+  function handleModalClose() {
+    isGradeWithAI = false;
+    goto(page.url.pathname);
+  }
+
+  // Via dialog
+  function updateStatus({
+    submissionId,
+    prevStatusId,
+    nextStatusId,
+    total
+  }: {
+    submissionId: string;
+    prevStatusId: number;
+    nextStatusId: number;
+    total: number;
+  }) {
+    let itemToWithNewStatus: SubmissionItem | undefined;
+
+    // Remove from current column
+    const { items } = sections[prevStatusId - 1];
+    sections[prevStatusId - 1].items = items?.filter((item) => {
+      if (item.id === submissionId) {
+        itemToWithNewStatus = Object.assign(item);
+        if (itemToWithNewStatus) {
+          itemToWithNewStatus.statusId = nextStatusId;
+        }
+        return false;
+      }
+
+      return true;
+    });
+    // Move to right column
+    if (itemToWithNewStatus) {
+      sections[nextStatusId - 1].items = [...sections[nextStatusId - 1].items, itemToWithNewStatus];
+    }
+
+    // If something changed
+    if (itemToWithNewStatus) {
+      // Update key mapping for each submission also
+      submissionIdData[itemToWithNewStatus.id] = {
+        ...submissionIdData[itemToWithNewStatus.id],
+        statusId: itemToWithNewStatus.statusId
+      };
+
+      notifyStudent(submissionIdData[itemToWithNewStatus.id]);
+      // Update backend
+      updateSubmission({
+        id: itemToWithNewStatus.id,
+        status_id: itemToWithNewStatus.statusId,
+        total
+      }).then((res) => console.log('Updated submission', res));
+    }
+  }
+
+  async function handleDeleteSubmission(id: string, statusId: number) {
+    const { items } = sections[statusId - 1];
+
+    sections[statusId - 1].items = items?.filter((item) => {
+      return item.id === id ? false : true;
+    });
+
+    submissionIdData[id] = undefined;
+
+    const { error } = await deleteSubmission(id);
+
+    if (error) {
+      console.error('Error deleting submission', error);
+      snackbar.error('course.navItem.submissions.grading_modal.delete_error');
+      return;
+    }
+
+    snackbar.success('course.navItem.submissions.grading_modal.delete_success');
+
+    handleModalClose();
+  }
+
+  async function handleSave(submission: { questionAnswerByPoint: any; questionAnswers: any; feedback: any }) {
+    isSaving = true;
+    const { questionAnswerByPoint, questionAnswers, feedback } = submission;
+
+    let totalPoints = 0;
+
+    for (const questionId in questionAnswerByPoint) {
+      if (Object.prototype.hasOwnProperty.call(questionAnswerByPoint, questionId)) {
+        const questionAnswer = questionAnswers.find(
+          (answer: { question_id: string }) => answer.question_id == questionId
+        );
+        const point = questionAnswerByPoint[questionId];
+
+        totalPoints += parseInt(point, 10);
+
+        const qaResponse = await updateQuestionAnswer({ point }, { id: questionAnswer?.id });
+
+        if (qaResponse.error) {
+          console.error('Error saving', qaResponse.error);
+          snackbar.error(`snackbar.something`);
+
+          return;
+        }
+      }
+    }
+
+    await updateSubmission({
+      id: submissionId,
+      total: totalPoints,
+      feedback: feedback
+    });
+
+    snackbar.success('snackbar.submissions.success.grading');
+
+    isSaving = false;
+  }
+
+  async function firstRender(courseId?: string) {
+    if (!courseId || hasFetched) return;
+
+    hasFetched = true;
+
+    fetching = true;
+    const { data: submissions } = await fetchSubmissions(courseId);
+    const sectionById: { [key: number]: SubmissionSection[] } = {};
+
+    if (submissions) {
+      for (const submission of submissions) {
+        const { id, created_at, answers, groupmember, feedback, exercise } = submission;
+
+        const isEarly = isSubmissionEarly(created_at, exercise.due_by);
+
+        const submissionItem = {
+          id,
+          statusId: submission.status_id,
+          isEarly,
+          feedback,
+          submittedAt: formatDate(created_at),
+          exercise: {
+            id: exercise.id,
+            title: exercise.title
+          },
+          answers,
+          student: groupmember && groupmember.profile ? groupmember.profile : {},
+          lesson: {
+            id: exercise.lesson.id,
+            title: exercise.lesson.title
+          }
+        };
+
+        exerciseDetails = { id: submissionItem.exercise.id, title: submissionItem.exercise.title };
+
+        lessonDetails = {
+          id: submissionItem.lesson.id,
+          title: submissionItem.lesson.title
+        };
+
+        submissionIdData[id] = {
+          id,
+          statusId: submissionItem.statusId,
+          feedback,
+          isEarly,
+          title: exercise.title,
+          student: submissionItem.student,
+          questions: exercise.questions,
+          answers: formatAnswers({ questions: exercise.questions, answers }),
+          questionAnswers: answers,
+          questionAnswerByPoint: answers.reduce((acc, answer) => {
+            acc[answer.question_id] = answer.point;
+
+            return acc;
+          }, {})
+        };
+
+        if (Array.isArray(sectionById[submission.status_id])) {
+          sectionById[submission.status_id].push(submissionItem);
+        } else {
+          sectionById[submission.status_id] = [submissionItem];
+        }
+      }
+    }
+
+    sections = sections.map((section, index) => ({
+      ...section,
+      value: Array.isArray(sectionById[index + 1]) ? sectionById[index + 1].length : 0,
+      items: Array.isArray(sectionById[index + 1]) ? sectionById[index + 1] : []
+    }));
+
+    fetching = false;
+  }
+
+  $effect(() => {
+    firstRender($course.id);
+  });
+</script>
+
+<MarkExerciseModal
+  bind:open={openExercise}
+  onClose={handleModalClose}
+  data={submissionIdData[submissionId] || {}}
+  {handleSave}
+  {updateStatus}
+  deleteSubmission={handleDeleteSubmission}
+  bind:isGradeWithAI
+  {isSaving}
+/>
+
+<div class="flex items-center overflow-x-scroll">
+  {#each sections as { id, title, items }, idx (id)}
+    <div
+      class="section ui:bg-muted mr-3 h-80 overflow-hidden rounded-md p-3"
+      animate:flip={{ duration: flipDurationMs }}
+    >
+      <div class="mb-2 flex items-center">
+        <Chip value={items.length} />
+        <p class="ml-2 dark:text-white">{title}</p>
+      </div>
+      {#if fetching}
+        <Skeleton class="my-2 h-[170px] w-full rounded-md" />
+        <Skeleton class="my-2 h-[170px] w-full rounded-md" />
+        <Skeleton class="my-2 h-[170px] w-full rounded-md" />
+      {:else}
+        <div
+          class="content mb-3 overflow-y-auto pr-2"
+          use:dndzone={{
+            items,
+            flipDurationMs,
+            dropTargetStyle: { outline: 'blue' }
+          }}
+          onconsider={handleDndConsiderCards(idx)}
+          onfinalize={handleDndFinalizeCards(idx)}
+        >
+          {#each items as item (item.id)}
+            <div
+              class="{item.isEarly
+                ? 'border-none'
+                : 'border border-red-700'} mx-0 my-2 w-full rounded-md bg-white px-3 py-3 dark:bg-neutral-800"
+              animate:flip={{ duration: flipDurationMs }}
+            >
+              <a
+                class="mb-2 flex w-full cursor-pointer items-center text-black"
+                href={`${page.url.pathname}?submissionId=${item.id}`}
+              >
+                <img alt="Student avatar" class="block h-6 w-6 rounded-full" src={item.student.avatar_url} />
+                <p class="ml-2 text-sm dark:text-white">
+                  {item.student.username}
+                </p>
+              </a>
+              <a class="ui:text-primary text-md" href="{page.url.pathname}?submissionId={item.id}">
+                {item.exercise.title}
+              </a>
+              <a
+                class="my-2 flex items-center text-black no-underline hover:underline"
+                href="{page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson.id}/exercises/{item.exercise
+                  .id}"
+              >
+                <p class="text-grey text-sm dark:text-white">
+                  #{item.lesson.title}
+                </p>
+              </a>
+              <p class="text-xs text-gray-500 dark:text-white">
+                {item.submittedAt}
+              </p>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .section {
+    max-width: 355px;
+    min-width: 355px;
+    height: 75vh;
+  }
+
+  .content {
+    height: 95%;
+  }
+  @media screen and (max-width: 768px) {
+    .section {
+      min-width: 250px;
+    }
+  }
+</style>

apps/dashboard/src/lib/features/course/utils/functions.ts

@@ -21,3 +21,11 @@ export function validateForm(fields) {
     fieldErrors
   };
 }
+
+export function calcProgressRate(progressRate?: number, totalLessons?: number): number {
+  if (!progressRate || !totalLessons) {
+    return 0;
+  }
+
+  return Math.round((progressRate / totalLessons) * 100);
+}

apps/dashboard/src/lib/features/course/utils/settings-store.ts

@@ -0,0 +1,19 @@
+import { COURSE_TYPE } from '$lib/utils/types';
+import { writable } from 'svelte/store';
+
+export const settings = writable({
+  logo: '',
+  course_title: '',
+  course_description: '',
+  grading: false,
+  type: COURSE_TYPE.LIVE_CLASS,
+  allow_new_students: false,
+  tabs: [
+    { id: 1, name: 'course.navItem.lessons.materials.tabs.note.title' },
+    { id: 2, name: 'course.navItem.lessons.materials.tabs.slide.title' },
+    { id: 3, name: 'course.navItem.lessons.materials.tabs.video.title' },
+    { id: 4, name: 'course.navItem.lessons.materials.tabs.document.title' }
+  ],
+  lesson_download: false,
+  is_published: false
+});

apps/dashboard/src/lib/features/lms/components/learning.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { Button } from '@cio/ui/base/button';
+  import { courses } from '$features/course/utils/store';
+  import { t } from '$lib/utils/functions/translations';
+  import { Empty } from '@cio/ui/custom/empty';
+  import BookOpenIcon from '@lucide/svelte/icons/book-open';
+
+  const gotoCourse = (id: string | undefined) => {
+    if (!id) return;
+    goto(`/courses/${id}/lessons?next=true`);
+  };
+
+  let last3Courses = $derived($courses.length > 0 ? $courses.slice(0, 3) : []);
+</script>
+
+<section class="h-full">
+  <p class="pb-3 text-base font-semibold text-[#040F2D] dark:text-white">
+    {$t('dashboard.current_lesson')}
+  </p>
+  <div
+    class="flex w-full flex-col items-center gap-2 rounded border border-[#EAEAEA] p-3 lg:h-[40vh] dark:bg-neutral-800"
+  >
+    {#if last3Courses.length > 0}
+      <div class="flex h-full w-full flex-col justify-start overflow-y-auto">
+        {#each last3Courses as course}
+          <div class="p-5">
+            <span class="flex flex-col items-start gap-3 pb-5 lg:flex-row">
+              <img
+                src={course.logo || '/images/classroomio-course-img-template.jpg'}
+                alt="course"
+                class="hidden lg:block lg:h-[60px] lg:w-[60px]"
+              />
+              <div class="w-full">
+                <p class="text-base font-semibold dark:text-white">{course.title}</p>
+                <p class="line-clamp-2 text-xs font-normal text-[#656565] dark:text-white">
+                  {course.description}
+                </p>
+              </div>
+              <Button variant="outline" onclick={() => gotoCourse(course.id)}>
+                {$t('dashboard.continue')}
+              </Button>
+            </span>
+            <div class="relative h-1 w-full bg-[#EAEAEA]">
+              <div
+                style="width: {Math.round(((course?.progress_rate ?? 0) / (course?.total_lessons ?? 0)) * 100) || 0}%"
+                class="bg-primary-700 absolute left-0 top-0 h-full"
+              ></div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <Empty title={$t('dashboard.no_courses')} description={$t('dashboard.start_course')} icon={BookOpenIcon} />
+    {/if}
+  </div>
+</section>
+

apps/dashboard/src/lib/features/lms/index.ts

@@ -0,0 +1,2 @@
+export { default as Learning } from './components/learning.svelte';
+export * from './pages';

apps/dashboard/src/lib/features/lms/pages/dashboard.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { courseMetaDeta, courses } from '$features/course/utils/store';
+  import { Learning } from '$features/lms';
+  import { Button } from '@cio/ui/base/button';
+  import { t } from '$lib/utils/functions/translations';
+  import { fetchCourses } from '$lib/utils/services/courses';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import { untrack } from 'svelte';
+
+  let hasFetched = false;
+
+  let totalCompleted = $derived($courses.reduce((acc, cur) => acc + (cur.progress_rate || 0), 0));
+  let totalLessons = $derived($courses.reduce((acc, cur) => acc + (cur.total_lessons || 0), 0));
+  let progressPercentage = $derived(Math.round((totalCompleted / totalLessons) * 100) || 0);
+
+  function getCourses(userId?: string, orgId?: string) {
+    if (hasFetched || !userId || !orgId) {
+      return;
+    }
+
+    untrack(async () => {
+      if (!$courses.length) {
+        $courseMetaDeta.isLoading = true;
+      }
+
+      const coursesResult = await fetchCourses(userId, orgId);
+      console.log(`coursesResult`, coursesResult);
+
+      $courseMetaDeta.isLoading = false;
+      if (!coursesResult) return;
+
+      courses.set(coursesResult.allCourses);
+      hasFetched = true;
+    });
+  }
+
+  $effect(() => {
+    getCourses($profile.id, $currentOrg.id);
+  });
+</script>
+
+<div class="flex h-fit w-full flex-col-reverse justify-between rounded-md border px-4 py-2 md:flex-row md:items-center">
+  <div class="w-full md:w-[75%] lg:w-[80%]">
+    <p class="mb-5 w-4/6 text-xs font-normal lg:text-xl">
+      {$currentOrg.customization.dashboard.bannerText
+        ? $currentOrg.customization.dashboard.bannerText
+        : $t('dashboard.lms_dashboard_hero')}
+    </p>
+    <Button onclick={() => goto('/lms/mylearning')}>
+      {$t('dashboard.continue_learning')}
+    </Button>
+  </div>
+  <img
+    src={$currentOrg.customization.dashboard.bannerImage
+      ? $currentOrg.customization.dashboard.bannerImage
+      : '/images/student-learning.svg'}
+    alt="student Learning Pictogram"
+    class="mb-3 aspect-square size-48 md:mb-0 md:block"
+  />
+</div>
+<section class="flex w-full flex-col md:gap-4 lg:flex-row">
+  <div class="mt-10 w-full lg:w-[50%] xl:mt-2">
+    <Learning />
+  </div>
+  <div class="mt-10 w-full lg:w-[50%] xl:mt-2">
+    <p class="pb-3 text-base font-semibold text-[#040F2D] dark:text-white">
+      {$t('dashboard.your_progress')}
+    </p>
+    <div
+      class="flex h-fit items-center justify-center gap-2 rounded border border-[#EAEAEA] p-3 lg:h-[40vh] lg:overflow-y-auto dark:bg-neutral-800"
+    >
+      <div
+        class="flex h-full w-full flex-col items-center justify-between gap-5 sm:flex-row lg:items-center lg:justify-around"
+      >
+        <div>
+          <img src="/images/target.svg" alt="student Learning score" />
+        </div>
+        <span class="text-center xl:text-start">
+          <p class="py-2 text-base font-semibold text-[#040F2D] dark:text-white">
+            {$t('dashboard.your_progress')}
+          </p>
+          {#if totalLessons > 0}
+            <p class="text-xs font-normal text-[#656565] dark:text-white">
+              {totalCompleted}/{totalLessons}
+              {$t('dashboard.lessons_completed')}
+            </p>
+          {:else}
+            <p class="text-xs font-normal text-[#656565] dark:text-white">
+              {$t('dashboard.no_courses_started')}
+            </p>
+          {/if}
+        </span>
+        <h1 class="my-0 whitespace-nowrap text-5xl text-[#262626] lg:text-6xl dark:text-white">
+          {progressPercentage} %
+        </h1>
+      </div>
+    </div>
+  </div>
+</section>

apps/dashboard/src/lib/features/lms/pages/exercises.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import cloneDeep from 'lodash/cloneDeep';
+  import { Chip } from '@cio/ui/custom/chip';
+  import { profile } from '$lib/utils/store/user';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { fetchLMSExercises } from '$lib/utils/services/lms/exercises';
+  import type { LMSExercise } from '$lib/utils/services/lms/exercises';
+  import { calDateDiff } from '$lib/utils/functions/date';
+  import { t } from '$lib/utils/functions/translations';
+
+  const defaultSections = [
+    {
+      id: 0,
+      title: $t('exercises.not_submitted'),
+      items: [],
+      className: 'text-[#E35353] bg-[#FDDFE4]'
+    },
+    {
+      id: 1,
+      title: $t('exercises.submitted'),
+      items: [],
+      className: 'text-orange-700 bg-orange-200'
+    },
+    {
+      id: 2,
+      title: $t('exercises.in_progress'),
+      items: [],
+      className: 'text-yellow-700 bg-yellow-200'
+    },
+    {
+      id: 3,
+      title: $t('exercises.graded'),
+      value: 0,
+      items: [],
+      className: 'text-green-700 bg-green-200'
+    }
+  ];
+  let sections: Section[] = $state(cloneDeep(defaultSections));
+  let hasFetched = $state(false);
+
+  interface Section {
+    id: number;
+    title: string;
+    className: string;
+    items: ExerciseItem[];
+  }
+
+  interface ExerciseItem {
+    courseTitle: string;
+    courseURL: string;
+    exerciseId: string;
+    exerciseTitle: string;
+    exerciseURL: string;
+    grade: string;
+    lessonNo: string;
+    lessonTitle: string;
+    lessonURL: string;
+    submissionStatus: number;
+    submissionUpdatedAt: string;
+  }
+
+  function generateSections(exercises: LMSExercise[]): Section[] {
+    const _sections: Section[] = cloneDeep(defaultSections);
+
+    for (const exercise of exercises) {
+      const { id, title, updated_at, submission, lesson, questions } = exercise;
+
+      const submissionItem = submission[0] || {
+        status_id: 0,
+        updated_at,
+        total: 0
+      };
+
+      const courseURL = `/courses/${lesson.course.id}`;
+      const lessonURL = `${courseURL}/lessons/${lesson.id}`;
+      const exerciseURL = `${lessonURL}/exercises/${id}`;
+
+      const grade = `${submissionItem.total}/${questions.reduce((acc, cur) => (acc += cur.points), 0)}`;
+
+      const item: ExerciseItem = {
+        exerciseId: id,
+        courseTitle: lesson.course.title,
+        courseURL,
+        exerciseTitle: title,
+        exerciseURL,
+        lessonTitle: lesson.title,
+        lessonNo: lesson.order < 9 ? '0' + (lesson.order + 1) : `${lesson.order}`,
+        lessonURL,
+        submissionStatus: submissionItem.status_id,
+        submissionUpdatedAt: calDateDiff(submissionItem.updated_at),
+        grade
+      };
+
+      _sections[submissionItem.status_id].items.push(item);
+    }
+
+    return _sections;
+  }
+
+  async function fetchData(profileId?: string, orgId?: string) {
+    if (hasFetched || !profileId || !orgId) {
+      return;
+    }
+
+    hasFetched = true;
+
+    const { exercises, error } = await fetchLMSExercises(profileId, orgId);
+    console.log('exercises', exercises);
+    console.log('error', error);
+
+    if (error) {
+      snackbar.error('snackbar.exercise.error_fetching');
+      return;
+    }
+
+    if (!exercises) return;
+
+    sections = generateSections(exercises);
+    console.log('sections', sections);
+  }
+
+  $effect(() => {
+    fetchData($profile.id, $currentOrg.id);
+  });
+</script>
+
+<div class="flex w-full items-center overflow-x-auto">
+  {#each sections as { title, items, className, id }}
+    <div
+      class="mr-3 h-[70vh] min-w-[355px] max-w-[355px] overflow-hidden rounded-md border border-gray-50 bg-gray-100 p-3 dark:border-neutral-700 dark:bg-black"
+    >
+      <div class="mb-2 flex items-center gap-2">
+        <p class="ml-2 dark:text-white">{title}</p>
+        <Chip value={items.length} {className} />
+      </div>
+      <div class="h-full overflow-y-auto pb-3 pr-2">
+        {#each items as item}
+          <div class=" mx-0 my-2 w-full rounded-md bg-white px-3 py-3 dark:bg-neutral-800">
+            <a class="ui:text-primary mb-2 flex w-full cursor-pointer items-center" href={item.courseURL}>
+              <p class="text-xs">{item.courseTitle}</p>
+            </a>
+            <a class="text-md text-black dark:text-white" href={item.exerciseURL}>
+              {#if id === 3}
+                ({item.grade}) -
+              {/if}
+              {item.exerciseTitle}
+            </a>
+            <a class="my-2 flex w-fit items-center text-black no-underline hover:underline" href={item.lessonURL}>
+              <p class="text-grey text-sm dark:text-white">
+                {$t('exercises.lesson')} <span class="italic">{item.lessonTitle}</span>
+              </p>
+            </a>
+            <p class="text-xs text-gray-500 dark:text-white">
+              {item.submissionUpdatedAt}
+            </p>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/each}
+</div>

apps/dashboard/src/lib/features/lms/pages/explore.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { onMount, untrack } from 'svelte';
+  import type { Course } from '$lib/utils/types';
+  import { profile } from '$lib/utils/store/user';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { t } from '$lib/utils/functions/translations';
+  import { CoursesPage } from '$features/course/pages';
+  import { courseMetaDeta } from '$features/course/utils/store';
+  import { fetchExploreCourses } from '$lib/utils/services/courses';
+
+  let searchValue = $state('');
+  let selectedId: string | undefined = $state('');
+  let hasFetched = false;
+  let exploreCourseList: Course[] = $state([]);
+
+  const filteredExploreCourses: Course[] = $derived(filterCourses(searchValue, selectedId || '', exploreCourseList));
+
+  function getCourses(userId?: string, orgId?: string) {
+    if (hasFetched || !userId || !orgId) {
+      return;
+    }
+
+    untrack(async () => {
+      $courseMetaDeta.isLoading = true;
+
+      const coursesResult = await fetchExploreCourses(userId, orgId);
+
+      $courseMetaDeta.isLoading = false;
+
+      if (!coursesResult) return;
+
+      exploreCourseList = coursesResult.allCourses;
+      hasFetched = true;
+    });
+  }
+
+  function filterCourses(searchValue: string, _selectedId: string | null, courses: Course[]) {
+    if (_selectedId) {
+      localStorage.setItem('classroomio_filter_course_key', _selectedId);
+    }
+
+    const coursesFiltered = courses.filter((course) => {
+      if (!searchValue || course.title.toLowerCase().includes(searchValue.toLowerCase())) {
+        return true;
+      }
+
+      return false;
+    });
+
+    if (_selectedId === '0') {
+      return coursesFiltered.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+    } else if (_selectedId === '1') {
+      return coursesFiltered.sort((a, b) => (b.total_lessons ?? 0) - (a.total_lessons ?? 0));
+    }
+
+    return coursesFiltered;
+  }
+
+  onMount(() => {
+    const courseView = localStorage.getItem('courseView') as 'grid' | 'list' | null;
+
+    if (courseView) {
+      $courseMetaDeta.view = courseView;
+    }
+
+    selectedId = localStorage.getItem('classroomio_filter_course_key') || '0';
+  });
+
+  $effect(() => {
+    getCourses($profile.id, $currentOrg.id);
+  });
+</script>
+
+<CoursesPage
+  courses={filteredExploreCourses}
+  emptyTitle={$t('explore.empty_heading')}
+  emptyDescription={$t('explore.empty_description')}
+  isExplore={true}
+  isLMS={true}
+  bind:searchValue
+  bind:selectedId
+/>

apps/dashboard/src/lib/features/lms/pages/index.ts

@@ -0,0 +1,4 @@
+export { default as DashboardPage } from './dashboard.svelte';
+export { default as ExplorePage } from './explore.svelte';
+export { default as MyLearningPage } from './mylearning.svelte';
+export { default as ExercisesPage } from './exercises.svelte';

apps/dashboard/src/lib/features/lms/pages/mylearning.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import * as UnderlineTabs from '@cio/ui/custom/underline-tabs';
+  import { CoursesPage } from '$features/course/pages';
+  import { fetchCourses } from '$lib/utils/services/courses';
+  import { profile } from '$lib/utils/store/user';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { t } from '$lib/utils/functions/translations';
+  import { courses, courseMetaDeta, coursesComplete, coursesInProgress } from '$features/course/utils/store';
+
+  let hasFetched = false;
+  let searchValue = $state('');
+
+  function getCourses(userId?: string, orgId?: string) {
+    if (hasFetched || !userId || !orgId) {
+      return;
+    }
+
+    untrack(async () => {
+      hasFetched = true;
+
+      if (!$courses.length) {
+        $courseMetaDeta.isLoading = true;
+      }
+
+      const coursesResult = await fetchCourses(userId, orgId);
+      console.log(`get courses result`, coursesResult);
+
+      $courseMetaDeta.isLoading = false;
+      if (!coursesResult) return;
+
+      courses.set(coursesResult.allCourses);
+      hasFetched = true;
+    });
+  }
+
+  $effect(() => {
+    getCourses($profile.id, $currentOrg.id);
+  });
+
+  let tabs = $derived([
+    {
+      label: `${$t('my_learning.progress')} (${$coursesInProgress.length})`,
+      value: '1'
+    },
+    {
+      label: `${$t('my_learning.complete')} (${$coursesComplete.length})`,
+      value: '2'
+    }
+  ]);
+  let currentTab = $state('1');
+</script>
+
+<UnderlineTabs.Root bind:value={currentTab}>
+  <UnderlineTabs.List>
+    {#each tabs as tab}
+      <UnderlineTabs.Trigger value={tab.value}>
+        {$t(tab.label)}
+      </UnderlineTabs.Trigger>
+    {/each}
+  </UnderlineTabs.List>
+  <UnderlineTabs.Content value={tabs[0].value}>
+    <CoursesPage
+      courses={$coursesInProgress}
+      emptyTitle={$t('my_learning.not_in_progress')}
+      emptyDescription={$t('my_learning.any_progress')}
+      bind:searchValue
+      isLMS={true}
+    />
+  </UnderlineTabs.Content>
+  <UnderlineTabs.Content value={tabs[1].value}>
+    <CoursesPage
+      courses={$coursesComplete}
+      emptyTitle={$t('my_learning.not_completed')}
+      emptyDescription={$t('my_learning.any_course')}
+      bind:searchValue
+      isLMS={true}
+    />
+  </UnderlineTabs.Content>
+</UnderlineTabs.Root>

apps/dashboard/src/lib/features/onboarding/api/onboarding.svelte.ts

@@ -8,7 +8,7 @@ import { handleLocaleChange } from '$lib/utils/functions/translations';
 import { onboardingValidation } from '../utils/validations';
 import { profile } from '$lib/utils/store/user';
 import { resolve } from '$app/paths';
-import { snackbar } from '$lib/components/Snackbar/store';
+import { snackbar } from '$features/ui/snackbar/store';
 
 export class OnboardingApi extends BaseApiWithErrors {
   step: OnboardingStep = $state(ONBOARDING_STEPS.ORG_SETUP);

apps/dashboard/src/lib/features/onboarding/components/verify-email-modal.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { Modal } from '$lib/components/Modal';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { snackbar } from '$lib/components/Snackbar/store';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { Button } from '@cio/ui/base/button';
+  import { snackbar } from '$features/ui/snackbar/store';
   import { t } from '$lib/utils/functions/translations';
   import { currentOrg } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
@@ -72,8 +72,12 @@
   });
 </script>
 
-<Modal {open} isCloseable={false} width="w-4/5" maxWidth="w-[500px]" containerClass="p-4">
-  <div class="flex flex-col items-center space-y-6 text-center">
+<Dialog.Root {open}>
+  <Dialog.Content class="w-4/5 max-w-[500px] p-4" showCloseButton={false}>
+    <Dialog.Header>
+      <Dialog.Title>{$t('verify_email_modal.heading')}</Dialog.Title>
+    </Dialog.Header>
+    <div class="flex flex-col items-center space-y-6 text-center">
     <img src="/verify-email.svg" alt="email verification" />
     <p class="text-xl">{$t('verify_email_modal.heading')}</p>
     <p class="w-[70%] text-sm text-gray-700 dark:text-gray-200">
@@ -83,13 +87,13 @@
     </p>
 
     <div class="flex flex-col items-center">
-      <PrimaryButton isDisabled={loading || isSent} className="font-normal" onClick={sendVerificationCode}>
+      <Button disabled={loading || isSent} onclick={sendVerificationCode}>
         {#if loading}
           {$t('verify_email_modal.loading')}
         {:else}
           {$t('verify_email_modal.resend')}
         {/if}
-      </PrimaryButton>
+      </Button>
       {#if isSent}
         <p class="text-xs text-gray-700">
           {$t('verify_email_modal.resend_in')}
@@ -99,4 +103,5 @@
       {/if}
     </div>
   </div>
-</Modal>
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/onboarding/components/welcome-modal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Modal } from '$lib/components/Modal';
+  import * as Dialog from '@cio/ui/base/dialog';
   import { page } from '$app/state';
   import { goto } from '$app/navigation';
   import { currentOrgPath } from '$lib/utils/store/org';
@@ -27,13 +27,23 @@
   };
 </script>
 
-<Modal onClose={closeModal} isClosing={isLoading} {open} width="w-9/12" maxWidth="w-[800px]" modalHeading="Welcome">
-  <p class="text-sm text-black md:text-base lg:text-lg dark:text-white">
-    {$t('welcome_modal.we_at')}
-    <a href="https://app.classroomio.com/" class="text-primary-700 no-underline hover:no-underline">ClassroomIO</a>
-    {$t('welcome_modal.small_team')}
-    <span class="text-primary-700">{$t('welcome_modal.thank_you')};</span>
-    {$t('welcome_modal.deeply_appreciate')}
-  </p>
-  <img src="/images/welcome-img.svg" alt="A welcome banner" class="my-6 w-full" />
-</Modal>
+<Dialog.Root
+  {open}
+  onOpenChange={(isOpen) => {
+    if (!isOpen && !isLoading) closeModal();
+  }}
+>
+  <Dialog.Content class="w-9/12 w-[800px]">
+    <Dialog.Header>
+      <Dialog.Title>Welcome</Dialog.Title>
+    </Dialog.Header>
+    <p class="text-sm text-black md:text-base lg:text-lg dark:text-white">
+      {$t('welcome_modal.we_at')}
+      <a href="https://app.classroomio.com/" class="ui:text-primary no-underline hover:no-underline">ClassroomIO</a>
+      {$t('welcome_modal.small_team')}
+      <span class="ui:text-primary">{$t('welcome_modal.thank_you')};</span>
+      {$t('welcome_modal.deeply_appreciate')}
+    </p>
+    <img src="/images/welcome-img.svg" alt="A welcome banner" class="my-6 w-full" />
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/org/api/dash-stats.svelte.ts

@@ -1,6 +1,6 @@
 import { BaseApi, classroomio } from '$lib/utils/services/api';
 
-import type { DashStatsSuccess } from '$lib/features/org/utils/types';
+import type { DashStatsSuccess } from '$features/org/utils/types';
 
 /**
  * API class for organization dashboard analytics

apps/dashboard/src/lib/features/org/api/org.svelte.ts

@@ -12,7 +12,7 @@ import type { TCreateOrganization, TGetOrganizations, TUpdateOrganization } from
 import { ZCreateOrganization, ZUpdateOrganization } from '@cio/utils/validation/organization';
 import { currentOrg, orgs } from '$lib/utils/store/org';
 
-import type { AccountOrg } from '$lib/features/app/types';
+import type { AccountOrg } from '$features/app/types';
 import type { GetTeamResponse } from '../utils/types';
 import { ROLE } from '@cio/utils/constants';
 import { ROLE_LABEL } from '$lib/utils/constants/roles';
@@ -21,7 +21,7 @@ import { get } from 'svelte/store';
 import { goto } from '$app/navigation';
 import { mapZodErrorsToTranslations } from '$lib/utils/validation';
 import { resolve } from '$app/paths';
-import { snackbar } from '$lib/components/Snackbar/store';
+import { snackbar } from '$features/ui/snackbar/store';
 import { t } from '$lib/utils/functions/translations';
 import { uploadImage } from '$lib/utils/services/upload';
 
@@ -194,8 +194,14 @@ class OrgApi extends BaseApiWithErrors {
    * Updates an organization
    * @param orgId Organization ID
    * @param fields Organization update data (name, avatar, theme, landingpage)
+   * @param options Options for the update operation
+   * @param options.onSuccess Callback function to be called on success
    */
-  async update(orgId: string, fields: TOrgUpdateForm) {
+  async update(
+    orgId: string,
+    fields: TOrgUpdateForm,
+    options: { onSuccess?: (data: TUpdateOrganization) => void } = {}
+  ) {
     const result = ZUpdateOrganization.safeParse(fields);
 
     if (!result.success) {
@@ -233,6 +239,10 @@ class OrgApi extends BaseApiWithErrors {
           return;
         }
 
+        if (options.onSuccess) {
+          return options.onSuccess(response.data);
+        }
+
         orgs.update((_orgs) =>
           _orgs.map((org) => {
             if (org.id === orgId) {

apps/dashboard/src/lib/features/org/components/add-org-modal/add-org-modal.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { preventDefault } from '$lib/utils/functions/svelte';
+
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { Input } from '@cio/ui/base/input';
+  import { DomainInput } from '@cio/ui/custom/domain-input';
+  import { Button } from '@cio/ui/base/button';
+  import * as Field from '@cio/ui/base/field';
+  import { generateSitename } from '$lib/utils/functions/org';
+  import { newOrgModal } from '../new-org-modal-store';
+  import { t } from '$lib/utils/functions/translations';
+  import { orgApi } from '$features/org/api/org.svelte';
+
+  let orgName = $state('');
+  let siteName = $derived(generateSitename(orgName));
+
+  function resetForm() {
+    orgName = '';
+    siteName = '';
+    orgApi.errors = {};
+  }
+
+  async function createNewOrg() {
+    await orgApi.create({ name: orgName, siteName });
+
+    if (orgApi.success) {
+      $newOrgModal.open = false;
+      resetForm();
+    }
+  }
+</script>
+
+<Dialog.Root
+  bind:open={$newOrgModal.open}
+  onOpenChange={(isOpen) => {
+    if (!isOpen) $newOrgModal.open = false;
+  }}
+>
+  <Dialog.Content class="w-96">
+    <Dialog.Header>
+      <Dialog.Title>{$t('add_org.create_org')}</Dialog.Title>
+    </Dialog.Header>
+    <form onsubmit={preventDefault(createNewOrg)} class="px-2">
+    <Field.Group>
+      <Field.Field>
+        <Field.Label>{$t('add_org.name')}</Field.Label>
+        <Input bind:value={orgName} placeholder="e.g Pepsi Co" autofocus />
+        {#if orgApi.errors.name || orgApi.errors.orgName}
+          <Field.Error>{orgApi.errors.name || orgApi.errors.orgName}</Field.Error>
+        {/if}
+      </Field.Field>
+
+      <Field.Field>
+        <Field.Label>{$t('add_org.org_sitename')}</Field.Label>
+        <DomainInput bind:value={siteName} placeholder="myschool" prefix="https://" suffix=".classroomio.com" />
+        {#if orgApi.errors.siteName || orgApi.errors.general}
+          <Field.Error>{orgApi.errors.siteName || orgApi.errors.general}</Field.Error>
+        {/if}
+      </Field.Field>
+
+      <Field.Field orientation="horizontal">
+        <Button type="submit" loading={orgApi.isLoading} class="ml-auto">
+          {$t('add_org.create')}
+        </Button>
+      </Field.Field>
+    </Field.Group>
+  </form>
+  </Dialog.Content>
+</Dialog.Root>
+

apps/dashboard/src/lib/features/org/components/image-renderer.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Skeleton } from '@cio/ui/base/skeleton';
+
+  import { t } from '$lib/utils/functions/translations';
+
+  let { src, className, alt }: { src: string | undefined; className?: string; alt?: string } = $props();
+
+  function loadImage(src: string | undefined): Promise<void> {
+    if (!src) return Promise.reject();
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => resolve();
+      img.onerror = reject;
+      img.src = src;
+    });
+  }
+</script>
+
+{#await loadImage(src)}
+  <div class="flex max-h-[215px] w-full items-center justify-center rounded bg-gray-100 dark:bg-neutral-800">
+    <Skeleton class={className} />
+  </div>
+{:then}
+  <img {src} {alt} class={className} />
+{:catch}
+  <div class="flex h-[200px] w-full items-center justify-center rounded bg-gray-100 dark:bg-neutral-800">
+    <p class="text-sm text-red-600">{$t('courses.course_card.error_message')}</p>
+  </div>
+{/await}
+

apps/dashboard/src/lib/features/org/components/landing-page/landing-page.svelte

@@ -0,0 +1,576 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { fade } from 'svelte/transition';
+  import MailIcon from '@lucide/svelte/icons/mail';
+  import PhoneIcon from '@lucide/svelte/icons/phone';
+  import RocketIcon from '@lucide/svelte/icons/rocket';
+  import MapPinIcon from '@lucide/svelte/icons/map-pin';
+  import TwitterIcon from '@lucide/svelte/icons/twitter';
+  import FacebookIcon from '@lucide/svelte/icons/facebook';
+  import LinkedinIcon from '@lucide/svelte/icons/linkedin';
+  import { preventDefault } from '$lib/utils/functions/svelte';
+
+  import Navigation from '$lib/components/Navigation/index.svelte';
+  import { PoweredBy } from '$features/ui';
+  import { CourseCardList, CourseCardLoader } from '$features/course/components';
+  import { landingPageSettings } from '$features/org/components/settings/landing-page-store';
+  import { CoursesEmptyIcon } from '$features/ui/icons';
+
+  import PageLoader from './page-loader.svelte';
+  import * as Accordion from '@cio/ui/base/accordion';
+  import * as Button from '@cio/ui/base/button';
+  import * as Field from '@cio/ui/base/field';
+  import { Input } from '@cio/ui/base/input';
+  import { Textarea } from '@cio/ui/base/textarea';
+  import { Empty } from '@cio/ui/custom/empty';
+  import { t } from '$lib/utils/functions/translations';
+  import type { AccountOrg } from '$features/app/types';
+  import { orgApi } from '$features/org/api/org.svelte';
+  import { validateEmail } from '$lib/utils/functions/validateEmail';
+  import { courseMetaDeta, courses } from '$features/course/utils/store';
+  import { orgLandingpageValidation } from '$lib/utils/functions/validator';
+
+  interface Props {
+    orgSiteName?: string;
+    org: AccountOrg;
+  }
+
+  let { orgSiteName = '', org }: Props = $props();
+
+  let email: string | undefined = $state('');
+  let isAdding = $state(false);
+  let success = $state(false);
+  let successContactSaved = $state(false);
+  let viewAll = $state(false);
+  let isContactSubmiting = $state(false);
+  let player = $state();
+  let contact = $state({
+    name: '',
+    email: '',
+    phone: '',
+    message: ''
+  });
+  let contactError: Record<string, string> = $state({});
+
+  async function handleSubmit() {
+    if (!email || !validateEmail(email) || !org) return;
+    isAdding = true;
+
+    // TODO: Implement email list submission
+
+    success = true;
+    setTimeout(() => {
+      isAdding = false;
+      success = false;
+      email = undefined;
+    }, 5000);
+  }
+
+  async function handleContactSubmit() {
+    isContactSubmiting = true;
+    contactError = orgLandingpageValidation(contact);
+    if (Object.keys(contactError).length) {
+      isContactSubmiting = false;
+      return;
+    }
+
+    // Save to db
+    // TODO: Implement contact submission
+
+    isContactSubmiting = false;
+    successContactSaved = true;
+    contact = {
+      name: '',
+      email: '',
+      phone: '',
+      message: ''
+    };
+  }
+  function isYouTubeLink(link: string) {
+    const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+
+    return youtubeRegex.test(link.trim());
+  }
+
+  function loadData(siteName) {
+    if (!siteName) return;
+
+    untrack(async () => {
+      try {
+        $courseMetaDeta.isLoading = true;
+        await orgApi.getCourseBySiteName(siteName);
+        if (orgApi.error) {
+          console.error('Error fetching courses', orgApi.error);
+          courses.set([]);
+        } else {
+          courses.set(orgApi.orgSiteCourses);
+        }
+        $courseMetaDeta.isLoading = false;
+      } catch (error) {
+        console.log('error', error);
+        $courseMetaDeta.isLoading = false;
+      }
+    });
+  }
+
+  function initPlyr(_player: any, _video: string | undefined) {
+    if (!player) return;
+
+    // @ts-ignore
+    const plyr = new Plyr('#player', { width: '400px', height: '300px', borderRadius: '10px' });
+    // @ts-ignore
+    window.player = plyr;
+  }
+
+  // Use default data in store if user hasn't added their own content to landing page
+  function setDefault(landingpage) {
+    if (landingpage && Object.keys(landingpage).length) {
+      if (!landingpage?.header?.banner) {
+        landingpage.header.banner = $landingPageSettings.header.banner;
+      }
+
+      untrack(() => {
+        $landingPageSettings = {
+          ...landingpage
+        };
+      });
+    }
+  }
+
+  function getBgImage(settings) {
+    const defaultImg = '/images/org-landingpage-banner.jpeg';
+
+    const { show, image } = settings.header.background || {
+      show: true,
+      image: defaultImg
+    };
+
+    if (!show) {
+      return undefined;
+    }
+
+    return `url('${image || defaultImg}')`;
+  }
+
+  $effect(() => {
+    loadData(orgSiteName);
+  });
+  $effect(() => {
+    initPlyr(player, $landingPageSettings.header?.banner?.video);
+  });
+  $effect(() => {
+    setDefault(org?.landingpage);
+  });
+</script>
+
+<svelte:head>
+  <title>
+    {!org?.name ? '' : `${org.name}'s `}{$t('course.navItem.landing_page.landing_page')}
+  </title>
+</svelte:head>
+
+<PoweredBy />
+
+{#if !org?.landingpage}
+  <PageLoader />
+{:else}
+  <main>
+    <Navigation
+      logo={org.avatarUrl}
+      orgName={org.name}
+      disableSignup={true}
+      isOrgSite={true}
+      customLinks={$landingPageSettings.customLinks}
+    />
+    <!-- Header Section -->
+    {#if $landingPageSettings.header.show}
+      <header
+        id="header"
+        class={`relative mb-10 h-screen w-full md:h-[90vh] ${
+          $landingPageSettings.header.background?.show ? 'bg-cover bg-center' : 'border-b border-gray-300'
+        }`}
+        style="background-image: {getBgImage($landingPageSettings)}"
+      >
+        <div class="absolute top-0 z-10 h-screen w-full bg-white opacity-80 md:h-[90vh]"></div>
+        {#if $landingPageSettings.header.banner.show}
+          <div class="flex items-center justify-center py-2 md:h-full">
+            <div
+              class="relative z-20 flex w-full flex-col-reverse items-center justify-center md:w-11/12 md:flex-row md:justify-between lg:w-5/6"
+            >
+              <!-- Org Description -->
+              <div class="mr-3 flex w-11/12 flex-col items-center py-10 md:w-2/5 md:items-start">
+                <p class="ui:text-primary text-2xl font-semibold capitalize">
+                  {org.name}
+                </p>
+                <h1 class="my-4 text-center text-4xl md:text-start md:text-5xl lg:text-6xl">
+                  {$landingPageSettings.header.title} <br /><span class="ui:text-primary"
+                    >{$landingPageSettings.header.titleHighlight}</span
+                  >
+                </h1>
+                <p class="text-md mb-3 text-center text-xl md:mb-5 md:text-start">
+                  {$landingPageSettings.header.subtitle}
+                </p>
+
+                <Button.Root
+                  class="mt-2 w-fit px-10 md:mt-5"
+                  onclick={() => {
+                    $landingPageSettings.header.action.redirect && goto($landingPageSettings.header.action.link);
+                  }}
+                >
+                  {$landingPageSettings.header.action.label}
+                </Button.Root>
+              </div>
+
+              <div class="flex w-5/6 md:w-1/2 md:max-w-[650px]">
+                {#if isYouTubeLink($landingPageSettings.header?.banner?.video) && $landingPageSettings.header.banner.type === 'video'}
+                  <div bind:this={player} id="player" style="width:100%; border-radius:12px">
+                    <iframe
+                      title={$t('course.navItem.landing_page.header_video')}
+                      src={$landingPageSettings.header?.banner?.video}
+                      allowfullscreen
+                      allowtransparency
+                      allow="autoplay"
+                    ></iframe>
+                  </div>
+                {:else}
+                  <!-- <video class="w-full rounded-xl" controls loop autoplay>
+                      <source src={$landingPageSettings.header?.banner?.video} type="video/mp4" />
+                      <source src="/path/to/video.webm" type="video/webm" />
+                      Captions are optional
+                      <track kind="captions" />
+                    </video> -->
+                  <img class="rounded-md" src={$landingPageSettings.header?.banner?.image} alt="landing page banner" />
+                {/if}
+              </div>
+            </div>
+          </div>
+        {:else}
+          <div class="relative z-20 flex h-full w-full items-center justify-center md:flex-row">
+            <div class="mx-auto flex w-11/12 max-w-[600px] flex-col items-center py-10">
+              <p class=" ui:text-primary text-2xl font-semibold capitalize">{org.name}</p>
+              <h1 class="my-4 text-center text-4xl md:text-5xl lg:text-6xl">
+                {$landingPageSettings.header.title} <br /><span class="ui:text-primary"
+                  >{$landingPageSettings.header.titleHighlight}</span
+                >
+              </h1>
+              <p class="text-md mb-6 text-center text-xl">
+                {$landingPageSettings.header.subtitle}
+              </p>
+
+              <Button.Root
+                class="mt-5 w-fit px-10"
+                onclick={() => {
+                  $landingPageSettings.header.action.redirect && goto($landingPageSettings.header.action.link);
+                }}
+              >
+                {$landingPageSettings.header.action.label}
+              </Button.Root>
+            </div>
+          </div>
+        {/if}
+      </header>
+    {/if}
+
+    <!-- Our Story section -->
+    {#if $landingPageSettings.aboutUs.show}
+      <section id="aboutus" class="m-h-[400px] mx-auto my-10 w-full max-w-6xl">
+        <div class="mx-4 flex flex-col items-center justify-evenly lg:flex-row">
+          <div class="mb-5 mr-5 max-w-[600px] lg:mb-0 lg:w-2/5">
+            <h2 class="text-4xl md:text-5xl lg:text-6xl">{$landingPageSettings.aboutUs.title}</h2>
+            <p class="mb-2">
+              {$landingPageSettings.aboutUs.content}
+            </p>
+          </div>
+
+          <div class="image">
+            <img src={$landingPageSettings.aboutUs.imageUrl} alt="Our Story" class=" max-h-[450px] rounded-2xl" />
+          </div>
+        </div>
+      </section>
+    {/if}
+
+    <!-- Courses Section -->
+    {#if $landingPageSettings.courses.show}
+      <section id="courses" transition:fade class="mx-auto my-10 w-full max-w-6xl">
+        <div class="w-full">
+          <div class="mx-auto w-11/12 max-w-[500px] py-10">
+            <h1 class="my-4 text-center text-4xl md:text-5xl lg:text-6xl">
+              {$landingPageSettings.courses.title}
+              <span class="text-primary">{$landingPageSettings.courses.titleHighlight}</span>
+            </h1>
+            <p class="text-md text-center">
+              {$landingPageSettings.courses.subtitle}
+            </p>
+          </div>
+        </div>
+        {#if $courseMetaDeta.isLoading}
+          <div class="cards-container mx-2 my-4">
+            <CourseCardLoader />
+            <CourseCardLoader />
+            <CourseCardLoader />
+          </div>
+        {:else if $courses.length > 0}
+          <CourseCardList courses={$courses.slice(0, viewAll ? $courses.length : 3)} isOnLandingPage={true} />
+        {:else}
+          <Empty
+            icon={CoursesEmptyIcon}
+            title={$t('course.navItem.landing_page.no_course_published')}
+            description={$t('course.navItem.landing_page.coming_your_way')}
+            variant="page"
+          />
+        {/if}
+
+        {#if $courses.length > 3}
+          <div class="mt-3 flex w-full justify-center">
+            <Button.Root variant="outline" onclick={() => (viewAll = !viewAll)} class="w-fit px-10 py-5">
+              {viewAll ? $t('course.navItem.landing_page.view_less') : $t('course.navItem.landing_page.view_all')}
+            </Button.Root>
+          </div>
+        {/if}
+      </section>
+    {/if}
+
+    <!-- FAQ Section -->
+    {#if $landingPageSettings.faq.show}
+      <section id="faq" transition:fade class="mx-auto my-10 w-full max-w-[700px]">
+        <div class="py-10">
+          <h1 class="my-4 text-center text-4xl md:text-5xl lg:text-6xl">
+            {$landingPageSettings.faq.title}
+          </h1>
+        </div>
+        <div class="mx-2">
+          <Accordion.Root type="single" class="w-full">
+            {#each $landingPageSettings.faq.questions as faq, index}
+              <Accordion.Item value="item-{index}">
+                <Accordion.Trigger>
+                  {faq.title}
+                </Accordion.Trigger>
+                <Accordion.Content>
+                  {faq.content}
+                </Accordion.Content>
+              </Accordion.Item>
+            {/each}
+          </Accordion.Root>
+        </div>
+      </section>
+    {/if}
+
+    <!-- Contact Section-->
+    {#if $landingPageSettings.contact.show}
+      <section id="contact" transition:fade class="ui:bg-primary-foreground my-10 w-full">
+        <div class="mx-auto w-full max-w-6xl">
+          <div class="mx-auto w-11/12 max-w-[500px] py-10">
+            <h1 class="my-4 text-center text-4xl md:text-5xl lg:text-6xl">
+              {$landingPageSettings.contact.title}
+              <span class="ui:text-primary">{$landingPageSettings.contact.titleHighlight}</span>
+            </h1>
+            <p class="text-md text-center">{$landingPageSettings.contact.subtitle}</p>
+          </div>
+          <div class="mx-auto max-w-[700px] pb-10">
+            <!-- Contact Details -->
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+              <div
+                class="mx-2 flex cursor-pointer flex-col items-center justify-center break-all rounded-lg border py-2 text-center transition-all duration-500"
+              >
+                <MapPinIcon size={16} class="filled" />
+                <p class="mt-3 max-w-[200px] text-xs md:text-sm">
+                  {$landingPageSettings.contact.address}
+                </p>
+              </div>
+              <div
+                class="mx-2 flex cursor-pointer flex-col items-center justify-center break-all rounded-lg border py-2 text-center transition-all duration-500"
+              >
+                <PhoneIcon size={16} />
+                <p class="mt-3 text-xs md:text-sm">{$landingPageSettings.contact.phone}</p>
+              </div>
+              <div
+                class="mx-2 flex cursor-pointer flex-col items-center justify-center break-all rounded-lg border py-2 text-center transition-all duration-500"
+              >
+                <MailIcon size={16} />
+                <p class="mt-3 text-xs md:text-sm">{$landingPageSettings.contact.email}</p>
+              </div>
+            </div>
+
+            <!-- Contact Form -->
+            <div class="mt-8 rounded-lg bg-white p-7">
+              {#if successContactSaved}
+                <div class="flex w-full items-center justify-center">
+                  {$t('course.navItem.landing_page.thank_you')}
+                </div>
+              {:else}
+                <form onsubmit={preventDefault(handleContactSubmit)}>
+                  <div class="flex w-full flex-col justify-between md:flex-row">
+                    <div class="mr-5 w-full md:w-2/4">
+                      <Field.Field class="mb-5">
+                        <Field.Label class="font-bold">
+                          {$t('course.navItem.landing_page.name')}
+                        </Field.Label>
+                        <Input bind:value={contact.name} placeholder="Elon Musk" aria-invalid={!!contactError.name} />
+                        {#if contactError.name}
+                          <Field.Error>{contactError.name}</Field.Error>
+                        {/if}
+                      </Field.Field>
+                      <Field.Field class="mb-5">
+                        <Field.Label class="text-xs font-normal">
+                          {$t('course.navItem.landing_page.email')}
+                        </Field.Label>
+                        <Input
+                          bind:value={contact.email}
+                          type="email"
+                          placeholder="[email protected]"
+                          aria-invalid={!!contactError.email}
+                        />
+                        {#if contactError.email}
+                          <Field.Error>{contactError.email}</Field.Error>
+                        {/if}
+                      </Field.Field>
+                      <Field.Field class="mb-5">
+                        <Field.Label class="text-xs font-normal">
+                          {$t('course.navItem.landing_page.phone')}
+                        </Field.Label>
+                        <Input
+                          bind:value={contact.phone}
+                          placeholder="+1194802480"
+                          aria-invalid={!!contactError.phone}
+                        />
+                        {#if contactError.phone}
+                          <Field.Error>{contactError.phone}</Field.Error>
+                        {/if}
+                      </Field.Field>
+                    </div>
+                    <div class="w-full md:w-2/4">
+                      <Field.Field>
+                        <Field.Label>
+                          {$t('course.navItem.landing_page.message')}
+                        </Field.Label>
+                        <Textarea
+                          bind:value={contact.message}
+                          rows={9}
+                          placeholder={$t('course.navItem.landing_page.your_message')}
+                          aria-invalid={!!contactError.message}
+                        />
+                        {#if contactError.message}
+                          <Field.Error>{contactError.message}</Field.Error>
+                        {/if}
+                      </Field.Field>
+                    </div>
+                  </div>
+
+                  <Button.Root class="mx-auto mt-5 w-full md:mt-0" type="submit" loading={isContactSubmiting}>
+                    <span class="text-md mr-2">{$t('course.navItem.landing_page.submit')}</span>
+                    <RocketIcon size={16} class="custom" />
+                  </Button.Root>
+                </form>
+              {/if}
+            </div>
+          </div>
+        </div>
+      </section>
+    {/if}
+
+    <!-- Waitlist Section -->
+    {#if $landingPageSettings.mailinglist.show}
+      <section id="waitlist" transition:fade class="mx-auto my-10 w-[95%] max-w-6xl">
+        <div class="ui:bg-primary gap-4 rounded-lg px-4 py-14 md:px-10 lg:flex-row lg:items-center">
+          <div class="mx-auto flex max-w-[700px] flex-col lg:flex-row lg:items-center lg:justify-between">
+            <div class="w-3/5">
+              <h1 class="mb-5 mt-0 text-4xl text-white">
+                {$landingPageSettings.mailinglist.title}
+              </h1>
+              <p class="text-md text-white">
+                {$landingPageSettings.mailinglist.subtitle}
+              </p>
+            </div>
+            <form onsubmit={preventDefault(handleSubmit)}>
+              <div class="flex max-w-60 flex-col items-center">
+                {#if success}
+                  <p class="text-white">{$t('course.navItem.landing_page.successful_sub')}</p>
+                {:else}
+                  <Input
+                    bind:value={email}
+                    type="email"
+                    placeholder={$t('course.navItem.landing_page.enter')}
+                    required={true}
+                    disabled={isAdding}
+                  />
+                  <Button.Root class="my-1 mt-2 w-full" variant="outline" type="submit" loading={isAdding}>
+                    {$landingPageSettings.mailinglist.buttonLabel}
+                  </Button.Root>
+                {/if}
+              </div>
+            </form>
+          </div>
+        </div>
+      </section>
+    {/if}
+
+    <!-- Footer Section -->
+
+    {#if $landingPageSettings.footer.show}
+      <footer
+        id="footer"
+        class="my-10 flex w-full flex-col items-center justify-center border-b-0 border-l-0 border-r-0 border-t border-gray-300 px-5 py-10 md:py-3"
+      >
+        <ul class="flex w-11/12 flex-col items-center sm:flex-row">
+          <div class="logo">
+            <a href="/" title={`Go to ${org.name} Home`} id="logo" data-hveid="8" class="flex items-center">
+              <img
+                src={org.avatarUrl || '/logo-192.png'}
+                alt={`${org.name} logo`}
+                class="mx-auto inline-block max-h-10 w-10 rounded"
+                data-atf="1"
+              />
+              <h3 class="ml-3 text-xl text-black">{org.name}</h3>
+            </a>
+          </div>
+
+          <span class="flex-grow"></span>
+
+          <div class="mt-5 flex gap-2 sm:mt-0">
+            {#if $landingPageSettings.footer.facebook}
+              <li>
+                <a
+                  href={$landingPageSettings.footer.facebook}
+                  target="_blank"
+                  title={$t('settings.landing_page.footer.facebook')}
+                  id="logo-fb"
+                  data-hveid="8"
+                >
+                  <FacebookIcon size={16} />
+                </a>
+              </li>
+            {/if}
+            {#if $landingPageSettings.footer.twitter}
+              <li>
+                <a
+                  href={$landingPageSettings.footer.twitter}
+                  target="_blank"
+                  title={$t('settings.landing_page.footer.twitter')}
+                  id="logo-tw"
+                  data-hveid="8"
+                >
+                  <TwitterIcon size={16} />
+                </a>
+              </li>
+            {/if}
+
+            {#if $landingPageSettings.footer.linkedin}
+              <li>
+                <a
+                  href={$landingPageSettings.footer.linkedin}
+                  target="_blank"
+                  title={$t('settings.landing_page.footer.linkedin')}
+                  id="logo-ln"
+                  data-hveid="8"
+                >
+                  <LinkedinIcon size={16} />
+                </a>
+              </li>
+            {/if}
+          </div>
+        </ul>
+      </footer>
+    {/if}
+  </main>
+{/if}

apps/dashboard/src/lib/features/org/components/landing-page/page-header.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { Input } from '@cio/ui/base/input';
+
+  import { t } from '$lib/utils/functions/translations';
+  import Search from '@lucide/svelte/icons/search';
+
+  let searchValue = $state('');
+</script>
+
+<section class="p- flex min-h-[337px] w-full items-center justify-center bg-[#040f2d]">
+  <div class="flex w-full flex-col-reverse items-center justify-center md:flex-row">
+    <!-- Course Description -->
+    <div class="course-descr w-11/12 py-10">
+      <h1 class="my-4 text-center text-5xl text-white dark:text-white">
+        {$t('course.navItem.landing_page.explore')}
+      </h1>
+      <p class="text-md mb-6 text-center text-white dark:text-white">
+        {$t('course.navItem.landing_page.find')}🌎.
+      </p>
+
+      <div class="relative mx-auto max-w-xl">
+        <Input type="text" placeholder={$t('course.navItem.landing_page.find_course')} bind:value={searchValue} />
+        <Search class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+      </div>
+    </div>
+  </div>
+</section>
+

apps/dashboard/src/lib/features/org/components/landing-page/page-loader.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { Skeleton } from '@cio/ui/base/skeleton';
+  import { CourseCardLoader } from '$features/course/components';
+</script>
+
+<section class="h-screen w-screen p-5">
+  <!-- navbar -->
+  <div class="flex w-full items-center justify-between overflow-hidden rounded-md">
+    <Skeleton class="mr-40 h-4 w-[80%] rounded-[10px]" />
+    <div class="flex w-[20%] items-center justify-between">
+      <Skeleton class="mr-1 h-4 w-[2%] rounded-[10px]" />
+      <Skeleton class="mr-1 h-4 w-[2%] rounded-[10px]" />
+      <Skeleton class="h-4 w-[2%] rounded-[10px]" />
+    </div>
+  </div>
+  <!-- hero -->
+  <div class="my-8 flex w-full flex-row flex-wrap items-start justify-center gap-5 overflow-hidden rounded-md">
+    <Skeleton class="h-80 w-full rounded-md" />
+  </div>
+  <!-- cards -->
+  <div class="my-4 flex flex-wrap items-center justify-center gap-5 overflow-hidden rounded-md">
+    <CourseCardLoader />
+    <CourseCardLoader />
+    <CourseCardLoader />
+  </div>
+</section>
+

apps/dashboard/src/lib/features/org/components/new-org-modal-store.ts

@@ -0,0 +1,6 @@
+import { writable } from 'svelte/store';
+
+export const newOrgModal = writable({
+  open: false
+});
+

apps/dashboard/src/lib/features/org/components/quiz/delete-modal.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { Button } from '@cio/ui/base/button';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { deleteModal, quizesStore } from '$lib/utils/store/org';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
+
+  let { onDelete = () => {} } = $props();
+
+  function closeModal() {
+    deleteModal.update((m) => ({
+      ...m,
+      open: false,
+      id: null,
+      isQuestion: false
+    }));
+  }
+
+  async function deleteQuiz() {
+    const { data, error } = await supabase.from('quiz').delete().match({ id: $deleteModal.id });
+    console.log('data', data);
+    console.log('error', error);
+
+    if (error) {
+      return;
+    }
+
+    $quizesStore = $quizesStore.filter((q) => q.id !== $deleteModal.id);
+    closeModal();
+  }
+</script>
+
+<Dialog.Root
+  bind:open={$deleteModal.open}
+  onOpenChange={(isOpen) => {
+    if (!isOpen) closeModal();
+  }}
+>
+  <Dialog.Content class="w-2/5 max-w-[388px]">
+    <Dialog.Header>
+      <Dialog.Title>
+        {$deleteModal.isQuestion ? $t('components.quiz.question_delete') : $t('components.quiz.quiz_delete')}
+      </Dialog.Title>
+    </Dialog.Header>
+    <div class="my-10 flex w-full flex-col items-center">
+    <h1 class="text-center text-lg dark:text-white">
+      {#if $deleteModal.isQuestion}
+        {$t('components.quiz.delete_question')}
+      {:else}
+        {$t('components.quiz.delete_quiz')}
+      {/if}
+      {$t('components.quiz.lose_content')}
+    </h1>
+
+    <div class="mt-5">
+      <Button
+        onclick={() => {
+          if ($deleteModal.isQuestion) {
+            onDelete();
+            $deleteModal.open = false;
+          } else {
+            deleteQuiz();
+          }
+        }}
+      >
+        {$t('components.quiz.delete')}
+      </Button>
+    </div>
+  </div>
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/org/components/quiz/loader.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Skeleton } from '@cio/ui/base/skeleton';
+</script>
+
+<div
+  class="root relative mb-4 mr-4 flex w-full rounded-md border border-gray-100 p-3 transition ease-in-out dark:border-neutral-600 dark:bg-neutral-800"
+>
+  <Skeleton class="h-full w-[20%]" />
+  <div class="mx-5 flex w-full flex-col justify-evenly">
+    <!-- Title -->
+    <Skeleton class="h-4 w-2/4" />
+    <!-- Description -->
+    <Skeleton class="h-16 w-2/4" />
+  </div>
+</div>
+
+<style>
+  .root {
+    height: 180px;
+  }
+</style>

apps/dashboard/src/lib/features/org/components/quiz/new-quiz-modal.svelte

@@ -0,0 +1,141 @@
+<script>
+  import { preventDefault } from '$lib/utils/functions/svelte';
+
+  import { goto } from '$app/navigation';
+  import { Button } from '@cio/ui/base/button';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { InputField } from '@cio/ui/custom/input-field';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { currentOrg, createQuizModal, currentOrgPath, quizesStore } from '$lib/utils/store/org';
+  import { createQuizValidation } from '$lib/utils/functions/validator';
+  import { t } from '$lib/utils/functions/translations';
+
+  let open = $state(false);
+  let errors = $state({
+    title: ''
+  });
+  let isLoading = $state(false);
+
+  function handleClose() {
+    $createQuizModal.id = null;
+    $createQuizModal.title = '';
+    $createQuizModal.open = false;
+    $createQuizModal.openEdit = false;
+  }
+
+  function errorNotification() {
+    snackbar.error();
+  }
+
+  async function createQuiz() {
+    errors = createQuizValidation($createQuizModal);
+    console.log('createQuiz|updateQuiz errors', errors);
+
+    if (Object.keys(errors).length) {
+      return;
+    }
+
+    isLoading = true;
+    if ($createQuizModal.openEdit) {
+      const { error } = await supabase
+        .from('quiz')
+        .update({ title: $createQuizModal.title, updated_at: new Date() })
+        .match({ id: $createQuizModal.id });
+
+      isLoading = false;
+
+      if (error) {
+        return errorNotification();
+      } else {
+        $quizesStore = $quizesStore.map((s) => {
+          if (s.id === $createQuizModal.id) {
+            s.title = $createQuizModal.title;
+          }
+          return s;
+        });
+        handleClose();
+      }
+    } else {
+      const { data, error } = await supabase
+        .from('quiz')
+        .insert({
+          title: $createQuizModal.title,
+          organization_id: $currentOrg.id,
+          questions: [
+            {
+              id: 1,
+              label: '',
+              type: 'multichoice',
+              options: [
+                {
+                  id: 'circle',
+                  label: '',
+                  isCorrect: false
+                },
+                {
+                  id: 'triangle',
+                  label: '',
+                  isCorrect: false
+                }
+              ]
+            }
+          ]
+        })
+        .select();
+      isLoading = false;
+
+      if (error) {
+        return errorNotification();
+      } else {
+        $quizesStore = [...$quizesStore, data[0]];
+
+        handleClose();
+        goto(`${$currentOrgPath}/quiz/${data[0].id}`);
+      }
+    }
+  }
+
+  $effect(() => {
+    open = $createQuizModal.openEdit || $createQuizModal.open;
+  });
+</script>
+
+<svelte:head>
+  <title>{$t('components.quiz.title')} - ClassroomIO</title>
+</svelte:head>
+
+<Dialog.Root
+  bind:open
+  onOpenChange={(isOpen) => {
+    if (!isOpen) handleClose();
+  }}
+>
+  <Dialog.Content class="w-4/5 md:w-2/5">
+    <Dialog.Header>
+      <Dialog.Title>
+        {$createQuizModal.openEdit ? $t('components.quiz.update') : $t('components.quiz.create')} {$t(
+          'components.quiz.a_quiz'
+        )}
+      </Dialog.Title>
+    </Dialog.Header>
+    <form onsubmit={preventDefault(createQuiz)}>
+    <InputField
+      label={$t('components.quiz.quiz_title')}
+      bind:value={$createQuizModal.title}
+      autofocus={true}
+      placeholder={$t('components.quiz.placehoolder')}
+      className="mb-4"
+      isRequired={true}
+      errorMessage={errors.title}
+      autoComplete={false}
+    />
+
+    <div class="mt-5 flex items-center justify-end">
+      <Button type="submit" disabled={isLoading} loading={isLoading}>
+        {$createQuizModal.openEdit ? $t('components.quiz.save') : $t('components.quiz.continue')}
+      </Button>
+    </div>
+  </form>
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/org/components/quiz/play/connect-to-play.svelte

@@ -0,0 +1,59 @@
+<script>
+  import { onMount } from 'svelte';
+  import { Spinner } from '@cio/ui/base/spinner';
+  import PlayContainer from './container.svelte';
+  import PlayHeader from './header/index.svelte';
+  import { quizStore, playQuizStore } from '$lib/utils/store/org';
+  import { STEPS } from '$lib/utils/constants/quiz';
+  import { genQuizPin } from '$lib/utils/functions/org';
+  import { Button } from '@cio/ui/base/button';
+
+  let isGettingPin = $state(true);
+
+  function getPin() {
+    setTimeout(() => {
+      $quizStore.pin = genQuizPin();
+      isGettingPin = false;
+    }, 3000);
+  }
+
+  function goToPlayersStep() {
+    $playQuizStore.step = STEPS.WAIT_FOR_PLAYERS;
+  }
+
+  onMount(() => {
+    getPin();
+  });
+</script>
+
+<PlayContainer>
+  {#snippet header()}
+    <div>
+      <PlayHeader startCount={true} showCountDown={true} />
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="w-full rounded-md bg-white px-5 py-7 dark:bg-neutral-800">
+      <div class="mb-3">
+        <p>1. Visit</p>
+        <h3>play.classroomio.com</h3>
+      </div>
+      <div class="">
+        <p>2. Enter Pin</p>
+        {#if isGettingPin}
+          <Spinner class="size-10! text-blue-700!" />
+        {:else}
+          <h3>{$quizStore.pin}</h3>
+        {/if}
+      </div>
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="flex items-center justify-center">
+      <p class="mr-3">Let's go</p>
+      <Button variant="outline" onclick={goToPlayersStep}>View Players</Button>
+    </div>
+  {/snippet}
+</PlayContainer>

apps/dashboard/src/lib/features/org/components/quiz/play/container.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  interface Props {
+    header?: import('svelte').Snippet;
+    body?: import('svelte').Snippet;
+    footer?: import('svelte').Snippet;
+  }
+
+  let { header, body, footer }: Props = $props();
+</script>
+
+<div class="root m-auto flex h-full flex-col justify-between">
+  {#if header}
+    <!-- HEADER -->
+    <div class="header">
+      {@render header?.()}
+    </div>
+  {/if}
+
+  {#if body}
+    <!-- BODY -->
+    <div class="body mb-3">
+      {@render body?.()}
+    </div>
+  {/if}
+
+  {#if footer}
+    <!-- FOOTER -->
+    <div class="footer m-auto bg-white px-2 py-6 dark:bg-neutral-800">
+      {@render footer?.()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .root {
+    max-width: 680px;
+    width: 80%;
+    height: 95vh;
+  }
+
+  .header {
+    height: 15%;
+  }
+
+  .body {
+    min-height: 60%;
+    height: fit-content;
+  }
+
+  .footer {
+    max-width: 400px;
+  }
+</style>

apps/dashboard/src/lib/features/org/components/quiz/play/header/answer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import CircleContent from './circle-content.svelte';
+
+  interface Props {
+    answers?: number;
+  }
+
+  let { answers = 0 }: Props = $props();
+</script>
+
+<CircleContent value={answers} label="Answer(s)" />

apps/dashboard/src/lib/features/org/components/quiz/play/header/circle-content.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition';
+
+  interface Props {
+    value?: boolean;
+    label?: string;
+    className?: string;
+  }
+
+  let { value = false, label = '', className = '' }: Props = $props();
+
+  function fadeSlide(node, options) {
+    const slideTrans = slide(node, options);
+    return {
+      duration: options.duration,
+      css: (t) => `
+				${slideTrans.css(t)}
+				opacity: ${t};
+			`
+    };
+  }
+</script>
+
+<div class="circle flex flex-col items-center justify-center {className}">
+  {#key value}
+    <h3 class="ui:text-primary" transition:fadeSlide={{ duration: 500 }}>
+      {value}
+    </h3>
+  {/key}
+  <p class="ui:text-primary text-md">{label}</p>
+</div>
+
+<style>
+  .circle {
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    border-radius: 50%;
+    font-size: 50px;
+    text-align: center;
+    background: #fff;
+  }
+  .circle h3 {
+    font-size: 40px;
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+  }
+</style>

apps/dashboard/src/lib/features/org/components/quiz/play/header/index.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { quizStore } from '$lib/utils/store/org';
+  import Answer from './answer.svelte';
+  import Timer from './timer.svelte';
+
+  interface Props {
+    startCount?: boolean;
+    showCountDown?: boolean;
+  }
+
+  let { startCount = false, showCountDown = false }: Props = $props();
+</script>
+
+<div class="flex w-full items-center justify-between">
+  <h3 class="text-white">{$quizStore.title}</h3>
+  {#if showCountDown}
+    <div class="flex">
+      <Timer {startCount} timelimit={$quizStore.timelimit} />
+      <Answer />
+    </div>
+  {/if}
+</div>

apps/dashboard/src/lib/features/org/components/quiz/play/header/timer.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import CircleContent from './circle-content.svelte';
+
+  interface Props {
+    startCount?: boolean;
+    timelimit?: string;
+  }
+
+  let { startCount = false, timelimit = '' }: Props = $props();
+
+  let countDownNo = $state(0);
+  let started = false;
+
+  function triggerCountDown(start) {
+    if (!start || started) return;
+
+    const getNum = (k) => parseInt(timelimit.replace(k, ''));
+
+    if (timelimit.includes('s')) {
+      countDownNo = getNum('s');
+    } else if (timelimit.includes('m')) {
+      countDownNo = getNum('m') * 60;
+    }
+
+    window.refreshIntervalId = setInterval(() => {
+      if (--countDownNo <= 0) {
+        clearInterval(window.refreshIntervalId);
+      }
+    }, 1000);
+    started = true;
+  }
+
+  onMount(() => {
+    if (startCount) {
+      triggerCountDown(startCount);
+    }
+  });
+
+  $effect(() => {
+    triggerCountDown(startCount);
+  });
+</script>
+
+<CircleContent value={countDownNo} label="Second(s)" className="mr-3" />

apps/dashboard/src/lib/features/org/components/quiz/play/index.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import { Spinner } from '@cio/ui/base/spinner';
+  import { themeImages, STEPS } from '$lib/utils/constants/quiz';
+  import { quizStore, playQuizStore } from '$lib/utils/store/org';
+  import ConnectToPlay from './connect-to-play.svelte';
+  import Players from './players.svelte';
+  import Question from './question.svelte';
+  import Scoreboard from './scoreboard.svelte';
+  import Podium from './podium.svelte';
+
+  let bgImg = $state();
+
+  onMount(() => {
+    bgImg = themeImages[$quizStore.theme].play;
+  });
+</script>
+
+{#if bgImg}
+  <div
+    class="absolute inset-0 z-50 h-screen w-screen bg-white"
+    in:fly={{ y: 500, duration: 500 }}
+    out:fly={{ y: 500, duration: 500 }}
+  >
+    <div
+      class="h-full w-full p-5"
+      style="background: url({bgImg}) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;min-height: 100vh;height: fit-content;"
+    >
+      {#if $playQuizStore.step === STEPS.CONNECT_TO_PLAY}
+        <ConnectToPlay />
+      {:else if $playQuizStore.step === STEPS.WAIT_FOR_PLAYERS}
+        <Players />
+      {:else if $playQuizStore.step === STEPS.SHOW_NEXT_QUESTION}
+        <Question />
+      {:else if $playQuizStore.step === STEPS.SCOREBOARD}
+        <Scoreboard />
+      {:else if $playQuizStore.step === STEPS.PODIUM}
+        <Podium />
+      {:else}
+        <div class="m-auto w-full">
+          <Spinner class="size-8! text-blue-700!" />
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

apps/dashboard/src/lib/features/org/components/quiz/play/players.svelte

@@ -0,0 +1 @@
+players

apps/dashboard/src/lib/features/org/components/quiz/play/podium.svelte

@@ -0,0 +1 @@
+Podium

apps/dashboard/src/lib/features/org/components/quiz/play/preview.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import QuizQuestion from '../quiz-question.svelte';
+  import PlayContainer from './container.svelte';
+  import PlayHeader from './header/index.svelte';
+  import { quizStore } from '$lib/utils/store/org';
+  import { themeImages } from '$lib/utils/constants/quiz';
+  import { Button } from '@cio/ui/base/button';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+
+  let { exitPreview = () => {} } = $props();
+
+  let bgImg = $state();
+  let totalQ = $quizStore.questions.length;
+  let curQId = $state(0);
+  let currentQuestion = $state($quizStore.questions[0] || {});
+
+  function handlePrev() {
+    const prevQId = curQId - 1;
+    console.log('prevQId', prevQId);
+    const prev = $quizStore.questions[prevQId];
+    console.log('prev', prev);
+    if (prev) {
+      currentQuestion = prev;
+      curQId = prevQId;
+    }
+  }
+
+  function handleNext() {
+    const nextQId = curQId + 1;
+    console.log('nextqid', nextQId);
+    const next = $quizStore.questions[nextQId];
+    console.log('next', next);
+    if (next) {
+      currentQuestion = next;
+      curQId = nextQId;
+    }
+  }
+
+  onMount(() => {
+    bgImg = themeImages[$quizStore.theme].play;
+  });
+</script>
+
+{#if bgImg}
+  <div
+    class="absolute inset-0 z-50 h-screen w-screen bg-white"
+    in:fly={{ y: 500, duration: 500 }}
+    out:fly={{ y: 500, duration: 500 }}
+  >
+    <div
+      class="h-full w-full p-5"
+      style="background: url({bgImg}) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;min-height: 100vh;height: fit-content;"
+    >
+      <PlayContainer>
+        {#snippet header()}
+          <div>
+            <PlayHeader startCount={true} showCountDown={true} />
+          </div>
+        {/snippet}
+
+        {#snippet body()}
+          <div class="quiz-body">
+            {#if currentQuestion}
+              <QuizQuestion {currentQuestion} isPreview={true} />
+            {:else}
+              <h2>No question added</h2>
+            {/if}
+          </div>
+        {/snippet}
+
+        {#snippet footer()}
+          <div class="flex flex-col justify-center">
+            {#if currentQuestion}
+              <Button variant="ghost" onclick={exitPreview} class="w-fit">Exit Preview</Button>
+
+              <div class="flex items-center justify-center">
+                <IconButton onclick={handlePrev}>
+                  <ChevronLeftIcon size={16} />
+                </IconButton>
+                <p class="mx-3">{curQId + 1} / {totalQ}</p>
+                <IconButton onclick={handleNext}>
+                  <ChevronRightIcon size={16} />
+                </IconButton>
+              </div>
+            {/if}
+          </div>
+        {/snippet}
+      </PlayContainer>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .quiz-body {
+    width: 500px;
+    margin: auto;
+  }
+</style>

apps/dashboard/src/lib/features/org/components/quiz/play/question.svelte

@@ -0,0 +1 @@
+Question

apps/dashboard/src/lib/features/org/components/quiz/play/scoreboard.svelte

@@ -0,0 +1 @@
+Scoreboard

apps/dashboard/src/lib/features/org/components/quiz/quiz-card.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import pluralize from 'pluralize';
+  // import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+
+  import { currentOrgPath } from '$lib/utils/store/org';
+  import { t } from '$lib/utils/functions/translations';
+  import { themeImages } from '$lib/utils/constants/quiz';
+  import { calDateDiff } from '$lib/utils/functions/date';
+  // import { onRename, onDelete } from '$lib/utils/services/org/quiz';
+  import { Button } from '@cio/ui/base/button';
+
+  import { Image } from '$features/ui';
+
+  let { quiz, totalQuestions } = $props();
+
+  /*function getOptions() {
+    return [
+      // {
+      //   label: 'Edit',
+      //   onClick: onEdit(quiz),
+      // },
+      // {
+      //   label: 'Share',
+      //   onClick: onShare(quiz),
+      // },
+      // {
+      //   label: 'Report',
+      //   onClick: onReport(quiz),
+      // },
+      {
+        label: $t('components.quiz.rename'),
+        onClick() {
+          onRename(quiz);
+        }
+      },
+      // {
+      //   label: 'Make a copy',
+      //   onClick() {
+      //     onMakeCopy(quiz);
+      //   },
+      // },
+      {
+        label: $t('components.quiz.delete'),
+        onClick() {
+          onDelete(quiz);
+        }
+      }
+    ];
+  }*/
+
+  function startQuiz() {}
+</script>
+
+{#if quiz}
+  <div
+    class="root relative mb-5 flex w-full flex-col rounded-lg border bg-gray-100 p-3 transition ease-in-out hover:shadow-2xl lg:flex-row dark:bg-black"
+  >
+    <Image
+      src={themeImages[quiz.theme]?.card || themeImages.standard.card}
+      alt="quiz-card"
+      className="max-w-[300px] min-w-[200px]"
+    />
+
+    <div class="flex w-full flex-col justify-between p-2 md:p-5">
+      <div class="flex justify-between">
+        <h4 class="title text-md capitalize dark:text-white">
+          <a href="{$currentOrgPath}/quiz/{quiz.id}">{quiz.title}</a>
+        </h4>
+
+        <!-- <Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}>
+          <div class="rounded-full bg-gray-200 p-1 dark:bg-gray-600">
+            <EllipsisIcon size={16} />
+          </div>
+        </Dropdown> -->
+      </div>
+
+      <div class="flex flex-col justify-between md:flex-row">
+        <div>
+          <p class="mb-2">{pluralize('question', totalQuestions, true)}</p>
+          <p class="mb-2 md:mb-0">{$t('components.quiz.updated')} {calDateDiff(quiz.updated_at)}</p>
+        </div>
+
+        <Button variant="outline" onclick={startQuiz}>
+          {$t('components.quiz.start')}
+        </Button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .root {
+    min-height: 180px;
+  }
+</style>

apps/dashboard/src/lib/features/org/components/quiz/quiz-question.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { CircleCheckIcon } from '$features/ui/icons';
+  import { optionImage } from '$lib/utils/constants/quiz';
+  import { InputField } from '@cio/ui/custom/input-field';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import { t } from '$lib/utils/functions/translations';
+
+  interface Props {
+    currentQuestion?: any;
+    currentError?: any;
+    optionHasError?: any;
+    isPreview?: boolean;
+  }
+
+  let {
+    currentQuestion = $bindable({
+      label: ''
+    }),
+    currentError = {},
+    optionHasError = () => false,
+    isPreview = false
+  }: Props = $props();
+</script>
+
+{#if isPreview}
+  <h1 class="mb-5 text-white">{currentQuestion.label}</h1>
+{:else}
+  <InputField
+    placeholder={$t('components.quiz.start_typing')}
+    bind:value={currentQuestion.label}
+    className="w-full my-4"
+    errorMessage={currentError.isLabelEmpty && $t('components.quiz.required_field')}
+    isRequired={true}
+    bgColor="bg-white"
+  />
+{/if}
+
+<!-- Options -->
+<div class="flex w-full flex-wrap justify-between">
+  {#each currentQuestion.options || [] as option}
+    <div class="relative mb-5 w-2/5 rounded bg-white p-5 dark:bg-neutral-800">
+      <img src={optionImage[option.id]} alt={option.id} />
+
+      {#if isPreview}
+        <p class="mt-5">{option.label}</p>
+      {:else}
+        <InputField
+          bind:value={option.label}
+          placeholder={$t('components.quiz.type_answer')}
+          bgColor="bg-white"
+          className="mt-3"
+          isDisabled={currentQuestion.type === 'boolean'}
+          errorMessage={optionHasError(option.id, currentError.options) && $t('components.quiz.label')}
+        />
+        <div class="absolute right-2 top-2 flex justify-end">
+          <IconButton
+            onclick={() => (option.isCorrect = !option.isCorrect)}
+            class={option.isCorrect ? 'success' : ''}
+          >
+            <CircleCheckIcon size={16} filled={option.isCorrect} />
+          </IconButton>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>

apps/dashboard/src/lib/features/org/components/quiz/quizzes.svelte

@@ -0,0 +1,54 @@
+<script>
+  import QuizLoader from './loader.svelte';
+  import QuizCard from './quiz-card.svelte';
+  import { Empty } from '@cio/ui/custom/empty';
+  import HelpCircleIcon from '@lucide/svelte/icons/help-circle';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { currentOrg, quizesStore } from '$lib/utils/store/org';
+  import { t } from '$lib/utils/functions/translations';
+
+  let isLoading = $state(false);
+
+  async function fetchQuizes(id) {
+    if (!id) return;
+    isLoading = true;
+
+    const { data, error } = await supabase
+      .from('quiz')
+      .select(`*`)
+      .eq('organization_id', id)
+      .order('updated_at', { ascending: false });
+
+    if (error) {
+      snackbar.error();
+      return;
+    }
+    console.log('data', data);
+    quizesStore.set(data);
+    isLoading = false;
+  }
+
+  $effect(() => {
+    fetchQuizes($currentOrg.id);
+  });
+</script>
+
+<div class="m-auto my-4 flex flex-wrap items-center justify-center lg:justify-start">
+  {#if isLoading}
+    <QuizLoader />
+    <QuizLoader />
+    <QuizLoader />
+  {:else}
+    {#each $quizesStore as quiz}
+      <QuizCard {quiz} totalQuestions={quiz.questions?.length || 0} />
+    {:else}
+      <Empty
+        title={$t('components.quiz.no_quizz')}
+        description={$t('components.quiz.interactive')}
+        icon={HelpCircleIcon}
+        variant="page"
+      />
+    {/each}
+  {/if}
+</div>

apps/dashboard/src/lib/features/org/components/settings/account.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Label } from '@cio/ui/base/label';
+  import * as Select from '@cio/ui/base/select';
+
+  import type { TLocale } from '@cio/db/types';
+  import { LANGUAGES } from '$lib/utils/constants/translation';
+  import { t } from '$lib/utils/functions/translations';
+
+  interface Props {
+    className?: string;
+    value?: TLocale;
+    hasLangChanged?: boolean;
+    change?: () => void;
+  }
+
+  let { className = '', value = $bindable('en'), hasLangChanged = $bindable(false), change }: Props = $props();
+
+  function handleSelect(selectedValue: string) {
+    value = selectedValue as TLocale;
+    hasLangChanged = true;
+    if (change) {
+      change();
+    }
+  }
+
+  const triggerContent = $derived(
+    LANGUAGES.find((lang) => lang.id === value)?.text ?? $t('settings.account.select_language')
+  );
+</script>
+
+<div class={className}>
+  <Label>{$t('settings.account.language')}</Label>
+  <Select.Root type="single" bind:value onValueChange={handleSelect}>
+    <Select.Trigger>
+      {triggerContent}
+    </Select.Trigger>
+    <Select.Content>
+      {#each LANGUAGES as lang}
+        <Select.Item value={lang.id} label={lang.text}>
+          {lang.text}
+        </Select.Item>
+      {/each}
+    </Select.Content>
+  </Select.Root>
+</div>

apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts

@@ -0,0 +1,117 @@
+import type { OrgLandingPageJson } from '$lib/utils/types/org';
+import type { Writable } from 'svelte/store';
+import { writable } from 'svelte/store';
+
+export const landingPageSettings: Writable<OrgLandingPageJson> = writable({
+  header: {
+    title: 'Web Development Courses for',
+    titleHighlight: 'Everyone',
+    subtitle: 'Practical project-based courses that are easy to understand and straight to the point',
+    action: {
+      label: 'Start learning Today',
+      link: '#contact',
+      redirect: false
+    },
+    banner: {
+      video: 'https://www.youtube.com/watch?v=qqAYW7uxErI',
+      image: '',
+      type: 'video',
+      show: true
+    },
+    background: {
+      image: '',
+      show: true
+    },
+    show: true
+  },
+  aboutUs: {
+    title: 'Our Story',
+    content:
+      'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.',
+    imageUrl: 'https://pgrest.classroomio.com/storage/v1/object/public/avatars/landingpage/riverside.jpeg',
+    show: true
+  },
+  courses: {
+    title: 'Explore our',
+    titleHighlight: 'Courses',
+    subtitle: 'Find courses you will love from best teachers all over the world🌎.',
+    show: true
+  },
+  faq: {
+    title: 'Frequently Asked Questions.',
+    questions: [
+      {
+        id: 1,
+        title: 'Lorem ipsum dolor sit, amet con',
+        content:
+          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.'
+      },
+      {
+        id: 2,
+        title: 'Lorem ipsum dolor sit, amet con',
+        content:
+          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.'
+      },
+      {
+        id: 3,
+        title: 'Lorem ipsum dolor sit, amet con',
+        content:
+          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.'
+      }
+    ],
+    show: true
+  },
+  contact: {
+    title: 'Have you got any',
+    titleHighlight: 'Question?',
+    subtitle: 'Reach out to us with any question you might have.',
+    address: 'Ashwoodfield House Farm, Kidderminster Rd, Stourbridge, Kingswinford DY6 0AA',
+    phone: '+4407339904995',
+    email: '[email protected]',
+    show: true
+  },
+  mailinglist: {
+    title: 'Join our mailing list',
+    subtitle:
+      'We are constantly releasing new courses and sharing them with our email list. Subscribe to get notified once we release a new course',
+    buttonLabel: 'Subscribe',
+    show: true
+  },
+  customLinks: {
+    show: true,
+    links: [
+      {
+        id: 1,
+        label: 'About Us',
+        url: '#aboutus',
+        openInNewTab: false
+      },
+      {
+        id: 2,
+        label: 'Courses',
+        url: '#courses',
+        openInNewTab: false
+      },
+      {
+        id: 3,
+        label: 'FAQ',
+        url: '#faq',
+        openInNewTab: false
+      },
+      {
+        id: 4,
+        label: 'Contact Us',
+        url: '#contact',
+        openInNewTab: false
+      }
+    ]
+  },
+  footer: {
+    facebook: '#',
+    instagram: '#',
+    twitter: '#',
+    linkedin: '#',
+    show: true
+  }
+});
+

apps/dashboard/src/lib/features/org/components/settings/language-picker.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Label } from '@cio/ui/base/label';
+  import * as Select from '@cio/ui/base/select';
+
+  import type { TLocale } from '@cio/db/types';
+  import { LANGUAGES } from '$lib/utils/constants/translation';
+  import { t, initialized } from '$lib/utils/functions/translations';
+
+  interface Props {
+    className?: string;
+    value?: TLocale;
+    hasLangChanged?: boolean;
+    change?: () => void;
+  }
+
+  let { className = '', value = $bindable('en'), hasLangChanged = $bindable(false), change }: Props = $props();
+
+  function handleSelect(selectedValue: string) {
+    value = selectedValue as TLocale;
+    hasLangChanged = true;
+    change?.();
+  }
+</script>
+
+{#if $initialized}
+  <div class={className}>
+    <Label class="mb-2 block">{$t('content.toggle_label')}</Label>
+    <Select.Root type="single" bind:value onValueChange={handleSelect}>
+      <Select.Trigger class="w-full">
+        <p>{value ? LANGUAGES.find((lang) => lang.id === value)?.text : 'Pick a Language'}</p>
+      </Select.Trigger>
+      <Select.Content>
+        {#each LANGUAGES as language}
+          <Select.Item value={language.id}>{language.text}</Select.Item>
+        {/each}
+      </Select.Content>
+    </Select.Root>
+  </div>
+{/if}

apps/dashboard/src/lib/features/org/index.ts

@@ -0,0 +1,9 @@
+export { default as OrgLandingPage } from './components/landing-page/landing-page.svelte';
+export { default as AddOrgModal } from './components/add-org-modal/add-org-modal.svelte';
+export { default as Quizzes } from './components/quiz/quizzes.svelte';
+export { default as NewQuizModal } from './components/quiz/new-quiz-modal.svelte';
+export { default as DeleteModal } from './components/quiz/delete-modal.svelte';
+export { default as PlayQuiz } from './components/quiz/play/index.svelte';
+export { default as Preview } from './components/quiz/play/preview.svelte';
+export { default as QuizQuestion } from './components/quiz/quiz-question.svelte';
+export { default as PageLoader } from './components/landing-page/page-loader.svelte';

apps/dashboard/src/lib/features/settings/components/Layout/Column.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-  interface Props {
-    sm?: number;
-    md?: number;
-    lg?: number;
-    class?: string;
-    children?: import('svelte').Snippet;
-  }
-
-  let { sm = 8, md = 8, lg = 8, class: className = '', children }: Props = $props();
-
-  const getColSpan = (cols: number) => {
-    const spanMap = {
-      1: 'col-span-1',
-      2: 'col-span-2',
-      3: 'col-span-3',
-      4: 'col-span-4',
-      5: 'col-span-5',
-      6: 'col-span-6',
-      7: 'col-span-7',
-      8: 'col-span-8',
-      9: 'col-span-9',
-      10: 'col-span-10',
-      11: 'col-span-11',
-      12: 'col-span-12',
-      13: 'col-span-13',
-      14: 'col-span-14',
-      15: 'col-span-15',
-      16: 'col-span-16'
-    };
-    return spanMap[cols] || 'col-span-full';
-  };
-
-  const smClass = getColSpan(sm);
-  const mdClass = `md:${getColSpan(md)}`;
-  const lgClass = `lg:${getColSpan(lg)}`;
-</script>
-
-<div class="{smClass} {mdClass} {lgClass} {className} grid">
-  {@render children?.()}
-</div>

apps/dashboard/src/lib/features/settings/components/Layout/Grid.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-  interface Props {
-    class?: string;
-    children?: import('svelte').Snippet;
-  }
-
-  let { class: className = '', children }: Props = $props();
-</script>
-
-<div class="w-full {className}">
-  {@render children?.()}
-</div>

apps/dashboard/src/lib/features/settings/components/Layout/Row.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  interface Props {
-    id?: string;
-    class?: string;
-    children?: import('svelte').Snippet;
-  }
-
-  let { id, class: className = '', children }: Props = $props();
-</script>
-
-<div {id} class="lg:grid-cols-16 grid grid-cols-1 gap-5 px-3 {className}">
-  {@render children?.()}
-</div>

apps/dashboard/src/lib/features/settings/components/Layout/index.ts

@@ -1,3 +0,0 @@
-export { default as Grid } from './Grid.svelte';
-export { default as Row } from './Row.svelte';
-export { default as Column } from './Column.svelte';

apps/dashboard/src/lib/features/settings/pages/billing.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { t } from '$lib/utils/functions/translations';
-  import { snackbar } from '$lib/components/Snackbar/store';
+  import { snackbar } from '$features/ui/snackbar/store';
   import { currentOrgPlan, isFreePlan } from '$lib/utils/store/org';
   import HourglassIcon from '@lucide/svelte/icons/hourglass';
   import { openUpgradeModal } from '$lib/utils/functions/org';

apps/dashboard/src/lib/features/settings/pages/customize-lms.svelte

@@ -3,12 +3,12 @@
 
   import { currentOrg } from '$lib/utils/store/org';
   import { t } from '$lib/utils/functions/translations';
-  import { orgApi } from '$lib/features/org/api/org.svelte';
-  import { handleOpenWidget } from '$lib/components/CourseLandingPage/store';
+  import { orgApi } from '$features/org/api/org.svelte';
+  import { handleOpenWidget } from '$features/ui/course-landing-page/store';
   import { Button } from '@cio/ui/base/button';
   import { Input } from '@cio/ui/base/input';
 
-  import UploadWidget from '$lib/components/UploadWidget/index.svelte';
+  import { UploadWidget } from '$features/ui';
   import * as Field from '@cio/ui/base/field';
 
   let widgetKey = $state('');

apps/dashboard/src/lib/features/settings/pages/domains.svelte

@@ -9,8 +9,8 @@
   import { parse } from 'tldts';
 
   import { t } from '$lib/utils/functions/translations';
-  import { snackbar } from '$lib/components/Snackbar/store';
-  import { orgApi } from '$lib/features/org/api/org.svelte';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { orgApi } from '$features/org/api/org.svelte';
   import { blockedSubdomain } from '$lib/utils/constants/app';
   import { currentOrg, isFreePlan } from '$lib/utils/store/org';
   import { copyToClipboard } from '$lib/utils/functions/formatYoutubeVideo';
@@ -21,10 +21,7 @@
   import { Button } from '@cio/ui/base/button';
   import { Textarea } from '@cio/ui/base/textarea';
   import { DomainInput } from '@cio/ui/custom/domain-input';
-  import { ComingSoon } from '$lib/features/ui';
-  import { UpgradeBanner } from '$lib/features/ui';
-  import UploadImage from '$lib/components/UploadImage/index.svelte';
-  import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
+  import { ComingSoon, UpgradeBanner, UploadImage, VisitOrgSiteButton } from '$features/ui';
   import * as Field from '@cio/ui/base/field';
 
   let siteName = $derived($currentOrg.siteName);
@@ -170,7 +167,7 @@
         });
 
         if (orgApi.success) {
-        $currentOrg.isCustomDomainVerified = true;
+          $currentOrg.isCustomDomainVerified = true;
         }
       }
     } catch (error) {

apps/dashboard/src/lib/features/settings/pages/integrations.svelte

@@ -4,8 +4,7 @@
   // import { snackbar } from '$lib/components/Snackbar/store';
   import { Input } from '@cio/ui/base/input';
   import { Button } from '@cio/ui/base/button';
-  import ArrowUpRightIcon from '$lib/components/Icons/ArrowTopRight.svelte';
-  import CircleCheckIcon from '$lib/components/Icons/CircleCheckIcon.svelte';
+  import { ArrowTopRight, CircleCheckIcon } from '$features/ui/icons';
   import * as Field from '@cio/ui/base/field';
 
   let chatId: number | null = $state(null);
@@ -59,7 +58,7 @@
         <Field.Description>{$t('settings.integrations.step_authenticate')}</Field.Description>
         <Button variant="outline" onclick={() => window.open('https://t.me/classroomio_bot', '_blank')}>
           <span class="mr-2">{$t('settings.integrations.open_bot_button')}</span>
-          <ArrowUpRightIcon />
+          <ArrowTopRight />
         </Button>
         <Field.Description>{$t('settings.integrations.step_chatId')}</Field.Description>
         <Field.Field>

apps/dashboard/src/lib/features/settings/pages/landingpage.svelte

@@ -7,18 +7,17 @@
   import { landingPageSettings } from '../utils/store';
   import { currentOrg } from '$lib/utils/store/org';
   import { t } from '$lib/utils/functions/translations';
-  import { orgApi } from '$lib/features/org/api/org.svelte';
-  import { handleOpenWidget } from '$lib/components/CourseLandingPage/store';
+  import { orgApi } from '$features/org/api/org.svelte';
+  import { handleOpenWidget } from '$features/ui/course-landing-page/store';
 
   import { Checkbox } from '@cio/ui/base/checkbox';
   import { Input } from '@cio/ui/base/input';
   import { Textarea } from '@cio/ui/base/textarea';
   import { Button } from '@cio/ui/base/button';
-  import UploadWidget from '$lib/components/UploadWidget/index.svelte';
-  import UnsavedChanges from '$lib/components/UnsavedChanges/index.svelte';
+  import { UploadWidget, UnsavedChanges } from '$features/ui';
   import * as Field from '@cio/ui/base/field';
   import type { OrgLandingPageJson } from '$lib/utils/types/org';
-  import type { AccountOrg } from '$lib/features/app/types';
+  import type { AccountOrg } from '$features/app/types';
 
   let creatingNewQuestion = $state(false);
   let creatingNewCustomLink = $state(false);
@@ -721,7 +720,7 @@
           oninput={() => (hasUnsavedChanges = true)}
         />
       </Field.Field>
-      <!-- <TextField
+      <!-- <InputField
         label="Instagram"
         placeholder="Write your Instagram link here"
         className="mb-5"

apps/dashboard/src/lib/features/settings/pages/org.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from 'svelte';
   import { goto } from '$app/navigation';
   import ZapIcon from '@lucide/svelte/icons/zap';
   import debounce from 'lodash/debounce';
@@ -7,73 +6,50 @@
 
   import { t } from '$lib/utils/functions/translations';
   import { currentOrg, currentOrgPath, isFreePlan } from '$lib/utils/store/org';
-  import { injectCustomTheme, setCustomTheme, setTheme } from '$lib/utils/functions/theme';
-  import { orgApi } from '$lib/features/org/api/org.svelte';
+  import { setTheme } from '$lib/utils/functions/theme';
+  import { orgApi } from '$features/org/api/org.svelte';
 
   import { Input } from '@cio/ui/base/input';
   import { Button } from '@cio/ui/base/button';
-  import UploadImage from '$lib/components/UploadImage/index.svelte';
-  import UnsavedChanges from '$lib/components/UnsavedChanges/index.svelte';
+  import { UploadImage, UnsavedChanges } from '$features/ui';
   import * as Field from '@cio/ui/base/field';
 
   let avatar = $state<string | File | undefined>();
   let hasUnsavedChanges = $state(false);
-  let hex = $state('');
-
-  $effect(() => {
-    const theme = $currentOrg.theme;
-
-    // if not a custom theme, don't update hex
-    if (!theme || theme.includes('theme-')) return;
-
-    // only update hex with value of `theme` when theme changes not when HEX changes
-    untrack(() => {
-      hex = theme;
-    });
-  });
 
   const themes = {
-    rose: 'theme-rose',
-    green: 'theme-green',
-    orange: 'theme-orange',
-    violet: 'theme-violet',
-    default: ''
+    rose: 'rose',
+    green: 'green',
+    orange: 'orange',
+    purple: 'purple',
+    blue: 'blue'
   };
 
-  const saveTheme = debounce(async (theme: string) => {
-    await orgApi.update($currentOrg.id, {
-      theme
-    });
-  }, 700);
+  const updateThemeApi = debounce(async (theme: string) => {
+    console.log('saving theme', theme);
+    await orgApi.update(
+      $currentOrg.id,
+      {
+        theme
+      },
+      {
+        onSuccess: () => {}
+      }
+    );
+  }, 2000);
 
   function handleChangeTheme(t = '') {
-    return async () => {
-      document.body.className = document.body.className
-        .split(' ')
-        .filter((c) => !c.includes('theme'))
-        .join(' ')
-        .concat(t ? ' ' : '', t);
-      $currentOrg.theme = t;
+    return () => {
+      if (t === $currentOrg.theme) return;
 
-      hex = '';
+      $currentOrg.theme = t;
 
       setTheme(t);
 
-      saveTheme(t);
+      updateThemeApi(t);
     };
   }
 
-  async function handleCustomTheme() {
-    if (!hex) return;
-
-    injectCustomTheme(hex);
-    setCustomTheme('theme-custom');
-
-    $currentOrg.theme = hex;
-
-    saveTheme(hex);
-  }
-
   export async function handleUpdate() {
     await orgApi.update($currentOrg.id, {
       name: $currentOrg.name,
@@ -89,8 +65,13 @@
   function gotoSettings(pathname: string) {
     goto(`${$currentOrgPath}/settings${pathname}`);
   }
+  let isCustomTheme = $derived($currentOrg?.theme?.includes('#'));
 
-  let isCustomTheme = $derived(hex && !hex.includes('theme-'));
+  $effect(() => {
+    console.log('$currentOrg?.theme', $currentOrg?.theme);
+    console.log('isCustomTheme', isCustomTheme);
+  });
+  let hex = $derived($currentOrg.theme.includes('#') ? $currentOrg.theme : undefined);
 </script>
 
 <UnsavedChanges bind:hasUnsavedChanges />
@@ -125,9 +106,9 @@
     <Field.Field>
       <div class="flex items-center gap-5">
         <button
-          class="rounded-full border-2 {$currentOrg.theme === themes.default &&
+          class="rounded-full border-2 {$currentOrg.theme === themes.blue &&
             'border-[#1d4ee2]'} flex h-fit items-center justify-center"
-          onclick={handleChangeTheme(themes.default)}
+          onclick={handleChangeTheme(themes.blue)}
           aria-label="Default blue theme"
         >
           <div class="m-1 h-6 w-6 rounded-full bg-[#1d4ee2] md:h-6 md:w-6"></div>
@@ -161,18 +142,17 @@
         </button>
 
         <button
-          class="rounded-full border-2 {$currentOrg.theme === themes.violet &&
-            'border-[#cf00ce]'} flex h-fit items-center justify-center"
-          onclick={handleChangeTheme(themes.violet)}
-          aria-label="Violet theme"
+          class="rounded-full border-2 {$currentOrg.theme === themes.purple &&
+            'border-purple-600'} flex h-fit items-center justify-center"
+          onclick={handleChangeTheme(themes.purple)}
+          aria-label="Purple theme"
         >
-          <div class="m-1 h-6 w-6 rounded-full bg-[#cf00ce] md:h-6 md:w-6"></div>
+          <div class="m-1 h-6 w-6 rounded-full bg-purple-600 md:h-6 md:w-6"></div>
         </button>
 
         <div
-          class="h-auto w-fit border-2 {isCustomTheme
-            ? 'border-primary-700'
-            : 'dark:border-neutral-700'} group relative rounded-full"
+          style={`border-color: ${isCustomTheme ? $currentOrg.theme : 'dark:border-neutral-700'};`}
+          class="group relative h-auto w-fit rounded-full border-2"
         >
           <!-- plus icon positioned over the color picker -->
           <div
@@ -189,7 +169,15 @@
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
             </svg>
           </div>
-          <ColorPicker position="responsive" label="" bind:hex on:input={handleCustomTheme} />
+          <ColorPicker
+            position="responsive"
+            label=""
+            {hex}
+            on:input={(e) => {
+              console.log('hex changed', e.detail.hex);
+              handleChangeTheme(e.detail.hex)();
+            }}
+          />
         </div>
       </div>
     </Field.Field>

apps/dashboard/src/lib/features/settings/pages/profile.svelte

@@ -3,13 +3,12 @@
   import type { TLocale } from '@cio/db/types';
   import { profile } from '$lib/utils/store/user';
   import { CircleCheckBig } from '@lucide/svelte';
-  import { profileApi } from '$lib/features/auth/api/profile.svelte';
+  import { profileApi } from '$features/auth/api/profile.svelte';
   import { t } from '$lib/utils/functions/translations';
   import LanguagePicker from '../components/language-picker.svelte';
   import { Input } from '@cio/ui/base/input';
   import { Button } from '@cio/ui/base/button';
-  import UploadImage from '$lib/components/UploadImage/index.svelte';
-  import UnsavedChanges from '$lib/components/UnsavedChanges/index.svelte';
+  import { UploadImage, UnsavedChanges } from '$features/ui';
   import * as Field from '@cio/ui/base/field';
 
   let avatar = $state<string | File | undefined>();
@@ -135,7 +134,7 @@
             </Button>
             <Button
               variant="ghost"
-              class="text-primary-700 text-sm"
+              class="ui:text-primary text-sm"
               disabled={profileApi.isLoading}
               onclick={() => {
                 email = $profile.email || '';

apps/dashboard/src/lib/features/settings/pages/teams.svelte

@@ -4,9 +4,9 @@
 
   import { profile } from '$lib/utils/store/user';
   import { isFreePlan, currentOrg } from '$lib/utils/store/org';
-  import { orgApi } from '$lib/features/org/api/org.svelte';
+  import { orgApi } from '$features/org/api/org.svelte';
   import { t } from '$lib/utils/functions/translations';
-  import { snackbar } from '$lib/components/Snackbar/store';
+  import { snackbar } from '$features/ui/snackbar/store';
   import type { OrgTeamMember } from '$lib/utils/types/org';
   import { ROLE } from '@cio/utils/constants';
   import { ROLE_LABEL } from '$lib/utils/constants/roles';
@@ -15,7 +15,7 @@
   import { Badge } from '@cio/ui/base/badge';
   import { Input } from '@cio/ui/base/input';
   import { Button } from '@cio/ui/base/button';
-  import { ComingSoon, UpgradeBanner } from '$lib/features/ui';
+  import { ComingSoon, UpgradeBanner } from '$features/ui';
   import * as Field from '@cio/ui/base/field';
 
   let emailsStr = $state('');

apps/dashboard/src/lib/features/ui/analytics/activity-card.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Component } from 'svelte';
+
+  interface Activity {
+    icon: Component;
+    title: string;
+    percentage: number | string;
+    description: string;
+    hidePercentage?: boolean;
+  }
+
+  interface Props {
+    activity: Activity;
+  }
+
+  let { activity }: Props = $props();
+</script>
+
+<div
+  class="flex flex-col items-center justify-center gap-5 rounded-xl border p-3 md:flex-row md:p-5 dark:border-neutral-600"
+>
+  <div class="bg-primary-200 w-fit rounded-full p-4 text-black">
+    <activity.icon />
+  </div>
+
+  <div>
+    <p class="text-center text-sm font-medium text-gray-600 md:text-left dark:text-gray-200">
+      {activity.title}
+    </p>
+    <p class="text-center text-2xl md:text-left">
+      {activity.percentage}
+      {#if !activity.hidePercentage}
+        %
+      {/if}
+    </p>
+    <p class="text-center text-xs text-gray-500 md:text-left md:text-sm dark:text-gray-300">
+      {activity.description}
+    </p>
+  </div>
+</div>
+

apps/dashboard/src/lib/features/ui/analytics/hero-profile-card.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import * as Avatar from '@cio/ui/base/avatar';
+  import { calDateDiff } from '$lib/utils/functions/date';
+  import { t } from '$lib/utils/functions/translations';
+  import type { UserAnalytics } from '$lib/utils/types/analytics';
+  import AlarmClockIcon from '@lucide/svelte/icons/alarm-clock';
+  import MailIcon from '@lucide/svelte/icons/mail';
+
+  interface Props {
+    user: UserAnalytics['user'];
+  }
+
+  let { user }: Props = $props();
+</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.Root class="h-16 w-16">
+      <Avatar.Image
+        src={user.avatarUrl ? user.avatarUrl : '/logo-192.png'}
+        alt={user.fullName ? user.fullName : 'User'}
+      />
+      <Avatar.Fallback>{user.fullName ? user.fullName : 'User'}</Avatar.Fallback>
+    </Avatar.Root>
+    <div class="flex flex-col space-y-2">
+      <p class="text-center text-2xl md:text-left dark:text-white">
+        {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">
+          <MailIcon size={16} />
+          {user.email}
+        </p>
+
+        <p class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
+          <AlarmClockIcon size={16} />
+          {$t('analytics.last_seen')}:
+          <span class="italic">
+            {user.lastSeen ? calDateDiff(user.lastSeen) : $t('analytics.a_while_ago')}
+          </span>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+

apps/dashboard/src/lib/features/ui/analytics/loading-page.svelte

@@ -0,0 +1,13 @@
+<script>
+  import { Skeleton } from '@cio/ui/base/skeleton';
+</script>
+
+<div class="mx-auto max-w-4xl pt-14">
+  <Skeleton class="h-40 w-full" />
+  <div class="mt-10 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+    <Skeleton class="h-40 w-[270px]" />
+    <Skeleton class="h-40 w-[270px]" />
+    <Skeleton class="h-40 w-[270px]" />
+  </div>
+</div>
+

apps/dashboard/src/lib/features/ui/auth-ui.svelte

@@ -3,7 +3,7 @@
   import * as Avatar from '@cio/ui/base/avatar';
   import { t } from '$lib/utils/functions/translations';
   import { currentOrg } from '$lib/utils/store/org';
-  import GoogleIconColored from '$lib/components/Icons/GoogleIconColored.svelte';
+  import { GoogleIconColored } from '$features/ui/icons';
   import { authClient } from '$lib/utils/services/auth/client';
   import * as Card from '@cio/ui/base/card';
   import { Button } from '@cio/ui/base/button';

apps/dashboard/src/lib/features/ui/backdrop.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  interface Props {
+    disableCenteredContent?: boolean;
+    className?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { disableCenteredContent = false, className = '', children }: Props = $props();
+</script>
+
+<div class="root {!className.includes('opacity') && 'opacity-100'} {!disableCenteredContent && 'center'} {className}">
+  {@render children?.()}
+</div>
+
+<style>
+  .root {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.3);
+    -webkit-tap-highlight-color: transparent;
+    color: #fff;
+    z-index: 1201;
+    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  }
+
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

apps/dashboard/src/lib/features/ui/close-btn.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import XIcon from '@lucide/svelte/icons/x';
+  import { Spinner } from '@cio/ui/base/spinner';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+
+  interface Props {
+    onClick?: (value: string) => void;
+    isClosing?: boolean;
+    tooltip?: string;
+  }
+
+  let { onClick = () => {}, isClosing = false, tooltip }: Props = $props();
+
+  function handleClick() {
+    onClick('');
+  }
+</script>
+
+<IconButton {tooltip} onclick={handleClick} disabled={isClosing}>
+  {#if isClosing}
+    <Spinner class="text-blue-700! size-5" />
+  {:else}
+    <XIcon size={16} class="dark:text-black" />
+  {/if}
+</IconButton>

apps/dashboard/src/lib/features/ui/code-snippet.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  interface Props {
+    code?: string;
+  }
+
+  let { code = '' }: Props = $props();
+</script>
+
+<div class="mb-3 rounded-md bg-gray-200 p-5 dark:bg-gray-500">
+  {@html code}
+</div>

apps/dashboard/src/lib/features/ui/coming-soon.svelte

@@ -5,6 +5,6 @@
   let { label = $t('course.navItem.lessons.exercises.new_exercise_modal.coming_soon') } = $props();
 </script>
 
-<Badge variant="outline" class="ui:text-white border-none! bg-blue-600 dark:bg-blue-700 dark:text-black">
+<Badge variant="default" class="">
   {label}
 </Badge>

apps/dashboard/src/lib/features/ui/confetti/confetti.svelte

@@ -0,0 +1,64 @@
+<script>
+  import { onMount } from 'svelte';
+  import confetti from 'canvas-confetti';
+  import { confettiStore } from './store';
+
+  let myCanvas = $state();
+  let myConfetti;
+
+  function showConfetti(show) {
+    if (!show) return;
+
+    const duration = 5 * 1000;
+    const animationEnd = Date.now() + duration;
+    const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+    function randomInRange(min, max) {
+      return Math.random() * (max - min) + min;
+    }
+
+    const interval = setInterval(function () {
+      const timeLeft = animationEnd - Date.now();
+
+      if (timeLeft <= 0) {
+        return clearInterval(interval);
+      }
+
+      const particleCount = 50 * (timeLeft / duration);
+      // since particles fall down, start a bit higher than random
+      myConfetti(
+        Object.assign({}, defaults, {
+          particleCount,
+          origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }
+        })
+      );
+      myConfetti(
+        Object.assign({}, defaults, {
+          particleCount,
+          origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }
+        })
+      );
+    }, 250);
+  }
+
+  onMount(() => {
+    myConfetti = confetti.create(myCanvas, {
+      resize: true,
+      useWorker: true
+    });
+  });
+
+  $effect(() => {
+    showConfetti($confettiStore.show);
+  });
+</script>
+
+<canvas bind:this={myCanvas}></canvas>
+
+<style>
+  canvas {
+    position: absolute;
+    width: 60%;
+    height: 70%;
+  }
+</style>

apps/dashboard/src/lib/features/ui/confetti/store.ts

@@ -0,0 +1,12 @@
+import { writable } from 'svelte/store';
+
+export const confettiStore = writable({
+  show: false
+});
+
+export function toggleConfetti() {
+  confettiStore.update((confetti) => ({
+    ...confetti,
+    show: !confetti.show
+  }));
+}