import { createFileRoute, Link } from "@tanstack/react-router"; import { useState } from "react"; import { AppTopbar } from "@/components/app/app-topbar"; import { Button } from "@/components/ui/button"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { ScrollArea } from "@/components/ui/scroll-area"; import { ArrowLeft, Users, Mail, Phone, Heart, DollarSign, Activity, Clock, FileText, Pencil, Tag, ExternalLink, Handshake, MessagesSquare, Send, StickyNote, Sliders, LineChart as LineChartIcon, UserSquare2, } from "lucide-react"; import { useCustomer, useCustomerTimeline, useCustomerActivities, useCustomerAttachments, customerDisplayName, customerInitials, } from "@/hooks/use-customers"; import { useCompany } from "@/hooks/use-companies"; import { AttachmentItem, AttachmentsErrorState, type AttachmentFileRef, } from "@/components/app/files/attachment-item"; import { useCustomerDeals, useCustomerTasks, useCustomerConversations, useCustomerNotes, useCustomerCampaigns, useRelatedContacts, } from "@/hooks/use-dashboard"; import { useCustomFields } from "@/hooks/use-custom-fields"; import { useTenantCurrency } from "@/hooks/use-currency"; import { useZonedDateFormatter } from "@/hooks/use-timezone"; import { aggregateCurrency, formatMoney } from "@/lib/currency/format"; import { CustomerEditDialog } from "@/components/app/customers/customer-edit-dialog"; import { ActivityTimeline } from "@/components/app/timeline/activity-timeline"; import { CustomerActivityTimeline } from "@/components/app/customers/customer-activity-timeline"; import { EngagementMetrics } from "@/components/app/customers/engagement-metrics"; import { CustomerAIInsights } from "@/components/app/customers/customer-ai-insights"; import { CustomerNotesTasksPanel } from "@/components/app/customers/customer-notes-tasks-panel"; import { TagSelector } from "@/components/app/tags/tag-selector"; import { InlineEditableField, InlineOwnerPicker, InlineTagEditor, } from "@/components/app/customers/inline-editable-header"; import { LineChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, PieChart, Pie, Cell, Legend, } from "recharts"; export const Route = createFileRoute("/_authenticated/customers/$customerId")({ staticData: { breadcrumb: "Customer" }, head: () => ({ meta: [ { title: "Customer 360° — CRM" }, { name: "description", content: "Complete 360° view of a customer with timeline, deals, tasks, conversations and analytics.", }, ], }), component: CustomerDetailPage, }); function CustomerDetailPage() { const { customerId } = Route.useParams(); const { data: customer, isLoading } = useCustomer(customerId); const formatZonedDate = useZonedDateFormatter(); const { data: company } = useCompany(customer?.company_id ?? undefined); const { data: timeline = [] } = useCustomerTimeline(customerId); const { data: activities = [] } = useCustomerActivities(customerId); const { data: attachments = [], error: attachmentsError, refetch: refetchAttachments, } = useCustomerAttachments(customerId); const { data: deals = [] } = useCustomerDeals(customerId); const tenantCurrency = useTenantCurrency(); const { data: tasks = [] } = useCustomerTasks(customerId); const { data: conversations = [] } = useCustomerConversations(customerId); const { data: notes = [] } = useCustomerNotes(customerId); const { data: campaigns = [] } = useCustomerCampaigns(customerId); const { data: related = [] } = useRelatedContacts(customerId, customer?.company_id); const { data: fieldDefs = [] } = useCustomFields("customer"); const [edit, setEdit] = useState(false); if (isLoading) return ( <>
Loading
); if (!customer) return ( <>

Customer not found.

); const health = customer.customer_health_score ?? 0; const healthColor = health >= 70 ? "text-emerald-500" : health >= 40 ? "text-amber-500" : "text-rose-500"; const ltv = Number(customer.customer_lifetime_value || 0); const openDealsValue = deals .filter((d) => d.status === "open") .reduce((s, d) => s + Number(d.amount || 0), 0); const wonDealsValue = deals .filter((d) => d.status === "won") .reduce((s, d) => s + Number(d.amount || 0), 0); // Deal amounts carry their own currency; the tenant's fills in when this // customer's deals disagree (or when there are none yet, as for lifetime value). const dealsCurrency = aggregateCurrency(deals, tenantCurrency); const money = (value: number) => formatMoney(value, dealsCurrency, { maximumFractionDigits: 0 }); const openTasks = tasks.filter((t) => t.status !== "completed").length; const cf = (customer as unknown as { custom_fields?: Record }).custom_fields ?? {}; return ( <> } />
{/* Header card */}
{customer.avatar_url ? : null} {customerInitials(customer)}
{customer.customer_status ?? "—"} {customer.lifecycle_stage}
{customer.job_title ?? ""} {company ? ` · ` : ""} {company && ( {company.name} )}
} /> } /> {customer.first_customer_at && ( Since{" "} {formatZonedDate(customer.first_customer_at, {})} )}
{/* Metrics */}
} /> } /> } /> } /> } /> } />
{/* Tabs */}
} /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } />
d.status === "open").length} recentActivity={activities.slice(0, 5)} recentNotes={notes.slice(0, 3)} /> void refetchAttachments()} />
); } /* --------------------- Reusable primitives --------------------- */ function Tab({ v, label, icon }: { v: string; label: string; icon: React.ReactNode }) { return ( {icon} {label} ); } function MetricCard({ label, value, icon, }: { label: string; value: string; icon: React.ReactNode; }) { return (
{icon} {label}
{value}
); } function Empty({ text }: { text: string }) { return
{text}
; } /* --------------------- Panes --------------------- */ function OverviewPane({ customer, openDeals, recentActivity, recentNotes, }: { customer: { segments?: string[]; preferences?: Record; tags?: string[] }; openDeals: number; recentActivity: Array>; recentNotes: Array<{ id: string; body: string; is_pinned: boolean; created_at: string }>; }) { const formatZonedDate = useZonedDateFormatter(); return (
{customer.segments?.length ? (
{customer.segments.map((s) => ( {s} ))}
) : (

No segments assigned.

)} {customer.preferences && Object.keys(customer.preferences).length ? (
{Object.entries(customer.preferences) .slice(0, 8) .map(([k, v]) => (
{k}
{typeof v === "object" ? JSON.stringify(v) : String(v)}
))}
) : (

No preferences saved.

)}
  • Open deals:{" "} {openDeals}
  • Tags:{" "} {customer.tags?.length ?? 0}
{recentActivity.length ? (
    {recentActivity.map((a) => (
  • {String(a.summary ?? a.verb ?? "Activity")} {a.created_at ? formatZonedDate(String(a.created_at), {}) : ""}
    • ))}
) : (

No activity yet.

)} {recentNotes.length ? (
    {recentNotes.map((n) => (
  • {n.is_pinned && ( Pinned )} {formatZonedDate(n.created_at, {})}

    {n.body}

    • ))}
) : (

No notes yet.

)}
); } function SectionCard({ title, children }: { title: string; children: React.ReactNode }) { return (
{title}
{children}
); } function ConversationsPane({ items, }: { items: Array<{ id: string; status: string; unread_count: number; last_message_at: string | null; ai_summary: string | null; }>; }) { const formatZonedDate = useZonedDateFormatter(); if (!items.length) return ; return (
    {items.map((c) => (
  • {c.status.replace(/_/g, " ")}
    {c.ai_summary || "No summary"}
    {c.unread_count > 0 && {c.unread_count}} {c.last_message_at && (
    {formatZonedDate(c.last_message_at, {})}
    )}
    • ))}
); } function DealsPane({ items, }: { items: Array<{ id: string; title: string; amount: number; currency: string; status: string; probability: number; expected_close_date: string | null; }>; }) { const formatZonedDate = useZonedDateFormatter(); if (!items.length) return ; return (
    {items.map((d) => (
  • {d.title}
    {d.status} · {d.probability}% probability {d.expected_close_date ? ` · close ${formatZonedDate(d.expected_close_date, {})}` : ""}
    {d.currency} {Number(d.amount).toLocaleString()}
    • ))}
); } function TasksPane({ items, }: { items: Array<{ id: string; title: string; status: string; priority: string; due_at: string | null; }>; }) { const formatZonedDate = useZonedDateFormatter(); if (!items.length) return ; return (
    {items.map((t) => (
  • {t.title}
    {t.due_at ? formatZonedDate(t.due_at, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) : "No due date"}
    {t.status}
    • ))}
); } function CampaignsPane({ items, }: { items: Array<{ id: string; name: string; status: string; created_at: string }>; }) { const formatZonedDate = useZonedDateFormatter(); if (!items.length) return ; return (
    {items.map((c) => (
  • {c.name}
    {c.status}
    {formatZonedDate(c.created_at, {})}
    • ))}
); } function NotesPane({ items, }: { items: Array<{ id: string; body: string; is_pinned: boolean; created_at: string }>; }) { const formatZonedDate = useZonedDateFormatter(); if (!items.length) return ; return (
{items.map((n) => (
{n.is_pinned && ( Pinned )} {formatZonedDate(n.created_at, { dateStyle: "short", timeStyle: "short" })}

{n.body}

))}
); } function AttachmentsPane({ items, error, onRetry, }: { items: Array<{ id: string; file: AttachmentFileRef; created_at: string }>; error?: unknown; onRetry?: () => void; }) { if (error) return (
); if (!items.length) return ; return (
{items.map((a) => ( ))}
); } function CustomFieldsPane({ defs, values, }: { defs: Array<{ id: string; key: string; label: string; field_type: string }>; values: Record; }) { if (!defs.length) return ( ); return (
{defs.map((f) => { const v = values[f.key]; return (
{f.label}
{v == null || v === "" ? ( — ) : ( String(typeof v === "object" ? JSON.stringify(v) : v) )}
{f.field_type}
); })}
); } function RelatedPane({ items, }: { items: Array<{ id: string; first_name: string | null; last_name: string | null; display_name: string | null; email: string | null; avatar_url: string | null; job_title: string | null; }>; }) { if (!items.length) return ; return (
    {items.map((c) => { const name = c.display_name || [c.first_name, c.last_name].filter(Boolean).join(" ") || c.email || "Unnamed"; const initials = name .split(/\s+/) .map((w) => w[0]) .slice(0, 2) .join("") .toUpperCase(); return (
  • {c.avatar_url ? : null} {initials || "??"}
    {name}
    {c.job_title || c.email || "—"}
    • ); })}
); } function AnalyticsPane({ activities, deals, tasks, health, ltv, currency, }: { activities: Array<{ created_at?: string }>; deals: Array<{ status: string; amount: number }>; tasks: Array<{ status: string }>; health: number; ltv: number; /** Currency these figures are denominated in, resolved by the caller. */ currency: string; }) { // Activity per day, last 30d const days: Array<{ day: string; count: number }> = []; for (let i = 29; i >= 0; i--) { const d = new Date(); d.setDate(d.getDate() - i); d.setHours(0, 0, 0, 0); const key = d.toISOString().slice(0, 10); const count = activities.filter((a) => a.created_at?.slice(0, 10) === key).length; days.push({ day: d.toLocaleDateString([], { month: "short", day: "numeric" }), count }); } const dealBreakdown = ["open", "won", "lost"] .map((s) => ({ name: s, value: deals.filter((d) => d.status === s).reduce((sum, d) => sum + Number(d.amount || 0), 0), })) .filter((x) => x.value > 0); const COLORS = ["hsl(var(--primary))", "hsl(142 76% 45%)", "hsl(0 72% 55%)"]; const openTasksN = tasks.filter((t) => t.status !== "completed").length; const doneTasksN = tasks.filter((t) => t.status === "completed").length; return (

Activity · last 30 days

Engagement volume over time

Deal breakdown

Value by status

{dealBreakdown.length ? (
{dealBreakdown.map((_, i) => ( ))}
) : (
No deals yet
)}
= 70 ? "green" : health >= 40 ? "amber" : "rose"} />
); } function StatBig({ label, value, suffix, tone, }: { label: string; value: string; suffix?: string; tone: "green" | "amber" | "rose" | "accent"; }) { const toneClass = { green: "from-emerald-500/10 to-emerald-500/0 text-emerald-600", amber: "from-amber-500/10 to-amber-500/0 text-amber-600", rose: "from-rose-500/10 to-rose-500/0 text-rose-600", accent: "from-accent/10 to-accent/0 text-accent", }[tone]; return (
{label}
{value} {suffix}
); } function HistoryPane({ entries, }: { entries: Array<{ id: string; action: string; changes: Record; created_at: string; }>; }) { const formatZonedDate = useZonedDateFormatter(); if (!entries.length) return ; return (
{entries.map((e) => (
{e.action.replace(/_/g, " ")} {formatZonedDate(e.created_at, { dateStyle: "short", timeStyle: "short" })} 
            {JSON.stringify(e.changes, null, 2)}
))}
); }