import { Radio, Search } from 'lucide-react'; import { useRef } from 'react'; import { Head, Link, router } 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 { Button } from '@/Components/ui/button'; import { ConfirmDialog } from '@/Components/ui/confirm-dialog'; 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'; interface WebhookEndpointRow { id: number; url: string; active: boolean; user_name: string | null; user_email: string | null; deleted_at: string | null; created_at: string; } interface PaginatedEndpoints { data: WebhookEndpointRow[]; current_page: number; last_page: number; from: number | null; to: number | null; total: number; } interface Props { endpoints: PaginatedEndpoints; filters: { trashed: string; search?: string; active?: string; sort?: string; dir?: string }; } export default function WebhookEndpointsIndex({ endpoints, filters }: Props) { const isNavigating = useNavigationState(); const searchRef = useRef(null); const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({ route: route('admin.webhook-endpoints.index'), filters, }); useAdminKeyboardShortcuts({ onSearch: () => searchRef.current?.focus(), onNextPage: endpoints.current_page < endpoints.last_page ? () => handlePage(endpoints.current_page + 1) : undefined, onPrevPage: endpoints.current_page > 1 ? () => handlePage(endpoints.current_page - 1) : undefined, }); return (

Admin Webhook Endpoints

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

User Status {filters.trashed !== 'without' && Deleted} Actions {endpoints.data.map((endpoint) => ( {endpoint.url} {endpoint.deleted_at && ( Deleted )} {endpoint.user_name ?? '—'} {endpoint.user_email && (

{endpoint.user_email}

)} {endpoint.active ? 'Active' : 'Inactive'} {formatRelativeTime(endpoint.created_at)} {filters.trashed !== 'without' && ( {endpoint.deleted_at ? formatRelativeTime(endpoint.deleted_at) : '—'} )}

{!endpoint.deleted_at && ( {endpoint.active ? 'Deactivate' : 'Activate'} } title={endpoint.active ? 'Deactivate webhook?' : 'Activate webhook?'} description={ endpoint.active ? `This will stop deliveries to "${endpoint.url}".` : `This will resume deliveries to "${endpoint.url}".` } confirmLabel={endpoint.active ? 'Deactivate' : 'Activate'} onConfirm={() => router.patch(route('admin.webhook-endpoints.toggle-active', endpoint.id))} /> )} {!endpoint.deleted_at && ( Delete } title="Delete webhook endpoint?" description={`"${endpoint.url}" will be deleted and can be restored later.`} confirmLabel="Delete" variant="destructive" onConfirm={() => router.delete(route('admin.webhook-endpoints.destroy', endpoint.id))} /> )} {endpoint.deleted_at && ( Restore } title="Restore webhook endpoint?" description={`"${endpoint.url}" will be restored.`} confirmLabel="Restore" onConfirm={() => router.post(route('admin.webhook-endpoints.restore', endpoint.id))} /> )}

))}

); }