From 8841fd5698957db112f39afe8963eb668060b8d3 Mon Sep 17 00:00:00 2001
From: bes-r <27369668+bes-r@users.noreply.github.com>
Date: Sun, 14 Jun 2026 14:05:23 +0200
Subject: [PATCH] Roostermaker: tab Indeling (hoofdgroep -> subgroepen in
 kolommen met vakken en verantwoordelijke), subgroep toevoegen vanuit de maker

---
 README.md               |   4 +-
 ROADMAP.md              |   5 +-
 frontend/src/pages.jsx  | 101 ++++++++++++++++++++++++++++++++++++++++
 frontend/src/styles.css |   8 ++++
 4 files changed, 115 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e6da926..b256890 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,9 @@ Er zijn twee rooster-schermen: **Rooster** (alleen-lezen weergave, om te bekijke
 en af te drukken) en **Roostermaker** (de aanpasser met drag-and-drop, tabs en
 conflictdetectie). In de Roostermaker open je een blok met een **klik** om het te
 bewerken (vak, locatie, doelgroep, begeleiders, opmerking) of te **kopiëren** naar
-andere tijden/dagen. Beide schermen hebben een **scope-filter** (alles / per klas /
+andere tijden/dagen. De tab **Indeling** verdeelt een hoofdgroep (of leerplein)
+kolomsgewijs in subgroepen, met per subgroep de vakken en de verantwoordelijke(n),
+en je kunt er direct subgroepen toevoegen. Beide schermen hebben een **scope-filter** (alles / per klas /
 per leerplein / per leerling / per personeel); de module **Printen/Exporteren**
 voegt — als die aanstaat — een subtiele **Afdrukken**-knop toe die het (gefilterde)
 weekrooster printvriendelijk afdrukt of als PDF bewaart.
diff --git a/ROADMAP.md b/ROADMAP.md
index d0a7f2a..78ba794 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -12,8 +12,9 @@ volgt.
       bewerkpaneel.
 - [x] **Snelle inline-aanpassing per blok**: vak/activiteit, locatie, doelgroep
       (groep/subgroep/leerling), begeleiders en opmerking wijzigen in het paneel.
-  - [ ] Vanuit het vak/blok direct een **subgroep aanmaken** (zonder naar het
-        Subgroepen-scherm te gaan).
+  - [x] Vanuit de Roostermaker (tab **Indeling**) direct **subgroepen aanmaken**
+        onder een hoofdgroep, met verantwoordelijke(n) — kolomsgewijs overzicht
+        van subgroepen, vakken en wie verantwoordelijk is.
 - [ ] **Sneltoetsen** voor veelgebruikte acties (bv. nieuw blok, kopiëren,
       verwijderen, week vooruit/terug, opslaan).
 - [ ] **Rol van een begeleider beter zichtbaar** in de roostermaker (bv. functie/
diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx
index d355f99..151c4cf 100644
--- a/frontend/src/pages.jsx
+++ b/frontend/src/pages.jsx
@@ -1297,6 +1297,95 @@ function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
   );
 }
 
