perioderooster: resulterende conflicten in voltooien-preview tonen

frontend/src/pages.jsx

@@ -2870,8 +2870,15 @@ export function PeriodeRoosterPage() {
     try {
       const live = await listResource("roosterblokken", `?schooljaar=${schooljaar}`); // sjabloon=False
       const keys = new Set(blokken.map(doelKey));
-      const verwijderen = live.filter((b) => keys.has(doelKey(b)) && overlaptPeriode(b, van, tot));
+      const overlappend = live.filter((b) => overlaptPeriode(b, van, tot));
-      setPreview({ toevoegen: blokken, verwijderen, van, tot });
+      const verwijderen = overlappend.filter((b) => keys.has(doelKey(b)));
+      const behouden = overlappend.filter((b) => !keys.has(doelKey(b)));
+      // Resultaat na toepassen = behouden bestaande blokken + nieuwe periodeblokken
+      // (met de periodedatums). Zelfde conflictcheck als het Rooster.
+      const nieuwe = blokken.map((b) => ({ ...b, geldig_van: van, geldig_tot: tot }));
+      const resultaat = [...behouden, ...nieuwe];
+      const resConflict = berekenRoosterConflicten(resultaat, ctx, tijdsloten);
+      setPreview({ toevoegen: blokken, verwijderen, conflicten: resConflict.meldingen, van, tot });
       setError(null);
     } catch (e) { setError(e.message); }
   }
@@ -3020,6 +3027,14 @@ export function PeriodeRoosterPage() {
                       </ul>
                     </>
                   ) : <p className="muted small">Geen overlappende bestaande blokken.</p>}
+                  {preview.conflicten.length > 0 ? (
+                    <>
+                      <p className="fout"><b>{preview.conflicten.length}</b> conflict(en) in het rooster ná toepassen (nieuwe + behouden blokken):</p>
+                      <ul className="conflict-lijst">
+                        {preview.conflicten.map((m, i) => <li key={i} className={m.ernst === "fout" ? "fout" : "waarschuwing"}>{m.tekst}</li>)}
+                      </ul>
+                    </>
+                  ) : <p className="wm-status ok" style={{ display: "inline-block", marginTop: 4 }}>✓ geen conflicten ná toepassen</p>}
                 </div>
                 <div className="editor-actions">
                   <button type="button" className="btn primary" disabled={applyBezig} onClick={bevestigVoltooien}>{applyBezig ? "Bezig…" : `Toepassen (${preview.verwijderen.length} verwijderen, ${preview.toevoegen.length} plaatsen)`}</button>