feat: certified participants

frontend/src/pages/CertifiedParticipants.vue

@@ -0,0 +1,54 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+	</header>
+	<div class="grid grid-cols-3 gap-4 m-5">
+		<div v-for="participant in participants.data">
+			<router-link
+				:to="{
+					name: 'Profile',
+					params: { username: participant.username },
+				}"
+			>
+				<div class="flex shadow rounded-md h-full p-2">
+					<UserAvatar :user="participant" size="3xl" class="mr-2" />
+					<div>
+						<router-link
+							:to="{
+								name: 'Profile',
+								params: { username: participant.username },
+							}"
+						>
+							<div class="text-lg font-semibold mb-2">
+								{{ participant.full_name }}
+							</div>
+						</router-link>
+						<div class="font-medium text-gray-700 text-xs mb-1">
+							{{ __('is certified for') }}
+						</div>
+						<div class="leading-5" v-for="course in participant.courses">
+							{{ course }}
+						</div>
+					</div>
+				</div>
+			</router-link>
+		</div>
+	</div>
+</template>
+<script setup>
+import { Breadcrumbs, createResource } from 'frappe-ui'
+import { computed } from 'vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+
+const participants = createResource({
+	url: 'lms.lms.api.get_certified_participants',
+	auto: true,
+	cache: ['certified-participants'],
+})
+
+const breadcrumbs = computed(() => {
+	return [{ label: 'Certified Participants', to: '/certified-participants' }]
+})
+</script>

frontend/src/router.js

@@ -125,6 +125,11 @@ const routes = [
 		component: () => import('@/pages/AssignmentSubmission.vue'),
 		props: true,
 	},
+	{
+		path: '/certified-participants',
+		name: 'CertifiedParticipants',
+		component: () => import('@/pages/CertifiedParticipants.vue'),
+	},
 ]
 
 let router = createRouter({

frontend/src/utils/index.js

@@ -1,6 +1,12 @@
 import { toast } from 'frappe-ui'
 import { useTimeAgo } from '@vueuse/core'
-import { BookOpen, Users, TrendingUp, Briefcase } from 'lucide-vue-next'
+import {
+	BookOpen,
+	Users,
+	TrendingUp,
+	Briefcase,
+	GraduationCap,
+} from 'lucide-vue-next'
 import { Quiz } from '@/utils/quiz'
 import { Upload } from '@/utils/upload'
 import Header from '@editorjs/header'
@@ -325,6 +331,12 @@ export function getSidebarLinks() {
 			to: 'Batches',
 			activeFor: ['Batches', 'BatchDetail', 'Batch'],
 		},
+		{
+			label: 'Certified Participants',
+			icon: GraduationCap,
+			to: 'CertifiedParticipants',
+			activeFor: ['CertifiedParticipants'],
+		},
 		{
 			label: 'Jobs',
 			icon: Briefcase,