Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-16 22:49:09 +00:00
parent c1cd4f415b
commit 09d4acd58a
4 changed files with 659 additions and 22 deletions
@@ -0,0 +1,132 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { ProtectedLayout } from "@/components/protected-layout";
+import { PageContainer, PageHeader } from "@/components/app-shell";
+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 { 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 { formatDate } from "@/lib/format";
+
+export const Route = createFileRoute("/clients/")({
+  component: () => (
+    <ProtectedLayout>
+      <ClientsList />
+    </ProtectedLayout>
+  ),
+});
+
+function ClientsList() {
+  const [clients, setClients] = useState<any[]>([]);
+  const [q, setQ] = useState("");
+  const [open, setOpen] = useState(false);
+
+  const load = async () => {
+    const { data } = await supabase
+      .from("clients")
+      .select("*")
+      .order("name", { ascending: true });
+    setClients(data ?? []);
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const filtered = clients.filter((c) =>
+    [c.name, c.management_company, c.primary_contact_name, c.primary_contact_email]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase()
+      .includes(q.toLowerCase()),
+  );
+
+  const typeIcon = (t: string) =>
+    t === "hoa" ? Building2 : t === "business" ? Building : User;
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Clients"
+        description="HOA associations, businesses, and individual clients."
+        actions={
+          <Button onClick={() => setOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            New client
+          </Button>
+        }
+      />
+
+      <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>
+
+      <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="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>
+                <th className="text-left px-4 py-3 font-medium">Units</th>
+                <th className="text-left px-4 py-3 font-medium">Created</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>
+                </tr>
+              )}
+              {filtered.map((c) => {
+                const Icon = typeIcon(c.client_type);
+                return (
+                  <tr key={c.id} className="border-t hover:bg-muted/30 transition-colors">
+                    <td className="px-4 py-3">
+                      <Link
+                        to="/clients/$clientId"
+                        params={{ clientId: c.id }}
+                        className="flex items-center gap-2 font-medium text-foreground hover:text-primary"
+                      >
+                        <Icon className="h-4 w-4 text-muted-foreground" />
+                        {c.name}
+                      </Link>
+                      {c.management_company && (
+                        <div className="text-xs text-muted-foreground ml-6">{c.management_company}</div>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      <Badge variant="outline" className="capitalize">{c.client_type}</Badge>
+                    </td>
+                    <td className="px-4 py-3 text-muted-foreground">
+                      {c.primary_contact_name || "—"}
+                      {c.primary_contact_email && (
+                        <div className="text-xs">{c.primary_contact_email}</div>
+                      )}
+                    </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>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+
+      <ClientFormDialog open={open} onOpenChange={setOpen} onSaved={load} />
+    </PageContainer>
+  );
+}