Skip to content

Admin Dashboard Overview

The admin dashboard is a single-page application built with react-admin, providing a full-featured back-office interface for loan management operations.

Tech Stack

Technology Purpose
React 18 UI framework
TypeScript Type safety
react-admin Admin framework (CRUD, auth, i18n, permissions)
MUI 5 Component library
Vite Build tool and dev server
Vitest Test runner

Development Setup

cd frontend/admin
npm install
npm run dev     # Vite dev server at http://localhost:5173

Other commands:

npm run build   # Production build (TypeScript check + Vite)
npm run test    # Run Vitest tests
npm run lint    # ESLint

Application Structure

frontend/admin/src/
├── App.tsx                  # <Admin> with 48 resources + custom routes
├── main.tsx                 # Entry point
├── admin/                   # Resource screens + layout
│   ├── Layout.tsx           # AppBar with locale switcher + Menu sidebar
│   ├── Menu.tsx             # Permission-gated navigation (8 sections)
│   ├── Dashboard.tsx        # KPI cards + recent activity tables
│   ├── LoginPage.tsx        # Email/password login form
│   ├── ForgotPasswordPage.tsx
│   ├── ResetPasswordPage.tsx
│   ├── permissions.ts       # hasPermission() utility
│   ├── theme.ts             # MUI theme (blue primary, green secondary)
│   └── {resource}/          # 42 resource directories
├── components/              # Shared field + input components
├── providers/
│   ├── dataProvider.ts      # Extended REST data provider
│   ├── authProvider.ts      # Session-based auth with RBAC
│   └── i18nProvider.ts      # English/Spanish via Polyglot
├── utils/
│   └── format.ts            # humanize(), formatMoney(), STATUS_COLORS
├── types.ts                 # TypeScript interfaces + choice constants
└── test-utils.tsx           # renderWithAdmin(), renderWithRecord()

Dashboard

The dashboard displays at-a-glance metrics and recent activity:

KPI Cards (top row):

  • Total Loans
  • Active Loans
  • Total Borrowers
  • Total Payments

Delinquency Breakdown: Table of loan counts per DPD bucket with color-coded chips.

Recent Payments: Last 5 payments with amount, status, and date.

Recent Loans: Last 5 loans with principal, current balance, and status.

The sidebar menu is organized into 8 sections, with items conditionally shown based on the user's RBAC permissions:

Section Resources
Origination Borrowers, Loans, Programs, Products, Promotional Programs
Servicing Payments, Fees, Disbursements, Collateral, Modifications, Forbearances, Deferments, Payoff Quotes, Suspense
Collections Delinquency, Collection Queues, Dunning Schedules, Collection Agencies
Case Management Cases, Supercases, Campaigns, Interactions, Pre-Delinquency Rules
Portfolio & Compliance Portfolios, Compliance Rules, Investors, Loan Tape Configs, Compliance Monitors, Credit Reporting, Credit Disputes
Communications Communication Templates, Communication Logs
Accounting GL Accounts, Journal Entries
Administration Users, Webhooks, Index Rates, Fee Schedules, Provider Configs, Provider Assignments

Theme

The theme uses a professional color palette:

Element Color
Primary (buttons, links, AppBar) #1565C0 (blue)
Secondary #2E7D32 (green)
Background #f5f5f5 (light gray)
Font System font stack (-apple-system, Segoe UI, Roboto)

Custom Routes

Beyond resource CRUD screens, the app includes:

  • /auth/forgot-password --- Password reset request form
  • /auth/reset-password/:key --- Password reset with validation key

See Also