Update Dockerfile

Dockerfile

@@ -1,27 +1,292 @@
-FROM python:3.13-slim
+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';
 
-# 1. Instalamos dependencias y el binario de uv
-RUN apt-get update && apt-get install -y \
-    curl \
-    build-essential \
-    && curl -LsSf https://astral.sh | sh \
-    && rm -rf /var/lib/apt/lists/*
+function HectronApp() {
+  const [logged, setLogged] = useState(false);
+  const [sintonizado, setSintonizado] = useState(false);
 
-# Aseguramos que uv esté en el PATH para el resto del build
-ENV PATH="/root/.local/bin/:$PATH"
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      setLogged(true);
+    }
+  }, []);
 
-RUN useradd -m -u 1000 user
-# Añadimos el path del usuario para el runtime
-ENV PATH="/home/user/.local/bin:$PATH"
-ENV UV_SYSTEM_PYTHON=1
+  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);
+    }
+  };
 
-WORKDIR /app
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    setLogged(false);
+  };
 
-# 2. Copiamos e instalamos dependencias
-COPY --chown=user ./requirements.txt requirements.txt
-RUN uv pip install -r requirements.txt
+  const handleSintonizar = () => {
+    setSintonizado(!sintonizado);
+  };
 
-COPY --chown=user . /app
-USER user
+  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>
+  );
+}
 
-CMD ["python", "app.py"]
+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;
+```
+Estos componentes principales están implementados con Tailwind y se pueden personalizar de acuerdo a las necesidades específicas de HECTRON.