TotalsSummary

import { TotalsSummary } from '@divistant/circca-react';

// Ringkasan nilai di kolom kanan form PO: Subtotal → Diskon → DPP nilai lain (11/12) → PPN 12% → Total.
// Nilai berupa angka; komponen memformat dengan formatMoney dan meratakan kanan dengan angka tabular.
export default function Example() {
  const subtotal = 45_000_000;
  const diskon = 0;
  const dpp = Math.round(((subtotal - diskon) * 11) / 12);
  const ppn = Math.round(dpp * 0.12);
  return (
    <TotalsSummary
      className="w-full max-w-[320px]"
      items={[
        { label: 'Subtotal', value: subtotal },
        { label: 'Diskon tambahan', value: diskon, negative: true },
        { label: 'DPP nilai lain (11/12)', value: dpp },
        { label: 'PPN 12%', value: ppn },
      ]}
      total={subtotal - diskon + ppn}
    />
  );
}

import { TotalsSummary } from '@divistant/circca-react';

// Diskon dan potongan ditandai `negative` (tampil "−Rp …"); keterangan singkat lewat `description`.
// `emphasis` menonjolkan baris antara yang menjadi dasar perhitungan pajak.
export default function Example() {
  return (
    <TotalsSummary
      className="w-full max-w-[320px]"
      items={[
        { label: 'Subtotal', value: 84_500_000 },
        { label: 'Diskon tambahan', value: 4_225_000, negative: true, description: '5% dari subtotal' },
        { label: 'DPP', value: 80_275_000, emphasis: true },
        { label: 'PPN 12%', value: 8_830_250, description: 'DPP nilai lain 11/12' },
      ]}
      total={{ label: 'Total PO', value: 89_105_250 }}
    />
  );
}

import { Card, TotalsSummary } from '@divistant/circca-react';

// Invoice dan kuitansi mencantumkan terbilang di bawah total (hanya IDR).
export default function Example() {
  return (
    <Card title="Ringkasan tagihan" subtitle="INV-2026-0192 · termin 2 dari 2" className="max-w-[360px]">
      <TotalsSummary
        items={[
          { label: 'Subtotal', value: 84_500_000 },
          { label: 'DPP nilai lain (11/12)', value: 77_458_333 },
          { label: 'PPN 12%', value: 9_295_000 },
        ]}
        total={{ label: 'Total tagihan', value: 93_795_000 }}
        terbilang
      />
    </Card>
  );
}