import { Head, Link, usePage } from '@inertiajs/react'; import { addMonths, eachDayOfInterval, endOfWeek, format, isSameMonth, isToday, parseISO, startOfWeek } from 'date-fns'; import { useState } from 'react'; import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; import { Button, EmptyState, Modal, PageHeader, StatusBadge } from '@/Components/ui'; import AppLayout from '@/Layouts/AppLayout'; import { formatDate, visitFilters } from '@/lib/utils'; import type { FormOptions, SharedProps } from '@/types'; interface ChartRow { label: string; total: number; slug?: string; color?: string } interface Metrics { period: { from: string; to: string }; kpis: Record; on_time_rate: number | null; on_time_sample: number; average_turnaround_days: number | null; by_status: ChartRow[]; by_platform: ChartRow[]; by_format: ChartRow[]; by_campaign: ChartRow[]; workload: ChartRow[]; stale: { id: number; title: string; reference_number: string; updated_at: string | null; status: { name: string; slug: string; color: string } | null; owner: { name: string } | null; brand: { name: string } | null }[]; tasks: { id: number; title: string; reference_number: string; deadline: string | null; role: string; status: { name: string; slug: string; color: string } | null; brand: { name: string } | null }[]; performance: { demo_only: boolean; report_count: number; best: { content_id: number; title: string; platform: string; objective: string | null; metrics: { engagement_rate: number | null } }[]; by_objective: { objective: string; pieces: number; avg_engagement_rate: number | null }[]; }; has_content: boolean; } interface ScheduleEvent { id: string | number; content_id: number | null; href?: string | null; title: string; date: string; time: string; platform: string | null; brand: string | null; kind?: 'publish' | 'facebook'; } interface Schedule { month: string; label: string; events: ScheduleEvent[]; } const cards = [ ['active', 'Active ideas'], ['awaiting_development', 'New ideas'], ['ready_for_production', 'Ready for production'], ['in_production', 'In progress'], ['awaiting_review', 'For review'], ['overdue', 'Overdue'], ['approved_ready', 'Approved to publish'], ['scheduled_this_week', 'Posts this week'], ['published_in_period', 'Published in period'], ] as const; export default function Dashboard({ metrics, filters, options, schedule }: { metrics: Metrics; filters: Record; options: FormOptions; schedule: Schedule }) { const canCreate = usePage().props.auth.user?.permissions.includes('content.create'); const [scheduleOpen, setScheduleOpen] = useState(false); const scheduleFilters = { ...filters, from: metrics.period.from, to: metrics.period.to }; return (
{ event.preventDefault(); const data = new FormData(event.currentTarget); visitFilters('/dashboard', Object.fromEntries(data.entries()) as Record); }}>

Your tasks

New and recent tasks assigned to you.

View all
{metrics.tasks.length === 0 &&

No new tasks assigned to you.

} {metrics.tasks.map((task) => ( {task.title}{task.reference_number} · {task.role} · {task.brand?.name ?? 'No brand'} · Due {formatDate(task.deadline)} ))}
{!metrics.has_content ? ( Capture an idea : undefined} /> ) : ( <>
{cards.map(([key, label]) => (

{label}

0 ? 'text-rose-700' : 'text-zinc-950'}`}>{metrics.kpis[key]}

))}

On-time completion

{metrics.on_time_rate === null ? '—' : `${metrics.on_time_rate}%`}

{metrics.on_time_sample} published items in this period had a deadline. Published on or before that deadline counts as on time.

Average production turnaround

{metrics.average_turnaround_days === null ? '—' : `${metrics.average_turnaround_days}d`}

Mean days from idea capture to publication for items published in the selected period.

Waiting too long

Open work with no update for at least a week. This is a bottleneck list, not a ranking.

{metrics.stale.length === 0 &&

Nothing in the current filters has gone quiet.

} {metrics.stale.map((item) => ( {item.title}{item.reference_number} · {item.owner?.name ?? 'Unassigned'} {formatDate(item.updated_at)} ))}

Published performance

Marketing outcomes are separate from production counts. Engagement rate uses impressions as the denominator.

{metrics.performance.demo_only &&

These results are demo seed data. They were not synchronized from a social platform.

} {metrics.performance.report_count === 0 ? (

No performance reports overlap this period. Record results on a published platform version when you have them.

) : (
{metrics.performance.best.map((row) => ( ))}
ContentPlatformObjectiveEngagement rate
{row.title} {row.platform} {row.objective ?? '—'} {row.metrics.engagement_rate === null ? '—' : `${row.metrics.engagement_rate}%`}
)}
)}
); } function MonthSchedule({ schedule, filters }: { schedule: Schedule; filters: Record }) { const anchor = parseISO(schedule.month); const days = eachDayOfInterval({ start: startOfWeek(anchor, { weekStartsOn: 1 }), end: endOfWeek(new Date(anchor.getFullYear(), anchor.getMonth() + 1, 0), { weekStartsOn: 1 }), }); function openMonth(month: string) { visitFilters('/dashboard', { ...filters, month }); } return (

Publishing dates and Facebook posts for the month. Same Facebook items as Posting Schedule.

{schedule.label}
{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day) =>
{day}
)}
{days.map((day) => { const key = format(day, 'yyyy-MM-dd'); const items = schedule.events.filter((event) => event.date === key); const shown = items.slice(0, 3); return (

{format(day, 'd')}

{shown.map((event) => ( {event.time} {event.title} {event.platform ?? 'Unscheduled platform'} ))} {items.length > shown.length &&

+{items.length - shown.length} more

}
); })}
); } function Chart({ title, rows }: { title: string; rows: ChartRow[] }) { return (

{title}

{rows.length === 0 ?

No records in this slice.

: (
)}
); }