@miragon/pulse-analytics-connector 0.0.0-bootstrap.0 → 0.21.0

package/src/widgets/comparison-shared.test.ts

@@ -0,0 +1,237 @@
+import { afterEach, describe, expect, it } from "vitest"
+import type { CompareKpiDelta } from "@miragon/pulse-analytics-client"
+import { setFormatLocale } from "@miragon/pulse-widget-shell/testing"
+import { translator } from "../messages/index.js"
+import type { T } from "../messages/use-t.js"
+import {
+  DURATION_MIN_CHANGE_PCT,
+  RATE_MIN_CHANGE,
+  buildComparisonMetrics,
+  deltaFacts,
+  deltaVerdict,
+  formatDelta,
+  type DeltaRule,
+} from "./comparison-shared.js"
+
+afterEach(() => setFormatLocale(undefined))
+
+const english = () => setFormatLocale({ language: "en", locale: "en-US" })
+const german = () => setFormatLocale({ language: "de", locale: "de-DE" })
+const en: T = (key, params) => translator("en", key, params)
+const de: T = (key, params) => translator("de", key, params)
+
+/** The formatters keep a number and its unit together with a non-breaking space. */
+const plain = (s: string) => s.replace(/\u00a0/g, " ")
+
+type Kpis = Parameters<typeof buildComparisonMetrics>[1]
+
+const kpis = (over: Partial<Kpis> = {}): Kpis => ({
+  instance_count: 1240,
+  incident_rate_pct: 5,
+  element_incident_count: null,
+  element_incident_rate_pct: null,
+  avg_duration_sec: 60,
+  p95_duration_sec: 187,
+  ...over,
+})
+
+const delta: CompareKpiDelta = {
+  started_per_day_delta_pct: 10,
+  incident_rate_delta_pp: -2,
+  element_incident_rate_delta_pp: null,
+  avg_duration_delta_pct: 5,
+  p95_duration_delta_pct: null,
+}
+
+const row = (t: T, metrics: ReturnType<typeof buildComparisonMetrics>, labelKey: string) =>
+  metrics.find((m) => m.label === t(labelKey))
+
+const VOLUME: DeltaRule = { kind: "volume" }
+const DURATION: DeltaRule = { kind: "quality", worseIfUp: true, minChange: DURATION_MIN_CHANGE_PCT }
+const RATE: DeltaRule = { kind: "quality", worseIfUp: true, minChange: RATE_MIN_CHANGE }
+
+describe("buildComparisonMetrics", () => {
+  it("formats the values in the view's locale and keeps the raw deltas with their rule", () => {
+    english()
+    const metrics = buildComparisonMetrics(en, kpis(), kpis({ incident_rate_pct: 3 }), delta)
+
+    expect(row(en, metrics, "aComparison.metricIncidentRate")).toEqual({
+      label: "Incidents per 100 starts",
+      before: "5.0",
+      after: "3.0",
+      delta: { value: -2, unit: "rate", rule: RATE },
+    })
+    // The count per window, the delta per day: fair across unequal windows,
+    // and a volume, so it carries no verdict rule.
+    expect(row(en, metrics, "aComparison.metricStarted")).toMatchObject({
+      label: "Starts (change per day)",
+      before: "1,240",
+      delta: { value: 10, unit: "pct", rule: VOLUME },
+    })
+    expect(row(en, metrics, "aComparison.metricAvgDuration")).toMatchObject({
+      before: "1m 0s",
+      delta: { value: 5, unit: "pct", rule: DURATION },
+    })
+    expect(row(en, metrics, "aComparison.metricP95Duration")).toMatchObject({
+      before: "3m 7s",
+      delta: { value: null },
+    })
+  })
+
+  it("speaks German: grouped digits, decimal comma, German units and labels", () => {
+    german()
+    const metrics = buildComparisonMetrics(de, kpis(), kpis({ incident_rate_pct: 3.25 }), delta)
+    expect(row(de, metrics, "aComparison.metricStarted")).toMatchObject({
+      label: "Starts (Änderung je Tag)",
+      before: "1.240",
+    })
+    expect(row(de, metrics, "aComparison.metricIncidentRate")).toMatchObject({
+      label: "Incidents je 100 Starts",
+      before: "5,0",
+      after: "3,3",
+    })
+    expect(plain(row(de, metrics, "aComparison.metricP95Duration")!.before)).toBe("3 Min. 7 s")
+  })
+
+  it("renders unmeasured rates as 'not measured' with no delta, never as 0 (#327)", () => {
+    english()
+    const unmeasured = kpis({ incident_rate_pct: null })
+    const metrics = buildComparisonMetrics(en, unmeasured, unmeasured, {
+      ...delta,
+      incident_rate_delta_pp: null,
+    })
+
+    expect(row(en, metrics, "aComparison.metricIncidentRate")).toMatchObject({
+      before: "not measured",
+      after: "not measured",
+      delta: { value: null },
+    })
+    expect(JSON.stringify(metrics)).not.toContain('"0.0"')
+  })
+
+  it("renders 'nothing ended' as an unmeasured duration, never 0 ms (N78)", () => {
+    german()
+    const noneEnded = kpis({ avg_duration_sec: null, p95_duration_sec: null })
+    const metrics = buildComparisonMetrics(de, kpis(), noneEnded, {
+      ...delta,
+      avg_duration_delta_pct: null,
+    })
+
+    for (const labelKey of ["aComparison.metricAvgDuration", "aComparison.metricP95Duration"]) {
+      expect(row(de, metrics, labelKey)).toMatchObject({
+        after: "nicht gemessen",
+        delta: { value: null },
+      })
+    }
+    expect(JSON.stringify(metrics)).not.toContain("0 ms")
+  })
+
+  it("shows the element incident rate only when the comparison was scoped to an element", () => {
+    english()
+    expect(
+      row(
+        en,
+        buildComparisonMetrics(en, kpis(), kpis(), delta),
+        "aComparison.metricElementIncidentRate",
+      ),
+    ).toBeUndefined()
+
+    const scoped = kpis({ element_incident_count: 2, element_incident_rate_pct: 5 })
+    expect(
+      row(
+        en,
+        buildComparisonMetrics(
+          en,
+          scoped,
+          kpis({ element_incident_count: 0, element_incident_rate_pct: 0 }),
+          { ...delta, element_incident_rate_delta_pp: -5 },
+        ),
+        "aComparison.metricElementIncidentRate",
+      ),
+    ).toMatchObject({ before: "5.0", after: "0.0", delta: { value: -5, unit: "rate", rule: RATE } })
+  })
+})
+
+describe("deltaVerdict — U6: volume neutral, thresholds per metric, suppressed not reliable", () => {
+  it("never judges a volume: fewer starts on a test engine are no regression", () => {
+    for (const value of [-84.7, 0, 427.4]) {
+      expect(deltaVerdict(value, VOLUME, false)).toBeUndefined()
+      expect(deltaVerdict(value, VOLUME, true)).toBeUndefined()
+    }
+  })
+
+  it("judges a duration only from 5 % on, in either direction", () => {
+    expect(deltaVerdict(4.9, DURATION, false)).toBeUndefined()
+    expect(deltaVerdict(-4.9, DURATION, false)).toBeUndefined()
+    expect(deltaVerdict(5, DURATION, false)).toBe("worse")
+    expect(deltaVerdict(-5, DURATION, false)).toBe("better")
+  })
+
+  it("judges an incident rate only from 1 incident per 100 starts on", () => {
+    expect(deltaVerdict(0.2, RATE, false)).toBeUndefined()
+    expect(deltaVerdict(-0.94, RATE, false)).toBeUndefined()
+    expect(deltaVerdict(1, RATE, false)).toBe("worse")
+    expect(deltaVerdict(-6.5, RATE, false)).toBe("better")
+  })
+
+  it("judges the delta as the cell shows it, so one number never gets two readings", () => {
+    german()
+    // 4.96 shows as "+5 %": judged like 5. 4.94 shows as "+4,9 %": neutral.
+    expect(plain(formatDelta(4.96, "pct"))).toBe("+5 %")
+    expect(deltaVerdict(4.96, DURATION, false)).toBe("worse")
+    expect(deltaVerdict(-4.96, DURATION, false)).toBe("better")
+    expect(plain(formatDelta(4.94, "pct"))).toBe("+4,9 %")
+    expect(deltaVerdict(4.94, DURATION, false)).toBeUndefined()
+    // Half away from zero, like Intl: -0.95 shows as "-1" and is judged.
+    expect(formatDelta(-0.95, "rate")).toBe("-1")
+    expect(deltaVerdict(-0.95, RATE, false)).toBe("better")
+    expect(formatDelta(0.96, "rate")).toBe("+1")
+    expect(deltaVerdict(0.96, RATE, false)).toBe("worse")
+    // A change that rounds to zero shows no sign and no verdict.
+    expect(formatDelta(-0.04, "rate")).toBe("0")
+    expect(deltaVerdict(-0.04, RATE, false)).toBeUndefined()
+  })
+
+  it("follows the metric's direction: a rule where up is good flips the verdict", () => {
+    const upIsGood: DeltaRule = { kind: "quality", worseIfUp: false, minChange: 1 }
+    expect(deltaVerdict(3, upIsGood, false)).toBe("better")
+    expect(deltaVerdict(-3, upIsGood, false)).toBe("worse")
+  })
+
+  it("calls every quality delta of a suppressed comparison not reliable, below threshold too", () => {
+    expect(deltaVerdict(-100, DURATION, true)).toBe("notReliable")
+    expect(deltaVerdict(0.1, RATE, true)).toBe("notReliable")
+  })
+
+  it("has nothing to judge for a missing delta (a zero baseline)", () => {
+    expect(deltaVerdict(null, DURATION, false)).toBeUndefined()
+    expect(deltaVerdict(null, RATE, true)).toBeUndefined()
+  })
+})
+
+describe("formatDelta", () => {
+  it("signs relative changes as percent and rate changes in the rate's own unit", () => {
+    english()
+    expect(formatDelta(12.5, "pct")).toBe("+12.5%")
+    expect(formatDelta(-84.66, "pct")).toBe("-84.7%")
+    expect(formatDelta(0.24, "rate")).toBe("+0.2")
+    expect(formatDelta(0, "rate")).toBe("0")
+    expect(formatDelta(null, "pct")).toBe("—")
+    german()
+    expect(plain(formatDelta(12.5, "pct"))).toBe("+12,5 %")
+    expect(formatDelta(-2, "rate")).toBe("-2")
+  })
+})
+
+describe("deltaFacts", () => {
+  it("names starts per day and leaves a never-measured delta null — never a 0", () => {
+    expect(deltaFacts(delta, false)).toEqual({
+      startedPerDayDeltaPct: 10,
+      incidentRateDeltaPp: -2,
+      elementIncidentRateDeltaPp: null,
+      avgDurationDeltaPct: 5,
+      p95DurationDeltaPct: null,
+      suppressed: false,
+    })
+  })
+})

