Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-04-17 01:58:51 +00:00
co-authored by renee-png
parent 49b6df7a80
commit 563f1279c3
+61 -63
View File
@@ -703,73 +703,71 @@ export function CollectionDetail({
<table className="w-full text-sm">
<thead className="bg-muted/40 text-[11px] uppercase tracking-wider text-muted-foreground">
<tr>
<th className="text-left px-3 py-2 font-medium">Date</th>
<th className="text-left px-3 py-2 font-medium">Description</th>
<th className="text-left px-3 py-2 font-medium">Account</th>
<th className="text-right px-2 py-2 font-medium">Assess&nbsp;($)</th>
<th className="text-right px-2 py-2 font-medium">Late&nbsp;($)</th>
<th className="text-right px-2 py-2 font-medium">Admin&nbsp;($)</th>
<th className="text-right px-2 py-2 font-medium">Legal&nbsp;($)</th>
<th className="text-right px-2 py-2 font-medium">Viol&nbsp;($)</th>
<th className="text-right px-2 py-2 font-medium">Int&nbsp;($)</th>
<th className="text-right px-2 py-2 font-medium text-destructive">Bank&nbsp;($)</th>
<th className="text-right px-2 py-2 font-medium">Pay&nbsp;(AR)</th>
<th className="w-8"></th>
<th className="text-left px-2 py-2 font-medium">Date</th>
<th className="text-left px-2 py-2 font-medium">Description</th>
<th className="text-left px-2 py-2 font-medium">Account</th>
<th className="text-right px-1 py-2 font-medium">Assess&nbsp;($)</th>
<th className="text-right px-1 py-2 font-medium">Late&nbsp;($)</th>
<th className="text-right px-1 py-2 font-medium">Admin&nbsp;($)</th>
<th className="text-right px-1 py-2 font-medium">Legal&nbsp;($)</th>
<th className="text-right px-1 py-2 font-medium">Viol&nbsp;($)</th>
<th className="text-right px-1 py-2 font-medium">Int&nbsp;($)</th>
<th className="text-right px-1 py-2 font-medium text-destructive">Bank&nbsp;($)</th>
<th className="text-right px-1 py-2 font-medium">Pay&nbsp;(AR)</th>
<th className="text-right px-3 py-2 font-medium">Balance</th>
<th className="px-2 py-2"></th>
</tr>
</thead>
<tbody>
{opening !== 0 && (
<tr className="border-t bg-muted/20">
<td className="px-3 py-2 text-muted-foreground">{formatDate(collection.opened_at)}</td>
<td className="px-3 py-2 text-muted-foreground italic">Opening balance</td>
<td className="px-3 py-2 text-muted-foreground">opening</td>
<td className="px-2 py-2 text-right font-mono">{opening > 0 ? opening.toFixed(2) : "0.00"}</td>
<td colSpan={7} className="px-2 py-2 text-right font-mono text-muted-foreground">0.00</td>
<td className="px-3 py-2 text-right font-mono font-semibold">{formatCurrency(opening)}</td>
<td></td>
</tr>
)}
{withRunning.length === 0 && opening === 0 && (
<tr><td colSpan={13} className="text-center py-12 text-muted-foreground text-sm">No ledger entries yet. Use the buttons below to add one.</td></tr>
)}
{withRunning.map((e: any) => (
<tr key={e.id} className="border-t hover:bg-muted/20">
<td className="px-3 py-2 whitespace-nowrap">{formatDate(e.entry_date)}</td>
<td className="px-3 py-2">{e.description || "—"}</td>
<td className="px-3 py-2 text-muted-foreground capitalize">{e.account || e.transaction_type || "—"}</td>
<BucketCell value={num(e.assess)} />
<BucketCell value={num(e.late)} />
<BucketCell value={num(e.admin)} />
<BucketCell value={num(e.legal)} />
<BucketCell value={num(e.viol)} />
<BucketCell value={num(e.interest)} />
<BucketCell value={num(e.bank)} danger />
<BucketCell value={num(e.payment)} positive />
<td className={`px-3 py-2 text-right font-mono font-semibold ${e.runningBalance > 0 ? "" : e.runningBalance < 0 ? "text-emerald-600" : "text-muted-foreground"}`}>
{formatCurrency(e.runningBalance)}
</td>
<td className="px-2 py-2 text-right">
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => removeEntry(e.id)}>
<Trash2 className="h-3.5 w-3.5 text-destructive" />
</Button>
</td>
</tr>
))}
<tr className="border-t bg-muted/30 font-medium">
<td colSpan={3} className="px-3 py-2 text-right text-muted-foreground uppercase text-[11px] tracking-wider">Totals:</td>
<td className="px-2 py-2 text-right font-mono">{formatCurrency(totals.assess)}</td>
<td className="px-2 py-2 text-right font-mono">{formatCurrency(totals.late)}</td>
<td className="px-2 py-2 text-right font-mono">{formatCurrency(totals.admin)}</td>
<td className="px-2 py-2 text-right font-mono">{formatCurrency(totals.legal)}</td>
<td className="px-2 py-2 text-right font-mono">{formatCurrency(totals.viol)}</td>
<td className="px-2 py-2 text-right font-mono">{formatCurrency(totals.interest)}</td>
<td className="px-2 py-2 text-right font-mono text-destructive">{formatCurrency(totals.bank)}</td>
<td className="px-2 py-2 text-right font-mono">{formatCurrency(totals.payment)}</td>
<td className="px-3 py-2 text-right font-mono">{formatCurrency(computed.total)}</td>
<td></td>
</tr>
</tbody>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<SortableContext
items={withRunning.map((e: any) => e.id)}
strategy={verticalListSortingStrategy}
>
<tbody>
{opening !== 0 && (
<tr className="border-t bg-muted/20">
<td></td>
<td className="px-2 py-2 text-muted-foreground whitespace-nowrap">{formatDate(collection.opened_at)}</td>
<td className="px-2 py-2 text-muted-foreground italic">Opening balance</td>
<td className="px-2 py-2 text-muted-foreground">opening</td>
<td className="px-1 py-2 text-right font-mono">{opening > 0 ? opening.toFixed(2) : "0.00"}</td>
<td colSpan={7} className="px-1 py-2 text-right font-mono text-muted-foreground">0.00</td>
<td className="px-3 py-2 text-right font-mono font-semibold">{formatCurrency(opening)}</td>
<td></td>
</tr>
)}
{withRunning.length === 0 && opening === 0 && (
<tr><td colSpan={14} className="text-center py-12 text-muted-foreground text-sm">No ledger entries yet. Use the buttons below to add one.</td></tr>
)}
{withRunning.map((e: any) => (
<SortableLedgerRow
key={e.id}
entry={e}
onPatch={patchEntry}
onRemove={removeEntry}
/>
))}
<tr className="border-t bg-muted/30 font-medium">
<td colSpan={4} className="px-2 py-2 text-right text-muted-foreground uppercase text-[11px] tracking-wider">Totals:</td>
<td className="px-1 py-2 text-right font-mono">{formatCurrency(totals.assess)}</td>
<td className="px-1 py-2 text-right font-mono">{formatCurrency(totals.late)}</td>
<td className="px-1 py-2 text-right font-mono">{formatCurrency(totals.admin)}</td>
<td className="px-1 py-2 text-right font-mono">{formatCurrency(totals.legal)}</td>
<td className="px-1 py-2 text-right font-mono">{formatCurrency(totals.viol)}</td>
<td className="px-1 py-2 text-right font-mono">{formatCurrency(totals.interest)}</td>
<td className="px-1 py-2 text-right font-mono text-destructive">{formatCurrency(totals.bank)}</td>
<td className="px-1 py-2 text-right font-mono">{formatCurrency(totals.payment)}</td>
<td className="px-3 py-2 text-right font-mono">{formatCurrency(computed.total)}</td>
<td></td>
</tr>
</tbody>
</SortableContext>
</DndContext>
</table>
)}