1864 lines
56 KiB
Markdown
1864 lines
56 KiB
Markdown
# 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](../../../docs/00-meta/MASTER_PLAN.md) §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
|
|
|