# Cotizador Walmart Connect Frontend interno de GomezLee Marketing para cotizaciones Walmart Connect. ## Estado de esta versión Esta versión ya está conectada a la arquitectura de producción definida para el proyecto: - Supabase Auth + control de acceso `cotizador_wmc_access`. - n8n `/webhook/cotizador-wmc-chat` para Gemini, tarifario, históricos y generación de artefactos. - n8n `/webhook/cotizador-wmc-reportar` para reportes de usuario. - Persistencia de conversaciones y mensajes en Supabase. - Adjuntos privados en el bucket `cotizador-wmc-uploads`, con URLs firmadas temporales para n8n/Gemini. - Analítica global mediante `glm_track_app_event` para alimentar el dashboard general de aplicaciones GLM. - Módulo Tarifario visible únicamente cuando `can_use_tarifario=true`, con lectura y cambios auditados mediante los RPC seguros de Supabase. - Google Sheets / Slides / imágenes se generan desde los workflows de n8n y el Apps Script ya configurado en backend. ## Tecnologías - React 19 + TypeScript - TanStack Router / Query - Vite (SPA estática) - Tailwind CSS - Supabase JS ## Ruta de producción ```text https://digitalcompass.agency/cotizador-wmc/ ``` La aplicación se compila con base: ```text /cotizador-wmc/ ``` ## Configuración frontend El `.env` incluido contiene las variables públicas necesarias para compilar esta versión: ```env VITE_SUPABASE_URL="https://dbit.digitalcompass.agency" VITE_SUPABASE_ANON_KEY="..." VITE_REPORT_WEBHOOK_URL="https://agenteit.digitalcompass.agency/webhook/cotizador-wmc-reportar" VITE_CHAT_WEBHOOK_URL="https://agenteit.digitalcompass.agency/webhook/cotizador-wmc-chat" ``` La ANON KEY de Supabase es una clave pública de cliente. No debe agregarse `service_role` al frontend. ## Desarrollo / build ```bash npm ci npm run dev npm run build ``` `npm run build` genera una carpeta **`dist/`** lista para el despliegue del frontend estático. La ruta base de producción se mantiene en `/cotizador-wmc/`. ## Flujo de uso 1. El usuario inicia sesión con Google mediante Supabase Auth. 2. La app verifica dominio GLM + acceso activo en `cotizador_wmc_access`. 3. Al entrar se registra actividad para métricas globales de uso. 4. Cada chat se conserva en Supabase y además mantiene respaldo local del navegador. 5. Los adjuntos se guardan en Storage privado antes de llamar a n8n. 6. La app envía a n8n el JWT real de Supabase, usuario, conversación, mensaje, adjuntos y `appSessionId`. 7. n8n consulta contexto/tarifario/históricos, llama Gemini y devuelve la respuesta y, cuando aplique, el enlace del Google Sheet, Google Slides o imagen generado. 8. La respuesta y sus metadatos quedan guardados en el historial. ## Tarifario El botón **Tarifario** solo aparece para usuarios con `can_use_tarifario=true`. Desde el módulo se puede: - buscar y filtrar por país; - consultar tarifa vigente; - crear una tarifa; - editar una tarifa; - eliminar/desactivar una tarifa. Los cambios no escriben directamente sobre la tabla desde el navegador: utilizan `cotizador_wmc_process_my_agent_action`, que valida de nuevo el permiso y conserva auditoría. ## Analítica para dashboard GLM La app registra eventos autenticados con `glm_track_app_event`, entre ellos: - `app_open`; - `message_sent`; - `chat_deleted`; - `tariff_opened`; - `agent_error`; - `logout`. Los workflows registran adicionalmente las cotizaciones, propuestas, imágenes, mensualizaciones GLM, ejecuciones del agente y reportes, por lo que las vistas de dashboard de Supabase pueden calcular usuarios únicos, usuarios mensuales, promedio mensual, cotizaciones creadas y demás KPIs definidos.