lcbp3/specs/09-history/2025-12-07_p4-fe-dashboard-admin.md

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:

  <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.

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)

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.