122 lines
No EOL
4.4 KiB
Vue
122 lines
No EOL
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900">
|
|
สวัสดี, {{ authStore.user?.firstName }} {{ authStore.user?.lastName }}
|
|
</h1>
|
|
<p class="text-gray-600 mt-2">ยินดีต้อนรับกลับสู่ระบบ</p>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="text-right">
|
|
<div class="text-sm font-semibold text-gray-900">{{ authStore.user?.firstName }} {{ authStore.user?.lastName }}</div>
|
|
<div class="text-xs text-gray-500">{{ authStore.user?.role || 'ADMIN' }}</div>
|
|
</div>
|
|
<div
|
|
class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-2xl cursor-pointer hover:bg-primary-200 transition"
|
|
>
|
|
<q-icon name="person" />
|
|
<q-menu>
|
|
<q-list style="min-width: 200px">
|
|
<!-- User Info Header -->
|
|
<q-item class="bg-primary-50">
|
|
<q-item-section>
|
|
<q-item-label class="text-weight-bold">{{ authStore.user?.firstName }} {{ authStore.user?.lastName }}</q-item-label>
|
|
<q-item-label caption>{{ authStore.user?.email }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator />
|
|
|
|
<!-- Profile -->
|
|
<q-item clickable v-close-popup @click="goToProfile">
|
|
<q-item-section avatar>
|
|
<q-icon name="person" />
|
|
</q-item-section>
|
|
<q-item-section>โปรไฟล์</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator />
|
|
|
|
<!-- Logout -->
|
|
<q-item clickable v-close-popup @click="handleLogout">
|
|
<q-item-section avatar>
|
|
<q-icon name="logout" color="negative" />
|
|
</q-item-section>
|
|
<q-item-section class="text-negative">ออกจากระบบ</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Recent Courses -->
|
|
<div class="card">
|
|
<h2 class="text-xl font-semibold mb-4">Dashboard</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: 'admin',
|
|
middleware: 'auth'
|
|
});
|
|
|
|
const authStore = useAuthStore();
|
|
const router = useRouter();
|
|
|
|
// Navigation functions
|
|
const goToProfile = () => {
|
|
router.push('/admin/profile');
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
authStore.logout();
|
|
router.push('/login');
|
|
};
|
|
</script> |