From ba74bfd929cece728d90094ab7c269963e32d692 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 8 Apr 2026 11:22:56 +0100
Subject: [PATCH] feat(admin): add AdminAlertsPanel component

---
 app/components/admin/AdminAlertsPanel.vue | 173 ++++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 app/components/admin/AdminAlertsPanel.vue

diff --git a/app/components/admin/AdminAlertsPanel.vue b/app/components/admin/AdminAlertsPanel.vue
new file mode 100644
index 0000000..3bb4ff1
--- /dev/null
+++ b/app/components/admin/AdminAlertsPanel.vue
@@ -0,0 +1,173 @@
+<!-- app/components/admin/AdminAlertsPanel.vue -->
+<template>
+  <div v-if="visibleAlerts.length" class="alerts-panel">
+    <div class="section-label">Needs Attention</div>
+    <div
+      v-for="alert in visibleAlerts"
+      :key="alert.type"
+      class="alert-row"
+      :class="`severity-${alert.severity}`"
+    >
+      <div class="alert-head">
+        <div>
+          <span class="alert-title">{{ alert.title }}</span>
+          <span class="alert-count">{{ alert.count }}</span>
+        </div>
+        <button
+          type="button"
+          class="dismiss-btn"
+          :disabled="dismissing[alert.type]"
+          @click="dismissAlert(alert)"
+        >
+          Dismiss
+        </button>
+      </div>
+      <ul v-if="alert.items.length" class="alert-items">
+        <li v-for="(item, idx) in displayItems(alert)" :key="item.id || idx">
+          <NuxtLink v-if="item.href" :to="item.href">{{ item.label }}</NuxtLink>
+          <span v-else>{{ item.label }}</span>
+          <span v-if="item.sublabel" class="alert-item-sub">— {{ item.sublabel }}</span>
+        </li>
+        <li v-if="alert.items.length > maxItems" class="alert-more">
+          and {{ alert.items.length - maxItems }} more
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const maxItems = 5
+const dismissing = reactive({})
+
+const { data, refresh } = await useFetch('/api/admin/alerts', { default: () => ({ alerts: [] }) })
+
+const visibleAlerts = computed(() => data.value?.alerts || [])
+
+function displayItems(alert) {
+  return alert.items.slice(0, maxItems)
+}
+
+async function dismissAlert(alert) {
+  dismissing[alert.type] = true
+  try {
+    await $fetch('/api/admin/alerts/dismiss', {
+      method: 'POST',
+      body: { alertType: alert.type, signature: alert.signature }
+    })
+    // Optimistic local removal
+    data.value = {
+      alerts: visibleAlerts.value.filter((a) => a.type !== alert.type)
+    }
+  } catch (err) {
+    console.error('Failed to dismiss alert', err)
+    // On error, refetch to get authoritative state
+    await refresh()
+  } finally {
+    dismissing[alert.type] = false
+  }
+}
+</script>
+
+<style scoped>
+.alerts-panel {
+  border-bottom: 1px dashed var(--border);
+  padding: 24px 28px;
+}
+
+.section-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-faint);
+  margin-bottom: 12px;
+}
+
+.alert-row {
+  border: 1px dashed var(--border);
+  border-left-width: 3px;
+  border-left-style: solid;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+}
+
+.alert-row.severity-critical {
+  border-left-color: var(--ember);
+}
+
+.alert-row.severity-attention {
+  border-left-color: var(--candle);
+}
+
+.alert-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.alert-title {
+  font-size: 13px;
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
+.alert-count {
+  display: inline-block;
+  margin-left: 8px;
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+.dismiss-btn {
+  background: none;
+  border: 1px dashed var(--border);
+  padding: 4px 10px;
+  font-size: 11px;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.dismiss-btn:hover:not(:disabled) {
+  border-color: var(--candle);
+  color: var(--candle);
+}
+
+.dismiss-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.alert-items {
+  list-style: none;
+  padding: 0;
+  margin: 6px 0 0;
+}
+
+.alert-items li {
+  font-size: 12px;
+  color: var(--text);
+  padding: 3px 0;
+}
+
+.alert-items a {
+  color: var(--text);
+  text-decoration: none;
+}
+
+.alert-items a:hover {
+  color: var(--candle);
+  text-decoration: underline;
+}
+
+.alert-item-sub {
+  color: var(--text-faint);
+  margin-left: 4px;
+}
+
+.alert-more {
+  color: var(--text-faint);
+  font-style: italic;
+}
+</style>