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]>
This commit is contained in:
Adeyemi Adetunji
co-authored by
Rotimi Best
Rotimi Best
parent
381776f388
commit
f69bf920a9
@@ -1,26 +1,26 @@
|
||||
<script lang="ts">
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { onMount } from 'svelte';
|
||||
import { Add } from 'carbon-icons-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { Add } from 'carbon-icons-svelte';
|
||||
import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte';
|
||||
import { InlineCalendar, Datepicker } from 'svelte-calendar';
|
||||
import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { Datepicker, InlineCalendar } from 'svelte-calendar';
|
||||
// import { supabase } from '$lib/utils/functions/supabase';
|
||||
// import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { formatUserUpcomingData, formatDate } from '$lib/utils/functions/routes/dashboard';
|
||||
import { user } from '$lib/utils/store/user';
|
||||
import { fetchUserUpcomingData } from '$lib/utils/services/dashboard';
|
||||
import { isMobile } from '$lib/utils/store/useMobile';
|
||||
import type { UserLessonDataType, LessonsByMonthIndexType } from '$lib/utils/types';
|
||||
import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
|
||||
import { isOrgAdmin, currentOrgPath, currentOrg, userUpcomingData } from '$lib/utils/store/org';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
|
||||
import { getGreeting } from '$lib/utils/functions/date';
|
||||
import { globalStore } from '$lib/utils/store/app';
|
||||
import { formatDate, formatUserUpcomingData } from '$lib/utils/functions/routes/dashboard';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { fetchUserUpcomingData } from '$lib/utils/services/dashboard';
|
||||
import { globalStore } from '$lib/utils/store/app';
|
||||
import { currentOrg, currentOrgPath, isOrgAdmin, userUpcomingData } from '$lib/utils/store/org';
|
||||
import { isMobile } from '$lib/utils/store/useMobile';
|
||||
import { user } from '$lib/utils/store/user';
|
||||
import type { LessonsByMonthIndexType, UserLessonDataType } from '$lib/utils/types';
|
||||
|
||||
export let data;
|
||||
|
||||
@@ -185,9 +185,9 @@
|
||||
|
||||
<WelcomeModal />
|
||||
|
||||
<div class="py-10 px-5 w-full max-w-5xl md:mx-auto">
|
||||
<div class="flex items-center justify-between mb-10">
|
||||
<h1 class="dark:text-white text-2xl md:text-3xl font-bold mb-3">
|
||||
<div class="w-full max-w-5xl px-5 py-10 md:mx-auto">
|
||||
<div class="mb-10 flex items-center justify-between">
|
||||
<h1 class="mb-3 text-2xl font-bold dark:text-white md:text-3xl">
|
||||
{$t(getGreeting())}
|
||||
{$profile.fullname}!
|
||||
</h1>
|
||||
@@ -210,10 +210,10 @@
|
||||
</div>
|
||||
|
||||
<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-primary-900 my-2"
|
||||
class="bg-primary-900 my-2 flex h-fit w-full flex-col-reverse justify-between rounded-md p-5 md:flex-row md:items-center lg:h-[265px] lg:p-10"
|
||||
>
|
||||
<span>
|
||||
<p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
|
||||
<p class="mb-5 w-full text-xs font-normal text-white md:w-[75%] lg:w-[80%] lg:text-xl">
|
||||
{$t('dashboard.hero_content')}
|
||||
</p>
|
||||
<PrimaryButton
|
||||
@@ -225,7 +225,7 @@
|
||||
<img
|
||||
src="/images/student-learning.svg"
|
||||
alt="student Learning Pictogram"
|
||||
class="w-28 md:block md:w-1/3 lg:w-[200px] lg:max-h-[205px] mb-3 md:mb-0"
|
||||
class="mb-3 w-28 md:mb-0 md:block md:w-1/3 lg:max-h-[205px] lg:w-[200px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -242,20 +242,20 @@
|
||||
|
||||
<div class="w-full">
|
||||
<!-- Your Schedule -->
|
||||
<div class="w-full xl:w-auto container">
|
||||
<p class="dark:text-white font-bold mt-7 mb-4">{$t('dashboard.your_schedule')}</p>
|
||||
<div class="container w-full xl:w-auto">
|
||||
<p class="mb-4 mt-7 font-bold dark:text-white">{$t('dashboard.your_schedule')}</p>
|
||||
<div
|
||||
class="rounded border border-gray-200 dark:border-neutral-600 gap-3 flex flex-col md:flex-row items-start px-2 md:px-5 py-5 w-full"
|
||||
class="flex w-full flex-col items-start gap-3 rounded border border-gray-200 px-2 py-5 dark:border-neutral-600 md:flex-row md:px-5"
|
||||
>
|
||||
{#if !$isMobile}
|
||||
<div id="calendar" class="flex justify-center mt-5 w-2/5 min-w-[250px]">
|
||||
<div id="calendar" class="mt-5 flex w-2/5 min-w-[250px] justify-center">
|
||||
<InlineCalendar bind:store {theme} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="header w-full flex items-center">
|
||||
<div class="header flex w-full items-center">
|
||||
<Datepicker bind:store let:key let:send let:receive>
|
||||
<button
|
||||
class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
|
||||
class="text-primary-700 rounded-md p-3 text-lg font-bold hover:bg-gray-300"
|
||||
in:receive|local={{ key }}
|
||||
out:send|local={{ key }}
|
||||
on:click={() => {
|
||||
@@ -268,40 +268,40 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="max-h-[400px] overflow-y-scroll w-full">
|
||||
<div class="max-h-[400px] w-full overflow-y-scroll">
|
||||
{#if !$isMobile}
|
||||
<p class="dark:text-white font-bold m-5">
|
||||
<p class="m-5 font-bold dark:text-white">
|
||||
{formatDate($store?.selected)}
|
||||
</p>
|
||||
{/if}
|
||||
{#each selectedDateLessonData as lessonData}
|
||||
<div class="flex items-center justify-between p-5 lesson-data">
|
||||
<div class="lesson-data flex items-center justify-between p-5">
|
||||
<div class="w-full">
|
||||
<a
|
||||
class="text-black-700 text-lg font-bold flex items-center"
|
||||
class="text-black-700 flex items-center text-lg font-bold"
|
||||
href={`/courses/${lessonData.course_id}/lessons/${
|
||||
lessonData.is_unlocked ? lessonData.lesson_id : ''
|
||||
}`}
|
||||
>
|
||||
{lessonData.lesson_title}
|
||||
{#if lessonData.is_unlocked}
|
||||
<span class="ml-2 success">
|
||||
<span class="success ml-2">
|
||||
<LockedIcon class="carbon-icon dark:text-white" />
|
||||
</span>
|
||||
{:else}
|
||||
<UnlockedIcon class="carbon-icon dark:text-white" />
|
||||
{/if}
|
||||
</a>
|
||||
<p class="dark:text-white text-grey text-sm flex items-center">
|
||||
<a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
|
||||
<p class="text-grey flex items-center text-sm dark:text-white">
|
||||
<a class="text-primary-700 my-2 underline" href="/courses/{lessonData.course_id}">
|
||||
{` ${lessonData.course_title}`}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{#if lessonData.is_unlocked}
|
||||
<a
|
||||
class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
|
||||
'opacity-50 pointer-events-none cursor-not-allowed'}"
|
||||
class="join-call bg-primary-600 rounded-3xl py-3 font-bold text-white shadow-lg {!lessonData.call_url &&
|
||||
'pointer-events-none cursor-not-allowed opacity-50'}"
|
||||
href={!!lessonData.call_url ? lessonData.call_url : undefined}
|
||||
target="_blank"
|
||||
title={!!lessonData.call_url
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
<script lang="ts">
|
||||
import { ActivityCard, HeroProfileCard, LoadingPage } from '$lib/components/Analytics';
|
||||
import Progress from '$lib/components/Progress/index.svelte';
|
||||
import { snackbar } from '$lib/components/Snackbar/store';
|
||||
import { getAccessToken } from '$lib/utils/functions/supabase';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { currentOrgPath } from '$lib/utils/store/org';
|
||||
import type { UserAnalytics } from '$lib/utils/types/analytics';
|
||||
import { Grid, Tag } from 'carbon-components-svelte';
|
||||
import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
|
||||
import Notebook from 'carbon-icons-svelte/lib/Notebook.svelte';
|
||||
import Report from 'carbon-icons-svelte/lib/Report.svelte';
|
||||
import RowExpand from 'carbon-icons-svelte/lib/RowExpand.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let data;
|
||||
|
||||
let userAnalytics: UserAnalytics;
|
||||
|
||||
let courseFilter = 'all';
|
||||
function toggleCourseFilter(filter: 'completed' | 'incomplete') {
|
||||
if (courseFilter === filter) {
|
||||
courseFilter = 'all';
|
||||
} else {
|
||||
courseFilter = filter;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchUserAnalytics() {
|
||||
const accessToken = await getAccessToken();
|
||||
const response = await fetch('/api/analytics/user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: accessToken
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
console.error(response);
|
||||
snackbar.error('Failed to fetch analytics data');
|
||||
}
|
||||
|
||||
userAnalytics = (await response.json()) as UserAnalytics;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchUserAnalytics();
|
||||
});
|
||||
|
||||
$: userMetrics = [
|
||||
{
|
||||
icon: Notebook,
|
||||
title: $t('analytics.enrolled_courses'),
|
||||
description: $t('analytics.enrolled_courses_description'),
|
||||
percentage: userAnalytics?.courses?.length,
|
||||
hidePercentage: true
|
||||
},
|
||||
{
|
||||
icon: Report,
|
||||
title: $t('analytics.overall_course_progress'),
|
||||
description: $t('analytics.overall_course_progress_description'),
|
||||
percentage: userAnalytics?.overallCourseProgress
|
||||
},
|
||||
{
|
||||
icon: RowExpand,
|
||||
title: $t('analytics.total_average_grade'),
|
||||
description: $t('analytics.total_average_grade_description'),
|
||||
percentage: userAnalytics?.overallAverageGrade
|
||||
}
|
||||
];
|
||||
|
||||
$: completedCourses = userAnalytics?.courses?.filter(
|
||||
(course) => course.lessons_count === course.lessons_completed
|
||||
)?.length;
|
||||
$: incompleteCourses = userAnalytics?.courses?.filter(
|
||||
(course) => course.lessons_count !== course.lessons_completed
|
||||
)?.length;
|
||||
|
||||
$: filteredCourses = userAnalytics?.courses?.filter((course) => {
|
||||
if (courseFilter === 'all') {
|
||||
return true;
|
||||
}
|
||||
return (course.lessons_count === course.lessons_completed) === (courseFilter === 'completed');
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if userAnalytics}
|
||||
<section class="w-full md:mx-auto md:max-w-5xl">
|
||||
<div class="p-5">
|
||||
<a
|
||||
class="text-md flex items-center text-gray-500 dark:text-white"
|
||||
href={`${$currentOrgPath}/audience`}
|
||||
>
|
||||
<ArrowLeftIcon size={24} class="carbon-icon dark:text-white" />
|
||||
{$t('community.ask.go_back')}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="px-5 py-1">
|
||||
<HeroProfileCard user={userAnalytics.user} />
|
||||
|
||||
<Grid class="mt-5 px-0" fullWidth>
|
||||
<div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each userMetrics as activity}
|
||||
<ActivityCard {activity} />
|
||||
{/each}
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
<div class="mt-5 rounded-md border p-3 dark:border-neutral-600 md:p-5">
|
||||
<h3 class="text-2xl font-bold">
|
||||
{$t('analytics.courses')}
|
||||
</h3>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-200">
|
||||
{$t('analytics.progress')}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-200">
|
||||
{$t('analytics.progress_description', {
|
||||
value: completedCourses,
|
||||
total: userAnalytics.courses.length
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<Progress value={userAnalytics.overallCourseProgress} />
|
||||
<div class="flex items-center justify-between">
|
||||
<Tag
|
||||
interactive
|
||||
filter={courseFilter === 'incomplete'}
|
||||
type={courseFilter === 'incomplete' ? 'gray' : 'outline'}
|
||||
class="text-yellow-700 dark:text-yellow-500"
|
||||
on:click={() => toggleCourseFilter('incomplete')}
|
||||
>
|
||||
{incompleteCourses}
|
||||
{$t('analytics.incomplete')}
|
||||
</Tag>
|
||||
<Tag
|
||||
interactive
|
||||
filter={courseFilter === 'completed'}
|
||||
type={courseFilter === 'completed' ? 'gray' : 'outline'}
|
||||
class="text-green-700 dark:text-green-500"
|
||||
on:click={() => toggleCourseFilter('completed')}
|
||||
>
|
||||
{completedCourses}
|
||||
{$t('analytics.complete')}
|
||||
</Tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#each filteredCourses as course, index}
|
||||
{#key index}
|
||||
<div
|
||||
class={`mt-5 w-full rounded-md border border-gray-200 p-5 ${
|
||||
course.lessons_count === course.lessons_completed
|
||||
? 'border-green-200 bg-green-50 dark:bg-green-100'
|
||||
: 'border-yellow-200 bg-yellow-50 dark:bg-yellow-100'
|
||||
}`}
|
||||
transition:fade={{ duration: 300 }}
|
||||
>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div class="flex w-4/5 items-center gap-4">
|
||||
<img src={course.logo} alt={course.title} class="h-20 w-24 rounded-md" />
|
||||
<div class="mb-4 gap-4">
|
||||
<a href={`/courses/${course.id}`}>
|
||||
<p class="text-lg font-semibold text-gray-600">
|
||||
{course.title}
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<p class="line-clamp-2 text-sm text-gray-600">
|
||||
{course.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tag
|
||||
class={`${
|
||||
course.lessons_count === course.lessons_completed
|
||||
? 'bg-green-200 text-green-700'
|
||||
: 'bg-yellow-200 text-yellow-700'
|
||||
}`}
|
||||
>
|
||||
{course.lessons_count === course.lessons_completed
|
||||
? $t('analytics.complete')
|
||||
: $t('analytics.incomplete')}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full items-center gap-1">
|
||||
<Progress value={course.progress_percentage} />
|
||||
<p>{course.progress_percentage}%</p>
|
||||
</div>
|
||||
</div>
|
||||
{/key}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{:else}
|
||||
<LoadingPage />
|
||||
{/if}
|
||||
@@ -0,0 +1,11 @@
|
||||
export const load = async ({ params }) => {
|
||||
const paramParts = params.params?.split('/') ?? [];
|
||||
|
||||
const userId = paramParts[0];
|
||||
const orgId = paramParts[1];
|
||||
|
||||
return {
|
||||
userId,
|
||||
orgId
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user