251209:0000 Backend Test stagenot finish & Frontend add Task 013-015

specs/06-tasks/TASK-FE-014-reference-data-ui.md

@@ -0,0 +1,116 @@
+# TASK-FE-014: Reference Data & Lookups UI
+
+**ID:** TASK-FE-014
+**Title:** Reference Data & Lookups Management UI
+**Category:** Administration
+**Priority:** P3 (Low)
+**Effort:** 3-5 days
+**Dependencies:** TASK-FE-010, TASK-BE-012
+**Assigned To:** Frontend Developer
+
+---
+
+## 📋 Overview
+
+Build a generic or specific UI for managing various system lookup tables (Master Data) that are essential for the application but change infrequently. This includes Disciplines, Drawing Categories, RFA Types, and Tags.
+
+---
+
+## 🎯 Objectives
+
+1. Manage **Correspondence Types** (and Sub-types)
+2. Manage **RFA Types** and associated **Approve Codes**
+3. Manage **Drawing Categories** (Main & Sub-categories)
+4. Manage **Disciplines** (System-wide codes)
+5. Manage **Tags** and other minor lookups
+
+---
+
+## ✅ Acceptance Criteria
+
+- [ ] Admin can create/edit/delete Correspondence Types
+- [ ] Admin can manage RFA Types and their Approve Codes
+- [ ] Admin can configure Drawing Categories (Main/Sub)
+- [ ] Admin can manage Disciplines (Code & Name)
+- [ ] UI supports "Soft Delete" (Active/Inactive toggle)
+- [ ] Updates reflect immediately in dropdowns across the system
+
+---
+
+## 🔧 Implementation Steps
+
+### Step 1: Specific Lookup Pages vs Generic Table
+
+Since these tables have similar structures (Code, Name, Description, IsActive), you can either build:
+A. **Generic Master Data Component** (Recommended for simple tables)
+B. **Dedicated Pages** for complex relations (like Categories -> Sub-categories)
+
+#### Recommended Approach
+
+- **Dedicated Page:** for RFA Types (due to relationship with Approve Codes)
+- **Dedicated Page:** for Drawing Categories (Hierarchical)
+- **Generic/Shared Page:** for Disciplines, Tags, Correspondence Types
+
+### Step 2: RFA Configuration Page
+
+```typescript
+// File: src/app/(admin)/admin/reference/rfa-types/page.tsx
+'use client';
+
+import { useState } from 'react';
+import { DataTable } from '@/components/common/data-table';
+import { Button } from '@/components/ui/button';
+// ... imports
+
+export default function RfaConfigPage() {
+  const [types, setTypes] = useState([]);
+
+  // Columns: Code, Name, Contract, Active Status, Actions
+
+  return (
+     <div className="p-6">
+        <div className="flex justify-between mb-6">
+           <h1 className="text-2xl font-bold">RFA Types Configuration</h1>
+           <Button>Add Type</Button>
+        </div>
+        <DataTable data={types} columns={/*...*/} />
+     </div>
+  );
+}
+```
+
+### Step 3: Disciplines Management
+
+```typescript
+// File: src/app/(admin)/admin/reference/disciplines/page.tsx
+'use client';
+
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+
+// Simple table to manage 'disciplines'
+// Fields: discipline_code, code_name_th, code_name_en
+```
+
+### Step 4: Drawing Categories (Hierarchy)
+
+```typescript
+// File: src/app/(admin)/admin/reference/drawing-categories/page.tsx
+// Needs to handle Main Category -> Sub Category relationship
+```
+
+---
+
+## 📦 Deliverables
+
+- [ ] RFA Types Management Page
+- [ ] Drawing Categories Management Page
+- [ ] Disciplines Management Page
+- [ ] Correspondence Types Management Page
+- [ ] Unified "Reference Data" Sidebar Group
+
+---
+
+## 🔗 Related Documents
+
+- [TASK-BE-012: Master Data Management](./TASK-BE-012-master-data-management.md)