np-dms/lcbp3
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
3d9b6e4d0557416ad96d615366e5f0de36758a07
lcbp3/docs/Markdown/LCBP3-DMS_V1_4_1_Frontend_Development_Plan.md
admin 68d47f9cb2 251119:0100 update requirements
2025-11-19 01:04:53 +07:00

73 KiB
Raw Blame History

📋 แผนการพัฒนา Backend (NestJS) - LCBP3-DMS v1.4.1 (ปรับปรุงโดย Claude -> deepseek)

🎯 ภาพรวมโครงการ

พัฒนา Frontend สำหรับระบบบริหารจัดการเอกสารโครงการ (Document Management System) ที่ทันสมัย responsive และใช้งานง่าย รองรับการจัดการเอกสารที่ซับซ้อน มี Dashboard แบบ Real-time และระบบ Workflow Visualization เน้น Security, Performance และ User Experience ตาม Requirements v1.4.1 อย่างครบถ้วน

📐 สถาปัตยกรรมระบบ

Technology Stack

  • Framework: Next.js 14+ (App Router, React 18+, TypeScript, ESM)
  • Styling: Tailwind CSS + PostCSS
  • Component Library: shadcn/ui (Radix UI)
  • State Management:
    • Server State: TanStack Query (React Query)
    • Global Client State: Zustand
    • Form State: React Hook Form + Zod
  • Data Fetching: Axios + TanStack Query
  • Authentication: NextAuth.js (JWT Strategy)
  • File Upload: React Dropzone
  • Tables: TanStack Table
  • Charts: Recharts
  • Date Picker: date-fns + shadcn/ui Calendar
  • Icons: Lucide React
  • Security & File Processing clamscan + js-file-download + dompurify
  • JSON Schema & Validation ajv + ajv-formats + jsonpath + json-schema-ref-parser
  • Performance Monitoring web-vitals + @axe-core/react
  • Advanced UI Components react-json-view-lite + react-window (สำหรับ Virtual Scrolling)
  • Testing:
    • Unit/Integration: Vitest + React Testing Library
    • E2E: Playwright
    • API Mocking: Mock Service Worker (MSW)

โครงสร้างโปรเจกต์

app/
├── (public)/              # Public routes (Landing, Login)
│   ├── page.tsx          # Landing Page
│   └── login/            # Login Page
├── (protected)/          # Protected routes
│   ├── layout.tsx        # App Shell (Navbar + Sidebar)
│   ├── dashboard/        # Dashboard
│   ├── correspondences/  # Correspondence Management
│   ├── rfas/            # RFA Management
│   ├── drawings/        # Drawing Management
│   ├── circulations/    # Circulation Management
│   ├── transmittals/    # Transmittal Management
│   ├── search/          # Advanced Search
│   ├── reports/         # Reports
│   ├── admin/           # Admin Panel
│   └── profile/         # User Profile
├── api/                 # API Routes (if needed)
components/
├── ui/                  # shadcn/ui components
├── features/            # Feature-specific components
│   ├── auth/
│   ├── correspondence/
│   ├── rfa/
│   ├── drawing/
│   ├── circulation/
│   ├── common/
│   ├── security/           # NEW: Security components
│   │   ├── file-upload-security.tsx
│   │   ├── virus-scan-status.tsx
│   │   └── security-audit-log.tsx
│   ├── json-details/       # NEW: JSON Details management
│   │   ├── json-details-form.tsx
│   │   ├── schema-validator.tsx
│   │   └── dynamic-form-generator.tsx
│   ├── routing/            # NEW: Correspondence routing
│   │   ├── routing-template-manager.tsx
│   │   ├── routing-workflow-visualizer.tsx
│   └── pending-routings-list.tsx
│   └── monitoring/         # NEW: Performance monitoring
│       ├── performance-metrics.tsx
│       ├── real-time-monitor.tsx
│       └── cache-status.tsx
└── layouts/             # Layout components
lib/
├── api/                 # API client & hooks
├── stores/              # Zustand stores
├── utils/               # Utility functions
├── hooks/               # Custom hooks
├── types/               # TypeScript types
├── security/              # NEW: Security utilities
│   ├── file-scanner.ts
│   ├── virus-scan-client.ts
│   └── security-headers.ts
├── json-schemas/          # NEW: JSON schema management
│   ├── schemas/
│   ├── validators/
│   └── transformers/
└── monitoring/            # NEW: Monitoring utilities
│   ├── performance.ts
│   ├── error-tracking.ts
│   └── metrics-collector.ts
public/
├── images/
└── fonts/

🗓️ แผนการพัฒนาแบบ Phase-Based

Phase 0: Setup & Infrastructure (สัปดาห์ที่ 1)

Milestone: สร้างโครงสร้างพื้นฐานและ Development Environment

  • T0.1 Initialize Next.js Project

    • สร้างโปรเจกต์ด้วย create-next-app:
    npx create-next-app@latest lcbp3-frontend --typescript --tailwind --app --src-dir=false
    • เลือก Options:
      • ✅ TypeScript
      • ✅ ESLint
      • ✅ Tailwind CSS
      • ✅ App Router
      • ✅ Import alias (@/*)
    • Setup .gitignore, README.md
    • Deliverable: ✅ โปรเจกต์เริ่มต้นพร้อม

  • T0.2 Install Core Dependencies

    # State Management & Data Fetching
npm install @tanstack/react-query zustand
npm install axios
npm install react-hook-form @hookform/resolvers zod

# UI Components & Styling
npm install clsx tailwind-merge
npm install lucide-react
npm install date-fns

# File Upload
npm install react-dropzone

# Authentication
npm install next-auth

# Development Tools
npm install -D @types/node

# Security & File Processing
npm install clamscan js-file-download
npm install dompurify @types/dompurify

# JSON Schema & Validation
npm install ajv ajv-formats
npm install jsonpath json-schema-ref-parser

# Performance Monitoring
npm install web-vitals
npm install @axe-core/react

# Advanced UI Components
npm install react-json-view-lite
npm install react-window # สำหรับ Virtual Scrolling
    • Deliverable: ✅ Dependencies ติดตั้งสมบูรณ์

  • T0.3 Setup shadcn/ui

    npx shadcn-ui@latest init

    • เลือก Style: Default

    • เลือก Base Color: Slate

    • ติดตั้ง Components เบื้องต้น:

      npx shadcn-ui@latest add button input label card table dropdown-menu
npx shadcn-ui@latest add dialog sheet toast alert
npx shadcn-ui@latest add form select textarea checkbox
npx shadcn-ui@latest add calendar popover

    • Deliverable: ✅ shadcn/ui พร้อมใช้งาน

  • T0.4 Configure Tailwind CSS

    • แก้ไข tailwind.config.ts:
      • เพิ่ม Custom Colors (ตาม Brand)
      • เพิ่ม Custom Fonts (ภาษาไทย: Noto Sans Thai)
      • Configure Container, Spacing
    • สร้าง app/globals.css พร้อม Custom Styles
    • Deliverable: ✅ Tailwind พร้อมใช้

  • T0.5 Setup Development Environment

    • สร้าง .env.local:
    NEXT_PUBLIC_API_URL=http://backend.np-dms.work/api
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=...
    • Setup ESLint Rules (ไทย Comments OK)
    • Setup Prettier
    • Setup VS Code Settings
    • Deliverable: ✅ Dev Environment พร้อม

  • T0.6 Setup Git & Docker

    • Push โปรเจกต์ไปยัง Gitea (git.np-dms.work)
    • สร้าง Dockerfile สำหรับ Next.js:
    FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
    • สร้าง docker-compose.yml (เชื่อม Network lcbp3)
    • Deliverable: ✅ Project อยู่ใน Git + Docker พร้อม

Phase 1: Authentication & App Shell (สัปดาห์ที่ 2-3)

Milestone: ระบบ Login และ Layout หลัก

  • T1.1 Setup API Client

    • สร้าง lib/api/client.ts:
    import axios from axios;

export const apiClient = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  headers: {
    Content-Type: application/json,
  },
});

// Request Interceptor (Add JWT Token)
apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem(access_token);
  if (token) {
    config.headers.Authorization = Bearer ${token};
  }
  return config;
});

// Response Interceptor (Handle Errors)
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Redirect to login
      window.location.href = /login;
    }
    return Promise.reject(error);
  }
);
    • Deliverable: ✅ API Client พร้อมใช้

  • T1.2 Setup TanStack Query

  • สร้าง app/providers.tsx:

    'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useState } from 'react';

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000, // 1 minute
        refetchOnWindowFocus: false,
      },
    },
  }));

  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

  • Wrap ใน app/layout.tsx

  • Deliverable: ✅ React Query พร้อม

  • T1.3 Create Auth Store (Zustand)

  • สร้าง lib/stores/auth-store.ts:

    import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface User {
  user_id: number;
  username: string;
  email: string;
  first_name: string;
  last_name: string;
  primary_organization_id: number;
  permissions: string[];
}

interface AuthStore {
  user: User | null;
  token: string | null;
  setAuth: (user: User, token: string) => void;
  clearAuth: () => void;
  hasPermission: (permission: string) => boolean;
}

export const useAuthStore = create<AuthStore>()(
  persist(
    (set, get) => ({
      user: null,
      token: null,
      setAuth: (user, token) => {
        set({ user, token });
        localStorage.setItem('access_token', token);
      },
      clearAuth: () => {
        set({ user: null, token: null });
        localStorage.removeItem('access_token');
      },
      hasPermission: (permission) => {
        const user = get().user;
        return user?.permissions.includes(permission) || false;
      },
    }),
    {
      name: 'auth-storage',
    }
  )
);

  • Deliverable: ✅ Auth Store พร้อม

  • T1.4 Create Login Page

  • สร้าง app/(public)/login/page.tsx:

    'use client';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/stores/auth-store';
import { apiClient } from '@/lib/api/client';

const loginSchema = z.object({
  username: z.string().min(1, 'กรุณากรอกชื่อผู้ใช้'),
  password: z.string().min(1, 'กรุณากรอกรหัสผ่าน'),
});

export default function LoginPage() {
  const router = useRouter();
  const setAuth = useAuthStore((state) => state.setAuth);
  const form = useForm({
    resolver: zodResolver(loginSchema),
  });

  const handleLogin = async (data: z.infer<typeof loginSchema>) => {
    try {
      const response = await apiClient.post('/auth/login', data);
      const { access_token, user } = response.data;
      setAuth(user, access_token);
      router.push('/dashboard');
    } catch (error) {
      console.error('Login failed:', error);
      // แสดง Toast Error
    }
  };

  return (
    <div className="flex min-h-screen items-center justify-center">
      <form onSubmit={form.handleSubmit(handleLogin)} className="w-96">
        {/* Form Fields */}
      </form>
    </div>
  );
}

  • Deliverable: ✅ หน้า Login พร้อม

  • T1.5 Create Landing Page

  • สร้าง app/(public)/page.tsx:

    • Hero Section พร้อมข้อมูลโครงการ
    • Feature Highlights
    • CTA Button → Login

  • ใช้ Tailwind + Animations

  • Deliverable: ✅ Landing Page สวยงาม

  • T1.6 Create Protected Layout (App Shell)

  • สร้าง app/(protected)/layout.tsx:

    'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/stores/auth-store';
