import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { PortfolioTabs, LocationFilter } from '@/components/portfolio/PortfolioTabs'; import { Users2, Download } from 'lucide-react'; type Row = { location: string; total_leads: number; paid: number; org: number; scheduled_tours: number; booked_online: number; completed_tours: number; leases_signed: number; }; type Totals = Row extends never ? never : Omit & { conversion_rate: number }; type Source = { source: string; count: number; paid: boolean }; type Stage = { stage: string; count: number; percent: number }; export default function Pipeline() { const props = usePage().props as unknown as { rows: Row[]; totals: Totals; sources: Source[]; funnel: Stage[]; period: { start: string; end: string }; location: string | null; locationOptions: { id: number; name: string }[]; }; const { rows, totals, sources, funnel, period, location, locationOptions } = props; const [start, setStart] = useState(period.start); const [end, setEnd] = useState(period.end); const apply = (extra: Record = {}) => router.get('/portfolio/pipeline', { start, end, location: location ?? '', ...extra }, { preserveState: true }); const quick = (days: number) => { const e = new Date(); const s = new Date(); s.setDate(s.getDate() - days); const f = (d: Date) => d.toISOString().slice(0, 10); setStart(f(s)); setEnd(f(e)); router.get('/portfolio/pipeline', { start: f(s), end: f(e), location: location ?? '' }, { preserveState: true }); }; const exportCsv = () => { const head = ['Location','Total Leads','Paid','Org','Scheduled Tours','Booked Online','Completed Tours','Leases Signed']; const body = rows.map(r => [r.location, r.total_leads, r.paid, r.org, r.scheduled_tours, r.booked_online, r.completed_tours, r.leases_signed]); const csv = [head, ...body].map(r => r.map(c => `"${String(c)}"`).join(',')).join('\n'); const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv' })); const a = document.createElement('a'); a.href = url; a.download = `pipeline-${period.start}_${period.end}.csv`; a.click(); URL.revokeObjectURL(url); }; return ( <>

Pipeline

Salesforce leads through tours to signed leases.

From setStart(e.target.value)} className="rounded-md border border-border bg-background px-2.5 py-1.5 text-sm" />

To setEnd(e.target.value)} className="rounded-md border border-border bg-background px-2.5 py-1.5 text-sm" />

{[7, 30, 90].map((d) => ( ))}

apply({ location: v })} />

{/* Funnel */}

{funnel.map((s) => (

{s.stage}

{s.count}

{s.percent}% of leads

))}

{sources.length > 0 && (

Lead sources: {sources.map((s) => ( {s.count} {s.source} ))}

)}

{rows.map((r) => ( ))} {rows.length > 0 && ( )} {rows.length === 0 && ( )}

Location	Total leads	Paid	Org	Scheduled tours	Booked online	Completed tours	Leases signed
{r.location}	{r.total_leads}	{r.paid}	{r.org}	{r.scheduled_tours}	{r.booked_online}	{r.completed_tours}	{r.leases_signed}
Total	{totals.total_leads}	{totals.paid}	{totals.org}	{totals.scheduled_tours}	{totals.booked_online}	{totals.completed_tours}	{totals.leases_signed}
No pipeline data. Sync Salesforce leads from Data Manager first.

); }