From 653cc6cd7448efea00c3bdcf7e570d19b36ec724 Mon Sep 17 00:00:00 2001
From: Sam Geyskens <sam@geyskens.eu>
Date: Thu, 5 Mar 2026 23:41:05 +0100
Subject: [PATCH] fix: update class teacher assignment and enhance UI for
 teacher selection

---
 backend/routes/api.py            |  2 +-
 backend/templates/directeur.html | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/backend/routes/api.py b/backend/routes/api.py
index 53911ab..d1d4668 100644
--- a/backend/routes/api.py
+++ b/backend/routes/api.py
@@ -475,7 +475,7 @@ def set_class_teachers(class_id):
         User.school_id == current_user.school_id,
         User.is_active == True,
     ).all()
-    klas.users = teachers
+    klas.teachers = teachers
     audit_log('class.user_assignment', 'class', target_id=str(class_id),
               detail={'class_name': klas.name, 'teacher_ids': user_ids,
                       'teacher_names': [t.full_name for t in teachers]})
diff --git a/backend/templates/directeur.html b/backend/templates/directeur.html
index 861f389..43cc9b0 100644
--- a/backend/templates/directeur.html
+++ b/backend/templates/directeur.html
@@ -114,6 +114,11 @@
             .btn-secondary { background:#334155!important;color:#e2e8f0!important; }
             .diff-row-same   { background:#064e3b!important; }
             .diff-row-differ { background:#451a03!important; }
+            #koppelingModal > div { background:#1e293b!important;color:#e2e8f0!important; }
+            #koppelingCheckboxes label { color:#e2e8f0!important; }
+            #koppelingCheckboxes label:hover { background:#263548!important; }
+            #koppelingCheckboxes span { color:#94a3b8!important; }
+            #koppelingCheckboxes input[type=checkbox] { accent-color:var(--primary); }
         }
     </style>
 </head>
@@ -456,6 +461,8 @@ function renderKlasProgress() {
     const klassen = overviewData.classes || [];
     const byClass = overviewData.assessments_by_class || {};
     if (!klassen.length) { el.innerHTML = '<div class="empty">Geen klassen</div>'; return; }
+    // Filter op leerkrachten (niet directeurs/ICT)
+    const teacherUsers = allUsers.filter(u => u.role === 'teacher' || u.role === 'director');
     el.innerHTML = '<div class="vak-grid">' + klassen.map(k => {
         const vakken = byClass[k.id] || {};
         let g=0,o=0,r=0;
@@ -728,6 +735,8 @@ async function renderKoppelingTab() {
         if (res.ok) { const d = await res.json(); allUsers = d.users || []; }
     } catch(e) { console.warn('Kon gebruikers niet laden'); }
 
+    // Filter op leerkrachten (niet directeurs/ICT)
+    const teacherUsers = allUsers.filter(u => u.role === 'teacher' || u.role === 'director');
     el.innerHTML = '<div class="vak-grid">' + klassen.map(k => {
         const teachers = (k.teachers||[]).map(t => t.full_name).join(', ') || '<em style="color:var(--gray-400)">Geen leerkrachten</em>';
         return `<div class="vak-card" style="cursor:pointer;" data-action="openKoppeling" data-id="${k.id}" data-name="${k.name.replace(/"/g,'&quot;')}" data-teachers="${JSON.stringify((k.teachers||[]).map(t=>t.id)).replace(/"/g,'&quot;')}">
@@ -750,10 +759,11 @@ document.addEventListener('click', function(e) {
     document.getElementById('koppelingModalTitle').textContent = `Leerkrachten voor ${name}`;
 
     const container = document.getElementById('koppelingCheckboxes');
-    if (!allUsers.length) {
+    const teacherUsers = allUsers.filter(u => u.role === 'teacher' || u.role === 'director');
+    if (!teacherUsers.length) {
         container.innerHTML = '<em style="color:var(--gray-400)">Geen leerkrachten beschikbaar. Voeg eerst leerkrachten toe via Gebruikersbeheer.</em>';
     } else {
-        container.innerHTML = allUsers.map(u => `
+        container.innerHTML = teacherUsers.map(u => `
             <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.35rem;border-radius:4px;">
                 <input type="checkbox" value="${u.id}" ${teachers.includes(u.id)?'checked':''}>
                 <span>${u.full_name} <span style="color:var(--gray-400);font-size:.8rem;">(${u.email})</span></span>