ระบบรับรองแหล่งผลิต GAP พืช (Web Application)

# ระบบรับรองแหล่งผลิต GAP พืช (Web Application)

## สารบัญ (Table of Contents)

1. [Tech Stack & Architecture](#1-tech-stack--architecture)
2. [โครงสร้างโปรเจกต์ (Project Structure)](#2-โครงสร้างโปรเจกต์-project-structure)
3. [Roles & Permissions](#3-roles--permissions)
4. [Authentication — SSO Flow](#4-authentication--sso-flow)
5. [Router Configuration](#5-router-configuration)
6. [Portal Page — หน้าเมนูระบบกลาพร้ง](#6-portal-page--หน้าเมนูระบบกลาง)
7. [Application Step Form (v-stepper)](#7-application-step-form-v-stepper)
8. [Dashboard](#8-dashboard)
9. [Application State Flow](#9-application-state-flow)
10. [Inspection Module](#10-inspection-module)
11. [Certificate Module](#11-certificate-module)
12. [Application Store (Pinia)](#12-application-store-pinia)
13. [Sidebar Navigation](#13-sidebar-navigation)
14. [Vuetify Theme Configuration](#14-vuetify-theme-configuration)
15. [API Endpoints Summary](#15-api-endpoints-summary)
16. [Environment Variables](#16-environment-variables)
17. [Deployment & DevOps Notes](#17-deployment--devops-notes)

---

## 1. Tech Stack & Architecture

|Layer             |Technology                                |
|------------------|------------------------------------------|
|Frontend Framework|Vue 3 (Composition API + `<script setup>`)|
|UI Library        |Vuetify 3                                 |
|Routing           |Vue Router 4                              |
|State Management  |Pinia                                     |
|Authentication    |SSO (OAuth 2.0 / OpenID Connect)          |
|HTTP Client       |Axios                                     |
|PDF Generation    |html2pdf.js / jsPDF                       |
|Build Tool        |Vite                                      |

-----

## 1. โครงสร้างโปรเจกต์ (Project Structure)

```
src/
├── App.vue
├── main.ts
├── assets/
│   └── styles/
│       └── variables.scss          # Vuetify custom theme
│
├── router/
│   └── index.ts                    # Vue Router + Navigation Guards
│
├── stores/                         # Pinia Stores
│   ├── auth.store.ts               # Authentication & User session
│   ├── application.store.ts        # GAP application CRUD
│   ├── inspection.store.ts         # Inspection & checklist
│   ├── certificate.store.ts        # Certificate management
│   └── notification.store.ts       # Notifications
│
├── composables/                    # Shared Composition Functions
│   ├── useAuth.ts
│   ├── usePermission.ts
│   └── useNotification.ts
│
├── plugins/
│   ├── vuetify.ts                  # Vuetify configuration
│   └── axios.ts                    # Axios instance + interceptors
│
├── layouts/
│   ├── DefaultLayout.vue           # Sidebar + AppBar + Footer
│   └── AuthLayout.vue              # Login / SSO callback page
│
├── views/
│   ├── auth/
│   │   ├── LoginPage.vue
│   │   └── SsoCallbackPage.vue
│   │
│   ├── dashboard/
│   │   └── DashboardPage.vue
│   │
│   ├── application/
│   │   ├── ApplicationListPage.vue
│   │   ├── ApplicationFormPage.vue        # Step Form (v-stepper)
│   │   ├── ApplicationDetailPage.vue
│   │   └── GroupApplicationPage.vue
│   │
│   ├── inspection/
│   │   ├── InspectionSchedulePage.vue
│   │   ├── InspectionChecklistPage.vue
│   │   └── InspectionResultPage.vue
│   │
│   ├── certificate/
│   │   ├── CertificateListPage.vue
│   │   └── CertificateDetailPage.vue
│   │
│   └── admin/
│       ├── UserManagementPage.vue
│       └── SystemSettingPage.vue
│
├── components/
│   ├── common/
│   │   ├── AppConfirmDialog.vue          # v-dialog confirm/cancel
│   │   ├── AppStatusChip.vue             # v-chip for statuses
│   │   ├── AppFileUpload.vue             # File/image uploader
│   │   └── AppNotificationBell.vue       # Notification dropdown
│   │
│   ├── application/
│   │   ├── StepApplicantInfo.vue         # Step 1: ข้อมูลผู้ขอ
│   │   ├── StepPlotInfo.vue              # Step 2: แปลงปลูก
│   │   ├── StepProductionInfo.vue        # Step 3: การผลิต
│   │   ├── StepDocumentUpload.vue        # Step 4: เอกสาร
│   │   └── StepReviewSubmit.vue          # Step 5: ตรวจสอบ & ยืนยัน
│   │
│   ├── inspection/
│   │   ├── GapChecklist.vue              # Checklist form
│   │   └── InspectionPhotoUpload.vue     # Photo upload grid
│   │
│   └── certificate/
│       └── CertificatePreview.vue        # PDF preview & download
│
└── utils/
    ├── constants.ts                # Enums, status codes
    ├── validators.ts               # Vuetify form rules
    └── pdf-generator.ts            # Certificate PDF builder
```

-----

## 2. Roles & Permissions

### 2.1 Role Definition

|Role           |รหัส          |คำอธิบาย                        |
|---------------|-------------|------------------------------|
|**Farmer**     |`FARMER`     |เกษตรกรผู้ยื่นคำขอ GAP             |
|**Group Admin**|`GROUP_ADMIN`|หัวหน้ากลุ่มเกษตรกร จัดการคำขอรายกลุ่ม|
|**staff**    |`staff`    |เจ้าหน้าที่ตรวจเอกสาร / อนุมัติ      |
|**Inspector**  |`INSPECTOR`  |ผู้ตรวจประเมินแปลง               |
|**Admin**      |`ADMIN`      |ผู้ดูแลระบบ                      |

### 2.2 Permission Matrix

|Feature          |Farmer|Group Admin|staff|Inspector|Admin|
|-----------------|:----:|:---------:|:-----:|:-------:|:---:|
|ยื่นคำขอรายเดี่ยว     |✅     |✅          |❌      |❌        |❌    |
|ยื่นคำขอรายกลุ่ม      |❌     |✅          |❌      |❌        |❌    |
|แก้ไข/ยกเลิกคำขอ    |✅*    |✅*         |❌      |❌        |✅    |
|ดู Dashboard ตนเอง|✅     |✅          |✅      |✅        |✅    |
|ตรวจเอกสาร       |❌     |❌          |✅      |❌        |✅    |
|นัดตรวจแปลง       |❌     |❌          |✅      |✅        |✅    |
|บันทึกผลตรวจ GAP   |❌     |❌          |❌      |✅        |✅    |
|อนุมัติ/ปฏิเสธคำขอ    |❌     |❌          |✅      |❌        |✅    |
|ออกใบรับรอง       |❌     |❌          |✅      |❌        |✅    |
|จัดการผู้ใช้         |❌     |❌          |❌      |❌        |✅    |


> ** แก้ไข/ยกเลิกได้เฉพาะคำขอของตนเองที่สถานะยังไม่ถึงขั้นอนุมัติ*

### 2.3 Route Guard & Permission Composable

```typescript
// composables/usePermission.ts
import { useAuthStore } from '@/stores/auth.store'

export function usePermission() {
  const auth = useAuthStore()

  const hasRole = (roles: string[]) => roles.includes(auth.user?.role)

  const can = (action: string) => {
    const permissions: Record<string, string[]> = {
      'application:create':     ['FARMER', 'GROUP_ADMIN'],
      'application:create-group': ['GROUP_ADMIN'],
      'application:edit-own':   ['FARMER', 'GROUP_ADMIN'],
      'document:review':        ['staff', 'ADMIN'],
      'inspection:schedule':    ['staff', 'INSPECTOR', 'ADMIN'],
      'inspection:record':      ['INSPECTOR', 'ADMIN'],
      'application:approve':    ['staff', 'ADMIN'],
      'certificate:issue':      ['staff', 'ADMIN'],
      'user:manage':            ['ADMIN'],
    }
    return (permissions[action] || []).includes(auth.user?.role)
  }

  return { hasRole, can }
}
```

-----

## 3. Authentication — SSO Flow

### 3.1 Flow Diagram
┌─────────────────────────────────────────────────┐
│                 Landing / Login Page             │
│   [เข้าสู่ระบบด้วย SSO]   [สมัครสมาชิก]           │
└────────────┬────────────────────┬───────────────┘
             │                    │
      Login  │                    │ Register
             ▼                    ▼
   ┌──────────────────┐  ┌─────────────────────┐
   │   SSO Login Flow │  │  SSO Register Flow  │
   │ (OAuth 2.0 Code) │  │ (ลงทะเบียนผู้ใช้ใหม่) │
   └────────┬─────────┘  └──────────┬──────────┘
            │                       │
            │  access_token         │  access_token
            ▼                       ▼
   ┌──────────────────────────────────────────┐
   │           /auth/callback                 │
   │  Exchange code → token → fetch profile  │
   └────────────────────┬─────────────────────┘
                        │
                        ▼
   ┌──────────────────────────────────────────┐
   │         Portal Page  (/portal)           │
   │  แสดงเมนูระบบตามสิทธิ์ (Role-based)        │
   └──────────────────────────────────────────┘

### 3.2 Auth Store (Pinia)

```typescript
// stores/auth.store.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import axios from '@/plugins/axios'

interface User {
  id: string
  fullName: string
  role: 'FARMER' | 'GROUP_ADMIN' | 'staff' | 'INSPECTOR' | 'ADMIN'
  email: string
  avatar?: string
}

export const useAuthStore = defineStore('auth', () => {
  const user = ref<User | null>(null)
  const token = ref<string | null>(null)

  const isAuthenticated = computed(() => !!token.value)
  const userRole = computed(() => user.value?.role)

  async function loginWithSso() {
    const ssoUrl = `${import.meta.env.VITE_SSO_URL}/authorize`
      + `?client_id=${import.meta.env.VITE_SSO_CLIENT_ID}`
      + `&redirect_uri=${encodeURIComponent(window.location.origin + '/auth/callback')}`
      + `&response_type=code`
      + `&scope=openid profile email`
    window.location.href = ssoUrl
  }

  async function handleCallback(code: string) {
    const { data } = await axios.post('/auth/token', { code })
    token.value = data.accessToken
    axios.defaults.headers.common['Authorization'] = `Bearer ${data.accessToken}`

    const profile = await axios.get('/auth/me')
    user.value = profile.data
  }

  function logout() {
    user.value = null
    token.value = null
    delete axios.defaults.headers.common['Authorization']
    window.location.href = `${import.meta.env.VITE_SSO_URL}/logout`
  }

  return { user, token, isAuthenticated, userRole, loginWithSso, handleCallback, logout }
}, { persist: true })
```

### 3.3 SSO Callback Page

```vue
<!-- views/auth/SsoCallbackPage.vue -->
<template>
  <v-container class="d-flex justify-center align-center" style="min-height: 100vh">
    <v-progress-circular indeterminate size="64" color="primary" />
    <p class="ml-4 text-h6">กำลังเข้าสู่ระบบ...</p>
  </v-container>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth.store'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()

onMounted(async () => {
  const code = route.query.code as string
  if (code) {
    await auth.handleCallback(code)
    router.replace({ name: 'Dashboard' })
  } else {
    router.replace({ name: 'Login' })
  }
})
</script>
```

-----

## 4. Router Configuration

```typescript
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth.store'

const routes = [
  // ── Auth ──
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/auth/LoginPage.vue'),
    meta: { layout: 'auth', requiresAuth: false },
  },
  {
    path: '/auth/callback',
    name: 'SsoCallback',
    component: () => import('@/views/auth/SsoCallbackPage.vue'),
    meta: { layout: 'auth', requiresAuth: false },
  },

  // ── Dashboard ──
  {
    path: '/',
    name: 'Dashboard',
    component: () => import('@/views/dashboard/DashboardPage.vue'),
    meta: { requiresAuth: true },
  },

  // ── Application (คำขอ GAP) ──
  {
    path: '/applications',
    name: 'ApplicationList',
    component: () => import('@/views/application/ApplicationListPage.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/applications/new',
    name: 'ApplicationCreate',
    component: () => import('@/views/application/ApplicationFormPage.vue'),
    meta: { requiresAuth: true, roles: ['FARMER', 'GROUP_ADMIN'] },
  },
  {
    path: '/applications/group/new',
    name: 'GroupApplicationCreate',
    component: () => import('@/views/application/GroupApplicationPage.vue'),
    meta: { requiresAuth: true, roles: ['GROUP_ADMIN'] },
  },
  {
    path: '/applications/:id',
    name: 'ApplicationDetail',
    component: () => import('@/views/application/ApplicationDetailPage.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/applications/:id/edit',
    name: 'ApplicationEdit',
    component: () => import('@/views/application/ApplicationFormPage.vue'),
    meta: { requiresAuth: true, roles: ['FARMER', 'GROUP_ADMIN'] },
  },

  // ── Inspection (ตรวจประเมิน) ──
  {
    path: '/inspections',
    name: 'InspectionSchedule',
    component: () => import('@/views/inspection/InspectionSchedulePage.vue'),
    meta: { requiresAuth: true, roles: ['staff', 'INSPECTOR', 'ADMIN'] },
  },
  {
    path: '/inspections/:id/checklist',
    name: 'InspectionChecklist',
    component: () => import('@/views/inspection/InspectionChecklistPage.vue'),
    meta: { requiresAuth: true, roles: ['INSPECTOR', 'ADMIN'] },
  },
  {
    path: '/inspections/:id/result',
    name: 'InspectionResult',
    component: () => import('@/views/inspection/InspectionResultPage.vue'),
    meta: { requiresAuth: true, roles: ['staff', 'INSPECTOR', 'ADMIN'] },
  },

  // ── Certificate (ใบรับรอง) ──
  {
    path: '/certificates',
    name: 'CertificateList',
    component: () => import('@/views/certificate/CertificateListPage.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/certificates/:id',
    name: 'CertificateDetail',
    component: () => import('@/views/certificate/CertificateDetailPage.vue'),
    meta: { requiresAuth: true },
  },

  // ── Admin ──
  {
    path: '/admin/users',
    name: 'UserManagement',
    component: () => import('@/views/admin/UserManagementPage.vue'),
    meta: { requiresAuth: true, roles: ['ADMIN'] },
  },
  {
    path: '/admin/settings',
    name: 'SystemSettings',
    component: () => import('@/views/admin/SystemSettingPage.vue'),
    meta: { requiresAuth: true, roles: ['ADMIN'] },
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

// ── Navigation Guard ──
router.beforeEach((to, _from, next) => {
  const auth = useAuthStore()

  if (to.meta.requiresAuth && !auth.isAuthenticated) {
    return next({ name: 'Login' })
  }

  if (to.meta.roles && !to.meta.roles.includes(auth.userRole)) {
    return next({ name: 'Dashboard' })
  }

  next()
})

export default router
```

-----

## 5. Portal Page — หน้าเมนูระบบกลางgi

### 5.1 ภาพรวม Portal

หลังจาก Login สำเร็จ ผู้ใช้จะถูก redirect มาที่หน้า Portal (/portal) ซึ่งทำหน้าที่เป็น Single Entry Point สำหรับทุกระบบภายใต้กรมวิชาการเกษตร โดยแสดงเฉพาะระบบที่ผู้ใช้มีสิทธิ์เข้าถึงตาม Role ที่ได้รับ

Portal Layout:
┌──────────────────────จัด───────────────────────────────────────────┐
│  🌿 ระบบรับรองมาตรฐานพืช (Header)              [User] [Logout]  │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   ยินดีต้อนรับ, [ชื่อผู้ใช้]  |  บทบาท: [Role]                   │
│                                                                  │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐        │
│  │  GAP     │  │  DOA     │  │ จดทะเบียน│  │  Health  │        │
│  │ Cert.   │  │ Factory  │  │ ส่งออก   │  │ Cert. 1  │        │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘        │
│                                                                  │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐                       │
│  │  Health  │  │   EL     │  │  Admin   │                       │
│  │ Cert. 2  │  │ System   │  │ Backend  │                       │
│  └──────────┘  └──────────┘  └──────────┘                       │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

### 5.2 System Registry — นิยามระบบทั้งหมด

// utils/portal-systems.ts
export interface PortalSystem {
  id: string
  title: string
  titleEn: string
  description: string
  icon: string
  color: string
  routeName: string         // ชื่อ route หรือ external URL
  external?: boolean        // true = เปิด tab ใหม่ (microservice อื่น)
  externalUrl?: string
  requiredRoles: string[]   // [] = ทุก role เข้าได้
  badge?: string            // ข้อความ badge เช่น "ใหม่", "Beta"
}

export const PORTAL_SYSTEMS: PortalSystem[] = [
  {
    id: 'gap',
    title: 'ระบบการรับรองมาตรฐาน GAP',
    titleEn: 'GAP Certification System',
    description: 'ยื่นคำขอรับรอง ตรวจประเมินแปลง และออกใบรับรองมาตรฐาน GAP พืช',
    icon: 'mdi-leaf-circle',
    color: 'success',
    routeName: 'Dashboard',
    requiredRoles: [], // ทุก role
  },
  {
    id: 'doa-factory',
    title: 'ระบบการขึ้นทะเบียนโรงงานผลิตสินค้าพืช DOA',
    titleEn: 'DOA Factory & Certification Body Registration',
    description: 'ขึ้นทะเบียนโรงงานผลิตสินค้าพืช DOA และหน่วยรับรองโรงงาน (Certification Body: CB)',
    icon: 'mdi-factory',
    color: 'primary',
    routeName: 'DoaFactoryDashboard',
    requiredRoles: ['FARMER', 'GROUP_ADMIN', 'staff', 'ADMIN'],
  },
  {
    id: 'export-register',
    title: 'ระบบจดทะเบียนผู้ส่งออก',
    titleEn: 'Exporter Registration System',
    description: 'จดทะเบียนผู้ส่งออกสินค้าเกษตร และต่ออายุใบทะเบียน',
    icon: 'mdi-truck-delivery',
    color: 'orange',
    routeName: 'ExporterDashboard',
    requiredRoles: ['FARMER', 'GROUP_ADMIN', 'staff', 'ADMIN'],
  },
  {
    id: 'health-cert-controlled',
    title: 'ระบบ Health Certificate',
    titleEn: 'Health Certificate — Controlled Plants',
    description: 'ออก Health Certificate ตามประกาศพืชควบคุมเฉพาะ',
    icon: 'mdi-file-certificate',
    color: 'teal',
    routeName: 'HealthCertControlledDashboard',
    requiredRoles: ['FARMER', 'GROUP_ADMIN', 'staff', 'ADMIN'],
    badge: 'พืชควบคุม',
  },
  {
    id: 'health-cert-processed',
    title: 'ระบบ Health Certificate สินค้าเกษตรแปรรูปด้านพืช',
    titleEn: 'Health Certificate — Processed Agricultural Products',
    description: 'ออก Health Certificate สำหรับสินค้าเกษตรแปรรูปด้านพืช',
    icon: 'mdi-file-certificate-outline',
    color: 'cyan',
    routeName: 'HealthCertProcessedDashboard',
    requiredRoles: ['FARMER', 'GROUP_ADMIN', 'staff', 'ADMIN'],
    badge: 'สินค้าแปรรูป',
  },
  {
    id: 'establishment-list',
    title: 'ระบบการควบคุมพิเศษ Establishment List (EL)',
    titleEn: 'Establishment List Management System',
    description: 'บริหารจัดการบัญชีรายชื่อโรงคัดบรรจุสินค้าเกษตรเพื่อการส่งออก',
    icon: 'mdi-format-list-checks',
    color: 'indigo',
    routeName: 'EstablishmentListDashboard',
    requiredRoles: ['staff', 'INSPECTOR', 'ADMIN'],
  },
  {
    id: 'admin-backend',
    title: 'ระบบบริหารจัดการผู้ดูแลระบบ (Backend)',
    titleEn: 'Admin & Open API Management',
    description: 'บริหารจัดการผู้ใช้งาน สิทธิ์ระบบ และจัดการ Open API',
    icon: 'mdi-shield-crown',
    color: 'deep-purple',
    routeName: 'AdminPortal',
    requiredRoles: ['ADMIN'],
    badge: 'Admin',
  },
]

### 5.3 Portal Permission Composable

// composables/usePortalPermission.ts
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth.store'
import { PORTAL_SYSTEMS, type PortalSystem } from '@/utils/portal-systems'

export function usePortalPermission() {
  const auth = useAuthStore()

  const accessibleSystems = computed<PortalSystem[]>(() =>
    PORTAL_SYSTEMS.filter(sys => {
      if (sys.requiredRoles.length === 0) return true
      return sys.requiredRoles.includes(auth.user?.role ?? '')
    })
  )

  const hasAccessTo = (systemId: string) =>
    accessibleSystems.value.some(s => s.id === systemId)

  return { accessibleSystems, hasAccessTo }
}

### 5.4 Portal Page Component

<!-- views/portal/PortalPage.vue -->
<template>
  <v-app :theme="'gapTheme'">

    <!-- App Bar -->
    <v-app-bar flat color="primary" elevation="2">
      <v-app-bar-title>
        <div class="d-flex align-center">
          <v-icon size="28" color="white" class="mr-2">mdi-leaf</v-icon>
          <span class="text-white font-weight-bold">ระบบรับรองมาตรฐานพืช</span>
          <span class="text-white text-caption ml-2 opacity-70">กรมวิชาการเกษตร</span>
        </div>
      </v-app-bar-title>
      <template v-slot:append>
        <AppNotificationBell />
        <v-menu>
          <template v-slot:activator="{ props }">
            <v-btn v-bind="props" variant="text" class="text-white ml-1">
              <v-avatar color="white" size="32" class="mr-2">
                <span class="text-primary font-weight-bold text-body-2">
                  {{ auth.user?.fullName?.charAt(0) }}
                </span>
              </v-avatar>
              {{ auth.user?.fullName }}
              <v-icon end>mdi-chevron-down</v-icon>
            </v-btn>
          </template>
          <v-list min-width="220">
            <v-list-item
              prepend-icon="mdi-account-circle"
              :title="auth.user?.fullName"
              :subtitle="roleLabel"
            />
            <v-divider />
            <v-list-item
              prepend-icon="mdi-account-edit"
              title="แก้ไขโปรไฟล์"
              @click="router.push({ name: 'UserProfile' })"
            />
            <v-list-item
              prepend-icon="mdi-logout"
              title="ออกจากระบบ"
              @click="auth.logout()"
              base-color="error"
            />
          </v-list>
        </v-menu>
      </template>
    </v-app-bar>

    <v-main class="portal-bg">
      <v-container class="py-8" max-width="1200">

        <!-- Welcome Banner -->
        <v-card color="primary" variant="tonal" class="mb-8" rounded="xl">
          <v-card-text class="d-flex align-center pa-6">
            <div>
              <h2 class="text-h5 font-weight-bold">
                ยินดีต้อนรับ, {{ auth.user?.fullName }} 👋
              </h2>
              <p class="text-body-2 mt-1 text-medium-emphasis">
                บทบาท: <v-chip size="small" color="primary" class="ml-1">{{ roleLabel }}</v-chip>
                &nbsp;|&nbsp; สิทธิ์เข้าถึง {{ accessibleSystems.length }} ระบบ
              </p>
            </div>
            <v-spacer />
            <v-icon size="80" color="primary" class="opacity-20">mdi-leaf-circle</v-icon>
          </v-card-text>
        </v-card>

        <!-- Systems Grid -->
        <h2 class="text-h6 font-weight-bold mb-4">
          <v-icon start color="primary">mdi-apps</v-icon>
          ระบบที่คุณสามารถเข้าใช้งาน
        </h2>

        <v-row>
          <v-col
            v-for="system in accessibleSystems"
            :key="system.id"
            cols="12" sm="6" md="4" lg="3"
          >
            <v-card
              rounded="xl"
              elevation="2"
              class="system-card h-100"
              hover
              @click="navigateTo(system)"
            >
              <v-card-text class="pa-6">
                <!-- Badge -->
                <div class="d-flex justify-space-between align-start mb-4">
                  <v-avatar :color="system.color" size="56" rounded="lg">
                    <v-icon size="30" color="white">{{ system.icon }}</v-icon>
                  </v-avatar>
                  <v-chip
                    v-if="system.badge"
                    :color="system.color"
                    size="x-small"
                    label
                  >
                    {{ system.badge }}
                  </v-chip>
                </div>

                <!-- Title -->
                <h3 class="text-subtitle-1 font-weight-bold mb-2 system-title">
                  {{ system.title }}
                </h3>
                <p class="text-caption text-medium-emphasis">
                  {{ system.description }}
                </p>
              </v-card-text>

              <v-card-actions class="pa-4 pt-0">
                <v-btn
                  :color="system.color"
                  variant="tonal"
                  size="small"
                  rounded="lg"
                  block
                >
                  <v-icon start size="16">mdi-arrow-right-circle</v-icon>
                  เข้าใช้งาน
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>

        <!-- No access message -->
        <v-card
          v-if="accessibleSystems.length === 0"
          variant="outlined"
          rounded="xl"
          class="mt-4"
        >
          <v-card-text class="text-center pa-12">
            <v-icon size="64" color="grey-lighten-1">mdi-lock-outline</v-icon>
            <p class="text-h6 mt-4 text-medium-emphasis">ยังไม่มีสิทธิ์เข้าใช้งานระบบ</p>
            <p class="text-body-2 text-medium-emphasis">กรุณาติดต่อผู้ดูแลระบบเพื่อขอสิทธิ์</p>
          </v-card-text>
        </v-card>

      </v-container>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth.store'
import { usePortalPermission } from '@/composables/usePortalPermission'
import { type PortalSystem } from '@/utils/portal-systems'
import AppNotificationBell from '@/components/common/AppNotificationBell.vue'

const auth = useAuthStore()
const router = useRouter()
const { accessibleSystems } = usePortalPermission()

const roleLabels: Record<string, string> = {
  FARMER:      'เกษตรกร',
  GROUP_ADMIN: 'หัวหน้ากลุ่มเกษตรกร',
  staff:     'เจ้าหน้าที่',
  INSPECTOR:   'ผู้ตรวจประเมิน',
  ADMIN:       'ผู้ดูแลระบบ',
}

const roleLabel = computed(() => roleLabels[auth.user?.role ?? ''] ?? auth.user?.role)

function navigateTo(system: PortalSystem) {
  if (system.external && system.externalUrl) {
    window.open(system.externalUrl, '_blank')
  } else {
    router.push({ name: system.routeName })
  }
}
</script>

<style scoped>
.portal-bg {
  background: linear-gradient(160deg, #F1F8E9 0%, #E8F5E9 40%, #E0F7FA 100%);
  min-height: 100vh;
}

.system-card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.system-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.system-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  min-height: 2.8em;
}
</style>

```

-----


## 6. Application Step Form (v-stepper)

### 6.1 หน้า Step Form หลัก

```vue
<!-- views/application/ApplicationFormPage.vue -->
<template>
  <v-container>
    <v-card>
      <v-card-title class="text-h5 pa-6">
        <v-icon start>mdi-file-document-edit</v-icon>
        ยื่นคำขอรับรอง GAP พืช
      </v-card-title>

      <v-stepper v-model="currentStep" :items="stepItems" alt-labels>
        <!-- Step 1: ข้อมูลผู้ขอ -->
        <template v-slot:item.1>
          <StepApplicantInfo
            v-model="form.applicant"
            ref="step1Ref"
          />
        </template>

        <!-- Step 2: แปลงปลูก -->
        <template v-slot:item.2>
          <StepPlotInfo
            v-model="form.plots"
            ref="step2Ref"
          />
        </template>

        <!-- Step 3: การผลิต -->
        <template v-slot:item.3>
          <StepProductionInfo
            v-model="form.production"
            ref="step3Ref"
          />
        </template>

        <!-- Step 4: เอกสาร -->
        <template v-slot:item.4>
          <StepDocumentUpload
            v-model="form.documents"
            ref="step4Ref"
          />
        </template>

        <!-- Step 5: ตรวจสอบ & ยืนยัน -->
        <template v-slot:item.5>
          <StepReviewSubmit :form-data="form" />
        </template>

        <!-- Actions -->
        <template v-slot:actions>
          <v-btn
            v-if="currentStep > 1"
            variant="text"
            @click="currentStep--"
          >
            <v-icon start>mdi-arrow-left</v-icon>
            ย้อนกลับ
          </v-btn>

          <v-spacer />

          <v-btn color="grey" variant="outlined" class="mr-2" @click="saveDraft">
            <v-icon start>mdi-content-save</v-icon>
            บันทึกร่าง
          </v-btn>

          <v-btn
            v-if="currentStep < 5"
            color="primary"
            @click="goNext"
          >
            ถัดไป
            <v-icon end>mdi-arrow-right</v-icon>
          </v-btn>

          <v-btn
            v-else
            color="success"
            @click="submitApplication"
            :loading="isSubmitting"
          >
            <v-icon start>mdi-send</v-icon>
            ยื่นคำขอ
          </v-btn>
        </template>
      </v-stepper>
    </v-card>
  </v-container>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useApplicationStore } from '@/stores/application.store'
import StepApplicantInfo from '@/components/application/StepApplicantInfo.vue'
import StepPlotInfo from '@/components/application/StepPlotInfo.vue'
import StepProductionInfo from '@/components/application/StepProductionInfo.vue'
import StepDocumentUpload from '@/components/application/StepDocumentUpload.vue'
import StepReviewSubmit from '@/components/application/StepReviewSubmit.vue'

const router = useRouter()
const appStore = useApplicationStore()

const currentStep = ref(1)
const isSubmitting = ref(false)
const step1Ref = ref()
const step2Ref = ref()
const step3Ref = ref()
const step4Ref = ref()

const stepItems = [
  { title: 'ข้อมูลผู้ขอ', value: 1 },
  { title: 'แปลงปลูก',   value: 2 },
  { title: 'การผลิต',     value: 3 },
  { title: 'เอกสาร',      value: 4 },
  { title: 'ตรวจสอบ',     value: 5 },
]

const form = reactive({
  applicant: { fullName: '', idCard: '', phone: '', address: '' },
  plots: [],
  production: { cropType: '', area: '', method: '', startDate: '' },
  documents: [],
})

async function goNext() {
  const refs = [step1Ref, step2Ref, step3Ref, step4Ref]
  const stepRef = refs[currentStep.value - 1]
  const { valid } = await stepRef.value.validate()
  if (valid) currentStep.value++
}

async function saveDraft() {
  await appStore.saveDraft(form)
}

async function submitApplication() {
  isSubmitting.value = true
  try {
    await appStore.submit(form)
    router.push({ name: 'ApplicationList' })
  } finally {
    isSubmitting.value = false
  }
}
</script>
```

### 6.2 Step 1 — ข้อมูลผู้ขอ (ตัวอย่าง Component)

```vue
<!-- components/application/StepApplicantInfo.vue -->
<template>
  <v-form ref="formRef">
    <v-card flat>
      <v-card-text>
        <v-row>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="model.fullName"
              label="ชื่อ-นามสกุล"
              :rules="[rules.required]"
              prepend-inner-icon="mdi-account"
            />
          </v-col>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="model.idCard"
              label="เลขบัตรประชาชน"
              :rules="[rules.required, rules.idCard]"
              prepend-inner-icon="mdi-card-account-details"
              maxlength="13"
            />
          </v-col>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="model.phone"
              label="เบอร์โทรศัพท์"
              :rules="[rules.required, rules.phone]"
              prepend-inner-icon="mdi-phone"
            />
          </v-col>
          <v-col cols="12">
            <v-textarea
              v-model="model.address"
              label="ที่อยู่"
              :rules="[rules.required]"
              rows="3"
              prepend-inner-icon="mdi-map-marker"
            />
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const model = defineModel({ required: true })
const formRef = ref()

const rules = {
  required: (v: string) => !!v || 'กรุณากรอกข้อมูล',
  idCard: (v: string) => /^\d{13}$/.test(v) || 'เลขบัตรประชาชนไม่ถูกต้อง',
  phone: (v: string) => /^0\d{8,9}$/.test(v) || 'เบอร์โทรไม่ถูกต้อง',
}

function validate() {
  return formRef.value.validate()
}

defineExpose({ validate })
</script>
```

### 6.3 Step 2 — แปลงปลูก (Dynamic Plot List)

```vue
<!-- components/application/StepPlotInfo.vue -->
<template>
  <v-form ref="formRef">
    <v-card flat>
      <v-card-text>
        <div v-for="(plot, index) in model" :key="index" class="mb-4">
          <v-card variant="outlined">
            <v-card-title class="d-flex align-center">
              แปลงที่ {{ index + 1 }}
              <v-spacer />
              <v-btn
                icon="mdi-delete"
                color="error"
                size="small"
                variant="text"
                @click="removePlot(index)"
                v-if="model.length > 1"
              />
            </v-card-title>
            <v-card-text>
              <v-row>
                <v-col cols="12" md="4">
                  <v-text-field
                    v-model="plot.plotName"
                    label="ชื่อแปลง"
                    :rules="[rules.required]"
                  />
                </v-col>
                <v-col cols="12" md="4">
                  <v-text-field
                    v-model.number="plot.area"
                    label="พื้นที่ (ไร่)"
                    type="number"
                    :rules="[rules.required, rules.positive]"
                  />
                </v-col>
                <v-col cols="12" md="4">
                  <v-select
                    v-model="plot.province"
                    label="จังหวัด"
                    :items="provinces"
                    :rules="[rules.required]"
                  />
                </v-col>
                <v-col cols="12" md="6">
                  <v-text-field
                    v-model.number="plot.latitude"
                    label="ละติจูด"
                    type="number"
                    step="0.000001"
                  />
                </v-col>
                <v-col cols="12" md="6">
                  <v-text-field
                    v-model.number="plot.longitude"
                    label="ลองจิจูด"
                    type="number"
                    step="0.000001"
                  />
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </div>

        <v-btn color="primary" variant="outlined" block @click="addPlot">
          <v-icon start>mdi-plus</v-icon>
          เพิ่มแปลง
        </v-btn>
      </v-card-text>
    </v-card>
  </v-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const model = defineModel<any[]>({ required: true, default: () => [createEmptyPlot()] })
const formRef = ref()
const provinces = ['กรุงเทพมหานคร', 'เชียงใหม่', 'ขอนแก่น', 'นครราชสีมา', '...']

const rules = {
  required: (v: any) => !!v || 'กรุณากรอกข้อมูล',
  positive: (v: number) => v > 0 || 'กรุณากรอกค่ามากกว่า 0',
}

function createEmptyPlot() {
  return { plotName: '', area: null, province: '', latitude: null, longitude: null }
}

function addPlot() { model.value.push(createEmptyPlot()) }
function removePlot(i: number) { model.value.splice(i, 1) }
function validate() { return formRef.value.validate() }

defineExpose({ validate })
</script>
```

-----

## 7. Dashboard

### 7.1 Dashboard Layout

```vue
<!-- views/dashboard/DashboardPage.vue -->
<template>
  <v-container>
    <h1 class="text-h4 mb-6">Dashboard</h1>

    <!-- ── Summary Cards ── -->
    <v-row>
      <v-col v-for="card in summaryCards" :key="card.title" cols="12" sm="6" md="3">
        <v-card :color="card.color" variant="tonal">
          <v-card-text class="d-flex align-center">
            <v-icon :icon="card.icon" size="48" class="mr-4" />
            <div>
              <div class="text-h4 font-weight-bold">{{ card.value }}</div>
              <div class="text-body-2">{{ card.title }}</div>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- ── Notifications ── -->
    <v-card class="mt-6">
      <v-card-title>
        <v-icon start>mdi-bell</v-icon>
        การแจ้งเตือนล่าสุด
      </v-card-title>
      <v-list>
        <v-list-item
          v-for="noti in notifications"
          :key="noti.id"
          :prepend-icon="noti.icon"
          :subtitle="noti.date"
        >
          <v-list-item-title>{{ noti.message }}</v-list-item-title>
          <template v-slot:append>
            <AppStatusChip :status="noti.status" />
          </template>
        </v-list-item>
      </v-list>
    </v-card>

    <!-- ── Recent Applications Table ── -->
    <v-card class="mt-6">
      <v-card-title>
        <v-icon start>mdi-file-document</v-icon>
        คำขอล่าสุด
      </v-card-title>
      <v-data-table
        :headers="tableHeaders"
        :items="recentApplications"
        :items-per-page="5"
        density="comfortable"
      >
        <template v-slot:item.status="{ value }">
          <AppStatusChip :status="value" />
        </template>
        <template v-slot:item.actions="{ item }">
          <v-btn
            icon="mdi-eye"
            size="small"
            variant="text"
            :to="{ name: 'ApplicationDetail', params: { id: item.id } }"
          />
        </template>
      </v-data-table>
    </v-card>
  </v-container>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useAuthStore } from '@/stores/auth.store'
import { useApplicationStore } from '@/stores/application.store'
import { useNotificationStore } from '@/stores/notification.store'
import AppStatusChip from '@/components/common/AppStatusChip.vue'

const auth = useAuthStore()
const appStore = useApplicationStore()
const notiStore = useNotificationStore()

onMounted(async () => {
  await appStore.fetchDashboardSummary()
  await notiStore.fetchRecent()
})

const summaryCards = computed(() => [
  { title: 'คำขอทั้งหมด',       value: appStore.summary.total,     icon: 'mdi-file-multiple',        color: 'primary' },
  { title: 'รอดำเนินการ',       value: appStore.summary.pending,   icon: 'mdi-clock-outline',        color: 'warning' },
  { title: 'ผ่านการรับรอง',      value: appStore.summary.approved,  icon: 'mdi-check-circle-outline', color: 'success' },
  { title: 'ใบรับรองที่ใช้งานอยู่', value: appStore.summary.activeCerts, icon: 'mdi-certificate',       color: 'info'    },
])

const notifications = computed(() => notiStore.items)
const recentApplications = computed(() => appStore.recentList)

const tableHeaders = [
  { title: 'เลขที่คำขอ',   key: 'applicationNo' },
  { title: 'ประเภทพืช',    key: 'cropType' },
  { title: 'วันที่ยื่น',      key: 'submittedAt' },
  { title: 'สถานะ',        key: 'status' },
  { title: '',             key: 'actions', sortable: false },
]
</script>
```

### 7.2 Status Chip Component

```vue
<!-- components/common/AppStatusChip.vue -->
<template>
  <v-chip :color="statusColor" size="small" label>
    <v-icon start size="14">{{ statusIcon }}</v-icon>
    {{ statusLabel }}
  </v-chip>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{ status: string }>()

const statusMap: Record<string, { color: string; icon: string; label: string }> = {
  DRAFT:             { color: 'grey',    icon: 'mdi-pencil',           label: 'ร่าง' },
  SUBMITTED:         { color: 'blue',    icon: 'mdi-send',             label: 'ยื่นแล้ว' },
  DOC_REVIEW:        { color: 'orange',  icon: 'mdi-file-search',      label: 'ตรวจเอกสาร' },
  INSPECTION_SCHEDULED: { color: 'purple', icon: 'mdi-calendar-clock', label: 'นัดตรวจ' },
  INSPECTING:        { color: 'indigo',  icon: 'mdi-clipboard-check',  label: 'กำลังตรวจ' },
  APPROVED:          { color: 'green',   icon: 'mdi-check-circle',     label: 'อนุมัติ' },
  REJECTED:          { color: 'red',     icon: 'mdi-close-circle',     label: 'ไม่ผ่าน' },
  CANCELLED:         { color: 'grey',    icon: 'mdi-cancel',           label: 'ยกเลิก' },
  CERT_ISSUED:       { color: 'teal',    icon: 'mdi-certificate',      label: 'ออกใบรับรอง' },
  CERT_EXPIRED:      { color: 'brown',   icon: 'mdi-clock-alert',      label: 'หมดอายุ' },
}

const current = computed(() => statusMap[props.status] || statusMap.DRAFT)
const statusColor = computed(() => current.value.color)
const statusIcon = computed(() => current.value.icon)
const statusLabel = computed(() => current.value.label)
</script>
```

-----

## 8. Application State Flow

```
                    ┌────────┐
         ┌─────────│ DRAFT  │──────── บันทึกร่าง
         │         └───┬────┘
         │ ยกเลิก       │ ยื่นคำขอ
         ▼             ▼
   ┌───────────┐  ┌───────────┐
   │ CANCELLED │  │ SUBMITTED │
   └───────────┘  └─────┬─────┘
                        │ เจ้าหน้าที่รับเรื่อง
                        ▼
                  ┌────────────┐
                  │ DOC_REVIEW │ ─── ตรวจเอกสาร
                  └─────┬──────┘
            เอกสารไม่ผ่าน │          │ เอกสารผ่าน
            (ส่งกลับแก้ไข)│          ▼
                  ▲      │    ┌─────────────────────┐
                  │      │    │ INSPECTION_SCHEDULED │ ─── นัดตรวจแปลง
                  │      │    └──────────┬──────────┘
                  │      │               ▼
                  │      │         ┌────────────┐
                  │      │         │ INSPECTING │ ─── บันทึกผลตรวจ
                  │      │         └─────┬──────┘
                  │      │     ไม่ผ่าน    │      ผ่าน
                  │      │        ┌──────┴──────┐
                  │      ▼        ▼             ▼
                  │  ┌──────────┐          ┌──────────┐
                  │  │ REJECTED │          │ APPROVED │
                  │  └──────────┘          └────┬─────┘
                  │                             │ ออกใบรับรอง
                  │                             ▼
                  │                       ┌─────────────┐
                  │                       │ CERT_ISSUED │
                  │                       └──────┬──────┘
                  │                              │ หมดอายุ
                  │                              ▼
                  │                       ┌──────────────┐
                  └───────────────────────│ CERT_EXPIRED │ ── ยื่นต่ออายุ (loop)
                                          └──────────────┘
```

-----

## 9. Inspection Module

### 9.1 GAP Checklist Component

```vue
<!-- components/inspection/GapChecklist.vue -->
<template>
  <v-card>
    <v-card-title>
      <v-icon start>mdi-clipboard-check-outline</v-icon>
      รายการตรวจประเมิน GAP
    </v-card-title>

    <v-card-text>
      <v-expansion-panels variant="accordion">
        <v-expansion-panel
          v-for="(category, ci) in checklist"
          :key="ci"
          :title="category.title"
        >
          <v-expansion-panel-text>
            <v-table density="compact">
              <thead>
                <tr>
                  <th style="width: 50%">ข้อกำหนด</th>
                  <th style="width: 20%">ผลตรวจ</th>
                  <th style="width: 30%">หมายเหตุ</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, ii) in category.items" :key="ii">
                  <td>{{ item.label }}</td>
                  <td>
                    <v-btn-toggle
                      v-model="item.result"
                      mandatory
                      density="compact"
                      color="primary"
                    >
                      <v-btn value="PASS" size="small" color="success">ผ่าน</v-btn>
                      <v-btn value="FAIL" size="small" color="error">ไม่ผ่าน</v-btn>
                      <v-btn value="NA"   size="small">N/A</v-btn>
                    </v-btn-toggle>
                  </td>
                  <td>
                    <v-text-field
                      v-model="item.remark"
                      density="compact"
                      variant="underlined"
                      hide-details
                      placeholder="หมายเหตุ"
                    />
                  </td>
                </tr>
              </tbody>
            </v-table>
          </v-expansion-panel-text>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
interface CheckItem {
  label: string
  result: 'PASS' | 'FAIL' | 'NA' | null
  remark: string
}

interface CheckCategory {
  title: string
  items: CheckItem[]
}

const checklist = defineModel<CheckCategory[]>({ required: true })
</script>
```

### 9.2 GAP Checklist Data (ตัวอย่าง)

```typescript
// utils/gap-checklist-template.ts
export const GAP_CHECKLIST_TEMPLATE = [
  {
    title: '1. แหล่งน้ำ',
    items: [
      { label: '1.1 แหล่งน้ำไม่มีการปนเปื้อนสารเคมี',       result: null, remark: '' },
      { label: '1.2 มีระบบการจัดการน้ำอย่างเหมาะสม',         result: null, remark: '' },
      { label: '1.3 มีการตรวจวิเคราะห์คุณภาพน้ำ',            result: null, remark: '' },
    ],
  },
  {
    title: '2. พื้นที่ปลูก',
    items: [
      { label: '2.1 พื้นที่ไม่มีสารปนเปื้อนในดิน',              result: null, remark: '' },
      { label: '2.2 ไม่อยู่ใกล้แหล่งมลพิษ',                   result: null, remark: '' },
      { label: '2.3 มีการจัดการดินอย่างเหมาะสม',              result: null, remark: '' },
    ],
  },
  {
    title: '3. วัตถุอันตรายทางการเกษตร',
    items: [
      { label: '3.1 ใช้สารเคมีตามคำแนะนำ',                   result: null, remark: '' },
      { label: '3.2 มีการเก็บรักษาสารเคมีอย่างปลอดภัย',        result: null, remark: '' },
      { label: '3.3 ผู้ใช้สารเคมีมีอุปกรณ์ป้องกัน',              result: null, remark: '' },
    ],
  },
  {
    title: '4. การจัดการคุณภาพในกระบวนการผลิตก่อนการเก็บเกี่ยว',
    items: [
      { label: '4.1 ใช้พันธุ์พืชที่เหมาะสม',                     result: null, remark: '' },
      { label: '4.2 มีการจดบันทึกการผลิต',                     result: null, remark: '' },
    ],
  },
  {
    title: '5. การเก็บเกี่ยวและการปฏิบัติหลังเก็บเกี่ยว',
    items: [
      { label: '5.1 เก็บเกี่ยวในระยะเวลาเหมาะสม',              result: null, remark: '' },
      { label: '5.2 ภาชนะสะอาดและเหมาะสม',                  result: null, remark: '' },
      { label: '5.3 สถานที่เก็บรักษาสะอาดปลอดภัย',             result: null, remark: '' },
    ],
  },
  {
    title: '6. การพักผ่อนของสารเคมี',
    items: [
      { label: '6.1 ปฏิบัติตามระยะเวลาหยุดใช้สารเคมีก่อนเก็บเกี่ยว', result: null, remark: '' },
    ],
  },
  {
    title: '7. การบันทึกข้อมูลและการตามสอบ',
    items: [
      { label: '7.1 มีบันทึกการใช้ปัจจัยการผลิต',                result: null, remark: '' },
      { label: '7.2 สามารถตามสอบได้ตลอดห่วงโซ่',              result: null, remark: '' },
    ],
  },
  {
    title: '8. สุขลักษณะส่วนบุคคล',
    items: [
      { label: '8.1 ผู้ปฏิบัติงานมีสุขลักษณะที่ดี',               result: null, remark: '' },
      { label: '8.2 มีสิ่งอำนวยความสะดวกด้านสุขอนามัย',        result: null, remark: '' },
    ],
  },
]
```

### 9.3 Photo Upload for Inspection

```vue
<!-- components/inspection/InspectionPhotoUpload.vue -->
<template>
  <v-card>
    <v-card-title>
      <v-icon start>mdi-camera</v-icon>
      อัปโหลดรูปภาพการตรวจ
    </v-card-title>

    <v-card-text>
      <v-file-input
        v-model="newFiles"
        label="เลือกรูปภาพ"
        accept="image/*"
        multiple
        prepend-icon="mdi-camera-plus"
        show-size
        chips
        @update:model-value="onFilesSelected"
      />

      <v-row class="mt-2">
        <v-col
          v-for="(photo, index) in photos"
          :key="index"
          cols="6" sm="4" md="3"
        >
          <v-card variant="outlined">
            <v-img :src="photo.preview" height="150" cover />
            <v-card-text class="pa-2">
              <v-text-field
                v-model="photo.caption"
                density="compact"
                variant="underlined"
                placeholder="คำอธิบายรูป"
                hide-details
              />
            </v-card-text>
            <v-card-actions class="pa-1">
              <v-spacer />
              <v-btn icon="mdi-delete" color="error" size="small" @click="removePhoto(index)" />
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Photo { file: File; preview: string; caption: string }

const photos = defineModel<Photo[]>({ default: () => [] })
const newFiles = ref<File[]>([])

function onFilesSelected(files: File[]) {
  if (!files) return
  for (const file of files) {
    const preview = URL.createObjectURL(file)
    photos.value.push({ file, preview, caption: '' })
  }
  newFiles.value = []
}

function removePhoto(index: number) {
  URL.revokeObjectURL(photos.value[index].preview)
  photos.value.splice(index, 1)
}
</script>
```

-----

## 10. Certificate Module

### 10.1 Certificate List (v-data-table)

```vue
<!-- views/certificate/CertificateListPage.vue -->
<template>
  <v-container>
    <v-card>
      <v-card-title class="d-flex align-center">
        <v-icon start>mdi-certificate</v-icon>
        ใบรับรอง GAP
        <v-spacer />
        <v-text-field
          v-model="search"
          prepend-inner-icon="mdi-magnify"
          label="ค้นหา"
          density="compact"
          variant="outlined"
          hide-details
          class="ml-4"
          style="max-width: 300px"
        />
      </v-card-title>

      <v-data-table
        :headers="headers"
        :items="certificates"
        :search="search"
        :loading="loading"
        hover
      >
        <template v-slot:item.status="{ value }">
          <AppStatusChip :status="value" />
        </template>

        <template v-slot:item.expiryDate="{ value }">
          <span :class="isExpiringSoon(value) ? 'text-warning font-weight-bold' : ''">
            {{ formatDate(value) }}
          </span>
        </template>

        <template v-slot:item.actions="{ item }">
          <v-btn
            icon="mdi-eye"
            size="small"
            variant="text"
            :to="{ name: 'CertificateDetail', params: { id: item.id } }"
          />
          <v-btn
            icon="mdi-download"
            size="small"
            variant="text"
            color="primary"
            @click="downloadPdf(item.id)"
          />
        </template>
      </v-data-table>
    </v-card>
  </v-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useCertificateStore } from '@/stores/certificate.store'
import AppStatusChip from '@/components/common/AppStatusChip.vue'

const certStore = useCertificateStore()
const search = ref('')
const loading = ref(false)

const headers = [
  { title: 'เลขที่ใบรับรอง', key: 'certNo' },
  { title: 'เกษตรกร',       key: 'farmerName' },
  { title: 'ชนิดพืช',        key: 'cropType' },
  { title: 'วันที่ออก',       key: 'issuedDate' },
  { title: 'วันหมดอายุ',     key: 'expiryDate' },
  { title: 'สถานะ',         key: 'status' },
  { title: '',              key: 'actions', sortable: false },
]

const certificates = ref([])

onMounted(async () => {
  loading.value = true
  certificates.value = await certStore.fetchAll()
  loading.value = false
})

function formatDate(d: string) {
  return new Date(d).toLocaleDateString('th-TH', { year: 'numeric', month: 'short', day: 'numeric' })
}

function isExpiringSoon(d: string) {
  const diff = new Date(d).getTime() - Date.now()
  return diff > 0 && diff < 30 * 24 * 60 * 60 * 1000
}

async function downloadPdf(id: string) {
  await certStore.downloadPdf(id)
}
</script>
```

### 10.2 Certificate PDF Generation

```typescript
// utils/pdf-generator.ts
import jsPDF from 'jspdf'

interface CertData {
  certNo: string
  farmerName: string
  idCard: string
  cropType: string
  plotAddress: string
  area: string
  issuedDate: string
  expiryDate: string
  inspectorName: string
  approverName: string
}

export function generateCertificatePdf(data: CertData): jsPDF {
  const doc = new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a4' })

  // Border
  doc.setDrawColor(34, 139, 34)
  doc.setLineWidth(2)
  doc.rect(10, 10, 277, 190)
  doc.setLineWidth(0.5)
  doc.rect(14, 14, 269, 182)

  // Header
  doc.setFontSize(24)
  doc.setTextColor(34, 139, 34)
  doc.text('ใบรับรองแหล่งผลิต GAP พืช', 148.5, 40, { align: 'center' })

  doc.setFontSize(14)
  doc.text('Certificate of Good Agricultural Practices', 148.5, 50, { align: 'center' })

  // Certificate Number
  doc.setFontSize(12)
  doc.setTextColor(0, 0, 0)
  doc.text(`เลขที่ใบรับรอง: ${data.certNo}`, 148.5, 65, { align: 'center' })

  // Content
  doc.setFontSize(11)
  const startY = 80
  const lineHeight = 10
  const lines = [
    `ขอรับรองว่า ${data.farmerName}`,
    `เลขบัตรประชาชน: ${data.idCard}`,
    `ได้ผ่านการตรวจประเมินแปลงผลิตพืช: ${data.cropType}`,
    `สถานที่ตั้ง: ${data.plotAddress}`,
    `พื้นที่: ${data.area} ไร่`,
    `ตามมาตรฐาน GAP (Good Agricultural Practices)`,
  ]

  lines.forEach((line, i) => {
    doc.text(line, 40, startY + i * lineHeight)
  })

  // Dates
  doc.text(`วันที่ออกใบรับรอง: ${data.issuedDate}`, 40, 155)
  doc.text(`วันหมดอายุ: ${data.expiryDate}`, 40, 165)

  // Signatures
  doc.text('ผู้ตรวจประเมิน', 80, 185, { align: 'center' })
  doc.text(data.inspectorName, 80, 192, { align: 'center' })
  doc.line(40, 182, 120, 182)

  doc.text('ผู้อนุมัติ', 220, 185, { align: 'center' })
  doc.text(data.approverName, 220, 192, { align: 'center' })
  doc.line(180, 182, 260, 182)

  return doc
}
```

### 10.3 Certificate Store

```typescript
// stores/certificate.store.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'
import axios from '@/plugins/axios'
import { generateCertificatePdf } from '@/utils/pdf-generator'

export const useCertificateStore = defineStore('certificate', () => {
  const certificates = ref([])
  const current = ref(null)

  async function fetchAll() {
    const { data } = await axios.get('/certificates')
    certificates.value = data
    return data
  }

  async function fetchById(id: string) {
    const { data } = await axios.get(`/certificates/${id}`)
    current.value = data
    return data
  }

  async function downloadPdf(id: string) {
    const cert = await fetchById(id)
    const pdf = generateCertificatePdf(cert)
    pdf.save(`GAP-Certificate-${cert.certNo}.pdf`)
  }

  return { certificates, current, fetchAll, fetchById, downloadPdf }
})
```

-----

## 11. Application Store (Pinia)

```typescript
// stores/application.store.ts
import { defineStore } from 'pinia'
import { ref, reactive } from 'vue'
import axios from '@/plugins/axios'

interface DashboardSummary {
  total: number
  pending: number
  approved: number
  activeCerts: number
}

export const useApplicationStore = defineStore('application', () => {
  const summary = reactive<DashboardSummary>({ total: 0, pending: 0, approved: 0, activeCerts: 0 })
  const recentList = ref([])
  const currentApp = ref(null)

  async function fetchDashboardSummary() {
    const { data } = await axios.get('/applications/summary')
    Object.assign(summary, data)
    const recent = await axios.get('/applications?limit=10&sort=-submittedAt')
    recentList.value = recent.data
  }

  async function fetchById(id: string) {
    const { data } = await axios.get(`/applications/${id}`)
    currentApp.value = data
    return data
  }

  async function saveDraft(form: any) {
    if (form.id) {
      await axios.put(`/applications/${form.id}`, { ...form, status: 'DRAFT' })
    } else {
      const { data } = await axios.post('/applications', { ...form, status: 'DRAFT' })
      form.id = data.id
    }
  }

  async function submit(form: any) {
    if (form.id) {
      await axios.put(`/applications/${form.id}`, { ...form, status: 'SUBMITTED' })
    } else {
      await axios.post('/applications', { ...form, status: 'SUBMITTED' })
    }
  }

  async function cancel(id: string) {
    await axios.patch(`/applications/${id}/status`, { status: 'CANCELLED' })
  }

  async function updateStatus(id: string, status: string, payload?: any) {
    await axios.patch(`/applications/${id}/status`, { status, ...payload })
  }

  return { summary, recentList, currentApp, fetchDashboardSummary, fetchById, saveDraft, submit, cancel, updateStatus }
})
```

-----

## 12. Sidebar Navigation

```vue
<!-- layouts/DefaultLayout.vue (partial — navigation items) -->
<template>
  <v-app>
    <v-navigation-drawer app permanent>
      <v-list-item
        prepend-icon="mdi-leaf"
        title="GAP Certification"
        subtitle="ระบบรับรองแหล่งผลิต"
      />
      <v-divider />
      <v-list density="compact" nav>
        <v-list-item
          v-for="item in filteredMenuItems"
          :key="item.title"
          :prepend-icon="item.icon"
          :title="item.title"
          :to="item.to"
          link
        />
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app flat>
      <v-spacer />
      <AppNotificationBell />
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn v-bind="props" icon>
            <v-avatar color="primary" size="36">
              {{ auth.user?.fullName?.charAt(0) }}
            </v-avatar>
          </v-btn>
        </template>
        <v-list>
          <v-list-item prepend-icon="mdi-account" :title="auth.user?.fullName" />
          <v-list-item prepend-icon="mdi-badge-account" :subtitle="auth.user?.role" />
          <v-divider />
          <v-list-item prepend-icon="mdi-logout" title="ออกจากระบบ" @click="auth.logout()" />
        </v-list>
      </v-menu>
    </v-app-bar>

    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth.store'
import { usePermission } from '@/composables/usePermission'
import AppNotificationBell from '@/components/common/AppNotificationBell.vue'

const auth = useAuthStore()
const { hasRole } = usePermission()

const menuItems = [
  { title: 'Dashboard',        icon: 'mdi-view-dashboard',    to: '/',                roles: ['ALL'] },
  { title: 'คำขอ GAP',         icon: 'mdi-file-document-edit', to: '/applications',   roles: ['ALL'] },
  { title: 'ยื่นคำขอใหม่',       icon: 'mdi-plus-circle',       to: '/applications/new', roles: ['FARMER', 'GROUP_ADMIN'] },
  { title: 'ตรวจประเมิน',       icon: 'mdi-clipboard-check',   to: '/inspections',     roles: ['staff', 'INSPECTOR', 'ADMIN'] },
  { title: 'ใบรับรอง',          icon: 'mdi-certificate',        to: '/certificates',    roles: ['ALL'] },
  { title: 'จัดการผู้ใช้',        icon: 'mdi-account-cog',       to: '/admin/users',     roles: ['ADMIN'] },
  { title: 'ตั้งค่าระบบ',        icon: 'mdi-cog',               to: '/admin/settings',  roles: ['ADMIN'] },
]

const filteredMenuItems = computed(() =>
  menuItems.filter(i => i.roles.includes('ALL') || hasRole(i.roles))
)
</script>
```

-----

## 13. Vuetify Theme Configuration

```typescript
// plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'gapTheme',
    themes: {
      gapTheme: {
        dark: false,
        colors: {
          primary:    '#2E7D32',   // เขียวเกษตร
          secondary:  '#FF8F00',   // เหลืองทอง
          accent:     '#00ACC1',
          success:    '#43A047',
          warning:    '#FB8C00',
          error:      '#E53935',
          info:       '#1E88E5',
          background: '#F5F5F5',
          surface:    '#FFFFFF',
        },
      },
    },
  },
  defaults: {
    VBtn:       { rounded: 'lg' },
    VCard:      { rounded: 'lg', elevation: 2 },
    VTextField: { variant: 'outlined', density: 'comfortable' },
    VSelect:    { variant: 'outlined', density: 'comfortable' },
  },
})
```

-----

## 14. API Endpoints Summary

|Method |Endpoint                  |Description                         |Roles                    |
|-------|--------------------------|------------------------------------|-------------------------|
|`POST` |`/auth/token`             |Exchange SSO code for token         |Public                   |
|`GET`  |`/auth/me`                |Get current user profile            |All                      |
|`GET`  |`/applications`           |List applications (filtered by role)|All                      |
|`GET`  |`/applications/summary`   |Dashboard summary counts            |All                      |
|`POST` |`/applications`           |Create new application              |Farmer, GroupAdmin       |
|`GET`  |`/applications/:id`       |Get application detail              |All                      |
|`PUT`  |`/applications/:id`       |Update application                  |Farmer, GroupAdmin       |
|`PATCH`|`/applications/:id/status`|Update status                       |staff, Admin           |
|`GET`  |`/inspections`            |List inspections                    |staff, Inspector, Admin|
|`POST` |`/inspections`            |Schedule inspection                 |staff, Admin           |
|`PUT`  |`/inspections/:id`        |Record inspection result            |Inspector, Admin         |
|`POST` |`/inspections/:id/photos` |Upload inspection photos            |Inspector                |
|`GET`  |`/certificates`           |List certificates                   |All                      |
|`GET`  |`/certificates/:id`       |Get certificate detail              |All                      |
|`POST` |`/certificates`           |Issue certificate                   |staff, Admin           |
|`GET`  |`/certificates/:id/pdf`   |Download certificate PDF            |All                      |
|`GET`  |`/users`                  |List users                          |Admin                    |
|`POST` |`/users`                  |Create user                         |Admin                    |
|`PUT`  |`/users/:id`              |Update user                         |Admin                    |
|`GET`  |`/notifications`          |Get notifications                   |All                      |

-----

## 15. Environment Variables

```env
# .env
VITE_API_BASE_URL=https://api.gap-cert.example.com
VITE_SSO_URL=https://sso.example.com
VITE_SSO_CLIENT_ID=gap-cert-web
VITE_SSO_REDIRECT_URI=http://localhost:3000/auth/callback
VITE_APP_TITLE=ระบบรับรองแหล่งผลิต GAP พืช
```

-----

## 16. Deployment & DevOps Notes

|Concern     |Recommendation                      |
|------------|------------------------------------|
|Build       |`vite build` → static SPA in `dist/`|
|Hosting     |Nginx / CloudFront + S3             |
|SPA Fallback|`try_files $uri $uri/ /index.html`  |
|HTTPS       |Required for SSO redirect           |
|Docker      |Multi-stage build (Node → Nginx)    |
|CI/CD       |GitHub Actions / GitLab CI          |
|Linting     |ESLint + Prettier + vue-tsc         |
|Testing     |Vitest (unit) + Cypress (E2E)       |