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

{title}

{children}

); } // ── Login ───────────────────────────────────────────────────────────────────── function Login({ onLogin }) { const [u,setU]=useState(''); const [p,setP]=useState(''); const [err,setErr]=useState(''); const [busy,setBusy]=useState(false); const go = async () => { setErr(''); setBusy(true); try { const d=await api('/auth/login',{body:{username:u,password:p}}); localStorage.setItem('sk_token',d.token); onLogin(d.user); } catch(e) { setErr(e.message); } finally { setBusy(false); } }; return (

⚒

DICKENDOCK

{[['BENUTZERNAME',u,setU,'text'],['PASSWORT',p,setP,'password']].map(([l,v,s,t])=>(

{l} s(e.target.value)} onKeyDown={e=>e.key==='Enter'&&go()} style={{ ...S.inp, fontSize:16 }} autoCapitalize="none" />

))} {err &&

✕ {err}

}

); } // ── Update Modal ────────────────────────────────────────────────────────────── function UpdateModal({ data, onClose }) { return (

Installiert: {data.currentVersion} {' → '}{data.latestVersion}

{(data.releases||[]).map((r,i)=>(

{r.name||r.version} {r.publishedAt?new Date(r.publishedAt).toLocaleDateString('de-DE'):''}

{r.body}

))}

Update: docker compose up -d --build

); } // ── Desktop Sidebar ─────────────────────────────────────────────────────────── function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick }) { const allNav = [ { id:'dashboard', icon:'⬡', label:'Dashboard' }, ...TOOLS.map(t => ({ id:t.id, icon:t.icon, label:t.label })), ...(user?.role==='admin' ? [{ id:'admin', icon:'⚙', label:'Admin' }] : []), ]; return (

⚒

DICKENDOCK

v1.0.0

{allNav.map(item => ( ))}

{updateInfo?.hasUpdate && ( )}

👤

{user?.username}

); } // ── Mobile Bottom Navigation ────────────────────────────────────────────────── function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClick }) { const [menuOpen, setMenuOpen] = useState(false); const NAV_H = 56; const mainNav = [ { id:'dashboard', icon:'⬡', label:'Home' }, ...TOOLS.slice(0,3).map(t => ({ id:t.id, icon:t.icon, label:t.navLabel || t.label })), { id:'_menu', icon:'⋯', label:'Mehr' }, ]; const MI = ({icon,label,onClick,color='#fff'}) => ( ); return ( <> {menuOpen && (

setMenuOpen(false)}>

e.stopPropagation()}>

{updateInfo?.hasUpdate && {setMenuOpen(false);onUpdateClick();}} color="#ffe66d"/>} {TOOLS.slice(3).map(t=>{setActive(t.id);setMenuOpen(false);}}/>)} {user?.role==='admin' && {setActive('admin');setMenuOpen(false);}}/>}

{}} color="rgba(255,255,255,0.35)"/> {onLogout();setMenuOpen(false);}} color="#ff6b9d"/>

)}

{mainNav.map(item => { const isMenu = item.id === '_menu'; const isActive = isMenu ? menuOpen : active === item.id; return ( ); })}

); } // ── Dashboard Widgets ───────────────────────────────────────────────────────── function QuickLinks({ toast, mobile }) { const [links,setLinks]=useState([]); const [editMode,setEdit]=useState(false); const [showForm,setForm]=useState(false); const [form,setF]=useState({title:'',url:'',icon:'🔗'}); const [editId,setEditId]=useState(null); useEffect(()=>{ api('/dashboard/links').then(setLinks).catch(()=>{}); },[]); const save = async () => { if (!form.title.trim()||!form.url.trim()) { toast('Titel und URL erforderlich','error'); return; } let url = form.url.trim(); if (!/^https?:\/\//i.test(url)) url = 'https://'+url; try { if (editId) { const u=await api(`/dashboard/links/${editId}`,{method:'PUT',body:{...form,url}}); setLinks(p=>p.map(l=>l.id===editId?u:l)); } else { const n=await api('/dashboard/links',{body:{...form,url}}); setLinks(p=>[...p,n]); } toast(editId?'Aktualisiert':'Gespeichert'); setF({title:'',url:'',icon:'🔗'}); setForm(false); setEditId(null); } catch(e) { toast(e.message,'error'); } }; const del = async id => { try { await api(`/dashboard/links/${id}`,{method:'DELETE'}); setLinks(p=>p.filter(l=>l.id!==id)); toast('Gelöscht'); } catch(e) { toast(e.message,'error'); } }; return (

