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" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -363,59 +363,77 @@ export default function IdCardGenerator() {
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
if (!name.trim()) { alert("Debe ingresar el nombre."); 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 (!photoFile) { alert("Debe subir la foto del colaborador."); return false; }
|
||||
return true;
|
||||
};
|
||||
if (!name.trim()) { alert("Debe ingresar el nombre."); 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 (!photoFile) { alert("Debe subir la foto del colaborador."); return false; }
|
||||
return true;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-title">
|
||||
<h1>GLM ID Card Generator</h1>
|
||||
<p>GomezLee Marketing · Carnet Corporativo CR80</p>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<div className="page-title">
|
||||
<h1>GLM ID Card Generator</h1>
|
||||
<p>GomezLee Marketing · Carnet Corporativo CR80</p>
|
||||
</div>
|
||||
|
||||
<div className="main-container" style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
|
||||
{/* FORMULARIO MASIVO EXCEL */}
|
||||
<div className="panel" style={{ minWidth: '320px' }}>
|
||||
<div className="preview-badge" style={{ background: '#FFF3E0', color: '#E65100' }}>
|
||||
<div className="dot" style={{ background: '#E65100' }}></div>
|
||||
<span>Módulo de Lotes Automáticos</span>
|
||||
</div>
|
||||
<div className="main-container" style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
|
||||
{/* FORMULARIO MASIVO EXCEL */}
|
||||
<div className="panel" style={{ minWidth: '320px' }}>
|
||||
<div className="preview-badge" style={{ background: '#FFF3E0', color: '#E65100' }}>
|
||||
<div className="dot" style={{ background: '#E65100' }}></div>
|
||||
<span>Módulo de Lotes Automáticos</span>
|
||||
</div>
|
||||
|
||||
<div className="panel-section">
|
||||
<div className="panel-section-title" style={{ display: 'flex', alignItems: 'center', gap: '6px', position: 'relative' }}>
|
||||
<span>Carga Masiva de Colaboradores</span>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
width: '16px', height: '16px', borderRadius: '50%',
|
||||
background: '#cbd5e1', color: '#334155', fontSize: '11px',
|
||||
fontWeight: 'bold', cursor: 'help', userSelect: 'none'
|
||||
}}
|
||||
onMouseEnter={() => setShowTooltip(true)}
|
||||
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 className="panel-section">
|
||||
<div className="panel-section-title" style={{ display: 'flex', alignItems: 'center', gap: '6px', position: 'relative' }}>
|
||||
<span>Carga Masiva de Colaboradores</span>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
width: '16px', height: '16px', borderRadius: '50%',
|
||||
background: '#cbd5e1', color: '#334155', fontSize: '11px',
|
||||
fontWeight: 'bold', cursor: 'help', userSelect: 'none'
|
||||
}}
|
||||
onMouseEnter={() => setShowTooltip(true)}
|
||||
onMouseLeave={() => setShowTooltip(false)}
|
||||
>
|
||||
?
|
||||
</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">
|
||||
<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" />
|
||||
@@ -425,152 +443,153 @@ export default function IdCardGenerator() {
|
||||
Seleccionar Archivo Excel
|
||||
</div>
|
||||
<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 className="divider"></div>
|
||||
{bulkStatusText && (
|
||||
<div style={{ fontSize: '12px', marginTop: '8px', fontWeight: '500', color: '#475569' }}>
|
||||
{bulkStatusText}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="panel-section">
|
||||
<div className="panel-section-title">Exportar Lote</div>
|
||||
<button
|
||||
className="export-btn blue"
|
||||
disabled={bulkDownloadStatus.processing || bulkEmployees.length === 0}
|
||||
onClick={triggerBulkDownload}
|
||||
style={{ opacity: bulkEmployees.length === 0 ? 0.6 : 1 }}
|
||||
>
|
||||
{bulkDownloadStatus.text}
|
||||
</button>
|
||||
<div className="divider"></div>
|
||||
|
||||
<div className="panel-section">
|
||||
<div className="panel-section-title">Exportar Lote</div>
|
||||
<button
|
||||
className="export-btn blue"
|
||||
disabled={bulkDownloadStatus.processing || bulkEmployees.length === 0}
|
||||
onClick={triggerBulkDownload}
|
||||
style={{ opacity: bulkEmployees.length === 0 ? 0.6 : 1 }}
|
||||
>
|
||||
{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>
|
||||
|
||||
{/* FORMULARIO INDIVIDUAL */}
|
||||
<div className="panel">
|
||||
<div className="preview-badge">
|
||||
<div className="dot"></div>
|
||||
<span>Vista previa en tiempo real</span>
|
||||
<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="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 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>
|
||||
|
||||
{/* 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 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 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 className="front-dynamic-name">{name ? name.toUpperCase() : 'NOMBRE APELLIDO'}</div>
|
||||
<div className="front-dynamic-role">{role ? role.toUpperCase() : 'PUESTO'}</div>
|
||||
</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 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 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user