d-bis/dbis_core
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
dbis_core/docs/admin-console-frontend-plan.md
defiQUG 89b82cdadb chore: sync submodule state (parent ref update) 
Made-with: Cursor
2026-03-02 12:14:07 -08:00

56 KiB
Raw Permalink Blame History

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

Task 4.8: Org-Level Security and Audit Panel (Phase 4/6)

Purpose: Single place to see "who has what role across all projects" and to view central audit log (who asked what agent/tool to do what, when, outcome). Aligns with MASTER_PLAN §2.4 and central audit API (dbis_core /api/admin/central/audit).

Subtasks:

  • Global identity list:
    • Table: Identity (email/ID), Roles (badges), Projects/Services (list), Last active
    • Search by identity or role
    • Filter by project, service
    • Link to role matrix
  • Role matrix:
    • Rows: roles (e.g. DBIS Admin, SCB Admin, Portal Admin)
    • Columns: resources/permissions (e.g. gru:write, corridor:read, audit:export)
    • Cell: granted (check) or —
    • Read-only for viewers; editable for super-admin (when backend supports)
  • Central audit viewer:
    • Consume GET /api/admin/central/audit (dbis_core) with query params: project, service, actorId, action, from, to, limit
    • Table columns: Timestamp, Actor (ID/email), Action, Resource type, Resource ID, Project, Service, Outcome
    • Filters: project, service, user, action, date range
    • Export (CSV/JSON) using backend export when available
    • Permission: only users with admin:audit:read or equivalent

Deliverables:

  • Security & Identity nav item (route /dbis/security) shows global identity list and role matrix
  • Audit & Governance nav item (route /dbis/audit) shows central audit viewer
  • Backend: use existing central audit API; add permission check for audit read

Estimated Time: 1 week (when DBIS console is built)

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
Reference in New Issue View Git Blame Copy Permalink