- {/* --- STAGE: Vista previa de las tarjetas ─── */}
+ {/* VISTA PREVIA */}
-
- {/* Frente */}
Frente
-
-
+
+
{photoSrc ? (
-
- ) : (
-
-
-
- {name ? name.toUpperCase() : 'NOMBRE APELLIDO'}
-
-
- {role ? role.toUpperCase() : 'PUESTO'}
-
+
{name ? name.toUpperCase() : 'NOMBRE APELLIDO'}
+
{role ? role.toUpperCase() : 'PUESTO'}
- {/* Reverso */}
Reverso
- {/* Asignamos la referencia de React para un control de pixeles seguro */}
-
+
-
diff --git a/src/components/Login.css b/src/components/Login.css
new file mode 100644
index 0000000..9a89d74
--- /dev/null
+++ b/src/components/Login.css
@@ -0,0 +1,163 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --azul-glm: #4F758B;
+ --azul-medio: #5B7F95;
+ --acero-claro: #6B8FA3;
+ --verde-glm: #6CC24A;
+ --verde-claro: #A4D65E;
+ --verde-bg: #EEF6E8;
+ --azul-seccion: #D6E8F4;
+ --gris-oscuro: #4A4A4A;
+ --gris-medio: #D0D0D0;
+ --gris-claro: #F5F5F5;
+ --blanco: #FFFFFF;
+ --naranja: #FF6A13;
+}
+
+.login-page {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+ background: linear-gradient(135deg, var(--blanco) 0%, var(--gris-claro) 100%);
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+.login-page.loading .login-card {
+ pointer-events: none;
+ opacity: 0.8;
+}
+
+.login-card {
+ background: var(--blanco);
+ border-radius: 16px;
+ box-shadow: 0 8px 32px rgba(79, 117, 139, 0.12);
+ padding: 48px 40px;
+ width: 100%;
+ max-width: 400px;
+ text-align: center;
+ border: 1px solid var(--gris-medio);
+}
+
+.logo {
+ width: 180px;
+ height: auto;
+ margin-bottom: 24px;
+}
+
+.title {
+ font-size: 22px;
+ font-weight: 700;
+ color: var(--azul-glm);
+ letter-spacing: 0.5px;
+ margin-bottom: 6px;
+ text-transform: uppercase;
+}
+
+.subtitle {
+ font-size: 13px;
+ color: var(--acero-claro);
+ font-weight: 400;
+ margin-bottom: 24px;
+}
+
+.login-divider {
+ height: 2px;
+ background: var(--verde-glm);
+ margin: 24px 0;
+ border-radius: 1px;
+}
+
+.btn-google {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ width: 100%;
+ padding: 14px 24px;
+ background: var(--blanco);
+ border: 2px solid var(--gris-medio);
+ border-radius: 10px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 15px;
+ font-weight: 600;
+ color: var(--gris-oscuro);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.btn-google:hover:not(:disabled) {
+ border-color: var(--verde-glm);
+ background: var(--verde-bg);
+ color: var(--azul-glm);
+ box-shadow: 0 4px 16px rgba(108, 194, 74, 0.2);
+ transform: translateY(-1px);
+}
+
+.btn-google:active:not(:disabled) {
+ transform: translateY(0);
+}
+
+.btn-google:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.google-icon {
+ flex-shrink: 0;
+}
+
+.domain-hint {
+ margin-top: 14px;
+ font-size: 12px;
+ color: var(--acero-claro);
+ font-weight: 500;
+}
+
+.error-message {
+ margin-top: 16px;
+ padding: 12px 16px;
+ background: #FDECEA;
+ border: 1px solid #F5C6CB;
+ border-radius: 8px;
+ font-size: 13px;
+ color: #C0392B;
+ text-align: left;
+}
+
+.spinner {
+ width: 40px;
+ height: 40px;
+ border: 3px solid var(--gris-medio);
+ border-top-color: var(--verde-glm);
+ border-radius: 50%;
+ animation: spin 0.8s linear infinite;
+ margin: 16px auto 0;
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (max-width: 480px) {
+ .login-card {
+ padding: 36px 24px;
+ }
+
+ .title {
+ font-size: 19px;
+ }
+
+ .logo {
+ width: 150px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Login.jsx b/src/components/Login.jsx
new file mode 100644
index 0000000..47057c5
--- /dev/null
+++ b/src/components/Login.jsx
@@ -0,0 +1,97 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { supabase } from '../services/supabase';
+import './Login.css';
+
+const ALLOWED_DOMAIN = '@gomezleemarketing.com';
+const GLM_LOGO = 'https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM_completo.png';
+
+export default function Login() {
+ const navigate = useNavigate();
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ supabase.auth.getSession().then(({ data: { session } }) => {
+ if (session?.user?.email?.endsWith(ALLOWED_DOMAIN)) {
+ navigate('/empleado-id/');
+ }
+ });
+ }, [navigate]);
+
+ const handleGoogleLogin = async () => {
+ setLoading(true);
+ setError('');
+
+ const redirectUrl = `${window.location.origin}/empleado-id/`;
+
+ const { error: authError } = await supabase.auth.signInWithOAuth({
+ provider: 'google',
+ options: {
+ redirectTo: redirectUrl,
+ queryParams: {
+ hd: 'gomezleemarketing.com',
+ },
+ },
+ });
+
+ if (authError) {
+ setError(authError.message);
+ setLoading(false);
+ }
+ };
+
+ if (loading) {
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
GLM ID Card Generator
+
GomezLee Marketing · Carnet Corporativo CR80
+
+
+
+
+
+
Solo cuentas @gomezleemarketing.com
+
+ {error &&
{error}
}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/script/script.jsx b/src/script/script.jsx
index 5bed857..5c478cd 100644
--- a/src/script/script.jsx
+++ b/src/script/script.jsx
@@ -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,17 +37,94 @@ 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) ──
+export function convertDriveUrlToDirect(url) {
+ if (!url) return '';
+
+ if (!url.includes('drive.google.com') && !url.includes('docs.google.com')) {
+ return url;
+ }
+
+ try {
+ const regExp = /(?:https?:\/\/)?(?:drive\.google\.com\/)(?:file\/d\/|open\?id=)([\w-]+)/;
+ const match = url.match(regExp);
+ if (match && match[1]) {
+ // Endpoint optimizado para saltar bloqueos pesados de descargas directas anónimas
+ return `https://drive.google.com/thumbnail?id=${match[1]}&sz=w1000`;
+ }
+ } catch (e) {
+ console.error("Error convirtiendo la URL de Drive:", e);
+ }
+ return url;
+}
+
+export async function fetchImageAsBlob(url) {
+ if (!url) return null;
+
+ if (url.startsWith('blob:') || url.startsWith('data:')) {
+ try {
+ const response = await fetch(url);
+ if (response.ok) return await response.blob();
+ } catch (e) {
+ console.error("Error al obtener Blob local de URL blob/data:", e);
+ }
+ return null;
+ }
+
+ if (url.includes('drive.google.com') || url.includes('docs.google.com')) {
+ try {
+ const response = await fetch(url);
+ if (response.ok) return await response.blob();
+ } catch {
+ console.warn("No se pudo obtener el Blob directo de Drive debido a restricciones CORS.");
+ }
+ return null;
+ }
+
+ try {
+ const proxyUrl = `https://images.weserv.nl/?url=${encodeURIComponent(url)}&default=${encodeURIComponent(url)}`;
+ const response = await fetch(proxyUrl);
+ if (!response.ok) throw new Error("Error en respuesta de red proxy");
+ return await response.blob();
+ } catch (e) {
+ console.error("Error haciendo fetch con bypass CORS a la imagen externa:", e);
+ try {
+ const response = await fetch(url, { mode: 'cors' });
+ return await response.blob();
+ } catch {
+ return null;
+ }
+ }
+}
+
+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 = () => {
+ const retryImg = new Image();
+ retryImg.onload = () => resolve(src);
+ retryImg.onerror = () => resolve(null);
+ retryImg.src = src;
+ };
+ img.src = src;
+ });
+}
+
+// ── GENERADOR DE QR NATIVO (Garantiza ID limpio en URL) ──
export async function renderQRCode(employeeId, canvasElement) {
if (!canvasElement) return;
- const text = (employeeId || '').trim();
+ const cleanId = (employeeId || '').replace(/[-\s]/g, '');
const ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
- if (text.length <= 2) return;
+ if (cleanId.length <= 2) return;
const QRCodeLib = await getQRLib();
const tmp = document.createElement('div');
@@ -55,7 +132,7 @@ export async function renderQRCode(employeeId, canvasElement) {
document.body.appendChild(tmp);
new QRCodeLib(tmp, {
- text: `http://localhost:5173/employee/${text}`,
+ text: `http://localhost:5173/empleado-id/${cleanId}`,
width: 55,
height: 55,
colorDark: '#000000',
@@ -63,32 +140,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 +184,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,27 +210,23 @@ 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}')`;
- let photoStyleHtml = `background: #e1e9ee; display: flex; align-items: center; justify-content: center;`;
- let innerPhotoContent = `
`;
+ let photoTagHtml = `
+
+ `;
if (photoSrc) {
- photoStyleHtml = `
- background-image: url('${photoSrc}') !important;
- background-size: cover !important;
- background-position: center center !important;
- background-repeat: no-repeat !important;
- `;
- innerPhotoContent = '';
+ photoTagHtml = `
`;
}
vFront.innerHTML = `
-
- ${innerPhotoContent}
+
+ ${photoTagHtml}
${name.toUpperCase() || 'NOMBRE APELLIDO'}
@@ -155,24 +236,12 @@ export async function downloadIDCards(config) {
`;
- // 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 +260,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 +276,161 @@ export async function downloadIDCards(config) {
}
}
+// ── ENGINE MASIVO CON SOLUCIÓN TOTAL POR INYECCIÓN DE IMG CORS NATIVA ──
+export async function downloadBulkIDCards({ employees, baseUrl, onStateChange, onProcessEmployeePhoto }) {
+ 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 currentClient = emp.selectedClient || 'Generico';
+ const sanitizedEmpName = (emp.name || '').trim().replace(/[\\/:*?"<>|]/g, '-') || `Empleado_${i + 1}`;
+ const sanitizedClientName = String(currentClient).trim().replace(/[\\/:*?"<>|]/g, '-');
+ const folderName = `${sanitizedEmpName} - ${sanitizedClientName}`;
+
+ const strictCleanId = String(emp.employeeId || '').replace(/[-\s]/g, '');
+
+ await renderQRCode(strictCleanId, hiddenQRCanvas);
+
+ const directDriveUrl = convertDriveUrlToDirect(emp.fotoUrl);
+ let validatedPhotoUrl = null;
+
+ if (directDriveUrl && strictCleanId) {
+ try {
+ const blobData = await fetchImageAsBlob(directDriveUrl);
+ if (blobData) {
+ validatedPhotoUrl = URL.createObjectURL(blobData);
+ if (onProcessEmployeePhoto) {
+ await onProcessEmployeePhoto(strictCleanId, blobData, emp.selectedClient || '');
+ }
+ }
+ } catch (err) {
+ console.error(`Error guardando foto en Supabase para Cédula: ${strictCleanId}`, err);
+ }
+ }
+
+ if (!validatedPhotoUrl && directDriveUrl) {
+ 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')`;
+
+ // CAMBIO ESTRATÉGICO AQUÍ: Usamos una etiqueta
![]()
HTML real con crossorigin explícito,
+ // esto destruye el bloqueo "Anti-Taint" de los lienzos y obliga a html2canvas a procesar la foto de Drive.
+ let photoTagHtml = `
+
+ `;
+
+ if (validatedPhotoUrl) {
+ photoTagHtml = `
`;
+ }
+
+ vFront.innerHTML = `
+
+ ${photoTagHtml}
+
+
+ ${emp.name.toUpperCase()}
+
+
+ ${emp.role.toUpperCase()}
+
+ `;
+ sandbox.appendChild(vFront);
+
+ // --- Renderizar Reverso Virtual ---
+ const currentGroup = clientTemplates[emp.language] || clientTemplates['Esp'];
+ const backBgFile = currentGroup[currentClient] || currentGroup['Generico'];
+ 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);
+
+ // Forzar un retraso mínimo de microsegundos para asegurar el render interno
+ await new Promise((resolve) => setTimeout(resolve, 30));
+
+ // Capturas gráficas del ZIP
+ const frontCanvas = await html2canvasLib(vFront, renderOpts);
+ const frontData = frontCanvas.toDataURL('image/png').split(',')[1];
+ zip.file(`${folderName}/Frente.png`, frontData, { base64: true });
+
+ const backCanvas = await html2canvasLib(vBack, renderOpts);
+ const backData = backCanvas.toDataURL('image/png').split(',')[1];
+ zip.file(`${folderName}/Reverso.png`, backData, { base64: true });
+
+ if (validatedPhotoUrl && validatedPhotoUrl.startsWith('blob:')) {
+ URL.revokeObjectURL(validatedPhotoUrl);
+ }
+
+ 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;
diff --git a/src/services/storage.js b/src/services/storage.js
index d6e59c3..310ea54 100644
--- a/src/services/storage.js
+++ b/src/services/storage.js
@@ -1,21 +1,97 @@
import { supabase } from "./supabase";
-export async function uploadEmployeePhoto(employeeNumber, file) {
+/**
+ * Registra el cliente/proyecto de un carnet descargado en la tabla
+ * "carnet_empleados_creados_glm".
+ *
+ * @param {string} employeeNumber - Número de cédula limpio (sin guiones/espacios)
+ * @param {string} clienteProyecto - Nombre del cliente/proyecto seleccionado
+ * @returns {Promise
}
+ */
+export async function saveClienteProyecto(employeeNumber, clienteProyecto) {
+ const cleanCedula = String(employeeNumber || '').replace(/[-\s]/g, '');
+ const valorCliente = clienteProyecto || 'Generico';
- const extension = file.name.split(".").pop();
+ console.log(`[Supabase] → saveClienteProyecto llamada con: cedula="${cleanCedula}", cliente_proyecto="${valorCliente}"`);
- const fileName = `${employeeNumber}.${extension}`;
+ if (!cleanCedula) {
+ console.warn('[Supabase] saveClienteProyecto abortada: cédula vacía.');
+ return;
+ }
+
+ // CORRECCIÓN: El objeto debe llevar la cédula para que upsert funcione por conflicto
+ const { data, error } = await supabase
+ .from('carnet_empleados_creados_glm')
+ .upsert(
+ {
+ cedula: cleanCedula,
+ cliente_proyecto: valorCliente
+ },
+ { onConflict: 'cedula' }
+ )
+ .select();
+
+ if (error) {
+ console.error(`[Supabase] ❌ Error guardando cliente_proyecto para cédula ${cleanCedula}:`, error);
+ } else {
+ console.log(`[Supabase] ✅ Guardado exitoso carnet_empleados_creados_glm:`, data);
+ }
+}
+
+/**
+ * Sube la foto de un empleado al bucket "foto_empleados".
+ *
+ * El nombre del archivo sigue el patrón:
+ * _.jpg — primera foto
+ * _1.jpg — segunda foto del mismo empleado+cliente
+ * _2.jpg — tercera, etc.
+ *
+ * @param {string} employeeNumber - Número de cédula limpio (sin guiones/espacios)
+ * @param {File} file - Archivo de imagen a subir
+ * @param {string} [clientKey=''] - Nombre del cliente/proyecto (p.ej. "claro", "nestle")
+ * @returns {Promise} - URL pública del archivo subido
+ */
+export async function uploadEmployeePhoto(employeeNumber, file, clientKey = '') {
+ const extension = file.name.split('.').pop() || 'jpg';
+
+ // Normalizar el nombre del cliente: minúsculas, sin espacios ni caracteres especiales
+ const safeClient = clientKey
+ ? '_' + clientKey.toLowerCase().replace(/[^a-z0-9]/g, '')
+ : '';
+
+ const baseName = `${employeeNumber}${safeClient}`;
+
+ // Buscar archivos existentes con el mismo prefijo para elegir el sufijo correcto
+ const { data: existingFiles } = await supabase.storage
+ .from('foto_empleados')
+ .list('', { search: baseName });
+
+ // Filtrar exactamente los archivos que tengan el mismo baseName base
+ const pattern = new RegExp(`^${baseName}(\\d*)\\.${extension}$`);
+ const matches = (existingFiles || []).filter(f => pattern.test(f.name));
+
+ let fileName;
+ if (matches.length === 0) {
+ // No existe ninguno: usar el nombre base sin sufijo numérico
+ fileName = `${baseName}.${extension}`;
+ } else {
+ // Extraer los sufijos numéricos usados y elegir el siguiente
+ const usedSuffixes = matches.map(f => {
+ const m = f.name.match(pattern);
+ return m ? parseInt(m[1] || '0', 10) : 0;
+ });
+ const nextSuffix = Math.max(...usedSuffixes) + 1;
+ fileName = `${baseName}${nextSuffix}.${extension}`;
+ }
const { error } = await supabase.storage
- .from("foto_empleados")
- .upload(fileName, file, {
- upsert: false
- });
+ .from('foto_empleados')
+ .upload(fileName, file, { upsert: false });
if (error) throw error;
const { data } = supabase.storage
- .from("foto_empleados")
+ .from('foto_empleados')
.getPublicUrl(fileName);
return data.publicUrl;
diff --git a/src/services/supabase.js b/src/services/supabase.js
index 7380337..2ea490e 100644
--- a/src/services/supabase.js
+++ b/src/services/supabase.js
@@ -1,6 +1,7 @@
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
-const supabaseKey = import.meta.env.VITE_SUPABASE_SERVICE_ROLE_KEY;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
-export const supabase = createClient(supabaseUrl, supabaseKey);
\ No newline at end of file
+// Single client for auth (uses anon key)
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 02c3da0..e85d4b1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,5 +4,5 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
- base: '/employee'
+ base: '/empleado-id/'
})