Skip to content

Pages & Routing

The portal uses React Router 6 with two layout zones: auth pages (public) and portal pages (protected).

Route Table

Auth Routes (AuthLayout)

Route Page Description
/login LoginPage Email/password login form
/forgot-password ForgotPasswordPage Password reset request
/reset-password ResetPasswordPage New password form (with token)

Protected Routes (PortalLayout)

All protected routes require authentication via <ProtectedRoute>.

Route Page Description
/ DashboardPage Loan summaries, alerts, upcoming payments
/loans LoansPage List of borrower's loans
/loans/:loanId LoanDetailPage Loan detail with tabs (Summary, Payments, Amortization)
/loans/:loanId/payments PaymentHistoryPage Full payment history for a loan
/loans/:loanId/make-payment MakePaymentPage Payment form with preview
/loans/:loanId/payment-confirmation PaymentConfirmationPage Success confirmation with reference number
/loans/:loanId/autopay AutopayPage Autopay settings and enrollment
/payment-methods PaymentInstrumentsPage Manage bank accounts and cards
/documents DocumentsPage Statements, documents, upload (tabbed)
/hardship HardshipPage List of hardship applications
/hardship/apply HardshipApplicationPage 4-step hardship wizard
/support SupportPage List of support cases
/support/:caseId CaseDetailPage Case detail with message thread
/profile ProfilePage Contact info, preferences, security (tabbed)

Page Descriptions

DashboardPage

The landing page after login:

  • Greeting: "Welcome, {firstName}"
  • Alerts list: Severity-colored alerts from the dashboard API
  • Total balance card: Aggregate balance across all loans
  • Loan cards grid: One <LoanSummaryCard> per loan showing status, balance, next payment
  • Upcoming payments table: Next payments due across all loans

LoanDetailPage

Detailed view of a single loan with three tabs:

  • Summary tab: Balance breakdown, payment information, loan details (program, product, term, rates, dates)
  • Payments tab: Payment history table with allocation breakdown
  • Amortization tab: Full amortization schedule with period statuses

Action buttons in the header: "Make a Payment" and "Autopay Settings"

Days past due is highlighted in red when > 0.

MakePaymentPage

Payment form with preview:

  1. Amount input (defaults to scheduled payment amount)
  2. Payment date picker (defaults to today)
  3. Payment method selection (ACH, Debit Card, Check)
  4. Preview button shows allocation breakdown before submitting
  5. Submit Payment processes the payment
  6. Redirects to PaymentConfirmationPage with reference number on success

DocumentsPage

Three tabs:

  • Statements: System-generated documents (statements, disclosures)
  • My Documents: Borrower-uploaded documents
  • Upload: Drag-and-drop upload zone (max 50 MB)

Each document row shows file name, type, size, date, status, and download button.

HardshipApplicationPage

4-step stepper wizard:

  1. Select Loan: Choose which loan the hardship applies to
  2. Hardship Details: Select hardship type + description
  3. Financial Information: Optional monthly income and expenses
  4. Review & Submit: Summary of all fields before submission

CaseDetailPage

Case detail with message thread:

  • Case metadata: subject, status, type, priority, dates
  • Message thread: inbound/outbound messages styled as chat bubbles
  • Message input: textarea + send button (disabled when case is closed)

ProfilePage

Three tabs:

  • Contact Info: Editable form (name, email, phone, language) + read-only addresses
  • Preferences: Communication preference checkboxes (email, SMS, phone, mail)
  • Security: Read-only SSN last 4 and date of birth

ProtectedRoute

The <ProtectedRoute> component guards protected routes:

  1. Shows <LoadingScreen> while the initial auth check is in progress
  2. Redirects to /login if the user is not authenticated
  3. Renders the child route via <Outlet> if authenticated

Layouts

AuthLayout

Centered card layout for login and password reset pages:

  • Full-viewport centered container
  • Tenant logo (if available) or tenant name
  • Card with max-width 420px containing the page content

PortalLayout

Two-column responsive layout for all protected pages:

  • AppBar: Fixed top bar with tenant logo/name, user name, mobile menu toggle
  • Sidebar: Permanent on desktop, drawer on mobile (240px width)
    • Navigation items: Dashboard, My Loans, Payment Methods, Documents, Hardship, Support, Profile
    • Logout button at bottom
    • Current route highlighted
  • Main content: Flexible area below the AppBar

See Also