# 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

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

### 2. Configurar variables de entorno

```bash
# 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:**

```bash
cd glm-card-generator
npm install
npm run dev
```

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

**Visor QR:**

```bash
cd glm-card-qr
npm install
npm run dev
```

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

### 4. Build para producción

```bash
# 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`

```env
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`

```env
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 |