SCHNELLZUGRIFF

{editMode && }

{links.length===0&&!editMode&&

Tippe auf "✎" um Links hinzuzufügen.

} {links.map(l=>(

{editMode&&(

)} e.preventDefault():undefined} style={{ display:'flex',flexDirection:'column',alignItems:'center',gap:4,padding:'10px 12px', background:'rgba(255,255,255,0.04)',border:'1px solid rgba(255,255,255,0.08)', borderRadius:10,textDecoration:'none',minWidth:64,cursor:editMode?'default':'pointer' }}> {l.icon} {l.title}

))}

{showForm&&(

ICON

{ICONS.map(ic=>( ))}

TITEL setF(f=>({...f,title:e.target.value}))} style={{ ...S.inp,fontSize:16 }} placeholder="Mein Link" />

URL setF(f=>({...f,url:e.target.value}))} style={{ ...S.inp,fontSize:16 }} placeholder="https://example.com" inputMode="url" autoCapitalize="none" />

)}

); } function TodoList({ toast }) { const [items,setItems]=useState([]); const [text,setText]=useState(''); useEffect(()=>{api('/dashboard/todos').then(setItems).catch(()=>{});},[]); const add=async()=>{ if(!text.trim())return; try{const n=await api('/dashboard/todos',{body:{text:text.trim()}});setItems(p=>[...p,n]);setText('');} catch(e){toast(e.message,'error');} }; const toggle=async item=>{ try{const u=await api(`/dashboard/todos/${item.id}`,{method:'PUT',body:{done:!item.done}});setItems(p=>p.map(i=>i.id===item.id?u:i));} catch(e){toast(e.message,'error');} }; const del=async id=>{ try{await api(`/dashboard/todos/${id}`,{method:'DELETE'});setItems(p=>p.filter(i=>i.id!==id));} catch(e){toast(e.message,'error');} }; const open=items.filter(i=>!i.done), done=items.filter(i=>i.done); return(

TO-DO LISTE

setText(e.target.value)} onKeyDown={e=>e.key==='Enter'&&add()} style={{...S.inp,flex:1,fontSize:16}} placeholder="Neue Aufgabe…"/>

{open.map(item=>(

))} {done.length>0&&<>

ERLEDIGT

{done.map(item=>(

{item.text}

))} } {items.length===0&&

Noch keine Aufgaben.

}

); } function Notepad({ toast }) { const [content,setContent]=useState(''); const [saved,setSaved]=useState(true); const [saveTime,setSaveTime]=useState(null); const tmr=useRef(null); useEffect(()=>{api('/dashboard/note').then(d=>{setContent(d.content||'');setSaveTime(d.updated_at);}).catch(()=>{});},[]); const change=val=>{ setContent(val);setSaved(false);clearTimeout(tmr.current); tmr.current=setTimeout(async()=>{ try{const r=await api('/dashboard/note',{method:'PUT',body:{content:val}});setSaved(true);setSaveTime(r.updated_at);} catch(e){toast(e.message,'error');} },900); }; return(

NOTIZBLOCK

{saved?(saveTime?`✓ ${new Date(saveTime).toLocaleTimeString('de-DE',{hour:'2-digit',minute:'2-digit'})}`:'✓'):'…'}

change(e.target.value)}
        placeholder="Notizen, IPs, Zugangsdaten…"
        style={{...S.inp,width:'100%',minHeight:160,resize:'none',lineHeight:1.7,padding:'10px 12px',fontSize:13}}/>
    </div>
  );
}

