260220:1504 20260220 TASK-BEFE-001 Refactor by ADR-014

specs/00-overview/README.md

@@ -1,9 +1,9 @@
 # LCBP3-DMS - Project Overview
 
 **Project Name:** Laem Chabang Port Phase 3 - Document Management System (LCBP3-DMS)
-**Version:** 1.6.0
+**Version:** 1.8.0
 **Status:** Active Development (~95% Complete)
-**Last Updated:** 2025-12-13
+**Last Updated:** 2026-02-20
 
 ---
 
@@ -140,8 +140,9 @@ LCBP3-DMS is a comprehensive Document Management System (DMS) designed specifica
 - **Language:** TypeScript
 - **Styling:** Tailwind CSS
 - **UI Components:** Shadcn/UI
-- **State Management:** React Context / Zustand
-- **Forms:** React Hook Form + Zod
+- **Server State:** TanStack Query
+- **Client State:** Zustand
+- **Form State:** React Hook Form + Zod
 - **API Client:** Axios
 
 ### Infrastructure
@@ -384,10 +385,10 @@ lcbp3/
 
 ## 📝 Document Control
 
-- **Version:** 1.7.0
+- **Version:** 1.8.0
 - **Status:** Active Development
-- **Last Updated:** 2025-12-18
-- **Next Review:** 2026-01-01
+- **Last Updated:** 2026-02-20
+- **Next Review:** 2026-03-31
 - **Owner:** System Architect
 - **Classification:** Internal Use Only
 
@@ -397,6 +398,8 @@ lcbp3/
 
 | Version | Date       | Description                                |
 | ------- | ---------- | ------------------------------------------ |
+| 1.8.0   | 2026-02-20 | Contract Categories Page Crash Fix         |
+| 1.7.0   | 2025-12-18 | Schema refactoring, documentation updated  |
 | 1.6.0   | 2025-12-13 | Schema refactoring, documentation updated  |
 | 1.5.1   | 2025-12-09 | TASK-FE-011/012 completed, docs updated    |
 | 1.5.1   | 2025-12-02 | Reorganized documentation structure        |

specs/02-architecture/README.md

@@ -10,9 +10,9 @@
 
 | Attribute          | Value                            |
 | ------------------ | -------------------------------- |
-| **Version**        | 1.7.0                            |
+| **Version**        | 1.8.0                            |
 | **Status**         | Active                           |
-| **Last Updated**   | 2025-12-18                       |
+| **Last Updated**   | 2026-02-20                       |
 | **Owner**          | Nattanin Peancharoen             |
 | **Classification** | Internal Technical Documentation |
 
@@ -200,7 +200,9 @@ Layer 6: File Security (Virus Scanning, Access Control)
 | **Language**         | TypeScript (ESM)                 | Type-safe JavaScript         |
 | **Styling**          | Tailwind CSS + PostCSS           | Utility-first CSS            |
 | **Components**       | shadcn/ui                        | Accessible Component Library |
-| **State Management** | TanStack Query + React Hook Form | Server State + Form State    |
+| **Server State**     | TanStack Query                   | Server State Management      |
+| **Client State**     | Zustand                          | Client State Management      |
+| **Form State**       | React Hook Form + Zod            | Form State Management        |
 | **Validation**       | Zod                              | Schema Validation            |
 | **Testing**          | Vitest + Playwright              | Unit + E2E Testing           |
 
@@ -340,7 +342,7 @@ graph TB
         MariaDB[(MariaDB 11.8<br/>Primary Database)]
         Redis[(Redis<br/>Cache + Queue)]
         Elastic[Elasticsearch<br/>Search Engine]
-        Storage[File Storage<br/>/share/dms-data]
+        Storage[File Storage<br/>/share/np-dms/data/]
     end
 
     subgraph "Integration Layer"
@@ -490,7 +492,7 @@ sequenceDiagram
 
 <div align="center">
 
-**LCBP3-DMS Architecture Specification v1.6.0**
+**LCBP3-DMS Architecture Specification v1.8.0**
 
 [System Architecture](02-01-system-architecture.md) • [API Design](02-02-api-design.md) • [Data Model](02-03-data-model.md)
 

specs/05-decisions/ADR-014-state-management.md

@@ -93,7 +93,7 @@
 
 ## Decision Outcome
 
-**Chosen Option:** **Zustand (Client State) + Native Fetch with Server Components (Server State)**
+**Chosen Option:** **Zustand (Client State) + TanStack Query (Server State) + React Hook Form + Zod (Form State)**
 
 ### Rationale
 
@@ -103,8 +103,12 @@
 
 **For Server State (API data):**
 
-- Use **Server Components** + **SWR** (เฉพาะที่จำเป็น)
-- Server Components ดึงข้อมูลฝั่ง Server ไม่ต้องจัดการ state
+- Use **TanStack Query** (React Query) สำหรับ data fetching, caching, synchronization
+- Server Components สำหรับ initial data loading
+
+**For Form State:**
+
+- Use **React Hook Form + Zod** สำหรับ type-safe form management
 
 ---
 
@@ -253,38 +257,35 @@ export default async function CorrespondencesPage() {
 }
 ```
 
-### 6. Client-Side Fetching (with SWR for real-time data)
+### 6. Client-Side Fetching (with TanStack Query)
 
 ```bash
-npm install swr
+npm install @tanstack/react-query
 ```
 
 ```typescript
-// File: components/correspondences/realtime-list.tsx
+// File: components/correspondences/correspondence-list.tsx
 'use client';
 
-import useSWR from 'swr';
+import { useQuery } from '@tanstack/react-query';
+import { getCorrespondences } from '@/lib/api/correspondences';
 
-const fetcher = (url: string) => fetch(url).then((r) => r.json());
-
-export function RealtimeCorrespondenceList() {
-  const { data, error, isLoading, mutate } = useSWR(
-    '/api/correspondences',
-    fetcher,
-    {
-      refreshInterval: 30000, // Auto refresh every 30s
-    }
-  );
+export function CorrespondenceList() {
+  const { data, error, isLoading, refetch } = useQuery({
+    queryKey: ['correspondences'],
+    queryFn: getCorrespondences,
+    refetchInterval: 30000, // Auto refresh every 30s
+  });
 
   if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error loading data</div>;
 
   return (
     <div>
-      {data.map((item) => (
+      {data?.map((item) => (
         <div key={item.id}>{item.subject}</div>
       ))}
-      <button onClick={() => mutate()}>Refresh</button>
+      <button onClick={() => refetch()}>Refresh</button>
     </div>
   );
 }
@@ -347,14 +348,16 @@ export const useUIStore = create<UIState>()(
 - SEO-important content
 - Data that doesn't need real-time updates
 
-### When to Use SWR (Client-Side Server State)
+### When to Use TanStack Query (Client-Side Server State)
 
-✅ Use SWR for:
+✅ Use TanStack Query for:
 
 - Real-time data (notifications count)
 - Polling/Auto-refresh data
 - User-specific data that changes often
 - Optimistic UI updates
+- Complex cache invalidation
+- Paginated/infinite scroll data
 
 ---
 
@@ -392,9 +395,10 @@ export const useUIStore = create<UIState>()(
 ## References
 
 - [Zustand Documentation](https://github.com/pmndrs/zustand)
-- [SWR Documentation](https://swr.vercel.app/)
+- [TanStack Query Documentation](https://tanstack.com/query/latest)
+- [React Hook Form Documentation](https://react-hook-form.com/)
 
 ---
 
-**Last Updated:** 2025-12-01
+**Last Updated:** 2026-02-20
 **Next Review:** 2026-06-01