Transaction Ledger

Component

About

A day-grouped account activity list that shows each day's net total, flags pending charges and missing receipts, and lets you expand any row to view details and leave a memo.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Transaction Ledger to your project and fits it to your theme.

Code

How Transaction Ledger is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import {
  TransactionLedger,
  type LedgerEntry,
} from "@/components/ui/transaction-ledger";

const ENTRIES: LedgerEntry[] = [
  {
    id: "t1",
    at: "2026-10-05T09:14:00+04:00",
    merchant: "Cloudframe Hosting",
    amount: -24_900,
    kind: "card",
    category: "Software",
    status: "pending",
    card: "1907",
    receipt: false,
  },
  {
    id: "t2",
    at: "2026-10-05T08:02:00+04:00",
    merchant: "Qalam Studio LLC",
    amount: 1_250_000,
    kind: "transfer",
    category: "Incoming ACH",
    status: "posted",
  },
  {
    id: "t3",
    at: "2026-10-04T19:40:00+04:00",
    merchant: "Seeb Souq Café",
    amount: -1_850,
    kind: "card",
    category: "Meals",
    status: "posted",
    card: "6630",
    receipt: true,
    memo: "Client lunch, Masar kickoff",
  },
  {
    id: "t4",
    at: "2026-10-04T13:12:00+04:00",
    merchant: "Adspace Network",
    amount: -312_000,
    kind: "card",
    category: "Advertising",
    status: "posted",
    card: "4821",
    receipt: true,
  },
  {
    id: "t5",
    at: "2026-10-04T10:05:00+04:00",
    merchant: "Layla Al-Harthy",
    amount: -480_000,
    kind: "transfer",
    category: "Wire out",
    status: "posted",
  },
  {
    id: "t6",
    at: "2026-10-01T07:00:00+04:00",
    merchant: "Wire fee",
    amount: -2_500,
    kind: "fee",
    category: "Account fee",
    status: "posted",
  },
  {
    id: "t7",
    at: "2026-10-01T06:58:00+04:00",
    merchant: "Pixelwork Fonts",
    amount: -9_900,
    kind: "card",
    category: "Software",
    status: "posted",
    card: "1907",
    receipt: false,
  },
];

let demoSaves = 0;

export default function Demo() {
  return (
    <div className="flex min-h-screen w-full justify-center bg-[#0b0b0c] px-4 py-10">
      <div className="w-full max-w-[44rem]">
        <TransactionLedger
          entries={ENTRIES}
          today="2026-10-05T12:00:00+04:00"
          timeZone="Asia/Muscat"
          locale="en-US"
          theme="dark"
          onMemo={() =>
            new Promise<void>((resolve, reject) =>
              setTimeout(
                () =>
                  ++demoSaves === 2 ? reject(new Error("offline")) : resolve(),
                500,
              ),
            )
          }
        />
      </div>
    </div>
  );
}