Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-17 02:23:12 +00:00
parent 46f2d14c5d
commit 1f3fd28159
5 changed files with 880 additions and 0 deletions
@@ -0,0 +1,188 @@
+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 { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/lib/auth";
+import { toast } from "sonner";
+import { ArrowLeft, Edit, Trash2, Mail, Phone, MapPin, Building2, Briefcase, Users } from "lucide-react";
+import { ContactFormDialog, CONTACT_TYPES } from "@/components/contacts/contact-form-dialog";
+
+export const Route = createFileRoute("/contacts/$contactId")({
+  component: () => (
+    <ProtectedLayout>
+      <ContactDetail />
+    </ProtectedLayout>
+  ),
+});
+
+function ContactDetail() {
+  const { contactId } = Route.useParams();
+  const navigate = useNavigate();
+  const { user, isAdmin } = useAuth();
+  const [contact, setContact] = useState<any>(null);
+  const [cases, setCases] = useState<any[]>([]);
+  const [clients, setClients] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [editOpen, setEditOpen] = useState(false);
+
+  const load = async () => {
+    setLoading(true);
+    const [{ data: c, error }, { data: cc }, { data: clc }] = await Promise.all([
+      supabase.from("contacts").select("*").eq("id", contactId).maybeSingle(),
+      supabase.from("case_contacts").select("role, case:cases(id, case_number, title, status)").eq("contact_id", contactId),
+      supabase.from("client_contacts").select("role, client:clients(id, name, client_type)").eq("contact_id", contactId),
+    ]);
+    if (error) toast.error(error.message);
+    setContact(c);
+    setCases(((cc ?? []) as any[]).filter((r) => r.case));
+    setClients(((clc ?? []) as any[]).filter((r) => r.client));
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    load();
+  }, [contactId]);
+
+  const remove = async () => {
+    if (!contact) return;
+    if (!confirm(`Delete contact "${contact.name}"?`)) return;
+    const { error } = await supabase.from("contacts").delete().eq("id", contactId);
+    if (error) {
+      toast.error(error.message);
+      return;
+    }
+    toast.success("Contact deleted");
+    navigate({ to: "/contacts" });
+  };
+
+  if (loading) {
+    return <PageContainer><p className="text-muted-foreground">Loading…</p></PageContainer>;
+  }
+  if (!contact) {
+    return (
+      <PageContainer>
+        <p className="text-muted-foreground">Contact not found.</p>
+        <Button variant="outline" className="mt-3" asChild>
+          <Link to="/contacts"><ArrowLeft className="h-4 w-4 mr-2" /> Back to contacts</Link>
+        </Button>
+      </PageContainer>
+    );
+  }
+
+  const canEdit = isAdmin || contact.created_by === user?.id;
+  const typeLabel = CONTACT_TYPES.find((t) => t.value === contact.contact_type)?.label ?? contact.contact_type;
+  const addr = [contact.address_line1, contact.address_line2, contact.city, contact.state, contact.postal_code].filter(Boolean).join(", ");
+
+  return (
+    <PageContainer>
+      <Button variant="ghost" size="sm" asChild className="mb-3 -ml-2">
+        <Link to="/contacts"><ArrowLeft className="h-4 w-4 mr-1" /> All contacts</Link>
+      </Button>
+
+      <PageHeader
+        title={contact.name}
+        description={[contact.title, contact.company].filter(Boolean).join(" · ") || typeLabel}
+        actions={
+          canEdit ? (
+            <>
+              <Button variant="outline" onClick={() => setEditOpen(true)}><Edit className="h-4 w-4 mr-2" /> Edit</Button>
+              <Button variant="outline" onClick={remove}><Trash2 className="h-4 w-4 mr-2" /> Delete</Button>
+            </>
+          ) : null
+        }
+      />
+
+      <div className="grid lg:grid-cols-3 gap-6">
+        <Card className="lg:col-span-2 border-border/60">
+          <CardContent className="p-5">
+            <div className="flex items-center gap-2 mb-4">
+              <Badge variant="outline" className="text-[10px]">{typeLabel}</Badge>
+            </div>
+            <dl className="grid grid-cols-2 gap-y-3 gap-x-6 text-sm">
+              <DetailRow label="Email" value={contact.email} icon={Mail} />
+              <DetailRow label="Phone" value={contact.phone} icon={Phone} />
+              <DetailRow label="Company" value={contact.company} icon={Building2} />
+              <DetailRow label="Title" value={contact.title} />
+              <DetailRow label="Address" value={addr || null} icon={MapPin} />
+            </dl>
+            {contact.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">{contact.notes}</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="border-border/60 h-fit">
+          <CardContent className="p-5 space-y-4">
+            <div>
+              <div className="flex items-center gap-2 mb-2">
+                <Briefcase className="h-4 w-4 text-muted-foreground" />
+                <h3 className="font-serif text-base">Cases ({cases.length})</h3>
+              </div>
+              {cases.length === 0 ? (
+                <p className="text-xs text-muted-foreground">Not linked to any cases.</p>
+              ) : (
+                <div className="space-y-1">
+                  {cases.map((row, i) => (
+                    <Link
+                      key={i}
+                      to="/cases/$caseId"
+                      params={{ caseId: row.case.id }}
+                      className="block p-2 rounded-md hover:bg-muted/60 -mx-2"
+                    >
+                      <div className="text-sm font-medium truncate">{row.case.title}</div>
+                      <div className="text-xs text-muted-foreground">{row.case.case_number}</div>
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div className="pt-3 border-t">
+              <div className="flex items-center gap-2 mb-2">
+                <Users className="h-4 w-4 text-muted-foreground" />
+                <h3 className="font-serif text-base">Clients ({clients.length})</h3>
+              </div>
+              {clients.length === 0 ? (
+                <p className="text-xs text-muted-foreground">Not linked to any clients.</p>
+              ) : (
+                <div className="space-y-1">
+                  {clients.map((row, i) => (
+                    <Link
+                      key={i}
+                      to="/clients/$clientId"
+                      params={{ clientId: row.client.id }}
+                      className="block p-2 rounded-md hover:bg-muted/60 -mx-2"
+                    >
+                      <div className="text-sm font-medium truncate">{row.client.name}</div>
+                      <div className="text-xs text-muted-foreground capitalize">{row.client.client_type}</div>
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <ContactFormDialog open={editOpen} onOpenChange={setEditOpen} contact={contact} 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>
+    </>
+  );
+}
@@ -0,0 +1,201 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useEffect, useMemo, 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 { Badge } from "@/components/ui/badge";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/lib/auth";
+import { toast } from "sonner";
+import { Plus, Search, Mail, Phone, Building2, ChevronRight, Edit, Trash2, Briefcase, Users } from "lucide-react";
+import { ContactFormDialog, CONTACT_TYPES, type ContactRecord } from "@/components/contacts/contact-form-dialog";
+
+export const Route = createFileRoute("/contacts/")({
+  component: () => (
+    <ProtectedLayout>
+      <ContactsIndex />
+    </ProtectedLayout>
+  ),
+});
+
+interface ContactRow extends Required<Pick<ContactRecord, "name">>, ContactRecord {
+  id: string;
+  created_by: string | null;
+  case_links: number;
+  client_links: number;
+}
+
+function ContactsIndex() {
+  const { user, isAdmin } = useAuth();
+  const [rows, setRows] = useState<ContactRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [q, setQ] = useState("");
+  const [typeFilter, setTypeFilter] = useState<string>("all");
+  const [editing, setEditing] = useState<ContactRecord | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const load = async () => {
+    setLoading(true);
+    const [{ data, error }, { data: cc }, { data: clc }] = await Promise.all([
+      supabase.from("contacts").select("*").order("name"),
+      supabase.from("case_contacts").select("contact_id"),
+      supabase.from("client_contacts").select("contact_id"),
+    ]);
+    if (error) toast.error(error.message);
+    const caseCounts = new Map<string, number>();
+    (cc ?? []).forEach((r: any) => caseCounts.set(r.contact_id, (caseCounts.get(r.contact_id) ?? 0) + 1));
+    const clientCounts = new Map<string, number>();
+    (clc ?? []).forEach((r: any) => clientCounts.set(r.contact_id, (clientCounts.get(r.contact_id) ?? 0) + 1));
+    setRows(
+      (data ?? []).map((c: any) => ({
+        ...c,
+        case_links: caseCounts.get(c.id) ?? 0,
+        client_links: clientCounts.get(c.id) ?? 0,
+      })),
+    );
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const filtered = useMemo(() => {
+    const term = q.trim().toLowerCase();
+    return rows.filter((r) => {
+      if (typeFilter !== "all" && r.contact_type !== typeFilter) return false;
+      if (!term) return true;
+      return (
+        r.name.toLowerCase().includes(term) ||
+        (r.company ?? "").toLowerCase().includes(term) ||
+        (r.email ?? "").toLowerCase().includes(term) ||
+        (r.phone ?? "").toLowerCase().includes(term)
+      );
+    });
+  }, [rows, q, typeFilter]);
+
+  const remove = async (id: string, name: string) => {
+    if (!confirm(`Delete contact "${name}"? This will also remove all case and client links.`)) return;
+    const { error } = await supabase.from("contacts").delete().eq("id", id);
+    if (error) {
+      toast.error(error.message);
+      return;
+    }
+    toast.success("Contact deleted");
+    setRows((r) => r.filter((x) => x.id !== id));
+  };
+
+  const startNew = () => {
+    setEditing(null);
+    setOpen(true);
+  };
+  const startEdit = (c: ContactRow) => {
+    setEditing(c);
+    setOpen(true);
+  };
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Contacts"
+        description="Shared directory of opposing counsel, witnesses, vendors, experts, and other contacts."
+        actions={
+          <Button onClick={startNew}>
+            <Plus className="h-4 w-4 mr-2" /> New contact
+          </Button>
+        }
+      />
+
+      <Card className="mb-4">
+        <CardContent className="p-4 flex flex-col sm:flex-row gap-3">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search name, company, email, phone…"
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <select
+            value={typeFilter}
+            onChange={(e) => setTypeFilter(e.target.value)}
+            className="h-9 rounded-md border border-input bg-transparent px-3 text-sm sm:w-56"
+          >
+            <option value="all">All types</option>
+            {CONTACT_TYPES.map((t) => (
+              <option key={t.value} value={t.value}>{t.label}</option>
+            ))}
+          </select>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardContent className="p-0">
+          {loading ? (
+            <p className="p-6 text-sm text-muted-foreground">Loading…</p>
+          ) : filtered.length === 0 ? (
+            <p className="p-6 text-sm text-muted-foreground text-center">
+              {rows.length === 0 ? "No contacts yet." : "No contacts match your filters."}
+            </p>
+          ) : (
+            <ul className="divide-y">
+              {filtered.map((c) => {
+                const typeLabel = CONTACT_TYPES.find((t) => t.value === c.contact_type)?.label ?? c.contact_type;
+                const canEdit = isAdmin || c.created_by === user?.id;
+                return (
+                  <li key={c.id} className="px-4 py-3 hover:bg-muted/40 transition-colors">
+                    <div className="flex items-center gap-3">
+                      <Link
+                        to="/contacts/$contactId"
+                        params={{ contactId: c.id }}
+                        className="flex-1 min-w-0 flex items-center gap-3"
+                      >
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-center gap-2 flex-wrap">
+                            <span className="font-medium truncate">{c.name}</span>
+                            <Badge variant="outline" className="text-[10px]">{typeLabel}</Badge>
+                            {c.title && <span className="text-xs text-muted-foreground">{c.title}</span>}
+                          </div>
+                          <div className="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-muted-foreground">
+                            {c.company && <span className="flex items-center gap-1.5"><Building2 className="h-3 w-3" />{c.company}</span>}
+                            {c.email && <span className="flex items-center gap-1.5"><Mail className="h-3 w-3" />{c.email}</span>}
+                            {c.phone && <span className="flex items-center gap-1.5"><Phone className="h-3 w-3" />{c.phone}</span>}
+                          </div>
+                        </div>
+                        <div className="hidden md:flex flex-col items-end text-[11px] text-muted-foreground gap-0.5 mr-2">
+                          {c.case_links > 0 && <span className="flex items-center gap-1"><Briefcase className="h-3 w-3" />{c.case_links} case{c.case_links === 1 ? "" : "s"}</span>}
+                          {c.client_links > 0 && <span className="flex items-center gap-1"><Users className="h-3 w-3" />{c.client_links} client{c.client_links === 1 ? "" : "s"}</span>}
+                        </div>
+                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                      </Link>
+                      {canEdit && (
+                        <div className="flex gap-1">
+                          <Button variant="ghost" size="icon" onClick={() => startEdit(c)}>
+                            <Edit className="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" size="icon" onClick={() => remove(c.id, c.name)}>
+                            <Trash2 className="h-4 w-4 text-destructive" />
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </CardContent>
+      </Card>
+
+      <ContactFormDialog
+        open={open}
+        onOpenChange={setOpen}
+        contact={editing}
+        onSaved={() => load()}
+      />
+    </PageContainer>
+  );
+}