Spaces:

dandydow
/

dashmaster

Running

App Files Files Community

dandydow commited on Apr 26, 2025

Commit

6f0f303

verified ·

1 Parent(s): e9d115c

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1576 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Dashmaster
-emoji: 🌖
-colorFrom: blue
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: dashmaster
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1576 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Painel de Controle Inteligente</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>
+  <style>
+    .dark {
+      --bg-primary: #1a1a2e;
+      --bg-secondary: #16213e;
+      --text-primary: #e6e6e6;
+      --text-secondary: #b8b8b8;
+      --accent: #4f46e5;
+    }
+    .light {
+      --bg-primary: #f8fafc;
+      --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;
+    }
+    .sidebar {
+      background-color: var(--bg-secondary);
+      border-right: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .card {
+      background-color: var(--bg-secondary);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+    .card:hover {
+      transform: translateY(-2px);
+      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;
+    }
+    .container-status.running {
+      border-left-color: #10b981;
+    }
+    .container-status.stopped {
+      border-left-color: #ef4444;
+    }
+    .container-status.restarting {
+      border-left-color: #f59e0b;
+    }
+  </style>
+</head>
+<body class="dark">
+  <div id="root"></div>
+  <script type="text/babel">
+    const { useState, useEffect } = React;
+    // 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 toggleDarkMode = () => {
+        setDarkMode(!darkMode);
+        document.body.classList.toggle('dark');
+        document.body.classList.toggle('light');
+      };
+      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 renderSection = () => {
+        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}
+            />;
+          default:
+            return <DashboardSection
+              vpsList={vpsList}
+              botList={botList}
+              contentList={contentList}
+              notifications={notifications}
+            />;
+        }
+      };
+      return (
+        <div className="flex h-screen overflow-hidden">
+          {/* Sidebar */}
+          <Sidebar
+            activeSection={activeSection}
+            setActiveSection={setActiveSection}
+            user={user}
+            notifications={notifications}
+          />
+          {/* 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 */}
+            <main className="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;
+      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>
+            </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>
+                  </li>
+                </ul>
+              </div>
+            </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>
+                <div className="ml-3">
+                  <p className="text-sm font-medium">{user.name}</p>
+                  <p className="text-xs text-gray-400">{user.role}</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 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;
+        }
+      };
+      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>
+          <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>
+              <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"
+              />
+            </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>
+            )}
+          </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;
+      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>
+                </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>
+                </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>
+                </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>
+                </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>
+                    </div>
+                    <div>
+                      <p className="text-sm">{notification.message}</p>
+                      <p className="text-xs text-gray-400">{new Date(notification.date).toLocaleString()}</p>
+                    </div>
+                  </div>
+                ))}
+              </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 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>
+          </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>
+                    </div>
+                  ))}
+                </div>
+              </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>
+                      </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>
+                    <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>
+                      <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>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    };
+    const BotsSection = ({ botList, setShowAddBotModal }) => {
+      const [selectedBot, setSelectedBot] = 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>
+          </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>
+                    </div>
+                  ))}
+                </div>
+              </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>
+                    </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>
+                  </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>
+                  </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>
+              )}
+            </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;
+      });
+      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>
+          </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>
+                  </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>
+                    <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>
+                  </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>
+                </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>
+        </div>
+      );
+    };
+    const SettingsSection = ({ user, darkMode, toggleDarkMode }) => {
+      const [currentTab, setCurrentTab] = useState('profile');
+      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: []
+      });
+      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);
+      };
+      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"
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ Fazer modificações como: Painel. Dentro dele Será monitorado os projetos separedos por conteiner (Docker), mostrar o ip da servidor conectado. em monitoramento usar cores no bloco completo mudando de tom de cor conforme for sendo usando (tom mais fraco menos usa, tom mais forte mais uso) mostrar trafego na rede. Opções de incluir app externo tipo n8n, evolution, redis, sql, etx. Usar com mo delo e ideia o Ease Panel. Deixar esse Painel Mais moderno e com funcões que cubra, tudo que usa VPS precise. criar contaas de emal, Opçõa de escolher o nome do Panel Baseado na VPS para maio controle. Criar o front e backend juntos, pronto para usar.
2	+ Recomeçar: Primeira decisão: Recomeçar com stack moderna Sim, refaz com stack real de app, porque HTML estático vai limitar muito: 🔧 Tech Stack ideal: Frontend: React + Tailwind + ShadCN UI (leve, moderno e estiloso) Usa Vite ou Next.js pra acelerar Backend/API: Node.js + Fastify (rápido) ou Python + FastAPI (perfeito se os bots forem Python) Cria endpoints REST ou GraphQL Banco: PostgreSQL ou MongoDB (dependendo da estrutura dos dados) Redis (pra cache, fila, jobs de bot e IA) Auth: JWT com roles ou integração com Auth0 ou Clerk Orquestração de tarefas: n8n (que você já usa) + Rasa + MCP → Integrado por API Hosting: VPS ou mesmo um Docker Swarm / Portainer se quiser escalar ou monitorar múltiplas VPS. Funcionalidades do painel (Free/Premium futuramente) Módulo 1 – Controle de VPS Adicionar/remover VPS (com conexão por SSH ou API tipo Agent) Status de CPU, RAM, processos, uso de disco (via script) Logs em tempo real (tail) Módulo 2 – Bots & Automações Criar/executar/pausar bots (por script ou trigger) Visualizar histórico de execuções Configurar fluxos com IA (Rasa, OpenAI, Ollama, etc) API Key pessoal para usar os bots remotamente Módulo 3 – IA & Conteúdo Criar artigo/matéria a partir de scrapings + IA Permitir aprovação manual antes de publicar Crosspost (Telegram, Twitter, site, etc) Módulo 4 – Sistema de Permissões Controle de acesso (admin, editor, bot user) Modo anônimo (pra denúncia segura, se quiser manter) Módulo 5 – SaaS Premium Conta gratuita com 1 VPS e bots básicos Conta paga com mais VPSs, scraping, integração Telegram, scraping avançado, IA com contexto, Estrutura de pastas sugerida /painel-ai-control ├── frontend/ (React) │ ├── src/components/ │ ├── src/pages/ │ ├── src/services/api.js │ └── ... ├── backend/ (Node.js ou FastAPI) │ ├── api/ │ ├── bots/ │ ├── controllers/ │ ├── database/ │ └── ... ├── docker-compose.yml ├── .env Refaz o painel com frontend em React + Tailwind, e já prepara pra conectar com um backend (Node.js ou FastAPI). O front não precisa ser 100% funcional ainda, mas precisa estar pronto pra receber dados de API. PROJETO: PAINEL DE CONTROLE INTELIGENTE Um sistema web moderno para controlar VPS, bots, automações com IA, e gerenciar conteúdos. Foco em: desempenho, visual bonito, API conectável e estrutura modular. 🧠 OBJETIVO Criar um painel completo com: Frontend moderno e bonito Backend preparado pra automação Estrutura API-first Integrações futuras com: bots, IA, scraping, publicação automática Controle de várias VPS, containers, e tarefas 📦 STACK TECNOLÓGICA 🎨 FRONTEND React (com Vite ou Next.js) TailwindCSS + ShadCN UI (visual moderno, responsivo e bonito) Componentes reutilizáveis Axios para chamadas de API Dashboard com temas escuros, responsivos e interativos 🔧 BACKEND Node.js com Fastify (leve, rápido e fácil de manter) ou Python com FastAPI (ideal se os bots forem em Python) Módulos obrigatórios: API RESTful (exemplo: /vps/status, /bots/start, /conteudos/aprovar) Banco de dados: PostgreSQL (estruturado) ou MongoDB (flexível) Fila de tarefas e cache: Redis Sistema de logs e eventos JWT para autenticação 🖥️ FUNCIONALIDADES DO SISTEMA 1. Painel Geral (Dashboard) Quantidade de VPS Status de bots Atividade recente Recursos ativos (CPU/RAM/Containers) 2. Gerenciador de VPS Adicionar nova VPS Ver uso de recursos (CPU, RAM, disco) Executar comandos via SSH remoto Criar container (Docker) ou reiniciar serviços 3. Controle de Bots Adicionar/remover/editar bots (com agendamento) Status: rodando/parado Logs de execução Integração com n8n, Rasa, MCP, etc 4. Gestão de Conteúdo com IA Área para aprovar conteúdos gerados por scraping + IA Opção de editar antes de publicar Publicação manual ou automática (com webhook) 5. Configurações e Permissões Controle de usuários (admin/editor) Temas (claro/escuro) Logs de login/ações 📂 ORGANIZAÇÃO DO PROJETO /painel-inteligente ├── frontend/ (React) │ ├��─ src/ │ │ ├── components/ │ │ ├── pages/ │ │ ├── styles/ │ │ └── services/api.js │ └── vite.config.js │ ├── backend/ (Node ou Python) │ ├── api/ │ ├── controllers/ │ ├── models/ │ ├── database/ │ ├── middlewares/ │ └── main.js ou main.py │ ├── docker-compose.yml ├── .env └── README.md 🎯 ENTREGA ESPERADA (MVP) Front pronto com páginas: Dashboard VPS Bots Conteúdos (raspagem/IA) Configurações API funcional com: Login Listar VPS Executar comandos Iniciar/parar bots Criar conteúdo com IA simulada (mocked) Visual bonito e escalável 🤖 PRÓXIMAS INTEGRAÇÕES FUTURAS (já deixa preparado) n8n (por webhook) Rasa + OpenAI (via API) Pinecone / Weaviate (busca semântica) Automatização com scraping (Twitter, Google News, etc)