From 58369ba65e6ebf5d1d74d54b5c894e0f64309281 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Wed, 11 Sep 2024 19:51:14 +0530
Subject: [PATCH] fix: evaluator info and other styles

---
 frontend/src/components/Controls/Rating.vue   |  42 +-
 frontend/src/components/Modals/Event.vue      | 591 ++++++++++--------
 frontend/src/pages/Profile.vue                |  15 +-
 .../src/pages/ProfileEvaluationSchedule.vue   | 158 ++---
 frontend/src/router.js                        |   5 +-
 lms/lms/api.py                                |  72 ++-
 .../lms_certificate/lms_certificate.json      |  19 +-
 .../lms_certificate_evaluation.json           |   6 +-
 .../lms_certificate_request.json              |   5 +-
 package.json                                  |   2 +-
 10 files changed, 522 insertions(+), 393 deletions(-)

diff --git a/frontend/src/components/Controls/Rating.vue b/frontend/src/components/Controls/Rating.vue
index d79ee99e..77eb3945 100644
--- a/frontend/src/components/Controls/Rating.vue
+++ b/frontend/src/components/Controls/Rating.vue
@@ -4,10 +4,14 @@
 			{{ props.label }}
 		</label>
 		<div class="flex text-center">
-			<div v-for="index in 5" @mouseover="hoveredRating = index" @mouseleave="hoveredRating = 0">
+			<div
+				v-for="index in 5"
+				@mouseover="hoveredRating = index"
+				@mouseleave="hoveredRating = 0"
+			>
 				<Star
-					class="h-6 w-6 fill-gray-400 text-gray-50 stroke-1 mr-1 cursor-pointer"
-					:class="{ 'fill-yellow-200': (index <= hoveredRating && index > rating), 'fill-yellow-500': index <= rating }"
+					class="fill-gray-400 text-gray-50 stroke-1 mr-1 cursor-pointer"
+					:class="iconClasses(index)"
 					@click="markRating(index)"
 				/>
 			</div>
@@ -17,7 +21,7 @@
 
 <script setup>
 import { Star } from 'lucide-vue-next'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps({
 	id: {
@@ -32,8 +36,29 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
+	size: {
+		type: String,
+		default: 'md',
+	},
 })
 
+const iconClasses = (index) => {
+	let classes = [
+		{
+			sm: 'size-4',
+			md: 'size-5',
+			lg: 'size-6',
+			xl: 'size-7',
+		}[props.size],
+	]
+	if (index <= hoveredRating.value && index > rating.value) {
+		classes.push('fill-yellow-200')
+	} else if (index <= rating.value) {
+		classes.push('fill-yellow-500')
+	}
+	return classes.join(' ')
+}
+
 const emit = defineEmits(['update:modelValue'])
 const rating = ref(props.modelValue)
 const hoveredRating = ref(0)
@@ -47,7 +72,10 @@ function markRating(index) {
 	rating.value = index
 }
 
-watch(() => props.modelValue, (newVal) => {
-  rating.value = newVal
-})
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		rating.value = newVal
+	}
+)
 </script>
diff --git a/frontend/src/components/Modals/Event.vue b/frontend/src/components/Modals/Event.vue
index 670189f2..0344cb2b 100644
--- a/frontend/src/components/Modals/Event.vue
+++ b/frontend/src/components/Modals/Event.vue
@@ -1,309 +1,378 @@
 <template>
-    <Dialog
-        v-model="show"
+	<Dialog
+		v-model="show"
 		:options="{
 			size: '2xl',
