import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Search, Download, Target, RefreshCw } from 'lucide-react'; type Row = { id: number; status: string; match_type: string; match_detail: string | null; license_number: string | null; owner: string | null; business: string | null; profession: string | null; address: string | null; city_state_zip: string; zip: string | null; phone: string | null; expiration: string | null; expired: boolean; distance: number | null; county: string | null; competition: string | null; suites_at_address: number | null; }; type Stats = { total: number; our_tenants: number; other_corp_tenants: number; in_salesforce: number; untouched: number; center_zip: string | null; county: string | null; }; export default function Prospecting() { const props = usePage().props as unknown as { rows: Row[]; stats: Stats; mode: string; center: { name: string; zip: string | null; county: string | null } | null; professions: Record; radii: number[]; filters: Record; locationOptions: { id: number; name: string }[]; }; const { rows, stats, mode, center, professions, radii, filters, locationOptions } = props; const [q, setQ] = useState(filters.q ?? ''); const go = (patch: Record) => router.get('/prospecting', { ...filters, ...patch }, { preserveState: true }); const exportCsv = () => { const head = ['Status','JC Location','License #','Owner','Business','Profession','Address','City/State/Zip','Phone','Distance (mi)','Expiration']; const body = rows.map(r => [r.status, r.match_detail ?? '', r.license_number ?? '', r.owner ?? '', r.business ?? '', r.profession ?? '', r.address ?? '', r.city_state_zip, r.phone ?? '', r.distance ?? '', r.expiration ?? '']); const csv = [head, ...body].map(r => r.map(c => `"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n'); const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv' })); const a = document.createElement('a'); a.href = url; a.download = `prospects-${filters.profession}-${new Date().toISOString().slice(0,10)}.csv`; a.click(); URL.revokeObjectURL(url); }; return ( <>

Lead Prospecting

Licensed professionals near your locations, cross-referenced against tenants and Salesforce.

{Object.entries(professions).map(([key, label]) => ( ))}
{mode === 'radius' ? (
) : (
go({ county: e.target.value })} placeholder={center?.county ?? 'County'} className="w-40 rounded-md border border-border bg-background px-3 py-1.5 text-sm" />
)}
setQ(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && go({ q })} placeholder="name, salon, address, ZIP, phone, license" className="w-72 rounded-md border border-border bg-background py-1.5 pl-8 pr-3 text-sm" />
{mode === 'radius' && (
go({ zip: e.target.value })} placeholder="All ZIPs" className="w-28 rounded-md border border-border bg-background px-3 py-1.5 text-sm" />
)}
{mode === 'radius' ? : }
{mode === 'radius' ? : } {rows.map((r) => ( {mode === 'radius' ? : } ))} {rows.length === 0 && ( )}
Status License # Owner Business Competition Address City / State / ZIP PhoneDistanceCountyExpiration
{r.license_number ?? '—'} {r.owner ?? '—'} {r.business ?? '—'} {r.competition ?? '—'} {(r.suites_at_address ?? 0) > 1 && ( {r.suites_at_address} suites )} {r.address ?? '—'} {r.city_state_zip} {r.phone ?? '—'}{r.distance ?? '—'}{r.county ?? '—'} {r.expiration ?? '—'}{r.expired && ' (expired)'}
No prospects. Import licence data with php artisan prospects:import, then choose a location.
); } function Tile({ label, value, tone }: { label: string; value: number | string; tone?: string }) { const tones: Record = { amber: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300', blue: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300', violet: 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-500/30 dark:bg-violet-500/10 dark:text-violet-300', emerald: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300', }; return (

{typeof value === 'number' ? value.toLocaleString() : value}

{label}

); } function StatusBadge({ status, detail }: { status: string; detail: string | null }) { const tone = status === 'Your Tenant' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : status === 'In Salesforce' ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300' : status === 'Other Corp Tenant' ? 'bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300'; return ( {status} ); }