Mike's - Aplicación de Escritorio

Resumen

Mikes es una aplicación de escritorio basada en Electron que actúa como cliente para una API remota (configurada mediante variables de entorno). Provee:

• Inicio de sesión para empleados.
• Selección de cliente y nómina.
• Gestión de empleados (alta, baja, edición).
• Gestión de usuarios por nómina, con paginación, búsqueda, exportación y manejo de productos por usuario.

La UI está construida con HTML/CSS/JS estáticos en public/ y la entrada de la app es main.js.

IMPORTANTE: Las credenciales y las URL de la API se leen desde .env mediante preload.js y se exponen de forma segura a la ventana (vía contextBridge) bajo window.ENV.

Estructura principal

• main.js - Entry point de Electron. Crea la ventana y carga public/index.html.
• preload.js - Lee .env (local) y expone API_URL y API_KEY a window.ENV.
• package.json - Scripts y configuración de electron-builder para empaquetado.
• public/ - Archivos estáticos de la aplicación (HTML, CSS, JS). Contiene:
  • index.html, index.js - Pantalla de login.
  • home/ - Selección de cliente y navegación.
  • home/manage/ - Gestión de empleados.
  • home/nomina/ - Gestión de nóminas y pestañas users/, quantity/, etc.
• assets/ - Iconos y recursos estáticos.

Contrato (inputs/outputs)

• Entradas: .env con al menos API_URL y API_KEY, interacción del usuario a través de la UI.
• Salidas: llamadas HTTP a la API remota, actualizaciones de localStorage, navegación entre páginas.
• Modos de error: si la API responde con error, la UI muestra mensajes flash; si no hay conexión, verás "Error de conexión".

Requisitos

• Node.js (recomendado 18+).
• npm (v6+).
• Entorno con acceso a la API configurada en .env.

Variables de entorno (no incluir en VCS)

La app carga .env en preload.js. Crea un archivo .env en la raíz del proyecto con al menos:

API_URL=http://tu-api:3000
API_KEY=tu_api_key_aqui

NO subas .env a git ni a repositorios públicos. Si compartes el proyecto, elimina o enmascara las claves.

Desarrollo (ejecutar localmente)

1. Instala dependencias (si faltan):

npm install

2. Ejecuta la aplicación en modo desarrollo:

npm start

Esto abrirá la ventana de Electron y cargará public/index.html.

Nota: package.json incluye devDependencies y dependencies. Algunas dependencias están duplicadas en devDependencies/devdependencies (probablemente por un typo), esto no impide la ejecución si instalas correctamente.

Construir instalador (Windows)

El proyecto usa electron-builder. Para generar el instalador:

1. Asegúrate de tener las dependencias instaladas.
2. Ejecuta:

npm run build

Esto usará la sección build en package.json para crear un instalador NSIS en la carpeta dist/ (por defecto). Revisa productName, appId e íconos en build/.

Advertencia: package.json actualmente lista .env dentro de files para empaquetar el archivo en el binario. Esto puede exponer claves si son incluidas en .env. Recomendación: eliminar .env de build.files y manejar la configuración con variables de entorno externas o un archivo de configuración no incluido por defecto.

Flujo de la aplicación (alto nivel)

1. Al iniciar, main.js crea una ventana y carga public/index.html.
2. preload.js inyecta window.ENV con API_URL y API_KEY desde .env.
3. El usuario hace login en index.html. index.js llama a POST ${API_URL}/login con X-API-Key.
4. En caso de éxito, se guarda employee en localStorage y se navega a home/home.html.
5. Desde home el usuario selecciona cliente y nómina. Muchas páginas usan fetch a la API con X-API-Key y maneja datos con localStorage.

Rutas principales del UI:

• Login: public/index.html (+ index.js)
• Home / Lista Clientes: public/home/home.html (+ home.js)
• Gestión empleados: public/home/manage/manage.html (+ manage.js)
• Nóminas: public/home/nomina/nomina.html (+ nomina.js)
• Usuarios por nómina: public/home/nomina/users/users.html (+ users.js)

Seguridad y buenas prácticas

• Nunca incluyas .env con claves en el repositorio. Considera usar variables de entorno del sistema para builds CI.
• Evita exponer secretos innecesarios en preload.js. Actualmente preload.js expone API_KEY a window.ENV. Si la API key es sensible, considera exponer solo API_URL y mover la firma de peticiones al proceso principal con canales seguros (ipcMain/ipcRenderer) y validación.
• Revisa CORS y autenticación en el backend. La app confía en X-API-Key en cada petición.