feat: dark mode
This commit is contained in:
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user