GLM ID Card Generator

¿Qué hace este proyecto?

Sistema de generación de ID corporativas para el departamento de RRHH de GomezLee Marketing (GLM), que opera en 14 países. El sistema permite:

1. Generar IDs (frente y reverso) de empleados de forma individual o por lote (Excel/CSV).
2. Editar fotos con IA: usa Google Gemini para vestir al empleado con un uniforme Columbia, bordar el logo de GLM en el pecho derecho y reemplazar el fondo por blanco.
3. Códigos QR: cada ID incluye un QR único que redirige a https://digitalcompass.agency/empleado?id=X para verificar en tiempo real el estatus del empleado contra BambooHR.
4. Exportación a PNG: descarga los ID como PNG listos para impresión CR80 o envío por WhatsApp.
5. Verificación pública: cualquier persona puede escanear el QR y ver la foto, nombre, puesto, país y estatus del empleado.

Arquitectura

• Frontend Generator: React + Vite (glm-card-generator/)
• Frontend Verificación QR: React + Vite (glm-card-qr/)
• Workflow de IA: n8n con Google Gemini para edición de fotos
• Base de datos: Supabase (PostgreSQL)
• Almacenamiento: Supabase Storage + Google Drive
• Verificación: BambooHR API

---

Instalación y ejecución

Requisitos

• Node.js >= 18
• npm

1. Clonar el repositorio

git clone <repo-url>
cd GLM ID Card Generator

2. Configurar variables de entorno

# Para el generador de IDs
cp glm-card-generator/.env.example glm-card-generator/.env

# Para el visor QR
cp glm-card-qr/.env.example glm-card-qr/.env

Editar los archivos .env con los valores correspondientes.

3. Instalar dependencias y ejecutar

Generador de IDs:

cd glm-card-generator
npm install
npm run dev

Abre en: http://localhost:5173/empleado-id/

Visor QR:

cd glm-card-qr
npm install
npm run dev

Abre en: http://localhost:5173/empleado

4. Build para producción

# Generador
cd glm-card-generator
npm run build
# El output está en glm-card-generator/dist/

# Visor QR
cd glm-card-qr
npm run build
# El output está en glm-card-qr/dist/

---

Variables de entorno

glm-card-generator/.env.example

VITE_SUPABASE_ANON_KEY=J5JS7HG...
VITE_SUPABASE_URL=https://tudominio
VITE_WEBHOOK_TOKEN=6d4g56d4fgd...
VITE_N8N_WEBHOOK_URL=https://tudominio/webhook/carnet

glm-card-qr/.env.example

VITE_SUPABASE_URL=https://tudominio
VITE_SUPABASE_ANON_KEY=J5JS7HG...

Descripción de variables

Variable	Descripción
VITE_SUPABASE_URL	URL del proyecto Supabase
VITE_SUPABASE_ANON_KEY	Clave anónima de Supabase
VITE_WEBHOOK_TOKEN	Token de autenticación para el webhook de n8n
VITE_N8N_WEBHOOK_URL	URL del webhook en n8n (/webhook/carnet)

---

Explicación del workflow de n8n

Archivo: n8n-workflow/GLM ID Card Generator.json

El workflow "GLM ID Card Generator" se ejecuta cuando el frontend envía una foto de empleado al webhook POST /webhook/carnet autenticado con el token en el header.

Flujo

1. Webhook — Recibe la solicitud POST con la foto del empleado (y opcionalmente un array de empleados para lote).
2. IF: "Es un binario y employeeId?" — Determina si es un envío individual (tiene employeeId y foto binaria) o por lote.
3. IF: "Es un binario?" — Verifica si el body contiene empleados (array de empleados en modo lote).
4. Split Out + Loop Over Items — En modo lote, separa el array y procesa cada empleado uno por uno.
5. Download file (Google Drive) — Descarga la foto del empleado desde Google Drive (según URL recibida).
6. Descargar logo GLM (HTTP Request) — Obtiene el logo de GLM desde Supabase Storage.
7. Edit an image (Google Gemini) — Edita la foto del empleado con IA:
   • Modelo: gemini-3-pro-image o gemini-3.1-flash-image
   • Viste a la persona con un uniforme Columbia (camisa de botones color #2d3748)
   • Borda el logo de GLM en el pecho derecho
   • Reemplaza el fondo por blanco sólido
8. Extract from File — Extrae el binario de la imagen editada.
9. Guardar foto (Google Drive) — Guarda la foto editada en la carpeta "Fotos Temporal Carnet Empleados".
10. Hacer url publica (Google Drive) — Comparte la imagen públicamente.
11. Actualizar foto del empleado (Supabase) — Actualiza el registro del empleado en la tabla empleados_glm con la photo_url y marca photo_uploaded = FALSE.
12. Merge — Combina los resultados.
13. Respond to Webhook — Devuelve la URL de la foto editada al frontend.

Credenciales usadas

Tipo	Nombre
HTTP Header Auth	GLM ID Generator
Google Drive OAuth2	Eidan - Google Drive account
Google Gemini API	Eidan - Google Gemini(PaLM) Api account
Supabase API	Sofia test - Supabase account