import { Head, Link, router } from '@inertiajs/react'; import { useState } from 'react'; import { index, index as webFormProgressEventsIndex, } from '@/actions/App/Http/Controllers/Admin/WebFormProgressEventController'; import HeadingSmall from '@/components/heading-small'; import { SortableHeader } from '@/components/sortable-header'; import { useUserTimezone } from '@/hooks/use-user-timezone'; import AppLayout from '@/layouts/app-layout'; import { formatDateTime } from '@/lib/format-date'; import { show as webFormSessionsShow } from '@/routes/admin/web-form-sessions'; type WebFormSessionRef = { id: number; session_id: string; }; type WebFormProgressEvent = { id: number; session_id: string; session: WebFormSessionRef | null; event_type: string; field_name: string | null; sequence: number | null; meta: Record | null; occurred_at: string | null; created_at: string; }; type PaginatedEvents = { data: WebFormProgressEvent[]; current_page: number; last_page: number; per_page: number; total: number; links: { url: string | null; label: string; active: boolean }[]; }; type Filters = { search: string; event_type: string; field_name: string; session_id: string; sort_by: string; sort_direction: string; }; type Props = { events: PaginatedEvents; filters: Filters; }; const breadcrumbs = [{ title: 'Web Form Progress Events', href: index.url() }]; const selectClasses = 'rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100'; export default function WebFormProgressEvents({ events, filters }: Props) { const timezone = useUserTimezone(); const [search, setSearch] = useState(filters.search); const sortColumn = filters.sort_by || 'created_at'; const sortDirection = (filters.sort_direction || 'desc') as 'asc' | 'desc'; function toggleSort(column: string) { if (column === sortColumn) { applyFilters({ sort_by: column, sort_direction: sortDirection === 'asc' ? 'desc' : 'asc', }); } else { applyFilters({ sort_by: column, sort_direction: 'asc' }); } } function applyFilters(overrides: Partial = {}) { const merged = { ...filters, ...overrides }; router.get( webFormProgressEventsIndex.url(), Object.fromEntries( Object.entries(merged).filter(([, v]) => v !== ''), ), { preserveState: true, replace: true }, ); } const hasActiveFilters = filters.search || filters.event_type || filters.field_name || filters.session_id; return (

Web Form Progress Events

setSearch(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { applyFilters({ search }); } }} placeholder="Search session, type, field, or meta…" className={selectClasses} />
{hasActiveFilters && ( )}
{filters.session_id && (
Showing events for session{' '} {filters.session_id}
)}
{events.data.map((event) => ( ))}
Session Field Meta
{event.session ? ( {event.session.session_id} ) : ( {event.session_id} )} {event.event_type} {event.field_name ?? '—'} {event.meta ? ( 
                                                    {JSON.stringify(
                                                        event.meta,
                                                        null,
                                                        2,
                                                    )}
) : ( — )} 		{formatDateTime( event.occurred_at ?? event.created_at, timezone, { includeSeconds: true }, )}
{events.data.length === 0 && (
No progress events yet.
)}
{events.last_page > 1 && (
Showing{' '} {(events.current_page - 1) * events.per_page + 1}– {Math.min( events.current_page * events.per_page, events.total, )}{' '} of {events.total}
{events.links.map((link) => ( ))}
)}
); }