⚠ {error}
}
+ {loading ? (
+ Laden…
+ ) : activePad === "/modules" && (user.is_staff || user.role === "beheerder") ? ( +
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+
+/* ---------------------------------- Shell --------------------------------- */
+function Shell({ user, onLogout }) {
+ const [modules, setModules] = useState([]);
+ const [active, setActive] = useState("/rooster");
+ const [error, setError] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [cogOpen, setCogOpen] = useState(false);
+ const [openMenu, setOpenMenu] = useState(null);
+ const [schoolnaam, setSchoolnaam] = useState("");
+
+ useEffect(() => {
+ getHuisstijl().then((h) => { pasThemaToe(h); setSchoolnaam(h && h.schoolnaam ? h.schoolnaam : ""); }).catch(() => {});
+ }, []);
+
+ async function load() {
+ setLoading(true);
+ try {
+ setModules(await getModules());
+ setError(null);
+ } catch (e) {
+ setError(e.message);
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ useEffect(() => { load(); }, []);
+
+ useEffect(() => {
+ const onNav = (event) => {
+ if (event.detail) setActive(normaliseerPad(event.detail));
+ };
+ window.addEventListener("roosterwijs:navigate", onNav);
+ return () => window.removeEventListener("roosterwijs:navigate", onNav);
+ }, []);
+
+ async function doLogout() {
+ try {
+ await logout();
+ } finally {
+ onLogout();
+ }
+ }
+
+ // Bouw de navigatie op uit de menu-items die ACTIEVE modules aanbieden.
+ // Verouderde groepspaden blijven werken, maar verschijnen als één tab.
+ const { tabs, instellingenTabs, alleItems } = useMemo(() => {
+ const perPad = new Map();
+ const voegToe = (raw) => {
+ const pad = normaliseerPad(raw.path);
+ const item = pad === "/groepsindeling"
+ ? { ...raw, ...GROEPSINDELING_ITEM, module: raw.module }
+ : { ...raw, path: pad };
+ const huidig = perPad.get(item.path);
+ if (!huidig || item.order < huidig.order) perPad.set(item.path, item);
+ };
+ for (const m of modules) {
+ if (!m.enabled) continue;
+ for (const it of m.menu_items) voegToe({ ...it, module: m.key });
+ }
+ const isBeheerder = user.is_staff || user.role === "beheerder";
+ if (isBeheerder) {
+ voegToe({ label: "Modulebeheer", path: "/modules", icon: "gear", order: 9999, group: "Instellingen" });
+ }
+ const items = [...perPad.values()].filter((item) => magMenuZien(user, item));
+ items.sort((a, b) => a.order - b.order);
+ return {
+ tabs: items.filter((i) => i.group !== "Instellingen"),
+ instellingenTabs: items.filter((i) => i.group === "Instellingen"),
+ alleItems: items,
+ };
+ }, [modules, user]);
+
+ const eerstePad = alleItems[0]?.path || "/rooster";
+ const activePad = normaliseerPad(
+ [...alleItems].some((item) => normaliseerPad(item.path) === normaliseerPad(active)) ? active : eerstePad
+ );
+ const Page = PAGES[activePad];
+
+ // Groepeer de hoofdtabs: groepen met meerdere items worden een dropdown,
+ // groepen met één item en losse items blijven directe tabs.
+ const navEntries = (() => {
+ const directe = [];
+ const groepMap = new Map();
+ for (const it of tabs) {
+ if (it.group) { if (!groepMap.has(it.group)) groepMap.set(it.group, []); groepMap.get(it.group).push(it); }
+ else directe.push(it);
+ }
+ const entries = directe.map((it) => ({ type: "tab", order: it.order, it }));
+ for (const [groep, items] of groepMap) {
+ if (items.length === 1) entries.push({ type: "tab", order: items[0].order, it: items[0] });
+ else entries.push({ type: "group", order: Math.min(...items.map((i) => i.order)), groep, items });
+ }
+ entries.sort((a, b) => a.order - b.order);
+ return entries;
+ })();
+
+ function TabKnop({ it, compact }) {
+ const pad = normaliseerPad(it.path);
+ return (
+
+ );
+ }
+
+ function NavDropdown({ groep, items }) {
+ const open = openMenu === groep;
+ const actief = items.some((i) => normaliseerPad(i.path) === activePad);
+ const icon = GROEP_ICON[groep] || items[0].icon;
+ return (
+ setOpenMenu(null)}>
+
+
+ );
+ }
+
+ // Instellingen-cog: staat in de bovenbalk (buiten de scrollende tabbalk,
+ // anders knipt overflow het uitklapmenu weg).
+ const cogMenu = instellingenTabs.length > 0 ? (
+
+ {items.map((it) => {
+ const pad = normaliseerPad(it.path);
+ return (
+
+ );
+ })}
+
+ setCogOpen(false)}>
+
+
+ ) : null;
+
+ return (
+
+ {instellingenTabs.map((it) => {
+ const pad = normaliseerPad(it.path);
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+ {error &&
+
+ );
+}
+
+function Placeholder({ path, menu }) {
+ const item = menu.find((m) => m.path === path);
+ return (
+
+
+
+
+
+
+ {user.username}
+
+ {cogMenu}
+
+ {item ? item.label : "Welkom"}
++ Dit scherm wordt in een volgende fase ingevuld. Fase 1 levert het + kerndomein: personen, groepen en subgroepen. +
+Modulebeheer
++ Schakel modules per school in of uit. De kern staat altijd aan. +
+ {msg &&⚠ {msg}
}
+
+ {modules.map((m) => (
+
+
+
+ ))}
+
+ toggle(m)}
+ />
+
+
+
+ {m.name}
+ {m.category} · v{m.version}
+ {m.description}
+
+ {m.core ? (
+ Kern · altijd aan
+ ) : (
+
+ {m.enabled ? "Ingeschakeld" : "Uitgeschakeld"}
+
+ )}
+ {m.depends_on.length > 0 && (
+ vereist: {m.depends_on.join(", ")}
+ )}
+
+ ⚠ {msg}
;
+}
+
+/* ----------------------- Generieke eenvoudige catalogus ------------------- */
+// Voor lijsten met alleen naam + omschrijving (Functies, Activiteiten, Locaties).
+function CatalogusPage({ titel, uitleg, resource, kleur = false, telKolom, metTheorievak = false, metIcoon = false, metPictogram = false }) {
+ const { items, error, loading, reload, setError } = useList(resource);
+ const leeg = {
+ naam: "", omschrijving: "",
+ ...(kleur ? { kleur: "#2563eb" } : {}),
+ ...(metTheorievak ? { theorievak: false } : {}),
+ ...(metIcoon ? { icoon: "" } : {}),
+ };
+ const [form, setForm] = useState(leeg);
+ const [editId, setEditId] = useState(null);
+ const kolommen = 3 + (telKolom ? 1 : 0) + (metTheorievak ? 1 : 0) + (metPictogram ? 1 : 0);
+
+ async function opslaan(e) {
+ e.preventDefault();
+ try {
+ if (editId) await updateResource(resource, editId, form);
+ else await createResource(resource, form);
+ setForm(leeg);
+ setEditId(null);
+ await reload();
+ } catch (err) {
+ setError(err.message);
+ }
+ }
+ async function verwijder(id) {
+ if (!confirm("Verwijderen?")) return;
+ try {
+ await deleteResource(resource, id);
+ await reload();
+ } catch (err) {
+ setError(err.message);
+ }
+ }
+ async function uploadPicto(id, file) {
+ try { await uploadBestand(resource, id, "pictogram", file); await reload(); }
+ catch (err) { setError(err.message); }
+ }
+ async function verwijderPicto(id) {
+ try { await updateResource(resource, id, { pictogram: null }); await reload(); }
+ catch (err) { setError(err.message); }
+ }
+ function bewerk(it) {
+ setEditId(it.id);
+ setForm({
+ naam: it.naam, omschrijving: it.omschrijving,
+ ...(kleur ? { kleur: it.kleur } : {}),
+ ...(metTheorievak ? { theorievak: it.theorievak } : {}),
+ ...(metIcoon ? { icoon: it.icoon || "" } : {}),
+ });
+ }
+
+ return (
+ {titel}
+ {uitleg &&{uitleg}
} +Laden…
+ ) : ( +| Naam | +Omschrijving | + {metTheorievak &&Theorievak | } + {metPictogram &&Pictogram | } + {telKolom &&{telKolom} | } ++ |
|---|---|---|---|---|---|
| + {kleur && } + {metIcoon && {it.icoon || vakIcoon(it.naam)} } + {it.naam} + | +{it.omschrijving || "—"} | + {metTheorievak &&{it.theorievak ? "✓" : "—"} | } + {metPictogram && ( +
+ {it.pictogram && |
+ )}
+ {telKolom && {it.aantal_personen ?? "—"} | } ++ + + | +
| Nog niets. |
Lokalen
+Lesruimtes die door lessen én interne stages gedeeld worden. Het systeem bewaakt dubbele boekingen per tijdslot.
+Laden…
: ( +| Naam | Capaciteit | Omschrijving | |
|---|---|---|---|
| {l.naam} | +{l.capaciteit ?? "—"} | +{l.omschrijving || "—"} | ++ + + | +
| Nog geen lokalen. | |||
Personen
+Personeel en leerlingen staan los van elkaar. Kies wat je wilt toevoegen.
+
+
+
+ {wizardAan && }
+
+
+ {importView ?
+ Toon:
+
+
+
+
+
+ {loading ? Laden…
: ( +| Naam | Rol | Details | |
|---|---|---|---|
| {p.volledige_naam} | +{p.rol_label} | +
+ {p.rol === "leerling" ? (
+ <>
+ {p.groep_naam ? 🗂️ {p.groep_naam} : null}
+ {p.geboortedatum ? 🎂 {p.geboortedatum} : null}
+ {!p.groep_naam && !p.geboortedatum ? "—" : null}
+
+ ) : (
+ <>
+ {p.stamgroep_naam ? 🗂️ {p.stamgroep_naam} : null}
+ {p.functies_namen.length ? 🪪 {p.functies_namen.map((x) => x.naam).join(", ")} : null}
+ {p.vakken_namen.length ? 📚 {p.vakken_namen.map((x) => x.naam).join(", ")} : null}
+ {!p.stamgroep_naam && !p.functies_namen.length && !p.vakken_namen.length ? "—" : null}
+
+ )}
+ |
+ + + + | +
| Geen personen. | |||
Tijdsloten
+Vaste tijden per schooldag. Laat de groep leeg voor de algemene tijden, of kies een groep voor afwijkende tijden.
+Laden…
: ( +| Dag | Tijd | Naam | Geldt voor | |
|---|---|---|---|---|
| {t.dag_label} | +{t.start_tijd?.slice(0, 5)}–{t.eind_tijd?.slice(0, 5)} | +{t.naam} | +{t.groep_naam || "algemeen"} | ++ + + | +
| Nog geen tijdsloten. | ||||
Schooljaar & kalender
+Schooljaren met studiedagen, vrije dagen en vakanties. Op die dagen vervallen de roosterblokken.
+Laden…
: ( +| Schooljaar | Periode | |
|---|---|---|
| {j.naam} | +{j.start_datum} t/m {j.eind_datum} | ++ + + | +
| Nog geen schooljaren. | ||
+
+
+
+ );
+}
+
+/* ------------------------------- Afwezigheid ------------------------------ */
+export function AfwezigheidPage() {
+ const { items, error, loading, reload, setError } = useList("afwezigheden");
+ const [personen, setPersonen] = useState([]);
+ const leeg = { persoon: "", start_datum: "", eind_datum: "", reden: "" };
+ const [form, setForm] = useState(leeg);
+
+ useEffect(() => { listResource("personen").then(setPersonen).catch(() => {}); }, []);
+
+ async function opslaan(e) {
+ e.preventDefault();
+ try {
+ await createResource("afwezigheden", form);
+ setForm(leeg);
+ await reload();
+ } catch (err) { setError(err.message); }
+ }
+ async function verwijder(id) {
+ if (!confirm("Deze afwezigheid verwijderen?")) return;
+ try { await deleteResource("afwezigheden", id); await reload(); } catch (err) { setError(err.message); }
+ }
+
+ return (
+ Kalender
+| Datum | Type | Omschrijving | |
|---|---|---|---|
| {d.datum} | +{d.type_label} | +{d.omschrijving || "—"} | ++ |
| Nog geen bijzondere dagen. | |||
Afwezigheid
+Leg vast wie wanneer afwezig is. In het rooster zie je dat terug bij de betrokken blokken.
+Laden…
: ( +| Persoon | Periode | Reden | |
|---|---|---|---|
| {a.persoon_naam} | +{a.start_datum} t/m {a.eind_datum} | +{a.reden || "—"} | ++ |
| Geen afwezigheden. | |||
+
+ );
+ }
+ function groepKaart(g) {
+ const orphan = !groepHeeftLeerplein(g.id);
+ const mws = groepMedewerkers(g.id);
+ const lls = groepLeerlingen(g.id);
+ return (
+
+ {s.naam}
+
+
+
+
+
+
+
+
+ {s.begeleiders_namen.map((b) => chip(medewerkerById(b.id) || { id: b.id, volledige_naam: b.naam, rol: "leerkracht" }, "medewerker", { kind: "subgroep", id: s.id }))}
+ {s.leden_namen.map((l) => chip(leerlingById(l.id) || { id: l.id, volledige_naam: l.naam }, "leerling", { kind: "subgroep", id: s.id }))}
+ {leeg && sleep hier personen heen}
+
+
+
+ );
+ }
+
+ const orphanGroepen = groepen.filter((g) => !groepHeeftLeerplein(g.id));
+
+ return (
+
+ {g.naam}
+
+
+
+
+
+
+
+ {orphan && (
+
+ {mws.map((m) => chip(m, "medewerker", { kind: "groep", id: g.id }))}
+ {lls.map((l) => chip(l, "leerling", { kind: "groep", id: g.id }))}
+ {mws.length + lls.length === 0 && sleep hier personen heen}
+
+
+
+
+ )}
+
+ {groepSubs(g.id).map((s) => subKaart(s))}
+ nieuweSubgroep(g, naam)} />
+
+ Groepsindeling
+Sleep personen naar een bovenliggende groep, groep of subgroep. leerling en personeel hebben elk een eigen kleur. Vink meerdere personen aan om ze in één keer te plaatsen; × haalt iemand weer weg.
+
+ Tonen:
+
+ {selectie.size > 0 && (
+
+ {[["allen", "Allen"], ["leerling", "Leerlingen"], ["personeel", "Personeel"]].map(([v, l]) => (
+
+ ))}
+
+
+ {selectie.size} geselecteerd
+
+
+
+
+ )}
+ {loading ? Laden…
: ( +
+
+
+ )}
+ {ghost &&
+
+
+
+ );
+ })}
+ {leerpleinen.length === 0 &&
+ {lp.naam}
+
+
+
+
+
+
+
+ Direct in deze bovenliggende groep
+
+ {mwIds.map((id) => chip(medewerkerById(id), "medewerker", { kind: "leerplein", id: lp.id }))}
+ {llIds.map((id) => chip(leerlingById(id), "leerling", { kind: "leerplein", id: lp.id }))}
+ {mwIds.length + llIds.length === 0 && sleep hier personen heen}
+
+
+ {lpGroepen(lp).map((g) => groepKaart(g))}
+ nieuweGroep(lp, naam)} />
+
+ Nog geen bovenliggende groepen. Maak er hierboven één aan.
}
+ {orphanGroepen.length > 0 && (
+
+
+ )}
+ Groepen zonder bovenliggende groep
+
+ {orphanGroepen.map((g) => groepKaart(g))}
+
+ {ghost.label}
}
+ Stage
+Interne en externe stages. Beide krijgen een begeleider; een interne stage gebruikt een lokaal (met dubbele-boekingcheck). Stel in per hele dag, dagdeel of los blok.
+Laden…
: ( +| Leerling | Type | Begeleider | Waar | Wanneer | |
|---|---|---|---|---|---|
| {s.leerling_naam} | +{s.type_label} | +{s.begeleider_naam} | +{s.type === "intern" ? (s.lokaal_naam || "—") : (s.organisatie || "—")} | +{wanneerTekst(s)} | ++ + + | +
| Nog geen stages. | |||||
Gebruikers
+Beheer inloggers en hun rol; koppel een login aan een persoon. Alleen beheerders kunnen dit scherm gebruiken.
+Tijdelijk wachtwoord:
}
+ {gegenereerd} — geef dit door aan de gebruiker; laat het daarna wijzigen.
+
+
+
+ {view === "import" ? Laden…
: ( +| Gebruiker | Rol | Persoon | Status | |
|---|---|---|---|---|
| {u.username}{(u.first_name || u.last_name) && {u.first_name} {u.last_name} } |
+ {u.rol_label || "—"}{u.is_staff && beheer} | +{u.persoon_naam || "—"} | +{u.is_active ? "actief" : "inactief"} | ++ + + | +
| Geen gebruikers. | ||||
Kies eerst een schooljaar.
; + if (error) returnLaden…
; + return ( +
+
+ );
+}
+
+/* ------------------------------ Datumhulpjes ------------------------------ */
+function pad2(n) { return String(n).padStart(2, "0"); }
+function fmtISO(d) { return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`; }
+function fmtDM(d) { return `${pad2(d.getDate())}-${pad2(d.getMonth() + 1)}`; }
+const MAANDEN = ["jan", "feb", "mrt", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec"];
+function isoWeeknr(d) {
+ const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+ const dag = (t.getUTCDay() + 6) % 7;
+ t.setUTCDate(t.getUTCDate() - dag + 3);
+ const eersteDo = new Date(Date.UTC(t.getUTCFullYear(), 0, 4));
+ return 1 + Math.round(((t - eersteDo) / 86400000 - 3 + ((eersteDo.getUTCDay() + 6) % 7)) / 7);
+}
+function weekTitel(maandag) {
+ const vrij = plusDagen(maandag, 4);
+ const reeks = maandag.getMonth() === vrij.getMonth()
+ ? `${maandag.getDate()}\u2013${vrij.getDate()} ${MAANDEN[vrij.getMonth()]}`
+ : `${maandag.getDate()} ${MAANDEN[maandag.getMonth()]} \u2013 ${vrij.getDate()} ${MAANDEN[vrij.getMonth()]}`;
+ return `Week ${isoWeeknr(maandag)} \u00b7 ${reeks}`;
+}
+function maandagVan(d) { const x = new Date(d); x.setHours(0, 0, 0, 0); const wd = (x.getDay() + 6) % 7; x.setDate(x.getDate() - wd); return x; }
+function plusDagen(d, n) { const x = new Date(d); x.setDate(x.getDate() + n); return x; }
+
+/* ------------------------- Rooster-scope (filter/print) ------------------- */
+// Welke leerlingen raakt een blok (via groep, subgroep of individueel)?
+export function leerlingenVanBlok(blok, ctx) {
+ if (blok.groep) return ctx.leerlingen.filter((l) => l.groep === blok.groep).map((l) => l.id);
+ if (blok.subgroep) {
+ const s = ctx.subgroepen.find((x) => x.id === blok.subgroep);
+ return s ? s.leden_namen.map((m) => m.id) : [];
+ }
+ if (blok.leerling) return [blok.leerling];
+ return [];
+}
+// Welke leerlingen vallen binnen een gekozen scope (klas/bovenliggende groep/leerling)?
+export function scopeLeerlingen(scope, ctx) {
+ if (scope.type === "leerling") return [scope.id];
+ if (scope.type === "klas") return ctx.leerlingen.filter((l) => l.groep === scope.id).map((l) => l.id);
+ if (scope.type === "leerplein") {
+ const p = ctx.leerpleinen.find((x) => x.id === scope.id);
+ if (!p) return [];
+ const ids = new Set(p.leerlingen || []);
+ (p.groepen || []).forEach((g) => ctx.leerlingen.filter((l) => l.groep === g).forEach((l) => ids.add(l.id)));
+ (p.subgroepen || []).forEach((sid) => {
+ const s = ctx.subgroepen.find((x) => x.id === sid);
+ if (s) s.leden_namen.forEach((m) => ids.add(m.id));
+ });
+ return [...ids];
+ }
+ return [];
+}
+// Valt een blok binnen de gekozen scope?
+export function blokInScope(blok, scope, ctx) {
+ if (scope.type === "alles" || !scope.id) return true;
+ if (scope.type === "personeel") return (blok.begeleiders || []).includes(scope.id);
+ const set = new Set(scopeLeerlingen(scope, ctx));
+ return leerlingenVanBlok(blok, ctx).some((id) => set.has(id));
+}
+
+// Bereken conflicten direct uit de geladen blokken (zelfde tijdslot): begeleider
+// dubbel, lokaal dubbel of een leerling dubbel ingeroosterd. Houdt rekening met
+// geldigheidsperiodes (blokken die elkaar niet in de tijd overlappen botsen niet).
+// Leesbare tekstkleur (zwart of wit) op een gegeven achtergrondkleur, op basis
+// van de waargenomen helderheid — zo blijft de tekst altijd genoeg contrast houden.
+export function tekstOpKleur(hex) {
+ if (!hex || typeof hex !== "string") return "";
+ const m = hex.replace("#", "").trim();
+ const v = m.length === 3 ? m.split("").map((c) => c + c).join("") : m;
+ if (v.length < 6) return "";
+ const r = parseInt(v.slice(0, 2), 16), g = parseInt(v.slice(2, 4), 16), b = parseInt(v.slice(4, 6), 16);
+ if ([r, g, b].some(Number.isNaN)) return "";
+ const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+ return lum > 0.6 ? "#16181d" : "#ffffff";
+}
+
+export function berekenRoosterConflicten(blokken, ctx, tijdsloten) {
+ const blokIds = new Set();
+ const teksten = new Map(); // tekst -> ernst (dedupe)
+ const slotLabel = (id) => {
+ const t = (tijdsloten || []).find((x) => x.id === id);
+ if (!t) return "";
+ const dag = (WEEKDAGEN.find((d) => d.value === t.dag) || {}).label || "";
+ return `${dag} ${(t.start_tijd || "").slice(0, 5)}`.trim();
+ };
+ const leerlingNaam = (id) => {
+ const l = (ctx.leerlingen || []).find((x) => x.id === id);
+ return l ? l.volledige_naam : "Leerling";
+ };
+ const overlapt = (a, b) => {
+ const at = a.geldig_tot || null, av = a.geldig_van || null;
+ const bt = b.geldig_tot || null, bv = b.geldig_van || null;
+ if (at && bv && at < bv) return false;
+ if (bt && av && bt < av) return false;
+ return true;
+ };
+ const perSlot = new Map();
+ blokken.forEach((b) => {
+ if (!perSlot.has(b.tijdslot)) perSlot.set(b.tijdslot, []);
+ perSlot.get(b.tijdslot).push(b);
+ });
+ perSlot.forEach((lijst, slotId) => {
+ if (lijst.length < 2) return;
+ const lab = slotLabel(slotId);
+ const flag = (a, b, tekst, ernst) => {
+ if (!overlapt(a, b)) return;
+ blokIds.add(a.id);
+ blokIds.add(b.id);
+ if (!teksten.has(tekst)) teksten.set(tekst, ernst);
+ };
+ for (let i = 0; i < lijst.length; i++) {
+ for (let j = i + 1; j < lijst.length; j++) {
+ const a = lijst[i], b = lijst[j];
+ (a.begeleiders_namen || []).forEach((p) => {
+ if ((b.begeleiders_namen || []).some((q) => q.id === p.id)) {
+ flag(a, b, `${p.naam} staat dubbel ingepland — ${lab}`, "fout");
+ }
+ });
+ if (a.lokaal && b.lokaal && a.lokaal === b.lokaal) {
+ flag(a, b, `Lokaal ${a.lokaal_naam} dubbel geboekt — ${lab}`, "waarschuwing");
+ }
+ const lb = new Set(leerlingenVanBlok(b, ctx));
+ leerlingenVanBlok(a, ctx)
+ .filter((id) => lb.has(id))
+ .forEach((id) => flag(a, b, `${leerlingNaam(id)} is dubbel ingeroosterd — ${lab}`, "fout"));
+ }
+ }
+ });
+ const meldingen = [...teksten.entries()]
+ .map(([tekst, ernst]) => ({ tekst, ernst }))
+ .sort((x, y) => (x.ernst === y.ernst ? 0 : x.ernst === "fout" ? -1 : 1));
+ return { blokIds, meldingen };
+}
+
+function groepVanSubgroep(subgroepen, subgroepId) {
+ const sub = subgroepen.find((s) => s.id === subgroepId);
+ return sub ? sub.groep : null;
+}
+
+function bovenliggendeGroep(blok, subgroepen) {
+ if (blok.groep) return blok.groep;
+ if (blok.subgroep) return groepVanSubgroep(subgroepen, blok.subgroep);
+ return null;
+}
+
+/* ----------------------------- Blok bewerken/kopiëren --------------------- */
+function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
+ const { activiteiten, locaties, lokalen, groepen, subgroepen, leerlingen, medewerkers, tijdsloten } = ctx;
+ const [f, setF] = useState({
+ tijdslot: blok.tijdslot,
+ activiteit: blok.activiteit,
+ locatie: blok.locatie || "",
+ lokaal: blok.lokaal || "",
+ doel_type: blok.doel_type,
+ doel: blok.groep || blok.subgroep || blok.leerling || "",
+ begeleiders: [...(blok.begeleiders || [])],
+ opmerkingen: blok.opmerkingen || "",
+ geldig_van: blok.geldig_van || "",
+ geldig_tot: blok.geldig_tot || "",
+ });
+ const [kopieDoelen, setKopieDoelen] = useState([]);
+ const [error, setError] = useState(null);
+ const [subs, setSubs] = useState(subgroepen);
+ const [nieuweSub, setNieuweSub] = useState("");
+ const [splitSubs, setSplitSubs] = useState([]);
+ const [splitNieuw, setSplitNieuw] = useState("");
+ const [verwijderOrig, setVerwijderOrig] = useState(true);
+ const [subgroepGroepFilter, setSubgroepGroepFilter] = useState(() => (
+ blok.subgroep ? groepVanSubgroep(subgroepen, blok.subgroep) || "" : ""
+ ));
+ const [splitGroepId, setSplitGroepId] = useState(() => String(
+ blok.groep || groepVanSubgroep(subgroepen, blok.subgroep)
+ || (blok.leerling ? ((leerlingen.find((l) => l.id === blok.leerling) || {}).groep || "") : "") || ""
+ ));
+ const gekozenGroep = f.doel_type === "groep"
+ ? (f.doel ? Number(f.doel) : null)
+ : f.doel_type === "subgroep"
+ ? (subgroepGroepFilter || groepVanSubgroep(subs, Number(f.doel)))
+ : bovenliggendeGroep(blok, subs);
+ const subgroepOpties = gekozenGroep ? subs.filter((s) => s.groep === gekozenGroep) : subs;
+ const doelOpties = f.doel_type === "groep" ? groepen : f.doel_type === "subgroep" ? subgroepOpties : leerlingen;
+ const splitGroepNum = splitGroepId ? Number(splitGroepId) : null;
+ const splitOpties = splitGroepNum ? subs.filter((s) => s.groep === splitGroepNum) : [];
+ const splitGroepNaam = splitGroepNum ? (groepen.find((g) => g.id === splitGroepNum)?.naam || "groep") : "(kies groep)";
+
+ async function maakSubgroep() {
+ if (!nieuweSub.trim()) return;
+ const g = subgroepGroepFilter || gekozenGroep;
+ if (!g) { setError("Kies eerst een groep voor de nieuwe subgroep."); return; }
+ try {
+ const s = await createResource("subgroepen", { naam: nieuweSub.trim(), groep: Number(g) });
+ setSubs([...subs, s]);
+ setSubgroepGroepFilter(s.groep || "");
+ setF({ ...f, doel_type: "subgroep", doel: s.id });
+ setNieuweSub("");
+ } catch (e) { setError(e.message); }
+ }
+ const toggleSplit = (id) => setSplitSubs((d) => d.includes(id) ? d.filter((x) => x !== id) : [...d, id]);
+ async function maakSplitSub() {
+ if (!splitNieuw.trim()) return;
+ if (!splitGroepNum) { setError("Kies eerst een groep om onder te splitsen."); return; }
+ try {
+ const s = await createResource("subgroepen", { naam: splitNieuw.trim(), groep: splitGroepNum });
+ setSubs([...subs, s]);
+ setSplitSubs([...splitSubs, s.id]);
+ setSplitNieuw("");
+ } catch (e) { setError(e.message); }
+ }
+ async function opdelen() {
+ if (splitSubs.length === 0) return;
+ try {
+ for (const sid of splitSubs) {
+ await createResource("roosterblokken", { schooljaar: blok.schooljaar, tijdslot: f.tijdslot, activiteit: f.activiteit, locatie: f.locatie || null, lokaal: f.lokaal || null, subgroep: sid, begeleiders: f.begeleiders, opmerkingen: f.opmerkingen , geldig_van: f.geldig_van || null, geldig_tot: f.geldig_tot || null });
+ }
+ if (verwijderOrig) await deleteResource("roosterblokken", blok.id);
+ await onKlaar();
+ } catch (e) { setError(e.message); }
+ }
+ const toggleBeg = (id) => setF((s) => s.begeleiders.includes(id) ? { ...s, begeleiders: s.begeleiders.filter((x) => x !== id) } : { ...s, begeleiders: [...s.begeleiders, id] });
+ const toggleKopie = (id) => setKopieDoelen((d) => d.includes(id) ? d.filter((x) => x !== id) : [...d, id]);
+ const doelPayload = () => ({
+ groep: f.doel_type === "groep" ? f.doel : null,
+ subgroep: f.doel_type === "subgroep" ? f.doel : null,
+ leerling: f.doel_type === "leerling" ? f.doel : null,
+ });
+ async function opslaan() {
+ try { await updateResource("roosterblokken", blok.id, { tijdslot: f.tijdslot, activiteit: f.activiteit, locatie: f.locatie || null, lokaal: f.lokaal || null, ...doelPayload(), begeleiders: f.begeleiders, opmerkingen: f.opmerkingen , geldig_van: f.geldig_van || null, geldig_tot: f.geldig_tot || null }); await onKlaar(); }
+ catch (e) { setError(e.message); }
+ }
+ async function kopieer() {
+ try {
+ for (const ts of kopieDoelen) {
+ await createResource("roosterblokken", { schooljaar: blok.schooljaar, tijdslot: ts, activiteit: f.activiteit, locatie: f.locatie || null, lokaal: f.lokaal || null, ...doelPayload(), begeleiders: f.begeleiders, opmerkingen: f.opmerkingen , geldig_van: f.geldig_van || null, geldig_tot: f.geldig_tot || null });
+ }
+ await onKlaar();
+ } catch (e) { setError(e.message); }
+ }
+ async function verwijderen() {
+ if (!confirm("Dit blok (alle weken) verwijderen?")) return;
+ try { await deleteResource("roosterblokken", blok.id); await onKlaar(); } catch (e) { setError(e.message); }
+ }
+ return (
+ {data.aantal === 0 ? "Geen conflicten gevonden 🎉" : `${data.fouten} fout(en) en ${data.waarschuwingen} waarschuwing(en).`}
+ {data.conflicten.map((c, i) => ( +
+
+ ))}
+ {c.tijdslot} {c.type}
+ {c.detail}
+ Blokken: {c.blokken.join(", ")}
+
+
+ );
+}
+
+/* ------------------------------- Groepsindeling --------------------------- */
+// Verdeel een hoofdgroep (of bovenliggende groep) kolomsgewijs in subgroepen: per kolom
+// de subgroep met haar verantwoordelijke(n) en de vakken die er gegeven worden.
+function Groepsindeling({ groepen, leerpleinen, subgroepen, medewerkers, blokken, onWijzig }) {
+ const [type, setType] = useState("groep");
+ const [hoofdId, setHoofdId] = useState("");
+ const [nieuw, setNieuw] = useState({ naam: "", groep: "", begeleiders: [] });
+ const [error, setError] = useState(null);
+
+ const opties = type === "groep" ? groepen : leerpleinen;
+ const hid = hoofdId ? Number(hoofdId) : null;
+ const hoofd = opties.find((o) => o.id === hid);
+
+ let subs = [];
+ if (hid && type === "groep") subs = subgroepen.filter((s) => s.groep === hid);
+ if (hid && type === "leerplein" && hoofd) subs = subgroepen.filter((s) => (hoofd.subgroepen || []).includes(s.id));
+ const leerpleinGroepen = type === "leerplein" && hoofd
+ ? groepen.filter((g) => (hoofd.groepen || []).includes(g.id))
+ : [];
+ const groepenMetSubgroepen = type === "leerplein"
+ ? leerpleinGroepen.map((g) => ({ groep: g, subs: subgroepen.filter((s) => s.groep === g.id) }))
+ : [];
+
+ const vakkenVan = (subId) => [...new Set(blokken.filter((b) => b.subgroep === subId).map((b) => b.activiteit_naam))];
+ const toggleBeg = (id) => setNieuw((n) => n.begeleiders.includes(id) ? { ...n, begeleiders: n.begeleiders.filter((x) => x !== id) } : { ...n, begeleiders: [...n.begeleiders, id] });
+
+ async function voegToe(e) {
+ e.preventDefault();
+ try {
+ await createResource("subgroepen", { naam: nieuw.naam, groep: type === "groep" ? hid : nieuw.groep, begeleiders: nieuw.begeleiders });
+ setNieuw({ naam: "", groep: "", begeleiders: [] });
+ await onWijzig();
+ } catch (err) { setError(err.message); }
+ }
+ async function verwijderSub(id) {
+ if (!confirm("Deze subgroep verwijderen?")) return;
+ try { await deleteResource("subgroepen", id); await onWijzig(); } catch (err) { setError(err.message); }
+ }
+
+ return (
+ e.stopPropagation()}>
+
+
+
+
+
+
+ {blok.activiteit_naam || "Roosterblok"}
+{blok.doel_naam || "Bewerken en splitsen"}
+
+
+
+ Vak bewerken
+ Wijzig, splits of kopieer dit blok
+
+
+
+
+
+
+ setF({ ...f, opmerkingen: e.target.value })} />
+ setF({ ...f, geldig_van: e.target.value })} />
+ setF({ ...f, geldig_tot: e.target.value })} />
+
+
+
+
+
+ Doelgroep en begeleiding
+
+
+
+ {f.doel_type === "subgroep" && (
+ <>
+
+ setNieuweSub(e.target.value)} />
+
+
+ )}
+
+
+ {medewerkers.map((m) => )}
+
+
+
+
+
+
+
+
+
+ Splitsen onder {splitGroepNaam}
+
+
+
+
+ {splitOpties.map((s) => )}
+ {splitOpties.length === 0 && Nog geen subgroepen onder deze groep.}
+
+ {splitSubs.length > 0 && (
+
+
+ )}
+ {splitGroepNaam}
+
+ {splitSubs.map((sid) => {
+ const sub = splitOpties.find((s) => s.id === sid) || subs.find((s) => s.id === sid);
+ return {sub ? sub.naam : "Subgroep"};
+ })}
+
+
+ setSplitNieuw(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); maakSplitSub(); } }} />
+
+
+
+
+
+
+ Kopiëren
+
+ {tijdsloten.map((t) => )}
+
+
+
+
+ );
+}
+
+/* ---------------------------------- Rooster ------------------------------- */
+// Eén component met twee modi:
+// - mode="view" -> Rooster (alleen-lezen weergave, om te bekijken/printen)
+// - mode="edit" -> Roostermaker (volledige bewerking + drag-and-drop)
+export function RoosterScherm({ mode }) {
+ const edit = mode === "edit";
+ const [printAan, setPrintAan] = useState(false);
+ const [blokwizardAan, setBlokwizardAan] = useState(false);
+ const [autoroosterAan, setAutoroosterAan] = useState(false);
+ const [schooljaren, setSchooljaren] = useState([]);
+ const [schooljaar, setSchooljaar] = useState("");
+ const [tijdsloten, setTijdsloten] = useState([]);
+ const [activiteiten, setActiviteiten] = useState([]);
+ const [locaties, setLocaties] = useState([]);
+ const [lokalen, setLokalen] = useState([]);
+ const [groepen, setGroepen] = useState([]);
+ const [subgroepen, setSubgroepen] = useState([]);
+ const [leerlingen, setLeerlingen] = useState([]);
+ const [medewerkers, setMedewerkers] = useState([]);
+ const [blokken, setBlokken] = useState([]);
+ const [kalender, setKalender] = useState([]);
+ const [afwezig, setAfwezig] = useState([]);
+ const [uitzonderingen, setUitzonderingen] = useState([]);
+ const [stages, setStages] = useState([]);
+ const [leerpleinen, setLeerpleinen] = useState([]);
+ const [maandag, setMaandag] = useState(() => maandagVan(new Date()));
+ const [toonForm, setToonForm] = useState(false);
+ const [tab, setTab] = useState("week");
+ const [error, setError] = useState(null);
+ // Scope-filter (ook voor gericht afdrukken): per klas/bovenliggende groep/leerling/personeel.
+ const [scopeType, setScopeType] = useState("alles");
+ const [scopeId, setScopeId] = useState("");
+ // Blok bewerken/kopiëren (alleen in de Roostermaker).
+ const [bewerkBlok, setBewerkBlok] = useState(null);
+
+ const leeg = { tijdslot: "", activiteit: "", locatie: "", lokaal: "", doel_type: "groep", doel: "", begeleiders: [], opmerkingen: "", geldig_van: "", geldig_tot: "" };
+ const [form, setForm] = useState(leeg);
+ const [splitNieuwBlok, setSplitNieuwBlok] = useState(false);
+ const [splitNieuwDoelen, setSplitNieuwDoelen] = useState([]);
+
+ // Drag-and-drop via pointer events (werkt op muis én touch).
+ const dragRef = useRef(null);
+ const laadRef = useRef(() => {});
+ const [ghost, setGhost] = useState(null);
+ const [hoverSlot, setHoverSlot] = useState(null);
+ const [conflictOpen, setConflictOpen] = useState(false);
+ const [genOpen, setGenOpen] = useState(false);
+ const [weergave, setWeergaveState] = useState(() => { try { return localStorage.getItem("rw_weergave") || "kolom"; } catch { return "kolom"; } });
+ const setWeergave = (v) => { setWeergaveState(v); try { localStorage.setItem("rw_weergave", v); } catch { /* niet beschikbaar */ } };
+ const [vakkleurVlak, setVakkleurState] = useState(() => { try { return localStorage.getItem("rw_vakkleur") === "vlak"; } catch { return false; } });
+ const setVakkleur = (v) => { setVakkleurState(v); try { localStorage.setItem("rw_vakkleur", v ? "vlak" : "streep"); } catch { /* niet beschikbaar */ } };
+ const [detailsOpen, setDetailsOpenState] = useState(() => { try { return localStorage.getItem("rw_rooster_details") !== "0"; } catch { return true; } });
+ const setDetailsOpen = (v) => { setDetailsOpenState(v); try { localStorage.setItem("rw_rooster_details", v ? "1" : "0"); } catch { /* niet beschikbaar */ } };
+ // Printopties
+ const [printOpen, setPrintOpen] = useState(false);
+ const [printPending, setPrintPending] = useState(false);
+ const [printAllesActief, setPrintAllesActief] = useState(false);
+ const [printKop, setPrintKop] = useState("");
+ const [printLegenda, setPrintLegenda] = useState(false);
+ const [printOpts, setPrintOpts] = useState({ bereik: "huidig", indeling: "kolom", kleur: false, begeleiding: true, lokaal: true, legenda: false, paginaPerDag: false, papier: "A4", orientatie: "landscape" });
+
+ useEffect(() => {
+ listResource("schooljaren").then((j) => { setSchooljaren(j); if (j.length) setSchooljaar((s) => s || String(j[0].id)); }).catch((e) => setError(e.message));
+ listResource("tijdsloten").then(setTijdsloten).catch(() => {});
+ listResource("activiteiten").then(setActiviteiten).catch(() => {});
+ listResource("locaties").then(setLocaties).catch(() => {});
+ listResource("lokalen").then(setLokalen).catch(() => {});
+ listResource("groepen").then(setGroepen).catch(() => {});
+ listResource("subgroepen").then(setSubgroepen).catch(() => {});
+ listResource("personen", "?rol=leerling").then(setLeerlingen).catch(() => {});
+ listResource("personen").then((ps) => setMedewerkers(ps.filter((p) => p.rol !== "leerling"))).catch(() => {});
+ listResource("leerpleinen").then(setLeerpleinen).catch(() => {});
+ listResource("stages", "?actief=1").then(setStages).catch(() => setStages([]));
+ // Afdrukken alleen tonen als de print-module aanstaat.
+ getModules().then((ms) => {
+ setPrintAan(ms.some((m) => m.key === "printing" && m.enabled));
+ setBlokwizardAan(ms.some((m) => m.key === "blokwizard" && m.enabled));
+ setAutoroosterAan(ms.some((m) => m.key === "autorooster" && m.enabled));
+ }).catch(() => {});
+ }, []);
+
+ // Scope-context + gefilterde blokken (voor weergave/afdrukken).
+ const scopeCtx = { leerlingen, subgroepen, leerpleinen };
+ const scope = { type: scopeType, id: scopeId ? Number(scopeId) : "" };
+ // Bij printen "alle klassen" tijdelijk de scope negeren.
+ const effScope = printAllesActief ? { type: "alles", id: "" } : scope;
+ const zichtbareBlokken = blokken.filter((b) => blokInScope(b, effScope, scopeCtx));
+ // Distinct vakken (voor de optionele kleurenlegenda bij het afdrukken).
+ const legendaItems = (() => {
+ const seen = new Set(); const out = [];
+ zichtbareBlokken.forEach((b) => { if (!seen.has(b.activiteit_naam)) { seen.add(b.activiteit_naam); out.push({ naam: b.activiteit_naam, kleur: b.activiteit_kleur, icoon: b.activiteit_icoon }); } });
+ return out.sort((a, x) => a.naam.localeCompare(x.naam));
+ })();
+ // Conflicten over álle blokken (niet alleen de zichtbare scope), zodat de
+ // melding compleet is en de betrokken blokken in het rooster omlijnd worden.
+ const conflictInfo = berekenRoosterConflicten(blokken, scopeCtx, tijdsloten);
+ const scopeOpties = scopeType === "klas" ? groepen
+ : scopeType === "leerplein" ? leerpleinen
+ : scopeType === "leerling" ? leerlingen
+ : scopeType === "personeel" ? medewerkers
+ : [];
+
+ const weekDatums = [0, 1, 2, 3, 4].map((i) => plusDagen(maandag, i));
+ const vanISO = fmtISO(maandag);
+ const totISO = fmtISO(plusDagen(maandag, 6));
+
+ async function laadBlokken() {
+ if (!schooljaar) { setBlokken([]); return; }
+ try {
+ setBlokken(await listResource("roosterblokken", `?schooljaar=${schooljaar}`));
+ setKalender(await listResource("kalenderdagen", `?schooljaar=${schooljaar}`));
+ setError(null);
+ } catch (e) { setError(e.message); }
+ }
+ async function laadWeek() {
+ if (!schooljaar) return;
+ try {
+ setAfwezig(await listResource("afwezigheden", `?van=${vanISO}&tot=${totISO}`));
+ setUitzonderingen(await listResource("blok-uitzonderingen", `?schooljaar=${schooljaar}&van=${vanISO}&tot=${totISO}`));
+ } catch (e) { setError(e.message); }
+ }
+ async function herlaadNaBlokWijziging() {
+ try { setSubgroepen(await listResource("subgroepen")); } catch { /* blokken verversen blijft leidend */ }
+ await laadBlokken();
+ }
+ laadRef.current = laadBlokken;
+ useEffect(() => { laadBlokken(); }, [schooljaar]);
+ useEffect(() => { laadWeek(); }, [schooljaar, vanISO]);
+
+ // Listeners voor drag-and-drop, één keer opgezet.
+ useEffect(() => {
+ function move(e) {
+ if (!dragRef.current) return;
+ setGhost({ x: e.clientX, y: e.clientY, label: dragRef.current.activiteit_naam });
+ const el = document.elementFromPoint(e.clientX, e.clientY);
+ const cell = el && el.closest("[data-tijdslot]");
+ setHoverSlot(cell ? Number(cell.dataset.tijdslot) : null);
+ }
+ async function up(e) {
+ if (!dragRef.current) return;
+ const el = document.elementFromPoint(e.clientX, e.clientY);
+ const cell = el && el.closest("[data-tijdslot]");
+ const doel = cell ? Number(cell.dataset.tijdslot) : null;
+ const blok = dragRef.current;
+ dragRef.current = null;
+ setGhost(null);
+ setHoverSlot(null);
+ if (cell && cell.dataset.vrij) { setError("Op een vrije/vakantiedag kun je geen blok plaatsen."); return; }
+ if (doel && doel !== blok.tijdslot) {
+ try { await updateResource("roosterblokken", blok.id, { tijdslot: doel }); await laadRef.current(); }
+ catch (err) { setError(err.message); }
+ }
+ }
+ window.addEventListener("pointermove", move);
+ window.addEventListener("pointerup", up);
+ return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
+ }, []);
+
+ // Sneltoetsen (alleen in de Roostermaker).
+ useEffect(() => {
+ if (!edit) return;
+ function onKey(e) {
+ const t = e.target;
+ const typing = t && (t.tagName === "INPUT" || t.tagName === "SELECT" || t.tagName === "TEXTAREA" || t.isContentEditable);
+ if (e.key === "Escape") { setBewerkBlok(null); sluitNieuwBlok(); return; }
+ if (typing) return;
+ if (e.key === "n" || e.key === "N") { setTab("week"); setBewerkBlok(null); setToonForm((v) => { if (v) resetNieuweSplit(); return !v; }); }
+ else if (e.key === "ArrowLeft") { setMaandag((m) => plusDagen(m, -7)); }
+ else if (e.key === "ArrowRight") { setMaandag((m) => plusDagen(m, 7)); }
+ else if (e.key === "t" || e.key === "T") { setMaandag(maandagVan(new Date())); }
+ }
+ window.addEventListener("keydown", onKey);
+ return () => window.removeEventListener("keydown", onKey);
+ }, [edit]);
+
+ function startDrag(e, blok) {
+ e.preventDefault();
+ dragRef.current = blok;
+ setGhost({ x: e.clientX, y: e.clientY, label: blok.activiteit_naam });
+ setHoverSlot(blok.tijdslot);
+ }
+
+ function resetNieuweSplit() {
+ setSplitNieuwBlok(false);
+ setSplitNieuwDoelen([]);
+ }
+ function openNieuwBlok() {
+ setBewerkBlok(null);
+ setToonForm(true);
+ }
+ // Print: pas de gekozen opties toe via body-classes + @page, dan afdrukken.
+ function zetPaginaStijl(papier, orientatie) {
+ let el = document.getElementById("rw-print-page");
+ if (!el) { el = document.createElement("style"); el.id = "rw-print-page"; document.head.appendChild(el); }
+ el.textContent = `@page { size: ${papier} ${orientatie}; margin: 10mm; }`;
+ }
+ function startPrint() {
+ const b = document.body.classList;
+ b.toggle("print-lijst", printOpts.indeling === "lijst");
+ b.toggle("print-kolom", printOpts.indeling === "kolom");
+ b.toggle("print-kleur", !!printOpts.kleur);
+ b.toggle("print-geen-begeleiding", !printOpts.begeleiding);
+ b.toggle("print-geen-lokaal", !printOpts.lokaal);
+ b.toggle("print-paginadag", !!printOpts.paginaPerDag);
+ zetPaginaStijl(printOpts.papier, printOpts.orientatie);
+ setPrintKop(printOpts.kop || "");
+ setPrintLegenda(!!printOpts.legenda);
+ if (printOpts.bereik === "alles") setPrintAllesActief(true);
+ setPrintOpen(false);
+ setPrintPending(true);
+ }
+ useEffect(() => {
+ if (!printPending) return;
+ const id = setTimeout(() => {
+ window.print();
+ setPrintPending(false);
+ setPrintAllesActief(false);
+ }, 120);
+ return () => clearTimeout(id);
+ }, [printPending]);
+ // Direct vanuit een tijdvak in het rooster een vak toevoegen: tijdslot vast,
+ // en het doel alvast op de actieve scope (klas/leerling) zetten.
+ function openNieuwBlokVoorSlot(tijdslotId) {
+ setBewerkBlok(null);
+ const basis = { ...leeg, tijdslot: String(tijdslotId) };
+ if (scopeType === "klas" && scopeId) { basis.doel_type = "groep"; basis.doel = String(scopeId); }
+ else if (scopeType === "leerling" && scopeId) { basis.doel_type = "leerling"; basis.doel = String(scopeId); }
+ setForm(basis);
+ resetNieuweSplit();
+ setToonForm(true);
+ }
+ function sluitNieuwBlok() {
+ setToonForm(false);
+ resetNieuweSplit();
+ }
+ function toggleNieuwSplitDoel(id) {
+ setSplitNieuwDoelen((doelen) => doelen.includes(id) ? doelen.filter((x) => x !== id) : [...doelen, id]);
+ }
+
+ const doelOpties = form.doel_type === "groep" ? groepen : form.doel_type === "subgroep" ? subgroepen : leerlingen;
+ const splitNieuweOpties = form.doel_type === "groep" && form.doel
+ ? subgroepen.filter((s) => s.groep === Number(form.doel))
+ : [];
+ const splitNieuweGroep = groepen.find((g) => g.id === Number(form.doel));
+ function toggleBegeleider(id) {
+ setForm((f) => f.begeleiders.includes(id) ? { ...f, begeleiders: f.begeleiders.filter((x) => x !== id) } : { ...f, begeleiders: [...f.begeleiders, id] });
+ }
+ async function opslaan(e) {
+ e.preventDefault();
+ const basis = { schooljaar, tijdslot: form.tijdslot, activiteit: form.activiteit, locatie: form.locatie || null, lokaal: form.lokaal || null, begeleiders: form.begeleiders, opmerkingen: form.opmerkingen, geldig_van: form.geldig_van || null, geldig_tot: form.geldig_tot || null };
+ try {
+ if (form.doel_type === "groep" && splitNieuwBlok && splitNieuwDoelen.length > 0) {
+ for (const subgroep of splitNieuwDoelen) {
+ await createResource("roosterblokken", { ...basis, groep: null, subgroep, leerling: null });
+ }
+ } else {
+ await createResource("roosterblokken", {
+ ...basis,
+ groep: form.doel_type === "groep" ? form.doel : null,
+ subgroep: form.doel_type === "subgroep" ? form.doel : null,
+ leerling: form.doel_type === "leerling" ? form.doel : null,
+ });
+ }
+ setForm({ ...leeg, doel_type: form.doel_type });
+ sluitNieuwBlok();
+ await herlaadNaBlokWijziging();
+ } catch (err) { setError(err.message); }
+ }
+ async function verwijder(id) {
+ if (!confirm("Dit roosterblok (alle weken) verwijderen?")) return;
+ try { await deleteResource("roosterblokken", id); await laadBlokken(); } catch (err) { setError(err.message); }
+ }
+ async function laatVervallen(blok, iso) {
+ try { await createResource("blok-uitzonderingen", { roosterblok: blok.id, datum: iso, vervalt: true }); await laadWeek(); }
+ catch (err) { setError(err.message); }
+ }
+ async function herstel(uitId) {
+ try { await deleteResource("blok-uitzonderingen", uitId); await laadWeek(); } catch (err) { setError(err.message); }
+ }
+ async function dagVervallen(iso) {
+ try { await createResource("kalenderdagen", { schooljaar, datum: iso, type: "vrije_dag", omschrijving: "vervallen" }); await laadBlokken(); }
+ catch (err) { setError(err.message); }
+ }
+ async function dagHerstel(kalId) {
+ try { await deleteResource("kalenderdagen", kalId); await laadBlokken(); }
+ catch (err) { setError(err.message); }
+ }
+
+ // Geldt dit blok op deze datum (periode / eenmalig)?
+ function blokGeldigOp(b, iso) {
+ if (b.geldig_van && iso < b.geldig_van) return false;
+ if (b.geldig_tot && iso > b.geldig_tot) return false;
+ return true;
+ }
+ // Maak één specifieke dag leeg: laat alle blokken die dag vervallen (alleen
+ // deze datum), zonder gevolgen voor andere dagen.
+ async function leegDag(iso) {
+ const ourWd = (new Date(iso).getDay() + 6) % 7;
+ const dagBlokken = blokken.filter((b) => {
+ const t = tijdsloten.find((x) => x.id === b.tijdslot);
+ if (!t || t.dag !== ourWd || !blokGeldigOp(b, iso)) return false;
+ const u = uitzOp(b.id, iso);
+ return !(u && u.vervalt);
+ });
+ if (dagBlokken.length === 0) { setError("Geen blokken om te laten vervallen op deze dag."); return; }
+ if (!confirm(`Alle ${dagBlokken.length} blok(ken) op ${iso} laten vervallen? Dit geldt alleen voor deze dag.`)) return;
+ try {
+ for (const b of dagBlokken) await createResource("blok-uitzonderingen", { roosterblok: b.id, datum: iso, vervalt: true });
+ await laadWeek();
+ } catch (err) { setError(err.message); }
+ }
+ // Voeg een eenmalig (alleen vandaag geldig) blok toe op deze dag.
+ function openEenmalig(iso) {
+ setBewerkBlok(null);
+ setForm({ ...leeg, geldig_van: iso, geldig_tot: iso });
+ resetNieuweSplit();
+ setToonForm(true);
+ }
+
+ // Hulpfuncties voor het effectieve rooster.
+ const kalenderOp = (iso) => kalender.find((k) => k.datum === iso);
+ const uitzOp = (blokId, iso) => uitzonderingen.find((u) => u.roosterblok === blokId && u.datum === iso);
+ // Op id vergelijken, niet op naam: twee personen kunnen dezelfde naam hebben.
+ const persoonAfwezig = (id, iso) => afwezig.some((a) => a.persoon === id && a.start_datum <= iso && a.eind_datum >= iso);
+ const rolAfk = (id) => { const m = medewerkers.find((x) => x.id === id); return m ? (ROL_AFK[m.rol] || "") : ""; };
+ // Stage: welke leerlingen zijn op een gegeven tijdslot op stage (en dus niet in de klas)?
+ const tijdslotById = (id) => tijdsloten.find((t) => t.id === id);
+ const leerlingNaam = (id) => { const l = leerlingen.find((x) => x.id === id); return l ? l.volledige_naam : "?"; };
+ function stageDektTijdslot(stage, t) {
+ if (!t) return false;
+ if (stage.omvang === "blok") return stage.tijdslot === t.id;
+ if (stage.dag === null || stage.dag === undefined || stage.dag !== t.dag) return false;
+ if (stage.omvang === "hele_dag") return true;
+ const isOchtend = (t.start_tijd || "") < "12:00";
+ return (stage.dagdeel === "ochtend" && isOchtend) || (stage.dagdeel === "middag" && !isOchtend);
+ }
+ function leerlingenOpStageBij(t) {
+ const set = new Set();
+ for (const st of stages) { if (stageDektTijdslot(st, t)) set.add(st.leerling); }
+ return set;
+ }
+ function stageNoot(b) {
+ const t = tijdslotById(b.tijdslot);
+ const opStage = leerlingenOpStageBij(t);
+ if (opStage.size === 0) return null;
+ if (b.doel_type === "leerling") {
+ return opStage.has(b.leerling) ? Kies een hoofdgroep of bovenliggende groep en verdeel die in subgroepen. Per subgroep zie je de vakken en wie verantwoordelijk is.
+
+
+
+
+
+ {hid && hoofd && (
+
+
+ )}
+ {hoofd.naam} — {type}
+ {type === "leerplein" ? (
+
+ {groepenMetSubgroepen.map(({ groep, subs: groepSubs }) => (
+
+ ) : (
+
+
+ ))}
+ {leerpleinGroepen.length === 0 && {groep.naam}
+
+ {groepSubs.map((s) => (
+
+
+
+ ))}
+ {groepSubs.length === 0 && {s.naam}
+ Verantwoordelijke: {s.begeleiders_namen && s.begeleiders_namen.length ? s.begeleiders_namen.map((x) => x.naam).join(", ") : "geen"}
+ Vakken: {vakkenVan(s.id).join(", ") || "nog geen vakken"}
+ {s.aantal_leden} leerling(en)
+
+ Nog geen subgroepen onder {groep.naam}.
}
+ Nog geen groepen onder {hoofd.naam}.
}
+
+ {subs.map((s) => (
+
+ )}
+
+
+
+
+ ))}
+ {subs.length === 0 && {s.naam}
+ Verantwoordelijke: {s.begeleiders_namen && s.begeleiders_namen.length ? s.begeleiders_namen.map((x) => x.naam).join(", ") : "geen"}
+ Vakken: {vakkenVan(s.id).join(", ") || "nog geen vakken"}
+ {s.aantal_leden} leerling(en)
+
+ Nog geen subgroepen onder {hoofd.naam}.
}
+ 📍 Op stage — niet in de klas
: null;
+ }
+ const namen = leerlingenVanBlok(b, scopeCtx).filter((id) => opStage.has(id)).map(leerlingNaam);
+ if (namen.length === 0) return null;
+ return 📍 Op stage: {namen.join(", ")}
;
+ }
+ const editorCtx = { activiteiten, locaties, lokalen, groepen, subgroepen, leerlingen, medewerkers, tijdsloten };
+ const isOpenBlok = (b) => edit && bewerkBlok && bewerkBlok.id === b.id;
+ const toggleOpenBlok = (b) => setBewerkBlok((huidig) => (huidig && huidig.id === b.id ? null : b));
+ // Eén uniform vak-kaartje, gebruikt in álle situaties (los vak of vak per
+ // subgroep) zodat de weergave overal hetzelfde oogt.
+ function renderVakKaart(b, iso, kal) {
+ const uit = uitzOp(b.id, iso);
+ const vervallen = !!kal || (uit && uit.vervalt);
+ return (
+ toggleOpenBlok(b) : undefined}
+ title={edit ? "Klik om te bewerken" : undefined}
+ >
+
+ );
+ }
+ // Klas-/doelgroepkop boven de vakken: altijd duidelijk in beeld.
+ const doelIcoon = (t) => (t === "leerling" ? "🧒" : t === "leerplein" ? "🏫" : "👥");
+ const klasKop = (naam, sub, count, icoon) => (
+
+ {edit && startDrag(e, b)} onClick={(e) => e.stopPropagation()} title="Sleep naar ander tijdslot">⠿}
+ {b.activiteit_pictogram && 
}
+ {b.activiteit_icoon || vakIcoon(b.activiteit_naam)} {b.activiteit_naam}
+ {edit && }
+ {edit && }
+
+ {(b.locatie_naam || b.lokaal_naam || b.begeleiders_namen.length > 0) && (
+
+ {b.locatie_naam && 📍 {b.locatie_naam}}
+ {b.lokaal_naam && 🚪 {b.lokaal_naam}}
+ {b.begeleiders_namen.length > 0 && (
+ 👤 {b.begeleiders_namen.map((x, idx) => (
+ {idx > 0 ? ", " : ""}{x.naam}{rolAfk(x.id) ? ` (${rolAfk(x.id)})` : ""}
+ ))}
+ )}
+
+ )}
+ {(edit || detailsOpen) && stageNoot(b)}
+ {kal && Vervalt — {kal.type_label}
}
+ {!kal && uit && uit.vervalt && Vervalt {uit.opmerking ? `(${uit.opmerking})` : ""}{edit && }
}
+ {!kal && uit && !uit.vervalt && uit.vervanger_naam && Vervanger: {uit.vervanger_naam}
}
+ {edit && !kal && !uit && (
+
+ )}
+
+ {icoon}
+
+ );
+ function renderSlotBlokken(slotBlokken, iso, kal) {
+ const losse = [];
+ const perGroep = new Map();
+ slotBlokken.forEach((b) => {
+ const gid = bovenliggendeGroep(b, subgroepen);
+ if (!gid) { losse.push(b); return; }
+ if (!perGroep.has(gid)) perGroep.set(gid, []);
+ perGroep.get(gid).push(b);
+ });
+ const out = [];
+
+ // Losse doelen (individuele leerling e.d.): per doel een klas-kop + vakken.
+ const losPerDoel = new Map();
+ losse.forEach((b) => {
+ const k = `${b.doel_type}:${b.doel_naam}`;
+ if (!losPerDoel.has(k)) losPerDoel.set(k, []);
+ losPerDoel.get(k).push(b);
+ });
+ losPerDoel.forEach((blks, k) => {
+ const eerste = blks[0];
+ out.push(
+ {naam}{sub}
+ {count != null && {count}}
+
+ {klasKop(eerste.doel_naam, eerste.doel_type, blks.length > 1 ? blks.length : null, doelIcoon(eerste.doel_type))}
+
+ );
+ });
+
+ if (scopeType === "leerplein" && scopeId && perGroep.size > 0) {
+ const leerplein = leerpleinen.find((l) => l.id === Number(scopeId));
+ const kolommen = [...perGroep.entries()];
+ out.push(
+ 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{blks.map((b) => renderVakKaart(b, iso, kal))}
+
+ {klasKop(leerplein ? leerplein.naam : BOVENGROEP_LABEL, `${BOVENGROEP_LABEL} → groepen`, kolommen.length, "🏫")}
+
+ );
+ return out;
+ }
+
+ perGroep.forEach((groepBlokken, gid) => {
+ const groep = groepen.find((g) => g.id === gid);
+ const groepNaam = groep ? groep.naam : "Groep";
+ const heeftSplitsing = groepBlokken.some((b) => b.subgroep);
+ if (!heeftSplitsing) {
+ out.push(
+
+ {kolommen.map(([gid, groepBlokken]) => {
+ const groep = groepen.find((g) => g.id === gid);
+ return (
+
+
+
+ );
+ })}
+ {groep ? groep.naam : "Groep"}
+ 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{groepBlokken.map((b) => renderVakKaart(b, iso, kal))}
+
+ {klasKop(groepNaam, "groep", groepBlokken.length > 1 ? groepBlokken.length : null, "👥")}
+
+ );
+ return;
+ }
+ const heleGroep = groepBlokken.filter((b) => b.groep === gid);
+ const subIds = [...new Set(groepBlokken.filter((b) => b.subgroep).map((b) => b.subgroep))];
+ const kolomAantal = subIds.length + (heleGroep.length > 0 ? 1 : 0);
+ out.push(
+ 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{groepBlokken.map((b) => renderVakKaart(b, iso, kal))}
+
+ {klasKop(groepNaam, "groep → subgroepen", kolomAantal, "👥")}
+
+ );
+ });
+ return out;
+ }
+
+ return (
+
+ {heleGroep.length > 0 && (
+
+
+
+ )}
+ {subIds.map((sid) => {
+ const sub = subgroepen.find((s) => s.id === sid);
+ const blocks = groepBlokken.filter((b) => b.subgroep === sid);
+ return (
+ Hele groep
+ 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{heleGroep.map((b) => renderVakKaart(b, iso, kal))}
+
+
+ );
+ })}
+ {sub ? sub.naam : "Subgroep"}
+ 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{blocks.map((b) => renderVakKaart(b, iso, kal))}
+
+
+
+ {printKop || (edit ? "Roostermaker" : "Rooster")}
+ {(schooljaren.find((j) => String(j.id) === String(schooljaar)) || {}).naam || ""}{schooljaar ? " · " : ""}{schooljaar ? weekTitel(maandag) : ""} · afgedrukt {fmtDM(new Date())}
+
+
+
+
+
+ {edit ? "Roostermaker" : "Rooster"}
+
+ {schooljaar ? `${weekTitel(maandag)} · ${zichtbareBlokken.length} blokken zichtbaar` : "Kies een schooljaar"}
+ {conflictInfo.meldingen.length > 0 ? ` · ${conflictInfo.meldingen.length} conflicten` : ""}
+
+
+
+ {schooljaar && (
+
+
+ {schooljaar && (edit ? tab === "week" : true) && (
+
+
+ {weekTitel(maandag)}
+
+
+
+ )}
+ {schooljaar && (edit ? tab === "week" : true) && (
+
+
+
+
+ {printAan && }
+
+ )}
+
+ {(groepen.length > 0 || leerpleinen.length > 0) && (
+
+ )}
+
+ {edit && (
+
+ Toon
+
+ )}
+
+
+ {groepen.map((g) => (
+
+ ))}
+ {leerpleinen.map((lp) => (
+
+ ))}
+
+
+ of één persoon
+
+ {scopeType !== "alles" && scopeId && {zichtbareBlokken.length} blok(ken)}
+
+
+
+ {(blokwizardAan || autoroosterAan) && (
+
+ )}
+ {edit && tab === "week" &&
+
+ {genOpen && (
+
+ )}
+
+ setGenOpen(false)}>
+ {blokwizardAan && }
+ {autoroosterAan && }
+
+ )}
+ N nieuw · pijltjes week · T vandaag · Esc sluiten
}
+
+ {edit && schooljaar && tab === "week" && toonForm && (
+
+
+
+ )}
+
+ {schooljaar && tab === "week" && conflictInfo.meldingen.length > 0 && (
+
+
+ {conflictOpen && (
+
+ )}
+
+ {schooljaar && tab === "week" && (
+ -
+ {conflictInfo.meldingen.map((m, i) => (
+
- {m.tekst} + ))} +
+ {WEEKDAGEN.map((d, i) => {
+ const datum = weekDatums[i];
+ const iso = fmtISO(datum);
+ const kal = kalenderOp(iso);
+ const slots = tijdsloten.filter((t) => t.dag === d.value).sort((a, b) => a.volgorde - b.volgorde);
+ return (
+
+ )}
+
+ {schooljaar && tab === "week" && printLegenda && legendaItems.length > 0 && (
+
+
+ );
+ })}
+
+ {d.label} {fmtDM(datum)}
+ {kal &&
+ {slots.length === 0 && {kal.type_label}{kal.omschrijving ? `: ${kal.omschrijving}` : ""}
}
+ {edit && (
+
+ {kal ? (
+
+ ) : (
+ <>
+
+
+
+
+ )}
+
+ )}
+ —
}
+ {slots.map((t) => {
+ const slotBlokken = zichtbareBlokken.filter((b) => b.tijdslot === t.id && blokGeldigOp(b, iso));
+ return (
+
+
+ );
+ })}
+ {t.start_tijd?.slice(0, 5)} {t.naam}
+ {renderSlotBlokken(slotBlokken, iso, kal)}
+ {edit && !kal && (
+
+ )}
+
+ Legenda
+
+ )}
+
+ {edit && tab === "wizard" && blokwizardAan &&
+ {legendaItems.map((v) => (
+ {v.icoon || vakIcoon(v.naam)} {v.naam}
+ ))}
+
+
+
+ )}
+
+ {edit && bewerkBlok && (
+ Beheer hier alle bouwstenen van het rooster. Klik een onderdeel open om het te bewerken.
+
+
+ 📅 Schooljaar & kalender
+Maak een schooljaar aan en beheer de kalender (studiedagen, vrije dagen, vakanties).
+
+ 🕒 Tijdvakken
+De dag- en tijdindeling waarop vakken geplaatst kunnen worden.
+
+ 📚 Vakken & activiteiten
+De vakken/activiteiten met kleur en icoon.
+
+ 🚪 Lokalen
+Ruimtes met capaciteit; meetellen in de dubbele-boekingcheck.
+
+ 📍 Locaties
+Vrije locatie-aanduidingen (bv. gymzaal, zwembad).
+
+ 🖼️ Vormgeving
+{ghost.label}
}
+
+ {printOpen && (
+ setPrintOpen(false)}>
+
+ )}
+ e.stopPropagation()}>
+
+
+
+
+
+ Afdrukken
Kies wat en hoe je afdrukt.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Perioderooster
Geef alle klassen in één overzicht hun weekvakken. Je bouwt de weekopzet hier eerst los van de kalender; bij voltooien kies je de periode waarin dit rooster gaat gelden. Dezelfde begeleider of hetzelfde lokaal op hetzelfde moment wordt meteen als conflict gemarkeerd.
+
+
+ {conflictInfo.meldingen.length ? `⚠ ${conflictInfo.meldingen.length} conflict(en)` : "✓ geen conflicten"}
+
+
+ {klaarMelding &&
+
+
+
+ {klaarMelding}
}
+
+ {conflictInfo.meldingen.length > 0 && (
+ -
+ {conflictInfo.meldingen.map((m, i) =>
- {m.tekst} )} +
Kies eerst een schooljaar.
} + {schooljaar && groepen.length === 0 &&Maak eerst groepen (klassen) aan onder Organisatie.
} + {schooljaar && groepen.length > 0 && perDag.length === 0 &&Maak eerst algemene tijdvakken aan (Instellingen → Tijdvakken).
} + + {schooljaar && groepen.length > 0 && perDag.length > 0 && ( +
+
+
+
+
+ )}
+
+ {voltooiOpen && (
+ | Tijdvak | + {groepen.map((g) =>{g.naam} | )} +
|---|---|
| {rij.dag.label} | |
| {t.start_tijd?.slice(0, 5)} {t.naam} | + {groepen.map((g) => { + const cellblk = blokkenVan(t.id, g.id); + return ( +
+ {cellblk.map((b) => (
+
+
+ ))}
+
+
+ {b.activiteit_icoon || vakIcoon(b.activiteit_naam)} {b.activiteit_naam}
+
+
+ {b.subgroep && {b.doel_naam} }
+ {(b.lokaal_naam || b.begeleiders_namen.length > 0) && (
+ {[b.lokaal_naam, ...b.begeleiders_namen.map((x) => x.naam)].filter(Boolean).join(" · ")}
+ )}
+ |
+ );
+ })}
+
setVoltooiOpen(false)}>
+
+ )}
+
+ {cel && (
+ e.stopPropagation()}>
+
+
+
+
+
+ {conflictInfo.meldingen.length > 0 && Voltooien & periode inladen
De weekopzet wordt als rooster geplaatst in de gekozen periode. De opzet blijft als sjabloon bewaard.
Let op: er zijn nog {conflictInfo.meldingen.length} conflict(en) in de opzet. Je kunt toch inladen, maar los ze bij voorkeur eerst op.
}
+
+
+ {periodeKeuze === "_new" && (
+ <>
+
+
+
+
+ )}
+
+ {!preview && !wisInfo && (
+
+
+ {periodeKeuze !== "_new" && }
+
+
+ )}
+ {wisInfo && (
+ <>
+
+
+ {wisInfo.blokken.length} periode-blok(ken) ({wisInfo.van} – {wisInfo.tot}) worden uit het rooster verwijderd. Vaste (altijd geldige) blokken blijven staan.
+ {wisInfo.blokken.length > 0 && ( +-
+ {wisInfo.blokken.slice(0, 30).map((b) =>
- {b.doel_naam} · {b.activiteit_naam} ({b.tijdslot_label}) )} + {wisInfo.blokken.length > 30 &&
- …en nog {wisInfo.blokken.length - 30} } +
+
+
+
+
+ )}
+ {preview && (
+ <>
+
+
+ {preview.toevoegen.length} vak(ken) worden geplaatst voor periode {preview.van} – {preview.tot}.
+ {preview.verwijderen.length > 0 ? ( + <> +{preview.verwijderen.length} bestaande blok(ken) overlappen en worden verwijderd:
+-
+ {preview.verwijderen.slice(0, 30).map((b) =>
- {b.doel_naam} · {b.activiteit_naam} ({b.tijdslot_label}) )} + {preview.verwijderen.length > 30 &&
- …en nog {preview.verwijderen.length - 30} } +
Geen overlappende bestaande blokken.
} + {preview.conflicten.length > 0 ? ( + <> +{preview.conflicten.length} conflict(en) in het rooster ná toepassen (nieuwe + behouden blokken):
+-
+ {preview.conflicten.map((m, i) =>
- {m.tekst} )} +
✓ geen conflicten ná toepassen
} +
+
+
+
+
+ )}
+ setCel(null)}>
+
+
+ )}
+
+
+ );
+}
+
+/* -------------------------------- Urenoverzicht --------------------------- */
+export function UrenPage() {
+ const [schooljaren, setSchooljaren] = useState([]);
+ const [schooljaar, setSchooljaar] = useState("");
+ const [data, setData] = useState(null);
+ const [error, setError] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [groepFilter, setGroepFilter] = useState("");
+ const [vakFilter, setVakFilter] = useState("");
+ const [leerlingFilter, setLeerlingFilter] = useState("");
+ const [historie, setHistorie] = useState(null);
+ const [bewaarBusy, setBewaarBusy] = useState(false);
+
+ useEffect(() => {
+ listResource("schooljaren")
+ .then((j) => { setSchooljaren(j); if (j.length) setSchooljaar(String(j[0].id)); })
+ .catch((e) => setError(e.message));
+ }, []);
+ useEffect(() => {
+ if (!schooljaar) { setData(null); return; }
+ setLoading(true);
+ listResource("urenoverzicht", `?schooljaar=${schooljaar}`)
+ .then((d) => { setData(d); setError(null); })
+ .catch((e) => setError(e.message))
+ .finally(() => setLoading(false));
+ }, [schooljaar]);
+ function laadHistorie(sjid) {
+ if (!sjid) { setHistorie(null); return; }
+ listResource("uren-momentopnames", `?schooljaar=${sjid}`).then(setHistorie).catch(() => setHistorie(null));
+ }
+ useEffect(() => { laadHistorie(schooljaar); }, [schooljaar]);
+ async function bewaarMomentopname() {
+ if (!schooljaar) return;
+ setBewaarBusy(true);
+ try { await createResource("uren-momentopnames", { schooljaar: Number(schooljaar) }); laadHistorie(schooljaar); }
+ catch (e) { setError(e.message); }
+ finally { setBewaarBusy(false); }
+ }
+
+ const r1 = (n) => Math.round(n * 10) / 10;
+ const groepNamen = data ? [...new Set(data.per_groep.map((g) => g.groep))].sort() : [];
+ const vakNamen = data ? [...new Set(data.per_groep.flatMap((g) => g.vakken.map((v) => v.vak)))].sort() : [];
+
+ const perGroep = (data ? data.per_groep : [])
+ .filter((g) => !groepFilter || g.groep === groepFilter)
+ .map((g) => { const vakken = vakFilter ? g.vakken.filter((v) => v.vak === vakFilter) : g.vakken; return { ...g, vakken, totaal: r1(vakken.reduce((a, v) => a + v.uren, 0)) }; })
+ .filter((g) => g.vakken.length > 0);
+
+ const perLeerling = (data ? data.per_leerling : [])
+ .filter((l) => !leerlingFilter || l.leerling.toLowerCase().includes(leerlingFilter.toLowerCase()))
+ .filter((l) => !groepFilter || l.groep === groepFilter)
+ .filter((l) => !vakFilter || l.vakken.some((v) => v.vak === vakFilter))
+ .map((l) => { const vakken = vakFilter ? l.vakken.filter((v) => v.vak === vakFilter) : l.vakken; return { ...l, vakkenWeergave: vakken }; });
+
+ const filterActief = groepFilter || vakFilter || leerlingFilter;
+
+ return (
+ Schoolnaam & kleuren
+De schoolnaam verschijnt in de balk en op afdrukken. De kleuren bepalen het thema van de hele app (knoppen, tabs, accenten).
+
+
+
+
+
+
+
+
+ {opslaanOk && Opgeslagen ✓}
+
+
+ Logo
+Het logo verschijnt in elke roosterweergave en op afdrukken. Gebruik bij voorkeur een transparante PNG of SVG; een logo met een gevulde (witte) achtergrond valt op een gekleurde balk lelijk op.
+
+
+ {kwaliteit && (
+
+ {huis && huis.logo ? 
: Nog geen logo}
+
+
+
+ {huis && huis.logo && }
+
+ Toegestaan: PNG, SVG, JPG, GIF, WebP.
+
+ Kwaliteitscheck:
+ {kwaliteit.info && (kwaliteit.info.breedte || kwaliteit.info.formaat) && (
+
+ )}
+ Formaat {kwaliteit.info.formaat}{kwaliteit.info.breedte ? `, ${kwaliteit.info.breedte}×${kwaliteit.info.hoogte}px` : ""}{kwaliteit.info.transparant ? ", transparante achtergrond ✓" : ""}{kwaliteit.info.achtergrond ? `, achtergrond ${kwaliteit.info.achtergrond}` : ""}.
+ )}
+ {kwaliteit.waarschuwingen && kwaliteit.waarschuwingen.length > 0
+ ? - {kwaliteit.waarschuwingen.map((w, i) =>
- {w} )}
Geen problemen gevonden — mooi en netjes. ✓
}
+ Urenoverzicht
+Lesuren per groep en per leerling over het hele schooljaar. Vrije dagen, vakanties en studiedagen tellen niet mee; vervallen blokken zijn afgetrokken. Stage-uren tellen mee bij de leerling.
+
+
+
+
+ setLeerlingFilter(e.target.value)} />
+ {filterActief && }
+
+ {loading ? Laden…
: data && ( + <> +Per groep
+| Groep | Vak | Uren (schooljaar) |
|---|---|---|
| Geen resultaten. | ||
| {i === 0 ? {g.groep} : ""} | +{vakIcoon(v.vak)} {v.vak} | +{v.uren} u | +
| totaal | {g.totaal} u | +|
Per leerling
+| Leerling | Groep | Vakken | Stage | Totaal |
|---|---|---|---|---|
| Geen resultaten. | ||||
| {l.leerling} | +{l.groep || "—"} | +{l.vakkenWeergave.map((v) => `${v.vak} ${v.uren}u`).join(", ") || "—"} | +{l.stage_uren ? `${l.stage_uren} u` : "—"} | +{l.totaal} u | +
+
+ {historie && historie.momentopnames.length > 0 ? (
+ Geschiedenis
+ +| Leerling | {historie.momentopnames.map((m) =>{new Date(m.gemaakt_op).toLocaleDateString("nl-NL")} | )}
|---|---|
| {r.leerling} | + {historie.momentopnames.map((m) =>{r.totalen[m.id] != null ? `${r.totalen[m.id]} u` : "—"} | )} +
Nog geen momentopnames. Klik op "Bewaar huidige stand" om het verloop in de tijd te volgen.
} + + )} +
+
+ :
+ );
+ }
+
+ function dagdeelSecties(items, groot) {
+ const ocht = items.filter(({ t }) => (t.start_tijd || "") < "12:00");
+ const midd = items.filter(({ t }) => (t.start_tijd || "") >= "12:00");
+ const secties = [["Ochtend", "\u2600\uFE0F", ocht], ["Middag", "\uD83C\uDF24\uFE0F", midd]].filter(([, , arr]) => arr.length > 0);
+ return secties.map(([label, icon, arr]) => (
+ {t.start_tijd?.slice(0, 5)}
+ {b.activiteit_pictogram
+ ? {b.activiteit_icoon || vakIcoon(b.activiteit_naam)}
}
+ {b.activiteit_naam}
+
+
+ ));
+ }
+
+ return (
+ {icon} {label}
+ {arr.map((x) => blokKaart(x, groot))}
+ {ouder ? "Weekrooster" : "Mijn rooster"}
+
+
+ {schooljaren.length > 1 && (
+
+ )}
+
+
+
+
+ {!scopeId && Kies hierboven een {scopeType === "klas" ? "groep" : "leerling"} om het rooster te tonen.
} + {scopeId && ouder && ( +
+ {weekDatums.map((datum, i) => {
+ const { vrij, items } = dagBlokken(datum);
+ return (
+
+ )}
+ {scopeId && !ouder && (() => {
+ const datum = plusDagen(maandag, dagIdx);
+ const { vrij, items } = dagBlokken(datum);
+ return (
+
+
+ );
+ })}
+ {WEEKDAGEN[i].label} {fmtDM(datum)}
+ {vrij && {vrij.type_label}
}
+ {!vrij && items.length === 0 && —
}
+ {!vrij && dagdeelSecties(items, false)}
+
+
+ );
+ })()}
+
+
+
+ {vrij && {WEEKDAGEN[dagIdx].label} {fmtDM(datum)}
+
+ {vrij.type_label}{vrij.omschrijving ? `: ${vrij.omschrijving}` : ""}
}
+ {!vrij && items.length === 0 && Geen lessen op deze dag.
} + {!vrij && dagdeelSecties(items, true)} +Vak-wizard
+✓ Het vak is ingepland.
+
+ Vak-wizard
+-
+ {STAPPEN.map((label, i) =>
- i + 1 ? "done" : ""}>{i + 1}. {label} )} +
+
+ )}
+ {stap === 2 && (
+ Welk vak?
+ {schooljaren.length > 1 && ( + + )} +
+ {activiteiten.map((a) => (
+
+ ))}
+
+
+
+ )}
+ {stap === 3 && (
+ Voor wie?
+
+
+
+
+
+
+ )}
+ {stap === 4 && (
+ Wanneer & waar?
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {stap === 5 && (
+ Wie begeleidt? (optioneel)
+
+ {medewerkers.map((m) => )}
+
+ setF({ ...f, opmerkingen: e.target.value })} />
+
+
+ )}
+
+ Klopt het zo?
+-
+
- Vak: {naamVan(activiteiten, f.activiteit)} +
- Voor: {naamVan(doelOpties, f.doel)} ({f.doel_type}) +
- Wanneer: {tslabel(f.tijdslot)} +
- Waar: {f.lokaal ? naamVan(lokalen, f.lokaal) : (f.locatie ? naamVan(locaties, f.locatie) : "—")} +
- Begeleiding: {f.begeleiders.length ? f.begeleiders.map((id) => naamVan(medewerkers, id)).join(", ") : "—"} + {(f.geldig_van || f.geldig_tot) &&
- Periode: {f.geldig_van || "…"} t/m {f.geldig_tot || "…"} } +
+ {stap > 1 && }
+ {stap < 5 && }
+ {stap === 5 && }
+
+ Personen toevoegen
+Voeg leerlingen of medewerkers toe — één voor één of in bulk (plakken of CSV-bestand).
+✓ {melding}
}
+
+
+
+
+ {modus === "enkel" && (
+
+ )}
+
+ {modus === "bulk" && (
+
+
+
+
+
+
Plak rijen of upload een CSV. Kolommen: voornaam, achternaam{isLeerling ? ", groep" : ""} (komma, puntkomma of tab). Een koprij is optioneel.
+
+
+ {isLeerling && }
+
+