{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "accounting-core-gl",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "GL detail with a running balance.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { useScrollEdges } from \"@/hooks/ledger/use-scroll-edges\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { formatDateShort } from \"@/lib/ledger/fiscal-period\";\nimport type { MoneyValue } from \"@/lib/ledger/money.types\";\nimport { Money } from \"@/components/ledger/money\";\nimport { Reference } from \"@/components/ledger/reference\";\nimport { Rule } from \"@/components/ledger/rule\";\n\nexport type RegisterLine = {\n  id: string;\n  date: Date;\n  entryNumber: string;\n  memo: string;\n  debit: MoneyValue | null;\n  credit: MoneyValue | null;\n  /** Passed in, already computed. */\n  runningBalance: MoneyValue;\n};\n\nexport interface AccountRegisterProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  accountName: string;\n  accountNumber: string;\n  closingBalance: MoneyValue;\n  lines: RegisterLine[];\n  /** Caps the scroller so the header and the date column can freeze. */\n  maxHeight?: number;\n  openingBalance: MoneyValue;\n  periodLabel: string;\n}\n\n/**\n * Where an accountant goes when a tie-out fails. Opening balance row,\n * closing balance row, and a running balance column — both ends tie to the\n * trial balance.\n */\nexport const AccountRegister = React.forwardRef<HTMLDivElement, AccountRegisterProps>(\n  (\n    {\n      className,\n      accountNumber,\n      accountName,\n      periodLabel,\n      openingBalance,\n      closingBalance,\n      lines,\n      maxHeight = 520,\n      ...props\n    },\n    ref,\n  ) => {\n    const scroller = useScrollEdges<HTMLDivElement>();\n    return (\n      <div className={cn(\"rounded-xl border border-border bg-surface\", className)} ref={ref} {...props}>\n        <div className=\"px-6 pb-4 pt-6\">\n          <p className=\"text-title-sm font-medium\">\n            <span className=\"reference-numeric text-text-tertiary\">{accountNumber}</span> {accountName}\n          </p>\n          <p className=\"text-caption text-text-secondary\">{periodLabel}</p>\n        </div>\n        <div className=\"ledger-frozen scrollbar-thin\" ref={scroller} style={{ maxHeight }}>\n          <table\n            className=\"w-full min-w-[760px]\"\n            /* Never sortable. The running balance column is only a running balance\n             in date order — re-order the rows and every figure in it becomes a\n             number that was never true. Declared here rather than left to the\n             caller, because the register is what knows it. */\n            data-sortable=\"false\"\n          >\n            <caption className=\"sr-only\">\n              Register for {accountNumber} {accountName}. {periodLabel}\n            </caption>\n            <thead>\n              <tr className=\"border-b border-border-subtle\">\n                {[\"Date\", \"Entry\", \"Memo\", \"Debit\", \"Credit\", \"Balance\"].map((h, i) => (\n                  <th\n                    className={cn(\n                      \"px-3 py-3 text-label font-medium text-text-secondary\",\n                      i >= 3 ? \"text-right\" : \"text-left\",\n                      i === 0 && \"pl-6\",\n                      i === 5 && \"pr-6\",\n                    )}\n                    data-frozen={i === 0 ? \"left\" : undefined}\n                    key={h}\n                    scope=\"col\"\n                  >\n                    {h}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              <tr className=\"border-b border-border-subtle bg-surface-sunken\">\n                <th\n                  className=\"py-2 pl-6 pr-3 text-left text-label font-medium\"\n                  colSpan={5}\n                  data-frozen=\"none\"\n                  scope=\"row\"\n                >\n                  Opening balance\n                </th>\n                <td className=\"py-2 pl-3 pr-6 text-right\">\n                  <Money accounting value={openingBalance} />\n                </td>\n              </tr>\n              {lines.map((l) => (\n                <tr className=\"border-b border-border-subtle\" key={l.id}>\n                  <td\n                    className=\"numeric py-2 pl-6 pr-3 text-figure-sm text-text-secondary\"\n                    data-frozen=\"left\"\n                  >\n                    {formatDateShort(l.date)}\n                  </td>\n                  <td className=\"px-3 py-2\">\n                    <Reference copyable={false} truncate={false} value={l.entryNumber} />\n                  </td>\n                  <th\n                    className=\"max-w-0 truncate px-3 py-2 text-left text-body font-normal\"\n                    data-frozen=\"none\"\n                    scope=\"row\"\n                  >\n                    {l.memo}\n                  </th>\n                  <td className=\"px-3 py-2 text-right\">\n                    {l.debit ? <Money accounting value={l.debit} /> : null}\n                  </td>\n                  <td className=\"px-3 py-2 text-right\">\n                    {l.credit ? <Money accounting value={l.credit} /> : null}\n                  </td>\n                  <td className=\"py-2 pl-3 pr-6 text-right\">\n                    <Money accounting tone=\"secondary\" value={l.runningBalance} />\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n            <tfoot>\n              <tr>\n                <td colSpan={5} />\n                <td className=\"pr-6\">\n                  <Rule variant=\"subtotal\" />\n                </td>\n              </tr>\n              <tr>\n                <th\n                  className=\"py-3 pl-6 pr-3 text-left text-label font-medium\"\n                  colSpan={5}\n                  data-frozen=\"none\"\n                  scope=\"row\"\n                >\n                  Closing balance\n                </th>\n                <td className=\"py-3 pl-3 pr-6 text-right\">\n                  <Money accounting size=\"md\" value={closingBalance} />\n                </td>\n              </tr>\n              <tr>\n                <td colSpan={5} />\n                <td className=\"pr-6\">\n                  <Rule variant=\"total\" />\n                </td>\n              </tr>\n            </tfoot>\n          </table>\n        </div>\n      </div>\n    );\n  },\n);\nAccountRegister.displayName = \"AccountRegister\";\n",
      "path": "components/ledger/account-register.tsx",
      "target": "components/ledger/account-register.tsx",
      "type": "registry:component"
    }
  ],
  "name": "account-register",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/fiscal-period",
    "@lopifi/money",
    "@lopifi/money.types",
    "@lopifi/reference",
    "@lopifi/rule",
    "@lopifi/use-scroll-edges"
  ],
  "title": "AccountRegister",
  "type": "registry:component"
}