Package docs

@finengine/ui

UI formatting helpers and finance-first view-model builders for FinEngine. The package helps teams turn calculations, ledger states, and Bangladesh-aware finance education into usable front-end surfaces.

What it covers

  • Money KPI cards for dashboards and docs
  • Repayment burden language that non-technical users can understand
  • Schedule preview rows for loan and installment tables
  • Bangladesh-oriented learning cards for EMI, BDT, and MFS education

API map

  • makeMoneyKpi(label, amount, helper?)
  • formatBurdenLabel(payment, income)
  • makeSchedulePreview(schedule, limit?)
  • makeRepaymentSummary(scenario, plan, monthlyIncome?, processingFeePct?)
  • makeLearningBadge(topic, level)
  • makeLearningCards()

View-model shapes

interface KpiCardModel {
  label: string;
  value: string;
  tone: 'neutral' | 'positive' | 'warning';
  helper?: string;
}

interface RepaymentSummaryModel {
  scenario: string;
  monthlyPayment: string;
  totalInterest: string;
  totalPayable: string;
  processingFee: string;
  burdenLabel: string;
  burdenTone: 'healthy' | 'watch' | 'high' | 'unknown';
  burdenPct: number | null;
  schedulePreview: Array<{
    month: number;
    principal: string;
    interest: string;
    balance: string;
  }>;
}

Executed example

import { amortize } from '@finengine/math'
import {
  makeMoneyKpi,
  makeRepaymentSummary,
  makeLearningCards,
} from '@finengine/ui'

const plan = amortize({ principal: 500000, annualRate: 13.5, months: 36 })

makeMoneyKpi('Monthly EMI', plan.monthlyPayment, 'SME working capital')
// { label: 'Monthly EMI', value: 'BDT 16,967.64', tone: 'positive', helper: 'SME working capital' }

makeRepaymentSummary('SME working capital', plan, 85000, 1.5)
// {
//   scenario: 'SME working capital',
//   monthlyPayment: 'BDT 16,967.64',
//   totalInterest: 'BDT 110,835.20',
//   totalPayable: 'BDT 618,335.20',
//   processingFee: 'BDT 7,500.00',
//   burdenLabel: 'Healthy burden · 20% of income',
//   burdenTone: 'healthy'
// }

makeLearningCards()[0]
// {
//   title: 'BDT money basics',
//   badge: 'Bangladesh · intro',
//   audience: 'Students and first-time builders'
// }

Showcase patterns

Decision-ready KPI strips

Use makeMoneyKpi to render monthly EMI, total payable, fee burden, and similar values as consistent dashboard cards.

Repayment summaries that users can read

makeRepaymentSummary turns raw amortization output into a product-facing block with burden language and schedule preview.

Learning-first finance surfaces

makeLearningCards helps position the package for onboarding, workshops, and Bangladesh-aware product education.

Implementation jump-off

The live homepage playground and examples gallery show how the functions can be assembled into a credible SaaS-style interface.

Open examples gallery Open homepage playground

Best use cases

Product UI

Loan calculators, repayment screens, fee cards, and SME dashboards.

Education UI

Bangla-friendly learning surfaces for BDT, EMI, ledger balance, and cashflow literacy.