diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,20 +3,18 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Painel de Controle Inteligente</title>
+  <title>Painel de Controle - DeekSeek</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <style>
-    .dark {
+    :root {
       --bg-primary: #1a1a2e;
       --bg-secondary: #16213e;
       --text-primary: #e6e6e6;
       --text-secondary: #b8b8b8;
       --accent: #4f46e5;
+      --transition-speed: 0.3s;
     }
     
     .light {
@@ -24,13 +22,13 @@
       --bg-secondary: #ffffff;
       --text-primary: #1e293b;
       --text-secondary: #64748b;
-      --accent: #4f46e5;
     }
     
     body {
       background-color: var(--bg-primary);
       color: var(--text-primary);
-      transition: all 0.3s ease;
+      transition: all var(--transition-speed) ease;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     }
     
     .sidebar {
@@ -42,6 +40,7 @@
       background-color: var(--bg-secondary);
       border: 1px solid rgba(255, 255, 255, 0.1);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
+      border-radius: 0.5rem;
     }
     
     .card:hover {
@@ -49,1528 +48,807 @@
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
     }
     
-    .usage-bar {
-      height: 4px;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      border-radius: 0 0 0.375rem 0.375rem;
-    }
-    
-    .terminal {
-      font-family: 'Courier New', monospace;
-      background-color: #1e1e1e;
-      color: #f8f8f2;
-    }
-    
-    .blink {
-      animation: blink 1s step-end infinite;
-    }
-    
-    @keyframes blink {
-      from, to { opacity: 1; }
-      50% { opacity: 0; }
-    }
-    
-    .container-status {
-      border-left-width: 4px;
+    .loading-spinner {
+      animation: spin 1s linear infinite;
     }
     
-    .container-status.running {
-      border-left-color: #10b981;
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
     }
     
-    .container-status.stopped {
-      border-left-color: #ef4444;
-    }
-    
-    .container-status.restarting {
-      border-left-color: #f59e0b;
+    @media (max-width: 768px) {
+      .sidebar {
+        width: 100%;
+        position: fixed;
+        z-index: 40;
+        height: auto;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border-right: none;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      
+      .sidebar-nav {
+        display: flex;
+        overflow-x: auto;
+      }
+      
+      .sidebar-nav ul {
+        display: flex;
+        flex-direction: row;
+      }
+      
+      .sidebar-nav li {
+        margin-right: 0.5rem;
+      }
+      
+      .sidebar-nav button {
+        padding: 0.5rem;
+        white-space: nowrap;
+      }
+      
+      .sidebar-nav i {
+        margin-right: 0;
+      }
+      
+      .sidebar-nav span {
+        display: none;
+      }
+      
+      .user-profile {
+        display: none;
+      }
+      
+      main {
+        padding-bottom: 80px;
+      }
     }
   </style>
 </head>
 <body class="dark">
   <div id="root"></div>
 
-  <script type="text/babel">
-    const { useState, useEffect } = React;
+  <script>
+    // Configuração da API
+    const API_BASE_URL = process.env.API_BASE_URL || 'http://localhost:3000/api';
+    
+    // Serviços de API
+    const ApiService = {
+      async getNews() {
+        try {
+          const response = await axios.get(`${API_BASE_URL}/news`);
+          return response.data;
+        } catch (error) {
+          console.error('Erro ao buscar notícias:', error);
+          return [];
+        }
+      },
+      
+      async getAlerts() {
+        try {
+          const response = await axios.get(`${API_BASE_URL}/alerts`);
+          return response.data;
+        } catch (error) {
+          console.error('Erro ao buscar alertas:', error);
+          return [];
+        }
+      },
+      
+      async postReport(reportData) {
+        try {
+          const response = await axios.post(`${API_BASE_URL}/denuncias`, reportData);
+          return response.data;
+        } catch (error) {
+          console.error('Erro ao enviar denúncia:', error);
+          throw error;
+        }
+      },
+      
+      async getDashboardData() {
+        try {
+          const response = await axios.get(`${API_BASE_URL}/dashboard`);
+          return response.data;
+        } catch (error) {
+          console.error('Erro ao buscar dados do dashboard:', error);
+          return null;
+        }
+      }
+    };
+
+    // Componentes reutilizáveis
+    const Button = ({ children, icon, onClick, variant = 'primary', size = 'md', className = '', disabled = false }) => {
+      const baseClasses = 'flex items-center justify-center rounded-lg font-medium transition-all';
+      const sizeClasses = {
+        sm: 'px-3 py-1 text-sm',
+        md: 'px-4 py-2',
+        lg: 'px-6 py-3'
+      };
+      const variantClasses = {
+        primary: 'bg-indigo-600 hover:bg-indigo-700 text-white',
+        secondary: 'bg-gray-700 hover:bg-gray-600 text-white',
+        success: 'bg-green-600 hover:bg-green-700 text-white',
+        danger: 'bg-red-600 hover:bg-red-700 text-white',
+        warning: 'bg-yellow-600 hover:bg-yellow-700 text-white',
+        ghost: 'bg-transparent hover:bg-gray-700/50 text-white'
+      };
+      
+      return `
+        <button
+          onclick="${onClick}"
+          ${disabled ? 'disabled' : ''}
+          class="${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}"
+        >
+          ${icon ? `<i class="${icon} ${children ? 'mr-2' : ''}"></i>` : ''}
+          ${children || ''}
+        </button>
+      `;
+    };
+
+    const Card = ({ children, title, className = '', headerClassName = '', bodyClassName = '' }) => {
+      return `
+        <div class="card ${className}">
+          ${title ? `
+            <div class="border-b border-gray-700 p-4 ${headerClassName}">
+              <h3 class="font-semibold">${title}</h3>
+            </div>
+          ` : ''}
+          <div class="p-4 ${bodyClassName}">
+            ${children}
+          </div>
+        </div>
+      `;
+    };
+
+    const LoadingSpinner = () => {
+      return `
+        <div class="flex items-center justify-center h-64">
+          <i class="fas fa-circle-notch fa-spin text-4xl text-indigo-500 loading-spinner"></i>
+        </div>
+      `;
+    };
 
     // Componentes principais
     const App = () => {
       const [darkMode, setDarkMode] = useState(true);
       const [activeSection, setActiveSection] = useState('dashboard');
-      const [vpsList, setVpsList] = useState([]);
-      const [botList, setBotList] = useState([]);
-      const [contentList, setContentList] = useState([]);
-      const [user, setUser] = useState({
-        name: 'Admin',
-        role: 'admin',
-        email: 'admin@painel.com'
-      });
-      const [notifications, setNotifications] = useState([]);
-      const [showAddVpsModal, setShowAddVpsModal] = useState(false);
-      const [showAddBotModal, setShowAddBotModal] = useState(false);
-      const [showAddContentModal, setShowAddContentModal] = useState(false);
-      const [terminalOutput, setTerminalOutput] = useState([]);
-
-      // Dados mockados
-      useEffect(() => {
-        // Mock VPS data
-        setVpsList([
-          {
-            id: 1,
-            name: 'Servidor Principal',
-            ip: '192.168.1.100',
-            status: 'online',
-            cpu: 45,
-            memory: 65,
-            storage: 30,
-            containers: 5,
-            lastUpdated: new Date()
-          },
-          {
-            id: 2,
-            name: 'Servidor de Backup',
-            ip: '192.168.1.101',
-            status: 'offline',
-            cpu: 0,
-            memory: 0,
-            storage: 0,
-            containers: 0,
-            lastUpdated: new Date(Date.now() - 86400000)
-          }
-        ]);
-
-        // Mock Bot data
-        setBotList([
-          {
-            id: 1,
-            name: 'Bot de Notícias',
-            type: 'scraping',
-            status: 'running',
-            lastRun: new Date(),
-            nextRun: new Date(Date.now() + 3600000),
-            logs: ['Iniciado às 10:00', 'Coletou 15 notícias']
-          },
-          {
-            id: 2,
-            name: 'Bot de Redes Sociais',
-            type: 'social',
-            status: 'stopped',
-            lastRun: new Date(Date.now() - 86400000),
-            nextRun: null,
-            logs: ['Parado pelo usuário']
-          }
-        ]);
-
-        // Mock Content data
-        setContentList([
-          {
-            id: 1,
-            title: 'Análise do Mercado de IA em 2023',
-            source: 'Google News',
-            status: 'approved',
-            created: new Date(),
-            published: new Date(),
-            author: 'Sistema de IA'
-          },
-          {
-            id: 2,
-            title: 'Novas Tendências em Desenvolvimento Web',
-            source: 'Tech Blogs',
-            status: 'pending',
-            created: new Date(),
-            published: null,
-            author: 'Sistema de IA'
-          }
-        ]);
-
-        // Mock notifications
-        setNotifications([
-          {
-            id: 1,
-            message: 'Novo conteúdo aguardando aprovação',
-            type: 'content',
-            read: false,
-            date: new Date()
-          },
-          {
-            id: 2,
-            message: 'Servidor de Backup está offline',
-            type: 'vps',
-            read: false,
-            date: new Date(Date.now() - 3600000)
-          }
-        ]);
-
-        // Mock terminal output
-        setTerminalOutput([
-          { id: 1, text: 'Bem-vindo ao Terminal do Painel de Controle', type: 'system' },
-          { id: 2, text: 'Digite "help" para ver os comandos disponíveis', type: 'system' }
-        ]);
-      }, []);
+      const [isLoading, setIsLoading] = useState(true);
+      const [dashboardData, setDashboardData] = useState(null);
+      const [news, setNews] = useState([]);
+      const [alerts, setAlerts] = useState([]);
 
       const toggleDarkMode = () => {
-        setDarkMode(!darkMode);
-        document.body.classList.toggle('dark');
-        document.body.classList.toggle('light');
+        setDarkMode(prev => {
+          const newMode = !prev;
+          document.body.classList.toggle('dark');
+          document.body.classList.toggle('light');
+          return newMode;
+        });
       };
 
-      const executeCommand = (command) => {
-        const newOutput = [
-          ...terminalOutput,
-          { id: terminalOutput.length + 1, text: `$ ${command}`, type: 'command' },
-          { id: terminalOutput.length + 2, text: 'Comando executado com sucesso', type: 'response' }
-        ];
-        setTerminalOutput(newOutput);
+      const fetchData = async () => {
+        setIsLoading(true);
+        try {
+          const [dashboard, newsData, alertsData] = await Promise.all([
+            ApiService.getDashboardData(),
+            ApiService.getNews(),
+            ApiService.getAlerts()
+          ]);
+          
+          setDashboardData(dashboard);
+          setNews(newsData);
+          setAlerts(alertsData);
+        } catch (error) {
+          console.error('Erro ao carregar dados:', error);
+        } finally {
+          setIsLoading(false);
+        }
       };
 
+      useEffect(() => {
+        fetchData();
+      }, []);
+
       const renderSection = () => {
+        if (isLoading) return LoadingSpinner();
+        
         switch (activeSection) {
           case 'dashboard':
-            return <DashboardSection 
-              vpsList={vpsList} 
-              botList={botList} 
-              contentList={contentList} 
-              notifications={notifications} 
-            />;
-          case 'vps':
-            return <VpsSection 
-              vpsList={vpsList} 
-              setShowAddVpsModal={setShowAddVpsModal} 
-              executeCommand={executeCommand}
-              terminalOutput={terminalOutput}
-            />;
-          case 'bots':
-            return <BotsSection 
-              botList={botList} 
-              setShowAddBotModal={setShowAddBotModal} 
-            />;
-          case 'content':
-            return <ContentSection 
-              contentList={contentList} 
-              setShowAddContentModal={setShowAddContentModal} 
-            />;
-          case 'settings':
-            return <SettingsSection 
-              user={user} 
-              darkMode={darkMode} 
-              toggleDarkMode={toggleDarkMode} 
-            />;
+            return DashboardSection({ dashboardData, news, alerts });
+          case 'news':
+            return NewsSection({ news });
+          case 'alerts':
+            return AlertsSection({ alerts });
+          case 'reports':
+            return ReportsSection();
           default:
-            return <DashboardSection 
-              vpsList={vpsList} 
-              botList={botList} 
-              contentList={contentList} 
-              notifications={notifications} 
-            />;
+            return DashboardSection({ dashboardData, news, alerts });
         }
       };
 
-      return (
-        <div className="flex h-screen overflow-hidden">
-          {/* Sidebar */}
-          <Sidebar 
-            activeSection={activeSection} 
-            setActiveSection={setActiveSection} 
-            user={user} 
-            notifications={notifications}
-          />
+      return `
+        <div class="flex h-screen overflow-hidden">
+          <!-- Sidebar -->
+          ${Sidebar({ activeSection, setActiveSection })}
           
-          {/* Main Content */}
-          <div className="flex-1 overflow-auto">
-            {/* Header */}
-            <Header 
-              activeSection={activeSection} 
-              darkMode={darkMode} 
-              toggleDarkMode={toggleDarkMode} 
-              user={user}
-              setShowAddVpsModal={setShowAddVpsModal}
-              setShowAddBotModal={setShowAddBotModal}
-              setShowAddContentModal={setShowAddContentModal}
-            />
+          <!-- Main Content -->
+          <div class="flex-1 overflow-auto">
+            <!-- Header -->
+            ${Header({ 
+              activeSection, 
+              darkMode, 
+              toggleDarkMode,
+              isLoading
+            })}
             
-            {/* Main Content */}
-            <main className="p-6">
-              {renderSection()}
+            <!-- Main Content -->
+            <main class="p-4 md:p-6">
+              ${renderSection()}
             </main>
           </div>
-          
-          {/* Modals */}
-          {showAddVpsModal && (
-            <AddVpsModal 
-              setShowAddVpsModal={setShowAddVpsModal} 
-              setVpsList={setVpsList} 
-            />
-          )}
-          
-          {showAddBotModal && (
-            <AddBotModal 
-              setShowAddBotModal={setShowAddBotModal} 
-              setBotList={setBotList} 
-            />
-          )}
-          
-          {showAddContentModal && (
-            <AddContentModal 
-              setShowAddContentModal={setShowAddContentModal} 
-              setContentList={setContentList} 
-            />
-          )}
         </div>
-      );
+      `;
     };
 
-    // Componentes de layout
-    const Sidebar = ({ activeSection, setActiveSection, user, notifications }) => {
-      const unreadNotifications = notifications.filter(n => !n.read).length;
+    const Sidebar = ({ activeSection, setActiveSection }) => {
+      const sections = [
+        { id: 'dashboard', icon: 'fa-tachometer-alt', label: 'Dashboard' },
+        { id: 'news', icon: 'fa-newspaper', label: 'Notícias' },
+        { id: 'alerts', icon: 'fa-bell', label: 'Alertas' },
+        { id: 'reports', icon: 'fa-flag', label: 'Denúncias' }
+      ];
       
-      return (
-        <div className="sidebar w-64 flex-shrink-0 flex flex-col">
-          <div className="p-4 border-b border-gray-700 flex items-center justify-between">
-            <h1 className="text-xl font-bold text-white flex items-center">
-              <i className="fas fa-robot text-indigo-500 mr-2"></i>
-              <span>Painel AI</span>
+      return `
+        <div class="sidebar w-16 md:w-64 flex-shrink-0 flex flex-col">
+          <div class="p-4 border-b border-gray-700 flex items-center justify-center md:justify-between">
+            <h1 class="text-xl font-bold text-white flex items-center">
+              <i class="fas fa-search text-indigo-500 mr-0 md:mr-2"></i>
+              <span class="hidden md:inline">DeekSeek</span>
             </h1>
           </div>
           
-          <div className="flex-1 overflow-y-auto">
-            <nav className="p-4">
-              <div className="mb-6">
-                <h3 className="text-xs uppercase font-semibold text-gray-400 mb-3">GERAL</h3>
-                <ul>
-                  <li className="mb-2">
-                    <button 
-                      onClick={() => setActiveSection('dashboard')}
-                      className={`w-full text-left flex items-center p-2 rounded-lg ${activeSection === 'dashboard' ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'}`}
-                    >
-                      <i className="fas fa-tachometer-alt mr-3"></i>
-                      Dashboard
-                    </button>
-                  </li>
-                </ul>
-              </div>
-              
-              <div className="mb-6">
-                <h3 className="text-xs uppercase font-semibold text-gray-400 mb-3">GERENCIAMENTO</h3>
-                <ul>
-                  <li className="mb-2">
-                    <button 
-                      onClick={() => setActiveSection('vps')}
-                      className={`w-full text-left flex items-center p-2 rounded-lg ${activeSection === 'vps' ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'}`}
-                    >
-                      <i className="fas fa-server mr-3"></i>
-                      VPS
-                    </button>
-                  </li>
-                  <li className="mb-2">
-                    <button 
-                      onClick={() => setActiveSection('bots')}
-                      className={`w-full text-left flex items-center p-2 rounded-lg ${activeSection === 'bots' ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'}`}
-                    >
-                      <i className="fas fa-robot mr-3"></i>
-                      Bots
-                    </button>
-                  </li>
-                  <li className="mb-2">
-                    <button 
-                      onClick={() => setActiveSection('content')}
-                      className={`w-full text-left flex items-center p-2 rounded-lg ${activeSection === 'content' ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'}`}
-                    >
-                      <i className="fas fa-newspaper mr-3"></i>
-                      Conteúdo
-                      {unreadNotifications > 0 && (
-                        <span className="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">
-                          {unreadNotifications}
-                        </span>
-                      )}
-                    </button>
-                  </li>
-                </ul>
-              </div>
-              
-              <div className="mb-6">
-                <h3 className="text-xs uppercase font-semibold text-gray-400 mb-3">CONFIGURAÇÕES</h3>
-                <ul>
-                  <li className="mb-2">
-                    <button 
-                      onClick={() => setActiveSection('settings')}
-                      className={`w-full text-left flex items-center p-2 rounded-lg ${activeSection === 'settings' ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'}`}
-                    >
-                      <i className="fas fa-cog mr-3"></i>
-                      Configurações
-                    </button>
+          <div class="flex-1 overflow-y-auto">
+            <nav class="p-2 md:p-4 sidebar-nav">
+              <ul class="space-y-1 md:space-y-2">
+                ${sections.map(section => `
+                  <li key="${section.id}" class="mb-0 md:mb-2">
+                    ${Button({
+                      onClick: `(${setActiveSection})('${section.id}')`,
+                      variant: activeSection === section.id ? 'primary' : 'ghost',
+                      className: `w-full text-left ${activeSection === section.id ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'}`,
+                      icon: section.icon,
+                      children: `<span class="hidden md:inline">${section.label}</span>`
+                    })}
                   </li>
-                </ul>
-              </div>
+                `).join('')}
+              </ul>
             </nav>
           </div>
           
-          <div className="p-4 border-t border-gray-700">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center">
-                <div className="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center">
-                  <i className="fas fa-user text-white"></i>
+          <div class="p-4 border-t border-gray-700 user-profile">
+            <div class="flex items-center justify-center md:justify-between">
+              <div class="flex items-center">
+                <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center">
+                  <i class="fas fa-user text-white"></i>
                 </div>
-                <div className="ml-3">
-                  <p className="text-sm font-medium">{user.name}</p>
-                  <p className="text-xs text-gray-400">{user.role}</p>
+                <div class="ml-3 hidden md:block">
+                  <p class="text-sm font-medium">Usuário</p>
+                  <p class="text-xs text-gray-400">Admin</p>
                 </div>
               </div>
-              <button className="text-gray-400 hover:text-white">
-                <i className="fas fa-sign-out-alt"></i>
-              </button>
             </div>
           </div>
         </div>
-      );
+      `;
     };
 
-    const Header = ({ 
-      activeSection, 
-      darkMode, 
-      toggleDarkMode, 
-      user,
-      setShowAddVpsModal,
-      setShowAddBotModal,
-      setShowAddContentModal
-    }) => {
+    const Header = ({ activeSection, darkMode, toggleDarkMode, isLoading }) => {
       const sectionTitles = {
         dashboard: 'Dashboard',
-        vps: 'Gerenciamento de VPS',
-        bots: 'Controle de Bots',
-        content: 'Gestão de Conteúdo',
-        settings: 'Configurações'
-      };
-      
-      const handleAddNew = () => {
-        switch (activeSection) {
-          case 'vps':
-            setShowAddVpsModal(true);
-            break;
-          case 'bots':
-            setShowAddBotModal(true);
-            break;
-          case 'content':
-            setShowAddContentModal(true);
-            break;
-          default:
-            break;
-        }
+        news: 'Gerenciamento de Notícias',
+        alerts: 'Monitoramento de Alertas',
+        reports: 'Registro de Denúncias'
       };
       
-      return (
-        <header className="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center">
-          <h2 className="text-xl font-semibold">{sectionTitles[activeSection]}</h2>
+      return `
+        <header class="bg-gray-800 border-b border-gray-700 p-4 flex flex-col md:flex-row justify-between items-start md:items-center space-y-3 md:space-y-0">
+          <h2 class="text-xl font-semibold">${sectionTitles[activeSection]}</h2>
           
-          <div className="flex items-center space-x-4">
-            <div className="relative">
-              <i className="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+          <div class="flex items-center space-x-2 md:space-x-4 w-full md:w-auto">
+            <div class="relative flex-1 md:flex-none">
+              <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
               <input 
                 type="text" 
                 placeholder="Pesquisar..." 
-                className="bg-gray-700 border border-gray-600 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                class="bg-gray-700 border border-gray-600 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full md:w-64"
+                ${isLoading ? 'disabled' : ''}
               />
             </div>
             
-            <button 
-              onClick={toggleDarkMode}
-              className="text-gray-400 hover:text-white p-2"
-            >
-              {darkMode ? (
-                <i className="fas fa-sun"></i>
-              ) : (
-                <i className="fas fa-moon"></i>
-              )}
-            </button>
-            
-            {(activeSection === 'vps' || activeSection === 'bots' || activeSection === 'content') && (
-              <button 
-                onClick={handleAddNew}
-                className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"
-              >
-                <i className="fas fa-plus mr-2"></i>
-                Adicionar
-              </button>
-            )}
+            ${Button({
+              icon: darkMode ? 'fa-sun' : 'fa-moon',
+              variant: 'ghost',
+              onClick: `(${toggleDarkMode})()`,
+              size: 'sm'
+            })}
           </div>
         </header>
-      );
+      `;
     };
 
-    // Componentes de seção
-    const DashboardSection = ({ vpsList, botList, contentList, notifications }) => {
-      const onlineVps = vpsList.filter(vps => vps.status === 'online').length;
-      const runningBots = botList.filter(bot => bot.status === 'running').length;
-      const pendingContent = contentList.filter(content => content.status === 'pending').length;
+    // Seções
+    const DashboardSection = ({ dashboardData, news, alerts }) => {
+      if (!dashboardData) return LoadingSpinner();
       
-      return (
-        <div className="space-y-6">
-          {/* Quick Stats */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            <div className="card rounded-lg p-6 relative">
-              <div className="flex justify-between items-start">
-                <div>
-                  <p className="text-gray-400">VPS Online</p>
-                  <h3 className="text-2xl font-bold mt-1">{onlineVps}/{vpsList.length}</h3>
-                </div>
-                <div className="bg-blue-500/10 p-3 rounded-full">
-                  <i className="fas fa-server text-blue-500"></i>
+      return `
+        <div class="space-y-6">
+          <!-- Quick Stats -->
+          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            ${Card({
+              className: 'relative',
+              children: `
+                <div class="flex justify-between items-start">
+                  <div>
+                    <p class="text-gray-400">Notícias</p>
+                    <h3 class="text-2xl font-bold mt-1">${news.length}</h3>
+                  </div>
+                  <div class="bg-blue-500/10 p-3 rounded-full">
+                    <i class="fas fa-newspaper text-blue-500"></i>
+                  </div>
                 </div>
-              </div>
-              <div className="usage-bar bg-blue-500" style={{ width: `${(onlineVps / vpsList.length) * 100}%` }}></div>
-            </div>
+              `
+            })}
             
-            <div className="card rounded-lg p-6 relative">
-              <div className="flex justify-between items-start">
-                <div>
-                  <p className="text-gray-400">Bots Ativos</p>
-                  <h3 className="text-2xl font-bold mt-1">{runningBots}/{botList.length}</h3>
-                </div>
-                <div className="bg-green-500/10 p-3 rounded-full">
-                  <i className="fas fa-robot text-green-500"></i>
+            ${Card({
+              className: 'relative',
+              children: `
+                <div class="flex justify-between items-start">
+                  <div>
+                    <p class="text-gray-400">Alertas</p>
+                    <h3 class="text-2xl font-bold mt-1">${alerts.length}</h3>
+                  </div>
+                  <div class="bg-red-500/10 p-3 rounded-full">
+                    <i class="fas fa-bell text-red-500"></i>
+                  </div>
                 </div>
-              </div>
-              <div className="usage-bar bg-green-500" style={{ width: `${(runningBots / botList.length) * 100}%` }}></div>
-            </div>
+              `
+            })}
             
-            <div className="card rounded-lg p-6 relative">
-              <div className="flex justify-between items-start">
-                <div>
-                  <p className="text-gray-400">Conteúdo Pendente</p>
-                  <h3 className="text-2xl font-bold mt-1">{pendingContent}</h3>
-                </div>
-                <div className="bg-yellow-500/10 p-3 rounded-full">
-                  <i className="fas fa-newspaper text-yellow-500"></i>
+            ${Card({
+              className: 'relative',
+              children: `
+                <div class="flex justify-between items-start">
+                  <div>
+                    <p class="text-gray-400">Última Atualização</p>
+                    <h3 class="text-2xl font-bold mt-1">${new Date(dashboardData.lastUpdated).toLocaleTimeString()}</h3>
+                  </div>
+                  <div class="bg-green-500/10 p-3 rounded-full">
+                    <i class="fas fa-clock text-green-500"></i>
+                  </div>
                 </div>
-              </div>
-              <div className="usage-bar bg-yellow-500" style={{ width: `${(pendingContent / (contentList.length || 1)) * 100}%` }}></div>
-            </div>
+              `
+            })}
             
-            <div className="card rounded-lg p-6 relative">
-              <div className="flex justify-between items-start">
-                <div>
-                  <p className="text-gray-400">Notificações</p>
-                  <h3 className="text-2xl font-bold mt-1">{notifications.filter(n => !n.read).length}</h3>
-                </div>
-                <div className="bg-red-500/10 p-3 rounded-full">
-                  <i className="fas fa-bell text-red-500"></i>
+            ${Card({
+              className: 'relative',
+              children: `
+                <div class="flex justify-between items-start">
+                  <div>
+                    <p class="text-gray-400">Status do Sistema</p>
+                    <h3 class="text-2xl font-bold mt-1">${dashboardData.systemStatus}</h3>
+                  </div>
+                  <div class="bg-yellow-500/10 p-3 rounded-full">
+                    <i class="fas fa-server text-yellow-500"></i>
+                  </div>
                 </div>
-              </div>
-              <div className="usage-bar bg-red-500" style={{ width: `${(notifications.filter(n => !n.read).length / (notifications.length || 1)) * 100}%` }}></div>
-            </div>
-          </div>
-          
-          {/* Charts */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <div className="card rounded-lg p-4">
-              <h3 className="font-medium mb-4">Uso de Recursos das VPS</h3>
-              <canvas id="resourceChart" height="200"></canvas>
-            </div>
-            
-            <div className="card rounded-lg p-4">
-              <h3 className="font-medium mb-4">Atividade de Bots</h3>
-              <canvas id="botActivityChart" height="200"></canvas>
-            </div>
+              `
+            })}
           </div>
           
-          {/* Recent Activity */}
-          <div className="card rounded-lg">
-            <div className="border-b border-gray-700 p-4">
-              <h3 className="font-semibold">Atividade Recente</h3>
-            </div>
-            <div className="p-4">
-              <div className="space-y-4">
-                {notifications.slice(0, 5).map(notification => (
-                  <div key={notification.id} className="flex items-start">
-                    <div className={`p-2 rounded-full mr-3 ${
-                      notification.type === 'vps' ? 'bg-blue-500/10 text-blue-500' : 
-                      notification.type === 'content' ? 'bg-yellow-500/10 text-yellow-500' : 
-                      'bg-gray-500/10 text-gray-500'
-                    }`}>
-                      <i className={
-                        notification.type === 'vps' ? 'fas fa-server' : 
-                        notification.type === 'content' ? 'fas fa-newspaper' : 
-                        'fas fa-info-circle'
-                      }></i>
+          <!-- Recent Activity -->
+          ${Card({
+            title: 'Atividade Recente',
+            children: `
+              <div class="space-y-4">
+                ${alerts.slice(0, 5).map(alert => `
+                  <div class="flex items-start">
+                    <div class="p-2 rounded-full mr-3 bg-red-500/10 text-red-500">
+                      <i class="fas fa-exclamation-triangle"></i>
                     </div>
                     <div>
-                      <p className="text-sm">{notification.message}</p>
-                      <p className="text-xs text-gray-400">{new Date(notification.date).toLocaleString()}</p>
+                      <p class="text-sm">${alert.message}</p>
+                      <p class="text-xs text-gray-400">${new Date(alert.date).toLocaleString()}</p>
                     </div>
                   </div>
-                ))}
+                `).join('')}
               </div>
-            </div>
-          </div>
+            `
+          })}
         </div>
-      );
+      `;
     };
 
-    const VpsSection = ({ vpsList, setShowAddVpsModal, executeCommand, terminalOutput }) => {
-      const [selectedVps, setSelectedVps] = useState(null);
-      const [command, setCommand] = useState('');
-      
-      useEffect(() => {
-        // Initialize charts
-        if (selectedVps) {
-          const cpuCtx = document.getElementById('vpsCpuChart').getContext('2d');
-          const memoryCtx = document.getElementById('vpsMemoryChart').getContext('2d');
-          
-          new Chart(cpuCtx, {
-            type: 'line',
-            data: {
-              labels: Array(24).fill().map((_, i) => `${i}h`),
-              datasets: [{
-                label: 'Uso de CPU',
-                data: Array(24).fill().map(() => Math.random() * 100),
-                borderColor: '#3B82F6',
-                backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                tension: 0.4,
-                fill: true
-              }]
-            },
-            options: {
-              responsive: true,
-              plugins: {
-                legend: { display: false }
-              },
-              scales: {
-                y: { beginAtZero: true, max: 100 }
-              }
-            }
-          });
-          
-          new Chart(memoryCtx, {
-            type: 'line',
-            data: {
-              labels: Array(24).fill().map((_, i) => `${i}h`),
-              datasets: [{
-                label: 'Uso de Memória',
-                data: Array(24).fill().map(() => Math.random() * 100),
-                borderColor: '#8B5CF6',
-                backgroundColor: 'rgba(139, 92, 246, 0.1)',
-                tension: 0.4,
-                fill: true
-              }]
-            },
-            options: {
-              responsive: true,
-              plugins: {
-                legend: { display: false }
-              },
-              scales: {
-                y: { beginAtZero: true, max: 100 }
-              }
-            }
-          });
-        }
-      }, [selectedVps]);
+    const NewsSection = ({ news }) => {
+      const [selectedNews, setSelectedNews] = useState(null);
       
-      const handleCommandSubmit = (e) => {
-        e.preventDefault();
-        if (command.trim()) {
-          executeCommand(command);
-          setCommand('');
-        }
-      };
-      
-      return (
-        <div className="space-y-6">
-          <div className="flex justify-between items-center">
-            <h3 className="text-lg font-semibold">Servidores VPS</h3>
-            <button 
-              onClick={() => setShowAddVpsModal(true)}
-              className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"
-            >
-              <i className="fas fa-plus mr-2"></i>
-              Adicionar VPS
-            </button>
+      return `
+        <div class="space-y-6">
+          <div class="flex justify-between items-center">
+            <h3 class="text-lg font-semibold">Gerenciamento de Notícias</h3>
+            ${Button({
+              onClick: "alert('Funcionalidade de adicionar notícia será implementada')",
+              variant: 'primary',
+              icon: 'fa-plus',
+              children: 'Adicionar Notícia'
+            })}
           </div>
           
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            {/* VPS List */}
-            <div className="lg:col-span-1">
-              <div className="card rounded-lg">
-                <div className="border-b border-gray-700 p-4">
-                  <h3 className="font-semibold">Lista de Servidores</h3>
-                </div>
-                <div className="p-4 space-y-3">
-                  {vpsList.map(vps => (
-                    <div 
-                      key={vps.id} 
-                      onClick={() => setSelectedVps(vps)}
-                      className={`p-3 rounded-lg cursor-pointer ${selectedVps?.id === vps.id ? 'bg-indigo-500/10 border border-indigo-500/30' : 'hover:bg-gray-700'}`}
-                    >
-                      <div className="flex justify-between items-center">
-                        <h4 className="font-medium">{vps.name}</h4>
-                        <span className={`px-2 py-1 text-xs rounded-full ${
-                          vps.status === 'online' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
-                        }`}>
-                          {vps.status === 'online' ? 'Online' : 'Offline'}
-                        </span>
-                      </div>
-                      <p className="text-sm text-gray-400">{vps.ip}</p>
-                      <div className="flex justify-between mt-2 text-xs">
-                        <span className="text-blue-400">CPU: {vps.cpu}%</span>
-                        <span className="text-purple-400">RAM: {vps.memory}%</span>
-                        <span className="text-yellow-400">DISK: {vps.storage}%</span>
+          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- News List -->
+            <div class="lg:col-span-1">
+              ${Card({
+                title: 'Lista de Notícias',
+                children: `
+                  <div class="space-y-3">
+                    ${news.map(item => `
+                      <div 
+                        onclick="(${setSelectedNews})(${JSON.stringify(item)})"
+                        class="p-3 rounded-lg cursor-pointer transition-all ${
+                          selectedNews?.id === item.id ? 'bg-indigo-500/10 border border-indigo-500/30' : 'hover:bg-gray-700'
+                        }"
+                      >
+                        <div class="flex justify-between items-center">
+                          <h4 class="font-medium truncate">${item.title}</h4>
+                          <span class="px-2 py-1 text-xs rounded-full bg-green-500/20 text-green-400">
+                            ${item.status}
+                          </span>
+                        </div>
+                        <p class="text-sm text-gray-400 truncate">${item.source}</p>
+                        <div class="flex justify-between mt-2 text-xs">
+                          <span class="text-gray-400">Publicado em: ${new Date(item.publishedDate).toLocaleDateString()}</span>
+                        </div>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
+                    `).join('')}
+                  </div>
+                `
+              })}
             </div>
             
-            {/* VPS Details */}
-            <div className="lg:col-span-2 space-y-6">
-              {selectedVps ? (
-                <>
-                  <div className="card rounded-lg p-6">
-                    <div className="flex justify-between items-center mb-4">
-                      <h3 className="text-xl font-semibold">{selectedVps.name}</h3>
-                      <div className="flex space-x-2">
-                        <button className="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
-                          <i className="fas fa-play mr-1"></i> Iniciar
-                        </button>
-                        <button className="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded text-sm">
-                          <i className="fas fa-redo mr-1"></i> Reiniciar
-                        </button>
-                        <button className="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm">
-                          <i className="fas fa-stop mr-1"></i> Parar
-                        </button>
+            <!-- News Details -->
+            <div class="lg:col-span-2">
+              ${selectedNews ? `
+                ${Card({
+                  children: `
+                    <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4 space-y-3 md:space-y-0">
+                      <h3 class="text-xl font-semibold">${selectedNews.title}</h3>
+                      <div class="flex space-x-2">
+                        ${Button({
+                          variant: 'primary',
+                          size: 'sm',
+                          icon: 'fa-edit',
+                          children: 'Editar'
+                        })}
+                        ${Button({
+                          variant: 'danger',
+                          size: 'sm',
+                          icon: 'fa-trash',
+                          children: 'Excluir'
+                        })}
                       </div>
                     </div>
                     
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-                      <div className="bg-gray-700/50 p-3 rounded-lg">
-                        <p className="text-gray-400 text-sm">Endereço IP</p>
-                        <p className="font-medium">{selectedVps.ip}</p>
-                      </div>
-                      <div className="bg-gray-700/50 p-3 rounded-lg">
-                        <p className="text-gray-400 text-sm">Status</p>
-                        <p className={`font-medium ${
-                          selectedVps.status === 'online' ? 'text-green-400' : 'text-red-400'
-                        }`}>
-                          {selectedVps.status === 'online' ? 'Online' : 'Offline'}
-                        </p>
-                      </div>
-                      <div className="bg-gray-700/50 p-3 rounded-lg">
-                        <p className="text-gray-400 text-sm">Última Atualização</p>
-                        <p className="font-medium">{new Date(selectedVps.lastUpdated).toLocaleString()}</p>
-                      </div>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+                      ${Card({
+                        children: `
+                          <p class="text-gray-400 text-sm">Fonte</p>
+                          <p class="font-medium">${selectedNews.source}</p>
+                        `
+                      })}
+                      ${Card({
+                        children: `
+                          <p class="text-gray-400 text-sm">Status</p>
+                          <span class="px-2 py-1 text-xs rounded-full bg-green-500/20 text-green-400">
+                            ${selectedNews.status}
+                          </span>
+                        `
+                      })}
+                      ${Card({
+                        children: `
+                          <p class="text-gray-400 text-sm">Data de Publicação</p>
+                          <p class="font-medium">${new Date(selectedNews.publishedDate).toLocaleString()}</p>
+                        `
+                      })}
+                      ${Card({
+                        children: `
+                          <p class="text-gray-400 text-sm">Autor</p>
+                          <p class="font-medium">${selectedNews.author}</p>
+                        `
+                      })}
                     </div>
                     
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                      <div>
-                        <h4 className="font-medium mb-3">Uso de CPU</h4>
-                        <canvas id="vpsCpuChart" height="150"></canvas>
-                      </div>
-                      <div>
-                        <h4 className="font-medium mb-3">Uso de Memória</h4>
-                        <canvas id="vpsMemoryChart" height="150"></canvas>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <div className="card rounded-lg">
-                    <div className="border-b border-gray-700 p-4">
-                      <h3 className="font-semibold">Terminal</h3>
-                    </div>
-                    <div className="p-4">
-                      <div className="terminal rounded-lg p-4 mb-4 h-48 overflow-y-auto">
-                        {terminalOutput.map(line => (
-                          <div 
-                            key={line.id} 
-                            className={`terminal-line ${line.type === 'command' ? 'text-blue-400' : line.type === 'error' ? 'text-red-400' : 'text-gray-400'}`}
-                          >
-                            {line.text}
-                          </div>
-                        ))}
-                        <div className="terminal-line text-green-400">
-                          <span className="mr-2">$</span>
-                          <span className="blink">_</span>
-                        </div>
+                    <div>
+                      <h4 class="font-medium mb-3">Conteúdo</h4>
+                      <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
+                        <p class="text-gray-300">${selectedNews.content}</p>
                       </div>
-                      
-                      <form onSubmit={handleCommandSubmit} className="flex">
-                        <input
-                          type="text"
-                          value={command}
-                          onChange={(e) => setCommand(e.target.value)}
-                          placeholder="Digite um comando..."
-                          className="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                        />
-                        <button 
-                          type="submit"
-                          className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-r-lg"
-                        >
-                          Executar
-                        </button>
-                      </form>
                     </div>
-                  </div>
-                </>
-              ) : (
-                <div className="card rounded-lg p-6 flex flex-col items-center justify-center h-full">
-                  <i className="fas fa-server text-4xl text-gray-500 mb-4"></i>
-                  <p className="text-gray-400">Selecione um servidor para visualizar os detalhes</p>
-                </div>
-              )}
+                  `
+                })}
+              ` : `
+                ${Card({
+                  className: 'flex flex-col items-center justify-center h-64',
+                  children: `
+                    <i class="fas fa-newspaper text-4xl text-gray-500 mb-4"></i>
+                    <p class="text-gray-400">Selecione uma notícia para visualizar os detalhes</p>
+                  `
+                })}
+              `}
             </div>
           </div>
         </div>
-      );
+      `;
     };
 
-    const BotsSection = ({ botList, setShowAddBotModal }) => {
-      const [selectedBot, setSelectedBot] = useState(null);
+    const AlertsSection = ({ alerts }) => {
+      const [selectedAlert, setSelectedAlert] = useState(null);
       
-      return (
-        <div className="space-y-6">
-          <div className="flex justify-between items-center">
-            <h3 className="text-lg font-semibold">Controle de Bots</h3>
-            <button 
-              onClick={() => setShowAddBotModal(true)}
-              className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"
-            >
-              <i className="fas fa-plus mr-2"></i>
-              Adicionar Bot
-            </button>
+      return `
+        <div class="space-y-6">
+          <div class="flex justify-between items-center">
+            <h3 class="text-lg font-semibold">Monitoramento de Alertas</h3>
+            ${Button({
+              onClick: "alert('Funcionalidade de configuração de alertas será implementada')",
+              variant: 'primary',
+              icon: 'fa-cog',
+              children: 'Configurar'
+            })}
           </div>
           
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            {/* Bot List */}
-            <div className="lg:col-span-1">
-              <div className="card rounded-lg">
-                <div className="border-b border-gray-700 p-4">
-                  <h3 className="font-semibold">Lista de Bots</h3>
-                </div>
-                <div className="p-4 space-y-3">
-                  {botList.map(bot => (
-                    <div 
-                      key={bot.id} 
-                      onClick={() => setSelectedBot(bot)}
-                      className={`p-3 rounded-lg cursor-pointer ${selectedBot?.id === bot.id ? 'bg-indigo-500/10 border border-indigo-500/30' : 'hover:bg-gray-700'}`}
-                    >
-                      <div className="flex justify-between items-center">
-                        <h4 className="font-medium">{bot.name}</h4>
-                        <span className={`px-2 py-1 text-xs rounded-full ${
-                          bot.status === 'running' ? 'bg-green-500/20 text-green-400' : 
-                          bot.status === 'stopped' ? 'bg-red-500/20 text-red-400' : 
-                          'bg-yellow-500/20 text-yellow-400'
-                        }`}>
-                          {bot.status === 'running' ? 'Ativo' : bot.status === 'stopped' ? 'Parado' : 'Pendente'}
-                        </span>
-                      </div>
-                      <p className="text-sm text-gray-400 capitalize">{bot.type}</p>
-                      <div className="flex justify-between mt-2 text-xs">
-                        <span className="text-gray-400">Última execução: {new Date(bot.lastRun).toLocaleTimeString()}</span>
+          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Alerts List -->
+            <div class="lg:col-span-1">
+              ${Card({
+                title: 'Lista de Alertas',
+                children: `
+                  <div class="space-y-3">
+                    ${alerts.map(alert => `
+                      <div 
+                        onclick="(${setSelectedAlert})(${JSON.stringify(alert)})"
+                        class="p-3 rounded-lg cursor-pointer transition-all ${
+                          selectedAlert?.id === alert.id ? 'bg-indigo-500/10 border border-indigo-500/30' : 'hover:bg-gray-700'
+                        }"
+                      >
+                        <div class="flex justify-between items-center">
+                          <h4 class="font-medium truncate">${alert.title}</h4>
+                          <span class="px-2 py-1 text-xs rounded-full bg-red-500/20 text-red-400">
+                            ${alert.severity}
+                          </span>
+                        </div>
+                        <p class="text-sm text-gray-400 truncate">${alert.source}</p>
+                        <div class="flex justify-between mt-2 text-xs">
+                          <span class="text-gray-400">Detectado em: ${new Date(alert.detectedAt).toLocaleTimeString()}</span>
+                        </div>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
+                    `).join('')}
+                  </div>
+                `
+              })}
             </div>
             
-            {/* Bot Details */}
-            <div className="lg:col-span-2">
-              {selectedBot ? (
-                <div className="card rounded-lg p-6">
-                  <div className="flex justify-between items-center mb-4">
-                    <h3 className="text-xl font-semibold">{selectedBot.name}</h3>
-                    <div className="flex space-x-2">
-                      <button className={`px-3 py-1 rounded text-sm ${
-                        selectedBot.status === 'running' ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'
-                      } text-white`}
-                      >
-                        <i className={`fas ${selectedBot.status === 'running' ? 'fa-stop' : 'fa-play'} mr-1`}></i>
-                        {selectedBot.status === 'running' ? 'Parar' : 'Iniciar'}
-                      </button>
-                      <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm">
-                        <i className="fas fa-cog mr-1"></i> Configurar
-                      </button>
-                    </div>
-                  </div>
-                  
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-                    <div className="bg-gray-700/50 p-3 rounded-lg">
-                      <p className="text-gray-400 text-sm">Tipo</p>
-                      <p className="font-medium capitalize">{selectedBot.type}</p>
-                    </div>
-                    <div className="bg-gray-700/50 p-3 rounded-lg">
-                      <p className="text-gray-400 text-sm">Status</p>
-                      <p className={`font-medium ${
-                        selectedBot.status === 'running' ? 'text-green-400' : 
-                        selectedBot.status === 'stopped' ? 'text-red-400' : 
-                        'text-yellow-400'
-                      }`}>
-                        {selectedBot.status === 'running' ? 'Ativo' : 
-                         selectedBot.status === 'stopped' ? 'Parado' : 
-                         'Pendente'}
-                      </p>
-                    </div>
-                    <div className="bg-gray-700/50 p-3 rounded-lg">
-                      <p className="text-gray-400 text-sm">Última Execução</p>
-                      <p className="font-medium">{new Date(selectedBot.lastRun).toLocaleString()}</p>
+            <!-- Alert Details -->
+            <div class="lg:col-span-2">
+              ${selectedAlert ? `
+                ${Card({
+                  children: `
+                    <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4 space-y-3 md:space-y-0">
+                      <h3 class="text-xl font-semibold">${selectedAlert.title}</h3>
+                      <div class="flex space-x-2">
+                        ${Button({
+                          variant: 'primary',
+                          size: 'sm',
+                          icon: 'fa-check',
+                          children: 'Resolver'
+                        })}
+                        ${Button({
+                          variant: 'danger',
+                          size: 'sm',
+                          icon: 'fa-trash',
+                          children: 'Ignorar'
+                        })}
+                      </div>
                     </div>
-                    <div className="bg-gray-700/50 p-3 rounded-lg">
-                      <p className="text-gray-400 text-sm">Próxima Execução</p>
-                      <p className="font-medium">
-                        {selectedBot.nextRun ? new Date(selectedBot.nextRun).toLocaleString() : 'Não agendado'}
-                      </p>
+                    
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+                      ${Card({
+                        children: `
+                          <p class="text-gray-400 text-sm">Fonte</p>
+                          <p class="font-medium">${selectedAlert.source}</p>
+                        `
+                      })}
+                      ${Card({
+                        children: `
+                          <p class="text-gray-400 text-sm">Gravidade</p>
+                          <span class="px-2 py-1 text-xs rounded-full bg-red-500/20 text-red-400">
+                            ${selectedAlert.severity}
+                          </span>
+                        `
+                      })}
+                      ${Card({
+                        children: `
+                          <p class="text-gray-400 text-sm">Detectado em</p>
+                          <p class="font-medium">${new Date(selectedAlert.detectedAt).toLocaleString()}</p>
+                        `
+                      })}
+                      ${Card({
+                        children: `
+                          <p class="text-gray-400 text-sm">Status</p>
+                          <span class="px-2 py-1 text-xs rounded-full bg-yellow-500/20 text-yellow-400">
+                            ${selectedAlert.status}
+                          </span>
+                        `
+                      })}
                     </div>
-                  </div>
-                  
-                  <div>
-                    <h4 className="font-medium mb-3">Logs de Execução</h4>
-                    <div className="bg-gray-800 border border-gray-700 rounded-lg p-4 h-48 overflow-y-auto">
-                      {selectedBot.logs.map((log, index) => (
-                        <div key={index} className="text-sm font-mono mb-1">
-                          <span className="text-gray-500">[{new Date().toLocaleTimeString()}]</span> {log}
-                        </div>
-                      ))}
+                    
+                    <div>
+                      <h4 class="font-medium mb-3">Detalhes</h4>
+                      <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
+                        <p class="text-gray-300">${selectedAlert.details}</p>
+                      </div>
                     </div>
-                  </div>
-                </div>
-              ) : (
-                <div className="card rounded-lg p-6 flex flex-col items-center justify-center h-full">
-                  <i className="fas fa-robot text-4xl text-gray-500 mb-4"></i>
-                  <p className="text-gray-400">Selecione um bot para visualizar os detalhes</p>
-                </div>
-              )}
+                  `
+                })}
+              ` : `
+                ${Card({
+                  className: 'flex flex-col items-center justify-center h-64',
+                  children: `
+                    <i class="fas fa-bell text-4xl text-gray-500 mb-4"></i>
+                    <p class="text-gray-400">Selecione um alerta para visualizar os detalhes</p>
+                  `
+                })}
+              `}
             </div>
           </div>
         </div>
-      );
+      `;
     };
 
-    const ContentSection = ({ contentList, setShowAddContentModal }) => {
-      const [selectedContent, setSelectedContent] = useState(null);
-      const [filter, setFilter] = useState('all');
-      
-      const filteredContent = contentList.filter(content => {
-        if (filter === 'all') return true;
-        return content.status === filter;
+    const ReportsSection = () => {
+      const [reportData, setReportData] = useState({
+        title: '',
+        description: '',
+        category: 'spam',
+        urgency: 'medium'
       });
+      const [isSubmitting, setIsSubmitting] = useState(false);
       
-      return (
-        <div className="space-y-6">
-          <div className="flex justify-between items-center">
-            <h3 className="text-lg font-semibold">Gestão de Conteúdo</h3>
-            <button 
-              onClick={() => setShowAddContentModal(true)}
-              className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"
-            >
-              <i className="fas fa-plus mr-2"></i>
-              Novo Conteúdo
-            </button>
-          </div>
-          
-          <div className="flex space-x-2 overflow-x-auto pb-2">
-            <button 
-              onClick={() => setFilter('all')}
-              className={`px-4 py-1 rounded-full text-sm whitespace-nowrap ${
-                filter === 'all' ? 'bg-indigo-600 text-white' : 'bg-gray-700 hover:bg-gray-600'
-              }`}
-            >
-              Todos
-            </button>
-            <button 
-              onClick={() => setFilter('pending')}
-              className={`px-4 py-1 rounded-full text-sm whitespace-nowrap ${
-                filter === 'pending' ? 'bg-yellow-600 text-white' : 'bg-gray-700 hover:bg-gray-600'
-              }`}
-            >
-              Pendentes
-            </button>
-            <button 
-              onClick={() => setFilter('approved')}
-              className={`px-4 py-1 rounded-full text-sm whitespace-nowrap ${
-                filter === 'approved' ? 'bg-green-600 text-white' : 'bg-gray-700 hover:bg-gray-600'
-              }`}
-            >
-              Aprovados
-            </button>
-            <button 
-              onClick={() => setFilter('rejected')}
-              className={`px-4 py-1 rounded-full text-sm whitespace-nowrap ${
-                filter === 'rejected' ? 'bg-red-600 text-white' : 'bg-gray-700 hover:bg-gray-600'
-              }`}
-            >
-              Rejeitados
-            </button>
+      const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        
+        try {
+          await ApiService.postReport(reportData);
+          alert('Denúncia enviada com sucesso!');
+          setReportData({
+            title: '',
+            description: '',
+            category: 'spam',
+            urgency: 'medium'
+          });
+        } catch (error) {
+          alert('Erro ao enviar denúncia. Por favor, tente novamente.');
+        } finally {
+          setIsSubmitting(false);
+        }
+      };
+      
+      return `
+        <div class="space-y-6">
+          <div class="flex justify-between items-center">
+            <h3 class="text-lg font-semibold">Registro de Denúncias</h3>
           </div>
           
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            {/* Content List */}
-            <div className="lg:col-span-1">
-              <div className="card rounded-lg">
-                <div className="border-b border-gray-700 p-4">
-                  <h3 className="font-semibold">Lista de Conteúdos</h3>
-                </div>
-                <div className="p-4 space-y-3">
-                  {filteredContent.map(content => (
-                    <div 
-                      key={content.id} 
-                      onClick={() => setSelectedContent(content)}
-                      className={`p-3 rounded-lg cursor-pointer ${selectedContent?.id === content.id ? 'bg-indigo-500/10 border border-indigo-500/30' : 'hover:bg-gray-700'}`}
-                    >
-                      <div className="flex justify-between items-center">
-                        <h4 className="font-medium truncate">{content.title}</h4>
-                        <span className={`px-2 py-1 text-xs rounded-full ${
-                          content.status === 'approved' ? 'bg-green-500/20 text-green-400' : 
-                          content.status === 'pending' ? 'bg-yellow-500/20 text-yellow-400' : 
-                          'bg-red-500/20 text-red-400'
-                        }`}>
-                          {content.status === 'approved' ? 'Aprovado' : 
-                           content.status === 'pending' ? 'Pendente' : 
-                           'Rejeitado'}
-                        </span>
-                      </div>
-                      <p className="text-sm text-gray-400">{content.source}</p>
-                      <div className="flex justify-between mt-2 text-xs">
-                        <span className="text-gray-400">Criado em: {new Date(content.created).toLocaleDateString()}</span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-            
-            {/* Content Details */}
-            <div className="lg:col-span-2">
-              {selectedContent ? (
-                <div className="card rounded-lg p-6">
-                  <div className="flex justify-between items-center mb-4">
-                    <h3 className="text-xl font-semibold">{selectedContent.title}</h3>
-                    <div className="flex space-x-2">
-                      {selectedContent.status === 'pending' && (
-                        <>
-                          <button className="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
-                            <i className="fas fa-check mr-1"></i> Aprovar
-                          </button>
-                          <button className="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm">
-                            <i className="fas fa-times mr-1"></i> Rejeitar
-                          </button>
-                        </>
-                      )}
-                      <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm">
-                        <i className="fas fa-edit mr-1"></i> Editar
-                      </button>
-                    </div>
+          ${Card({
+            children: `
+              <form onsubmit="event.preventDefault(); (${handleSubmit})(event);">
+                <div class="space-y-4">
+                  <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-1">Título</label>
+                    <input
+                      type="text"
+                      value="${reportData.title}"
+                      onchange="(${setReportData})({...${JSON.stringify(reportData)}, title: event.target.value})"
+                      placeholder="Resumo da denúncia"
+                      class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                      required
+                    />
                   </div>
                   
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-                    <div className="bg-gray-700/50 p-3 rounded-lg">
-                      <p className="text-gray-400 text-sm">Fonte</p>
-                      <p className="font-medium">{selectedContent.source}</p>
-                    </div>
-                    <div className="bg-gray-700/50 p-3 rounded-lg">
-                      <p className="text-gray-400 text-sm">Status</p>
-                      <p className={`font-medium ${
-                        selectedContent.status === 'approved' ? 'text-green-400' : 
-                        selectedContent.status === 'pending' ? 'text-yellow-400' : 
-                        'text-red-400'
-                      }`}>
-                        {selectedContent.status === 'approved' ? 'Aprovado' : 
-                         selectedContent.status === 'pending' ? 'Pendente' : 
-                         'Rejeitado'}
-                      </p>
-                    </div>
-                    <div className="bg-gray-700/50 p-3 rounded-lg">
-                      <p className="text-gray-400 text-sm">Criado em</p>
-                      <p className="font-medium">{new Date(selectedContent.created).toLocaleString()}</p>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-1">Descrição</label>
+                    <textarea
+                      value="${reportData.description}"
+                      onchange="(${setReportData})({...${JSON.stringify(reportData)}, description: event.target.value})"
+                      placeholder="Descreva detalhadamente o problema encontrado"
+                      class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 h-32"
+                      required
+                    ></textarea>
+                  </div>
+                  
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                      <label class="block text-sm font-medium text-gray-400 mb-1">Categoria</label>
+                      <select
+                        value="${reportData.category}"
+                        onchange="(${setReportData})({...${JSON.stringify(reportData)}, category: event.target.value})"
+                        class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                      >
+                        <option value="spam">Spam</option>
+                        <option value="fake_news">Fake News</option>
+                        <option value="inappropriate">Conteúdo Inapropriado</option>
+                        <option value="other">Outro</option>
+                      </select>
                     </div>
-                    <div className="bg-gray-700/50 p-3 rounded-lg">
-                      <p className="text-gray-400 text-sm">Publicado em</p>
-                      <p className="font-medium">
-                        {selectedContent.published ? new Date(selectedContent.published).toLocaleString() : 'Não publicado'}
-                      </p>
+                    
+                    <div>
+                      <label class="block text-sm font-medium text-gray-400 mb-1">Urgência</label>
+                      <select
+                        value="${reportData.urgency}"
+                        onchange="(${setReportData})({...${JSON.stringify(reportData)}, urgency: event.target.value})"
+                        class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                      >
+                        <option value="low">Baixa</option>
+                        <option value="medium">Média</option>
+                        <option value="high">Alta</option>
+                      </select>
                     </div>
                   </div>
                   
-                  <div>
-                    <h4 className="font-medium mb-3">Conteúdo</h4>
-                    <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
-                      <p className="text-gray-300">
-                        Este é um exemplo de conteúdo gerado automaticamente pelo sistema de IA. 
-                        O conteúdo real seria exibido aqui com formatação adequada.
-                      </p>
-                      <p className="text-gray-300 mt-2">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.
-                      </p>
-                    </div>
+                  <div class="flex justify-end pt-4">
+                    ${Button({
+                      type: 'submit',
+                      variant: 'primary',
+                      disabled: isSubmitting,
+                      children: isSubmitting ? `
+                        <i class="fas fa-circle-notch fa-spin mr-2 loading-spinner"></i>
+                        Enviando...
+                      ` : 'Enviar Denúncia'
+                    })}
                   </div>
                 </div>
-              ) : (
-                <div className="card rounded-lg p-6 flex flex-col items-center justify-center h-full">
-                  <i className="fas fa-newspaper text-4xl text-gray-500 mb-4"></i>
-                  <p className="text-gray-400">Selecione um conteúdo para visualizar os detalhes</p>
-                </div>
-              )}
-            </div>
-          </div>
+              </form>
+            `
+          })}
         </div>
-      );
+      `;
     };
 
-    const SettingsSection = ({ user, darkMode, toggleDarkMode }) => {
-      const [currentTab, setCurrentTab] = useState('profile');
+    // Funções auxiliares
+    function useState(initialValue) {
+      let state = initialValue;
+      const listeners = [];
       
-      return (
-        <div className="space-y-6">
-          <h3 className="text-lg font-semibold">Configurações</h3>
-          
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-            {/* Settings Menu */}
-            <div className="lg:col-span-1">
-              <div className="card rounded-lg">
-                <div className="border-b border-gray-700 p-4">
-                  <h3 className="font-semibold">Menu</h3>
-                </div>
-                <div className="p-4 space-y-2">
-                  <button 
-                    onClick={() => setCurrentTab('profile')}
-                    className={`w-full text-left p-3 rounded-lg ${
-                      currentTab === 'profile' ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'
-                    }`}
-                  >
-                    <i className="fas fa-user mr-2"></i> Perfil
-                  </button>
-                  <button 
-                    onClick={() => setCurrentTab('account')}
-                    className={`w-full text-left p-3 rounded-lg ${
-                      currentTab === 'account' ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'
-                    }`}
-                  >
-                    <i className="fas fa-cog mr-2"></i> Conta
-                  </button>
-                  <button 
-                    onClick={() => setCurrentTab('security')}
-                    className={`w-full text-left p-3 rounded-lg ${
-                      currentTab === 'security' ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'
-                    }`}
-                  >
-                    <i className="fas fa-shield-alt mr-2"></i> Segurança
-                  </button>
-                  <button 
-                    onClick={() => setCurrentTab('notifications')}
-                    className={`w-full text-left p-3 rounded-lg ${
-                      currentTab === 'notifications' ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'
-                    }`}
-                  >
-                    <i className="fas fa-bell mr-2"></i> Notificações
-                  </button>
-                  <button 
-                    onClick={() => setCurrentTab('appearance')}
-                    className={`w-full text-left p-3 rounded-lg ${
-                      currentTab === 'appearance' ? 'bg-indigo-500/20 text-indigo-400' : 'hover:bg-gray-700'
-                    }`}
-                  >
-                    <i className="fas fa-palette mr-2"></i> Aparência
-                  </button>
-                </div>
-              </div>
-            </div>
-            
-            {/* Settings Content */}
-            <div className="lg:col-span-3">
-              <div className="card rounded-lg p-6">
-                {currentTab === 'profile' && (
-                  <div>
-                    <h3 className="text-xl font-semibold mb-6">Perfil</h3>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                      <div>
-                        <label className="block text-sm font-medium text-gray-400 mb-1">Nome</label>
-                        <input 
-                          type="text" 
-                          defaultValue={user.name}
-                          className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium text-gray-400 mb-1">Email</label>
-                        <input 
-                          type="email" 
-                          defaultValue={user.email}
-                          className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium text-gray-400 mb-1">Cargo</label>
-                        <input 
-                          type="text" 
-                          defaultValue={user.role}
-                          className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                          disabled
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium text-gray-400 mb-1">Foto</label>
-                        <div className="flex items-center">
-                          <div className="w-16 h-16 rounded-full bg-indigo-500 flex items-center justify-center mr-4">
-                            <i className="fas fa-user text-white text-xl"></i>
-                          </div>
-                          <button className="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
-                            Alterar
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="mt-6 flex justify-end">
-                      <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg">
-                        Salvar Alterações
-                      </button>
-                    </div>
-                  </div>
-                )}
-                
-                {currentTab === 'account' && (
-                  <div>
-                    <h3 className="text-xl font-semibold mb-6">Configurações da Conta</h3>
-                    <div className="space-y-6">
-                      <div className="bg-gray-700/50 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3">Plano Atual</h4>
-                        <div className="flex items-center justify-between">
-                          <div>
-                            <p className="text-2xl font-bold">Premium</p>
-                            <p className="text-gray-400">Acesso completo a todos os recursos</p>
-                          </div>
-                          <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
-                            Gerenciar Plano
-                          </button>
-                        </div>
-                      </div>
-                      
-                      <div className="bg-gray-700/50 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3">Limites de Uso</h4>
-                        <div className="space-y-3">
-                          <div>
-                            <div className="flex justify-between mb-1">
-                              <span className="text-gray-400">VPS</span>
-                              <span className="font-medium">2/5</span>
-                            </div>
-                            <div className="w-full bg-gray-600 rounded-full h-2">
-                              <div className="bg-indigo-600 h-2 rounded-full" style={{ width: '40%' }}></div>
-                            </div>
-                          </div>
-                          <div>
-                            <div className="flex justify-between mb-1">
-                              <span className="text-gray-400">Bots</span>
-                              <span className="font-medium">3/10</span>
-                            </div>
-                            <div className="w-full bg-gray-600 rounded-full h-2">
-                              <div className="bg-indigo-600 h-2 rounded-full" style={{ width: '30%' }}></div>
-                            </div>
-                          </div>
-                          <div>
-                            <div className="flex justify-between mb-1">
-                              <span className="text-gray-400">Armazenamento</span>
-                              <span className="font-medium">15GB/50GB</span>
-                            </div>
-                            <div className="w-full bg-gray-600 rounded-full h-2">
-                              <div className="bg-indigo-600 h-2 rounded-full" style={{ width: '30%' }}></div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      
-                      <div className="bg-red-500/10 border border-red-500/30 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3 text-red-400">Zona de Perigo</h4>
-                        <div className="flex justify-between items-center">
-                          <div>
-                            <p className="text-sm">Excluir permanentemente sua conta</p>
-                            <p className="text-xs text-gray-400">Esta ação não pode ser desfeita</p>
-                          </div>
-                          <button className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm">
-                            Excluir Conta
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-                
-                {currentTab === 'security' && (
-                  <div>
-                    <h3 className="text-xl font-semibold mb-6">Segurança</h3>
-                    <div className="space-y-6">
-                      <div className="bg-gray-700/50 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3">Alterar Senha</h4>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                          <div>
-                            <label className="block text-sm font-medium text-gray-400 mb-1">Senha Atual</label>
-                            <input 
-                              type="password" 
-                              className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                            />
-                          </div>
-                          <div>
-                            <label className="block text-sm font-medium text-gray-400 mb-1">Nova Senha</label>
-                            <input 
-                              type="password" 
-                              className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                            />
-                          </div>
-                          <div>
-                            <label className="block text-sm font-medium text-gray-400 mb-1">Confirmar Nova Senha</label>
-                            <input 
-                              type="password" 
-                              className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                            />
-                          </div>
-                        </div>
-                        <div className="mt-4 flex justify-end">
-                          <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg">
-                            Alterar Senha
-                          </button>
-                        </div>
-                      </div>
-                      
-                      <div className="bg-gray-700/50 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3">Autenticação de Dois Fatores</h4>
-                        <div className="flex justify-between items-center">
-                          <div>
-                            <p className="font-medium">2FA Desativado</p>
-                            <p className="text-sm text-gray-400">Proteja sua conta com um segundo fator de autenticação</p>
-                          </div>
-                          <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
-                            Ativar 2FA
-                          </button>
-                        </div>
-                      </div>
-                      
-                      <div className="bg-gray-700/50 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3">Sessões Ativas</h4>
-                        <div className="space-y-3">
-                          <div className="flex justify-between items-center p-3 bg-gray-800 rounded-lg">
-                            <div>
-                              <p className="font-medium">Chrome - Windows</p>
-                              <p className="text-sm text-gray-400">192.168.1.5 - Ativo agora</p>
-                            </div>
-                            <button className="text-red-500 hover:text-red-700">
-                              <i className="fas fa-sign-out-alt"></i> Sair
-                            </button>
-                          </div>
-                          <div className="flex justify-between items-center p-3 bg-gray-800 rounded-lg">
-                            <div>
-                              <p className="font-medium">Firefox - Linux</p>
-                              <p className="text-sm text-gray-400">192.168.1.10 - 2 horas atrás</p>
-                            </div>
-                            <button className="text-red-500 hover:text-red-700">
-                              <i className="fas fa-sign-out-alt"></i> Sair
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-                
-                {currentTab === 'notifications' && (
-                  <div>
-                    <h3 className="text-xl font-semibold mb-6">Notificações</h3>
-                    <div className="space-y-6">
-                      <div className="bg-gray-700/50 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3">Preferências de Notificação</h4>
-                        <div className="space-y-4">
-                          <div className="flex justify-between items-center">
-                            <div>
-                              <p className="font-medium">Notificações por Email</p>
-                              <p className="text-sm text-gray-400">Receba notificações importantes por email</p>
-                            </div>
-                            <label className="relative inline-flex items-center cursor-pointer">
-                              <input type="checkbox" className="sr-only peer" defaultChecked />
-                              <div className="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
-                            </label>
-                          </div>
-                          <div className="flex justify-between items-center">
-                            <div>
-                              <p className="font-medium">Notificações Push</p>
-                              <p className="text-sm text-gray-400">Receba notificações no navegador</p>
-                            </div>
-                            <label className="relative inline-flex items-center cursor-pointer">
-                              <input type="checkbox" className="sr-only peer" />
-                              <div className="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
-                            </label>
-                          </div>
-                          <div className="flex justify-between items-center">
-                            <div>
-                              <p className="font-medium">Alertas de Segurança</p>
-                              <p className="text-sm text-gray-400">Receba alertas sobre atividades suspeitas</p>
-                            </div>
-                            <label className="relative inline-flex items-center cursor-pointer">
-                              <input type="checkbox" className="sr-only peer" defaultChecked />
-                              <div className="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
-                            </label>
-                          </div>
-                        </div>
-                      </div>
-                      
-                      <div className="bg-gray-700/50 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3">Tipos de Notificação</h4>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                          <div className="flex items-center">
-                            <input type="checkbox" id="notif-vps" className="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500" defaultChecked />
-                            <label htmlFor="notif-vps" className="ml-2 text-sm font-medium text-gray-300">Status da VPS</label>
-                          </div>
-                          <div className="flex items-center">
-                            <input type="checkbox" id="notif-bots" className="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500" defaultChecked />
-                            <label htmlFor="notif-bots" className="ml-2 text-sm font-medium text-gray-300">Atividade de Bots</label>
-                          </div>
-                          <div className="flex items-center">
-                            <input type="checkbox" id="notif-content" className="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500" defaultChecked />
-                            <label htmlFor="notif-content" className="ml-2 text-sm font-medium text-gray-300">Conteúdo Pendente</label>
-                          </div>
-                          <div className="flex items-center">
-                            <input type="checkbox" id="notif-security" className="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500" defaultChecked />
-                            <label htmlFor="notif-security" className="ml-2 text-sm font-medium text-gray-300">Alertas de Segurança</label>
-                          </div>
-                          <div className="flex items-center">
-                            <input type="checkbox" id="notif-updates" className="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500" />
-                            <label htmlFor="notif-updates" className="ml-2 text-sm font-medium text-gray-300">Atualizações do Sistema</label>
-                          </div>
-                          <div className="flex items-center">
-                            <input type="checkbox" id="notif-news" className="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500" />
-                            <label htmlFor="notif-news" className="ml-2 text-sm font-medium text-gray-300">Novidades e Promoções</label>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-                
-                {currentTab === 'appearance' && (
-                  <div>
-                    <h3 className="text-xl font-semibold mb-6">Aparência</h3>
-                    <div className="space-y-6">
-                      <div className="bg-gray-700/50 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3">Tema</h4>
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                          <button 
-                            onClick={toggleDarkMode}
-                            className={`p-4 rounded-lg border ${darkMode ? 'border-indigo-500 bg-indigo-500/10' : 'border-gray-600 hover:border-gray-500'}`}
-                          >
-                            <div className="flex flex-col items-center">
-                              <i className={`fas ${darkMode ? 'fa-moon' : 'fa-sun'} text-2xl mb-2 ${darkMode ? 'text-indigo-400' : 'text-yellow-400'}`}></i>
-                              <span>{darkMode ? 'Escuro' : 'Claro'}</span>
-                            </div>
-                          </button>
-                          <button className="p-4 rounded-lg border border-gray-600 hover:border-gray-500">
-                            <div className="flex flex-col items-center">
-                              <i className="fas fa-desktop text-2xl mb-2 text-gray-400"></i>
-                              <span>Seguir Sistema</span>
-                            </div>
-                          </button>
-                        </div>
-                      </div>
-                      
-                      <div className="bg-gray-700/50 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3">Densidade da Interface</h4>
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                          <button className="p-4 rounded-lg border border-gray-600 hover:border-gray-500">
-                            <div className="flex flex-col items-center">
-                              <i className="fas fa-compress text-2xl mb-2 text-gray-400"></i>
-                              <span>Compacto</span>
-                            </div>
-                          </button>
-                          <button className="p-4 rounded-lg border border-indigo-500 bg-indigo-500/10">
-                            <div className="flex flex-col items-center">
-                              <i className="fas fa-expand text-2xl mb-2 text-indigo-400"></i>
-                              <span>Confortável</span>
-                            </div>
-                          </button>
-                          <button className="p-4 rounded-lg border border-gray-600 hover:border-gray-500">
-                            <div className="flex flex-col items-center">
-                              <i className="fas fa-text-height text-2xl mb-2 text-gray-400"></i>
-                              <span>Espaçoso</span>
-                            </div>
-                          </button>
-                        </div>
-                      </div>
-                      
-                      <div className="bg-gray-700/50 p-4 rounded-lg">
-                        <h4 className="font-medium mb-3">Cor de Destaque</h4>
-                        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
-                          {['indigo', 'blue', 'green', 'yellow', 'red', 'purple'].map(color => (
-                            <button 
-                              key={color}
-                              className={`w-10 h-10 rounded-full bg-${color}-500 flex items-center justify-center`}
-                            >
-                              {color === 'indigo' && <i className="fas fa-check text-white"></i>}
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    };
-
-    // Componentes de modal
-    const AddVpsModal = ({ setShowAddVpsModal, setVpsList }) => {
-      const [formData, setFormData] = useState({
-        name: '',
-        ip: '',
-        sshPort: '22',
-        sshUser: 'root',
-        sshKey: '',
-        tags: []
-      });
+      function setState(newValue) {
+        state = typeof newValue === 'function' ? newValue(state) : newValue;
+        listeners.forEach(listener => listener(state));
+      }
       
-      const handleSubmit = (e) => {
-        e.preventDefault();
-        const newVps = {
-          id: Date.now(),
-          name: formData.name,
-          ip: formData.ip,
-          status: 'online',
-          cpu: 0,
-          memory: 0,
-          storage: 0,
-          containers: 0,
-          lastUpdated: new Date()
-        };
-        
-        setVpsList(prev => [...prev, newVps]);
-        setShowAddVpsModal(false);
-      };
+      function useEffect(callback, deps) {
+        callback();
+      }
       
-      return (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-gray-800 rounded-lg border border-gray-700 w-full max-w-2xl">
-            <div className="border-b border-gray-700 p-4 flex justify-between items-center">
-              <h3 className="font-semibold">Adicionar Nova VPS</h3>
-              <button 
-                onClick={() => setShowAddVpsModal(false)}
-                className="text-gray-400 hover:text-white"
-              >
-                <i className="fas fa-times"></i>
-              </button>
-            </div>
-            
-            <form onSubmit={handleSubmit} className="p-6">
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-400 mb-1">Nome da VPS</label>
-                  <input 
-                    type="text" 
-                    value={formData.name}
-                    onChange={(e) => setFormData({...formData, name: e.target.value})}
-                    className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                    required
-                  />
-                </div>
-                
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-400 mb-1">Endereço IP</label>
-                    <input 
-                      type="text"
+      function render() {
+        document.getElementById('root').innerHTML = App();
+      }
+      
+      listeners.push(render);
+      
+      return [state, setState, useEffect];
+    }
+
+    // Inicialização
+    const [darkMode, setDarkMode, useEffect] = useState(true);
+    document.getElementById('root').innerHTML = App();
+  </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dandydow/dashmaster" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>
\ No newline at end of file