+/* ------------------------------- Groepsindeling --------------------------- */
+// Verdeel een hoofdgroep (of leerplein) 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: "", 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 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: hid, begeleiders: nieuw.begeleiders });
+      setNieuw({ naam: "", 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 (
+    <div>
+      <p className="muted">Kies een hoofdgroep of leerplein en verdeel die in subgroepen. Per subgroep zie je de vakken en wie verantwoordelijk is.</p>
+      <Foutmelding msg={error} />
+      <div className="rooster-balk">
+        <label className="veld">Type
+          <select value={type} onChange={(e) => { setType(e.target.value); setHoofdId(""); }}>
+            <option value="groep">Groep</option>
+            <option value="leerplein">Leerplein</option>
+          </select>
+        </label>
+        <select value={hoofdId} onChange={(e) => setHoofdId(e.target.value)}>
+          <option value="">— kies {type} —</option>
+          {opties.map((o) => <option key={o.id} value={o.id}>{o.naam}</option>)}
+        </select>
+      </div>
+
+      {hid && hoofd && (
+        <div className="indeling">
+          <div className="indeling-hoofd">{hoofd.naam} <span className="muted small">— {type}</span></div>
+          <div className="indeling-kolommen">
+            {subs.map((s) => (
+              <div className="indeling-kolom" key={s.id}>
+                <div className="indeling-kop">{s.naam}</div>
+                <div className="small">👤 {s.begeleiders_namen && s.begeleiders_namen.length ? s.begeleiders_namen.map((x) => x.naam).join(", ") : "geen verantwoordelijke"}</div>
+                <div className="small">📚 {vakkenVan(s.id).join(", ") || "nog geen vakken"}</div>
+                <div className="small muted">{s.aantal_leden} leerling(en)</div>
+                <button className="link danger small" onClick={() => verwijderSub(s.id)}>verwijderen</button>
+              </div>
+            ))}
+            {subs.length === 0 && <div className="muted">Nog geen subgroepen onder {hoofd.naam}.</div>}
+          </div>
+
+          {type === "groep" ? (
+            <form className="form-card" onSubmit={voegToe}>
+              <div className="muted small">Subgroep toevoegen onder {hoofd.naam}:</div>
+              <div className="form-row">
+                <input placeholder="Naam subgroep" value={nieuw.naam} required onChange={(e) => setNieuw({ ...nieuw, naam: e.target.value })} />
+                <button className="btn primary" type="submit">+ Subgroep</button>
+              </div>
+              <div className="leden-keuze">
+                <div className="muted small">Verantwoordelijke(n):</div>
+                <div className="chips">
+                  {medewerkers.map((m) => <button type="button" key={m.id} className={nieuw.begeleiders.includes(m.id) ? "chip on" : "chip"} onClick={() => toggleBeg(m.id)}>{m.volledige_naam}</button>)}
+                </div>
+              </div>
+            </form>
+          ) : (
+            <p className="muted small">Subgroepen toevoegen kan onder een groep (een leerplein bundelt bestaande subgroepen).</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 /* ---------------------------------- Rooster ------------------------------- */
 // Eén component met twee modi:
 //  - mode="view"  -> Rooster (alleen-lezen weergave, om te bekijken/printen)
@@ -1501,6 +1590,7 @@ export function RoosterScherm({ mode }) {
       {edit && (
         <div className="tabbar no-print">
           <button className={tab === "week" ? "tab on" : "tab"} onClick={() => setTab("week")}>Weekrooster</button>
+          <button className={tab === "indeling" ? "tab on" : "tab"} onClick={() => setTab("indeling")}>Indeling</button>
           <button className={tab === "conflicten" ? "tab on" : "tab"} onClick={() => setTab("conflicten")}>Conflicten</button>
           <button className={tab === "schooljaar" ? "tab on" : "tab"} onClick={() => setTab("schooljaar")}>Schooljaar</button>
           <button className={tab === "instellingen" ? "tab on" : "tab"} onClick={() => setTab("instellingen")}>Instellingen</button>
@@ -1612,6 +1702,17 @@ export function RoosterScherm({ mode }) {
         </div>
       )}
 
+      {edit && tab === "indeling" && (
+        <Groepsindeling
+          groepen={groepen}
+          leerpleinen={leerpleinen}
+          subgroepen={subgroepen}
+          medewerkers={medewerkers}
+          blokken={blokken}
+          onWijzig={async () => { try { setSubgroepen(await listResource("subgroepen")); } catch (e) { setError(e.message); } }}
+        />
+      )}
+
       {schooljaar && tab === "conflicten" && <Conflicten schooljaar={schooljaar} />}
 
       {tab === "schooljaar" && (
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 4ec51a6..2cf03da 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -147,6 +147,14 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 
 .drag-ghost { position: fixed; z-index: 1000; pointer-events: none; background: var(--brand); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
 
+/* --- Groepsindeling --- */
+.indeling { margin-top: 12px; }
+.indeling-hoofd { background: var(--brand); color: #fff; border-radius: 10px; padding: 12px 16px; font-weight: 700; font-size: 16px; text-align: center; }
+.indeling-kolommen { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 12px 0 16px; }
+.indeling-kolom { border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 10px; padding: 10px 12px; background: var(--panel); display: flex; flex-direction: column; gap: 4px; }
+.indeling-kop { font-weight: 600; margin-bottom: 2px; }
+@media (max-width: 700px) { .indeling-kolommen { grid-template-columns: 1fr; } }
+
 /* --- Blok-bewerker (modal) --- */
 .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 900; overflow: auto; }
 .modal { background: var(--panel); border-radius: 12px; padding: 18px 20px; width: min(560px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.3); }