User & Admin Dashboards
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The User and Admin Dashboards serve as the primary interfaces for the BankChase application, facilitating secure retail banking operations and comprehensive administrative oversight. The system is built on a Next.js 16 and React 19 architecture, leveraging a hybrid database approach (PostgreSQL for RBAC and MongoDB for analytics/notifications) to ensure high performance and data isolation.
The User Dashboard provides customers with real-time access to accounts, transaction history, and financial planning tools. Conversely, the Admin Dashboard enables authorized personnel to manage users, monitor system health, and review immutable audit logs. These dashboards are protected by an 8-layer security architecture, including Role-Based Access Control (RBAC) and Two-Factor Authentication (2FA).
Sources: PROJECT_COMPLETION_SUMMARY.md:3-8, DELIVERY_SUMMARY.md:7-14, SYSTEM_STATUS_REPORT.md:165-175
User Dashboard Architecture
The User Dashboard is designed with a mobile-first approach, featuring a persistent bottom navigation system for primary views and a specialized "More" menu for extended banking features.
Core Dashboard Views
The dashboard is partitioned into several functional modules accessible via the navigation interface:
| View | Purpose | Key Features |
|---|---|---|
| Accounts | Primary financial overview | Total balance, account listing, account masking. |
| Pay & Transfer | Transaction management | Zelle, wire transfers, bill payments, recipient registration. |
| Plan & Track | Financial analytics | Spending category analysis, savings goals tracking, budgets. |
| Offers | Marketing & Rewards | Promotional deals, referral programs, rewards points. |
| More Menu | Extended Settings | Security, device management, statements, help & support. |
Sources: COMPLETE_APP_READY.md:21-45, PROJECT_COMPLETION_SUMMARY.md:36-70, PRODUCTION_SUMMARY.md:10-30
User Data Flow
User data is fetched dynamically using SWR and React Context (BankingContext), ensuring that balance updates and transaction records are synchronized across the UI.
The diagram shows the dual-database data flow where PostgreSQL handles sensitive account/auth data while MongoDB provides high-throughput analytics and notifications.
Sources: DELIVERY_SUMMARY.md:29-45, PRODUCTION_SUMMARY.md:72-85
Admin Dashboard & Management
The Admin Dashboard is restricted to users with the admin or auditor roles and provides tools for system administration and compliance monitoring.
Administrative Capabilities
Administrators have access to a suite of management tools located under the /admin route:
- User Management: Listing, updating roles, and deleting user accounts.
- Audit Logging: Viewing immutable logs of all administrative actions.
- System Health: Monitoring DNS configuration and application status.
- Demo Tools: Adding demo funds for testing purposes via
/admin/demo-money.
Sources: SYSTEM_STATUS_REPORT.md:120-132, DELIVERY_SUMMARY.md:86-91
Audit Trail Logic
The audit system ensures accountability by logging metadata for every administrative action.
The sequence diagram illustrates the mandatory logging process that occurs before an administrative change is committed to the database.
Sources: DELIVERY_SUMMARY.md:16-20, RBAC_SYSTEM_ARCHITECTURE.md:45-60
Security and RBAC Enforcement
Dashboard access is strictly controlled through an 8-layer security architecture. The RBAC system enforces permissions at the API, SQL, and UI levels.
Permission Matrix
Permissions are assigned based on three primary roles:
| Role | Dashboard Access | Account Access | Audit Logs |
|---|---|---|---|
| Customer | User Dashboard only | Own data only | No access |
| Admin | Admin & User Dashboards | Full access | Full access (Read/Write) |
| Auditor | Admin Dashboard (Read-only) | Read-only | Read-only |
Sources: RBAC_SYSTEM_ARCHITECTURE.md:15-30, DELIVERY_SUMMARY.md:16-20, SYSTEM_STATUS_REPORT.md:180-195
Route Protection Logic
The ProtectedRoute component wraps all dashboard pages, utilizing Clerk's useAuth() hook to redirect unauthenticated users to the /landing page. For admin routes, additional checks are performed against the JWT token to verify the user's role.
Sources: SYSTEM_STATUS_REPORT.md:45-60, FINAL_DEPLOYMENT_SUMMARY.md:85-95
Specialized Dashboards
In addition to the core banking interfaces, the system includes specialized dashboards for distinct business functions:
- Divvy Dashboard: Displays real-time bike-sharing analytics, trip volumes, and station distribution.
- TikTok Ads Manager: A 5-step campaign builder wizard with a real-time KPI dashboard for ad spend management.
- Voice Agent Interface: Specialized UI for voice-based banking interactions.
Sources: SYSTEM_STATUS_REPORT.md:144-155, DELIVERY_SUMMARY.md:330-345
Summary
The User & Admin Dashboards provide a secure, scalable, and feature-rich environment for both retail customers and system administrators. By utilizing a hybrid database architecture and strict RBAC enforcement, BankChase ensures that customer data remains isolated while providing administrators with the necessary tools for oversight and compliance. The system is production-ready, featuring 100% test pass rates and a comprehensive 8-layer security model.
Sources: FINAL_DEPLOYMENT_SUMMARY.md:10-25, COMPLETE_APP_READY.md:150-160