From 0e34d18adfb912f908e3a9248cc2cb4734e84f18 Mon Sep 17 00:00:00 2001
From: renee-png <renee@avriacam.com>
Date: Mon, 1 Jun 2026 22:06:06 -0400
Subject: [PATCH] Accounting homeowner ledger/statement defaults to full
 history

The customer Ledger tab + statement defaulted to the current calendar year,
so older payments looked missing and didn't line up with the main-app owner
ledger (all-time). Default the "From" date to the earliest transaction
(user can still narrow), so the accounting ledger/statement matches the
main owner ledger.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../AccountingCustomerDetailPage.tsx          | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/accounting/AccountingCustomerDetailPage.tsx b/src/pages/accounting/AccountingCustomerDetailPage.tsx
index a9fd6ce..2ab54b7 100644
--- a/src/pages/accounting/AccountingCustomerDetailPage.tsx
+++ b/src/pages/accounting/AccountingCustomerDetailPage.tsx
@@ -1,6 +1,6 @@
 import { Link, useParams } from "react-router-dom";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { accounting } from "@/lib/accountingClient";
 import { useCompanyId } from "./lib/useCompanyId";
 import { Button } from "@/components/ui/button";
@@ -18,9 +18,6 @@ import jsPDF from "jspdf";
 import autoTable from "jspdf-autotable";
 import { drawReportCoverPage } from "@/lib/reportCover";
 
-function startOfFY() {
-  return new Date(new Date().getFullYear(), 0, 1).toISOString().slice(0, 10);
-}
 function today() {
   return new Date().toLocaleDateString("en-CA", { timeZone: "America/New_York" });
 }
@@ -44,7 +41,11 @@ export default function AccountingCustomerDetailPage() {
   const cid = companyId ?? "";
   const cur = "USD";
   const qc = useQueryClient();
-  const [from, setFrom] = useState(startOfFY());
+  // Default the ledger/statement to the full history so it matches the main-app
+  // owner ledger (all-time). Set to the earliest transaction once data loads;
+  // the user can still narrow the range. "" means "no lower bound" (show all).
+  const [from, setFrom] = useState("");
+  const [fromTouched, setFromTouched] = useState(false);
   const [to, setTo] = useState(today());
   const [drawer, setDrawer] = useState<LedgerRow | null>(null);
   const [editing, setEditing] = useState(false);
@@ -140,6 +141,12 @@ export default function AccountingCustomerDetailPage() {
     return rows;
   }, [invoices, payments]);
 
+  // Default the "From" date to the earliest entry so the full ledger shows
+  // (matches the main-app owner ledger). Honors a user-chosen range thereafter.
+  useEffect(() => {
+    if (!fromTouched && !from && allRows.length) setFrom(allRows[0].date);
+  }, [allRows, fromTouched, from]);
+
   const openingBalance = useMemo(
     () => allRows.filter((r) => r.date < from).reduce((s, r) => s + r.debit - r.credit, 0),
     [allRows, from]
@@ -486,7 +493,7 @@ export default function AccountingCustomerDetailPage() {
 
           <Card>
             <CardContent className="p-4 flex flex-wrap items-end gap-3">
-              <div><Label className="text-xs">From</Label><Input type="date" value={from} onChange={(e) => setFrom(e.target.value)} className="w-40" /></div>
+              <div><Label className="text-xs">From</Label><Input type="date" value={from} onChange={(e) => { setFromTouched(true); setFrom(e.target.value); }} className="w-40" /></div>
               <div><Label className="text-xs">To</Label><Input type="date" value={to} onChange={(e) => setTo(e.target.value)} className="w-40" /></div>
               <div className="ml-auto flex gap-2">
                 <Button variant="outline" onClick={exportStatement}><Download className="h-4 w-4 mr-1" /> Export Statement</Button>