-		}">
-            <template #body>
-                <div class="flex text-base">
-                    <div class="flex flex-col w-1/2 p-5">
-                        <div class="text-lg font-semibold mb-4">
-                            {{ event.title }}
-                        </div>
-                        
-                        <div class="flex flex-col space-y-4 text-sm text-gray-800">
-                            <Tooltip :text="__('Email ID')">
-                                <div class="flex items-center space-x-2 w-fit">
-                                    <User class="h-4 w-4 stroke-1.5" />
-                                    <span>
-                                        {{ event.member }}
-                                    </span>
-                                </div>
-                            </Tooltip>
-                            <Tooltip :text="__('Course')">
-                                <div class="flex items-center space-x-2 w-fit">
-                                    <BookOpen class="h-4 w-4 stroke-1.5" />
-                                    <span>
-                                        {{ event.course_title }}
-                                    </span>
-                                </div>
-                            </Tooltip>
-                            <Tooltip v-if="event.batch_title" :text="__('Batch')">
-                                <div class="flex items-center space-x-2 w-fit">
-                                    <Users class="h-4 w-4 stroke-1.5" />
-                                    <span>
-                                        {{ event.batch_title }}
-                                    </span>
-                                </div>
-                            </Tooltip>
-                            <Tooltip :text="__('Date')">
-                                <div class="flex items-center space-x-2 w-fit">
-                                    <Calendar class="h-4 w-4 stroke-1.5" />
-                                    <span>
-                                        {{ dayjs(event.date).format("DD MMM YYYY") }}
-                                    </span>
-                                </div>
-                            </Tooltip>
-                            <Tooltip :text="__('Time')">
-                                <div class="flex items-center space-x-2 w-fit">
-                                    <Clock class="h-4 w-4 stroke-1.5" />
-                                    <span>
-                                        {{ formatTime(event.start_time) }} - {{ formatTime(event.end_time) }}
-                                    </span>
-                                </div>
-                            </Tooltip>
-                        </div>
-                        <div class="flex items-center space-x-2 mt-auto">
-                            <Button v-if="certificate.name" @click="openCertificate(certificate)" class="w-full">
-                                <template #prefix>
-                                    <FileText class="h-4 w-4 stroke-1.5" />
-                                </template>
-                                {{ __("View Certificate") }}
-                            </Button>
-                            <Button v-else @click="openCallLink(event.venue)" class="w-full">
-                                <template #prefix>
-                                    <Video class="h-4 w-4 stroke-1.5" />
-                                </template>
-                                <span>
-                                    {{ __("Join Meeting") }}
-                                </span>
-                            </Button>
-                        </div>
-                    </div>
-                    <Tabs :tabs='tabs' v-model="tabIndex" class="border-l w-1/2">
-                        <template #default="{ tab }">
-                            <div v-if="tab.label == 'Evaluation'" class="flex flex-col space-y-4 p-5">
-                                <Rating v-model="evaluation.rating" :label="__('Rating')"/>
-                                <FormControl type="select" :options='[{
-                                    value: "Pending",
-                                    label: __("Pending")
-                                }, {
-                                    value: "In Progress",
-                                    label: __("In Progress")
-                                }, {
-                                    value: "Pass",
-                                    label: __("Pass")
-                                }, {
-                                    value: "Fail",
-                                    label: __("Fail")
-                                }]'
-                                v-model="evaluation.status" :label="__('Status')" />
-                                <FormControl type="textarea" v-model="evaluation.summary" :label="__('Summary')" />
-                                <Button variant="solid" @click="saveEvaluation()">
-                                    {{ __("Save") }}
-                                </Button>
-                            </div>
-                            <div v-else class="flex flex-col space-y-4 p-5">
-                                
-                                <FormControl type="checkbox" v-model="certificate.published" :label="__('Published')" />
-                                <Link v-model="certificate.template" :label="__('Template')" doctype="Print Format" :filters='{
-                                    "doc_type": "LMS Certificate"
-                                }' />
-                                <FormControl type="date" v-model="certificate.issue_date" :label="__('Issue Date')" />
-                                <FormControl type="date" v-model="certificate.expiry_date" :label="__('Expiry Date')" />
-                                <Button variant="solid" @click="saveCertificate()">
-                                    {{ __("Save") }}
-                                </Button>
-                            </div>
-                        </template>
-                    </Tabs>
-                </div>
-            </template>
-    </Dialog>
+		}"
+	>
+		<template #body>
+			<div class="flex text-base">
+				<div class="flex flex-col w-1/2 p-5">
+					<div class="text-lg font-semibold mb-4">
+						{{ event.title }}
+					</div>
+
+					<div class="flex flex-col space-y-4 text-sm text-gray-800">
+						<Tooltip :text="__('Email ID')">
+							<div class="flex items-center space-x-2 w-fit">
+								<User class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ event.member }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip :text="__('Course')">
+							<div class="flex items-center space-x-2 w-fit">
+								<BookOpen class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ event.course_title }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip v-if="event.batch_title" :text="__('Batch')">
+							<div class="flex items-center space-x-2 w-fit">
+								<Users class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ event.batch_title }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip :text="__('Date')">
+							<div class="flex items-center space-x-2 w-fit">
+								<Calendar class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ dayjs(event.date).format('DD MMM YYYY') }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip :text="__('Time')">
+							<div class="flex items-center space-x-2 w-fit">
+								<Clock class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ formatTime(event.start_time) }} -
+									{{ formatTime(event.end_time) }}
+								</span>
+							</div>
+						</Tooltip>
+					</div>
+					<div class="flex items-center space-x-2 mt-auto">
+						<Button
+							v-if="certificate.name"
+							@click="openCertificate(certificate)"
+							class="w-full"
+						>
+							<template #prefix>
+								<FileText class="h-4 w-4 stroke-1.5" />
+							</template>
+							{{ __('View Certificate') }}
+						</Button>
+						<Button v-else @click="openCallLink(event.venue)" class="w-full">
+							<template #prefix>
+								<Video class="h-4 w-4 stroke-1.5" />
+							</template>
+							<span>
+								{{ __('Join Meeting') }}
+							</span>
+						</Button>
+					</div>
+				</div>
+				<Tabs :tabs="tabs" v-model="tabIndex" class="border-l w-1/2">
+					<template #default="{ tab }">
+						<div
+							v-if="tab.label == 'Evaluation'"
+							class="flex flex-col space-y-4 p-5"
+						>
+							<div class="flex items-center justify-between">
+								<Rating v-model="evaluation.rating" :label="__('Rating')" />
+								<FormControl
+									type="select"
+									:options="statusOptions"
+									v-model="evaluation.status"
+									:label="__('Status')"
+									class="w-1/2"
+								/>
+							</div>
+							<Textarea
+								v-model="evaluation.summary"
+								:label="__('Summary')"
+								:rows="7"
+							/>
+							<Button variant="solid" @click="saveEvaluation()">
+								{{ __('Save') }}
+							</Button>
+						</div>
+						<div v-else class="flex flex-col space-y-4 p-5">
+							<FormControl
+								type="checkbox"
+								v-model="certificate.published"
+								:label="__('Published')"
+							/>
+							<Link
+								v-model="certificate.template"
+								:label="__('Template')"
+								doctype="Print Format"
+								:filters="{
+									doc_type: 'LMS Certificate',
+								}"
+							/>
+							<FormControl
+								type="date"
+								v-model="certificate.issue_date"
+								:label="__('Issue Date')"
+							/>
+							<FormControl
+								type="date"
+								v-model="certificate.expiry_date"
+								:label="__('Expiry Date')"
+							/>
+							<Button variant="solid" @click="saveCertificate()">
+								{{ __('Save') }}
+							</Button>
+						</div>
+					</template>
+				</Tabs>
+			</div>
+		</template>
+	</Dialog>
 </template>
 <script setup>
