// ── SUPABASE GUÍA + HECHURAS v2 (con foto + email) ──── // ── Hechuras ───────────────────────────────────────── function Hechuras() { const { useState, useRef } = React; const [hechuras, setHechuras] = useState(()=>lsGet('hechuras',[])); const [selId, setSel] = useState(null); const [modalNuevo,setModal] = useState(false); const [emailModal,setEmailModal]=useState(null); const [fotoPreview,setFoto] = useState(null); const [camActiva, setCam] = useState(false); const fileRef=useRef(); const videoRef=useRef(); const streamRef=useRef(); const [nuevo, setNuevo]=useState({cliente:'',tipo:'',descripcion:'',metal:'Plata 925',presupuesto:0,senal:0,tecnico:TECNICOS[0],entrega:'',urgente:false,notas:'',emailCliente:'',telefonoCliente:''}); const TIPOS=['Anillo sello','Collar personalizado','Brazalete','Pulsera','Aros únicos','Colgante escultural','Argollas matrimonio','Joya escultural','Otro']; const ETAPAS=[{n:'Diseño aprobado'},{n:'Presupuesto confirmado'},{n:'Materiales listos'},{n:'Fundición'},{n:'Forjado/Armado'},{n:'Pulido'},{n:'Montaje piedra'},{n:'Control calidad'},{n:'Lista para entrega'}]; function guardar(lista){ setHechuras(lista); lsSet('hechuras',lista); } function crearHechura(){ const id=`HE-${new Date().getFullYear()}-${String(hechuras.length+1).padStart(3,'0')}`; const lista=[...hechuras,{...nuevo,id,estado:'Recibido',ingreso:hoy(),etapas:ETAPAS.map(e=>({...e,ok:false})),fotoReferencia:fotoPreview||null}]; guardar(lista); setSel(id); setModal(false); setFoto(null); stopCam(); if(nuevo.emailCliente) sendEmailOT(id,{...nuevo,id},'hechura_recibida'); setNuevo({cliente:'',tipo:'',descripcion:'',metal:'Plata 925',presupuesto:0,senal:0,tecnico:TECNICOS[0],entrega:'',urgente:false,notas:'',emailCliente:'',telefonoCliente:''}); } function toggleEtapa(hId,idx){ const lista=hechuras.map(h=>{ if(h.id!==hId) return h; const e=[...h.etapas]; e[idx]={...e[idx],ok:!e[idx].ok}; const pct=e.filter(x=>x.ok).length/e.length; const est=pct===0?'Recibido':pct<1?'En proceso':'Listo'; if(est==='Listo'&&h.estado!=='Listo'&&h.emailCliente) sendEmailOT(h.id,h,'hechura_lista'); return {...h,etapas:e,estado:est}; }); guardar(lista); } async function startCam(){ try{ const s=await navigator.mediaDevices.getUserMedia({video:true}); streamRef.current=s; if(videoRef.current) videoRef.current.srcObject=s; setCam(true); } catch{ alert('No se puede acceder a la cámara.'); } } function stopCam(){ if(streamRef.current) streamRef.current.getTracks().forEach(t=>t.stop()); setCam(false); } function tomarFoto(){ if(!videoRef.current) return; const c=document.createElement('canvas'); c.width=videoRef.current.videoWidth; c.height=videoRef.current.videoHeight; c.getContext('2d').drawImage(videoRef.current,0,0); setFoto(c.toDataURL('image/jpeg',0.8)); stopCam(); } function subirFoto(e){ const f=e.target.files[0]; if(!f) return; const r=new FileReader(); r.onload=ev=>setFoto(ev.target.result); r.readAsDataURL(f); } const selH=hechuras.find(h=>h.id===selId); const S=hecStyles; return (
Hechuras Exclusivas
{hechuras.length===0 ?
⚒️
Sin hechuras. Agrega la primera.
: hechuras.map(h=>{ const pct=Math.round(h.etapas.filter(e=>e.ok).length/h.etapas.length*100); return (
setSel(h.id===selId?null:h.id)} style={{...S.hecCard,...(selId===h.id?S.hecCardSel:{})}}> {h.fotoReferencia&&}
{h.cliente} {h.estado}
{h.tipo||h.descripcion?.slice(0,30)}
{pct}% {clp(h.presupuesto)}
{h.urgente&&
🔴 URGENTE
}
); }) }
{selH&&(
{selH.tipo||'Hechura'}
{selH.id} · {selH.cliente}
{selH.emailCliente&&} {selH.estado}
{selH.fotoReferencia&&Referencia}
{[{l:'Metal',v:selH.metal},{l:'Técnico',v:selH.tecnico},{l:'Ingreso',v:selH.ingreso},{l:'Entrega',v:selH.entrega||'—'}].map(f=>(
{f.l}
{f.v}
))}
{[{l:'Presupuesto',v:clp(selH.presupuesto),c:'var(--gold)'},{l:'Señal',v:clp(selH.senal),c:'#27ae60'},{l:'Saldo',v:clp(selH.presupuesto-selH.senal),c:(selH.presupuesto-selH.senal)>0?'#f39c12':'#27ae60'}].map(f=>(
{f.v}
{f.l}
))}
{selH.descripcion}
Proceso de Producción
{selH.etapas.map((e,i)=>(
toggleEtapa(selH.id,i)} style={{display:'flex',alignItems:'center',gap:'9px',padding:'8px 0',borderBottom:'1px solid var(--border)',cursor:'pointer'}}>
{e.ok?'✓':''}
{e.n} {e.ok&&✦}
))}
e.ok).length/selH.etapas.length*100)}%`,background:selH.etapas.every(e=>e.ok)?'#27ae60':'var(--gold)',borderRadius:'3px',transition:'width 0.4s'}}/>
)} {modalNuevo&&(
e.target===e.currentTarget&&(setModal(false),stopCam())}>
Nueva Hechura Exclusiva
Cliente *
setNuevo(n=>({...n,cliente:e.target.value}))}/>
Email (notificaciones)
setNuevo(n=>({...n,emailCliente:e.target.value}))}/>
Teléfono
setNuevo(n=>({...n,telefonoCliente:e.target.value}))}/>
Tipo de pieza
Metal
Presupuesto CLP
setNuevo(n=>({...n,presupuesto:parseInt(e.target.value)||0}))}/>
Señal CLP
setNuevo(n=>({...n,senal:parseInt(e.target.value)||0}))}/>
Fecha entrega
setNuevo(n=>({...n,entrega:e.target.value}))}/>
Técnico
Descripción del trabajo