ID	Cliente	Serviço	Status
{j.id}	{cN(j.clientId)}

Cliente	Trab.	Receita
{c.name} {c.clinic}	{cj.length}	{fmt(cj.filter(j=>j.paid).reduce((s,j)=>s+j.value,0))}

Cor	Nome	Descrição	Status	Ações
	{c.name}	{c.description\|\|'—'}	{c.active?'Ativa':'Inativa'}

Descrição

setF({...form,description:e.target.value})}/></div>
    <div className="fg"><label className="fl">Cor</label><div style={{display:'flex',gap:8,alignItems:'center'}}><input type="color" value={form.color} onChange={e=>setF({...form,color:e.target.value})} style={{width:40,height:36,border:'none',background:'transparent',cursor:'pointer'}}/><input className="fi" style={{width:120}} value={form.color} onChange={e=>setF({...form,color:e.target.value})}/></div></div>
    </Modal>}</>;
}

// Service Types
function PgServiceTypes({services,setServices,categories,token}){
  const[modal,setMo]=useState(null);
  const empty={id:'',name:'',base_price:'',color:'#0EA5E9',category_id:''};
  const[form,setF]=useState(empty);
  const { addToast } = useToast();
  const open=(s)=>{setF(s==='new'?{...empty,category_id:categories[0]?.id||''}:{id:s.id,name:s.name,base_price:s.base_price,color:s.color||'#0EA5E9',category_id:s.category_id||''});setMo(s);};
  const save=async()=>{
    try{
      if(modal==='new'){
        const res=await fetch('/api/services',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify({...form,base_price:Number(form.base_price)||0})});
        const data=await res.json();if(!res.ok)throw new Error(data.error);
        const cat=categories.find(c=>c.id===Number(form.category_id));
        setServices(p=>[...p,{...form,base_price:Number(form.base_price)||0,active:1,category_name:cat?.name,category_color:cat?.color}]);addToast('Serviço criado!','success');
      }else{
        const res=await fetch(`/api/services/${modal.id}`,{method:'PUT',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify({name:form.name,base_price:Number(form.base_price)||0,color:form.color,category_id:Number(form.category_id)||null,active:1})});
        if(!res.ok)throw new Error('Erro');
        const cat=categories.find(c=>c.id===Number(form.category_id));
        setServices(p=>p.map(s=>s.id===modal.id?{...s,name:form.name,base_price:Number(form.base_price)||0,color:form.color,category_id:Number(form.category_id)||null,category_name:cat?.name,category_color:cat?.color}:s));addToast('Serviço atualizado!','success');
      }
      setMo(null);
    }catch(e){addToast(e.message,'error');}
  };
  return <><div className="cd"><div className="cd-h"><h3>Tipos de Serviço ({services.length})</h3><button className="btn bp" onClick={()=>open('new')}>{I.plus} Novo Serviço</button></div>
    <div className="tb-wrap"><table className="tb"><thead><tr><th>Cor</th><th>ID</th><th>Nome</th><th>Categoria</th><th>Preço Base</th><th>Status</th><th>Ações</th></tr></thead><tbody>{services.map(s=><tr key={s.id}>
      <td><div style={{width:24,height:24,borderRadius:8,background:s.color||'var(--ac)'}}></div></td>
      <td style={{fontFamily:'var(--m)',fontSize:10}}>{s.id}</td>
      <td style={{color:'var(--t1)',fontWeight:500}}>{s.name}</td>
      <td>{s.category_name?<span className="chip" style={{background:`${s.category_color||'var(--ac)'}15`,color:s.category_color||'var(--ac)'}}>{s.category_name}</span>:'—'}</td>
      <td style={{fontFamily:'var(--m)',fontWeight:600,color:'var(--ok)'}}>{fmt(s.base_price)}</td>
      <td><span className="chip" style={{background:s.active?'rgba(16,185,129,.1)':'rgba(239,68,68,.1)',color:s.active?'var(--ok)':'var(--err)'}}>{s.active?'Ativo':'Inativo'}</span></td>
      <td><div style={{display:'flex',gap:4}}><button className="btn bg bsm" onClick={()=>open(s)}>{I.edit} Editar</button></div></td>
    </tr>)}</tbody></table></div></div>
    {modal&&<Modal title={modal==='new'?'Novo Serviço':'Editar Serviço'} onClose={()=>setMo(null)} footer={<><button className="btn bs" onClick={()=>setMo(null)}>Cancelar</button><button className="btn bp" onClick={save}>Salvar</button></>}>
    {modal==='new'&&<div className="fg"><label className="fl">ID (identificador único, sem espaços)</label><input className="fi" value={form.id} onChange={e=>setF({...form,id:e.target.value.toLowerCase().replace(/[^a-z0-9_]/g,'')})}/></div>}
    <div className="fg"><label className="fl">Nome</label><input className="fi" value={form.name} onChange={e=>setF({...form,name:e.target.value})}/></div>
    <div className="fr"><div className="fg"><label className="fl">Categoria</label><select className="fs" value={form.category_id} onChange={e=>setF({...form,category_id:e.target.value})}><option value="">Sem categoria</option>{categories.filter(c=>c.active).map(c=><option key={c.id} value={c.id}>{c.name}</option>)}</select></div>
    <div className="fg"><label className="fl">Preço Base (R$)</label><input className="fi" type="number" value={form.base_price} onChange={e=>setF({...form,base_price:e.target.value})}/></div></div>
    <div className="fg"><label className="fl">Cor</label><div style={{display:'flex',gap:8,alignItems:'center'}}><input type="color" value={form.color} onChange={e=>setF({...form,color:e.target.value})} style={{width:40,height:36,border:'none',background:'transparent',cursor:'pointer'}}/><input className="fi" style={{width:120}} value={form.color} onChange={e=>setF({...form,color:e.target.value})}/></div></div>
    </Modal>}</>;
}

// Users
function PgUsers({users,setUsers,token}){
  const[modal,setMo]=useState(null);
  const empty={name:'',email:'',role:'tecnico',active:true,password:''};
  const[form,setF]=useState(empty);
  const open=(u)=>{setF(u==='new'?empty:{name:u.name,email:u.email,role:u.role,active:u.active,password:''});setMo(u);};
  const { addToast } = useToast();
  const save=async()=>{
    try{
      if(modal==='new'){
        const res=await fetch('/api/users',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify(form)});
        const data=await res.json();if(!res.ok)throw new Error(data.error);
        setUsers(p=>[...p,{id:data.id,...form}]);addToast('Usuário cadastrado!','success');
      }else{
        const res=await fetch(`/api/users/${modal.id}`,{method:'PUT',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify(form)});
        if(!res.ok)throw new Error('Erro');
        setUsers(p=>p.map(u=>u.id===modal.id?{...u,...form}:u));addToast('Usuário atualizado!','success');
      }
      setMo(null);
    }catch(e){addToast(e.message,'error');}
  };
  return <><div className="cd"><div className="cd-h"><h3>Usuários</h3><button className="btn bp" onClick={()=>open('new')}>{I.plus} Novo</button></div>
    <div className="tb-wrap"><table className="tb"><thead><tr><th>Nome</th><th>Email</th><th>Função</th><th>Status</th><th>Ações</th></tr></thead><tbody>{users.map(u=><tr key={u.id}><td style={{color:'var(--t1)',fontWeight:500}}>{u.name}</td><td style={{fontFamily:'var(--m)',fontSize:10}}>{u.email}</td><td><RB id={u.role}/></td><td><span className="chip" style={{background:u.active?'rgba(16,185,129,.1)':'rgba(239,68,68,.1)',color:u.active?'var(--ok)':'var(--err)'}}>{u.active?'Ativo':'Inativo'}</span></td><td><div style={{display:'flex',gap:4}}><button className="btn bg bsm" onClick={()=>open(u)}>{I.edit} Editar</button><button className="btn bg bsm" onClick={async()=>{const na=!u.active;try{const r=await fetch(`/api/users/${u.id}`,{method:'PUT',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify({name:u.name,email:u.email,role:u.role,active:na})});if(!r.ok)throw new Error('Erro');setUsers(p=>p.map(x=>x.id===u.id?{...x,active:na}:x));}catch(e){}}}>{u.active?'⏸':'▶'}</button></div></td></tr>)}</tbody></table></div></div>
    {modal&&<Modal title={modal==='new'?'Novo Usuário':'Editar Usuário'} onClose={()=>setMo(null)} footer={<><button className="btn bs" onClick={()=>setMo(null)}>Cancelar</button><button className="btn bp" onClick={save}>Salvar</button></>}>
    <div className="fg"><label className="fl">Nome</label><input className="fi" value={form.name} onChange={e=>setF({...form,name:e.target.value})}/></div>
    <div className="fg"><label className="fl">Email</label><input className="fi" value={form.email} onChange={e=>setF({...form,email:e.target.value})}/></div>
    {modal==='new'&&<div className="fg"><label className="fl">Senha</label><input className="fi" value={form.password} onChange={e=>setF({...form,password:e.target.value})} placeholder="mudar123"/></div>}
    <div className="fr"><div className="fg"><label className="fl">Função</label><select className="fs" value={form.role} onChange={e=>setF({...form,role:e.target.value})}>{ROLES.map(r=><option key={r.id} value={r.id}>{r.label}</option>)}</select></div>
    <div className="fg"><label className="fl">Status</label><select className="fs" value={form.active?'1':'0'} onChange={e=>setF({...form,active:e.target.value==='1'})}><option value="1">Ativo</option><option value="0">Inativo</option></select></div></div>
    </Modal>}</>;
}

