feat: change QR url to production
This commit is contained in:
+130
@@ -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 |
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user