feat: implementar sidebar colapsavel profissional

Substitui navegacao por header/menu mobile por sidebar lateral colapsavel
com toggle, persistencia localStorage e responsividade automatica.

- Novo componente Layout.tsx com sidebar, tooltips e overlay mobile
- Estado colapsado persistido em localStorage (desktop)
- Colapsada por defeito em mobile com drawer animado
- Animacoes suaves via framer-motion (spring)
- Removida navegacao duplicada de App.tsx, Monitor.tsx e Financial.tsx
- Rotas envolvidas pelo Layout via React Router Outlet

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

api/middleware/validation.ts

@@ -63,20 +63,22 @@ export const wpMonitorSchema = {
     site_url: z.string().url('Invalid site_url format'),
     site_name: z.string().optional(),
     health: z.object({
-      status: z.enum(['good', 'recommended', 'critical']).optional()
-    }).optional(),
+      status: z.string().optional()
+    }).passthrough().optional(),
     updates: z.object({
       counts: z.object({
         total: z.number().int().nonnegative()
-      }).optional(),
-      core: z.array(z.any()).optional()
-    }).optional(),
+      }).passthrough().optional(),
+      core: z.any().optional(),
+      plugins: z.any().optional(),
+      themes: z.any().optional()
+    }).passthrough().optional(),
     system: z.object({
       debug_mode: z.boolean().optional()
-    }).optional(),
+    }).passthrough().optional(),
     database: z.object({
       size_mb: z.number().nonnegative().optional()
-    }).optional()
+    }).passthrough().optional()
   }).passthrough() // Permite campos adicionais
 }
 

api/server.ts

@@ -17,6 +17,7 @@ import wpMonitorRouter from './routes/wp-monitor.js'
 import serverMetricsRouter from './routes/server-metrics.js'
 import financialRouter from './routes/financial.js'
 import { collectAllServerMetrics } from './services/server-metrics.js'
+import { collectMonitoringData } from './services/monitoring-collector.js'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -42,6 +43,7 @@ app.use('/api', limiter)
 // SECURITY: CORS Restrito (Vulnerabilidade 2.2)
 // ============================================================================
 const allowedOrigins = [
+  'https://dash.descomplicar.pt',
   'https://dashboard.descomplicar.pt',
   'https://desk.descomplicar.pt'
 ]
@@ -53,7 +55,7 @@ if (!isProduction) {
   allowedOrigins.push(process.env.FRONTEND_URL || 'http://localhost:5173')
 }
 
