Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-18 01:42:39 +00:00
parent 4ab142e60e
commit 40f57cc2b7
2 changed files with 95 additions and 22 deletions
@@ -6,10 +6,12 @@ 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 { supabase } from "@/integrations/supabase/client";
-import { Plus, Search } from "lucide-react";
+import { Plus, Search, Archive, ArchiveRestore } from "lucide-react";
 import { formatDate, statusBadgeClass } from "@/lib/format";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { setArchived } from "@/lib/archive";

 export const Route = createFileRoute("/cases/")({
  component: () => (
@@ -23,22 +25,34 @@ function CasesList() {
  const [cases, setCases] = useState<any[]>([]);
  const [q, setQ] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [view, setView] = useState<"active" | "archived">("active");
+
+  const load = async () => {
+    const { data } = await supabase
+      .from("cases")
+      .select("*, client:clients(name), assignee:profiles!cases_assigned_attorney_id_fkey(full_name, email)")
+      .order("updated_at", { ascending: false });
+    setCases(data ?? []);
+  };

  useEffect(() => {
-    (async () => {
-      const { data } = await supabase
-        .from("cases")
-        .select("*, client:clients(name), assignee:profiles!cases_assigned_attorney_id_fkey(full_name, email)")
-        .order("updated_at", { ascending: false });
-      setCases(data ?? []);
-    })();
+    load();
  }, []);

-  const filtered = cases.filter((c) => {
+  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 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();
+  };

  return (
    <PageContainer>
@@ -53,6 +67,12 @@ function CasesList() {
      />

      <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" />
@@ -81,11 +101,14 @@ function CasesList() {
                <th className="text-left px-4 py-3 font-medium">Status</th>
                <th className="text-left px-4 py-3 font-medium">Attorney</th>
                <th className="text-left px-4 py-3 font-medium">Opened</th>
+                <th className="text-right px-4 py-3 font-medium w-12"></th>
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && (
-                <tr><td colSpan={5} className="text-center py-12 text-muted-foreground">No cases.</td></tr>
+                <tr><td colSpan={6} className="text-center py-12 text-muted-foreground">
+                  {view === "archived" ? "No archived cases." : "No cases."}
+                </td></tr>
              )}
              {filtered.map((c) => (
                <tr key={c.id} className="border-t hover:bg-muted/30">
@@ -101,6 +124,16 @@ function CasesList() {
                  </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-right">
+                    <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>
@@ -6,10 +6,12 @@ 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 { supabase } from "@/integrations/supabase/client";
 import { ClientFormDialog } from "@/components/clients/client-form-dialog";
-import { Plus, Search, Building2, User, Briefcase as Building } from "lucide-react";
+import { Plus, Search, Building2, User, Archive, ArchiveRestore } from "lucide-react";
 import { formatDate } from "@/lib/format";
+import { setArchived } from "@/lib/archive";

 export const Route = createFileRoute("/clients/")({
  component: () => (
@@ -23,6 +25,7 @@ function ClientsList() {
  const [clients, setClients] = useState<any[]>([]);
  const [q, setQ] = useState("");
  const [open, setOpen] = useState(false);
+  const [view, setView] = useState<"active" | "archived">("active");

  const load = async () => {
    const { data } = await supabase
@@ -36,7 +39,10 @@ function ClientsList() {
    load();
  }, []);

-  const filtered = clients.filter((c) =>
+  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(" ")
@@ -44,9 +50,16 @@ function ClientsList() {
      .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 onArchive = async (id: string, archived: boolean) => {
+    if (await setArchived("clients", id, archived)) load();
+  };
+
  return (
    <PageContainer>
      <PageHeader
@@ -60,14 +73,22 @@ function ClientsList() {
        }
      />

-      <div className="relative mb-4 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 by name, contact, manager…"
-          className="pl-9"
-        />
+      <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 by name, contact, manager…"
+            className="pl-9"
+          />
+        </div>
      </div>

      <Card className="border-border/60 overflow-hidden">
@@ -80,13 +101,18 @@ function ClientsList() {
                <th className="text-left px-4 py-3 font-medium">Contact</th>
                <th className="text-left px-4 py-3 font-medium">Units</th>
                <th className="text-left px-4 py-3 font-medium">Created</th>
+                <th className="text-right px-4 py-3 font-medium w-12"></th>
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && (
                <tr>
-                  <td colSpan={5} className="text-center py-12 text-muted-foreground">
-                    {clients.length === 0 ? "No clients yet. Add your first one." : "No matches."}
+                  <td colSpan={6} className="text-center py-12 text-muted-foreground">
+                    {visible.length === 0
+                      ? view === "archived"
+                        ? "No archived clients."
+                        : "No clients yet. Add your first one."
+                      : "No matches."}
                  </td>
                </tr>
              )}
@@ -118,6 +144,20 @@ function ClientsList() {
                    </td>
                    <td className="px-4 py-3 text-muted-foreground">{c.num_units ?? "—"}</td>
                    <td className="px-4 py-3 text-muted-foreground">{formatDate(c.created_at)}</td>
+                    <td className="px-4 py-3 text-right">
+                      <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>
                );
              })}