mirror of
https://github.com/renee-png/acmcc.git
synced 2026-06-21 09:50:01 +00:00
95 lines
9.0 KiB
TypeScript
95 lines
9.0 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { supabase } from "@/integrations/supabase/client";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { PenLine, Plus, Search, MoreHorizontal, Edit, Trash2, RotateCcw } from "lucide-react";
|
|
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 { 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";
|
|
|
|
const statusColors: Record<string, string> = { draft: "bg-muted text-muted-foreground", pending: "bg-amber-100 text-amber-700", printed: "bg-blue-100 text-blue-700", cleared: "bg-emerald-100 text-emerald-700", void: "bg-red-100 text-red-700" };
|
|
|
|
export default function WriteChecksPage() {
|
|
const { toast } = useToast();
|
|
const [checks, setChecks] = useState<any[]>([]);
|
|
const [bankAccounts, setBankAccounts] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [search, setSearch] = useState("");
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [editing, setEditing] = useState<any>(null);
|
|
const [form, setForm] = useState({ payee: "", amount: "", check_number: "", memo: "", check_date: new Date().toISOString().split("T")[0], status: "draft", bank_account_id: "" });
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
const [{ data }, { data: banks }] = await Promise.all([
|
|
supabase.from("checks").select("*, associations(name), bank_accounts(account_name)").order("created_at", { ascending: false }),
|
|
supabase.from("bank_accounts").select("id, account_name, bank_name, association_id").eq("status", "active").order("account_name"),
|
|
]);
|
|
setChecks(data || []);
|
|
setBankAccounts(banks || []);
|
|
setLoading(false);
|
|
};
|
|
useEffect(() => { fetchData(); }, []);
|
|
const openNew = () => { setEditing(null); setForm({ payee: "", amount: "", check_number: "", memo: "", check_date: new Date().toISOString().split("T")[0], status: "draft", bank_account_id: bankAccounts[0]?.id || "" }); setDialogOpen(true); };
|
|
const openEdit = (c: any) => { setEditing(c); setForm({ payee: c.payee, amount: c.amount?.toString() || "", check_number: c.check_number || "", memo: c.memo || "", check_date: c.check_date || "", status: c.status, bank_account_id: c.bank_account_id || "" }); setDialogOpen(true); };
|
|
const handleSave = async () => {
|
|
const payload = { ...form, amount: parseFloat(form.amount) || 0, check_date: form.check_date || null, bank_account_id: form.bank_account_id || null };
|
|
if (editing) { await supabase.from("checks").update(payload).eq("id", editing.id); toast({ title: "Updated" }); }
|
|
else {
|
|
// Infer association from bank account, fall back to first active association
|
|
let associationId: string | undefined;
|
|
if (form.bank_account_id) {
|
|
associationId = bankAccounts.find((b) => b.id === form.bank_account_id)?.association_id;
|
|
}
|
|
if (!associationId) {
|
|
const { data: a } = await supabase.from("associations").select("id").eq("status", "active").limit(1);
|
|
if (!a?.length) return;
|
|
associationId = a[0].id;
|
|
}
|
|
await supabase.from("checks").insert({ ...payload, association_id: associationId });
|
|
toast({ title: "Check created" });
|
|
}
|
|
setDialogOpen(false); fetchData();
|
|
};
|
|
const handleDelete = async (id: string) => { await supabase.from("checks").delete().eq("id", id); toast({ title: "Deleted" }); fetchData(); };
|
|
const markUnpaid = async (c: any) => {
|
|
// Revert a printed/cleared check back to draft so it can be reissued or edited.
|
|
await supabase.from("checks").update({ status: "draft", printed: false }).eq("id", c.id);
|
|
// Remove the matching bank-register entry that was created when the check was printed
|
|
await supabase.from("bank_transactions").delete().eq("related_entity_id", c.id).eq("related_entity_type", "check");
|
|
// If this check was tied to a bill, flip the bill back to approved (unpaid)
|
|
await supabase.from("bills").update({ status: "approved", paid_date: null, amount_paid: 0, check_id: null }).eq("check_id", c.id);
|
|
toast({ title: "Check marked unpaid" });
|
|
fetchData();
|
|
};
|
|
const filtered = checks.filter((c) => c.payee.toLowerCase().includes(search.toLowerCase()));
|
|
|
|
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"><PenLine className="h-6 w-6 text-primary" /> Write Checks</h1><p className="text-sm text-muted-foreground mt-1">Create and manage check payments to vendors.</p></div>
|
|
<Button className="gap-2" onClick={openNew}><Plus className="h-4 w-4" /> Write Check</Button>
|
|
</div>
|
|
<div className="relative 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 payees..." className="pl-10" value={search} onChange={(e) => setSearch(e.target.value)} /></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 checks found.</CardContent></Card> : (
|
|
<Card><Table><TableHeader><TableRow><TableHead>Check #</TableHead><TableHead>Payee</TableHead><TableHead>Amount</TableHead><TableHead>Date</TableHead><TableHead>Status</TableHead><TableHead className="w-12" /></TableRow></TableHeader><TableBody>
|
|
{filtered.map((c) => (<TableRow key={c.id}><TableCell>{c.check_number || "—"}</TableCell><TableCell className="font-medium">{c.payee}</TableCell><TableCell>${Number(c.amount).toLocaleString()}</TableCell><TableCell>{c.check_date || "—"}</TableCell><TableCell><Badge className={statusColors[c.status] || "bg-muted text-muted-foreground"}>{c.status}</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(c)}><Edit className="h-4 w-4 mr-2" /> Edit</DropdownMenuItem>{(c.status === "printed" || c.status === "cleared" || c.status === "pending") && <DropdownMenuItem onClick={() => markUnpaid(c)}><RotateCcw className="h-4 w-4 mr-2" /> Mark Unpaid</DropdownMenuItem>}<DropdownMenuItem className="text-destructive" onClick={() => handleDelete(c.id)}><Trash2 className="h-4 w-4 mr-2" /> Delete</DropdownMenuItem></DropdownMenuContent></DropdownMenu></TableCell></TableRow>))}</TableBody></Table></Card>
|
|
)}
|
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}><DialogContent><DialogHeader><DialogTitle>{editing ? "Edit" : "Write"} Check</DialogTitle></DialogHeader>
|
|
<div className="space-y-4">
|
|
<div><Label>Bank Account</Label><Select value={form.bank_account_id} onValueChange={(v) => setForm({ ...form, bank_account_id: v })}><SelectTrigger><SelectValue placeholder="Select bank account" /></SelectTrigger><SelectContent>{bankAccounts.map((b) => (<SelectItem key={b.id} value={b.id}>{b.account_name}{b.bank_name ? ` — ${b.bank_name}` : ""}</SelectItem>))}</SelectContent></Select></div>
|
|
<div className="grid grid-cols-2 gap-4"><div><Label>Payee</Label><Input value={form.payee} onChange={(e) => setForm({ ...form, payee: e.target.value })} /></div><div><Label>Check #</Label><Input value={form.check_number} onChange={(e) => setForm({ ...form, check_number: e.target.value })} placeholder="Auto-assigned on print" /></div></div>
|
|
<div className="grid grid-cols-2 gap-4"><div><Label>Amount</Label><Input type="number" value={form.amount} onChange={(e) => setForm({ ...form, amount: e.target.value })} /></div><div><Label>Date</Label><Input type="date" value={form.check_date} onChange={(e) => setForm({ ...form, check_date: e.target.value })} /></div></div>
|
|
<div><Label>Memo</Label><Input value={form.memo} onChange={(e) => setForm({ ...form, memo: e.target.value })} /></div>
|
|
<div><Label>Status</Label><Select value={form.status} onValueChange={(v) => setForm({ ...form, status: v })}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="draft">Draft</SelectItem><SelectItem value="pending">Pending</SelectItem><SelectItem value="printed">Printed</SelectItem><SelectItem value="cleared">Cleared</SelectItem><SelectItem value="void">Void</SelectItem></SelectContent></Select></div>
|
|
</div><DialogFooter><Button onClick={handleSave}>{editing ? "Update" : "Create"}</Button></DialogFooter></DialogContent></Dialog>
|
|
</div>
|
|
);
|
|
}
|