- {losseMedewerkers.map((m) => chip(m, "medewerker", null))}
- {losseMedewerkers.length === 0 &&
— allemaal ingedeeld —}
+ )}
+ {toonRol("medewerker") && (
+
+
Personeel
+
+ {losseMedewerkers.map((m) => chip(m, "medewerker", null))}
+ {losseMedewerkers.length === 0 && — allemaal ingedeeld —}
+
-
@@ -2032,7 +2113,7 @@ export function RoosterScherm({ mode }) {
>
{edit && startDrag(e, b)} onClick={(e) => e.stopPropagation()} title="Sleep naar ander tijdslot">⠿}
- {vakIcoon(b.activiteit_naam)} {b.activiteit_naam}
+ {b.activiteit_icoon || vakIcoon(b.activiteit_naam)} {b.activiteit_naam}
{edit && }
{edit && }
@@ -2067,7 +2148,7 @@ export function RoosterScherm({ mode }) {
>
{edit && startDrag(e, b)} onClick={(e) => e.stopPropagation()} title="Sleep naar ander tijdslot">⠿}
- {vakIcoon(b.activiteit_naam)} {b.activiteit_naam}
+ {b.activiteit_icoon || vakIcoon(b.activiteit_naam)} {b.activiteit_naam}
{edit && }
{edit && }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index b5c58b3..3ebf537 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -408,3 +408,15 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.indeling-layout { grid-template-columns: 1fr; }
.indeling-pool { position: static; }
}
+
+/* Groepsindeling: filter + multi-select */
+.indeling-toolbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
+.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
+.seg { border: 0; background: var(--panel); padding: 6px 12px; cursor: pointer; font: inherit; color: var(--ink); border-right: 1px solid var(--line); }
+.seg:last-child { border-right: 0; }
+.seg.on { background: var(--brand); color: #fff; }
+.selectie-bar { position: sticky; top: 8px; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
+.selectie-bar select { min-width: 220px; }
+.chip-sel { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 0; line-height: 1; color: inherit; }
+.chip-persoon.geselecteerd { outline: 2px solid var(--brand); outline-offset: 1px; }
+.icoon-input { width: 60px; text-align: center; }