diff --git a/ordinis-admin-ui/src/components/webhooks/WebhookStatsCards.tsx b/ordinis-admin-ui/src/components/webhooks/WebhookStatsCards.tsx
new file mode 100644
index 0000000..2f5ed4d
--- /dev/null
+++ b/ordinis-admin-ui/src/components/webhooks/WebhookStatsCards.tsx
@@ -0,0 +1,153 @@
+import { useTranslation } from 'react-i18next'
+import {
+ CheckCircleIcon,
+ ArrowClockwiseIcon,
+ ClockIcon,
+ XCircleIcon,
+} from '@phosphor-icons/react'
+import { useWebhookDeliveries } from '@/api/queries'
+import { LoadingBlock } from '@/ui'
+
+/**
+ * Stat cards для webhook subscription detail. 4 status counters
+ * (pending / retrying / delivered / dlq) + computed success rate.
+ *
+ * Implementation: 4 parallel React Query subscriptions с
+ * {@code size=1, page=0} per status — backend возвращает
+ * {@code totalElements} count'ом без heavy payload. Cheap, дешевле
+ * чем добавлять отдельный /stats endpoint backend.
+ *
+ *
Refetch piggybacks на cache invalidation которая уже работает
+ * (после retry / status filter changes). Поэтому без явного refetchInterval.
+ *
+ *
Phase B (followup): real-time bar chart per hour за последние 24h —
+ * требует /stats?bucketBy=hour endpoint в backend.
+ */
+export function WebhookStatsCards({ subscriptionId }: { subscriptionId: string }) {
+ const { t } = useTranslation()
+ // 4 parallel queries — все по одному status'у с size=1 чтобы получить
+ // только totalElements. React Query dedupe гарантирует что параллельные
+ // деs c одинаковым key не дублируют network call.
+ const pending = useWebhookDeliveries(subscriptionId, 0, 1, 'pending')
+ const retrying = useWebhookDeliveries(subscriptionId, 0, 1, 'retrying')
+ const delivered = useWebhookDeliveries(subscriptionId, 0, 1, 'delivered')
+ const dlq = useWebhookDeliveries(subscriptionId, 0, 1, 'dlq')
+
+ const loading =
+ pending.isLoading || retrying.isLoading || delivered.isLoading || dlq.isLoading
+ if (loading) {
+ return
+ }
+
+ const pCount = pending.data?.totalElements ?? 0
+ const rCount = retrying.data?.totalElements ?? 0
+ const dCount = delivered.data?.totalElements ?? 0
+ const dlqCount = dlq.data?.totalElements ?? 0
+
+ // Success rate = delivered / (terminal) — DLQ это failed terminal. Pending/retrying
+ // ещё в полёте, не учитываем (rate был бы заниженный).
+ const terminal = dCount + dlqCount
+ const successRate = terminal > 0 ? Math.round((dCount / terminal) * 100) : null
+
+ return (
+
+ }
+ label={t('webhooks.stats.pending', { defaultValue: 'В очереди' })}
+ value={pCount}
+ tone="neutral"
+ />
+ }
+ label={t('webhooks.stats.retrying', { defaultValue: 'Retry' })}
+ value={rCount}
+ tone="warn"
+ />
+ }
+ label={t('webhooks.stats.delivered', { defaultValue: 'Доставлено' })}
+ value={dCount}
+ tone="success"
+ />
+ }
+ label={t('webhooks.stats.dlq', { defaultValue: 'DLQ' })}
+ value={dlqCount}
+ tone="danger"
+ />
+ {/* 5-я карточка только когда хоть один terminal был — иначе rate
+ undefined и показ его как «—» бесполезный noise. */}
+ {successRate !== null && (
+
+ )}
+
+ )
+}
+
+function StatCard({
+ icon,
+ label,
+ value,
+ tone,
+}: {
+ icon: React.ReactNode
+ label: React.ReactNode
+ value: number
+ tone: 'success' | 'warn' | 'danger' | 'neutral'
+}) {
+ // Tone → background + text colour для icon + value highlight.
+ // bg-* / text-* tokens из tailwind theme.
+ const styles: Record = {
+ success: { iconClass: 'text-green', valueClass: 'text-green' },
+ warn: { iconClass: 'text-warn', valueClass: 'text-warn' },
+ danger: { iconClass: 'text-pink', valueClass: 'text-pink' },
+ neutral: { iconClass: 'text-mute', valueClass: 'text-ink' },
+ }
+ const { iconClass, valueClass } = styles[tone]
+ return (
+
+
+
+ {value.toLocaleString()}
+
+
+
+
+ {t('webhooks.stats.successRate', { defaultValue: 'Success rate' })}
+
+
+
+ {rate}%
+
+ {t('webhooks.stats.successRateOf', {
+ count: total,
+ defaultValue: `из ${total} завершённых`,
+ })}
+
+
+