glm-id-card-generator/glm-card-generator/ManualDeUso.md

# Manual de Uso — GLM ID Card Generator

## ¿Qué hace esta aplicación?

Genera carnets corporativos **CR80** (tamaño tarjeta de crédito) para los colaboradores de GomezLee Marketing. El sistema crea dos imágenes PNG por cada carnet: el **Frente** (con foto, nombre y puesto del colaborador) y el **Reverso** (con el logo del cliente y un código QR único). Al escanear el QR, cualquier persona puede verificar en tiempo real si el colaborador está activo en BambooHR.

### Capacidades principales

- **Modo Individual**: Ingresa los datos de un colaborador y descarga su carnet.
- **Modo Lote**: Sube un archivo Excel/CSV con varios colaboradores y descarga un ZIP con todos los carnets.
- **Verificación QR**: Escanea el código QR del reverso para consultar el estado actual del colaborador.

---

## Requisitos

- Navegador **Google Chrome** o **Microsoft Edge** (actualizado).
- Cuenta de Google corporativa **@gomezleemarketing.com**.
- Conexión a Internet.

---

## Paso a paso — Inicio de sesión

1. Abre la URL de la aplicación en Chrome o Edge.
2. Haz clic en **"Continuar con Google"**.
3. Inicia sesión con tu correo **@gomezleemarketing.com**.
4. La aplicación te redirigirá automáticamente al generador de carnets.

> Si tu cuenta no es del dominio `@gomezleemarketing.com`, la aplicación no permitirá el acceso.

---

## Paso a paso — Modo Individual

1. **Nombre**: Escribe el nombre completo del colaborador (ej. "Alexi Zabala").
2. **Puesto**: Escribe el cargo del colaborador (ej. "Mercaderista").
3. **Subir foto**: Haz clic en "Subir foto del colaborador" y selecciona una foto desde tu computadora. La foto se procesará con IA automáticamente.
4. **Idioma**: Selecciona **Español** o **Inglés** — esto cambia el fondo del reverso del carnet.
5. **Cliente / Proyecto**: Selecciona el cliente asignado de la lista desplegable.
6. **ID del empleado / Cédula**: Ingresa el número de cédula o ID del colaborador **sin guiones ni espacios**. El código QR se genera automáticamente al escribir.
7. Revisa la **vista previa en tiempo real** que muestra el frente y el reverso del carnet.
8. Haz clic en **"⬇ Descargar"**.
9. Se descargarán dos archivos PNG:
   - `{Nombre}Frente.png`
   - `{Nombre}Reverso.png`

> El botón "Descargar" solo se habilita cuando los campos Nombre, Puesto e ID están llenos.

---

## Paso a paso — Modo Lote (carga masiva)

1. Prepara un archivo **Excel (.xlsx)** o **CSV** con las siguientes columnas exactas:

| Columna | Requerido | Descripción |
|---|---|---|
| `nombre` | Sí | Nombre completo del colaborador |
| `puesto` | Sí | Cargo del colaborador |
| `cliente/proyecto` | Sí | Cliente asignado (ver lista más abajo) |
| `cedula` | Sí | Cédula o ID del colaborador (sin guiones ni espacios) |
| `lenguaje` | No | `Esp` para español (default), `Ing` para inglés |
| `foto_url` | No | URL pública de la foto (Google Drive o enlace directo) |

2. En la aplicación, en el panel **"Carga Masiva de Colaboradores"**, haz clic en **"Seleccionar Archivo Excel"**.
3. Selecciona tu archivo. El sistema mostrará cuántos colaboradores se cargaron.
4. Haz clic en **"⬇ Descargar"** en la sección de lote.
5. El sistema procesará cada colaborador: obtendrá las fotos, generará los carnets y empaquetará todo.
6. Se descargará un archivo **`Lote_Carnets_GLM.zip`**.
7. Dentro del ZIP, cada colaborador tiene una carpeta con:
   - `Frente.png`
   - `Reverso.png`

### Clientes disponibles

La columna `cliente/proyecto` debe coincidir con uno de estos (no importa mayúsculas/minúsculas):

- Generico (por defecto)
- Claro
- Colgate
- KitchenAid
- Kraft
- Motorola
- Nestle
- P&G
- Philip Morris
- Whirlpool

### Formato de URLs de foto

Si usas Google Drive como `foto_url`, puedes pegar el enlace de compartir normal (ej. `https://drive.google.com/file/d/.../view`). El sistema lo convertirá automáticamente para poderlo descargar.

---

## Paso a paso — Verificación QR

Cualquier persona con un teléfono puede verificar un carnet:

1. Escanea el código QR que aparece en el **Reverso** del carnet.
2. Se abrirá una página web con los datos del colaborador:
   - **Nombre**
   - **Puesto**
   - **País**
   - **Estado** (Activo = verde / No Activo = rojo)
3. Si el colaborador está **Activo** en BambooHR, la página se muestra en verde.
4. Si el colaborador está **Inactivo o Terminado**, la página se muestra en rojo con la leyenda "Empleado No Activo".

> Esta verificación es en tiempo real contra BambooHR — no requiere que RRHH haga ningún paso adicional.

---

## Consejos útiles

- Los archivos PNG se generan a **650 x 1004 px** (equivalente a 300 dpi en CR80), listos para impresión.
- El ID del empleado se limpia automáticamente de guiones y espacios.
- Durante el procesamiento por lote, las fotos se guardan automáticamente en Supabase y se asocian al colaborador.
- Si una foto falla (Drive con permisos restringidos, URL caída), el carnet se genera igual con el círculo de foto vacío. El resto de colaboradores no se ven afectados.

---

## Solución de problemas

| Problema | Causa probable | Solución |
|---|---|---|
| No puedo iniciar sesión | La cuenta no es @gomezleemarketing.com | Usa tu correo corporativo de GLM |
| La foto no se procesa | La IA no responde | La foto original se usará igual — el carnet se genera sin edición IA |
| El QR no se genera | El ID del empleado tiene menos de 3 caracteres | Ingresa un ID de al menos 3 dígitos |
| Error al leer el Excel | El archivo no tiene las columnas correctas | Revisa que tenga: nombre, puesto, cliente/proyecto, cedula |
| El ZIP no se descarga | Demasiados colaboradores o fotos muy pesadas | Reduce el lote a máximo 50 colaboradores por archivo |
| La descarga no inicia | El navegador bloqueó las descargas múltiples | Permite descargas en la configuración del navegador |