CLASSROOMIO-T-6: Dashboard, courses page and other tabs

2023-01-03 09:26:08 +01:00
parent 6d89830e86
commit 1c9639725a
40 changed files with 1524 additions and 264 deletions
@@ -8,12 +8,15 @@
  import { onMount } from 'svelte';
  import { derived } from 'svelte/store';
  import { stores, goto } from '@sapper/app';
+  import _ from 'lodash';
  import * as Sentry from '@sentry/browser';
  import { Moon } from 'svelte-loading-spinners';
  import Tailwindcss from '../components/Tailwindcss.svelte';
-  import Navigation from '../components/Navigation/index.svelte';
+  import LandingNavigation from '../components/Navigation/index.svelte';
+  import OrgNavigation from '../components/Navigation/app.svelte';
  import Snackbar from '../components/Snackbar/index.svelte';
  import Backdrop from '../components/Backdrop/index.svelte';
+  import OrgSideBar from '../components/Org/SideBar.svelte';
  // import SideBar from "../components/SideBar/index.svelte";
  // import Footer from '../components/Footer/index.svelte';
  import Apps from '../components/Apps/index.svelte';
@@ -22,6 +25,7 @@
  import { getSupabase } from '../utils/functions/supabase';
  import { isMobile } from '../utils/store/useMobile';
  import { ROUTES_TO_HIDE_NAV, ROUTE } from '../utils/constants/routes';
+  import { getOrganizations } from '../utils/services/org';

  export let segment;
  export let config;
@@ -47,7 +51,7 @@
      status,
    } = await supabase
      .from('profile')
-      .select(`*, org:organizationmember(*)`)
+      .select(`*`)
      .eq('id', authUser.id)
      .single();

@@ -88,11 +92,14 @@
      // Set user in sentry
      Sentry.setUser($profile);

+      const orgRes = await getOrganizations($profile.id);
+
      // If user coming to login page, then
-      if (!$profile.role) {
+      if (_.isEmpty(orgRes.orgs)) {
        goto(ROUTE.ONBOARDING);
      } else if (['login', 'signup', 'onboarding'].includes(path)) {
-        goto('/dashboard');
+        // By default redirect to first organization
+        goto(`/org/${orgRes.currentOrg.siteName}`);
      }
    }
  }
@@ -101,6 +108,10 @@
    return /course[s]*\/[a-z 0-9 -]/.test(path);
  }

+  function isOrgPage(path) {
+    return /org\/[a-z 0-9 -]/.test(path);
+  }
+
  function handleResize() {
    isMobile.update(() => window.innerWidth <= 760);
  }