// Clients
function PgClients({clients,setClients,jobs,services,token}){
  const SvcN=({id})=>services.find(s=>s.id===id)?.name||id;
  const[search,setSe]=useState('');const[sort,setSo]=useState({field:'name',dir:'asc'});
  const[modal,setMo]=useState(null);const[viewC,setVC]=useState(null);const[showPw,setSP]=useState(false);
  const empty={name:'',cpf:'',clinic:'',cro:'',email:'',phone:'',city:'',state:'',address:'',neighborhood:'',zip:'',birthDate:'',login:'',password:''};
  const[form,setF]=useState(empty);
  const doSort=f=>setSo(p=>({field:f,dir:p.field===f&&p.dir==='asc'?'desc':'asc'}));
  const filtered=useMemo(()=>{const q=search.toLowerCase();let l=clients.filter(c=>c.name.toLowerCase().includes(q)||(c.clinic||'').toLowerCase().includes(q)||(c.cro||'').toLowerCase().includes(q));l.sort((a,b)=>{const v=sort.dir==='asc'?1:-1;return(a[sort.field]||'').localeCompare(b[sort.field]||'')*v;});return l;},[clients,search,sort]);
  const openNew=()=>{setF(empty);setMo('new');setSP(false);};
  const openEdit=c=>{setF({name:c.name,cpf:c.cpf||'',clinic:c.clinic,cro:c.cro,email:c.email,phone:c.phone,city:c.city,state:c.state||'',address:c.address||'',neighborhood:c.neighborhood||'',zip:c.zip||'',birthDate:c.birthDate||c.birth_date||'',login:c.login||'',password:''});setMo(c);setSP(false);};
  const { addToast } = useToast();
  const save=async()=>{
    try{
      const payload={name:form.name,cpf:form.cpf||null,clinic:form.clinic||null,cro:form.cro||null,email:form.email,phone:form.phone||null,birth_date:form.birthDate||null,address:form.address||null,neighborhood:form.neighborhood||null,city:form.city||null,state:form.state||null,zip:form.zip||null,login:form.login||null,password:form.password||null};
      if(modal==='new'){
        const r=await fetch('/api/clients',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify(payload)});
        const d=await r.json();if(!r.ok)throw new Error(d.error||'Erro ao cadastrar');
        setClients(p=>[...p,{id:d.id,...payload,birthDate:form.birthDate}]);
        addToast('Cliente cadastrado!','success');
      }else{
        const r=await fetch(`/api/clients/${modal.id}`,{method:'PUT',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify(payload)});
        if(!r.ok)throw new Error('Erro ao atualizar');
        if(form.password){await fetch(`/api/clients/${modal.id}/password`,{method:'PUT',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify({password:form.password})});}
        setClients(p=>p.map(c=>c.id===modal.id?{...c,...payload,birthDate:form.birthDate}:c));
        addToast('Cliente atualizado!','success');
      }
      setMo(null);
    }catch(e){addToast(e.message,'error');}
  };
  const cJobs=id=>jobs.filter(j=>j.clientId===id);
  const cRev=id=>cJobs(id).filter(j=>j.paid).reduce((s,j)=>s+j.value,0);
  const cPend=id=>cJobs(id).filter(j=>!j.paid).reduce((s,j)=>s+j.value,0);

if(viewC){const cj=cJobs(viewC.id);return <>
    <button className="btn bg" onClick={()=>setVC(null)} style={{marginBottom:12}}>{I.back} Voltar</button>
    <div className="cd" style={{marginBottom:12}}><div style={{padding:18}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
        <div><h3 style={{fontSize:16,marginBottom:2}}>{viewC.name}</h3><div style={{fontSize:12,color:'var(--t2)'}}>{viewC.clinic} — {viewC.cro}</div>
        {viewC.cpf&&<div style={{fontSize:11,color:'var(--t3)'}}>CPF: {viewC.cpf}</div>}
        <div style={{fontSize:11,color:'var(--t3)',marginTop:4}}>{viewC.email} · {viewC.phone}</div>
        <div style={{fontSize:11,color:'var(--t3)'}}>{viewC.address}, {viewC.neighborhood} — {viewC.city}/{viewC.state} · CEP: {viewC.zip}</div>
        {viewC.birthDate&&<div style={{fontSize:11,color:'var(--t3)'}}>Nascimento: {fmtD(viewC.birthDate)}</div>}</div>
        <button className="btn bs bsm" onClick={()=>openEdit(viewC)}>{I.edit} Editar</button>
      </div>
      <div className="fsum" style={{marginTop:14}}><div className="fbox"><div className="l">Trabalhos</div><div className="v">{cj.length}</div></div><div className="fbox"><div className="l">Recebido</div><div className="v ok">{fmt(cRev(viewC.id))}</div></div><div className="fbox"><div className="l">Pendente</div><div className="v err">{fmt(cPend(viewC.id))}</div></div></div>
    </div></div>
    <div className="cd"><div className="cd-h"><h3>Trabalhos</h3></div><div className="tb-wrap"><table className="tb"><thead><tr><th>ID</th><th>Serviço</th><th>Data</th><th>Valor</th><th>Status</th><th>Pago</th></tr></thead><tbody>
    {cj.map(j=><tr key={j.id}><td style={{fontFamily:'var(--m)',fontSize:10}}>{j.id}</td><td><SvcN id={j.service}/></td><td>{fmtD(j.date)}</td><td style={{fontFamily:'var(--m)',fontWeight:600}}>{fmt(j.value)}</td><td><StB id={j.status}/></td><td><span className="chip" style={{background:j.paid?'rgba(16,185,129,.1)':'rgba(239,68,68,.1)',color:j.paid?'var(--ok)':'var(--err)'}}>{j.paid?'Pago':'Pend.'}</span></td></tr>)}
    </tbody></table></div></div></>;
  }

return <><div className="cd"><div className="cd-h"><h3>Clientes ({filtered.length})</h3><div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
    <div className="sbox" style={{width:220}}>{I.search}<input placeholder="Nome, clínica ou CRO..." value={search} onChange={e=>setSe(e.target.value)}/></div>
    <button className="btn bp" onClick={openNew}>{I.plus} Novo Cliente</button></div></div>
    <div className="tb-wrap"><table className="tb"><thead><tr>
      <STh label="Cliente" field="name" sort={sort} onSort={doSort}/><STh label="Clínica" field="clinic" sort={sort} onSort={doSort}/><th>CRO</th><th>CPF</th><th>Cidade</th><th>Trab.</th><th>Receita</th><th>Pend.</th><th>Ações</th>
    </tr></thead><tbody>{filtered.map(c=><tr key={c.id}>
      <td><div style={{color:'var(--t1)',fontWeight:500}}>{c.name}</div><div style={{fontSize:9,color:'var(--t3)'}}>{c.email}</div></td>
      <td>{c.clinic}</td><td style={{fontFamily:'var(--m)',fontSize:10}}>{c.cro}</td>
      <td style={{fontFamily:'var(--m)',fontSize:10}}>{c.cpf||'—'}</td>
      <td>{c.city}</td>
      <td style={{fontFamily:'var(--m)'}}>{cJobs(c.id).length}</td>
      <td style={{fontFamily:'var(--m)',color:'var(--ok)',fontWeight:600}}>{fmt(cRev(c.id))}</td>
      <td style={{fontFamily:'var(--m)',color:cPend(c.id)>0?'var(--wn)':'var(--t3)',fontWeight:600}}>{fmt(cPend(c.id))}</td>
      <td><div style={{display:'flex',gap:4}}><button className="btn bg bsm" onClick={()=>setVC(c)}>{I.eye}</button><button className="btn bg bsm" onClick={()=>openEdit(c)}>{I.edit}</button></div></td>
    </tr>)}</tbody></table></div></div>
    {modal&&<Modal title={modal==='new'?'Novo Cliente':'Editar Cliente'} large onClose={()=>setMo(null)} footer={<><button className="btn bs" onClick={()=>setMo(null)}>Cancelar</button><button className="btn bp" onClick={save}>Salvar</button></>}>
      <div className="fr"><div className="fg"><label className="fl">Nome Completo</label><input className="fi" value={form.name} onChange={e=>setF({...form,name:e.target.value})}/></div>
      <div className="fg"><label className="fl">CPF</label><input className="fi" value={form.cpf} onChange={e=>setF({...form,cpf:cpfMask(e.target.value)})} placeholder="000.000.000-00"/></div></div>
      <div className="fr"><div className="fg"><label className="fl">Data de Nascimento</label><input className="fi" type="date" value={form.birthDate} onChange={e=>setF({...form,birthDate:e.target.value})}/></div>
      <div className="fg"><label className="fl">CRO</label><input className="fi" value={form.cro} onChange={e=>setF({...form,cro:e.target.value})} placeholder="CRO-UF 00000"/></div></div>
      <div className="fr"><div className="fg"><label className="fl">Clínica</label><input className="fi" value={form.clinic} onChange={e=>setF({...form,clinic:e.target.value})}/></div>
      <div className="fg"><label className="fl">Email</label><input className="fi" value={form.email} onChange={e=>setF({...form,email:e.target.value})}/></div></div>
      <div className="fg"><label className="fl">Telefone</label><input className="fi" value={form.phone} onChange={e=>setF({...form,phone:e.target.value})}/></div>
      <div className="fg"><label className="fl">Endereço</label><input className="fi" value={form.address} onChange={e=>setF({...form,address:e.target.value})} placeholder="Rua, número, complemento"/></div>
      <div className="fr3"><div className="fg"><label className="fl">Bairro</label><input className="fi" value={form.neighborhood} onChange={e=>setF({...form,neighborhood:e.target.value})}/></div>
      <div className="fg"><label className="fl">Cidade</label><input className="fi" value={form.city} onChange={e=>setF({...form,city:e.target.value})}/></div>
      <div className="fg"><label className="fl">Estado</label><input className="fi" value={form.state} onChange={e=>setF({...form,state:e.target.value})} placeholder="UF"/></div></div>
      <div className="fg"><label className="fl">CEP</label><input className="fi" style={{width:160}} value={form.zip} onChange={e=>setF({...form,zip:e.target.value})} placeholder="00000-000"/></div>
      <div style={{borderTop:'1px solid var(--bd)',marginTop:10,paddingTop:14}}>
        <div style={{fontSize:12,fontWeight:600,marginBottom:10,color:'var(--t2)',display:'flex',alignItems:'center',gap:6}}>{I.lock} Acesso ao Portal</div>
        <div className="fr"><div className="fg"><label className="fl">Login</label><input className="fi" value={form.login} onChange={e=>setF({...form,login:e.target.value})} placeholder="usuario.login"/></div>
        <div className="fg"><label className="fl">Senha</label><div className="pwd-wrap"><input className="fi" type={showPw?'text':'password'} value={form.password} onChange={e=>setF({...form,password:e.target.value})} placeholder="••••••••"/><span className="pwd-toggle" onClick={()=>setSP(!showPw)}>{showPw?I.eyeOff:I.eye}</span></div></div></div>
      </div>
    </Modal>}</>;
}

