Added bulk actions to cases
X-Lovable-Edit-ID: edt-40e6a8ba-505a-4901-aa8a-e10bd249a219 Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
+147
-1
@@ -7,6 +7,8 @@ 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";
|
||||
@@ -14,6 +16,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
|
||||
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";
|
||||
@@ -29,12 +32,18 @@ export const Route = createFileRoute("/cases/")({
|
||||
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 load = async () => {
|
||||
const { data: caseRows } = await supabase
|
||||
@@ -87,8 +96,18 @@ function CasesList() {
|
||||
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) =>
|
||||
@@ -138,6 +157,72 @@ function CasesList() {
|
||||
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 { error } = await supabase
|
||||
.from("cases")
|
||||
.update({ archived_at: archived ? new Date().toISOString() : null })
|
||||
.in("id", ids);
|
||||
setBusy(false);
|
||||
if (error) toast.error(error.message);
|
||||
else {
|
||||
toast.success(`${ids.length} 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 { error } = await supabase.from("cases").update({ assigned_attorney_id: assignAttorney }).in("id", ids);
|
||||
setBusy(false);
|
||||
if (error) toast.error(error.message);
|
||||
else {
|
||||
toast.success(`${ids.length} 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 { error } = await supabase.from("cases").update({ client_id: assignClient }).in("id", ids);
|
||||
setBusy(false);
|
||||
if (error) toast.error(error.message);
|
||||
else {
|
||||
toast.success(`${ids.length} 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;
|
||||
@@ -193,11 +278,65 @@ function CasesList() {
|
||||
</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" />
|
||||
@@ -209,7 +348,7 @@ function CasesList() {
|
||||
</thead>
|
||||
<tbody>
|
||||
{sorted.length === 0 && (
|
||||
<tr><td colSpan={7} className="text-center py-12 text-muted-foreground">
|
||||
<tr><td colSpan={8} className="text-center py-12 text-muted-foreground">
|
||||
{view === "archived" ? "No archived cases." : "No cases."}
|
||||
</td></tr>
|
||||
)}
|
||||
@@ -219,6 +358,13 @@ function CasesList() {
|
||||
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"
|
||||
|
||||
Reference in New Issue
Block a user