feat: Add complete dashboard for customers

🎨 Dashboard UI (Next.js 14)
- Modern dark theme with purple/green accents
- Responsive layout with sidebar navigation
- Real-time metrics cards with alerts
- Interactive charts (CPU, Memory) with Recharts
- Hosts table with status indicators
- Alerts list with AI suggestions

🤖 AI Copilot Chat
- Slide-in panel with chat interface
- Quick action buttons
- Command suggestions with execute option
- Real-time loading indicators

📊 Components
- MetricCard with trend indicators
- HostsTable with colored metrics
- AlertsList with severity levels
- AIInsights panel with predictions
- CpuChart and MemoryChart

🛠️ Tech Stack
- Next.js 14 with App Router
- TypeScript
- Tailwind CSS
- Recharts for visualization
- Zustand for state management

dashboard/src/components/ui/AIInsights.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+const insights = [
+  {
+    type: 'anomaly',
+    icon: '🔍',
+    title: 'Anomalia Detectada',
+    description: 'O servidor cache-01 está com consumo 40% acima do padrão para este horário.',
+    severity: 'high',
+    action: 'Investigar',
+  },
+  {
+    type: 'prediction',
+    icon: '🔮',
+    title: 'Previsão de Capacidade',
+    description: 'O disco do servidor db-01 vai atingir 90% em aproximadamente 12 dias.',
+    severity: 'medium',
+    action: 'Planejar expansão',
+  },
+  {
+    type: 'optimization',
+    icon: '💡',
+    title: 'Oportunidade de Economia',
+    description: 'O servidor dev-02 está subutilizado (CPU média: 5%). Considere reduzir recursos.',
+    severity: 'low',
+    action: 'Ver detalhes',
+  },
+]
+
+export default function AIInsights() {
+  const getSeverityColor = (severity: string) => {
+    switch (severity) {
+      case 'high':
+        return 'border-red-500/50 bg-red-950/20'
+      case 'medium':
+        return 'border-yellow-500/50 bg-yellow-950/20'
+      default:
+        return 'border-green-500/50 bg-green-950/20'
+    }
+  }
+
+  return (
+    <div className="bg-gradient-to-r from-purple-900/30 to-slate-900 rounded-xl p-6 border border-purple-500/30">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center space-x-3">
+          <span className="text-2xl">🤖</span>
+          <div>
+            <h3 className="text-lg font-semibold">AI Insights</h3>
+            <p className="text-sm text-slate-400">Análises geradas automaticamente</p>
+          </div>
+        </div>
+        <button className="text-sm text-purple-400 hover:text-purple-300">
+          Ver todos →
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {insights.map((insight, index) => (
+          <div
+            key={index}
+            className={`p-4 rounded-lg border ${getSeverityColor(insight.severity)} hover:bg-slate-800/50 transition cursor-pointer`}
+          >
+            <div className="flex items-start space-x-3">
+              <span className="text-2xl">{insight.icon}</span>
+              <div className="flex-1">
+                <p className="font-medium">{insight.title}</p>
+                <p className="text-sm text-slate-400 mt-1">{insight.description}</p>
+                <button className="mt-3 text-sm text-purple-400 hover:text-purple-300">
+                  {insight.action} →
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}