// ═══ 3D SCAN VIEWER ═══
function ScanViewer3D({url, name}) {
  const mountRef = useRef(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    if (!url || !mountRef.current) return;
    const mount = mountRef.current;
    setLoading(true);
    setError(null);

const ext = name.split('.').pop().toLowerCase();
    if (!['stl','obj','ply'].includes(ext)) {
      setLoading(false);
      setError('Formato não suportado para visualização 3D');
      return;
    }

const w = mount.clientWidth || 400;
    const h = mount.clientHeight || 340;

const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x0d1117);

const camera = new THREE.PerspectiveCamera(45, w / h, 0.01, 100000);
    camera.position.set(0, 0, 200);

const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(w, h);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.shadowMap.enabled = true;
    mount.appendChild(renderer.domElement);

const ambLight = new THREE.AmbientLight(0xffffff, 0.45);
    scene.add(ambLight);
    const dirLight1 = new THREE.DirectionalLight(0xffffff, 0.9);
    dirLight1.position.set(1, 2, 3);
    scene.add(dirLight1);
    const dirLight2 = new THREE.DirectionalLight(0x6699ff, 0.3);
    dirLight2.position.set(-2, -1, -2);
    scene.add(dirLight2);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.08;
    controls.autoRotate = false;

const fitCamera = (object) => {
      const box = new THREE.Box3().setFromObject(object);
      const center = box.getCenter(new THREE.Vector3());
      const size = box.getSize(new THREE.Vector3());
      object.position.sub(center);
      const maxDim = Math.max(size.x, size.y, size.z);
      camera.position.set(0, 0, maxDim * 1.8);
      camera.near = maxDim * 0.001;
      camera.far = maxDim * 20;
      camera.updateProjectionMatrix();
      controls.target.set(0, 0, 0);
      controls.update();
    };

const material = new THREE.MeshPhongMaterial({
      color: 0x0ea5e9,
      specular: 0x334155,
      shininess: 60,
      side: THREE.DoubleSide
    });

let animId;
    const animate = () => { animId = requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); };
    animate();

if (ext === 'stl') {
      const loader = new THREE.STLLoader();
      loader.load(url, (geo) => {
        geo.computeVertexNormals();
        const mesh = new THREE.Mesh(geo, material);
        scene.add(mesh);
        fitCamera(mesh);
        setLoading(false);
      }, undefined, () => { setError('Erro ao carregar STL'); setLoading(false); });
    } else if (ext === 'ply') {
      const loader = new THREE.PLYLoader();
      loader.load(url, (geo) => {
        geo.computeVertexNormals();
        const mesh = new THREE.Mesh(geo, material);
        scene.add(mesh);
        fitCamera(mesh);
        setLoading(false);
      }, undefined, () => { setError('Erro ao carregar PLY'); setLoading(false); });
    } else if (ext === 'obj') {
      const loader = new THREE.OBJLoader();
      loader.load(url, (obj) => {
        obj.traverse(c => { if (c.isMesh) c.material = material; });
        scene.add(obj);
        fitCamera(obj);
        setLoading(false);
      }, undefined, () => { setError('Erro ao carregar OBJ'); setLoading(false); });
    }

const handleResize = () => {
      const nw = mount.clientWidth; const nh = mount.clientHeight;
      camera.aspect = nw / nh; camera.updateProjectionMatrix(); renderer.setSize(nw, nh);
    };
    window.addEventListener('resize', handleResize);

return () => {
      cancelAnimationFrame(animId);
      window.removeEventListener('resize', handleResize);
      controls.dispose();
      renderer.dispose();
      if (mount.contains(renderer.domElement)) mount.removeChild(renderer.domElement);
    };
  }, [url, name]);

return (
    <div style={{width:'100%',height:'100%',position:'relative'}}>
      <div ref={mountRef} style={{width:'100%',height:'100%'}}/>
      {loading&&<div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',color:'var(--t3)',gap:8,background:'rgba(13,17,23,0.7)',pointerEvents:'none'}}>
        <div style={{width:28,height:28,border:'3px solid var(--bd)',borderTopColor:'var(--ac)',borderRadius:'50%',animation:'spin .8s linear infinite'}}/>
        <div style={{fontSize:11}}>Carregando modelo 3D...</div>
      </div>}
      {error&&<div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',color:'var(--t3)',gap:6}}>
        <div style={{fontSize:20}}>{I.cube}</div>
        <div style={{fontSize:12}}>{error}</div>
      </div>}
      {!loading&&!error&&<div style={{position:'absolute',bottom:8,left:0,right:0,textAlign:'center',fontSize:10,color:'rgba(148,163,184,0.5)',pointerEvents:'none'}}>Arraste para rotacionar · Scroll para zoom</div>}
    </div>
  );
}

