Product components · @jengacore/loan-schedule

LoanSchedule

Msingi: repayment schedule in one currency with status per instalment.

Msingi

Repayment schedule, amounts in RWF.
No.	Due date	Principal	Interest	Balance	Status
01	05 Aug 2026	41,667RWF	6,250RWF	458,333RWF	Paid
02	05 Sep 2026	41,667RWF	5,729RWF	416,666RWF	Paid
03	05 Oct 2026	41,667RWF	5,208RWF	374,999RWF	In arrears
04	05 Nov 2026	41,667RWF	4,687RWF	333,332RWF	Scheduled

Install

terminal

npx shadcn@latest add @jengacore/loan-schedule

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/loan-schedule.json

Registry dependencies

@jengacore/table @jengacore/amount @jengacore/status-badge @jengacore/format

Source

components/jc/loan-schedule.tsx

import * as React from "react"

import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Amount } from "@/components/jc/amount"
import { StatusBadge } from "@/components/jc/status-badge"
import { formatDate } from "@/lib/jengacore/format"

export type Instalment = {
  n: number
  due: string | Date
  principal: string
  interest: string
  balance: string
  status: "scheduled" | "due_today" | "paid" | "in_arrears" | "restructured"
}

/** Msingi repayment schedule. One currency, stated in the caption; amounts right-aligned, tabular. */
export function LoanSchedule({ rows, currency, caption }: { rows: Instalment[]; currency: string; caption?: string }) {
  return (
    <Table>
      <TableCaption>{caption ?? `Repayment schedule, amounts in ${currency}.`}</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>No.</TableHead>
          <TableHead>Due date</TableHead>
          <TableHead className="text-right">Principal</TableHead>
          <TableHead className="text-right">Interest</TableHead>
          <TableHead className="text-right">Balance</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((r) => (
          <TableRow key={r.n}>
            <TableCell className="font-mono text-xs text-muted-foreground">{String(r.n).padStart(2, "0")}</TableCell>
            <TableCell>{formatDate(r.due)}</TableCell>
            <TableCell className="text-right">
              <Amount value={r.principal} currency={currency} />
            </TableCell>
            <TableCell className="text-right">
              <Amount value={r.interest} currency={currency} />
            </TableCell>
            <TableCell className="text-right">
              <Amount value={r.balance} currency={currency} />
            </TableCell>
            <TableCell>
              <StatusBadge domain="loan" status={r.status} />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}