import { Head, Link, router } from '@inertiajs/react'; import { useState } from 'react'; import { index as enrollmentRequestsIndex } from '@/actions/App/Http/Controllers/Admin/EnrollmentRequestController'; import { index, index as webFormSessionsIndex, show as webFormSessionsShow, } from '@/actions/App/Http/Controllers/Admin/WebFormSessionController'; 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'; type WebFormSession = { id: number; session_id: string; web_form_identifier: string | null; web_form_type: string | null; product_id: number | null; ip_address: string | null; started_at: string | null; last_event_at: string | null; submitted_at: string | null; enrollment_request_id: number | null; events_count: number; created_at: string; }; type PaginatedWebFormSessions = { data: WebFormSession[]; current_page: number; last_page: number; per_page: number; total: number; next_page_url: string | null; prev_page_url: string | null; links: { url: string | null; label: string; active: boolean }[]; }; type Filters = { search: string; web_form_type: string; product_id: string; state: string; sort_by: string; sort_direction: string; }; type Props = { sessions: PaginatedWebFormSessions; filters: Filters; }; function StateBadge({ submittedAt }: { submittedAt: string | null }) { return submittedAt ? ( Submitted ) : ( Abandoned ); } const breadcrumbs = [{ title: 'Web Form Sessions', 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 WebFormSessions({ sessions, 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( webFormSessionsIndex.url(), Object.fromEntries( Object.entries(merged).filter(([, v]) => v !== ''), ), { preserveState: true, replace: true }, ); } const hasActiveFilters = filters.search || filters.web_form_type || filters.product_id || filters.state; return (

Web Form Sessions

setSearch(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { applyFilters({ search }); } }} placeholder="Search session, IP, or form…" className={selectClasses} />
{hasActiveFilters && ( )}
{sessions.data.map((session) => ( ))}
Session Product IP Address Events State Enrollment
{session.session_id} {session.web_form_type ?? '—'} {session.product_id ?? '—'} {session.ip_address ?? '—'} {session.events_count} {session.enrollment_request_id ? ( #{session.enrollment_request_id} ) : ( — )} {formatDateTime( session.started_at ?? session.created_at, timezone, { includeSeconds: true }, )}
{sessions.data.length === 0 && (
No web form sessions yet.
)}
{sessions.last_page > 1 && (
Showing{' '} {(sessions.current_page - 1) * sessions.per_page + 1} – {Math.min( sessions.current_page * sessions.per_page, sessions.total, )}{' '} of {sessions.total}
{sessions.links.map((link) => ( ))}
)}
); }