{DIENST_KEYS.map(k => {
const aan = gekozen.has(k);
const d = DIENSTEN[k];
return (
{ e.stopPropagation(); onToggle(k, !aan); } : undefined}
style={{
padding: small ? '1.5px 7px' : '3px 10px', borderRadius: 999,
fontSize: small ? 10 : 11.5, fontWeight: 700, whiteSpace: 'nowrap',
cursor: onToggle ? 'pointer' : 'default', userSelect: 'none',
background: aan ? d.color + '1f' : 'transparent',
color: aan ? d.color : '#a9b5b1',
border: `1.5px solid ${aan ? d.color + '55' : '#dfe5e2'}`,
opacity: aan || onToggle ? 1 : .55,
}}>
{aan ? '✓ ' : ''}{d.label}
);
})}
);
}
/** Eén mijlpaalvakje. nvt = dienst hoort niet bij dit dossier → grijs streepje. */
function MijlpaalCel({ aan, titel, nvt, onClick, bezig }) {
if (!aan && nvt) return ·;
if (!onClick) {
return aan
? ✓
: —;
}
return (
);
}
/** Eén factuurvakje. Toestand uit faseToestand(); ':glob' = EPB zonder fase.
Met onClick wordt het vakje bewerkbaar vanuit het overzicht zelf. */
function FactuurCel({ toestand, nvt, onClick, bezig }) {
const map = {
betaald: { t: '✓', c: '#1e8a6e', titel: 'Gefactureerd en betaald' },
verzonden: { t: '✓', c: '#d69e2e', titel: 'Factuur verzonden — nog niet betaald' },
vervallen: { t: '!', c: C.danger, titel: 'Factuur vervallen' },
aangemaakt: { t: '·', c: C.textLight, titel: 'Factuur aangemaakt, nog niet verzonden' },
};
const globaal = !!toestand && toestand.endsWith(':glob');
const kern = globaal ? toestand.slice(0, -5) : toestand;
const m = kern ? (map[kern] || map.aangemaakt) : null;
const inhoud = m ? m.t : (nvt ? '·' : '—');
const kleur = m ? m.c : (nvt ? '#e6eae8' : '#d3dcd8');
const titel = m
? (globaal ? m.titel + ' — via een globale EPB-factuur (geen fase vermeld)' : m.titel) +
(onClick ? '\nKlik om aan te passen.' : '')
: (nvt ? 'Deze dienst hoort niet bij dit dossier'
: 'Nog niet gefactureerd' + (onClick ? ' — klik om een factuur toe te voegen' : ''));
const stijl = { color: kleur, fontWeight: 800, fontSize: 14,
opacity: globaal ? .55 : 1,
borderBottom: globaal ? `1.5px dotted ${kleur}` : 'none' };
if (!onClick) return {inhoud};
return (
);
}
function Card({ title, subtitle, action, children, style = {}, bodyStyle = {} }) {
return (
{(title || action) && (
{action}
)}
);
}
const inputBase = {
padding: '8px 11px', border: `1.5px solid ${C.border}`, borderRadius: 8,
background: '#fbfcfb', fontSize: 13.5, fontFamily: 'inherit', color: C.text,
outline: 'none', width: '100%', boxSizing: 'border-box',
};
function Input(props) { return ; }
function Select({ children, ...props }) {
return ;
}
function Field({ label, children, style = {} }) {
return (
);
}
function Spinner({ label = 'Laden…' }) {
return (
{title}
{subtitle && {subtitle}
}
{children}
{label}
);
}
function EmptyState({ icon = 'folder', title, hint }) {
return (
{title}
{hint && {hint}
}
{/* brand — het échte Enerveco-logo (lichte variant voor donkere achtergrond) */}
{(!collapsed || isMobile) && (
{/* nav */}
{/* footer */}
);
return (
{(!collapsed || isMobile) && (
Projectbeheer
)}
{(!collapsed || isMobile) && currentUser && (
)}
{!isMobile && (
)}
{(currentUser.name || currentUser.username || '?').slice(0, 1).toUpperCase()}
{currentUser.name || currentUser.username}
{currentUser.role === 'admin' ? 'Beheerder' : 'Gebruiker'}
{showSidebar && sidebar}
{isMobile && drawerOpen && (
{actions &&
);
}
/* ─── Login screen ──────────────────────────────────────────────────────── */
function LoginScreen({ onLogin }) {
const [user, setUser] = useState('');
const [pass, setPass] = useState('');
const [showPass, setShowPass] = useState(false);
const [err, setErr] = useState('');
const [loading, setLoading] = useState(false);
const submit = async (e) => {
e.preventDefault(); setLoading(true); setErr('');
const r = await api.post('/api/login', { username: user, password: pass });
setLoading(false);
if (r && r.token) onLogin(r.user);
else setErr((r && r.error) || 'Inloggen mislukt');
};
return (
);
}
/* ─── Export ────────────────────────────────────────────────────────────── */
window.EUI = {
C, STATUS_META, STATUS_ORDER, normStatus, statusLabel, statusColor,
INVOICE_STATUS_COLORS, URGENCY_META,
DIENSTEN, DIENST_KEYS, parseDiensten, formatDiensten, heeftDienst,
FACTUUR_FASEN, FASE_KEYS, factuurFasen, faseToestand, nietToegewezenFacturen,
MIJLPAAL_VOLGORDE, MIJLPAAL_KOLOMMEN, berekenMijlpalen,
DienstChips, MijlpaalCel, FactuurCel,
ontleedAdres, vergelijkAdres, zoekDossier,
api, fmtEuro, fmtDate, fmtDateShort, relTime,
useViewport, MOBILE_BP, TABLET_BP,
Icon, Btn, Badge, StatusBadge, Card, Input, Select, Field, Spinner, EmptyState,
NAV_ITEMS, goPage, Layout, PageHeader, LoginScreen,
};
})();
setDrawerOpen(false)}
style={{ position: 'fixed', inset: 0, background: 'rgba(26,49,23,.5)', zIndex: 2400 }} />
)}
);
}
function PageHeader({ title, subtitle, actions }) {
return (
{/* topbar — weggelaten op desktop-fullBleed zonder extra inhoud */}
{(isMobile || topExtra) && (
{isMobile && (
)}
{topExtra}
)}
{/* content */}
{fullBleed ? children : (
{children}
)}
{title}
{subtitle &&{subtitle}
}
{actions}
}