np-dms/lcbp3
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
main
lcbp3/docs/Markdown/3_Frontend_Plan_V1_4_4.md
admin aaa5da3ec1
Some checks failed
Spec Validation / validate-markdown (push) Has been cancelled
Details
Spec Validation / validate-diagrams (push) Has been cancelled
Details
Spec Validation / check-todos (push) Has been cancelled
Details
251217:1704 Docunment Number: Update to 1.6.2
2025-12-17 17:04:06 +07:00

40 KiB
Raw Permalink Blame History

📋 แผนการพัฒนา Frontend (Next.js) - LCBP3-DMS v1.4.4

สถานะ: FINAL GUIDELINE Rev.04 วันที่: 2025-11-26 อ้างอิง: Requirements v1.4.3 & FullStackJS Guidelines v1.4.3 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.3
  • Version: 1.4
  • Date: 2025-11-26
  • Author: NAP LCBP3-DMS & Gemini
  • Status: FINAL-Rev.04
  • Classification: Internal Technical Documentation
  • Approved By: Nattanin

End of Frontend Development Plan v1.4.4 (ฉบับปรับปรุง)

Reference in New Issue View Git Blame Copy Permalink