PeriodCloseRow
One fiscal period in the periods list: open/closed/locked status, year-end marker, account and transaction counts, Dr/Cr totals and the lifecycle actions.
import { PeriodCloseRow } from "@cynco-labs/ui";Example
import { PeriodCloseRow } from "@cynco-labs/ui";
export default function PeriodCloseRowDemo() {
return (
<div className="flex flex-col gap-2">
<PeriodCloseRow
period={{
period: "2026-10",
fiscalStatus: "open",
accountCount: 64,
transactionCount: 412,
totalDebit: 1284560,
totalCredit: 1284560,
}}
/>
<PeriodCloseRow
period={{
period: "2026-09",
fiscalStatus: "closed",
accountCount: 61,
transactionCount: 388,
totalDebit: 1102340.5,
totalCredit: 1102340.5,
}}
/>
<PeriodCloseRow
period={{
period: "2026-06",
fiscalStatus: "locked",
accountCount: 58,
transactionCount: 351,
totalDebit: 984220.1,
totalCredit: 984220.1,
}}
/>
<PeriodCloseRow
isYearEnd
period={{
period: "2025-12",
fiscalStatus: "locked",
accountCount: 57,
transactionCount: 1,
totalDebit: 1,
totalCredit: 1,
}}
/>
</div>
);
}Use
Stacked in the Periods tab, newest first.
Props
period { period (YYYY-MM), fiscalStatus: open|closed|locked, accountCount, transactionCount, totalDebit, totalCredit }, isYearEnd?, baseCurrency?, onClose, onReopen, onLock, onUnlock, className? (merged on the root) and native props.
Notes
Card row (rounded-xl border bg-card). Open is a green StatusChip; Closed/Locked are neutral chips carrying the lock glyph; Year-End is a muted Badge. Actions are secondary IconButtons: Close period · Lock + Reopen · Unlock. Responsive: Totals and actions drop under the period name when narrow.