59 lines
No EOL
2.3 KiB
Vue
59 lines
No EOL
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<h1 class="text-3xl font-bold mb-6">Dashboard</h1>
|
|
<p class="text-gray-600 mb-8">ยินดีต้อนรับ, {{ authStore.user?.fullName }}</p>
|
|
<!-- Stats Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<div class="card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-gray-600 text-sm">หลักสูตรทั้งหมด</p>
|
|
<p class="text-3xl font-bold text-primary-600">5</p>
|
|
</div>
|
|
<q-icon name="school" size="48px" class="text-primary-200" />
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-gray-600 text-sm">ผู้เรียนทั้งหมด</p>
|
|
<p class="text-3xl font-bold text-secondary-500">125</p>
|
|
</div>
|
|
<q-icon name="people" size="48px" class="text-secondary-200" />
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-gray-600 text-sm">เรียนจบแล้ว</p>
|
|
<p class="text-3xl font-bold text-accent-500">45</p>
|
|
</div>
|
|
<q-icon name="emoji_events" size="48px" class="text-accent-200" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Recent Courses -->
|
|
<div class="card">
|
|
<h2 class="text-xl font-semibold mb-4">หลักสูตรล่าสุด</h2>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
|
|
<div class="w-16 h-16 bg-primary-100 rounded-lg flex items-center justify-center">
|
|
<q-icon name="code" size="32px" class="text-primary-600" />
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold">Python เบื้องต้น</h3>
|
|
<p class="text-sm text-gray-600">45 ผู้เรียน • 8 บทเรียน</p>
|
|
</div>
|
|
<q-btn flat color="primary" label="ดูรายละเอียด" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'instructor',
|
|
middleware: 'instructor'
|
|
});
|
|
const authStore = useAuthStore();
|
|
</script> |