-app.use(cors({
+const corsMiddleware = cors({
   origin: (origin, callback) => {
     // Permitir requests sem origin (curl, Postman, etc) em dev
     if (!origin && !isProduction) {
@@ -68,7 +70,10 @@ app.use(cors({
     }
   },
   credentials: true
-}))
+})
+
+// CORS apenas nas rotas API (nao bloquear assets estaticos)
+app.use('/api', corsMiddleware)
 
 app.use(express.json())
 
@@ -170,22 +175,28 @@ app.listen(PORT, () => {
     console.log('='.repeat(50))
   }
 
-  // Auto-collect server metrics every 5 minutes
+  // Auto-collect metrics every 5 minutes
   if (isProduction) {
     const INTERVAL = 5 * 60 * 1000
-    console.log('[SCHEDULER] Server metrics collection every 5min')
+    console.log('[SCHEDULER] Server metrics + monitoring collection every 5min')
 
     // Initial collection after 30s (let server stabilize)
     setTimeout(() => {
       collectAllServerMetrics().catch(err =>
-        console.error('[SCHEDULER] Initial collection failed:', err.message)
+        console.error('[SCHEDULER] Initial server metrics failed:', err.message)
+      )
+      collectMonitoringData().catch(err =>
+        console.error('[SCHEDULER] Initial monitoring collection failed:', err.message)
       )
     }, 30000)
 
     // Recurring collection
     setInterval(() => {
       collectAllServerMetrics().catch(err =>
-        console.error('[SCHEDULER] Collection failed:', err.message)
+        console.error('[SCHEDULER] Server metrics failed:', err.message)
+      )
+      collectMonitoringData().catch(err =>
+        console.error('[SCHEDULER] Monitoring collection failed:', err.message)
       )
     }, INTERVAL)
   }

api/services/monitoring-collector.ts

@@ -0,0 +1,283 @@
+/**
+ * Monitoring Data Collector
+ * HTTP health checks for services + EasyPanel API metrics + staleness detection
+ * Runs every 5 minutes via scheduler in server.ts
+ * @author Descomplicar® | @link descomplicar.pt | @copyright 2026
+ */
+import db from '../db.js'
+
+interface ServiceCheck {
+  name: string
+  url: string
+  okStatuses?: number[] // Additional HTTP codes to treat as 'up' (e.g. 403 for gateway)
+}
+
+interface CheckResult {
+  status: 'up' | 'down' | 'warning'
+  http_code: number
+  response_time: number
+  error?: string
+}
+
+/**
+ * EasyPanel API config.
+ * Accessible from Docker Swarm via service name 'easypanel'.
+ * Token read from EASYPANEL_API_TOKEN env var.
+ */
+const EASYPANEL_API_URL = process.env.EASYPANEL_API_URL || 'http://easypanel:3000/api/trpc'
+const EASYPANEL_API_TOKEN = process.env.EASYPANEL_API_TOKEN || ''
+
+/**
+ * Services to monitor via HTTP health check.
+ * Each entry maps to a record in tbl_eal_monitoring (category='service').
+ */
+const SERVICES: ServiceCheck[] = [
+  { name: 'Desk CRM', url: 'https://desk.descomplicar.pt' },
+  { name: 'NextCloud', url: 'https://cloud.descomplicar.pt' },
+  { name: 'Gitea', url: 'https://git.descomplicar.pt' },
+  { name: 'Wiki.js', url: 'https://wiki.descomplicar.pt' },
+  { name: 'Syncthing', url: 'https://sync.descomplicar.pt' },
+  { name: 'Authentik', url: 'https://auth.descomplicar.pt' },
+  { name: 'Metabase', url: 'https://bi.descomplicar.pt' },
+  { name: 'N8N', url: 'https://automator.descomplicar.pt' },
+  { name: 'Outline', url: 'https://hub.descomplicar.pt' },
+  { name: 'WhatSMS', url: 'https://app.whatsms.pt' },
+  { name: 'MCP Gateway', url: 'http://gateway.descomplicar.pt', okStatuses: [403] },
+]
+
+/**
+ * Check a single URL and return health status.
+ * Uses redirect: 'manual' so 302 (auth redirects) count as 'up'.
+ */
+async function checkUrl(url: string, timeoutMs = 10000): Promise<CheckResult> {
+  const start = Date.now()
+  try {
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), timeoutMs)
+
+    const response = await fetch(url, {
+      method: 'GET',
+      redirect: 'manual',
+      signal: controller.signal,
+    })
+
+    clearTimeout(timeout)
+    const response_time = Date.now() - start
+    const http_code = response.status
+
+    // 2xx or 3xx = service is responding
+    if (http_code >= 200 && http_code < 400) {
+      return { status: 'up', http_code, response_time }
+    }
+    // 4xx = service responds but with client error
+    if (http_code >= 400 && http_code < 500) {
+      return { status: 'warning', http_code, response_time }
+    }
+    // 5xx = server error
+    return { status: 'down', http_code, response_time }
+  } catch (error: unknown) {
+    const response_time = Date.now() - start
+    const message = error instanceof Error ? error.message : 'Unknown error'
+    if (message.includes('abort')) {
+      return { status: 'down', http_code: 0, response_time, error: 'Timeout' }
+    }
+    return { status: 'down', http_code: 0, response_time, error: message }
+  }
+}
+
+/**
+ * Update or insert a monitoring record.
+ * Tries UPDATE first; if no row matches, does INSERT.
+ */
+async function upsertMonitoring(category: string, name: string, status: string, details: object): Promise<void> {
+  const detailsJson = JSON.stringify(details)
+
+  const [result] = await db.query(
+    `UPDATE tbl_eal_monitoring SET status = ?, details = ?, last_check = NOW() WHERE category = ? AND name = ?`,
+    [status, detailsJson, category, name]
+  )
+
+  if ((result as any).affectedRows === 0) {
+    await db.query(
+      `INSERT INTO tbl_eal_monitoring (category, name, status, details, last_check) VALUES (?, ?, ?, ?, NOW())`,
+      [category, name, status, detailsJson]
+    )
+  }
+}
+
+/**
+ * Check all services via HTTP and update DB.
+ * Runs all checks in parallel for speed.
+ */
+export async function checkAllServices(): Promise<{ checked: number; up: number; down: number; warning: number }> {
+  let up = 0, down = 0, warning = 0
+
+  const results = await Promise.allSettled(
+    SERVICES.map(async (service) => {
+      const result = await checkUrl(service.url)
+
+      // Override status if HTTP code is in the service's okStatuses list
+      if (result.status === 'warning' && service.okStatuses?.includes(result.http_code)) {
+        result.status = 'up'
+      }
+
+      await upsertMonitoring('service', service.name, result.status, {
+        url: service.url,
+        http_code: result.http_code,
+        response_time: `${result.response_time}ms`,
+        ...(result.error ? { error: result.error } : {})
+      })
+
+      return { name: service.name, ...result }
+    })
+  )
+
+  for (const r of results) {
+    if (r.status === 'fulfilled') {
+      if (r.value.status === 'up') up++
+      else if (r.value.status === 'warning') warning++
+      else down++
+    } else {
+      down++
+    }
+  }
+
+  return { checked: SERVICES.length, up, down, warning }
+}
+
+/**
+ * Mark WP sites as warning if they haven't reported in >24h.
+ * The WP plugin (descomplicar-monitor) POSTs data periodically.
+ * If no data arrives, something is wrong.
+ */
+export async function checkStaleness(): Promise<number> {
+  const [result] = await db.query(
+    `UPDATE tbl_eal_monitoring
+     SET status = 'warning',
+         details = JSON_SET(COALESCE(details, '{}'), '$.stale', true, '$.stale_reason', 'No data received in 24h')
+     WHERE category = 'wordpress'
+       AND status IN ('ok', 'up')
+       AND last_check < DATE_SUB(NOW(), INTERVAL 24 HOUR)`
+  )
+  return (result as any).affectedRows || 0
+}
+
+/**
+ * Call EasyPanel tRPC API endpoint.
+ * Returns parsed JSON or null on failure.
+ */
+async function callEasyPanelAPI(endpoint: string): Promise<any | null> {
+  if (!EASYPANEL_API_TOKEN) return null
+
+  try {
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 10000)
+
+    const response = await fetch(`${EASYPANEL_API_URL}/${endpoint}`, {
+      headers: { 'Authorization': `Bearer ${EASYPANEL_API_TOKEN}` },
+      signal: controller.signal,
+    })
+
+    clearTimeout(timeout)
+    if (!response.ok) return null
+
+    const data: any = await response.json()
+    return data?.result?.data?.json ?? null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Collect EasyPanel server metrics (CPU, RAM, disk) via API.
+ * Replaces SSH-based collection for the Easy server.
+ */
+export async function collectEasyPanelMetrics(): Promise<boolean> {
+  const stats = await callEasyPanelAPI('monitor.getSystemStats')
+  if (!stats) return false
+
+  const cpu = Math.round(stats.cpuInfo?.usedPercentage ?? 0)
+  const ram = Math.round((stats.memInfo?.usedMemPercentage ?? 0) * 10) / 10
+  const disk = parseFloat(stats.diskInfo?.usedPercentage ?? '0')
+  const load = stats.cpuInfo?.loadavg?.[0] ?? 0
+
+  await upsertMonitoring('server', 'EasyPanel', 'up', {
+    cpu, ram, disk, load,
+    uptime_hours: Math.round((stats.uptime ?? 0) / 3600),
+    mem_total_mb: Math.round(stats.memInfo?.totalMemMb ?? 0),
+    mem_used_mb: Math.round(stats.memInfo?.usedMemMb ?? 0),
+    disk_total_gb: stats.diskInfo?.totalGb,
+    disk_free_gb: stats.diskInfo?.freeGb,
+  })
+
+  console.log(`[EASYPANEL] Server: CPU=${cpu}%, RAM=${ram}%, Disk=${disk}%`)
+  return true
+}
+
+/**
+ * Collect Docker container/task stats via EasyPanel API.
+ * Updates the 'container' category in monitoring DB.
+ */
+export async function collectEasyPanelContainers(): Promise<boolean> {
+  const tasks = await callEasyPanelAPI('monitor.getDockerTaskStats')
+  if (!tasks) return false
+
+  let total = 0, up = 0, down = 0
+  const unhealthy: string[] = []
+
+  for (const [name, info] of Object.entries(tasks) as [string, { actual: number; desired: number }][]) {
+    total++
+    if (info.actual >= info.desired) {
+      up++
+    } else {
+      down++
+      unhealthy.push(name.replace('descomplicar_', ''))
+    }
+  }
+
+  const status = down > 0 ? 'warning' : 'ok'
+  await upsertMonitoring('container', 'EasyPanel Containers', status, {
+    total, up, down, restarting: 0,
+    ...(unhealthy.length > 0 ? { unhealthy } : {}),
+  })
+
+  console.log(`[EASYPANEL] Containers: ${up}/${total} running${down > 0 ? `, ${down} down: ${unhealthy.join(', ')}` : ''}`)
+  return true
+}
+
+/**
+ * Main collector entry point.
+ * Called by scheduler in server.ts every 5 minutes.
+ */
+export async function collectMonitoringData(): Promise<void> {
+  console.log('[COLLECTOR] Starting monitoring collection...')
+
+  try {
+    const services = await checkAllServices()
+    console.log(`[COLLECTOR] Services: ${services.up} up, ${services.warning} warning, ${services.down} down`)
+  } catch (err: unknown) {
+    console.error('[COLLECTOR] Service checks failed:', err instanceof Error ? err.message : err)
+  }
+
+  // EasyPanel API metrics (replaces SSH for Easy server)
+  try {
+    const gotStats = await collectEasyPanelMetrics()
+    const gotContainers = await collectEasyPanelContainers()
+    if (!gotStats && !gotContainers) {
+      console.warn('[COLLECTOR] EasyPanel API unavailable (check EASYPANEL_API_TOKEN)')
+    }
+  } catch (err: unknown) {
+    console.error('[COLLECTOR] EasyPanel collection failed:', err instanceof Error ? err.message : err)
+  }
+
+  try {
+    const stale = await checkStaleness()
+    if (stale > 0) {
+      console.log(`[COLLECTOR] Marked ${stale} stale WP site(s) as warning`)
+    }
+  } catch (err: unknown) {
+    console.error('[COLLECTOR] Staleness check failed:', err instanceof Error ? err.message : err)
+  }
+
+  console.log('[COLLECTOR] Done')
+}

api/services/server-metrics.ts

@@ -15,54 +15,17 @@ interface SSHServer {
   pass: string
 }
 
+// EasyPanel metrics: collected via API in monitoring-collector.ts
+// Gateway metrics: not needed (just Nginx proxy, covered by HTTP health check)
+// Only CWP Server remains on SSH (password auth)
 const SSH_SERVERS: SSHServer[] = [
   {
     name: 'server',
     monitorName: 'CWP Server',
-    host: process.env.SERVER_HOST || '176.9.3.158',
+    host: process.env.SERVER_HOST || '5.9.90.105',
     port: parseInt(process.env.SERVER_PORT || '9443'),
     user: process.env.SERVER_USER || 'root',
     pass: process.env.SERVER_PASS || ''
-  },
-  {
-    name: 'easy',
-    monitorName: 'EasyPanel',
-    host: process.env.EASY_HOST || '178.63.18.51',
-    port: 22,
-    user: process.env.EASY_USER || 'root',
-    pass: process.env.EASY_PASS || ''
-  },
-  {
-    name: 'mcp-hub',
-    monitorName: 'MCP Hub',
-    host: process.env.MCPHUB_HOST || 'mcp-hub.descomplicar.pt',
-    port: 22,
-    user: process.env.MCPHUB_USER || 'root',
-    pass: process.env.MCPHUB_PASS || ''
-  },
-  {
-    name: 'meet',
-    monitorName: 'Meet',
-    host: process.env.MEET_HOST || 'meet.descomplicar.pt',
-    port: 22,
-    user: process.env.MEET_USER || 'root',
-    pass: process.env.MEET_PASS || ''
-  },
-  {
-    name: 'whatsapp',
-    monitorName: 'WhatsApp',
-    host: process.env.WHATSAPP_HOST || 'whatsapp.descomplicar.pt',
-    port: 22,
-    user: process.env.WHATSAPP_USER || 'root',
-    pass: process.env.WHATSAPP_PASS || ''
-  },
-  {
-    name: 'whatsms',
-    monitorName: 'WhatSMS',
-    host: process.env.WHATSMS_HOST || 'whatsms.descomplicar.pt',
-    port: 22,
-    user: process.env.WHATSMS_USER || 'root',
-    pass: process.env.WHATSMS_PASS || ''
   }
 ]
 
@@ -192,27 +155,6 @@ export async function collectSSHMetrics(): Promise<{ success: number; failed: nu
         ]
       )
 
-      // Update containers if EasyPanel
-      if (server.name === 'easy' && metrics.containers !== undefined) {
-        try {
-          const containerOutput = await executeSSH(server, 'docker ps -a --format "{{.Status}}" | grep -c "Up" || echo 0; docker ps -aq | wc -l')
-          const [up, total] = containerOutput.trim().split('\n').map(n => parseInt(n) || 0)
-          const down = total - up
-
-          await db.query(
-            `UPDATE tbl_eal_monitoring
-             SET details = ?, status = ?, last_check = NOW()
-             WHERE category = 'container' AND name = 'EasyPanel Containers'`,
-            [
-              JSON.stringify({ total, up, down, restarting: 0 }),
-              down > 0 ? 'warning' : 'ok'
-            ]
-          )
-        } catch {
-          // Container stats are optional
-        }
-      }
-
       success++
       console.log(`[SSH] ${server.monitorName}: CPU=${metrics.cpu}%, RAM=${metrics.ram}%, Disk=${metrics.disk}%`)
 

package-lock.json

@@ -171,7 +171,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -521,7 +520,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -562,7 +560,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
@@ -1361,9 +1358,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
-      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
+      "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
       "cpu": [
         "arm"
       ],
@@ -1375,9 +1372,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
-      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
+      "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
       "cpu": [
         "arm64"
       ],
@@ -1389,9 +1386,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
-      "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
+      "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
       "cpu": [
         "arm64"
       ],
@@ -1403,9 +1400,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
-      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
+      "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
       "cpu": [
         "x64"
       ],
@@ -1417,9 +1414,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
-      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
+      "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
       "cpu": [
         "arm64"
       ],
@@ -1431,9 +1428,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
-      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
+      "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
       "cpu": [
         "x64"
       ],
@@ -1445,9 +1442,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
-      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
+      "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
       "cpu": [
         "arm"
       ],
@@ -1459,9 +1456,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
-      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
+      "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
       "cpu": [
         "arm"
       ],
@@ -1473,9 +1470,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
-      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
+      "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
       "cpu": [
         "arm64"
       ],
@@ -1487,9 +1484,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
-      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
+      "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
       "cpu": [
         "arm64"
       ],
@@ -1501,9 +1498,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
-      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
+      "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
       "cpu": [
         "loong64"
       ],
@@ -1515,9 +1512,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
-      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
+      "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
       "cpu": [
         "loong64"
       ],
@@ -1529,9 +1526,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
-      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
+      "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
       "cpu": [
         "ppc64"
       ],
@@ -1543,9 +1540,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
-      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
+      "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
       "cpu": [
         "ppc64"
       ],
@@ -1557,9 +1554,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
-      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
+      "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
       "cpu": [
         "riscv64"
       ],
@@ -1571,9 +1568,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
-      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
+      "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
       "cpu": [
         "riscv64"
       ],
@@ -1585,9 +1582,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
-      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
+      "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
       "cpu": [
         "s390x"
       ],
@@ -1599,9 +1596,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
-      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
+      "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
       "cpu": [
         "x64"
       ],
@@ -1613,9 +1610,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
-      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
+      "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
       "cpu": [
         "x64"
       ],
@@ -1627,9 +1624,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
-      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
+      "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
       "cpu": [
         "x64"
       ],
@@ -1641,9 +1638,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
-      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
+      "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
       "cpu": [
         "arm64"
       ],
@@ -1655,9 +1652,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
-      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
+      "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
       "cpu": [
         "arm64"
       ],
@@ -1669,9 +1666,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
-      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
+      "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
       "cpu": [
         "ia32"
       ],
@@ -1683,9 +1680,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
-      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
+      "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
       "cpu": [
         "x64"
       ],
@@ -1697,9 +1694,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
-      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
+      "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
       "cpu": [
         "x64"
       ],
@@ -2133,7 +2130,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -2394,7 +2392,6 @@
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2405,7 +2402,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -2518,7 +2514,6 @@
       "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.54.0",
         "@typescript-eslint/types": "8.54.0",
@@ -2673,13 +2668,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^2.0.2"
       },
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -2867,7 +2862,6 @@
       "integrity": "sha512-CGJ25bc8fRi8Lod/3GHSvXRKi7nBo3kxh0ApW4yCjmrWmRmlT53B5E08XRSZRliygG0aVNxLrBEqPYdz/KcCtQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/utils": "4.0.18",
         "fflate": "^0.8.2",
@@ -2917,7 +2911,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2958,9 +2951,9 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3315,7 +3308,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4139,7 +4131,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dotenv": {
       "version": "16.6.1",
@@ -4471,7 +4464,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4690,7 +4682,6 @@
       "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
       "integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
@@ -4802,12 +4793,12 @@
       }
     },
     "node_modules/express-rate-limit": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
