# Admin Console Frontend Implementation - Detailed Plan

## Complete Task Breakdown for All 8 Phases

### Phase 1: Project Setup & Foundation (5 Tasks)

#### Task 1.1: Framework Selection & Initialization
**Subtasks:**
- Choose frontend framework (React recommended for admin dashboards)
- Initialize TypeScript project with create-react-app or Vite
- Set up build tooling (Vite for fast dev, Webpack for production)
- Configure path aliases matching backend structure (@/components, @/services, etc.)
- Set up environment variables (.env files for dev/staging/prod)
- Install core dependencies:
  - React Router v6 (routing)
  - Zustand or Redux Toolkit (state management)
  - Axios or fetch wrapper (HTTP client)
  - React Query or SWR (data fetching/caching)
  - date-fns (date formatting)
  - zod (form validation)
- Create project folder structure:
  ```
  src/
    components/
      shared/        # Reusable components
      admin/         # Admin-specific components
      layout/        # Layout components
    pages/
      dbis/         # DBIS admin pages
      scb/          # SCB admin pages
      auth/         # Auth pages
    services/
      api/          # API clients
      auth/         # Auth service
    hooks/          # Custom React hooks
    utils/          # Utility functions
    types/          # TypeScript types
    constants/      # Constants
    styles/         # Global styles
  ```

**Deliverables:**
- Working dev server
- TypeScript compilation
- Hot module replacement
- Basic routing setup

**Estimated Time:** 2-3 days

---

#### Task 1.2: Shared Component Library - Base Components
**Subtasks:**
- **DataTable component:**
  - Sortable columns (click header to sort)
  - Filterable rows (search input per column or global)
  - Pagination (client-side and server-side)
  - Row selection (single/multiple with checkboxes)
  - Export to CSV/Excel
  - Loading states (skeleton rows)
  - Empty states (no data message)
  - Responsive (horizontal scroll on mobile)

- **StatusIndicator component:**
  - Health status lights (green/yellow/red)
  - Animated pulse for active status
  - Tooltip with status details
  - Size variants (small, medium, large)
  - Customizable colors

- **MetricCard component:**
  - KPI display (large number, formatted)
  - Trend indicator (up/down arrow with percentage)
  - Subtitle/description
  - Click handler for drill-down
  - Loading skeleton
  - Color variants (primary, success, warning, danger)

- **ControlButton component:**
  - Permission check integration
  - Variants (primary, secondary, danger)
  - Loading state (spinner)
  - Disabled state with tooltip
  - Icon support (left/right)
  - Size variants

- **Form components:**
  - FormInput (text, number, email with validation)
  - FormSelect (single/multi-select with search)
  - FormDatePicker (date/time/datetime)
  - FormTextarea (with character count)
  - FormCheckbox
  - FormRadio
  - FormSwitch (toggle)
  - All with validation error display
  - All with label and help text support

