Skip to content

Shared Components

Reusable field, input, and display components used across resource screens.

Field Components

MoneyField

Displays currency values with locale-aware formatting.

<MoneyField source="principal_amount" />
<MoneyField source="amount" currency="USD" />
Prop Type Description
source string Record field name
currency string Override currency (default: from record)
label string Field label

Behavior:

  • Accepts { amount, currency } objects (from django-money) and bare strings/numbers
  • Formats via Intl.NumberFormat with 2 decimal places
  • Locale-aware: maps react-admin locale (en -> en-US, es -> es-US)
  • Returns "---" for null/undefined values

StatusField

Displays enum values as colored MUI Chips.

<StatusField source="status" />
<StatusField source="delinquency_bucket" />
Prop Type Description
source string Record field name
label string Field label

Behavior:

  • Humanizes the value (snake_case -> Title Case)
  • Maps to chip color via STATUS_COLORS (see below)
  • Renders as <Chip variant="outlined" size="small" />

PercentField

Displays decimal rates as percentages.

<PercentField source="interest_rate" />
Prop Type Description
source string Record field name
label string Field label

Converts 0.085 -> 8.500% using Intl.NumberFormat with 3 decimal places.

FullNameField

Concatenates first_name and last_name.

<FullNameField source="borrower" />

Renders "John Doe" from { first_name: "John", last_name: "Doe" }. Defaults to sorting by last_name.

Input Components

MoneyInput

Currency input that handles django-money's { amount, currency } format.

<MoneyInput source="principal_amount" />

Wraps react-admin's <NumberInput> with:

  • Format: Extracts amount string from MoneyValue object, converts to number
  • Parse: Converts input number back to string (backend expects string amounts)
  • Step: 0.01
  • Min: 0

Action Components

ActionButton

Button that invokes a business action via dataProvider.action() with an optional confirmation dialog.

<ActionButton
  resource="loans"
  action="approve"
  label="Approve"
  confirmMessage="Are you sure you want to approve this loan?"
  color="success"
/>

<ActionButton
  resource="payments"
  action="reverse"
  label="Reverse"
  confirmMessage="This will reverse the payment and re-accrue interest."
  color="error"
  data={{ reason: "nsf" }}
/>
Prop Type Description
resource string API resource name
action string Action endpoint name
label string Button label
confirmMessage string Confirmation dialog text (optional)
data Record<string, unknown> Additional data to send (optional)
color MUI color Button color variant
variant "contained" \| "outlined" \| "text" Button variant
disabled boolean Disable the button
icon ReactNode Button icon (optional)
children ReactNode Custom form fields for the dialog (optional)

Behavior:

  1. Shows confirmation dialog if confirmMessage is set
  2. Calls dataProvider.action(resource, { id, action, data })
  3. Shows success notification and refreshes the view
  4. Shows error notification on failure

When children are provided, they are rendered inside the confirmation dialog as form fields, allowing actions that require additional input (e.g., reversal reason, modification details).

NestedAuditHistory

Displays pghistory audit events in a table.

<NestedAuditHistory resource="loans" />
Prop Type Description
resource string Resource name for history endpoint

Fetches from GET /api/v1/{resource}/{id}/history and displays:

  • Event: Type as a colored Chip
  • Date: Formatted timestamp
  • Changes: Key-value pairs of changed fields (excludes IDs and timestamps)

Returns "No audit history" if empty.

STATUS_COLORS Reference

The STATUS_COLORS mapping in utils/format.ts maps enum values to MUI Chip colors:

Category Value Color
Loan pending warning
approved info
denied error
active success
paid_off default
defaulted error
charged_off error
Delinquency current success
dpd_1_29 warning
dpd_30_59 warning
dpd_60_89 error
dpd_90_119 error
dpd_120_plus error
Payment completed success
reversed error
failed error
Fee paid success
waived default
pending warning
Compliance passed success
failed error
warning warning

The mapping covers 100+ status values across all resource types.

Formatting Utilities

humanize(value)

Converts snake_case to Title Case:

  • "active" -> "Active"
  • "dpd_30_59" -> "Dpd 30 59"
  • Special handling for "DPD" acronym

formatMoney(value, locale?, defaultCurrency?)

Formats currency values using Intl.NumberFormat:

  • Accepts { amount, currency } objects, strings, or numbers
  • Default locale: "en-US", default currency: "USD"
  • Returns "---" for null/undefined

See Also