279 lines
9.2 KiB
Markdown
279 lines
9.2 KiB
Markdown
# 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.
|