Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/cases/ledger-row.tsx

@@ -3,7 +3,7 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { GripVertical, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { BUCKETS, num } from "@/lib/ledger";
+import { BUCKETS, num, type Bucket } from "@/lib/ledger";
 import { formatCurrency } from "@/lib/format";
 
 export interface EditableEntry {
@@ -20,6 +20,7 @@ export interface EditableEntry {
   bank: number;
   payment: number;
   runningBalance?: number;
+  allocations?: Record<Bucket, number>;
 }
 
 interface Props {
@@ -29,13 +30,13 @@ interface Props {
 }
 
 const NUM_COLS: { key: keyof EditableEntry; danger?: boolean; positive?: boolean }[] = [
-  { key: "assess" },
+  { key: "bank", danger: true },
+  { key: "interest" },
   { key: "late" },
   { key: "admin" },
   { key: "legal" },
   { key: "viol" },
-  { key: "interest" },
-  { key: "bank", danger: true },
+  { key: "assess" },
   { key: "payment", positive: true },
 ];
 
@@ -111,6 +112,24 @@ export function SortableLedgerRow({ entry, onPatch, onRemove }: Props) {
       </td>
       {NUM_COLS.map(({ key, danger, positive }) => {
         const v = num((draft as any)[key]);
+        // For non-payment columns: if this row is a payment with an allocation
+        // to this bucket, show the allocation as a green negative deduction.
+        const isPaymentCol = key === "payment";
+        const allocAmt = !isPaymentCol && entry.allocations
+          ? num((entry.allocations as any)[key])
+          : 0;
+        if (!isPaymentCol && allocAmt > 0 && v === 0) {
+          return (
+            <td key={key} className="px-0.5 py-1">
+              <div
+                className="w-20 text-right font-mono text-sm text-emerald-600 px-1.5 py-1"
+                title={`Payment applied to ${String(key)}`}
+              >
+                −{allocAmt.toFixed(2)}
+              </div>
+            </td>
+          );
+        }
         return (
           <td key={key} className="px-0.5 py-1">
             <input