gpt-engineer-app[bot]andrenee-png
9d0dc0e202
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
722 lines
32 KiB
TypeScript
722 lines
32 KiB
TypeScript
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
|
import { useEffect, useState, useMemo, Fragment } from "react";
|
|
import { ProtectedLayout } from "@/components/protected-layout";
|
|
import { PageContainer } from "@/components/app-shell";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
|
import { supabase } from "@/integrations/supabase/client";
|
|
import { useAuth } from "@/lib/auth";
|
|
import { ArrowLeft, FileDown, Plus, Trash2, Loader2, Send, Ban, CheckCircle2, DollarSign, Wallet } from "lucide-react";
|
|
import { formatCurrency, formatDate, statusBadgeClass } from "@/lib/format";
|
|
import { downloadInvoicePdf, type InvoicePdfInput } from "@/lib/invoice-pdf";
|
|
import { recalcInvoiceTotals } from "@/lib/invoice-generation";
|
|
import { ApplyTrustDialog, PushPaymentToTrustButton } from "@/components/trust/trust-account-panel";
|
|
import { toast } from "sonner";
|
|
|
|
export const Route = createFileRoute("/invoices/$invoiceId")({
|
|
component: () => (
|
|
<ProtectedLayout>
|
|
<InvoiceDetail />
|
|
</ProtectedLayout>
|
|
),
|
|
});
|
|
|
|
function InvoiceDetail() {
|
|
const { invoiceId } = Route.useParams();
|
|
const navigate = useNavigate();
|
|
const { user, isAdmin } = useAuth();
|
|
const [invoice, setInvoice] = useState<any>(null);
|
|
const [items, setItems] = useState<any[]>([]);
|
|
const [payments, setPayments] = useState<any[]>([]);
|
|
const [firm, setFirm] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [savingItem, setSavingItem] = useState(false);
|
|
const [payOpen, setPayOpen] = useState(false);
|
|
const [trustOpen, setTrustOpen] = useState(false);
|
|
|
|
const load = async () => {
|
|
setLoading(true);
|
|
const [invRes, itemRes, payRes, firmRes] = await Promise.all([
|
|
supabase
|
|
.from("invoices")
|
|
.select("*, client:clients(id, name, primary_contact_name, address_line1, address_line2, city, state, postal_code)")
|
|
.eq("id", invoiceId)
|
|
.maybeSingle(),
|
|
supabase
|
|
.from("invoice_line_items")
|
|
.select("*, case:cases(id, case_number, title, practice_area), user:profiles(id, full_name, email)")
|
|
.eq("invoice_id", invoiceId)
|
|
.order("sort_order", { ascending: true }),
|
|
supabase.from("invoice_payments").select("*").eq("invoice_id", invoiceId).order("paid_on", { ascending: false }),
|
|
supabase.from("firm_settings").select("*").maybeSingle(),
|
|
]);
|
|
setInvoice(invRes.data);
|
|
setItems(itemRes.data ?? []);
|
|
setPayments(payRes.data ?? []);
|
|
setFirm(firmRes.data);
|
|
setLoading(false);
|
|
};
|
|
|
|
useEffect(() => { load(); }, [invoiceId]);
|
|
|
|
// Subsection keys & labels — order matters for display.
|
|
const SUBSECTIONS: { key: string; label: string; isExpense: boolean; billable: boolean }[] = [
|
|
{ key: "bill_fee", label: "Billable Fees", isExpense: false, billable: true },
|
|
{ key: "bill_exp", label: "Billable Expenses", isExpense: true, billable: true },
|
|
{ key: "nb_fee", label: "Non-Billable Fees", isExpense: false, billable: false },
|
|
{ key: "nb_exp", label: "Non-Billable Expenses", isExpense: true, billable: false },
|
|
];
|
|
|
|
const classifyItem = (it: any): string => {
|
|
const isExpense = it.kind === "expense";
|
|
const isNonBillable = Number(it.amount) === 0 && (it.time_entry_id || it.expense_id);
|
|
if (isExpense) return isNonBillable ? "nb_exp" : "bill_exp";
|
|
return isNonBillable ? "nb_fee" : "bill_fee";
|
|
};
|
|
|
|
const groups = useMemo(() => {
|
|
const map = new Map<
|
|
string,
|
|
{
|
|
caseRow: any;
|
|
items: any[];
|
|
subtotal: number;
|
|
subsections: { key: string; label: string; billable: boolean; items: any[]; subtotal: number }[];
|
|
}
|
|
>();
|
|
for (const it of items) {
|
|
const key = it.case?.id ?? "_none";
|
|
if (!map.has(key)) {
|
|
map.set(key, {
|
|
caseRow: it.case,
|
|
items: [],
|
|
subtotal: 0,
|
|
subsections: SUBSECTIONS.map((s) => ({ key: s.key, label: s.label, billable: s.billable, items: [], subtotal: 0 })),
|
|
});
|
|
}
|
|
const g = map.get(key)!;
|
|
g.items.push(it);
|
|
const subKey = classifyItem(it);
|
|
const sub = g.subsections.find((s) => s.key === subKey)!;
|
|
sub.items.push(it);
|
|
const amt = Number(it.amount);
|
|
sub.subtotal += amt;
|
|
if (sub.billable) g.subtotal += amt;
|
|
}
|
|
// Drop empty subsections
|
|
for (const g of map.values()) g.subsections = g.subsections.filter((s) => s.items.length > 0);
|
|
return Array.from(map.values());
|
|
}, [items]);
|
|
|
|
// Billable fees vs billable expenses subtotals (non-billable items have amount 0 and are excluded).
|
|
const { feesSubtotal, expensesSubtotal } = useMemo(() => {
|
|
let fees = 0;
|
|
let exp = 0;
|
|
for (const it of items) {
|
|
const amt = Number(it.amount) || 0;
|
|
if (amt === 0) continue;
|
|
if (it.kind === "expense") exp += amt;
|
|
else fees += amt;
|
|
}
|
|
return { feesSubtotal: fees, expensesSubtotal: exp };
|
|
}, [items]);
|
|
|
|
if (loading) return <PageContainer><p className="text-muted-foreground">Loading…</p></PageContainer>;
|
|
if (!invoice) {
|
|
return (
|
|
<PageContainer>
|
|
<p className="text-muted-foreground">Invoice not found.</p>
|
|
<Button variant="outline" className="mt-3" asChild>
|
|
<Link to="/invoices"><ArrowLeft className="h-4 w-4 mr-2" /> All invoices</Link>
|
|
</Button>
|
|
</PageContainer>
|
|
);
|
|
}
|
|
|
|
const canEdit = isAdmin || invoice.created_by === user?.id;
|
|
const isDraft = invoice.status === "draft";
|
|
// Line items, notes, and tax can be edited on any non-void invoice (not just drafts).
|
|
const canModify = canEdit && invoice.status !== "void";
|
|
const balance = Number(invoice.total) - Number(invoice.amount_paid);
|
|
|
|
const setStatus = async (status: string) => {
|
|
if (status === "void") {
|
|
if (!confirm("Void this invoice? Totals will be zeroed out and time/expenses will be unbilled.")) return;
|
|
// Unlink time/expenses so they go back to unbilled
|
|
await supabase.from("time_entries").update({ invoice_id: null }).eq("invoice_id", invoiceId);
|
|
await supabase.from("expenses").update({ invoice_id: null }).eq("invoice_id", invoiceId);
|
|
// Zero out line item amounts/rates so the invoice reads as $0
|
|
await supabase
|
|
.from("invoice_line_items")
|
|
.update({ amount: 0, rate: 0, quantity: 0 })
|
|
.eq("invoice_id", invoiceId);
|
|
// Zero invoice totals + set status
|
|
const { error } = await supabase
|
|
.from("invoices")
|
|
.update({ status: "void" as any, subtotal: 0, tax: 0, total: 0 })
|
|
.eq("id", invoiceId);
|
|
if (error) return toast.error(error.message);
|
|
toast.success("Invoice voided and zeroed out");
|
|
load();
|
|
return;
|
|
}
|
|
const { error } = await supabase.from("invoices").update({ status: status as any }).eq("id", invoiceId);
|
|
if (error) toast.error(error.message);
|
|
else { toast.success(`Marked ${status}`); load(); }
|
|
};
|
|
|
|
const removeItem = async (id: string) => {
|
|
if (!confirm("Remove this line item?")) return;
|
|
const { error } = await supabase.from("invoice_line_items").delete().eq("id", id);
|
|
if (error) return toast.error(error.message);
|
|
await recalcInvoiceTotals(invoiceId);
|
|
load();
|
|
};
|
|
|
|
const updateItem = async (id: string, patch: any) => {
|
|
const next: any = { ...patch };
|
|
if (patch.quantity != null || patch.rate != null) {
|
|
const cur = items.find((i) => i.id === id);
|
|
const q = Number(patch.quantity ?? cur.quantity);
|
|
const r = Number(patch.rate ?? cur.rate);
|
|
next.amount = +(q * r).toFixed(2);
|
|
}
|
|
const { error } = await supabase.from("invoice_line_items").update(next).eq("id", id);
|
|
if (error) return toast.error(error.message);
|
|
await recalcInvoiceTotals(invoiceId);
|
|
load();
|
|
};
|
|
|
|
const addManualItem = async (caseId: string | null) => {
|
|
setSavingItem(true);
|
|
const sort_order = items.length ? Math.max(...items.map((i) => i.sort_order)) + 1 : 0;
|
|
const { error } = await supabase.from("invoice_line_items").insert({
|
|
invoice_id: invoiceId,
|
|
case_id: caseId,
|
|
kind: "manual",
|
|
description: "New line",
|
|
quantity: 1,
|
|
rate: 0,
|
|
amount: 0,
|
|
sort_order,
|
|
});
|
|
setSavingItem(false);
|
|
if (error) return toast.error(error.message);
|
|
await recalcInvoiceTotals(invoiceId);
|
|
load();
|
|
};
|
|
|
|
const updateNotes = async (notes: string) => {
|
|
await supabase.from("invoices").update({ notes }).eq("id", invoiceId);
|
|
};
|
|
|
|
const updateTaxRate = async (ratePct: string) => {
|
|
const subtotal = Number(invoice.subtotal);
|
|
const taxRate = Math.max(0, Number(ratePct) || 0) / 100;
|
|
const tax = +(subtotal * taxRate).toFixed(2);
|
|
const total = +(subtotal + tax).toFixed(2);
|
|
await supabase.from("invoices").update({ tax, total }).eq("id", invoiceId);
|
|
load();
|
|
};
|
|
|
|
const downloadPdf = async () => {
|
|
let logoDataUrl: string | null = null;
|
|
if (firm?.logo_storage_path) {
|
|
const { data: signed } = await supabase.storage
|
|
.from("firm-logos")
|
|
.createSignedUrl(firm.logo_storage_path, 60);
|
|
if (signed?.signedUrl) {
|
|
try {
|
|
const res = await fetch(signed.signedUrl);
|
|
const blob = await res.blob();
|
|
logoDataUrl = await new Promise<string>((resolve) => {
|
|
const r = new FileReader();
|
|
r.onload = () => resolve(r.result as string);
|
|
r.readAsDataURL(blob);
|
|
});
|
|
} catch { /* ignore */ }
|
|
}
|
|
}
|
|
|
|
const input: InvoicePdfInput = {
|
|
firm: {
|
|
name: firm?.company_name,
|
|
address1: firm?.address_line1,
|
|
address2: firm?.address_line2,
|
|
city: firm?.city,
|
|
state: firm?.state,
|
|
postal: firm?.postal_code,
|
|
email: firm?.contact_email,
|
|
phone: firm?.contact_phone,
|
|
website: firm?.website,
|
|
footerNote: firm?.footer_note,
|
|
logoDataUrl,
|
|
},
|
|
client: {
|
|
name: invoice.client?.name ?? "Client",
|
|
contact: invoice.client?.primary_contact_name,
|
|
address1: invoice.client?.address_line1,
|
|
address2: invoice.client?.address_line2,
|
|
city: invoice.client?.city,
|
|
state: invoice.client?.state,
|
|
postal: invoice.client?.postal_code,
|
|
},
|
|
invoice: {
|
|
number: invoice.invoice_number,
|
|
issueDate: invoice.issue_date,
|
|
dueDate: invoice.due_date,
|
|
status: invoice.status,
|
|
notes: invoice.notes,
|
|
matter: groups.length === 1 ? (groups[0].caseRow?.title ?? null) : null,
|
|
caseNumber: groups.length === 1 ? (groups[0].caseRow?.case_number ?? null) : null,
|
|
},
|
|
groups: groups.map((g) => {
|
|
const mapItem = (it: any) => {
|
|
const name: string = it.user?.full_name || it.user?.email || "";
|
|
const initials = name
|
|
.trim()
|
|
.split(/\s+/)
|
|
.map((p: string) => p[0])
|
|
.filter(Boolean)
|
|
.slice(0, 3)
|
|
.join("")
|
|
.toUpperCase();
|
|
const isNonBillable = Number(it.amount) === 0 && (it.time_entry_id || it.expense_id);
|
|
return {
|
|
kind: it.kind,
|
|
description: it.description,
|
|
work_date: it.work_date,
|
|
quantity: Number(it.quantity),
|
|
rate: Number(it.rate),
|
|
amount: Number(it.amount),
|
|
user_name: name || null,
|
|
user_initials: initials || null,
|
|
billable: !isNonBillable,
|
|
};
|
|
};
|
|
return {
|
|
caseNumber: g.caseRow?.case_number ?? "—",
|
|
caseTitle: g.caseRow?.title ?? "(unassigned)",
|
|
practiceArea: g.caseRow?.practice_area,
|
|
subtotal: g.subtotal,
|
|
items: g.items.map(mapItem),
|
|
subsections: g.subsections.map((s) => ({
|
|
key: s.key,
|
|
label: s.label,
|
|
billable: s.billable,
|
|
subtotal: s.subtotal,
|
|
items: s.items.map(mapItem),
|
|
})),
|
|
};
|
|
}),
|
|
totals: {
|
|
subtotal: Number(invoice.subtotal),
|
|
tax: Number(invoice.tax),
|
|
total: Number(invoice.total),
|
|
paid: Number(invoice.amount_paid),
|
|
balance,
|
|
taxRatePct:
|
|
Number(invoice.subtotal) > 0
|
|
? Math.round((Number(invoice.tax) / Number(invoice.subtotal)) * 10000) / 100
|
|
: 0,
|
|
feesAndExpenses: Number(invoice.subtotal),
|
|
},
|
|
};
|
|
await downloadInvoicePdf(input, `${invoice.invoice_number}.pdf`);
|
|
};
|
|
|
|
const deleteInvoice = async () => {
|
|
const msg = isDraft
|
|
? "Delete this draft invoice and unbill its time/expenses?"
|
|
: `Permanently delete invoice ${invoice.invoice_number}? This will remove all payments and unbill its time/expenses. This cannot be undone.`;
|
|
if (!confirm(msg)) return;
|
|
// Unlink time/expenses
|
|
await supabase.from("time_entries").update({ invoice_id: null }).eq("invoice_id", invoiceId);
|
|
await supabase.from("expenses").update({ invoice_id: null }).eq("invoice_id", invoiceId);
|
|
// Remove payments first (no cascade guarantee)
|
|
await supabase.from("invoice_payments").delete().eq("invoice_id", invoiceId);
|
|
await supabase.from("invoice_line_items").delete().eq("invoice_id", invoiceId);
|
|
const { error } = await supabase.from("invoices").delete().eq("id", invoiceId);
|
|
if (error) return toast.error(error.message);
|
|
toast.success("Invoice deleted");
|
|
navigate({ to: "/invoices" });
|
|
};
|
|
|
|
return (
|
|
<PageContainer>
|
|
<Button variant="ghost" size="sm" asChild className="mb-3 -ml-2">
|
|
<Link to="/invoices"><ArrowLeft className="h-4 w-4 mr-1" /> All invoices</Link>
|
|
</Button>
|
|
|
|
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4 mb-6">
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<span className="text-xs uppercase tracking-widest text-muted-foreground">Invoice</span>
|
|
<Badge variant="outline" className={statusBadgeClass(invoice.status)}>{invoice.status}</Badge>
|
|
{invoice.is_retainer && (
|
|
<Badge variant="outline" className="border-emerald-500/40 text-emerald-700 dark:text-emerald-400">
|
|
<Wallet className="h-3 w-3 mr-1" /> Retainer
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<h1 className="font-serif text-3xl">{invoice.invoice_number}</h1>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
<Link to="/clients/$clientId" params={{ clientId: invoice.client?.id }} className="hover:text-primary">
|
|
{invoice.client?.name}
|
|
</Link>
|
|
{" · "}Issued {formatDate(invoice.issue_date)}
|
|
{invoice.due_date && <> · Due {formatDate(invoice.due_date)}</>}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button variant="outline" onClick={downloadPdf}><FileDown className="h-4 w-4 mr-2" /> Download PDF</Button>
|
|
{canEdit && isDraft && (
|
|
<Button onClick={() => setStatus("sent")}><Send className="h-4 w-4 mr-2" /> Mark sent</Button>
|
|
)}
|
|
{canEdit && (invoice.status === "sent" || invoice.status === "overdue") && (
|
|
<Button variant="outline" onClick={() => setStatus("paid")}><CheckCircle2 className="h-4 w-4 mr-2" /> Mark paid</Button>
|
|
)}
|
|
{canEdit && invoice.status !== "void" && invoice.status !== "paid" && (
|
|
<Button variant="outline" onClick={() => setStatus("void")}><Ban className="h-4 w-4 mr-2" /> Void</Button>
|
|
)}
|
|
{canEdit && balance > 0 && !invoice.is_retainer && (
|
|
<Button variant="outline" onClick={() => setTrustOpen(true)}>
|
|
<Wallet className="h-4 w-4 mr-2" /> Apply trust funds
|
|
</Button>
|
|
)}
|
|
{canEdit && (
|
|
<Button onClick={() => setPayOpen(true)}><DollarSign className="h-4 w-4 mr-2" /> Record payment</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid lg:grid-cols-3 gap-5">
|
|
<div className="lg:col-span-2 space-y-5">
|
|
{groups.length === 0 && (
|
|
<Card className="border-border/60">
|
|
<CardContent className="p-6 text-center text-muted-foreground">No line items.</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{groups.map((g, gi) => (
|
|
<Card key={gi} className="border-border/60 overflow-hidden">
|
|
<CardContent className="p-0">
|
|
<div className="px-4 py-3 bg-muted/40 border-b flex flex-wrap items-center justify-between gap-2">
|
|
<div>
|
|
<div className="font-medium">{g.caseRow?.title ?? "Unassigned"}</div>
|
|
<div className="text-xs text-muted-foreground">{g.caseRow?.case_number}{g.caseRow?.practice_area ? ` · ${g.caseRow.practice_area}` : ""}</div>
|
|
</div>
|
|
<div className="text-sm tabular-nums font-medium">{formatCurrency(g.subtotal)}</div>
|
|
</div>
|
|
<table className="w-full text-sm">
|
|
<thead className="text-xs uppercase tracking-wider text-muted-foreground">
|
|
<tr>
|
|
<th className="text-left px-3 py-2 font-medium w-[100px]">Date</th>
|
|
<th className="text-left px-3 py-2 font-medium">Description</th>
|
|
<th className="text-right px-3 py-2 font-medium w-[80px]">Qty</th>
|
|
<th className="text-right px-3 py-2 font-medium w-[100px]">Rate</th>
|
|
<th className="text-right px-3 py-2 font-medium w-[110px]">Amount</th>
|
|
{canModify && <th className="w-[40px]" />}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{g.subsections.map((sub) => (
|
|
<Fragment key={sub.key}>
|
|
<tr className="bg-muted/20 border-t">
|
|
<td colSpan={4} className="px-3 py-1.5 text-[11px] uppercase tracking-wider font-semibold text-muted-foreground">
|
|
{sub.label}
|
|
</td>
|
|
<td className="px-3 py-1.5 text-right tabular-nums text-xs font-semibold text-muted-foreground">
|
|
{sub.billable ? formatCurrency(sub.subtotal) : "—"}
|
|
</td>
|
|
{canModify && <td />}
|
|
</tr>
|
|
{sub.items.map((it) => (
|
|
<tr key={it.id} className={`border-t ${!sub.billable ? "text-muted-foreground" : ""}`}>
|
|
<td className="px-3 py-2 text-xs">{it.work_date ? formatDate(it.work_date) : "—"}</td>
|
|
<td className="px-3 py-2 align-top">
|
|
{canModify ? (
|
|
<Input className="h-8" defaultValue={it.description}
|
|
onBlur={(e) => e.target.value !== it.description && updateItem(it.id, { description: e.target.value })} />
|
|
) : (
|
|
<div className="min-w-0">
|
|
<div className={`whitespace-pre-wrap break-words ${!sub.billable ? "italic" : ""}`}>{it.description}</div>
|
|
{(() => {
|
|
const nm: string = it.user?.full_name || it.user?.email || "";
|
|
const init = nm.trim().split(/\s+/).map((p: string) => p[0]).filter(Boolean).slice(0, 3).join("").toUpperCase();
|
|
return init ? <div className="text-[11px] text-muted-foreground italic">{init}</div> : null;
|
|
})()}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-3 py-2 text-right tabular-nums">
|
|
{canModify ? (
|
|
<Input className="h-8 text-right tabular-nums" defaultValue={Number(it.quantity)}
|
|
onBlur={(e) => Number(e.target.value) !== Number(it.quantity) && updateItem(it.id, { quantity: Number(e.target.value) })} />
|
|
) : Number(it.quantity).toFixed(2)}
|
|
</td>
|
|
<td className="px-3 py-2 text-right tabular-nums">
|
|
{canModify ? (
|
|
<Input className="h-8 text-right tabular-nums" defaultValue={Number(it.rate)}
|
|
onBlur={(e) => Number(e.target.value) !== Number(it.rate) && updateItem(it.id, { rate: Number(e.target.value) })} />
|
|
) : formatCurrency(it.rate)}
|
|
</td>
|
|
<td className="px-3 py-2 text-right tabular-nums font-medium">
|
|
{sub.billable ? formatCurrency(it.amount) : "—"}
|
|
</td>
|
|
{canModify && (
|
|
<td className="px-2 py-2 text-right">
|
|
<Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-destructive" onClick={() => removeItem(it.id)}>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
))}
|
|
</Fragment>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{canModify && (
|
|
<div className="border-t px-3 py-2 bg-muted/20">
|
|
<Button variant="ghost" size="sm" onClick={() => addManualItem(g.caseRow?.id ?? null)} disabled={savingItem}>
|
|
<Plus className="h-3.5 w-3.5 mr-1.5" /> Add line to {g.caseRow?.case_number ?? "this group"}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
|
|
{canModify && groups.length === 0 && (
|
|
<Button variant="outline" onClick={() => addManualItem(null)}>
|
|
<Plus className="h-4 w-4 mr-2" /> Add first line item
|
|
</Button>
|
|
)}
|
|
|
|
<Card className="border-border/60">
|
|
<CardContent className="p-4 space-y-2">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Notes</Label>
|
|
{canModify ? (
|
|
<Textarea defaultValue={invoice.notes ?? ""} rows={3} placeholder="Payment terms, thank-you message…"
|
|
onBlur={(e) => updateNotes(e.target.value)} />
|
|
) : (
|
|
<p className="text-sm whitespace-pre-wrap">{invoice.notes || <span className="text-muted-foreground italic">—</span>}</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Card className="border-border/60">
|
|
<CardContent className="p-5 space-y-2 text-sm">
|
|
<Row label="Fees subtotal" value={formatCurrency(feesSubtotal)} />
|
|
<Row label="Expenses subtotal" value={formatCurrency(expensesSubtotal)} />
|
|
<Row label="Subtotal" value={formatCurrency(invoice.subtotal)} />
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-muted-foreground">Tax</span>
|
|
{canModify ? (
|
|
<div className="flex items-center gap-1">
|
|
<Input className="h-7 w-16 text-right tabular-nums" type="number" step="0.01"
|
|
defaultValue={invoice.subtotal > 0 ? ((Number(invoice.tax) / Number(invoice.subtotal)) * 100).toFixed(2) : "0"}
|
|
onBlur={(e) => updateTaxRate(e.target.value)} />
|
|
<span className="text-xs text-muted-foreground">%</span>
|
|
</div>
|
|
) : <span className="tabular-nums">{formatCurrency(invoice.tax)}</span>}
|
|
</div>
|
|
<div className="flex justify-between pt-2 border-t font-medium">
|
|
<span>Total</span><span className="tabular-nums font-serif text-lg">{formatCurrency(invoice.total)}</span>
|
|
</div>
|
|
{Number(invoice.amount_paid) > 0 && (
|
|
<>
|
|
<Row label="Paid" value={`- ${formatCurrency(invoice.amount_paid)}`} muted />
|
|
<div className="flex justify-between pt-2 border-t font-medium">
|
|
<span>Balance due</span><span className="tabular-nums font-serif text-lg text-primary">{formatCurrency(balance)}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/60">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="font-serif text-sm">Payments</h3>
|
|
{canEdit && (
|
|
<Button variant="outline" size="sm" onClick={() => setPayOpen(true)}>
|
|
<Plus className="h-3.5 w-3.5 mr-1" /> Add
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{payments.length === 0 && <p className="text-sm text-muted-foreground">No payments recorded.</p>}
|
|
<div className="space-y-1">
|
|
{payments.map((p) => (
|
|
<div key={p.id} className="flex justify-between items-baseline text-sm border-b py-1.5 last:border-0">
|
|
<div>
|
|
<div>{formatDate(p.paid_on)}</div>
|
|
<div className="text-xs text-muted-foreground">{p.method || "—"}{p.reference ? ` · ${p.reference}` : ""}</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="tabular-nums font-medium">{formatCurrency(p.amount)}</span>
|
|
{canEdit && p.method !== "trust" && (
|
|
<PushPaymentToTrustButton
|
|
payment={p}
|
|
invoice={{
|
|
id: invoice.id,
|
|
invoice_number: invoice.invoice_number,
|
|
client_id: invoice.client?.id ?? invoice.client_id,
|
|
case_id: invoice.case_id ?? null,
|
|
}}
|
|
userId={user?.id ?? null}
|
|
onPushed={load}
|
|
/>
|
|
)}
|
|
{canEdit && (
|
|
<Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-destructive"
|
|
onClick={async () => {
|
|
if (!confirm("Delete this payment?")) return;
|
|
await supabase.from("invoice_payments").delete().eq("id", p.id);
|
|
load();
|
|
}}>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{canEdit && (
|
|
<Button variant="outline" className="w-full text-destructive hover:text-destructive" onClick={deleteInvoice}>
|
|
<Trash2 className="h-4 w-4 mr-2" /> {isDraft ? "Delete draft" : "Delete invoice"}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<RecordPaymentDialog
|
|
open={payOpen}
|
|
onOpenChange={setPayOpen}
|
|
invoiceId={invoiceId}
|
|
balance={balance}
|
|
userId={user?.id ?? ""}
|
|
onSaved={load}
|
|
/>
|
|
|
|
{invoice.client?.id && (
|
|
<ApplyTrustDialog
|
|
open={trustOpen}
|
|
onOpenChange={setTrustOpen}
|
|
clientId={invoice.client.id}
|
|
caseId={invoice.case_id ?? null}
|
|
invoiceId={invoiceId}
|
|
invoiceNumber={invoice.invoice_number}
|
|
balanceDue={balance}
|
|
userId={user?.id ?? null}
|
|
onApplied={load}
|
|
/>
|
|
)}
|
|
</PageContainer>
|
|
);
|
|
}
|
|
|
|
function Row({ label, value, muted }: { label: string; value: string; muted?: boolean }) {
|
|
return (
|
|
<div className="flex justify-between">
|
|
<span className={muted ? "text-muted-foreground" : "text-muted-foreground"}>{label}</span>
|
|
<span className={`tabular-nums ${muted ? "text-muted-foreground" : ""}`}>{value}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RecordPaymentDialog({ open, onOpenChange, invoiceId, balance, userId, onSaved }: {
|
|
open: boolean; onOpenChange: (b: boolean) => void; invoiceId: string; balance: number; userId: string; onSaved: () => void;
|
|
}) {
|
|
const [amount, setAmount] = useState(balance > 0 ? balance.toFixed(2) : "");
|
|
const [paidOn, setPaidOn] = useState(new Date().toISOString().slice(0, 10));
|
|
const [method, setMethod] = useState("check");
|
|
const [reference, setReference] = useState("");
|
|
const [notes, setNotes] = useState("");
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => { if (open) setAmount(balance > 0 ? balance.toFixed(2) : ""); }, [open, balance]);
|
|
|
|
const save = async () => {
|
|
const amt = Number(amount);
|
|
if (!amt || amt <= 0) return toast.error("Enter a valid amount");
|
|
setSaving(true);
|
|
const { error } = await supabase.from("invoice_payments").insert({
|
|
invoice_id: invoiceId,
|
|
amount: amt,
|
|
paid_on: paidOn,
|
|
method,
|
|
reference: reference || null,
|
|
notes: notes || null,
|
|
created_by: userId || null,
|
|
});
|
|
setSaving(false);
|
|
if (error) return toast.error(error.message);
|
|
toast.success("Payment recorded");
|
|
onOpenChange(false);
|
|
onSaved();
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader><DialogTitle>Record payment</DialogTitle></DialogHeader>
|
|
<div className="space-y-3">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label>Amount</Label>
|
|
<Input type="number" step="0.01" value={amount} onChange={(e) => setAmount(e.target.value)} />
|
|
</div>
|
|
<div>
|
|
<Label>Paid on</Label>
|
|
<Input type="date" value={paidOn} onChange={(e) => setPaidOn(e.target.value)} />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label>Method</Label>
|
|
<Select value={method} onValueChange={setMethod}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="check">Check</SelectItem>
|
|
<SelectItem value="ach">ACH / Wire</SelectItem>
|
|
<SelectItem value="card">Credit Card</SelectItem>
|
|
<SelectItem value="cash">Cash</SelectItem>
|
|
<SelectItem value="trust">Trust transfer</SelectItem>
|
|
<SelectItem value="other">Other</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label>Reference</Label>
|
|
<Input value={reference} onChange={(e) => setReference(e.target.value)} placeholder="Check #, txn id…" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Label>Notes</Label>
|
|
<Textarea rows={2} value={notes} onChange={(e) => setNotes(e.target.value)} />
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
|
|
<Button onClick={save} disabled={saving}>
|
|
{saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}Save payment
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|