Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/cases.index.tsx

@@ -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>