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
6730c8b863
commit
54793abda3
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user