Changes
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
co-authored by
renee-png
parent
49b6df7a80
commit
563f1279c3
@@ -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 ($)</th>
|
||||
<th className="text-right px-2 py-2 font-medium">Late ($)</th>
|
||||
<th className="text-right px-2 py-2 font-medium">Admin ($)</th>
|
||||
<th className="text-right px-2 py-2 font-medium">Legal ($)</th>
|
||||
<th className="text-right px-2 py-2 font-medium">Viol ($)</th>
|
||||
<th className="text-right px-2 py-2 font-medium">Int ($)</th>
|
||||
<th className="text-right px-2 py-2 font-medium text-destructive">Bank ($)</th>
|
||||
<th className="text-right px-2 py-2 font-medium">Pay (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 ($)</th>
|
||||
<th className="text-right px-1 py-2 font-medium">Late ($)</th>
|
||||
<th className="text-right px-1 py-2 font-medium">Admin ($)</th>
|
||||
<th className="text-right px-1 py-2 font-medium">Legal ($)</th>
|
||||
<th className="text-right px-1 py-2 font-medium">Viol ($)</th>
|
||||
<th className="text-right px-1 py-2 font-medium">Int ($)</th>
|
||||
<th className="text-right px-1 py-2 font-medium text-destructive">Bank ($)</th>
|
||||
<th className="text-right px-1 py-2 font-medium">Pay (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>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user