-import { Dialog, Button, FormControl, createResource, Tabs, Tooltip } from 'frappe-ui';
-import { User, Calendar, Clock, Video, BookOpen, FileText, GraduationCap, Users, ClipboardList } from "lucide-vue-next"
-import { inject, reactive, watch, ref, computed } from "vue"
-import { formatTime, showToast } from "@/utils"
-import Rating from "@/components/Controls/Rating.vue"
-import Link from "@/components/Controls/Link.vue"
+import {
+	Dialog,
+	Button,
+	FormControl,
+	createResource,
+	Tabs,
+	Tooltip,
+	Textarea,
+} from 'frappe-ui'
+import {
+	User,
+	Calendar,
+	Clock,
+	Video,
+	BookOpen,
+	FileText,
+	GraduationCap,
+	Users,
+	ClipboardList,
+} from 'lucide-vue-next'
+import { inject, reactive, watch, ref, computed } from 'vue'
+import { formatTime, showToast } from '@/utils'
+import Rating from '@/components/Controls/Rating.vue'
+import Link from '@/components/Controls/Link.vue'
 
 const show = defineModel()
-const dayjs = inject("$dayjs")
+const dayjs = inject('$dayjs')
 const tabIndex = ref(0)
 const showCertification = ref(false)
 
 const props = defineProps({
-    event: {
-        type: [Object, null],
-        required: true,
-    },
-});
+	event: {
+		type: [Object, null],
+		required: true,
+	},
+})
 
 const evaluation = reactive({})
 
 const certificate = reactive({})
 
 const defaultTemplate = createResource({
-    url: "frappe.client.get_value",
-    makeParams(values) {
-        return {
-            doctype: "Property Setter",
-            fieldname: "value",
-            filters: {
-                doc_type: "LMS Certificate",
-                property: "default_print_format"
-            }
-        }
-    },
-    auto: true,
-    onSuccess(data) {
-        certificate.template = data.value
-    }
+	url: 'frappe.client.get_value',
+	makeParams(values) {
+		return {
+			doctype: 'Property Setter',
+			fieldname: 'value',
+			filters: {
+				doc_type: 'LMS Certificate',
+				property: 'default_print_format',
+			},
+		}
+	},
+	auto: true,
+	onSuccess(data) {
+		certificate.template = data.value
+	},
 })
 
 const openCallLink = (link) => {
-    window.open(link, "_blank")
+	window.open(link, '_blank')
 }
 
 const evaluationResource = createResource({
-    url: "lms.lms.api.save_evaluation_details",
-    makeParams(values) {
-        return {
-            member: props.event.member,
-            course: props.event.course,
-            batch_name: props.event.batch_name,
-            date: props.event.date,
-            start_time: props.event.start_time,
-            end_time: props.event.end_time,
-            status: evaluation.status,
-            rating: evaluation.rating,
-            summary: evaluation.summary,
-        }
-    },
-    auto: false,
-    onSuccess(data) {
-        evaluation.name = data.name
-    }
+	url: 'lms.lms.api.save_evaluation_details',
+	makeParams(values) {
+		return {
+			member: props.event.member,
+			course: props.event.course,
+			batch_name: props.event.batch_name,
+			date: props.event.date,
+			start_time: props.event.start_time,
+			end_time: props.event.end_time,
+			status: evaluation.status,
+			rating: evaluation.rating,
+			summary: evaluation.summary,
+			evaluator: props.event.evaluator,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		evaluation.name = data.name
+	},
 })
 
 const evaluationDetails = createResource({
-    url: "frappe.client.get",
-    makeParams(values) {
-        return {
-            doctype: "LMS Certificate Evaluation",
-            filters: {
-                member: props.event.member,
-                course: props.event.course,
-            }
-        }
-    },
-    onSuccess(data) {
-        for (const key in data) {
-            if (key in evaluation)
-                evaluation[key] = data[key]
-            if (key == "rating")
-                evaluation.rating = data.rating * 5
-            if (evaluation.status == "Pass")
-                showCertification.value = true
-        }
-    },
-    auto: false
+	url: 'frappe.client.get',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Certificate Evaluation',
+			filters: {
+				member: props.event.member,
+				course: props.event.course,
+			},
+		}
+	},
+	onSuccess(data) {
+		for (const key in data) {
+			if (key in evaluation) evaluation[key] = data[key]
+			if (key == 'rating') evaluation.rating = data.rating * 5
+			if (evaluation.status == 'Pass') showCertification.value = true
+		}
+	},
+	auto: false,
 })
 
 const saveEvaluation = () => {
-    evaluationResource.submit({}, {
-        onSuccess: () => {
-            if (evaluation.status == "Pass") {
-                showCertification.value = true
-            } else {
-                show.value = false
-            }
-            showToast( __("Success"), __("Evaluation saved successfully"), "check")
-        }
-    })
+	evaluationResource.submit(
+		{},
+		{
+			onSuccess: () => {
+				if (evaluation.status == 'Pass') {
+					showCertification.value = true
+				} else {
+					show.value = false
+				}
+				showToast(__('Success'), __('Evaluation saved successfully'), 'check')
+			},
+		}
+	)
 }
 
 const certificateResource = createResource({
-    url: "lms.lms.api.save_certificate_details",
-    makeParams(values) {
-        return {
-            member: props.event.member,
-            course: props.event.course,
-            batch_name: props.event.batch_name,
-            published: certificate.published,
-            issue_date: certificate.issue_date,
-            expiry_date: certificate.expiry_date,
-            template: certificate.template,
-        }
-    },
-    auto: false,
-    onSuccess(data) {
-        certificate.name = data
-    }
+	url: 'lms.lms.api.save_certificate_details',
+	makeParams(values) {
+		return {
+			member: props.event.member,
+			course: props.event.course,
+			batch_name: props.event.batch_name,
+			published: certificate.published,
+			issue_date: certificate.issue_date,
+			expiry_date: certificate.expiry_date,
+			template: certificate.template,
+			evaluator: props.event.evaluator,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		certificate.name = data
+	},
 })
 
 const certificateDetails = createResource({
-    url: "frappe.client.get",
-    makeParams(values) {
-        return {
-            doctype: "LMS Certificate",
-            filters: {
-                member: props.event.member,
-                course: props.event.course,
-            }
-        }
-    },
-    onSuccess(data) {
-        for (const key in data) {
-            if (key in certificate)
-                certificate[key] = data[key]
-            certificate.name = data.name
-            showCertification.value = true
-        }
-    },
-    onError(err) {
-        certificate.template = defaultTemplate.data.value
-    },
-    auto: false
+	url: 'frappe.client.get',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Certificate',
+			filters: {
+				member: props.event.member,
+				course: props.event.course,
+			},
+		}
+	},
+	onSuccess(data) {
+		for (const key in data) {
+			if (key in certificate) certificate[key] = data[key]
+			certificate.name = data.name
+			showCertification.value = true
+		}
+	},
+	onError(err) {
+		certificate.template = defaultTemplate.data.value
+	},
+	auto: false,
 })
 
 const saveCertificate = () => {
-    certificateResource.submit({}, {
-        onSuccess: () => {
-            showToast( __("Success"), __("Certificate saved successfully"), "check")
-        }
-    })
+	certificateResource.submit(
+		{},
+		{
+			onSuccess: () => {
+				showToast(__('Success'), __('Certificate saved successfully'), 'check')
+			},
+		}
+	)
 }
 
 watch(show, () => {
-    if (show.value) {
-        evaluation.rating = 0
-        evaluation.status = "Pending"
-        evaluation.summary = ""
-        evaluationDetails.reload()
+	if (show.value) {
+		evaluation.rating = 0
+		evaluation.status = 'Pending'
+		evaluation.summary = ''
+		evaluationDetails.reload()
 
-        certificate.published = true
-        certificate.issue_date = dayjs().format("YYYY-MM-DD")
-        certificate.expiry_date = null
-        certificate.template = null
-        certificate.name = null
-        certificateDetails.reload()
-    }
+		certificate.published = true
+		certificate.issue_date = dayjs().format('YYYY-MM-DD')
+		certificate.expiry_date = null
+		certificate.template = null
+		certificate.name = null
+		certificateDetails.reload()
+	}
 })
 
 const openCertificate = (certificate) => {
-    window.open(
-        `/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${certificate.name}&format=${encodeURIComponent(certificate.template)}`
-    )
+	window.open(
+		`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
+			certificate.name
+		}&format=${encodeURIComponent(certificate.template)}`
+	)
 }
 
