Refactor school year button and enhance JavaScript bindings

- Updated the button for adding a new school year to have an ID for easier access.
- Changed the way IS_SUPERADMIN is defined to use JSON for better compatibility.
- Added event bindings for canceling and saving edits for schools in the JavaScript code.
- Introduced a new document for Google SSO instructions.

backend/templates/directeur.html

@@ -9,7 +9,7 @@
             --primary: #4f46e5; --primary-dark: #4338ca;
             --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
             --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
-            --gray-300: #d1d5db; --gray-500: #6b7280; --gray-600: #4b5563;
+            --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563;
             --gray-700: #374151; --gray-800: #1f2937;
             --status-groen: #10b981; --status-oranje: #f59e0b; --status-roze: #ec4899;
         }
@@ -150,6 +150,46 @@
         .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.35rem; }
         .form-group input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.9rem; }
         .modal-buttons { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
+
+        /* Tab navigatie */
+        .tab-btn {
+            padding: 0.5rem 1rem; border: none; border-radius: 8px 8px 0 0;
+            background: var(--gray-100); color: var(--gray-600);
+            font-size: 0.875rem; font-weight: 500; cursor: pointer;
+            transition: all 0.15s; border-bottom: 2px solid transparent;
+        }
+        .tab-btn:hover { background: var(--gray-200); color: var(--gray-800); }
+        .tab-btn.active {
+            background: white; color: var(--primary);
+            border-bottom: 2px solid var(--primary);
+            box-shadow: 0 -2px 8px rgba(79,70,229,0.08);
+        }
+
+        /* Version badge */
+        .version-badge {
+            font-size: 0.7rem; background: rgba(255,255,255,0.25);
+            padding: 0.15rem 0.5rem; border-radius: 9999px; font-weight: 500;
+            vertical-align: middle;
+        }
+
+        /* Klasoverzicht progress */
+        .klas-progress-row {
+            display: flex; align-items: center; gap: 0.75rem;
+            margin-bottom: 0.5rem;
+        }
+        .klas-label { font-size: 0.82rem; color: var(--gray-600); min-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .klas-progress-bar {
+            flex: 1; height: 10px; background: var(--gray-200);
+            border-radius: 5px; overflow: hidden; display: flex;
+        }
+        .klas-pct { font-size: 0.78rem; color: var(--gray-500); min-width: 36px; text-align: right; }
+
+        /* Vergelijking progress bars */
+        .vergelijk-bar-wrap {
+            height: 12px; background: var(--gray-200);
+            border-radius: 4px; overflow: hidden;
+            margin-bottom: 0.2rem;
+        }
     
 @media (prefers-color-scheme: dark) {
     :root {
@@ -167,18 +207,20 @@
 
     body { background: #0f172a; color: #e2e8f0; }
 
-    /* Kaarten en secties */
+    /* Kaarten en secties - NIET de gradient header! */
     .card, .section, .stat-card, .school-card,
     .table-container, .filters-container, .legend-container,
     .stats-bar .stat-card, .stats-overview, .vak-stats,
     .import-section, .detail-section, .filters-bar,
-    .header:not([class*="gradient"]) {
+    .teachers-section {
         background: #1e293b !important;
         border-color: #334155 !important;
     }
 
-    /* Header kaart in leerkracht.html */
-    .header { background: #1e293b !important; }
+    /* Tab knoppen */
+    .tab-btn { background: #162032 !important; color: #94a3b8 !important; }
+    .tab-btn:hover { background: #1e293b !important; color: #e2e8f0 !important; }
+    .tab-btn.active { background: #1e293b !important; color: #a5b4fc !important; border-bottom-color: #6366f1 !important; }
 
     /* Tabellen */
     thead, th { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }
@@ -276,8 +318,8 @@
     .vak-card-header h3  { color: #e2e8f0 !important; }
     .vak-card-stats      { color: #94a3b8 !important; }
 
-    /* Progress bars achtergrond */
-    .progress-bar { background: #334155 !important; }
+    /* Klas progress bars achtergrond */
+    .progress-bar, .klas-progress-bar, .vergelijk-bar-wrap { background: #334155 !important; }
 
     /* Vak card */
     .vak-card { background: #162032 !important; }
@@ -414,14 +456,14 @@
     </div>
 
     <!-- Tab navigatie -->
-    <div style="display:flex;gap:.25rem;margin-bottom:.5rem;">
+    <div style="display:flex;gap:.25rem;margin-bottom:0;">
         <button class="tab-btn active" id="tab-doelen">📋 Doelen</button>
         <button class="tab-btn" id="tab-klassen">🏫 Klasoverzicht</button>
         <button class="tab-btn" id="tab-vergelijk">⚖️ Klasvergelijking</button>
     </div>
 
     <!-- Tab: Doelen -->
-    <div id="panel-doelen" class="section">
+    <div id="panel-doelen" class="section" style="border-radius:0 12px 12px 12px;">
 
         <!-- Legenda -->
         <div class="legend-container">
@@ -534,14 +576,14 @@
     </div><!-- /panel-doelen -->
 
     <!-- Tab: Klasoverzicht -->
-    <div id="panel-klassen" class="section" style="display:none;">
+    <div id="panel-klassen" class="section" style="display:none;border-radius:0 12px 12px 12px;">
         <div id="klasOverzichtContent">
             <p style="color:var(--gray-400);font-style:italic;">Laden...</p>
         </div>
     </div>
 
     <!-- Tab: Klasvergelijking -->
-    <div id="panel-vergelijk" class="section" style="display:none;">
+    <div id="panel-vergelijk" class="section" style="display:none;border-radius:0 12px 12px 12px;">
         <div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
             <div class="filter-group">
                 <label>Klas A</label>
@@ -577,6 +619,33 @@
 <!-- Modal: leerkracht toevoegen -->
 <div class="modal-overlay" id="addTeacherModal">
     <div class="modal">
+        <h2>👤 Leerkracht toevoegen</h2>
+        <div class="form-group">
+            <label>Voornaam</label>
+            <input type="text" id="newFirstName" placeholder="Voornaam...">
+        </div>
+        <div class="form-group">
+            <label>Achternaam</label>
+            <input type="text" id="newLastName" placeholder="Achternaam...">
+        </div>
+        <div class="form-group">
+            <label>E-mailadres</label>
+            <input type="email" id="newEmail" placeholder="naam@school.be">
+        </div>
+        <div class="form-group">
+            <label>Wachtwoord (tijdelijk)</label>
+            <input type="password" id="newPassword" placeholder="Minimaal 8 tekens...">
+        </div>
+        <div id="addTeacherError" style="display:none;color:var(--danger);font-size:0.85rem;margin-top:0.5rem;"></div>
+        <div class="modal-buttons">
+            <button id="btnCancelTeacher" class="btn btn-secondary">Annuleren</button>
+            <button id="btnConfirmTeacher" class="btn btn-primary">Toevoegen</button>
+        </div>
+    </div>
+</div>
+
+<div class="notification" id="notification"></div>
+
 <script nonce="{{ csp_nonce() }}">
 function bind(id, ev, fn) {
     const el = document.getElementById(id);
@@ -607,6 +676,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     bind('filterSectie', 'change', applyFilters);
     bind('filterSearch', 'input', applyFilters);
     document.querySelectorAll('.leeftijd-checkbox input').forEach(cb => cb.addEventListener('change', applyFilters));
+    // Vergelijk tab selects
+    bind('vergelijkKlasA', 'change', renderVergelijking);
+    bind('vergelijkKlasB', 'change', renderVergelijking);
+    bind('vergelijkVak',   'change', renderVergelijking);
     await loadUser();
     await loadJaren();
     await loadTeachers();
@@ -856,15 +929,23 @@ function applyFilters() {
     if (!overviewData) return;
     const vakFilter     = document.getElementById('filterVak').value;
     const teacherFilter = document.getElementById('filterTeacher').value;
+    const klasFilter    = document.getElementById('filterKlas')?.value || 'all';
     const statusFilter  = document.getElementById('filterStatus').value;
     const sectieFilter  = document.getElementById('filterSectie')?.value || 'all';
     const search        = document.getElementById('filterSearch').value.toLowerCase();
     const leeftijdFilter = [...document.querySelectorAll('.leeftijd-checkbox input:checked')].map(cb => cb.value);
 
-    const shownTeachers = teacherFilter === 'all'
+    // Filter leerkrachten op geselecteerde klas én op leerkrachtfilter
+    let shownTeachers = teacherFilter === 'all'
         ? overviewData.teachers
         : overviewData.teachers.filter(t => t.id == teacherFilter);
 
+    if (klasFilter !== 'all') {
+        shownTeachers = shownTeachers.filter(t =>
+            (t.classes || []).some(c => c.name === klasFilter)
+        );
+    }
+
     const shownVakken = vakFilter === 'all' ? Object.keys(allGoals) : [vakFilter];
 
     // Build header

backend/templates/leerkracht.html

@@ -54,9 +54,12 @@
         th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--gray-600); border-bottom: 2px solid var(--gray-200); white-space: nowrap; }
         td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
         tr:hover { background: var(--gray-50); }
-        tr.status-groen { background: var(--status-groen-bg); }
+        tr.status-groen  { background: var(--status-groen-bg); }
+        tr.status-groen:hover  { background: #a7f3d0; }
         tr.status-oranje { background: var(--status-oranje-bg); }
-        tr.status-roze { background: var(--status-roze-bg); }
+        tr.status-oranje:hover { background: #fde68a; }
+        tr.status-roze   { background: var(--status-roze-bg); }
+        tr.status-roze:hover   { background: #fbcfe8; }
         .status-selector { width: 32px; height: 32px; border-radius: 6px; border: 2px solid var(--gray-300); background: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: bold; transition: all 0.15s; }
         .status-selector:hover { transform: scale(1.1); }
         .status-selector.status-none { color: var(--gray-400); }
@@ -170,7 +173,8 @@
 
     /* Modals */
     .modal { background: #1e293b !important; color: #e2e8f0; }
-    .modal h2 { color: #f1f5f9; }
+    .modal-inner-box { background: #1e293b !important; color: #e2e8f0 !important; }
+    .modal h2, .modal-inner-box h2 { color: #f1f5f9; }
 
     /* Knoppen */
     .btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
@@ -269,6 +273,8 @@
     ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
     ::-webkit-scrollbar-thumb:hover { background: #475569; }
 }
+        .btn-primary { background: var(--primary); color: white; }
+        .btn-primary:hover { background: var(--primary-dark); }
         .btn-import { background: var(--warning); color: white; }
         .btn-import:hover { background: #d97706; }
     </style>
@@ -420,7 +426,7 @@
 
 <!-- Klassen modal -->
 <div id="klasModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center;">
-    <div style="background:var(--gray-800, white);border-radius:12px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.3);">
+    <div style="background:white;border-radius:12px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.3);" class="modal-inner-box">
         <h2 style="font-size:1.1rem;margin-bottom:.5rem;">📚 Mijn klassen instellen</h2>
         <p style="font-size:.85rem;color:var(--gray-400);margin-bottom:1rem;">
             Selecteer de klassen waarvoor jij beoordelingen invult.

backend/templates/login.html

@@ -27,6 +27,25 @@
         .logo h1 { font-size: 1.4rem; color: var(--gray-900, #1f2937); font-weight: 700; }
         .logo p { color: var(--gray-500, #6b7280); font-size: 0.85rem; margin-top: 0.25rem; }
 
+        .btn-google {
+            display: flex; align-items: center; justify-content: center; gap: 0.75rem;
+            width: 100%; padding: 0.8rem 1rem;
+            background: white; color: #1f2937;
+            border: 1px solid #d1d5db; border-radius: 8px;
+            font-size: 0.95rem; font-weight: 500;
+            text-decoration: none; transition: background 0.15s, box-shadow 0.15s;
+            margin-bottom: 0.75rem;
+        }
+        .btn-google:hover { background: #f9fafb; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
+        .btn-google svg   { flex-shrink: 0; }
+        .sso-divider {
+            display: flex; align-items: center; gap: 0.75rem;
+            margin: 0.5rem 0 0.75rem; color: #9ca3af; font-size: 0.8rem;
+        }
+        .sso-divider::before, .sso-divider::after {
+            content: ''; flex: 1; height: 1px; background: #e5e7eb;
+        }
+
         .btn-microsoft {
             width: 100%;
             padding: 0.85rem;
@@ -278,17 +297,39 @@
                 </svg>
                 Inloggen met Microsoft
             </a>
-            <p style="text-align:center; color:#6b7280; font-size:0.8rem;">
-                Log in met uw school Microsoft account
-            </p>
-        {% else %}
+        {% endif %}
+
+        {% if entra_configured and google_configured %}
+            <div class="sso-divider">of</div>
+        {% endif %}
+
+        {% if google_configured %}
+            <a href="/auth/google" class="btn-google">
+                <svg width="20" height="20" viewBox="0 0 48 48">
+                    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
+                    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
+                    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
+                    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
+                    <path fill="none" d="M0 0h48v48H0z"/>
+                </svg>
+                Inloggen met Google
+            </a>
+        {% endif %}
+
+        {% if not entra_configured and not google_configured %}
             <div class="not-configured">
-                <strong>Microsoft login niet geconfigureerd</strong><br><br>
-                Stel <code>MICROSOFT_CLIENT_ID</code> en <code>MICROSOFT_CLIENT_SECRET</code>
-                in de <code>.env</code> in om Entra login te activeren.
+                <strong>SSO login niet geconfigureerd</strong><br><br>
+                Stel <code>MICROSOFT_CLIENT_ID</code> of <code>GOOGLE_CLIENT_ID</code>
+                in de <code>.env</code> in om SSO login te activeren.
             </div>
         {% endif %}
 
+        {% if entra_configured or google_configured %}
+            <p style="text-align:center; color:#6b7280; font-size:0.8rem; margin-top:0.25rem;">
+                Log in met uw school account
+            </p>
+        {% endif %}
+
         <!-- Superadmin fallback — zichtbaar maar discreet -->
         <div class="superadmin-toggle">
             <button id="btnToggleSuperadmin">Platformbeheerder</button>

backend/templates/scholengroep_ict.html

@@ -151,7 +151,7 @@
     <div class="section">
         <div class="section-header">
             <h2>📅 Schooljaren</h2>
-            <button class="btn btn-primary btn-sm">+ Nieuw schooljaar</button>
+            <button id="btnAddJaar" class="btn btn-primary btn-sm">+ Nieuw schooljaar</button>
         </div>
         <p class="section-hint">
             Het actieve schooljaar geldt voor alle scholen tegelijk.
@@ -338,7 +338,7 @@ function bind(id, ev, fn) {
     if (el) el.addEventListener(ev, fn);
 }
 
-const IS_SUPERADMIN = {{ 'true' if is_superadmin else 'false' }};
+const IS_SUPERADMIN = {{ is_superadmin | tojson }};
 let schools = [];
 
 const SCHOOL_ROLLEN = [
@@ -357,6 +357,8 @@ document.addEventListener('DOMContentLoaded', async () => {
     bind('auditSearch', 'input', loadAuditLog);
     document.getElementById('btnCancelSchool') && bind('btnCancelSchool', 'click', closeModal);
     document.getElementById('btnSaveSchool') && bind('btnSaveSchool', 'click', addSchool);
+    document.getElementById('btnCancelEditSch') && bind('btnCancelEditSch', 'click', closeModal);
+    document.getElementById('btnSaveEditSch') && bind('btnSaveEditSch', 'click', saveSchool);
     document.getElementById('btnCancelSgIct') && bind('btnCancelSgIct', 'click', closeModal);
     document.getElementById('btnSaveSgIct') && bind('btnSaveSgIct', 'click', addSgIct);
     document.getElementById('btnCancelJaar') && bind('btnCancelJaar', 'click', closeModal);