feat: Boton de descargar plantilla
This commit is contained in:
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -5,7 +5,7 @@
|
|||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>glm-card-generator</title>
|
<title>glm-card-generator</title>
|
||||||
<script type="module" crossorigin src="/empleado-id/assets/index-hkdwba_S.js"></script>
|
<script type="module" crossorigin src="/empleado-id/assets/index-CVcbyLxj.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/empleado-id/assets/index-DZLLXZoS.css">
|
<link rel="stylesheet" crossorigin href="/empleado-id/assets/index-DZLLXZoS.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -363,59 +363,77 @@ export default function IdCardGenerator() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const validateForm = () => {
|
const validateForm = () => {
|
||||||
if (!name.trim()) { alert("Debe ingresar el nombre."); return false; }
|
if (!name.trim()) { alert("Debe ingresar el nombre."); return false; }
|
||||||
if (!role.trim()) { alert("Debe ingresar el puesto."); return false; }
|
if (!role.trim()) { alert("Debe ingresar el puesto."); return false; }
|
||||||
if (!employeeId.trim()) { alert("Debe ingresar el ID del empleado."); return false; }
|
if (!employeeId.trim()) { alert("Debe ingresar el ID del empleado."); return false; }
|
||||||
if (!photoFile) { alert("Debe subir la foto del colaborador."); return false; }
|
if (!photoFile) { alert("Debe subir la foto del colaborador."); return false; }
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="page-title">
|
<div className="page-title">
|
||||||
<h1>GLM ID Card Generator</h1>
|
<h1>GLM ID Card Generator</h1>
|
||||||
<p>GomezLee Marketing · Carnet Corporativo CR80</p>
|
<p>GomezLee Marketing · Carnet Corporativo CR80</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="main-container" style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
|
<div className="main-container" style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
|
||||||
{/* FORMULARIO MASIVO EXCEL */}
|
{/* FORMULARIO MASIVO EXCEL */}
|
||||||
<div className="panel" style={{ minWidth: '320px' }}>
|
<div className="panel" style={{ minWidth: '320px' }}>
|
||||||
<div className="preview-badge" style={{ background: '#FFF3E0', color: '#E65100' }}>
|
<div className="preview-badge" style={{ background: '#FFF3E0', color: '#E65100' }}>
|
||||||
<div className="dot" style={{ background: '#E65100' }}></div>
|
<div className="dot" style={{ background: '#E65100' }}></div>
|
||||||
<span>Módulo de Lotes Automáticos</span>
|
<span>Módulo de Lotes Automáticos</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="panel-section">
|
<div className="panel-section">
|
||||||
<div className="panel-section-title" style={{ display: 'flex', alignItems: 'center', gap: '6px', position: 'relative' }}>
|
<div className="panel-section-title" style={{ display: 'flex', alignItems: 'center', gap: '6px', position: 'relative' }}>
|
||||||
<span>Carga Masiva de Colaboradores</span>
|
<span>Carga Masiva de Colaboradores</span>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
width: '16px', height: '16px', borderRadius: '50%',
|
width: '16px', height: '16px', borderRadius: '50%',
|
||||||
background: '#cbd5e1', color: '#334155', fontSize: '11px',
|
background: '#cbd5e1', color: '#334155', fontSize: '11px',
|
||||||
fontWeight: 'bold', cursor: 'help', userSelect: 'none'
|
fontWeight: 'bold', cursor: 'help', userSelect: 'none'
|
||||||
}}
|
}}
|
||||||
onMouseEnter={() => setShowTooltip(true)}
|
onMouseEnter={() => setShowTooltip(true)}
|
||||||
onMouseLeave={() => setShowTooltip(false)}
|
onMouseLeave={() => setShowTooltip(false)}
|
||||||
>
|
>
|
||||||
?
|
?
|
||||||
</div>
|
|
||||||
|
|
||||||
{showTooltip && (
|
|
||||||
<div style={{
|
|
||||||
position: 'absolute', top: '24px', left: '0', right: '0',
|
|
||||||
background: '#1e293b', color: '#ffffff', padding: '10px',
|
|
||||||
borderRadius: '6px', fontSize: '11px', lineHeight: '1.4',
|
|
||||||
zIndex: '99', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
|
|
||||||
fontWeight: 'normal', textTransform: 'none'
|
|
||||||
}}>
|
|
||||||
Formato de columnas requeridas en el Excel: <br />
|
|
||||||
<b style={{ color: '#6CC24A' }}>nombre, puesto, cliente/proyecto, cedula, lenguaje, foto_url</b>.<br />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="upload-btn" style={{ background: '#475569', marginTop: '12px' }} onClick={() => excelInputRef.current.click()}>
|
{showTooltip && (
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', top: '24px', left: '0', right: '0',
|
||||||
|
background: '#1e293b', color: '#ffffff', padding: '10px',
|
||||||
|
borderRadius: '6px', fontSize: '11px', lineHeight: '1.4',
|
||||||
|
zIndex: '99', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
|
||||||
|
fontWeight: 'normal', textTransform: 'none'
|
||||||
|
}}>
|
||||||
|
Formato de columnas requeridas en el Excel: <br />
|
||||||
|
<b style={{ color: '#6CC24A' }}>nombre, puesto, cliente/proyecto, cedula, lenguaje, foto_url</b>.<br />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '12px' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
|
||||||
|
<a
|
||||||
|
href="https://docs.google.com/spreadsheets/d/1F5DAvLL82bpW2pL_jdu4FgcAnjbzV3VwlRh89aS2Khc/export?format=xlsx"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="upload-btn"
|
||||||
|
style={{ background: '#6CC24A', color: '#fff', textDecoration: 'none', padding: '8px 16px', fontSize: '13px' }}
|
||||||
|
>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginRight: '6px', verticalAlign: 'middle' }}>
|
||||||
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||||||
|
<polyline points="7 10 12 15 17 10" />
|
||||||
|
<line x1="12" y1="15" x2="12" y2="3" />
|
||||||
|
</svg>
|
||||||
|
Descargar plantilla Excel
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="upload-btn" style={{ background: '#475569' }} onClick={() => excelInputRef.current.click()}>
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||||||
<polyline points="14 2 14 8 20 8" />
|
<polyline points="14 2 14 8 20 8" />
|
||||||
@@ -425,152 +443,153 @@ export default function IdCardGenerator() {
|
|||||||
Seleccionar Archivo Excel
|
Seleccionar Archivo Excel
|
||||||
</div>
|
</div>
|
||||||
<input type="file" accept=".xlsx, .xls, .csv" style={{ display: 'none' }} ref={excelInputRef} onChange={handleExcelUpload} />
|
<input type="file" accept=".xlsx, .xls, .csv" style={{ display: 'none' }} ref={excelInputRef} onChange={handleExcelUpload} />
|
||||||
|
|
||||||
{bulkStatusText && (
|
|
||||||
<div style={{ fontSize: '12px', marginTop: '8px', fontWeight: '500', color: '#475569' }}>
|
|
||||||
{bulkStatusText}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="divider"></div>
|
{bulkStatusText && (
|
||||||
|
<div style={{ fontSize: '12px', marginTop: '8px', fontWeight: '500', color: '#475569' }}>
|
||||||
|
{bulkStatusText}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="panel-section">
|
<div className="divider"></div>
|
||||||
<div className="panel-section-title">Exportar Lote</div>
|
|
||||||
<button
|
<div className="panel-section">
|
||||||
className="export-btn blue"
|
<div className="panel-section-title">Exportar Lote</div>
|
||||||
disabled={bulkDownloadStatus.processing || bulkEmployees.length === 0}
|
<button
|
||||||
onClick={triggerBulkDownload}
|
className="export-btn blue"
|
||||||
style={{ opacity: bulkEmployees.length === 0 ? 0.6 : 1 }}
|
disabled={bulkDownloadStatus.processing || bulkEmployees.length === 0}
|
||||||
>
|
onClick={triggerBulkDownload}
|
||||||
{bulkDownloadStatus.text}
|
style={{ opacity: bulkEmployees.length === 0 ? 0.6 : 1 }}
|
||||||
</button>
|
>
|
||||||
|
{bulkDownloadStatus.text}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FORMULARIO INDIVIDUAL */}
|
||||||
|
<div className="panel">
|
||||||
|
<div className="preview-badge">
|
||||||
|
<div className="dot"></div>
|
||||||
|
<span>Vista previa en tiempo real</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="panel-section">
|
||||||
|
<div className="panel-section-title">Colaborador</div>
|
||||||
|
<div className="field">
|
||||||
|
<label>Nombre</label>
|
||||||
|
<input type="text" placeholder="Ej: Alexi Zabala" value={name} onChange={(e) => setName(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label>Puesto</label>
|
||||||
|
<input type="text" placeholder="Ej: Mercaderista" value={role} onChange={(e) => setRole(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div className="upload-btn" onClick={() => !photoProcessing && fileInputRef.current.click()} style={{ opacity: photoProcessing ? 0.6 : 1, cursor: photoProcessing ? 'wait' : 'pointer' }}>
|
||||||
|
{photoProcessing ? '⏳ Procesando foto con IA...' : 'Subir foto del colaborador'}
|
||||||
|
</div>
|
||||||
|
<input type="file" accept="image/*" style={{ display: 'none' }} ref={fileInputRef} onChange={handlePhotoUpload} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="divider"></div>
|
||||||
|
|
||||||
|
<div className="panel-section">
|
||||||
|
<div className="panel-section-title">Cliente / Proyecto</div>
|
||||||
|
<div className="lang-container">
|
||||||
|
<button type="button" className={`lang-btn ${language === 'Esp' ? 'active' : ''}`} onClick={() => setLanguage('Esp')}>Español</button>
|
||||||
|
<button type="button" className={`lang-btn ${language === 'Ing' ? 'active' : ''}`} onClick={() => setLanguage('Ing')}>Inglés</button>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label>Seleccionar Cliente</label>
|
||||||
|
<select value={selectedClient} onChange={(e) => setSelectedClient(e.target.value)}>
|
||||||
|
<option value="Generico">Genérico (Por defecto)</option>
|
||||||
|
<option value="Claro">Claro</option>
|
||||||
|
<option value="Colgate">Colgate</option>
|
||||||
|
<option value="KitchenAid">KitchenAid</option>
|
||||||
|
<option value="Kraft">Kraft</option>
|
||||||
|
<option value="Motorola">Motorola</option>
|
||||||
|
<option value="Nestle">Nestle</option>
|
||||||
|
<option value="P&G">P&G</option>
|
||||||
|
<option value="Philip Morris">Philip Morris International</option>
|
||||||
|
<option value="Whirlpool">Whirlpool</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* FORMULARIO INDIVIDUAL */}
|
<div className="divider"></div>
|
||||||
<div className="panel">
|
|
||||||
<div className="preview-badge">
|
<div className="panel-section">
|
||||||
<div className="dot"></div>
|
<div className="panel-section-title">Código QR</div>
|
||||||
<span>Vista previa en tiempo real</span>
|
<div className="field">
|
||||||
|
<label>ID del empleado / Cédula</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Ej: 123456789 (Sin guiones ni espacios)"
|
||||||
|
value={employeeId}
|
||||||
|
onChange={handleEmployeeIdChange}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<button className="export-btn" style={{ background: '#6CC24A', marginTop: '2px' }} onClick={() => renderQRCode(employeeId, qrCanvasRef.current)}>
|
||||||
|
⟳ Generar QR
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="panel-section">
|
<div className="divider"></div>
|
||||||
<div className="panel-section-title">Colaborador</div>
|
|
||||||
<div className="field">
|
<div className="panel-section">
|
||||||
<label>Nombre</label>
|
<div className="panel-section-title">Exportar</div>
|
||||||
<input type="text" placeholder="Ej: Alexi Zabala" value={name} onChange={(e) => setName(e.target.value)} />
|
<button className="export-btn blue" disabled={downloadStatus.processing || !isFormComplete} onClick={triggerDownload} style={{ opacity: (!isFormComplete || downloadStatus.processing) ? 0.6 : 1 }}>
|
||||||
|
{downloadStatus.text}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* VISTA PREVIA */}
|
||||||
|
<div className="stage">
|
||||||
|
<div className="card-wrap">
|
||||||
|
<div className="card-label">Frente</div>
|
||||||
|
<div className="card" id="cardFront" style={{ backgroundImage: `url('${baseUrl}images/AF GLM Frente.png')` }}>
|
||||||
|
<div className="front-photo-frame" style={{ position: 'relative', overflow: 'hidden' }}>
|
||||||
|
{photoSrc ? (
|
||||||
|
<img src={photoSrc} alt="Foto Colaborador" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
||||||
|
) : (null)}
|
||||||
|
{photoProcessing && (
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', inset: 0, display: 'flex',
|
||||||
|
alignItems: 'center', justifyContent: 'center',
|
||||||
|
background: 'rgba(0,0,0,0.45)', color: '#fff',
|
||||||
|
fontSize: '13px', fontWeight: '600', textAlign: 'center', padding: '8px'
|
||||||
|
}}>
|
||||||
|
⏳ Editando foto con IA...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!photoSrc && (
|
||||||
|
<svg className="placeholder-svg" viewBox="0 0 28 28" fill="none" style={{ width: '60%', height: '60%', opacity: 0.4 }}>
|
||||||
|
<circle cx="14" cy="10" r="5.5" stroke="currentColor" strokeWidth="1.5" />
|
||||||
|
<path d="M3 24c0-6 22-6 22 0" stroke="currentColor" strokeWidth="1.5" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="field">
|
<div className="front-dynamic-name">{name ? name.toUpperCase() : 'NOMBRE APELLIDO'}</div>
|
||||||
<label>Puesto</label>
|
<div className="front-dynamic-role">{role ? role.toUpperCase() : 'PUESTO'}</div>
|
||||||
<input type="text" placeholder="Ej: Mercaderista" value={role} onChange={(e) => setRole(e.target.value)} />
|
|
||||||
</div>
|
|
||||||
<div className="upload-btn" onClick={() => !photoProcessing && fileInputRef.current.click()} style={{ opacity: photoProcessing ? 0.6 : 1, cursor: photoProcessing ? 'wait' : 'pointer' }}>
|
|
||||||
{photoProcessing ? '⏳ Procesando foto con IA...' : 'Subir foto del colaborador'}
|
|
||||||
</div>
|
|
||||||
<input type="file" accept="image/*" style={{ display: 'none' }} ref={fileInputRef} onChange={handlePhotoUpload} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="divider"></div>
|
|
||||||
|
|
||||||
<div className="panel-section">
|
|
||||||
<div className="panel-section-title">Cliente / Proyecto</div>
|
|
||||||
<div className="lang-container">
|
|
||||||
<button type="button" className={`lang-btn ${language === 'Esp' ? 'active' : ''}`} onClick={() => setLanguage('Esp')}>Español</button>
|
|
||||||
<button type="button" className={`lang-btn ${language === 'Ing' ? 'active' : ''}`} onClick={() => setLanguage('Ing')}>Inglés</button>
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label>Seleccionar Cliente</label>
|
|
||||||
<select value={selectedClient} onChange={(e) => setSelectedClient(e.target.value)}>
|
|
||||||
<option value="Generico">Genérico (Por defecto)</option>
|
|
||||||
<option value="Claro">Claro</option>
|
|
||||||
<option value="Colgate">Colgate</option>
|
|
||||||
<option value="KitchenAid">KitchenAid</option>
|
|
||||||
<option value="Kraft">Kraft</option>
|
|
||||||
<option value="Motorola">Motorola</option>
|
|
||||||
<option value="Nestle">Nestle</option>
|
|
||||||
<option value="P&G">P&G</option>
|
|
||||||
<option value="Philip Morris">Philip Morris International</option>
|
|
||||||
<option value="Whirlpool">Whirlpool</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="divider"></div>
|
|
||||||
|
|
||||||
<div className="panel-section">
|
|
||||||
<div className="panel-section-title">Código QR</div>
|
|
||||||
<div className="field">
|
|
||||||
<label>ID del empleado / Cédula</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Ej: 123456789 (Sin guiones ni espacios)"
|
|
||||||
value={employeeId}
|
|
||||||
onChange={handleEmployeeIdChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button className="export-btn" style={{ background: '#6CC24A', marginTop: '2px' }} onClick={() => renderQRCode(employeeId, qrCanvasRef.current)}>
|
|
||||||
⟳ Generar QR
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="divider"></div>
|
|
||||||
|
|
||||||
<div className="panel-section">
|
|
||||||
<div className="panel-section-title">Exportar</div>
|
|
||||||
<button className="export-btn blue" disabled={downloadStatus.processing || !isFormComplete} onClick={triggerDownload} style={{ opacity: (!isFormComplete || downloadStatus.processing) ? 0.6 : 1 }}>
|
|
||||||
{downloadStatus.text}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* VISTA PREVIA */}
|
<div className="card-wrap">
|
||||||
<div className="stage">
|
<div className="card-label">Reverso</div>
|
||||||
<div className="card-wrap">
|
<div
|
||||||
<div className="card-label">Frente</div>
|
className="card"
|
||||||
<div className="card" id="cardFront" style={{ backgroundImage: `url('${baseUrl}images/AF GLM Frente.png')` }}>
|
id="cardBack"
|
||||||
<div className="front-photo-frame" style={{ position: 'relative', overflow: 'hidden' }}>
|
style={{
|
||||||
{photoSrc ? (
|
backgroundImage: `url('${baseUrl}${(clientTemplates[language] || clientTemplates['Esp'])[selectedClient] || (clientTemplates[language] || clientTemplates['Esp'])['Generico']}')`
|
||||||
<img src={photoSrc} alt="Foto Colaborador" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
}}
|
||||||
) : (null)}
|
>
|
||||||
{photoProcessing && (
|
<div className="back-qr-zone">
|
||||||
<div style={{
|
<canvas ref={qrCanvasRef} width={55} height={55}></canvas>
|
||||||
position: 'absolute', inset: 0, display: 'flex',
|
|
||||||
alignItems: 'center', justifyContent: 'center',
|
|
||||||
background: 'rgba(0,0,0,0.45)', color: '#fff',
|
|
||||||
fontSize: '13px', fontWeight: '600', textAlign: 'center', padding: '8px'
|
|
||||||
}}>
|
|
||||||
⏳ Editando foto con IA...
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!photoSrc && (
|
|
||||||
<svg className="placeholder-svg" viewBox="0 0 28 28" fill="none" style={{ width: '60%', height: '60%', opacity: 0.4 }}>
|
|
||||||
<circle cx="14" cy="10" r="5.5" stroke="currentColor" strokeWidth="1.5" />
|
|
||||||
<path d="M3 24c0-6 22-6 22 0" stroke="currentColor" strokeWidth="1.5" />
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="front-dynamic-name">{name ? name.toUpperCase() : 'NOMBRE APELLIDO'}</div>
|
|
||||||
<div className="front-dynamic-role">{role ? role.toUpperCase() : 'PUESTO'}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card-wrap">
|
|
||||||
<div className="card-label">Reverso</div>
|
|
||||||
<div
|
|
||||||
className="card"
|
|
||||||
id="cardBack"
|
|
||||||
style={{
|
|
||||||
backgroundImage: `url('${baseUrl}${(clientTemplates[language] || clientTemplates['Esp'])[selectedClient] || (clientTemplates[language] || clientTemplates['Esp'])['Generico']}')`
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="back-qr-zone">
|
|
||||||
<canvas ref={qrCanvasRef} width={55} height={55}></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
</>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user