diff --git a/ManualDeUso.md b/ManualDeUso.md new file mode 100644 index 0000000..6893e66 --- /dev/null +++ b/ManualDeUso.md @@ -0,0 +1,130 @@ +# 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 | diff --git a/src/script/script.jsx b/src/script/script.jsx index a6ab1e9..bdc59c3 100644 --- a/src/script/script.jsx +++ b/src/script/script.jsx @@ -131,7 +131,7 @@ export async function renderQRCode(employeeId, canvasElement) { document.body.appendChild(tmp); new QRCodeLib(tmp, { - text: `http://localhost:5173/empleado-id/${cleanId}`, + text: `http://digitalcompass.agency/empleado-id/${cleanId}`, width: 55, height: 55, colorDark: '#000000',