import { Head, Link, router } from '@inertiajs/react'; import { useState } from 'react'; import { index as enrollmentRequestsIndex } from '@/actions/App/Http/Controllers/Admin/EnrollmentRequestController'; import HeadingSmall from '@/components/heading-small'; import { useUserTimezone } from '@/hooks/use-user-timezone'; import AppLayout from '@/layouts/app-layout'; import { formatDateTime } from '@/lib/format-date'; import { index as webFormSessionsIndex, show as webFormSessionsShow, } from '@/routes/admin/web-form-sessions'; type EnrollmentRequest = { id: number; status: string | null; }; type WebFormProgressEvent = { id: number; event_type: string; field_name: string | null; sequence: number | null; meta: Record | null; occurred_at: string | null; created_at: string; }; type FieldValue = { field_name: string; value: unknown; event_type: string; sequence: number | null; occurred_at: string | null; }; type WebFormSession = { id: number; session_id: string; web_form_identifier: string | null; web_form_type: string | null; product_id: number | null; enrollment_id: number | null; ip_address: string | null; utm: Record | null; user_agent: string | null; started_at: string | null; last_event_at: string | null; submitted_at: string | null; enrollment_request_id: number | null; enrollment_request: EnrollmentRequest | null; }; 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; sort_by: string; sort_direction: string; }; type Props = { session: WebFormSession; fieldValues: FieldValue[]; events: PaginatedEvents; filters: Filters; }; function StateBadge({ submittedAt }: { submittedAt: string | null }) { return submittedAt ? ( Submitted ) : ( Abandoned ); } 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'; function formatFieldValue(value: unknown): string { if (value === null || value === undefined || value === '') { return '—'; } if (typeof value === 'string') { return value; } return JSON.stringify(value); } export default function WebFormSessionShow({ session, fieldValues, events, filters, }: Props) { const timezone = useUserTimezone(); const [search, setSearch] = useState(filters.search); const breadcrumbs = [ { title: 'Web Form Sessions', href: webFormSessionsIndex.url() }, { title: session.session_id, href: webFormSessionsShow.url(session.id), }, ]; function applyFilters(overrides: Partial = {}) { const merged = { ...filters, ...overrides }; router.get( webFormSessionsShow.url(session.id), Object.fromEntries( Object.entries(merged).filter(([, v]) => v !== ''), ), { preserveState: true, replace: true }, ); } const hasActiveFilters = filters.search || filters.event_type || filters.field_name; return (
{( [ ['Product', session.product_id ?? '—'], ['IP Address', session.ip_address ?? '—'], ['User Agent', session.user_agent ?? '—'], [ 'UTM Parameters', session.utm && Object.keys(session.utm).length > 0 ? (
{Object.entries(session.utm).map( ([key, value]) => (
{key}: {value}
), )}
) : ( — ), ], [ 'Started', formatDateTime(session.started_at, timezone, { includeSeconds: true, }), ], [ 'Last Event', formatDateTime( session.last_event_at, timezone, { includeSeconds: true }, ), ], [ 'Submitted', formatDateTime( session.submitted_at, timezone, { includeSeconds: true }, ), ], [ 'Enrollment Request', session.enrollment_request_id ? ( #{session.enrollment_request_id} ·{' '} {session.enrollment_request?.status ?? '—'}{' '} → ) : ( None ), ], ] as [string, React.ReactNode][] ).map(([label, value]) => (
{label}
{value}
))}

Consolidated Field Values

{fieldValues.map((fieldValue) => ( ))}
Field Latest Value Recorded Via Occurred
{fieldValue.field_name} {formatFieldValue( fieldValue.value, )} {fieldValue.event_type} {formatDateTime( fieldValue.occurred_at, timezone, { includeSeconds: true }, )}
{fieldValues.length === 0 && (
No field values recorded for this session yet.
)}

Progress Events

setSearch(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { applyFilters({ search }); } }} placeholder="Search event type or field…" className={selectClasses} />
{hasActiveFilters && ( )}
{events.data.map((event) => ( ))}
Seq Type Field Meta Occurred
{event.sequence ?? '—'} {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 recorded for this session.
)}
{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) => ( ))}
)}
); }