Sistema completo de gestión para talleres de servicio técnico de videojuegos, consolas y accesorios. Desarrollado con React, TypeScript, Vite y Supabase (PostgreSQL + Auth).
- Características Principales
- Demo y Credenciales
- Inicio Rápido
- Configuración de Base de Datos
- Deployment
- Arquitectura
- Documentación
- 3 roles diferenciados: Admin, Recepcionista, Técnico
- Permisos granulares por funcionalidad
- Navegación dinámica según privilegios
- Protección RLS a nivel de base de datos
- ✅ Números de orden únicos (formato: OS-YYYYMMDD-XXXXXX)
- ✅ Estados del ciclo de vida: Pendiente → En Progreso → Completada → Entregada
- ✅ Sistema de tercerización: Envío a talleres externos
- ✅ Tracking completo: Quién recibió, quién completó, cuándo se entregó
- ✅ Auto-refresh cada 15 segundos: Sincronización automática sin recargar
- ✅ Filtros avanzados: Por estado, técnico, fecha, cliente
- Comanda completa: Documento con todos los dispositivos del cliente
- Stickers individuales: Etiquetas para marcar cada dispositivo
- Vista previa antes de imprimir
- Descarga en PDF para archivo digital
- Optimizado para impresoras térmicas y papel normal
- Búsqueda rápida por cédula
- Historial completo de reparaciones
- Edición y eliminación (solo admin)
- Múltiples dispositivos por cliente
- Información de contacto completa
- Vista de trabajos disponibles para técnicos
- Asignación automática al tomar una orden
- Prioridades visuales (Alta, Media, Baja)
- Estadísticas de rendimiento por técnico
- Logo dinámico con caché localStorage (carga instantánea)
- Favicon y título dinámicos según empresa
- Colores personalizables (primario, secundario)
- Información de contacto y redes sociales
- Campos configurables en formularios
- Gestión de talleres externos
- Seguimiento de reparaciones enviadas
- Estados: Enviado → En Proceso → Listo → Retornado
- Control de costos externos
La aplicación incluye modo demostración con datos de prueba.
Email: admin@gameboxservice.com
Contraseña: gameboxservice123
Permisos: Acceso completo, configuración, reportes, gestión de usuarios
Email: recepcion@gameboxservice.com
Contraseña: gameboxservice123
Permisos: Crear órdenes, buscar clientes, marcar entregas
Email: tecnico@gameboxservice.com
Contraseña: gameboxservice123
Permisos: Ver y gestionar reparaciones asignadas, completar trabajos
git clone https://github.com/tu-usuario/gameboxservice.git
cd gameboxservice
npm installnpm run devhttp://localhost:5173
Nota: En modo desarrollo usa datos de demostración. Para producción configura Supabase (ver siguiente sección).
Ve a la carpeta database/ y sigue los pasos en README_SETUP.md
Resumen:
- Crea un proyecto en Supabase
- Ejecuta
01_init_database.sqlen SQL Editor - Ejecuta
02_init_policies.sqlen SQL Editor - Ejecuta
03_setup_storage.sqlen SQL Editor - Crea tu primer usuario administrador
- ¡Listo!
Consulta el archivo database/README_SETUP.md para instrucciones detalladas paso a paso.
Crea un archivo .env en la raíz del proyecto:
# Supabase Configuration
VITE_SUPABASE_URL=https://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
# App Configuration
VITE_APP_NAME=GameBox Service
VITE_APP_VERSION=3.0.0Dónde encontrar las credenciales:
- Project Settings → API → Project URL
- Project Settings → API → anon/public key
- Conecta tu repositorio GitHub a Render
- Configura el servicio:
- Build Command:
npm install && npm run build - Publish Directory:
dist
- Build Command:
- Agrega variables de entorno:
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY
- Deploy automático en cada push
El archivo render.yaml ya está configurado para deployment automático.
npm install -g vercel
vercelO conecta desde el dashboard de Vercel:
- Framework Preset: Vite
- Build Command:
npm run build - Output Directory:
dist
npm install -g netlify-cli
netlify deploy --prodO conecta desde el dashboard de Netlify:
- Build command:
npm run build - Publish directory:
dist
src/
├── components/ # Componentes React
│ ├── ui/ # Componentes reutilizables (Button, Modal, Card)
│ ├── Login.tsx # Autenticación
│ ├── Layout.tsx # Layout principal con sidebar y logo dinámico
│ ├── Dashboard.tsx # Dashboard por roles con auto-refresh
│ ├── ServiceQueue.tsx # Gestión de órdenes
│ ├── CustomerSearch.tsx # Búsqueda y gestión de clientes
│ ├── CreateOrder.tsx # Formulario de nueva orden
│ ├── RepairQueue.tsx # Cola de reparaciones para técnicos
│ └── CompanySettings.tsx # Configuración personalizable
│
├── contexts/ # Contextos React
│ ├── AuthContext.tsx # Autenticación con Supabase
│ └── RouterContext.tsx # Navegación SPA
│
├── hooks/ # Hooks personalizados
│ ├── useServiceOrders.ts # Gestión de órdenes
│ ├── useCustomers.ts # Gestión de clientes
│ ├── useCompanySettings.ts # Configuración con caché
│ ├── useAutoRefresh.ts # Sistema de actualización automática
│ └── useDynamicPageInfo.ts # Favicon y título dinámicos
│
├── types/ # Tipos TypeScript
│ └── index.ts
│
├── lib/ # Configuración
│ └── supabase.ts # Cliente Supabase
│
└── database/ # Scripts SQL
├── 01_init_database.sql # Tablas, funciones, índices
├── 02_init_policies.sql # Políticas RLS
├── 03_setup_storage.sql # Bucket para logos
└── README_SETUP.md # Guía completa de setup
- 📐 ARCHITECTURE.md - Arquitectura del sistema
- ✨ BEST_PRACTICES.md - Mejores prácticas
- ♻️ REFACTORING_SUMMARY.md - Resumen de refactorización
- 📦 BUNDLE_OPTIMIZATION.md - Optimización de bundle
- 📱 RESPONSIVE_COMPLETE.md - Diseño responsive
- 🎯 LOGO_DINAMICO_COMPLETO.md - Sistema de logo dinámico
- 📄 PAGINATION_FEATURE.md - Paginación implementada
- 🔒 SECURITY_SUMMARY.md - Seguridad y RLS
- ⚙️ SISTEMA_CONFIGURACION_PERSONALIZABLE.md - Configuración personalizable
| Categoría | Tecnología | Versión |
|---|---|---|
| Frontend | React | 18.3 |
| Lenguaje | TypeScript | 5.6 |
| Build Tool | Vite | 7.1 |
| Styling | Tailwind CSS | 4.0 |
| Backend | Supabase | Latest |
| Base de Datos | PostgreSQL | 15+ |
| Autenticación | Supabase Auth | Latest |
| Storage | Supabase Storage | Latest |
| Iconos | Lucide React | Latest |
Todas las tablas tienen políticas RLS configuradas:
| Acción | Admin | Receptionist | Technician |
|---|---|---|---|
| Ver clientes | ✅ | ✅ | ✅ |
| Crear clientes | ✅ | ✅ | ❌ |
| Editar clientes | ✅ | ❌ | ❌ |
| Eliminar clientes | ✅ | ❌ | ❌ |
| Ver órdenes | ✅ Todas | ✅ Todas | ✅ Solo asignadas |
| Crear órdenes | ✅ | ✅ | ❌ |
| Editar órdenes | ✅ | ✅ | ✅ Solo asignadas |
| Eliminar órdenes | ✅ | ❌ | ❌ |
| Ver configuración | ✅ | ✅ | ✅ |
| Editar configuración | ✅ | ❌ | ❌ |
- ✅ RLS en todas las tablas: Políticas a nivel de base de datos
- ✅ Función SECURITY DEFINER: Evita recursión infinita en políticas
- ✅ Validación de roles: Backend y frontend
- ✅ Autenticación JWT: Tokens seguros de Supabase
- ✅ Caché seguro: localStorage solo para datos públicos (logo, nombre)
- ✅ Responsive Design: Funciona en móviles, tablets y desktop
- ✅ Tema Moderno: Diseño limpio con Tailwind CSS 4.0
- ✅ Iconografía Consistente: Lucide React
- ✅ Estados Visuales: Colores y badges informativos
- ✅ UX Intuitivo: Navegación clara y acciones obvias
- ✅ Accesibilidad: Componentes semánticos y accesibles
- ✅ Optimizado para Impresión: Comandas y stickers profesionales
- Componentes React: 25+
- Hooks Personalizados: 10+
- Rutas Principales: 8
- Tablas en BD: 6
- Políticas RLS: 25
- Líneas de Código: ~15,000
- Archivos TypeScript: 50+
Las contribuciones son bienvenidas. Por favor:
- Fork el proyecto
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add: AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
- ✅ Scripts SQL consolidados en 3 archivos
- ✅ Sistema de caché para logos (carga instantánea)
- ✅ Favicon y título dinámicos
- ✅ Permisos admin-only para clientes
- ✅ Eliminación de recursión RLS
- ✅ Guía de setup simplificada
- ✅ Sistema de tercerización completo
- ✅ Tracking de técnicos
- ✅ Campos adicionales (serial_number, observations)
- ✅ Configuración dinámica
- ✅ Sistema base de órdenes
- ✅ Gestión de clientes
- ✅ Autenticación multi-rol
- ✅ Sistema de impresión
¿Problemas o preguntas?
- Revisa la documentación
- Consulta database/README_SETUP.md
- Abre un Issue
Este proyecto está bajo la Licencia MIT. Ver archivo LICENSE para más detalles.
Desarrollado con ❤️ para talleres de reparación de videojuegos
🎮 GameBox Service - La solución completa para tu taller de reparación
-
Abrir en el navegador:
http://localhost:5173 -
¡Listo! Usa las credenciales de demostración para probar todas las funcionalidades.
- Estadísticas según el rol del usuario
- Órdenes recientes
- Acceso rápido a funciones principales
- Vista organizada por estados (Pendiente, En Progreso, Completada, Entregada)
- Botón "Nueva Orden" para recepcionistas y admins
- Acciones contextuales para técnicos
- Búsqueda por número de cédula
- Historial completo de reparaciones
- Información de contacto
- Botones de acción para entregas
- Búsqueda automática de cliente por cédula
- Formulario de registro para nuevos clientes
- Detalles completos del dispositivo y problema
- Asignación de prioridades
- Recepcionista inicia sesión
- Crea nueva orden de servicio
- Busca cliente por cédula (o registra nuevo)
- Selecciona modo: Dispositivo único o múltiples dispositivos
- Dispositivo único: Completa detalles y crea orden
- Múltiples dispositivos: Agrega cada dispositivo a la lista, puede duplicar dispositivos similares
- Genera comanda de impresión:
- Comanda completa con todos los dispositivos
- Stickers individuales para marcar cada consola
- Todas las órdenes entran en cola "Pendiente"
- Técnico inicia sesión
- Ve reparaciones disponibles en la cola
- Toma una reparación (pasa a "En Progreso")
- Completa la reparación
- Agrega notas del trabajo realizado
- Marca como "Completada" - El sistema registra automáticamente qué técnico la completó
- La orden aparece como "Finalizada" con el nombre del técnico visible
- Recepcionista busca cliente por cédula
- Ve todas las reparaciones completadas
- Entrega el equipo al cliente
- Marca como "Entregada"
La aplicación incluye:
- ✅ 5 clientes de ejemplo con datos completos
- ✅ 5 órdenes de servicio en diferentes estados
- ✅ Historial de reparaciones realistas
- ✅ Variedad de dispositivos (PS5, Xbox, Nintendo Switch, controles)
Para usar la aplicación con una base de datos real:
- Crear proyecto en Supabase
- Ejecutar scripts SQL (incluidos en
/database/setup.sql) - Configurar variables de entorno en
.env:VITE_SUPABASE_URL=tu_url_de_supabase VITE_SUPABASE_ANON_KEY=tu_clave_anonima
- Cambiar imports en componentes:
- De
AuthContextDemoaAuthContext - De
useServiceOrdersDemoauseServiceOrders - De
useCustomersDemoauseCustomers
- De
src/
├── components/ # Componentes React
│ ├── ui/ # Componentes reutilizables (Button, Input, Card)
│ ├── Login.tsx # Pantalla de autenticación
│ ├── Layout.tsx # Layout principal con sidebar
│ ├── Dashboard.tsx # Dashboard por roles con auto-refresh
│ ├── ServiceQueue.tsx # Gestión de órdenes con actualización automática
│ ├── CustomerSearch.tsx # Búsqueda de clientes
│ ├── CreateOrder.tsx # Formulario nueva orden
│ ├── AutoRefreshIndicator.tsx # Indicador de actualización automática
│ └── PageRenderer.tsx # Router de páginas
├── contexts/ # Contextos React
│ ├── AuthContextDemo.tsx # Auth con datos locales
│ └── RouterContext.tsx # Navegación SPA
├── hooks/ # Hooks personalizados
│ ├── useServiceOrdersDemo.ts # Gestión órdenes (demo)
│ ├── useCustomersDemo.ts # Gestión clientes (demo)
│ ├── useServiceOrders.ts # Gestión órdenes con Supabase
│ ├── useCustomers.ts # Gestión clientes con Supabase
│ └── useAutoRefresh.ts # Sistema de actualización automática
├── data/ # Datos de demostración
│ └── demoData.ts # Clientes y órdenes de ejemplo
├── types/ # Tipos TypeScript
│ └── index.ts # Definiciones de tipos
└── lib/ # Configuración
└── supabase.ts # Cliente Supabase
- ✅ Responsive Design - Funciona en móviles, tablets y desktop
- ✅ Tema Moderno - Diseño limpio con Tailwind CSS
- ✅ Iconografía Consistente - Iconos de Lucide React
- ✅ Estados Visuales - Colores y badges para estados de órdenes
- ✅ UX Intuitivo - Navegación clara y acciones obvias
- ✅ Accesibilidad - Componentes accesibles y semánticos
- ✅ Actualización en Tiempo Real - Indicadores visuales de sincronización
El sistema de auto-refresh mantiene los datos actualizados automáticamente sin necesidad de recargar la página. Ideal para talleres donde múltiples usuarios trabajan simultáneamente.
- 🕐 Actualización cada 15 segundos: Todos los datos se mantienen frescos
- 👀 Indicadores visuales: Muestra la última actualización y el estado de sincronización
- ⚡ Sin recargas de página: Experiencia fluida y rápida
- 🎯 Selectivo: Cada componente puede elegir si usar auto-refresh o no
- 🛡️ Robusto: Maneja errores de red sin afectar la experiencia del usuario
- Dashboard: Estadísticas actualizadas para todos los roles
- Cola de Reparaciones: Sincronización automática para técnicos
- Búsqueda de Clientes: Información siempre al día
- Gestión de Órdenes: Estados actualizados en tiempo real
// Hook general con auto-refresh personalizable
const { data, loading, lastRefresh } = useServiceOrders(true)
// Hooks específicos - todos con 15 segundos
useServiceOrdersAutoRefresh() // 15 segundos
useGeneralAutoRefresh() // 15 segundos
useAutoRefresh(callback) // Personalizable (por defecto 15 segundos)- Conectar repositorio GitHub a Vercel
- Configurar variables de entorno de Supabase
- Deploy automático
- Conectar repositorio GitHub a Netlify
- Build command:
npm run build - Publish directory:
dist
Para habilitar todas las funcionalidades (tracking de técnicos, números de serie, observaciones), ejecuta esta migración en el SQL Editor de Supabase:
-- Migración para agregar campos de serial number y tracking de técnicos
-- Ejecutar en el SQL Editor de Supabase
-- 1. Agregar columna de número de serie
ALTER TABLE service_orders
ADD COLUMN serial_number TEXT;
-- 2. Agregar columna para observaciones
ALTER TABLE service_orders
ADD COLUMN observations TEXT;
-- 3. Agregar columna para técnico que completó la orden
ALTER TABLE service_orders
ADD COLUMN completed_by_id UUID REFERENCES profiles(id);
-- 4. Crear índices para mejorar el rendimiento
CREATE INDEX IF NOT EXISTS idx_service_orders_completed_by_id ON service_orders(completed_by_id);
CREATE INDEX IF NOT EXISTS idx_service_orders_serial_number ON service_orders(serial_number);- Notificaciones push con Service Workers
- Reportes y analíticas avanzadas
- Gestión de inventario de repuestos
- Facturación integrada
- API REST para integraciones
- App móvil con React Native
- WhatsApp integration para notificaciones
- Configuración de intervalos de auto-refresh por usuario
- Websockets para actualizaciones instantáneas
¡SÍ! Esta aplicación está lista para usar en un taller real. Solo necesitas:
- ✅ Configurar Supabase (base de datos gratuita)
- ✅ Ejecutar la migración de base de datos (arriba)
- ✅ Cambiar a contextos reales (líneas ya preparadas)
- ✅ Crear usuarios en la base de datos
- ✅ ¡Empezar a usar!
La aplicación ya maneja todos los casos de uso de un taller de reparación de videojuegos y está optimizada para un flujo de trabajo eficiente.
Desarrollado con ❤️ para talleres de reparación de videojuegos }, }, ])
# AnimatecService
# Animatec
"# Service"