import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend, ReferenceLine } from 'recharts'; import { PortfolioTabs, LocationFilter } from '@/components/portfolio/PortfolioTabs'; import { TrendingUp } from 'lucide-react'; type Trend = { buckets: string[]; series: Record; totals: Record }; type Funnel = { key: string; label: string; percent: number; detail: string; highlight?: boolean }; type Velocity = { label: string; hours?: number | null; sample?: number | null; count?: number; warn?: boolean }; type Projection = { rows: { month: string; source_month: string; leads: number; scheduled_tours: number; completed_tours: number; leases_signed: number }[]; baseline: number; rates: { scheduled: number; completed: number; signed: number }; }; type PaidVsOrg = { paid_average: number; organic_average: number; ratio: number | null; google_average: number; facebook_average: number; paid_target: number; above_target: string[]; by_source: Record; buckets: string[]; paid: number[]; org: number[]; }; const VIEWS = [ { key: 'overview', label: 'Overview' }, { key: 'leads', label: 'Total Leads' }, { key: 'scheduled_tours', label: 'Scheduled Tours' }, { key: 'completed_tours', label: 'Completed Tours' }, { key: 'leases_signed', label: 'Leases Signed' }, { key: 'paid_vs_org', label: 'Paid vs Org' }, ]; const COLORS: Record = { leads: '#C99A2E', scheduled_tours: '#3B82F6', completed_tours: '#10B981', leases_signed: '#8B5CF6', paid: '#DC2626', org: '#10B981', }; export default function PipelineAnalytics() { const props = usePage().props as unknown as { trend: Trend; funnel: Funnel[]; velocity: Velocity[]; projection: Projection; paidVsOrg: PaidVsOrg; months: number; granularity: string; location: string | null; locationOptions: { id: number; name: string }[]; }; const { trend, funnel, velocity, projection, paidVsOrg, months, granularity, location, locationOptions } = props; const [view, setView] = useState('overview'); const go = (params: Record) => router.get('/portfolio/pipeline-analytics', { months, granularity, location: location ?? '', ...params }, { preserveState: true }); const chartData = trend.buckets.map((b, i) => ({ bucket: b, leads: trend.series.leads[i], scheduled_tours: trend.series.scheduled_tours[i], completed_tours: trend.series.completed_tours[i], leases_signed: trend.series.leases_signed[i], paid: paidVsOrg.paid[i], org: paidVsOrg.org[i], })); const lines = view === 'overview' ? ['leads', 'scheduled_tours', 'completed_tours', 'leases_signed'] : view === 'paid_vs_org' ? ['paid', 'org'] : [view]; return ( <>

Pipeline Analytics

{location ?? 'All locations'} — trailing {months} months

go({ location: v })} />

{VIEWS.map((v) => ( ))}

{[3, 6, 12, 24].map((m) => ( ))}

{['month', 'week'].map((g) => ( ))}

{view === 'paid_vs_org' && (

Paid average: {paidVsOrg.paid_average} Organic average: {paidVsOrg.organic_average} {paidVsOrg.ratio !== null && Paid : Org ratio: {paidVsOrg.ratio}} {Object.entries(paidVsOrg.by_source).slice(0, 4).map(([src, avg]) => ( {src} avg: {avg} ))}

)}

{view === 'paid_vs_org' && ( <> )} {lines.map((k) => ( (paidVsOrg.above_target.includes(props.payload.bucket) ? ★ : ) : { r: 3 }} /> ))}

Conversion Funnel

{funnel.map((f) => (

{f.percent}%

{f.label}

{f.detail}

))}

Lead Velocity

{velocity.map((v) => (

{v.count !== undefined ? v.count : (v.hours ?? '—')} {v.hours !== undefined && v.hours !== null && hrs}

{v.label}

{v.sample ?

{v.sample} leads

: null}

))}

Projected — next 12 months

Baseline {projection.baseline} leads (median of recent complete months), scaled by prior-year month-over-month change · Rates: Scheduled {projection.rates.scheduled}% · Completed {projection.rates.completed}% · Signed {projection.rates.signed}%

{projection.rows.map((r) => ( ))}

Month	Source month	Leads	Scheduled tours	Completed tours	Leases signed
{r.month}	{r.source_month}	{r.leads}	{r.scheduled_tours}	{r.completed_tours}	{r.leases_signed}

); } function Legend2({ color, label, value }: { color: string; label: string; value: number }) { return ( {label} ({value.toLocaleString()}) ); }