Yourfinance — Uren & Facturatie (FULL stable v7)

Klantnaam

setClient(Object.assign({},client,{name:e.target.value}))} placeholder="Klant BV"/>

{client.id? setClient({id:"",name:""})}>Annuleren:null}

{clients.map(c=>(

{c.name}

setClient(c)}>BewerksetClients(clients.filter(x=>x.id!==c.id))}>Verwijder

))}

Projectnaam

setProj(Object.assign({},proj,{name:e.target.value}))} placeholder="Project X"/>

Uurtarief (€)

setProj(Object.assign({},proj,{rate:Number(e.target.value)}))}/>

Klant

Budget (uren)

setProj(Object.assign({},proj,{budgetHours:Number(e.target.value)}))} placeholder="0 = geen budget"/>

Omschrijving

setProj(Object.assign({},proj,{description:e.target.value}))}/></div>
      <div className="flex items-center justify-between"><label className="text-sm inline-flex items-center gap-2"><input type="checkbox" className="scale-110" checked={!!proj.active} onChange={e=>setProj(Object.assign({},proj,{active:e.target.checked}))}/> Actief</label><div className="flex gap-2"><Button onClick={saveProj}>Project opslaan</Button>{proj.id? <ButtonOutline onClick={()=>setProj({id:"",name:"",rate:95,active:true,budgetHours:0,clientId:"",description:""})}>Annuleren</ButtonOutline>:null}</div></div>

<div className="divide-y">
        {projects.map(p=>{
          const v=getQ(p.id); const usedHours=used(p.id); const left=(p.budgetHours||0)-usedHours; const over=(p.budgetHours||0)>0 && left<0;
          return (<div key={p.id} className="py-3">
            <div className="flex items-start justify-between">
              <div>
                <div className="font-medium">{p.name} <span className="ml-2 text-xs px-2 py-0.5 rounded-xl border">{p.active?'actief':'inactief'}</span></div>
                <div className="text-xs text-slate-500">Tarief: {currency(p.rate)}{p.budgetHours?(' • Budget: '+p.budgetHours+' uur'):''}{p.budgetHours?(' • Rest: '+left.toFixed(2)+' uur'):''}</div>
              </div>
              <div><ButtonOutline className="h-8 px-2" onClick={()=>setProj(p)}>Bewerk</ButtonOutline></div>
            </div>
            <div className="mt-3 grid grid-cols-3 gap-2">
              <Input type="date" value={v.date} onChange={e=>patchQ(p.id,{date:e.target.value})}/>
              <Input inputMode="decimal" value={v.hrs} onChange={e=>patchQ(p.id,{hrs:e.target.value})} placeholder="1.50"/>
              <Button className="h-9" onClick={()=>quickAdd(p.id)}>Opslaan</Button>
              <Textarea className="col-span-3" rows={2} value={v.desc} onChange={e=>patchQ(p.id,{desc:e.target.value})} placeholder="Omschrijving (optioneel)">

{p.budgetHours?

{over?'Over budget! ':''}Resterend na boeking: {left.toFixed(2)} uur

: null}

); })}