import { Head, Link, router } from '@inertiajs/react'; import { useState } from 'react'; import { ConfigurableTable } from '@/components/ui/configurable-table'; import { PaginationLinks } from '@/components/ui/pagination-links'; import { AdminLayout } from '@/layouts/admin-layout'; import type { PaginatedData } from '@/types'; type Option = { value: string; label: string; }; type WebhookDeliveryRow = { id: number; event: string; status: string; endpoint: { name: string; url: string; } | null; attempt_count: number; max_attempts: number; next_attempt_at: string | null; delivered_at: string | null; failed_at: string | null; response_status: number | null; created_at: string | null; }; type WebhookDeliveryIndexProps = { deliveries: PaginatedData; filters: { event: string; status: string; }; eventOptions: Option[]; statusOptions: Option[]; }; export default function WebhookDeliveryIndex({ deliveries, filters, eventOptions, statusOptions, }: WebhookDeliveryIndexProps) { const [event, setEvent] = useState(filters.event || ''); const [status, setStatus] = useState(filters.status || ''); const submitFilters = (formEvent: React.FormEvent) => { formEvent.preventDefault(); router.get( '/admin/webhook-deliveries', buildParams({ event, status }), { preserveState: true, preserveScroll: true, replace: true, }, ); }; return (

Webhook Logs

Inspect delivery attempts, responses, and retries.

Endpoints
{deliveries.data.map((delivery) => (

{delivery.event}

{delivery.endpoint?.name || 'Deleted endpoint'}

Status: {delivery.status}

Attempts: {delivery.attempt_count}/ {delivery.max_attempts}

HTTP: {delivery.response_status || '-'}

Created: {delivery.created_at || '-'}

View
))}
{deliveries.data.map((delivery) => ( ))}
Delivery Endpoint Status Attempts Actions

{delivery.event}

Created {delivery.created_at || '-'}

{delivery.endpoint?.name || 'Deleted endpoint'}

{delivery.endpoint?.url || '-'}

HTTP{' '} {delivery.response_status || '-'}

{delivery.attempt_count}/ {delivery.max_attempts}

Next:{' '} {delivery.next_attempt_at || '-'}

View

Showing {deliveries.from || 0} to {deliveries.to || 0}{' '} of {deliveries.total} deliveries

); } function StatusBadge({ status }: { status: string }) { const classes = status === 'delivered' ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-200' : status === 'failed' ? 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-400/40 dark:bg-rose-400/10 dark:text-rose-200' : 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-400/40 dark:bg-amber-400/10 dark:text-amber-200'; return ( {status} ); } function buildParams(filters: { event: string; status: string }) { const params: Record = {}; if (filters.event !== '') { params.event = filters.event; } if (filters.status !== '') { params.status = filters.status; } return params; }