Changes

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

src/routes/cases.index.tsx

@@ -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>
+  );
+}

src/routes/cases.new.tsx

@@ -0,0 +1,192 @@
+import { createFileRoute, useNavigate, Link } from "@tanstack/react-router";
+import { z } from "zod";
+import { useEffect, useState } from "react";
+import { ProtectedLayout } from "@/components/protected-layout";
+import { PageContainer, PageHeader } from "@/components/app-shell";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/lib/auth";
+import { ArrowLeft, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+const search = z.object({ clientId: z.string().optional() });
+
+export const Route = createFileRoute("/cases/new")({
+  validateSearch: search,
+  component: () => (
+    <ProtectedLayout>
+      <NewCase />
+    </ProtectedLayout>
+  ),
+});
+
+function NewCase() {
+  const { clientId } = Route.useSearch();
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const [clients, setClients] = useState<any[]>([]);
+  const [users, setUsers] = useState<any[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+
+  const [form, setForm] = useState({
+    client_id: clientId ?? "",
+    case_number: "",
+    title: "",
+    practice_area: "",
+    description: "",
+    status: "intake" as const,
+    assigned_attorney_id: user?.id ?? "",
+    default_hourly_rate: "",
+  });
+
+  useEffect(() => {
+    (async () => {
+      const [{ data: cs }, { data: us }] = await Promise.all([
+        supabase.from("clients").select("id, name").order("name"),
+        supabase.from("profiles").select("id, full_name, email").order("full_name"),
+      ]);
+      setClients(cs ?? []);
+      setUsers(us ?? []);
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (user?.id && !form.assigned_attorney_id) {
+      setForm((f) => ({ ...f, assigned_attorney_id: user.id }));
+    }
+  }, [user?.id]);
+
+  // Auto-generate case number suggestion
+  useEffect(() => {
+    if (!form.case_number) {
+      const yr = new Date().getFullYear();
+      const rand = Math.floor(1000 + Math.random() * 9000);
+      setForm((f) => ({ ...f, case_number: `${yr}-${rand}` }));
+    }
+  }, []);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.client_id || !form.title.trim() || !form.case_number.trim()) {
+      toast.error("Please fill in client, title, and case number.");
+      return;
+    }
+    setSubmitting(true);
+    const payload = {
+      client_id: form.client_id,
+      case_number: form.case_number.trim(),
+      title: form.title.trim(),
+      practice_area: form.practice_area.trim() || null,
+      description: form.description.trim() || null,
+      status: form.status,
+      assigned_attorney_id: form.assigned_attorney_id || null,
+      default_hourly_rate: form.default_hourly_rate ? parseFloat(form.default_hourly_rate) : null,
+      created_by: user?.id,
+    };
+    const { data, error } = await supabase.from("cases").insert(payload).select("id").single();
+    setSubmitting(false);
+    if (error) {
+      toast.error("Could not create case", { description: error.message });
+      return;
+    }
+    toast.success("Case created");
+    navigate({ to: "/cases/$caseId", params: { caseId: data.id } });
+  };
+
+  return (
+    <PageContainer>
+      <Button variant="ghost" size="sm" asChild className="mb-3 -ml-2">
+        <Link to="/cases"><ArrowLeft className="h-4 w-4 mr-1" /> All cases</Link>
+      </Button>
+      <PageHeader title="New case" description="Open a new matter." />
+
+      <Card className="max-w-2xl border-border/60">
+        <CardContent className="p-6">
+          <form onSubmit={onSubmit} className="space-y-4">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label>Client</Label>
+                <Select value={form.client_id} onValueChange={(v) => setForm({ ...form, client_id: v })}>
+                  <SelectTrigger><SelectValue placeholder="Select client" /></SelectTrigger>
+                  <SelectContent>
+                    {clients.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label>Case number</Label>
+                <Input value={form.case_number} onChange={(e) => setForm({ ...form, case_number: e.target.value })} required maxLength={50} />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label>Title</Label>
+              <Input value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} required maxLength={200} />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label>Practice area</Label>
+                <Input
+                  value={form.practice_area}
+                  onChange={(e) => setForm({ ...form, practice_area: e.target.value })}
+                  placeholder="HOA collections, Litigation, Transactional…"
+                  maxLength={120}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>Status</Label>
+                <Select value={form.status} onValueChange={(v: any) => setForm({ ...form, status: v })}>
+                  <SelectTrigger><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="intake">Intake</SelectItem>
+                    <SelectItem value="active">Active</SelectItem>
+                    <SelectItem value="on_hold">On hold</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label>Assigned attorney</Label>
+                <Select value={form.assigned_attorney_id} onValueChange={(v) => setForm({ ...form, assigned_attorney_id: v })}>
+                  <SelectTrigger><SelectValue placeholder="Select user" /></SelectTrigger>
+                  <SelectContent>
+                    {users.map((u) => <SelectItem key={u.id} value={u.id}>{u.full_name || u.email}</SelectItem>)}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label>Default hourly rate ($)</Label>
+                <Input
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  value={form.default_hourly_rate}
+                  onChange={(e) => setForm({ ...form, default_hourly_rate: e.target.value })}
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label>Description</Label>
+              <Textarea rows={4} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} maxLength={5000} />
+            </div>
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button type="button" variant="outline" asChild>
+                <Link to="/cases">Cancel</Link>
+              </Button>
+              <Button type="submit" disabled={submitting}>
+                {submitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                Create case
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}

src/routes/clients.$clientId.tsx

@@ -0,0 +1,197 @@
+import { createFileRoute, Link, useNavigate } 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 { Badge } from "@/components/ui/badge";
+import { supabase } from "@/integrations/supabase/client";
+import { ClientFormDialog } from "@/components/clients/client-form-dialog";
+import { useAuth } from "@/lib/auth";
+import { ArrowLeft, Edit, Plus, Building2, User, Briefcase as Building, MapPin, Mail, Phone, Users } from "lucide-react";
+import { formatDate, statusBadgeClass } from "@/lib/format";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/clients/$clientId")({
+  component: () => (
+    <ProtectedLayout>
+      <ClientDetail />
+    </ProtectedLayout>
+  ),
+});
+
+function ClientDetail() {
+  const { clientId } = Route.useParams();
+  const navigate = useNavigate();
+  const { user, isAdmin } = useAuth();
+  const [client, setClient] = useState<any>(null);
+  const [cases, setCases] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [editOpen, setEditOpen] = useState(false);
+
+  const load = async () => {
+    setLoading(true);
+    const [{ data: c, error: ce }, { data: cs }] = await Promise.all([
+      supabase.from("clients").select("*").eq("id", clientId).maybeSingle(),
+      supabase.from("cases").select("id, case_number, title, status, opened_at").eq("client_id", clientId).order("opened_at", { ascending: false }),
+    ]);
+    if (ce) toast.error("Failed to load client", { description: ce.message });
+    setClient(c);
+    setCases(cs ?? []);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    load();
+  }, [clientId]);
+
+  if (loading) {
+    return (
+      <PageContainer>
+        <p className="text-muted-foreground">Loading…</p>
+      </PageContainer>
+    );
+  }
+
+  if (!client) {
+    return (
+      <PageContainer>
+        <p className="text-muted-foreground">Client not found.</p>
+        <Button variant="outline" className="mt-3" asChild>
+          <Link to="/clients"><ArrowLeft className="h-4 w-4 mr-2" /> Back to clients</Link>
+        </Button>
+      </PageContainer>
+    );
+  }
+
+  const Icon =
+    client.client_type === "hoa" ? Building2 : client.client_type === "business" ? Building : User;
+  const canEdit = isAdmin || client.created_by === user?.id;
+
+  return (
+    <PageContainer>
+      <Button variant="ghost" size="sm" asChild className="mb-3 -ml-2">
+        <Link to="/clients"><ArrowLeft className="h-4 w-4 mr-1" /> All clients</Link>
+      </Button>
+
+      <PageHeader
+        title={client.name}
+        description={client.management_company || client.client_type.toUpperCase()}
+        actions={
+          <>
+            {canEdit && (
+              <Button variant="outline" onClick={() => setEditOpen(true)}>
+                <Edit className="h-4 w-4 mr-2" /> Edit
+              </Button>
+            )}
+            <Button onClick={() => navigate({ to: "/cases/new", search: { clientId: client.id } })}>
+              <Plus className="h-4 w-4 mr-2" /> New case
+            </Button>
+          </>
+        }
+      />
+
+      <div className="grid lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-6">
+          <Card className="border-border/60">
+            <CardContent className="p-5">
+              <div className="flex items-center gap-2 mb-4">
+                <Icon className="h-4 w-4 text-muted-foreground" />
+                <h3 className="font-serif text-lg">Details</h3>
+              </div>
+              <dl className="grid grid-cols-2 gap-y-3 gap-x-6 text-sm">
+                <DetailRow label="Type" value={client.client_type} />
+                {client.client_type === "hoa" && (
+                  <>
+                    <DetailRow label="Units" value={client.num_units} />
+                    <DetailRow label="Management Co." value={client.management_company} />
+                  </>
+                )}
+                <DetailRow label="Primary contact" value={client.primary_contact_name} />
+                <DetailRow label="Email" value={client.primary_contact_email} icon={Mail} />
+                <DetailRow label="Phone" value={client.primary_contact_phone} icon={Phone} />
+                <DetailRow
+                  label="Address"
+                  value={
+                    [client.address_line1, client.city, client.state, client.postal_code]
+                      .filter(Boolean)
+                      .join(", ") || null
+                  }
+                  icon={MapPin}
+                />
+              </dl>
+              {client.notes && (
+                <div className="mt-4 pt-4 border-t">
+                  <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1">Notes</div>
+                  <p className="text-sm whitespace-pre-wrap">{client.notes}</p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {client.client_type === "hoa" && client.board_members?.length > 0 && (
+            <Card className="border-border/60">
+              <CardContent className="p-5">
+                <div className="flex items-center gap-2 mb-3">
+                  <Users className="h-4 w-4 text-muted-foreground" />
+                  <h3 className="font-serif text-lg">Board members</h3>
+                </div>
+                <div className="divide-y">
+                  {client.board_members.map((m: any, i: number) => (
+                    <div key={i} className="py-2.5 flex flex-wrap items-baseline gap-x-4 gap-y-1 text-sm">
+                      <span className="font-medium">{m.name}</span>
+                      {m.role && <span className="text-xs uppercase tracking-wider text-muted-foreground">{m.role}</span>}
+                      {m.email && <span className="text-muted-foreground">{m.email}</span>}
+                      {m.phone && <span className="text-muted-foreground">{m.phone}</span>}
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        <Card className="border-border/60 h-fit">
+          <CardContent className="p-5">
+            <h3 className="font-serif text-lg mb-3">Cases</h3>
+            {cases.length === 0 && <p className="text-sm text-muted-foreground">No cases yet.</p>}
+            <div className="space-y-1">
+              {cases.map((c) => (
+                <Link
+                  key={c.id}
+                  to="/cases/$caseId"
+                  params={{ caseId: c.id }}
+                  className="block p-2.5 rounded-md hover:bg-muted/60 -mx-2"
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="text-sm font-medium truncate">{c.title}</span>
+                    <Badge variant="outline" className={`text-[10px] ${statusBadgeClass(c.status)}`}>
+                      {c.status.replace("_", " ")}
+                    </Badge>
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {c.case_number} · opened {formatDate(c.opened_at)}
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <ClientFormDialog open={editOpen} onOpenChange={setEditOpen} client={client} onSaved={load} />
+    </PageContainer>
+  );
+}
+
+function DetailRow({ label, value, icon: Icon }: { label: string; value: any; icon?: any }) {
+  return (
+    <>
+      <dt className="text-xs uppercase tracking-wider text-muted-foreground self-center">{label}</dt>
+      <dd className="text-sm flex items-center gap-1.5">
+        {Icon && value && <Icon className="h-3 w-3 text-muted-foreground" />}
+        {value || <span className="text-muted-foreground italic">—</span>}
+      </dd>
+    </>
+  );
+}