upd(‘name’,e.target.value)} placeholder=“pl. Főoldal design”/> upd(‘deadline’,e.target.value)}/>

upd(‘desc’,e.target.value)} placeholder=“Részletek…”/></FG>  
</div>  
</Modal>;  
}  
  
function WorkModal(){  
const d=modal.data;  
return <Modal title={modal.editId?‘Bejegyzés szerkesztése’:‘Munkabejegyzés’} onClose={()=>setModal(null)} onSave={saveModal}>  
<div style={{display:‘grid’,gridTemplateColumns:‘1fr 1fr’,gap:14}}>  
<FG label="Dátum *"><input style={inp} type=“date” value={d.date} onChange={e=>upd(‘date’,e.target.value)}/></FG>  
<FG label="Csapattag *">  
<select style={inp} value={d.member} onChange={e=>upd(‘member’,e.target.value)}>  
<option value="">Válassz…</option>  
{members.map(m=><option key={m.id} value={m.id}>{m.name}</option>)}  
</select>  
</FG>  
<FG label="Projekt">  
<select style={inp} value={d.project} onChange={e=>upd(‘project’,e.target.value)}>  
<option value="">Válassz…</option>  
{projects.map(p=><option key={p.id} value={p.id}>{p.name}</option>)}  
</select>  
</FG>  
<FG label="Feladat">  
<select style={inp} value={d.task} onChange={e=>upd(‘task’,e.target.value)}>  
<option value="">Válassz…</option>  
{tasks.map(t=><option key={t.id} value={t.id}>{t.name}</option>)}  
</select>  
</FG>  
<FG label="Ledolgozott óra *"><input style={inp} type=“number” min=“0.5” max=“24” step=“0.5” value={d.hours} onChange={e=>upd(‘hours’,e.target.value)} placeholder=“pl. 3.5”/></FG>  
<FG label="Leírás" full><textarea style={{…inp,minHeight:68,resize:‘vertical’}} value={d.desc} onChange={e=>upd(‘desc’,e.target.value)} placeholder=“Mit csináltál?”/></FG>  
</div>  
</Modal>;  
}  
  
