govoplan-notifications/webui/src/features/notifications/NotificationSummaryWidget.tsx

import { MetricGrid } from "@govoplan/core-webui";
import { Link } from "react-router";
import {
  DismissibleAlert,
  LoadingFrame,
  MetricCard,
  adminErrorMessage,
  i18nMessage,
  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="i18n:govoplan-notifications.loading_summary">
      {error && (
        <DismissibleAlert tone="warning" resetKey={error}>
          {error}
        </DismissibleAlert>
      )}
      <MetricGrid columns={3} spacing="none">
        <MetricCard
          label="i18n:govoplan-notifications.unread"
          value={summary?.unread ?? 0}
          tone={summary?.unread ? "info" : "good"}
          detail={i18nMessage("i18n:govoplan-notifications.value_total", { value0: summary?.total ?? 0 })}
        />
        {showDeliveryState && (
          <MetricCard
            label="i18n:govoplan-notifications.pending"
            value={summary?.pending ?? 0}
            tone={summary?.pending ? "warning" : "good"}
            detail="i18n:govoplan-notifications.awaiting_delivery"
          />
        )}
        {showDeliveryState && (
          <MetricCard
            label="i18n:govoplan-notifications.failed"
            value={summary?.failed ?? 0}
            tone={summary?.failed ? "danger" : "good"}
            detail="i18n:govoplan-notifications.delivery_failures"
          />
        )}
      </MetricGrid>
      <div className="notifications-widget-actions">
        {showCenterLink && (
          <Link className="btn btn-secondary" to="/notifications">
            i18n:govoplan-notifications.open_center
          </Link>
        )}
      </div>
    </LoadingFrame>
  );
}