feat: implement bulk ID card generation via Excel upload and individual form processing with Supabase storage integration

2026-06-30 15:08:52 -04:00
parent 510ebe8058
commit 710045ee11
2 changed files with 392 additions and 240 deletions
@@ -3,7 +3,7 @@ export const clientTemplates = {
    'Esp': {
        'Generico': 'images/AF Generico Esp.png',
        'Claro': 'images/AF Claro Esp.png',
-        'Colgate': 'images/GLM Colgate Esp.png',
+        'Colgate': 'images/AF Colgate Esp.png',
        'KitchenAid': 'images/AF KitchenAid Esp.png',
        'Kraft': 'images/AF Kraft Esp.png',
        'Motorola': 'images/AF Motorola Esp.png',
@@ -15,7 +15,7 @@ export const clientTemplates = {
    'Ing': {
        'Generico': 'images/AF Generico Ing.png',
        'Claro': 'images/AF Claro Ing.png',
-        'Colgate': 'images/GLM Colgate Ing.png',
+        'Colgate': 'images/AF Colgate Ing.png',
        'KitchenAid': 'images/AF KitchenAid Ing.png',
        'Kraft': 'images/AF Kraft Ing.png',
        'Motorola': 'images/AF Motorola Ing.png',
@@ -37,10 +37,33 @@ function loadScript(src, globalKey) {
    });
 }

-const getQRLib = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js', 'QRCode');
+export const getQRLib = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js', 'QRCode');
 const getHtml2Canvas = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', 'html2canvas');
+export const getJSZip = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js', 'JSZip');
+export const getXLSXLib = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js', 'XLSX');

-// ── GENERADOR DE QR NATIVO (REACT RENDERING) ──
+function convertDriveUrlToDirect(url) {
+    if (!url) return '';
+    const regExp = /(?:https?:\/\/)?(?:drive\.google\.com\/)(?:file\/d\/|open\?id=)([\w-]+)/;
+    const match = url.match(regExp);
+    if (match && match[1]) {
+        return `https://docs.google.com/uc?export=download&id=${match[1]}`;
+    }
+    return url;
+}
+
+function preloadImage(src) {
+    return new Promise((resolve) => {
+        if (!src) return resolve(null);
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(src);
+        img.onerror = () => resolve(null);
+        img.src = src;
+    });
+}
+
+// ── GENERADOR DE QR NATIVO ──
 export async function renderQRCode(employeeId, canvasElement) {
    if (!canvasElement) return;
    const text = (employeeId || '').trim();
@@ -63,32 +86,42 @@ export async function renderQRCode(employeeId, canvasElement) {
        correctLevel: QRCodeLib.CorrectLevel.M
    });

-    setTimeout(() => {
-        const img = tmp.querySelector('img') || tmp.querySelector('canvas');
+    await new Promise((resolve) => setTimeout(resolve, 60));

-        const drawIt = (src) => {
+    const img = tmp.querySelector('img') || tmp.querySelector('canvas');
+
+    const drawIt = (src) => {
+        return new Promise((res) => {
            const i = new Image();
            i.onload = () => {
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(0, 0, 55, 55);
                ctx.drawImage(i, 0, 0, 55, 55);
                if (tmp.parentNode) document.body.removeChild(tmp);
+                res();
            };
            i.src = src;
-        };
+        });
+    };

-        if (img && img.tagName === 'CANVAS') {
-            drawIt(img.toDataURL());
-        } else if (img) {
-            if (img.complete) drawIt(img.src);
-            else img.onload = () => drawIt(img.src);
-        } else {
-            if (tmp.parentNode) document.body.removeChild(tmp);
+    if (img && img.tagName === 'CANVAS') {
+        await drawIt(img.toDataURL());
+    } else if (img) {
+        if (img.complete) await drawIt(img.src);
+        else {
+            await new Promise((res) => {
+                img.onload = async () => {
+                    await drawIt(img.src);
+                    res();
+                };
+            });
        }
-    }, 50);
+    } else {
+        if (tmp.parentNode) document.body.removeChild(tmp);
+    }
 }

-// ── ENGINE DE PROCESAMIENTO ULTRA MAX QUALITY (650x1004) ──
+// ── ENGINE DE PROCESAMIENTO INDIVIDUAL ──
 export async function downloadIDCards(config) {
    const { name, role, selectedClient, language, photoSrc, baseUrl, qrCanvas, onStateChange } = config;

@@ -97,13 +130,11 @@ export async function downloadIDCards(config) {
    const html2canvasLib = await getHtml2Canvas();
    const cleanName = name.trim().replace(/\s+/g, '') || 'Empleado';

-    // Resolver rutas absolutas
    const frontBgUrl = `${baseUrl}images/AF GLM Frente.png`;
    const currentGroup = clientTemplates[language] || clientTemplates['Esp'];
    const backBgFile = currentGroup[selectedClient] || 'images/AF Generico Esp.png';
    const backBgUrl = `${baseUrl}${backBgFile}`;

-    // Sandbox virtual aislado
    const sandbox = document.createElement('div');
    sandbox.style.position = 'fixed';
    sandbox.style.top = '-9999px';
@@ -125,7 +156,6 @@ export async function downloadIDCards(config) {
        font-family: Arial, Helvetica, sans-serif;
    `;

-    // 1. Frente Virtual en tamaño real
    const vFront = document.createElement('div');
    vFront.style.cssText = cardStyleBase;
    vFront.style.backgroundImage = `url('${frontBgUrl}')`;
@@ -155,24 +185,12 @@ export async function downloadIDCards(config) {
        </div>
    `;

-    // 2. Reverso Virtual en tamaño real
    const vBack = document.createElement('div');
    vBack.style.cssText = cardStyleBase;
    vBack.style.backgroundImage = `url('${backBgUrl}')`;

    const vQRZone = document.createElement('div');
-    vQRZone.style.cssText = `
-        position: absolute;
-        bottom: 27px;
-        right: 27px;
-        background: #ffffff;
-        padding: 11px;
-        border-radius: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 5;
-    `;
+    vQRZone.style.cssText = `position: absolute; bottom: 27px; right: 27px; background: #ffffff; padding: 11px; border-radius: 16px; display: flex; align-items: center; justify-content: center; z-index: 5;`;

    const vQRCanvas = document.createElement('canvas');
    vQRCanvas.width = 149;
@@ -191,15 +209,7 @@ export async function downloadIDCards(config) {
    sandbox.appendChild(vFront);
    sandbox.appendChild(vBack);

-    const renderOpts = {
-        scale: 1,
-        useCORS: true,
-        allowTaint: false,
-        backgroundColor: null,
-        logging: false,
-        width: 650,
-        height: 1004
-    };
+    const renderOpts = { scale: 1, useCORS: true, allowTaint: false, backgroundColor: null, logging: false, width: 650, height: 1004 };

    try {
        const frontCanvas = await html2canvasLib(vFront, renderOpts);
@@ -215,6 +225,138 @@ export async function downloadIDCards(config) {
    }
 }

+// ── ENGINE MASIVO CON CORRESPONDENCIA DINÁMICA DE REVERSO POR IDIOMA ──
+export async function downloadBulkIDCards({ employees, baseUrl, onStateChange }) {
+    if (onStateChange) onStateChange({ processing: true, text: 'Descargando...' });
+
+    const html2canvasLib = await getHtml2Canvas();
+    const JSZipLib = await getJSZip();
+    const zip = new JSZipLib();
+
+    const hiddenQRCanvas = document.createElement('canvas');
+    hiddenQRCanvas.width = 55;
+    hiddenQRCanvas.height = 55;
+
+    const sandbox = document.createElement('div');
+    sandbox.style.position = 'fixed';
+    sandbox.style.top = '-9999px';
+    sandbox.style.left = '-9999px';
+    sandbox.style.width = '1400px';
+    document.body.appendChild(sandbox);
+
+    const cardStyleBase = `
+        position: relative;
+        width: 650px;
+        height: 1004px;
+        border-radius: 16px;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        display: inline-block;
+        overflow: hidden;
+        font-family: Arial, Helvetica, sans-serif;
+    `;
+
+    const renderOpts = { scale: 1, useCORS: true, allowTaint: false, backgroundColor: null, logging: false, width: 650, height: 1004 };
+
+    for (let i = 0; i < employees.length; i++) {
+        const emp = employees[i];
+        const cleanName = emp.name.trim().replace(/\s+/g, '') || `Empleado_${i + 1}`;
+        const cleanClient = emp.selectedClient.trim().replace(/\s+/g, '') || 'Generico';
+
+        const folderName = `${cleanName}_${cleanClient}`;
+
+        await renderQRCode(emp.employeeId, hiddenQRCanvas);
+
+        const directDriveUrl = convertDriveUrlToDirect(emp.fotoUrl);
+        const validatedPhotoUrl = await preloadImage(directDriveUrl);
+
+        // --- Renderizar Frente Virtual ---
+        const vFront = document.createElement('div');
+        vFront.style.cssText = cardStyleBase;
+        vFront.style.backgroundImage = `url('${baseUrl}images/AF GLM Frente.png')`;
+
+        let photoStyleHtml = `background: #e1e9ee; display: flex; align-items: center; justify-content: center;`;
+        let innerPhotoContent = `<svg style="width:100px; height:100px; opacity:0.3; color:#4F758B;" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="10" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 24c0-6 22-6 22 0" stroke="currentColor" stroke-width="1.5"/></svg>`;
+
+        if (validatedPhotoUrl) {
+            photoStyleHtml = `
+                background-image: url('${validatedPhotoUrl}') !important;
+                background-size: cover !important;
+                background-position: center center !important;
+                background-repeat: no-repeat !important;
+            `;
+            innerPhotoContent = '';
+        }
+
+        vFront.innerHTML = `
+            <div style="position:absolute; top:260.5px; left:131.5px; width:384px; height:384px; border-radius:50%; overflow:hidden; z-index:5; ${photoStyleHtml}">
+                ${innerPhotoContent}
+            </div>
+            <div style="position:absolute; top:715px; left:20px; right:20px; font-size:38px; font-weight:900; color:#FFFFFF; text-align:center; text-transform:uppercase; letter-spacing:1px; word-break:break-word; z-index:5;">
+                ${emp.name.toUpperCase()}
+            </div>
+            <div style="position:absolute; bottom:32px; right:15px; font-size:26px; font-weight:700; color:#6B8499; text-align:right; text-transform:uppercase; letter-spacing:1px; max-width:550px; white-space:nowrap; z-index:5;">
+                ${emp.role.toUpperCase()}
+            </div>
+        `;
+        sandbox.appendChild(vFront);
+
+        // --- Renderizar Reverso Virtual (Asignación exacta e idéntica según cliente e idioma) ───
+        const currentGroup = clientTemplates[emp.language] || clientTemplates['Esp'];
+
+        // Comprobación robusta de la existencia de la propiedad mapeada del cliente
+        const clientKey = currentGroup.hasOwnProperty(emp.selectedClient) ? emp.selectedClient : 'Generico';
+        const backBgFile = currentGroup[clientKey];
+        const backBgUrl = `${baseUrl}${backBgFile}`;
+
+        const vBack = document.createElement('div');
+        vBack.style.cssText = cardStyleBase;
+        vBack.style.backgroundImage = `url('${backBgUrl}')`;
+
+        const vQRZone = document.createElement('div');
+        vQRZone.style.cssText = `position: absolute; bottom: 27px; right: 27px; background: #ffffff; padding: 11px; border-radius: 16px; display: flex; align-items: center; justify-content: center; z-index: 5;`;
+
+        const vQRCanvas = document.createElement('canvas');
+        vQRCanvas.width = 149;
+        vQRCanvas.height = 149;
+        vQRCanvas.style.width = '100px';
+        vQRCanvas.style.height = '100px';
+        const vQRContext = vQRCanvas.getContext('2d');
+        if (vQRContext) {
+            vQRContext.imageSmoothingEnabled = false;
+            vQRContext.drawImage(hiddenQRCanvas, 0, 0, 149, 149);
+        }
+        vQRZone.appendChild(vQRCanvas);
+        vBack.appendChild(vQRZone);
+        sandbox.appendChild(vBack);
+
+        // Captura de datos gráficos
+        const frontCanvas = await html2canvasLib(vFront, renderOpts);
+        const frontData = frontCanvas.toDataURL('image/png').split(',')[1];
+        zip.file(`${folderName}/${cleanName}_${cleanClient}_Frente.png`, frontData, { base64: true });
+
+        const backCanvas = await html2canvasLib(vBack, renderOpts);
+        const backData = backCanvas.toDataURL('image/png').split(',')[1];
+        zip.file(`${folderName}/${cleanName}_${cleanClient}_Reverso.png`, backData, { base64: true });
+
+        sandbox.removeChild(vFront);
+        sandbox.removeChild(vBack);
+    }
+
+    if (sandbox.parentNode) document.body.removeChild(sandbox);
+
+    const content = await zip.generateAsync({ type: 'blob' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(content);
+    link.download = `Lote_Carnets_GLM.zip`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    if (onStateChange) onStateChange({ processing: false, text: '⬇ Descargar' });
+}
+
 function executeFileDownload(dataUrl, fileName) {
    const link = document.createElement('a');
    link.href = dataUrl;