// — RENDER TABS —  
function Dashboard(){  
return <div>  
<div style={s.dashGrid}>  
{[  
{lbl:‘Aktív feladatok’,val:tasks.filter(t=>t.status===‘doing’).length,sub:‘folyamatban’,col:’#e8c84a’},  
{lbl:‘Elvégzett feladatok’,val:tasks.filter(t=>t.status===‘done’).length,sub:‘lezárt’,col:’#4ae89a’},  
{lbl:‘Aktív projektek’,val:projects.filter(p=>p.status!==‘done’).length,sub:‘futó’,col:’#4a9ee8’},  
{lbl:‘Blokkolt feladatok’,val:tasks.filter(t=>t.status===‘blocked’).length,sub:‘blokkolt’,col:’#e84a7a’},  
].map(c=><div key={c.lbl} style={s.dashCard(c.col)}>  
<div style={s.cardLbl}>{c.lbl}</div>  
<div style={s.cardVal(c.col)}>{c.val}</div>  
<div style={s.cardSub}>{c.sub}</div>  
</div>)}  
</div>  
<div style={{background:’#13161e’,border:‘1px solid #252a38’,borderRadius:6,overflow:‘hidden’}}>  
<div style={{padding:‘14px 18px’,borderBottom:‘1px solid #252a38’,fontFamily:‘sans-serif’,fontSize:13,fontWeight:700,color:’#6b7394’}}>Csapattagok teljesítménye</div>  
{members.length===0  
? <div style={s.empty}><div style={{fontSize:32,marginBottom:8,opacity:.3}}>👥</div>Adj hozzá csapattagokat</div>  
: members.map(m=>{  
const h=memberHours(m.id), tc=memberTaskCount(m.id), pct=Math.round(h/maxH*100), col=getColor(m.name);  
return <div key={m.id} style={{display:‘flex’,alignItems:‘center’,padding:‘12px 18px’,borderBottom:‘1px solid #252a38’,gap:12}}>  
<Avatar name={m.name}/>  
<div style={{flex:1}}>  
<div style={{fontWeight:500,fontSize:13}}>{m.name}</div>  
<div style={{fontSize:10,color:’#6b7394’,marginTop:2}}>{m.role}</div>  
</div>  
<div style={{flex:2,padding:‘0 12px’}}>  
<div style={{height:3,background:’#252a38’,borderRadius:2,overflow:‘hidden’}}>  
<div style={{height:‘100%’,width:`${pct}%`,background:col,borderRadius:2,transition:‘width .4s’}}/>  
</div>  
</div>  
<div style={{textAlign:‘right’}}>  
<div style={{fontFamily:‘sans-serif’,fontSize:15,fontWeight:700,color:’#e8c84a’}}>{h} h</div>  
<div style={{fontSize:10,color:’#6b7394’}}>{tc} feladat</div>  
</div>  
</div>;  
})  
}  
</div>  
</div>;  
}  
  
function Members(){  
const q=search.members.toLowerCase();  
const rows=members.filter(m=>m.name.toLowerCase().includes(q)||m.role.toLowerCase().includes(q));  
return <div>  
<div style={s.toolbar}>  
<button style={primaryBtn} onClick={()=>openModal(‘member’)}>+ Új csapattag</button>  
<input style={s.searchBox} placeholder=“Keresés…” value={search.members} onChange={e=>setSearch(x=>({…x,members:e.target.value}))}/>  
</div>  
<div style={s.tblWrap}>  
<table style={{width:‘100%’,borderCollapse:‘collapse’,fontSize:12}}>  
<thead><tr>{[‘Név’,‘Szerepkör’,‘E-mail’,‘Telefon’,‘Státusz’,‘Feladatok’,‘Össz. óra’,’’].map(h=><th key={h} style={s.th}>{h}</th>)}</tr></thead>  
<tbody>  
{rows.length===0  
? <tr><td colSpan={8}><div style={s.empty}><div style={{fontSize:32,marginBottom:8,opacity:.3}}>👥</div>Még nincsenek csapattagok</div></td></tr>  
: rows.map(m=>{  
const h=memberHours(m.id), pct=Math.round(h/maxH*100);  
return <tr key={m.id} style={{borderBottom:‘1px solid #252a38’}}>  
<td style={s.td}><div style={{display:‘flex’,alignItems:‘center’,gap:8}}><Avatar name={m.name}/>{m.name}</div></td>  
<td style={s.td}>{m.role}</td>  
<td style={s.td}>{m.email||’—’}</td>  
<td style={s.td}>{m.phone||’—’}</td>  
<td style={s.td}><span style={{…{display:‘inline-block’,padding:‘3px 10px’,borderRadius:2,fontSize:10,letterSpacing:1,textTransform:‘uppercase’,fontWeight:500},…(m.status===‘active’?{color:’#4ae89a’,background:’#4ae89a15’,border:‘1px solid #4ae89a’}:{color:’#6b7394’,background:’#6b739420’,border:‘1px solid #6b7394’})}}>{m.status===‘active’?‘Aktív’:‘Inaktív’}</span></td>  
<td style={s.td}>{memberTaskCount(m.id)} db</td>  
<td style={s.td}><div style={{display:‘flex’,alignItems:‘center’,gap:8}}><div style={{width:60,height:4,background:’#252a38’,borderRadius:2,overflow:‘hidden’}}><div style={{height:‘100%’,width:`${pct}%`,background:’#e8c84a’,borderRadius:2}}/></div><span>{h} h</span></div></td>  
<td style={s.td}><div style={{display:‘flex’,gap:6}}>  
<button style={iconBtn()} onClick={()=>openModal(‘member’,m.id)}>✏️</button>  
<button style={iconBtn(true)} onClick={()=>del(‘member’,m.id)}>🗑</button>  
</div></td>  
</tr>;  
})  
}  
</tbody>  
</table>  
</div>  
</div>;  
}  
  
function Projects(){  
const q=search.projects.toLowerCase();  
const rows=projects.filter(p=>p.name.toLowerCase().includes(q)||(p.client||’’).toLowerCase().includes(q));  
return <div>  
<div style={s.toolbar}>  
<button style={primaryBtn} onClick={()=>openModal(‘project’)}>+ Új projekt</button>  
<input style={s.searchBox} placeholder=“Keresés…” value={search.projects} onChange={e=>setSearch(x=>({…x,projects:e.target.value}))}/>  
</div>  
<div style={s.tblWrap}>  
<table style={{width:‘100%’,borderCollapse:‘collapse’,fontSize:12}}>  
<thead><tr>{[‘Projekt neve’,‘Ügyfél’,‘Felelős’,‘Határidő’,‘Státusz’,‘Feladatok’,‘Össz. óra’,’’].map(h=><th key={h} style={s.th}>{h}</th>)}</tr></thead>  
<tbody>  
{rows.length===0  
? <tr><td colSpan={8}><div style={s.empty}><div style={{fontSize:32,marginBottom:8,opacity:.3}}>📁</div>Még nincsenek projektek</div></td></tr>  
: rows.map(p=><tr key={p.id} style={{borderBottom:‘1px solid #252a38’}}>  
<td style={s.td}><strong>{p.name}</strong></td>  
<td style={s.td}>{p.client||’—’}</td>  
<td style={s.td}>{p.owner?<div style={{display:‘flex’,alignItems:‘center’,gap:8}}><Avatar name={memberName(p.owner)} size={22}/>{memberName(p.owner)}</div>:’—’}</td>  
<td style={s.td}>{p.deadline||’—’}</td>  
<td style={s.td}><Badge type="status" val={p.status}/></td>  
<td style={s.td}>{projectTaskCount(p.id)} db</td>  
<td style={s.td}>{projectHours(p.id)} h</td>  
<td style={s.td}><div style={{display:‘flex’,gap:6}}>  
<button style={iconBtn()} onClick={()=>openModal(‘project’,p.id)}>✏️</button>  
<button style={iconBtn(true)} onClick={()=>del(‘project’,p.id)}>🗑</button>  
</div></td>  
</tr>)  
}  
</tbody>  
</table>  
</div>  
</div>;  
}  
  
function Tasks(){  
const q=search.tasks.toLowerCase();  
let rows=tasks.filter(t=>t.name.toLowerCase().includes(q));  
if(taskFilter!==‘all’) rows=rows.filter(t=>t.status===taskFilter);  
return <div>  
<div style={s.toolbar}>  
<button style={primaryBtn} onClick={()=>openModal(‘task’)}>+ Új feladat</button>  
<input style={s.searchBox} placeholder=“Keresés…” value={search.tasks} onChange={e=>setSearch(x=>({…x,tasks:e.target.value}))}/>  
</div>  
<div style={s.filterRow}>  
{[[‘all’,‘Mind’],[‘todo’,‘Teendő’],[‘doing’,‘Folyamatban’],[‘done’,‘Kész’],[‘blocked’,‘Blokkolt’]].map(([v,l])=>  
<button key={v} style={s.chip(taskFilter===v)} onClick={()=>setTaskFilter(v)}>{l}</button>  
)}  
</div>  
<div style={s.tblWrap}>  
<table style={{width:‘100%’,borderCollapse:‘collapse’,fontSize:12}}>  
<thead><tr>{[‘Feladat neve’,‘Projekt’,‘Felelős’,‘Prioritás’,‘Határidő’,‘Státusz’,‘Leírás’,’’].map(h=><th key={h} style={s.th}>{h}</th>)}</tr></thead>  
<tbody>  
{rows.length===0  
? <tr><td colSpan={8}><div style={s.empty}><div style={{fontSize:32,marginBottom:8,opacity:.3}}>✅</div>Nincsenek feladatok</div></td></tr>  
: rows.map(t=><tr key={t.id} style={{borderBottom:‘1px solid #252a38’}}>  
<td style={s.td}><strong>{t.name}</strong></td>  
<td style={s.td}>{t.project?projectName(t.project):’—’}</td>  
<td style={s.td}>{t.owner?<div style={{display:‘flex’,alignItems:‘center’,gap:8}}><Avatar name={memberName(t.owner)} size={22}/>{memberName(t.owner)}</div>:’—’}</td>  
<td style={s.td}><Badge type=“prio” val={t.priority||‘med’}/></td>  
<td style={s.td}>{t.deadline||’—’}</td>  
<td style={s.td}><Badge type="status" val={t.status}/></td>  
<td style={{…s.td,maxWidth:160,overflow:‘hidden’,textOverflow:‘ellipsis’,whiteSpace:‘nowrap’,color:’#6b7394’}}>{t.desc||’—’}</td>  
<td style={s.td}><div style={{display:‘flex’,gap:6}}>  
<button style={iconBtn()} onClick={()=>openModal(‘task’,t.id)}>✏️</button>  
<button style={iconBtn(true)} onClick={()=>del(‘task’,t.id)}>🗑</button>  
</div></td>  
</tr>)  
}  
</tbody>  
</table>  
</div>  
</div>;  
}  
  
function WorkLog(){  
const q=search.work.toLowerCase();  
const rows=[…work].filter(w=>memberName(w.member).toLowerCase().includes(q)||(w.desc||’’).toLowerCase().includes(q)).sort((a,b)=>b.date.localeCompare(a.date));  
return <div>  
<div style={s.toolbar}>  
<button style={primaryBtn} onClick={()=>openModal(‘work’)}>+ Munkabejegyzés</button>  
<input style={s.searchBox} placeholder=“Keresés…” value={search.work} onChange={e=>setSearch(x=>({…x,work:e.target.value}))}/>  
</div>  
<div style={s.tblWrap}>  
<table style={{width:‘100%’,borderCollapse:‘collapse’,fontSize:12}}>  
<thead><tr>{[‘Dátum’,‘Csapattag’,‘Projekt’,‘Feladat’,‘Óra’,‘Elvégzett munka’,’’].map(h=><th key={h} style={s.th}>{h}</th>)}</tr></thead>  
<tbody>  
{rows.length===0  
? <tr><td colSpan={7}><div style={s.empty}><div style={{fontSize:32,marginBottom:8,opacity:.3}}>⏱</div>Még nincs munkabejegyzés</div></td></tr>  
: rows.map(w=><tr key={w.id} style={{borderBottom:‘1px solid #252a38’}}>  
<td style={s.td}>{w.date}</td>  
<td style={s.td}><div style={{display:‘flex’,alignItems:‘center’,gap:8}}><Avatar name={memberName(w.member)} size={22}/>{memberName(w.member)}</div></td>  
<td style={s.td}>{w.project?projectName(w.project):’—’}</td>  
<td style={s.td}>{w.task?taskName(w.task):’—’}</td>  
<td style={s.td}><span style={{fontFamily:‘sans-serif’,fontSize:15,fontWeight:700,color:’#e8c84a’}}>{w.hours}</span> <span style={{color:’#6b7394’}}>h</span></td>  
<td style={{…s.td,maxWidth:220,color:’#6b7394’}}>{w.desc||’—’}</td>  
<td style={s.td}><div style={{display:‘flex’,gap:6}}>  
<button style={iconBtn()} onClick={()=>openModal(‘work’,w.id)}>✏️</button>  
<button style={iconBtn(true)} onClick={()=>del(‘work’,w.id)}>🗑</button>  
</div></td>  
</tr>)  
}  
</tbody>  
</table>  
</div>  
</div>;  
}  
  
return (  
<div style={s.wrap}>  
<div style={s.grid}/>  
<div style={s.inner}>  
<header style={s.header}>  
<div>  
<div style={s.h1}>Munkalap<span style={s.accent}>DB</span></div>  
<div style={s.sub}>Csapat · Feladatok · Teljesítmény</div>  
</div>  
<div style={{display:‘flex’,gap:12,flexWrap:‘wrap’}}>  
{[{val:members.length,lbl:‘Csapattag’},{val:tasks.length,lbl:‘Feladat’},{val:projects.length,lbl:‘Projekt’},{val:totalHours,lbl:‘Össz. óra’}].map(x=>  
<div key={x.lbl} style={s.pill}>  
<div style={s.pillVal}>{x.val}</div>  
<div style={s.pillLbl}>{x.lbl}</div>  
</div>  
)}  
</div>  
</header>  
  
```  
    <div style={s.tabs}>  
      {TABS.map(t=><button key={t.id} style={s.tabBtn(tab===t.id)} onClick={()=>setTab(t.id)}>{t.lbl}</button>)}  
    </div>  
  
    {tab==='dashboard' && <Dashboard/>}  
    {tab==='members' && <Members/>}  
    {tab==='projects' && <Projects/>}  
    {tab==='tasks' && <Tasks/>}  
    {tab==='worklog' && <WorkLog/>}  
  </div>  
  
  {modal?.type==='member' && <MemberModal/>}  
  {modal?.type==='project' && <ProjectModal/>}  
  {modal?.type==='task' && <TaskModal/>}  
  {modal?.type==='work' && <WorkModal/>}  
</div>  
```  
  
);  
}