JWK Digital Branding

e.target===e.currentTarget&&onClose()}>

{rec&&rec.id?'Editar Recebimento':'Novo Recebimento'}

Cliente

set({description:v})} placeholder="Ex: Social Media Mai/26 - Andrade"/>

set({value:parseFloat(v)||''})} type="number" placeholder="0.00"/> set({due_date:v})} type="date"/>

Status

set({payment_method:v})} placeholder="Pix, Transferência..."/>

{form.status==='pago'&&set({paid_date:v})} type="date"/>}

set({notes:v})} placeholder="Observações internas..."/>
      </div>
      <div className="flex justify-end gap-2 p-5 border-t border-gray-100">
        <button onClick={onClose} className="px-4 py-2 rounded-lg border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50">Cancelar</button>
        <Btn onClick={()=>onSave(form)}>Salvar</Btn>
      </div>
    </div>
  </div>;
}

function Recebimentos(){
  const{token}=useAuth();
  const toast=useToast();
  const[recs,setRecs]=useState([]);
  const[clients,setClients]=useState([]);
  const[report,setReport]=useState(null);
  const[modal,setModal]=useState(null);
  const[payModal,setPayModal]=useState(null);
  const[recorrenteModal,setRecorrenteModal]=useState(false);
  const[boletoModal,setBoletoModal]=useState(null);
  const[filter,setFilter]=useState('todos');
  const[search,setSearch]=useState('');
  const[saving,setSaving]=useState(false);

const load=()=>Promise.all([
    api('GET','/api/receivables',null,token),
    api('GET','/api/clients',null,token),
    api('GET','/api/reports/receivables',null,token)
  ]).then(([r,c,rep])=>{setRecs(r);setClients(c);setReport(rep);}).catch(()=>{});

useEffect(()=>{load();},[token]);

const saveRecorrente=async(form)=>{
    const r=await api('POST','/api/receivables/recorrente',form,token);
    toast(r.created+' faturas geradas com sucesso!');
    load();
  };

const clientName=id=>{const c=clients.find(c=>c.id===id);return c?c.company||c.name:'—';};

const filtered=recs.filter(r=>{
    if(filter!=='todos'&&r.status!==filter)return false;
    if(search&&!r.description&&!clientName(r.client_id).toLowerCase().includes(search.toLowerCase()))return false;
    if(search&&r.description&&!r.description.toLowerCase().includes(search.toLowerCase())&&!clientName(r.client_id).toLowerCase().includes(search.toLowerCase()))return false;
    return true;
  }).sort((a,b)=>new Date(a.due_date||0)-new Date(b.due_date||0));

const del=async(id)=>{if(window.confirm('Excluir este recebimento?')){await api('DELETE','/api/receivables/'+id,null,token);load();}};

const daysOverdue=d=>{if(!d)return 0;return Math.ceil((new Date()-new Date(d))/(86400000));};

return <div className="space-y-5">
    {report&&<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
      <div className="card p-4">
        <p className="text-xs text-gray-500 uppercase tracking-wider font-semibold">Recebido (mês)</p>
        <p className="text-2xl font-black text-green-600 mt-1">{fmtMoney(report.total_pago_mes)}</p>
        <p className="text-xs text-gray-400 mt-1">{(report.count_pendente||0)+(report.count_vencido||0)} em aberto</p>
      </div>
      <div className="card p-4">
        <p className="text-xs text-gray-500 uppercase tracking-wider font-semibold">A Receber</p>
        <p className="text-2xl font-black text-yellow-600 mt-1">{fmtMoney(report.total_pendente)}</p>
        <p className="text-xs text-gray-400 mt-1">{report.count_pendente} faturas pendentes</p>
      </div>
      <div className={`card p-4 ${report.total_vencido>0?'border-l-4 border-red-400':''}`}>
        <p className="text-xs text-gray-500 uppercase tracking-wider font-semibold">Vencido</p>
        <p className={`text-2xl font-black mt-1 ${report.total_vencido>0?'text-red-600':'text-gray-400'}`}>{fmtMoney(report.total_vencido)}</p>
        <p className="text-xs text-gray-400 mt-1">{report.count_vencido} faturas em atraso</p>
      </div>
      <div className="card p-4">
        <p className="text-xs text-gray-500 uppercase tracking-wider font-semibold">Total Recebido</p>
        <p className="text-2xl font-black text-gray-800 mt-1">{fmtMoney(report.total_pago)}</p>
        <p className="text-xs text-gray-400 mt-1">histórico completo</p>
      </div>
    </div>}

{report&&report.by_client&&report.by_client.filter(c=>c.total_vencido>0).length>0&&<div className="card p-4 border-l-4 border-red-400">
      <p className="text-sm font-black text-red-700 mb-3 flex items-center gap-2"><Icon id="warning" size={14}/>Clientes em Atraso</p>
      <div className="space-y-2">
        {report.by_client.filter(c=>c.total_vencido>0).map(c=><div key={c.id} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
          <div><p className="font-semibold text-sm text-gray-900">{c.company||c.name}</p><p className="text-xs text-gray-400">{c.records} fatura(s)</p></div>
          <span className="text-red-600 font-black text-sm">{fmtMoney(c.total_vencido)}</span>
        </div>)}
      </div>
    </div>}

<div className="card overflow-hidden">
      <div className="p-4 border-b border-gray-100 flex flex-col sm:flex-row gap-3 sm:items-center">
        <div className="flex-1 relative">
          <Icon id="search" size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"/>
          <input className="w-full pl-9 pr-4 py-2 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-jwk" placeholder="Buscar..." value={search} onChange={e=>setSearch(e.target.value)}/>
        </div>
        <div className="flex gap-1 flex-wrap">
          {['todos','pendente','vencido','pago'].map(f=><button key={f} onClick={()=>setFilter(f)} className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${filter===f?'bg-black text-white':'bg-gray-100 text-gray-500 hover:bg-gray-200'}`}>{f==='todos'?'Todos':statusLabel[f]||f}</button>)}
        </div>
        <div className="flex gap-2">
          <button onClick={()=>setRecorrenteModal(true)} className="flex items-center gap-1.5 px-3 py-2 rounded-xl border border-gray-200 text-xs font-semibold text-gray-600 hover:bg-gray-50">
            <Icon id="clock" size={13}/>Recorrente
          </button>
          <Btn onClick={()=>setModal({})}>+ Nova</Btn>
        </div>
      </div>
      <div className="divide-y divide-gray-50">
        {filtered.length===0&&<p className="text-center text-gray-400 text-sm py-10">Nenhum registro encontrado.</p>}
        {filtered.map(r=>{
          const overdue=r.status==='vencido'?daysOverdue(r.due_date):0;
          return <div key={r.id} className="p-4 flex items-center gap-3 hover:bg-gray-50 transition-colors">
            <div className="flex-1 min-w-0">
              <p className="font-semibold text-sm text-gray-900 truncate">{r.description}</p>
              <div className="flex items-center gap-2 mt-0.5 flex-wrap">
                <span className="text-xs text-gray-400">{clientName(r.client_id)}</span>
                <span className="text-gray-300">·</span>
                <span className="text-xs text-gray-400">Venc: {fmtDate(r.due_date)}</span>
                {r.status==='pago'&&r.paid_date&&<><span className="text-gray-300">·</span><span className="text-xs text-green-600">Pago: {fmtDate(r.paid_date)} via {r.payment_method||'—'}</span></>}
                {overdue>0&&<span className="text-xs text-red-500 font-semibold">{overdue}d em atraso</span>}
                {r.boleto_nosso_numero&&<span className="text-xs text-orange-600 font-semibold">🧾 Boleto emitido</span>}
              </div>
            </div>
            <div className="flex items-center gap-3 flex-shrink-0">
              <span className="font-black text-base text-gray-900">{fmtMoney(r.value)}</span>
              <span className={`text-xs font-bold px-2 py-1 rounded-full ${statusColor[r.status]||'bg-gray-100 text-gray-500'}`}>{statusLabel[r.status]||r.status}</span>
              <div className="flex gap-1">
                {r.status!=='pago'&&r.status!=='cancelado'&&<button onClick={()=>setPayModal(r)} className="p-1.5 rounded-lg bg-green-50 hover:bg-green-100 text-green-600" title="Registrar pagamento"><Icon id="check" size={14}/></button>}
                {r.status!=='pago'&&r.status!=='cancelado'&&r.client_id&&<button onClick={()=>sendWaReminder(r)} className="p-1.5 rounded-lg bg-green-50 hover:bg-green-100 text-green-700" title="Lembrete WhatsApp"><Icon id="whatsapp" size={14}/></button>}
                {r.status!=='pago'&&r.status!=='cancelado'&&!r.boleto_nosso_numero&&<button onClick={()=>setBoletoModal(r)} className="p-1.5 rounded-lg bg-orange-50 hover:bg-orange-100 text-orange-600" title="Gerar Boleto Inter"><Icon id="money" size={14}/></button>}
                {r.boleto_nosso_numero&&<button onClick={()=>window.open('/api/boleto/'+r.boleto_nosso_numero+'/pdf','_blank')} className="p-1.5 rounded-lg bg-orange-50 hover:bg-orange-100 text-orange-700" title={'PDF Boleto: '+r.boleto_nosso_numero}><Icon id="document" size={14}/></button>}
                <button onClick={()=>setModal(r)} className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400"><Icon id="edit" size={14}/></button>
                <button onClick={()=>del(r.id)} className="p-1.5 rounded-lg hover:bg-red-50 text-gray-400 hover:text-red-500"><Icon id="trash" size={14}/></button>
              </div>
            </div>
          </div>;
        })}
      </div>
    </div>
    {modal&&<RecebModal rec={modal.id?modal:null} onClose={()=>setModal(null)} onSave={saveRec} clients={clients}/>}
    {payModal&&<PayModal rec={payModal} onClose={()=>setPayModal(null)} onPay={doPay}/>}
    {recorrenteModal&&<RecorrenteModal onClose={()=>setRecorrenteModal(false)} onSave={saveRecorrente} clients={clients}/>}
    {boletoModal&&<BoletoModal rec={boletoModal} clients={clients} onClose={()=>setBoletoModal(null)} onSuccess={()=>{setBoletoModal(null);load();toast('Boleto gerado com sucesso!');}} token={token}/>}
  </div>;
}

// ─── Login ────────────────────────────────────────────────────
function Login(){
  const{login,verifyMfa}=useAuth();
  const[email,setEmail]=useState('');
  const[pass,setPass]=useState('');
  const[err,setErr]=useState('');
  const[loading,setLoading]=useState(false);
  const[mfaStep,setMfaStep]=useState(false);
  const[mfaToken,setMfaToken]=useState('');
  const[mfaCode,setMfaCode]=useState('');
  const[phoneHint,setPhoneHint]=useState('');

return <div className="min-h-screen bg-black flex items-center justify-center p-4">
    <div className="w-full max-w-sm">
      <div className="text-center mb-8">
        <div className="w-16 h-16 rounded-2xl bg-jwk flex items-center justify-center mx-auto mb-4">
          <span className="text-black font-black text-2xl">JWK</span>
        </div>
        <h1 className="text-white font-black text-2xl">Orbe CRM</h1>
        <p className="text-gray-400 text-sm mt-1">Sistema de Gestão Comercial</p>
      </div>

{!mfaStep?(
        <form onSubmit={submit} className="space-y-4">
          <div>
            <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">E-mail</label>
            <input type="email" value={email} onChange={e=>setEmail(e.target.value)} className="mt-1 w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:border-jwk text-sm" placeholder="seu@email.com" required/>
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Senha</label>
            <input type="password" value={pass} onChange={e=>setPass(e.target.value)} className="mt-1 w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:border-jwk text-sm" placeholder="••••••••" required/>
          </div>
          {err&&<p className="text-red-400 text-sm text-center">{err}</p>}
          <button type="submit" disabled={loading} className="w-full py-3 rounded-xl bg-jwk text-black font-black text-sm hover:opacity-90 transition-opacity disabled:opacity-50">
            {loading?'Verificando...':'Entrar'}
          </button>
        </form>
      ):(
        <form onSubmit={submitMfa} className="space-y-4">
          <div className="text-center mb-2">
            <div className="text-4xl mb-3">🔐</div>
            <h2 className="text-white font-bold text-lg">Verificação em 2 etapas</h2>
            <p className="text-gray-400 text-sm mt-1">Código via WhatsApp para o número terminado em <span className="text-jwk font-bold">****{phoneHint}</span></p>
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Código de verificação</label>
            <input type="text" value={mfaCode} onChange={e=>setMfaCode(e.target.value.replace(/\D/g,'').slice(0,6))} className="mt-1 w-full px-4 py-4 rounded-xl bg-white/10 border border-white/20 text-white text-center text-3xl font-black tracking-widest placeholder-gray-600 focus:outline-none focus:border-jwk" placeholder="000000" maxLength={6} autoFocus required/>
          </div>
          {err&&<p className="text-red-400 text-sm text-center">{err}</p>}
          <button type="submit" disabled={loading||mfaCode.length!==6} className="w-full py-3 rounded-xl bg-jwk text-black font-black text-sm hover:opacity-90 transition-opacity disabled:opacity-50">
            {loading?'Verificando...':'Confirmar acesso'}
          </button>
          <button type="button" onClick={()=>{setMfaStep(false);setErr('');setMfaCode('');}} className="w-full py-2 text-gray-500 text-xs hover:text-gray-300 transition-colors">
            ← Voltar para o login
          </button>
        </form>
      )}
      <p className="text-center text-gray-600 text-xs mt-8">v7.6 · Orbe CRM</p>
    </div>
  </div>;
}

// ─── App ──────────────────────────────────────────────────────
const PAGE_TITLES_EXTRA={email_marketing:'E-mail Marketing'};

function AppGate(){
  const{user}=useAuth();
  return user?<AppInner/>:<Login/>;
}

function App(){
  return <ToastProvider><AuthProvider><AppGate/></AuthProvider></ToastProvider>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
</script>
</body>
</html>
      <main className={`flex-1 p-4 lg:p-6 ${view==='whatsapp'?'overflow-hidden':''}`}>
        {pages[view]}
      </main>
    </div>
  </div>;
}

function AppGate(){
  const{user}=useAuth();
  return user?<AppInner/>:<Login/>;
}

function App(){
  return <ToastProvider><AuthProvider><AppGate/></AuthProvider></ToastProvider>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
</script>
</body>
</html>