import { Radio, Search } from 'lucide-react'; import { useRef } from 'react'; import { Head, Link } from '@inertiajs/react'; import { AdminDataTable } from '@/Components/admin/AdminDataTable'; 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, formatNumber } from '@/lib/format'; import type { PaginatedResponse } from '@/types'; interface DeliveryRow { id: number; webhook_endpoint_id: number | null; endpoint_url: string | null; event_type: string; status: string; response_code: number | null; attempts: number; delivered_at: string | null; created_at: string; } interface Props { deliveries: PaginatedResponse; filters: { search?: string; status?: string; event_type?: string; sort?: string; dir?: string; }; event_types: string[]; stats: { total: number; delivered: number; failed: number; }; } const statusVariant = ( status: string, ): 'default' | 'secondary' | 'destructive' | 'outline' | 'success' => { if (status === 'delivered') return 'success'; if (status === 'failed') return 'destructive'; return 'secondary'; }; export default function AdminWebhookDeliveriesIndex({ deliveries, filters, event_types, stats, }: Props) { const searchInputRef = useRef(null); const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({ route: '/admin/webhook-deliveries', filters, }); const isNavigating = useNavigationState(); useAdminKeyboardShortcuts({ onSearch: () => searchInputRef.current?.focus(), onNextPage: deliveries.current_page < deliveries.last_page ? () => handlePage(deliveries.current_page + 1) : undefined, onPrevPage: deliveries.current_page > 1 ? () => handlePage(deliveries.current_page - 1) : undefined, }); return (

Admin Webhook Deliveries

} />

Webhook Delivery Filters

setSearch(e.target.value)} className="pl-9" aria-label="Search webhook deliveries" />

{event_types.length > 0 && ( )}

Endpoint Event Type Status Response {deliveries.data.map((delivery) => ( {delivery.webhook_endpoint_id ? (

{delivery.endpoint_url ?? `Endpoint #${delivery.webhook_endpoint_id}`} #{delivery.webhook_endpoint_id}

) : ( {delivery.endpoint_url ?? '—'} )} {delivery.event_type} {delivery.status} {delivery.response_code ?? '—'} {delivery.attempts} {formatRelativeTime(delivery.created_at)} View → ))}

); }