EquipTrack — Sistema de Estoque para Eventos
-blue?logo=cloudflare){kind=icon}
Un completo sistema de gestión de inventarios y alquileres para empresas de eventos. Gestiona sistemas de audio, cámaras, equipos de iluminación, tableros de vídeo y mobiliario para eventos en eventos simultáneos, con una personalización completa de la marca para que cualquier empresa pueda implementarla como su propia herramienta.
Módulos principales
| Módulo | Descripción |
|---|---|
| Eventos | Cree, busque y administre eventos. Cada evento realiza un seguimiento de sus asignaciones de equipos. |
| Alquiler | Registro de entrada y salida de equipos por evento. Evita el overbooking en eventos simultáneos. |
| Mantenimiento | Registrar daños, averías y reparaciones en equipos y cables. Seguimiento del historial de mantenimiento. |
| Base de datos (Banco) | Vista de exploración completa de equipos, cables y otros elementos registrados. |
| Regístrate | Agregue nuevos equipos por nombre, código de barras y categoría. Formularios separados para equipos, cables y artículos genéricos. |
| Historia | Registro de auditoría completo de todos los movimientos de alquiler y operaciones de eventos. |
| Usuarios (administrador) | Panel exclusivo para administradores para administrar permisos y cuentas de inicio de sesión. |
Arquitectura
Browser (Client)
└─ public/
├─ login/index.html ← Login + guest mode toggle
├─ index.html ← Main SPA (all modules as sections)
├─ css/ ← Modular styles: app.css, theme.css, login.css, event.css
├─ js/ ← app.js, login.js, event.js, storage.js
└─ assets/images/ ← Logo, favicon (WebP)
Cloudflare Worker (Edge)
└─ src/worker.mjs
├─ Page routing ← Redirects authenticated users away from login
├─ /api/login POST ← bcrypt session authentication
├─ /api/logout POST ← Session invalidation
├─ /api/auth/status GET ← Auth check (guest detection)
├─ /api/events ← CRUD for events
├─ /api/equipments ← CRUD for equipment
├─ /api/cables ← CRUD for cables
├─ /api/others ← CRUD for generic items
├─ /api/rentals ← Rental movements per event
├─ /api/maintenance ← Damage and repair records
├─ /api/history ← Full movement log
└─ /api/users ← Admin-only user management
Cloudflare D1 (SQLite)
└─ migrations/0001_initial.sql
├─ users
├─ events
├─ equipments
├─ cables
├─ other_items
├─ rentals
├─ maintenance
└─ history
Modo invitado
Los usuarios pueden ingresar como Invitado sin credenciales. En el modo invitado, todos los datos se conservan completamente en localStorage a través de la clase DataStorage en js/storage.js, que cambia de forma transparente entre la API y el almacenamiento local del navegador según el estado de autenticación. Los datos de los invitados se limitan a cada sesión del navegador y no requieren interacción con el servidor.
Personalización del tema
Todos los valores de color están controlados por propiedades personalizadas de CSS (--primary, --primary-2, --primary-3, etc.) definido en css/theme.css. Los usuarios pueden elegir un color de acento personalizado a través de un selector de color en la aplicación, que escribe en localStorage y se aplica inmediatamente a través de document.documentElement.style.setProperty(). Las imágenes de logotipos personalizados y los favicons también se pueden configurar y persistir en localStorage como cadenas base64.
Iconos SVG en línea
El sistema original utilizaba caracteres emoji como iconos de menú. Estos fueron reemplazados por SVG en línea personalizados cuyo stroke el color hereda currentColor, permitiéndoles adaptarse automáticamente al color del tema activo establecido a través del CSS --primary variable. Esto hace que todo el conjunto de íconos tenga en cuenta el tema sin sobrecarga JavaScript.
Alternar barra lateral
Se agregó una barra lateral plegable mediante un botón de alternancia (#sidebarToggle). Cuando está colapsada, la barra lateral se desliza fuera de la vista y el área de contenido principal se expande, lo que resulta útil en pantallas más pequeñas y para sesiones de trabajo concentradas.
Control de versiones automático y eliminación de caché (GitHub Actions)
Dos flujos de trabajo GitHub Actions automatizan el proceso de implementación:
- implementar-páginas.yml — Al presionar para
main, revisa el repositorio, inyecta el SHA corto de Git commit en todos__BUILD_VERSION__marcadores de posición en archivos HTML (utilizados en?v=__BUILD_VERSION__enlaces CSS/JS), luego implementapublic/a GitHub páginas. - sincronización-docs.yml — Siempre que sea
public/cambios, lo copia automáticamente adocs/, inyecta el mismo token de versión de compilación, confirma y empuja, manteniendo eldocs/Carpeta sincronizada para alojamiento de páginas alternativo GitHub.
Cloudflare Implementación D1
# Install dependencies
npm install
# Login to Cloudflare
npx wrangler login
# Create D1 database
npx wrangler d1 create sistema-estoque-24h
# Apply schema migrations
npx wrangler d1 migrations apply sistema-estoque-24h --remote
# Export local SQLite data to D1-compatible SQL
npm run export:d1
npx wrangler d1 execute sistema-estoque-24h --remote --file d1-export.sql
# Deploy worker
npm run deploy
Desarrollo Local
npm install
npm run dev # Express server on localhost
# or
npm run dev:worker # Wrangler local emulation