Changes
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
co-authored by
renee-png
renee-png
parent
46f2d14c5d
commit
1f3fd28159
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user