dbis_core/frontend/FEATURES.md

DBIS Admin Console - Features

Complete Feature List

✅ Authentication & Authorization

• JWT token-based authentication
• Role-based access control (RBAC)
• Permission-based UI rendering
• Protected routes
• Session management
• Auto-logout on token expiration

✅ Dashboard Pages

DBIS Admin Console (7 pages)

1. Global Overview

   • Network health monitoring
   • Settlement throughput metrics
   • GRU liquidity dashboard
   • Risk flags overview
   • SCB status table
   • Real-time data polling

2. Participants & Jurisdictions

   • SCB directory with search/filter
   • Connectivity status indicators
   • Jurisdiction settings viewer
   • Template policy application

3. GRU Command Center

   • Monetary classes management (M00, M0, M1, etc.)
   • GRU indexes tracking
   • Bond issuance windows
   • Supranational pools
   • Lock/unlock controls
   • Issuance proposal creation

4. GAS & QPS Control

   • GAS metrics and utilization
   • Asset-level limits management
   • QPS mapping profiles
   • Bandwidth throttling
   • Real-time utilization gauges

5. CBDC & FX

   • CBDC wallet schema viewer
   • CBDC type approval workflow
   • FX routing configuration
   • Cross-border corridor setup
   • FX price trend charts

6. Metaverse & Edge

   • Metaverse Economic Nodes (MEN) management
   • On-ramp controls
   • 6G Edge GPU Grid monitoring
   • Load balancing controls
   • Node quarantine functionality

7. Risk & Compliance

   • SARE (Sovereign AI Risk Engine) heatmap
   • ARI (Autonomous Regulatory Intelligence) alerts
   • Ω-Layer incidents tracking
   • Alert acknowledgment
   • Stress test triggers

SCB Admin Console (3 pages)

1. Overview Dashboard

   • Domestic network health
   • Local GRU/CBDC metrics
   • Corridor view
   • Real-time updates

2. FI Management & Nostro/Vostro

   • Financial institution directory
   • FI approval/suspension workflow
   • Daily limit management
   • API profile assignment
   • Nostro/Vostro accounts management
   • Account opening workflow

3. Corridor & FX Policy

   • Cross-border corridor configuration
   • Daily cap management
   • Preferred asset settings
   • FX policy table
   • FX rate trend visualization

✅ Shared Components

Layout Components

• DashboardLayout (3-column responsive grid)
• SidebarNavigation (collapsible, with icons)
• TopBar (user info, logout)
• PageContainer (consistent page wrapper)

Data Display

• DataTable (sortable, filterable, paginated, exportable)
• MetricCard (KPI widgets with trends)
• StatusIndicator (health status lights)
• Badge (status badges)
• EmptyState (empty data states)
• PageError (404, 403, 500 pages)

Forms & Inputs

• FormInput (text, number, email)
• FormSelect (single/multi-select)
• FormTextarea (with character count)
• Button (with loading, variants, icons)
• Modal (with backdrop, keyboard navigation)
• ConfirmationDialog

Charts & Visualization

• LineChart (time series)
• BarChart (comparisons)
• PieChart (distributions)
• GaugeChart (utilization)
• Heatmap (risk visualization)

Utilities

• LoadingSpinner (inline and full-page)
• Tooltip (hover tooltips)
• ExportButton (CSV/JSON export)
• ErrorBoundary (error catching)

✅ Features

Real-time Updates

• Polling-based updates (10-15s intervals)
• WebSocket support (hooks ready)
• Automatic data refresh
• Manual refresh controls

Export Functionality

• CSV export
• JSON export
• Table data export
• Custom filename support

Error Handling

• Global error boundary
• Page-level error handling
• API error interceptors
• User-friendly error messages
• Development error details

Permission System

• PermissionGate component
• usePermissions hook
• Role-based navigation
• Conditional UI rendering
• Permission checks on actions

Responsive Design

• Mobile-friendly layouts
• Tablet optimization
• Desktop 3-column grid
• Collapsible sidebar
• Touch-friendly controls

✅ Developer Experience

Code Quality

• TypeScript throughout
• ESLint configuration
• Prettier formatting
• Path aliases
• Consistent component patterns

Utilities & Hooks

• useRealtimeUpdates (polling/WebSocket)
• useDebounce (debounced values)
• useLocalStorage (persistent state)
• usePermissions (permission checks)
• Format utilities (currency, numbers, dates)

API Integration

• Centralized API client
• Request/response interceptors
• Automatic token refresh
• Error handling
• Loading states

Technology Stack

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool
• React Router v6 - Routing
• Zustand - State management
• React Query - Data fetching
• Recharts - Charts
• React Hot Toast - Notifications
• React Icons - Icons
• date-fns - Date formatting
• zod - Validation

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Performance

• Code splitting
• Lazy loading ready
• Optimized re-renders
• Efficient data polling
• Memoized components