import HeadingSmall from '@/components/heading-small'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import AppLayout from '@/layouts/app-layout'; import { formatDate } from '@/lib/format-date'; import admin from '@/routes/admin'; import { type BreadcrumbItem } from '@/types'; import { Head, router } from '@inertiajs/react'; import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts'; type Totals = { total: number; today: number; last_7_days: number; avg_duration_ms: number | null; }; type DailyPoint = { date: string; count: number }; type ZipcodeCount = { zipcode: string; count: number }; type CommodityCount = { commodity: string; count: number }; type AccountTypeCount = { account_type: string; count: number }; type ProductCount = { product_name: string; count: number }; type FormTypeCount = { web_form_type: string; count: number }; type Props = { totals: Totals; dailySeries: DailyPoint[]; topZipcodes: ZipcodeCount[]; commodityBreakdown: CommodityCount[]; accountTypeBreakdown: AccountTypeCount[]; days: number; webFormTotals: Totals; webFormDailySeries: DailyPoint[]; topEnrollmentProducts: ProductCount[]; webFormTypeBreakdown: FormTypeCount[]; }; const breadcrumbs: BreadcrumbItem[] = [{ title: 'Analytics', href: admin.analytics.index().url }]; const DAY_RANGES = [7, 30, 90] as const; const CHART_TICK_STYLE = { fill: 'var(--muted-foreground)', fontSize: 12 }; export default function Analytics({ totals, dailySeries, topZipcodes, commodityBreakdown, accountTypeBreakdown, days, webFormTotals, webFormDailySeries, topEnrollmentProducts, webFormTypeBreakdown, }: Props) { const chartSeries = dailySeries.map((point) => ({ ...point, label: formatDate(point.date).replace(/, \d{4}$/, ''), })); const webFormChartSeries = webFormDailySeries.map((point) => ({ ...point, label: formatDate(point.date).replace(/, \d{4}$/, ''), })); return (
Search hits over time
{DAY_RANGES.map((range) => ( ))}
[String(value), 'Searches']} />
Zip codes searched {topZipcodes.length > 0 ? (
[String(value), 'Searches']} />
) : (

No search data yet.

)}
Enrollment starts over time
[String(value), 'Enrollment starts']} />
Top products started {topEnrollmentProducts.length > 0 ? (
[String(value), 'Enrollment starts']} />
) : (

No enrollment data yet.

)}
); } function StatTile({ label, value }: { label: string; value: string }) { return ( {label}

{value}

 ); } const BREAKDOWN_COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)']; function BreakdownCard({ title, data, labelKey, }: { title: string; data: Array & { count: number }>; labelKey: K; }) { return ( {title} {data.length > 0 ? (
[String(value), 'Searches']} /> {data.map((entry, index) => ( ))}
) : (

No data yet.

)} ); }