From 563f1279c33073400139b2c3562638d4780e4210 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 17 Apr 2026 01:58:51 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/collections-tab.tsx | 124 +++++++++++------------
 1 file changed, 61 insertions(+), 63 deletions(-)

diff --git a/src/components/cases/collections-tab.tsx b/src/components/cases/collections-tab.tsx
index 54883bd..99aea3c 100644
--- a/src/components/cases/collections-tab.tsx
+++ b/src/components/cases/collections-tab.tsx
@@ -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>
           )}