// AdminApp — panel administratora z prawdziwym API. const NAV = [ { id: 'dashboard', label: 'Dashboard', icon: 'dashboard' }, { id: 'drivers', label: 'Kierowcy', icon: 'drivers' }, { id: 'vehicles', label: 'Pojazdy', icon: 'vehicles' }, { id: 'reports', label: 'Zgłoszenia', icon: 'history' }, { id: 'fuelings', label: 'Tankowania', icon: 'fuel' }, { id: 'settlement', label: 'Rozliczenie', icon: 'settle' }, ]; // ── Główny komponent ──────────────────────────────────────────── function AdminApp({ width, height }) { const [user, setUser] = React.useState(null); const [checking, setChecking] = React.useState(true); // Sprawdź token przy starcie React.useEffect(() => { if (api.isLoggedIn()) { api.me() .then(u => { if (u.role === 'admin') setUser(u); else api.logout(); }) .catch(() => api.logout()) .finally(() => setChecking(false)); } else { setChecking(false); } }, []); if (checking) return (
Ładowanie…
); if (!user) return ( { setUser(u); setChecking(false); }} /> ); return ( { api.logout(); setUser(null); }} /> ); } // ── Dashboard (po zalogowaniu) ────────────────────────────────── function AdminDashboard({ width, height, user, onLogout }) { const [tab, setTab] = React.useState('dashboard'); const [drivers, setDrivers] = React.useState([]); const [vehicles, setVehicles] = React.useState([]); const [fuelings, setFuelings] = React.useState([]); const [loading, setLoading] = React.useState(true); const [errMsg, setErrMsg] = React.useState(null); const loadData = React.useCallback(async () => { setLoading(true); try { const [d, v, f] = await Promise.all([ api.getDrivers(), api.getVehicles(), api.getFuelings({ limit: 500 }), ]); setDrivers(d); setVehicles(v); setFuelings(f); setErrMsg(null); } catch (err) { if (err.status === 401) { api.logout(); window.location.reload(); return; } setErrMsg(err.message); } finally { setLoading(false); } }, []); React.useEffect(() => { loadData(); }, [loadData]); const ops = { addDriver: async (d) => { try { await api.createDriver(d); await loadData(); } catch(e) { alert(e.message); } }, updateDriver: async (id,d) => { try { await api.updateDriver(id,d); await loadData(); } catch(e) { alert(e.message); } }, deleteDriver: async (id) => { try { await api.deleteDriver(id); await loadData(); } catch(e) { alert(e.message); } }, addVehicle: async (v) => { try { await api.createVehicle(v); await loadData(); } catch(e) { alert(e.message); } }, updateVehicle: async (id,v) => { try { await api.updateVehicle(id,v); await loadData(); } catch(e) { alert(e.message); } }, deleteVehicle: async (id) => { try { await api.deleteVehicle(id); await loadData(); } catch(e) { alert(e.message); } }, addFueling: async (f) => { try { await api.createFueling(f); await loadData(); } catch(e) { alert(e.message); } }, updateFueling: async (id,f) => { try { await api.updateFueling(id,f); await loadData(); } catch(e) { alert(e.message); } }, deleteFueling: async (id) => { try { await api.deleteFueling(id); await loadData(); } catch(e) { alert(e.message); } }, }; return (
{loading && (
)} {errMsg && (
Błąd: {errMsg} —
)} {tab === 'dashboard' && } {tab === 'drivers' && } {tab === 'vehicles' && } {tab === 'reports' && } {tab === 'fuelings' && } {tab === 'settlement' && }
); } // ── Login ─────────────────────────────────────────────────────── function AdminLogin({ width, height, onLogin }) { const [login, setLogin] = React.useState(''); const [pwd, setPwd] = React.useState(''); const [showPwd, setShowPwd] = React.useState(false); const [loading, setLoading] = React.useState(false); const [errMsg, setErrMsg] = React.useState(''); const handleSubmit = async (e) => { e.preventDefault(); if (!login || !pwd) { setErrMsg('Wpisz login i hasło'); return; } setLoading(true); setErrMsg(''); try { const res = await api.login(login, pwd); if (res.user.role !== 'admin') { setErrMsg('To konto nie ma uprawnień administratora'); return; } api.setToken(res.token); onLogin(res.user); } catch (err) { setErrMsg(err.message); } finally { setLoading(false); } }; return (
{/* Left brand panel */}
TANKFOOD
Tankowania
pod kontrolą.
System ewidencji paliwa dla floty. Rozliczenia, kierowcy, pojazdy — wszystko w jednym miejscu.
PANEL ADMINISTRATORA
{/* decorative bg */}
{Array.from({ length: 40 }).map((_, i) => (
{Array.from({ length: 30 }).map((_, j) => ( {((i*7+j*13)%100).toString().padStart(2,'0')}.{((i*11+j*3)%100).toString().padStart(2,'0')}l ))}
))}
{/* Right form panel */}
Logowanie
Witaj z powrotem
Zaloguj się aby kontynuować
setLogin(e.target.value)} style={{ paddingLeft: 36 }} placeholder="login" autoComplete="username" />
setPwd(e.target.value)} style={{ paddingLeft: 36, paddingRight: 36 }} autoComplete="current-password" />
{errMsg && (
{errMsg}
)}
); } function BrandMark({ size = 32, color = '#f59e0b' }) { return ( ); } function AdminSidebar({ tab, onTab, user, onLogout }) { const initials = (user?.name || 'AD').split(' ').map(s => s[0]).slice(0,2).join('').toUpperCase(); return ( ); } function PageHeader({ title, subtitle, action }) { return (
{title}
{subtitle &&
{subtitle}
}
{action}
); } Object.assign(window, { AdminApp, AdminLogin, AdminDashboard, BrandMark, PageHeader });