function Dashboard({ toast, mobile }) {
  return(
    <div style={{padding: mobile ? '16px 14px 80px' : '36px 44px', maxWidth:1100}}>
      <div style={{marginBottom:18}}>
        <h1 style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:mobile?18:22,margin:0}}>Dashboard</h1>
        <p style={{color:'rgba(255,255,255,0.25)',fontFamily:'monospace',fontSize:10,marginTop:4}}>
          {new Date().toLocaleDateString('de-DE',{weekday:'long',year:'numeric',month:'long',day:'numeric'})}
        </p>
      </div>
      <QuickLinks toast={toast} mobile={mobile}/>
      <TodoList toast={toast}/>
      <Notepad toast={toast}/>
    </div>
  );
}

// ── Admin Panel ───────────────────────────────────────────────────────────────
function AdminPanel({ toast, mobile }) {
  const [pw,setPw]=useState({current:'',newPw:'',confirm:''}); const [busy,setBusy]=useState(false);
  const [file,setFile]=useState(null); const [restoring,setRestoring]=useState(false);
  const changePw=async()=>{
    if(pw.newPw!==pw.confirm){toast('Passwörter stimmen nicht überein','error');return;}
    if(pw.newPw.length<8){toast('Mindestens 8 Zeichen','error');return;}
    setBusy(true);
    try{await api('/auth/change-password',{body:{currentPassword:pw.current,newPassword:pw.newPw}});toast('Passwort geändert');setPw({current:'',newPw:'',confirm:''});}
    catch(e){toast(e.message,'error');}finally{setBusy(false);}
  };
  const backup=async()=>{
    try{const blob=await api('/admin/backup');const a=Object.assign(document.createElement('a'),{href:URL.createObjectURL(blob),download:`dickendock-backup-${new Date().toISOString().split('T')[0]}.db`});a.click();URL.revokeObjectURL(a.href);toast('Backup heruntergeladen');}
    catch(e){toast(e.message,'error');}
  };
  const restore=async()=>{
    if(!file){toast('Datei auswählen','error');return;}
    if(!window.confirm('⚠️ Aktuelle Datenbank wird ersetzt. Fortfahren?'))return;
    setRestoring(true);
    try{const f=new FormData();f.append('database',file);await api('/admin/restore',{method:'POST',body:f,isFile:true});toast('Wiederhergestellt');setFile(null);}
    catch(e){toast(e.message,'error');}finally{setRestoring(false);}
  };
  const Sec=({title,children})=><div style={{...S.card,marginBottom:12}}><div style={S.head}>{title}</div>{children}</div>;
  return(
    <div style={{padding: mobile ? '16px 14px 80px' : '36px 44px', maxWidth:640}}>
      <h1 style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:mobile?18:22,marginBottom:20}}>Admin-Bereich</h1>
      <Sec title="PASSWORT ÄNDERN">
        {[['Aktuelles Passwort','current'],['Neues Passwort','newPw'],['Bestätigen','confirm']].map(([l,k])=>(
          <div key={k} style={{marginBottom:12}}>
            <label style={{...S.head,display:'block',marginBottom:3}}>{l.toUpperCase()}</label>
            <input type="password" value={pw[k]} onChange={e=>setPw(p=>({...p,[k]:e.target.value}))} style={{...S.inp,fontSize:16}}/>
          </div>
        ))}
        <button onClick={changePw} disabled={busy} style={S.btn('#4ecdc4')}>{busy?'…':'✓ Passwort ändern'}</button>
      </Sec>
      <Sec title="DATENBANK-BACKUP">
        <p style={{color:'rgba(255,255,255,0.3)',fontSize:12,fontFamily:'monospace',marginBottom:12,lineHeight:1.6}}>Vollständige SQLite-Datenbank herunterladen.</p>
        <button onClick={backup} style={S.btn('#ffe66d')}>↓ Backup herunterladen</button>
      </Sec>
      <Sec title="SICHERUNG EINSPIELEN">
        <p style={{color:'rgba(255,255,255,0.3)',fontSize:12,fontFamily:'monospace',marginBottom:12,lineHeight:1.6}}>⚠️ Aktuelle Datenbank wird vollständig ersetzt.</p>
        <div style={{marginBottom:10}}>
          <label style={{...S.head,display:'block',marginBottom:3}}>BACKUP-DATEI (.db)</label>
          <input type="file" accept=".db" onChange={e=>setFile(e.target.files[0])} style={{...S.inp,padding:'6px 10px',cursor:'pointer'}}/>
        </div>
        <button onClick={restore} disabled={restoring||!file} style={{...S.btn('#ff6b9d'),opacity:restoring||!file?0.45:1}}>{restoring?'…':'↑ Einspielen'}</button>
        {file&&<div style={{color:'rgba(255,255,255,0.25)',fontSize:10,fontFamily:'monospace',marginTop:6}}>{file.name}</div>}
      </Sec>
    </div>
  );
}

