Owner Ledger: add $0.00 note entries

Add an "Add Note" action that records a memo on an owner's ledger as a
$0.00 entry (transaction_type 'note', debit/credit 0). Notes work on any
ledger including paid-up ($0.00 balance) accounts, render as styled memo
rows, and don't affect the running balance. The accounting sync treats a
zero entry as a no-op, so no phantom AR is created.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/pages/OwnerLedgerPage.tsx

@@ -1,10 +1,11 @@
 import { useState, useEffect, useMemo } from "react";
 import { supabase } from "@/integrations/supabase/client";
 import { useToast } from "@/hooks/use-toast";
-import { BookOpen, Plus, Search, Download, DollarSign } from "lucide-react";
+import { BookOpen, Plus, Search, Download, DollarSign, StickyNote } from "lucide-react";
 import UnitOwnerSelect from "@/components/UnitOwnerSelect";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
@@ -22,7 +23,7 @@ const txnTypeLabels: Record<string, string> = {
   assessment: "Assessment", special_assessment: "Special Assessment",
   late_fee: "Late Fee", interest: "Interest", fine: "Fine",
   admin_charge: "Admin Charge", payment: "Payment", reversal: "Reversal",
-  credit: "Credit", adjustment: "Adjustment"
+  credit: "Credit", adjustment: "Adjustment", note: "Note"
 };
 
 export default function OwnerLedgerPage() {
@@ -43,6 +44,9 @@ export default function OwnerLedgerPage() {
     credit: "",
     unit_id: "",
   });
+  const [noteDialogOpen, setNoteDialogOpen] = useState(false);
+  const [noteSaving, setNoteSaving] = useState(false);
+  const [noteForm, setNoteForm] = useState({ date: new Date().toISOString().split("T")[0], text: "" });
 
   useEffect(() => {
     Promise.all([
@@ -127,6 +131,31 @@ export default function OwnerLedgerPage() {
     await supabase.from("owners").update({ balance: newBal }).eq("id", selectedOwnerId);
   };
 
+  // A note is a $0.00 ledger entry — a memo that records context without
+  // affecting the running balance. Works on any ledger, including $0 ones.
+  const handleAddNote = async () => {
+    if (!selectedOwnerId) return;
+    const text = noteForm.text.trim();
+    if (!text) { toast({ variant: "destructive", title: "Note is empty" }); return; }
+    setNoteSaving(true);
+    const owner = owners.find(o => o.id === selectedOwnerId);
+    const { error } = await supabase.from("owner_ledger_entries").insert({
+      owner_id: selectedOwnerId,
+      association_id: owner?.association_id,
+      unit_id: owner?.unit_id || null,
+      date: noteForm.date,
+      transaction_type: "note",
+      description: text,
+      debit: 0,
+      credit: 0,
+    });
+    setNoteSaving(false);
+    if (error) { toast({ variant: "destructive", title: "Error", description: error.message }); return; }
+    toast({ title: "Note added" });
+    setNoteDialogOpen(false);
+    fetchLedger();
+  };
+
   const exportCSV = async () => {
     const rows = [
       ["Date", "Type", "Description", "Debit", "Credit", "Balance"].join(","),
@@ -145,6 +174,10 @@ export default function OwnerLedgerPage() {
         </div>
         <div className="flex gap-2">
           <Button variant="outline" className="gap-2" onClick={exportCSV}><Download className="h-4 w-4" /> Export</Button>
+          <Button variant="outline" className="gap-2" disabled={!selectedOwnerId} onClick={() => {
+            setNoteForm({ date: new Date().toISOString().split("T")[0], text: "" });
+            setNoteDialogOpen(true);
+          }}><StickyNote className="h-4 w-4" /> Add Note</Button>
           <Button className="gap-2" onClick={() => {
             setForm({ date: new Date().toISOString().split("T")[0], transaction_type: "assessment", description: "", debit: "", credit: "", unit_id: selectedOwner?.unit_id || "" });
             setDialogOpen(true);
@@ -218,13 +251,17 @@ export default function OwnerLedgerPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {withBalance.map((e) => (
+              {withBalance.map((e) => {
-                <TableRow key={e.id}>
+                const isNote = e.transaction_type === "note";
+                return (
+                <TableRow key={e.id} className={isNote ? "bg-amber-50/60" : ""}>
                   <TableCell className="font-medium whitespace-nowrap">{format(new Date(e.date + "T00:00:00"), "MM/dd/yyyy")}</TableCell>
                   <TableCell>
-                    <Badge variant="outline" className="text-xs capitalize">{txnTypeLabels[e.transaction_type] || e.transaction_type}</Badge>
+                    <Badge variant="outline" className={`text-xs capitalize ${isNote ? "border-amber-300 text-amber-700 gap-1" : ""}`}>
+                      {isNote && <StickyNote className="h-3 w-3" />}{txnTypeLabels[e.transaction_type] || e.transaction_type}
+                    </Badge>
                   </TableCell>
-                  <TableCell>{e.description || "—"}</TableCell>
+                  <TableCell className={isNote ? "italic text-muted-foreground" : ""}>{e.description || "—"}</TableCell>
                   <TableCell>{e.units?.unit_number || "—"}</TableCell>
                   <TableCell className="text-right font-mono">
                     {Number(e.debit) > 0 ? <span className="text-destructive">${Number(e.debit).toLocaleString("en-US", { minimumFractionDigits: 2 })}</span> : "—"}
@@ -237,7 +274,8 @@ export default function OwnerLedgerPage() {
                     {e.runningBalance < 0 ? " CR" : ""}
                   </TableCell>
                 </TableRow>
-              ))}
+                );
+              })}
             </TableBody>
           </Table>
         </Card>
@@ -266,6 +304,23 @@ export default function OwnerLedgerPage() {
           <DialogFooter><Button onClick={handleCreate}>Post Entry</Button></DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <Dialog open={noteDialogOpen} onOpenChange={setNoteDialogOpen}>
+        <DialogContent>
+          <DialogHeader><DialogTitle className="flex items-center gap-2"><StickyNote className="h-4 w-4 text-amber-600" /> Add Note</DialogTitle></DialogHeader>
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              A note is recorded on the ledger as a $0.00 entry — it documents context without changing the balance.
+            </p>
+            <div><Label>Date</Label><Input type="date" value={noteForm.date} onChange={(e) => setNoteForm({ ...noteForm, date: e.target.value })} /></div>
+            <div><Label>Note</Label><Textarea rows={4} value={noteForm.text} onChange={(e) => setNoteForm({ ...noteForm, text: e.target.value })} placeholder="e.g. Spoke with owner about upcoming assessment; account paid in full." /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setNoteDialogOpen(false)}>Cancel</Button>
+            <Button onClick={handleAddNote} disabled={noteSaving || !noteForm.text.trim()}>Add Note</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }