Contribución

Este proyecto está abierto para aportaciones de la comunidad. Si encuentras un error o tienes una mejora, ¡no dudes en abrir un Pull Request!

---

Proyecto creado como aportación a la comunidad. ¡Espero que les sea de utilidad! You can support me at

https://coff.ee/prome

Google-Sheets-Service-Dashboard

Este proyecto es una aplicación web moderna construida con Next.js 15, React 19, GSAP, y Three.js, diseñada para visualizar y gestionar servicios, agendas y estadísticas a través de una integración con la API de Google Sheets.

Características principales

• Gestión de Servicios: Visualización de una bitácora de servicios en tiempo real desde Google Sheets.
• Agenda Semanal: Un gestor de horarios interactivo que muestra las actividades de la semana actual y próxima.
• Leaderboard de Responsables: Clasificación y conteo de servicios atendidos por cada responsable.
• Interfaz Fluida: Uso de animaciones avanzadas con GSAP y efectos visuales de alto rendimiento con Three.js (Hyperspeed, Splash Cursor).
• Dockerizado: Configuración lista para desplegar con Nginx y Cloudflare Tunnel.

Requisitos previos

• Docker y Docker Compose.
• Una Google Sheets API Key.
• Un Google Sheet ID con el formato específico de bitácora y agenda.
• (Opcional) Un token de Cloudflare Tunnel para publicación segura en internet.

Configuración rápida

1. Clona el repositorio.
2. Copia los archivos de ejemplo de variables de entorno:

   # En la raíz del proyecto
   cp .env.example .env
   # En el directorio react-app
   cp react-app/.env.example react-app/.env

3. Edita los archivos .env con tus credenciales reales (Sheet ID, API Key, etc.).
4. Ejecuta el proyecto con Docker:

   docker-compose up -d --build

5. Accede a través de http://localhost (vía Nginx) o http://localhost:3000 directamente.

Estructura del Proyecto

• /react-app: Aplicación frontend en Next.js.
• /nginx: Configuración de Nginx como reverse proxy.
• docker-compose.yml: Orquestación de servicios (App, Proxy, Cloudflared).