@quanticjs/notification-ui 9.0.1 → 9.0.2

package/dist/index.js

@@ -3531,11 +3531,8 @@ function OperationsOverview({ basePath = "/api", className }) {
   const windowHours = data.windowHours;
   const channels = data.channels ?? [];
   const dlqPending = data.dlqPending;
-  const cards = [
-    { label: `Sends (${windowHours}h)`, value: data.totalSends },
-    { label: `Delivered (${windowHours}h)`, value: data.totalDelivered },
-    { label: `Failed (${windowHours}h)`, value: data.totalFailed }
-  ];
+  const deliveryRate = ratePct(data.totalDelivered, data.totalSends);
+  const failureRate = ratePct(data.totalFailed, data.totalSends);
   return /* @__PURE__ */ jsxs27("section", { "aria-label": "Operations overview", className: cn27("flex flex-col gap-5", className), children: [
     /* @__PURE__ */ jsxs27("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
       /* @__PURE__ */ jsxs27("div", { children: [
@@ -3551,7 +3548,29 @@ function OperationsOverview({ basePath = "/api", className }) {
         formatDateTime7(data.generatedAt)
       ] })
     ] }),
-    /* @__PURE__ */ jsx30("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: cards.map((card) => /* @__PURE__ */ jsx30(StatCard, { label: card.label, value: card.value }, card.label)) }),
+    /* @__PURE__ */ jsxs27("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [
+      /* @__PURE__ */ jsx30(StatCard, { label: `Sent (${windowHours}h)`, value: data.totalSends, icon: /* @__PURE__ */ jsx30(SendIcon, {}) }),
+      /* @__PURE__ */ jsx30(
+        StatCard,
+        {
+          label: "Delivery rate",
+          value: deliveryRate,
+          icon: /* @__PURE__ */ jsx30(CheckIcon, {}),
+          delta: `${data.totalDelivered} delivered`,
+          trend: "up"
+        }
+      ),
+      /* @__PURE__ */ jsx30(
+        StatCard,
+        {
+          label: "Failure rate",
+          value: failureRate,
+          icon: /* @__PURE__ */ jsx30(AlertIcon4, {}),
+          delta: `${data.totalFailed} failed`,
+          trend: data.totalFailed > 0 ? "down" : "flat"
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx30(Card5, { children: /* @__PURE__ */ jsxs27(CardContent, { className: "flex flex-wrap items-center gap-x-8 gap-y-3 p-5", children: [
       /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx30("span", { className: "text-sm text-muted-foreground", children: "DLQ pending" }),
@@ -3567,31 +3586,104 @@ function OperationsOverview({ basePath = "/api", className }) {
       ] })
     ] }) }),
     /* @__PURE__ */ jsxs27(Card5, { children: [
-      /* @__PURE__ */ jsx30(CardHeader, { children: /* @__PURE__ */ jsx30(CardTitle, { children: "Channel breakdown" }) }),
-      /* @__PURE__ */ jsx30(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs27("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsxs27("tr", { className: "border-b border-border text-start text-xs uppercase tracking-wide text-muted-foreground", children: [
-          /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-5 py-2.5 font-medium", children: "Channel" }),
-          /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2.5 text-end font-medium", children: "Sends" }),
-          /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2.5 text-end font-medium", children: "Delivered" }),
-          /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2.5 text-end font-medium", children: "Failed" })
-        ] }) }),
-        /* @__PURE__ */ jsx30("tbody", { children: channels.length === 0 ? /* @__PURE__ */ jsx30("tr", { children: /* @__PURE__ */ jsx30("td", { colSpan: 4, className: "px-5 py-8 text-center text-muted-foreground", children: "No channel activity" }) }) : channels.map((row) => /* @__PURE__ */ jsxs27(
-          "tr",
-          {
-            className: "border-b border-border last:border-0 hover:bg-muted/40",
-            children: [
-              /* @__PURE__ */ jsx30("td", { className: "px-5 py-3 font-medium text-foreground", children: row.channel }),
-              /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-end tabular-nums text-muted-foreground", children: row.sends }),
-              /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-end tabular-nums text-muted-foreground", children: row.delivered }),
-              /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-end tabular-nums text-muted-foreground", children: row.failed })
-            ]
-          },
-          row.channel
-        )) })
-      ] }) })
+      /* @__PURE__ */ jsxs27(CardHeader, { children: [
+        /* @__PURE__ */ jsx30(CardTitle, { children: "Channel health" }),
+        /* @__PURE__ */ jsx30("p", { className: "text-sm text-muted-foreground", children: "Delivery success by channel" })
+      ] }),
+      /* @__PURE__ */ jsx30(CardContent, { className: "p-0", children: channels.length === 0 ? /* @__PURE__ */ jsx30("p", { className: "px-5 py-8 text-center text-sm text-muted-foreground", children: "No channel activity" }) : /* @__PURE__ */ jsx30("ul", { className: "divide-y divide-border", children: channels.map((row) => {
+        const success = ratePct(row.delivered, row.sends);
+        return /* @__PURE__ */ jsxs27("li", { className: "flex items-center gap-3 px-5 py-3.5", children: [
+          /* @__PURE__ */ jsx30(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "grid size-9 shrink-0 place-items-center rounded-md bg-primary/10 text-primary [&_svg]:size-4",
+              children: /* @__PURE__ */ jsx30(ChannelIcon, { channel: row.channel })
+            }
+          ),
+          /* @__PURE__ */ jsxs27("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs27("span", { className: "flex items-center gap-2 text-sm font-medium capitalize text-foreground", children: [
+                row.channel,
+                /* @__PURE__ */ jsxs27(StatusBadge6, { variant: row.failed > 0 ? "warning" : "success", appearance: "dot", children: [
+                  success,
+                  " success"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs27("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: [
+                row.sends,
+                " sent"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs27("div", { className: "mt-2 flex h-1.5 overflow-hidden rounded-full bg-muted", children: [
+              /* @__PURE__ */ jsx30("span", { className: "bg-success", style: { width: `${barPct(row.delivered, row.sends)}%` } }),
+              /* @__PURE__ */ jsx30("span", { className: "bg-destructive", style: { width: `${barPct(row.failed, row.sends)}%` } })
+            ] }),
+            /* @__PURE__ */ jsxs27("div", { className: "mt-1.5 text-xs tabular-nums text-muted-foreground", children: [
+              row.delivered,
+              " delivered \xB7 ",
+              row.failed,
+              " failed"
+            ] })
+          ] })
+        ] }, row.channel);
+      }) }) })
     ] })
   ] });
 }
