perf: add indexed notification summaries and widget

2026-07-29 14:16:29 +02:00
parent 992d2ca533
commit e32ba3663b
9 changed files with 312 additions and 36 deletions
@@ -0,0 +1,73 @@
+import { Link } from "react-router-dom";
+import {
+  DismissibleAlert,
+  LoadingFrame,
+  MetricCard,
+  adminErrorMessage,
+  type ApiSettings,
+  type DashboardWidgetConfiguration,
+  useSharedNotificationSummary
+} from "@govoplan/core-webui";
+
+export default function NotificationSummaryWidget({
+  settings,
+  refreshKey,
+  configuration,
+  showCenterLink
+}: {
+  settings: ApiSettings;
+  refreshKey: number;
+  configuration: DashboardWidgetConfiguration;
+  showCenterLink: boolean;
+}) {
+  const showDeliveryState = configuration.showDeliveryState !== false;
+  const state = useSharedNotificationSummary(settings, {
+    enabled: true,
+    scopeKey: "current-session",
+    intervalMs: 30_000,
+    refreshKey
+  });
+  const summary = state.summary;
+  const error = state.error ? adminErrorMessage(state.error) : "";
+
+  return (
+    <LoadingFrame loading={state.loading} label="Loading notification summary">
+      {error && (
+        <DismissibleAlert tone="warning" resetKey={error}>
+          {error}
+        </DismissibleAlert>
+      )}
+      <div className="metric-grid inside dashboard-widget-metrics">
+        <MetricCard
+          label="Unread"
+          value={summary?.unread ?? 0}
+          tone={summary?.unread ? "info" : "good"}
+          detail={`${summary?.total ?? 0} total`}
+        />
+        {showDeliveryState && (
+          <MetricCard
+            label="Pending"
+            value={summary?.pending ?? 0}
+            tone={summary?.pending ? "warning" : "good"}
+            detail="Awaiting delivery"
+          />
+        )}
+        {showDeliveryState && (
+          <MetricCard
+            label="Failed"
+            value={summary?.failed ?? 0}
+            tone={summary?.failed ? "danger" : "good"}
+            detail="Delivery failures"
+          />
+        )}
+      </div>
+      {showCenterLink && (
+        <div className="notifications-widget-actions">
+          <Link className="btn btn-secondary" to="/notifications">
+            Open notification center
+          </Link>
+        </div>
+      )}
+    </LoadingFrame>
+  );
+}