117 lines
3.2 KiB
Markdown
117 lines
3.2 KiB
Markdown
# 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)
|