feat: Implement authentication system with token refresh and initial instructor dashboard with course management.

frontend_management/stores/instructor.ts

@@ -1,11 +1,13 @@
 import { defineStore } from 'pinia';
+import { instructorService } from '~/services/instructor.service';
 
 interface Course {
-    id: string;
+    id: number;
     title: string;
     students: number;
     lessons: number;
     icon: string;
+    thumbnail: string | null;
 }
 
 interface DashboardStats {
@@ -17,27 +19,13 @@ interface DashboardStats {
 export const useInstructorStore = defineStore('instructor', {
     state: () => ({
         stats: {
-            totalCourses: 5,
-            totalStudents: 125,
-            completedStudents: 45
+            totalCourses: 0,
+            totalStudents: 0,
+            completedStudents: 0
         } as DashboardStats,
 
-        recentCourses: [
-            {
-                id: '1',
-                title: 'Python เบื้องต้น',
-                students: 45,
-                lessons: 8,
-                icon: '📘'
-            },
-            {
-                id: '2',
-                title: 'JavaScript สำหรับเว็บ',
-                students: 32,
-                lessons: 12,
-                icon: '📗'
-            }
-        ] as Course[]
+        recentCourses: [] as Course[],
+        loading: false
     }),
 
     getters: {
@@ -47,14 +35,31 @@ export const useInstructorStore = defineStore('instructor', {
 
     actions: {
         async fetchDashboardData() {
-            // TODO: Replace with real API call
-            // const { $api } = useNuxtApp();
-            // const data = await $api('/instructor/dashboard');
-            // this.stats = data.stats;
-            // this.recentCourses = data.recentCourses;
+            this.loading = true;
+            try {
+                // Fetch real courses from API
+                const courses = await instructorService.getCourses();
 
-            // Using mock data for now
-            console.log('Using mock data for instructor dashboard');
+                // Update stats
+                this.stats.totalCourses = courses.length;
+                // TODO: Get real student counts from API when available
+                this.stats.totalStudents = 0;
+                this.stats.completedStudents = 0;
+
+                // Map to recent courses format (take first 5)
+                this.recentCourses = courses.slice(0, 3).map((course, index) => ({
+                    id: course.id,
+                    title: course.title.th,
+                    students: 0, // TODO: Get from API
+                    lessons: 0, // TODO: Get from course detail API
+                    icon: ['📘', '📗', '📙', '📕', '📒'][index % 5],
+                    thumbnail: course.thumbnail_url || null
+                }));
+            } catch (error) {
+                console.error('Failed to fetch dashboard data:', error);
+            } finally {
+                this.loading = false;
+            }
         }
     }
 });