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 WebhookEndpointRow = { id: number; name: string; url: string; is_active: boolean; subscribed_events: string[]; deliveries_count: number; max_attempts: number; timeout_seconds: number; last_success_at: string | null; last_failure_at: string | null; updated_at: string | null; }; type WebhookEndpointIndexProps = { endpoints: PaginatedData; filters: { search: string; }; eventLabels: Record; }; export default function WebhookEndpointIndex({ endpoints, filters, eventLabels, }: WebhookEndpointIndexProps) { const [search, setSearch] = useState(filters.search || ''); const submitSearch = (event: React.FormEvent) => { event.preventDefault(); router.get('/admin/webhook-endpoints', search ? { search } : {}, { preserveState: true, replace: true, preserveScroll: true, }); }; const deleteEndpoint = (id: number) => { if ( !window.confirm( 'Delete this webhook endpoint and its delivery logs?', ) ) { return; } router.delete(`/admin/webhook-endpoints/${id}`); }; return (

Webhook Endpoints

Subscribe external systems to signed platform events.

Add Endpoint
setSearch(event.target.value)} placeholder="Search by name or URL" className="w-full rounded-lg border border-border bg-control px-3 py-2 text-sm text-main outline-none focus:border-primary" />
{endpoints.data.map((endpoint) => (

{endpoint.name}

{endpoint.url}

Active: {endpoint.is_active ? 'Yes' : 'No'}

Deliveries: {endpoint.deliveries_count}

Attempts: {endpoint.max_attempts}

Timeout: {endpoint.timeout_seconds}s

))}
{endpoints.data.map((endpoint) => ( ))}
Endpoint Events Status Delivery Actions

{endpoint.name}

{endpoint.url}

{endpoint.is_active ? 'Active' : 'Inactive'}

Updated {endpoint.updated_at || '-'}

{endpoint.deliveries_count} logs

Last success:{' '} {endpoint.last_success_at || '-'}

Last failure:{' '} {endpoint.last_failure_at || '-'}

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

); } function EventList({ events, labels, }: { events: string[]; labels: Record; }) { return (
{events.map((event) => ( {labels[event] || event} ))}
); } function Actions({ id, onDelete, }: { id: number; onDelete: (id: number) => void; }) { return (
Edit
); }