// ── App Shell ─────────────────────────────────────────────────────────────────
export default function App() {
  const mobile = useIsMobile();
  const [user,setUser]=useState(null);
  const [active,setActive]=useState('dashboard');
  const [toastMsg,setToastMsg]=useState({msg:'',type:'success'});
  const [updateInfo,setUpdateInfo]=useState(null);
  const [showUpd,setShowUpd]=useState(false);

useEffect(()=>{
    const token=localStorage.getItem('sk_token');
    if(!token)return;
    try{const p=JSON.parse(atob(token.split('.')[1]));
      if(p.exp*1000>Date.now())setUser({id:p.id,username:p.username,role:p.role});
      else localStorage.removeItem('sk_token');
    }catch{localStorage.removeItem('sk_token');}
  },[]);

useEffect(()=>{
    if(!user)return;
    const check=()=>api('/system/update-check').then(setUpdateInfo).catch(()=>{});
    check();
    const t=setInterval(check,5*60*1000);
    return()=>clearInterval(t);
  },[user]);

const toast=useCallback((msg,type='success')=>{
    setToastMsg({msg,type});
    setTimeout(()=>setToastMsg({msg:'',type:'success'}),3500);
  },[]);

if(!user) return <Login onLogin={u=>setUser(u)}/>;

const activeTool = TOOLS.find(t=>t.id===active);

// Mobile padding bottom für fixed nav
  const mainStyle = { flex:1, overflowY:'auto', ...(mobile ? { paddingBottom:'calc(56px + env(safe-area-inset-bottom, 0px))' } : {}) };

return(
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
        *{margin:0;padding:0;box-sizing:border-box;}
        body{background:#111114;-webkit-tap-highlight-color:transparent;}
        input,textarea,select{-webkit-appearance:none;appearance:none;}
        input[type=number]::-webkit-inner-spin-button{opacity:0.25;}
        @keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
        ::-webkit-scrollbar{width:3px;}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px;}
        select option,textarea{background:#111114;}
      `}</style>
      <div style={{display:'flex',minHeight:'100vh',background:'#111114'}}>
        {!mobile && (
          <Sidebar active={active} setActive={setActive} user={user}
            onLogout={()=>{localStorage.removeItem('sk_token');setUser(null);}}
            updateInfo={updateInfo} onUpdateClick={()=>setShowUpd(true)}/>
        )}
        <main style={mainStyle}>
          {active==='dashboard' && <Dashboard toast={toast} mobile={mobile}/>}
          {active==='admin' && user?.role==='admin' && <AdminPanel toast={toast} mobile={mobile}/>}
          {activeTool && <activeTool.component toast={toast} mobile={mobile}/>}
        </main>
      </div>
      {mobile && (
        <BottomNav active={active} setActive={setActive} user={user}
          onLogout={()=>{localStorage.removeItem('sk_token');setUser(null);}}
          updateInfo={updateInfo} onUpdateClick={()=>setShowUpd(true)}/>
      )}
      <Toast msg={toastMsg.msg} type={toastMsg.type}/>
      {showUpd&&updateInfo&&<UpdateModal data={updateInfo} onClose={()=>setShowUpd(false)}/>}
    </>
  );
}