import Navbar from '@/components/layouts/navbar';
import Sidebar from '@/components/layouts/sidebar';

export default function ProtectedLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const user = useAuthStore((state) => state.user);

  useEffect(() => {
    if (!user) {
      router.push('/login');
    }
  }, [user, router]);

  if (!user) return null;

  return (
    <div className="flex h-screen">
      <Sidebar />
      <div className="flex flex-1 flex-col">
        <Navbar />
        <main className="flex-1 overflow-y-auto p-6">
          {children}
        </main>
      </div>
    </div>
  );
}

  • Deliverable: ✅ App Shell พร้อม

  • T1.7 Create Navbar Component

  • สร้าง components/layouts/navbar.tsx:

    • แสดงชื่อระบบ
    • แสดงชื่อผู้ใช้ + Avatar
    • Dropdown Menu:
      • Profile
      • Settings
      • Logout

  • Responsive (Mobile Hamburger Menu)

  • Deliverable: ✅ Navbar พร้อม

  • T1.8 Create Sidebar Component

  • สร้าง components/layouts/sidebar.tsx:

    • เมนูหลัก:
      • Dashboard
      • Correspondences
      • RFAs
      • Drawings (Shop & Contract)
      • Circulations
      • Transmittals
      • Search
      • Reports
    • เมนู Admin (แสดงตามสิทธิ์):
      • Users
      • Roles & Permissions
      • Master Data
      • Document Numbering

  • Collapsible Sidebar

  • Active State Highlighting

  • Deliverable: ✅ Sidebar พร้อม

  • T1.9 Setup Global Error Handling & Resilience

// สร้าง lib/error-handling/global-error-handler.ts export class GlobalErrorHandler { static setup() { // API Error Interceptors apiClient.interceptors.response.use( (response) => response, (error) => { this.handleApiError(error); return Promise.reject(error); } );

// Frontend Error Boundary
window.addEventListener('error', this.handleWindowError);
window.addEventListener('unhandledrejection', this.handlePromiseRejection);

}

static handleApiError(error: any) { // Circuit Breaker Pattern if (error.response?.status >= 500) { this.circuitBreaker.recordFailure(); }

// User-friendly Error Messages
const userMessage = this.getUserFriendlyMessage(error);
this.showErrorToast(userMessage);

// Error Reporting
this.reportErrorToService(error);

} }


T1.10 Setup Security Foundation

