// Vista del trabajador de Catálogo (operador comercial / producto) // Enfocada en gestión de productos: agregar, editar precios, controlar stock, cargar fichas técnicas. function VistaCatalogador() { const [tab, setTab] = React.useState('listado'); const [prodsAPI, setProdsAPI] = React.useState([]); const [loading, setLoading] = React.useState(true); const [editProdId, setEditProdId] = React.useState(null); const [catFilter, setCatFilter] = React.useState('todos'); const [estadoFilter, setEstadoFilter] = React.useState('todos'); const [searchQ, setSearchQ] = React.useState(''); const [menuOpen, setMenuOpen] = React.useState(null); const [reorderMode, setReorderMode] = React.useState(false); const [orderList, setOrderList] = React.useState([]); // arreglo de _id const [dragIdx, setDragIdx] = React.useState(null); function fetchProds() { setLoading(true); DesasfAPI.get('/catalogo?activo=1&limit=200') .then(r => setProdsAPI(r.rows || [])) .catch(console.error) .finally(() => setLoading(false)); } React.useEffect(fetchProds, []); React.useEffect(() => { if (window._desasfCatalogadorNuevo) { setEditProdId(null); setTab('agregar'); delete window._desasfCatalogadorNuevo; } else if (window._desasfCurrentProducto) { setEditProdId(window._desasfCurrentProducto); setTab('agregar'); delete window._desasfCurrentProducto; } }, []); const catLbl = { asfalto_modificado: 'Asfaltos', cemento_asfaltico: 'Cementos', emulsion: 'Emulsiones', slurry: 'Tratamientos', reciclado: 'Reciclados', aditivo: 'Aditivos', otro: 'Otros', }; const _token = DesasfAPI.getToken() || ''; const productos = prodsAPI.map(p => ({ sku: p.codigo, n: p.nombre, cat: catLbl[p.categoria] || p.categoria, p: Number(p.precio_base || 0), unidad: p.unidad || 'kg', estado: p.activo ? 'Publicado' : 'Borrador', upd: window.formatRelativeTime ? window.formatRelativeTime(p.updated_at) : '—', fichaQ: !!p.descripcion || !!p.especificacion, vol: 0, _id: p.id, img: p.imagen_filename ? `/uploads/catalogo/${p.id}/${p.imagen_filename}?token=${_token}` : null, })); async function handleEliminar(id) { if (!confirm('¿Desactivar este producto del catálogo?')) return; try { await DesasfAPI.delete('/catalogo/' + id); fetchProds(); } catch (err) { alert('Error: ' + err.message); } } function startReorder() { setOrderList(productos.map(p => p._id)); setDragIdx(null); setReorderMode(true); } function moveOrder(idx, dir) { setOrderList(list => { const ni = idx + dir; if (ni < 0 || ni >= list.length) return list; const copy = [...list]; [copy[idx], copy[ni]] = [copy[ni], copy[idx]]; return copy; }); } function dropOrder(idx) { setOrderList(list => { if (dragIdx === null || dragIdx === idx) return list; const copy = [...list]; const [moved] = copy.splice(dragIdx, 1); copy.splice(idx, 0, moved); return copy; }); setDragIdx(null); } async function saveOrder() { try { await DesasfAPI.put('/catalogo/orden', { orden: orderList }); setReorderMode(false); fetchProds(); } catch (err) { alert('Error: ' + err.message); } } window._desasfCatalogadorRefresh = fetchProds; window._desasfCatalogadorEliminar = handleEliminar; const meRol = (DesasfAPI.getCurrentUser() || {}).rol; const canListPrice = ['dev', 'admin', 'gerente_general', 'gerente_comercial', 'finanzas'].includes(meRol); const filteredProds = productos .filter(p => catFilter === 'todos' || p.cat === catFilter) .filter(p => estadoFilter === 'todos' || p.estado === estadoFilter) .filter(p => !searchQ.trim() || p.n.toLowerCase().includes(searchQ.toLowerCase()) || (p.sku || '').toLowerCase().includes(searchQ.toLowerCase())); const activos = productos.filter(p => p.estado === 'Publicado').length; const borradores = productos.filter(p => p.estado !== 'Publicado').length; const catCounts = {}; productos.forEach(p => { catCounts[p.cat] = (catCounts[p.cat] || 0) + 1; }); return (
{ setEditProdId(null); setTab('agregar'); }}>{Icon.plus}Nuevo producto} />
{(() => { const cu = DesasfAPI.getCurrentUser() || {}; const parts = (cu.nombre || 'Usuario').trim().split(/\s+/); const ini = parts.length >= 2 ? (parts[0][0]+parts[parts.length-1][0]).toUpperCase() : (parts[0]?.[0]||'?').toUpperCase(); const rolDesc = { dev: 'Desarrollador', operador_planta: 'Operador planta', admin: 'Administrador', gerente_general: 'Gerente general', gerente_comercial: 'Gerente comercial', finanzas: 'Finanzas', vendedor: 'Asistente Técnico comercial' }[cu.rol] || cu.rol || 'Operador'; const canPrice = ['dev', 'admin', 'gerente_general', 'gerente_comercial', 'finanzas'].includes(cu.rol); return (
{ini}

Editor de catálogo

{cu.nombre || 'Usuario'} · {rolDesc} · puede crear / editar / publicar productos{canPrice ? '' : ' · NO puede modificar tarifas (eso lo hace Finanzas)'}

); })()}
{/* Tabs */}
{[ { id: 'listado', label: 'Listado de productos', count: productos.length || null }, { id: 'agregar', label: 'Crear / editar producto' }, { id: 'tarifas', label: 'Solicitudes de cambio de tarifa' }, ].map(x => (
setTab(x.id)}> {x.label} {x.count != null && {x.count}}
))}
{tab === 'listado' && !reorderMode && ( <>
setSearchQ(e.target.value)}/> setCatFilter('todos')} style={{ cursor: 'pointer' }}> Todos {productos.length} {Object.entries(catCounts).map(([cat, n]) => ( setCatFilter(catFilter === cat ? 'todos' : cat)} style={{ cursor: 'pointer' }}> {cat} {n} ))}
{filteredProds.length === 0 && ( )} {filteredProds.map(p => ( ))}
SKU / ProductoCategoría Precio (S/) Ficha técnicaVol. mesEstadoActualizado
Sin productos con los filtros aplicados.
{p.img ? : Icon.beaker }
{p.n}
{p.sku}
 {p.cat} {p.p.toLocaleString('es-PE')} {!canListPrice && SOLO LEC.} {p.fichaQ ? PDF · QC : Falta} {p.vol} {p.unidad} {p.estado === 'Publicado' && Publicado} {p.estado === 'Borrador' && Borrador} {p.estado === 'Bajo pedido' && Bajo pedido} {p.upd}
{ e.stopPropagation(); setMenuOpen(menuOpen === p._id ? null : p._id); }}>{Icon.more}
{menuOpen === p._id && (
{ setEditProdId(p._id); setTab('agregar'); setMenuOpen(null); }}> {Icon.doc}Editar producto
{ setMenuOpen(null); handleEliminar(p._id); }}> {Icon.x}Desactivar
)}
)} {tab === 'listado' && reorderMode && (

Reordenar productos del catálogo

Arrastra cada fila o usa las flechas para definir el orden en que se mostrarán los productos.
{orderList.map((id, idx) => { const p = productos.find(x => x._id === id); if (!p) return null; return (
setDragIdx(idx)} onDragOver={e => e.preventDefault()} onDrop={() => dropOrder(idx)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', borderBottom: idx < orderList.length - 1 ? '1px solid var(--line)' : 0, background: dragIdx === idx ? 'var(--ink-9)' : 'transparent', cursor: 'grab' }}> {Icon.more} {idx + 1}
{p.img ? : Icon.beaker}
{p.n}
{p.sku || '—'} · {p.cat}
); })}
)} {tab === 'agregar' && { fetchProds(); setTab('listado'); }}/>} {tab === 'tarifas' && } {menuOpen &&
setMenuOpen(null)}/>}
); } function FormProducto({ prodId, onSaved }) { const isEdit = !!prodId; const u = DesasfAPI.getCurrentUser() || {}; const canEditPrice = DesasfAPI.hasPerm('catalogo.editar'); const EMPTY = { nombre: '', codigo: '', categoria: 'asfalto_modificado', unidad: 'kg', descripcion: '', especificacion: '', precio_base: '', activo: true }; const [form, setForm] = React.useState(EMPTY); const [historial, setHistorial] = React.useState([]); const [loading, setLoading] = React.useState(isEdit); const [saving, setSaving] = React.useState(false); const [archivos, setArchivos] = React.useState([]); const [uploading, setUploading] = React.useState(false); // Archivos en cola cuando aún se está creando el producto (sin id todavía). const [pendientes, setPendientes] = React.useState([]); // Unidades de venta configurables (gestionadas por el Dev en Configuración). const [unidades, setUnidades] = React.useState([]); React.useEffect(() => { DesasfAPI.get('/config/unidades').then(setUnidades).catch(() => setUnidades([])); }, []); React.useEffect(() => { if (!isEdit) { setForm(EMPTY); setHistorial([]); setArchivos([]); setPendientes([]); setLoading(false); return; } setLoading(true); Promise.all([ DesasfAPI.get('/catalogo/' + prodId), DesasfAPI.get('/catalogo/' + prodId + '/historial').catch(() => []), DesasfAPI.get('/catalogo/' + prodId + '/archivos').catch(() => []), ]).then(([prod, hist, archs]) => { setForm({ nombre: prod.nombre || '', codigo: prod.codigo || '', categoria: prod.categoria || 'asfalto_modificado', unidad: prod.unidad || 'kg', descripcion: prod.descripcion || '', especificacion: prod.especificacion || '', precio_base: prod.precio_base != null ? String(prod.precio_base) : '', activo: prod.activo !== 0, }); setHistorial(Array.isArray(hist) ? hist : []); setArchivos(Array.isArray(archs) ? archs : []); }).catch(console.error) .finally(() => setLoading(false)); }, [prodId]); function field(key) { return form[key] ?? ''; } function setField(key, val) { setForm(f => ({ ...f, [key]: val })); } async function guardar(pub) { if (!form.nombre.trim()) { alert('El nombre del producto es obligatorio'); return; } const payload = { nombre: form.nombre, codigo: form.codigo || null, categoria: form.categoria || 'otro', unidad: form.unidad || 'kg', descripcion: form.descripcion || null, especificacion: form.especificacion || null, precio_base: parseFloat(form.precio_base) || 0, activo: pub ? 1 : (form.activo ? 1 : 0), }; setSaving(true); try { if (isEdit) { await DesasfAPI.put('/catalogo/' + prodId, payload); } else { const { id: nuevoId } = await DesasfAPI.post('/catalogo', payload); // Sube los archivos que se hayan adjuntado durante la creación. for (const pf of pendientes) { try { const fd = new FormData(); fd.append('file', pf.file); await DesasfAPI.upload('/catalogo/' + nuevoId + '/archivos', fd); } catch (e) { console.error('No se pudo subir', pf.nombre, e); } } } onSaved && onSaved(); } catch (err) { alert('Error: ' + err.message); } finally { setSaving(false); } } const token = DesasfAPI.getToken() || ''; // En edición las fuentes vienen de la API; en creación, de la cola local. const imagen = isEdit ? (archivos.find(a => a.tipo === 'imagen') || null) : (pendientes.find(a => a.tipo === 'imagen') || null); const documentos = isEdit ? archivos.filter(a => a.tipo === 'documento') : pendientes.filter(a => a.tipo === 'documento'); // URL de la imagen a mostrar (servidor si está guardada, blob local si está en cola). const imagenSrc = imagen ? (imagen.local ? imagen.previewUrl : `/uploads/catalogo/${prodId}/${imagen.filename}?token=${token}`) : null; function formatBytes(b) { if (!b) return '—'; if (b < 1024) return b + ' B'; if (b < 1048576) return (b / 1024).toFixed(1) + ' KB'; return (b / 1048576).toFixed(1) + ' MB'; } async function handleUploadFile(e) { const file = e.target.files[0]; if (!file) return; e.target.value = ''; // Producto aún no creado: se encola para subir tras guardar. if (!isEdit) { const tipo = (file.type || '').startsWith('image/') ? 'imagen' : 'documento'; const entry = { local: true, id: 'tmp-' + Date.now() + '-' + Math.random().toString(36).slice(2, 7), tipo, nombre: file.name, size_bytes: file.size, file, previewUrl: tipo === 'imagen' ? URL.createObjectURL(file) : null, }; setPendientes(prev => tipo === 'imagen' ? [...prev.filter(a => a.tipo !== 'imagen'), entry] // 1 sola imagen : [...prev, entry] ); return; } setUploading(true); try { const fd = new FormData(); fd.append('file', file); const result = await DesasfAPI.upload('/catalogo/' + prodId + '/archivos', fd); setArchivos(prev => result.tipo === 'imagen' ? [...prev.filter(a => a.tipo !== 'imagen'), result] : [...prev, result] ); } catch (err) { alert('Error al subir: ' + err.message); } finally { setUploading(false); } } async function handleDeleteArchivo(id) { // Archivo en cola (creación): solo se quita de la lista local. const local = pendientes.find(a => a.id === id); if (local) { if (local.previewUrl) URL.revokeObjectURL(local.previewUrl); setPendientes(prev => prev.filter(a => a.id !== id)); return; } if (!confirm('¿Eliminar este archivo?')) return; try { await DesasfAPI.delete('/catalogo/' + prodId + '/archivos/' + id); setArchivos(prev => prev.filter(a => a.id !== id)); } catch (err) { alert('Error: ' + err.message); } } if (loading) return
Cargando…
; return (

Datos del producto

{isEdit && Editando · {form.codigo || '—'}}
{imagenSrc ? : }
setField('nombre', e.target.value)} placeholder="Ej: Asfalto modificado PG 76-22"/>
setField('codigo', e.target.value)} placeholder="P-0001"/>
setField('especificacion', e.target.value)} placeholder="PG 76-22"/>