-      "integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.3.1.tgz",
+      "integrity": "sha512-D1dKN+cmyPWuvB+G2SREQDzPY1agpBIcTa9sJxOPMCNeH3gwzhqJRDWCXW3gg0y//+LQ/8j52JbMROWyrKdMdw==",
       "license": "MIT",
       "dependencies": {
-        "ip-address": "10.0.1"
+        "ip-address": "10.1.0"
       },
       "engines": {
         "node": ">= 16"
@@ -5702,9 +5693,9 @@
       }
     },
     "node_modules/ip-address": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
-      "integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
+      "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==",
       "license": "MIT",
       "engines": {
         "node": ">= 12"
@@ -6695,6 +6686,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -6811,9 +6803,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -7079,7 +7071,6 @@
       "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.4.1.tgz",
       "integrity": "sha512-jNdst/U28Iasukx/L5MP6b274Vr7ftQs6qAhPBCvz6Wt5rPCA+Q/tUmCzfCHHWweWw5szeMy2Gfrm1rITwUKrw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "jwt-decode": "^4.0.0"
       },
@@ -7358,7 +7349,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7391,6 +7381,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -7406,6 +7397,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -7418,7 +7410,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
@@ -7509,7 +7502,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7519,7 +7511,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -7552,7 +7543,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -7667,8 +7657,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -7786,9 +7775,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
-      "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
+      "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7802,31 +7791,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.57.1",
-        "@rollup/rollup-android-arm64": "4.57.1",
-        "@rollup/rollup-darwin-arm64": "4.57.1",
-        "@rollup/rollup-darwin-x64": "4.57.1",
-        "@rollup/rollup-freebsd-arm64": "4.57.1",
-        "@rollup/rollup-freebsd-x64": "4.57.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.57.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.57.1",
-        "@rollup/rollup-linux-arm64-musl": "4.57.1",
-        "@rollup/rollup-linux-loong64-gnu": "4.57.1",
-        "@rollup/rollup-linux-loong64-musl": "4.57.1",
-        "@rollup/rollup-linux-ppc64-gnu": "4.57.1",
-        "@rollup/rollup-linux-ppc64-musl": "4.57.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.57.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.57.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.57.1",
-        "@rollup/rollup-linux-x64-gnu": "4.57.1",
-        "@rollup/rollup-linux-x64-musl": "4.57.1",
-        "@rollup/rollup-openbsd-x64": "4.57.1",
-        "@rollup/rollup-openharmony-arm64": "4.57.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.57.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.57.1",
-        "@rollup/rollup-win32-x64-gnu": "4.57.1",
-        "@rollup/rollup-win32-x64-msvc": "4.57.1",
+        "@rollup/rollup-android-arm-eabi": "4.59.0",
+        "@rollup/rollup-android-arm64": "4.59.0",
+        "@rollup/rollup-darwin-arm64": "4.59.0",
+        "@rollup/rollup-darwin-x64": "4.59.0",
+        "@rollup/rollup-freebsd-arm64": "4.59.0",
+        "@rollup/rollup-freebsd-x64": "4.59.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.59.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.59.0",
+        "@rollup/rollup-linux-arm64-musl": "4.59.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.59.0",
+        "@rollup/rollup-linux-loong64-musl": "4.59.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.59.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.59.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.59.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.59.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-musl": "4.59.0",
+        "@rollup/rollup-openbsd-x64": "4.59.0",
+        "@rollup/rollup-openharmony-arm64": "4.59.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.59.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.59.0",
+        "@rollup/rollup-win32-x64-gnu": "4.59.0",
+        "@rollup/rollup-win32-x64-msvc": "4.59.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -8570,7 +8559,6 @@
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -8697,7 +8685,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8903,7 +8890,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -8979,7 +8965,6 @@
       "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.18",
         "@vitest/mocker": "4.0.18",
@@ -9324,7 +9309,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

src/App.tsx

@@ -22,11 +22,8 @@ import {
   CheckCircle2,
   Timer,
   Sparkles,
-  LayoutDashboard,
   Activity,
   Target,
-  Menu,
-  X,
 } from 'lucide-react'
 
 // Types
