Tally UI

RegisterSummary

End-of-day summary showing cash drawer discrepancy and transaction totals

Import

import { RegisterSummary } from '@tallyui/components';

Usage

<RegisterSummary
  expectedCash={500}
  actualCash={495.50}
  transactions={[
    { method: 'Cash', count: 12, total: 245.00 },
    { method: 'Card', count: 8, total: 312.50 },
  ]}
/>

Displays a cash drawer comparison with expected vs. actual amounts, highlights any discrepancy in green (balanced) or red (off), and lists transaction breakdowns by payment method.

Props

PropTypeDefaultDescription
expectedCashnumberrequiredExpected cash drawer amount
actualCashnumberrequiredActual counted cash amount
transactionsTransactionSummary[]requiredTransaction totals grouped by payment method
headerSlotReactNode---Content rendered above the cash drawer section
footerSlotReactNode---Content rendered below the transactions section
classNamestring---Override container styles

TransactionSummary

interface TransactionSummary {
  method: string;
  count: number;
  total: number;
}

Live demo

On this page