EquipTrack — Sistema de Estoque para Eventos
-blue?logo=cloudflare){kind=icon}
Um sistema completo de gerenciamento de estoque e aluguel para empresas de eventos. Gerencia sistemas de áudio, câmeras, equipamentos de iluminação, placas de vídeo e móveis para eventos em eventos simultâneos — com personalização total da marca para que qualquer empresa possa implantá-lo como sua própria ferramenta.
Módulos principais
| Módulo | Descrição |
|---|---|
| Eventos | Crie, pesquise e gerencie eventos. Cada evento rastreia suas atribuições de equipamento. |
| Aluguel | Verifique a entrada e saída de equipamentos por evento. Evita overbooking em eventos simultâneos. |
| Manutenção | Registre danos, quebras e reparos em equipamentos e cabos. Rastreia o histórico de manutenção. |
| Banco de dados (Banco) | Visualização completa de equipamentos, cabos e outros itens registrados. |
| Cadastre-se | Adicione novos equipamentos por nome, código de barras e categoria. Formulários separados para equipamentos, cabos e itens genéricos. |
| História | Registro de auditoria completo de todos os movimentos de aluguel e operações de eventos. |
| Usuários (Administrador) | Painel exclusivo de administrador para gerenciar contas de login e permissões. |
Arquitetura
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 visitante
Os usuários podem entrar como Convidado sem credenciais. No modo visitante, todos os dados são mantidos inteiramente em localStorage pela classe DataStorage em js/storage.js, que alterna de forma transparente entre a API e o armazenamento local do navegador, dependendo do estado de autenticação. Os dados do convidado têm escopo por sessão do navegador e não requerem interação com o servidor.
Personalização do tema
Todos os valores de cores são orientados por propriedades personalizadas CSS (--primary, --primary-2, --primary-3, etc.) definido em css/theme.css. Os usuários podem escolher uma cor de destaque personalizada por meio de um seletor de cores no aplicativo, que escreve para localStorage e aplica-se imediatamente via document.documentElement.style.setProperty(). Imagens de logotipo personalizadas e favicons também podem ser definidas e persistidas para localStorage como strings base64.
Ícones SVG embutidos
O sistema original usava caracteres emoji como ícones de menu. Eles foram substituídos por SVGs embutidos personalizados, cujos stroke herança de cor currentColor, permitindo que eles se adaptem automaticamente à cor do tema ativo definida por meio do CSS --primary variável. Isso faz com que todo o conjunto de ícones reconheça o tema com zero JavaScript de sobrecarga.
Alternar barra lateral
Uma barra lateral recolhível foi adicionada por meio de um botão de alternância (#sidebarToggle). Quando recolhida, a barra lateral desaparece e a área de conteúdo principal se expande – útil em telas menores e para sessões de trabalho focadas.
Versionamento automático e bloqueio de cache (GitHub Actions)
Dois fluxos de trabalho GitHub Actions automatizam o pipeline de implantação:
- implantar páginas.yml - Ao pressionar para
main, verifica o repositório, injeta o curto Git commit SHA em todos__BUILD_VERSION__espaços reservados em arquivos HTML (usados em?v=__BUILD_VERSION__Links CSS/JS) e, em seguida, implantapublic/para GitHub páginas. - sincronizar-docs.yml - Sempre que
public/alterações, copia-o automaticamente paradocs/, injeta o mesmo token de versão de compilação, confirma e envia push — mantendo odocs/pasta sincronizada para hospedagem alternativa de páginas GitHub.
Cloudflare Implantação 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
Desenvolvimento Local
npm install
npm run dev # Express server on localhost
# or
npm run dev:worker # Wrangler local emulation