CLASSROOMIO-T-86:Implemented the my learning page

Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com>

Merge-request: CLASSROOMIO-MR-42
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/LMS/SideBar.svelte

@@ -1,11 +1,11 @@
 <script>
   import { page } from '$app/stores';
   import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
+  import LicenseDraft from 'carbon-icons-svelte/lib/LicenseDraft.svelte';
   import TextChip from '$lib/components/Chip/Text.svelte';
   import OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
   import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
   import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
-  import ReviewsIcon from '$lib/components/Icons/ReviewsIcon.svelte';
   import CommunityIcon from '$lib/components/Icons/CommunityIcon.svelte';
   import ExerciseIcon from '$lib/components/Icons/ExerciseIcon.svelte';
   import Avatar from '$lib/components/Avatar/index.svelte';
@@ -36,14 +36,9 @@
     },
     {
       name: 'Exercise',
-      icon: ExerciseIcon,
+      icon: LicenseDraft,
       link: '/lms/exercises'
     },
-    {
-      name: 'Reviews',
-      icon: ReviewsIcon,
-      link: '/lms/reviews'
-    },
     {
       name: 'Community',
       icon: CommunityIcon,
@@ -81,6 +76,8 @@
               <svelte:component
                 this={item.icon}
                 color={isActive($page.url.pathname, `${item.link}`) ? 'black' : 'gray'}
+                size={24}
+                class="carbon-icon dark:text-white"
               />
               <p class="dark:text-white ml-2">{item.name}</p>
             </li>

src/lib/components/LMS/components/AllLearning.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { goto } from '$app/navigation';
+  import Box from '$lib/components/Box/index.svelte';
+  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { mockData } from './store';
+
+  const gotoCourse = (title) => {
+    goto(`/courses/${title}`);
+  };
+</script>
+
+<section>
+  {#if mockData.length > 0}
+    <div
+      class="flex items-center justify-center md:justify-start flex-wrap gap-4 dark:text-white mt-2"
+    >
+      {#each mockData as data}
+        <div
+          class="w-80 min-h-[350px] flex items-start justify-start flex-wrap flex-col border rounded mr-2 mb-5 border-gray-200"
+        >
+          <img src={data.src} alt="course" class="w-80 h-[180px] object-cover" />
+
+          <div class="w-full p-3">
+            <p
+              class="line-clamp-2 text-xl lg:text-2xl font-normal text-[#262626] py-1 dark:text-white"
+            >
+              {data.title}
+            </p>
+            <p class="line-clamp-2 text-base text-[#656565] dark:text-white py-1">
+              {data.description}
+            </p>
+            <p class="py-1 text-[#7888B7] dark:text-white">By {data.author}</p>
+            <span class="flex flex-wrap flex-row items-start gap-2 justify-between mt-8">
+              <span>
+                <p>{data.lessons} lessons</p>
+                {#if data.inProgress}
+                  <div class="flex items-center gap-2">
+                    <div class=" relative bg-[#EAEAEA] w-full h-1">
+                      <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+                    </div>
+                    <p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
+                  </div>
+                {/if}
+              </span>
+              <PrimaryButton
+                label={data.inProgress ? 'Continue Course' : 'Start Course'}
+                variant={VARIANTS.OUTLINED}
+                className="rounded-none text-[#0233BD]"
+                onClick={() => gotoCourse(data.title)}
+              />
+            </span>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <Box className="flex flex-col items-center mt-2">
+      <CoursesEmptyIcon />
+      <h3 class="text-center">You haven't started any course yet</h3>
+      <p class="w-[70%] md:w-[35%] text-center">
+        Once you start a course, your progress will reflect here
+      </p>
+    </Box>
+  {/if}
+</section>

src/lib/components/LMS/components/Completed.svelte

@@ -0,0 +1,70 @@
+<script>
+  import { goto } from '$app/navigation';
+  import Box from '$lib/components/Box/index.svelte';
+  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { courseCompleted } from './store';
+
+  const getCourse = () => {
+    goto(`/courses/${title}`);
+  };
+</script>
+
+<section>
+  {#if courseCompleted.length > 0}
+    <div
+      class="flex items-center justify-center md:justify-start flex-wrap gap-4 dark:text-white mt-2"
+    >
+      {#each courseCompleted as data}s
+        <div
+          class="w-80 min-h-[350px] flex items-start justify-start flex-col border rounded mr-2 mb-5 border-gray-200"
+        >
+          <div class="w-full h-[180px]">
+            <img src={data.src} alt="course" class="w-full h-full object-cover" />
+          </div>
+          <div class="w-full p-3">
+            <p
+              class="line-clamp-2 text-xl lg:text-2xl font-normal text-[#262626] dark:text-white py-1"
+            >
+              {data.title}
+            </p>
+            <p class="line-clamp-2 text-base text-[#656565] dark:text-white py-1">
+              {data.description}
+            </p>
+            <p class="py-1 text-[#7888B7] dark:text-white">By {data.author}</p>
+            <span
+              class="flex flex-col-reverse lg:flex-row items-start lg:items-center gap-2 justify-between"
+            >
+              <span>
+                <p>{data.lessons} lessons</p>
+                {#if data.inProgress}
+                  <div class="flex items-center gap-2">
+                    <div class=" relative bg-[#EAEAEA] w-full h-1">
+                      <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+                    </div>
+                    <p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
+                  </div>
+                {/if}
+              </span>
+              <PrimaryButton
+                label={data.inProgress ? 'Continue Course' : 'Start Course'}
+                variant={VARIANTS.OUTLINED}
+                className="rounded-none text-[#0233BD]"
+                onClick={getCourse}
+              />
+            </span>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <Box className="flex flex-col items-center mt-2">
+      <CoursesEmptyIcon />
+      <h3 class="text-center">No courses completed yet</h3>
+      <p class="w-[70%] md:w-[35%] text-center">
+        Courses you complete will appear here. We believe in you , finish hard 💪🏾.
+      </p>
+    </Box>
+  {/if}
+</section>

src/lib/components/LMS/components/InProgress.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { goto } from '$app/navigation';
+  import Box from '$lib/components/Box/index.svelte';
+  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { mockData, courseInProgress } from './store';
+
+  const gotoCourse = (title) => {
+    goto(`/courses/${title}`);
+  };
+</script>
+
+<section>
+  {#if courseInProgress.length > 0}
+    <div
+      class="flex items-center justify-center md:justify-start flex-wrap gap-4 dark:text-white mt-2"
+    >
+      {#each courseInProgress as data}
+        <div
+          class="w-80 min-h-[350px] flex items-start justify-start flex-wrap flex-col border rounded mr-2 mb-5 border-gray-200"
+        >
+          <img src={data.src} alt="course" class="w-80 h-[180px] object-cover" />
+
+          <div class="w-full p-3">
+            <p
+              class="line-clamp-2 text-xl lg:text-2xl font-normal text-[#262626] py-1 dark:text-white"
+            >
+              {data.title}
+            </p>
+            <p class="line-clamp-2 text-base text-[#656565] dark:text-white py-1">
+              {data.description}
+            </p>
+            <p class="py-1 text-[#7888B7] dark:text-white">By {data.author}</p>
+            <span class="flex flex-wrap flex-row items-start gap-2 justify-between mt-8">
+              <span>
+                <p>{data.lessons} lessons</p>
+                {#if data.inProgress}
+                  <div class="flex items-center gap-2">
+                    <div class=" relative bg-[#EAEAEA] w-full h-1">
+                      <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+                    </div>
+                    <p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
+                  </div>
+                {/if}
+              </span>
+              <PrimaryButton
+                label={data.inProgress ? 'Continue Course' : 'Start Course'}
+                variant={VARIANTS.OUTLINED}
+                className="rounded-none text-[#0233BD]"
+                onClick={() => gotoCourse(data.title)}
+              />
+            </span>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <Box className="flex flex-col items-center mt-2">
+      <CoursesEmptyIcon />
+      <h3 class="text-center">No course progress yet</h3>
+      <p class="w-[70%] md:w-[35%] text-center">
+        Once you start a course, your progress will reflect here
+      </p>
+    </Box>
+  {/if}
+</section>

src/lib/components/LMS/components/Learning.svelte

@@ -1,52 +1,39 @@
 <script>
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { goto } from '$app/navigation';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { course } from '$lib/components/Course/store';
   import Box from '$lib/components/Box/index.svelte';
   import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
   import { courseInProgress } from './store';
 
-  const mockData = [
-    {
-      title: 'Colorful digital painting',
-      description: 'Learn the basics of figma and start design web apps for the world ...',
-      src: '/painting.png',
-      progress: 'w-[30%]'
-    },
-    {
-      title: 'Photo editing 101',
-      description: 'Learn the different techniques to edit photos using Adobe Lightroom.',
-      src: '/digital.png',
-      progress: 'w-[45%]'
-    }
-  ];
+  const gotoCourse = (title) => {
+    goto(`/courses/${title}`);
+  };
 </script>
 
 <section class="h-full mt-10 mb-20 xl:mt-2">
   <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Currently Learning</p>
-  <Box
-    className="w-full border-2 border-[#EAEAEA]  dark:bg-gray-700 h-[516px] overflow-y-auto gap-10 rounded"
+  <div
+    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full h-fit xl:h-[516px] p-3"
   >
-    {#if courseInProgress === false}
-      <div class="flex flex-col items-center">
-        <CoursesEmptyIcon />
-        <h3 class="">No courses progress yet</h3>
-        <p class="w-[75%] text-center">Once you start a course, your progress will reflect here</p>
-      </div>
-    {:else}
-      <div class="w-full h-full flex flex-col justify-start">
-        {#each mockData as data, index}
+    {#if courseInProgress.length > 0}
+      <div class="w-full h-full xl:h-[516px] flex flex-col justify-start">
+        {#each courseInProgress as data, index}
           <div class="p-5">
             <span class="flex flex-col md:flex-row gap-3 items-start pb-5">
               <img src={data.src} alt="course" class="hidden md:block md:w-[60px] md:h-[60px]" />
               <div class="w-full">
                 <p class="text-base font-semibold dark:text-white">{data.title}</p>
-                <p class="text-xs font-normal text-[#656565] dark:text-white">{data.description}</p>
+                <p class="line-clamp-2 text-xs font-normal text-[#656565] dark:text-white">
+                  {data.description}
+                </p>
               </div>
               <PrimaryButton
-                label="continue"
+                label="Continue"
                 variant={VARIANTS.OUTLINED}
                 className="rounded-none text-[#0233BD]"
+                onClick={() => gotoCourse(data.title)}
               />
             </span>
             <div class="relative bg-[#EAEAEA] w-full h-1">
@@ -55,6 +42,12 @@
           </div>
         {/each}
       </div>
+    {:else}
+      <div class="flex flex-col items-center">
+        <CoursesEmptyIcon />
+        <h3 class="text-center">No courses progress yet</h3>
+        <p class="w-[75%] text-center">Once you start a course, your progress will reflect here</p>
+      </div>
     {/if}
-  </Box>
+  </div>
 </section>

src/lib/components/LMS/components/Student.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { InlineCalendar, Datepicker } from 'svelte-calendar';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import Box from '$lib/components/Box/index.svelte';
   import { isMobile } from '$lib/utils/store/useMobile';
   import { formatDate } from '$lib/utils/functions/routes/dashboard';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
@@ -10,8 +9,8 @@
 
   const theme = {
     calendar: {
-      width: '22em',
-      height: '100%',
+      width: '250px',
+      height: '200px',
       shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
       colors: {
         background: {
@@ -31,10 +30,10 @@
 <section class="w-full h-full mt-2">
   <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Your Schedule</p>
 
-  <Box
-    className="p-5 border-2 border-[#EAEAEA]  dark:bg-gray-700 gap-5 rounded w-full h-[516px] overflow-y-auto  flex flex-col justify-start"
+  <div
+    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-gray-700 rounded w-full h-fit xl:h-[516px] p-3"
   >
-    <div class="w-full hidden xl:flex items-center justify-center">
+    <div class="w-full h-fit hidden xl:flex items-center justify-center">
       <InlineCalendar bind:store {theme} />
     </div>
     {#if $isMobile}
@@ -76,5 +75,5 @@
     {:else}
       <p>No Lesson on this day</p>
     {/if}
-  </Box>
+  </div>
 </section>

src/lib/components/LMS/components/store.js

@@ -1 +1,42 @@
-export const courseInProgress = false;
+export const mockData = [
+  {
+    title: 'Photo editing 101',
+    description:
+      'Learn the different techniques to edit photos using Adobe Lightroom.Learn the basics of figma and start design web apps for the world ...Learn the basics of figma and start design web apps for the world ...',
+    author: 'Derrick Amenuvue',
+    lessons: 8,
+    inProgress: true,
+    completed: false,
+    src: '/digital.svg',
+    progress: 'w-[45%]',
+    progressRate: 45
+  },
+  {
+    title: 'Colorful digital painting',
+    description:
+      'Learn the different techniques to edit photos using Adobe Lightroom.Learn the basics of figma and start design web apps for the world ...Learn the basics of figma and start design web apps for the world ...',
+    author: 'Derrick Amenuvue',
+    inProgress: true,
+    completed: false,
+    lessons: 5,
+    src: '/painting.svg',
+    progress: 'w-[30%]',
+    progressRate: 45
+  },
+  {
+    title: 'AI for dummys',
+    description:
+      'Learn the different techniques to edit photos using Adobe Lightroom.Learn the basics of figma and start design web apps for the world ...Learn the basics of figma and start design web apps for the world ...',
+    author: 'Derrick Amenuvue',
+    inProgress: false,
+    completed: false,
+    lessons: 18,
+    src: '/digital.svg',
+    progress: 'w-[45%]',
+    progressRate: 45
+  }
+];
+export const courseInProgress = mockData.filter((course) => course.inProgress);
+export const courseCompleted = mockData.filter((course) => course.completed);
+export const totalCourses = mockData.length;
+export const progressPercentage = Math.round((courseInProgress.length / totalCourses) * 100);

src/lib/components/Tabs/index.svelte

@@ -8,34 +8,52 @@
 <div class="w-full flex flex-col">
   <div class="flex items-center border-b-2 w-full">
     {#each tabs as tab}
-      <button
-        class="relative {currentTab === tab.value
-          ? 'text-blue-700'
-          : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
-        on:click={onChange(tab.value)}
-      >
-        <div class="grid grid-cols-4 gap-3 items-center">
-          {#if tab.icon}
-            <svelte:component this={tab.icon} />
-          {/if}
-          {tab.label}
-          {#if typeof tab.badgeValue === 'number'}
-            <TextChip
-              value={tab.badgeValue}
-              size="sm"
-              shape="rounded-full"
-              className=" bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
-            />
-          {/if}
-        </div>
-
-        <span
-          class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
-          tab.value
-            ? 'w-full'
-            : 'w-0'}"
-        />
-      </button>
+      {#if !tab.icon && !tab.badgeValue}
+        <button
+          class="relative {currentTab === tab.value
+            ? 'text-blue-700'
+            : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-8 text-center py-3"
+          on:click={onChange(tab.value)}
+        >
+          <div class="flex items-center justify-center w-full text-center">
+            {tab.label}
+          </div>
+          <span
+            class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
+            tab.value
+              ? 'w-full'
+              : 'w-0'}"
+          />
+        </button>
+      {:else}
+        <button
+          class="relative {currentTab === tab.value
+            ? 'text-blue-700'
+            : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
+          on:click={onChange(tab.value)}
+        >
+          <div class="grid grid-cols-4 gap-3 items-center">
+            {#if tab.icon}
+              <svelte:component this={tab.icon} />
+            {/if}
+            {tab.label}
+            {#if typeof tab.badgeValue === 'number'}
+              <TextChip
+                value={tab.badgeValue}
+                size="sm"
+                shape="rounded-full"
+                className=" bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
+              />
+            {/if}
+          </div>
+          <span
+            class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
+            tab.value
+              ? 'w-full'
+              : 'w-0'}"
+          />
+        </button>
+      {/if}
     {/each}
   </div>
 

src/routes/lms/+page.svelte

@@ -1,7 +1,11 @@
 <script>
   import Student from '$lib/components/LMS/components/Student.svelte';
   import Learning from '$lib/components/LMS/components/Learning.svelte';
-  import { courseInProgress } from '$lib/components/LMS/components/store';
+  import {
+    courseInProgress,
+    totalCourses,
+    progressPercentage
+  } from '$lib/components/LMS/components/store';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import Box from '$lib/components/Box/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
@@ -12,58 +16,62 @@
   <title>Student Dashboard - ClassroomIO</title>
 </svelte:head>
 
-<section class="m-5 w-[calc(100vw - 300px)] h-full gap-5">
-  <h1 class="text-3xl font-semibold">Dashboard</h1>
-  <div
-    class="w-full h-fit lg:h-[265px] flex items-center justify-between p-2 md:p-5 lg:p-10 rounded-md bg-[#042172] my-2"
-  >
-    <span>
-      <p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
-        Today is another day to bring you closer to your learning goals. Don’t give up, the more you
-        learn the better you get.
-      </p>
-      <PrimaryButton
-        label="Start learning"
-        variant={VARIANTS.CONTAINED_WHITE}
-        className="bg-white text-blue-800"
-        onClick={() => goto('/lms/mylearning')}
-      />
-    </span>
-    <img
-      src="/images/student-learning.svg"
-      alt="student Learning Pictogram"
-      class="hidden md:block md:w-20 md:h-16 lg:w-[275px] lg:h-[205px]"
-    />
-  </div>
-  <main class="flex w-full h-full flex-col xl:flex-row gap-5">
-    <div class="w-full h-full">
-      <Student />
-    </div>
-
-    <div class="w-full h-full">
-      <Learning />
-    </div>
-    <Box
-      className="w-full xl:w-[400px] h-[516px] overflow-y-auto bg-[#F5F8FE] dark:bg-gray-700 flex items-center justify-center my-20 xl:mt-11 p-2"
+<section class="max-w-[1240px] gap-5 mx-auto">
+  <div class="m-5">
+    <h1 class="text-3xl font-semibold">Dashboard</h1>
+    <div
+      class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-[#042172] my-2"
     >
-      <div
-        class="w-full h-full flex flex-col md:flex-row xl:flex-col items-center md:items-center xl:items-start gap-5 md:justify-around"
-      >
-        <div>
-          <img src="/images/target.svg" alt="student Learning score" />
-        </div>
-        <span class="text-center xl:text-start">
-          <p class="text-base font-semibold py-2 text-[#040F2D] dark:text-white">Your Progress</p>
-          {#if courseInProgress}
-            <p class="text-xs font-normal text-[#656565] dark:text-white">2/15 lessons completed</p>
-          {:else}
-            <p class="text-xs font-normal text-[#656565] dark:text-white">No lessons started</p>
-          {/if}
-        </span>
-        <h1 class="text-5xl md:text-7xl font-bold text-[#262626] dark:text-white my-0">
-          {courseInProgress ? 1 : 0} %
-        </h1>
+      <span>
+        <p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
+          Today is another day to bring you closer to your learning goals. Don’t give up, the more
+          you learn the better you get.
+        </p>
+        <PrimaryButton
+          label="Start learning"
+          variant={VARIANTS.CONTAINED_WHITE}
+          className="bg-white text-blue-800"
+          onClick={() => goto('/lms/mylearning')}
+        />
+      </span>
+      <img
+        src="/images/student-learning.svg"
+        alt="student Learning Pictogram"
+        class="w-28 md:block md:w-1/3 lg:w-[275px] lg:h-[205px] mb-3 md:mb-0"
+      />
+    </div>
+    <main class="flex w-full h-full flex-col xl:flex-row xl:gap-5">
+      <div class="w-full h-full">
+        <Student />
       </div>
-    </Box>
-  </main>
+
+      <div class="w-full h-full">
+        <Learning />
+      </div>
+      <div
+        class="flex items-center justify-center border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full xl:w-[400px] h-fit xl:h-[516px] overflow-y-auto p-3 xl:mt-11"
+      >
+        <div
+          class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center md:items-center xl:items-start gap-5 md:justify-around"
+        >
+          <div>
+            <img src="/images/target.svg" alt="student Learning score" />
+          </div>
+          <span class="text-center xl:text-start">
+            <p class="text-base font-semibold py-2 text-[#040F2D] dark:text-white">Your Progress</p>
+            {#if courseInProgress.length > 0}
+              <p class="text-xs font-normal text-[#656565] dark:text-white">
+                {courseInProgress.length}/{totalCourses} lessons in progress
+              </p>
+            {:else}
+              <p class="text-xs font-normal text-[#656565] dark:text-white">No lessons started</p>
+            {/if}
+          </span>
+          <h1 class="text-5xl md:text-6xl font-bold text-[#262626] dark:text-white my-0">
+            {progressPercentage} %
+          </h1>
+        </div>
+      </div>
+    </main>
+  </div>
 </section>

src/routes/lms/mylearning/+page.svelte

@@ -1 +1,54 @@
-My Learning
+<script>
+  import TextField from '$lib/components/Form/TextField.svelte';
+
+  import { Search } from 'carbon-components-svelte';
+  import AllLearning from '$lib/components/LMS/components/AllLearning.svelte';
+  import Completed from '$lib/components/LMS/components/Completed.svelte';
+  import InProgress from '$lib/components/LMS/components/InProgress.svelte';
+  import Tabs from '$lib/components/Tabs/index.svelte';
+  import TabContent from '$lib/components/TabContent/index.svelte';
+
+  // let tabs = CONSTANTS.tabs;
+
+  const tabs = [
+    {
+      label: 'All',
+      value: 1
+    },
+    {
+      label: 'In progress',
+      value: 2
+    },
+    {
+      label: 'Complete',
+      value: 3
+    }
+  ];
+  let currentTab = tabs[0].value;
+  const onChange =
+    (tab = 0) =>
+    () =>
+      (currentTab = tab);
+</script>
+
+<section class="max-w-[1240px] mx-auto">
+  <div class="m-2 md:m-5">
+    <div role="searchbox" class=" bg-gray-100 w-full md:w-[60%] lg:w-[30%]">
+      <Search placeholder="Search courses" class="dark:text-black" />
+    </div>
+    <h1 class="text-3xl font-semibold my-4">My Learning</h1>
+    <Tabs {tabs} {currentTab} {onChange}>
+      <slot:fragment slot="content">
+        <TabContent value={tabs[0].value} index={currentTab}>
+          <AllLearning />
+        </TabContent>
+        <TabContent value={tabs[1].value} index={currentTab}>
+          <InProgress />
+        </TabContent>
+        <TabContent value={tabs[2].value} index={currentTab}>
+          <Completed />
+        </TabContent>
+      </slot:fragment>
+    </Tabs>
+  </div>
+</section>

src/routes/lms/reviews/+page.svelte

@@ -1 +0,0 @@
-reviews page

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

@@ -207,7 +207,7 @@
     {/each}
   </div>
 
-  <div class="flex flex-wrap">
+  <div class="flex flex-wrap mt-5">
     <!-- Your Schedule -->
     <div>
       <p class="dark:text-white font-bold mb-7">Your Schedule</p>