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,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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user