feat: dark mode

This commit is contained in:
Jannat Patel
2025-02-10 10:51:21 +05:30
parent 16b9356944
commit dbf443300b
143 changed files with 886 additions and 675 deletions

View File

@@ -1,55 +1,61 @@
<template>
<div class="">
<div class="w-full flex items-center justify-between pb-4">
<div class="font-medium text-gray-600">
<div class="font-medium text-ink-gray-7">
{{ __('Statistics') }}
</div>
</div>
<div class="grid grid-cols-3 gap-5 mb-8">
<div class="flex items-center shadow py-2 px-3 rounded-md">
<div class="p-2 rounded-md bg-gray-100 mr-3">
<User class="w-5 h-5 stroke-1.5 text-gray-700" />
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<User class="w-5 h-5 stroke-1.5" />
</div>
<div class="flex items-center space-x-2">
<span class="font-semibold">
{{ students.data?.length }}
</span>
<span class="text-gray-700">
<span class="">
{{ __('Students') }}
</span>
</div>
</div>
<div class="flex items-center shadow py-2 px-3 rounded-md">
<div class="p-2 rounded-md bg-gray-100 mr-3">
<BookOpen class="w-5 h-5 stroke-1.5 text-gray-700" />
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<BookOpen class="w-5 h-5 stroke-1.5" />
</div>
<div class="flex items-center space-x-2">
<span class="font-semibold">
{{ batch.courses?.length }}
</span>
<span class="text-gray-700">
<span>
{{ __('Courses') }}
</span>
</div>
</div>
<div class="flex items-center shadow py-2 px-3 rounded-md">
<div class="p-2 rounded-md bg-gray-100 mr-3">
<ShieldCheck class="w-5 h-5 stroke-1.5 text-gray-700" />
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<ShieldCheck class="w-5 h-5 stroke-1.5" />
</div>
<div class="flex items-center space-x-2">
<span class="font-semibold">
{{ assessmentCount }}
</span>
<span class="text-gray-700">
<span>
{{ __('Assessments') }}
</span>
</div>
</div>
</div>
<div v-if="showProgressChart" class="mb-8">
<div class="text-gray-600 font-medium">
<div class="text-ink-gray-7 font-medium">
{{ __('Progress') }}
</div>
<ApexChart
@@ -59,7 +65,7 @@
height="200"
/>
<div
class="flex items-center justify-center text-sm text-gray-700 space-x-4"
class="flex items-center justify-center text-sm text-ink-gray-7 space-x-4"
>
<div class="flex items-center space-x-2">
<div
@@ -85,7 +91,7 @@
<div>
<div class="flex items-center justify-between mb-4">
<div class="text-gray-600 font-medium">
<div class="text-ink-gray-7 font-medium">
{{ __('Students') }}
</div>
<Button @click="openStudentModal()">
@@ -106,7 +112,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem
:item="item"
@@ -173,7 +179,7 @@
</ListSelectBanner>
</ListView>
</div>
<div v-else class="text-sm italic text-gray-600">
<div v-else class="text-sm italic text-ink-gray-5">
{{ __('There are no students in this batch.') }}
</div>
</div>
@@ -242,7 +248,7 @@ const students = createResource({
auto: true,
onSuccess(data) {
chartData.value = getChartData()
showProgressChart.value = true
showProgressChart.value = data.length && true
},
})
@@ -309,7 +315,9 @@ const removeStudents = (selections, unselectAll) => {
const getChartData = () => {
let categories = {}
Object.keys(students.data?.[0].courses).forEach((course) => {
if (!students.data?.length) return []
Object.keys(students.data[0].courses).forEach((course) => {
categories[course] = {
value: 0,
type: 'course',