// HIFA OIL Loyalty — app shell, routing, state const { useState: useS } = React; const PAGE_TITLES = { settings: 'Postavke', transactions: 'Transakcije', news: 'Novosti' }; // ── extra simple subpages ───────────────────────────────────── function TransactionsScreen() { return (
Raspoloživo {HIFA.user.available} KM
{HIFA.transactions.map((t, i) => (
Račun #{t.id}
{t.station} · {t.date}
{t.type === 'earn' ? '+' : '−'}{fmtL(t.litres)} L
))}
); } function NewsScreen() { return (
{HIFA.news.map((n, i) => (
{n.tag} {n.date}
{n.title}
))}
); } // ── App ─────────────────────────────────────────────────────── function App() { const [theme, setTheme] = useS('dark'); const [authed, setAuthed] = useS(false); const [tab, setTab] = useS('home'); const [page, setPage] = useS(null); const [menu, setMenu] = useS(false); const [currency, setCurrency] = useS('KM'); const [notif, setNotif] = useS(true); React.useEffect(() => { document.documentElement.setAttribute('data-theme', theme); }, [theme]); const goTab = (t) => { setTab(t); setPage(null); setMenu(false); }; const goPage = (p) => { setPage(p); setMenu(false); }; let body, barVariant = 'home', barTitle = null; if (page) { barVariant = 'page'; barTitle = PAGE_TITLES[page]; body = page === 'settings' ? { setAuthed(false); setPage(null); }} /> : page === 'transactions' ? : ; } else { body = tab === 'home' ? goPage('news')} onTx={() => goPage('transactions')} /> : tab === 'nearby' ? : tab === 'card' ? : tab === 'catalog' ? : ; } return (
{!authed ? (
setAuthed(true)} />
) : ( setMenu(true)} onBack={() => setPage(null)} onCurrency={() => setCurrency(c => c === 'KM' ? 'EUR' : 'KM')} onSettings={() => goPage('settings')} onFav={() => goTab('profile')} />
{body}
{/* menu drawer */}
setMenu(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)', opacity: menu ? 1 : 0, transition: 'opacity .28s ease' }} />
setMenu(false)} onLogout={() => { setAuthed(false); setMenu(false); }} onNav={goPage === undefined ? goTab : (t => (['catalog','nearby'].includes(t) ? goTab(t) : goPage(t)))} />
)}
); } ReactDOM.createRoot(document.getElementById('root')).render();