import { AlertTriangle, Radio, Zap } from 'lucide-react'; import { Suspense, lazy } from 'react'; import { Head } from '@inertiajs/react'; import { AdminStatsGrid, type StatCard } from '@/Components/admin/AdminStatsGrid'; import PageHeader from '@/Components/layout/PageHeader'; import { Badge } from '@/Components/ui/badge'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'; import { EmptyState } from '@/Components/ui/empty-state'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import AdminLayout from '@/Layouts/AdminLayout'; import { formatProviderName, formatRelativeTime } from '@/lib/format'; import type { AdminWebhooksDashboardProps } from '@/types/admin'; // Chart loading fallback const ChartLoader = () => (
Loading chart…
); // Lazy load delivery chart const LazyDeliveryChart = lazy(async () => { const { BarChart, Bar, CartesianGrid, XAxis, YAxis, ChartContainer, ChartTooltip, Legend } = await import('@/Components/ui/chart'); return { default: ({ data }: { data: { date: string; success: number; failed: number }[] }) => ( new Date(v).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) } className="text-xs" /> ), }; }); // Lazy load provider pie chart const LazyProviderChart = lazy(async () => { const { PieChart, Pie, Cell, ChartContainer, ChartTooltip, Legend, CHART_COLORS } = await import('@/Components/ui/chart'); return { default: ({ data }: { data: { provider: string; count: number }[] }) => ( `${name}: ${value}`} animationDuration={800} animationBegin={100} > {data.map((_entry, index) => ( ))} ), }; }); export default function WebhooksDashboard({ stats, delivery_chart, recent_failures, }: AdminWebhooksDashboardProps) { const incomingByProvider = Object.entries(stats.incoming_by_provider).map( ([provider, count]) => ({ provider: formatProviderName(provider), count, }), ); return (
{/* Stats */} `${n}%`, description: `${stats.failed_deliveries} failed`, valueClassName: stats.failure_rate > 10 ? 'text-destructive' : undefined, }, { title: 'Incoming Webhooks', value: stats.total_incoming, description: `${stats.pending_deliveries} pending`, }, ] satisfies StatCard[] } />
{/* Delivery Volume Chart */} Delivery Volume (14d) Success vs failed deliveries by day {delivery_chart.length === 0 ? ( ) : ( }> )} {/* Incoming by Provider */} Incoming by Provider Webhook sources {incomingByProvider.length === 0 ? ( ) : ( }> )}
{/* Recent Failures */} Recent Failures Last 10 failed webhook deliveries {recent_failures.length === 0 ? ( ) : (
Endpoint Event Response Attempts Time {recent_failures.map((failure) => ( {failure.endpoint_url} {failure.event_type} {failure.response_code ?? 'timeout'} {failure.attempts} {formatRelativeTime(failure.created_at)} ))}
)}
); }