elearning/frontend_management/pages/instructor/index.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 || 'INSTRUCTOR' }}</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">
      <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 overflow-hidden flex-shrink-0">
                    <img 
                      v-if="course.thumbnail" 
                      :src="course.thumbnail" 
                      :alt="course.title"
                      class="w-full h-full object-cover"
                    />
                    <span v-else class="text-3xl">{{ course.icon }}</span>
                  </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 authStore = useAuthStore();
const instructorStore = useInstructorStore();
const router = useRouter();

// Navigation functions
const goToProfile = () => {
  router.push('/instructor/profile');
};

const goToSettings = () => {
  router.push('/instructor/settings');
};

const handleLogout = () => {
  authStore.logout();
  router.push('/login');
};

// Fetch dashboard data on mount
onMounted(() => {
  instructorStore.fetchDashboardData();
});
</script>