Changes

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

src/routes/clients.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 { 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>
                 );
               })}