251204:1700 Prepare to version 1.5.1

2025-12-04 16:50:09 +07:00
parent 05f8f4403a
commit dc8b80c5f9
34 changed files with 8518 additions and 3107 deletions
--- a/docs/3_Frontend_Plan_V1_5_1.md
+++ b/docs/3_Frontend_Plan_V1_5_1.md
@@ -0,0 +1,182 @@
+# 📋 **แผนการพัฒนา Frontend (Next.js) - LCBP3-DMS v1.5.1**
+
+**สถานะ:** DRAFT
+**วันที่:** 2025-12-04
+**อ้างอิง:** Requirements v1.5.1 & FullStackJS Guidelines v1.5.1
+**Classification:** Internal Technical Documentation
+
+---
+
+## 🎯 **ภาพรวมโครงการ (Project Overview)**
+
+พัฒนา Frontend สำหรับระบบบริหารจัดการเอกสารโครงการ (Document Management System) เวอร์ชัน 1.5.1 โดยเน้นการรองรับฟีเจอร์ใหม่ใน Backend v1.5.1 ได้แก่ **Unified Workflow Engine**, **Advanced Document Numbering**, และ **Enhanced Master Data Management** พร้อมทั้งปรับปรุง UX/UI ให้ทันสมัยและใช้งานง่าย
+
+---
+
+## 📐 **สถาปัตยกรรมระบบ (System Architecture)**
+
+### **Technology Stack**
+
+-   **Framework:** Next.js 14+ (App Router, React 18, TypeScript)
+-   **Styling:** Tailwind CSS + Shadcn/UI
+-   **State Management:**
+    -   **Server:** TanStack Query (React Query)
+    -   **Client:** Zustand
+    -   **Form:** React Hook Form + Zod
+-   **Workflow Visualization:** ReactFlow (สำหรับ Workflow Builder)
+-   **Editor:** Monaco Editor (สำหรับ DSL Editing)
+-   **Validation:** Zod + AJV (JSON Schema)
+
+### **โครงสร้างโมดูล (Module Structure)**
+
+```
+📁src
+├── 📁app
+│   ├── 📁(auth)          # Login, Forgot Password
+│   ├── 📁(dashboard)     # Main App Layout
+│   │   ├── 📁admin       # Admin Panel (Users, Master Data, Config)
+│   │   ├── 📁correspondences
+│   │   ├── 📁rfas
+│   │   ├── 📁drawings
+│   │   ├── 📁transmittals
+│   │   ├── 📁circulations
+│   │   └── 📁tasks
+│   └── 📁api             # NextAuth & Proxy
+├── 📁components
+│   ├── 📁admin           # Admin-specific components
+│   ├── 📁workflow        # Workflow Builder & Visualizer
+│   ├── 📁numbering       # Numbering Template Editor
+│   └── 📁ui              # Shadcn UI Components
+└── 📁lib
+    ├── 📁api             # API Clients
+    └── 📁stores          # Zustand Stores
+```
+
+---
+
+## 🗓️ **แผนการพัฒนาแบบ Phase-Based**
+
+### **Phase 1: Foundation & UI Components (Week 1)**
+
+**Goal:** เตรียมโครงสร้างโปรเจกต์และ Component พื้นฐาน
+
+#### **[ ] F1.1 Project Setup & Design System**
+-   **Tasks:**
+    -   [ ] Setup Next.js 14 + Tailwind + Shadcn/UI
+    -   [ ] Configure Axios with **Idempotency Interceptor**
+    -   [ ] Implement Base Layout (Sidebar, Navbar, Breadcrumbs)
+    -   [ ] Setup **TanStack Query** & **Zustand**
+
+#### **[ ] F1.2 Authentication UI**
+-   **Tasks:**
+    -   [ ] Login Page with Form Validation
+    -   [ ] Integrate NextAuth.js with Backend
+    -   [ ] Implement RBAC Guard (Protect Routes based on Permissions)
+
+---
+
+### **Phase 2: Admin & Master Data (Week 2-3)**
+
+**Goal:** ระบบจัดการผู้ใช้และข้อมูลหลัก (รองรับ v1.5.1 Requirements)
+
+#### **[ ] F2.1 User & Role Management**
+-   **Tasks:**
+    -   [ ] User List & CRUD (Admin only)
+    -   [ ] Role Assignment UI
+    -   [ ] Permission Matrix Viewer
+
+#### **[ ] F2.2 Enhanced Master Data UI**
+-   **Tasks:**
+    -   [ ] **Organization Management:** CRUD + Logo Upload
+    -   [ ] **Project & Contract Management:** CRUD + Relations
+    -   [ ] **[NEW] Discipline Management:** CRUD for `disciplines`
+    -   [ ] **[NEW] Sub-Type Management:** CRUD for `correspondence_sub_types`
+
+#### **[ ] F2.3 System Configuration**
+-   **Tasks:**
+    -   [ ] **[NEW] Document Numbering Config:**
+        -   Template Editor (Monaco/Visual)
+        -   Sequence Viewer
+    -   [ ] **[NEW] Workflow Configuration:**
+        -   Workflow List
+        -   DSL Editor (Monaco)
+        -   Visual Builder (ReactFlow)
+
+---
+
+### **Phase 3: Core Modules (Week 4-5)**
+
+**Goal:** โมดูลหลัก Correspondence และ RFA
+
+#### **[ ] F3.1 Correspondence Module**
+-   **Tasks:**
+    -   [ ] List View with Advanced Filters
+    -   [ ] **Create/Edit Form:**
+        -   Add **Discipline Selector** (Dynamic based on Contract)
+        -   Add **Sub-Type Selector** (Dynamic based on Type)
+        -   File Upload (Two-Phase)
+    -   [ ] Detail View with History & Comments
+
+#### **[ ] F3.2 RFA Module**
+-   **Tasks:**
+    -   [ ] RFA List & Dashboard
+    -   [ ] **Dynamic RFA Form:**
+        -   Fields change based on RFA Type (DWG, MAT, MES)
+        -   Item List Management
+    -   [ ] **Approval Interface:**
+        -   Approve/Reject/Comment Actions
+        -   Workflow Status Visualization
+
+---
+
+### **Phase 4: Advanced Modules (Week 6-7)**
+
+**Goal:** โมดูล Drawing, Transmittal และ Circulation
+
+#### **[ ] F4.1 Drawing Module**
+-   **Tasks:**
+    -   [ ] Shop Drawing & Contract Drawing Lists
+    -   [ ] Revision Management UI
+    -   [ ] Drawing Viewer (PDF/Image)
+
+#### **[ ] F4.2 Transmittal Module**
+-   **Tasks:**
+    -   [ ] Transmittal Creation Form (Select Documents to send)
+    -   [ ] Transmittal Letter Preview (PDF Generation)
+    -   [ ] Transmittal History
+
+#### **[ ] F4.3 Circulation Module**
+-   **Tasks:**
+    -   [ ] Circulation Sheet Creation (Select Assignees)
+    -   [ ] "My Tasks" Dashboard for Circulation
+    -   [ ] Completion & Tracking UI
+
+---
+
+### **Phase 5: Search & Dashboard (Week 8)**
+
+**Goal:** การค้นหาและหน้า Dashboard
+
+#### **[ ] F5.1 Advanced Search**
+-   **Tasks:**
+    -   [ ] Unified Search Interface (Elasticsearch)
+    -   [ ] Faceted Filters (Type, Date, Project, Status)
+
+#### **[ ] F5.2 Dashboard & Monitoring**
+-   **Tasks:**
+    -   [ ] Personal Dashboard (My Tasks, Pending Approvals)
+    -   [ ] Project Dashboard (KPIs, Stats)
+    -   [ ] **Admin Audit Logs Viewer**
+
+---
+
+## 🛡️ **Security & Performance Guidelines**
+
+1.  **Client-Side Validation:** ใช้ Zod Validate Form ก่อนส่งเสมอ
+2.  **Optimistic Updates:** ใช้ React Query `onMutate` เพื่อความลื่นไหล
+3.  **Code Splitting:** ใช้ `React.lazy` และ `Next.js Dynamic Imports` สำหรับ Component ใหญ่ๆ (เช่น Monaco Editor, ReactFlow)
+4.  **Secure Storage:** ห้ามเก็บ Token ใน LocalStorage (ใช้ HttpOnly Cookie ผ่าน NextAuth)
+
+---
+
+**End of Frontend Plan V1.5.1**