Skip to content

Portal Components

25+ reusable components organized by domain.

Layout Components

ProtectedRoute

Guards authenticated routes. Shows <LoadingScreen> during initial auth check, redirects to /login if unauthenticated, renders <Outlet> if authenticated.

LoadingScreen

Full-viewport centered <CircularProgress> spinner.

Display Components

MoneyDisplay

Formatted currency display wrapping formatMoney() in a Typography component.

<MoneyDisplay value={{ amount: "1000.00", currency: "USD" }} />
// Renders: $1,000.00

Accepts MoneyValue objects, numbers, or null (renders "---").

StatusChip

MUI Chip with humanized label and color-mapped status.

<StatusChip status="active" />     // Green "Active" chip
<StatusChip status="dpd_30_59" />  // Red "Dpd 30 59" chip

Colors are mapped via STATUS_COLORS in utils/format.ts.

Dashboard Components

LoanSummaryCard

Card displaying loan overview with:

  • Loan number and status chip
  • Current balance (formatted as currency)
  • Next payment amount and due date
  • Days past due (highlighted in red when > 0)
  • Clickable --- navigates to /loans/{id}

UpcomingPayments

Table of next payments due across all loans. Columns: Loan, Due Date, Amount. Shows empty state if no payments.

AlertsList

Stack of MUI <Alert> components filtered by severity. Returns null if no alerts.

Payment Components

PaymentForm

Complete payment form with:

  • Amount input (defaults to scheduled payment)
  • Payment date picker (defaults to today)
  • Payment method select (ACH, Debit Card, Check)
  • Preview button (shows allocation before submitting)
  • Submit button (processes payment)

Uses usePreviewPayment() and useSubmitPayment() mutations.

PaymentPreview

Two tables showing payment allocation:

  1. Allocation: How the payment would be applied (principal, interest, fees)
  2. Post-payment balances: Remaining balances after application

PaymentHistoryTable

Table of payment records. Columns: Date, Amount, Principal Applied, Interest Applied, Fees Applied, Method, Status, Reference Number. Uses <StatusChip> for status.

Amortization Components

AmortizationTable

Full amortization schedule table. Columns: Period #, Due Date, Payment Amount, Principal, Interest, Remaining Balance, Status. Uses <StatusChip> for period status.

Payment Instrument Components

InstrumentCard

Card displaying a payment instrument:

  • Bank/card icon
  • Nickname and account last 4 digits
  • Expiration date (cards)
  • Default and unverified indicator chips
  • Delete button (if onDelete provided)

AddInstrumentDialog

Modal form for adding payment instruments:

  • Type selection: Bank Account, Debit Card, Credit Card
  • Common fields: Nickname, last 4 digits
  • Bank-specific: Bank name, account type (checking/savings)
  • Card-specific: Card brand, expiration month/year
  • Default payment method checkbox

Autopay Components

AutopaySettings

Displays current autopay plan details or enrollment prompt:

  • Active plan: Status, amount type, fixed/extra amounts, schedule, next payment date
  • Buttons: Cancel (if active), Re-enable (if suspended), Set Up New (if none/canceled)
  • Error alert on mutation failure

AutopayEnrollDialog

Modal form for autopay enrollment:

  • Payment method select (from instruments)
  • Amount type (minimum due, fixed amount, extra amount)
  • Conditional fixed amount input
  • Optional extra amount input
  • Schedule type

Document Components

DocumentList

Table of documents with download support. Columns: File Name, Type, Size (formatted KB/MB), Date, Status, Download button.

Download uses useDownloadUrl() to get a presigned URL, then opens in a new tab.

DocumentUpload

Drag-and-drop file upload zone:

  • Click or drag to select file
  • Max file size: 50 MB validation
  • Upload progress indicator
  • Three-step flow: request link -> upload to S3 -> confirm
  • Success/error alerts

Profile Components

ProfileForm

Editable profile form with fields: First Name, Last Name, Email, Phone, Language (English/Spanish). Saves via useUpdateProfile().

CommPreferences

Communication preference checkboxes: Email, SMS, Phone, Physical Mail. Saves via useUpdateCommPreferences(). Shows success alert on save.

Support Components

CreateCaseDialog

Modal form for creating support cases:

  • Case type select (General, Complaint, Dispute)
  • Subject input
  • Message textarea
  • Submits via useCreateCase()

MessageThread

Chat-style message display:

  • Inbound messages (from support) aligned right
  • Outbound messages (from borrower) aligned left
  • Timestamp and sender label on each message

MessageInput

Textarea with send button for adding messages to a case. Disabled state prop for closed cases. Prevents empty messages.

Hardship Components

HardshipStatusCard

Card showing hardship application summary:

  • Hardship type
  • Status chip
  • Created and resolved dates
  • Clickable (if onClick provided)

HardshipWizard

4-step stepper form:

  1. Select Loan: Dropdown of borrower's loans
  2. Hardship Details: Type selection + description textarea
  3. Financial Info: Optional monthly income and expenses
  4. Review: Summary of all fields before submission

Back/Next navigation. Submit calls useSubmitHardship() and navigates to /hardship.

See Also