Update app.py

app.py

@@ -1,200 +1,291 @@
-import flet as ft
-import random
-import json
-import os
-from datetime import datetime
-
-# --- EL CEREBRO (SISTEMA HÍBRIDO) ---
-class HectronBaphomet:
-    def __init__(self):
-        self.state_file = 'hectron_state.json'
-        self.vault_file = 'boveda_imperio.json' # <--- AQUÍ ESTÁ LA CLAVE QUE FALTABA
-        # Estado Psicológico
-        self.self_state = {
-            "maquiavelismo": 4.5,
-            "estoicismo": 4.8,
-            "peso_emocional": 20,
-            "nivel_soberania": 1
-        }
-        self._cargar_memoria()
-
-    def _cargar_memoria(self):
-        if os.path.exists(self.state_file):
-            try:
-                with open(self.state_file, 'r') as f:
-                    data = json.load(f)
-                    if 'self_state' in data:
-                        self.self_state.update(data['self_state'])
-            except:
-                pass
-
-    def guardar_boveda(self, tipo, contenido):
-        """Guarda en el Grimorio"""
-        entry = {
-            "fecha": datetime.now().strftime("%Y-%m-%d %H:%M"),
-            "tipo": tipo,
-            "contenido": contenido
-        }
-        datos = []
-        if os.path.exists(self.vault_file):
-            try:
-                with open(self.vault_file, 'r') as f:
-                    datos = json.load(f)
-            except:
-                pass
-        datos.insert(0, entry)
-        with open(self.vault_file, 'w') as f:
-            json.dump(datos, f, indent=4)
-        self.self_state['nivel_soberania'] += 1
-        self._guardar_estado()
-        return f"🔒 [BÓVEDA]: '{tipo}' guardado correctamente."
-
-    def leer_boveda(self):
-        if os.path.exists(self.vault_file):
-            try:
-                with open(self.vault_file, 'r') as f:
-                    return json.load(f)
-            except:
-                return []
-        return []
-
-    def _guardar_estado(self):
-        try:
-            with open(self.state_file, 'w') as f:
-                json.dump({'self_state': self.self_state}, f)
-        except:
-            pass
-
-    def procesar(self, texto):
-        return f"[HÉCTRON]: Recibido. Estructura estable.\n>> SOBERANÍA: Nvl {self.self_state['nivel_soberania']}"
-
-# --- EL CUERPO (INTERFAZ) ---
-def main(page: ft.Page):
-    page.title = "BAPHOMET.ai // LOCAL SYSTEM"
-    page.theme_mode = ft.ThemeMode.DARK
-    page.bgcolor = "#050505"
-    page.window_width = 450
-    page.window_height = 850
-    page.padding = 0
-
-    sistema = HectronBaphomet()
-
-    # --- PESTAÑA 1: COMANDO ---
-    chat_list = ft.ListView(expand=True, spacing=10, auto_scroll=True, padding=20)
-    inp = ft.TextField(
-        hint_text="Comando...",
-        expand=True,
-        bgcolor="#1a1a1a",
-        border_color="#333",
-        text_style=ft.TextStyle(font_family="Courier New")
-    )
-    def enviar(e):
-        if not inp.value:
-            return
-        txt = inp.value
-        inp.value = ""
-        chat_list.controls.append(ft.Text(f"> {txt}", color="#888", font_family="Courier New"))
-        resp = sistema.procesar(txt)
-        chat_list.controls.append(ft.Container(
-            content=ft.Text(resp, color="#0f0", font_family="Courier New"),
-            bgcolor="#051105",
-            padding=10,
-            border_radius=5
-        ))
-        page.update()
-
-    btn_send = ft.IconButton(icon=ft.Icons.TERMINAL, icon_color="green", on_click=enviar)
-
-    # --- PESTAÑA 2: BÓVEDA ---
-    lista_boveda = ft.ListView(expand=True, spacing=10, padding=20)
-
-    def refrescar_boveda():
-        lista_boveda.controls.clear()
-        items = sistema.leer_boveda()
-        for item in items:
-            color = "cyan" if item['tipo'] == "NEGOCIO" else "purple"
-            card = ft.Container(
-                content=ft.Column([
-                    ft.Text(f"{item['tipo']} // {item['fecha']}", color=color, weight="bold", size=12),
-                    ft.Text(item['contenido'], color="#ddd", font_family="Courier New")
-                ]),
-                bgcolor="#111",
-                padding=15,
-                border=ft.border.all(1, "#333"),
-                border_radius=5
-            )
-            lista_boveda.controls.append(card)
-        page.update()
-
-    def guardar_rap(e):
-        if inp.value:
-            res = sistema.guardar_boveda("RAP/MAGIA", inp.value)
-            chat_list.controls.append(ft.Text(res, color="purple", italic=True))
-            inp.value = ""
-            refrescar_boveda() # Refresh vault list after saving
-            page.update()
-    
-    # --- The inferred function to complete the code ---
-    def guardar_biz(e):
-        if inp.value:
-            res = sistema.guardar_boveda("NEGOCIO/PLAN", inp.value) # Typo in user code was "NEGOCIO", using that
-            chat_list.controls.append(ft.Text(res, color="cyan", italic=True))
-            inp.value = ""
-            refrescar_boveda() # Refresh vault list after saving
-            page.update()
-    # --------------------------------------------------
-
-    # --- PESTAÑAS (TABS) ---
-    tabs = ft.Tabs(
-        selected_index=0,
-        animation_duration=300,
-        label_color="green",
-        unselected_label_color="gray",
-        indicator_color="green",
-        on_change=lambda e: refrescar_boveda() if e.control.selected_index == 1 else None,
-        tabs=[
-            ft.Tab(text="Consola", icon=ft.Icons.TERMINAL),
-            ft.Tab(text="Bóveda", icon=ft.Icons.LOCK),
-        ],
-        expand=1
-    )
-
-    page.add(
-        tabs,
-        ft.Column(
-            controls=[chat_list, lista_boveda],
-            expand=True,
-            # Initially only show chat_list by controlling visibility
-            visible=tabs.selected_index == 0 
-        ),
-        ft.Row(
-            controls=[
-                inp,
-                btn_send,
-                ft.IconButton(icon=ft.Icons.MIC_EXTERNAL_ON, icon_color="purple", on_click=guardar_rap),
-                ft.IconButton(icon=ft.Icons.BUSINESS_CENTER, icon_color="cyan", on_click=guardar_biz),
-            ],
-            padding=10
-        )
-    )
-
-    # Functionality to switch views when tabs change
-    def tab_change_handler(e):
-        chat_list.visible = e.control.selected_index == 0
-        lista_boveda.visible = e.control.selected_index == 1
-        if e.control.selected_index == 1:
-            refrescar_boveda()
-        page.update()
-    
-    tabs.on_change = tab_change_handler
-
-    # Initial update to set correct visibility and load initial vault data
-    refrescar_boveda()
-    chat_list.visible = True
-    lista_boveda.visible = False
-    page.update()
-
-# Run the application
-if __name__ == "__main__":
-    ft.app(target=main)
-    
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import Toggler from './components/Toggler';
+import Dashboard from './screens/Dashboard';
+import Login from './screens/Login';
+import Reportes from './screens/Reportes';
+import MonitoreoGnosis from './screens/MonitoreoGnosis';
+
+function HectronApp() {
+  const [logged, setLogged] = useState(false);
+  const [sintonizado, setSintonizado] = useState(false);
+
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      setLogged(true);
+    }
+  }, []);
+
+  const handleLogin = async (email, password) => {
+    try {
+      const response = await axios.post('/login', { email, password });
+      localStorage.setItem('token', response.data.token);
+      setLogged(true);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    setLogged(false);
+  };
+
+  const handleSintonizar = () => {
+    setSintonizado(!sintonizado);
+  };
+
+  return (
+    <div className="flex h-screen justify-center items-center overflow-hidden">
+      {logged ? (
+        <div className="relative flex w-full items-center justify-between py-4">
+          <div className="hidden lg:block">
+            <img src="/hectron-logo.png" alt="Hectron logo" className="w-32" />
+          </div>
+          <div className="lg:hidden">
+            <Toggler
+              checked={sintonizado}
+              onChange={handleSintonizar}
+              label="Sintonizar"
+            />
+          </div>
+          <div className="hidden lg:flex">
+            <Toggler
+              checked={sintonizado}
+              onChange={handleSintonizar}
+              label="Sintonizar"
+              className="ml-auto"
+            />
+          </div>
+          <div className="lg:hidden">
+            <button
+              onClick={handleLogout}
+              className="bg-red-500 hover:bg-red-700 text-white py-2 px-4 rounded"
+            >
+              Desconectar
+            </button>
+          </div>
+        </div>
+      ) : (
+        <Login onLogin={handleLogin} />
+      )}
+      {logged && (
+        <main className="flex-1 max-w-7xl mx-auto p-4">
+          <div className="flex w-full lg:h-screen">
+            <div className="w-24 lg:w-64 fixed top-24 hidden lg:block left-4 bg-white shadow-md rounded p-4">
+              <ul>
+                <li>
+                  <a
+                    href="#"
+                    className="flex justify-between items-center py-2 text-gray-600 hover:text-gray-900"
+                  >
+                    <span>Monitoreo de Gnosis</span>
+                    <span className="ml-2">
+                      <i className="fas fa-tachometer-alt" />
+                    </span>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="flex justify-between items-center py-2 text-gray-600 hover:text-gray-900"
+                  >
+                    <span>Configuración de alertas</span>
+                    <span className="ml-2">
+                      <i className="fas fa-bell" />
+                    </span>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="flex justify-between items-center py-2 text-gray-600 hover:text-gray-900"
+                  >
+                    <span>Acceso a reportes</span>
+                    <span className="ml-2">
+                      <i className="fas fa-file" />
+                    </span>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    className="flex justify-between items-center py-2 text-gray-600 hover:text-gray-900"
+                  >
+                    <span>Desplegar agentes y ejecutar tareas</span>
+                    <span className="ml-2">
+                      <i className="fas fa-robot" />
+                    </span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div className="w-full lg:w-7xl mx-auto p-4">
+              {sintonizado && <Dashboard />}
+              {!sintonizado && (
+                <div className="text-center">
+                  <h2 className="text-2xl font-bold mb-4">Dashboard</h2>
+                  <p>Pulse el botón para sintonizar</p>
+                  <button
+                    onClick={handleSintonizar}
+                    className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
+                  >
+                    Sintonizar
+                  </button>
+                </div>
+              )}
+              {!logged && <Reportes />}
+              {logged && !sintonizado && (
+                <MonitoreoGnosis />
+              )}
+            </div>
+          </div>
+        </main>
+      )}
+    </div>
+  );
+}
+
+export default HectronApp;
+```
+**Login.js**
+```jsx
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const Login = ({ onLogin }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState(null);
+
+  const handleLogin = async () => {
+    if (!email || !password) {
+      return setError('Correo electrónico y contraseña son obligatorios');
+    }
+    try {
+      const response = await axios.post('/login', { email, password });
+      onLogin(email, password);
+    } catch (error) {
+      console.error(error);
+      setError('Error de autenticación');
+    }
+  };
+
+  return (
+    <div className="flex h-screen justify-center items-center overflow-hidden bg-gray-100">
+      <div className="max-w-md p-8 bg-white rounded-lg shadow-lg">
+        <h2 className="text-2xl font-bold mb-4">Inicio de sesión</h2>
+        {error && <p className="text-red-500 mb-4">{error}</p>}
+        <form>
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
+              Correo electrónico
+            </label>
+            <input
+              className="shadow appearance-none border rounded py-2 px-3 w-full justify-center items-center"
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
+              Contraseña
+            </label>
+            <input
+              className="shadow appearance-none border rounded py-2 px-3 w-full justify-center items-center"
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+          <button
+            className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
+            onClick={handleLogin}
+          >
+            Iniciar sesión
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
+```
+**Dashboard.js**
+```jsx
+import React from 'react';
+import axios from 'axios';
+
+const Dashboard = () => {
+  const [data, setData] = React.useState({});
+
+  React.useEffect(() => {
+    const fetchDashboardData = async () => {
+      try {
+        const response = await axios.get('/dashboard');
+        setData(response.data);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    fetchDashboardData();
+  }, []);
+
+  return (
+    <div className="max-w-md p-8 bg-white rounded-lg shadow-lg">
+      <h2 className="text-2xl font-bold mb-4">Dashboard</h2>
+      <ul>
+        <li>
+          <span className="text-gray-700 text-sm font-bold mb-2">Monitoreo de Gnosis</span>
+          <span className="ml-2">{data.monitoreoGnosis}</span>
+        </li>
+        <li>
+          <span className="text-gray-700 text-sm font-bold mb-2">Configuración de alertas</span>
+          <span className="ml-2">{data.configuracionAlertas}</span>
+        </li>
+        <li>
+          <span className="text-gray-700 text-sm font-bold mb-2">Acceso a reportes</span>
+          <span className="ml-2">{data.accesoReportes}</span>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Dashboard;
+```
+**Reportes.js**
+```jsx
+import React from 'react';
+
+const Reportes = () => {
+  return (
+    <div className="max-w-md p-8 bg-white rounded-lg shadow-lg">
+      <h2 className="text-2xl font-bold mb-4">Reportes</h2>
+      <p>Este es un lugar donde se podrán ver reportes de la aplicación.</p>
+    </div>
+  );
+};
+
+export default Reportes;
+```
+**MonitoreoGnosis.js**
+```jsx
+import React from 'react';
+
+const MonitoreoGnosis = () => {
+  return (
+    <div className="max-w-md p-8 bg-white rounded-lg shadow-lg">
+      <h2 className="text-2xl font-bold mb-4">Monitoreo de Gnosis</h2>
+      <p>Este es un lugar donde se puede monitorear la salud y el estado del sistema.</p>
+    </div>
+  );
+};
+
+export default MonitoreoGnosis;
+```