d-bis/dbis_core

Fork 0

Files

defiQUG 849e6a8357

CI / test (push) Has been cancelled

Details

CI / security (push) Has been cancelled

Details

CI / build (push) Has been cancelled

Details

Initial commit

2025-12-12 15:02:56 -08:00

54 KiB

Raw 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

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

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:

Framework selection → Setup → Base components
Auth system → Navigation → API integration
Screens can be built in parallel after Phase 3
Advanced features depend on screens being complete
Testing and docs can run parallel to development

54 KiB

Raw 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

Task 1.2: Shared Component Library - Base Components

Task 1.3: Shared Component Library - Layout Components

Task 1.4: Shared Component Library - Admin-Specific Components

Task 1.5: Authentication & Authorization System

Phase 2: Navigation & Layout (3 Tasks)

Task 2.1: DBIS Admin Navigation

Task 2.2: SCB Admin Navigation

Task 2.3: Responsive Layout System

Phase 3: API Integration Layer (1 Task)

Task 3.1: API Service Layer

Phase 4: DBIS Admin Console Screens (7 Tasks)

Task 4.1: Global Overview Dashboard

Task 4.2: Participants & Jurisdictions Screen

Task 4.3: GRU Command Center

Task 4.4: GAS & QPS Control Panel

Task 4.5: CBDC & FX Screen

Task 4.6: Metaverse & Edge Screen

Task 4.7: Risk & Compliance Screen

Phase 5: SCB Admin Console Screens (3 Tasks)

Task 5.1: SCB Overview Dashboard

Task 5.2: FI Management Screen

Task 5.3: Corridor & FX Policy Screen

Phase 6: Advanced Features (4 Tasks)

Task 6.1: Real-time Updates

Task 6.2: Permission-Based UI

Task 6.3: Data Visualization

Task 6.4: Control Action Modals & Forms

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

Task 7.1: Error Handling & User Feedback

Phase 8: Testing & Documentation (2 Tasks)

Task 8.1: Testing

Task 8.2: Documentation

Summary

54 KiB Raw 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

Task 1.2: Shared Component Library - Base Components

Task 1.3: Shared Component Library - Layout Components

Task 1.4: Shared Component Library - Admin-Specific Components

Task 1.5: Authentication & Authorization System

Phase 2: Navigation & Layout (3 Tasks)

Task 2.1: DBIS Admin Navigation

Task 2.2: SCB Admin Navigation

Task 2.3: Responsive Layout System

Phase 3: API Integration Layer (1 Task)

Task 3.1: API Service Layer

Phase 4: DBIS Admin Console Screens (7 Tasks)

Task 4.1: Global Overview Dashboard

Task 4.2: Participants & Jurisdictions Screen

Task 4.3: GRU Command Center

Task 4.4: GAS & QPS Control Panel

Task 4.5: CBDC & FX Screen

Task 4.6: Metaverse & Edge Screen

Task 4.7: Risk & Compliance Screen

Phase 5: SCB Admin Console Screens (3 Tasks)

Task 5.1: SCB Overview Dashboard

Task 5.2: FI Management Screen

Task 5.3: Corridor & FX Policy Screen

Phase 6: Advanced Features (4 Tasks)

Task 6.1: Real-time Updates

Task 6.2: Permission-Based UI

Task 6.3: Data Visualization

Task 6.4: Control Action Modals & Forms

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

Task 7.1: Error Handling & User Feedback

Phase 8: Testing & Documentation (2 Tasks)

Task 8.1: Testing

Task 8.2: Documentation

Summary

54 KiB

Raw Blame History