feat: implement real-time webhook delivery monitoring dashboard with …

[benedictworks-home]

New tab — WebhookDashboardPage A full-page view wired to the existing useWebhookDashboard hook (30s polling, graceful mock-data fallback when the API is unreachable).

Summary cards — WebhookSummaryCards Four prominent KPI cards at the top of the view:

Total Attempts
Success Rate (accent shifts green → yellow → red at <95% and <80%)
Failed Deliveries
Avg Latency with p95 sub-label
All cards render a shimmer skeleton while data is loading.

Time-series chart — WebhookDeliveryChart Pure SVG chart (no external charting library) showing successful vs failed delivery counts per time bucket. Includes filled gradient areas under each line, y-axis grid lines with labels, x-axis tick decimation to avoid crowding, and a skeleton bar state on load. Scales responsively via viewBox.

Filter bar — WebhookFiltersBar Interactive controls to narrow the dataset:

Date range toggle: 1h / 6h / 24h / 7d
Event type select (populated from live data)
Status filter: All / Success / Failed
Error category: All / 4xx / 5xx / Timeout / Network (auto-disabled when status = Success)
Manual refresh button with last-updated timestamp
"Demo" badge when mock data is active
Failed deliveries table — WebhookFailedTable Sortable table (click any column header to toggle asc/desc) covering:

Timestamp, Event type, Target URL, HTTP status code (colour-coded by class), Latency, Error category
Expandable row toggle that reveals the pretty-printed JSON error payload inline
Own pagination controls (10 / 20 / 50 per page)
Skeleton rows while loading; empty-state message when no failures match the active filters
Styles — index.css ~450 lines of BEM CSS matching the existing dark-theme design system. Fully responsive: 4-column → 2-column → 1-column summary cards, horizontal-scroll table on narrow viewports, stacking filter bar below 600 px.

Files
File Change
App.tsx
Added webhooks tab + WebhookDashboardPage import
WebhookDashboardPage.tsx
New — page-level component
WebhookSummaryCards.tsx
New — KPI cards
WebhookDeliveryChart.tsx
New — SVG time-series chart
WebhookFiltersBar.tsx
New — filter controls
WebhookFailedTable.tsx
New — sortable/paginated failed deliveries table
useWebhookDashboard.ts
New — data hook (polling, filtering, derived metrics)
webhook.ts
New — WebhookDelivery, WebhookFilters, WebhookSummaryMetrics, etc.
webhookData.ts
New — mock generation, metric computation, bucketing, filtering
webhookApi.ts
New — fetchWebhookDeliveries + mock fallback
index.css
Appended webhook dashboard styles
Testing
Zero TypeScript diagnostics across all new and modified files (tsc --noEmit)
Metric computation (computeSummaryMetrics, bucketDeliveriesByTime, filterDeliveries) is deterministic and uses integer-safe arithmetic — success rate is calculated as Math.round((success / total) * 10000) / 100 to avoid float drift
Mock data uses a seeded PRNG so renders are stable across re-renders and don't pollute snapshot tests
Polling uses a mountedRef guard to prevent state updates after unmount

Closes #251

[drips-wave]

@benedictworks-home Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits