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 <best@classroomio.com>
This commit is contained in:
Adeyemi Adetunji
co-authored by
Rotimi Best
Rotimi Best
parent
381776f388
commit
f69bf920a9
@@ -0,0 +1,288 @@
|
||||
import { getServerSupabase } from '$lib/utils/functions/supabase.server';
|
||||
import { fetchCourses, fetchProfileCourseProgress } from '$lib/utils/services/courses';
|
||||
import {
|
||||
UserAnalytics,
|
||||
UserCourseAnalytics,
|
||||
UserExerciseStatsQuery,
|
||||
UserExercisesStats
|
||||
} from '$lib/utils/types/analytics';
|
||||
import { json } from '@sveltejs/kit';
|
||||
|
||||
const supabase = getServerSupabase();
|
||||
|
||||
const CACHE_DURATION = 60; // 1 minute
|
||||
|
||||
export async function POST({ setHeaders, request }) {
|
||||
const { userId, courseId, orgId } = await request.json();
|
||||
|
||||
const accessToken = request.headers.get('Authorization');
|
||||
|
||||
if (!userId || !accessToken) {
|
||||
return json({ success: false, message: 'Request is missing required fields' }, { status: 400 });
|
||||
}
|
||||
|
||||
let user;
|
||||
try {
|
||||
const { data } = await supabase.auth.getUser(accessToken);
|
||||
user = data.user;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
|
||||
}
|
||||
|
||||
setHeaders({
|
||||
'cache-control': `max-age=${CACHE_DURATION}`,
|
||||
'content-type': 'application/json'
|
||||
});
|
||||
|
||||
if (courseId) {
|
||||
const userCourseAnalytics = await getStudentAnalyticsData(userId, courseId);
|
||||
return json(userCourseAnalytics);
|
||||
}
|
||||
|
||||
if (orgId) {
|
||||
const userAnalytics = await getAudienceData(userId, orgId);
|
||||
return json(userAnalytics);
|
||||
}
|
||||
|
||||
return json({ error: 'Invalid request' }, { status: 400 });
|
||||
}
|
||||
|
||||
function sumArrObject<T>(arr: T[], key: keyof T) {
|
||||
return arr.reduce((sum, item) => sum + (item[key] as number), 0);
|
||||
}
|
||||
|
||||
async function getLastLogin(userId: string): Promise<string | undefined> {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('analytics_login_events')
|
||||
.select('logged_in_at')
|
||||
.eq('user_id', userId)
|
||||
.single();
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
return data?.logged_in_at;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function getAudienceData(userId: string, orgId: string): Promise<UserAnalytics> {
|
||||
const audienceAnalytics: UserAnalytics = {
|
||||
user: {
|
||||
id: userId,
|
||||
fullName: 'John Doe',
|
||||
email: 'john.doe@example.com',
|
||||
avatarUrl: 'https://example.com/avatar.png',
|
||||
lastSeen: new Date().toISOString()
|
||||
},
|
||||
courses: [],
|
||||
overallCourseProgress: 0,
|
||||
overallAverageGrade: 0
|
||||
};
|
||||
|
||||
const userResult = await supabase
|
||||
.from('profile')
|
||||
.select('fullname, email, avatar_url')
|
||||
.eq('id', userId)
|
||||
.single();
|
||||
|
||||
if (userResult.error) throw new Error('Failed to fetch user profile');
|
||||
|
||||
audienceAnalytics.user.fullName = userResult.data.fullname;
|
||||
audienceAnalytics.user.email = userResult.data.email;
|
||||
audienceAnalytics.user.avatarUrl = userResult.data.avatar_url || '';
|
||||
audienceAnalytics.user.lastSeen = await getLastLogin(userId);
|
||||
|
||||
const { allCourses = [] } = (await fetchCourses(userId, orgId)) || {};
|
||||
|
||||
for (const course of allCourses) {
|
||||
const [userExercisesStats, userCourseProgress] = await Promise.all([
|
||||
fetchUserExercisesStats(course.id, userId),
|
||||
fetchProfileCourseProgress(course.id, userId)
|
||||
]);
|
||||
|
||||
const courseProgress = userCourseProgress?.data?.[0];
|
||||
|
||||
const exercisesStats = userExercisesStats || [];
|
||||
const totalEarnedPoints = sumArrObject(exercisesStats, 'score');
|
||||
const totalPoints = sumArrObject(exercisesStats, 'totalPoints');
|
||||
|
||||
const averageGrade = Math.round((totalEarnedPoints / totalPoints) * 100);
|
||||
const lessonsCompleted = courseProgress?.lessons_completed || 0;
|
||||
const lessonsCount = courseProgress?.lessons_count || 0;
|
||||
|
||||
audienceAnalytics.courses.push({
|
||||
...course,
|
||||
...courseProgress,
|
||||
progress_percentage: Math.round((lessonsCompleted / lessonsCount) * 100),
|
||||
average_grade: averageGrade
|
||||
});
|
||||
}
|
||||
|
||||
const totalLessons = audienceAnalytics.courses.reduce(
|
||||
(acc, course) => acc + course.lessons_count,
|
||||
0
|
||||
);
|
||||
const completedLessons = audienceAnalytics.courses.reduce(
|
||||
(acc, course) => acc + course.lessons_completed,
|
||||
0
|
||||
);
|
||||
const overallCourseProgress = Math.round((completedLessons / totalLessons) * 100);
|
||||
|
||||
const allGrades = sumArrObject(audienceAnalytics.courses, 'average_grade');
|
||||
const overallAverageGrade = Math.round(allGrades / audienceAnalytics.courses.length);
|
||||
|
||||
audienceAnalytics.overallCourseProgress = overallCourseProgress;
|
||||
audienceAnalytics.overallAverageGrade = overallAverageGrade;
|
||||
|
||||
return audienceAnalytics;
|
||||
}
|
||||
|
||||
async function getStudentAnalyticsData(
|
||||
userId: string,
|
||||
courseId: string
|
||||
): Promise<UserCourseAnalytics> {
|
||||
const userCourseAnalytics: UserCourseAnalytics = {
|
||||
user: {
|
||||
id: userId,
|
||||
fullName: '',
|
||||
avatarUrl: '',
|
||||
lastSeen: '',
|
||||
email: ''
|
||||
},
|
||||
averageGrade: 0,
|
||||
userExercisesStats: [],
|
||||
totalExercises: 0,
|
||||
completedExercises: 0,
|
||||
progressPercentage: 0
|
||||
};
|
||||
|
||||
// fetch user details
|
||||
const { data: userResult, error: userError } = await supabase
|
||||
.from('profile')
|
||||
.select('fullname, email, avatar_url')
|
||||
.eq('id', userId)
|
||||
.single();
|
||||
|
||||
if (userError) throw new Error('Failed to fetch user profile' + userError.message);
|
||||
|
||||
userCourseAnalytics.user.fullName = userResult.fullname;
|
||||
userCourseAnalytics.user.email = userResult.email;
|
||||
userCourseAnalytics.user.avatarUrl = userResult.avatar_url || '';
|
||||
userCourseAnalytics.user.lastSeen = await getLastLogin(userId);
|
||||
|
||||
// fetch marks, lessons, and exercise progress
|
||||
const [userExercisesStats, lessonCompletions, exerciseResponse] = await Promise.all([
|
||||
fetchUserExercisesStats(courseId, userId),
|
||||
fetchLessonCompletion(courseId, userId),
|
||||
fetchProfileCourseProgress(courseId, userId)
|
||||
]);
|
||||
|
||||
if (!userExercisesStats || !lessonCompletions || !exerciseResponse.data) {
|
||||
throw new Error('Failed to fetch course analytics data');
|
||||
}
|
||||
|
||||
const totalEarnedPoints = sumArrObject(userExercisesStats, 'score');
|
||||
const totalPoints = sumArrObject(userExercisesStats, 'totalPoints');
|
||||
|
||||
userCourseAnalytics.averageGrade = Math.round((totalEarnedPoints / totalPoints) * 100);
|
||||
userCourseAnalytics.userExercisesStats = userExercisesStats;
|
||||
|
||||
const completedLessons = lessonCompletions.filter((lesson) => lesson.completed);
|
||||
|
||||
userCourseAnalytics.totalExercises = exerciseResponse.data[0].exercises_count;
|
||||
userCourseAnalytics.completedExercises = exerciseResponse.data[0].exercises_completed;
|
||||
|
||||
userCourseAnalytics.progressPercentage = Math.round(
|
||||
(completedLessons.length / lessonCompletions.length) * 100
|
||||
);
|
||||
|
||||
return userCourseAnalytics;
|
||||
}
|
||||
|
||||
async function fetchUserExercisesStats(
|
||||
courseId: string,
|
||||
userId: string
|
||||
): Promise<UserExercisesStats[] | undefined> {
|
||||
try {
|
||||
const { data: courseData, error: queryError } = await supabase
|
||||
.from('course')
|
||||
.select(
|
||||
`
|
||||
lesson!inner (
|
||||
title,exercise!inner (
|
||||
id,title,lesson_id,created_at,question (points),
|
||||
submission!left (
|
||||
id,total,status_id,submitted_by,groupmember!inner (id,profile_id)
|
||||
)
|
||||
)
|
||||
)
|
||||
`
|
||||
)
|
||||
.eq('lesson.exercise.submission.groupmember.profile_id', userId)
|
||||
.eq('id', courseId)
|
||||
.returns<UserExerciseStatsQuery[]>();
|
||||
|
||||
if (queryError) {
|
||||
console.error('Error fetching exercise data:', queryError);
|
||||
return;
|
||||
}
|
||||
|
||||
const userExercisesStats = courseData[0].lesson.flatMap((lesson) =>
|
||||
lesson.exercise.map((exercise) => {
|
||||
const totalPoints = exercise.question.reduce((sum, q) => sum + (q.points || 0), 0);
|
||||
|
||||
const userSubmission = exercise.submission[0];
|
||||
|
||||
return {
|
||||
id: exercise.id,
|
||||
lessonId: exercise.lesson_id,
|
||||
lessonTitle: lesson.title,
|
||||
title: exercise.title,
|
||||
status: userSubmission?.status_id,
|
||||
score: userSubmission?.total || 0,
|
||||
totalPoints,
|
||||
isCompleted: !!userSubmission
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
return userExercisesStats;
|
||||
} catch (error) {
|
||||
console.error('Unexpected error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchLessonCompletion(courseId, userId) {
|
||||
try {
|
||||
const { data: lessons, error: lessonsError } = await supabase
|
||||
.from('lesson')
|
||||
.select(
|
||||
`
|
||||
id,title,created_at,
|
||||
exercise:exercise(id),
|
||||
lesson_completion!left (lesson_id)
|
||||
`
|
||||
)
|
||||
.eq('course_id', courseId)
|
||||
.eq('lesson_completion.profile_id', userId);
|
||||
|
||||
if (lessonsError) throw lessonsError;
|
||||
|
||||
return lessons.map((lesson) => ({
|
||||
id: lesson.id,
|
||||
title: lesson.title,
|
||||
created_at: lesson.created_at,
|
||||
completed: lesson.lesson_completion.length > 0,
|
||||
exerciseNo: lesson.exercise.length
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('Error fetching lessons or completions:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import PageBody from '$lib/components/PageBody/index.svelte';
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import ArrowLeft from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
|
||||
|
||||
export let data;
|
||||
|
||||
const handleClick = () => {
|
||||
const url = $page.url.href + '?add=true';
|
||||
goto(url);
|
||||
};
|
||||
</script>
|
||||
|
||||
<CourseContainer bind:courseId={data.courseId}>
|
||||
<PageNav title={$t('course.navItem.people.title')} disableSticky={true}>
|
||||
<slot:fragment slot="image">
|
||||
{#if data.personId}
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<IconButton
|
||||
size="large"
|
||||
onClick={() => {
|
||||
goto(`/courses/${data.courseId}/people`);
|
||||
}}
|
||||
>
|
||||
<ArrowLeft size={16} class="carbon-icon dark:text-white " />
|
||||
</IconButton>
|
||||
</RoleBasedSecurity>
|
||||
{/if}
|
||||
</slot:fragment>
|
||||
<slot:fragment slot="widget">
|
||||
{#if !data.personId}
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<PrimaryButton
|
||||
className="mr-2"
|
||||
label={$t('course.navItem.people.add')}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
</RoleBasedSecurity>
|
||||
{/if}
|
||||
</slot:fragment>
|
||||
</PageNav>
|
||||
<PageBody width="w-full max-w-6xl md:w-11/12">
|
||||
<slot />
|
||||
</PageBody>
|
||||
</CourseContainer>
|
||||
@@ -0,0 +1,6 @@
|
||||
export const load = ({ params = { id: '', personId: '' } }) => {
|
||||
return {
|
||||
courseId: params.id,
|
||||
personId: params.personId
|
||||
};
|
||||
};
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,208 @@
|
||||
<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 type { UserCourseAnalytics } from '$lib/utils/types/analytics';
|
||||
import { Grid, Tag } from 'carbon-components-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 userCourseAnalytics: UserCourseAnalytics;
|
||||
|
||||
function getPercentage(a: number, b: number): number {
|
||||
if (b === 0) {
|
||||
return 0;
|
||||
}
|
||||
return Math.round((a / b) * 100);
|
||||
}
|
||||
|
||||
let exerciseFilter: 'all' | 'completed' | 'incomplete' = 'all';
|
||||
function toggleExerciseFilter(filter: 'completed' | 'incomplete') {
|
||||
if (exerciseFilter === filter) {
|
||||
exerciseFilter = 'all';
|
||||
} else {
|
||||
exerciseFilter = filter;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchUserCourseAnalytics() {
|
||||
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) {
|
||||
userCourseAnalytics = (await response.json()) as UserCourseAnalytics;
|
||||
} else {
|
||||
console.error(response);
|
||||
snackbar.error('Failed to fetch analytics data');
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchUserCourseAnalytics();
|
||||
});
|
||||
|
||||
$: learningActivities = [
|
||||
{
|
||||
description: $t('analytics.overall_course_progress_user_description'),
|
||||
icon: Notebook,
|
||||
percentage: userCourseAnalytics?.progressPercentage,
|
||||
title: $t('analytics.overall_course_progress')
|
||||
},
|
||||
{
|
||||
description: $t('analytics.assignment_completion_description'),
|
||||
icon: Report,
|
||||
percentage: getPercentage(
|
||||
userCourseAnalytics?.userExercisesStats?.filter((exercise) => exercise.isCompleted)?.length,
|
||||
userCourseAnalytics?.userExercisesStats?.length
|
||||
),
|
||||
title: $t('analytics.assignment_completion')
|
||||
},
|
||||
{
|
||||
description: $t('analytics.average_grade_description'),
|
||||
icon: RowExpand,
|
||||
percentage: userCourseAnalytics?.averageGrade,
|
||||
title: $t('analytics.average_grade')
|
||||
}
|
||||
];
|
||||
|
||||
$: filteredExercises = userCourseAnalytics?.userExercisesStats?.filter((exercise) => {
|
||||
if (exerciseFilter === 'all') {
|
||||
return true;
|
||||
}
|
||||
return exercise.isCompleted === (exerciseFilter === 'completed');
|
||||
});
|
||||
$: completedExercises = userCourseAnalytics?.userExercisesStats?.filter(
|
||||
(exercise) => exercise.isCompleted
|
||||
)?.length;
|
||||
$: incompleteExercises = userCourseAnalytics?.userExercisesStats?.filter(
|
||||
(exercise) => !exercise.isCompleted
|
||||
)?.length;
|
||||
</script>
|
||||
|
||||
{#if userCourseAnalytics}
|
||||
<section class="px-1">
|
||||
<HeroProfileCard user={userCourseAnalytics.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 learningActivities 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.exercises')}
|
||||
</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.exercises')}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-200">
|
||||
{$t('analytics.progress_description', {
|
||||
value: completedExercises,
|
||||
total: userCourseAnalytics?.userExercisesStats?.length
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<Progress
|
||||
value={getPercentage(completedExercises, userCourseAnalytics?.userExercisesStats?.length)}
|
||||
/>
|
||||
<div class="flex items-center justify-between">
|
||||
<Tag
|
||||
interactive
|
||||
filter={exerciseFilter === 'incomplete'}
|
||||
type={exerciseFilter === 'incomplete' ? 'gray' : 'outline'}
|
||||
class="text-yellow-700 dark:text-yellow-500"
|
||||
on:click={() => toggleExerciseFilter('incomplete')}
|
||||
>
|
||||
{incompleteExercises}
|
||||
{$t('analytics.incomplete')}
|
||||
</Tag>
|
||||
<Tag
|
||||
interactive
|
||||
filter={exerciseFilter === 'completed'}
|
||||
type={exerciseFilter === 'completed' ? 'gray' : 'outline'}
|
||||
class="text-green-700 dark:text-green-500"
|
||||
on:click={() => toggleExerciseFilter('completed')}
|
||||
>
|
||||
{completedExercises}
|
||||
{$t('analytics.complete')}
|
||||
</Tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#each filteredExercises as exercise, index}
|
||||
{#key index}
|
||||
<div
|
||||
class={`mt-5 flex items-center justify-between gap-4 rounded-md border p-5 ${
|
||||
exercise.isCompleted
|
||||
? '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 w-2/3 items-center gap-4">
|
||||
<Notebook size={24} class="text-black" />
|
||||
<div>
|
||||
<div class="mb-2">
|
||||
<a
|
||||
href={`/courses/${data.courseId}/lessons/${exercise.lessonId}/exercises/${exercise.id}?tabIndex=1`}
|
||||
>
|
||||
<p class="text-lg font-semibold text-gray-600">
|
||||
{exercise.title}
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href={`/courses/${data.courseId}/lessons/${exercise.lessonId}`}>
|
||||
<p class="text-sm text-gray-500">
|
||||
#{exercise.lessonTitle}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500">
|
||||
Score: {exercise.score}/{exercise.totalPoints}
|
||||
|
||||
{#if exercise.isCompleted}
|
||||
<Tag type={exercise.status === 3 ? 'high-contrast' : 'outline'} size="sm">
|
||||
{exercise.status === 3 ? $t('analytics.graded') : $t('analytics.not_graded')}
|
||||
</Tag>
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tag
|
||||
class={`${
|
||||
exercise.isCompleted
|
||||
? 'bg-green-200 text-green-700'
|
||||
: 'bg-yellow-200 text-yellow-700'
|
||||
}`}
|
||||
>
|
||||
{exercise.isCompleted ? $t('analytics.complete') : $t('analytics.incomplete')}
|
||||
</Tag>
|
||||
</div>
|
||||
{/key}
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{:else}
|
||||
<LoadingPage />
|
||||
{/if}
|
||||
@@ -0,0 +1,8 @@
|
||||
export const load = async ({ params }) => {
|
||||
const { id, personId } = params;
|
||||
|
||||
return {
|
||||
userId: personId,
|
||||
courseId: id
|
||||
};
|
||||
};
|
||||
@@ -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