+function ratePct(n, total) {
+  if (total <= 0) return "\u2014";
+  return `${(n / total * 100).toFixed(2)}%`;
+}
+function barPct(n, total) {
+  if (total <= 0) return 0;
+  return Math.min(100, n / total * 100);
+}
+function SendIcon() {
+  return /* @__PURE__ */ jsxs27("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx30("path", { d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" }),
+    /* @__PURE__ */ jsx30("path", { d: "m21.854 2.147-10.94 10.939" })
+  ] });
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsxs27("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx30("path", { d: "M21.801 10A10 10 0 1 1 17 3.335" }),
+    /* @__PURE__ */ jsx30("path", { d: "m9 11 3 3L22 4" })
+  ] });
+}
+function AlertIcon4() {
+  return /* @__PURE__ */ jsxs27("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx30("path", { d: "m15 9-6 6" }),
+    /* @__PURE__ */ jsx30("path", { d: "m9 9 6 6" })
+  ] });
+}
+function ChannelIcon({ channel }) {
+  switch (channel) {
+    case "email":
+      return /* @__PURE__ */ jsxs27("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx30("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }),
+        /* @__PURE__ */ jsx30("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+      ] });
+    case "sms":
+      return /* @__PURE__ */ jsx30("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx30("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) });
+    case "push":
+    case "inapp":
+    case "in-app":
+      return /* @__PURE__ */ jsxs27("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx30("path", { d: "M10.268 21a2 2 0 0 0 3.464 0" }),
+        /* @__PURE__ */ jsx30("path", { d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" })
+      ] });
+    case "webhook":
+      return /* @__PURE__ */ jsxs27("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx30("path", { d: "M10 6.5a3.5 3.5 0 1 1 6 2.45" }),
+        /* @__PURE__ */ jsx30("path", { d: "M6 10.5a3.5 3.5 0 1 0 5 3.15" }),
+        /* @__PURE__ */ jsx30("path", { d: "M14 17.5a3.5 3.5 0 1 0 1-6.85" })
+      ] });
+    default:
+      return /* @__PURE__ */ jsx30("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "12", r: "4" }) });
+  }
+}
 
 // src/delivery-log-explorer.tsx
 import { useState as useState15 } from "react";