import { Radio } from 'lucide-react'; import { useRef } from 'react'; import { Head, Link } from '@inertiajs/react'; import { AdminDataTable } from '@/Components/admin/AdminDataTable'; import { ChartErrorBoundary } from '@/Components/admin/ChartErrorBoundary'; import { PerPageSelector } from '@/Components/admin/PerPageSelector'; import { SortHeader } from '@/Components/admin/SortHeader'; import PageHeader from '@/Components/layout/PageHeader'; import { Badge } from '@/Components/ui/badge'; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/Components/ui/breadcrumb'; import { ExportButton } from '@/Components/ui/export-button'; import { Input } from '@/Components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/Components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import { useAdminFilters } from '@/hooks/useAdminFilters'; import { useAdminKeyboardShortcuts } from '@/hooks/useAdminKeyboardShortcuts'; import { useNavigationState } from '@/hooks/useNavigationState'; import AdminLayout from '@/Layouts/AdminLayout'; import { formatRelativeTime } from '@/lib/format'; import type { PaginatedResponse } from '@/types'; interface IncomingWebhookRow { id: number; provider: string; external_id: string | null; event_type: string | null; status: string; created_at: string; updated_at: string; } interface Props { webhooks: PaginatedResponse; filters: { search?: string; status?: string; provider?: string; sort?: string; dir?: string; per_page?: number; }; statuses: string[]; providers: string[]; } function statusVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' { switch (status) { case 'processed': return 'default'; case 'processing': return 'secondary'; case 'failed': return 'destructive'; default: return 'outline'; } } export default function AdminIncomingWebhooksIndex({ webhooks, filters, statuses, providers }: Props) { const searchInputRef = useRef(null); const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({ route: '/admin/incoming-webhooks', filters, }); const isNavigating = useNavigationState(); const exportParams: Record = {}; if (filters.search) exportParams.search = filters.search; if (filters.status) exportParams.status = filters.status; if (filters.provider) exportParams.provider = filters.provider; useAdminKeyboardShortcuts({ onSearch: () => searchInputRef.current?.focus(), onNextPage: webhooks.current_page < webhooks.last_page ? () => handlePage(webhooks.current_page + 1) : undefined, onPrevPage: webhooks.current_page > 1 ? () => handlePage(webhooks.current_page - 1) : undefined, }); return (

Admin Incoming Webhooks

} />

Incoming Webhook Filters setSearch(e.target.value)} className="max-w-sm" aria-label="Search incoming webhooks" /> {providers.length > 0 && ( )}

updateFilter({ per_page: perPage })} />

ID External ID Event Type {webhooks.data.map((webhook) => ( #{webhook.id} {webhook.provider} {webhook.external_id ?? '—'} {webhook.event_type ?? '—'} {webhook.status} {formatRelativeTime(webhook.created_at)} ))}

); }