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
b7f544d9f0
commit
17558a264d
+124
-21
@@ -1,5 +1,5 @@
|
||||
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
||||
import { useEffect, useState } from "react";
|
||||
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";
|
||||
@@ -7,11 +7,13 @@ 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 { ClientFormDialog } from "@/components/clients/client-form-dialog";
|
||||
import { Plus, Search, Building2, User, Archive, ArchiveRestore } from "lucide-react";
|
||||
import { formatDate } from "@/lib/format";
|
||||
import { setArchived } from "@/lib/archive";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export const Route = createFileRoute("/clients/")({
|
||||
component: () => (
|
||||
@@ -24,43 +26,96 @@ export const Route = createFileRoute("/clients/")({
|
||||
function ClientsList() {
|
||||
const navigate = useNavigate();
|
||||
const [clients, setClients] = useState<any[]>([]);
|
||||
const [users, setUsers] = useState<any[]>([]);
|
||||
const [q, setQ] = useState("");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [view, setView] = useState<"active" | "archived">("active");
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [assignTo, setAssignTo] = useState<string>("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const load = async () => {
|
||||
const { data } = await supabase
|
||||
.from("clients")
|
||||
.select("*")
|
||||
.order("name", { ascending: true });
|
||||
setClients(data ?? []);
|
||||
const [{ data: cli }, { data: usr }] = await Promise.all([
|
||||
supabase.from("clients").select("*").order("name", { ascending: true }),
|
||||
supabase.from("profiles").select("id, full_name, email").order("full_name", { ascending: true }),
|
||||
]);
|
||||
setClients(cli ?? []);
|
||||
setUsers(usr ?? []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const visible = clients.filter((c) =>
|
||||
view === "archived" ? c.archived_at : !c.archived_at,
|
||||
);
|
||||
const visible = clients.filter((c) => (view === "archived" ? c.archived_at : !c.archived_at));
|
||||
const filtered = visible.filter((c) =>
|
||||
[c.name, c.management_company, c.primary_contact_name, c.primary_contact_email]
|
||||
.filter(Boolean)
|
||||
.join(" ")
|
||||
.toLowerCase()
|
||||
.includes(q.toLowerCase()),
|
||||
.filter(Boolean).join(" ").toLowerCase().includes(q.toLowerCase()),
|
||||
);
|
||||
|
||||
const archivedCount = clients.filter((c) => c.archived_at).length;
|
||||
const activeCount = clients.length - archivedCount;
|
||||
const typeIcon = (t: string) => (t === "hoa" || t === "condo" ? Building2 : User);
|
||||
|
||||
const typeIcon = (t: string) =>
|
||||
t === "hoa" || t === "condo" ? Building2 : User;
|
||||
// Selection helpers — clear when switching views/search.
|
||||
useEffect(() => { setSelected(new Set()); }, [view]);
|
||||
const visibleIds = useMemo(() => filtered.map((c) => c.id), [filtered]);
|
||||
const allSelected = visibleIds.length > 0 && visibleIds.every((id) => selected.has(id));
|
||||
const someSelected = selected.size > 0 && !allSelected;
|
||||
|
||||
const toggleAll = () => {
|
||||
if (allSelected) setSelected(new Set());
|
||||
else setSelected(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 onArchive = async (id: string, archived: boolean) => {
|
||||
if (await setArchived("clients", id, archived)) load();
|
||||
const patch = { archived_at: archived ? new Date().toISOString() : null };
|
||||
const { error } = await supabase.from("clients").update(patch).eq("id", id);
|
||||
if (error) toast.error(error.message);
|
||||
else { toast.success(archived ? "Client archived" : "Client restored"); load(); }
|
||||
};
|
||||
|
||||
const bulkArchive = async (archived: boolean) => {
|
||||
if (selected.size === 0) return;
|
||||
setBusy(true);
|
||||
const ids = Array.from(selected);
|
||||
const { error } = await supabase
|
||||
.from("clients")
|
||||
.update({ archived_at: archived ? new Date().toISOString() : null })
|
||||
.in("id", ids);
|
||||
setBusy(false);
|
||||
if (error) toast.error(error.message);
|
||||
else {
|
||||
toast.success(`${ids.length} client(s) ${archived ? "archived" : "restored"}`);
|
||||
setSelected(new Set());
|
||||
load();
|
||||
}
|
||||
};
|
||||
|
||||
const bulkAssign = async () => {
|
||||
if (selected.size === 0 || !assignTo) return;
|
||||
setBusy(true);
|
||||
const ids = Array.from(selected);
|
||||
const { error } = await supabase.from("clients").update({ created_by: assignTo }).in("id", ids);
|
||||
setBusy(false);
|
||||
if (error) toast.error(error.message);
|
||||
else {
|
||||
toast.success(`${ids.length} client(s) reassigned`);
|
||||
setSelected(new Set());
|
||||
setAssignTo("");
|
||||
load();
|
||||
}
|
||||
};
|
||||
|
||||
const userOptions = users.map((u) => ({
|
||||
value: u.id,
|
||||
label: u.full_name || u.email || u.id,
|
||||
keywords: `${u.full_name || ""} ${u.email || ""}`,
|
||||
}));
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<PageHeader
|
||||
@@ -92,11 +147,51 @@ function ClientsList() {
|
||||
</div>
|
||||
</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">Assign to:</span>
|
||||
<div className="w-[220px]">
|
||||
<SearchableSelect
|
||||
value={assignTo}
|
||||
onValueChange={setAssignTo}
|
||||
options={userOptions}
|
||||
placeholder="Select user…"
|
||||
searchPlaceholder="Search users…"
|
||||
/>
|
||||
</div>
|
||||
<Button size="sm" onClick={bulkAssign} disabled={busy || !assignTo}>
|
||||
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>
|
||||
<th className="text-left px-4 py-3 font-medium">Name</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Type</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Contact</th>
|
||||
@@ -108,7 +203,7 @@ function ClientsList() {
|
||||
<tbody>
|
||||
{filtered.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={6} className="text-center py-12 text-muted-foreground">
|
||||
<td colSpan={7} className="text-center py-12 text-muted-foreground">
|
||||
{visible.length === 0
|
||||
? view === "archived"
|
||||
? "No archived clients."
|
||||
@@ -119,12 +214,20 @@ function ClientsList() {
|
||||
)}
|
||||
{filtered.map((c) => {
|
||||
const Icon = typeIcon(c.client_type);
|
||||
const isChecked = selected.has(c.id);
|
||||
return (
|
||||
<tr
|
||||
key={c.id}
|
||||
className="border-t hover:bg-muted/30 cursor-pointer transition-colors"
|
||||
onClick={() => navigate({ to: "/clients/$clientId", params: { clientId: c.id } })}
|
||||
>
|
||||
<td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={isChecked}
|
||||
onCheckedChange={() => toggleOne(c.id)}
|
||||
aria-label={`Select ${c.name}`}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<Link
|
||||
to="/clients/$clientId"
|
||||
|
||||
Reference in New Issue
Block a user