Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-16 22:50:27 +00:00
parent 6730c8b863
commit 54793abda3
4 changed files with 589 additions and 3 deletions
@@ -0,0 +1,112 @@
+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 { Plus, Search } from "lucide-react";
+import { formatDate, statusBadgeClass } from "@/lib/format";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+export const Route = createFileRoute("/cases/")({
+  component: () => (
+    <ProtectedLayout>
+      <CasesList />
+    </ProtectedLayout>
+  ),
+});
+
+function CasesList() {
+  const [cases, setCases] = useState<any[]>([]);
+  const [q, setQ] = useState("");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+
+  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 ?? []);
+    })();
+  }, []);
+
+  const filtered = cases.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;
+  });
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Cases"
+        description="Matters assigned to you and ones you've created."
+        actions={
+          <Button asChild>
+            <Link to="/cases/new"><Plus className="h-4 w-4 mr-2" /> New case</Link>
+          </Button>
+        }
+      />
+
+      <div className="flex flex-col sm:flex-row gap-3 mb-4">
+        <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" />
+        </div>
+        <Select value={statusFilter} onValueChange={setStatusFilter}>
+          <SelectTrigger className="w-[180px]"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All statuses</SelectItem>
+            <SelectItem value="intake">Intake</SelectItem>
+            <SelectItem value="active">Active</SelectItem>
+            <SelectItem value="on_hold">On hold</SelectItem>
+            <SelectItem value="closed_won">Closed — won</SelectItem>
+            <SelectItem value="closed_lost">Closed — lost</SelectItem>
+            <SelectItem value="closed">Closed</SelectItem>
+          </SelectContent>
+        </Select>
+      </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">Case</th>
+                <th className="text-left px-4 py-3 font-medium">Client</th>
+                <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>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.length === 0 && (
+                <tr><td colSpan={5} className="text-center py-12 text-muted-foreground">No cases.</td></tr>
+              )}
+              {filtered.map((c) => (
+                <tr key={c.id} className="border-t hover:bg-muted/30">
+                  <td className="px-4 py-3">
+                    <Link to="/cases/$caseId" params={{ caseId: c.id }} className="font-medium hover:text-primary">
+                      {c.title}
+                    </Link>
+                    <div className="text-xs text-muted-foreground">{c.case_number}</div>
+                  </td>
+                  <td className="px-4 py-3 text-muted-foreground">{c.client?.name ?? "—"}</td>
+                  <td className="px-4 py-3">
+                    <Badge variant="outline" className={statusBadgeClass(c.status)}>{c.status.replace("_", " ")}</Badge>
+                  </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>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}