```typescript
// สร้าง lib/security/security-config.ts
export const SecurityConfig = {
fileUpload: {
  allowedTypes: ['pdf', 'dwg', 'docx', 'xlsx', 'zip'],
  maxSize: 50 * 1024 * 1024, // 50MB
  virusScanRequired: true,
  scanTimeout: 30000 // 30 seconds
},
rateLimiting: {
  maxRequests: {
    anonymous: 100,
    viewer: 500,
    editor: 1000,
    documentControl: 2000,
    admin: 5000
  }
}
};

Phase 2: Dashboard & Common Components (สัปดาห์ที่ 4)

Milestone: Dashboard และ Reusable Components

  • T2.1 Create Reusable Components

  • components/features/common/data-table.tsx:

    • ใช้ TanStack Table
    • รองรับ Pagination, Sorting, Filtering
    • Responsive

  • components/features/common/file-upload.tsx:

    • ใช้ React Dropzone
    • รองรับ Multi-file Upload
    • Drag & Drop
    • Progress Bar

  • components/features/common/status-badge.tsx:

    • แสดง Status แบบสีสัน (Draft, Submitted, Approved)

  • components/features/common/permission-guard.tsx:

    • ซ่อน/แสดง Component ตามสิทธิ์

  • Deliverable: ✅ Reusable Components พร้อม

  • T2.2 Create Dashboard Page

  • สร้าง app/(protected)/dashboard/page.tsx:

    • KPI Cards Section:
      • จำนวนเอกสารทั้งหมด
      • งานที่รอดำเนินการ
      • เอกสารที่เกินกำหนด
      • RFA ที่รออนุมัติ
    • My Tasks Table:
      • ดึงข้อมูลจาก /api/circulations/my-tasks (ใช้ v_user_tasks)
      • แสดงรายการงานที่ต้องทำ (Pending, In Progress)
      • Columns: Document Number, Title, Type, Status, Deadline, Actions
      • คลิกแถวแล้วไปยังหน้า Detail
    • Recent Activity Feed:
      • ดึงข้อมูลจาก /api/audit-logs/user/:userId
      • แสดง 10 รายการล่าสุด

  • Deliverable: ✅ Dashboard ครบถ้วน

  • T2.3 Create API Hooks

  • สร้าง lib/api/hooks/use-my-tasks.ts:

    import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../client';

export function useMyTasks() {
  return useQuery({
    queryKey: ['my-tasks'],
    queryFn: async () => {
      const response = await apiClient.get('/circulations/my-tasks');
      return response.data;
    },
  });
}

  • สร้าง Hooks เพิ่มเติม:

    • use-dashboard-stats.ts
    • use-recent-activity.ts

  • Deliverable: ✅ API Hooks พร้อม

Phase 3: Correspondence Management (สัปดาห์ที่ 5-6)

Milestone: ระบบจัดการเอกสารโต้ตอบ

  • T3.1 Create Correspondence List Page

  • สร้าง app/(protected)/correspondences/page.tsx:

    • Data Table แสดงรายการเอกสาร
    • Columns:
      • Document Number (คลิกไปยัง Detail)
      • Title
      • Type
      • Status (Badge)
      • Originator
      • Date
      • Actions (View, Edit, Delete)
    • Filters:
      • ประเภทเอกสาร (Dropdown)
      • สถานะ (Dropdown)
      • วันที่ (Date Range Picker)
      • องค์กร (Dropdown)
    • Pagination (Server-side)
    • Search Box
    • Create Button (ตรวจสิทธิ์)

  • Deliverable: ✅ หน้ารายการเอกสาร

  • T3.2 Create Correspondence Detail Page

  • สร้าง app/(protected)/correspondences/[id]/page.tsx:

    • Header Section:
      • Document Number (ใหญ่)
      • Status Badge
      • Action Buttons: Edit, Delete, Export PDF
    • Metadata Section:
      • Title, Description
      • Document Date, Issued Date, Received Date
      • Originator, Recipients (TO/CC)
      • Due Date (ถ้ามี)
    • Revision History:
      • แสดง Revisions ทั้งหมดเป็น Timeline
      • แต่ละ Revision แสดง: Revision Number, Date, Changes, User
    • Attachments:
      • แสดงไฟล์แนบทั้งหมด
      • กำหนดไฟล์หลัก (Main Document) ด้วยไอคอน
      • ปุ่ม Download
    • References:
      • แสดงเอกสารที่อ้างถึง (Links)
      • Tags:
      • แสดง Tags แบบ Chips
    • Activity Log:
      • แสดง Audit Log ของเอกสารนี้

  • Deliverable: ✅ หน้า Detail ครบถ้วน

  • T3.3 Create Correspondence Form (Create/Edit)

  • สร้าง app/(protected)/correspondences/create/page.tsx:

  • สร้าง app/(protected)/correspondences/[id]/edit/page.tsx:

  • Form Fields:

    • Basic Info:
      • Correspondence Type (Dropdown)
      • Title (Text)
      • Description (Textarea)
      • Document Date (Date Picker)
    • Recipients:
      • TO: Multi-select Organizations
      • CC: Multi-select Organizations
    • References:
      • Search & Select เอกสารอื่นๆ
      • Tags:
      • Autocomplete Tag Input
    • Attachments:
      • File Upload (Multi-file)
      • กำหนด Main Document (Radio)
    • Deadline:
      • Due Date (Date Picker)

  • Validation ด้วย Zod

  • Submit → API → Redirect to Detail

  • Deliverable: ✅ ฟอร์มสร้าง/แก้ไข

  • T3.4 Create Status Management

  • ใน Detail Page เพิ่มปุ่ม Status Actions:

    • Draft → Submit (Document Control)
    • Submit → Close (Admin)
    • Submit → Cancel (Admin + Dialog ให้กรอกเหตุผล)

  • แสดง Confirmation Dialog ก่อนเปลี่ยนสถานะ

  • Deliverable: ✅ เปลี่ยนสถานะได้

Phase 4: RFA & Workflow Visualization (สัปดาห์ที่ 7-8)

Milestone: ระบบ RFA และ Workflow

  • T4.1 Create RFA List Page

  • สร้าง app/(protected)/rfas/page.tsx:

    • คล้าย Correspondence List
    • Columns เพิ่มเติม:
      • RFA Type (DWG, DOC, MAT)
      • Approval Status (Badge)
      • Approval Code (1A, 3R, etc.)
    • Filters:
      • RFA Type
      • Status
      • Approval Code

  • Deliverable: ✅ หน้ารายการ RFA

  • T4.2 Create RFA Detail Page

  • สร้าง app/(protected)/rfas/[id]/page.tsx:

    • คล้าย Correspondence Detail
    • เพิ่ม Section:
      • Shop Drawings (สำหรับ RFA_DWG):
        • แสดงรายการ Shop Drawings ที่เชื่อมโยง
        • แสดง Revision ของแต่ละแบบ
        • Link ไปยัง Shop Drawing Detail
      • Workflow Visualization (ดูรายละเอียดใน T4.3)

  • Deliverable: ✅ หน้า Detail RFA

  • T4.3 Create Workflow Visualization Component

  • สร้าง components/features/rfa/workflow-visualizer.tsx:

    • Layout: Steps แนวนอน (Timeline)
    • Step States:
      • ✅ Completed: สีเขียว, ไอคอน Check
      • ⏳ Active: สีฟ้า, ปุ่ม Action เปิดใช้งาน
      • ⏸️ Pending: สีเทา, ปุ่ม disabled
      • ❌ Rejected: สีแดง
    • Step Info Card (เมื่อคลิก):
      • Organization
      • Assigned User
      • Action Type (Review, Approve)
      • Status
      • Comments
      • Completed Date
    • Actions (สำหรับ Active Step):
      • ปุ่ม "อนุมัติ" (Approve)
      • ปุ่ม "ปฏิเสธ" (Reject)
      • Dialog ให้กรอก Comments
    • Admin Override:
      • ปุ่ม "ไปยังขั้นตอนต่อไป" (Skip Step)
      • ปุ่ม "ย้อนกลับ" (Previous Step)

  • Deliverable: ✅ Workflow Component พร้อม

  • T4.4 Create RFA Form (Create/Edit)

  • สร้าง app/(protected)/rfas/create/page.tsx:

  • Form Fields:

    • RFA Type (Dropdown)
    • Title, Description
    • Document Date
    • Shop Drawings Section (สำหรับ RFA_DWG):
      • Search & Select Shop Drawings
      • แสดง Revisions ที่มี (Dropdown)
      • เพิ่มได้หลายแบบ
    • Attachments
    • Workflow Template (Dropdown)

  • Submit → สร้าง RFA + Start Workflow

  • Deliverable: ✅ ฟอร์ม RFA พร้อม

  • T4.5 Implement Workflow Actions API

  • สร้าง lib/api/hooks/use-rfa-workflow.ts:

    import { useMutation, useQueryClient } from '@tanstack/react-query';
import { apiClient } from '../client';

export function useCompleteWorkflowStep() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async ({ rfaId, stepNumber, action, comments }) => {
      const response = await apiClient.post(
        `/rfas/${rfaId}/workflow/steps/${stepNumber}/complete`,
        { action, comments }
      );
      return response.data;
    },
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries(['rfa', variables.rfaId]);
      queryClient.invalidateQueries(['my-tasks']);
    },
  });
}

  • Hooks เพิ่มเติม:

    • use-reject-workflow-step.ts
    • use-start-workflow.ts

  • Deliverable: ✅ Workflow Actions ทำงานได้

Phase 5: Drawing Management (สัปดาห์ที่ 9)

Milestone: ระบบจัดการแบบ

  • T5.1 Create Shop Drawing List Page

  • สร้าง app/(protected)/drawings/shop/page.tsx:

    • Data Table:
      • Drawing Number
      • Title
      • Main Category
      • Sub Category
      • Current Revision
      • Actions
    • Filters:
      • Category (Dropdown)
      • Sub Category (Dropdown)
    • Create Button

  • Deliverable: ✅ หน้ารายการ Shop Drawings

  • T5.2 Create Shop Drawing Detail Page

  • สร้าง app/(protected)/drawings/shop/[id]/page.tsx:

    • Header: Drawing Number, Title
    • Current Revision Info:
      • Revision Number, Date
      • Description
      • Attachments (PDF, DWG)
    • Contract Drawing References:
      • แสดง Contract Drawings ที่อ้างถึง
      • Links ไปยัง Contract Drawing Detail
    • Revision History:
      • แสดง Revisions ทั้งหมดเป็น Timeline
    • Related RFAs:
      • แสดง RFAs ที่เชื่อมโยงกับแบบนี้

  • Deliverable: ✅ หน้า Detail Shop Drawing

  • T5.3 Create Shop Drawing Form

  • สร้าง app/(protected)/drawings/shop/create/page.tsx:

  • Form Fields:

    • Drawing Number (Auto-generate หรือ Manual)
    • Title
    • Main Category (Dropdown)
    • Sub Category (Dropdown, dependent on Main)
    • Contract Drawing References:
      • Search & Select Contract Drawings (Multi-select)
    • Revision Info:
      • Revision Number (Auto)
      • Revision Label (A, B, C)
      • Description
    • Attachments:
      • Upload PDF (Main)
      • Upload DWG (Optional)
      • Upload Other Files

  • Deliverable: ✅ ฟอร์ม Shop Drawing

  • T5.4 Create Contract Drawing List & Detail

  • สร้าง app/(protected)/drawings/contract/page.tsx:

    • Data Table:
      • Drawing Number
      • Title
      • Volume
      • Category
      • Sub Category
    • Filters:
      • Volume (Dropdown)
      • Category (Dropdown)

  • สร้าง app/(protected)/drawings/contract/[id]/page.tsx:

    • แสดง Metadata
    • Attachments
    • Referenced By:
      • แสดง Shop Drawings ที่อ้างถึงแบบนี้

  • Deliverable: ✅ Contract Drawing Pages

Phase 6: Circulation & Transmittal (สัปดาห์ที่ 10)

Milestone: ระบบใบเวียนและเอกสารนำส่ง

  • T6.1 Create Circulation List Page

  • สร้าง app/(protected)/circulations/page.tsx:

    • Data Table:
      • Circulation Number
      • Subject
      • Status (Badge)
      • Created By
      • Created Date
    • Filters:
      • Status
      • Date Range

  • Deliverable: ✅ หน้ารายการใบเวียน

  • T6.2 Create Circulation Detail & Workflow

  • สร้าง app/(protected)/circulations/[id]/page.tsx:

    • Header: Circulation Number, Subject, Status
    • Linked Correspondence:
      • Link ไปยังเอกสารต้นทาง
    • Workflow Visualization:
      • คล้าย RFA Workflow
      • แสดง Steps:
        • Organization
        • Assigned Users (Main, Action, Information)
        • Status
        • Comments
        • Deadline
    • Actions (สำหรับ Assigned User):
      • ปุ่ม "ดำเนินการเสร็จสิ้น" (Complete)
      • Dialog ให้กรอก Comments
    • Close Circulation (Document Control):
      • ปุ่ม "ปิดใบเวียน" (เมื่อตอบกลับองค์กรผู้ส่งแล้ว)

  • Deliverable: ✅ หน้า Detail ใบเวียน

  • T6.3 Create Circulation Form

  • สร้าง app/(protected)/circulations/create/page.tsx:

  • Form Fields:

    • Linked Correspondence:
      • Search & Select Correspondence (Required)
    • Subject: (Text)
    • Workflow Template (Optional):
      • Dropdown เลือก Template ที่มีอยู่
      • หรือสร้างแบบ Custom
    • Assignees Section:
      • Main (ผู้รับผิดชอบหลัก):
        • Multi-select Users
        • กำหนด Deadline (Date Picker)
      • Action (ผู้ร่วมปฏิบัติงาน):
        • Multi-select Users
        • กำหนด Deadline
      • Information (ผู้ที่ต้องรับทราบ):
        • Multi-select Users
        • ไม่ต้องกำหนด Deadline
    • Attachments (Optional):
      • อัปโหลดไฟล์เพิ่มเติมนอกจากเอกสารต้นทาง

  • Submit → สร้าง Circulation + Send Notifications

  • Deliverable: ✅ ฟอร์มสร้างใบเวียน

  • T6.4 Create Circulation Template Management

  • สร้าง app/(protected)/admin/circulation-templates/page.tsx:

    • List Templates
    • Create/Edit Template
    • Template Form Fields:
      • Template Name
      • Description
      • Steps:
        • Step Number (Auto)
        • Organization (Dropdown)
        • Role (Dropdown, Optional)
        • Duration (Days)
        • Is Optional (Checkbox)

  • Deliverable: ✅ จัดการ Template ได้

  • T6.5 Create Transmittal Pages

  • สร้าง app/(protected)/transmittals/page.tsx:

    • Data Table:
      • Transmittal Number
      • Purpose (Badge)
      • TO Organization
      • Date
      • Item Count

  • สร้าง app/(protected)/transmittals/[id]/page.tsx:

    • Header: Transmittal Number, Purpose
    • Metadata: Originator, Recipients, Date, Remarks
    • Items Section:
      • Data Table:
        • Document Number (Link)
        • Title
        • Type
        • Quantity
        • Remarks

  • สร้าง app/(protected)/transmittals/create/page.tsx:

    • Form Fields:
      • Purpose (Dropdown: FOR_APPROVAL, FOR_INFORMATION, FOR_REVIEW)
      • TO Organization (Dropdown)
      • CC Organizations (Multi-select)
      • Remarks (Textarea)
      • Items:
        • Search & Select Correspondences/RFAs (Multi-select)
        • กำหนด Quantity และ Remarks ต่อแต่ละรายการ
      • Attachments (Cover Letter)

  • Deliverable: ✅ ระบบ Transmittal ครบถ้วน

Phase 7: Search & Reports (สัปดาห์ที่ 11)

Milestone: ระบบค้นหาและรายงาน

  • T7.1 Create Advanced Search Page

  • สร้าง app/(protected)/search/page.tsx:

    • Search Filters Panel (Sidebar):
      • Document Type (Checkboxes):
        • Correspondence
        • RFA
        • Shop Drawing
        • Contract Drawing
        • Circulation
        • Transmittal
      • Text Search:
        • Keyword (Full-text)
        • Document Number
        • Title
      • Date Range:
        • From Date (Date Picker)
        • To Date (Date Picker)
      • Status (Multi-select)
      • Organization (Multi-select)
      • Tags (Autocomplete Multi-select)
      • Project (Dropdown)
      • Contract (Dropdown)
    • Search Results Panel (Main Area):
      • Data Table:
        • Document Type (Icon + Badge)
        • Document Number (Link)
        • Title
        • Status
        • Date
        • Organization
        • Match Score (จาก Elasticsearch)
      • Pagination
      • Sort Options (Relevance, Date, Title)
    • Export Results:
      • ปุ่ม "Export to CSV"
      • ปุ่ม "Export to Excel"

  • Deliverable: ✅ หน้าค้นหาขั้นสูง

  • T7.2 Create Search API Hooks

  • สร้าง lib/api/hooks/use-search.ts:

    import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../client';

interface SearchFilters {
  q?: string;
  types?: string[];
  statuses?: string[];
  organizations?: number[];
  tags?: number[];
  from?: string;
  to?: string;
  page?: number;
  pageSize?: number;
}

export function useSearch(filters: SearchFilters) {
  return useQuery({
    queryKey: ['search', filters],
    queryFn: async () => {
      const response = await apiClient.get('/search', { params: filters });
      return response.data;
    },
    enabled: !!filters.q || Object.keys(filters).length > 1,
  });
}

  • Deliverable: ✅ Search Hooks พร้อม

  • T7.3 Create Reports Page

  • สร้าง app/(protected)/reports/page.tsx:

    • Report Types (Tabs):
      • Correspondence Summary:
        • Filter: Project, Date Range, Type
        • Chart: Bar Chart (จำนวนเอกสารแยกตามประเภท)
        • Table: รายการเอกสารพร้อมสถิติ
      • RFA Summary:
        • Filter: Project, Date Range, Type
        • Chart: Pie Chart (สัดส่วนสถานะ)
        • Table: รายการ RFA พร้อมสถิติ
      • Activity Report:
        • Filter: User, Date Range
        • Timeline: แสดงกิจกรรมตามเวลา
        • Table: รายละเอียดกิจกรรม
      • Overdue Report:
        • แสดงเอกสาร/งานที่เกินกำหนด
        • Group by: Type, Organization, User
    • Export Options:
      • PDF Report (ใช้ Browser Print)
      • Excel Export

  • Deliverable: ✅ หน้ารายงาน

  • T7.4 Integrate Charts (Recharts)

npm install recharts
  • สร้าง Chart Components:
    • components/features/reports/bar-chart.tsx
    • components/features/reports/pie-chart.tsx
    • components/features/reports/line-chart.tsx
  • ใช้ใน Reports Page
  • Deliverable: ✅ Charts พร้อมใช้

Phase 8: Admin Panel (สัปดาห์ที่ 12-13)

Milestone: ระบบจัดการสำหรับ Admin

  • T8.1 Create User Management Pages

  • สร้าง app/(protected)/admin/users/page.tsx:

    • Permission Guard: ตรวจสอบสิทธิ์ users.view
    • Data Table:
      • Username
      • Name
      • Email
      • Organization
      • Roles (Badges)
      • Status (Active/Inactive)
      • Actions (Edit, Deactivate, Reset Password)
    • Filters:
      • Organization
      • Role
      • Status
    • Create User Button

  • สร้าง app/(protected)/admin/users/create/page.tsx:

    • Form Fields:
      • Username (Text, Unique)
      • Email (Email, Unique)
      • Password (Password)
      • First Name, Last Name (Text)
      • Line ID (Text, Optional)
      • Primary Organization (Dropdown)
      • Global Role (Dropdown, Optional)
      • Project Roles (Multi-select):
        • เลือก Project + Role
      • Contract Roles (Multi-select):
        • เลือก Contract + Role

  • สร้าง app/(protected)/admin/users/[id]/edit/page.tsx:

    • คล้าย Create Form
    • เพิ่ม: Deactivate Button, Reset Password Button

  • Deliverable: ✅ จัดการผู้ใช้ได้

  • T8.2 Create Role & Permission Management

  • สร้าง app/(protected)/admin/roles/page.tsx:

    • Permission Guard: roles.view
    • List Roles (Cards):
      • Role Name
      • Scope (Global, Organization, Project, Contract)
      • Permission Count
      • Edit Button

  • สร้าง app/(protected)/admin/roles/[id]/edit/page.tsx:

    • Form Fields:
      • Role Name (Text)
      • Scope (Radio: Global, Organization, Project, Contract)
      • Description (Textarea)
      • Permissions (Grouped Checkboxes):
        • Group by Module:
          • System Management
          • User Management
          • Project Management
          • Document Management
          • Workflow Management
          • Search & Reporting
        • แต่ละ Permission มี Checkbox + Description

  • Deliverable: ✅ จัดการ Roles และ Permissions ได้

  • T8.3 Create Master Data Management

  • สร้าง app/(protected)/admin/master-data/page.tsx:

      • Tabs:
      • Correspondence Types:
        • List + Create/Edit Form
        • Fields: Type Code, Type Name, Sort Order
      • RFA Types:
        • List + Create/Edit Form
      • Status Codes:
        • List + Create/Edit Form
        • Tags:
        • List + Create/Edit Form
      • Drawing Categories:
        • List + Create/Edit Form (Main & Sub Categories)

  • Deliverable: ✅ จัดการ Master Data ได้

  • T8.4 Create Document Numbering Management

  • สร้าง app/(protected)/admin/document-numbering/page.tsx:

    • Document Number Formats Section:
      • Data Table:
        • Project
        • Document Type
        • Format Template
        • Example
        • Actions (Edit, Delete)
      • Create Format Button
    • Create/Edit Format Form:
      • Project (Dropdown)
      • Document Type (Dropdown)
      • Format Template (Text):
        • แสดง Available Placeholders:
          • {ORG_CODE} - รหัสองค์กร
          • {TYPE_CODE} - รหัสประเภทเอกสาร
          • {YEAR} - ปี พ.ศ. 4 หลัก
          • {YEAR_SHORT} - ปี พ.ศ. 2 หลัก
          • {SEQ:n} - เลขลำดับ (n = จำนวนหลัก)
        • Live Preview: แสดงตัวอย่างเลขที่จากรูปแบบที่กรอก
      • Description (Textarea)
    • Current Counters Section (Read-only):
      • Data Table:
        • Project
        • Organization
        • Document Type
        • Year
        • Last Number

  • Deliverable: ✅ จัดการ Document Numbering ได้

  • T8.5 Create Organization Onboarding Workflow

  • สร้าง app/(protected)/admin/organizations/page.tsx:

    • Permission Guard: organizations.manage (Superadmin only)
    • List Organizations:
      • Organization Code
      • Organization Name
      • Status
      • Org Admin (ชื่อ)
      • Actions
    • Create Organization Button

  • สร้าง app/(protected)/admin/organizations/create/page.tsx:

    • Step 1: Organization Info:
      • Organization Code (Text, Unique)
      • Organization Name (Text)
      • Description (Textarea)
    • Step 2: Appoint Org Admin:
      • Search & Select User
      • หรือ Create New User
      • Assign Role: "Org Admin"
    • Step 3: Confirmation:
      • แสดงสรุปข้อมูล
      • Submit → สร้างองค์กรและ Assign Admin

  • Deliverable: ✅ Superadmin สามารถ Onboard องค์กรใหม่ได้

  • T8.6 Create Project & Contract Management

  • สร้าง app/(protected)/admin/projects/page.tsx:

    • Permission Guard: projects.view
    • List Projects
    • Create/Edit Project
    • Project Detail Page:
      • Metadata
      • Participating Organizations (Multi-select)
      • Contracts Section:
        • List Contracts ในโครงการนี้
        • Create Contract Button
      • Members Section:
        • List Users ในโครงการ
        • Assign User to Project Button
        • กำหนด Project Role

  • สร้าง app/(protected)/admin/contracts/[id]/page.tsx:

    • Contract Info
    • Contract Organizations:
      • Organization + Role in Contract (Owner, Designer, Contractor)
    • Members Section:
      • Assign User to Contract
      • กำหนด Contract Role

  • Deliverable: ✅ จัดการ Projects และ Contracts ได้

Phase 9: User Profile & Settings (สัปดาห์ที่ 14)

Milestone: หน้าโปรไฟล์และการตั้งค่า

  • T9.1 Create Profile Page

  • สร้าง app/(protected)/profile/page.tsx:

    • User Info Section:
      • Avatar (Upload รูปภาพ)
      • Username (Read-only)
      • Email (Editable)
      • First Name, Last Name (Editable)
      • Line ID (Editable)
      • Primary Organization (Read-only)
    • My Roles Section:
      • แสดง Roles ทั้งหมดที่ได้รับ:
        • Global Role
        • Organization Roles
        • Project Roles
        • Contract Roles
      • แสดงเป็น Cards พร้อม Scope และ Permissions
    • Change Password Section:
      • Current Password (Password)
      • New Password (Password)
      • Confirm Password (Password)
      • Submit Button
    • Notification Settings:
      • Email Notifications (Toggle)
      • Line Notifications (Toggle)
      • ประเภทการแจ้งเตือน (Checkboxes):
        • New Document Received
        • Task Assigned
        • Document Approved/Rejected
        • Approaching Deadline

  • Deliverable: ✅ หน้า Profile พร้อม

  • T9.2 Create Settings Page (Optional)

  • สร้าง app/(protected)/settings/page.tsx:

    • Display Preferences:
      • Language (ไทย/English) - Future
      • Date Format (DD/MM/YYYY, MM/DD/YYYY)
      • Time Zone (Auto-detect)
      • Table Preferences:
      • Default Page Size (10, 20, 50)
      • Default Sort Order
    • Export Preferences:
      • Default Export Format (CSV, Excel)

  • Deliverable: ✅ หน้า Settings พร้อม

Phase 10: Testing & Optimization (สัปดาห์ที่ 15-16)

Milestone: ทดสอบและปรับปรุงประสิทธิภาพ

  • T10.1 Setup Testing Environment

  • ติดตั้ง Testing Libraries:

    npm install -D vitest @testing-library/react @testing-library/jest-dom
npm install -D @testing-library/user-event
npm install -D msw
npm install -D @playwright/test

  • สร้าง vitest.config.ts

  • สร้าง playwright.config.ts

  • Setup MSW Handlers: lib/mocks/handlers.ts

  • Deliverable: ✅ Testing Setup พร้อม

  • T10.2 Unit Testing

  • เขียน Unit Tests สำหรับ:

    • Utilities: lib/utils/*.ts
    • Hooks: lib/api/hooks/*.ts
    • Components:
      • components/features/common/data-table.test.tsx
      • components/features/common/file-upload.test.tsx
      • components/features/common/status-badge.test.tsx

  • Target: 70% Code Coverage

  • Deliverable: ✅ Unit Tests ผ่านทั้งหมด

  • T10.3 Integration Testing

  • เขียน Integration Tests สำหรับ:

    • Authentication Flow:
      • Login → Dashboard → Logout
    • Correspondence Flow:
      • List → Create → Detail → Edit
    • RFA Workflow:
      • Create RFA → Start Workflow → Complete Step
    • Circulation Flow:
      • Create → Assign → Complete → Close

  • ใช้ MSW เพื่อ Mock API Responses

  • Deliverable: ✅ Integration Tests ผ่าน

  • T10.4 E2E Testing (Playwright)

  • เขียน E2E Tests สำหรับ Critical User Flows:

    • User Registration & Login
    • Create Correspondence (Full Flow):
      • Fill Form → Upload Files → Submit → Verify in List
    • Create RFA with Shop Drawings:
      • Select Drawings → Fill Form → Start Workflow → Verify Status
    • Complete RFA Workflow:
      • Login as Reviewer → Go to RFA → Complete Step → Verify Next Step
    • Search Documents:
      • Enter Query → Verify Results → Click Result → Verify Detail

  • Deliverable: ✅ E2E Tests ผ่าน

  • T10.5 Performance Optimization

  • Code Splitting:

    • ใช้ Dynamic Imports สำหรับ Heavy Components

    • Example:

      const RfaWorkflowVisualizer = dynamic(
  () => import('@/components/features/rfa/workflow-visualizer'),
  { loading: () => <Skeleton /> }
);

  • Image Optimization:

    • ใช้ Next.js <Image> Component
    • Setup Image CDN (ถ้ามี)

  • Data Fetching Optimization:

    • ใช้ prefetchQuery สำหรับ Critical Data
    • Implement Infinite Scroll สำหรับ Long Lists

  • Bundle Size Analysis:

    npm run build
npx @next/bundle-analyzer
    • ลบ Dependencies ที่ไม่ใช้
    • Tree Shaking

  • Deliverable: ✅ Performance Metrics ดีขึ้น

  • T10.6 Accessibility (a11y) Testing

  • ติดตั้ง @axe-core/react

  • รัน axe DevTools ในหน้าสำคัญ

  • แก้ไข Issues:

    • Missing alt text
    • Low contrast ratios
    • Missing ARIA labels
    • Keyboard navigation

  • Target: Zero Critical/Serious Issues

  • Deliverable: ✅ Accessibility Checklist ผ่าน

  • T10.7 Responsive Design Testing

  • ทดสอบบนอุปกรณ์ต่างๆ:

    • Desktop (1920x1080, 1366x768)
    • Tablet (768x1024)
    • Mobile (375x667, 414x896)

  • แก้ไข Layout Issues:

    • Sidebar Collapse บน Mobile
    • Table Horizontal Scroll
    • Form Layout

  • Deliverable: ✅ Responsive บนทุกอุปกรณ์

  • T10.8 Security Hardening

  • Input Sanitization:

    • ตรวจสอบ XSS ใน User Inputs
    • ใช้ DOMPurify สำหรับ Rich Text (ถ้ามี)

  • CSRF Protection:

    • Verify NextAuth CSRF Tokens

  • Content Security Policy:

    • Setup CSP Headers ใน next.config.js

  • API Security:

    • ตรวจสอบว่า Token ถูกส่งใน Headers ถูกต้อง
    • Handle 401/403 Errors properly

  • Deliverable: ✅ Security Checklist ผ่าน

Phase 11: Documentation & Deployment (สัปดาห์ที่ 17)

Milestone: เอกสารและ Deploy สู่ Production

  • T11.1 Component Documentation (Storybook) (Optional)

  • ติดตั้ง Storybook:

    npx storybook@latest init

  • เขียน Stories สำหรับ Reusable Components:

    • Button, Input, Card, Table
    • FileUpload, StatusBadge, PermissionGuard
    • WorkflowVisualizer

  • Deliverable: ✅ Storybook พร้อม

  • T11.2 User Documentation

  • เขียนคู่มือผู้ใช้งาน (ภาษาไทย):

    • Getting Started:
      • วิธีล็อกอิน
      • ภาพรวม Dashboard
    • Correspondence Management:
      • วิธีสร้างเอกสาร
      • วิธีแก้ไขและเปลี่ยนสถานะ
      • วิธีค้นหาเอกสาร
    • RFA Workflow:
      • วิธีสร้าง RFA
      • วิธีตรวจสอบและอนุมัติ
      • วิธีติดตาม Workflow
    • Circulation:
      • วิธีสร้างใบเวียน
      • วิธีดำเนินการตามใบเวียน
    • Drawing Management:
      • วิธีอัปโหลดแบบ
      • วิธีเชื่อมโยงแบบ
    • Admin Functions:
      • วิธีจัดการผู้ใช้
      • วิธีกำหนดสิทธิ์
      • วิธีจัดการ Master Data

  • Format: PDF + Online (ใน /docs Route)

  • Deliverable: ✅ User Guide พร้อม

  • T11.3 Developer Documentation

  • เขียนเอกสารทางเทคนิค:

    • Architecture Overview:
      • Tech Stack
      • Folder Structure
      • State Management Strategy
    • Component Guidelines:
      • Naming Conventions
      • Props Interface Design
      • Styling Best Practices
    • API Integration:
      • API Client Setup
      • React Query Usage
      • Error Handling
      • Testing Guidelines:
      • Unit Test Examples
      • Integration Test Examples
      • E2E Test Examples
    • Deployment Guide:
      • Build Process
      • Environment Variables
      • Docker Configuration

  • Format: Markdown (ใน /docs Folder)

  • Deliverable: ✅ Dev Docs พร้อม

  • T11.4 Deployment Preparation

  • Production Build:

    npm run build
    • ตรวจสอบ Build Output
    • แก้ไข Build Errors/Warnings

  • Environment Variables:

    • สร้างไฟล์ .env.production

    • กำหนดค่าใน docker-compose.yml:

      environment:
  - NEXT_PUBLIC_API_URL=https://backend.np-dms.work/api
  - NEXTAUTH_URL=https://lcbp3.np-dms.work
  - NEXTAUTH_SECRET=${NEXTAUTH_SECRET}

  • Docker Image:

    • Build Image:

      docker build -t lcbp3-frontend:v1.0.0 .

    • Test Image Locally

  • Deliverable: ✅ Production Build พร้อม

  • T11.5 Deploy to QNAP

  • Upload Image to QNAP:

    • Export Image:

      docker save lcbp3-frontend:v1.0.0 > frontend.tar

    • Upload ผ่าน QNAP File Station

    • Import ใน Container Station

  • Update docker-compose.yml บน QNAP:

    services:
  frontend:
    image: lcbp3-frontend:v1.0.0
    container_name: frontend
    networks:
      - lcbp3
    environment:
      - NEXT_PUBLIC_API_URL=https://backend.np-dms.work/api
      - NEXTAUTH_URL=https://lcbp3.np-dms.work
      - NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
    restart: unless-stopped

  • Start Container:

    • รันผ่าน Container Station UI
    • ตรวจสอบ Logs

  • Deliverable: ✅ Frontend รันบน Production

  • T11.6 Configure Nginx Proxy Manager

  • เพิ่ม Proxy Host ใหม่:

    • Domain: lcbp3.np-dms.work
    • Forward to: frontend:3000
    • Enable Websocket Support
    • Enable SSL (Let's Encrypt)
    • Force HTTPS

  • ทดสอบเข้าถึงผ่าน HTTPS

  • Deliverable: ✅ HTTPS พร้อมใช้

  • T11.7 Monitoring & Health Check

  • สร้าง Health Check Endpoint (ถ้า Backend ยังไม่มี):

    // app/api/health/route.ts
export async function GET() {
  return Response.json({ status: 'ok', timestamp: new Date().toISOString() });
}

  • Setup Monitoring:

    • QNAP Container Resource Monitor
    • Log Aggregation (ถ้ามี)

  • Deliverable: ✅ Monitoring Setup

  • T11.8 User Acceptance Testing (UAT)

  • เตรียม UAT Checklist:

    • ✅ ล็อกอินได้ทุก Role
    • ✅ สร้าง Correspondence ได้
    • ✅ สร้าง RFA และ Start Workflow ได้
    • ✅ Workflow อนุมัติได้ถูกต้อง
    • ✅ สร้าง Circulation และมอบหมายงานได้
    • ✅ อัปโหลดไฟล์ได้
    • ✅ ค้นหาเอกสารได้
    • ✅ สร้างรายงานได้
    • ✅ Admin จัดการผู้ใช้และสิทธิ์ได้

  • เชิญ Stakeholders ทดสอบ

  • เก็บ Feedback

  • แก้ไข Bugs/Issues

  • Deliverable: ✅ UAT ผ่าน

  • T11.9 Training & Handover

  • จัด Workshop สำหรับผู้ใช้งาน:

    • Session 1: Basic Users (2 ชม.):
      • วิธีใช้ Dashboard
      • วิธีสร้างและจัดการเอกสาร
      • วิธีตอบกลับ Circulation
    • Session 2: Document Control (2 ชม.):
      • วิธีจัดการเอกสารขั้นสูง
      • วิธีควบคุม Workflow
      • วิธีดู Reports
    • Session 3: Admin (2 ชม.):
      • วิธีจัดการผู้ใช้และสิทธิ์
      • วิธีจัดการ Master Data
      • วิธีตั้งค่า Document Numbering

  • บันทึก Video Training (Optional)

  • Deliverable: ✅ Users ใช้งานเป็น

📊 สรุป Timeline

Phase ระยะเวลา จำนวนงาน Output หลัก
Phase 0 1 สัปดาห์ 6 Infrastructure Ready
Phase 1 2 สัปดาห์ 8 Auth & App Shell
Phase 2 1 สัปดาห์ 3 Dashboard & Components
Phase 3 2 สัปดาห์ 4 Correspondence Management
Phase 4 2 สัปดาห์ 5 RFA & Workflow
Phase 5 1 สัปดาห์ 4 Drawing Management
Phase 6 1 สัปดาห์ 5 Circulation & Transmittal
Phase 7 1 สัปดาห์ 4 Search & Reports
Phase 8 2 สัปดาห์ 6 Admin Panel
Phase 9 1 สัปดาห์ 2 Profile & Settings
Phase 10 2 สัปดาห์ 8 Testing & Optimization
Phase 11 1 สัปดาห์ 9 Documentation & Deploy
รวม 17 สัปดาห์ 64 Tasks Production-Ready Frontend

🎯 Critical Success Factors

  1. API Contract: รอ Backend Swagger Documentation ก่อนเริ่ม Phase 3
  2. Design System: สร้าง Design System ใน Figma ก่อนเริ่ม Phase 1
  3. Component Library: สร้าง Reusable Components ให้ครบใน Phase 2 ก่อนไปต่

🎯 Critical Success Factors (ต่อ)

  1. Mobile-First Approach: ออกแบบ Mobile ก่อน แล้วค่อย Scale up เป็น Desktop
  2. Accessibility: ทดสอบ Keyboard Navigation และ Screen Reader ทุก Phase
  3. Performance Budget:
    • Initial Load < 3s
    • Time to Interactive < 5s
    • Bundle Size < 500KB (gzipped)
  4. User Feedback Loop: ทำ Usability Testing ทุก 2 สัปดาห์
  5. Code Quality: Code Review ทุก PR, ห้าม Merge โดยไม่มี Tests

🔄 Dependencies & Integration Points

Backend Dependencies (Critical Path)

Frontend Feature Required Backend API Blocker Phase
Login POST /auth/login Phase 1
Dashboard GET /api/circulations/my-tasks Phase 2
Correspondence CRUD /api/correspondences/* Phase 3
RFA Workflow /api/rfas/*/workflow/* Phase 4
Drawing Management /api/drawings/* Phase 5
Circulation /api/circulations/* Phase 6
Search GET /api/search (Elasticsearch) Phase 7
Reports /api/reports/* Phase 7
User Management /api/users/*, /api/roles/* Phase 8

รอเอกสาร Swagger ให้ครบก่อน Phase 3 เพื่อหลีกเลี่ยงการแก้ไขซ้ำ

🛠️ Development Workflow

Daily Routine

09:00-09:15  Daily Standup (อะไรทำเสร็จ, จะทำอะไร, มีอุปสรรคอะไร)
09:15-12:00  Development (Focus Time)
12:00-13:00  Lunch
13:00-16:00  Development + Code Review
16:00-16:30  Testing (Manual + Automated)
16:30-17:00  Documentation + Git Commit

Git Workflow

# Feature Branch Strategy
git checkout -g develop
git pull origin develop
git checkout -b feature/T3.1-correspondence-list

# Work on Feature...
git add .
git commit -m "feat(correspondence): implement list page with filters

- Add DataTable component
- Implement server-side pagination
- Add filters for type, status, date range
- Add search functionality

Closes #T3.1"

# Push และสร้าง Pull Request
git push origin feature/T3.1-correspondence-list

Commit Message Convention

<type>(<scope>): <subject>

<body>

<footer>

  • Types:

  • feat: ฟีเจอร์ใหม่

  • fix: แก้ bug

  • docs: เอกสาร

  • style: Formatting (ไม่เปลี่ยน logic)

  • refactor: Refactor code

  • test: เพิ่ม tests

  • chore: งานอื่นๆ (build, dependencies)

Example:

feat(rfa): implement workflow visualization component

- Add timeline-style workflow display
- Implement step completion actions
- Add admin override functionality
- Integrate with RFA workflow API

Closes #T4.3

🧪 Testing Strategy

Testing Pyramid

        E2E (10%)           <- Playwright
       /         \
      /           \
     /             \
  Integration (30%) <- RTL + MSW
  /                 \
 /                   \
Unit Tests (60%)     <- Vitest

Test Coverage Goals

Area Target Coverage Priority
Utilities 90% High
Hooks 80% High
Components 70% Medium
Pages 50% Low

Testing Checklist (ต่อ Phase)

Phase 1-2: Foundation

  • ✅ Auth Store Tests
  • ✅ API Client Interceptors Tests
  • ✅ DataTable Component Tests

Phase 3-6: Features

  • ✅ Correspondence Form Validation Tests
  • ✅ RFA Workflow State Machine Tests
  • ✅ File Upload Component Tests
  • ✅ Integration Test: Create Correspondence Flow

Phase 7-9: Advanced

  • ✅ Search Filters Tests
  • ✅ Report Generation Tests
  • ✅ RBAC Permission Guard Tests

Phase 10: E2E

  • ✅ E2E: Login → Dashboard → Create RFA → Complete Workflow
  • ✅ E2E: Search → View Result → Edit → Verify Changes

📱 Responsive Design Guidelines

Breakpoints (Tailwind Default)

const breakpoints = {
  sm: '640px',   // Mobile Landscape
  md: '768px',   // Tablet Portrait
  lg: '1024px',  // Tablet Landscape / Desktop
  xl: '1280px',  // Desktop
  '2xl': '1536px' // Large Desktop
};

Component Responsive Patterns

Sidebar:

// Desktop: Fixed Sidebar
// Mobile: Collapsible (Hamburger Menu)

<aside className="hidden lg:block w-64 bg-gray-50">
  {/* Sidebar Content */}
</aside>

{/* Mobile Sidebar (Sheet) */}
<Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
  <SheetContent side="left">
    {/* Sidebar Content */}
  </SheetContent>
</Sheet>

DataTable:

// Desktop: Full Table
// Mobile: Card List

<div className="hidden md:block">
  <Table>...</Table>
</div>

<div className="md:hidden space-y-4">
  {data.map(item => (
    <Card key={item.id}>
      {/* Card View */}
    </Card>
  ))}
</div>

Form Layout:

// Desktop: 2-Column Grid
// Mobile: 1-Column Stack

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
  <Input label="First Name" />
  <Input label="Last Name" />
</div>

🎨 Design System

Color Palette (ตาม Brand)

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          // ... (Blue Scale)
          900: '#1e3a8a',
        },
        success: {
          // Green Scale
        },
        warning: {
          // Yellow Scale
        },
        danger: {
          // Red Scale
        },
        neutral: {
          // Gray Scale
        },
      },
    },
  },
};

Typography Scale

const typography = {
  h1: 'text-4xl font-bold',      // Headings
  h2: 'text-3xl font-bold',
  h3: 'text-2xl font-semibold',
  h4: 'text-xl font-semibold',
  body: 'text-base',             // Body Text
  small: 'text-sm',              // Helper Text
  xs: 'text-xs',                 // Captions
};

Spacing Scale (Tailwind Default)

4px   = space-1
8px   = space-2
12px  = space-3
16px  = space-4  <- Base Unit
24px  = space-6
32px  = space-8
48px  = space-12
64px  = space-16

Component Variants

Button:

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Badge (Status):

<Badge variant="draft">Draft</Badge>        // Gray
<Badge variant="submitted">Submitted</Badge> // Blue
<Badge variant="approved">Approved</Badge>   // Green
<Badge variant="rejected">Rejected</Badge>   // Red
<Badge variant="pending">Pending</Badge>     // Yellow

🔐 Security Best Practices

1. XSS Prevention

// ❌ Dangerous
<div dangerouslySetInnerHTML={{ __html: userInput }} />

// ✅ Safe (Auto-escaping)
<div>{userInput}</div>

// ✅ Safe (DOMPurify for Rich Text)
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(richText) }} />

2. Authentication Token Storage

// ❌ ห้ามเก็บใน localStorage (ถ้ามี XSS จะโดนขโมย)
localStorage.setItem('token', token);

// ✅ ใช้ HttpOnly Cookie (ผ่าน NextAuth)
// หรือใช้ Memory (Zustand persist แต่ไม่เก็บ Token)
const useAuthStore = create(
  persist(
    (set) => ({
      user: null,
      // ไม่เก็บ token ใน state
    }),
    { name: 'auth-storage' }
  )
);

3. API Request Security

// ✅ ใส่ Token ใน Header (ไม่ใช่ URL)
apiClient.interceptors.request.use((config) => {
  const token = getToken(); // จาก Cookie หรือ Auth Provider
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

4. CSRF Protection

// NextAuth จัดการให้อัตโนมัติ
// ตรวจสอบว่า csrfToken ถูกส่งไปกับทุก Request

5. Input Validation

// ✅ Validate ทั้ง Frontend และ Backend
const formSchema = z.object({
  email: z.string().email('รูปแบบอีเมลไม่ถูกต้อง'),
  password: z.string().min(8, 'รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร'),
  title: z.string().max(255, 'ชื่อเรื่องยาวเกินไป'),
});

⚡ Performance Optimization Techniques

1. Code Splitting

// ✅ Dynamic Import สำหรับ Heavy Components
import dynamic from 'next/dynamic';

const WorkflowVisualizer = dynamic(
  () => import('@/components/features/rfa/workflow-visualizer'),
  { 
    loading: () => <Skeleton className="h-96" />,
    ssr: false // ถ้าไม่ต้องการ SSR
  }
);

2. Image Optimization

// ✅ ใช้ Next.js Image Component
import Image from 'next/image';

<Image
  src="/logo.png"
  alt="LCBP3 Logo"
  width={200}
  height={50}
  priority // สำหรับรูปสำคัญ (Above the fold)
/>

3. Data Fetching Optimization

// ✅ Prefetch ข้อมูลที่คาดว่าจะใช้
const queryClient = useQueryClient();

const handleMouseEnter = () => {
  queryClient.prefetchQuery({
    queryKey: ['correspondence', id],
    queryFn: () => fetchCorrespondence(id),
  });
};

<Link href={`/correspondences/${id}`} onMouseEnter={handleMouseEnter}>
  View Details
</Link>

4. Debounce Search Input

import { useDebouncedValue } from '@/lib/hooks/use-debounced-value';

const [searchQuery, setSearchQuery] = useState('');
const debouncedQuery = useDebouncedValue(searchQuery, 500);

// Query จะรันเมื่อผู้ใช้หยุดพิมพ์ 500ms
const { data } = useSearch({ q: debouncedQuery });

5. Virtual Scrolling (สำหรับรายการยาวมาก)

import { useVirtualizer } from '@tanstack/react-virtual';

const parentRef = useRef<HTMLDivElement>(null);

const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 50,
});

<div ref={parentRef} className="h-96 overflow-auto">
  <div style={{ height: `${virtualizer.getTotalSize()}px` }}>
    {virtualizer.getVirtualItems().map((virtualItem) => (
      <div key={virtualItem.key} style={{ height: `${virtualItem.size}px` }}>
        {items[virtualItem.index].name}
      </div>
    ))}
  </div>
</div>

🌐 Internationalization (i18n) - Future Enhancement

// lib/i18n/config.ts
export const locales = ['th', 'en'] as const;
export const defaultLocale = 'th';

// messages/th.json
{
  "common": {
    "save": "บันทึก",
    "cancel": "ยกเลิก",
    "delete": "ลบ"
  },
  "correspondence": {
    "create": "สร้างเอกสาร",
    "title": "ชื่อเรื่อง"
  }
}

// Usage
import { useTranslation } from 'next-intl';

const { t } = useTranslation();
<Button>{t('common.save')}</Button>

📦 Build & Deployment Optimization

Dockerfile (Production-Optimized)

# Stage 1: Dependencies
FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

# Stage 2: Build
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Stage 3: Production
FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

next.config.js (Production)

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone', // สำหรับ Docker
  reactStrictMode: true,
  swcMinify: true, // ใช้ SWC แทน Terser (เร็วกว่า)
  
  // Image Optimization
  images: {
    domains: ['backend.np-dms.work'], // ถ้ามี Image จาก Backend
    formats: ['image/webp'],
  },
  
  // Compression
  compress: true,
  
  // Security Headers
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Environment Variables Management

# docker-compose.yml
services:
  frontend:
    image: lcbp3-frontend:v1.0.0
    container_name: frontend
    networks:
      - lcbp3
    environment:
      # Public (ถูก Replace ตอน Build)
      - NEXT_PUBLIC_API_URL=https://backend.np-dms.work/api
      
      # Server-side Only
      - NEXTAUTH_URL=https://lcbp3.np-dms.work
      - NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
      - DATABASE_URL=mysql://user:pass@mariadb:3306/dms_db
    restart: unless-stopped
    healthcheck:
      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:3000/api/health"]
      interval: 30s
      timeout: 10s
      retries: 3

📊 Monitoring & Analytics (Future Enhancement)

1. Performance Monitoring

// lib/monitoring/web-vitals.ts
import { onCLS, onFID, onFCP, onLCP, onTTFB } from 'web-vitals';

export function reportWebVitals() {
  onCLS((metric) => sendToAnalytics(metric));
  onFID((metric) => sendToAnalytics(metric));
  onFCP((metric) => sendToAnalytics(metric));
  onLCP((metric) => sendToAnalytics(metric));
  onTTFB((metric) => sendToAnalytics(metric));
}

function sendToAnalytics(metric: any) {
  // ส่งไปยัง Analytics Service (เช่น Google Analytics, Plausible)
  console.log(metric);
}

2. Error Tracking

// lib/monitoring/error-tracking.ts
export function setupErrorTracking() {
  if (typeof window !== 'undefined') {
    window.addEventListener('error', (event) => {
      // ส่ง Error ไปยัง Logging Service
      logError({
        message: event.message,
        stack: event.error?.stack,
        timestamp: new Date().toISOString(),
      });
    });
  }
}

🚀 Go-Live Checklist

Pre-Launch (1 สัปดาห์ก่อน)

  • UAT ผ่านทั้งหมด
  • Performance Audit (Lighthouse Score > 90)
  • Security Audit (OWASP Top 10)
  • Accessibility Audit (WCAG 2.1 AA)
  • Browser Testing (Chrome, Firefox, Safari, Edge)
  • Mobile Testing (iOS, Android)
  • Load Testing (จำลอง 100+ Users พร้อมกัน)
  • Backup & Rollback Plan พร้อม
  • Monitoring & Alerting Setup
  • Documentation ครบถ้วน

Launch Day

  • Deploy ตอน Off-Peak Hours (เช่น 02:00 AM)
  • Health Check ทุก Service
  • Smoke Test: Critical User Flows
  • Monitor Logs & Metrics (Real-time)
  • Standby Team (Backend + Frontend) พร้อมแก้ไข Hot-fix
  • แจ้ง Users ผ่าน Email/Line

Post-Launch (1 สัปดาห์หลัง)

  • Monitor Error Rates
  • Monitor Performance Metrics
  • Collect User Feedback
  • Fix Critical Bugs (Priority 1)
  • Plan Next Iteration

🔄 Maintenance & Support Plan

Daily

  • ✅ ตรวจสอบ Error Logs
  • ✅ ตรวจสอบ Performance Metrics
  • ✅ รับ User Feedback/Bug Reports

Weekly

  • ✅ Review Open Issues
  • ✅ Plan Bug Fixes & Minor Features
  • ✅ Update Dependencies (Security Patches)

Monthly

  • ✅ Review Analytics (Usage Patterns)
  • ✅ Plan Major Features
  • ✅ Refactor Code (Technical Debt)
  • ✅ Update Documentation

Quarterly

  • ✅ Major Version Update (Next.js, React)
  • ✅ Performance Audit
  • ✅ Security Audit
  • ✅ User Training Refresh

📈 Success Metrics (KPIs)

Technical Metrics

Metric Target Measurement
Page Load Time < 3s Lighthouse
Time to Interactive < 5s Lighthouse
Core Web Vitals All Green Google Search Console
Uptime 99.9% QNAP Monitor
Error Rate < 0.1% Logs
Test Coverage > 70% Vitest

User Metrics

Metric Target Measurement
User Adoption 90% (ภายใน 3 เดือน) Analytics
Daily Active Users 50+ Analytics
Task Completion Rate > 85% User Testing
User Satisfaction > 4.0/5.0 Survey
Support Tickets < 10/week Helpdesk

🎓 Learning Resources for Team

Next.js & React

TanStack Query

shadcn/ui

Tailwind CSS

Testing

📞 Support & Communication Channels

Development Team

  • Daily Standup: ทุกวัน 09:00 AM (15 นาที)
  • Weekly Sprint Review: ทุกศุกร์ 16:00 PM (1 ชม.)
  • Slack Channel: #lcbp3-frontend
  • Code Review: ใน Gitea Pull Requests

Stakeholders

  • Bi-weekly Demo: ทุกสองสัปดาห์ (ศุกร์ 14:00)
  • Monthly Report: ส่งทุกต้นเดือน
  • Email: project-lcbp3@example.com

✅ Next Steps

  1. Week 1: Setup Phase 0 (Infrastructure)
  2. Week 2-3: Phase 1 (Auth & App Shell)
  3. Week 4: Phase 2 (Dashboard)
  4. Week 5-17: Continue ตาม Timeline
  5. Daily: Update Progress ใน Project Management Tool

สิ้นสุดแผนการพัฒนา Frontend 🎉

Reference in New Issue View Git Blame Copy Permalink