feat: org and course student analytics page (#509)

* UI initialization

* feat: structure API

* feat: audience & people analytics

* feat: quick changes

* feat: add comments

* redesign course student page

* chore: make requests to db more efficient

* clean up analytics page for course

* feat: finish up audience analytics page

* chore: minor UI tweaks

* translate all

* replace inserts of log in events to update

* catch error if last_login isn't inserted

---------

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

apps/dashboard/src/routes/courses/[id]/people/+page.svelte

@@ -1,5 +1,25 @@
 <script lang="ts">
-  import copy from 'copy-to-clipboard';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import Avatar from '$lib/components/Avatar/index.svelte';
+  import TextChip from '$lib/components/Chip/Text.svelte';
+  import ComingSoon from '$lib/components/ComingSoon/index.svelte';
+  import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
+  import InvitationModal from '$lib/components/Course/components/People/InvitationModal.svelte';
+  import { deleteMemberModal } from '$lib/components/Course/components/People/store';
+  import type { Person, ProfileRole } from '$lib/components/Course/components/People/types';
+  import { group } from '$lib/components/Course/store';
+  import Select from '$lib/components/Form/Select.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { ROLE_LABEL, ROLES } from '$lib/utils/constants/roles';
+  import { t } from '$lib/utils/functions/translations';
+  import { deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
+  import { profile } from '$lib/utils/store/user';
+  import type { GroupPerson } from '$lib/utils/types';
   import {
     CopyButton,
     Search,
@@ -9,34 +29,10 @@
     StructuredListHead,
     StructuredListRow
   } from 'carbon-components-svelte';
-  import TextChip from '$lib/components/Chip/Text.svelte';
-  import ComingSoon from '$lib/components/ComingSoon/index.svelte';
-  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import { deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import Select from '$lib/components/Form/Select.svelte';
-  import IconButton from '$lib/components/IconButton/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import { group } from '$lib/components/Course/store';
-  import InvitationModal from '$lib/components/Course/components/People/InvitationModal.svelte';
-  import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
-  import { deleteMemberModal } from '$lib/components/Course/components/People/store';
-  import type { Person, ProfileRole } from '$lib/components/Course/components/People/types';
-  import { ROLE_LABEL, ROLES } from '$lib/utils/constants/roles';
-  import { profile } from '$lib/utils/store/user';
-  import { snackbar } from '$lib/components/Snackbar/store';
-  import Avatar from '$lib/components/Avatar/index.svelte';
-  import type { GroupPerson } from '$lib/utils/types';
-  import { t } from '$lib/utils/functions/translations';
-  import { page } from '$app/stores';
-  import { goto } from '$app/navigation';
+  import copy from 'copy-to-clipboard';
 
-  export let data;
-
-  let people: Array<Person> = [];
+  let people: Array<GroupPerson> = [];
   let member: { id?: string; email?: string; profile?: { email: string } } = {};
   let shouldEditMemberId: string | null = null;
   let filterBy: ProfileRole = ROLES[0];
@@ -59,6 +55,7 @@
   }
 
   async function deletePerson() {
+    if (!member.id) return;
     $group.people = $group.people.filter((person: { id: string }) => person.id !== member.id);
     $group.tutors = $group.tutors.filter((person: GroupPerson) => person.memberId !== member.id);
 
@@ -73,15 +70,18 @@
     shouldEditMemberId = null;
   }
 
-  function sortAndFilterPeople(_people: Array<Person>, filterBy: ProfileRole) {
+  function sortAndFilterPeople(_people: Array<GroupPerson>, filterBy: ProfileRole) {
     people = (_people || [])
       .filter((person) => {
         if (filterBy.value === 'all') return true;
 
         return person.role_id === filterBy.value;
       })
-      .sort((a: Person, b: Person) => new Date(a.created_at) - new Date(b.created_at))
-      .sort((a: Person, b: Person) => a.role_id - b.role_id);
+      .sort(
+        (a: GroupPerson, b: GroupPerson) =>
+          new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+      )
+      .sort((a: GroupPerson, b: GroupPerson) => a.role_id - b.role_id);
   }
 
   function getEmail(person) {
@@ -115,6 +115,10 @@
     goto(url);
   };
 
+  function gotoPerson(person) {
+    goto(`${$page.url.href}/${person.profile_id}`);
+  }
+
   $: sortAndFilterPeople($group.people, filterBy);
 </script>
 
@@ -125,163 +129,156 @@
   {deletePerson}
 />
 
-<CourseContainer bind:courseId={data.courseId}>
-  <PageNav title={$t('course.navItem.people.title')} disableSticky={true}>
-    <slot:fragment slot="widget">
-      <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton
-          className="mr-2"
-          label={$t('course.navItem.people.add')}
-          onClick={handleClick}
-        />
-      </RoleBasedSecurity>
-    </slot:fragment>
-  </PageNav>
-  <PageBody width="w-full max-w-6xl md:w-11/12">
-    <section class="my-5 mx-2 md:mx-9">
-      <div
-        class="flex flex-col md:flex-row flex-end gap-2 justify-end items-start md:items-center mb-7"
-      >
-        <div class="max-w-[320px]">
-          <Search
-            class="dark:text-slate-950 border-0 bg-zinc-100 w-full"
-            placeholder={$t('course.navItem.people.search')}
-            bind:value={searchValue}
-          />
-        </div>
-        <div class="mb-3">
-          <Select
-            bind:value={filterBy}
-            options={ROLES.map((role) => ({ label: $t(role.label), value: role.value }))}
-            className="dark:text-black mt-3 max-w-[80px]"
-          />
-          <!-- <select bind:value={filterBy} class="mt-3">
-            {#each ROLES as option}
-              <option value={option.value}>{option.label}</option>
-            {/each}
-          </select> -->
-        </div>
-        <RoleBasedSecurity allowedRoles={[1, 2]}>
-          <p class="dark:text-white hidden lg:block text-lg w-20" />
-        </RoleBasedSecurity>
-      </div>
+<section class="mx-2 my-5 md:mx-9">
+  <div
+    class="flex-end mb-7 flex flex-col items-start justify-end gap-2 md:flex-row md:items-center"
+  >
+    <div class="max-w-[320px]">
+      <Search
+        class="w-full border-0 bg-zinc-100 dark:text-slate-950"
+        placeholder={$t('course.navItem.people.search')}
+        bind:value={searchValue}
+      />
+    </div>
+    <div class="mb-3">
+      <Select
+        bind:value={filterBy}
+        options={ROLES.map((role) => ({ label: $t(role.label), value: role.value }))}
+        className="dark:text-black mt-3 max-w-[80px]"
+      />
+      <!-- <select bind:value={filterBy} class="mt-3">
+        {#each ROLES as option}
+          <option value={option.value}>{option.label}</option>
+        {/each}
+      </select> -->
+    </div>
+    <RoleBasedSecurity allowedRoles={[1, 2]}>
+      <p class="hidden w-20 text-lg dark:text-white lg:block" />
+    </RoleBasedSecurity>
+  </div>
 
-      <StructuredList class="m-0">
-        <StructuredListHead
-          class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
+  <StructuredList class="m-0">
+    <StructuredListHead
+      class="bg-slate-100 dark:border-2 dark:border-neutral-800 dark:bg-neutral-800"
+    >
+      <StructuredListRow head class="mx-7">
+        <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+          >{$t('course.navItem.people.name')}</StructuredListCell
         >
-          <StructuredListRow head class="mx-7">
-            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-              >{$t('course.navItem.people.name')}</StructuredListCell
-            >
-            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-              >{$t('course.navItem.people.role')}</StructuredListCell
-            >
-            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-              >{$t('course.navItem.people.action')}</StructuredListCell
-            >
-            <RoleBasedSecurity allowedRoles={[1, 2]}>
-              <p class="dark:text-white hidden lg:block text-lg w-20" />
-            </RoleBasedSecurity>
-          </StructuredListRow>
-        </StructuredListHead>
+        <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+          >{$t('course.navItem.people.role')}</StructuredListCell
+        >
+        <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+          >{$t('course.navItem.people.action')}</StructuredListCell
+        >
+        <RoleBasedSecurity allowedRoles={[1, 2]}>
+          <p class="hidden w-20 text-lg dark:text-white lg:block" />
+        </RoleBasedSecurity>
+      </StructuredListRow>
+    </StructuredListHead>
 
-        {#each filterPeople(searchValue, people) as person}
-          <StructuredListBody>
-            <StructuredListRow class="relative">
-              <!-- first column -->
-              <StructuredListCell class="w-4/6 md:w-3/6">
-                {#if person.profile}
-                  <div class="flex items-start lg:items-center">
-                    <Avatar
-                      src={person.profile.avatar_url}
-                      name={person.profile.fullname}
-                      width="w-8"
-                      height="h-8"
-                      className="mr-3"
-                    />
-                    <div class="flex flex-col lg:flex-row items-start lg:items-center">
-                      <div class="mr-2">
-                        <p class="dark:text-white text-base font-normal">
-                          {person.profile.fullname}
-                        </p>
-                        <p class="text-xs text-primary-600 line-clamp-1">
-                          {obscureEmail(getEmail(person))}
-                        </p>
-                      </div>
-                      <div class="flex items-center">
-                        <RoleBasedSecurity allowedRoles={[1, 2]}>
-                          <CopyButton
-                            text={getEmail(person)}
-                            feedback="Copied Email to clipboard"
-                          />
-                        </RoleBasedSecurity>
-                        {#if person.profile_id == $profile.id}
-                          <ComingSoon label={$t('course.navItem.people.you')} />
-                        {/if}
-                      </div>
-                    </div>
+    {#each filterPeople(searchValue, people) as person}
+      <StructuredListBody>
+        <StructuredListRow class="relative">
+          <!-- first column -->
+          <StructuredListCell class="w-4/6 md:w-3/6">
+            {#if person.profile}
+              <div class="flex items-start lg:items-center">
+                <Avatar
+                  src={person.profile.avatar_url}
+                  name={person.profile.fullname}
+                  width="w-8"
+                  height="h-8"
+                  className="mr-3"
+                />
+                <div class="flex flex-col items-start lg:flex-row lg:items-center">
+                  <div class="mr-2">
+                    <p class="text-base font-normal dark:text-white">
+                      {person.profile.fullname}
+                    </p>
+                    <p class="text-primary-600 line-clamp-1 text-xs">
+                      {obscureEmail(getEmail(person))}
+                    </p>
                   </div>
-                {:else}
-                  <div class="flex items-start lg:items-center w-2/4">
-                    <TextChip
-                      value={person.email.substring(0, 2).toUpperCase()}
-                      className="bg-primary-200 text-black font-semibold text-xs mr-3"
-                      shape="rounded-full"
-                    />
-                    <a
-                      href="mailto:{person.email}"
-                      class="text-md text-primary-600 mr-2 dark:text-white"
-                    >
-                      {person.email}
-                    </a>
-                    <div class="flex items-center justify-between">
-                      <RoleBasedSecurity allowedRoles={[1, 2]}>
-                        <CopyButton
-                          text={getEmail(person)}
-                          feedback={$t('course.navItem.people.feedback')}
-                        />
-                      </RoleBasedSecurity>
-
-                      <TextChip
-                        value={$t('course.navItem.people.pending')}
-                        className="text-xs bg-yellow-200 text-yellow-700 h-fit"
-                        size="sm"
-                      />
-                    </div>
-                  </div>
-                {/if}
-              </StructuredListCell>
-
-              <!-- second column -->
-              <StructuredListCell class="w-1/4 px-3">
-                <p class=" dark:text-white font-normal text-center text-base w-1/4">
-                  {$t(ROLE_LABEL[person.role_id])}
-                </p>
-              </StructuredListCell>
-
-              <!-- third column -->
-              <StructuredListCell class="p-0 w-1/4">
-                <RoleBasedSecurity allowedRoles={[1, 2]}>
-                  <div class="hidden sm:flex sm:justify-between sm:items-center w-20">
-                    {#if person.profile_id !== $profile.id}
-                      <IconButton
-                        onClick={() => {
-                          member = person;
-                          $deleteMemberModal.open = true;
-                        }}
-                      >
-                        <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
-                      </IconButton>
+                  <div class="flex items-center">
+                    <RoleBasedSecurity allowedRoles={[1, 2]}>
+                      <CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
+                    </RoleBasedSecurity>
+                    {#if person.profile_id == $profile.id}
+                      <ComingSoon label={$t('course.navItem.people.you')} />
                     {/if}
                   </div>
-                </RoleBasedSecurity>
-              </StructuredListCell>
-            </StructuredListRow>
-          </StructuredListBody>
-        {/each}
-      </StructuredList>
-      <!-- <Pagination totalItems={10} pageSizes={[10, 15, 20]} /> -->
-    </section>
-  </PageBody>
-</CourseContainer>
+                </div>
+              </div>
+            {:else}
+              <div class="flex w-2/4 items-start lg:items-center">
+                <TextChip
+                  value={person.email.substring(0, 2).toUpperCase()}
+                  className="bg-primary-200 text-black font-semibold text-xs mr-3"
+                  shape="rounded-full"
+                />
+                <a
+                  href="mailto:{person.email}"
+                  class="text-md text-primary-600 mr-2 dark:text-white"
+                >
+                  {person.email}
+                </a>
+                <div class="flex items-center justify-between">
+                  <RoleBasedSecurity allowedRoles={[1, 2]}>
+                    <CopyButton
+                      text={getEmail(person)}
+                      feedback={$t('course.navItem.people.feedback')}
+                    />
+                  </RoleBasedSecurity>
+
+                  <TextChip
+                    value={$t('course.navItem.people.pending')}
+                    className="text-xs bg-yellow-200 text-yellow-700 h-fit"
+                    size="sm"
+                  />
+                </div>
+              </div>
+            {/if}
+          </StructuredListCell>
+
+          <!-- second column -->
+          <StructuredListCell class="w-1/4">
+            <p class=" w-1/4 text-center text-base font-normal dark:text-white">
+              {$t(ROLE_LABEL[person.role_id])}
+            </p>
+          </StructuredListCell>
+
+          <!-- third column -->
+          <StructuredListCell class="w-1/4 p-0">
+            <RoleBasedSecurity allowedRoles={[1, 2]}>
+              <div class="hidden space-x-2 sm:flex sm:items-center">
+                {#if person.profile_id !== $profile.id}
+                  <IconButton
+                    onClick={() => {
+                      member = person;
+                      $deleteMemberModal.open = true;
+                    }}
+                  >
+                    <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
+                  </IconButton>
+                  <!-- <IconButton
+                    onClick={() => gotoPerson(person)}
+                  >
+                    <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
+                  </IconButton> -->
+
+                  <PrimaryButton
+                    variant={VARIANTS.OUTLINED}
+                    label={$t('course.navItem.people.view')}
+                    onClick={() => gotoPerson(person)}
+                  />
+                {/if}
+              </div>
+            </RoleBasedSecurity>
+          </StructuredListCell>
+        </StructuredListRow>
+      </StructuredListBody>
+    {/each}
+  </StructuredList>
+  <!-- <Pagination totalItems={10} pageSizes={[10, 15, 20]} /> -->
+</section>