init frontend_management

frontend_management/pages/instructor/index.vue

@@ -0,0 +1,106 @@
+<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>