gpt-engineer-app[bot]andrenee-png
a5e9acdbf3
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
430 lines
18 KiB
TypeScript
430 lines
18 KiB
TypeScript
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { ProtectedLayout } from "@/components/protected-layout";
|
|
import { PageContainer, PageHeader } from "@/components/app-shell";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { SearchableSelect } from "@/components/ui/searchable-select";
|
|
import { supabase } from "@/integrations/supabase/client";
|
|
import { Plus, Search, Archive, ArchiveRestore, ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
|
|
import { formatDate, statusBadgeClass } from "@/lib/format";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { setArchived } from "@/lib/archive";
|
|
import { NewCaseDialog } from "@/components/cases/new-case-dialog";
|
|
import { formatDistanceToNow } from "date-fns";
|
|
import { toast } from "sonner";
|
|
|
|
type SortKey = "title" | "client" | "status" | "attorney" | "opened_at" | "last_activity";
|
|
type SortDir = "asc" | "desc";
|
|
|
|
export const Route = createFileRoute("/cases/")({
|
|
component: () => (
|
|
<ProtectedLayout>
|
|
<CasesList />
|
|
</ProtectedLayout>
|
|
),
|
|
});
|
|
|
|
function CasesList() {
|
|
const navigate = useNavigate();
|
|
const [cases, setCases] = useState<any[]>([]);
|
|
const [users, setUsers] = useState<any[]>([]);
|
|
const [clientList, setClientList] = useState<any[]>([]);
|
|
const [q, setQ] = useState("");
|
|
const [statusFilter, setStatusFilter] = useState<string>("all");
|
|
const [view, setView] = useState<"active" | "archived">("active");
|
|
const [newOpen, setNewOpen] = useState(false);
|
|
const [sortKey, setSortKey] = useState<SortKey>("last_activity");
|
|
const [sortDir, setSortDir] = useState<SortDir>("desc");
|
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
|
const [assignAttorney, setAssignAttorney] = useState<string>("");
|
|
const [assignClient, setAssignClient] = useState<string>("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [page, setPage] = useState(1);
|
|
const PAGE_SIZE = 150;
|
|
|
|
const load = async () => {
|
|
const { data: caseRows } = await supabase
|
|
.from("cases")
|
|
.select("*, client:clients(name), assignee:profiles!cases_assigned_attorney_id_fkey(full_name, email)")
|
|
.order("updated_at", { ascending: false });
|
|
|
|
const baseRows = caseRows ?? [];
|
|
|
|
// Aggregate latest activity from related child tables.
|
|
const [
|
|
tasksRes, timeRes, expensesRes, docsRes, callRes,
|
|
commentsRes, invoicesRes, eventsRes,
|
|
] = await Promise.all([
|
|
supabase.from("tasks").select("case_id, updated_at").not("case_id", "is", null).limit(20000),
|
|
supabase.from("time_entries").select("case_id, updated_at").limit(20000),
|
|
supabase.from("expenses").select("case_id, updated_at").limit(20000),
|
|
supabase.from("documents").select("case_id, created_at").limit(20000),
|
|
supabase.from("call_logs").select("case_id, updated_at").limit(20000),
|
|
supabase.from("comments").select("case_id, created_at").not("case_id", "is", null).limit(20000),
|
|
supabase.from("invoices").select("case_id, updated_at").not("case_id", "is", null).limit(20000),
|
|
supabase.from("events").select("case_id, updated_at").not("case_id", "is", null).limit(20000),
|
|
]);
|
|
|
|
const latest: Record<string, string> = {};
|
|
const ingest = (rows: any[] | null | undefined, field: "updated_at" | "created_at") => {
|
|
for (const r of rows ?? []) {
|
|
const cid = r.case_id as string | null;
|
|
const ts = r[field] as string | null;
|
|
if (!cid || !ts) continue;
|
|
if (!latest[cid] || ts > latest[cid]) latest[cid] = ts;
|
|
}
|
|
};
|
|
ingest(tasksRes.data, "updated_at");
|
|
ingest(timeRes.data, "updated_at");
|
|
ingest(expensesRes.data, "updated_at");
|
|
ingest(docsRes.data, "created_at");
|
|
ingest(callRes.data, "updated_at");
|
|
ingest(commentsRes.data, "created_at");
|
|
ingest(invoicesRes.data, "updated_at");
|
|
ingest(eventsRes.data, "updated_at");
|
|
|
|
// Fallback to the case's own updated_at if no child activity found.
|
|
const enriched = baseRows.map((c: any) => {
|
|
const childTs = latest[c.id];
|
|
const lastActivity = childTs && (!c.updated_at || childTs > c.updated_at) ? childTs : c.updated_at;
|
|
return { ...c, last_activity: lastActivity };
|
|
});
|
|
|
|
setCases(enriched);
|
|
};
|
|
|
|
const loadAux = async () => {
|
|
const [{ data: usr }, { data: cli }] = await Promise.all([
|
|
supabase.from("profiles").select("id, full_name, email").order("full_name", { ascending: true }),
|
|
supabase.from("clients").select("id, name").order("name", { ascending: true }),
|
|
]);
|
|
setUsers(usr ?? []);
|
|
setClientList(cli ?? []);
|
|
};
|
|
|
|
useEffect(() => {
|
|
load();
|
|
loadAux();
|
|
}, []);
|
|
|
|
const visible = cases.filter((c) =>
|
|
view === "archived" ? c.archived_at : !c.archived_at,
|
|
);
|
|
const filtered = visible.filter((c) => {
|
|
const okStatus = statusFilter === "all" || c.status === statusFilter;
|
|
const okQ = [c.title, c.case_number, c.client?.name].filter(Boolean).join(" ").toLowerCase().includes(q.toLowerCase());
|
|
return okStatus && okQ;
|
|
});
|
|
|
|
const sorted = useMemo(() => {
|
|
const getVal = (c: any): string => {
|
|
switch (sortKey) {
|
|
case "title": return (c.title ?? "").toLowerCase();
|
|
case "client": return (c.client?.name ?? "").toLowerCase();
|
|
case "status": return (c.status ?? "").toLowerCase();
|
|
case "attorney": return (c.assignee?.full_name || c.assignee?.email || "").toLowerCase();
|
|
case "opened_at": return c.opened_at ?? "";
|
|
case "last_activity": return c.last_activity ?? "";
|
|
}
|
|
};
|
|
const arr = [...filtered];
|
|
arr.sort((a, b) => {
|
|
const av = getVal(a);
|
|
const bv = getVal(b);
|
|
if (av < bv) return sortDir === "asc" ? -1 : 1;
|
|
if (av > bv) return sortDir === "asc" ? 1 : -1;
|
|
return 0;
|
|
});
|
|
return arr;
|
|
}, [filtered, sortKey, sortDir]);
|
|
|
|
const toggleSort = (key: SortKey) => {
|
|
if (sortKey === key) {
|
|
setSortDir(sortDir === "asc" ? "desc" : "asc");
|
|
} else {
|
|
setSortKey(key);
|
|
setSortDir(key === "opened_at" || key === "last_activity" ? "desc" : "asc");
|
|
}
|
|
};
|
|
|
|
const archivedCount = cases.filter((c) => c.archived_at).length;
|
|
const activeCount = cases.length - archivedCount;
|
|
|
|
const onArchive = async (id: string, archived: boolean) => {
|
|
if (await setArchived("cases", id, archived)) load();
|
|
};
|
|
|
|
// Selection helpers — clear when switching views.
|
|
useEffect(() => { setSelected(new Set()); }, [view]);
|
|
const visibleIds = useMemo(() => sorted.map((c) => c.id), [sorted]);
|
|
const allSelected = visibleIds.length > 0 && visibleIds.every((id) => selected.has(id));
|
|
const someSelected = selected.size > 0 && !allSelected;
|
|
const toggleAll = () => setSelected(allSelected ? new Set() : new Set(visibleIds));
|
|
const toggleOne = (id: string) => {
|
|
const next = new Set(selected);
|
|
if (next.has(id)) next.delete(id); else next.add(id);
|
|
setSelected(next);
|
|
};
|
|
|
|
const bulkArchive = async (archived: boolean) => {
|
|
if (selected.size === 0) return;
|
|
setBusy(true);
|
|
const ids = Array.from(selected);
|
|
const { data, error } = await supabase
|
|
.from("cases")
|
|
.update({ archived_at: archived ? new Date().toISOString() : null })
|
|
.in("id", ids)
|
|
.select("id");
|
|
setBusy(false);
|
|
if (error) {
|
|
toast.error(error.message);
|
|
return;
|
|
}
|
|
const updatedCount = data?.length ?? 0;
|
|
if (updatedCount === 0) {
|
|
toast.error("No cases were updated. You may not have permission.");
|
|
return;
|
|
}
|
|
if (updatedCount < ids.length) {
|
|
toast.warning(`${updatedCount} of ${ids.length} case(s) ${archived ? "archived" : "restored"} (others skipped due to permissions)`);
|
|
} else {
|
|
toast.success(`${updatedCount} case(s) ${archived ? "archived" : "restored"}`);
|
|
}
|
|
setSelected(new Set());
|
|
load();
|
|
};
|
|
|
|
const bulkAssignAttorney = async () => {
|
|
if (selected.size === 0 || !assignAttorney) return;
|
|
setBusy(true);
|
|
const ids = Array.from(selected);
|
|
const { data, error } = await supabase
|
|
.from("cases")
|
|
.update({ assigned_attorney_id: assignAttorney })
|
|
.in("id", ids)
|
|
.select("id");
|
|
setBusy(false);
|
|
if (error) { toast.error(error.message); return; }
|
|
const n = data?.length ?? 0;
|
|
if (n === 0) { toast.error("No cases were updated. You may not have permission."); return; }
|
|
if (n < ids.length) toast.warning(`${n} of ${ids.length} case(s) reassigned (others skipped)`);
|
|
else toast.success(`${n} case(s) reassigned`);
|
|
setSelected(new Set());
|
|
setAssignAttorney("");
|
|
load();
|
|
};
|
|
|
|
const bulkAssignClient = async () => {
|
|
if (selected.size === 0 || !assignClient) return;
|
|
setBusy(true);
|
|
const ids = Array.from(selected);
|
|
const { data, error } = await supabase
|
|
.from("cases")
|
|
.update({ client_id: assignClient })
|
|
.in("id", ids)
|
|
.select("id");
|
|
setBusy(false);
|
|
if (error) { toast.error(error.message); return; }
|
|
const n = data?.length ?? 0;
|
|
if (n === 0) { toast.error("No cases were updated. You may not have permission."); return; }
|
|
if (n < ids.length) toast.warning(`${n} of ${ids.length} case(s) re-linked (others skipped)`);
|
|
else toast.success(`${n} case(s) re-linked to client`);
|
|
setSelected(new Set());
|
|
setAssignClient("");
|
|
load();
|
|
};
|
|
|
|
const userOptions = users.map((u) => ({
|
|
value: u.id,
|
|
label: u.full_name || u.email || u.id,
|
|
keywords: `${u.full_name || ""} ${u.email || ""}`,
|
|
}));
|
|
const clientOptions = clientList.map((c) => ({ value: c.id, label: c.name, keywords: c.name }));
|
|
|
|
const SortHeader = ({ label, k, align = "left" }: { label: string; k: SortKey; align?: "left" | "right" }) => {
|
|
const active = sortKey === k;
|
|
const Icon = !active ? ArrowUpDown : sortDir === "asc" ? ArrowUp : ArrowDown;
|
|
return (
|
|
<th className={`px-4 py-3 font-medium text-${align}`}>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleSort(k)}
|
|
className={`inline-flex items-center gap-1 hover:text-foreground transition-colors ${active ? "text-foreground" : ""}`}
|
|
>
|
|
{label}
|
|
<Icon className="h-3 w-3" />
|
|
</button>
|
|
</th>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<PageContainer>
|
|
<PageHeader
|
|
title="Cases"
|
|
description="Matters assigned to you and ones you've created."
|
|
actions={
|
|
<Button onClick={() => setNewOpen(true)}>
|
|
<Plus className="h-4 w-4 mr-2" /> New case
|
|
</Button>
|
|
}
|
|
/>
|
|
<NewCaseDialog open={newOpen} onOpenChange={setNewOpen} />
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3 mb-4">
|
|
<Tabs value={view} onValueChange={(v) => setView(v as "active" | "archived")}>
|
|
<TabsList>
|
|
<TabsTrigger value="active">Active ({activeCount})</TabsTrigger>
|
|
<TabsTrigger value="archived">Archived ({archivedCount})</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
<div className="relative flex-1 max-w-sm">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search cases…" className="pl-9" />
|
|
</div>
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="w-[180px]"><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All statuses</SelectItem>
|
|
<SelectItem value="intake">Intake</SelectItem>
|
|
<SelectItem value="active">Active</SelectItem>
|
|
<SelectItem value="on_hold">On hold</SelectItem>
|
|
<SelectItem value="closed_won">Closed — won</SelectItem>
|
|
<SelectItem value="closed_lost">Closed — lost</SelectItem>
|
|
<SelectItem value="closed">Closed</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{selected.size > 0 && (
|
|
<div className="mb-3 flex flex-wrap items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-3 py-2">
|
|
<span className="text-sm font-medium">{selected.size} selected</span>
|
|
<Button size="sm" variant="outline" onClick={() => setSelected(new Set())} disabled={busy}>
|
|
Clear
|
|
</Button>
|
|
<div className="mx-2 h-5 w-px bg-border" />
|
|
{view === "active" ? (
|
|
<Button size="sm" variant="outline" onClick={() => bulkArchive(true)} disabled={busy}>
|
|
<Archive className="h-4 w-4 mr-2" /> Archive
|
|
</Button>
|
|
) : (
|
|
<Button size="sm" variant="outline" onClick={() => bulkArchive(false)} disabled={busy}>
|
|
<ArchiveRestore className="h-4 w-4 mr-2" /> Restore
|
|
</Button>
|
|
)}
|
|
<div className="mx-2 h-5 w-px bg-border" />
|
|
<span className="text-sm text-muted-foreground">Attorney:</span>
|
|
<div className="w-[200px]">
|
|
<SearchableSelect
|
|
value={assignAttorney}
|
|
onValueChange={setAssignAttorney}
|
|
options={userOptions}
|
|
placeholder="Select user…"
|
|
searchPlaceholder="Search users…"
|
|
/>
|
|
</div>
|
|
<Button size="sm" onClick={bulkAssignAttorney} disabled={busy || !assignAttorney}>
|
|
Apply
|
|
</Button>
|
|
<div className="mx-2 h-5 w-px bg-border" />
|
|
<span className="text-sm text-muted-foreground">Client:</span>
|
|
<div className="w-[200px]">
|
|
<SearchableSelect
|
|
value={assignClient}
|
|
onValueChange={setAssignClient}
|
|
options={clientOptions}
|
|
placeholder="Select client…"
|
|
searchPlaceholder="Search clients…"
|
|
/>
|
|
</div>
|
|
<Button size="sm" onClick={bulkAssignClient} disabled={busy || !assignClient}>
|
|
Apply
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
<Card className="border-border/60 overflow-hidden">
|
|
<CardContent className="p-0">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-muted/50 text-xs uppercase tracking-wider text-muted-foreground">
|
|
<tr>
|
|
<th className="px-4 py-3 w-10">
|
|
<Checkbox
|
|
checked={allSelected ? true : someSelected ? "indeterminate" : false}
|
|
onCheckedChange={toggleAll}
|
|
aria-label="Select all"
|
|
/>
|
|
</th>
|
|
<SortHeader label="Case" k="title" />
|
|
<SortHeader label="Client" k="client" />
|
|
<SortHeader label="Status" k="status" />
|
|
<SortHeader label="Attorney" k="attorney" />
|
|
<SortHeader label="Opened" k="opened_at" />
|
|
<SortHeader label="Last activity" k="last_activity" />
|
|
<th className="text-right px-4 py-3 font-medium w-12"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sorted.length === 0 && (
|
|
<tr><td colSpan={8} className="text-center py-12 text-muted-foreground">
|
|
{view === "archived" ? "No archived cases." : "No cases."}
|
|
</td></tr>
|
|
)}
|
|
{sorted.map((c) => (
|
|
<tr
|
|
key={c.id}
|
|
className="border-t hover:bg-muted/30 cursor-pointer transition-colors"
|
|
onClick={() => navigate({ to: "/cases/$caseId", params: { caseId: c.id } })}
|
|
>
|
|
<td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
|
|
<Checkbox
|
|
checked={selected.has(c.id)}
|
|
onCheckedChange={() => toggleOne(c.id)}
|
|
aria-label={`Select ${c.title}`}
|
|
/>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<Link
|
|
to="/cases/$caseId"
|
|
params={{ caseId: c.id }}
|
|
className="font-medium hover:text-primary"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{c.title}
|
|
</Link>
|
|
<div className="text-xs text-muted-foreground">{c.case_number}</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-muted-foreground">{c.client?.name ?? "—"}</td>
|
|
<td className="px-4 py-3">
|
|
<Badge variant="outline" className={statusBadgeClass(c.status)}>{c.status.replace("_", " ")}</Badge>
|
|
</td>
|
|
<td className="px-4 py-3 text-muted-foreground">{c.assignee?.full_name || c.assignee?.email || "—"}</td>
|
|
<td className="px-4 py-3 text-muted-foreground">{formatDate(c.opened_at)}</td>
|
|
<td className="px-4 py-3 text-muted-foreground" title={c.last_activity ? new Date(c.last_activity).toLocaleString() : ""}>
|
|
{c.last_activity ? `${formatDistanceToNow(new Date(c.last_activity))} ago` : "—"}
|
|
</td>
|
|
<td className="px-4 py-3 text-right" onClick={(e) => e.stopPropagation()}>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
title={c.archived_at ? "Restore" : "Archive"}
|
|
onClick={() => onArchive(c.id, !c.archived_at)}
|
|
>
|
|
{c.archived_at ? <ArchiveRestore className="h-4 w-4" /> : <Archive className="h-4 w-4" />}
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</CardContent>
|
|
</Card>
|
|
</PageContainer>
|
|
);
|
|
}
|