@@ -177,13 +188,26 @@
    </Backdrop>
  {/if}
  {#if !ROUTES_TO_HIDE_NAV.includes($page.path) && !isCoursePage(path)}
-    <Navigation {segment} />
+    {#if $page.path.includes('org') || $page.path.includes('profile')}
+      <OrgNavigation />
+    {:else}
+      <LandingNavigation {segment} />
+    {/if}
  {/if}

  <div class="flex justify-between">
-    <slot />
+    {#if isOrgPage($page.path)}
+      <div class="org-root w-full flex items-center justify-between">
+        <OrgSideBar />
+        <div class="org-slot bg-white">
+          <slot />
+        </div>
+      </div>
+    {:else}
+      <slot />
+    {/if}

-    {#if path.includes('courses')}
+    {#if isCoursePage(path)}
      <Apps />
    {/if}
  </div>
@@ -199,6 +223,15 @@
    box-sizing: border-box;
  }

+  .org-root {
+    height: calc(100vh - 44px);
+  }
+  .org-slot {
+    width: calc(100vw - 250px);
+    height: calc(100vh - 44px);
+    overflow-y: auto;
+  }
+
  :global(a:hover) {
    text-decoration: underline;
  }
@@ -5,12 +5,10 @@
 </script>

 <script>
-  import { goto } from '@sapper/app';
  import TextField from '../components/Form/TextField.svelte';
  import PrimaryButton from '../components/PrimaryButton/index.svelte';
  import { getSupabase } from '../utils/functions/supabase';
  import { authValidation } from '../utils/functions/validator';
-  import { ROUTE } from '../utils/constants/routes';
  import { LOGIN_FIELDS } from '../utils/constants/authentication';
  import AuthUI from '../components/AuthUI/index.svelte';

@@ -21,7 +19,6 @@
  let fields = Object.assign({}, LOGIN_FIELDS);
  let submitError;
  let loading = false;
-  let success = false;
  let errors = {};

  async function handleSubmit() {
@@ -41,9 +38,6 @@
      });
      console.log('data', data);
      if (error) throw error;
-
-      success = true;
-      return goto(ROUTE.DASHBOARD);
    } catch (error) {
      submitError = error.error_description || error.message;
    } finally {
@@ -1,25 +1,28 @@
+<script context="module">
+  //@ts-ignore
+  export function preload(page, { config }) {
+    return { config };
+  }
+</script>
+
 <script lang="ts">
  import { goto } from '@sapper/app';
-  import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
  import TextField from '../components/Form/TextField.svelte';
  import UserProfileIcon from '../components/Icons/UserProfileIcon.svelte';
  import PrimaryButton from '../components/PrimaryButton/index.svelte';
  import { VARIANTS } from '../components/PrimaryButton/constants';
  import { profile } from '../utils/store/user';
-  import { ROUTE } from '../utils/constants/routes';
+  import { orgs, currentOrg } from '../utils/store/org';
  import { onboardingValidation } from '../utils/functions/validator';
  import { supabase } from '../utils/functions/supabase';

-  enum OnboardingRoles {
-    Educator = 'educator',
-    Student = 'student',
-  }
-
  interface OnboardingField {
    fullname?: string;
-    role?: OnboardingRoles;
+    orgName?: string;
+    siteName?: string;
    goal?: string;
    source?: string;
+    metadata?: {};
  }

  interface Goal {
@@ -31,14 +34,14 @@

  let fields: OnboardingField = {
    fullname: '',
+    orgName: '',
+    siteName: '',
  };
  let errors: OnboardingField = {};
  let progress = 50;
  let step = 1;
-  let goals: Goal[] = [];
  let loading = false;
-
-  const roles = [OnboardingRoles.Educator, OnboardingRoles.Student];
+  let isSiteNameTouched = false;

  const educatorGoals: Goal[] = [
    {
@@ -59,21 +62,6 @@
    },
  ];

-  const studentGoals: Goal[] = [
-    {
-      label: 'Find new courses',
-      value: 'find-course',
-    },
-    {
-      label: 'Join my class online',
-      value: 'join-class',
-    },
-    {
-      label: 'Just here to explore',
-      value: 'explore',
-    },
-  ];
-
  const sources = [
    {
      label: 'Articles',
@@ -93,29 +81,85 @@
    },
  ];

-  const onGoalInputChange = (event: KeyboardEvent) => {
-    console.log('event', event);
-    fields.goal = (event.target as HTMLInputElement).value;
-  };
+  async function setMetaData() {
+    const response = await fetch('https://api.ipregistry.co/?key=tryout');
+    const payload = await response.json();
+    fields.metadata = payload;
+  }

-  const onSourceInputChange = (event: KeyboardEvent) => {
-    console.log('event', event);
-    fields.source = (event.target as HTMLInputElement).value;
-  };
+  function setOrgSiteName(orgName: string | undefined, isTouched: boolean) {
+    console.log('set org name', orgName, isTouched);
+    if (!orgName || isTouched) return;
+
+    fields.siteName = orgName
+      // @ts-ignore
+      .replaceAll(' ', '-')
+      .toLowerCase();
+  }

  const handleSubmit = async () => {
+    loading = true;
    // Run validation
    console.log(fields);
    errors = onboardingValidation(fields, step);
    console.log('errors', errors);

    if (Object.keys(errors).length) {
+      loading = false;
      return;
    }

+    if (step === 1) {
+      const { data: org, error } = await supabase.from('organization').insert({
+        name: fields.orgName,
+        siteName: fields.siteName,
+      });
+      console.log('Create organisation', org);
+      if (error) {
+        console.log('Error: create organisation', error);
+        errors.siteName = 'Sitename already exists.';
+        loading = false;
+        return;
+      }
+
+      if (Array.isArray(org) && org.length) {
+        const orgData = org[0];
+        const { data, error } = await supabase
+          .from('organizationmember')
+          .insert({
+            organization_id: orgData.id,
+            profile_id: $profile.id,
+            role_id: 1,
+          });
+        console.log('Create organisation member', data);
+
+        orgs.set([orgData as never]);
+        currentOrg.set(orgData);
+
+        if (error) {
+          console.log('Error: create organisation member', error);
+          errors.siteName =
+            'Something went wrong while creating this organization. Please reload and try again';
+
+          // Delete organization so it can be recreated.
+          await supabase
+            .from('organization')
+            .delete()
+            .match({ siteName: fields.siteName });
+          loading = false;
+          return;
+        }
+      }
+
+      // client
+    }
+
    if (step === maxSteps) {
-      // Submit filed
-      loading = true;
+      // Submit filled
+
+      // Set extra metadata based off location
+      await setMetaData();
+
      let { data, error } = await supabase
        .from('profile')
        .update(fields)
@@ -124,184 +168,177 @@

      console.log('data', data);
      console.log('error', error);
-      return goto(ROUTE.DASHBOARD);
+      return goto(`/org/${fields.siteName}`);
    }

    // Move to next step
    step = step + 1;
+    loading = false;
  };

-  $: {
-    progress = Math.round((step / maxSteps) * 100);
-    goals =
-      fields.role === OnboardingRoles.Educator ? educatorGoals : studentGoals;
-  }
+  $: progress = Math.round((step / maxSteps) * 100);
+  $: setOrgSiteName(fields.orgName, isSiteNameTouched);
 </script>

-<div class="w-full min-h-screen flex justify-center">
-  <div class="flex justify-center items-center flex-col w-9/12 lg:w-2/5">
-    <!-- Header With Logo -->
-    <div class="flex flex-col items-center">
-      <div class="flex items-center w-full justify-center mb-4">
-        <img
-          src="/logo-192.png"
-          alt="ClassroomIO logo"
-          height="50"
-          width="50"
-          data-atf="1"
-        />
-        <h4 class="text-xl">ClassroomIO</h4>
-      </div>
-
-      <!-- Loggedin Email -->
-      <div
-        class="w-64 flex items-center justify-center mb-6 py-6 bg-gray-100 rounded-2xl border border-gray-300"
-      >
-        <UserProfileIcon />
-        <p class="text-sm ml-2">{$profile.email}</p>
-      </div>
-    </div>
-
-    <div class="form-container overflow-y-auto w-full pl-2">
-      {#if step === 1}
-        <!-- Role Question -->
-        <div id="role-question" class="flex items-start flex-col mb-6">
-          <!-- Full name questionn -->
-          <TextField
-            label="Full Name"
-            bind:value={fields.fullname}
-            type="text"
-            placeholder="e.g Joke Silva"
-            className="mb-5 w-7/12"
-            labelClassName="text-lg font-normal"
-            errorMessage={errors.fullname}
+{#if $profile.id}
+  <div class="w-full min-h-screen flex justify-center">
+    <div class="flex justify-center items-center flex-col w-9/12 max-w-md">
+      <!-- Header With Logo -->
+      <div class="flex flex-col items-center">
+        <div class="flex items-center w-full justify-center mb-4">
+          <img
+            src="/logo-192.png"
+            alt="ClassroomIO logo"
+            height="50"
+            width="50"
+            data-atf="1"
          />
-
-          <!-- Roal question -->
-          <div>
-            <p class="text-lg font-normal mb-2">What's your main goal today?</p>
-            <p class="text-sm mb-6">
-              This will help us personalize your experience on Classroomio
-            </p>
-
-            <!-- Roles -->
-            <div class="flex items-center">
-              {#each roles as role, index}
-                <button
-                  class="w-52 h-44 p-4 {index === 0 &&
-                    'mr-4'} flex flex-col justify-between bg-gray-200 rounded-md {fields.role ===
-                    role &&
-                    'border-2 border-blue-700'} hover:shadow-xl hover:border-blue-700 transition delay-150 duration-300 ease-in-out"
-                  type="button"
-                  on:click={() => (fields.role = role)}
-                >
-                  <div class="flex flex-col items-end w-full">
-                    {#if fields.role === role}
-                      <CheckmarkFilled20 class="text-blue-700" />
-                    {/if}
-                  </div>
-                  <div>
-                    <h4 class="text-lg text-left capitalize">{role}</h4>
-                    <p class="text-sm text-black-200">
-                      {role === OnboardingRoles.Educator ? 'Teach' : 'Learn'} on
-                      ClassroomIO
-                    </p>
-                  </div>
-                </button>
-              {/each}
-            </div>
-            {#if errors.role}
-              <p class="text-sm text-red-500">{errors.role}</p>
-            {/if}
-          </div>
+          <h4 class="text-xl">ClassroomIO</h4>
        </div>
-      {:else}
-        <!-- Goal/Source Question -->
-        <div id="goal-question" class="flex items-center flex-col mb-6">
-          <div class="w-10/12">
-            <!-- Goal Question -->
-            <div class="w-full flex items-start flex-col justify-between mb-10">
-              <label for="text-field" class="m-0 text-lg font-normal mb-3">
-                What brings you to ClassroomIO?
-              </label>

-              <!-- Loop through Goals -->
-              {#each goals as goal}
-                <label class="w-full inline-flex items-center mb-1 font-light">
-                  <input
-                    type="radio"
-                    bind:group={fields.goal}
-                    name="goal"
-                    value={goal.value}
-                    class="mr-2"
-                  />
-                  {goal.label}
+        <!-- Loggedin Email -->
+        <div
+          class="w-64 flex items-center justify-center mb-6 py-6 bg-gray-100 rounded-2xl border border-gray-300"
+        >
+          <UserProfileIcon />
+          <p class="text-sm ml-2">{$profile.email}</p>
+        </div>
+      </div>
+
+      <div class="form-container overflow-y-auto w-full px-2">
+        {#if step === 1}
+          <!-- Name/Organization Question -->
+          <div id="role-question" class="flex items-start flex-col mb-6">
+            <!-- Full name -->
+            <TextField
+              label="Full Name"
+              bind:value={fields.fullname}
+              type="text"
+              placeholder="e.g Joke Silva"
+              className="mb-5 w-full"
+              labelClassName="text-lg font-normal"
+              errorMessage={errors.fullname}
+            />
+
+            <!-- Org name -->
+            <TextField
+              label="Name of Organization"
+              bind:value={fields.orgName}
+              type="text"
+              placeholder="e.g Education For All"
+              className="mb-5 w-full"
+              labelClassName="text-lg font-normal"
+              errorMessage={errors.orgName}
+              onChange={() => (isSiteNameTouched = true)}
+            />
+
+            <!-- Org Site Name -->
+            <TextField
+              label="Organisation Site name"
+              helperMessage={`https://${fields.siteName || ''}.classroomio.com`}
+              bind:value={fields.siteName}
+              type="text"
+              placeholder="e.g edforall"
+              className="mb-5 w-full"
+              labelClassName="text-lg font-normal"
+              errorMessage={errors.siteName}
+            />
+          </div>
+        {:else}
+          <!-- Goal/Source Question -->
+          <div id="goal-question" class="flex items-center flex-col mb-6">
+            <div class="w-10/12">
+              <!-- Goal Question -->
+              <div
+                class="w-full flex items-start flex-col justify-between mb-10"
+              >
+                <label for="text-field" class="m-0 text-lg font-normal mb-3">
+                  What brings you to ClassroomIO?
                </label>
-              {/each}
-              <!-- Goal: Error message -->
-              {#if errors.goal}
-                <p class="text-sm text-red-500">{errors.goal}</p>
-              {/if}
-            </div>

-            <!-- Source Question -->
-            <div class="w-full flex items-start flex-col justify-between">
-              <label for="text-field" class="m-0 text-lg font-normal mb-3">
-                How did you hear about us?
-              </label>
+                <!-- Loop through Goals -->
+                {#each educatorGoals as goal}
+                  <label
+                    class="w-full inline-flex items-center mb-1 font-light"
+                  >
+                    <input
+                      type="radio"
+                      bind:group={fields.goal}
+                      name="goal"
+                      value={goal.value}
+                      class="mr-2"
+                    />
+                    {goal.label}
+                  </label>
+                {/each}
+                <!-- Goal: Error message -->
+                {#if errors.goal}
+                  <p class="text-sm text-red-500">{errors.goal}</p>
+                {/if}
+              </div>

-              <!-- Loop through Goals -->
-              {#each sources as source}
-                <label class="w-full inline-flex items-center mb-1 font-light">
-                  <input
-                    type="radio"
-                    bind:group={fields.source}
-                    name="source"
-                    value={source.value}
-                    class="mr-2"
-                  />
-                  {source.label}
+              <!-- Source Question -->
+              <div class="w-full flex items-start flex-col justify-between">
+                <label for="text-field" class="m-0 text-lg font-normal mb-3">
+                  How did you hear about us?
                </label>
-              {/each}
-              <!-- Goal: Error message -->
-              {#if errors.source}
-                <p class="text-sm text-red-500">{errors.source}</p>
-              {/if}
+
+                <!-- Loop through Goals -->
+                {#each sources as source}
+                  <label
+                    class="w-full inline-flex items-center mb-1 font-light"
+                  >
+                    <input
+                      type="radio"
+                      bind:group={fields.source}
+                      name="source"
+                      value={source.value}
+                      class="mr-2"
+                    />
+                    {source.label}
+                  </label>
+                {/each}
+                <!-- Goal: Error message -->
+                {#if errors.source}
+                  <p class="text-sm text-red-500">{errors.source}</p>
+                {/if}
+              </div>
            </div>
          </div>
-        </div>
-      {/if}
-    </div>
-
-    <!-- Footer -->
-    <div class="flex justify-between items-center mt-8 w-full">
-      <div class="w-24 h-2 bg-gray-300 relative">
-        <span
-          class="progress absolute top-0 left-0 bg-blue-700 h-full"
-          style="width: {progress}%;"
-        />
-      </div>
-
-      <div class="flex">
-        {#if step > 1}
-          <PrimaryButton
-            label="Back"
-            variant={VARIANTS.NONE}
-            className="py-3 px-6 mr-2 text-blue-700"
-            onClick={() => (step = step - 1)}
-          />
        {/if}
-        <PrimaryButton
-          label="Continue"
-          type="button"
-          className="px-5 py-3"
-          isLoading={loading}
-          onClick={handleSubmit}
-        />
+      </div>
+
+      <!-- Footer -->
+      <div class="flex justify-between items-center mt-8 w-full">
+        <div class="w-24 h-2 bg-gray-300 relative">
+          <span
+            class="progress absolute top-0 left-0 bg-blue-700 h-full"
+            style="width: {progress}%;"
+          />
+        </div>
+
+        <div class="flex">
+          {#if step > 1}
+            <PrimaryButton
+              label="Back"
+              variant={VARIANTS.NONE}
+              className="py-3 px-6 mr-2 text-blue-700"
+              onClick={() => (step = step - 1)}
+            />
+          {/if}
+          <PrimaryButton
+            label="Continue"
+            variant={VARIANTS.CONTAINED}
+            type="button"
+            className="px-5 py-3"
+            isLoading={loading}
+            onClick={handleSubmit}
+          />
+        </div>
      </div>
    </div>
  </div>
-</div>
+{/if}

 <style>
  .form-container {
@@ -0,0 +1 @@
+Audience Page
@@ -0,0 +1,90 @@
+<script context="module">
+  import { profile } from '../../../utils/store/user';
+  import { fetchCourses } from '../../../components/Courses/api';
+
+  export async function preload(page, params) {
+    const parsedUser = JSON.parse(params.user);
+
+    // if (parsedUser && parsedUser.id) {
+    //   return fetchCourses(parsedUser.id);
+    // }
+
+    return {
+      allCourses: [],
+      organizationId: null,
+      cantFetch: true,
+    };
+  }
+</script>
+
+<script>
+  import { onMount } from 'svelte';
+  import PageNav from '../../../components/PageNav/index.svelte';
+  import Courses from '../../../components/Courses/index.svelte';
+  import NewCourseModal from '../../../components/Courses/components/NewCourseModal/index.svelte';
+  import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
+  import {
+    courses,
+    createCourseModal,
+    courseMetaDeta,
+  } from '../../../components/Courses/store';
+  import { setProfileIdOfGroupMember } from '../../../utils/services/courses';
+
+  export let allCourses = [];
+  export let cantFetch;
+
+  async function getCourses(userId) {
+    if (process.browser) {
+      if (cantFetch && typeof cantFetch === 'boolean' && !allCourses.length) {
+        $courseMetaDeta.isLoading = true;
+
+        const updatedProfile = await setProfileIdOfGroupMember(
+          $profile.email,
+          userId
+        );
+        console.log(`updatedProfile`, updatedProfile);
+        const coursesResult = await fetchCourses(userId);
+        console.log(`coursesResult`, coursesResult);
+
+        $courseMetaDeta.isLoading = false;
+        if (!coursesResult) return;
+
+        // organizationId = coursesResult.organizationId;
+        courses.set(coursesResult.allCourses);
+      }
+    }
+  }
+
+  onMount(() => {
+    courses.set(allCourses);
+  });
+
+  $: getCourses($profile.id);
+</script>
+
+<svelte:head>
+  <title>Courses - ClassroomIO</title>
+</svelte:head>
+
+<section class="w-full">
+  <div class="py-10 px-5">
+    <div class="flex items-center justify-between mb-10">
+      <h1 class="text-3xl font-bold">Courses</h1>
+      <PrimaryButton
+        label="Create Course"
+        onClick={() => ($createCourseModal.open = true)}
+      />
+    </div>
+
+    <NewCourseModal />
+
+    <Courses />
+  </div>
+</section>
+
+<style>
+  .root {
+    width: 100%;
+    padding: 0 10px;
+  }
+</style>
@@ -0,0 +1,398 @@
+<script context="module">
+  export async function preload({ params }) {
+    return {
+      orgName: params.slug,
+    };
+  }
+</script>
+
+<script lang="ts">
+  // import { profile } from '../../utils/store/user';
+  // import { supabase } from '../../utils/functions/supabase';
+  import { goto } from '@sapper/app';
+  import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
+  import Avatar from '../../../components/Avatar/index.svelte';
+  import { onMount } from 'svelte';
+  import { InlineCalendar, Datepicker } from 'svelte-calendar';
+  import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
+
+  import {
+    formatUserUpcomingData,
+    formatDate,
+  } from '../../../utils/functions/routes/dashboard';
+  import { user } from '../../../utils/store/user';
+  import { fetchUserUpcomingData } from '../../../utils/services/dashboard';
+  import { isMobile } from '../../../utils/store/useMobile';
+  import type {
+    UserLessonDataType,
+    LessonsByMonthIndexType,
+  } from '../../../utils/types';
+
+  export let orgName: string;
+
+  function createCourse() {
+    goto(`/org/${orgName}/courses?create=true`);
+  }
+
+  const theme = {
+    calendar: {
+      width: '300px',
+      height: '300px',
+      shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
+    },
+  };
+
+  let store;
+  let calendar: HTMLElement | null = null;
+  let lessonsByMonth: LessonsByMonthIndexType = {};
+  let prevSelectedDate: string = new Date().toUTCString();
+  let selectedDateLessonData: UserLessonDataType[] | [] = [];
+
+  const boxes = [
+    {
+      label: 'Revenue (NGN)',
+      value: '0.00',
+    },
+    {
+      label: 'Number of sales',
+      value: 0,
+    },
+    {
+      label: 'Number of courses',
+      value: 0,
+    },
+    {
+      label: 'Total students',
+      value: 0,
+    },
+  ];
+  const activities = [
+    {
+      avatar:
+        'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
+      name: 'Nnancy Okoye',
+      time: '1 hour ago',
+      description: 'Submitted an assignment for lesson Figma prototyping',
+      link: '/',
+    },
+    {
+      avatar:
+        'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
+      name: 'Bro Shagi',
+      time: '2 days ago',
+      description: 'Submitted an assignment for lesson Figma prototyping',
+      link: '/',
+    },
+    {
+      avatar:
+        'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
+      name: 'Bill Gates',
+      time: '13 hours ago',
+      description: 'Submitted an assignment for lesson Figma prototyping',
+      link: '/',
+    },
+    {
+      avatar:
+        'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
+      name: 'Steve Jobs',
+      time: 'yesterday',
+      description: 'Submitted an assignment for lesson Figma prototyping',
+      link: '/',
+    },
+  ];
+
+  const addDotsToCalendar = (currentMonthIndexInRenderedMonth: number) =>
+    setTimeout(() => {
+      if (!calendar) calendar = document.getElementById('calendar');
+      // console.log(
+      //   `currentMonthIndexInRenderedMonth`,
+      //   currentMonthIndexInRenderedMonth
+      // );
+
+      const renderedMonths =
+        calendar?.querySelectorAll('.contents .container .stage .grid .grid') ||
+        [];
+      // console.log(`renderedMonths`, renderedMonths);
+      const currentMonthIndex = new Date($store?.selected).getMonth();
+      const currentMonth = renderedMonths[currentMonthIndexInRenderedMonth];
+      // console.log(`currentMonth`, currentMonth);
+      // All elements for each day in the month - with prev or next month
+      const currentMonthElements =
+        currentMonth?.querySelectorAll<HTMLElement>('a:not(.outsider)') || [];
+      // console.log(`currentMonthElements`, currentMonthElements, '\n\n');
+      const currentMonthData = lessonsByMonth[currentMonthIndex];
+      if (!currentMonthData) return;
+
+      for (let i in currentMonthElements) {
+        if (!currentMonthElements.hasOwnProperty(i)) {
+          continue;
+        }
+
+        const dayElement = currentMonthElements[i];
+        dayElement.style.position = 'relative';
+
+        // The date is inside the element like <a>2</a>
+        const dateIndex = Number(dayElement.innerHTML);
+        if (!!currentMonthData[dateIndex]) {
+          // console.log(`dateIndex`, dateIndex);
+          // console.log(`lesson data`, currentMonthData[dateIndex]);
+          dayElement.insertAdjacentHTML(
+            'beforeend',
+            '<span class="active-day">•</span>'
+          );
+        }
+      }
+    }, 500);
+
+  async function runFirstThings(currentSession: { id: string } | null) {
+    if (!currentSession || !currentSession.id) return;
+
+    const userUpcomingData = await fetchUserUpcomingData(currentSession.id);
+
+    lessonsByMonth = formatUserUpcomingData(userUpcomingData);
+
+    // Only for desktop. Only run on mobile when the user clicks on the date
+    if (!$isMobile) {
+      addDotsToCalendar(1);
+    }
+  }
+
+  function getDataOfSelectedDate(
+    _selectedDate: string
+  ): UserLessonDataType[] | [] {
+    if (!_selectedDate) return [];
+
+    const selectedDate = new Date(_selectedDate).toUTCString();
+
+    const monthIndex = new Date(selectedDate).getMonth();
+    const dateIndex = new Date(selectedDate).getDate();
+
+    // If we changed the month, update the calendar dots
+    const prevMonthIndex = new Date(prevSelectedDate).getMonth();
+    if (prevMonthIndex !== monthIndex) {
+      const currentMonthIndexInRenderedMonth =
+        monthIndex < prevMonthIndex ? 1 : 2;
+
+      addDotsToCalendar(currentMonthIndexInRenderedMonth);
+    }
+
+    prevSelectedDate = selectedDate;
+
+    const monthLessonData = lessonsByMonth[monthIndex];
+    if (!monthLessonData) {
+      return [];
+    }
+
+    const dateLessonData = monthLessonData[dateIndex];
+    if (!dateLessonData) {
+      return [];
+    }
+
+    return dateLessonData;
+  }
+
+  onMount(() => {
+    // Remove default shouldEnlargeDay=true when using <DatePicker /> on mobile
+    if ($store && $store.shouldEnlargeDay) {
+      $store.shouldEnlargeDay = false;
+    }
+  });
+
+  // This is here not called onMount because we want to call it as soon as we have the user's `currentSession` value
+  $: runFirstThings($user.currentSession);
+
+  // Every time the date changes
+  $: selectedDateLessonData = getDataOfSelectedDate($store?.selected);
+</script>
+
+<svelte:head>
+  <title>Dashboard - ClassroomIO</title>
+</svelte:head>
+
+<div class="py-10 px-5">
+  <div class="flex items-center justify-between mb-10">
+    <h1 class="text-3xl font-bold">Dashboard</h1>
+    <PrimaryButton label="Create Course" onClick={createCourse} />
+  </div>
+
+  <div class="flex items-start flex-wrap">
+    {#each boxes as box}
+      <div
+        class="box flex flex-col rounded border border-gray-200 justify-center px-5 mr-5 mb-5"
+      >
+        <p class="mb-2 text-sm">{box.label}</p>
+        <p class="text-xl font-bold">{box.value}</p>
+      </div>
+    {/each}
+  </div>
+
+  <div class="flex flex-wrap">
+    <!-- Your Schedule -->
+    <div>
+      <p class="font-bold mb-7">Your Schedule</p>
+      <div class="rounded border w-2/5 border-gray-200 mr-5 schedule-box">
+        {#if !$isMobile}
+          <div id="calendar" class="flex justify-center mt-5">
+            <InlineCalendar bind:store {theme} />
+          </div>
+        {/if}
+
+        {#if $isMobile}
+          <div class="header w-full flex items-center">
+            <Datepicker bind:store let:key let:send let:receive>
+              <button
+                class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
+                in:receive|local={{ key }}
+                out:send|local={{ key }}
+                on:click={() => {
+                  addDotsToCalendar(1);
+                }}
+              >
+                {formatDate($store?.selected)}
+              </button>
+            </Datepicker>
+          </div>
+        {:else}
+          <p class="font-bold m-5">
+            {formatDate($store?.selected)}
+          </p>
+        {/if}
+
+        {#each selectedDateLessonData as lessonData}
+          <div class="flex items-center justify-between p-5 lesson-data">
+            <div class="w-4/5">
+              <a
+                class="text-black-700 text-lg font-bold flex items-center"
+                href={`/courses/${lessonData.course_id}/lessons/${
+                  lessonData.is_complete ? lessonData.lesson_id : ''
+                }`}
+              >
+                {lessonData.lesson_title}
+                {#if lessonData.is_complete}
+                  <span class="ml-2 success">
+                    <CheckmarkFilled20 class="carbon-icon" />
+                  </span>
+                {:else}
+                  <span class="text-md ml-2">🔒</span>
+                {/if}
+              </a>
+              <p class="text-grey text-sm flex items-center">
+                <a
+                  class="underline text-blue-700 my-2"
+                  href="/courses/{lessonData.course_id}"
+                >
+                  {` ${lessonData.course_title}`}
+                </a>
+              </p>
+            </div>
+            {#if lessonData.is_complete}
+              <a
+                class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
+                  'opacity-50 pointer-events-none cursor-not-allowed'}"
+                href={!!lessonData.call_url ? lessonData.call_url : undefined}
+                target="_blank"
+                title={!!lessonData.call_url
+                  ? 'Click to join the call'
+                  : 'No call link was added for this lesson. Ask your trainer'}
+              >
+                Join call
+              </a>
+            {/if}
+          </div>
+        {:else}
+          <p class="flex items-center justify-center w-full no-data">
+            No lesson on this day
+          </p>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Your Activities -->
+    <div>
+      <p class="font-bold mb-7">Your Activities</p>
+      <div class="rounded border border-gray-200 w-5 activities-box py-4 px-5">
+        {#each activities as activity}
+          <div class="flex mb-3 pb-3 border-b border-gray-200">
+            <Avatar src={activity.avatar} name="avatar" />
+            <div class="ml-2 flex">
+              <div class="mr-2">
+                <p>{activity.name}</p>
+                <p class="mb-2 mt-1">
+                  {activity.description}
+                </p>
+                <a href={activity.link}>View</a>
+              </div>
+
+              <div>
+                <p>{activity.time}</p>
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .root {
+    min-height: 93vh;
+  }
+
+  .box {
+    width: 246px;
+    height: 165px;
+  }
+  .schedule-box,
+  .activities-box {
+    min-width: 450px;
+    height: 516px;
+    overflow-y: auto;
+  }
+
+  .calendar-root {
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  .calendar-info {
+    max-width: 600px;
+    width: 100%;
+    height: 100%;
+  }
+
+  .header {
+    border-bottom: 1px solid var(--border-color);
+    min-height: 61px;
+  }
+
+  .lesson-data {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .no-data {
+    height: 100px;
+  }
+
+  .join-call {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-height: 48px;
+    width: 110px;
+    text-align: center;
+  }
+
+  :global(span.active-day) {
+    position: absolute;
+    bottom: -8px;
+    left: 40%;
+    color: var(--main-primary-color);
+  }
+
+  @media (max-width: 640px) {
+    :global(span.active-day) {
+      font-size: 30px;
+    }
+  }
+</style>
@@ -0,0 +1 @@
+settings
@@ -0,0 +1 @@
+Sites Page