feat(monitor): add maintenance card for EasyPanel auto-cleanup status

Shows cleanup age, disk usage, freed space, and action counts (logs truncated,
images removed, orphan volumes, tmp files cleaned).

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

src/pages/Monitor.tsx

@@ -17,6 +17,7 @@ import {
   Activity,
   Clock,
   TrendingUp,
+  Wrench,
 } from 'lucide-react'
 
 // Types
@@ -394,6 +395,47 @@ export default function Monitor() {
                 </CategoryCard>
               )}
 
+              {/* Maintenance */}
+              {groupedItems.maintenance && groupedItems.maintenance[0] && (() => {
+                const m = groupedItems.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 actions = (d.logs_truncated || 0) + (d.images_removed || 0) + (d.orphan_volumes || 0) + (d.tmp_cleaned || 0)
+                return (
+                  <CategoryCard title="Manutenção" 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>
+                        <StatusBadge status={m.status} />
+                      </div>
+                      <div className="grid grid-cols-2 gap-2 px-1">
+                        <div className="text-center p-2 rounded-lg bg-white/[0.02]">
+                          <div className="text-lg font-bold text-white">{d.disk_percent || 0}%</div>
+                          <div className="text-xs text-zinc-500">Disco Easy</div>
+                        </div>
+                        <div className="text-center p-2 rounded-lg bg-white/[0.02]">
+                          <div className="text-lg font-bold text-white">{d.freed_mb || 0}<span className="text-xs text-zinc-500">MB</span></div>
+                          <div className="text-xs text-zinc-500">Libertado</div>
+                        </div>
+                      </div>
+                      {actions > 0 && (
+                        <div className="flex flex-wrap gap-2 px-1">
+                          {d.logs_truncated > 0 && <span className="text-xs bg-white/5 px-2 py-1 rounded text-zinc-400">{d.logs_truncated} logs</span>}
+                          {d.images_removed > 0 && <span className="text-xs bg-white/5 px-2 py-1 rounded text-zinc-400">{d.images_removed} images</span>}
+                          {d.orphan_volumes > 0 && <span className="text-xs bg-white/5 px-2 py-1 rounded text-zinc-400">{d.orphan_volumes} volumes</span>}
+                          {d.tmp_cleaned > 0 && <span className="text-xs bg-white/5 px-2 py-1 rounded text-zinc-400">{d.tmp_cleaned} tmp</span>}
+                        </div>
+                      )}
+                    </div>
+                  </CategoryCard>
+                )
+              })()}
+
               {/* WP Updates */}
               {groupedItems.wp_update && groupedItems.wp_update[0] && (
                 <CategoryCard title="WordPress Updates" icon={Globe}>
@@ -481,6 +523,9 @@ function getMockData(): MonitorData {
     wp_update: [
       { id: 25, name: 'WordPress Plugins', category: 'wp_update', status: 'warning', details: { manual_updates: 3 }, 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: '' },
+    ],
   }
 
   return {