// ── INVENTARIO REAL v3 — Persistencia localStorage + Export/Import + Etiquetas 55×12mm ── // Claves de almacenamiento const INV_KEY = 'inventario_prods'; // array completo (sin fotos) const FOTOS_KEY = 'inventario_fotos'; // {id: foto_url} // ── Persistencia ───────────────────────────────────────────────────────────── function guardarInventarioLS(productos) { // Guardar sin foto_url para no saturar localStorage (fotos van aparte) const sinFotos = productos.map(({ foto_url, ...rest }) => rest); lsSet(INV_KEY, sinFotos); } function guardarFotosLS(fotos) { lsSet(FOTOS_KEY, fotos); } function merge(jsonProds, lsProds, fotos) { // Si hay datos en LS, usarlos; si no, sembrar desde JSON const base = (lsProds && lsProds.length > 0) ? lsProds : jsonProds; // Inyectar fotos return base.map(p => ({ ...p, foto_url: fotos[p.id] || null })); } // ── Export ─────────────────────────────────────────────────────────────────── function exportarJSON(productos) { const blob = new Blob([JSON.stringify(productos, null, 2)], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `navarro_inventario_${new Date().toISOString().slice(0,10)}.json`; a.click(); } // ── Mapa campo interno → etiqueta amigable en español ──────────────────────── const CSV_COLS = [ { key: 'sku', label: 'SKU' }, { key: 'nombre', label: 'Nombre' }, { key: 'categoria', label: 'Categoría' }, { key: 'metal', label: 'Metal' }, { key: 'pureza', label: 'Pureza' }, { key: 'piedra', label: 'Piedra/Gema' }, { key: 'talla', label: 'Talla' }, { key: 'peso', label: 'Peso (g)' }, { key: 'largo_cm', label: 'Largo (cm)' }, { key: 'costo', label: 'Costo ($)' }, { key: 'precio', label: 'Precio ($)' }, { key: 'stock', label: 'Stock' }, { key: 'estado', label: 'Estado' }, { key: 'ubicacion', label: 'Ubicación' }, { key: 'tienda', label: 'Tienda' }, { key: 'notas', label: 'Notas' }, { key: 'proveedor', label: 'Proveedor' }, { key: 'venta_online', label: 'Venta Online' }, { key: 'insumo_asociado',label: 'Insumo Asociado' }, ]; // Valores válidos de referencia para cada campo (van como comentario en la plantilla) const CSV_HINTS = { categoria: 'Anillo / Collar / Argolla / Pulsera / Arete / Colgante / Otro', metal: 'Oro / Plata / Acero / Platino / Otro', pureza: '750 / 925 / 585 / 950 / —', estado: 'activo / inactivo / encargo', tienda: 'Casa Matriz / Sucursal 1 / Online', venta_online: 'sí / no', }; // ── Escapar valor para CSV con separador `;` ────────────────────────────────── function escCSV(v, sep = ';') { const s = v == null ? '' : String(v); return s.includes(sep) || s.includes('"') || s.includes('\n') ? '"' + s.replace(/"/g, '""') + '"' : s; } // ── Exportar CSV con separador ; (compatible Excel/Numbers en español) ──────── function exportarCSV(productos) { const SEP = ';'; const header = CSV_COLS.map(c => escCSV(c.label, SEP)).join(SEP); const rows = productos.map(p => CSV_COLS.map(c => escCSV(p[c.key], SEP)).join(SEP) ); const blob = new Blob(['' + [header, ...rows].join('\r\n')], { type: 'text/csv;charset=utf-8' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `navarro_inventario_${new Date().toISOString().slice(0,10)}.csv`; a.click(); } // ── Descargar plantilla vacía con encabezados + 5 filas ejemplo ─────────────── function descargarPlantillaCSV() { const SEP = ';'; // Fila de referencia (valores posibles) — va como primera fila de datos en gris const hintsRow = CSV_COLS.map(c => escCSV(c.key === 'sku' ? '← Obligatorio' : (CSV_HINTS[c.key] || ''), SEP)).join(SEP); const exampleRow = CSV_COLS.map(c => { const eg = { sku:'ANI-001', nombre:'Anillo Solitario', categoria:'Anillo', metal:'Oro', pureza:'750', piedra:'Diamante', talla:'17', peso:'3.2', largo_cm:'', costo:'85000', precio:'190000', stock:'2', estado:'activo', ubicacion:'Vitrina A', tienda:'Casa Matriz', notas:'', proveedor:'Proveedor XYZ', venta_online:'sí', insumo_asociado:'' }; return escCSV(eg[c.key] ?? '', SEP); }).join(SEP); // 4 filas vacías para rellenar const emptyRow = CSV_COLS.map(() => '').join(SEP); const header = CSV_COLS.map(c => escCSV(c.label, SEP)).join(SEP); const lines = [header, hintsRow, exampleRow, emptyRow, emptyRow, emptyRow, emptyRow]; const blob = new Blob(['' + lines.join('\r\n')], { type: 'text/csv;charset=utf-8' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `navarro_plantilla_inventario.csv`; a.click(); } function importarJSON(file, onDone) { const reader = new FileReader(); reader.onload = e => { try { const data = JSON.parse(e.target.result); if (!Array.isArray(data)) { alert('El archivo JSON debe contener un array de productos.'); return; } onDone(data); } catch { alert('Error al leer el archivo JSON.'); } }; reader.readAsText(file); } function importarCSV(file, onDone) { const reader = new FileReader(); reader.onload = e => { try { const raw = e.target.result.replace(/^/, ''); const lines = raw.split(/\r?\n/).filter(l => l.trim()); if (lines.length < 2) { alert('CSV vacío o inválido.'); return; } // ── Detectar separador automáticamente (; o ,) ──────────────────────── const firstLine = lines[0]; const SEP = (firstLine.split(';').length >= firstLine.split(',').length) ? ';' : ','; // ── Parser CSV robusto que respeta comillas ──────────────────────────── function parseCsvRow(row) { const vals = []; let cur = '', inQ = false; for (let i = 0; i < row.length; i++) { const ch = row[i]; if (ch === '"' && !inQ) { inQ = true; continue; } if (ch === '"' && inQ) { if (row[i+1] === '"') { cur += '"'; i++; } else inQ = false; continue; } if (ch === SEP && !inQ) { vals.push(cur.trim()); cur = ''; continue; } cur += ch; } vals.push(cur.trim()); return vals; } // ── Mapear encabezados (acepta etiquetas en español O claves internas) ── const rawHeaders = parseCsvRow(lines[0]); const labelToKey = {}; CSV_COLS.forEach(c => { labelToKey[c.label.toLowerCase()] = c.key; labelToKey[c.label.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g,'')] = c.key; labelToKey[c.key.toLowerCase()] = c.key; }); const headers = rawHeaders.map(h => labelToKey[h.toLowerCase().trim()] || h.toLowerCase().trim()); const NUMS = new Set(['costo','precio','stock','peso','largo_cm']); const data = lines.slice(1).map((line, li) => { // Ignorar la fila de hints ("← Obligatorio" / referencias) if (line.includes('← Obligatorio') || line.includes('Anillo / Collar')) return null; const vals = parseCsvRow(line); const obj = {}; headers.forEach((h, i) => { const v = vals[i] ?? ''; obj[h] = NUMS.has(h) ? (parseFloat(v.replace(',','.')) || 0) : v; }); if (!obj.id) obj.id = 'imp-' + Date.now() + li + '-' + Math.random().toString(36).slice(2,8); return obj; }).filter(p => p && (p.sku || p.nombre)); if (!data.length) { alert('No se encontraron productos válidos en el archivo.'); return; } onDone(data); } catch(err) { alert('Error al leer el CSV: ' + err.message); } }; reader.readAsText(file, 'utf-8'); } // ── FOTO MANAGER ────────────────────────────────────────────────────────────── function FotoManager({ prod, isEdit, onFoto }) { const { useState, useRef } = React; const [menu, setMenu] = useState(false); const [urlInput, setUrlInput]= useState(false); const [url, setUrl] = useState(''); const fileRef = useRef(); const foto = prod?.foto_url; function handleFile(e) { const f = e.target.files[0]; if (!f) return; const reader = new FileReader(); reader.onload = ev => { onFoto && onFoto(ev.target.result); setMenu(false); }; reader.readAsDataURL(f); } function aplicarUrl() { if (url.trim()) { onFoto && onFoto(url.trim()); setUrl(''); setUrlInput(false); setMenu(false); } } return (
isEdit && setMenu(m => !m)} style={{ width:'72px', height:'72px', borderRadius:'8px', overflow:'hidden', border: foto ? '2px solid var(--gold)' : '1px solid var(--border)', background:'var(--surface)', cursor: isEdit ? 'pointer' : 'default', display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', }}> {foto ? e.target.style.display='none'}/> : <> 📷 {isEdit ? 'Agregar foto' : 'Sin foto'} } {isEdit && foto && (
✏
)}
{menu && isEdit && (
AGREGAR FOTO
{urlInput && (
setUrl(e.target.value)} placeholder="https://…" autoFocus style={{ ...calcStyles.input, fontSize:'10px', padding:'5px 8px', marginBottom:'4px' }}/>
)} {foto && ( )}
)}
); } // ── MODAL AJUSTE STOCK ──────────────────────────────────────────────────────── function ModalAjusteStock({ prod, onClose, onGuardar }) { const { useState } = React; const [modo, setModo] = useState('set'); // 'set' | 'add' | 'sub' const [valor, setValor] = useState(0); const [motivo, setMotivo] = useState(''); const stockFinal = () => { const v = parseInt(valor) || 0; if (modo === 'set') return Math.max(0, v); if (modo === 'add') return Math.max(0, (prod.stock || 0) + v); return Math.max(0, (prod.stock || 0) - v); }; return (
e.target === e.currentTarget && onClose()}>
📦 Ajustar Stock
{prod.sku}
{prod.nombre}
Stock actual: {prod.stock || 0}
{[['set','= Fijar'], ['add','+ Agregar'], ['sub','− Restar']].map(([m, l]) => ( ))}
{modo === 'set' ? 'Stock nuevo' : modo === 'add' ? 'Unidades a agregar' : 'Unidades a restar'}
setValor(Math.max(0, parseInt(e.target.value) || 0))} style={{ ...calcStyles.input, width:'80px', textAlign:'center', fontWeight:700, fontSize:'16px' }}/>
→ {stockFinal()} unidades
Motivo (opcional)
setMotivo(e.target.value)}/>
); } // ── COMPONENTE INVENTARIO REAL ──────────────────────────────────────────────── function InventarioReal({ tiendaId }) { const { useState, useEffect, useRef, useCallback } = React; const [productos, setProductos] = useState([]); const [fotos, setFotos] = useState({}); const [cargando, setCargando] = useState(true); const [busqueda, setBusqueda] = useState(''); const [catFiltro, setCatFiltro] = useState('Todos'); const [metalFiltro, setMetalFiltro] = useState('Todos'); const [estadoFiltro, setEstadoFiltro] = useState('Todos'); const [selId, setSel] = useState(null); const [editando, setEditando] = useState(null); const [modalNuevo, setModalNuevo] = useState(false); const [modalStock, setModalStock] = useState(null); // product para ajustar stock const [vistaEtiq, setVistaEtiq] = useState(false); const [selEtiq, setSelEtiq] = useState(new Set()); const [pagina, setPagina] = useState(0); const [toast, setToast] = useState(''); const [confirmDel, setConfirmDel] = useState(null); // id a eliminar const [modalImport, setModalImport] = useState(null); // {nuevos, conflictos, data} const importRef = useRef(); const POR_PAGINA = 60; const [nuevo, setNuevo] = useState({ nombre:'', nombre_corto:'', categoria:'ANILLO', metal_code:'AG', metal:'Plata', piedra:'', pureza:'', talla:'', largo_cm:'', peso:'', costo:0, precio:0, stock:1, estado:'En vitrina', ubicacion:'', notas:'', tienda: tiendaId||'navarro', venta_online:'No', insumo_asociado:'Sin empaque', observaciones:'', sku:'', skuManual:false, }); // ── Validación de SKU único — coherente para crear y editar ─────────────── // Devuelve el producto que ya usa ese SKU (si existe), excluyendo `excludeId` function buscarSkuDuplicado(sku, excludeId) { const s = (sku||'').trim().toLowerCase(); if (!s) return null; return productos.find(p => p.id !== excludeId && (p.sku||'').trim().toLowerCase() === s) || null; } // ── TOAST ───────────────────────────────────────────────────────────────── const showToast = msg => { setToast(msg); setTimeout(() => setToast(''), 2800); }; // ── CARGA INICIAL ──────────────────────────────────────────────────────── useEffect(() => { const fotosLS = lsGet(FOTOS_KEY, {}); setFotos(fotosLS); const prodsLS = lsGet(INV_KEY, null); if (prodsLS && prodsLS.length > 0) { // Inyectar fotos y listo setProductos(prodsLS.map(p => ({ ...p, foto_url: fotosLS[p.id] || null }))); setCargando(false); } else { // Primera vez: sembrar desde JSON fetch('data/inventario_real.json') .then(r => r.json()) .then(data => { const conFotos = data.map(p => ({ ...p, foto_url: fotosLS[p.id] || null })); setProductos(conFotos); guardarInventarioLS(conFotos); setCargando(false); }) .catch(() => { setProductos([]); setCargando(false); }); } }, []); // ── PERSISTIR cuando cambia productos ──────────────────────────────────── // (Solo después de la carga inicial) const firstRender = useRef(true); useEffect(() => { if (firstRender.current) { firstRender.current = false; return; } if (!cargando) guardarInventarioLS(productos); }, [productos, cargando]); const misProd = productos.filter(p => p.tienda === (tiendaId||'navarro')); // Filtrado const filtrados = misProd.filter(p => { const q = busqueda.toLowerCase(); const matchQ = !q || p.nombre?.toLowerCase().includes(q) || p.sku?.toLowerCase().includes(q) || p.piedra?.toLowerCase().includes(q) || p.metal?.toLowerCase().includes(q) || p.notas?.toLowerCase().includes(q); const matchCat = catFiltro==='Todos' || p.categoria===catFiltro; const matchMetal = metalFiltro==='Todos' || p.metal===metalFiltro; const matchEst = estadoFiltro==='Todos'|| p.estado===estadoFiltro; return matchQ && matchCat && matchMetal && matchEst; }); const totalPags = Math.ceil(filtrados.length / POR_PAGINA); const pagina_items = filtrados.slice(pagina*POR_PAGINA, (pagina+1)*POR_PAGINA); useEffect(() => setPagina(0), [busqueda, catFiltro, metalFiltro, estadoFiltro]); const selProd = productos.find(p => p.id === selId); const catCounts = {}; misProd.forEach(p => { catCounts[p.categoria] = (catCounts[p.categoria]||0)+1; }); const cats = ['Todos', ...Object.keys(catCounts).sort()]; const metalCounts = {}; misProd.forEach(p => { metalCounts[p.metal] = (metalCounts[p.metal]||0)+1; }); const metales = ['Todos', ...Object.keys(metalCounts).sort()]; const valorInventario = misProd.reduce((s,p) => s+(p.precio||0)*(p.stock||0), 0); const sinFoto = misProd.filter(p => !p.foto_url).length; const stockTotal = misProd.reduce((s,p) => s+(p.stock||0), 0); // ── GUARDAR EDICIÓN ─────────────────────────────────────────────────────── function guardarEdit() { // Validación: no permitir códigos duplicados al editar const skuLimpio = (editando.sku||'').trim().toUpperCase(); if (!skuLimpio) { alert('El código SKU no puede quedar vacío.'); return; } const dup = buscarSkuDuplicado(skuLimpio, editando.id); if (dup) { alert(`⚠ El código "${skuLimpio}" ya está en uso por:\n${dup.sku} — ${dup.nombre}\n\nElige un código diferente.`); return; } const editFinal = { ...editando, sku: skuLimpio }; setProductos(prev => prev.map(p => p.id === editFinal.id ? { ...editFinal } : p)); setSel(editando.id); // Foto aparte if (editando.foto_url !== undefined) { const newFotos = { ...fotos, [editando.id]: editando.foto_url || null }; setFotos(newFotos); guardarFotosLS(newFotos); } setEditando(null); showToast('✓ Producto actualizado y guardado'); } // ── AJUSTAR STOCK ────────────────────────────────────────────────────────── function confirmarAjusteStock(nuevoStock, motivo) { const prod = modalStock; setProductos(prev => prev.map(p => p.id === prod.id ? { ...p, stock: nuevoStock, historialStock: [...(p.historialStock||[]), { fecha: new Date().toISOString(), anterior: p.stock, nuevo: nuevoStock, motivo: motivo||'Ajuste manual' }]} : p )); setModalStock(null); showToast(`✓ Stock de ${prod.sku} ajustado a ${nuevoStock}`); } // ── AGREGAR PRODUCTO ────────────────────────────────────────────────────── function agregarProducto() { if (!nuevo.nombre.trim()) { alert('El nombre es obligatorio.'); return; } // SKU: si el usuario lo editó se respeta su valor; si no, se usa el propuesto automáticamente const propuesto = generarSKU(nuevo.metal_code, nuevo.categoria, nuevo.piedra, productos); const sku = (nuevo.sku||'').trim().toUpperCase() || propuesto; // Validación: no permitir códigos duplicados en toda la app const dup = buscarSkuDuplicado(sku, null); if (dup) { alert(`⚠ El código "${sku}" ya está en uso por:\n${dup.sku} — ${dup.nombre}\n\nElige un código diferente.`); return; } const id = 'prod-' + Date.now(); const prod = { ...nuevo, id, sku, imagen_status: 'sin_foto', speech: '', is_active: true, tienda: tiendaId||'navarro', fechaIngreso: hoy(), diasEnStock: 0, }; setProductos(prev => [prod, ...prev]); setModalNuevo(false); setSel(id); setNuevo(n => ({ ...n, nombre:'', nombre_corto:'', costo:0, precio:0, stock:1, sku:'', skuManual:false })); showToast('✓ Producto creado: ' + sku); } // ── ELIMINAR PRODUCTO ───────────────────────────────────────────────────── function eliminarProducto(id) { setProductos(prev => prev.filter(p => p.id !== id)); if (selId === id) setSel(null); setConfirmDel(null); showToast('Producto eliminado del inventario'); } // ── FOTO ───────────────────────────────────────────────────────────────── function actualizarFoto(id, url) { // Mostrar de inmediato en pantalla con el base64 local (respuesta instantánea) const newFotos = { ...fotos, [id]: url }; setFotos(newFotos); guardarFotosLS(newFotos); if (editando && editando.id === id) { setEditando(prev => ({ ...prev, foto_url: url, imagen_status: url ? 'con_foto' : 'sin_foto' })); } setProductos(prev => prev.map(p => p.id === id ? { ...p, foto_url: url, imagen_status: url ? 'con_foto' : 'sin_foto' } : p )); // Subir a la nube (Supabase Storage) en segundo plano y reemplazar por la URL pública // (así la foto queda visible desde cualquier dispositivo, no solo este navegador) if (url && url.startsWith('data:')) { sbSubirFoto(id, url).then(publicUrl => { if (!publicUrl || publicUrl === url) return; // subida falló: se queda con el local const fotosNube = { ...fotos, [id]: publicUrl }; setFotos(fotosNube); guardarFotosLS(fotosNube); setEditando(prev => (prev && prev.id === id) ? { ...prev, foto_url: publicUrl } : prev); setProductos(prev => prev.map(p => p.id === id ? { ...p, foto_url: publicUrl } : p)); }).catch(()=>{}); } } // ── IMPORTAR ───────────────────────────────────────────────────────────── function handleImportar(file) { if (!file) return; const ext = file.name.split('.').pop().toLowerCase(); const done = data => { // Indexar existentes por SKU y por ID const bySku = {}, byId = {}; productos.forEach(p => { if (p.sku) bySku[p.sku.toLowerCase().trim()] = p; if (p.id) byId[p.id] = p; }); const nuevos = data.filter(p => !bySku[(p.sku||'').toLowerCase().trim()] && !byId[p.id]); const conflictos = data.filter(p => bySku[(p.sku||'').toLowerCase().trim()] || byId[p.id]); setModalImport({ nuevos, conflictos, data }); }; if (ext === 'json') importarJSON(file, done); else if (ext === 'csv') importarCSV(file, done); else alert('Solo se admiten archivos .json o .csv'); importRef.current.value = ''; } // ── Aplicar importación según opción elegida ────────────────────────────── function aplicarImport(modo) { if (!modalImport) return; const { nuevos, conflictos, data } = modalImport; const bySku = {}; productos.forEach(p => { if (p.sku) bySku[p.sku.toLowerCase().trim()] = p; }); let resultado; if (modo === 'solo_nuevos') { // Agrega los nuevos, deja intactos los existentes resultado = [...productos, ...nuevos]; showToast(`✓ ${nuevos.length} productos nuevos agregados`); } else if (modo === 'actualizar_todo') { // Nuevos se agregan; existentes se sobreescriben completamente const bySkuUpd = {}; conflictos.forEach(p => { bySkuUpd[(p.sku||'').toLowerCase().trim()] = p; }); resultado = productos.map(p => bySkuUpd[(p.sku||'').toLowerCase().trim()] || p); resultado = [...resultado, ...nuevos]; showToast(`✓ ${conflictos.length} actualizados · ${nuevos.length} nuevos`); } else if (modo === 'solo_stock') { // Solo actualiza el campo stock de los existentes const bySkuUpd = {}; conflictos.forEach(p => { bySkuUpd[(p.sku||'').toLowerCase().trim()] = p; }); resultado = productos.map(p => { const imp = bySkuUpd[(p.sku||'').toLowerCase().trim()]; return imp ? { ...p, stock: imp.stock } : p; }); resultado = [...resultado, ...nuevos]; showToast(`✓ Stock actualizado en ${conflictos.length} prod · ${nuevos.length} nuevos`); } else if (modo === 'reemplazar') { // Reemplaza TODO el inventario resultado = data; showToast(`✓ Inventario reemplazado (${data.length} productos)`); } else { setModalImport(null); return; } setProductos(resultado); guardarInventarioLS(resultado); setModalImport(null); } // ── ETIQUETA (usa la de data.jsx — 55×12mm hueso) ──────────────────────── function imprimirEtiq(lista) { window.imprimirEtiquetaGodex(lista, {}); } // Toggle etiqueta function toggleEtiq(id) { setSelEtiq(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; }); } const S = inv2Styles; if (cargando) return (
✦
Cargando inventario…
); return (
{/* ── TOAST ── */} {toast && (
{toast}
)} {/* ── Sidebar filtros ── */}
setBusqueda(e.target.value)} autoFocus/>
{/* Stats */}
{[ { l:'Productos', v:misProd.length }, { l:'Unidades', v:stockTotal }, { l:'Valor', v:'$'+Math.round(valorInventario/1_000_000).toFixed(1)+'M' }, { l:'Sin foto', v:sinFoto, alert:true }, ].map(s => (
0?'#f39c12':'var(--gold)', fontWeight:700, fontSize:'13px' }}>{s.v}
{s.l}
))}
{/* Filtros */} {[ { title:'CATEGORÍA', items:cats, val:catFiltro, set:setCatFiltro, counts:catCounts }, { title:'METAL', items:metales, val:metalFiltro, set:setMetalFiltro, counts:metalCounts }, ].map(({ title, items, val, set, counts }) => (
{title}
{items.map(c => ( ))}
))}
ESTADO
{['Todos', ...ESTADOS_PROD].map(e => ( ))}
{/* ── Lista productos ── */}
{/* Toolbar */}
{filtrados.length.toLocaleString()} productos {(busqueda || catFiltro!=='Todos' || metalFiltro!=='Todos' || estadoFiltro!=='Todos') ? ' (filtrado)' : ''}
{/* Etiquetas */} {vistaEtiq && selEtiq.size > 0 && ( )} {/* Export */}
{/* Import */} handleImportar(e.target.files[0])}/>
{/* Tabla */}
{vistaEtiq && ( )} {['SKU','','Producto','Cat.','Metal','Piedra','Precio','Stock','Estado','','Días'].map((h,i) => ( ))} {pagina_items.map(p => ( setSel(p.id === selId ? null : p.id)} style={{ ...S.tr, ...(selId === p.id ? { background:'rgba(201,168,76,0.07)', borderLeft:'2px solid var(--gold)' } : {}), cursor:'pointer' }}> {vistaEtiq && ( )} ))}
{ if (e.target.checked) setSelEtiq(new Set(pagina_items.map(p => p.id))); else setSelEtiq(new Set()); }}/> {h}
e.stopPropagation()}> toggleEtiq(p.id)} style={{ accentColor:'var(--gold)' }}/> {p.sku} {p.foto_url ? e.target.style.display='none'}/> :
📷
}
{p.nombre}
{p.notas &&
{p.notas}
} 		{p.categoria} {p.metal} {p.piedra||'—'} {clp(p.precio||0)} { e.stopPropagation(); setModalStock(p); }}> {p.stock||0} {p.estado} e.stopPropagation()}> {p.fechaIngreso && (() => { const dias = Math.floor((Date.now() - new Date(p.fechaIngreso).getTime()) / 86400000); return 180 ? 'rgba(192,57,43,0.12)' : dias>90 ? 'rgba(243,156,18,0.12)' : 'rgba(39,174,96,0.1)', color: dias>180 ? '#c0392b' : dias>90 ? '#f39c12' : '#27ae60' }}> {dias}d ; })()}
{/* Paginación */}
Página {pagina+1} de {totalPags||1} · {filtrados.length} resultados
{/* ── Panel Detalle / Edición ── */} {(selProd || editando) && (() => { const p = editando || selProd; const isEdit = !!editando; function F({ l, v, k, type, opts, readOnly, area }) { return (
{l}
{isEdit ? readOnly ?
{editando[k]||'—'}
: area ?