Changes
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
co-authored by
renee-png
renee-png
parent
ed20e47fd4
commit
12bf212912
@@ -0,0 +1,251 @@
|
||||
import { createFileRoute, Link } from "@tanstack/react-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ProtectedLayout } from "@/components/protected-layout";
|
||||
import { PageContainer, PageHeader } from "@/components/app-shell";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { formatCurrency, formatDate } from "@/lib/format";
|
||||
import { ChevronRight, Wallet, Search } from "lucide-react";
|
||||
|
||||
export const Route = createFileRoute("/collections/")({
|
||||
component: CollectionsIndexPage,
|
||||
});
|
||||
|
||||
interface Stage {
|
||||
key: string;
|
||||
label: string;
|
||||
sort_order: number;
|
||||
}
|
||||
|
||||
function CollectionsIndexPage() {
|
||||
const [rows, setRows] = useState<any[]>([]);
|
||||
const [balances, setBalances] = useState<Record<string, number>>({});
|
||||
const [openTaskCounts, setOpenTaskCounts] = useState<Record<string, number>>({});
|
||||
const [stages, setStages] = useState<Stage[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState("");
|
||||
const [stageFilter, setStageFilter] = useState<string>("all");
|
||||
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
const [{ data: cols }, { data: stgs }] = await Promise.all([
|
||||
supabase
|
||||
.from("collections")
|
||||
.select(
|
||||
"id, status, current_stage, opened_at, homeowner:homeowners(id, first_name, last_name, unit_number, opening_balance), case:cases(id, case_number, title, client:clients(id, name))",
|
||||
)
|
||||
.order("created_at", { ascending: false }),
|
||||
supabase
|
||||
.from("collection_workflow_stages")
|
||||
.select("*")
|
||||
.order("sort_order"),
|
||||
]);
|
||||
const list = cols ?? [];
|
||||
setRows(list);
|
||||
setStages((stgs ?? []) as Stage[]);
|
||||
|
||||
if (list.length) {
|
||||
const ids = list.map((c: any) => c.id);
|
||||
const [{ data: ents }, { data: tasks }] = await Promise.all([
|
||||
supabase
|
||||
.from("collection_ledger_entries")
|
||||
.select("collection_id, debit, credit")
|
||||
.in("collection_id", ids),
|
||||
supabase
|
||||
.from("collection_tasks")
|
||||
.select("collection_id")
|
||||
.in("collection_id", ids)
|
||||
.eq("done", false),
|
||||
]);
|
||||
const balMap: Record<string, number> = {};
|
||||
list.forEach((c: any) => {
|
||||
balMap[c.id] = Number(c.homeowner?.opening_balance ?? 0);
|
||||
});
|
||||
(ents ?? []).forEach((e: any) => {
|
||||
balMap[e.collection_id] =
|
||||
(balMap[e.collection_id] ?? 0) + Number(e.debit) - Number(e.credit);
|
||||
});
|
||||
setBalances(balMap);
|
||||
|
||||
const taskMap: Record<string, number> = {};
|
||||
(tasks ?? []).forEach((t: any) => {
|
||||
taskMap[t.collection_id] = (taskMap[t.collection_id] ?? 0) + 1;
|
||||
});
|
||||
setOpenTaskCounts(taskMap);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
const stageLabel = (key: string | null) =>
|
||||
stages.find((s) => s.key === key)?.label ?? key ?? "—";
|
||||
|
||||
const filtered = rows.filter((r) => {
|
||||
if (stageFilter !== "all" && r.current_stage !== stageFilter) return false;
|
||||
if (!search.trim()) return true;
|
||||
const q = search.toLowerCase();
|
||||
return (
|
||||
`${r.homeowner?.first_name ?? ""} ${r.homeowner?.last_name ?? ""}`
|
||||
.toLowerCase()
|
||||
.includes(q) ||
|
||||
(r.case?.case_number ?? "").toLowerCase().includes(q) ||
|
||||
(r.case?.client?.name ?? "").toLowerCase().includes(q) ||
|
||||
(r.homeowner?.unit_number ?? "").toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<ProtectedLayout>
|
||||
<PageContainer>
|
||||
<PageHeader
|
||||
title="Collections"
|
||||
description="All homeowner collections across every matter."
|
||||
/>
|
||||
<div className="flex gap-3 mb-4 flex-wrap">
|
||||
<div className="relative flex-1 min-w-[260px] max-w-md">
|
||||
<Search className="h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search homeowner, HOA, case…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Select value={stageFilter} onValueChange={setStageFilter}>
|
||||
<SelectTrigger className="w-[260px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All stages</SelectItem>
|
||||
{stages.map((s) => (
|
||||
<SelectItem key={s.key} value={s.key}>
|
||||
{s.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Card className="border-border/60">
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<div className="p-12 text-center text-muted-foreground text-sm">
|
||||
Loading…
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="p-16 text-center text-muted-foreground text-sm">
|
||||
<Wallet className="h-8 w-8 mx-auto mb-3 opacity-40" />
|
||||
No collections found.
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Homeowner</TableHead>
|
||||
<TableHead>HOA / Case</TableHead>
|
||||
<TableHead>Stage</TableHead>
|
||||
<TableHead className="text-center">Open tasks</TableHead>
|
||||
<TableHead>Opened</TableHead>
|
||||
<TableHead className="text-right">Balance</TableHead>
|
||||
<TableHead></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.map((r) => {
|
||||
const bal = balances[r.id] ?? 0;
|
||||
const tcount = openTaskCounts[r.id] ?? 0;
|
||||
return (
|
||||
<TableRow
|
||||
key={r.id}
|
||||
className="cursor-pointer"
|
||||
onClick={() => {}}
|
||||
>
|
||||
<TableCell className="font-medium">
|
||||
<Link
|
||||
to="/collections/$collectionId"
|
||||
params={{ collectionId: r.id }}
|
||||
className="hover:underline"
|
||||
>
|
||||
{r.homeowner?.last_name}, {r.homeowner?.first_name}
|
||||
{r.homeowner?.unit_number && (
|
||||
<span className="text-muted-foreground font-normal ml-1">
|
||||
· Unit {r.homeowner.unit_number}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
<div>{r.case?.client?.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{r.case?.case_number} · {r.case?.title}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
{stageLabel(r.current_stage)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{tcount > 0 ? (
|
||||
<Badge className="text-[10px]">{tcount}</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
—
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground text-sm">
|
||||
{formatDate(r.opened_at)}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`text-right font-mono ${
|
||||
bal > 0
|
||||
? "text-destructive font-semibold"
|
||||
: bal < 0
|
||||
? "text-emerald-600"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(Math.abs(bal))}
|
||||
{bal < 0 ? " CR" : ""}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Link
|
||||
to="/collections/$collectionId"
|
||||
params={{ collectionId: r.id }}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground inline" />
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</PageContainer>
|
||||
</ProtectedLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user