feat: system backups and alerts pages

.github/agents/frontend-accessibility.agent.md

@@ -1,12 +1,14 @@
 ---
 description: "Use when working on Vue 3 frontend code with a focus on accessibility, WCAG compliance, ARIA attributes, keyboard navigation, screen reader support, semantic HTML, color contrast, UX patterns, user flows, interaction design, form usability, empty states, loading states, error states, Tailwind CSS, design systems, @nethesis/vue-components, Pinia, Pinia Colada, defineQuery, useMutation, valibot schemas, or auditing UI components for a11y or UX issues. Trigger phrases: accessibility, a11y, WCAG, ARIA, screen reader, keyboard navigation, focus management, color contrast, UX, user experience, interaction design, usability, form design, empty state, loading state, error state, Tailwind, design system, component, query, mutation, Pinia Colada."
 name: "Frontend & Accessibility Specialist"
-tools: [read, edit, search, todo, execute, web]
+tools: [read, edit, search, todo, execute, web, mcp_figma_get_design_context, mcp_figma_get_screenshot, mcp_figma_search_design_system, mcp_figma_get_metadata, mcp_figma_get_code_connect_suggestions, mcp_figma_add_code_connect_map]
 commands:
   - name: a11y-fix
     description: Audit and fix WCAG accessibility issues in a Vue component or view
   - name: design-check
     description: Verify a Vue component or view aligns with the design system conventions
+  - name: design-review
+    description: Compare a Vue component against its Figma design and audit for design system alignment and accessibility compliance
 ---
 
 You are a senior frontend engineer and UX/design-system specialist with deep expertise in Vue 3, TypeScript, Tailwind CSS v4, Pinia Colada, and the `@nethesis/vue-components` library. You also hold strong accessibility knowledge (WCAG 2.1/2.2 AA, ARIA patterns, keyboard navigation). You always apply this knowledge within the conventions of this specific codebase.
@@ -254,3 +256,26 @@ Checklist:
 - [ ] All user-visible strings use `$t()` / `t()` — no hardcoded text
 - [ ] New keys added only to `src/i18n/en/translation.json`, `snake_case`, correct domain namespace
 - [ ] License header present; `<script setup lang="ts">`; `@/` path alias used throughout
+
+## /design-review
+
+Design-to-code workflow integrating Figma design context with WCAG and design system validation.
+
+1. **Retrieve design context** from Figma via the provided URL or node ID. Capture a screenshot and extract the reference code.
+2. **Audit against WCAG 2.1/2.2 AA** — review the design for accessible patterns (colour contrast, semantic structure, interaction states, focus indicators).
+3. **Verify design system alignment** — check that the design uses `@nethesis/vue-components` conventions, Tailwind colour scale, and spacing grid.
+4. **Search design system** to find existing patterns or components that match the design intent.
+5. **Generate or suggest Code Connect mappings** if the design contains reusable components that should link to Vue code.
+6. **Implement or refine** the Vue code to match the design layout and WCAG compliance.
+
+This command bridges design and code to ensure pixel-perfect, accessible implementations.
+
+## Figma MCP Integration
+
+When a Figma URL (figma.com/design/...) is provided:
+- **`mcp_figma_get_design_context`** — retrieve reference code and screenshot for a specific design node. If Code Connect mappings are configured, returns actual Vue component code; otherwise returns React + Tailwind reference (which must be adapted to Vue conventions). Always inspect the returned code to understand the design intent and layout constraints.
+- **`mcp_figma_get_screenshot`** — capture high-resolution screenshots of design nodes for visual comparison during implementation.
+- **`mcp_figma_search_design_system`** — search the Figma design libraries for existing components, tokens, and patterns to reuse in Vue code.
+- **`mcp_figma_get_metadata`** — inspect the design hierarchy and layer structure to understand component boundaries and nesting.
+- **`mcp_figma_get_code_connect_suggestions`** — retrieve AI suggestions for linking Figma components to Vue code components.
+- **`mcp_figma_add_code_connect_map`** — document Code Connect mappings so that designers can see the corresponding Vue component implementations in Figma and future design contexts return Vue code directly.

frontend/src/components/alerts/ActiveAlertsPanel.vue

@@ -0,0 +1,49 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import CounterCard from '@/components/CounterCard.vue'
+import AlertsTable from '@/components/alerts/AlertsTable.vue'
+import { useAlertsTotals } from '@/queries/alerts/alertsTotals'
+
+const { t } = useI18n()
+
+const { state: totalsState } = useAlertsTotals()
+
+const totals = computed(() => totalsState.value?.data)
+const isLoading = computed(() => totalsState.value?.status === 'pending')
+
+const totalAlerts = computed(() => totals.value?.active ?? 0)
+const criticalCount = computed(() => totals.value?.critical ?? 0)
+const warningCount = computed(() => totals.value?.warning ?? 0)
+const mutedCount = computed(() => totals.value?.muted ?? 0)
+</script>
+
+<template>
+  <div>
+    <!-- Counter cards -->
+    <div class="mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+      <CounterCard :title="t('alerts.total_alerts')" :counter="totalAlerts" :loading="isLoading" />
+      <CounterCard
+        :title="t('alerts.high_severity')"
+        :counter="criticalCount"
+        :loading="isLoading"
+        color-classes="text-red-600 dark:text-red-400"
+      />
+      <CounterCard
+        :title="t('alerts.medium_severity')"
+        :counter="warningCount"
+        :loading="isLoading"
+        color-classes="text-orange-600 dark:text-orange-400"
+      />
+      <CounterCard :title="t('alerts.muted')" :counter="mutedCount" :loading="isLoading" />
+    </div>
+
+    <!-- Alerts table -->
+    <AlertsTable />
+  </div>
+</template>

frontend/src/components/alerts/AlertNotificationsPanel.vue

@@ -0,0 +1,12 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <!-- Notifications panel — coming soon -->
+  </div>
+</template>