Isaac_Aracena
b4d3abc9fc
Se agrega documentación inicial del proyecto, incluyendo descripción general, estado actual, funcionalidades pendientes, arquitectura prevista, variables de entorno, seguridad y notas de despliegue.
202 lines
5.1 KiB
Markdown
202 lines
5.1 KiB
Markdown
# Tablero CDC
|
|
|
|
Aplicación interna para la gestión visual de aprobaciones de proyectos creativos del equipo CDC de **GomezLee Marketing**.
|
|
|
|
El objetivo de esta app es simplificar el flujo de trabajo del equipo creativo mediante un tablero tipo Trello, donde cada tarjeta representa un proyecto y centraliza sus datos principales, enlaces y estado de aprobación.
|
|
|
|
---
|
|
|
|
## Descripción general
|
|
|
|
**Tablero CDC** permite crear, visualizar y gestionar proyectos creativos en una interfaz sencilla, clara y colaborativa.
|
|
|
|
Cada proyecto se representa como una tarjeta dentro del tablero. Al abrir una tarjeta, el usuario puede consultar o completar información como cliente, marca, país, solicitante, brief, enlaces de propuestas, artes finales, estatus y otros datos relevantes para el proceso interno.
|
|
|
|
La app está pensada para alimentar posteriormente el archivo de aprobaciones utilizado por el dashboard de Power BI del departamento creativo.
|
|
|
|
---
|
|
|
|
## Objetivo del proyecto
|
|
|
|
Reducir el trabajo manual y desordenado que actualmente se realiza en hojas colaborativas, reemplazándolo por una interfaz más amigable para el equipo.
|
|
|
|
La app busca:
|
|
|
|
- Centralizar la información de cada proyecto creativo.
|
|
- Facilitar el seguimiento de propuestas y artes finales.
|
|
- Permitir que el equipo agregue enlaces de trabajo de forma organizada.
|
|
- Mantener proyectos cerrados visibles, pero diferenciados visualmente.
|
|
- Preparar la información para ser enviada al Sheet original que alimenta Power BI.
|
|
- Mejorar la colaboración del equipo creativo.
|
|
|
|
---
|
|
|
|
## Estado actual
|
|
|
|
Esta versión corresponde a la **base inicial limpia** del proyecto.
|
|
|
|
Incluye:
|
|
|
|
- React + Vite puro.
|
|
- Configuración de `base` en `vite.config.ts`.
|
|
- Favicon personalizado para la pestaña del navegador.
|
|
- Login corporativo con Firebase.
|
|
- Diseño visual aprobado como base del producto.
|
|
|
|
---
|
|
|
|
## Funcionalidades principales del prototipo
|
|
|
|
- Tablero visual de proyectos.
|
|
- Tarjetas por proyecto.
|
|
- Filtros por estado:
|
|
- Todos
|
|
- Activos
|
|
- Cerrados
|
|
- Buscador por datos del proyecto.
|
|
- Modal de creación y edición de proyecto.
|
|
- Campos para cliente, marca, país y solicitante.
|
|
- Campo de `Country Manager`.
|
|
- Links de brief.
|
|
- Links de propuestas.
|
|
- Links de artes finales.
|
|
- Etiquetas de color por proyecto.
|
|
- Visualización de estatus.
|
|
- Preparación para control de permisos por usuario.
|
|
|
|
---
|
|
|
|
## Funcionalidades pendientes
|
|
|
|
Las siguientes funcionalidades se implementarán en próximas fases:
|
|
|
|
1. Control de permisos por usuario.
|
|
2. Ocultar monto interno a usuarios que no sean Gerardo Marrero.
|
|
3. Bloquear edición de estatus para usuarios que no sean Gerardo Marrero.
|
|
4. Almacenamiento persistente.
|
|
5. Sincronización multiusuario.
|
|
6. Paginación en las vistas de Todos, Activos y Cerrados.
|
|
7. Sincronización automática de desplegables con la hoja `listas` del Google Sheet original.
|
|
8. Escritura automática de datos en el Sheet original mediante n8n u otra integración definida.
|
|
9. Agregar una nueva columna final para enlace de brief en el Sheet original.
|
|
|
|
---
|
|
|
|
## Arquitectura prevista
|
|
|
|
La arquitectura esperada para las próximas fases es:
|
|
|
|
```text
|
|
Frontend React/Vite
|
|
↓
|
|
Firebase Auth
|
|
↓
|
|
Almacenamiento persistente
|
|
↓
|
|
n8n como capa de integración
|
|
↓
|
|
Google Sheets original
|
|
↓
|
|
Power BI
|
|
```
|
|
|
|
La app no debe modificar la estructura existente del Sheet original, ya que ese archivo alimenta un dashboard de Power BI. Cualquier columna nueva debe agregarse al final y validarse previamente.
|
|
|
|
---
|
|
|
|
## Instalación local
|
|
|
|
Instalar dependencias:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
Ejecutar en modo desarrollo:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Generar build de producción:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Vista previa del build:
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
---
|
|
|
|
## Variables de entorno
|
|
|
|
El proyecto utiliza variables de entorno para Firebase y futuras integraciones.
|
|
|
|
Crear un archivo `.env` local basado en `.env.example`.
|
|
|
|
Estructura esperada:
|
|
|
|
```env
|
|
VITE_FIREBASE_API_KEY=""
|
|
VITE_FIREBASE_AUTH_DOMAIN=""
|
|
VITE_FIREBASE_PROJECT_ID=""
|
|
VITE_FIREBASE_STORAGE_BUCKET=""
|
|
VITE_FIREBASE_MESSAGING_SENDER_ID=""
|
|
VITE_FIREBASE_APP_ID=""
|
|
VITE_WEBHOOK_URL=""
|
|
```
|
|
|
|
El campo `VITE_WEBHOOK_URL` puede permanecer vacío hasta que se defina la integración con n8n.
|
|
|
|
---
|
|
|
|
## Seguridad
|
|
|
|
No se deben subir al repositorio:
|
|
|
|
- `.env`
|
|
- `.env.local`
|
|
- `.env.production`
|
|
- `.env.development`
|
|
- `node_modules`
|
|
- `dist`
|
|
- tokens
|
|
- credenciales
|
|
- archivos con secretos
|
|
- logs innecesarios
|
|
|
|
El archivo `.env.example` sí puede subirse, siempre que no contenga valores reales.
|
|
|
|
---
|
|
|
|
## Despliegue
|
|
|
|
El proyecto está preparado para publicarse bajo la ruta:
|
|
|
|
```ts
|
|
base: "/tablero-cdc/"
|
|
```
|
|
|
|
Si la ruta final cambia, debe actualizarse `vite.config.ts`.
|
|
|
|
---
|
|
|
|
## Notas importantes
|
|
|
|
- Este repositorio representa la versión inicial del proyecto.
|
|
- El diseño base fue aprobado antes de iniciar las integraciones técnicas.
|
|
- Las próximas fases deben implementarse en commits separados.
|
|
- No se debe alterar la estructura del Google Sheet original sin validación previa.
|
|
- La integración con Power BI depende de mantener estable la estructura del Sheet.
|
|
|
|
---
|
|
|
|
## Equipo
|
|
|
|
Proyecto interno de **GomezLee Marketing**.
|
|
|