import { Head, Link, router } from '@inertiajs/react'; import { ChevronRight, Flame, Inbox as InboxIcon, Mail, Phone, UserRound, } from 'lucide-react'; import { LeadScoreBadge } from '@/components/lead-score-badge'; import { TablePagination } from '@/components/table-pagination'; import type { PaginationMeta } from '@/components/table-pagination'; import { TableSearch } from '@/components/table-search'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; import { index as agentsIndex, show as showAgent } from '@/routes/agents'; import { index as agentLeadsIndex } from '@/routes/agents/leads'; import { show as showLead } from '@/routes/inbox'; import type { BreadcrumbItem } from '@/types'; type Agent = { id: string; name: string; }; type LeadRow = { id: string; email: string | null; name: string | null; phone: string | null; status: 'new' | 'qualified' | 'contacted' | 'won' | 'lost' | string; page_url: string | null; created_at: string | null; lead_score: number; lead_score_bucket: 'low' | 'medium' | 'high'; lead_score_reasons: string[]; }; type Props = { agent: Agent; totals: { leads: number; qualified: number; with_email: number; with_phone: number; }; leads: LeadRow[]; pagination: PaginationMeta; filters: { q: string; hot: boolean }; }; const STATUS_STYLES: Record = { new: 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-300', qualified: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300', contacted: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300', won: 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-500/30 dark:bg-violet-500/10 dark:text-violet-300', lost: 'border-border bg-muted text-muted-foreground', }; function useRelativeTime(): (iso: string | null) => string { const { t } = useT(); return (iso: string | null): string => { if (!iso) { return '—'; } const ms = Date.now() - new Date(iso).getTime(); const min = Math.max(1, Math.round(ms / 60000)); if (min < 60) { return t(':min m ago', { min }); } const hr = Math.round(min / 60); if (hr < 24) { return t(':hr h ago', { hr }); } const day = Math.round(hr / 24); return t(':day d ago', { day }); }; } function StatusBadge({ status }: { status: string }) { const { t } = useT(); return ( {t(status)} ); } export default function AgentLeadsPage({ agent, totals, leads, pagination, filters, }: Props) { const { t } = useT(); const relativeTime = useRelativeTime(); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Agents'), href: agentsIndex() }, { title: agent.name, href: showAgent(agent.id) }, { title: t('Leads'), href: agentLeadsIndex({ agent: agent.id }) }, ]; const isEmpty = leads.length === 0; const hasQuery = filters.q.trim() !== ''; return (

{t('Leads')}

{t( 'Every lead captured by :name. Open a row to update the status or jump into the related conversation.', { name: agent.name }, )}

{t('Total leads')}

{totals.leads.toLocaleString()}

{t('captured for this agent')}

{t('Qualified')}

{totals.qualified.toLocaleString()}

{t('qualified, contacted, or won')}

{t('With email')}

{totals.with_email.toLocaleString()}

{t('ready for follow-up')}

{t('With phone')}

{totals.with_phone.toLocaleString()}

{t('callback-ready contacts')}

{isEmpty ? (

{hasQuery ? t('No leads match that search.') : t('No leads yet for this agent.')}

{hasQuery ? t( 'Try a broader keyword or search by email, phone, or page URL.', ) : t( 'Once visitors share their details, this agent-specific lead feed will populate here.', )}

) : (
{leads.map((lead) => { const label = lead.name ?? lead.email ?? t('Unnamed lead'); return (

{label}

{lead.lead_score > 0 && ( )}
{lead.email && ( {lead.email} )} {lead.phone && ( {lead.phone} )}

{lead.page_url ?? t('No page URL captured')}

{relativeTime(lead.created_at)}
); })}
)}
); }