// Jobs
function PgJobs({jobs,setJobs,clients,users,services,token}){
  const SvcN=({id})=>services.find(s=>s.id===id)?.name||id;
  const SVM=Object.fromEntries(services.map(s=>[s.id,s]));
  const[sort,setSo]=useState({field:'date',dir:'desc'});const[fSt,setFS]=useState('all');const[fPd,setFP]=useState('all');
  const[modal,setMo]=useState(null);const[jobTab,setJT]=useState('info');const[preview,setPrev]=useState(null);
  const techs=users.filter(u=>u.active&&(u.role==='tecnico'||u.role==='admin'));
  const cN=id=>clients.find(c=>c.id===id)?.name||'—';const uN=id=>users.find(u=>u.id===id)?.name||'—';
  const doSort=f=>setSo(p=>({field:f,dir:p.field===f&&p.dir==='asc'?'desc':'asc'}));
  const empty={clientId:clients[0]?.id||'',service:services[0]?.id||'',notes:'',assignedTo:'',value:''};
  const[form,setF]=useState(empty);
  const[fileForm,setFF]=useState({photos:[],scans:{sup:null,inf:null,ext_sup:null,ext_inf:null}});

const filtered=useMemo(()=>{let l=[...jobs];
    if(fSt!=='all')l=l.filter(j=>j.status===fSt);
    if(fPd==='paid')l=l.filter(j=>j.paid);if(fPd==='pending')l=l.filter(j=>!j.paid);
    l.sort((a,b)=>{const d=sort.dir==='asc'?1:-1;if(sort.field==='date')return a.date<b.date?-d:d;if(sort.field==='client')return cN(a.clientId)<cN(b.clientId)?-d:d;if(sort.field==='status')return STATUS_FLOW.findIndex(s=>s.id===a.status)<STATUS_FLOW.findIndex(s=>s.id===b.status)?-d:d;if(sort.field==='value')return(a.value-b.value)*d;return 0;});
    return l;},[jobs,fSt,fPd,sort,clients]);

const isView=modal&&typeof modal==='object'&&!modal.edit;
  const isEdit=modal&&typeof modal==='object'&&modal.edit;
  const formModal=modal==='new'||isEdit;

return <>
    <div className="fbar">
      <span className="lbl">Status:</span><button className={`btn ${fSt==='all'?'bp':'bs'} bsm`} onClick={()=>setFS('all')}>Todos</button>
      {STATUS_FLOW.map(s=><button key={s.id} className={`btn ${fSt===s.id?'bp':'bs'} bsm`} onClick={()=>setFS(s.id)}>{s.label} ({jobs.filter(j=>j.status===s.id).length})</button>)}
      <span className="lbl" style={{marginLeft:10}}>Pgto:</span>
      <button className={`btn ${fPd==='all'?'bp':'bs'} bsm`} onClick={()=>setFP('all')}>Todos</button>
      <button className={`btn ${fPd==='paid'?'bp':'bs'} bsm`} onClick={()=>setFP('paid')}>Pagos</button>
      <button className={`btn ${fPd==='pending'?'bp':'bs'} bsm`} onClick={()=>setFP('pending')}>Pendentes</button>
    </div>
    <div className="cd"><div className="cd-h"><h3>Trabalhos ({filtered.length})</h3><button className="btn bp" onClick={openNew}>{I.plus} Novo Trabalho</button></div>
    <div className="tb-wrap"><table className="tb"><thead><tr><th>ID</th><STh label="Cliente" field="client" sort={sort} onSort={doSort}/><th>Serviço</th><STh label="Data" field="date" sort={sort} onSort={doSort}/><STh label="Valor" field="value" sort={sort} onSort={doSort}/><STh label="Status" field="status" sort={sort} onSort={doSort}/><th>Pago</th><th>Atribuído</th><th>Ações</th></tr></thead><tbody>
    {filtered.map(j=><tr key={j.id}><td style={{fontFamily:'var(--m)',fontSize:10}}>{j.id}</td><td style={{color:'var(--t1)',fontWeight:500}}>{cN(j.clientId)}</td><td><SvcN id={j.service}/></td><td>{fmtD(j.date)}</td><td style={{fontFamily:'var(--m)',fontWeight:600}}>{fmt(j.value)}</td><td><StB id={j.status}/></td><td><span className="chip" style={{background:j.paid?'rgba(16,185,129,.1)':'rgba(239,68,68,.1)',color:j.paid?'var(--ok)':'var(--err)'}}>{j.paid?'Pago':'Pend.'}</span></td><td style={{fontSize:11,color:j.assignedTo?'var(--pu)':'var(--err)'}}>{j.assignedTo?uN(j.assignedTo):'Não atrib.'}</td><td><div style={{display:'flex',gap:4}}><button className="btn bg bsm" onClick={()=>{setMo(j);setJT('info');}}>{I.eye}</button><button className="btn bg bsm" onClick={()=>openEdit(j)}>{I.edit}</button></div></td></tr>)}
    </tbody></table></div></div>

{/* View */}
    {isView&&<Modal title={`Trabalho ${modal.id}`} large onClose={()=>setMo(null)} footer={<><button className="btn bs" onClick={()=>setMo(null)}>Fechar</button>{modal.status!=='entregue'&&<button className="btn bp" onClick={()=>advance(modal)}>Avançar Status</button>}</>}>
      <div className="tabs"><div className={`tab ${jobTab==='info'?'on':''}`} onClick={()=>setJT('info')}>Informações</div><div className={`tab ${jobTab==='files'?'on':''}`} onClick={()=>setJT('files')}>Arquivos</div></div>
      {jobTab==='info'&&<><div style={{marginBottom:12}}><div style={{fontSize:10,color:'var(--t3)'}}>Cliente</div><div style={{fontWeight:600,fontSize:15}}>{cN(modal.clientId)}</div></div>
      <div className="fr" style={{marginBottom:12}}><div><div style={{fontSize:10,color:'var(--t3)'}}>Serviço</div><div style={{fontWeight:500}}><SvcN id={modal.service}/></div></div><div><div style={{fontSize:10,color:'var(--t3)'}}>Valor</div><div style={{fontFamily:'var(--m)',fontWeight:700,fontSize:16,color:'var(--ac)'}}>{fmt(modal.value)}</div></div></div>
      <div className="fr" style={{marginBottom:12}}><div><div style={{fontSize:10,color:'var(--t3)'}}>Atribuído</div><div style={{fontWeight:500,color:modal.assignedTo?'var(--pu)':'var(--err)'}}>{modal.assignedTo?uN(modal.assignedTo):'Não atribuído'}</div></div><div><div style={{fontSize:10,color:'var(--t3)'}}>Origem</div><div style={{fontWeight:500}}>{modal.origin==='client'?'Portal Cliente':'Admin'}</div></div></div>
      {modal.paid&&<div className="fr" style={{marginBottom:12}}><div><div style={{fontSize:10,color:'var(--t3)'}}>Pgto</div><div style={{fontWeight:500,color:'var(--ok)'}}>{modal.payMethod||'—'}</div></div><div><div style={{fontSize:10,color:'var(--t3)'}}>Data Pgto</div><div>{fmtD(modal.paidDate)}</div></div></div>}
      <div style={{fontSize:10,color:'var(--t3)'}}>Obs.</div><div style={{fontSize:12,color:'var(--t2)',marginBottom:14}}>{modal.notes||'—'}</div>
      <FlowT status={modal.status}/></>}
      {jobTab==='files'&&<>
        <div style={{fontSize:12,fontWeight:600,marginBottom:8,color:'var(--t2)'}}>Escaneamentos</div>
        {SCAN_SLOTS.map(sl=>{const f=modal.files?.scans?.[sl.id];return <div className="file-slot" key={sl.id}><div className="fs-label">{sl.label}</div>{f?<><div className="scan-mini-viewer"><div className="smv-icon">{I.cube}</div><div className="smv-ext">{f.name.split('.').pop().toUpperCase()}</div></div><div className="fs-name" style={{flex:1}}>{f.name}</div><button className="btn bg bsm" onClick={()=>setPrev({type:'scan',name:f.name,url:f.url||null})}>{I.eye}</button></>:<span style={{fontSize:11,color:'var(--t3)'}}>Nenhum arquivo</span>}</div>;})}
        <div style={{fontSize:12,fontWeight:600,marginBottom:8,marginTop:14,color:'var(--t2)'}}>Fotos ({modal.files?.photos?.length||0})</div>
        {modal.files?.photos?.length>0?<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(100px,1fr))',gap:8}}>
          {modal.files.photos.map((p,i)=><div key={i} style={{background:'var(--bg3)',border:'1px solid var(--bd)',borderRadius:'var(--rs)',padding:6,cursor:'pointer',textAlign:'center'}} onClick={()=>setPrev({type:'photo',url:p.url,name:p.name})}><div style={{height:60,display:'flex',alignItems:'center',justifyContent:'center',marginBottom:4}}>{p.url?<img src={p.url} alt="" style={{maxHeight:60,maxWidth:'100%',borderRadius:4}}/>:<span style={{color:'var(--t3)'}}>{I.img}</span>}</div><div style={{fontSize:9,color:'var(--t3)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{p.name}</div></div>)}
        </div>:<div style={{fontSize:11,color:'var(--t3)'}}>Nenhuma foto</div>}
        {preview&&<div className="preview-area" style={{marginTop:14,minHeight:preview.type==='scan'?360:200}}><button className="ibtn" style={{position:'absolute',top:8,right:8,zIndex:2}} onClick={()=>setPrev(null)}>{I.close}</button>{preview.type==='scan'&&preview.url?<ScanViewer3D url={preview.url} name={preview.name}/>:preview.type==='photo'&&preview.url?<img src={preview.url} alt=""/>:<div className="ph"><div style={{marginBottom:6}}>{I.cube}</div><div>{preview.name}</div><div style={{fontSize:10,marginTop:4}}>Visualização de escaneamento 3D não disponível</div></div>}</div>}
      </>}
    </Modal>}

{/* New/Edit */}
    {formModal&&<Modal title={modal==='new'?'Novo Trabalho':'Editar Trabalho'} large onClose={()=>setMo(null)} footer={<><button className="btn bs" onClick={()=>setMo(null)}>Cancelar</button><button className="btn bp" onClick={modal==='new'?saveNew:saveEdit}>Salvar</button></>}>
      <div className="tabs"><div className={`tab ${jobTab==='info'?'on':''}`} onClick={()=>setJT('info')}>Informações</div><div className={`tab ${jobTab==='files'?'on':''}`} onClick={()=>setJT('files')}>Arquivos</div></div>
      {jobTab==='info'&&<><div className="fr"><div className="fg"><label className="fl">Cliente</label><select className="fs" value={form.clientId} onChange={e=>setF({...form,clientId:e.target.value})}>{clients.map(c=><option key={c.id} value={c.id}>{c.name} — {c.clinic}</option>)}</select></div>
      <div className="fg"><label className="fl">Serviço</label><select className="fs" value={form.service} onChange={e=>setF({...form,service:e.target.value,value:SVM[e.target.value]?.base_price||form.value})}>{services.map(s=><option key={s.id} value={s.id}>{s.name}</option>)}</select></div></div>
      <div className="fr"><div className="fg"><label className="fl">Valor (R$)</label><input className="fi" type="number" value={form.value} onChange={e=>setF({...form,value:e.target.value})}/></div>
      <div className="fg"><label className="fl">Atribuir Funcionário</label><select className="fs" value={form.assignedTo} onChange={e=>setF({...form,assignedTo:e.target.value})}><option value="">— Nenhum (direcionar depois) —</option>{techs.map(u=><option key={u.id} value={u.id}>{u.name} ({RM[u.role]?.label})</option>)}</select></div></div>
      <div className="fg"><label className="fl">Observações</label><textarea className="fta" rows={2} value={form.notes} onChange={e=>setF({...form,notes:e.target.value})}/></div></>}
      {jobTab==='files'&&<>
        <div style={{fontSize:12,fontWeight:600,marginBottom:8,color:'var(--t2)'}}>Escaneamentos (até 4)</div>
        {SCAN_SLOTS.map(sl=><div className="file-slot" key={sl.id}><div className="fs-label">{sl.label}</div>{fileForm.scans[sl.id]?<><div className="fs-name">{fileForm.scans[sl.id].name}</div><button className="btn berr bsm" onClick={()=>handleScanRemove(sl.id)}>{I.trash}</button></>:<button className="btn bs bsm" onClick={()=>handleScanAdd(sl.id)}>{I.plus} Carregar</button>}</div>)}
        <div style={{fontSize:12,fontWeight:600,marginBottom:8,marginTop:14,color:'var(--t2)'}}>Fotos</div>
        {fileForm.photos.length>0&&<div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:8}}>
          {fileForm.photos.map((p,i)=><div key={i} style={{background:'var(--bg3)',border:'1px solid var(--bd)',borderRadius:6,padding:6,display:'flex',alignItems:'center',gap:6}}><span style={{fontSize:10,color:'var(--t2)'}}>{p.name}</span><button className="btn berr bsm" onClick={()=>handlePhotoRemove(i)}>{I.trash}</button></div>)}
        </div>}
        <button className="btn bs" onClick={handlePhotoAdd}>{I.cam} Adicionar Foto</button>
      </>}
    </Modal>}
  </>;
}

// Finance Overview
function PgFinOv({jobs,clients}){
  const paid=jobs.filter(j=>j.paid).reduce((s,j)=>s+j.value,0);const pend=jobs.filter(j=>!j.paid).reduce((s,j)=>s+j.value,0);
  const byC=clients.map(c=>{const cj=jobs.filter(j=>j.clientId===c.id);return{...c,paid:cj.filter(j=>j.paid).reduce((s,j)=>s+j.value,0),pend:cj.filter(j=>!j.paid).reduce((s,j)=>s+j.value,0),count:cj.length};}).sort((a,b)=>(b.paid+b.pend)-(a.paid+a.pend));
  return <><div className="fsum"><div className="fbox"><div className="l">Total Faturado</div><div className="v wn">{fmt(paid+pend)}</div></div><div className="fbox"><div className="l">Recebido</div><div className="v ok">{fmt(paid)}</div></div><div className="fbox"><div className="l">Pendente</div><div className="v err">{fmt(pend)}</div></div></div>
  <div className="cd"><div className="cd-h"><h3>Financeiro por Cliente</h3><button className="btn bs bsm">{I.dl} Exportar</button></div><div className="tb-wrap"><table className="tb"><thead><tr><th>Cliente</th><th>Clínica</th><th>Trab.</th><th>Recebido</th><th>Pendente</th><th>Total</th></tr></thead><tbody>
  {byC.map(c=><tr key={c.id}><td style={{color:'var(--t1)',fontWeight:500}}>{c.name}</td><td>{c.clinic}</td><td style={{fontFamily:'var(--m)'}}>{c.count}</td><td style={{fontFamily:'var(--m)',color:'var(--ok)',fontWeight:600}}>{fmt(c.paid)}</td><td style={{fontFamily:'var(--m)',color:c.pend>0?'var(--err)':'var(--t3)',fontWeight:600}}>{fmt(c.pend)}</td><td style={{fontFamily:'var(--m)',fontWeight:700}}>{fmt(c.paid+c.pend)}</td></tr>)}
  </tbody></table></div></div></>;
}

// Finance Payments
function PgFinPay({jobs,setJobs,clients,services,token}){
  const SvcN=({id})=>services.find(s=>s.id===id)?.name||id;
  const SVM=Object.fromEntries(services.map(s=>[s.id,s]));
  const unpaid=jobs.filter(j=>!j.paid);const cN=id=>clients.find(c=>c.id===id)?.name||'—';
  const[confirm,setConf]=useState(null);
  const { addToast } = useToast();
  const doConfirm=async (method)=>{try{await fetch(`/api/jobs/${confirm.id}/pay`,{method:'PUT',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify({pay_method:method})});setJobs(p=>p.map(j=>j.id===confirm.id?{...j,paid:true,paidDate:new Date().toISOString().split('T')[0],payMethod:method}:j));setConf(null);addToast('Pagamento baixado!','success');}catch(e){addToast('Erro API','error');}};
  return <><div className="fsum"><div className="fbox"><div className="l">Total Pendente</div><div className="v err">{fmt(unpaid.reduce((s,j)=>s+j.value,0))}</div></div><div className="fbox"><div className="l">Trabalhos Pendentes</div><div className="v wn">{unpaid.length}</div></div><div className="fbox"><div className="l">Clientes c/ Pendência</div><div className="v">{new Set(unpaid.map(j=>j.clientId)).size}</div></div></div>
  <div className="cd"><div className="cd-h"><h3>Pendentes de Pagamento</h3></div><div className="tb-wrap"><table className="tb"><thead><tr><th>ID</th><th>Cliente</th><th>Serviço</th><th>Data</th><th>Valor</th><th>Status</th><th>Ação</th></tr></thead><tbody>
  {unpaid.length===0?<tr><td colSpan={7}><div className="empty"><h4>Nenhum pendente</h4></div></td></tr>:unpaid.map(j=><tr key={j.id}><td style={{fontFamily:'var(--m)',fontSize:10}}>{j.id}</td><td style={{color:'var(--t1)',fontWeight:500}}>{cN(j.clientId)}</td><td><SvcN id={j.service}/></td><td>{fmtD(j.date)}</td><td style={{fontFamily:'var(--m)',fontWeight:700}}>{fmt(j.value)}</td><td><StB id={j.status}/></td><td><button className="btn bok bsm" onClick={()=>setConf(j)}>{I.check} Dar Baixa</button></td></tr>)}
  </tbody></table></div></div>
  {confirm&&<PayConfirm title={`${confirm.id} — ${cN(confirm.clientId)} — ${SVM[confirm.service]?.name}`} amount={confirm.value} onConfirm={doConfirm} onCancel={()=>setConf(null)}/>}
  </>;
}

// Bills
function PgBills({bills,setBills,token}){
  const[fSt,setFS]=useState('all');const[fCat,setFC]=useState('all');const[modal,setMo]=useState(null);const[confirm,setConf]=useState(null);
  const empty={description:'',supplier:'',category:'material',value:'',dueDate:'',recurring:false,notes:''};const[form,setF]=useState(empty);
  const today=new Date().toISOString().split('T')[0];
  const proc=bills.map(b=>({...b,status:b.status!=='pago'&&b.dueDate<today?'vencido':b.status}));
  const filt=proc.filter(b=>fSt==='all'||b.status===fSt).filter(b=>fCat==='all'||b.category===fCat).sort((a,b)=>a.dueDate.localeCompare(b.dueDate));
  const tPd=proc.filter(b=>b.status==='pago').reduce((s,b)=>s+b.value,0);const tPn=proc.filter(b=>b.status==='pendente').reduce((s,b)=>s+b.value,0);const tOv=proc.filter(b=>b.status==='vencido').reduce((s,b)=>s+b.value,0);
  const stC={pago:'var(--ok)',pendente:'var(--wn)',vencido:'var(--err)'};const stL={pago:'Pago',pendente:'Pendente',vencido:'Vencido'};
  const {addToast}=useToast();
  const doConfirm=async(method)=>{try{const r=await fetch(`/api/bills/${confirm.id}/pay`,{method:'PUT',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify({pay_method:method})});if(!r.ok)throw new Error('Erro ao pagar');setBills(p=>p.map(b=>b.id===confirm.id?{...b,status:'pago',paidDate:today,payMethod:method}:b));setConf(null);addToast('Pagamento registrado!','success');}catch(e){addToast(e.message,'error');}};
  const saveNew=async()=>{try{const payload={description:form.description,supplier:form.supplier||null,category:form.category,value:parseFloat(form.value)||0,due_date:form.dueDate,recurring:form.recurring?1:0,notes:form.notes||null};const r=await fetch('/api/bills',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify(payload)});const d=await r.json();if(!r.ok)throw new Error(d.error||'Erro ao salvar');setBills(p=>[...p,{id:d.id,...form,value:parseFloat(form.value)||0,paidDate:null,payMethod:null,status:'pendente'}]);setMo(null);setF(empty);addToast('Conta criada!','success');}catch(e){addToast(e.message,'error');}};
  return <>
    <div className="stats" style={{gridTemplateColumns:'repeat(4,1fr)'}}><div className="st"><div className="sv" style={{fontSize:18,color:'var(--ok)'}}>{fmt(tPd)}</div><div className="sl">Pago</div></div><div className="st"><div className="sv" style={{fontSize:18,color:'var(--wn)'}}>{fmt(tPn)}</div><div className="sl">Pendente</div></div><div className="st"><div className="sv" style={{fontSize:18,color:'var(--err)'}}>{fmt(tOv)}</div><div className="sl">Vencido</div></div><div className="st"><div className="sv" style={{fontSize:18,color:'var(--pu)'}}>{fmt(proc.filter(b=>b.recurring).reduce((s,b)=>s+b.value,0))}</div><div className="sl">Recorrente</div></div></div>
    <div className="fbar"><span className="lbl">Status:</span>{[['all','Todos'],['pendente','Pend.'],['vencido','Venc.'],['pago','Pagos']].map(([k,l])=><button key={k} className={`btn ${fSt===k?'bp':'bs'} bsm`} onClick={()=>setFS(k)}>{l}</button>)}<span className="lbl" style={{marginLeft:8}}>Cat:</span><select className="fs" style={{width:140,padding:'4px 8px',fontSize:11}} value={fCat} onChange={e=>setFC(e.target.value)}><option value="all">Todas</option>{BILL_CATS.map(c=><option key={c.id} value={c.id}>{c.label}</option>)}</select></div>
    <div className="cd"><div className="cd-h"><h3>Contas a Pagar ({filt.length})</h3><button className="btn bp" onClick={()=>{setF(empty);setMo('new');}}>{I.plus} Nova Conta</button></div>
    <div className="tb-wrap"><table className="tb"><thead><tr><th>Descrição</th><th>Fornecedor</th><th>Cat.</th><th>Venc.</th><th>Valor</th><th>Status</th><th></th><th>Ação</th></tr></thead><tbody>
    {filt.map(b=>{const cat=BCM[b.category]||{};return <tr key={b.id}><td style={{color:'var(--t1)',fontWeight:500,maxWidth:200,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{b.description}</td><td>{b.supplier}</td><td><span className="chip" style={{background:`${cat.color}15`,color:cat.color}}>{cat.label}</span></td><td style={{fontFamily:'var(--m)',fontSize:10,color:b.status==='vencido'?'var(--err)':'var(--t2)',fontWeight:b.status==='vencido'?600:400}}>{fmtD(b.dueDate)}</td><td style={{fontFamily:'var(--m)',fontWeight:700}}>{fmt(b.value)}</td><td><span className="badge" style={{background:`${stC[b.status]}15`,color:stC[b.status]}}><span className="dt" style={{background:stC[b.status]}}/>{stL[b.status]}</span></td><td>{b.recurring&&<span style={{color:'var(--pu)'}}>{I.repeat}</span>}</td><td>{b.status!=='pago'&&<button className="btn bok bsm" onClick={()=>setConf(b)}>{I.check} Pagar</button>}</td></tr>;})}
    </tbody></table></div></div>
    {modal==='new'&&<Modal title="Nova Conta" onClose={()=>setMo(null)} footer={<><button className="btn bs" onClick={()=>setMo(null)}>Cancelar</button><button className="btn bp" onClick={saveNew}>Salvar</button></>}>
    <div className="fg"><label className="fl">Descrição</label><input className="fi" value={form.description} onChange={e=>setF({...form,description:e.target.value})}/></div>
    <div className="fr"><div className="fg"><label className="fl">Fornecedor</label><input className="fi" value={form.supplier} onChange={e=>setF({...form,supplier:e.target.value})}/></div><div className="fg"><label className="fl">Categoria</label><select className="fs" value={form.category} onChange={e=>setF({...form,category:e.target.value})}>{BILL_CATS.map(c=><option key={c.id} value={c.id}>{c.label}</option>)}</select></div></div>
    <div className="fr"><div className="fg"><label className="fl">Valor</label><input className="fi" type="number" value={form.value} onChange={e=>setF({...form,value:e.target.value})}/></div><div className="fg"><label className="fl">Vencimento</label><input className="fi" type="date" value={form.dueDate} onChange={e=>setF({...form,dueDate:e.target.value})}/></div></div>
    <div className="fg"><label className="fl">Obs.</label><textarea className="fta" rows={2} value={form.notes} onChange={e=>setF({...form,notes:e.target.value})}/></div>
    <div className="tgl" style={{borderBottom:'none'}}><div><div style={{fontSize:12,fontWeight:500}}>Recorrente</div><div style={{fontSize:10,color:'var(--t3)'}}>Repete mensalmente</div></div><div className={`tgl-s ${form.recurring?'on':''}`} onClick={()=>setF({...form,recurring:!form.recurring})}/></div>
    </Modal>}
    {confirm&&<PayConfirm title={confirm.description} amount={confirm.value} onConfirm={doConfirm} onCancel={()=>setConf(null)}/>}
  </>;
}

// Cash Flow
function PgCashFlow({jobs,bills,services}){
  const SVM=Object.fromEntries(services.map(s=>[s.id,s]));
  const[type,setTy]=useState('all');const[range,setRa]=useState('month');const[customFrom,setCF]=useState('');const[customTo,setCT]=useState('');
  const today=new Date();const todayS=today.toISOString().split('T')[0];
  const getStart=()=>{if(range==='custom')return customFrom||'2020-01-01';const d=new Date(today);if(range==='day')return todayS;if(range==='week'){d.setDate(d.getDate()-d.getDay());return d.toISOString().split('T')[0];}if(range==='month'){return`${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-01`;}if(range==='year')return`${today.getFullYear()}-01-01`;return'2020-01-01';};
  const getEnd=()=>range==='custom'?(customTo||todayS):todayS;
  const start=getStart(),end=getEnd();
  const recEntries=jobs.filter(j=>j.paid&&j.paidDate>=start&&j.paidDate<=end).map(j=>({date:j.paidDate,desc:`${j.id} — ${SVM[j.service]?.name||j.service}`,value:j.value,type:'receber',method:j.payMethod||'—'}));
  const pagEntries=bills.filter(b=>b.status==='pago'&&b.paidDate>=start&&b.paidDate<=end).map(b=>({date:b.paidDate,desc:b.description,value:b.value,type:'pagar',method:b.payMethod||'—'}));
  let entries=type==='receber'?recEntries:type==='pagar'?pagEntries:[...recEntries,...pagEntries];
  entries.sort((a,b)=>b.date.localeCompare(a.date));
  const totRec=recEntries.reduce((s,e)=>s+e.value,0);const totPag=pagEntries.reduce((s,e)=>s+e.value,0);
  return <>
    <div className="fbar">
      <span className="lbl">Tipo:</span>
      {[['all','Todos'],['receber','A Receber'],['pagar','A Pagar']].map(([k,l])=><button key={k} className={`btn ${type===k?'bp':'bs'} bsm`} onClick={()=>setTy(k)}>{l}</button>)}
      <span className="lbl" style={{marginLeft:10}}>Período:</span>
      {[['day','Dia'],['week','Semana'],['month','Mês'],['year','Ano'],['custom','Personalizado']].map(([k,l])=><button key={k} className={`btn ${range===k?'bp':'bs'} bsm`} onClick={()=>setRa(k)}>{l}</button>)}
      {range==='custom'&&<><input className="fi" type="date" style={{width:130,padding:'4px 8px',fontSize:11}} value={customFrom} onChange={e=>setCF(e.target.value)}/><span style={{color:'var(--t3)',fontSize:11}}>até</span><input className="fi" type="date" style={{width:130,padding:'4px 8px',fontSize:11}} value={customTo} onChange={e=>setCT(e.target.value)}/></>}
    </div>
    <div className="fsum"><div className="fbox"><div className="l">Entradas</div><div className="v ok">{fmt(totRec)}</div></div><div className="fbox"><div className="l">Saídas</div><div className="v err">{fmt(totPag)}</div></div><div className="fbox"><div className="l">Saldo</div><div className="v" style={{color:totRec-totPag>=0?'var(--ok)':'var(--err)'}}>{fmt(totRec-totPag)}</div></div></div>
    <div className="cd"><div className="cd-h"><h3>Movimentações ({entries.length})</h3></div>
    {entries.length===0?<div className="empty"><h4>Nenhuma movimentação</h4><p>Ajuste os filtros para ver resultados</p></div>:
    <div className="tb-wrap"><table className="tb"><thead><tr><th>Data</th><th>Descrição</th><th>Forma Pgto</th><th>Tipo</th><th>Valor</th></tr></thead><tbody>
    {entries.map((e,i)=><tr key={i}><td>{fmtD(e.date)}</td><td style={{color:'var(--t1)',fontWeight:500,maxWidth:250,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{e.desc}</td><td><span className="chip" style={{background:'rgba(100,116,139,.1)',color:'var(--t2)'}}>{e.method}</span></td><td><span className="chip" style={{background:e.type==='receber'?'rgba(16,185,129,.1)':'rgba(239,68,68,.1)',color:e.type==='receber'?'var(--ok)':'var(--err)'}}>{e.type==='receber'?'Entrada':'Saída'}</span></td><td style={{fontFamily:'var(--m)',fontWeight:700,color:e.type==='receber'?'var(--ok)':'var(--err)'}}>{e.type==='receber'?'+':'-'}{fmt(e.value)}</td></tr>)}
    </tbody></table></div>}</div>
  </>;
}

// Pipeline
function PgPipe({jobs,clients,users,services}){const SvcN=({id})=>services.find(s=>s.id===id)?.name||id;const cN=id=>clients.find(c=>c.id===id)?.name||'—';const uN=id=>users.find(u=>u.id===id)?.name;
  return <div className="pipe">{STATUS_FLOW.map(st=>{const col=jobs.filter(j=>j.status===st.id);return <div className="pcol" key={st.id}><div className="pcol-h"><span className="d" style={{background:st.color}}/><span className="t">{st.label}</span><span className="c">{col.length}</span></div>{col.map(j=><div className="pcard" key={j.id}><div className="pid">{j.id}</div><div className="pcl">{cN(j.clientId)}</div><div className="psvc"><SvcN id={j.service}/></div><div className="pfoo"><span className="pval">{fmt(j.value)}</span><span className="pdt">{fmtD(j.date)}</span></div>{j.assignedTo&&<div className="pa">→ {uN(j.assignedTo)}</div>}</div>)}</div>;})}</div>;
}

// Assign
function PgAssign({jobs,setJobs,clients,users,services,token}){const SvcN=({id})=>services.find(s=>s.id===id)?.name||id;const un=jobs.filter(j=>!j.assignedTo);const techs=users.filter(u=>u.active&&(u.role==='tecnico'||u.role==='admin'));const cN=id=>clients.find(c=>c.id===id)?.name||'—';
  const[sel,setSel]=useState({});const { addToast } = useToast();
  const assign=async jid=>{if(sel[jid]){try{await fetch(`/api/jobs/${jid}/assign`,{method:'PUT',headers:{'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify({assigned_to:Number(sel[jid])})});setJobs(p=>p.map(j=>j.id===jid?{...j,assignedTo:Number(sel[jid])}:j));setSel(p=>{const n={...p};delete n[jid];return n;});addToast('Trabalho alocado!','success');}catch(e){addToast('Erro API','error');}}};
  return <><div className="fsum" style={{gridTemplateColumns:'1fr 1fr'}}><div className="fbox"><div className="l">Sem Atribuição</div><div className="v err">{un.length}</div></div><div className="fbox"><div className="l">Funcionários</div><div className="v ok">{techs.length}</div></div></div>
  <div className="cd"><div className="cd-h"><h3>Direcionamento</h3></div>{un.length===0?<div className="empty"><h4>Todos atribuídos!</h4></div>:<div className="tb-wrap"><table className="tb"><thead><tr><th>ID</th><th>Cliente</th><th>Serviço</th><th>Origem</th><th>Atribuir a</th><th>Ação</th></tr></thead><tbody>
  {un.map(j=><tr key={j.id}><td style={{fontFamily:'var(--m)',fontSize:10}}>{j.id}</td><td style={{color:'var(--t1)',fontWeight:500}}>{cN(j.clientId)}</td><td><SvcN id={j.service}/></td><td><span className="chip" style={{background:j.origin==='client'?'rgba(139,92,246,.1)':'rgba(14,165,233,.1)',color:j.origin==='client'?'var(--pu)':'var(--ac)'}}>{j.origin==='client'?'Portal':'Admin'}</span></td><td><select className="fs" style={{padding:'4px 8px',fontSize:11}} value={sel[j.id]||''} onChange={e=>setSel(p=>({...p,[j.id]:e.target.value}))}><option value="">Selecionar...</option>{techs.map(u=><option key={u.id} value={u.id}>{u.name}</option>)}</select></td><td><button className="btn bp bsm" disabled={!sel[j.id]} onClick={()=>assign(j.id)}>{I.assign} Atribuir</button></td></tr>)}
  </tbody></table></div>}</div></>;
}

// My Work
function PgMyWork({jobs,clients,currentUser,services}){const SvcN=({id})=>services.find(s=>s.id===id)?.name||id;const my=jobs.filter(j=>j.assignedTo===currentUser.id);const cN=id=>clients.find(c=>c.id===id)?.name||'—';
  const act=my.filter(j=>!['entregue','finalizado'].includes(j.status));const done=my.filter(j=>['entregue','finalizado'].includes(j.status));
  return <><div className="stats" style={{gridTemplateColumns:'repeat(4,1fr)'}}><div className="st"><div className="sv">{my.length}</div><div className="sl">Total</div></div><div className="st"><div className="sv" style={{color:'var(--wn)'}}>{act.length}</div><div className="sl">Em Andamento</div></div><div className="st"><div className="sv" style={{color:'var(--ok)'}}>{done.length}</div><div className="sl">Concluídos</div></div><div className="st"><div className="sv" style={{color:'var(--ac)'}}>{fmt(my.reduce((s,j)=>s+j.value,0))}</div><div className="sl">Valor</div></div></div>
  {act.length>0&&<><h3 style={{fontSize:13,fontWeight:600,marginBottom:8,color:'var(--t2)'}}>Em Andamento</h3><div className="cd" style={{marginBottom:16}}><div className="tb-wrap"><table className="tb"><thead><tr><th>ID</th><th>Cliente</th><th>Serviço</th><th>Data</th><th>Status</th></tr></thead><tbody>{act.map(j=><tr key={j.id}><td style={{fontFamily:'var(--m)',fontSize:10}}>{j.id}</td><td style={{color:'var(--t1)',fontWeight:500}}>{cN(j.clientId)}</td><td><SvcN id={j.service}/></td><td>{fmtD(j.date)}</td><td><StB id={j.status}/></td></tr>)}</tbody></table></div></div></>}
  {done.length>0&&<><h3 style={{fontSize:13,fontWeight:600,marginBottom:8,color:'var(--t2)'}}>Concluídos</h3><div className="cd"><div className="tb-wrap"><table className="tb"><thead><tr><th>ID</th><th>Cliente</th><th>Serviço</th><th>Data</th><th>Status</th></tr></thead><tbody>{done.map(j=><tr key={j.id}><td style={{fontFamily:'var(--m)',fontSize:10}}>{j.id}</td><td style={{color:'var(--t1)',fontWeight:500}}>{cN(j.clientId)}</td><td><SvcN id={j.service}/></td><td>{fmtD(j.date)}</td><td><StB id={j.status}/></td></tr>)}</tbody></table></div></div></>}
  {my.length===0&&<div className="empty"><h4>Nenhum trabalho atribuído</h4></div>}</>;
}

// ═══ CLIENT PAGES ═══
function CliSvc({services}){return <><div style={{marginBottom:14}}><h3 style={{fontSize:14,fontWeight:600}}>Nossos Serviços</h3></div><div className="svc-grid">{services.map(s=><div className="svcc" key={s.id}><div className="si2" style={{background:s.color||'var(--ac)'}}>{I.svc}</div><div className="sn">{s.name}</div><div className="sp">a partir de {fmt(s.base_price)}</div></div>)}</div></>;}

// ═══ MAIN APP ═══
window.App = function App(){
  const [token, setToken] = useState(localStorage.getItem('aptoken') || null);
  const [curUser, setCurUser] = useState(JSON.parse(localStorage.getItem('apuser') || '{"name":"Admin"}'));
  const [mode, setMode] = useState(localStorage.getItem('apmode') || 'admin');
  const [loading, setLoading] = useState(false);
  const[pg,setPg]=useState('dashboard');const[cpg,setCpg]=useState('services');
  const[jobs,setJobs]=useState([]);const[users,setUsers]=useState([]);const[clients,setClients]=useState([]);const[bills,setBills]=useState([]);
  const[services,setServices]=useState([]);const[categories,setCategories]=useState([]);
  const[sideOpen,setSideOpen]=useState(false);

useEffect(() => {
    if (!token) return;
    const fetchAll = async () => {
      try {
        setLoading(true);
        const headers = { 'Authorization': `Bearer ${token}` };
        const [uR, cR, jR, bR, sR, catR] = await Promise.all([
          fetch('/api/users', { headers }),
          fetch('/api/clients', { headers }),
          fetch('/api/jobs', { headers }),
          fetch('/api/bills', { headers }),
          fetch('/api/services'),
          fetch('/api/service-categories', { headers }),
        ]);
        if(uR.ok) setUsers(await uR.json());
        if(cR.ok) setClients(await cR.json());
        if(jR.ok) {
           const jData = await jR.json();
           setJobs(jData.map(j => ({ id: j.id, clientId: j.client_id, service: j.service_id, value: Number(j.value), status: j.status, date: j.created_at?.split('T')[0] || j.created_at, paid: j.paid, paidDate: j.paid_date?.split('T')[0] || null, payMethod: j.pay_method, notes: j.notes, assignedTo: j.assigned_to, origin: j.origin })));
        }
        if(bR.ok) {
           const bData = await bR.json();
           setBills(bData.map(b => ({ id: b.id, description: b.description, supplier: b.supplier, category: b.category, value: Number(b.value), dueDate: b.due_date?.split('T')[0], paidDate: b.paid_date?.split('T')[0], payMethod: b.pay_method, status: b.status, recurring: b.recurring, notes: b.notes })));
        }
        if(sR.ok) setServices(await sR.json());
        if(catR.ok) setCategories(await catR.json());
      } catch(e) { console.error('API Error', e); } finally { setLoading(false); }
    };
    fetchAll();
  }, [token]);

const logout = () => { localStorage.removeItem('aptoken'); localStorage.removeItem('apuser'); localStorage.removeItem('apmode'); setToken(null); };
  const[finSub,setFinSub]=useState('overview');const[flowSub,setFlowSub]=useState('pipeline');const[cfgSub,setCfgSub]=useState('categories');
  const cliJobs=jobs.filter(j=>j.clientId===curUser?.id);
  const un=jobs.filter(j=>!j.assignedTo).length;const unp=jobs.filter(j=>!j.paid).length;
  const ovBills=bills.filter(b=>b.status!=='pago'&&b.dueDate<new Date().toISOString().split('T')[0]).length;

if (!token) return <ToastProvider><style>{css}</style><PgLogin onLog={(t,m,u)=>{setToken(t);setMode(m);setCurUser(u);}} /></ToastProvider>;
  return <ToastProvider><style>{css}</style><div className="app">
    <div className={`sb-overlay${sideOpen?' open':''}`} onClick={()=>setSideOpen(false)}/>
    <aside className={`sb${sideOpen?' open':''}`}>
      <div className="sb-brand"><div className="sb-logo">{I.stl}</div><div><h1>AP Core Planning</h1><div className="sub">Laboratório Digital</div></div></div>
      <div className="sb-sec"><div className="sb-lbl">{mode==='admin'?'Gestão':'Portal'}</div>
      {curMenu.map(item=><div key={item.id}><div className={`si ${curPg===item.id?'on':''}`} onClick={()=>menuClick(item)}>{item.icon}{item.label}{item.badge>0&&<span className={`sb-bg${item.bw?' w':''}`}>{item.badge}</span>}</div>
      {item.subs&&curPg===item.id&&item.subs.map(sub=>{const ss=item.id==='finance'?finSub:item.id==='flow'?flowSub:cfgSub;const setSS=item.id==='finance'?setFinSub:item.id==='flow'?setFlowSub:setCfgSub;return <div key={sub.id} className={`ssub ${ss===sub.id?'on':''}`} onClick={()=>{setSS(sub.id);setSideOpen(false);}}>{sub.label}</div>;})}</div>)}</div>
      <div className="sb-ft"><div className="sb-u"><div className="av">{(curUser?.name||'U').slice(0,2).toUpperCase()}</div><div style={{flex:1,minWidth:0}}><div style={{fontSize:12,fontWeight:500,color:'var(--t1)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{curUser?.name||'Usuário'}</div><div style={{fontSize:10,color:'var(--t3)'}}>{mode==='admin'?RM[curUser?.role]?.label||'Admin':curUser?.clinic||''}</div></div><div onClick={logout} style={{cursor:'pointer', marginLeft:'10px'}}>{I.logout}</div></div></div>
    </aside>
    <div className="mn"><div className="top"><div style={{display:'flex',alignItems:'center',gap:12}}><button className="hamburger" onClick={()=>setSideOpen(!sideOpen)}>{I.menu}</button><div className="top-t">{mode==='admin'?pageTitle:curMenu.find(m=>m.id===cpg)?.label}</div></div><div className="top-a"></div></div>
    <div className="pg">
      {mode==='admin'&&pg==='dashboard'&&<PgDash jobs={jobs} clients={clients} users={users} services={services}/>}
      {mode==='admin'&&pg==='mywork'&&<PgMyWork jobs={jobs} clients={clients} currentUser={curUser} services={services}/>}
      {mode==='admin'&&pg==='clients'&&<PgClients clients={clients} setClients={setClients} jobs={jobs} services={services} token={token}/>}
      {mode==='admin'&&pg==='jobs'&&<PgJobs jobs={jobs} setJobs={setJobs} clients={clients} users={users} services={services} token={token}/>}
      {mode==='admin'&&pg==='finance'&&finSub==='overview'&&<PgFinOv jobs={jobs} clients={clients}/>}
      {mode==='admin'&&pg==='finance'&&finSub==='payments'&&<PgFinPay jobs={jobs} setJobs={setJobs} clients={clients} services={services} token={token}/>}
      {mode==='admin'&&pg==='finance'&&finSub==='bills'&&<PgBills bills={bills} setBills={setBills} token={token}/>}
      {mode==='admin'&&pg==='finance'&&finSub==='cashflow'&&<PgCashFlow jobs={jobs} bills={bills} services={services}/>}
      {mode==='admin'&&pg==='flow'&&flowSub==='pipeline'&&<PgPipe jobs={jobs} clients={clients} users={users} services={services}/>}
      {mode==='admin'&&pg==='flow'&&flowSub==='assign'&&<PgAssign jobs={jobs} setJobs={setJobs} clients={clients} users={users} services={services} token={token}/>}
      {mode==='admin'&&pg==='config'&&cfgSub==='categories'&&<PgServiceCategories categories={categories} setCategories={setCategories} token={token}/>}
      {mode==='admin'&&pg==='config'&&cfgSub==='service_types'&&<PgServiceTypes services={services} setServices={setServices} categories={categories} token={token}/>}
      {mode==='admin'&&pg==='config'&&cfgSub==='users'&&<PgUsers users={users} setUsers={setUsers} token={token}/>}
      {mode==='client'&&cpg==='services'&&<CliSvc services={services}/>}
      {mode==='client'&&cpg==='new_order'&&<CliNew jobs={jobs} setJobs={setJobs} clientId={curUser?.id||1} services={services} token={token}/>}
      {mode==='client'&&cpg==='my_orders'&&<CliOrders jobs={cliJobs} services={services}/>}
      {mode==='client'&&cpg==='cli_finance'&&<CliFin jobs={cliJobs} services={services}/>}
    </div></div>
  </div></ToastProvider>;
}

{title}

⚠ Confirmar baixa de pagamento?

AP Core Planning

Recentes

Top Clientes

Categorias de Serviço ({categories.length})