feat(web): journal entries page shows double-entry debit/credit lines

JournalEntriesPage now renders expandable debit/credit lines for each entry. Click a row to toggle the line detail view showing account code, DR/CR amounts, and description. Types updated: JournalEntry now includes lines array with JournalEntryLine (lineNo, accountCode, debit, credit, description). This makes the GL growth visible in the demo — confirming an SO shows the AR entry with DR 1100 / CR 4100 balanced lines inline.

feat(web): journal entries page shows double-entry debit/credit lines
JournalEntriesPage now renders expandable debit/credit lines for each entry. Click a row to toggle the line detail view showing account code, DR/CR amounts, and description. Types updated: JournalEntry now includes lines array with JournalEntryLine (lineNo, accountCode, debit, credit, description). This makes the GL growth visible in the demo — confirming an SO shows the AR entry with DR 1100 / CR 4100 balanced lines inline.
zichun · 朱子纯
1 parent 3745de3a
Showing 2 changed files with 96 additions and 25 deletions
web/src/pages/JournalEntriesPage.tsx
web/src/types/api.ts
@@ -4,13 +4,13 @@ import type { JournalEntry } from &#39;@/types/api&#39;
 import { PageHeader } from '@/components/PageHeader'
 import { Loading } from '@/components/Loading'
 import { ErrorBox } from '@/components/ErrorBox'
-import { DataTable, type Column } from '@/components/DataTable'
 import { StatusBadge } from '@/components/StatusBadge'
 export function JournalEntriesPage() {
   const [rows, setRows] = useState<JournalEntry[]>([])
   const [error, setError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(true)
+  const [expanded, setExpanded] = useState<Set<string>>(new Set())
   useEffect(() => {
     finance
@@ -22,38 +22,100 @@ export function JournalEntriesPage() {
       .finally(() => setLoading(false))
   }, [])
-  const columns: Column<JournalEntry>[] = [
-    {
-      header: 'Posted',
-      key: 'postedAt',
-      render: (r) => (r.postedAt ? new Date(r.postedAt).toLocaleString() : '—'),
-    },
-    { header: 'Code', key: 'code', render: (r) => <span className="font-mono text-xs">{r.code}</span> },
-    { header: 'Type', key: 'type' },
-    { header: 'Status', key: 'status', render: (r) => <StatusBadge status={r.status} /> },
-    { header: 'Order', key: 'orderCode', render: (r) => <span className="font-mono">{r.orderCode}</span> },
-    { header: 'Partner', key: 'partnerCode', render: (r) => <span className="font-mono">{r.partnerCode}</span> },
-    {
-      header: 'Amount',
-      key: 'amount',
-      render: (r) => (
-        <span className="font-mono tabular-nums">
-          {Number(r.amount).toLocaleString(undefined, { minimumFractionDigits: 2 })}{' '}
-          {r.currencyCode}
-        </span>
-      ),
-    },
-  ]
+  const toggle = (id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
   return (
     <div>
       <PageHeader
         title="Journal Entries"
-        subtitle="AR / AP entries created reactively by pbc-finance from order lifecycle events."
+        subtitle="Double-entry GL entries posted by pbc-finance from order lifecycle events. Click a row to see debit/credit lines."
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
-      {!loading && !error && <DataTable rows={rows} columns={columns} />}
+      {!loading && !error && rows.length === 0 && (
+        <div className="card p-6 text-sm text-slate-400">No journal entries yet.</div>
+      )}
+      {!loading && !error && rows.length > 0 && (
+        <div className="card overflow-x-auto">
+          <table className="table-base">
+            <thead className="bg-slate-50">
+              <tr>
+                <th>Posted</th>
+                <th>Type</th>
+                <th>Status</th>
+                <th>Order</th>
+                <th>Partner</th>
+                <th>Amount</th>
+                <th>Lines</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {rows.map((je) => {
+                const isOpen = expanded.has(je.id)
+                return (
+                  <>
+                    <tr
+                      key={je.id}
+                      className="hover:bg-slate-50 cursor-pointer"
+                      onClick={() => toggle(je.id)}
+                    >
+                      <td>{je.postedAt ? new Date(je.postedAt).toLocaleString() : '—'}</td>
+                      <td>{je.type}</td>
+                      <td><StatusBadge status={je.status} /></td>
+                      <td className="font-mono">{je.orderCode}</td>
+                      <td className="font-mono">{je.partnerCode}</td>
+                      <td className="font-mono tabular-nums">
+                        {Number(je.amount).toLocaleString(undefined, { minimumFractionDigits: 2 })}{' '}
+                        {je.currencyCode}
+                      </td>
+                      <td className="text-slate-500">{je.lines?.length ?? 0}</td>
+                    </tr>
+                    {isOpen && je.lines?.length > 0 && (
+                      <tr key={`${je.id}-lines`}>
+                        <td colSpan={7} className="bg-slate-50 px-6 py-3">
+                          <table className="min-w-full text-xs">
+                            <thead>
+                              <tr className="text-slate-400">
+                                <th className="text-left px-2 py-1">#</th>
+                                <th className="text-left px-2 py-1">Account</th>
+                                <th className="text-right px-2 py-1">Debit</th>
+                                <th className="text-right px-2 py-1">Credit</th>
+                                <th className="text-left px-2 py-1">Description</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {je.lines.map((l) => (
+                                <tr key={l.lineNo}>
+                                  <td className="px-2 py-1">{l.lineNo}</td>
+                                  <td className="px-2 py-1 font-mono">{l.accountCode}</td>
+                                  <td className="px-2 py-1 font-mono tabular-nums text-right">
+                                    {Number(l.debit) > 0 ? Number(l.debit).toLocaleString(undefined, { minimumFractionDigits: 2 }) : ''}
+                                  </td>
+                                  <td className="px-2 py-1 font-mono tabular-nums text-right">
+                                    {Number(l.credit) > 0 ? Number(l.credit).toLocaleString(undefined, { minimumFractionDigits: 2 }) : ''}
+                                  </td>
+                                  <td className="px-2 py-1 text-slate-500">{l.description ?? ''}</td>
+                                </tr>
+                              ))}
+                            </tbody>
+                          </table>
+                        </td>
+                      </tr>
+                    )}
+                  </>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
     </div>
   )
 }
@@ -264,6 +264,14 @@ export interface Account {
 export type JournalEntryType = 'AR' | 'AP'
 export type JournalEntryStatus = 'POSTED' | 'SETTLED' | 'REVERSED'
+export interface JournalEntryLine {
+  lineNo: number
+  accountCode: string
+  debit: string | number
+  credit: string | number
+  description: string | null
+}
+
 export interface JournalEntry {
   id: string
   code: string
@@ -274,4 +282,5 @@ export interface JournalEntry {
   amount: string | number
   currencyCode: string
   postedAt: string
+  lines: JournalEntryLine[]
 }