@@ -422,7 +419,6 @@ function App() {
   const [loading, setLoading] = useState(true)
   const [refreshing, setRefreshing] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   const fetchData = useCallback(async () => {
     setRefreshing(true)
@@ -459,7 +455,7 @@ function App() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-mesh flex items-center justify-center">
+      <div className="flex items-center justify-center py-20">
         <motion.div
           initial={{ opacity: 0, scale: 0.8 }}
           animate={{ opacity: 1, scale: 1 }}
@@ -481,7 +477,7 @@ function App() {
   // Error state (Vulnerabilidade 3.2)
   if (error) {
     return (
-      <div className="min-h-screen bg-mesh flex items-center justify-center">
+      <div className="flex items-center justify-center py-20">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
@@ -510,93 +506,20 @@ function App() {
   if (!data) return null
 
   return (
-    <div className="min-h-screen bg-mesh">
-      <div className="bg-grid min-h-screen">
-        {/* Header */}
-        <header className="sticky top-0 z-50 border-b border-white/5 bg-[#0a0a0f]/90 backdrop-blur-2xl">
-          <div className="max-w-[1800px] mx-auto px-6 lg:px-8 py-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                <motion.div
-                  whileHover={{ scale: 1.05, rotate: 5 }}
-                  className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/30"
-                >
-                  <Zap className="w-6 h-6 text-white" />
-                </motion.div>
-                <div>
-                  <h1 className="text-xl font-bold text-white tracking-tight">Dashboard Descomplicar</h1>
-                  <p className="text-xs text-zinc-500">Painel de Gestão</p>
-                </div>
-              </div>
-
-              <nav className="hidden md:flex items-center gap-1 bg-white/5 rounded-xl p-1">
-                <a href="#" className="px-4 py-2 rounded-lg bg-brand-500 text-white text-sm font-medium flex items-center gap-2">
-                  <LayoutDashboard className="w-4 h-4" />
-                  Dashboard
-                </a>
-                <a href="/monitor" className="px-4 py-2 rounded-lg text-zinc-400 hover:text-white hover:bg-white/10 text-sm font-medium transition-all flex items-center gap-2">
-                  <Activity className="w-4 h-4" />
-                  Monitor
-                </a>
-                <a href="/financial" className="px-4 py-2 rounded-lg text-zinc-400 hover:text-white hover:bg-white/10 text-sm font-medium transition-all flex items-center gap-2">
-                  <CreditCard className="w-4 h-4" />
-                  Financeiro
-                </a>
-              </nav>
-
-              <div className="flex items-center gap-3">
-                <motion.button
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                  onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-                  className="md:hidden p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
-                >
-                  {mobileMenuOpen ? <X className="w-5 h-5 text-zinc-400" /> : <Menu className="w-5 h-5 text-zinc-400" />}
-                </motion.button>
-                <motion.button
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                  onClick={fetchData}
-                  disabled={refreshing}
-                  className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
-                >
-                  <RefreshCw className={`w-5 h-5 text-zinc-400 ${refreshing ? 'animate-spin' : ''}`} />
-                </motion.button>
-                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-brand-500 to-violet-600 ring-2 ring-white/10" />
-              </div>
-            </div>
-          </div>
-        </header>
-
-        {/* Mobile Navigation */}
-        <AnimatePresence>
-          {mobileMenuOpen && (
-            <motion.nav
-              initial={{ opacity: 0, height: 0 }}
-              animate={{ opacity: 1, height: 'auto' }}
-              exit={{ opacity: 0, height: 0 }}
-              className="md:hidden border-b border-white/5 bg-[#0a0a0f]/95 backdrop-blur-2xl overflow-hidden"
+        <div className="max-w-[1800px] mx-auto px-6 lg:px-8 py-8">
+          {/* Header com refresh */}
+          <div className="flex items-center justify-between mb-2">
+            <div />
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={fetchData}
+              disabled={refreshing}
+              className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
             >
-              <div className="px-6 py-3 flex flex-col gap-1">
-                <a href="#" onClick={() => setMobileMenuOpen(false)} className="px-4 py-3 rounded-lg bg-brand-500 text-white text-sm font-medium flex items-center gap-3">
-                  <LayoutDashboard className="w-4 h-4" />
-                  Dashboard
-                </a>
-                <a href="/monitor" onClick={() => setMobileMenuOpen(false)} className="px-4 py-3 rounded-lg text-zinc-400 hover:text-white hover:bg-white/10 text-sm font-medium transition-all flex items-center gap-3">
-                  <Activity className="w-4 h-4" />
-                  Monitor
-                </a>
-                <a href="/financial" onClick={() => setMobileMenuOpen(false)} className="px-4 py-3 rounded-lg text-zinc-400 hover:text-white hover:bg-white/10 text-sm font-medium transition-all flex items-center gap-3">
-                  <CreditCard className="w-4 h-4" />
-                  Financeiro
-                </a>
-              </div>
-            </motion.nav>
-          )}
-        </AnimatePresence>
-
-        {/* Main Content */}
-        <main className="max-w-[1800px] mx-auto px-6 lg:px-8 py-8">
+              <RefreshCw className={`w-5 h-5 text-zinc-400 ${refreshing ? 'animate-spin' : ''}`} />
+            </motion.button>
+          </div>
           <AnimatePresence mode="wait">
             <motion.div
               key="dashboard"
@@ -880,24 +803,18 @@ function App() {
               </div>
             </motion.div>
           </AnimatePresence>
-        </main>
 
-        {/* Footer */}
-        <footer className="border-t border-white/5 mt-12">
-          <div className="max-w-[1800px] mx-auto px-6 lg:px-8 py-6">
-            <div className="flex items-center justify-between text-sm text-zinc-500">
+          {/* Footer */}
+          <footer className="border-t border-white/5 mt-12">
+            <div className="flex items-center justify-between text-sm text-zinc-500 py-6">
               <div className="flex items-center gap-2">
                 <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
                 <span>Dashboard Descomplicar v3.0</span>
-                <span className="text-zinc-700">·</span>
-                <span>Painel de Gestão</span>
               </div>
               <span>Actualizado: {new Date().toLocaleString('pt-PT')}</span>
             </div>
-          </div>
-        </footer>
-      </div>
-    </div>
+          </footer>
+        </div>
   )
 }
 

src/components/Layout.tsx

@@ -0,0 +1,269 @@
+import { useState, useEffect } from 'react'
+import { NavLink, Outlet } from 'react-router-dom'
+import { motion, AnimatePresence } from 'framer-motion'
+import {
+  LayoutDashboard,
+  Activity,
+  CreditCard,
+  Zap,
+  ChevronLeft,
+  ChevronRight,
+  Menu,
+  X,
+} from 'lucide-react'
+
+const SIDEBAR_KEY = 'dash-sidebar-collapsed'
+const MOBILE_BREAKPOINT = 768
+
+interface NavItem {
+  to: string
+  label: string
+  icon: React.ElementType
+}
+
+const NAV_ITEMS: NavItem[] = [
+  { to: '/', label: 'Dashboard', icon: LayoutDashboard },
+  { to: '/monitor', label: 'Monitor', icon: Activity },
+  { to: '/financial', label: 'Financeiro', icon: CreditCard },
+]
+
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(
+    typeof window !== 'undefined' ? window.innerWidth < MOBILE_BREAKPOINT : false
+  )
+
+  useEffect(() => {
+    const onResize = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  return isMobile
+}
+
+function getInitialCollapsed(isMobile: boolean): boolean {
+  if (isMobile) return true
+  try {
+    const stored = localStorage.getItem(SIDEBAR_KEY)
+    if (stored !== null) return stored === 'true'
+  } catch {
+    // localStorage indisponivel
+  }
+  return false
+}
+
+export default function Layout() {
+  const isMobile = useIsMobile()
+  const [collapsed, setCollapsed] = useState(() => getInitialCollapsed(isMobile))
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  // Colapsar automaticamente em mobile
+  useEffect(() => {
+    if (isMobile) {
+      setCollapsed(true)
+      setMobileOpen(false)
+    }
+  }, [isMobile])
+
+  // Persistir estado em localStorage (apenas desktop)
+  useEffect(() => {
+    if (!isMobile) {
+      try {
+        localStorage.setItem(SIDEBAR_KEY, String(collapsed))
+      } catch {
+        // localStorage indisponivel
+      }
+    }
+  }, [collapsed, isMobile])
+
+  const toggleSidebar = () => {
+    if (isMobile) {
+      setMobileOpen(prev => !prev)
+    } else {
+      setCollapsed(prev => !prev)
+    }
+  }
+
+  const closeMobileMenu = () => setMobileOpen(false)
+
+  const sidebarWidth = collapsed ? 72 : 240
+
+  return (
+    <div className="min-h-screen bg-mesh">
+      <div className="bg-grid min-h-screen flex">
+
+        {/* Overlay mobile */}
+        <AnimatePresence>
+          {isMobile && mobileOpen && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"
+              onClick={closeMobileMenu}
+            />
+          )}
+        </AnimatePresence>
+
+        {/* Sidebar */}
+        <AnimatePresence mode="wait">
+          {(!isMobile || mobileOpen) && (
+            <motion.aside
+              initial={isMobile ? { x: -240 } : false}
+              animate={{ x: 0 }}
+              exit={isMobile ? { x: -240 } : undefined}
+              transition={{ type: 'spring', stiffness: 400, damping: 35 }}
+              style={!isMobile ? { width: sidebarWidth } : undefined}
+              className={`
+                ${isMobile
+                  ? 'fixed top-0 left-0 bottom-0 z-50 w-60'
+                  : 'relative flex-shrink-0 z-30'
+                }
+                bg-[#0a0a0f]/95 backdrop-blur-2xl border-r border-white/5
+                flex flex-col transition-[width] duration-300 ease-in-out
+              `}
+            >
+              {/* Logo */}
+              <div className="flex items-center gap-3 px-4 py-5 border-b border-white/5 min-h-[72px]">
+                <motion.div
+                  whileHover={{ scale: 1.05, rotate: 5 }}
+                  className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/30 flex-shrink-0"
+                >
+                  <Zap className="w-5 h-5 text-white" />
+                </motion.div>
+                <AnimatePresence>
+                  {(!collapsed || isMobile) && (
+                    <motion.div
+                      initial={{ opacity: 0, width: 0 }}
+                      animate={{ opacity: 1, width: 'auto' }}
+                      exit={{ opacity: 0, width: 0 }}
+                      transition={{ duration: 0.2 }}
+                      className="overflow-hidden whitespace-nowrap"
+                    >
+                      <h1 className="text-base font-bold text-white tracking-tight leading-tight">Descomplicar</h1>
+                      <p className="text-[10px] text-zinc-500">Painel de Gestao</p>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+
+                {/* Fechar em mobile */}
+                {isMobile && (
+                  <button
+                    onClick={closeMobileMenu}
+                    className="ml-auto p-1.5 rounded-lg hover:bg-white/10 transition-colors"
+                  >
+                    <X className="w-5 h-5 text-zinc-400" />
+                  </button>
+                )}
+              </div>
+
+              {/* Navegacao */}
+              <nav className="flex-1 px-3 py-4 space-y-1">
+                {NAV_ITEMS.map((item) => (
+                  <NavLink
+                    key={item.to}
+                    to={item.to}
+                    end={item.to === '/'}
+                    onClick={isMobile ? closeMobileMenu : undefined}
+                    className={({ isActive }) => `
+                      flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium
+                      transition-all duration-200 group relative
+                      ${isActive
+                        ? 'bg-brand-500/15 text-white border border-brand-500/30'
+                        : 'text-zinc-400 hover:text-white hover:bg-white/5 border border-transparent'
+                      }
+                    `}
+                  >
+                    {({ isActive }) => (
+                      <>
+                        <item.icon className={`w-5 h-5 flex-shrink-0 ${isActive ? 'text-brand-400' : 'text-zinc-500 group-hover:text-zinc-300'}`} />
+                        <AnimatePresence>
+                          {(!collapsed || isMobile) && (
+                            <motion.span
+                              initial={{ opacity: 0, width: 0 }}
+                              animate={{ opacity: 1, width: 'auto' }}
+                              exit={{ opacity: 0, width: 0 }}
+                              transition={{ duration: 0.2 }}
+                              className="overflow-hidden whitespace-nowrap"
+                            >
+                              {item.label}
+                            </motion.span>
+                          )}
+                        </AnimatePresence>
+
+                        {/* Tooltip quando colapsado (desktop) */}
+                        {collapsed && !isMobile && (
+                          <div className="absolute left-full ml-3 px-2.5 py-1.5 rounded-lg bg-zinc-800 text-white text-xs font-medium whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none shadow-xl border border-white/10 z-50">
+                            {item.label}
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </NavLink>
+                ))}
+              </nav>
+
+              {/* Toggle (apenas desktop) */}
+              {!isMobile && (
+                <div className="px-3 py-4 border-t border-white/5">
+                  <button
+                    onClick={toggleSidebar}
+                    className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all text-zinc-400 hover:text-white"
+                    title={collapsed ? 'Expandir sidebar' : 'Colapsar sidebar'}
+                  >
+                    {collapsed
+                      ? <ChevronRight className="w-4 h-4" />
+                      : <ChevronLeft className="w-4 h-4" />
+                    }
+                    <AnimatePresence>
+                      {!collapsed && (
+                        <motion.span
+                          initial={{ opacity: 0, width: 0 }}
+                          animate={{ opacity: 1, width: 'auto' }}
+                          exit={{ opacity: 0, width: 0 }}
+                          transition={{ duration: 0.2 }}
+                          className="text-xs font-medium overflow-hidden whitespace-nowrap"
+                        >
+                          Colapsar
+                        </motion.span>
+                      )}
+                    </AnimatePresence>
+                  </button>
+                </div>
+              )}
+            </motion.aside>
+          )}
+        </AnimatePresence>
+
+        {/* Conteudo principal */}
+        <div className="flex-1 min-w-0 flex flex-col">
+          {/* Header mobile com botao de menu */}
+          {isMobile && (
+            <header className="sticky top-0 z-30 border-b border-white/5 bg-[#0a0a0f]/90 backdrop-blur-2xl">
+              <div className="flex items-center gap-3 px-4 py-3">
+                <button
+                  onClick={toggleSidebar}
+                  className="p-2 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
+                >
+                  <Menu className="w-5 h-5 text-zinc-400" />
+                </button>
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/20">
+                    <Zap className="w-4 h-4 text-white" />
+                  </div>
+                  <span className="text-sm font-bold text-white">Descomplicar</span>
+                </div>
+              </div>
+            </header>
+          )}
+
+          {/* Outlet para as paginas */}
+          <main className="flex-1">
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    </div>
+  )
+}

src/main.tsx

@@ -6,6 +6,7 @@ import './index.css'
 import App from './App.tsx'
 import Monitor from './pages/Monitor.tsx'
 import Financial from './pages/Financial.tsx'
+import Layout from './components/Layout.tsx'
 import { oidcConfig } from './auth/config.ts'
 import { AuthWrapper } from './auth/AuthWrapper.tsx'
 
@@ -15,10 +16,12 @@ createRoot(document.getElementById('root')!).render(
       <BrowserRouter>
         <AuthWrapper>
           <Routes>
-            <Route path="/" element={<App />} />
-            <Route path="/monitor" element={<Monitor />} />
-            <Route path="/financial" element={<Financial />} />
-            <Route path="/callback" element={<App />} />
+            <Route element={<Layout />}>
+              <Route path="/" element={<App />} />
+              <Route path="/monitor" element={<Monitor />} />
+              <Route path="/financial" element={<Financial />} />
+              <Route path="/callback" element={<App />} />
+            </Route>
           </Routes>
         </AuthWrapper>
       </BrowserRouter>

src/pages/Financial.tsx

@@ -1,20 +1,15 @@
 import { useState, useEffect, useCallback } from 'react'
 import { motion } from 'framer-motion'
-import { Link } from 'react-router-dom'
 import {
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
 } from 'recharts'
 import {
-  Zap,
   RefreshCw,
-  ArrowLeft,
   TrendingUp,
   TrendingDown,
   DollarSign,
   Receipt,
   PiggyBank,
-  Activity,
-  LayoutDashboard,
 } from 'lucide-react'
 
 interface FinancialData {
@@ -105,7 +100,7 @@ export default function Financial() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-mesh flex items-center justify-center">
+      <div className="flex items-center justify-center py-20">
         <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center">
           <DollarSign className="w-12 h-12 text-brand-400 mx-auto mb-4 animate-pulse" />
           <p className="text-zinc-400">A carregar dados financeiros...</p>
@@ -127,59 +122,28 @@ export default function Financial() {
   }))
 
   return (
-    <div className="min-h-screen bg-mesh">
-      <div className="bg-grid min-h-screen">
-        {/* Header */}
-        <header className="sticky top-0 z-50 border-b border-white/5 bg-[#0a0a0f]/90 backdrop-blur-2xl">
-          <div className="max-w-[1600px] mx-auto px-6 lg:px-8 py-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                <motion.div
-                  whileHover={{ scale: 1.05 }}
-                  className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/30"
-                >
-                  <Zap className="w-6 h-6 text-white" />
-                </motion.div>
-                <div>
-                  <h1 className="text-xl font-bold text-white tracking-tight">Financeiro</h1>
-                  <p className="text-xs text-zinc-500">Vendas e Despesas {new Date().getFullYear()}</p>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-4">
-                <span className={`px-4 py-2 rounded-full text-sm font-semibold ${lucroColor}`}>
-                  {lucroLabel}: {formatEUR(Math.abs(data.lucro_ano))}
-                </span>
-                <motion.button
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                  onClick={fetchData}
-                  disabled={refreshing}
-                  className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
-                >
-                  <RefreshCw className={`w-5 h-5 text-zinc-400 ${refreshing ? 'animate-spin' : ''}`} />
-                </motion.button>
-                <Link
-                  to="/monitor"
-                  className="hidden md:flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 hover:bg-white/10 text-zinc-400 hover:text-white transition-all text-sm"
-                >
-                  <Activity className="w-4 h-4" />
-                  Monitor
-                </Link>
-                <Link
-                  to="/"
-                  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 hover:bg-white/10 text-zinc-400 hover:text-white transition-all text-sm"
-                >
-                  <ArrowLeft className="w-4 h-4" />
-                  <span className="hidden md:inline">Dashboard</span>
-                </Link>
-              </div>
+        <div className="max-w-[1600px] mx-auto px-6 lg:px-8 py-8">
+          {/* Header com resumo e refresh */}
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <h2 className="text-xl font-bold text-white tracking-tight">Financeiro</h2>
+              <p className="text-xs text-zinc-500">Vendas e Despesas {new Date().getFullYear()}</p>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className={`px-4 py-2 rounded-full text-sm font-semibold ${lucroColor}`}>
+                {lucroLabel}: {formatEUR(Math.abs(data.lucro_ano))}
+              </span>
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={fetchData}
+                disabled={refreshing}
+                className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
+              >
+                <RefreshCw className={`w-5 h-5 text-zinc-400 ${refreshing ? 'animate-spin' : ''}`} />
+              </motion.button>
             </div>
           </div>
-        </header>
-
-        {/* Main Content */}
-        <main className="max-w-[1600px] mx-auto px-6 lg:px-8 py-8">
           <motion.div variants={containerVariants} initial="hidden" animate="show">
             {/* Summary Cards */}
             <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
@@ -280,8 +244,6 @@ export default function Financial() {
               </motion.div>
             </div>
           </motion.div>
-        </main>
-      </div>
-    </div>
+        </div>
   )
 }

src/pages/Monitor.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
 import { motion } from 'framer-motion'
-import { Link } from 'react-router-dom'
 import {
   Server,
   Wifi,
@@ -11,13 +10,14 @@ import {
   RefreshCw,
   CheckCircle2,
   AlertTriangle,
-  XCircle,
-  Zap,
-  ArrowLeft,
   Activity,
   Clock,
-  TrendingUp,
   Wrench,
+  Code,
+  Network,
+  Cpu,
+  MemoryStick,
+  MonitorDot,
 } from 'lucide-react'
 
 // Types
@@ -49,21 +49,95 @@ interface MonitorData {
   }
 }
 
+interface VMConfig {
+  name: string
+  id: string
+  type: 'QEMU' | 'LXC'
+  ip: string
+  role: string
+  icon: React.ElementType
+  accent: string
+  accentBg: string
+  accentBorder: string
+}
+
+// VM definitions matching cluster architecture
+const VM_CONFIG: Record<string, VMConfig> = {
+  'CWP Server': {
+    name: 'Server',
+    id: 'VM 100',
+    type: 'QEMU',
+    ip: '5.9.90.105',
+    role: 'CWP - hosting clientes',
+    icon: Server,
+    accent: 'text-emerald-400',
+    accentBg: 'bg-emerald-500/10',
+    accentBorder: 'border-emerald-500/20',
+  },
+  'EasyPanel': {
+    name: 'Easy',
+    id: 'VM 101',
+    type: 'QEMU',
+    ip: '5.9.90.70',
+    role: 'Docker Swarm - 46 servicos',
+    icon: Container,
+    accent: 'text-cyan-400',
+    accentBg: 'bg-cyan-500/10',
+    accentBorder: 'border-cyan-500/20',
+  },
+  'Dev': {
+    name: 'Dev',
+    id: 'CT 102',
+    type: 'LXC',
+    ip: '10.10.10.10',
+    role: 'Node.js, Docker, TypeScript',
+    icon: Code,
+    accent: 'text-violet-400',
+    accentBg: 'bg-violet-500/10',
+    accentBorder: 'border-violet-500/20',
+  },
+  'Gateway': {
+    name: 'Gateway',
+    id: 'VM 103',
+    type: 'QEMU',
+    ip: '5.9.90.69',
+    role: '26 MCPs, Nginx proxy',
+    icon: Network,
+    accent: 'text-amber-400',
+    accentBg: 'bg-amber-500/10',
+    accentBorder: 'border-amber-500/20',
+  },
+}
+
 // Animation variants
 const containerVariants = {
   hidden: { opacity: 0 },
   show: {
     opacity: 1,
-    transition: { staggerChildren: 0.05 }
+    transition: { staggerChildren: 0.06 }
   }
 }
 
 const itemVariants = {
   hidden: { opacity: 0, y: 20 },
-  show: { opacity: 1, y: 0 }
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { type: 'spring' as const, stiffness: 300, damping: 30 }
+  }
+}
+
+// --- Sub-components ---
+
+const StatusDot = ({ status }: { status: string }) => {
+  const color = (status === 'ok' || status === 'up')
+    ? 'bg-emerald-400 shadow-[0_0_12px_rgba(16,185,129,0.6)]'
+    : status === 'warning'
+    ? 'bg-amber-400 shadow-[0_0_12px_rgba(245,158,11,0.6)]'
+    : 'bg-red-400 shadow-[0_0_12px_rgba(239,68,68,0.6)] animate-pulse'
+  return <div className={`w-2.5 h-2.5 rounded-full ${color}`} />
 }
 
-// Status Badge
 const StatusBadge = ({ status }: { status: string }) => {
   const styles: Record<string, string> = {
     ok: 'bg-emerald-500/20 text-emerald-400',
@@ -80,15 +154,17 @@ const StatusBadge = ({ status }: { status: string }) => {
   )
 }
 
-// Progress Bar
-const ProgressBar = ({ percent, showLabel = true }: { percent: number; showLabel?: boolean }) => {
-  const color = percent < 70 ? 'from-emerald-500 to-emerald-400' : percent < 85 ? 'from-amber-500 to-amber-400' : 'from-red-500 to-red-400'
+const ProgressBar = ({ percent, showLabel = true, size = 'md', inverted = false }: { percent: number; showLabel?: boolean; size?: 'sm' | 'md'; inverted?: boolean }) => {
+  const color = inverted
+    ? (percent > 90 ? 'from-emerald-500 to-emerald-400' : percent > 70 ? 'from-amber-500 to-amber-400' : 'from-red-500 to-red-400')
+    : (percent < 70 ? 'from-emerald-500 to-emerald-400' : percent < 85 ? 'from-amber-500 to-amber-400' : 'from-red-500 to-red-400')
+  const height = size === 'sm' ? 'h-1.5' : 'h-2'
   return (
     <div className="flex items-center gap-3">
-      <div className="flex-1 h-2 bg-white/10 rounded-full overflow-hidden">
+      <div className={`flex-1 ${height} bg-white/10 rounded-full overflow-hidden`}>
         <motion.div
           initial={{ width: 0 }}
-          animate={{ width: `${percent}%` }}
+          animate={{ width: `${Math.min(percent, 100)}%` }}
           transition={{ duration: 0.8, ease: 'easeOut' }}
           className={`h-full rounded-full bg-gradient-to-r ${color}`}
         />
@@ -98,19 +174,13 @@ const ProgressBar = ({ percent, showLabel = true }: { percent: number; showLabel
   )
 }
 
-// Summary Card
-const SummaryCard = ({ value, label, color, icon: Icon }: { value: number; label: string; color: string; icon: React.ElementType }) => (
-  <motion.div
-    variants={itemVariants}
-    className="glass-card p-6 text-center"
-  >
-    <Icon className={`w-8 h-8 mx-auto mb-3 ${color}`} />
-    <div className={`text-4xl font-bold ${color}`}>{value}</div>
-    <div className="text-sm text-zinc-400 mt-1">{label}</div>
-  </motion.div>
+const MetricPill = ({ label, value, unit = '%' }: { label: string; value: number | string; unit?: string }) => (
+  <span className="text-xs bg-white/5 px-2 py-1 rounded">
+    <span className="text-zinc-500">{label}</span>{' '}
+    <span className="text-white font-medium">{value}{unit}</span>
+  </span>
 )
 
-// Category Card
 const CategoryCard = ({
   title,
   icon: Icon,
@@ -136,45 +206,129 @@ const CategoryCard = ({
   </motion.div>
 )
 
-// Monitor Item
-const MonitorItemRow = ({ item }: { item: MonitorItem }) => (
-  <div className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02] hover:bg-white/[0.05] transition-colors">
-    <div className="flex-1">
-      <div className="text-sm font-medium text-white">{item.name}</div>
-      {item.details && (
-        <div className="flex flex-wrap gap-2 mt-2">
-          {item.details.cpu !== undefined && (
-            <span className="text-xs bg-white/5 px-2 py-1 rounded">
-              <span className="text-zinc-500">CPU</span>{' '}
-              <span className="text-white font-medium">{item.details.cpu}%</span>
-            </span>
-          )}
-          {item.details.ram !== undefined && (
-            <span className="text-xs bg-white/5 px-2 py-1 rounded">
-              <span className="text-zinc-500">RAM</span>{' '}
-              <span className="text-white font-medium">{item.details.ram}%</span>
-            </span>
-          )}
-          {item.details.disk !== undefined && (
-            <span className="text-xs bg-white/5 px-2 py-1 rounded">
-              <span className="text-zinc-500">Disco</span>{' '}
-              <span className="text-white font-medium">{item.details.disk}%</span>
-            </span>
-          )}
-          {item.details.response_time !== undefined && (
-            <span className="text-xs text-zinc-400">{item.details.response_time}s</span>
-          )}
-          {item.details.domain && (
-            <span className="text-xs text-zinc-500">{item.details.domain}</span>
-          )}
+// Cluster Overview Hero
+const ClusterHero = ({ data }: { data: MonitorData }) => {
+  const clusterItem = data.items.server?.find(s => s.name === 'Cluster Proxmox')
+  const d = clusterItem?.details || {}
+
+  return (
+    <motion.div variants={itemVariants} className="glass-card overflow-hidden col-span-full">
+      <div className="px-6 py-5 border-b border-white/5 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/30">
+            <MonitorDot className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h2 className="text-lg font-bold text-white">Cluster Proxmox</h2>
+            <p className="text-xs text-zinc-500">cluster.descomplicar.pt - 5.9.90.75 - Hetzner AX162-R</p>
+          </div>
         </div>
-      )}
-    </div>
-    <StatusBadge status={item.status} />
+        <div className="flex items-center gap-3">
+          <StatusDot status={data.overall} />
+          <span className={`text-sm font-medium ${
+            data.overall === 'ok' ? 'text-emerald-400' :
+            data.overall === 'warning' ? 'text-amber-400' : 'text-red-400'
+          }`}>
+            {data.overall === 'ok' ? 'Operacional' : data.overall === 'warning' ? 'Atencao' : 'Critico'}
+          </span>
+        </div>
+      </div>
+
+      <div className="p-6">
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
+          <StatMini icon={Cpu} label="CPU" value={d.cpu ? `${d.cpu}%` : '--'} />
+          <StatMini icon={MemoryStick} label="RAM" value="128 GB" sub="88 GB alocado" />
+          <StatMini icon={HardDrive} label="NVMe" value="950 GB" sub="RAID1" />
+          <StatMini icon={Database} label="HDD" value="16 TB" sub="backups + dados" />
+          <StatMini icon={Server} label="VMs" value="4" sub="3 QEMU + 1 LXC" />
+          <StatMini icon={CheckCircle2} label="OK" value={String(data.stats.total_ok)} color="text-emerald-400" />
+          <StatMini icon={AlertTriangle} label="Alertas" value={String(data.stats.total_warning + data.stats.total_critical)} color={data.stats.total_critical > 0 ? 'text-red-400' : data.stats.total_warning > 0 ? 'text-amber-400' : 'text-emerald-400'} />
+        </div>
+      </div>
+    </motion.div>
+  )
+}
+
+const StatMini = ({ icon: Icon, label, value, sub, color = 'text-white' }: {
+  icon: React.ElementType; label: string; value: string; sub?: string; color?: string
+}) => (
+  <div className="text-center p-3 rounded-xl bg-white/[0.03]">
+    <Icon className="w-4 h-4 mx-auto mb-2 text-zinc-500" />
+    <div className={`text-lg font-bold ${color}`}>{value}</div>
+    <div className="text-xs text-zinc-500">{label}</div>
+    {sub && <div className="text-[10px] text-zinc-600 mt-0.5">{sub}</div>}
   </div>
 )
 
-// Main Monitor Page
+// VM Card
+const VMCard = ({ item, config }: { item?: MonitorItem; config: VMConfig }) => {
+  const Icon = config.icon
+  const d = item?.details || {}
+  const status = item?.status || 'ok'
+
+  return (
+    <motion.div
+      variants={itemVariants}
+      className={`glass-card overflow-hidden border ${config.accentBorder}`}
+    >
+      <div className="px-5 py-4 border-b border-white/5 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className={`w-9 h-9 rounded-lg ${config.accentBg} flex items-center justify-center`}>
+            <Icon className={`w-5 h-5 ${config.accent}`} />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <h3 className="text-sm font-bold text-white">{config.name}</h3>
+              <span className="text-[10px] text-zinc-600 font-mono">{config.id}</span>
+            </div>
+            <p className="text-xs text-zinc-500">{config.ip} - {config.type}</p>
+          </div>
+        </div>
+        <StatusBadge status={status} />
+      </div>
+
+      <div className="p-4 space-y-3">
+        <p className="text-xs text-zinc-400">{config.role}</p>
+
+        {d.cpu !== undefined && (
+          <div>
+            <div className="flex justify-between text-xs mb-1">
+              <span className="text-zinc-500">CPU</span>
+              <span className="text-white font-medium">{d.cpu}%</span>
+            </div>
+            <ProgressBar percent={Number(d.cpu)} showLabel={false} size="sm" />
+          </div>
+        )}
+        {d.ram !== undefined && (
+          <div>
+            <div className="flex justify-between text-xs mb-1">
+              <span className="text-zinc-500">RAM</span>
+              <span className="text-white font-medium">{d.ram}%</span>
+            </div>
+            <ProgressBar percent={Number(d.ram)} showLabel={false} size="sm" />
+          </div>
+        )}
+        {d.disk !== undefined && (
+          <div>
+            <div className="flex justify-between text-xs mb-1">
+              <span className="text-zinc-500">Disco</span>
+              <span className="text-white font-medium">{d.disk}%</span>
+            </div>
+            <ProgressBar percent={Number(d.disk)} showLabel={false} size="sm" />
+          </div>
+        )}
+        {d.load !== undefined && (
+          <div className="flex items-center gap-2 pt-1">
+            <MetricPill label="Load" value={d.load} unit="" />
+          </div>
+        )}
+      </div>
+    </motion.div>
+  )
+}
+
+// --- Main Component ---
+
 export default function Monitor() {
   const [data, setData] = useState<MonitorData | null>(null)
   const [loading, setLoading] = useState(true)
@@ -188,7 +342,9 @@ export default function Monitor() {
       const json = await response.json()
       setData(json)
     } catch {
-      setData(getMockData())
+      if (import.meta.env.DEV) {
+        setData(getMockData())
+      }
     } finally {
       setLoading(false)
       setRefreshing(false)
@@ -203,14 +359,10 @@ export default function Monitor() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-mesh flex items-center justify-center">
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          className="text-center"
-        >
+      <div className="flex items-center justify-center py-20">
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center">
           <Activity className="w-12 h-12 text-brand-400 mx-auto mb-4 animate-pulse" />
-          <p className="text-zinc-400">A carregar monitorização...</p>
+          <p className="text-zinc-400">A carregar monitorizacao...</p>
         </motion.div>
       </div>
     )
@@ -218,8 +370,10 @@ export default function Monitor() {
 
   if (!data) return null
 
-  // Items já vêm agrupados por categoria da API
-  const groupedItems = data.items
+  const { items } = data
+
+  // Match server items to VM config
+  const getVMItem = (name: string) => items.server?.find(s => s.name === name)
 
   const overallColor = {
     ok: 'text-emerald-400 bg-emerald-500/20',
@@ -229,92 +383,73 @@ export default function Monitor() {
 
   const overallLabel = {
     ok: 'Operacional',
-    warning: 'Atenção',
-    critical: 'Crítico',
+    warning: 'Atencao',
+    critical: 'Critico',
   }[data.overall]
 
   return (
-    <div className="min-h-screen bg-mesh">
-      <div className="bg-grid min-h-screen">
-        {/* Header */}
-        <header className="sticky top-0 z-50 border-b border-white/5 bg-[#0a0a0f]/90 backdrop-blur-2xl">
-          <div className="max-w-[1600px] mx-auto px-6 lg:px-8 py-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                <motion.div
-                  whileHover={{ scale: 1.05 }}
-                  className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500 to-violet-600 flex items-center justify-center shadow-lg shadow-brand-500/30"
-                >
-                  <Zap className="w-6 h-6 text-white" />
-                </motion.div>
-                <div>
-                  <h1 className="text-xl font-bold text-white tracking-tight">Monitorização</h1>
-                  <p className="text-xs text-zinc-500">Sistemas Descomplicar</p>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-4">
-                <span className={`px-4 py-2 rounded-full text-sm font-semibold ${overallColor}`}>
-                  {overallLabel}
-                </span>
-                <motion.button
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                  onClick={fetchData}
-                  disabled={refreshing}
-                  className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
-                >
-                  <RefreshCw className={`w-5 h-5 text-zinc-400 ${refreshing ? 'animate-spin' : ''}`} />
-                </motion.button>
-                <Link
-                  to="/financial"
-                  className="hidden md:flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 hover:bg-white/10 text-zinc-400 hover:text-white transition-all text-sm"
-                >
-                  <TrendingUp className="w-4 h-4" />
-                  Financeiro
-                </Link>
-                <Link
-                  to="/"
-                  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 hover:bg-white/10 text-zinc-400 hover:text-white transition-all text-sm"
-                >
-                  <ArrowLeft className="w-4 h-4" />
-                  Dashboard
-                </Link>
-              </div>
+        <div className="max-w-[1600px] mx-auto px-6 lg:px-8 py-8">
+          {/* Header com status e refresh */}
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <h2 className="text-xl font-bold text-white tracking-tight">Monitorizacao</h2>
+              <p className="text-xs text-zinc-500">Cluster Proxmox Descomplicar</p>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className={`px-4 py-2 rounded-full text-sm font-semibold ${overallColor}`}>
+                {overallLabel}
+              </span>
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={fetchData}
+                disabled={refreshing}
+                className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all"
+              >
+                <RefreshCw className={`w-5 h-5 text-zinc-400 ${refreshing ? 'animate-spin' : ''}`} />
+              </motion.button>
             </div>
           </div>
-        </header>
+          <motion.div variants={containerVariants} initial="hidden" animate="show">
 
-        {/* Main Content */}
-        <main className="max-w-[1600px] mx-auto px-6 lg:px-8 py-8">
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate="show"
-          >
-            {/* Summary Grid */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
-              <SummaryCard value={data.stats.total_ok} label="Operacionais" color="text-emerald-400" icon={CheckCircle2} />
-              <SummaryCard value={data.stats.total_warning} label="Avisos" color="text-amber-400" icon={AlertTriangle} />
-              <SummaryCard value={data.stats.total_critical} label="Críticos" color="text-red-400" icon={XCircle} />
+            {/* Section 1: Cluster Overview */}
+            <ClusterHero data={data} />
+
+            {/* Section 2: VM Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mt-6">
+              {Object.entries(VM_CONFIG).map(([key, config]) => (
+                <VMCard key={key} item={getVMItem(key)} config={config} />
+              ))}
             </div>
 
-            {/* Monitor Grid */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-              {/* Servers */}
-              {groupedItems.server && (
-                <CategoryCard title="Servidores" icon={Server} count={groupedItems.server.length}>
-                  {groupedItems.server.map((item) => (
-                    <MonitorItemRow key={item.id} item={item} />
+            {/* Section 3: Detail Categories */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-8">
+
+              {/* Sites WordPress */}
+              {items.site && items.site.length > 0 && (
+                <CategoryCard title="Sites WordPress" icon={Globe} count={items.site.length}>
+                  {items.site.map((item) => (
+                    <div key={item.id} className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02] hover:bg-white/[0.05] transition-colors">
+                      <div className="flex-1">
+                        <div className="text-sm font-medium text-white">{item.name}</div>
+                        <div className="flex gap-2 mt-1">
+                          {item.details?.domain && <span className="text-xs text-zinc-500">{item.details.domain}</span>}
+                          {item.details?.response_time !== undefined && (
+                            <span className="text-xs text-zinc-600">{item.details.response_time}s</span>
+                          )}
+                        </div>
+                      </div>
+                      <StatusBadge status={item.status} />
+                    </div>
                   ))}
                 </CategoryCard>
               )}
 
-              {/* Services - Compact Grid */}
-              {groupedItems.service && (
-                <CategoryCard title="Serviços Críticos" icon={Wifi} count={groupedItems.service.length}>
+              {/* Servicos EasyPanel */}
+              {items.service && items.service.length > 0 && (
+                <CategoryCard title="Servicos" icon={Wifi} count={items.service.length}>
                   <div className="grid grid-cols-2 gap-x-3 gap-y-1.5">
-                    {groupedItems.service.map((item) => (
+                    {items.service.map((item) => (
                       <div key={item.id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors">
                         <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
                           item.status === 'ok' || item.status === 'up' ? 'bg-emerald-400' :
@@ -327,49 +462,45 @@ export default function Monitor() {
                 </CategoryCard>
               )}
 
-              {/* Sites */}
-              {groupedItems.site && (
-                <CategoryCard title="Sites WordPress" icon={Globe} count={groupedItems.site.length}>
-                  {groupedItems.site.map((item) => (
-                    <MonitorItemRow key={item.id} item={item} />
-                  ))}
-                </CategoryCard>
-              )}
-
-              {/* Containers */}
-              {groupedItems.container && groupedItems.container[0] && (
-                <CategoryCard title="Containers EasyPanel" icon={Container}>
-                  <div className="text-center py-6">
+              {/* Containers EasyPanel */}
+              {items.container && items.container[0] && (
+                <CategoryCard title="Containers Docker" icon={Container}>
+                  <div className="text-center py-4">
                     <div className="text-5xl font-bold text-emerald-400">
-                      {groupedItems.container[0].details?.up || 0}
+                      {items.container[0].details?.up || 0}
                     </div>
                     <div className="text-sm text-zinc-400 mt-2">
-                      de {groupedItems.container[0].details?.total || 0} containers activos
+                      de {items.container[0].details?.total || 0} containers activos
                     </div>
-                    {(groupedItems.container[0].details?.down || 0) > 0 && (
-                      <div className="text-sm text-red-400 mt-2">
-                        {groupedItems.container[0].details.down} containers em baixo
+                    {(items.container[0].details?.down || 0) > 0 && (
+                      <div className="text-sm text-red-400 mt-1">
+                        {items.container[0].details.down} em baixo
                       </div>
                     )}
                     <div className="mt-4 px-4">
                       <ProgressBar
-                        percent={Math.round((groupedItems.container[0].details?.up / groupedItems.container[0].details?.total) * 100) || 0}
+                        percent={Math.round((items.container[0].details?.up / items.container[0].details?.total) * 100) || 0}
                         showLabel={false}
+                        inverted
                       />
                     </div>
                   </div>
                 </CategoryCard>
               )}
 
-              {/* Backups */}
-              {groupedItems.backup && (
-                <CategoryCard title="Backups" icon={Database} count={groupedItems.backup.length}>
-                  {groupedItems.backup.map((item) => (
+              {/* Backups - 3 camadas */}
+              {items.backup && items.backup.length > 0 && (
+                <CategoryCard title="Backups" icon={Database} count={items.backup.length}>
+                  {items.backup.map((item) => (
                     <div key={item.id} className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02]">
                       <div>
                         <div className="text-sm font-medium text-white">{item.name}</div>
                         {item.details?.age_hours !== undefined && (
-                          <div className="text-xs text-zinc-500 mt-1">Último: há {item.details.age_hours}h</div>
+                          <div className="text-xs text-zinc-500 mt-1">
+                            {item.details.age_hours < 1 ? 'Agora' :
+                             item.details.age_hours < 24 ? `ha ${item.details.age_hours}h` :
+                             `ha ${Math.floor(item.details.age_hours / 24)}d`}
+                          </div>
                         )}
                       </div>
                       <StatusBadge status={item.status} />
@@ -379,9 +510,9 @@ export default function Monitor() {
               )}
 
               {/* Storage */}
-              {groupedItems.storage && (
-                <CategoryCard title="Armazenamento" icon={HardDrive} count={groupedItems.storage.length}>
-                  {groupedItems.storage.map((item) => (
+              {items.storage && items.storage.length > 0 && (
+                <CategoryCard title="Storage" icon={HardDrive} count={items.storage.length}>
+                  {items.storage.map((item) => (
                     <div key={item.id} className="p-3 rounded-xl bg-white/[0.02]">
                       <div className="flex items-center justify-between mb-2">
                         <span className="text-sm font-medium text-white">{item.name}</span>
@@ -395,21 +526,20 @@ export default function Monitor() {
                 </CategoryCard>
               )}
 
-              {/* Maintenance */}
-              {groupedItems.maintenance && groupedItems.maintenance[0] && (() => {
-                const m = groupedItems.maintenance[0]
+              {/* Manutencao */}
+              {items.maintenance && items.maintenance[0] && (() => {
+                const m = items.maintenance[0]
                 const d = m.details || {}
                 const ageH = d.age_hours ?? 0
-                const ageDays = Math.floor(ageH / 24)
-                const ageLabel = ageH < 24 ? `há ${ageH}h` : `há ${ageDays}d`
+                const ageLabel = ageH < 1 ? 'agora' : ageH < 24 ? `ha ${ageH}h` : `ha ${Math.floor(ageH / 24)}d`
                 const actions = (d.logs_truncated || 0) + (d.images_removed || 0) + (d.orphan_volumes || 0) + (d.tmp_cleaned || 0)
                 return (
-                  <CategoryCard title="Manutenção" icon={Wrench}>
+                  <CategoryCard title="Manutencao" icon={Wrench}>
                     <div className="space-y-3">
                       <div className="flex items-center justify-between p-3 rounded-xl bg-white/[0.02]">
                         <div>
                           <div className="text-sm font-medium text-white">Auto-Cleanup</div>
-                          <div className="text-xs text-zinc-500 mt-1">Último: {ageLabel}</div>
+                          <div className="text-xs text-zinc-500 mt-1">Ultimo: {ageLabel}</div>
                         </div>
                         <StatusBadge status={m.status} />
                       </div>
@@ -436,112 +566,138 @@ export default function Monitor() {
                 )
               })()}
 
-              {/* WP Updates */}
-              {groupedItems.wp_update && groupedItems.wp_update[0] && (
-                <CategoryCard title="WordPress Updates" icon={Globe}>
-                  <div className="text-center py-6">
-                    {(groupedItems.wp_update[0].details?.manual_updates || 0) > 0 ? (
+              {/* WP Updates - per-site detail from 'site' category */}
+              {(() => {
+                const sites = items.site || []
+                const sitesWithUpdates = sites.filter((s: MonitorItem) => {
+                  const counts = s.details?.updates?.counts
+                  return counts && counts.total > 0
+                })
+                const totalUpdates = sitesWithUpdates.reduce((sum: number, s: MonitorItem) => sum + (s.details?.updates?.counts?.total || 0), 0)
+                const wpAgg = items.wp_update?.[0]
+
+                return (
+                  <CategoryCard title="WordPress Updates" icon={Globe} count={sitesWithUpdates.length > 0 ? sitesWithUpdates.length : undefined}>
+                    {sitesWithUpdates.length > 0 ? (
                       <>
-                        <div className="text-5xl font-bold text-amber-400">
-                          {groupedItems.wp_update[0].details.manual_updates}
-                        </div>
-                        <div className="text-sm text-zinc-400 mt-2">
-                          plugins precisam update manual
+                        <div className="text-center pb-3">
+                          <div className="text-3xl font-bold text-amber-400">{totalUpdates}</div>
+                          <div className="text-xs text-zinc-500 mt-1">updates em {sitesWithUpdates.length} sites</div>
                         </div>
+                        {sitesWithUpdates.map((site: MonitorItem) => {
+                          const counts = site.details?.updates?.counts || {}
+                          return (
+                            <div key={site.id} className="p-3 rounded-xl bg-white/[0.02]">
+                              <div className="flex items-center justify-between">
+                                <span className="text-sm font-medium text-white">{site.name}</span>
+                                <span className="text-xs font-semibold text-amber-400">{counts.total} updates</span>
+                              </div>
+                              <div className="flex gap-3 mt-1">
+                                {counts.plugins > 0 && <span className="text-xs text-zinc-500">{counts.plugins} plugins</span>}
+                                {counts.themes > 0 && <span className="text-xs text-zinc-500">{counts.themes} temas</span>}
+                                {(counts.core || 0) > 0 && <span className="text-xs text-red-400">{counts.core} core</span>}
+                              </div>
+                            </div>
+                          )
+                        })}
                       </>
+                    ) : wpAgg && (wpAgg.details?.manual_updates || 0) > 0 ? (
+                      <div className="text-center py-4">
+                        <div className="text-4xl font-bold text-amber-400">{wpAgg.details.manual_updates}</div>
+                        <div className="text-sm text-zinc-400 mt-2">plugins precisam update</div>
+                        <div className="text-xs text-zinc-600 mt-2">Sem detalhe por site disponivel</div>
+                      </div>
                     ) : (
-                      <>
+                      <div className="text-center py-4">
                         <CheckCircle2 className="w-12 h-12 text-emerald-400 mx-auto" />
                         <div className="text-sm text-zinc-400 mt-2">Tudo actualizado</div>
-                      </>
+                      </div>
                     )}
-                  </div>
-                </CategoryCard>
-              )}
+                  </CategoryCard>
+                )
+              })()}
             </div>
 
             {/* Footer */}
             <div className="flex items-center justify-center gap-2 mt-8 text-sm text-zinc-500">
               <Clock className="w-4 h-4" />
-              <span>Última actualização: {new Date().toLocaleTimeString('pt-PT')}</span>
+              <span>Ultima actualizacao: {new Date().toLocaleTimeString('pt-PT')}</span>
               <span className="text-zinc-700">·</span>
               <span>Auto-refresh: 60s</span>
             </div>
           </motion.div>
-        </main>
-      </div>
-    </div>
+        </div>
   )
 }
 
-// Mock data
+// Mock data reflecting new cluster architecture
 function getMockData(): MonitorData {
   const mockItems: Record<string, MonitorItem[]> = {
     server: [
-      { id: 5, name: 'CWP Server', category: 'server', status: 'up', details: { cpu: 7.3, ram: 10.2, disk: 39 }, last_check: '' },
-      { id: 6, name: 'EasyPanel', category: 'server', status: 'up', details: { cpu: 20.5, ram: 20.2, disk: 41 }, last_check: '' },
-      { id: 296, name: 'MCP Hub', category: 'server', status: 'up', details: { cpu: 1.0, load: 0.0 }, last_check: '' },
-      { id: 297, name: 'Meet', category: 'server', status: 'up', details: { cpu: 4.7, load: 0.0 }, last_check: '' },
-      { id: 298, name: 'WhatsApp', category: 'server', status: 'up', details: { cpu: 3.0, load: 0.04 }, last_check: '' },
-      { id: 299, name: 'WhatSMS', category: 'server', status: 'up', details: { cpu: 2.1, load: 0.08 }, last_check: '' },
+      { id: 1, name: 'Cluster Proxmox', category: 'server', status: 'ok', details: { cpu: 12.5 }, last_check: '' },
+      { id: 100, name: 'CWP Server', category: 'server', status: 'ok', details: { cpu: 7.3, ram: 25.1, disk: 39, load: 0.42 }, last_check: '' },
+      { id: 101, name: 'EasyPanel', category: 'server', status: 'ok', details: { cpu: 20.5, ram: 53.1, disk: 41, load: 1.2 }, last_check: '' },
+      { id: 102, name: 'Dev', category: 'server', status: 'ok', details: { cpu: 3.0, ram: 18.5, disk: 28 }, last_check: '' },
+      { id: 103, name: 'Gateway', category: 'server', status: 'ok', details: { cpu: 5.2, ram: 42.0, disk: 52, load: 0.3 }, last_check: '' },
     ],
     service: [
-      { id: 1, name: 'Planeamento EAL', category: 'service', status: 'up', details: {}, last_check: '' },
-      { id: 2, name: 'Desk CRM', category: 'service', status: 'up', details: {}, last_check: '' },
-      { id: 3, name: 'Automator N8N', category: 'service', status: 'up', details: {}, last_check: '' },
-      { id: 4, name: 'NextCloud', category: 'service', status: 'up', details: {}, last_check: '' },
-      { id: 517, name: 'Gitea', category: 'service', status: 'up', details: {}, last_check: '' },
-      { id: 518, name: 'Meet Jitsi', category: 'service', status: 'up', details: {}, last_check: '' },
-      { id: 519, name: 'WikiJS', category: 'service', status: 'up', details: {}, last_check: '' },
-      { id: 521, name: 'Google Docs', category: 'service', status: 'up', details: {}, last_check: '' },
-      { id: 549, name: 'MCP Hub', category: 'service', status: 'up', details: {}, last_check: '' },
-      { id: 515, name: 'WhatSMS', category: 'service', status: 'up', details: {}, last_check: '' },
-      { id: 41594, name: 'Syncthing', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 1, name: 'Desk CRM', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 2, name: 'N8N', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 3, name: 'Gitea', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 4, name: 'WikiJS', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 5, name: 'Authentik', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 6, name: 'Metabase', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 7, name: 'NextCloud', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 8, name: 'Syncthing', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 9, name: 'MCP Gateway', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 10, name: 'Outline', category: 'service', status: 'up', details: {}, last_check: '' },
+      { id: 11, name: 'Penpot', category: 'service', status: 'warning', details: {}, last_check: '' },
+      { id: 12, name: 'WhatSMS', category: 'service', status: 'up', details: {}, last_check: '' },
     ],
     site: [
-      { id: 15960, name: 'Descomplicar', category: 'site', status: 'up', details: { domain: 'descomplicar.pt', response_time: 0.093 }, last_check: '' },
-      { id: 15961, name: 'Emanuel Almeida', category: 'site', status: 'up', details: { domain: 'emanuelalmeida.pt', response_time: 1.687 }, last_check: '' },
-      { id: 15959, name: 'Family Clinic', category: 'site', status: 'up', details: { domain: 'familyclinic.pt', response_time: 2.712 }, last_check: '' },
-      { id: 15962, name: 'WTC', category: 'site', status: 'up', details: { domain: 'wtc-group.com' }, last_check: '' },
-      { id: 15963, name: 'Carstuff', category: 'site', status: 'down', details: { domain: 'carstuff.pt' }, last_check: '' },
-      { id: 15964, name: 'Espiral Senior', category: 'site', status: 'up', details: { domain: 'espiralsenior.pt' }, last_check: '' },
-      { id: 15965, name: 'Karate Gaia', category: 'site', status: 'up', details: { domain: 'karategaia.pt' }, last_check: '' },
+      { id: 1, name: 'Descomplicar', category: 'site', status: 'up', details: { domain: 'descomplicar.pt', response_time: 0.093 }, last_check: '' },
+      { id: 2, name: 'Emanuel Almeida', category: 'site', status: 'up', details: { domain: 'emanuelalmeida.pt', response_time: 1.687 }, last_check: '' },
+      { id: 3, name: 'Family Clinic', category: 'site', status: 'up', details: { domain: 'familyclinic.pt', response_time: 2.712 }, last_check: '' },
+      { id: 4, name: 'WTC', category: 'site', status: 'up', details: { domain: 'wtc-group.com' }, last_check: '' },
+      { id: 5, name: 'Carstuff', category: 'site', status: 'down', details: { domain: 'carstuff.pt' }, last_check: '' },
+      { id: 6, name: 'Espiral Senior', category: 'site', status: 'up', details: { domain: 'espiralsenior.pt' }, last_check: '' },
+      { id: 7, name: 'Karate Gaia', category: 'site', status: 'up', details: { domain: 'karategaia.pt' }, last_check: '' },
     ],
     container: [
-      { id: 7, name: 'EasyPanel Containers', category: 'container', status: 'warning', details: { up: 83, total: 87, down: 4 }, last_check: '' },
+      { id: 1, name: 'Docker Swarm', category: 'container', status: 'ok', details: { up: 44, total: 46, down: 2 }, last_check: '' },
     ],
     backup: [
-      { id: 15967, name: 'MySQL Hourly', category: 'backup', status: 'ok', details: { age_hours: 1 }, last_check: '' },
-      { id: 15968, name: 'CWP Accounts', category: 'backup', status: 'warning', details: { age_hours: 48 }, last_check: '' },
-      { id: 15969, name: 'Easy Backup', category: 'backup', status: 'ok', details: { age_hours: 12 }, last_check: '' },
-      { id: 15970, name: 'Server->Easy Sync', category: 'backup', status: 'failed', details: { age_hours: 72 }, last_check: '' },
+      { id: 1, name: 'Proxmox vzdump', category: 'backup', status: 'ok', details: { age_hours: 8 }, last_check: '' },
+      { id: 2, name: 'CWP Accounts', category: 'backup', status: 'ok', details: { age_hours: 18 }, last_check: '' },
+      { id: 3, name: 'MySQL Hourly', category: 'backup', status: 'ok', details: { age_hours: 1 }, last_check: '' },
     ],
     storage: [
-      { id: 15971, name: 'gordo', category: 'storage', status: 'ok', details: { used: '89GB', total: '200GB', percent: 45 }, last_check: '' },
-      { id: 15972, name: 'gordito', category: 'storage', status: 'ok', details: { used: '42GB', total: '100GB', percent: 42 }, last_check: '' },
-    ],
-    wp_update: [
-      { id: 25, name: 'WordPress Plugins', category: 'wp_update', status: 'warning', details: { manual_updates: 3 }, last_check: '' },
+      { id: 1, name: 'NVMe RAID1 (vg0)', category: 'storage', status: 'ok', details: { used: '650GB', total: '950GB', percent: 68 }, last_check: '' },
+      { id: 2, name: 'HDD pbs-local', category: 'storage', status: 'ok', details: { used: '2.9TB', total: '6TB', percent: 49 }, last_check: '' },
+      { id: 3, name: 'HDD vm-storage', category: 'storage', status: 'ok', details: { used: '480GB', total: '8.5TB', percent: 6 }, last_check: '' },
     ],
     maintenance: [
-      { id: 48558, name: 'EasyPanel Cleanup', category: 'maintenance', status: 'ok', details: { age_hours: 0, disk_percent: 15, freed_mb: 0, logs_truncated: 0, images_removed: 0, orphan_volumes: 0, tmp_cleaned: 0 }, last_check: '' },
+      { id: 1, name: 'EasyPanel Cleanup', category: 'maintenance', status: 'ok', details: { age_hours: 2, disk_percent: 41, freed_mb: 128, logs_truncated: 3, images_removed: 5, orphan_volumes: 0, tmp_cleaned: 1 }, last_check: '' },
+    ],
+    wp_update: [
+      { id: 1, name: 'WordPress Plugins', category: 'wp_update', status: 'ok', details: { manual_updates: 0 }, last_check: '' },
     ],
   }
 
   return {
     overall: 'warning',
     summary: [
-      { category: 'server', total: 6, ok: 6, warning: 0, critical: 0 },
-      { category: 'service', total: 11, ok: 11, warning: 0, critical: 0 },
+      { category: 'server', total: 5, ok: 5, warning: 0, critical: 0 },
+      { category: 'service', total: 12, ok: 11, warning: 1, critical: 0 },
       { category: 'site', total: 7, ok: 6, warning: 0, critical: 1 },
-      { category: 'container', total: 1, ok: 0, warning: 1, critical: 0 },
-      { category: 'backup', total: 4, ok: 2, warning: 1, critical: 1 },
-      { category: 'storage', total: 2, ok: 2, warning: 0, critical: 0 },
+      { category: 'container', total: 1, ok: 1, warning: 0, critical: 0 },
+      { category: 'backup', total: 3, ok: 3, warning: 0, critical: 0 },
+      { category: 'storage', total: 3, ok: 3, warning: 0, critical: 0 },
     ],
     stats: {
-      total_ok: 26,
-      total_warning: 2,
-      total_critical: 2
+      total_ok: 30,
+      total_warning: 1,
+      total_critical: 1
     },
     items: mockItems,
   }