package/src/widgets/comparison-shared.tsx

@@ -0,0 +1,371 @@
+import type { ReactNode } from "react"
+import {
+  Alert,
+  AlertDescription,
+  Card,
+  CardContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  cn,
+  TONE_ICON,
+} from "@miragon/mcp-toolkit-ui"
+import { CircleAlert, TrendingDown, TrendingUp } from "lucide-react"
+import {
+  Icon,
+  formatDuration,
+  formatNumber,
+  formatPercent,
+} from "@miragon/pulse-widget-shell/widgets"
+import type { CompareKpiDelta, CompareKpis } from "@miragon/pulse-analytics-client"
+import { useT, type T } from "../messages/use-t.js"
+
+/**
+ * The on-screen deltas as hand-off facts (#338) — null deltas (a zero
+ * baseline) are left out, like the em-dash on screen, never sent as 0.
+ */
+export function deltaFacts(delta: CompareKpiDelta, suppressed: boolean) {
+  return {
+    // Starts compare PER DAY, so a clamped (shorter) window compares fairly.
+    startedPerDayDeltaPct: delta.started_per_day_delta_pct,
+    incidentRateDeltaPp: delta.incident_rate_delta_pp,
+    // Non-null only when the comparison was scoped to an element.
+    elementIncidentRateDeltaPp: delta.element_incident_rate_delta_pp,
+    avgDurationDeltaPct: delta.avg_duration_delta_pct,
+    p95DurationDeltaPct: delta.p95_duration_delta_pct,
+    suppressed,
+  }
+}
+
+/**
+ * How a metric's change is judged (U6). Only a QUALITY metric earns a verdict,
+ * and only from its own threshold on, so rounding jitter stays neutral:
+ *
+ *  - `volume` (starts): never better or worse. Fewer starts on a test engine,
+ *    or traffic moving to a new version, is no regression.
+ *  - `quality`: "worse" or "better" once the change reaches `minChange`, in
+ *    the delta's own unit (percent for durations, incidents per 100 starts
+ *    for the rates).
+ */
+export type DeltaRule =
+  { kind: "volume" } | { kind: "quality"; worseIfUp: boolean; minChange: number }
+
+/** A duration changes noticeably from 5 % on (relative). */
+export const DURATION_MIN_CHANGE_PCT = 5
+/** An incident rate changes noticeably from 1 incident per 100 starts on (absolute). */
+export const RATE_MIN_CHANGE = 1
+
+export type DeltaVerdict = "worse" | "better" | "notReliable"
+
+/**
+ * A delta as its cell shows it: one decimal, rounded half away from zero
+ * like `Intl.NumberFormat`. The verdict judges this number, so the same
+ * "+5 %" on screen is never neutral in one row and "schlechter" in another.
+ */
+function shownDelta(value: number): number {
+  return Math.sign(value) * (Math.round(Math.abs(value) * 10) / 10)
+}
+
+/**
+ * The verdict on one delta, or `undefined` for none: a missing (null) delta,
+ * a volume, or a change below the metric's threshold. The threshold applies
+ * to the delta as shown ({@link shownDelta}). In a suppressed comparison (a
+ * side below `minBucketSize`) every quality delta is "not reliable": the
+ * screen must not judge what the model is told is noise.
+ */
+export function deltaVerdict(
+  value: number | null,
+  rule: DeltaRule,
+  suppressed: boolean,
+): DeltaVerdict | undefined {
+  if (value === null || rule.kind === "volume") return undefined
+  if (suppressed) return "notReliable"
+  const shown = shownDelta(value)
+  if (Math.abs(shown) < rule.minChange) return undefined
+  const bad = rule.worseIfUp ? shown > 0 : shown < 0
+  return bad ? "worse" : "better"
+}
+
+/**
+ * `pct`: a relative change in percent (starts per day, durations);
+ * `rate`: an absolute change of incidents per 100 starts, the unit of the
+ * values themselves.
+ */
+type DeltaUnit = "pct" | "rate"
+
+/**
+ * A signed delta in the view's locale ("+12,5 %", "−0,4"), or an em-dash when
+ * null. It formats {@link shownDelta}, the number the verdict judges.
+ */
+export function formatDelta(value: number | null, unit: DeltaUnit): string {
+  const shown = value === null ? null : shownDelta(value)
+  if (unit === "pct") return formatPercent(shown, { signed: true })
+  return formatNumber(shown, { signDisplay: "exceptZero", maximumFractionDigits: 1 })
+}
+
+/**
+ * The compare KPIs the table reads. Every rate and duration is nullable — a
+ * window in which nothing ended has no duration, one in which nothing started
+ * no rate — and a null renders "not measured", never "0,0" or "0 ms".
+ */
+type ComparableKpis = Pick<CompareKpis, "instance_count"> & {
+  incident_rate_pct: number | null
+  /** Non-null exactly when the comparison was scoped to an element. */
+  element_incident_count: number | null
+  element_incident_rate_pct: number | null
+  avg_duration_sec: number | null
+  p95_duration_sec: number | null
+}
+
+/** Incidents per 100 starts, one decimal: "6,6" / "6.6" (no %: a rate may pass 100). */
+const rateValue = (n: number | null) =>
+  n === null ? null : formatNumber(n, { minimumFractionDigits: 1, maximumFractionDigits: 1 })
+const durationValue = (sec: number | null) => (sec === null ? null : formatDuration(sec * 1000))
+
+/** A single metric row: label, the two compared values, and the RAW delta with its rule. */
+export type ComparisonMetric = {
+  label: string
+  before: string
+  after: string
+  delta: { value: number | null; unit: DeltaUnit; rule: DeltaRule }
+}
+
+const VOLUME: DeltaRule = { kind: "volume" }
+/** Incidents per 100 starts: up is worse, from 1 per 100 starts on (also the dashboard's trend). */
+export const RATE_UP_IS_WORSE: DeltaRule = {
+  kind: "quality",
+  worseIfUp: true,
+  minChange: RATE_MIN_CHANGE,
+}
+const DURATION_UP_IS_WORSE: DeltaRule = {
+  kind: "quality",
+  worseIfUp: true,
+  minChange: DURATION_MIN_CHANGE_PCT,
+}
+
+/**
+ * The one metric table shared by the cluster / version / engine compare
+ * widgets — same `CompareKpis`/`CompareKpiDelta` core, so the rows are
+ * defined once. Deltas stay numeric here; formatting and the verdict happen
+ * at render time in {@link ComparisonCard}.
+ */
+const COMPARE_METRICS: Array<{
+  labelKey: string
+  /** Formatted value, or null when the KPI is not measured for this comparison. */
+  value: (k: ComparableKpis) => string | null
+  delta: (d: CompareKpiDelta) => number | null
+  unit: DeltaUnit
+  rule: DeltaRule
+  /** Shown only when the comparison was scoped to an element. */
+  elementOnly?: boolean
+}> = [
+  {
+    // The count per window; the delta compares starts PER DAY, so a clamped
+    // (shorter) window still compares fairly. A volume: no verdict.
+    labelKey: "aComparison.metricStarted",
+    value: (k) => formatNumber(k.instance_count),
+    delta: (d) => d.started_per_day_delta_pct,
+    unit: "pct",
+    rule: VOLUME,
+  },
+  {
+    labelKey: "aComparison.metricIncidentRate",
+    value: (k) => rateValue(k.incident_rate_pct),
+    delta: (d) => d.incident_rate_delta_pp,
+    unit: "rate",
+    rule: RATE_UP_IS_WORSE,
+  },
+  {
+    labelKey: "aComparison.metricElementIncidentRate",
+    value: (k) => rateValue(k.element_incident_rate_pct),
+    delta: (d) => d.element_incident_rate_delta_pp,
+    unit: "rate",
+    rule: RATE_UP_IS_WORSE,
+    elementOnly: true,
+  },
+  {
+    labelKey: "aComparison.metricAvgDuration",
+    value: (k) => durationValue(k.avg_duration_sec),
+    delta: (d) => d.avg_duration_delta_pct,
+    unit: "pct",
+    rule: DURATION_UP_IS_WORSE,
+  },
+  {
+    labelKey: "aComparison.metricP95Duration",
+    value: (k) => durationValue(k.p95_duration_sec),
+    delta: (d) => d.p95_duration_delta_pct,
+    unit: "pct",
+    rule: DURATION_UP_IS_WORSE,
+  },
+]
+
+/** Resolve the shared metric rows for one baseline/other KPI pair. */
+export function buildComparisonMetrics(
+  t: T,
+  before: ComparableKpis,
+  after: ComparableKpis,
+  delta: CompareKpiDelta,
+): ComparisonMetric[] {
+  const unavailable = t("aComparison.valueUnavailable")
+  const elementScoped =
+    before.element_incident_count !== null || after.element_incident_count !== null
+  return COMPARE_METRICS.filter((m) => !m.elementOnly || elementScoped).map((m) => ({
+    label: t(m.labelKey),
+    before: m.value(before) ?? unavailable,
+    after: m.value(after) ?? unavailable,
+    delta: { value: m.delta(delta), unit: m.unit, rule: m.rule },
+  }))
+}
+
+const VERDICT_KEY: Record<DeltaVerdict, string> = {
+  worse: "aComparison.deltaWorse",
+  better: "aComparison.deltaBetter",
+  notReliable: "aComparison.deltaNotReliable",
+}
+
+/**
+ * A single delta cell. The number stays neutral (CI: a state is an icon next
+ * to black text, never a coloured digit); a verdict shows as a direction
+ * icon in its tone plus the word ("schlechter", "besser"), so it never rests
+ * on colour alone. A volume or a change below the threshold shows the signed
+ * number only; a suppressed comparison mutes it with "nicht belastbar".
+ */
+function DeltaCell({
+  delta,
+  suppressed,
+  t,
+}: {
+  delta: ComparisonMetric["delta"]
+  suppressed: boolean
+  t: T
+}) {
+  const verdict = deltaVerdict(delta.value, delta.rule, suppressed)
+  const word = verdict ? t(VERDICT_KEY[verdict]) : undefined
+  const judged = verdict === "worse" || verdict === "better"
+  return (
+    <TableCell data-verdict={verdict ?? "none"}>
+      <span
+        className={cn(
+          "inline-flex items-center gap-1.5 tabular-nums",
+          verdict === "notReliable" && "text-muted-foreground",
+        )}
+      >
+        {judged && (
+          <Icon
+            icon={(delta.value ?? 0) > 0 ? TrendingUp : TrendingDown}
+            dense
+            className={TONE_ICON[verdict === "worse" ? "danger" : "success"]}
+          />
+        )}
+        {formatDelta(delta.value, delta.unit)}
+        {word && <span className="text-muted-foreground text-small">{word}</span>}
+      </span>
+    </TableCell>
+  )
+}
+
+/** Neutral "no data" / "incomplete" treatment — destructive is reserved for errors. */
+export function ComparisonEmptyState({ children }: { children: ReactNode }) {
+  return (
+    <Alert>
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
+  )
+}
+
+/**
+ * The "too little data" chip of a suppressed comparison: a data-quality note,
+ * not an error, so it stays neutral (outline + icon) like the deltas it
+ * explains. A plain outline chip, not the toolkit `Badge`: that one forces
+ * its icons to 12 px, and the icon keeps the kit's 16 px like every other
+ * icon in the view (CI §11, `scanIconSizes`).
+ */
+export function SuppressedBadge({ children }: { children: ReactNode }) {
+  return (
+    <span
+      className="text-foreground text-small inline-flex w-fit shrink-0 items-center gap-1 rounded-sm border px-2 py-0.5 font-medium whitespace-nowrap"
+      data-suppressed=""
+    >
+      <Icon icon={CircleAlert} dense />
+      {children}
+    </span>
+  )
+}
+
+/**
+ * Shared comparison card used by the cluster / version / engine compare widgets.
+ *
+ * Callers resolve their own KPI buckets (`buildComparisonMetrics`) and pass in
+ * the metric rows plus the heading, badges, the reference frame (`meta`, a
+ * `ViewMeta`) and the two comparison column labels.
+ */
+export function ComparisonCard({
+  title,
+  badges,
+  meta,
+  beforeLabel,
+  afterLabel,
+  tableLabel,
+  metrics,
+  suppressed,
+  actions,
+  note,
+}: {
+  title: string
+  badges: ReactNode
+  /** The quiet line under the title: period, engines, as-of time. */
+  meta?: ReactNode
+  beforeLabel: ReactNode
+  afterLabel: ReactNode
+  tableLabel: string
+  metrics: ComparisonMetric[]
+  /** A side is below `minBucketSize`: every quality delta reads "not reliable". */
+  suppressed: boolean
+  /** Optional header action slot (e.g. an AI affordance), right-aligned. */
+  actions?: ReactNode
+  /** Optional caveat under the table, e.g. why a metric reads "not measured". */
+  note?: ReactNode
+}) {
+  const t = useT()
+  return (
+    <Card>
+      <CardContent>
+        <div className="flex flex-wrap items-center gap-3">
+          <h2 className="text-foreground text-section">{title}</h2>
+          {badges}
+          {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+        </div>
+        {meta && <div className="mt-1">{meta}</div>}
+
+        <Table className="mt-4" aria-label={tableLabel}>
+          <TableHeader>
+            <TableRow>
+              <TableHead scope="col">{t("aComparison.metricColumnHeader")}</TableHead>
+              <TableHead scope="col">{beforeLabel}</TableHead>
+              <TableHead scope="col">{afterLabel}</TableHead>
+              <TableHead scope="col">{t("aComparison.deltaColumnHeader")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {metrics.map((m) => (
+              <TableRow key={m.label}>
+                <TableCell>{m.label}</TableCell>
+                <TableCell className="tabular-nums">{m.before}</TableCell>
+                <TableCell className="tabular-nums">{m.after}</TableCell>
+                <DeltaCell delta={m.delta} suppressed={suppressed} t={t} />
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        {note && (
+          <Alert className="mt-4">
+            <AlertDescription>{note}</AlertDescription>
+          </Alert>
+        )}
+      </CardContent>
+    </Card>
+  )
+}