import { Head, Link, router } from '@inertiajs/react'; import { AdminLayout } from '@/layouts/admin-layout'; type WebhookDelivery = { 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; payload: Record; response_body: string | null; error_message: string | null; }; type WebhookDeliveryShowProps = { delivery: WebhookDelivery; }; export default function WebhookDeliveryShow({ delivery, }: WebhookDeliveryShowProps) { const retry = () => { router.patch(`/admin/webhook-deliveries/${delivery.id}/retry`); }; return (

Back to logs

Webhook Delivery #{delivery.id}

{delivery.event} to{' '} {delivery.endpoint?.name || 'deleted endpoint'}.

); } function InfoCard({ label, value, detail, }: { label: string; value: string; detail?: string; }) { return (

{label}

{value}

{detail ? (

{detail}

) : null}

); } function TextBlock({ label, value }: { label: string; value: string }) { return (

{label}

        </div>
    );
}

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 (
        <span
            className={`rounded-lg border px-3 py-2 text-sm font-semibold ${classes}`}
        >
            {status}
        </span>
    );
}