From cc32e0b7ef7a90e1de41b73d48fe7d1b539fae00 Mon Sep 17 00:00:00 2001
From: bes-r <27369668+bes-r@users.noreply.github.com>
Date: Wed, 17 Jun 2026 14:05:14 +0200
Subject: [PATCH] Dagdeel-indeling (ochtend/middag) in leerling- en
 ouderweergave

---
 ROADMAP.md              |  5 +++--
 frontend/src/pages.jsx  | 16 ++++++++++++++--
 frontend/src/styles.css | 11 ++++++++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index f1c4c9b..658d12f 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -115,8 +115,9 @@ volgt.
 - [x] **Grote leerlingweergave** (één dag, groot pictogram + vakkleur) en
       **ouderweergave** (weekoverzicht), per leerling of groep.
 - [x] Vakkleur duidelijk gebruikt in de weergaven.
-- [ ] Later: pictogrammen ook per losse activiteit/stap binnen een dag; dagdeel-
-      indeling met picto's.
+- [x] **Dagdeel-indeling (Ochtend/Middag)** met koppen + scheidingslijn in de
+      leerling- en ouderweergave (grens 12:00).
+- [ ] Later: pictogrammen ook per losse activiteit/stap binnen een dagdeel.
 
 ## Later
 
diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx
index 2e7b3f6..f03a8f3 100644
--- a/frontend/src/pages.jsx
+++ b/frontend/src/pages.jsx
@@ -2773,6 +2773,18 @@ export function EenvoudigRooster({ mode }) {
     );
   }
 
+  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]) => (
+      <div className="ez-dagdeel" key={label}>
+        <div className="ez-dagdeel-kop"><span className="ez-dagdeel-icon">{icon}</span> {label}</div>
+        <div className="ez-dagdeel-blokken">{arr.map((x) => blokKaart(x, groot))}</div>
+      </div>
+    ));
+  }
+
   return (
     <section className="ez">
       <h1>{ouder ? "Weekrooster" : "Mijn rooster"}</h1>
@@ -2805,7 +2817,7 @@ export function EenvoudigRooster({ mode }) {
                 <div className="ez-dag-kop">{WEEKDAGEN[i].label}<span className="muted"> {fmtDM(datum)}</span></div>
                 {vrij && <div className="ez-vrij">{vrij.type_label}</div>}
                 {!vrij && items.length === 0 && <div className="muted small">—</div>}
-                {!vrij && items.map((x) => blokKaart(x, false))}
+                {!vrij && dagdeelSecties(items, false)}
               </div>
             );
           })}
@@ -2823,7 +2835,7 @@ export function EenvoudigRooster({ mode }) {
             </div>
             {vrij && <div className="ez-vrij groot">{vrij.type_label}{vrij.omschrijving ? `: ${vrij.omschrijving}` : ""}</div>}
             {!vrij && items.length === 0 && <p className="muted">Geen lessen op deze dag.</p>}
-            {!vrij && <div className="ez-dag-blokken">{items.map((x) => blokKaart(x, true))}</div>}
+            {!vrij && dagdeelSecties(items, true)}
           </div>
         );
       })()}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 0aeed8e..85971d2 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -454,9 +454,18 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .ez-dag-titel { font-size: 24px; font-weight: 800; }
 .btn.groot { font-size: 24px; padding: 8px 20px; }
 .ez-dag-blokken { display: flex; flex-direction: column; gap: 14px; }
-.ez-dag-blokken .ez-blok.groot { flex-direction: row; justify-content: flex-start; gap: 18px; padding: 16px 20px; border-width: 4px; }
+.ez-blok.groot { flex-direction: row; justify-content: flex-start; gap: 18px; padding: 16px 20px; border-width: 4px; }
 .ez-blok.groot .ez-tijd { font-size: 22px; min-width: 70px; }
 .ez-blok.groot .ez-picto { width: 84px; height: 84px; }
 .ez-blok.groot .ez-emoji { font-size: 64px; }
 .ez-blok.groot .ez-vak { font-size: 26px; }
 .ez-vrij.groot { font-size: 22px; padding: 30px; }
+
+/* Dagdeel-indeling (ochtend/middag) in de eenvoudige weergave */
+.ez-dagdeel { margin-bottom: 16px; }
+.ez-dagdeel-kop { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; margin: 6px 0 8px; padding-bottom: 4px; border-bottom: 2px dashed var(--line); }
+.ez-dagdeel-icon { font-size: 22px; }
+.ez-dagdeel-blokken { display: flex; flex-direction: column; gap: 12px; }
+.ez-week .ez-dagdeel-kop { font-size: 13px; margin: 4px 0 6px; }
+.ez-week .ez-dagdeel-icon { font-size: 15px; }
+.ez-week .ez-dagdeel-blokken { gap: 8px; }