JournalBalanceBar
The journal form's DR = CR footer: debit and credit totals with Balanced or Off by MYR x, plus the auto-save line.
import { JournalBalanceBar } from "@cynco-labs/ui";Example
import { JournalBalanceBar } from "@cynco-labs/ui";
export default function JournalBalanceBarDemo() {
return (
<div className="flex flex-col gap-3">
<JournalBalanceBar totalDebit={20905} totalCredit={20905} currency="MYR" autoSave="saved" />
<JournalBalanceBar
totalDebit={20905}
totalCredit={20655}
currency="MYR"
showError
autoSave="saving"
/>
<JournalBalanceBar totalDebit={0} totalCredit={0} />
</div>
);
}Use
Pinned under the line editor so the user always sees whether the entry balances before posting.
Props
totalDebit, totalCredit, currency?, hasAmounts?, showError?, autoSave? (saving|saved), className? (merged on the root) and native props.
Notes
Responsive: Totals and the balance chip wrap onto two lines when narrow.