106 lines
3.7 KiB
Vue
106 lines
3.7 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Header -->
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">สวัสดี, อาจารย์ทดสอบ 👋</h1>
|
|
<p class="text-gray-600 mt-2">ยินดีต้อนรับกลับสู่ระบบ</p>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-2xl">
|
|
👤
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<q-card class="p-6 text-center">
|
|
<div class="text-4xl font-bold text-primary-600 mb-2">
|
|
{{ instructorStore.stats.totalCourses }}
|
|
</div>
|
|
<div class="text-gray-600">หลักสูตรทั้งหมด</div>
|
|
</q-card>
|
|
|
|
<q-card class="p-6 text-center">
|
|
<div class="text-4xl font-bold text-secondary-600 mb-2">
|
|
{{ instructorStore.stats.totalStudents }}
|
|
</div>
|
|
<div class="text-gray-600">ผู้เรียนทั้งหมด</div>
|
|
</q-card>
|
|
|
|
<q-card class="p-6 text-center">
|
|
<div class="text-4xl font-bold text-accent-600 mb-2">
|
|
{{ instructorStore.stats.completedStudents }}
|
|
</div>
|
|
<div class="text-gray-600">เรียนจบแล้ว</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<!-- Chart and Recent Courses -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Chart Placeholder -->
|
|
<q-card>
|
|
<q-card-section>
|
|
<h3 class="text-xl font-semibold mb-4">📊 สถิติผู้สมัครรวม (รายเดือน)</h3>
|
|
<div class="bg-gray-100 rounded-lg p-12 text-center text-gray-500">
|
|
[กราฟแสดงสถิติผู้สมัครรวม (รายเดือน)]
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<!-- Recent Courses -->
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-xl font-semibold">📚 หลักสูตรล่าสุด</h3>
|
|
<q-btn
|
|
flat
|
|
color="primary"
|
|
label="ดูทั้งหมด"
|
|
@click="router.push('/instructor/courses')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<q-card
|
|
v-for="course in instructorStore.recentCourses"
|
|
:key="course.id"
|
|
class="cursor-pointer hover:shadow-md transition"
|
|
@click="router.push(`/instructor/courses/${course.id}`)"
|
|
>
|
|
<q-card-section>
|
|
<div class="flex gap-4">
|
|
<div class="w-20 h-16 bg-primary-100 rounded-lg flex items-center justify-center text-3xl">
|
|
{{ course.icon }}
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold text-gray-900">{{ course.title }}</div>
|
|
<div class="text-sm text-gray-600 mt-1">
|
|
{{ course.students }} ผู้เรียน • {{ course.lessons }} บทเรียน
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'instructor',
|
|
middleware: 'auth'
|
|
});
|
|
|
|
const instructorStore = useInstructorStore();
|
|
const router = useRouter();
|
|
|
|
// Fetch dashboard data on mount
|
|
onMounted(() => {
|
|
instructorStore.fetchDashboardData();
|
|
});
|
|
</script>
|