-const tabs = computed(() => {
-    const tabsArray = [
-        {
-            label: __("Evaluation"),
-            icon: ClipboardList,
-        },
-    ]
-
-    if (showCertification.value) {
-        tabsArray.push({
-            label: __("Certificate"),
-            icon: GraduationCap,
-        })
-    }
-
-    return tabsArray
+const statusOptions = computed(() => {
+	return [
+		{
+			value: 'Pending',
+			label: __('Pending'),
+		},
+		{
+			value: 'In Progress',
+			label: __('In Progress'),
+		},
+		{
+			value: 'Pass',
+			label: __('Pass'),
+		},
+		{
+			value: 'Fail',
+			label: __('Fail'),
+		},
+	]
 })
-</script>
\ No newline at end of file
+
+const tabs = computed(() => {
+	const tabsArray = [
+		{
+			label: __('Evaluation'),
+			icon: ClipboardList,
+		},
+	]
+
+	if (showCertification.value) {
+		tabsArray.push({
+			label: __('Certificate'),
+			icon: GraduationCap,
+		})
+	}
+
+	return tabsArray
+})
+</script>
diff --git a/frontend/src/pages/Profile.vue b/frontend/src/pages/Profile.vue
index e342123c..935cff6f 100644
--- a/frontend/src/pages/Profile.vue
+++ b/frontend/src/pages/Profile.vue
@@ -158,11 +158,11 @@ const setActiveTab = () => {
 watchEffect(() => {
 	if (activeTab.value) {
 		let route = {
-			"About": { name: 'ProfileAbout' },
-			"Certificates": { name: 'ProfileCertificates' },
-			"Roles": { name: 'ProfileRoles' },
-			"Slots": { name: 'ProfileEvaluator' },
-			"Schedule": { name: 'ProfileEvaluationSchedule' },
+			About: { name: 'ProfileAbout' },
+			Certificates: { name: 'ProfileCertificates' },
+			Roles: { name: 'ProfileRoles' },
+			Slots: { name: 'ProfileEvaluator' },
+			Schedule: { name: 'ProfileEvaluationSchedule' },
 		}[activeTab.value]
 		router.push(route)
 	}
@@ -186,7 +186,10 @@ const isSessionUser = () => {
 const getTabButtons = () => {
 	let buttons = [{ label: 'About' }, { label: 'Certificates' }]
 	if ($user.data?.is_moderator) buttons.push({ label: 'Roles' })
-	if (isSessionUser() && ($user.data?.is_evaluator || $user.data?.is_moderator)) {
+	if (
+		isSessionUser() &&
+		($user.data?.is_evaluator || $user.data?.is_moderator)
+	) {
 		buttons.push({ label: 'Slots' })
 		buttons.push({ label: 'Schedule' })
 	}
diff --git a/frontend/src/pages/ProfileEvaluationSchedule.vue b/frontend/src/pages/ProfileEvaluationSchedule.vue
index f40ebc78..efd5df7a 100644
--- a/frontend/src/pages/ProfileEvaluationSchedule.vue
+++ b/frontend/src/pages/ProfileEvaluationSchedule.vue
@@ -1,52 +1,49 @@
 <template>
-    <div class="mt-7 mb-20">
-        <div class="flex h-screen flex-col overflow-hidden">
-            <Calendar
-                v-if="evaluations.data?.length"
-                :config="{
-                    defaultMode: 'Month',
-                    disableModes: ['Day', 'Week'],
-                    redundantCellHeight: 100,
-                    enableShortcuts: false,
-                }"
-                :events="evaluations.data"
-                @click="(event) => openEvent(event)"
-            >
-                <template #header="{currentMonthYear,
-                        decrement,
-                        increment,
-                    }">
-                    <div class="mb-2 flex justify-between">
-                        <span class="text-lg font-semibold">
-                            {{ currentMonthYear }}
-                        </span>
-                        <div class="flex gap-x-1">
-                            <Button
-                                @click="decrement()"
-                                variant="ghost"
-                                class="h-4 w-4"
-                                icon="chevron-left"
-                            />
-                            <Button
-                                @click="increment()"
-                                variant="ghost"
-                                class="h-4 w-4"
-                                icon="chevron-right"
-                            />
-                        </div>
-                    </div>
-                </template>
-            </Calendar>
-        </div>
-    </div>
-    <Event v-model="showEvent" :event="currentEvent"/>
+	<div class="mt-7 mb-20">
+		<div class="flex h-screen flex-col overflow-hidden">
+			<Calendar
+				v-if="evaluations.data?.length"
+				:config="{
+					defaultMode: 'Month',
+					disableModes: ['Day', 'Week'],
+					redundantCellHeight: 100,
+					enableShortcuts: false,
+				}"
+				:events="evaluations.data"
+				@click="(event) => openEvent(event)"
+			>
+				<template #header="{ currentMonthYear, decrement, increment }">
+					<div class="mb-2 flex justify-between">
+						<span class="text-lg font-semibold">
+							{{ currentMonthYear }}
+						</span>
+						<div class="flex gap-x-1">
+							<Button
+								@click="decrement()"
+								variant="ghost"
+								class="h-4 w-4"
+								icon="chevron-left"
+							/>
+							<Button
+								@click="increment()"
+								variant="ghost"
+								class="h-4 w-4"
+								icon="chevron-right"
+							/>
+						</div>
+					</div>
+				</template>
+			</Calendar>
+		</div>
+	</div>
+	<Event v-model="showEvent" :event="currentEvent" />
 </template>
 <script setup>
-import { Calendar, createListResource, Button } from "frappe-ui"
-import { inject, ref } from "vue"
-import Event from "@/components/Modals/Event.vue"
+import { Calendar, createListResource, Button } from 'frappe-ui'
+import { inject, ref } from 'vue'
+import Event from '@/components/Modals/Event.vue'
 
-const user = inject("$user")
+const user = inject('$user')
 const currentEvent = ref(null)
 const showEvent = ref(false)
 
@@ -58,37 +55,48 @@ const props = defineProps({
 })
 
 const evaluations = createListResource({
-    doctype: "LMS Certificate Request",
-    filters: {
-        "evaluator": user.data?.name
-    },
-    fields: ["name", "member_name", "member", "course", "course_title", "batch_name", "batch_title", "date", "start_time", "end_time", "google_meet_link"],
-    auto: true,
-    cache: ["schedule", user.data?.name],
-    transform(data) {
-        return data.map((d) => {
-            return {
-                title: `${d.member_name}'s Evaluation`,
-                participant: d.member_name,
-                id: d.name,
-                venue: d.google_meet_link,
-                fromDate: `${d.date} ${d.start_time}`,
-                toDate: `${d.date} ${d.end_time}`,
-                color: "green",
-                start_time: d.start_time,
-                end_time: d.end_time,
-                course: d.course,
-                course_title: d.course_title,
-                member: d.member,
-                batch_name: d.batch_name,
-                batch_title: d.batch_title
-            }
-        })
-    },
+	doctype: 'LMS Certificate Request',
+	filters: {
+		evaluator: user.data?.name,
+	},
+	fields: [
+		'name',
+		'member_name',
+		'member',
+		'course',
+		'course_title',
+		'batch_name',
+		'batch_title',
+		'evaluator',
+		'evaluator_name',
+		'date',
+		'start_time',
+		'end_time',
+		'google_meet_link',
+	],
+	auto: true,
+	orderBy: 'creation desc',
+	limit: 100,
+	cache: ['schedule', user.data?.name],
+	transform(data) {
+		return data.map((d) => {
+			let mappedData = Object.assign({}, d)
+
+			mappedData.title = `${d.member_name}'s Evaluation`
+			mappedData.participant = d.member_name
+			mappedData.id = d.name
+			mappedData.venue = d.google_meet_link
+			mappedData.fromDate = `${d.date} ${d.start_time}`
+			mappedData.toDate = `${d.date} ${d.end_time}`
+			mappedData.color = 'green'
+
+			return mappedData
+		})
+	},
 })
 
 const openEvent = (event) => {
-    currentEvent.value = event.calendarEvent
-    showEvent.value = true
+	currentEvent.value = event.calendarEvent
+	showEvent.value = true
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 649b26ad..7ba9950a 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -85,8 +85,9 @@ const routes = [
 			{
 				name: 'ProfileEvaluationSchedule',
 				path: 'schedule',
-				component: () => import('@/pages/ProfileEvaluationSchedule.vue'),
-			}
+				component: () =>
+					import('@/pages/ProfileEvaluationSchedule.vue'),
+			},
 		],
 	},
 	{
diff --git a/lms/lms/api.py b/lms/lms/api.py
index 0eb23c13..3287047a 100644
--- a/lms/lms/api.py
+++ b/lms/lms/api.py
@@ -9,6 +9,7 @@ from frappe.query_builder.functions import Count
 from frappe.utils import time_diff, now_datetime, get_datetime
 from typing import Optional
 
+
 @frappe.whitelist()
 def autosave_section(section, code):
 	"""Saves the code edited in one of the sections."""
@@ -614,22 +615,23 @@ def check_app_permission():
 
 @frappe.whitelist()
 def save_evaluation_details(
-	member: str,
-	course: str,
-	batch_name: str,
-	date: str,
-	start_time: str,
-	end_time: str,
-	status: str,
-	rating: int,
-	summary: str) -> None:
+	member,
+	course,
+	batch_name,
+	evaluator,
+	date,
+	start_time,
+	end_time,
+	status,
+	rating,
+	summary,
+):
 	"""
 	Save evaluation details for a member against a course.
 	"""
-	evaluation = frappe.db.exists("LMS Certificate Evaluation", {
-		"member": member,
-		"course": course
-	})
+	evaluation = frappe.db.exists(
+		"LMS Certificate Evaluation", {"member": member, "course": course}
+	)
 
 	details = {
 		"date": date,
@@ -638,7 +640,7 @@ def save_evaluation_details(
 		"status": status,
 		"rating": rating / 5,
 		"summary": summary,
-		"batch_name": batch_name
+		"batch_name": batch_name,
 	}
 
 	if evaluation:
@@ -646,10 +648,13 @@ def save_evaluation_details(
 		return evaluation
 	else:
 		doc = frappe.new_doc("LMS Certificate Evaluation")
-		details.update({
-			"member": member,
-			"course": course,
-		})
+		details.update(
+			{
+				"member": member,
+				"course": course,
+				"evaluator": evaluator,
+			}
+		)
 		doc.update(details)
 		doc.insert()
 		return doc.name
@@ -657,39 +662,40 @@ def save_evaluation_details(
 
 @frappe.whitelist()
 def save_certificate_details(
-	member: str,
-	course: str,
-	batch_name: str,
+	member,
+	course,
+	batch_name,
+	evaluator,
 	issue_date,
 	expiry_date,
 	template,
 	published=True,
-	) -> None:
+):
 	"""
 	Save certificate details for a member against a course.
 	"""
-	certificate = frappe.db.exists("LMS Certificate", {
-		"member": member,
-		"course": course
-	})
+	certificate = frappe.db.exists("LMS Certificate", {"member": member, "course": course})
 
 	details = {
 		"published": published,
 		"issue_date": issue_date,
 		"expiry_date": expiry_date,
 		"template": template,
-		"batch_name": batch_name
+		"batch_name": batch_name,
 	}
-	
+
 	if certificate:
 		frappe.db.set_value("LMS Certificate", certificate, details)
 		return certificate
 	else:
 		doc = frappe.new_doc("LMS Certificate")
-		details.update({
-			"member": member,
-			"course": course,
-		})
+		details.update(
+			{
+				"member": member,
+				"course": course,
+				"evaluator": evaluator,
+			}
+		)
 		doc.update(details)
 		doc.insert()
-		return doc.name
\ No newline at end of file
+		return doc.name
diff --git a/lms/lms/doctype/lms_certificate/lms_certificate.json b/lms/lms/doctype/lms_certificate/lms_certificate.json
index 5cd182ab..4bfbfbd0 100644
--- a/lms/lms/doctype/lms_certificate/lms_certificate.json
+++ b/lms/lms/doctype/lms_certificate/lms_certificate.json
@@ -15,8 +15,10 @@
   "template",
   "published",
   "section_break_scyf",
-  "expiry_date",
+  "evaluator",
+  "evaluator_name",
   "column_break_slaw",
+  "expiry_date",
   "batch_name"
  ],
  "fields": [
@@ -95,11 +97,24 @@
   {
    "fieldname": "column_break_slaw",
    "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "evaluator",
+   "fieldtype": "Link",
+   "label": "Evaluator",
+   "options": "User"
+  },
+  {
+   "fetch_from": "evaluator.full_name",
+   "fieldname": "evaluator_name",
+   "fieldtype": "Data",
+   "label": "Evaluator Name",
+   "read_only": 1
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-07-16 15:29:19.708888",
+ "modified": "2024-09-11 11:37:20.419955",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Certificate",
diff --git a/lms/lms/doctype/lms_certificate_evaluation/lms_certificate_evaluation.json b/lms/lms/doctype/lms_certificate_evaluation/lms_certificate_evaluation.json
index affb3411..b834a5a7 100644
--- a/lms/lms/doctype/lms_certificate_evaluation/lms_certificate_evaluation.json
+++ b/lms/lms/doctype/lms_certificate_evaluation/lms_certificate_evaluation.json
@@ -119,9 +119,9 @@
   {
    "fieldname": "evaluator",
    "fieldtype": "Link",
+   "in_standard_filter": 1,
    "label": "Evaluator",
-   "options": "User",
-   "reqd": 1
+   "options": "User"
   },
   {
    "fetch_from": "evaluator.full_name",
@@ -133,7 +133,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-09-10 20:17:49.908093",
+ "modified": "2024-09-11 11:20:06.233491",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Certificate Evaluation",
diff --git a/lms/lms/doctype/lms_certificate_request/lms_certificate_request.json b/lms/lms/doctype/lms_certificate_request/lms_certificate_request.json
index ebc2dae0..f17cc999 100644
--- a/lms/lms/doctype/lms_certificate_request/lms_certificate_request.json
+++ b/lms/lms/doctype/lms_certificate_request/lms_certificate_request.json
@@ -48,8 +48,7 @@
    "fieldtype": "Link",
    "in_standard_filter": 1,
    "label": "Evaluator",
-   "options": "User",
-   "read_only": 1
+   "options": "User"
   },
   {
    "fieldname": "date",
@@ -149,7 +148,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-09-10 13:13:48.282623",
+ "modified": "2024-09-11 11:19:44.669132",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Certificate Request",
diff --git a/package.json b/package.json
index 923d2f3e..f5231fac 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "frappe_lms",
   "version": "1.0.0",
   "description": "Easy to use, open-source, Learning Management System",
-  "workspaces": [
+  "workspaces1": [
     "frappe-ui",
     "frontend"
   ],