mirror of
https://github.com/renee-png/acmcc.git
synced 2026-06-21 01:40:01 +00:00
Add ACMCC app source, Supabase backend, and project config
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,478 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { pushBillToZohoAfterCreate, pushBillPaymentToZohoAfterPay, deleteBillPaymentFromZohoAfterUnpay } from "@/lib/zohoBillSync";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { FileText, Plus, Search, MoreHorizontal, Edit, Trash2, CheckCircle, XCircle, DollarSign, Download, Loader2 } from "lucide-react";
|
||||
import RecordImportButton from "@/components/RecordImportButton";
|
||||
import QuickAddVendorDialog from "@/components/vendors/QuickAddVendorDialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
draft: "bg-muted text-muted-foreground",
|
||||
pending_approval: "bg-amber-100 text-amber-700",
|
||||
approved: "bg-blue-100 text-blue-700",
|
||||
rejected: "bg-red-100 text-red-700",
|
||||
paid: "bg-emerald-100 text-emerald-700",
|
||||
voided: "bg-gray-100 text-gray-500",
|
||||
partial: "bg-purple-100 text-purple-700",
|
||||
};
|
||||
|
||||
export default function BillsPage() {
|
||||
const { toast } = useToast();
|
||||
const [bills, setBills] = useState<any[]>([]);
|
||||
const [vendors, setVendors] = useState<any[]>([]);
|
||||
const [accounts, setAccounts] = useState<any[]>([]);
|
||||
const [associations, setAssociations] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState("all");
|
||||
const [associationFilter, setAssociationFilter] = useState<string>("all");
|
||||
const [paidTab, setPaidTab] = useState<"unpaid" | "paid" | "all">("unpaid");
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<any>(null);
|
||||
const [buildiumOpen, setBuildiumOpen] = useState(false);
|
||||
const [buildiumAssoc, setBuildiumAssoc] = useState<string>("all");
|
||||
const [buildiumFrom, setBuildiumFrom] = useState<string>("");
|
||||
const [buildiumTo, setBuildiumTo] = useState<string>("");
|
||||
const [buildiumImporting, setBuildiumImporting] = useState(false);
|
||||
const [quickVendorOpen, setQuickVendorOpen] = useState(false);
|
||||
const [form, setForm] = useState({
|
||||
vendor_id: "", invoice_number: "", bill_date: new Date().toISOString().split("T")[0],
|
||||
due_date: "", amount: "", expense_account_id: "", description: "", notes: "", association_id: ""
|
||||
});
|
||||
|
||||
const importFromBuildium = async () => {
|
||||
setBuildiumImporting(true);
|
||||
try {
|
||||
const { data, error } = await supabase.functions.invoke("buildium-sync", {
|
||||
body: {
|
||||
syncType: "bills",
|
||||
selectedAssociationIds: buildiumAssoc === "all" ? [] : [buildiumAssoc],
|
||||
dateFrom: buildiumFrom || undefined,
|
||||
dateTo: buildiumTo || undefined,
|
||||
},
|
||||
});
|
||||
if (error) throw error;
|
||||
const r = data?.results?.bills || {};
|
||||
toast({
|
||||
title: "Buildium import complete",
|
||||
description: `Fetched ${r.fetched || 0} • Created ${r.created || 0} • Updated ${r.updated || 0} • Linked duplicates ${r.linked_duplicates || 0} • Vendors created ${r.vendors_created || 0}`,
|
||||
});
|
||||
setBuildiumOpen(false);
|
||||
fetchData();
|
||||
} catch (err: any) {
|
||||
toast({ variant: "destructive", title: "Import failed", description: err?.message || String(err) });
|
||||
} finally {
|
||||
setBuildiumImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
// Paginate bills (Supabase caps default queries at 1,000 rows)
|
||||
const PAGE = 1000;
|
||||
const allBills: any[] = [];
|
||||
for (let from = 0; ; from += PAGE) {
|
||||
const { data, error } = await supabase
|
||||
.from("bills")
|
||||
.select("*, vendors(name), chart_of_accounts(account_name, account_number)")
|
||||
.order("bill_date", { ascending: false })
|
||||
.range(from, from + PAGE - 1);
|
||||
if (error) break;
|
||||
allBills.push(...(data || []));
|
||||
if (!data || data.length < PAGE) break;
|
||||
}
|
||||
const [vRes, assocRes] = await Promise.all([
|
||||
supabase.from("vendors").select("id, name, association_id, association_ids").eq("is_active", true).order("name"),
|
||||
supabase.from("associations").select("id, name, zoho_organization_id").eq("status", "active").order("name"),
|
||||
]);
|
||||
setBills(allBills);
|
||||
setVendors(vRes.data || []);
|
||||
setAssociations(assocRes.data || []);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => { fetchData(); }, []);
|
||||
|
||||
// Re-fetch the chart of accounts whenever the selected association changes,
|
||||
// scoped to that association's accounting system (zoho vs buildium).
|
||||
useEffect(() => {
|
||||
if (!form.association_id) { setAccounts([]); return; }
|
||||
const assoc = associations.find(a => a.id === form.association_id);
|
||||
const system = assoc?.zoho_organization_id ? "zoho" : "buildium";
|
||||
supabase.from("chart_of_accounts")
|
||||
.select("id, account_name, account_number, account_type")
|
||||
.eq("is_active", true)
|
||||
.eq("accounting_system", system)
|
||||
.order("account_number")
|
||||
.then(({ data }) => setAccounts(data || []));
|
||||
}, [form.association_id, associations]);
|
||||
|
||||
|
||||
const filtered = bills.filter(b => {
|
||||
// Tabs split: paid vs unpaid (everything not paid except voided counts as unpaid)
|
||||
if (paidTab === "paid" && b.status !== "paid") return false;
|
||||
if (paidTab === "unpaid" && (b.status === "paid" || b.status === "voided")) return false;
|
||||
if (statusFilter !== "all" && b.status !== statusFilter) return false;
|
||||
if (associationFilter !== "all" && b.association_id !== associationFilter) return false;
|
||||
if (search) {
|
||||
const q = search.toLowerCase();
|
||||
return (b.vendors?.name || "").toLowerCase().includes(q) || (b.invoice_number || "").toLowerCase().includes(q) || (b.description || "").toLowerCase().includes(q);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
const tabCounts = bills.reduce((acc, b) => {
|
||||
if (b.status === "paid") acc.paid++;
|
||||
else if (b.status !== "voided") acc.unpaid++;
|
||||
acc.all++;
|
||||
return acc;
|
||||
}, { unpaid: 0, paid: 0, all: 0 });
|
||||
|
||||
const totals = bills.reduce((acc, b) => {
|
||||
acc.total += Number(b.amount);
|
||||
if (b.status === "paid") acc.paid += Number(b.amount);
|
||||
if (["draft", "pending_approval", "approved"].includes(b.status)) acc.unpaid += Number(b.amount) - Number(b.amount_paid);
|
||||
return acc;
|
||||
}, { total: 0, paid: 0, unpaid: 0 });
|
||||
|
||||
const openNew = () => {
|
||||
setEditing(null);
|
||||
setForm({
|
||||
vendor_id: "", invoice_number: "", bill_date: new Date().toISOString().split("T")[0],
|
||||
due_date: "", amount: "", expense_account_id: "", description: "", notes: "",
|
||||
association_id: associations[0]?.id || ""
|
||||
});
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const openEdit = (b: any) => {
|
||||
setEditing(b);
|
||||
setForm({
|
||||
vendor_id: b.vendor_id || "", invoice_number: b.invoice_number || "",
|
||||
bill_date: b.bill_date, due_date: b.due_date || "", amount: b.amount?.toString() || "",
|
||||
expense_account_id: b.expense_account_id || "", description: b.description || "",
|
||||
notes: b.notes || "", association_id: b.association_id
|
||||
});
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!form.amount || !form.association_id) { toast({ variant: "destructive", title: "Amount and association are required" }); return; }
|
||||
const payload = {
|
||||
...form, amount: parseFloat(form.amount) || 0,
|
||||
vendor_id: form.vendor_id || null, expense_account_id: form.expense_account_id || null,
|
||||
due_date: form.due_date || null
|
||||
};
|
||||
if (editing) {
|
||||
await supabase.from("bills").update(payload).eq("id", editing.id);
|
||||
toast({ title: "Bill updated" });
|
||||
} else {
|
||||
const { data: newBill } = await supabase.from("bills").insert(payload).select("id").single();
|
||||
toast({ title: "Bill created" });
|
||||
if (newBill?.id) pushBillToZohoAfterCreate(newBill.id);
|
||||
}
|
||||
setDialogOpen(false);
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const updateStatus = async (id: string, status: string) => {
|
||||
// Look up the current bill so we can void/clear the linked check when reverting to unpaid
|
||||
const current = bills.find((b) => b.id === id);
|
||||
const wasPaid = current?.status === "paid";
|
||||
const revertingToUnpaid = wasPaid && (status === "approved" || status === "pending_approval" || status === "draft");
|
||||
|
||||
const updates: any = { status };
|
||||
if (status === "approved") updates.approved_date = new Date().toISOString().split("T")[0];
|
||||
if (status === "paid") updates.paid_date = new Date().toISOString().split("T")[0];
|
||||
// Reverting to unpaid clears paid date, payment amount, and the linked check reference
|
||||
if (status === "approved" || status === "pending_approval" || status === "draft") {
|
||||
updates.paid_date = null;
|
||||
updates.amount_paid = 0;
|
||||
updates.payment_method = null;
|
||||
updates.check_id = null;
|
||||
}
|
||||
|
||||
if (revertingToUnpaid && current?.check_id) {
|
||||
// Void the linked check
|
||||
await supabase
|
||||
.from("checks")
|
||||
.update({ status: "voided", printed: false })
|
||||
.eq("id", current.check_id);
|
||||
// Remove the matching bank ledger entry (vendor ledger) created when the check was issued
|
||||
await supabase
|
||||
.from("bank_transactions")
|
||||
.delete()
|
||||
.eq("related_entity_type", "check")
|
||||
.eq("related_entity_id", current.check_id);
|
||||
}
|
||||
|
||||
await supabase.from("bills").update(updates).eq("id", id);
|
||||
toast({ title: `Bill ${status.replace("_", " ")}` });
|
||||
|
||||
if (status === "paid") {
|
||||
const result = await pushBillPaymentToZohoAfterPay(id);
|
||||
if (!result.success) {
|
||||
toast({ variant: "destructive", title: "Zoho payment sync failed", description: result.error });
|
||||
}
|
||||
} else if (revertingToUnpaid) {
|
||||
const result = await deleteBillPaymentFromZohoAfterUnpay(id);
|
||||
if (!result.success) {
|
||||
toast({ variant: "destructive", title: "Zoho payment delete failed", description: result.error });
|
||||
}
|
||||
}
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
await supabase.from("bills").delete().eq("id", id);
|
||||
toast({ title: "Bill deleted" });
|
||||
fetchData();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground flex items-center gap-2"><FileText className="h-6 w-6 text-primary" /> Bills</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">Manage accounts payable and vendor bills.</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<RecordImportButton
|
||||
title="Import Bills"
|
||||
description="Upload a CSV or Excel file with bill records."
|
||||
expectedColumns={[
|
||||
{ key: "vendor_name", label: "Vendor Name", required: true },
|
||||
{ key: "invoice_number", label: "Invoice Number" },
|
||||
{ key: "amount", label: "Amount", required: true },
|
||||
{ key: "bill_date", label: "Bill Date" },
|
||||
{ key: "due_date", label: "Due Date" },
|
||||
{ key: "description", label: "Description" },
|
||||
]}
|
||||
onImport={async (rows) => {
|
||||
const assocId = associations[0]?.id;
|
||||
if (!assocId) throw new Error("Create an association first");
|
||||
const vendorMap = new Map(vendors.map(v => [v.name.toLowerCase(), v.id]));
|
||||
const payload = rows.map(r => ({
|
||||
vendor_id: vendorMap.get((r.vendor_name || "").toLowerCase()) || null,
|
||||
invoice_number: r.invoice_number || null,
|
||||
amount: parseFloat(r.amount) || 0,
|
||||
bill_date: r.bill_date || new Date().toISOString().split("T")[0],
|
||||
due_date: r.due_date || null,
|
||||
description: r.description || null,
|
||||
association_id: assocId,
|
||||
}));
|
||||
const { error } = await supabase.from("bills").insert(payload);
|
||||
if (error) throw error;
|
||||
toast({ title: `Imported ${rows.length} bills` });
|
||||
fetchData();
|
||||
}}
|
||||
templateFileName="bills_template.xlsx"
|
||||
/>
|
||||
<Button variant="outline" className="gap-2" onClick={() => setBuildiumOpen(true)}>
|
||||
<Download className="h-4 w-4" /> Import from Buildium
|
||||
</Button>
|
||||
<Button className="gap-2" onClick={openNew}><Plus className="h-4 w-4" /> New Bill</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card><CardContent className="pt-6"><p className="text-sm text-muted-foreground">Total Bills</p><p className="text-2xl font-bold font-mono">${totals.total.toLocaleString("en-US", { minimumFractionDigits: 2 })}</p></CardContent></Card>
|
||||
<Card><CardContent className="pt-6"><p className="text-sm text-muted-foreground">Paid</p><p className="text-2xl font-bold font-mono text-emerald-600">${totals.paid.toLocaleString("en-US", { minimumFractionDigits: 2 })}</p></CardContent></Card>
|
||||
<Card><CardContent className="pt-6"><p className="text-sm text-muted-foreground">Outstanding</p><p className="text-2xl font-bold font-mono text-amber-600">${totals.unpaid.toLocaleString("en-US", { minimumFractionDigits: 2 })}</p></CardContent></Card>
|
||||
</div>
|
||||
|
||||
<Tabs value={paidTab} onValueChange={(v) => setPaidTab(v as "unpaid" | "paid" | "all")}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="unpaid">Unpaid ({tabCounts.unpaid})</TabsTrigger>
|
||||
<TabsTrigger value="paid">Paid ({tabCounts.paid})</TabsTrigger>
|
||||
<TabsTrigger value="all">All ({tabCounts.all})</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input placeholder="Search bills..." className="pl-10" value={search} onChange={(e) => setSearch(e.target.value)} />
|
||||
</div>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-44"><SelectValue placeholder="All Statuses" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Statuses</SelectItem>
|
||||
<SelectItem value="draft">Draft</SelectItem>
|
||||
<SelectItem value="pending_approval">Pending Approval</SelectItem>
|
||||
<SelectItem value="approved">Approved</SelectItem>
|
||||
<SelectItem value="paid">Paid</SelectItem>
|
||||
<SelectItem value="voided">Voided</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={associationFilter} onValueChange={setAssociationFilter}>
|
||||
<SelectTrigger className="w-64"><SelectValue placeholder="All Clients" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Clients</SelectItem>
|
||||
{associations.map(a => <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-12"><div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" /></div>
|
||||
) : filtered.length === 0 ? (
|
||||
<Card><CardContent className="py-12 text-center text-muted-foreground">No bills found.</CardContent></Card>
|
||||
) : (
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Vendor</TableHead>
|
||||
<TableHead>Invoice #</TableHead>
|
||||
<TableHead>Bill Date</TableHead>
|
||||
<TableHead>Due Date</TableHead>
|
||||
<TableHead>Expense Account</TableHead>
|
||||
<TableHead className="text-right">Amount</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="w-12" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.map((b) => (
|
||||
<TableRow key={b.id}>
|
||||
<TableCell className="font-medium">{b.vendors?.name || "—"}</TableCell>
|
||||
<TableCell>{b.invoice_number || "—"}</TableCell>
|
||||
<TableCell>{b.bill_date}</TableCell>
|
||||
<TableCell>{b.due_date || "—"}</TableCell>
|
||||
<TableCell className="text-sm">{b.chart_of_accounts ? `${b.chart_of_accounts.account_number} - ${b.chart_of_accounts.account_name}` : "—"}</TableCell>
|
||||
<TableCell className="text-right font-mono font-medium">${Number(b.amount).toLocaleString("en-US", { minimumFractionDigits: 2 })}</TableCell>
|
||||
<TableCell><Badge variant="outline" className={statusColors[b.status] || ""}>{b.status.replace("_", " ")}</Badge></TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild><Button variant="ghost" size="icon" className="h-8 w-8"><MoreHorizontal className="h-4 w-4" /></Button></DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => openEdit(b)}><Edit className="h-4 w-4 mr-2" /> Edit</DropdownMenuItem>
|
||||
{b.status === "draft" && <DropdownMenuItem onClick={() => updateStatus(b.id, "pending_approval")}><CheckCircle className="h-4 w-4 mr-2" /> Submit for Approval</DropdownMenuItem>}
|
||||
{b.status === "pending_approval" && (
|
||||
<>
|
||||
<DropdownMenuItem onClick={() => updateStatus(b.id, "approved")}><CheckCircle className="h-4 w-4 mr-2" /> Approve</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => updateStatus(b.id, "rejected")}><XCircle className="h-4 w-4 mr-2" /> Reject</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
{b.status === "approved" && <DropdownMenuItem onClick={() => updateStatus(b.id, "paid")}><DollarSign className="h-4 w-4 mr-2" /> Mark Paid</DropdownMenuItem>}
|
||||
{b.status === "paid" && <DropdownMenuItem onClick={() => updateStatus(b.id, "approved")}><XCircle className="h-4 w-4 mr-2" /> Mark Unpaid</DropdownMenuItem>}
|
||||
{b.status !== "voided" && <DropdownMenuItem onClick={() => updateStatus(b.id, "voided")}><XCircle className="h-4 w-4 mr-2" /> Void</DropdownMenuItem>}
|
||||
<DropdownMenuItem className="text-destructive" onClick={() => handleDelete(b.id)}><Trash2 className="h-4 w-4 mr-2" /> Delete</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader><DialogTitle>{editing ? "Edit" : "New"} Bill</DialogTitle></DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Association</Label>
|
||||
<Select value={form.association_id} onValueChange={(v) => setForm({ ...form, association_id: v })}>
|
||||
<SelectTrigger><SelectValue placeholder="Select" /></SelectTrigger>
|
||||
<SelectContent>{associations.map(a => <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Vendor</Label>
|
||||
<Button type="button" variant="link" size="sm" className="h-auto p-0 text-xs" onClick={() => setQuickVendorOpen(true)}>
|
||||
<Plus className="h-3 w-3 mr-1" />Add new
|
||||
</Button>
|
||||
</div>
|
||||
<Select value={form.vendor_id} onValueChange={(v) => setForm({ ...form, vendor_id: v })}>
|
||||
<SelectTrigger><SelectValue placeholder="Select vendor" /></SelectTrigger>
|
||||
<SelectContent>{vendors.filter(v => !form.association_id || v.association_id === form.association_id || (Array.isArray(v.association_ids) && v.association_ids.includes(form.association_id))).map(v => <SelectItem key={v.id} value={v.id}>{v.name}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div><Label>Invoice #</Label><Input value={form.invoice_number} onChange={(e) => setForm({ ...form, invoice_number: e.target.value })} /></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div><Label>Bill Date</Label><Input type="date" value={form.bill_date} onChange={(e) => setForm({ ...form, bill_date: e.target.value })} /></div>
|
||||
<div><Label>Due Date</Label><Input type="date" value={form.due_date} onChange={(e) => setForm({ ...form, due_date: e.target.value })} /></div>
|
||||
<div><Label>Amount</Label><Input type="number" value={form.amount} onChange={(e) => setForm({ ...form, amount: e.target.value })} /></div>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Expense Account</Label>
|
||||
<Select value={form.expense_account_id} onValueChange={(v) => setForm({ ...form, expense_account_id: v })}>
|
||||
<SelectTrigger><SelectValue placeholder="Select account" /></SelectTrigger>
|
||||
<SelectContent>{accounts.map(a => <SelectItem key={a.id} value={a.id}>{a.account_number} - {a.account_name}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div><Label>Description</Label><Textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} rows={2} /></div>
|
||||
</div>
|
||||
<DialogFooter><Button onClick={handleSave}>{editing ? "Update" : "Create Bill"}</Button></DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={buildiumOpen} onOpenChange={setBuildiumOpen}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Import Bills from Buildium</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Pull bills (and missing vendors) from Buildium. Existing bills are matched by Buildium ID and updated. Likely duplicates (same vendor + amount + invoice # or bill date) are linked instead of re-created.
|
||||
</p>
|
||||
<div>
|
||||
<Label>Association</Label>
|
||||
<Select value={buildiumAssoc} onValueChange={setBuildiumAssoc}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Associations</SelectItem>
|
||||
{associations.map((a) => <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>Due Date From</Label>
|
||||
<Input type="date" value={buildiumFrom} onChange={(e) => setBuildiumFrom(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>Due Date To</Label>
|
||||
<Input type="date" value={buildiumTo} onChange={(e) => setBuildiumTo(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setBuildiumOpen(false)} disabled={buildiumImporting}>Cancel</Button>
|
||||
<Button onClick={importFromBuildium} disabled={buildiumImporting} className="gap-2">
|
||||
{buildiumImporting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
|
||||
Import
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<QuickAddVendorDialog
|
||||
open={quickVendorOpen}
|
||||
onOpenChange={setQuickVendorOpen}
|
||||
associationId={form.association_id || null}
|
||||
onCreated={(v) => {
|
||||
setVendors((prev) => [...prev, v].sort((a: any, b: any) => a.name.localeCompare(b.name)));
|
||||
setForm((f) => ({ ...f, vendor_id: v.id, association_id: f.association_id || v.association_id }));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user