251208:0010 Backend & Frontend Debug

2025-12-08 00:10:37 +07:00
parent 32d820ea6b
commit dcd126d704
99 changed files with 2775 additions and 1480 deletions
--- a/specs/09-history/2025-12-07_p4-fe-dashboard-admin.md
+++ b/specs/09-history/2025-12-07_p4-fe-dashboard-admin.md
@@ -0,0 +1,278 @@
+# Walkthrough - Authentication & RBAC Implementation (TASK-FE-002)
+
+**Goal:** Implement robust Authentication UI, Role-Based Access Control (RBAC) helpers, and polish the Login experience.
+
+## ✅ Changes Implemented
+
+### 1. State Management (Auth Store)
+Created `frontend/lib/stores/auth-store.ts` using **Zustand**.
+- Manages `user`, `token`, and `isAuthenticated` state.
+- Provides `hasPermission()` and `hasRole()` helpers.
+- Uses `persist` middleware to save state to LocalStorage.
+
+### 2. RBAC Component (`<Can />`)
+Created `frontend/components/common/can.tsx`.
+- Conditionally renders children based on permissions.
+- **Usage:**
+  ```tsx
+  <Can permission="document:create">
+    <Button>Create Document</Button>
+  </Can>
+  ```
+
+### 3. Login Page Polish
+Refactored `frontend/app/(auth)/login/page.tsx`.
+- **Removed** inline error alerts.
+- **Added** `sonner` Toasts for success/error messages.
+- Improved UX with clear loading states and feedback.
+
+### 4. Global Toaster
+- Installed `sonner` and `next-themes`.
+- Created `frontend/components/ui/sonner.tsx` (Shadcn/UI wrapper).
+- Added `<Toaster />` to `frontend/app/layout.tsx`.
+
+### 5. Session Sync (`AuthSync`)
+Created `frontend/components/auth/auth-sync.tsx`.
+- Listens to NextAuth session changes.
+- Updates Zustand `auth-store` automatically.
+- Ensures `useAuthStore` is always in sync with server session.
+
+## 🧪 Verification Steps
+
+1.  **Session Sync Test:**
+    - Login to the app.
+    - Go to `/dashboard/can`.
+    - Verify "Current User Info" shows your username and role (NOT "Not logged in").
+
+2.  **Toast Test:**
+    - On `/dashboard/can`, click "Trigger Success Toast".
+    - Verify a green success toast appears.
+    - Click "Trigger Error Toast".
+    - Verify a red error toast appears.
+
+3.  **Permission Test:**
+    - Go to `/login`.
+    - Try invalid password -> Expect **Toast Error**.
+    - Try valid password -> Expect **Toast Success** and redirect.
+2.  **Permission Test:**
+    - Use the `<Can />` component in any page.
+    - `useAuthStore.getState().setAuth(...)` with a user role.
+    - Verify elements show/hide correctly.
+
+## 📸 Screenshots
+*(No visual artifacts generated in this session, please run locally to verify UI)*
+
+# Correspondence Module Integration (TASK-FE-004)
+
+**Status:** ✅ Completed
+**Date:** 2025-12-07
+
+## 🚀 Changes Implemented
+
+### 1. Service Layer & API
+- **Removed:** `frontend/lib/api/correspondences.ts` (Mock API)
+- **Updated:** `frontend/lib/services/master-data.service.ts` to include `getOrganizations`
+- **Verified:** `frontend/lib/services/correspondence.service.ts` uses `apiClient` correctly.
+
+### 2. State Management (TanStack Query)
+- **Created:** `frontend/hooks/use-correspondence.ts`
+  - `useCorrespondences`: Fetch list with pagination
+  - `useCreateCorrespondence`: Mutation for creation
+- **Created:** `frontend/hooks/use-master-data.ts`
+  - `useOrganizations`: Fetch master data for dropdowns
+
+### 3. UI Components
+- **List Page:** Converted to Client Component using `useCorrespondences`.
+- **Create Form:** Integrated `useCreateCorrespondence` and `useOrganizations` for real data submission and dynamic dropdowns.
+
+## 🧪 Verification Steps (Manual)
+
+### 1. Verify API Connection
+- Ensure Backend is running.
+- Go to `/correspondences`.
+- Check Network Tab: Request to `GET /api/correspondences` should appear.
+
+### 2. Verify Master Data
+- Go to `/correspondences/new`.
+- Check "From/To Organization" dropdowns.
+- They should populate from `GET /api/organizations`.
+
+### 3. Verify Create Workflow
+- Fill form and Submit.
+- Toast success should appear.
+- Redirect to list page.
+- New item should appear (if `invalidateQueries` worked).
+
+# RFA Module Integration (TASK-FE-006)
+
+**Status:** ✅ Completed
+**Date:** 2025-12-07
+
+## 🚀 Changes Implemented
+
+### 1. Service Layer & API
+- **Removed:** `frontend/lib/api/rfas.ts` (Mock API)
+- **Updated:** `frontend/lib/services/master-data.service.ts` to include `getDisciplines`.
+
+### 2. State Management (TanStack Query)
+- **Created:** `frontend/hooks/use-rfa.ts`
+  - `useRFAs`, `useRFA`, `useCreateRFA`, `useProcessRFA`.
+- **Updated:** `frontend/hooks/use-master-data.ts` to include `useDisciplines`.
+
+### 3. UI Components
+- **List Page (`/rfas/page.tsx`):** Converted to Client Component using `useRFAs`.
+- **Create Form:** Uses `useCreateRFA` and `useDisciplines`.
+- **Detail View:** Uses `useRFA` and `useProcessRFA` (for Approve/Reject).
+- **Hooks:** All forms now submit real data via `rfaService`.
+
+## 🧪 Verification Steps (Manual)
+
+### 1. RFA List
+- Go to `/rfas`.
+- Pagination and List should load from Backend.
+
+### 2. Create RFA
+- Go to `/rfas/new`.
+- "Discipline" dropdown should load real data.
+- "Contract" defaults to ID 1 (mock/placeholder in code).
+- Fill items and Submit. Success Toast should appear.
+
+### 3. Workflow Action
+- Open an RFA Detail (`/rfas/1`).
+- Click "Approve" or "Reject".
+- Dialog appears, enter comment, confirm.
+- Status badge should update after refresh/invalidation.
+
+# Search Module Integration (TASK-FE-008)
+
+**Status:** ✅ Completed
+**Date:** 2025-12-07
+
+## 🚀 Changes Implemented
+
+### 1. Service Layer & API
+- **Removed:** `frontend/lib/api/search.ts` (Mock API)
+- **Updated:** `frontend/lib/services/search.service.ts` to include `suggest` (via `search` endpoint with limit).
+
+### 2. Custom Hooks
+- **Created:** `frontend/hooks/use-search.ts`
+  - `useSearch`: For full search results with caching.
+  - `useSearchSuggestions`: For autocomplete in global search.
+
+### 3. UI Components
+- **Global Search:** Connected to `useSearchSuggestions`. Shows real-time results from backend.
+- **Search Page:** Connected to `useSearch`. Supports filtering (Type, Status) via API parameters.
+
+## 🧪 Verification Steps (Manual)
+
+### 1. Global Search
+- Type a keyword in the top header search bar (e.g., "test" or "LCBP3").
+- Suggestions should dropdown after 300ms debounce.
+- Clicking a suggestion should navigate to Detail page.
+
+### 2. Advanced Search
+- Press Enter in Global Search or go to `/search?q=...`.
+- Results list should appear.
+- Apply "Document Type" filter (e.g., RFA).
+- List should refresh with filtered results.
+
+# Drawing Module Integration (TASK-FE-007)
+
+**Status:** ✅ Completed
+**Date:** 2025-12-07
+
+## 🚀 Changes Implemented
+
+### 1. Service Layer & API
+- **Removed:** `frontend/lib/api/drawings.ts` (Mock API)
+- **Verified:** `contract-drawing.service.ts` and `shop-drawing.service.ts` are active.
+
+### 2. Custom Hooks
+- **Created:** `frontend/hooks/use-drawing.ts`
+  - `useDrawings(type)`: Unified hook that switches logic based on `CONTRACT` or `SHOP` type.
+  - `useCreateDrawing(type)`: Unified mutation for uploading drawings.
+
+### 3. UI Components
+- **Drawing List:** Uses `useDrawings` to fetch real data. Supports switching tabs (Contract vs Shop).
+- **Upload Form:** Uses `useCreateDrawing` and `useDisciplines` (from master data). Handles file selection.
+
+## 🧪 Verification Steps (Manual)
+
+### 1. Drawing List
+- Go to `/drawings`.
+- Switch between "Contract Drawings" and "Shop Drawings" tabs.
+- Ensure correct data (or empty state) loads for each.
+
+### 2. Upload Drawing
+- Click "Upload Drawing".
+- Select "Contract Drawing".
+- Fill in required fields (Discipline must load from API).
+- Attach a PDF/DWG file.
+- Submit.
+- Verify redirection to list and new item appears.
+
+# Dashboard & Notifications (TASK-FE-009)
+
+**Status:** ✅ Completed
+**Date:** 2025-12-07
+
+## 🚀 Changes Implemented
+
+### 1. Services & Hooks
+- **Created:** `dashboard.service.ts` and `notification.service.ts`.
+- **Created:** `use-dashboard.ts` (Stats, Activity, Pending) and `use-notification.ts` (Unread, MarkRead).
+
+### 2. UI Updates
+- **Dashboard Page:** Converted to Client Component to use parallel querying hooks.
+- **Widgets:** `StatsCards`, `RecentActivity`, `PendingTasks` updated to accept `isLoading` props and show skeletons.
+- **Notifications:** Dropdown now fetches real unread count and marks as read on click.
+
+## 🧪 Verification Steps (Manual)
+
+### 1. Dashboard
+- Navigate to `/dashboard` (or root `/`).
+- Verify Stats, Activity, and Tasks load (skeletons show briefly).
+- Check data accuracy against backend state.
+
+### 2. Notifications
+- Check the Bell icon in the top bar.
+- Badge should show unread count (if any).
+- Click to open dropdown -> list should load.
+- Click an item -> should mark as read (decrease count) and navigate.
+
+# Admin Panel (TASK-FE-010)
+
+**Status:** ✅ Completed (90%)
+**Date:** 2025-12-07
+
+## 🚀 Changes Implemented
+
+### 1. Routes & Layout
+- **Route Group:** `app/(admin)` for isolated admin context.
+- **Layout:** `AdminLayout` enforces Role Check (server-side).
+- **Sidebar:** `AdminSidebar` for navigation (Users, Logs, Settings).
+
+### 2. User Management
+- **Page:** `/admin/users` lists all users with filtering.
+- **Features:** Create, Edit, Delete (Soft), Role Assignment.
+- **Components:** `UserDialog` handles form with validation.
+
+### 3. Audit Logs
+- **Page:** `/admin/audit-logs` shows system activity.
+
+## 🧪 Verification Steps (Manual)
+
+### 1. Access Control
+- Login as non-admin -> Try `/admin/users` -> Should redirect to home.
+- Login as Admin -> Should access.
+
+### 2. User CRUD
+- Go to `/admin/users`.
+- Add User "Test Admin". Assign "ADMIN" role.
+- Edit User.
+- Delete User.
+
+### 3. Audit Logs
+- Perform actions.
+- Go to `/admin/audit-logs`.
+- Verify new logs appear.