Prepare to version 1.5 use spec-kit

2025-11-30 13:58:46 +07:00
parent eff0169c21
commit 241022ada6
169 changed files with 34584 additions and 26464 deletions
--- a/docs/3_Frontend_Plan_V1_4_5.md
+++ b/docs/3_Frontend_Plan_V1_4_5.md
@@ -0,0 +1,978 @@
+# 📋 **แผนการพัฒนา Frontend (Next.js) - LCBP3-DMS v1.4.5**
+
+**สถานะ:** FINAL GUIDELINE Rev.05
+**วันที่:** 2025-11-29
+**อ้างอิง:** Requirements v1.4.5 & FullStackJS Guidelines v1.4.5
+**Classification:** Internal Technical Documentation
+
+## 🎯 **ภาพรวมโครงการ**
+
+พัฒนา Frontend สำหรับระบบบริหารจัดการเอกสารโครงการ (Document Management System) ที่มีความทันสมัย รองรับการทำงานบนอุปกรณ์ต่างๆ ได้อย่างสมบูรณ์ มีประสบการณ์ผู้ใช้ที่ราบรื่น และรองรับการทำงานแบบ Offline เบื้องต้น
+
+---
+
+## 📐 **สถาปัตยกรรมระบบ**
+
+### **Technology Stack**
+
+- **Framework:** Next.js 14+ (App Router, React 18, TypeScript, ESM)
+- **Styling:** Tailwind CSS + PostCSS
+- **UI Components:** shadcn/ui + Radix UI Primitives
+- **State Management:**
+  - **Server State:** TanStack Query (React Query)
+  - **Client State:** Zustand
+  - **Form State:** React Hook Form + Zod
+- **API Client:** Axios (พร้อม Idempotency Interceptor)
+- **Authentication:** NextAuth.js (รองรับ JWT)
+- **File Upload:** Custom Hook + Drag & Drop
+- **Testing:**
+  - **Unit/Integration:** Vitest + React Testing Library
+  - **E2E:** Playwright
+  - **Mocking:** MSW (Mock Service Worker)
+- **Development:**
+  - **Package Manager:** pnpm
+  - **Linting:** ESLint + Prettier
+  - **Type Checking:** TypeScript Strict Mode
+
+### **โครงสร้างโปรเจกต์**
+
+```
+📁frontend
+├── .env.local
+├── .eslintrc.json
+├── .gitignore
+├── components.json
+├── middleware.ts
+├── next-env.d.ts
+├── next.config.mjs
+├── package.json
+├── pnpm-lock.yaml
+├── postcss.config.mjs
+├── README.md
+├── tailwind.config.ts
+├── tsconfig.json
+├── 📁app
+│   ├── 📁(auth)
+│   │   └── 📁login
+│   │   │   └── page.tsx
+│   │   └── layout.tsx
+│   ├── 📁(dashboard)
+│   │   └── 📁admin
+│   │       ├──📁users
+│   │       │   └── page.tsx
+│   │       ├──📁correspondences
+│   │       │   └── 📁new
+│   │       │   │   └── page.tsx
+│   │       │   └── page.tsx
+│   │       ├──📁dashboard
+│   │       │   └── page.tsx
+│   │       ├──📁profile
+│   │       │   └── page.tsx
+│   │       ├──📁projects
+│   │       │   ├──📁new
+│   │       │   │   └── page.tsx
+│   │       │   └── page.tsx
+│   │       └── layout.tsx
+│   ├── 📁api
+│   │   └── 📁auth
+│   │       └── 📁[...nextauth]
+│   │           └── route.ts
+│   ├── 📁demo
+│   │   └── page.tsx
+│   ├── 📁fonts
+│   │   ├── GeistMonoVF.woff
+│   │   └── GeistVF.woff
+│   ├── favicon.ico
+│   ├── globals copy.css
+│   ├── globals.css
+│   ├── layout copy.tsx
+│   ├── layout.tsx
+│   └── page.tsx
+├── 📁components
+│   ├── 📁custom
+│   │   ├── file-upload-zone.tsx
+│   │   ├── responsive-data-table.tsx
+│   │   └── workflow-visualizer.tsx
+│   ├── 📁dashboard
+│   │   └── recent-activity.tsx
+│   ├── 📁forms
+│   │   └── file-upload.tsx
+│   ├── 📁layout
+│   │   ├── dashboard-shell.tsx
+│   │   ├── navbar.tsx
+│   │   ├── sidebar.tsx
+│   │   └── user-nav.tsx
+│   ├── 📁tables
+│   └── 📁ui
+│       ├── avatar.tsx
+│       ├── badge.tsx
+│       ├── button.tsx
+│       ├── calendar.tsx
+│       ├── card.tsx
+│       ├── checkbox.tsx
+│       ├── dropdown-menu.tsx
+│       ├── input.tsx
+│       ├── label.tsx
+│       ├── popover.tsx
+│       ├── progress.tsx
+│       ├── scroll-area.tsx
+│       ├── select.tsx
+│       ├── switch.tsx
+│       ├── table.tsx
+│       ├── tabs.tsx
+│       └── textarea.tsx
+├── 📁config
+│   └── menu.ts
+├── 📁lib
+│   ├── 📁api
+│   │   └── client.ts
+│   ├── 📁auth
+│   ├── 📁hooks
+│   ├── 📁services
+│   │   ├── circulation.service.ts
+│   │   ├── contract-drawing.service.ts
+│   │   ├── correspondence.service.ts
+│   │   ├── index.ts
+│   │   ├── json-schema.service.ts
+│   │   ├── master-data.service.ts
+│   │   ├── monitoring.service.ts
+│   │   ├── notification.service.ts
+│   │   ├── project.service.ts
+│   │   ├── rfa.service.ts
+│   │   ├── search.service.ts
+│   │   ├── shop-drawing.service.ts
+│   │   ├── transmittal.service.ts
+│   │   ├── user.service.ts
+│   │   └── workflow-engine.service.ts
+│   ├── 📁stores
+│   │   ├── draft-store.ts
+│   │   └── ui-store.ts
+│   ├── auth.ts
+│   └── utils.ts
+├── 📁providers
+│   ├── query-provider.tsx
+│   └── session-provider.tsx
+├── 📁public
+├── 📁styles
+└── 📁types
+    └── 📁dto
+        └── next-auth.d.ts
+        ├── 📁circulation
+        │   ├── create-circulation.dto.ts
+        │   ├── search-circulation.dto.ts
+        │   └── update-circulation-routing.dto.ts
+        ├── 📁correspondence
+        │   ├── add-reference.dto.ts
+        │   ├── create-correspondence.dto.ts
+        │   ├── search-correspondence.dto.ts
+        │   ├── submit-correspondence.dto.ts
+        │   └── workflow-action.dto.ts
+        ├── 📁drawing
+        │   ├── contract-drawing.dto.ts
+        │   └── shop-drawing.dto.ts
+        ├── 📁json-schema
+        │   └── json-schema.dto.ts
+        ├── 📁master
+        │   ├── discipline.dto.ts
+        │   ├── number-format.dto.ts
+        │   ├── sub-type.dto.ts
+        │   └── tag.dto.ts
+        ├── 📁monitoring
+        │   └── set-maintenance.dto.ts
+        ├── 📁notification
+        │   └── notification.dto.ts
+        ├── 📁project
+        │   └── project.dto.ts
+        ├── 📁rfa
+        │   └── rfa.dto.ts
+        ├── 📁search
+        │   └── search-query.dto.ts
+        ├── 📁transmittal
+        │   └── transmittal.dto.ts
+        ├── 📁user
+        │   └── user.dto.ts
+        └── 📁workflow-engine
+            └── workflow-engine.dto.ts
+```
+
+---
+
+## 🗓️ **แผนการพัฒนาแบบ Phase-Based**
+
+### **Phase 0: Foundation & Configuration (สัปดาห์ที่ 1)**
+
+**Milestone:** โครงสร้างพื้นฐานพร้อม รองรับ Development Workflow ที่มีประสิทธิภาพ
+
+### **Phase 0: Tasks**
+
+- **[ ] F0.1 Project Setup & Tooling**
+
+  - [ ] Initialize Next.js 14+ project with TypeScript
+  - [ ] Configure pnpm workspace
+  - [ ] Setup ESLint, Prettier, and pre-commit hooks
+  - [ ] Configure Tailwind CSS with PostCSS
+  - [ ] Setup shadcn/ui components
+  - [ ] Configure absolute imports and path aliases
+  - [ ] **Deliverable:** Development environment ready
+  - [ ] **Dependencies:** None
+
+- **[ ] F0.2 Design System & UI Components**
+
+  - [ ] Setup color palette and design tokens
+  - [ ] Create responsive design breakpoints
+  - [ ] Implement core shadcn/ui components:
+    - [ ] Button, Input, Label, Form
+    - [ ] Card, Table, Badge
+    - [ ] Dialog, Dropdown, Select
+    - [ ] Tabs, Accordion
+  - [ ] Create custom design system components:
+    - [ ] DataTable (responsive)
+    - [ ] FileUpload **zone**
+    - [ ] Workflow visualization
+  - [ ] **Deliverable:** Consistent UI component library
+  - [ ] **Dependencies:** F0.1
+
+- **[ ] F0.3 API Client & Authentication**
+
+  - [ ] Setup Axios client with interceptors:
+    - [ ] Idempotency-Key header injection
+    - [ ] Authentication token management
+    - [ ] Error handling and retry logic
+  - [ ] Configure NextAuth.js for JWT authentication
+  - [ ] Create auth hooks (useAuth, usePermissions)
+  - [ ] Setup API route handlers for auth callbacks
+  - [ ] **Security:** Implement secure token storage
+  - [ ] **Deliverable:** Secure API communication layer
+  - [ ] **Dependencies:** F0.1
+
+- **[ ] F0.4 State Management Setup**
+  - [ ] Configure TanStack Query for server state:
+    - [ ] Query client setup
+    - [ ] Default configurations
+    - [ ] Error boundaries
+  - [ ] Create Zustand stores:
+    - [ ] Auth store (user, permissions)
+    - [ ] UI store (theme, sidebar state)
+    - [ ] Draft store (form auto-save)
+  - [ ] Setup React Hook Form with Zod integration
+  - [ ] Create form validation schemas
+  - [ ] **Deliverable:** Robust state management system
+  - [ ] **Dependencies:** F0.1, F0.3
+
+### **Phase 0: Testing - Foundation**
+
+#### **F0.T1 Component Test Suite**
+
+- [ ] **Unit Tests:** Core UI components (Button, Input, Card)
+- [ ] **Integration Tests:** Form validation, API client interceptors
+- [ ] **Visual Tests:** Component styling and responsive behavior
+
+#### **F0.T2 Authentication Test Suite**
+
+- [ ] **Unit Tests:** Auth hooks, token management
+- [ ] **Integration Tests:** Login/logout flow, permission checks
+- [ ] **Security Tests:** Token security, API authentication
+
+---
+
+### **Phase 1: Core Application Structure (สัปดาห์ที่ 2)**
+
+**Milestone:** Layout หลักพร้อมใช้งาน การนำทางและ Authentication ทำงานได้
+
+### **Phase 1: Tasks**
+
+- **[ ] F1.1 Main Layout & Navigation**
+
+  - [ ] Create App Shell layout:
+    - [ ] Navbar with user menu and notifications
+    - [ ] Collapsible sidebar with navigation
+    - [ ] Main content area with responsive design
+  - [ ] Implement navigation menu structure:
+    - [ ] Dashboard, Correspondences, RFAs, Drawings, etc.
+    - [ ] Dynamic menu based on user permissions
+  - [ ] Create breadcrumb navigation component
+  - [ ] Implement mobile-responsive sidebar (drawer)
+  - [ ] Maintenance Mode Integration:
+    - [ ] Implement a Global Middleware/Wrapper ที่ตรวจสอบสถานะ Maintenance Mode ผ่าน API/Service ก่อนการ Render หน้า หากสถานะเป็น true ให้ Redirect ผู้ใช้ (ยกเว้น Admin) ไปยังหน้า /maintenance ทันที เพื่อให้สอดคล้องกับ Logic ของ Backend.
+  - [ ] **Accessibility:** Ensure keyboard navigation and screen reader support
+  - [ ] **Deliverable:** Fully functional application layout
+  - [ ] **Dependencies:** F0.2, F0.3
+
+- **[ ] F1.2 Authentication Pages**
+
+  - [ ] Create login page with form validation
+  - [ ] Implement forgot password flow
+  - [ ] Create registration page (admin-only)
+  - [ ] Setup protected route middleware
+  - [ ] Implement route-based permission checks
+  - [ ] **Security:** Rate limiting on auth attempts, secure password requirements
+  - [ ] **Deliverable:** Complete authentication flow
+  - [ ] **Dependencies:** F0.3, F1.1
+
+- **[ ] F1.3 Dashboard & Landing**
+
+  - [ ] Create public landing page for non-authenticated users
+  - [ ] Implement main dashboard with:
+    - [ ] KPI cards (document counts, pending tasks)
+    - [ ] "My Tasks" table from v_user_tasks
+    - [ ] Recent activity feed
+    - [ ] Security metrics display
+  - [ ] Create dashboard widgets system
+  - [ ] Implement data fetching with TanStack Query
+  - [ ] **Performance:** Optimize dashboard data loading
+  - [ ] **Deliverable:** Functional dashboard with real data
+  - [ ] **Dependencies:** F0.4, F1.1
+
+- **[ ] F1.4 Responsive Design System**
+  - [ ] Implement mobile-first responsive design
+  - [ ] Create card view components for mobile tables
+  - [ ] Setup touch-friendly interactions
+  - [ ] Optimize images and assets for mobile
+  - [ ] Test across multiple device sizes
+  - [ ] **UX:** Ensure seamless mobile experience
+  - [ ] **Deliverable:** Fully responsive application
+  - [ ] **Dependencies:** F0.2, F1.1
+
+### **Phase 1: Testing - Core Structure**
+
+- **[ ] F1.T1 Layout Test Suite**
+
+- [ ] **Unit Tests:** Navigation components, layout responsiveness
+- [ ] **Integration Tests:** Route protection, permission-based navigation
+- [ ] **E2E Tests:** Complete user navigation flow
+
+- **[ ] F1.T2 Dashboard Test Suite**
+
+- [ ] **Unit Tests:** Dashboard components, data formatting
+- [ ] **Integration Tests:** Data fetching and display, real-time updates
+- [ ] **Performance Tests:** Dashboard loading performance
+
+---
+
+### **Phase 2: User Management & Security (สัปดาห์ที่ 3)**
+
+**Milestone:** การจัดการผู้ใช้และสิทธิ์แบบสมบูรณ์
+
+### **Phase 2: Tasks**
+
+- **[ ] F2.1 User Profile & Settings**
+
+  - [ ] Create user profile page:
+    - [ ] Personal information display/edit
+    - [ ] Password change functionality
+    - [ ] Notification preferences
+  - [ ] Implement profile picture upload
+  - [ ] Create user settings page
+  - [ ] **Security:** Secure password change with current password verification
+  - [ ] **Deliverable:** Complete user self-service management
+  - [ ] **Dependencies:** F1.1, F0.4
+
+- **[ ] F2.2 Admin Panel - User Management**
+
+  - [ ] Create user list with search and filters
+  - [ ] Implement user creation form
+  - [ ] Create user edit interface
+  - [ ] Implement bulk user operations
+  - [ ] Add user activity tracking display
+  - [ ] **Security:** Admin-only access enforcement
+  - [ ] **Deliverable:** Comprehensive user management interface
+  - [ ] **Dependencies:** F1.1, F2.1
+
+- **[ ] F2.3 Admin Panel - Role Management**
+
+  - [ ] Create role list and management interface
+  - [ ] Implement role creation and editing
+  - [ ] Create permission assignment interface
+  - [ ] Implement role-based access control visualization
+  - [ ] Add role usage statistics
+  - [ ] **Security:** Permission hierarchy enforcement
+  - [ ] **Deliverable:** Complete RBAC management system
+  - [ ] **Dependencies:** F2.2
+
+- **[ ] F2.4 Permission Integration**
+  - [ ] Implement CASL ability integration
+  - [ ] Create permission-based UI components:
+    - [ ] ProtectedButton, ProtectedLink
+    - [ ] Conditional rendering based on permissions
+  - [ ] Setup real-time permission updates
+  - [ ] Implement permission debugging tools
+  - [ ] **Security:** Frontend-backend permission consistency
+  - [ ] **Deliverable:** Seamless permission enforcement throughout app
+  - [ ] **Dependencies:** F0.3, F2.3
+
+### **Phase 2: User Management & Admin Panel (สัปดาห์ที่ 3)**
+
+- **[ ] F2.5 Admin Panel - Master Data Management (Req 6B)** (New)
+  - [ ] Create "Disciplines Management" page (CRUD)
+  - [ ] Create "Sub-Types Management" page (CRUD + Mapping Number)
+  - [ ] Create "Numbering Format" configuration page (Template Editor)
+  - [ ] **Deliverable:** UI for Admin to configure system master data
+  - [ ] **Dependencies:** F2.1
+
+### **Phase 2: Testing - User Management**
+
+- **[ ] F2.T1 User Management Test Suite**
+
+- [ ] **Unit Tests:** User CRUD operations, form validation
+- [ ] **Integration Tests:** User-role assignment, permission propagation
+- [ ] **Security Tests:** Permission escalation attempts, admin access control
+
+- **[ ] F2.T2 RBAC Test Suite**
+
+- [ ] **Unit Tests:** Permission checks, role validation
+- [ ] **Integration Tests:** Multi-level permission enforcement, UI element protection
+- [ ] **E2E Tests:** Complete role-based workflow testing
+
+---
+
+### **Phase 3: Project Structure (สัปดาห์ที่ 4)**
+
+**Milestone:** การจัดการโครงสร้างโปรเจกต์และองค์กร
+
+### **Phase 3: Tasks**
+
+- **[ ] F3.1 Project Management UI**
+
+  - [ ] Create project list with search and filters
+  - [ ] Implement project creation and editing
+  - [ ] Create project detail view
+  - [ ] Implement project dashboard with statistics
+  - [ ] Add project member management
+  - [ ] **UX:** Intuitive project navigation and management
+  - [ ] **Deliverable:** Complete project management interface
+  - [ ] **Dependencies:** F1.1, F2.4
+
+- **[ ] F3.2 Organization Management**
+
+  - [ ] Create organization list and management
+  - [ ] Implement organization creation and editing
+  - [ ] Create organization detail view
+  - [ ] Add organization user management
+  - [ ] Implement organization hierarchy visualization
+  - [ ] **Business Logic:** Proper organization-project relationships
+  - [ ] **Deliverable:** Comprehensive organization management
+  - [ ] **Dependencies:** F3.1
+
+- **[ ] F3.3 Contract Management**
+  - [ ] Create contract list within projects
+  - [ ] Implement contract creation and editing
+  - [ ] Create contract detail view
+  - [ ] Add contract party management
+  - [ ] Implement contract document associations
+  - [ ] **Business Logic:** Contract-project-organization relationships
+  - [ ] **Deliverable:** Complete contract management system
+  - [ ] **Dependencies:** F3.1, F3.2
+
+### **Phase 3: Testing - Project Structure**
+
+- **[ ] F3.T1 Project Management Test Suite**
+  - [ ] **Unit Tests:** Project CRUD operations, validation
+  - [ ] **Integration Tests:** Project-organization relationships, member management
+  - [ ] **Business Logic Tests:** Project hierarchy, access control
+
+---
+
+### **Phase 4: Correspondence System (สัปดาห์ที่ 5-6)**
+
+**Milestone:** ระบบจัดการเอกสารโต้ตอบแบบสมบูรณ์
+
+### **Phase 4: Tasks**
+
+- **[ ] F4.1 Correspondence List & Search**
+
+  - [ ] Create correspondence list with advanced filtering:
+    - [ ] Filter by type, status, project, organization
+    - [ ] Search by title, document number, content
+    - [ ] Date range filtering
+  - [ ] Implement responsive data table:
+    - [ ] Desktop: Full table view
+    - [ ] Mobile: Card view conversion
+  - [ ] Add bulk operations (export, status change)
+  - [ ] Implement real-time updates
+  - [ ] **Performance:** Virtual scrolling for large datasets
+  - [ ] **Deliverable:** High-performance correspondence listing
+  - [ ] **Dependencies:** F1.1, F3.1
+
+- **[ ] F4.2 Correspondence Creation Form**
+
+  - [ ] Create dynamic form generator based on JSON schema
+  - [ ] Implement form with multiple sections:
+    - [ ] Basic information (type, title, recipients)
+    - [ ] Content and details (JSON schema-based)
+    - [ ] File attachments
+    - [ ] Routing template selection
+  - [ ] [New] Implement "Originator Selector" component: Dropdown สำหรับเลือกองค์กรผู้ส่ง (แสดงเฉพาะเมื่อผู้ใช้มีสิทธิ์ system.manage_all หรือสิทธิ์พิเศษ) หากไม่เลือกให้ใช้ Organization ของผู้ใช้ตามปกติ
+  - [ ] **[New] Discipline Selector:** Add Dropdown for Disciplines (Dependent on Contract/Project)
+  - [ ] **[New] Sub-Type Selector:** Add Dropdown for Sub-types (Dependent on Type)
+  - [ ] Logic: Show/Hide selectors based on Document Type configuration
+  - [ ] Add draft auto-save functionality
+  - [ ] Implement form validation with Zod
+  - [ ] **UX:** Intuitive form with progress indication
+  - [ ] **Deliverable:** Flexible correspondence creation interface
+  - [ ] **Dependencies:** F0.4, F4.1
+
+- **[ ] F4.3 Correspondence Detail View**
+
+  - [ ] Create comprehensive detail page:
+    - [ ] Document header with metadata
+    - [ ] Content display based on type
+    - [ ] Revision history
+    - [ ] Related documents
+    - [ ] Workflow status visualization
+  - [ ] Implement document actions:
+    - [ ] Edit, withdraw, cancel (with permissions)
+    - [ ] Download, print
+    - [ ] Create related documents
+  - [ ] Add comments and activity timeline
+  - [ ] **UX:** Clean, readable document presentation
+  - [ ] **Deliverable:** Complete document detail experience
+  - [ ] **Dependencies:** F4.1, F4.2
+
+- **[ ] F4.4 File Upload Integration**
+  - [ ] Create drag-and-drop file upload component
+  - [ ] Implement file type validation and preview
+  - [ ] Add virus scan status indication
+  - [ ] Create file management interface:
+    - [ ] Mark files as main/supporting documents
+    - [ ] Reorder and manage attachments
+    - [ ] File security status display
+  - [ ] Implement two-phase upload progress
+  - [ ] **Security:** File type restrictions, size limits, virus scan integration
+  - [ ] **Deliverable:** Secure and user-friendly file management
+  - [ ] **Dependencies:** F0.2, F4.2
+
+### **Phase 4: Testing - Correspondence System**
+
+- **[ ] F4.T1 Correspondence Test Suite**
+
+  - [ ] **Unit Tests:** Form validation, file upload components
+  - [ ] **Integration Tests:** Complete document lifecycle, file attachment flow
+  - [ ] **E2E Tests:** End-to-end correspondence creation and management
+
+- **[ ] F4.T2 File Upload Test Suite**
+  - [ ] **Unit Tests:** File validation, type checking
+  - [ ] **Integration Tests:** Two-phase upload process, virus scan integration
+  - [ ] **Security Tests:** Malicious file upload attempts, security feedback
+
+---
+
+### **Phase 5: Workflow Management (สัปดาห์ที่ 7)**
+
+**Milestone:** ระบบ Visualization และจัดการ Workflow
+
+### **Phase 5: Tasks**
+
+- **[ ] F5.1 Workflow Visualization Component**
+
+  - [ ] Create horizontal workflow progress visualization
+  - [ ] Implement step status indicators (pending, active, completed, skipped)
+  - [ ] Add due date and assignee information
+  - [ ] Create interactive workflow diagram
+  - [ ] Implement workflow history timeline
+  - [ ] **UX:** Clear visual representation of complex workflows
+  - [ ] **Deliverable:** Intuitive workflow visualization
+  - [ ] **Dependencies:** F4.3
+
+- **[ ] F5.2 Routing Template Management**
+
+  - [ ] Create routing template list and editor
+  - [ ] Implement drag-and-drop step configuration
+  - [ ] Add step configuration (purpose, duration, assignee rules)
+  - [ ] Create template preview functionality
+  - [ ] Implement template versioning
+  - [ ] **Business Logic:** Proper step sequencing and validation
+  - [ ] **Deliverable:** Comprehensive routing template management
+  - [ ] **Dependencies:** F3.1, F4.2
+
+- **[ ] F5.3 Workflow Step Actions**
+
+  - [ ] Create step action interface:
+    - [ ] Approve, reject, request changes
+    - [ ] Add comments and attachments
+    - [ ] Forward to other users
+  - [ ] Implement bulk step actions
+  - [ ] Add action confirmation with reason required
+  - [ ] Create step delegation functionality
+  - [ ] **UX:** Streamlined step completion process
+  - [ ] **Deliverable:** Efficient workflow step management
+  - [ ] **Dependencies:** F5.1
+
+- **[ ] F5.4 Real-time Status Updates**
+  - [ ] Implement WebSocket connections for real-time updates
+  - [ ] Create status change notifications
+  - [ ] Add auto-refresh for workflow states
+  - [ ] Implement optimistic updates for better UX
+  - [ ] Create update history and audit trail
+  - [ ] **Performance:** Efficient real-time data synchronization
+  - [ ] **Deliverable:** Real-time workflow monitoring
+  - [ ] **Dependencies:** F5.1, F9.2
+
+### **Phase 5: Testing - Workflow Management**
+
+- **[ ] F5.T1 Workflow Test Suite**
+  - [ ] **Unit Tests:** Workflow visualization, step status logic
+  - [ ] **Integration Tests:** Complete workflow execution, real-time updates
+  - [ ] **E2E Tests:** Multi-step workflow with different user roles
+
+---
+
+### **Phase 6: Drawing System (สัปดาห์ที่ 8)**
+
+**Milestone:** ระบบจัดการแบบแปลนแบบสมบูรณ์
+
+### **Phase 6: Tasks**
+
+- **[ ] F6.1 Contract Drawings Management**
+
+  - [ ] Create contract drawing list with categorization
+  - [ ] Implement drawing upload and metadata management
+  - [ ] Create drawing preview and viewer
+  - [ ] Add drawing version control
+  - [ ] Implement drawing search and filtering
+  - [ ] **UX:** Efficient drawing navigation and access
+  - [ ] **Deliverable:** Comprehensive contract drawing management
+  - [ ] **Dependencies:** F3.1, F4.4
+
+- **[ ] F6.2 Shop Drawings Management**
+
+  - [ ] Create shop drawing list with revision tracking
+  - [ ] Implement shop drawing creation and revision system
+  - [ ] Create drawing comparison interface
+  - [ ] Add drawing approval status tracking
+  - [ ] Implement bulk drawing operations
+  - [ ] **Business Logic:** Proper revision control and approval workflows
+  - [ ] **Deliverable:** Complete shop drawing management system
+  - [ ] **Dependencies:** F6.1
+
+- **[ ] F6.3 Drawing Revision System**
+
+  - [ ] Create revision history interface
+  - [ ] Implement revision comparison functionality
+  - [ ] Add revision notes and change tracking
+  - [ ] Create revision approval workflow
+  - [ ] Implement revision rollback capability
+  - [ ] **UX:** Clear visualization of changes between revisions
+  - [ ] **Deliverable:** Robust drawing revision control
+  - [ ] **Dependencies:** F6.2
+
+- **[ ] F6.4 Drawing References**
+  - [ ] Create drawing reference management
+  - [ ] Implement cross-drawing references
+  - [ ] Add reference validation and integrity checks
+  - [ ] Create reference visualization
+  - [ ] Implement reference impact analysis
+  - [ ] **Business Logic:** Maintain reference integrity during changes
+  - [ ] **Deliverable:** Comprehensive drawing reference system
+  - [ ] **Dependencies:** F6.2, F6.3
+
+### **Phase 6: Testing - Drawing System**
+
+- **[ ] F6.T1 Drawing Management Test Suite**
+  - [ ] **Unit Tests:** Drawing CRUD operations, revision logic
+  - [ ] **Integration Tests:** Drawing approval workflows, reference management
+  - [ ] **E2E Tests:** Complete drawing lifecycle with revisions
+
+---
+
+### **Phase 7: RFA System (สัปดาห์ที่ 9-10)**
+
+**Milestone:** ระบบขออนุมัติแบบสมบูรณ์พร้อม Dynamic Forms
+
+### **Phase 7: Tasks**
+
+- **[ ] F7.1 RFA List & Dashboard**
+
+  - [ ] Create RFA dashboard with status overview
+  - [ ] Implement advanced RFA filtering and search
+  - [ ] Create RFA calendar view for deadlines
+  - [ ] Add RFA statistics and reporting
+  - [ ] Implement RFA bulk operations
+  - [ ] **UX:** Comprehensive RFA overview and management
+  - [ ] **Deliverable:** Complete RFA dashboard and listing
+  - [ ] **Dependencies:** F4.1, F5.1
+
+- **[ ] F7.2 RFA Creation with Dynamic Forms**
+
+  - [ ] Create RFA type-specific form generator
+  - [ ] Implement dynamic form fields based on RFA type:
+    - [ ] RFA_DWG: Shop drawing selection
+    - [ ] RFA_DOC: Document specifications
+    - [ ] RFA_MES: Method statement details
+    - [ ] RFA_MAT: Material specifications
+  - [ ] Add form validation with JSON schema
+  - [ ] Implement form data persistence and recovery
+  - [ ] **UX:** Intuitive form experience for complex RFA types
+  - [ ] Dynamic Form & Schema Validation: สร้าง Component Dynamic Form Generator ที่:
+    - [ ] Fetch Schema: ดึงโครงสร้าง JSON Schema ที่ถูกต้องตาม rfa_type จาก Backend (ตาราง json_schemas ที่สร้างใหม่) ก่อนการ Render Form.
+    - [ ] Client-side Validation: Implement AJV (Another JSON Schema Validator) หรือไลบรารีที่เทียบเท่า เพื่อทำ Client-side Validation บนข้อมูล JSON ก่อนส่ง Submit.
+    - [ ] Implement dynamic form fields based on RFA type: RFA_DWG, RFA_DOC, RFA_MES, RFA_MAT.
+    - [ ] Add form data persistence and recovery.
+  - [ ] **[New] Discipline & Sub-Type Integration:** Ensure RFA forms capture these fields correctly for numbering generation.
+  - [ ] **Deliverable:** Flexible RFA creation system
+  - [ ] **Dependencies:** F4.2, F6.2
+
+- **[ ] F7.3 RFA Workflow Integration**
+
+  - [ ] Integrate RFA with unified workflow engine
+  - [ ] Create RFA-specific workflow steps and actions
+  - [ ] Implement RFA approval interface
+  - [ ] Add RFA workflow history and tracking
+  - [ ] Create RFA workflow templates
+  - [ ] **Business Logic:** Proper RFA approval sequencing and validation
+  - [ ] **Deliverable:** Seamless RFA workflow integration
+  - [ ] **Dependencies:** F5.1, F7.2
+
+- **[ ] F7.4 RFA Approval Interface**
+  - [ ] Create RFA review and approval interface
+  - [ ] Implement side-by-side document comparison
+  - [ ] Add approval comments and attachments
+  - [ ] Create conditional approval workflows
+  - [ ] Implement approval delegation and escalation
+  - [ ] **UX:** Efficient approval process for technical reviews
+  - [ ] **Deliverable:** Comprehensive RFA approval system
+  - [ ] **Dependencies:** F7.1, F7.3
+
+### **Phase 7: Testing - RFA System**
+
+- **[ ] F7.T1 RFA Test Suite**
+  - [ ] **Unit Tests:** RFA form generation, validation logic
+  - [ ] **Integration Tests:** Complete RFA lifecycle, workflow integration
+  - [ ] **E2E Tests:** Multi-type RFA creation and approval workflows
+
+---
+
+### **Phase 8: Internal Workflows (สัปดาห์ที่ 11)**
+
+**Milestone:** ระบบใบเวียนและการจัดการงานภายใน
+
+### **Phase 8: Tasks**
+
+- **[ ] F8.1 Circulation Management**
+
+  - [ ] Create circulation list and management interface
+  - [ ] Implement circulation creation from correspondence
+  - [ ] Create circulation template management
+  - [ ] Add circulation status tracking
+  - [ ] Implement circulation search and filtering
+  - [ ] **Business Logic:** Proper circulation-correspondence relationships
+  - [ ] **Deliverable:** Comprehensive circulation management
+  - [ ] **Dependencies:** F4.1, F5.2
+
+- **[ ] F8.2 Task Assignment Interface**
+
+  - [ ] Create task assignment interface with user selection
+  - [ ] Implement task priority and deadline setting
+  - [ ] Add task dependency management
+  - [ ] Create task progress tracking
+  - [ ] Implement task reassignment and delegation
+  - [ ] **UX:** Intuitive task management and assignment
+  - [ ] **Deliverable:** Efficient task assignment system
+  - [ ] **Dependencies:** F8.1
+
+- **[ ] F8.3 Internal Approval Flows**
+  - [ ] Create internal approval workflow interface
+  - [ ] Implement multi-level approval processes
+  - [ ] Add approval chain visualization
+  - [ ] Create approval delegation system
+  - [ ] Implement approval deadline management
+  - [ ] **Business Logic:** Proper approval hierarchy and escalation
+  - [ ] **Deliverable:** Robust internal approval system
+  - [ ] **Dependencies:** F8.1, F8.2
+
+### **Phase 8: Testing - Internal Workflows**
+
+- **[ ] F8.T1 Circulation Test Suite**
+  - [ ] **Unit Tests:** Circulation creation, task assignment logic
+  - [ ] **Integration Tests:** Complete circulation workflow, internal approvals
+  - [ ] **E2E Tests:** End-to-end circulation with task completion
+
+---
+
+### **Phase 9: Advanced Features (สัปดาห์ที่ 12)**
+
+**Milestone:** ฟีเจอร์ขั้นสูงและการปรับปรุงประสบการณ์ผู้ใช้
+
+### **Phase 9: Tasks**
+
+- **[ ] F9.1 Advanced Search Interface**
+
+  - [ ] Create unified search interface across all document types
+  - [ ] Implement faceted search with multiple filters
+  - [ ] Add search result highlighting and relevance scoring
+  - [ ] Create saved search and search templates
+  - [ ] Implement search result export functionality
+  - [ ] **Performance:** Efficient search with large datasets
+  - [ ] **Deliverable:** Powerful cross-document search system
+  - [ ] **Dependencies:** F4.1, F7.1
+
+- **[ ] F9.2 Notification System**
+
+  - [ ] Create notification center with real-time updates
+  - [ ] Implement notification preferences management
+  - [ ] Add notification grouping and digest views
+  - [ ] Create actionable notifications with quick actions
+  - [ ] Implement notification read/unread status
+  - [ ] **UX:** Non-intrusive but effective notification delivery
+  - [ ] **Deliverable:** Comprehensive notification management
+  - [ ] **Dependencies:** F1.3, F5.4
+
+- **[ ] F9.3 Reporting & Analytics**
+
+  - [ ] Create reporting dashboard with customizable widgets
+  - [ ] Implement data visualization components (charts, graphs)
+  - [ ] Add report scheduling and export
+  - [ ] Create ad-hoc reporting interface
+  - [ ] Implement performance metrics tracking
+  - [ ] **Business Logic:** Accurate data aggregation and reporting
+  - [ ] **Deliverable:** Powerful reporting and analytics system
+  - [ ] **Dependencies:** F1.3, F7.1
+
+- **[ ] F9.4 Mobile Optimization**
+  - [ ] Implement touch-optimized interactions
+  - [ ] Create mobile-specific navigation patterns
+  - [ ] Add offline capability for critical functions
+  - [ ] Optimize images and assets for mobile networks
+  - [ ] Implement mobile-specific performance optimizations
+  - [ ] **UX:** Seamless mobile experience comparable to desktop
+  - [ ] **Deliverable:** Fully optimized mobile application
+  - [ ] **Dependencies:** F1.4
+
+### **Phase 9: Testing - Advanced Features**
+
+- **[ ] F9.T1 Advanced Features Test Suite**
+  - [ ] **Unit Tests:** Search algorithms, notification logic
+  - [ ] **Integration Tests:** Cross-module search, real-time notifications
+  - [ ] **Performance Tests:** Search performance, mobile responsiveness
+
+---
+
+### **Phase 10: Testing & Polish (สัปดาห์ที่ 13-14)**
+
+**Milestone:** แอปพลิเคชันที่ผ่านการทดสอบและปรับปรุงอย่างสมบูรณ์
+
+### **Phase 10: Tasks**
+
+- **[ ] F10.1 Comprehensive Testing**
+
+  - [ ] Idempotency Testing: เพิ่มการทดสอบเฉพาะสำหรับ Axios Interceptor เพื่อจำลองการส่ง Request POST/PUT/DELETE ที่มี Idempotency-Key ซ้ำไปยัง Mock API (MSW) เพื่อยืนยันว่า Client-side ไม่ส่ง Key ซ้ำในการทำงานปกติ และไม่เกิด Side Effect จากการ Replay Attack.
+  - [ ] Write unit tests for all components and utilities
+  - [ ] Create integration tests for critical user flows
+  - [ ] Implement E2E tests for complete workflows
+  - [ ] Perform cross-browser compatibility testing
+  - [ ] Conduct accessibility testing (WCAG 2.1 AA)
+  - [ ] **Quality:** 80%+ test coverage, all critical paths tested
+  - [ ] **Deliverable:** Fully tested application
+  - [ ] **Dependencies:** All previous phases
+
+- **[ ] F10.2 Performance Optimization**
+
+  - [ ] Implement code splitting and lazy loading
+  - [ ] Optimize bundle size and asset delivery
+  - [ ] Add performance monitoring and metrics
+  - [ ] Implement caching strategies for static assets
+  - [ ] Optimize API call patterns and reduce over-fetching
+  - [ ] **Performance:** Core Web Vitals targets met
+  - [ ] **Deliverable:** High-performance application
+  - [ ] **Dependencies:** F10.1
+
+- **[ ] F10.3 Security Hardening**
+
+  - [ ] Conduct security audit and penetration testing
+  - [ ] Implement Content Security Policy (CSP)
+  - [ ] Add security headers and protections
+  - [ ] Conduct dependency vulnerability scanning
+  - [ ] Implement secure coding practices review
+  - [ ] **Security:** No critical security vulnerabilities
+  - [ ] **Deliverable:** Security-hardened application
+  - [ ] **Dependencies:** F10.1
+
+- **[ ] F10.4 Documentation**
+  - [ ] Create user documentation and guides
+  - [ ] Write technical documentation for developers
+  - [ ] Create API integration documentation
+  - [ ] Add inline code documentation
+  - [ ] Create deployment and maintenance guides
+  - [ ] **Quality:** Comprehensive and up-to-date documentation
+  - [ ] **Deliverable:** Complete documentation suite
+  - [ ] **Dependencies:** F10.1
+
+### **Phase 10: Testing - Final Validation**
+
+- **[ ] F10.T1 Final Test Suite**
+  - [ ] **Performance Tests:** Load testing, stress testing
+  - [ ] **Security Tests:** Final security audit, vulnerability assessment
+  - [ ] **User Acceptance Tests:** Real user testing, feedback incorporation
+  - [ ] **Compatibility Tests:** Cross-browser, cross-device testing
+
+---
+
+## 📊 **สรุป Timeline**
+
+| Phase    | ระยะเวลา       | จำนวนงาน     | Output หลัก                          |
+| -------- | -------------- | ------------ | ------------------------------------ |
+| Phase 0  | 1 สัปดาห์      | 4            | Foundation & Tooling Ready           |
+| Phase 1  | 1 สัปดาห์      | 4            | Core Application Structure           |
+| Phase 2  | 1 สัปดาห์      | 4            | User Management & Security           |
+| Phase 3  | 1 สัปดาห์      | 3            | Project Structure Management         |
+| Phase 4  | 2 สัปดาห์      | 4            | Correspondence System                |
+| Phase 5  | 1 สัปดาห์      | 4            | Workflow Management                  |
+| Phase 6  | 1 สัปดาห์      | 4            | Drawing System                       |
+| Phase 7  | 2 สัปดาห์      | 4            | RFA System (Dynamic Forms)           |
+| Phase 8  | 1 สัปดาห์      | 3            | Internal Workflows                   |
+| Phase 9  | 1 สัปดาห์      | 4            | Advanced Features                    |
+| Phase 10 | 2 สัปดาห์      | 4            | Testing & Polish (Idempotency Test)  |
+| **รวม**  | **14 สัปดาห์** | **39 Tasks** | **Production-Ready Frontend v1.4.2** |
+
+---
+
+## 🎯 **Critical Success Factors**
+
+1. **User Experience First:** ทุกฟีเจอร์ต้องออกแบบเพื่อประสบการณ์ผู้ใช้ที่ดี
+2. **Responsive Design:** รองรับการใช้งานบนอุปกรณ์ทุกรูปแบบ
+3. **Performance:** Core Web Vitals ต้องอยู่ในเกณฑ์ที่ดี
+4. **Accessibility:** ต้องเป็นไปตามมาตรฐาน WCAG 2.1 AA
+5. **Security:** ป้องกัน XSS, CSRF และความเสี่ยงด้านความปลอดภัยอื่นๆ
+6. **Offline Support:** รองรับการทำงานแบบ Offline เบื้องต้น
+7. **Real-time Updates:** การอัปเดตสถานะแบบ Real-time
+8. **Testing Coverage:** ครอบคลุมการทดสอบทุก Critical Path
+9. **Documentation:** เอกสารครบถ้วนสำหรับผู้ใช้และนักพัฒนา
+
+---
+
+## 📋 **Quality Assurance Checklist**
+
+### **ก่อน Production Deployment**
+
+- [ ] **Performance:** Core Web Vitals ผ่านเกณฑ์
+- [ ] **Accessibility:** WCAG 2.1 AA compliant
+- [ ] **Security:** Security audit ผ่าน
+- [ ] **Testing:** Test coverage ≥ 80%
+- [ ] **Browser Compatibility:** ทำงานได้บนเบราว์เซอร์หลัก
+- [ ] **Mobile Responsive:** ใช้งานได้ดีบนมือถือ
+- [ ] **Documentation:** เอกสารครบถ้วน
+- [ ] **User Acceptance:** ได้รับการยอมรับจากผู้ใช้
+
+---
+
+## 🚀 **ขั้นตอนถัดไป**
+
+1. **Approve แผนนี้** → ปรับแต่งตาม Feedback
+2. **Coordinate กับ Backend Team** → Sync API Specifications
+3. **เริ่มพัฒนา Phase 0** → Setup Foundation
+4. **Regular Sync** → ประสานงานกับ Backend ทุกสัปดาห์
+5. **User Testing** → ทดสอบกับผู้ใช้จริงระหว่างพัฒนา
+6. **Deploy to Production** → Week 15 (พร้อม Backend)
+
+## **Document Control:**
+
+- **Document:** Frontend Development Plan v1.4.5
+- **Version:** 1.4
+- **Date:** 2025-11-29
+- **Author:** NAP LCBP3-DMS & Gemini
+- **Status:** FINAL-Rev.05
+- **Classification:** Internal Technical Documentation
+- **Approved By:** Nattanin
+
+---
+
+`End of Frontend Development Plan v1.4.5`