import { Head, useForm, usePage } from '@inertiajs/react'; import { FormEvent } from 'react'; import { Button, Field, Input, PageHeader, Select, Textarea } from '@/Components/ui'; import AppLayout from '@/Layouts/AppLayout'; import type { SharedProps } from '@/types'; interface Report { id: number; source: string; period_start: string; period_end: string; reach: number | null; impressions: number | null; likes: number | null; comments_count: number | null; shares: number | null; saves: number | null; link_clicks: number | null; leads: number | null; conversions: number | null; revenue: string | null; ad_spend: string | null; notes: string | null; metrics: Record; content: { id: number | null; title: string | null; reference_number: string | null }; platform: string | null; } export default function Performance({ reports, summary, versions, canManage }: { reports: { data: Report[] }; summary: { demo_only: boolean; report_count: number; best: { title: string; platform: string; objective: string | null; metrics: { engagement_rate: number | null } }[]; by_objective: { objective: string; pieces: number; avg_engagement_rate: number | null }[] }; versions: { id: number; label: string }[]; filters: Record; canManage: boolean; }) { const formulas = usePage().props.lookups?.formulas ?? {}; const form = useForm({ content_platform_version_id: versions[0] ? String(versions[0].id) : '', period_start: '', period_end: '', reach: '', impressions: '', views: '', video_views_3s: '', watch_time_seconds: '', likes: '', comments_count: '', shares: '', saves: '', link_clicks: '', leads: '', conversions: '', revenue: '', ad_spend: '', notes: '', }); function submit(event: FormEvent) { event.preventDefault(); form.post('/performance'); } return ( {summary.demo_only &&

The current results are demo seed data for local exploration.

}

How calculated metrics work

    {Object.entries(formulas).map(([key, text]) =>
  • {text}
    • )}

High performers by objective

{summary.by_objective.length === 0 ?

No reports in the selected period.

: (
    {summary.by_objective.map((row) =>
  • {row.objective}: {row.pieces} versions, average engagement rate {row.avg_engagement_rate ?? '—'}%
    • )}
)}
{['Content', 'Platform', 'Period', 'Source', 'Impressions', 'Reach', 'Engagement', 'CTR', 'Conv.', 'CPL', 'ROAS'].map((heading) => )} {reports.data.map((report) => ( ))}
{heading}
{report.content.reference_number} {report.content.title} {report.platform} {report.period_start} – {report.period_end} {report.source === 'demo_seed' ? 'Demo seed' : 'Manual'} {report.impressions ?? '—'} {report.reach ?? '—'} {report.metrics.engagement_rate ?? '—'} {report.metrics.click_through_rate ?? '—'} {report.metrics.conversion_rate ?? '—'} {report.metrics.cost_per_lead ?? '—'} {report.metrics.return_on_ad_spend ?? '—'}
{canManage && (

Record a manual report

form.setData('period_start', event.target.value)} required /> form.setData('period_end', event.target.value)} required /> {(['reach', 'impressions', 'views', 'video_views_3s', 'watch_time_seconds', 'likes', 'comments_count', 'shares', 'saves', 'link_clicks', 'leads', 'conversions', 'revenue', 'ad_spend'] as const).map((field) => ( form.setData(field, event.target.value)} /> ))}