import { DndContext, DragEndEvent, PointerSensor, useDraggable, useDroppable, useSensor, useSensors } from '@dnd-kit/core'; import { Head, Link, router } from '@inertiajs/react'; import { addDays, eachDayOfInterval, format, isSameMonth, parseISO, startOfWeek } from 'date-fns'; import { PageHeader, StatusBadge } from '@/Components/ui'; import AppLayout from '@/Layouts/AppLayout'; interface CalendarEvent { id: string; version_id: number | null; content_id: number | null; href?: string | null; title: string; reference_number: string; date: string; time: string | null; kind: 'publish' | 'deadline' | 'facebook'; format_label: string; platform: { name: string } | null; status: { name: string; slug: string; color: string } | null; brand: string | null; owner: { name: string } | null; conflict: boolean; deadline: string | null; } export default function CalendarPage({ events, deadlines, view, focus, date, canReschedule }: { events: CalendarEvent[]; deadlines: CalendarEvent[]; view: 'month' | 'week' | 'day' | 'list'; focus: 'publish' | 'deadline'; date: string; range: { start: string; end: string }; filters: Record; canReschedule: boolean; }) { const anchor = parseISO(date); const visible = focus === 'deadline' ? deadlines : events; const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } })); function shift(days: number) { const next = addDays(anchor, view === 'month' ? days * 30 : view === 'week' ? days * 7 : days); router.get('/calendar', { date: format(next, 'yyyy-MM-dd'), view, focus }, { preserveState: true, replace: true }); } function onDragEnd(event: DragEndEvent) { if (!canReschedule || focus !== 'publish') return; const versionId = Number(String(event.active.id).replace('version-', '')); const day = String(event.over?.id ?? ''); const item = events.find((entry) => entry.version_id === versionId); if (!day || !item || item.date === day || item.kind !== 'publish') return; router.post(`/versions/${versionId}/reschedule`, { scheduled_at: `${day}T${item.time ?? '09:00'}` }, { preserveScroll: true }); } const days = view === 'day' ? [anchor] : view === 'week' ? eachDayOfInterval({ start: startOfWeek(anchor, { weekStartsOn: 1 }), end: addDays(startOfWeek(anchor, { weekStartsOn: 1 }), 6) }) : eachDayOfInterval({ start: startOfWeek(new Date(anchor.getFullYear(), anchor.getMonth(), 1), { weekStartsOn: 1 }), end: addDays(startOfWeek(new Date(anchor.getFullYear(), anchor.getMonth() + 1, 0), { weekStartsOn: 1 }), 6), }); return (
{format(anchor, view === 'day' ? 'MMMM d, yyyy' : 'MMMM yyyy')} {(['month', 'week', 'day', 'list'] as const).map((option) => ( ))}
{events.some((event) => event.conflict) && focus === 'publish' &&

Some days have three or more posts for the same brand and platform.

} {view === 'list' ? (
{visible.length === 0 &&

Nothing is dated in this range.

} {visible.map((event) => )}
) : ( {view !== 'day' &&
{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day) =>
{day}
)}
}
{days.map((day) => event.date === format(day, 'yyyy-MM-dd'))} draggable={canReschedule && focus === 'publish'} />)}
)} ); } function DayCell({ day, inMonth, events, draggable }: { day: Date; inMonth: boolean; events: CalendarEvent[]; draggable: boolean }) { const { setNodeRef, isOver } = useDroppable({ id: format(day, 'yyyy-MM-dd') }); return (

{format(day, 'd')}

{events.map((event) => )}
); } function CalendarChip({ event, draggable }: { event: CalendarEvent; draggable: boolean }) { const { attributes, listeners, setNodeRef, transform } = useDraggable({ id: `version-${event.version_id}`, disabled: !draggable }); const style = transform ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)` } : undefined; return (
); } function EventRow({ event }: { event: CalendarEvent }) { const href = event.href || (event.content_id ? `/content/${event.content_id}` : '/posting'); const tone = event.conflict ? 'bg-amber-100' : event.kind === 'deadline' ? 'bg-violet-50' : event.kind === 'facebook' ? 'bg-sky-50' : 'bg-brand-50'; return ( {event.title} {event.kind === 'deadline' ? 'Production deadline' : event.kind === 'facebook' ? `Facebook · ${event.time ?? ''}${event.status?.slug === 'published' ? ' · Posted' : ' · Scheduled'}` : `${event.platform?.name} · ${event.format_label}`} ); }