260322:1648 Correct Coresspondence / Doing RFA / Correct CI

specs/99-archives/history/2025-12-07_p4-fe-dashboard-admin.md

@@ -5,13 +5,17 @@
 ## ✅ 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
@@ -21,18 +25,23 @@ Created `frontend/components/common/can.tsx`.
   ```
 
 ### 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.
@@ -54,13 +63,14 @@ Created `frontend/components/auth/auth-sync.tsx`.
     - Go to `/login`.
     - Try invalid password -> Expect **Toast Error**.
     - Try valid password -> Expect **Toast Success** and redirect.
-2.  **Permission Test:**
+4.  **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)*
+
+_(No visual artifacts generated in this session, please run locally to verify UI)_
 
 # Correspondence Module Integration (TASK-FE-004)
 
@@ -70,11 +80,13 @@ Created `frontend/components/auth/auth-sync.tsx`.
 ## 🚀 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
@@ -82,22 +94,26 @@ Created `frontend/components/auth/auth-sync.tsx`.
   - `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.
@@ -111,15 +127,18 @@ Created `frontend/components/auth/auth-sync.tsx`.
 ## 🚀 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).
@@ -128,16 +147,19 @@ Created `frontend/components/auth/auth-sync.tsx`.
 ## 🧪 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.
@@ -151,26 +173,31 @@ Created `frontend/components/auth/auth-sync.tsx`.
 ## 🚀 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).
@@ -184,26 +211,31 @@ Created `frontend/components/auth/auth-sync.tsx`.
 ## 🚀 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).
@@ -219,10 +251,12 @@ Created `frontend/components/auth/auth-sync.tsx`.
 ## 🚀 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.
@@ -230,11 +264,13 @@ Created `frontend/components/auth/auth-sync.tsx`.
 ## 🧪 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.
@@ -248,31 +284,37 @@ Created `frontend/components/auth/auth-sync.tsx`.
 ## 🚀 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.