- **Modal/Dialog component:**
  - Backdrop with click-to-close
  - Close button (X)
  - Header, body, footer sections
  - Size variants (small, medium, large, fullscreen)
  - Animation (fade in/out)
  - ESC key to close
  - Focus trap (can't tab outside)

- **Toast/Notification system:**
  - Success (green, auto-dismiss 3s, checkmark icon)
  - Error (red, manual dismiss, X icon)
  - Warning (yellow, auto-dismiss 5s, warning icon)
  - Info (blue, auto-dismiss 4s, info icon)
  - Stack multiple toasts
  - Position options (top-right, top-left, etc.)
  - Animation (slide in/out)

- **LoadingSpinner component:**
  - Size variants (small, medium, large)
  - Full page overlay option
  - Inline option
  - Color customization

- **Skeleton loaders:**
  - Text skeleton (animated shimmer)
  - Table skeleton (rows and columns)
  - Card skeleton
  - Customizable width/height

- **Chart wrapper components:**
  - LineChart (for time series)
  - BarChart (for comparisons)
  - PieChart (for distributions)
  - AreaChart (for volumes)
  - GaugeChart (for success rates)
  - HeatmapChart (for risk visualization)
  - All with responsive sizing
  - Tooltip integration
  - Export functionality (PNG/PDF)

**Deliverables:**
- All base components implemented
- Storybook documentation (optional but recommended)
- Unit tests for each component

**Estimated Time:** 1-2 weeks

---

#### Task 1.3: Shared Component Library - Layout Components
**Subtasks:**
- **DashboardLayout component:**
  - 3-column grid system
  - Responsive breakpoints
  - Widget placement system
  - Drag-and-drop widget reordering (optional, nice-to-have)
  - Grid gap customization

- **SidebarNavigation component:**
  - Collapsible sidebar
  - Icon + text menu items
  - Active route highlighting (background color change)
  - Sub-menu support (nested items with accordion)
  - Badge support (notification counts)
  - Mobile hamburger menu
  - Smooth animations

- **TopBar/Header component:**
  - User info display (name, role, avatar)
  - Notifications dropdown (bell icon with count)
  - Settings dropdown (gear icon)
  - Logout button
  - Breadcrumbs integration
  - Search bar (optional, global search)

- **Breadcrumbs component:**
  - Dynamic breadcrumb generation from route
  - Click to navigate
  - Separator customization
  - Max items (truncate with ellipsis)

- **PageContainer wrapper:**
  - Consistent page padding
  - Page title section (with actions)
  - Action buttons area (right-aligned)
  - Content area (flexible)

**Deliverables:**
- All layout components
- Responsive behavior tested
- Mobile navigation working

**Estimated Time:** 3-5 days

---

#### Task 1.4: Shared Component Library - Admin-Specific Components
**Subtasks:**
- **PermissionGate component:**
  - Wrapper for conditional rendering
  - Takes permission string as prop
  - Shows children if permission granted
  - Shows fallback (tooltip/disabled state) if not
  - Supports multiple permissions (AND/OR logic)

- **AuditLogViewer component:**
  - Table of audit log entries
  - Filter by action type, user, date range
  - Export audit log (CSV/PDF)
  - View details modal
  - Pagination
  - Search functionality

- **ConfirmationDialog component:**
  - For critical actions (kill switches, etc.)
  - Title and message props
  - Confirm/Cancel buttons
  - Danger variant (red styling)
  - Multi-step confirmation support
  - Customizable button text

- **MultiStepForm component:**
  - Step indicator (progress bar with steps)
  - Next/Previous navigation
  - Step validation (can't proceed if invalid)
  - Summary step before submit
  - Step data persistence (don't lose on back)

- **DataExportButton component:**
  - Export to CSV
  - Export to PDF
  - Export to Excel
  - Loading state during export
  - Success/error feedback

**Deliverables:**
- All admin-specific components
- Permission integration working
- Export functionality tested

**Estimated Time:** 3-5 days

---

#### Task 1.5: Authentication & Authorization System
**Subtasks:**
- **Auth service:**
  - JWT token storage (localStorage/sessionStorage)
  - Token refresh logic (before expiration)
  - Token expiration checking
  - Logout (clear tokens)
  - Get current user function

- **Login page/component:**
  - Username/password form
  - Remember me checkbox
  - Error message display
  - Loading state
  - Redirect after login
  - Forgot password link (if applicable)

- **Auth context/provider:**
  - User state management
  - Permissions state
  - Login/logout functions
  - Token refresh function
  - Loading state
  - Error state

- **usePermissions hook:**
  - Check single permission (hasPermission(permission))
  - Check multiple permissions (hasAnyPermission, hasAllPermissions)
  - Get all user permissions
  - Check if user is DBIS-level
  - Check if user can act on SCB

- **Route guards:**
  - ProtectedRoute component
  - Redirect to login if not authenticated
  - Redirect to unauthorized if no permission
  - Role-based route access
  - Public routes (login, etc.)

- **Session timeout handling:**
  - Warning modal before timeout (5 min warning)
  - Auto-logout on timeout
  - Extend session option
  - Activity tracking (reset timer on user activity)

**Deliverables:**
- Complete auth system
- Login/logout working
- Permission checks working
- Route protection working

**Estimated Time:** 1 week

---

### Phase 2: Navigation & Layout (3 Tasks)

#### Task 2.1: DBIS Admin Navigation
**Subtasks:**
- Build 10-section sidebar:
  1. Overview (icon: dashboard, route: /dbis/overview)
  2. Participants & Jurisdictions (icon: users, route: /dbis/participants)
  3. Assets & GRU (icon: coins, route: /dbis/gru)
  4. GAS & QPS (icon: network, route: /dbis/gas-qps)
  5. CBDC & FX (icon: exchange, route: /dbis/cbdc-fx)
  6. Metaverse & Edge (icon: globe, route: /dbis/metaverse-edge)
  7. Risk & Compliance (icon: shield, route: /dbis/risk-compliance)
  8. Developer & Integrations (icon: code, route: /dbis/developer)
  9. Security & Identity (icon: lock, route: /dbis/security)
  10. Audit & Governance (icon: file-text, route: /dbis/audit)
- Active route highlighting (background color change)
- Collapsible sub-menus (accordion style)
- Icon integration (React Icons or custom SVG)
- Badge support for notification counts
- Mobile responsive (hamburger menu)
- Permission-based visibility (hide sections user can't access)

**Deliverables:**
- Working navigation
- All routes accessible
- Mobile menu working

**Estimated Time:** 2-3 days

---

#### Task 2.2: SCB Admin Navigation
**Subtasks:**
- Build 7-section sidebar:
  1. Overview (icon: dashboard, route: /scb/overview)
  2. FI Management & Nostro/Vostro (icon: building, route: /scb/fi-management)
  3. CBDC & GRU Controls (icon: wallet, route: /scb/cbdc-gru)
  4. Corridor & FX Policy (icon: route, route: /scb/corridors)
  5. Risk & Compliance (icon: shield, route: /scb/risk-compliance)
  6. Tech / API & Plugins (icon: plug, route: /scb/tech)
  7. Security, Users & Roles (icon: user-shield, route: /scb/security)
- Same styling/behavior as DBIS nav
- Role-based navigation visibility (hide sections user can't access)
- Active route highlighting

**Deliverables:**
- Working SCB navigation
- All routes accessible

**Estimated Time:** 1-2 days

---

#### Task 2.3: Responsive Layout System
**Subtasks:**
- 3-column dashboard grid:
  - Desktop (1920px+): 3 equal columns
  - Tablet (768px-1919px): 2 columns, stack on small tablets
  - Mobile (<768px): 1 column, full width
- Mobile hamburger menu:
  - Slide-in sidebar
  - Backdrop overlay
  - Close on route change
- Collapsible sidebar for mobile:
  - Auto-collapse on mobile
  - Toggle button
  - Remember user preference (localStorage)
- Touch-friendly controls:
  - Minimum 44px touch targets
  - Swipe gestures for mobile (optional)
- Print-friendly styles:
  - Hide navigation when printing
  - Optimize colors for print
  - Page breaks for tables

**Deliverables:**
- Responsive layout working
- Mobile navigation working
- Print styles working

**Estimated Time:** 2-3 days

---

### Phase 3: API Integration Layer (1 Task)

#### Task 3.1: API Service Layer
**Subtasks:**
- **API client service:**
  - Base URL configuration (from env)
  - Request/response interceptors
  - Error handling
  - Retry logic
  - Request cancellation

- **Request interceptors:**
  - Add Authorization header (JWT token)
  - Add X-Employee-ID header (if available)
  - Add X-SOV-Timestamp header
  - Add X-SOV-Nonce header
  - Sign request (if required by backend)

- **Response interceptors:**
  - Handle 401 (redirect to login, refresh token)
  - Handle 403 (show unauthorized message)
  - Handle 500 (show error, log details)
  - Transform error responses (consistent format)
  - Token refresh on 401

- **Typed API service classes:**
  - **DBISAdminAPI class:**
    - getGlobalOverview()
    - getParticipants()
    - getParticipantDetails(scbId)
    - getJurisdictionSettings(scbId)
    - getCorridors()
    - getGRUCommandDashboard()
    - createGRUIssuanceProposal(data)
    - lockUnlockGRUClass(data)
    - setCircuitBreakers(data)
    - manageBondIssuanceWindow(data)
    - triggerEmergencyBuyback(bondId, amount)
    - getGASQPSDashboard()
    - getCBDCFXDashboard()
    - getMetaverseEdgeDashboard()
    - getRiskComplianceDashboard()
    - adjustCorridorCaps(data)
    - throttleCorridor(data)
    - enableDisableCorridor(data)
    - quiesceSubsystem(data)
    - activateKillSwitch(data)
    - escalateIncident(data)
  - **SCBAdminAPI class:**
    - getSCBOverview(scbId)
    - getFIManagementDashboard(scbId)
    - approveSuspendFI(scbId, data)
    - setFILimits(scbId, data)
    - assignAPIProfile(scbId, data)
    - getCorridorPolicyDashboard(scbId)
    - updateCBDCParameters(scbId, data)
    - updateGRUPolicy(scbId, data)

- **Request/response TypeScript types:**
  - Match backend service interfaces exactly
  - Type-safe API calls
  - Auto-completion in IDE
  - Shared types file

- **Retry logic:**
  - Retry on network errors (3 attempts)
  - Exponential backoff (1s, 2s, 4s)
  - Don't retry on 4xx errors
  - Configurable retry count

- **Request cancellation:**
  - Cancel on component unmount
  - Cancel on route change
  - Use AbortController
  - Cleanup in useEffect

**Deliverables:**
- Complete API service layer
- All endpoints typed
- Error handling working
- Token refresh working

**Estimated Time:** 1 week

---

### Phase 4: DBIS Admin Console Screens (7 Tasks)

#### Task 4.1: Global Overview Dashboard
**Subtasks:**
- **Network Health widget:**
  - 8 subsystem status cards in grid:
    - GAS (Global Atomic Settlement)
    - QPS (Quantum Payment System)
    - Ω-Layer (Omega Layer)
    - GPN (Global Payment Network)
    - GRU Engine
    - Metaverse MEN
    - 6G Edge Grid
  - Each card shows:
    - Status light (green/yellow/red)
    - Subsystem name
    - Last heartbeat timestamp (relative time)
    - Latency (if available, in ms)
    - Error rate (if available, percentage)
  - Click card to view subsystem details modal
  - Quiesce/resume button (with confirmation dialog)
  - Escalate incident button (opens form)

- **Settlement Throughput widget:**
  - tx/sec KPI (large number, animated counter)
  - Daily volume KPI (formatted currency, e.g., $1.2B)
  - Asset type breakdown:
    - Pie chart or horizontal bar chart
    - FIAT, CBDC, GRU, SSU, commodities
    - Click slice/bar to filter by asset type
    - Tooltip with exact values
  - Corridor heatmap:
    - Grid visualization of SCB pairs
    - Color intensity = volume (darker = higher)
    - Hover to see exact volume
    - Click to view corridor details
    - Legend (min/max volume)

- **GRU & Liquidity widget:**
  - Current GRU price (large display, real-time updates)
  - Volatility indicator (trend arrow + percentage, color-coded)
  - Circulation by class:
    - Bar chart: M00, M0, M1, SR-1, SR-2, SR-3
    - Click bar to see details
    - Tooltip with exact amounts
  - "Open GRU command center" button (navigate to /dbis/gru)

- **Risk Flags widget:**
  - Alert count badges:
    - High (red, large number, clickable)
    - Medium (yellow, medium number, clickable)
    - Low (blue, small number, clickable)
  - Acknowledge button (bulk action, opens modal)
  - Assign button (opens assign modal with user selector)
  - Link to risk detail view (navigate to /dbis/risk-compliance)

- **SCB Status Table:**
  - Columns: Name, Country, BIC, Status, Connectivity, Latency, Error Rate, Open Incidents
  - Row actions dropdown:
    - View details (opens modal)
    - Pause new settlement (with confirmation)
    - Throttle corridor (opens form)
    - Open SCB console (view-only, new tab)
  - Search by name/country/BIC
  - Filter by status/connectivity
  - Sort by any column
  - Pagination (50 per page)
  - Export to CSV

- **Real-time updates:**
  - Poll every 5-10 seconds (configurable)
  - Show "last updated" timestamp on each widget
  - Manual refresh button (header)
  - Connection status indicator (green/yellow/red dot)

**Deliverables:**
- Complete dashboard page
- All widgets functional
- Real-time updates working
- Responsive layout

**Estimated Time:** 1 week

---

#### Task 4.2: Participants & Jurisdictions Screen
**Subtasks:**
- **Participant Directory:**
  - Table with columns:
    - SCB name (link to details, clickable)
    - Country (flag icon + name)
    - BIC (copy button on hover)
    - LEI (copy button on hover)
    - Status (badge: active/suspended/inactive)
    - Connectivity (status indicator: connected/degraded/disconnected)
    - Last heartbeat (relative time, e.g., "2 minutes ago")
  - Row actions dropdown:
    - View details (opens modal)
    - Pause new settlement (with confirmation)
    - Throttle corridor (opens form)
    - Open SCB console (view-only, new tab)
  - Search bar (name, country, BIC, LEI)
  - Filters:
    - Status dropdown (active, suspended, inactive)
    - Connectivity dropdown (connected, degraded, disconnected)
  - Pagination (25 per page)
  - Export to CSV

- **Participant Details modal:**
  - Full SCB information:
    - Basic info (name, country, BIC, LEI)
    - Status and connectivity
    - HSM identity reference
    - Root sovereign key reference
    - Created/updated dates
  - Recent activity timeline:
    - Last 20 actions
    - Date, action, user
    - Expandable details
  - Connected corridors list:
    - Table of active corridors
    - Volume and latency
    - Click to view corridor details
  - Edit jurisdiction settings button (navigate to settings page)

- **Jurisdiction Settings page:**
  - Allowed asset classes section:
    - Checkboxes: FIAT, CBDC, GRU, SSU, commodities, metaverse
    - Save button (with confirmation)
    - Unsaved changes indicator
  - Corridor rules section:
    - Table:
      - Target SCB (searchable selector)
      - Caps (input, currency formatted)
      - Allowed Settlement Assets (multi-select dropdown)
      - Actions (Edit, Delete)
    - Add new corridor rule button (opens form)
    - Bulk edit option
  - Regulatory profiles section:
    - AML strictness: Slider (low/medium/high) with labels
    - Sanctions lists: Multi-select (OFAC, EU, UN, etc.)
    - Reporting frequency: Dropdown (real-time, hourly, daily, weekly)
    - Save button
  - Template policies:
    - "Apply template policy" button
    - Template selector modal:
      - List of templates (e.g., "Strict", "Moderate", "Permissive")
      - Preview before apply
      - Apply button
  - Schedule changes:
    - Date/time picker (future dates only)
    - Effective date selector
    - Pending changes list (table with scheduled date)
    - Cancel scheduled change option

- **Corridors list view:**
  - All active corridors table
  - Columns: Source SCB, Destination SCB, Currency, Volume 24h, Latency, Status
  - Filter by source/destination SCB
  - Quick actions:
    - Throttle (opens form with rate slider)
    - Enable/Disable (toggle with confirmation)
  - Volume trend chart (7-day, mini chart per row)

**Deliverables:**
- Complete participants screen
- Details modal working
- Settings page working
- Corridors view working

**Estimated Time:** 1 week

---

#### Task 4.3: GRU Command Center
**Subtasks:**
- **Tab navigation:**
  - Tabs: Monetary | Indexes | Bonds | Supranational Pools
  - Active tab highlighting (underline + color)
  - Tab content area (switch content on tab change)
  - Smooth transition animation

- **GRU Monetary tab:**
  - Supply dashboard:
    - Large number displays in grid:
      - M00, M0, M1 (monetary classes)
      - SR-1, SR-2, SR-3 (supranational reserve classes)
    - Lock/unlock toggle buttons per class
    - Locked indicator (red badge, "LOCKED" text)
    - Supply trend charts (30-day, mini charts)
  - Actions:
    - "Create issuance proposal" button
      - Opens modal with form:
        - GRU class selector (dropdown)
        - Amount input (number, min: 0, formatted)
        - Reason textarea (required, min 10 chars)
        - Effective date picker (optional, future dates)
      - Validation (all fields, amount > 0)
      - Submit creates proposal (goes to governance)
      - Success toast
    - "Simulate impact" button
      - Opens simulation modal
      - Shows projected impact on supply (before/after)
      - Shows impact on price (percentage change)
      - Shows impact on liquidity
      - Run simulation button
  - Supply trend charts:
    - 30-day supply history (line chart)
    - Per class breakdown (stacked area chart)
    - Time range selector (7d, 30d, 90d, 1y)

- **GRU Indexes tab:**
  - Index cards grid:
    - LiXAU (Lithium XAU Index)
    - LiPMG (Lithium Precious Metals Group)
    - LiBMG1, LiBMG2, LiBMG3 (Lithium Base Metals Group)
  - Each card shows:
    - Index name and code
    - Current price (large, formatted)
    - 24h change (percentage, color-coded green/red)
    - Price history chart (7-day, mini line chart)
    - Expand button (shows full details)
  - Component weights table:
    - Columns: Asset, Weight %, Current Value
    - Sortable columns
    - Total = 100% validation
  - Actions per index:
    - "Propose weight adjustment" button (CPC-only, opens form)
      - Form with asset weights (must sum to 100%)
      - Reason field
      - Submit button
    - Circuit breaker settings:
      - Max intraday move input (%)
      - Enable/disable toggle
      - Current threshold display (read-only)
      - Save button
    - Enable/disable for listing:
      - Toggle per SCB
      - SCB selector + toggle (multi-select)
      - Save button

- **GRU Bonds tab:**
  - Bond list table:
    - Columns: Bond Name, Code, Outstanding, Buyers, Yield, Issuance Window
    - Bonds: Li99PpOsB10, Li99PpAvB10
    - Sortable columns
  - Row actions:
    - Open/close issuance window (toggle with confirmation)
    - Adjust parameters (opens modal)
    - Emergency buy-back (opens multi-step confirmation)
  - Primary market parameters editor:
    - Modal with form:
      - Min purchase amount (input)
      - Max purchase amount (input)
      - Other parameters (bond-specific, JSON editor or form)
    - Current values display (read-only)
    - Save button
  - Emergency buy-back:
    - Multi-step confirmation:
      1. Confirm action (checkbox)
      2. Enter amount (input, with max validation)
      3. Final confirmation (enter "BUYBACK" text)
    - Requires multi-sig/governance confirmation (warning message)
    - Submit button (red, destructive)

- **Supranational Pools tab:**
  - Pool list (cards or table):
    - Pool name
    - Total reserves (large number, formatted)
    - Allocation breakdown (pie chart, mini)
    - Expand to see details
  - Reserve class details:
    - Table of allocations
    - Columns: Reserve Class, Amount, Percentage
    - Click row to view class details
    - Sortable

**Deliverables:**
- Complete GRU command center
- All tabs functional
- All modals working
- Charts displaying correctly

**Estimated Time:** 1.5 weeks

---

#### Task 4.4: GAS & QPS Control Panel
**Subtasks:**
- **GAS Metrics section:**
  - Atomic settlement success rate:
    - Gauge chart (0-100%)
    - Target line (95%, red line)
    - Color zones (green >95%, yellow 80-95%, red <80%)
    - Current value display (large number)
    - Trend indicator (7-day)
  - Average latency:
    - Large number (milliseconds)
    - Trend indicator (7-day, up/down arrow)
    - Target: <1000ms (show target line)
    - Color-coded (green <1000ms, yellow 1000-2000ms, red >2000ms)
  - Per-asset breakdown table:
    - Columns: Asset Type, Success Rate, Volume 24h
    - Rows: Currency, CBDC, Commodity, Security
    - Color-coded success rates (green/yellow/red)
    - Sortable columns
  - Asset-level limits table:
    - Columns: Asset Class, Max Notional per SCB
    - Edit button per row (opens form)
    - Add new limit button (opens form)
    - Delete button (with confirmation)

- **GAS Controls:**
  - Enable/disable settlement type:
    - Form:
      - Corridor selector (searchable dropdown)
      - Asset type selector (multi-select)
      - Enable/disable toggle
      - Save button
    - Current settings display (table)
  - Throttle bandwidth:
    - Form:
      - SCB selector (searchable dropdown)
      - Throttle rate slider (0-100%, with percentage display)
      - Reason field (required)
      - Apply button
    - Active throttles list (table with remove option)
  - Set asset-level limits:
    - Modal form:
      - Asset class selector (dropdown)
      - Max notional input (currency formatted)
      - SCB selector (optional, for per-SCB limits)
      - Save button
    - Validation (amount > 0)

- **QPS Metrics section:**
  - Legacy rails status cards (3 cards in grid):
    - **SWIFT:**
      - Status indicator (green/yellow/red)
      - Volume 24h (formatted number)
      - Error rate (percentage, color-coded)
      - Last message timestamp (relative time)
      - Click to view details
    - **ISO 20022:**
      - Status indicator
      - Volume 24h
      - Error rate
      - Accepted message types count (badge)
      - Click to view details
    - **RTGS:**
      - Status indicator
      - Volume 24h
      - Error rate
      - Connected systems count (badge)
      - Click to view details

- **QPS Controls:**
  - Enable/disable QPS:
    - Form:
      - SCB/FI selector (searchable dropdown, multi-select)
      - Enable/disable toggle (per selection)
      - Save button
    - Current status table
  - Mapping profiles editor:
    - Profile list table:
      - Columns: Profile Name, Accepted Messages, Validation Level
      - Row actions: Edit, Delete, Duplicate
    - Add new profile button (opens form)
    - Edit profile modal:
      - Profile name input
      - Accepted ISO messages multi-select (with search)
      - Validation level selector (standard, strict)
      - Save button
  - Stricter validation toggle:
    - Global toggle (header)
    - Per-profile toggle (in profile editor)
    - Confirmation for enabling (warning message)

**Deliverables:**
- Complete GAS & QPS panel
- All metrics displaying
- All controls functional
- Forms validated

**Estimated Time:** 1 week

---

#### Task 4.5: CBDC & FX Screen
**Subtasks:**
- **CBDC/Wallet Schemas section:**
  - SCB table:
    - Columns: SCB Name, rCBDC, wCBDC, iCBDC, Total in Circulation
    - Status indicators per CBDC type (green/yellow/red)
    - Expand row to see details (accordion)
    - Details show:
      - In circulation amount
      - Wallets count
      - Last update timestamp
  - Row actions:
    - "Approve new CBDC type" button (opens form)
      - Form:
        - SCB selector
        - CBDC type selector (rCBDC, wCBDC, iCBDC)
        - Initial parameters
        - Submit button
    - View schema details (opens modal)
  - Cross-border CBDC corridor configuration:
    - Corridor list table
    - Add new corridor button:
      - Source SCB selector
      - Target SCB selector
      - Settlement asset selector (SSU/GRU)
      - Create button
    - Edit/Delete actions per corridor

- **FX/GRU/SSU Routing section:**
  - FX corridors table:
    - Columns: Source SCB, Destination SCB, Preferred Asset, Volume 24h, Status
    - Row actions:
      - Edit preferred asset (opens selector dropdown)
      - Set spreads/fees (opens form)
      - Configure circuit breakers (opens form)
    - Sortable columns
    - Filter by source/destination SCB
  - Preferred settlement asset selector:
    - Per corridor dropdown (inline edit)
    - Options: GRU, SSU, FIAT
    - Save button (per row)
  - Spreads and fees bounds editor:
    - Form:
      - Min spread input (percentage)
      - Max spread input (percentage)
      - Min fee input (percentage)
      - Max fee input (percentage)
      - Currency selector (if applicable)
      - Save button
    - Validation (min < max)
  - Circuit breakers configuration:
    - Form:
      - Volatility threshold input (percentage, 0-100)
      - Enable/disable toggle
      - Current threshold display (read-only)
      - Save button
    - Warning message if threshold too high
  - SSU usage statistics card:
    - Total volume (large number)
    - Active corridors count (badge)
    - Trend chart (7-day, mini)
    - Click to view details
  - GRU bridge usage statistics card:
    - Total volume (large number)
    - Active corridors count (badge)
    - Trend chart (7-day, mini)
    - Click to view details

**Deliverables:**
- Complete CBDC & FX screen
- All tables functional
- All forms working
- Statistics cards displaying

**Estimated Time:** 1 week

---

#### Task 4.6: Metaverse & Edge Screen
**Subtasks:**
- **Metaverse Nodes (MEN) section:**
  - Node cards grid:
    - MetaverseDubai card (primary)
    - Other nodes (if any, in grid)
  - Each card shows:
    - Node name and location (header)
    - Status indicator (body)
    - Active volumes (large number, body)
    - On-ramp status (badge, footer)
    - Click to expand details
  - On-ramp controls table:
    - Columns: SCB, Enabled, Volume 24h, KYC Level
    - Toggle enable/disable per SCB (inline)
    - Edit KYC level (dropdown, inline)
    - Add new on-ramp button
  - Per-metaverse limits editor:
    - Form:
      - Daily limit input (currency formatted)
      - Per-transaction limit input (currency formatted)
      - Save button
    - Current limits display (read-only)
  - KYC enforcement level selector:
    - Dropdown: Low, Medium, High
    - Per node or global (radio buttons)
    - Save button

- **6G Edge GPU Grid section:**
  - Region nodes visualization:
    - Option 1: Map view (world map with 325 nodes, interactive)
      - Zoom in/out
      - Pan
      - Click node to view details
    - Option 2: Grid view (organized grid, paginated)
      - Cards in grid
      - Color-coded by occupancy
    - Color-coded by occupancy:
      - Green <50%
      - Yellow 50-80%
      - Red >80%
    - Hover tooltip:
      - Region name
      - Occupancy percentage
      - Latency (ms)
      - Node count
    - Click to view region details modal
  - Region controls:
    - "Drain load from region" button:
      - Region selector dropdown (searchable)
      - Confirmation modal (warning message)
      - Execute button (red, destructive)
    - Priority selector:
      - Per region dropdown (inline edit)
      - Options: Settlement, Rendering, Balanced
      - Save button (per region)
    - Quarantine region button:
      - Region selector (dropdown)
      - Reason field (required, textarea)
      - Multi-step confirmation:
        1. Confirm action
        2. Enter "QUARANTINE" text
      - Execute button (red, destructive)

**Deliverables:**
- Complete Metaverse & Edge screen
- Node visualization working
- Edge grid displaying
- All controls functional

**Estimated Time:** 1 week

---

#### Task 4.7: Risk & Compliance Screen
**Subtasks:**
- **SARE Sovereign Risk Heatmap:**
  - Interactive visualization:
    - Option 1: World map with 33 SCBs (recommended)
      - Click SCB to view detailed risk factors
      - Zoom in/out
      - Pan
    - Option 2: Grid of SCB cards
      - Cards in grid
      - Color-coded
    - Color-coded by risk level:
      - Green: Low risk (0-20)
      - Yellow: Medium risk (21-40)
      - Orange: High risk (41-60)
      - Red: Critical risk (61+)
    - Click SCB to view detailed risk factors modal
  - Risk level filter:
    - Checkboxes: Low, Medium, High, Critical
    - Apply filter button
    - Clear filter button
  - Export heatmap button (PNG/PDF)
  - Detailed risk factors modal:
    - Risk score breakdown (pie chart)
    - Factors: Liquidity, FX stability, CBDC health, Commodity exposure
    - Historical trend chart (30-day)
    - Factor details table

- **ARI Regulatory Alerts section:**
  - Alert list table:
    - Columns: Type, Severity, Description, SCB, Timestamp, Status
    - Color-coded severity badges (red/yellow/blue)
    - Status badges (new, acknowledged, under_investigation, resolved)
    - Row actions:
      - Acknowledge (changes status, requires permission)
      - Assign (opens assign modal with user selector)
      - View details (opens modal)
    - Sortable columns
  - Filters:
    - Type dropdown (multi-select)
    - Severity checkboxes
    - Status dropdown
    - SCB selector (searchable)
  - Search bar (description, SCB name)
  - Alert count badges (header, clickable to filter)

- **Ω-Layer Consistency Incidents:**
  - Incident list table:
    - Columns: Incident ID, Type, Severity, Affected SCBs, Timestamp, Status
    - Status badges (active, resolved)
    - Row actions:
      - View details (opens modal)
      - Resolve (if user has permission, with confirmation)
    - Sortable columns
  - Affected SCBs display:
    - Chip list in table cell
    - Click chip to view SCB details
    - Expandable if many SCBs
  - Resolution status tracking:
    - Progress indicator (if in progress)
    - Resolution notes (if resolved)
    - Resolution timestamp

- **Controls section:**
  - "Mark scenario as acknowledged" button:
    - Scenario selector (multi-select, checkboxes)
    - Confirmation
    - Submit button
  - "Trigger targeted stress test" form:
    - SCB/corridor/asset selector (searchable, multi-select)
    - Test type selector (dropdown)
    - Parameters editor (JSON editor or form)
    - Run button
    - Results display (after run)
  - "Push policy update" form:
    - Policy type selector (dropdown)
    - Parameters editor (JSON or form fields)
    - Target SCB selector (optional, for SCB-specific)
    - Push button
    - Confirmation modal

**Deliverables:**
- Complete Risk & Compliance screen
- Heatmap visualization working
- Alerts table functional
- Incidents table functional
- All controls working

**Estimated Time:** 1.5 weeks

---

### Phase 5: SCB Admin Console Screens (3 Tasks)

#### Task 5.1: SCB Overview Dashboard
**Subtasks:**
- **Domestic Network Health widget:**
  - FI count and active FIs:
    - Large numbers (side by side)
    - Trend indicators (up/down arrows)
    - Click to view FI directory
  - Payment rails status cards (grid):
    - RTGS card (status, volume, last transaction)
    - CBDC card (status, volume, wallets count)
    - Other rails (if any)
  - CBDC status:
    - Total in circulation (large number, formatted)
    - Wallets by type:
      - Retail: count + total balance (card)
      - Wholesale: count + total balance (card)
      - Institutional: count + total balance (card)
    - Trend chart (30-day, area chart)
  - Nostro/Vostro status:
    - Total accounts (number)
    - Active accounts (number)
    - API enabled indicator (toggle switch)
    - Click to view accounts

- **Corridor View widget:**
  - Corridor cards grid:
    - Each card shows:
      - Target SCB name (with flag icon)
      - Volume 24h (formatted, large)
      - Latency (ms, color-coded)
      - Risk flags count (badge, clickable)
      - Preferred settlement asset (badge)
    - Click card to view corridor details
  - Filter by target SCB (search input)
  - Sort by volume/latency (dropdown)

- **Local GRU & CBDC widget:**
  - GRU balances:
    - SR-3: large number (formatted)
    - M0: large number (formatted)
    - Trend indicators (mini charts)
  - CBDC in circulation by type:
    - rCBDC: number + mini chart (card)
    - wCBDC: number + mini chart (card)
    - iCBDC: number + mini chart (card)
  - Wallets by type counts:
    - Retail: count (badge)
    - Wholesale: count (badge)
    - Institutional: count (badge)

- **Risk & Compliance widget:**
  - Local SARE view:
    - Sovereign risk score (large number, color-coded)
    - Trend chart (7-day, line chart)
    - FI-level exposure list:
      - Table: FI Name, Exposure, Risk Level
      - Sortable columns
      - Click to view FI details
  - Local ARI alerts:
    - Alert count badges (high/medium/low, clickable)
    - Recent alerts list (last 5, expandable)
    - Link to full alerts view
  - Suspicious flows list:
    - Table: Flow ID, Description, Risk Level, Timestamp
    - Row actions: View details, Flag
    - Sortable columns

**Deliverables:**
- Complete SCB overview dashboard
- All widgets functional
- Real-time updates working

**Estimated Time:** 1 week

---

#### Task 5.2: FI Management Screen
**Subtasks:**
- **FI Directory table:**
  - Columns: FI Name, BIC, LEI, Regulatory Tier, API-enabled, Status
  - Status badges (active, suspended, pending)
  - API-enabled indicator (toggle icon)
  - Row actions dropdown:
    - Approve/Suspend (opens modal)
    - Assign API profile (opens modal)
    - Set limits (opens modal)
    - View details (opens modal)
  - Search bar (name, BIC, LEI)
  - Filters:
    - Status dropdown
    - Regulatory tier dropdown
    - API-enabled toggle
  - Pagination (25 per page)
  - Export to CSV

- **FI Details modal:**
  - Full FI information:
    - Basic info (name, BIC, LEI, tier)
    - Status and API status
    - Registration date
    - Contact information (if available)
  - Current limits display:
    - By asset type (table, editable)
    - By corridor (table, editable)
  - API profile assignment:
    - Current profile display (badge)
    - Change profile dropdown
    - Save button
  - Activity history timeline:
    - Last 20 actions
    - Date, action, user
    - Expandable details
  - Edit button (opens form, if permission)

- **Nostro/Vostro Accounts section:**
  - Account list table:
    - Columns: Account ID, Type, Counterparty FI, Currency, Balance, Limits, Status
    - Type badges (Nostro/Vostro)
    - Status badges (active, frozen, closed)
    - Row actions:
      - Adjust limits (opens form)
      - Freeze/Unfreeze (toggle with confirmation)
      - View details (opens modal)
    - Sortable columns
  - Filters:
    - Type dropdown
    - Currency dropdown
    - Status dropdown
  - "Open new NOSTRO/VOSTRO" button:
    - Opens multi-step form:
      1. Account type (Nostro/Vostro, radio)
      2. Counterparty FI selector (searchable)
      3. Currency selector
      4. Initial limits (daily, per-transaction)
      5. Review and confirm (summary)
    - Submit creates account
    - Success toast
  - Account details modal:
    - Full account information
    - Transaction history (table, last 50)
    - Limit history (timeline)

**Deliverables:**
- Complete FI management screen
- Directory table functional
- Details modal working
- Accounts section working
- Forms validated

**Estimated Time:** 1 week

---

#### Task 5.3: Corridor & FX Policy Screen
**Subtasks:**
- **Corridors table:**
  - Columns: Target SCB, Status, Daily Cap, Per-Transaction Limit, Preferred Asset, Metaverse Enabled
  - Status badges (active, pending, suspended)
  - Preferred asset badges (GRU, SSU, FIAT)
  - Metaverse enabled indicator (toggle, inline)
  - Row actions:
    - Request changes (opens form, creates request to DBIS)
    - Edit (if user has permission, opens form)
    - View details (opens modal)
  - Filters:
    - Target SCB search
    - Status dropdown
  - Sort by any column
  - Export to CSV

- **FX Policy section:**
  - Corridor list:
    - Table with base/quote currencies
    - Current spreads display (min/max, read-only)
    - Current fees display (min/max, read-only)
    - Edit button (opens form, validates against DBIS guardrails)
  - Spreads and fees bounds editor:
    - Form:
      - Min spread input (percentage)
      - Max spread input (percentage)
      - Min fee input (percentage)
      - Max fee input (percentage)
      - Validation (must be within DBIS bounds, min < max)
      - Save button
    - DBIS bounds display (read-only, for reference)

- **Controls:**
  - "Set preferred settlement asset" form:
    - Corridor selector (searchable dropdown)
    - Asset selector (GRU, SSU, FIAT, radio)
    - Save button
  - "Enable/disable metaverse corridors" toggle:
    - Global toggle (header)
    - Per-corridor toggle (inline, in table)
  - "Request limit increases" button:
    - Opens form:
      - Corridor selector
      - Current limit display (read-only)
      - Requested limit input (must be > current)
      - Reason field (required, textarea)
    - Submit creates request to DBIS
    - Shows pending requests list (table)
    - Cancel request option (if pending)

**Deliverables:**
- Complete Corridor & FX Policy screen
- Corridors table functional
- FX policy editor working
- All controls functional

**Estimated Time:** 1 week

---

### Phase 6: Advanced Features (4 Tasks)

#### Task 6.1: Real-time Updates
**Subtasks:**
- WebSocket connection service OR polling service:
  - Choose based on backend support
  - WebSocket: real-time push updates (preferred)
  - Polling: fallback, configurable interval
- useRealtimeMetrics hook:
  - Subscribe to metric updates
  - Auto-update component state
  - Cleanup on unmount
  - Error handling
- Auto-update dashboard widgets:
  - Network health (every 5s)
  - Settlement throughput (every 10s)
  - GRU prices (every 5s)
  - Risk flags (every 15s)
  - Configurable per widget
- "Last updated" timestamps:
  - Show on each widget
  - Relative time (e.g., "2 seconds ago")
  - Absolute time on hover
  - Update in real-time
- Connection status indicator:
  - Green: connected
  - Yellow: reconnecting
  - Red: disconnected
  - Show in header (top-right)
  - Click to view connection details
- Reconnection logic:
  - Auto-reconnect on disconnect
  - Exponential backoff (1s, 2s, 4s, 8s, max 30s)
  - Max retry attempts (10)
  - Manual reconnect button
- Manual refresh buttons:
  - Per widget refresh button (small icon)
  - Global refresh button (header)
  - Loading state during refresh
- Configurable update intervals:
  - Settings page
  - Per widget configuration
  - Save user preference (localStorage)

**Deliverables:**
- Real-time updates working
- Connection status visible
- Reconnection working
- Configurable intervals

**Estimated Time:** 1 week

---

#### Task 6.2: Permission-Based UI
**Subtasks:**
- PermissionGate component:
  - Wrapper for conditional rendering
  - Props: permission (string), fallback (ReactNode)
  - Checks permission via usePermissions hook
  - Shows children if granted, fallback if not
  - Supports multiple permissions (AND/OR logic)
- Hide/show controls:
  - All action buttons wrapped in PermissionGate
  - Forms hidden if no permission
  - Navigation items hidden if no permission
  - Table actions hidden if no permission
- Disable buttons for insufficient permissions:
  - Show button but disabled
  - Tooltip: "Insufficient permissions: [permission name]"
  - Grayed out styling
- Tooltips explaining disabled actions:
  - On hover over disabled button
  - Clear message about required permission
  - Show user's current role
- Permission checks in all control components:
  - GRU controls
  - Corridor controls
  - Network controls
  - FI controls
  - CBDC controls
- Permission indicators in UI:
  - Badge showing user role (header)
  - Permission level indicator (sidebar)
- Permission debug mode:
  - Development only
  - Show all permissions in sidebar
  - Highlight permission checks
  - Console logs for permission checks

**Deliverables:**
- Permission-based UI working
- All controls respect permissions
- Tooltips showing
- Debug mode available

**Estimated Time:** 3-5 days

---

#### Task 6.3: Data Visualization
**Subtasks:**
- Integrate charting library:
  - Chart.js or Recharts (recommended)
  - D3.js for custom visualizations (heatmaps)
  - Install and configure
- GRU price history charts:
  - Line chart with time range selector
  - Ranges: 1 day, 7 days, 30 days, 90 days, 1 year
  - Multiple series (different indexes)
  - Interactive tooltips (show on hover)
  - Zoom and pan (optional)
- Settlement volume time series:
  - Area chart or line chart
  - Grouped by asset type (stacked area)
  - Time range selector
  - Export functionality (PNG/PDF)
- Risk heatmap visualization:
  - Custom D3 component or library
  - Color gradient (green to red)
  - Interactive (click to view details)
  - Hover tooltips (show risk score, factors)
- Asset distribution pie charts:
  - Breakdown by asset type
  - Click slice to filter
  - Percentage labels
  - Legend
- Corridor volume bar charts:
  - Horizontal bar chart
  - Top 20 corridors
  - Sortable (by volume)
  - Click bar to view corridor details
- Interactive tooltips on all charts:
  - Show on hover
  - Detailed information
  - Format numbers/currency
  - Custom styling
- Export chart functionality:
  - PNG export (high resolution)
  - PDF export (with chart + data table)
  - CSV export (for data)
  - Export button on each chart
- Chart configuration options:
  - Time range selector (dropdown)
  - Aggregation (hourly, daily, weekly)
  - Show/hide series (checkboxes)
  - Color customization (theme)

**Deliverables:**
- All charts displaying correctly
- Interactive features working
- Export functionality working
- Responsive charts

**Estimated Time:** 1.5 weeks

---

#### Task 6.4: Control Action Modals & Forms
**Subtasks:**
- **GRU Issuance Proposal modal:**
  - Form fields:
    - GRU class selector (dropdown, required)
    - Amount input (number, min: 0, required, formatted)
    - Reason textarea (required, min 10 chars)
    - Effective date picker (optional, future dates)
  - Validation:
    - Required fields check
    - Amount > 0
    - Date in future (if provided)
    - Show validation errors inline
  - Submit button:
    - Creates proposal
    - Shows success toast
    - Closes modal
    - Refreshes data

- **Corridor Cap Adjustment modal:**
  - Route selector (searchable dropdown, required)
  - Current cap display (read-only, formatted)
  - New cap input (number, min: current cap, required)
  - Reason field (required, textarea)
  - Confirmation step:
    - Shows before/after comparison (table)
    - Confirm checkbox ("I understand this change")
  - Submit button

- **Kill Switch modal:**
  - Scope selector (radio buttons: global, SCB, corridor, required)
  - Target selection (conditional):
    - SCB selector (if scope = SCB, searchable dropdown)
    - Corridor selector (if scope = corridor, searchable dropdown)
  - Reason field (required, textarea, min 20 chars)
  - Multi-step confirmation:
    1. Warning message (red, large text)
    2. Confirm action checkbox ("I understand this is a critical action")
    3. Enter "KILLSWITCH" to confirm (text input, case-sensitive)
  - Final confirmation checkbox
  - Submit button (red, destructive styling, large)
  - Logs critical action (audit log)

- **FI Approval/Suspension modal:**
  - FI selector (searchable dropdown, required)
  - Action selector (radio: approve, suspend, required)
  - Reason field (required, textarea)
  - Confirmation message:
    - Shows action and FI name (large text)
    - Warning if suspending (yellow banner)
  - Submit button

- **Circuit Breaker Configuration modal:**
  - Index selector (dropdown, required)
  - Current settings display (read-only, formatted)
  - Max intraday move input (percentage, 0-100, required)
  - Enable/disable toggle
  - Save button
  - Validation (percentage 0-100)

- **All modals should:**
  - Show loading states during submission (spinner on button)
  - Display success/error toast messages
  - Log actions (visible in audit log viewer)
  - Require appropriate permissions (check before showing)
  - Handle validation errors (show inline, red text)
  - Support keyboard navigation:
    - ESC to close
    - Enter to submit (if form valid)
    - Tab to navigate fields
  - Focus trap (can't tab outside modal)
  - Backdrop click to close (optional, configurable per modal)
  - Smooth animations (fade in/out)

**Deliverables:**
- All modals implemented
- Forms validated
- Keyboard navigation working
- Loading states working

**Estimated Time:** 1 week

---

### Phase 7: Error Handling & UX Polish (1 Task)

#### Task 7.1: Error Handling & User Feedback
**Subtasks:**
- Global error boundary component:
  - Catches React errors
  - Shows friendly error message
  - "Reload page" button
  - Error reporting (log to monitoring service)
  - Stack trace (development only)
- API error handling:
  - Network errors:
    - Show user-friendly message ("Unable to connect to server")
    - Retry button
    - Offline indicator (banner)
  - 4xx errors (client errors):
    - 401: Redirect to login, show message
    - 403: Show "Unauthorized" message, suggest contacting admin
    - 404: Show "Not found" message
    - 422: Show validation errors (list of errors)
    - Generic 4xx: Show error message from API
  - 5xx errors (server errors):
    - Show generic error message ("Server error, please try again")
    - Log details to monitoring
    - "Report issue" button (opens form)
- Form validation:
  - Real-time validation (on blur)
  - Field-level error messages (red text below field)
  - Required field indicators (*)
  - Validation summary (if form invalid, show at top)
  - Disable submit if form invalid
- Loading states:
  - Button loading spinners (during async actions)
  - Page-level loading skeletons (initial load)
  - Inline loading indicators (for data updates)
  - Progress bars (for long operations, e.g., exports)
- Toast notifications:
  - Success: Green, auto-dismiss 3s, checkmark icon
  - Error: Red, manual dismiss, X icon
  - Warning: Yellow, auto-dismiss 5s, warning icon
  - Info: Blue, auto-dismiss 4s, info icon
  - Stack multiple toasts (max 5)
  - Position: top-right (default, configurable)
  - Smooth animations
- Confirmation dialogs:
  - For destructive actions
  - Title, message, confirm/cancel buttons
  - Danger variant (red styling)
  - Customizable button text
- Optimistic UI updates:
  - Update UI immediately (where safe)
  - Rollback on error (show error, revert UI)
  - Show loading state during request
  - Examples: Toggle switches, status changes
- Retry mechanisms:
  - Retry button on failed requests
  - Auto-retry for network errors (3 attempts)
  - Exponential backoff (1s, 2s, 4s)
  - Show retry count
- Offline detection:
  - Detect when offline (navigator.onLine)
  - Show offline banner (top of page)
  - Queue actions when offline (localStorage)
  - Sync when back online (process queue)
  - Show queued actions count
- Error logging:
  - Log to monitoring service (Sentry, etc.)
  - Include user context (user ID, role)
  - Include error stack trace
  - Don't log sensitive data (passwords, tokens)
  - User ID for error tracking

**Deliverables:**
- Complete error handling
- All error states handled
- User feedback working
- Offline support working

**Estimated Time:** 1 week

---

### Phase 8: Testing & Documentation (2 Tasks)

#### Task 8.1: Testing
**Subtasks:**
- Unit tests:
  - Utility functions (100% coverage target)
  - Custom hooks (usePermissions, useRealtimeMetrics, etc.)
  - Service functions (API clients, auth service)
  - Form validation functions
  - Date formatting functions
- Component tests:
  - Shared components:
    - DataTable (sorting, filtering, pagination)
    - StatusIndicator (status display)
    - MetricCard (KPI display)
    - Form components (validation, submission)
    - Modal (open/close, keyboard navigation)
  - Admin-specific components:
    - PermissionGate (permission checks)
    - AuditLogViewer (display, filtering)
- Integration tests:
  - API service integration:
    - Mock API responses
    - Test error handling
    - Test retry logic
    - Test token refresh
  - Auth flow:
    - Login
    - Token refresh
    - Logout
    - Session timeout
  - Permission checks:
    - Verify UI respects permissions
    - Test permission-based rendering
- E2E tests (Playwright or Cypress):
  - Critical user flows:
    - Login → View dashboard → Perform action
    - Navigate between screens
    - Submit forms
    - View details modals
  - Permission-based access:
    - Test with different roles
    - Verify restricted access
  - Form submissions:
    - Valid submissions
    - Invalid submissions
    - Error handling
- Responsive design testing:
  - Test on multiple screen sizes:
    - Desktop (1920px, 1440px, 1280px)
    - Tablet (768px, 1024px)
    - Mobile (375px, 414px)
  - Verify layout adapts correctly
  - Test touch interactions
- Cross-browser testing:
  - Chrome (latest)
  - Firefox (latest)
  - Safari (latest)
  - Edge (latest)
  - Verify compatibility
- Accessibility testing:
  - Keyboard navigation (all interactive elements)
  - Screen reader compatibility (ARIA labels)
  - Color contrast (WCAG AA compliance)
  - Focus indicators (visible focus states)
  - Use axe-core or similar tool

**Deliverables:**
- Test suite complete
- All tests passing
- Coverage report (aim for 80%+)
- E2E tests running in CI

**Estimated Time:** 2 weeks

---

#### Task 8.2: Documentation
**Subtasks:**
- Component documentation (Storybook):
  - All shared components
  - Usage examples
  - Props documentation
  - Interactive examples
  - Code snippets
  - Deploy Storybook (hosted)
- API integration guide:
  - Endpoint documentation:
    - All DBIS admin endpoints
    - All SCB admin endpoints
    - Request/response examples
    - Error responses
  - Authentication:
    - How to get tokens
    - How to refresh tokens
    - How to handle 401 errors
  - Error handling:
    - Common errors
    - How to handle them
  - TypeScript types:
    - Import types
    - Use in components
- Permission matrix documentation:
  - All permissions listed
  - Role-to-permission mapping table
  - UI visibility rules:
    - Which components require which permissions
    - How to check permissions in code
  - Examples of permission checks
- User guide:
  - Admin operations guide:
    - How to view dashboards
    - How to perform actions
    - Common workflows
  - Screenshots for each screen
  - Step-by-step tutorials:
    - Creating GRU issuance proposal
    - Adjusting corridor caps
    - Managing FIs
  - FAQ section
- Developer setup guide:
  - Installation steps:
    - Node.js version
    - Package manager (npm/yarn/pnpm)
    - Install dependencies
  - Environment setup:
    - Environment variables
    - API endpoint configuration
  - Development workflow:
    - Running dev server
    - Building for production
    - Running tests
  - Code style guide:
    - Naming conventions
    - File structure
    - Component patterns
- Deployment documentation:
  - Build process:
    - Production build command
    - Optimization steps
  - Environment variables:
    - Required variables
    - Optional variables
    - Example .env files
  - Deployment steps:
    - Build artifacts
    - Deploy to server
    - Configure reverse proxy
    - SSL certificate setup
  - CI/CD pipeline (if applicable):
    - GitHub Actions workflow
    - Automated testing
    - Automated deployment

**Deliverables:**
- Complete documentation
- Storybook deployed
- User guide published
- Developer guide published

**Estimated Time:** 1.5 weeks

---

## Summary

**Total Tasks:** 23 major tasks across 8 phases

**Total Subtasks:** 200+ detailed implementation steps

**Estimated Timeline:**
- Phase 1 (Setup): 2-3 weeks
- Phase 2 (Navigation): 1 week
- Phase 3 (API): 1 week
- Phase 4 (DBIS Screens): 4-5 weeks
- Phase 5 (SCB Screens): 2 weeks
- Phase 6 (Advanced Features): 2-3 weeks
- Phase 7 (Error Handling): 1 week
- Phase 8 (Testing & Docs): 2 weeks

**Total Estimated Time:** 15-18 weeks for complete, production-ready frontend

**Dependencies:**
- Backend APIs (✅ Complete)
- Frontend framework selection (Pending)
- Design system/UI library selection (Pending)

**Critical Path:**
1. Framework selection → Setup → Base components
2. Auth system → Navigation → API integration
3. Screens can be built in parallel after Phase 3
4. Advanced features depend on screens being complete
5. Testing and docs can run parallel to development