Add roadmap management feature with database schema and user management

- Implemented roadmap.php for displaying and managing roadmap items with filters for quarter and status.
- Created schema.sql to define the database structure for users, invites, daily plans, tasks, brainstorm sessions, brainstorm cards, roadmap items, and integrations.
- Developed users.php for admin panel to manage team members and invitations, including functionality to create and revoke invites.

.env.example

@@ -0,0 +1,12 @@
+# MariaDB Verbinding
+DB_HOST="127.0.0.1"
+DB_PORT="3306"
+DB_NAME="fociz"
+DB_USER="root"
+DB_PASS="uw_wachtwoord"
+
+# Applicatie URL (voor uitnodigingslinks)
+APP_URL="https://uw-domein.nl"
+
+# Applicatie Geheime Sleutel (willekeurige tekenreeks)
+APP_SECRET="fociz-maria-db-super-secret-key-998877"

.gitignore

@@ -0,0 +1,10 @@
+# Environment
+.env
+.env*.local
+
+# Systeem & Editor
+.DS_Store
+Thumbs.db
+*.log
+.vscode/
+.idea/

.htaccess

@@ -0,0 +1,16 @@
+# Fociz Apache Configuratie
+DirectoryIndex index.php index.html
+
+# UTF-8 standaard
+AddDefaultCharset UTF-8
+
+# Blokkeer directe toegang tot SQL schema en configuratiebestanden
+<FilesMatch "^(schema\.sql|\.env|\.git.*)$">
+    Order allow,deny
+    Deny from all
+</FilesMatch>
+
+# PHP foutmeldingen in productie (kan uitgeschakeld worden indien gewenst)
+php_flag display_errors Off
+php_value error_reporting E_ALL
+

README.md

@@ -0,0 +1,86 @@
+# Fociz — Focus, Dagplanning, Brainstorm & Roadmap Systeem
+
+Fociz is een compleet, modern webplatform gebouwd in **PHP 8 & MariaDB** voor dagplanning, werkstructurering, interactieve brainstormsessies die met één klik omgezet kunnen worden in een roadmap, en koppelingen met Outlook, Teams en Jira.
+
+---
+
+## 🔒 Beveiliging & Toegangsbeheer
+
+- **Strikt afgesloten**: Geen openbare registratie. Enkel toegankelijk na inloggen met tweetrapsauthenticatie (2FA).
+- **First-run Admin Setup (`/auth/setup.php`)**:
+  - Bij het allereerste gebruik detecteert Fociz automatisch dat er nog geen beheerder bestaat en start de setup wizard.
+  - De beheerder voert naam, e-mail en wachtwoord in en scant de 2FA QR-code met bijv. **Google Authenticator**, **Microsoft Authenticator** of **1Password**.
+  - Na verificatie van de 6-cijferige code wordt de beheerder opgeslagen en wordt `/auth/setup.php` definitief vergrendeld.
+- **Invite-only Registratie (`/auth/invite.php?token=...`)**:
+  - Nieuwe collega's kunnen enkel toetreden met een unieke uitnodigingslink aangemaakt door de beheerder (`/users.php`).
+  - Dwingt direct het instellen van een wachtwoord en 2FA-registratie af.
+- **Inloggen (`/auth/login.php`)**:
+  - Stap 1: E-mailadres & wachtwoord (`password_hash` / `password_verify`).
+  - Stap 2: 6-cijferige TOTP verificatiecode (of herstelcode).
+
+---
+
+## 🚀 Kernmodules
+
+1. **Dagplanning & Focus (`/planner.php`)**:
+   - **Dagdoel**: Leg uw nummer 1 focuspunt van de dag vast met één klik.
+   - **Focus Modus**: Ingebouwde Pomodoro/Stopwatch timer (25 min Focus, 50 min Deep Work, 5 min Pauze) met visuele voortgang en taakselectie.
+   - **Dagtaken & Prioriteiten**: Taken indelen op prioriteit (P1 Brandend, P2 Belangrijk, P3 Regulier), snel toevoegen en afvinken.
+   - **Tijdlijn & Time-blocking**: Uuroverzicht (08:00 - 18:00) met time-blocking voor taken en gesynchroniseerde Outlook meetings.
+   - **Dagnotities**: Snel kladblok voor reflecties en memo's.
+
+2. **Brainstorm Canvas (`/brainstorm.php` & `/brainstorm_canvas.php`)**:
+   - Interactief whiteboard met sticky notes ingedeeld in 4 categorieën:
+     - 💡 **Ideeën & Concepten**
+     - ⚠️ **Knelpunten & Uitdagingen**
+     - 🚀 **Oplossingen & Features**
+     - ⚡ **Quick Wins**
+   - Stemmen (upvoting) op ideeën.
+   - **Zet om naar Roadmap**: Selecteer brainstormkaarten en zet ze direct om naar planbare roadmap-items met kwartaal, deadline en prioriteit.
+
+3. **Roadmap & Tijdlijn (`/roadmap.php`)**:
+   - Kwartaaloverzicht (Q1, Q2, Q3, Q4) en statussen (Gepland, In Uitvoering, In Review, Voltooid).
+   - Voortgangsbalken (0 - 100%) en deadlines.
+   - Gekoppeld aan de oorspronkelijke brainstormkaarten en optioneel Jira Issue Keys (bijv. `FOC-101`).
+
+4. **Integraties Hub (`/integrations.php`)**:
+   - **Microsoft Outlook**: Synchroniseert agenda-afspraken direct naar de dagplanning.
+   - **Microsoft Teams**: Directe deelnamelinks naar online meetings en kanaalnotificaties.
+   - **Atlassian Jira**: Issues synchroniseren en direct met één klik inplannen als dagtaak.
+   - **Sandbox / Demo Modus**: Schakel met één vinkje tussen live productie en interactieve testdata.
+
+5. **Team & Invites Beheer (`/users.php` - Admin only)**:
+   - Genereer beveiligde uitnodigingslinks voor collega's met kopieerknop.
+   - Overzicht van actieve gebruikers, rollen en 2FA-status.
+
+---
+
+## 🛠️ Installatie op uw Server
+
+### 1. Bestanden uploaden
+Push of upload alle bestanden naar de gewenste webdirectory op uw server (bijv. `/var/www/fociz` of `public_html`).
+
+### 2. MariaDB Database configureren
+Pas de databasegegevens aan in `.env` (of direct in `config/config.php`):
+```env
+DB_HOST="127.0.0.1"
+DB_PORT="3306"
+DB_NAME="fociz"
+DB_USER="uw_mariadb_gebruiker"
+DB_PASS="uw_mariadb_wachtwoord"
+APP_URL="https://uw-domein.nl"
+```
+
+### 3. Automatische Tabellen Aanmaak
+U hoeft **niet** handmatig SQL-commando's uit te voeren: zodra u de website voor het eerst opent in uw browser, detecteert Fociz automatisch MariaDB en worden alle tabellen en relaties uit `schema.sql` vanzelf aangemaakt!
+
+*(Optioneel kunt u `schema.sql` ook zelf importeren via phpMyAdmin of de MariaDB CLI).*
+
+### 4. Eerste Beheerder Instellen
+1. Open uw browser en ga naar `https://uw-domein.nl`.
+2. U wordt automatisch doorverwezen naar `/auth/setup.php`.
+3. Vul uw naam, e-mailadres en gewenst wachtwoord in.
+4. Scan de QR-code met Google Authenticator of Microsoft Authenticator.
+5. Vul de 6-cijferige code in om te bevestigen.
+6. **Klaar!** U kunt nu direct inloggen en collega's uitnodigen.
+

api/brainstorm.php

@@ -0,0 +1,146 @@
+<?php
+/**
+ * AJAX API voor Brainstorm Sessies, Kaarten & Omzetten naar Roadmap
+ */
+
+require_once __DIR__ . '/../includes/auth.php';
+$user = require_auth();
+$db = get_db_connection();
+
+header('Content-Type: application/json');
+
+$action = $_GET['action'] ?? ($_POST['action'] ?? '');
+
+try {
+    // 1. Brainstormkaart toevoegen
+    if ($action === 'add_card') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $sessionId = (int)($data['session_id'] ?? 0);
+        $content = trim($data['content'] ?? '');
+        $category = $data['category'] ?? 'Ideeën';
+        $color = $data['color'] ?? 'amber';
+
+        if (empty($content)) {
+            echo json_encode(['error' => 'Inhoud is verplicht']);
+            exit;
+        }
+
+        $stmt = $db->prepare("
+            INSERT INTO brainstorm_cards (session_id, content, category, color, author_name, votes)
+            VALUES (?, ?, ?, ?, ?, 0)
+        ");
+        $stmt->execute([$sessionId, $content, $category, $color, $user['name']]);
+        $cardId = (int)$db->lastInsertId();
+
+        echo json_encode([
+            'success' => true,
+            'card' => [
+                'id' => $cardId,
+                'content' => $content,
+                'category' => $category,
+                'color' => $color,
+                'author_name' => $user['name'],
+                'votes' => 0,
+                'converted_to_roadmap_item_id' => null
+            ]
+        ]);
+        exit;
+    }
+
+    // 2. Stemmen / Upvote op kaart
+    if ($action === 'vote_card') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $cardId = (int)($data['card_id'] ?? 0);
+
+        $stmt = $db->prepare("UPDATE brainstorm_cards SET votes = votes + 1 WHERE id = ?");
+        $stmt->execute([$cardId]);
+
+        $stmtVotes = $db->prepare("SELECT votes FROM brainstorm_cards WHERE id = ?");
+        $stmtVotes->execute([$cardId]);
+        $votes = (int)$stmtVotes->fetchColumn();
+
+        echo json_encode(['success' => true, 'votes' => $votes]);
+        exit;
+    }
+
+    // 3. Kaart verwijderen
+    if ($action === 'delete_card') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $cardId = (int)($data['card_id'] ?? 0);
+
+        $stmt = $db->prepare("DELETE FROM brainstorm_cards WHERE id = ?");
+        $stmt->execute([$cardId]);
+
+        echo json_encode(['success' => true]);
+        exit;
+    }
+
+    // 4. Omzetten naar Roadmap!
+    if ($action === 'convert_to_roadmap') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $cardIds = $data['card_ids'] ?? [];
+        $quarter = $data['quarter'] ?? 'Q3';
+        $type = $data['type'] ?? 'FEATURE';
+        $priority = $data['priority'] ?? 'MEDIUM';
+        $dueDate = !empty($data['due_date']) ? $data['due_date'] : null;
+
+        if (empty($cardIds) || !is_array($cardIds)) {
+            echo json_encode(['error' => 'Selecteer ten minste één kaart om om te zetten.']);
+            exit;
+        }
+
+        $db->beginTransaction();
+
+        $convertedCount = 0;
+        foreach ($cardIds as $cardId) {
+            $cardId = (int)$cardId;
+            $stmtCard = $db->prepare("SELECT * FROM brainstorm_cards WHERE id = ?");
+            $stmtCard->execute([$cardId]);
+            $card = $stmtCard->fetch();
+
+            if ($card) {
+                // Maak titel (eerste zin of max 80 tekens)
+                $firstLine = explode("\n", trim($card['content']))[0];
+                $title = mb_substr($firstLine, 0, 80);
+
+                $stmtRoadmap = $db->prepare("
+                    INSERT INTO roadmap_items (title, description, type, status, quarter, priority, progress, due_date, origin_brainstorm_card_id, created_by_id)
+                    VALUES (?, ?, ?, 'PLANNED', ?, ?, 0, ?, ?, ?)
+                ");
+                $stmtRoadmap->execute([
+                    $title,
+                    $card['content'],
+                    $type,
+                    $quarter,
+                    $priority,
+                    $dueDate,
+                    $cardId,
+                    $user['id']
+                ]);
+                $roadmapId = (int)$db->lastInsertId();
+
+                // Koppel terug aan brainstorm kaart
+                $stmtUpdateCard = $db->prepare("UPDATE brainstorm_cards SET converted_to_roadmap_item_id = ? WHERE id = ?");
+                $stmtUpdateCard->execute([$roadmapId, $cardId]);
+
+                $convertedCount++;
+            }
+        }
+
+        $db->commit();
+
+        echo json_encode([
+            'success' => true,
+            'message' => "{$convertedCount} brainstorm items succesvol omgezet naar de Roadmap!",
+            'converted_count' => $convertedCount
+        ]);
+        exit;
+    }
+
+    echo json_encode(['error' => 'Onbekende actie']);
+} catch (Exception $e) {
+    if ($db->inTransaction()) $db->rollBack();
+    http_response_code(500);
+    echo json_encode(['error' => $e->getMessage()]);
+}
+

api/planner.php

@@ -0,0 +1,111 @@
+<?php
+/**
+ * AJAX API voor Dagplanning & Taken
+ */
+
+require_once __DIR__ . '/../includes/auth.php';
+$user = require_auth();
+$db = get_db_connection();
+
+header('Content-Type: application/json');
+
+$action = $_GET['action'] ?? ($_POST['action'] ?? '');
+$today = date('Y-m-d');
+
+try {
+    // 1. Dagdoel of notities opslaan
+    if ($action === 'save_goal') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $date = $data['date'] ?? $today;
+        $focusGoal = $data['focus_goal'] ?? '';
+        $notes = $data['notes'] ?? '';
+
+        $stmt = $db->prepare("
+            INSERT INTO daily_plans (user_id, plan_date, focus_goal, notes)
+            VALUES (?, ?, ?, ?)
+            ON DUPLICATE KEY UPDATE focus_goal = VALUES(focus_goal), notes = VALUES(notes)
+        ");
+        $stmt->execute([$user['id'], $date, $focusGoal, $notes]);
+
+        echo json_encode(['success' => true]);
+        exit;
+    }
+
+    // 2. Taak toevoegen
+    if ($action === 'add_task') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $title = trim($data['title'] ?? '');
+        $priority = in_array($data['priority'] ?? '', ['P1', 'P2', 'P3']) ? $data['priority'] : 'P2';
+        $timeBlockStart = $data['time_block_start'] ?? null;
+        $date = $data['date'] ?? $today;
+
+        if (empty($title)) {
+            echo json_encode(['error' => 'Titel is verplicht']);
+            exit;
+        }
+
+        // Haal of maak daily plan op
+        $stmtPlan = $db->prepare("
+            INSERT INTO daily_plans (user_id, plan_date)
+            VALUES (?, ?)
+            ON DUPLICATE KEY UPDATE id=LAST_INSERT_ID(id)
+        ");
+        $stmtPlan->execute([$user['id'], $date]);
+        $planId = $db->lastInsertId();
+
+        $stmt = $db->prepare("
+            INSERT INTO tasks (user_id, daily_plan_id, title, priority, time_block_start, status)
+            VALUES (?, ?, ?, ?, ?, 'TODO')
+        ");
+        $stmt->execute([$user['id'], $planId, $title, $priority, $timeBlockStart]);
+        $taskId = (int)$db->lastInsertId();
+
+        echo json_encode([
+            'success' => true,
+            'task' => [
+                'id' => $taskId,
+                'title' => $title,
+                'priority' => $priority,
+                'time_block_start' => $timeBlockStart,
+                'is_completed' => 0,
+                'status' => 'TODO'
+            ]
+        ]);
+        exit;
+    }
+
+    // 3. Taak status toggelen (voltooid / open)
+    if ($action === 'toggle_task') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $taskId = (int)($data['task_id'] ?? 0);
+        $isCompleted = !empty($data['is_completed']) ? 1 : 0;
+        $status = $isCompleted ? 'DONE' : 'TODO';
+
+        $stmt = $db->prepare("
+            UPDATE tasks SET is_completed = ?, status = ?
+            WHERE id = ? AND user_id = ?
+        ");
+        $stmt->execute([$isCompleted, $status, $taskId, $user['id']]);
+
+        echo json_encode(['success' => true]);
+        exit;
+    }
+
+    // 4. Taak verwijderen
+    if ($action === 'delete_task') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $taskId = (int)($data['task_id'] ?? 0);
+
+        $stmt = $db->prepare("DELETE FROM tasks WHERE id = ? AND user_id = ?");
+        $stmt->execute([$taskId, $user['id']]);
+
+        echo json_encode(['success' => true]);
+        exit;
+    }
+
+    echo json_encode(['error' => 'Onbekende actie']);
+} catch (Exception $e) {
+    http_response_code(500);
+    echo json_encode(['error' => $e->getMessage()]);
+}
+

api/roadmap.php

@@ -0,0 +1,93 @@
+<?php
+/**
+ * AJAX API voor Roadmap Beheer
+ */
+
+require_once __DIR__ . '/../includes/auth.php';
+$user = require_auth();
+$db = get_db_connection();
+
+header('Content-Type: application/json');
+
+$action = $_GET['action'] ?? ($_POST['action'] ?? '');
+
+try {
+    // 1. Roadmap item toevoegen
+    if ($action === 'add_item') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $title = trim($data['title'] ?? '');
+        $description = trim($data['description'] ?? '');
+        $quarter = $data['quarter'] ?? 'Q3';
+        $type = $data['type'] ?? 'FEATURE';
+        $priority = $data['priority'] ?? 'MEDIUM';
+        $dueDate = !empty($data['due_date']) ? $data['due_date'] : null;
+        $jiraKey = !empty($data['jira_key']) ? trim($data['jira_key']) : null;
+
+        if (empty($title)) {
+            echo json_encode(['error' => 'Titel is verplicht']);
+            exit;
+        }
+
+        $stmt = $db->prepare("
+            INSERT INTO roadmap_items (title, description, quarter, type, priority, status, progress, due_date, jira_issue_key, created_by_id)
+            VALUES (?, ?, ?, ?, ?, 'PLANNED', 0, ?, ?, ?)
+        ");
+        $stmt->execute([$title, $description, $quarter, $type, $priority, $dueDate, $jiraKey, $user['id']]);
+
+        echo json_encode(['success' => true]);
+        exit;
+    }
+
+    // 2. Status of voortgang bijwerken
+    if ($action === 'update_item') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $id = (int)($data['id'] ?? 0);
+        $status = $data['status'] ?? null;
+        $progress = isset($data['progress']) ? (int)$data['progress'] : null;
+        $jiraKey = isset($data['jira_key']) ? trim($data['jira_key']) : null;
+
+        $fields = [];
+        $params = [];
+
+        if ($status !== null) {
+            $fields[] = "status = ?";
+            $params[] = $status;
+        }
+        if ($progress !== null) {
+            $fields[] = "progress = ?";
+            $params[] = max(0, min(100, $progress));
+        }
+        if ($jiraKey !== null) {
+            $fields[] = "jira_issue_key = ?";
+            $params[] = $jiraKey;
+        }
+
+        if (!empty($fields)) {
+            $params[] = $id;
+            $sql = "UPDATE roadmap_items SET " . implode(", ", $fields) . " WHERE id = ?";
+            $stmt = $db->prepare($sql);
+            $stmt->execute($params);
+        }
+
+        echo json_encode(['success' => true]);
+        exit;
+    }
+
+    // 3. Item verwijderen
+    if ($action === 'delete_item') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        $id = (int)($data['id'] ?? 0);
+
+        $stmt = $db->prepare("DELETE FROM roadmap_items WHERE id = ?");
+        $stmt->execute([$id]);
+
+        echo json_encode(['success' => true]);
+        exit;
+    }
+
+    echo json_encode(['error' => 'Onbekende actie']);
+} catch (Exception $e) {
+    http_response_code(500);
+    echo json_encode(['error' => $e->getMessage()]);
+}
+

auth/invite.php

@@ -0,0 +1,185 @@
+<?php
+/**
+ * Fociz Uitnodiging Accepteren & Account Registratie met 2FA
+ */
+
+require_once __DIR__ . '/../includes/auth.php';
+start_secure_session();
+
+$token = trim($_GET['token'] ?? ($_POST['token'] ?? ''));
+$invite = validate_invite($token);
+
+if (!$invite) {
+    die("
+        <!DOCTYPE html>
+        <html lang='nl' class='dark'>
+        <head><script src='https://cdn.tailwindcss.com'></script></head>
+        <body class='bg-[#090d16] text-white min-h-screen flex items-center justify-center p-4'>
+            <div class='max-w-md bg-slate-900 border border-slate-800 rounded-2xl p-8 text-center'>
+                <h2 class='text-xl font-bold text-red-400 mb-2'>Ongeldige Uitnodiging</h2>
+                <p class='text-sm text-slate-400 mb-6'>Deze uitnodigingslink is ongeldig, verlopen of al eerder gebruikt.</p>
+                <a href='/auth/login.php' class='px-4 py-2 bg-emerald-500 text-slate-950 font-bold rounded-xl text-xs'>Naar Inloggen</a>
+            </div>
+        </body>
+        </html>
+    ");
+}
+
+$error = null;
+if (empty($_SESSION['invite_totp_secret'])) {
+    $_SESSION['invite_totp_secret'] = TOTP::generateSecret(16);
+}
+$secret = $_SESSION['invite_totp_secret'];
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $name = trim($_POST['name'] ?? '');
+    $password = $_POST['password'] ?? '';
+    $confirmPassword = $_POST['confirm_password'] ?? '';
+    $totpCode = trim($_POST['totp_code'] ?? '');
+
+    if (empty($name) || empty($password) || empty($totpCode)) {
+        $error = "Alle velden (inclusief 2FA verificatiecode) zijn verplicht.";
+    } elseif (strlen($password) < 8) {
+        $error = "Het wachtwoord moet minimaal 8 tekens lang zijn.";
+    } elseif ($password !== $confirmPassword) {
+        $error = "Wachtwoorden komen niet overeen.";
+    } elseif (!TOTP::verifyCode($secret, $totpCode)) {
+        $error = "Ongeldige 2FA verificatiecode. Controleer de tijd op uw smartphone.";
+    } else {
+        try {
+            $db = get_db_connection();
+            $passwordHash = password_hash($password, PASSWORD_DEFAULT);
+            $backupCodes = TOTP::generateBackupCodes(8);
+
+            $db->beginTransaction();
+
+            // 1. Maak gebruiker aan
+            $stmt = $db->prepare("
+                INSERT INTO users (name, email, password_hash, role, two_factor_secret, two_factor_enabled, backup_codes)
+                VALUES (?, ?, ?, ?, ?, 1, ?)
+            ");
+            $stmt->execute([
+                $name,
+                $invite['email'],
+                $passwordHash,
+                $invite['role'],
+                $secret,
+                json_encode($backupCodes)
+            ]);
+
+            $newUserId = (int)$db->lastInsertId();
+
+            // 2. Markeer invite als gebruikt
+            $stmtInvite = $db->prepare("UPDATE invites SET used_at = NOW() WHERE id = ?");
+            $stmtInvite->execute([$invite['id']]);
+
+            $db->commit();
+
+            // Start sessie
+            $_SESSION['user_id'] = $newUserId;
+            $_SESSION['user_name'] = $name;
+            $_SESSION['user_email'] = $invite['email'];
+            $_SESSION['user_role'] = $invite['role'];
+            $_SESSION['is_2fa_verified'] = true;
+            unset($_SESSION['invite_totp_secret']);
+
+            header('Location: /planner.php');
+            exit;
+        } catch (Exception $e) {
+            if ($db->inTransaction()) $db->rollBack();
+            $error = "Fout bij registreren: " . $e->getMessage();
+        }
+    }
+}
+
+$otpAuthUrl = TOTP::getOtpAuthUrl($invite['email'], $secret, 'Fociz');
+$qrCodeUrl = TOTP::getQrCodeUrl($otpAuthUrl, 180);
+$pageTitle = "Fociz — Uitnodiging Accepteren";
+?>
+<!DOCTYPE html>
+<html lang="nl" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= htmlspecialchars($pageTitle) ?></title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>body { background-color: #090d16; color: #f1f5f9; }</style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-[#090d16] via-[#0f172a] to-[#090d16]">
+
+<div class="w-full max-w-lg bg-slate-900/90 border border-slate-800 rounded-2xl shadow-2xl backdrop-blur-xl p-8">
+    <div class="text-center mb-8">
+        <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 mb-3 shadow-lg shadow-emerald-500/10">
+            <i data-lucide="shield-check" class="w-8 h-8"></i>
+        </div>
+        <h1 class="text-2xl font-bold text-white">Welkom bij Fociz</h1>
+        <p class="text-slate-400 text-sm mt-1">
+            Uitgenodigd door <strong class="text-slate-200"><?= htmlspecialchars($invite['inviter_name']) ?></strong> voor <span class="text-emerald-400 font-mono text-xs bg-emerald-500/10 px-2 py-0.5 rounded"><?= htmlspecialchars($invite['email']) ?></span>
+        </p>
+    </div>
+
+    <?php if ($error): ?>
+        <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/30 flex items-start space-x-3 text-red-400 text-sm">
+            <i data-lucide="alert-triangle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
+            <span><?= htmlspecialchars($error) ?></span>
+        </div>
+    <?php endif; ?>
+
+    <form method="POST" action="/auth/invite.php" class="space-y-4">
+        <input type="hidden" name="token" value="<?= htmlspecialchars($token) ?>">
+
+        <div>
+            <label class="block text-xs font-medium text-slate-300 mb-1">Uw naam</label>
+            <input type="text" name="name" required placeholder="Bijv. Sarah de Vries" value="<?= htmlspecialchars($_POST['name'] ?? '') ?>" class="w-full bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 text-sm transition">
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1">Wachtwoord (min. 8 tekens)</label>
+                <input type="password" name="password" required placeholder="••••••••" class="w-full bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 text-sm transition">
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1">Bevestig wachtwoord</label>
+                <input type="password" name="confirm_password" required placeholder="••••••••" class="w-full bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 text-sm transition">
+            </div>
+        </div>
+
+        <!-- 2FA Verplichting -->
+        <div class="mt-6 pt-6 border-t border-slate-800 text-center space-y-4">
+            <h3 class="text-sm font-bold text-white uppercase tracking-wider text-emerald-400">
+                Verplichte Tweestapsverificatie (2FA)
+            </h3>
+            <p class="text-xs text-slate-400">
+                Scan deze QR-code in uw authenticator app (Google Authenticator, Microsoft Authenticator of 1Password):
+            </p>
+
+            <div class="inline-block p-3 bg-white rounded-2xl shadow-xl">
+                <img src="<?= htmlspecialchars($qrCodeUrl) ?>" alt="2FA QR Code" class="w-40 h-40 mx-auto">
+            </div>
+
+            <div class="bg-slate-800/60 border border-slate-700/80 rounded-xl p-2.5 text-xs text-slate-400 max-w-sm mx-auto font-mono">
+                Sleutel: <strong class="text-slate-200"><?= htmlspecialchars($secret) ?></strong>
+            </div>
+
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1.5">
+                    Voer de 6-cijferige code uit uw app in:
+                </label>
+                <input type="text" name="totp_code" required maxlength="6" placeholder="123456" class="w-48 mx-auto block text-center tracking-[0.5em] font-mono text-xl bg-slate-800 border border-slate-700 rounded-xl py-2 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition">
+            </div>
+        </div>
+
+        <button type="submit" class="w-full mt-6 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-3 px-4 rounded-xl transition shadow-lg shadow-emerald-500/20 flex items-center justify-center space-x-2">
+            <span>Account Activeren & Inloggen</span>
+            <i data-lucide="check-circle-2" class="w-4 h-4"></i>
+        </button>
+    </form>
+</div>
+
+<script>
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
+</body>
+</html>
+

auth/login.php

@@ -0,0 +1,212 @@
+<?php
+/**
+ * Fociz Veilige Login met Tweestapsverificatie (2FA)
+ */
+
+require_once __DIR__ . '/../includes/auth.php';
+start_secure_session();
+
+// Als er nog geen admin is, direct naar setup
+if (!has_admin_user()) {
+    header('Location: /auth/setup.php');
+    exit;
+}
+
+// Als al volledig ingelogd en 2FA geverifieerd, ga naar planner
+if (!empty($_SESSION['user_id']) && !empty($_SESSION['is_2fa_verified'])) {
+    header('Location: /planner.php');
+    exit;
+}
+
+$error = null;
+$step = isset($_SESSION['pending_2fa_user_id']) ? 2 : 1;
+
+// Terug naar stap 1
+if (isset($_GET['action']) && $_GET['action'] === 'restart') {
+    unset($_SESSION['pending_2fa_user_id'], $_SESSION['pending_2fa_user_email']);
+    header('Location: /auth/login.php');
+    exit;
+}
+
+// POST Verwerking
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $db = get_db_connection();
+
+    // STAP 1: Wachtwoord verificatie
+    if ($step === 1) {
+        $email = strtolower(trim($_POST['email'] ?? ''));
+        $password = $_POST['password'] ?? '';
+
+        if (empty($email) || empty($password)) {
+            $error = "Vul e-mailadres en wachtwoord in.";
+        } else {
+            $stmt = $db->prepare("SELECT id, name, email, password_hash, two_factor_secret, two_factor_enabled FROM users WHERE email = ?");
+            $stmt->execute([$email]);
+            $user = $stmt->fetch();
+
+            if ($user && password_verify($password, $user['password_hash'])) {
+                // Succesvol stap 1: zet tijdelijke pending sessie voor 2FA
+                $_SESSION['pending_2fa_user_id'] = $user['id'];
+                $_SESSION['pending_2fa_user_email'] = $user['email'];
+                $_SESSION['pending_2fa_user_name'] = $user['name'];
+                $step = 2;
+            } else {
+                $error = "Onjuist e-mailadres of wachtwoord.";
+            }
+        }
+    }
+    // STAP 2: 2FA TOTP Code verificatie
+    elseif ($step === 2) {
+        $userId = $_SESSION['pending_2fa_user_id'] ?? null;
+        $totpCode = trim(str_replace(' ', '', $_POST['totp_code'] ?? ''));
+
+        if (!$userId || empty($totpCode)) {
+            $error = "Vul de 6-cijferige 2FA verificatiecode in.";
+        } else {
+            $stmt = $db->prepare("SELECT id, name, email, role, two_factor_secret, backup_codes FROM users WHERE id = ?");
+            $stmt->execute([$userId]);
+            $user = $stmt->fetch();
+
+            $isValid = false;
+
+            // 1. Controleer TOTP code
+            if (!empty($user['two_factor_secret']) && TOTP::verifyCode($user['two_factor_secret'], $totpCode)) {
+                $isValid = true;
+            }
+
+            // 2. Controleer optioneel backup codes
+            if (!$isValid && !empty($user['backup_codes'])) {
+                $backupCodes = json_decode($user['backup_codes'], true) ?: [];
+                $codeUpper = strtoupper($totpCode);
+                $key = array_search($codeUpper, $backupCodes);
+                if ($key !== false) {
+                    $isValid = true;
+                    // Verbruik de backup code
+                    unset($backupCodes[$key]);
+                    $stmtUpdate = $db->prepare("UPDATE users SET backup_codes = ? WHERE id = ?");
+                    $stmtUpdate->execute([json_encode(array_values($backupCodes)), $userId]);
+                }
+            }
+
+            if ($isValid) {
+                // Volledige login succesvol
+                $_SESSION['user_id'] = $user['id'];
+                $_SESSION['user_name'] = $user['name'];
+                $_SESSION['user_email'] = $user['email'];
+                $_SESSION['user_role'] = $user['role'];
+                $_SESSION['is_2fa_verified'] = true;
+
+                unset($_SESSION['pending_2fa_user_id'], $_SESSION['pending_2fa_user_email'], $_SESSION['pending_2fa_user_name']);
+
+                header('Location: /planner.php');
+                exit;
+            } else {
+                $error = "Onjuiste 2FA code. Controleer uw authenticator app en probeer opnieuw.";
+            }
+        }
+    }
+}
+
+$pageTitle = "Fociz — Inloggen";
+?>
+<!DOCTYPE html>
+<html lang="nl" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= htmlspecialchars($pageTitle) ?></title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>body { background-color: #090d16; color: #f1f5f9; }</style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-[#090d16] via-[#0f172a] to-[#090d16]">
+
+<div class="w-full max-w-md bg-slate-900/90 border border-slate-800 rounded-2xl shadow-2xl backdrop-blur-xl p-8">
+    <!-- Header -->
+    <div class="text-center mb-8">
+        <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 mb-3 shadow-lg shadow-emerald-500/10">
+            <i data-lucide="shield-check" class="w-8 h-8"></i>
+        </div>
+        <h1 class="text-3xl font-extrabold tracking-tight text-white">Fociz</h1>
+        <p class="text-slate-400 text-sm mt-1">
+            Veilig inloggen met tweestapsverificatie (2FA)
+        </p>
+    </div>
+
+    <?php if ($error): ?>
+        <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/30 flex items-start space-x-3 text-red-400 text-sm">
+            <i data-lucide="alert-triangle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
+            <span><?= htmlspecialchars($error) ?></span>
+        </div>
+    <?php endif; ?>
+
+    <?php if ($step === 1): ?>
+        <!-- STAP 1: E-mail & Wachtwoord -->
+        <form method="POST" action="/auth/login.php" class="space-y-4">
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1">E-mailadres</label>
+                <div class="relative">
+                    <input type="email" name="email" required autofocus placeholder="uw.naam@bedrijf.nl" value="<?= htmlspecialchars($_POST['email'] ?? '') ?>" class="w-full bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 text-sm transition">
+                </div>
+            </div>
+
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1">Wachtwoord</label>
+                <div class="relative">
+                    <input type="password" name="password" required placeholder="••••••••" class="w-full bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 text-sm transition">
+                </div>
+            </div>
+
+            <button type="submit" class="w-full mt-4 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-3 px-4 rounded-xl transition shadow-lg shadow-emerald-500/20 flex items-center justify-center space-x-2">
+                <span>Verder naar 2FA</span>
+                <i data-lucide="arrow-right" class="w-4 h-4"></i>
+            </button>
+        </form>
+
+    <?php else: ?>
+
+        <!-- STAP 2: 2FA TOTP Code -->
+        <form method="POST" action="/auth/login.php" class="space-y-5">
+            <div class="text-center">
+                <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-emerald-500/10 text-emerald-400 mb-2">
+                    <i data-lucide="key" class="w-6 h-6"></i>
+                </div>
+                <p className="text-sm text-slate-300 font-medium">
+                    Voer uw 6-cijferige verificatiecode in
+                </p>
+                <p class="text-xs text-slate-400 mt-1">
+                    Gekoppeld aan <strong class="text-slate-200"><?= htmlspecialchars($_SESSION['pending_2fa_user_email'] ?? '') ?></strong>
+                </p>
+            </div>
+
+            <div>
+                <input type="text" name="totp_code" required autofocus maxlength="9" placeholder="000 000" class="w-full text-center tracking-[0.4em] font-mono text-2xl bg-slate-800/80 border border-slate-700 rounded-xl py-3 text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition">
+                <span class="text-[11px] text-slate-500 text-center block mt-1">
+                    Tip: U kunt ook een 8-cijferige herstelcode invoeren.
+                </span>
+            </div>
+
+            <div class="flex space-x-3">
+                <a href="/auth/login.php?action=restart" class="w-1/3 text-center bg-slate-800 hover:bg-slate-700 text-slate-300 font-medium py-2.5 px-3 rounded-xl transition text-sm flex items-center justify-center">
+                    Terug
+                </a>
+                <button type="submit" class="w-2/3 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 px-4 rounded-xl transition shadow-lg shadow-emerald-500/20 flex items-center justify-center space-x-2">
+                    <span>Inloggen</span>
+                    <i data-lucide="check-circle-2" class="w-4 h-4"></i>
+                </button>
+            </div>
+        </form>
+
+    <?php endif; ?>
+
+    <div class="mt-8 pt-6 border-t border-slate-800/80 text-center text-xs text-slate-500">
+        Toegang tot Fociz is strikt op uitnodiging. Vraag uw beheerder om een uitnodigingslink.
+    </div>
+</div>
+
+<script>
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
+</body>
+</html>
+

auth/logout.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Fociz Uitloggen
+ */
+
+require_once __DIR__ . '/../includes/auth.php';
+start_secure_session();
+
+// Vernietig alle sessie variabelen
+$_SESSION = [];
+
+if (ini_get("session.use_cookies")) {
+    $params = session_get_cookie_params();
+    setcookie(
+        session_name(),
+        '',
+        time() - 42000,
+        $params["path"],
+        $params["domain"],
+        $params["secure"],
+        $params["httponly"]
+    );
+}
+
+session_destroy();
+
+header('Location: /auth/login.php');
+exit;
+

auth/setup.php

@@ -0,0 +1,209 @@
+<?php
+/**
+ * Fociz First-Run Admin Initialisatie Wizard
+ */
+
+require_once __DIR__ . '/../includes/auth.php';
+start_secure_session();
+
+// Als er al een beheerder bestaat, sluit deze pagina direct af
+if (has_admin_user()) {
+    header('Location: /auth/login.php');
+    exit;
+}
+
+$error = null;
+$success = false;
+$backupCodes = [];
+
+// Haal of genereer een tijdelijke sessie-sleutel voor de 2FA configuratie
+if (empty($_SESSION['setup_totp_secret'])) {
+    $_SESSION['setup_totp_secret'] = TOTP::generateSecret(16);
+}
+$secret = $_SESSION['setup_totp_secret'];
+
+// Formulierverwerking
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $name = trim($_POST['name'] ?? '');
+    $email = strtolower(trim($_POST['email'] ?? ''));
+    $password = $_POST['password'] ?? '';
+    $confirmPassword = $_POST['confirm_password'] ?? '';
+    $totpCode = trim($_POST['totp_code'] ?? '');
+
+    if (empty($name) || empty($email) || empty($password) || empty($totpCode)) {
+        $error = "Alle velden (inclusief de 2FA verificatiecode) zijn verplicht.";
+    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        $error = "Voer een geldig e-mailadres in.";
+    } elseif (strlen($password) < 8) {
+        $error = "Het wachtwoord moet minimaal 8 tekens bevatten.";
+    } elseif ($password !== $confirmPassword) {
+        $error = "De ingevoerde wachtwoorden komen niet overeen.";
+    } elseif (!TOTP::verifyCode($secret, $totpCode)) {
+        $error = "Ongeldige 2FA verificatiecode. Zorg dat de tijd op uw telefoon gelijk loopt en probeer opnieuw.";
+    } else {
+        // Alles klopt: maak de allereerste Admin gebruiker aan in MariaDB!
+        try {
+            $db = get_db_connection();
+            $passwordHash = password_hash($password, PASSWORD_DEFAULT);
+            $backupCodes = TOTP::generateBackupCodes(8);
+
+            $stmt = $db->prepare("
+                INSERT INTO users (name, email, password_hash, role, two_factor_secret, two_factor_enabled, backup_codes)
+                VALUES (?, ?, ?, 'ADMIN', ?, 1, ?)
+            ");
+            $stmt->execute([
+                $name,
+                $email,
+                $passwordHash,
+                $secret,
+                json_encode($backupCodes)
+            ]);
+
+            $adminId = (int)$db->lastInsertId();
+
+            // Automatische sessie starten
+            $_SESSION['user_id'] = $adminId;
+            $_SESSION['user_name'] = $name;
+            $_SESSION['user_email'] = $email;
+            $_SESSION['user_role'] = 'ADMIN';
+            $_SESSION['is_2fa_verified'] = true;
+            unset($_SESSION['setup_totp_secret']);
+
+            $success = true;
+        } catch (Exception $e) {
+            $error = "Fout bij aanmaken beheerder in MariaDB: " . $e->getMessage();
+        }
+    }
+}
+
+$otpAuthUrl = TOTP::getOtpAuthUrl(!empty($email) ? $email : 'admin@fociz.local', $secret, 'Fociz');
+$qrCodeUrl = TOTP::getQrCodeUrl($otpAuthUrl, 200);
+$pageTitle = "Fociz — Eerste Initialisatie";
+?>
+<!DOCTYPE html>
+<html lang="nl" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= htmlspecialchars($pageTitle) ?></title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>body { background-color: #090d16; color: #f1f5f9; }</style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-[#090d16] via-[#0f172a] to-[#090d16]">
+
+<div class="w-full max-w-xl bg-slate-900/90 border border-slate-800 rounded-2xl shadow-2xl backdrop-blur-xl p-8">
+    <!-- Header -->
+    <div class="text-center mb-8">
+        <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 mb-3 shadow-lg shadow-emerald-500/10">
+            <i data-lucide="shield-check" class="w-8 h-8"></i>
+        </div>
+        <h1 class="text-3xl font-bold tracking-tight text-white">Fociz Initialisatie</h1>
+        <p class="text-slate-400 text-sm mt-1">
+            Eenmalige configuratie van het hoofdbeheerdersaccount met verplichte 2FA
+        </p>
+    </div>
+
+    <?php if ($error): ?>
+        <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/30 flex items-start space-x-3 text-red-400 text-sm">
+            <i data-lucide="alert-triangle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
+            <span><?= htmlspecialchars($error) ?></span>
+        </div>
+    <?php endif; ?>
+
+    <?php if ($success): ?>
+        <!-- Stap 3: Voltooid met backup codes -->
+        <div class="text-center space-y-6">
+            <div class="w-16 h-16 bg-emerald-500/20 text-emerald-400 rounded-full flex items-center justify-center mx-auto border border-emerald-500/40">
+                <i data-lucide="check-circle-2" class="w-10 h-10"></i>
+            </div>
+            <div>
+                <h2 class="text-2xl font-bold text-white mb-1">Beheerder Geïnstalleerd!</h2>
+                <p class="text-slate-400 text-sm">
+                    Uw account is aangemaakt en direct beveiligd met 2FA. Bewaar deze eenmalige herstelcodes veilig:
+                </p>
+            </div>
+
+            <div class="bg-slate-950/90 border border-slate-800 rounded-xl p-4 text-left">
+                <div class="text-xs font-semibold text-slate-400 mb-2">HERSTELCODES (NOODGEBRUIK):</div>
+                <div class="grid grid-cols-2 gap-2 font-mono text-xs text-slate-300">
+                    <?php foreach ($backupCodes as $code): ?>
+                        <span class="bg-slate-900 px-2.5 py-1.5 rounded border border-slate-800 text-center"><?= htmlspecialchars($code) ?></span>
+                    <?php endforeach; ?>
+                </div>
+            </div>
+
+            <a href="/planner.php" class="inline-flex items-center justify-center w-full bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-3 px-4 rounded-xl transition shadow-lg shadow-emerald-500/20 space-x-2">
+                <span>Start met Fociz Dagplanning</span>
+                <i data-lucide="arrow-right" class="w-4 h-4"></i>
+            </a>
+        </div>
+
+    <?php else: ?>
+
+        <form method="POST" action="/auth/setup.php" class="space-y-5">
+            <!-- Account Info -->
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Volledige naam</label>
+                    <input type="text" name="name" required placeholder="Bijv. Niek Rabelink" value="<?= htmlspecialchars($_POST['name'] ?? '') ?>" class="w-full bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 text-sm transition">
+                </div>
+
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Beheerder E-mailadres</label>
+                    <input type="email" name="email" required placeholder="admin@bedrijf.nl" value="<?= htmlspecialchars($_POST['email'] ?? '') ?>" class="w-full bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 text-sm transition">
+                </div>
+
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-slate-300 mb-1">Wachtwoord (min. 8 tekens)</label>
+                        <input type="password" name="password" required placeholder="••••••••" class="w-full bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 text-sm transition">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-slate-300 mb-1">Bevestig wachtwoord</label>
+                        <input type="password" name="confirm_password" required placeholder="••••••••" class="w-full bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 text-sm transition">
+                    </div>
+                </div>
+            </div>
+
+            <!-- 2FA QR Code & Koppeling -->
+            <div class="mt-6 pt-6 border-t border-slate-800 text-center space-y-4">
+                <h3 class="text-sm font-bold text-white uppercase tracking-wider flex items-center justify-center space-x-1.5 text-emerald-400">
+                    <i data-lucide="key" class="w-4 h-4"></i>
+                    <span>Tweestapsverificatie (2FA) Koppelen</span>
+                </h3>
+                <p class="text-xs text-slate-400 max-w-md mx-auto">
+                    Scan onderstaande QR-code met uw authenticator app (Google Authenticator, Microsoft Authenticator of 1Password):
+                </p>
+
+                <div class="inline-block p-3 bg-white rounded-2xl shadow-xl">
+                    <img src="<?= htmlspecialchars($qrCodeUrl) ?>" alt="2FA QR Code" class="w-44 h-44 mx-auto">
+                </div>
+
+                <div class="bg-slate-800/60 border border-slate-700/80 rounded-xl p-2.5 text-xs text-slate-400 max-w-sm mx-auto font-mono flex items-center justify-between">
+                    <span>Sleutel: <strong class="text-slate-200"><?= htmlspecialchars($secret) ?></strong></span>
+                </div>
+
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1.5">
+                        Voer de 6-cijferige verificatiecode uit uw app in:
+                    </label>
+                    <input type="text" name="totp_code" required maxlength="6" placeholder="123456" class="w-48 mx-auto block text-center tracking-[0.5em] font-mono text-xl bg-slate-800 border border-slate-700 rounded-xl py-2 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition">
+                </div>
+            </div>
+
+            <button type="submit" class="w-full mt-6 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-3 px-4 rounded-xl transition shadow-lg shadow-emerald-500/20 flex items-center justify-center space-x-2">
+                <span>Account & 2FA Bevestigen</span>
+                <i data-lucide="check-circle-2" class="w-4 h-4"></i>
+            </button>
+        </form>
+
+    <?php endif; ?>
+</div>
+
+<script>
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+</script>
+</body>
+</html>
+

brainstorm.php

@@ -0,0 +1,171 @@
+<?php
+/**
+ * Fociz Brainstorm Sessies Overzicht
+ */
+
+require_once __DIR__ . '/includes/header.php';
+$db = get_db_connection();
+
+// Verwerk nieuwe sessie aanmaken
+$error = null;
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'create_session') {
+    $title = trim($_POST['title'] ?? '');
+    $theme = trim($_POST['theme'] ?? 'Product & Strategie');
+    $description = trim($_POST['description'] ?? '');
+
+    if (!empty($title)) {
+        $stmt = $db->prepare("
+            INSERT INTO brainstorm_sessions (title, theme, description, created_by_id)
+            VALUES (?, ?, ?, ?)
+        ");
+        $stmt->execute([$title, $theme, $description, $currentUser['id']]);
+        $newId = $db->lastInsertId();
+        header("Location: /brainstorm_canvas.php?id={$newId}");
+        exit;
+    } else {
+        $error = "Titel van de brainstormsessie is verplicht.";
+    }
+}
+
+// Haal alle sessies op
+$stmtSessions = $db->query("
+    SELECT s.*, u.name as creator_name,
+           (SELECT COUNT(*) FROM brainstorm_cards WHERE session_id = s.id) as cards_count
+    FROM brainstorm_sessions s
+    JOIN users u ON s.created_by_id = u.id
+    ORDER BY s.created_at DESC
+");
+$sessions = $stmtSessions->fetchAll();
+?>
+
+<div class="space-y-6">
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl">
+        <div>
+            <div class="flex items-center space-x-2 text-amber-400 text-xs font-semibold uppercase tracking-wider mb-1">
+                <i data-lucide="lightbulb" class="w-4 h-4"></i>
+                <span>Creatie & Innovatie</span>
+            </div>
+            <h1 class="text-2xl sm:text-3xl font-black text-white tracking-tight">
+                Brainstorm Sessies
+            </h1>
+            <p class="text-slate-400 text-xs sm:text-sm mt-1">
+                Brainstorm met collega's, verzamel ideeën en knelpunten, en transformeer ze direct tot een werkbare roadmap.
+            </p>
+        </div>
+
+        <button onclick="document.getElementById('newSessionModal').classList.remove('hidden')" class="flex items-center space-x-2 px-4 py-2.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-slate-950 text-xs font-bold transition shadow-lg shadow-amber-500/20 flex-shrink-0">
+            <i data-lucide="plus" class="w-4 h-4"></i>
+            <span>Nieuwe Sessie Starten</span>
+        </button>
+    </div>
+
+    <?php if ($error): ?>
+        <div class="p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+            <?= htmlspecialchars($error) ?>
+        </div>
+    <?php endif; ?>
+
+    <!-- Grid met sessies -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        <?php if (empty($sessions)): ?>
+            <div class="col-span-full bg-slate-900/60 border border-slate-800/80 rounded-2xl p-12 text-center">
+                <i data-lucide="lightbulb" class="w-12 h-12 text-amber-500/40 mx-auto mb-3"></i>
+                <h3 class="text-base font-bold text-white">Nog geen brainstormsessies gestart</h3>
+                <p class="text-xs text-slate-400 mt-1 max-w-sm mx-auto">
+                    Start uw eerste brainstormsessie om ideeën te verzamelen en ze met één klik om te vormen naar planningsitems.
+                </p>
+                <button onclick="document.getElementById('newSessionModal').classList.remove('hidden')" class="mt-4 px-4 py-2 bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold rounded-xl text-xs transition">
+                    Sessie Starten
+                </button>
+            </div>
+        <?php else: ?>
+            <?php foreach ($sessions as $sess): ?>
+                <a href="/brainstorm_canvas.php?id=<?= $sess['id'] ?>" class="group bg-slate-900/80 hover:bg-slate-850 border border-slate-800 hover:border-amber-500/40 rounded-2xl p-5 shadow-lg transition flex flex-col justify-between">
+                    <div>
+                        <div class="flex items-center justify-between mb-3">
+                            <span class="px-2.5 py-0.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 font-semibold text-[11px]">
+                                <?= htmlspecialchars($sess['theme']) ?>
+                            </span>
+                            <span class="flex items-center space-x-1 text-slate-500 text-xs">
+                                <i data-lucide="message-square" class="w-3.5 h-3.5"></i>
+                                <span><?= $sess['cards_count'] ?> kaarten</span>
+                            </span>
+                        </div>
+
+                        <h3 class="text-base font-bold text-white group-hover:text-amber-400 transition leading-snug">
+                            <?= htmlspecialchars($sess['title']) ?>
+                        </h3>
+
+                        <?php if (!empty($sess['description'])): ?>
+                            <p class="text-slate-400 text-xs mt-2 line-clamp-2">
+                                <?= htmlspecialchars($sess['description']) ?>
+                            </p>
+                        <?php endif; ?>
+                    </div>
+
+                    <div class="mt-5 pt-4 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-500">
+                        <span>Door <?= htmlspecialchars($sess['creator_name']) ?></span>
+                        <div class="flex items-center space-x-1 text-amber-400 group-hover:translate-x-1 transition font-medium">
+                            <span>Open canvas</span>
+                            <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
+                        </div>
+                    </div>
+                </a>
+            <?php endforeach; ?>
+        <?php endif; ?>
+    </div>
+</div>
+
+<!-- Modal: Nieuwe sessie -->
+<div id="newSessionModal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-2xl max-w-lg w-full">
+        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800">
+            <h3 class="text-base font-bold text-white flex items-center space-x-2">
+                <i data-lucide="sparkles" class="w-4 h-4 text-amber-400"></i>
+                <span>Nieuwe Brainstormsessie</span>
+            </h3>
+            <button onclick="document.getElementById('newSessionModal').classList.add('hidden')" class="text-slate-400 hover:text-white">
+                <i data-lucide="x" class="w-5 h-5"></i>
+            </button>
+        </div>
+
+        <form method="POST" action="/brainstorm.php" class="space-y-4">
+            <input type="hidden" name="action" value="create_session">
+
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1">Onderwerp / Titel</label>
+                <input type="text" name="title" required placeholder="Bijv. Q4 Automatisering & Klantreis" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2 text-white text-xs placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-amber-500/50">
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Thema / Categorie</label>
+                    <select name="theme" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white text-xs focus:outline-none">
+                        <option value="Product & Strategie">Product & Strategie</option>
+                        <option value="Procesverbetering">Procesverbetering</option>
+                        <option value="Klant & Service">Klant & Service</option>
+                        <option value="Technologie & IT">Technologie & IT</option>
+                        <option value="Marketing & Groei">Marketing & Groei</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Doel / Beschrijving</label>
+                    <input type="text" name="description" placeholder="Doel van deze sessie..." class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2 text-white text-xs placeholder-slate-500 focus:outline-none">
+                </div>
+            </div>
+
+            <div class="flex space-x-2 pt-2">
+                <button type="submit" class="flex-1 bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold py-2.5 px-4 rounded-xl text-xs transition">
+                    Sessie Aanmaken & Canvas Openen
+                </button>
+                <button type="button" onclick="document.getElementById('newSessionModal').classList.add('hidden')" class="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl text-xs transition">
+                    Annuleren
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>
+

brainstorm_canvas.php

@@ -0,0 +1,371 @@
+<?php
+/**
+ * Fociz Interactief Brainstorm Canvas & Roadmap Converter
+ */
+
+require_once __DIR__ . '/includes/header.php';
+$db = get_db_connection();
+
+$sessionId = (int)($_GET['id'] ?? 0);
+$stmtSession = $db->prepare("
+    SELECT s.*, u.name as creator_name
+    FROM brainstorm_sessions s
+    JOIN users u ON s.created_by_id = u.id
+    WHERE s.id = ?
+");
+$stmtSession->execute([$sessionId]);
+$session = $stmtSession->fetch();
+
+if (!$session) {
+    echo "<div class='p-8 text-center text-red-400'>Brainstormsessie niet gevonden. <a href='/brainstorm.php' class='underline'>Terug</a></div>";
+    require_once __DIR__ . '/includes/footer.php';
+    exit;
+}
+
+// Haal alle kaarten op van deze sessie
+$stmtCards = $db->prepare("
+    SELECT * FROM brainstorm_cards 
+    WHERE session_id = ? 
+    ORDER BY votes DESC, created_at ASC
+");
+$stmtCards->execute([$sessionId]);
+$cards = $stmtCards->fetchAll();
+
+$categories = [
+    'Ideeën' => ['title' => 'Ideeën & Concepten', 'icon' => 'lightbulb', 'color' => 'amber', 'border' => 'border-amber-500/40', 'bg' => 'bg-amber-950/20', 'badge' => 'bg-amber-500/20 text-amber-300'],
+    'Knelpunten' => ['title' => 'Knelpunten & Uitdagingen', 'icon' => 'alert-triangle', 'color' => 'rose', 'border' => 'border-rose-500/40', 'bg' => 'bg-rose-950/20', 'badge' => 'bg-rose-500/20 text-rose-300'],
+    'Oplossingen' => ['title' => 'Oplossingen & Features', 'icon' => 'rocket', 'color' => 'emerald', 'border' => 'border-emerald-500/40', 'bg' => 'bg-emerald-950/20', 'badge' => 'bg-emerald-500/20 text-emerald-300'],
+    'Quick Wins' => ['title' => 'Quick Wins (Direct te doen)', 'icon' => 'zap', 'color' => 'blue', 'border' => 'border-blue-500/40', 'bg' => 'bg-blue-950/20', 'badge' => 'bg-blue-500/20 text-blue-300'],
+];
+?>
+
+<div class="space-y-6">
+    <!-- Top Bar -->
+    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 bg-slate-900/90 border border-slate-800 rounded-2xl p-5 shadow-xl">
+        <div class="flex items-center space-x-4">
+            <a href="/brainstorm.php" class="p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-white transition">
+                <i data-lucide="arrow-left" class="w-5 h-5"></i>
+            </a>
+            <div>
+                <div class="flex items-center space-x-2 text-xs">
+                    <span class="px-2 py-0.5 rounded bg-amber-500/10 text-amber-400 font-semibold border border-amber-500/20">
+                        <?= htmlspecialchars($session['theme']) ?>
+                    </span>
+                    <span class="text-slate-500">Gestart door <?= htmlspecialchars($session['creator_name']) ?></span>
+                </div>
+                <h1 class="text-xl sm:text-2xl font-black text-white tracking-tight mt-0.5">
+                    <?= htmlspecialchars($session['title']) ?>
+                </h1>
+            </div>
+        </div>
+
+        <div class="flex items-center space-x-3">
+            <button onclick="openAddCardModal()" class="flex items-center space-x-1.5 px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold border border-slate-700 transition">
+                <i data-lucide="plus" class="w-4 h-4 text-amber-400"></i>
+                <span>Nieuwe Kaart</span>
+            </button>
+
+            <!-- De Kernfeature: Zet om naar Roadmap! -->
+            <button onclick="openConvertModal()" class="flex items-center space-x-2 px-4 py-2 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-400 hover:from-emerald-600 hover:to-teal-500 text-slate-950 text-xs font-bold transition shadow-lg shadow-emerald-500/20">
+                <i data-lucide="map" class="w-4 h-4"></i>
+                <span>Zet om naar Roadmap</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Whiteboard Categorie Kolommen -->
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
+        <?php foreach ($categories as $catKey => $catConfig): 
+            $catCards = array_filter($cards, fn($c) => $c['category'] === $catKey);
+        ?>
+            <div class="bg-slate-900/60 border border-slate-800/80 rounded-2xl p-4 flex flex-col min-h-[500px]">
+                <!-- Column Header -->
+                <div class="flex items-center justify-between pb-3 mb-3 border-b border-slate-800">
+                    <div class="flex items-center space-x-2">
+                        <i data-lucide="<?= $catConfig['icon'] ?>" class="w-4 h-4 text-<?= $catConfig['color'] ?>-400"></i>
+                        <h3 class="text-xs font-bold text-white uppercase tracking-wider"><?= $catConfig['title'] ?></h3>
+                    </div>
+                    <span class="text-xs font-mono font-semibold px-2 py-0.5 rounded-full bg-slate-800 text-slate-400">
+                        <?= count($catCards) ?>
+                    </span>
+                </div>
+
+                <!-- Cards Container -->
+                <div class="flex-1 space-y-3">
+                    <?php if (empty($catCards)): ?>
+                        <div class="py-8 text-center text-slate-600 text-xs">
+                            Nog geen kaarten in deze categorie.
+                        </div>
+                    <?php else: ?>
+                        <?php foreach ($catCards as $card): ?>
+                            <div class="group relative rounded-xl p-4 border <?= $catConfig['border'] ?> <?= $catConfig['bg'] ?> backdrop-blur-sm shadow-md transition hover:-translate-y-0.5" id="card-<?= $card['id'] ?>">
+                                
+                                <!-- Top: Checkbox voor selectie + Roadmap badge -->
+                                <div class="flex items-center justify-between mb-2">
+                                    <label class="flex items-center space-x-2 cursor-pointer">
+                                        <input type="checkbox" value="<?= $card['id'] ?>" class="card-checkbox w-4 h-4 rounded bg-slate-900 border-slate-700 text-emerald-500 focus:ring-0">
+                                        <span class="text-[10px] text-slate-400">Selecteer</span>
+                                    </label>
+
+                                    <?php if (!empty($card['converted_to_roadmap_item_id'])): ?>
+                                        <span class="px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 font-semibold text-[10px] flex items-center space-x-1 border border-emerald-500/30">
+                                            <i data-lucide="check" class="w-3 h-3"></i>
+                                            <span>Op Roadmap</span>
+                                        </span>
+                                    <?php endif; ?>
+                                </div>
+
+                                <!-- Inhoud -->
+                                <p class="text-xs text-slate-200 leading-relaxed whitespace-pre-wrap">
+                                    <?= htmlspecialchars($card['content']) ?>
+                                </p>
+
+                                <!-- Footer van kaart -->
+                                <div class="mt-3 pt-2.5 border-t border-slate-800/60 flex items-center justify-between text-[10px] text-slate-400">
+                                    <span><?= htmlspecialchars($card['author_name'] ?? 'Collega') ?></span>
+
+                                    <div class="flex items-center space-x-2">
+                                        <!-- Upvote button -->
+                                        <button onclick="voteCard(<?= $card['id'] ?>)" class="flex items-center space-x-1 px-2 py-1 rounded-lg bg-slate-800/80 hover:bg-slate-700 text-amber-300 transition">
+                                            <i data-lucide="thumbs-up" class="w-3 h-3"></i>
+                                            <span id="votes-<?= $card['id'] ?>" class="font-bold"><?= $card['votes'] ?></span>
+                                        </button>
+
+                                        <!-- Delete button -->
+                                        <button onclick="deleteCard(<?= $card['id'] ?>)" class="p-1 rounded text-slate-500 hover:text-red-400 transition opacity-0 group-hover:opacity-100">
+                                            <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        <?php endforeach; ?>
+                    <?php endif; ?>
+                </div>
+
+                <!-- Quick add button at column bottom -->
+                <button onclick="openAddCardModal('<?= $catKey ?>')" class="mt-3 w-full py-2 rounded-xl border border-dashed border-slate-800 hover:border-slate-700 text-slate-500 hover:text-slate-300 text-xs transition flex items-center justify-center space-x-1">
+                    <i data-lucide="plus" class="w-3.5 h-3.5"></i>
+                    <span>Kaart toevoegen</span>
+                </button>
+            </div>
+        <?php endforeach; ?>
+    </div>
+</div>
+
+<!-- Modal: Nieuwe Kaart Toevoegen -->
+<div id="addCardModal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-2xl max-w-md w-full">
+        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800">
+            <h3 class="text-base font-bold text-white flex items-center space-x-2">
+                <i data-lucide="sticky-note" class="w-4 h-4 text-amber-400"></i>
+                <span>Brainstormkaart Toevoegen</span>
+            </h3>
+            <button onclick="closeAddCardModal()" class="text-slate-400 hover:text-white">
+                <i data-lucide="x" class="w-5 h-5"></i>
+            </button>
+        </div>
+
+        <div class="space-y-4">
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1">Categorie</label>
+                <select id="modalCardCategory" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white text-xs focus:outline-none">
+                    <option value="Ideeën">💡 Ideeën & Concepten</option>
+                    <option value="Knelpunten">⚠️ Knelpunten & Uitdagingen</option>
+                    <option value="Oplossingen">🚀 Oplossingen & Features</option>
+                    <option value="Quick Wins">⚡ Quick Wins</option>
+                </select>
+            </div>
+
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1">Idee / Beschrijving</label>
+                <textarea id="modalCardContent" rows="4" placeholder="Schrijf hier uw inzicht, idee of knelpunt..." class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-white text-xs placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-amber-500 resize-none"></textarea>
+            </div>
+
+            <div class="flex space-x-2 pt-2">
+                <button onclick="submitNewCard()" class="flex-1 bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold py-2.5 px-4 rounded-xl text-xs transition">
+                    Plaats op Canvas
+                </button>
+                <button onclick="closeAddCardModal()" class="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl text-xs transition">
+                    Annuleren
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Modal: Zet om naar Roadmap -->
+<div id="convertModal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="bg-slate-900 border border-emerald-500/40 rounded-2xl p-6 shadow-2xl max-w-lg w-full">
+        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800">
+            <h3 class="text-base font-bold text-white flex items-center space-x-2">
+                <i data-lucide="map" class="w-4 h-4 text-emerald-400"></i>
+                <span>Zet Brainstorm om naar Roadmap</span>
+            </h3>
+            <button onclick="closeConvertModal()" class="text-slate-400 hover:text-white">
+                <i data-lucide="x" class="w-5 h-5"></i>
+            </button>
+        </div>
+
+        <div class="space-y-4">
+            <div class="bg-emerald-950/30 border border-emerald-500/20 rounded-xl p-3 text-xs text-emerald-300">
+                <span id="selectedCountText" class="font-bold">0</span> kaarten geselecteerd om om te zetten naar planbare roadmap items.
+            </div>
+
+            <div class="grid grid-cols-2 gap-3">
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Doel Kwartaal</label>
+                    <select id="roadmapQuarter" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white text-xs focus:outline-none">
+                        <option value="Q1">Q1 (Jan - Mrt)</option>
+                        <option value="Q2">Q2 (Apr - Jun)</option>
+                        <option value="Q3" selected>Q3 (Jul - Sep)</option>
+                        <option value="Q4">Q4 (Okt - Dec)</option>
+                    </select>
+                </div>
+
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Item Type</label>
+                    <select id="roadmapType" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white text-xs focus:outline-none">
+                        <option value="FEATURE" selected>Feature / Functionaliteit</option>
+                        <option value="EPIC">Epic (Groot project)</option>
+                        <option value="MILESTONE">Mijlpaal</option>
+                        <option value="TASK">Oplos-Taak</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-2 gap-3">
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Prioriteit</label>
+                    <select id="roadmapPriority" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white text-xs focus:outline-none">
+                        <option value="HIGH" selected>Hoog (Belangrijke milestone)</option>
+                        <option value="CRITICAL">Kritiek (Must-have)</option>
+                        <option value="MEDIUM">Normaal</option>
+                        <option value="LOW">Laag / Backlog</option>
+                    </select>
+                </div>
+
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Streefdatum (Deadline)</label>
+                    <input type="date" id="roadmapDueDate" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-1.5 text-white text-xs focus:outline-none">
+                </div>
+            </div>
+
+            <div class="flex space-x-2 pt-2">
+                <button onclick="submitConvertToRoadmap()" class="flex-1 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 px-4 rounded-xl text-xs transition shadow-lg shadow-emerald-500/20 flex items-center justify-center space-x-2">
+                    <i data-lucide="check-circle" class="w-4 h-4"></i>
+                    <span>Definitief Toevoegen aan Roadmap</span>
+                </button>
+                <button onclick="closeConvertModal()" class="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl text-xs transition">
+                    Annuleren
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+const sessionId = <?= $sessionId ?>;
+
+function openAddCardModal(defaultCategory = null) {
+    if (defaultCategory) {
+        document.getElementById('modalCardCategory').value = defaultCategory;
+    }
+    document.getElementById('addCardModal').classList.remove('hidden');
+    document.getElementById('modalCardContent').focus();
+}
+
+function closeAddCardModal() {
+    document.getElementById('addCardModal').classList.add('hidden');
+    document.getElementById('modalCardContent').value = '';
+}
+
+async function submitNewCard() {
+    const category = document.getElementById('modalCardCategory').value;
+    const content = document.getElementById('modalCardContent').value.trim();
+
+    if (!content) return;
+
+    const res = await fetch('/api/brainstorm.php?action=add_card', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ session_id: sessionId, category, content })
+    });
+    const data = await res.json();
+    if (data.success) {
+        location.reload();
+    }
+}
+
+async function voteCard(cardId) {
+    const res = await fetch('/api/brainstorm.php?action=vote_card', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ card_id: cardId })
+    });
+    const data = await res.json();
+    if (data.success) {
+        document.getElementById(`votes-${cardId}`).innerText = data.votes;
+    }
+}
+
+async function deleteCard(cardId) {
+    if (!confirm('Kaart verwijderen?')) return;
+    await fetch('/api/brainstorm.php?action=delete_card', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ card_id: cardId })
+    });
+    document.getElementById(`card-${cardId}`)?.remove();
+}
+
+// --- Roadmap Conversie Logica ---
+function getSelectedCardIds() {
+    const checkboxes = document.querySelectorAll('.card-checkbox:checked');
+    return Array.from(checkboxes).map(cb => cb.value);
+}
+
+function openConvertModal() {
+    const selectedIds = getSelectedCardIds();
+    if (selectedIds.length === 0) {
+        alert('Vink eerst minimaal één kaart aan om om te zetten naar de roadmap.');
+        return;
+    }
+    document.getElementById('selectedCountText').innerText = selectedIds.length;
+    document.getElementById('convertModal').classList.remove('hidden');
+}
+
+function closeConvertModal() {
+    document.getElementById('convertModal').classList.add('hidden');
+}
+
+async function submitConvertToRoadmap() {
+    const cardIds = getSelectedCardIds();
+    const quarter = document.getElementById('roadmapQuarter').value;
+    const type = document.getElementById('roadmapType').value;
+    const priority = document.getElementById('roadmapPriority').value;
+    const dueDate = document.getElementById('roadmapDueDate').value;
+
+    const res = await fetch('/api/brainstorm.php?action=convert_to_roadmap', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+            card_ids: cardIds,
+            quarter,
+            type,
+            priority,
+            due_date: dueDate
+        })
+    });
+
+    const data = await res.json();
+    if (data.success) {
+        alert(data.message);
+        window.location.href = '/roadmap.php';
+    } else {
+        alert(data.error || 'Er is een fout opgetreden.');
+    }
+}
+</script>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>
+

config/config.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * Fociz Applicatie- en Databaseconfiguratie
+ */
+
+// Automatisch eenvoudige .env ondersteuning indien aanwezig
+$envFile = __DIR__ . '/../.env';
+if (file_exists($envFile)) {
+    $lines = file($envFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        if (str_starts_with(trim($line), '#')) continue;
+        if (strpos($line, '=') !== false) {
+            list($name, $value) = explode('=', $line, 2);
+            $name = trim($name);
+            $value = trim($value, " \t\n\r\0\x0B\"'");
+            if (!array_key_exists($name, $_SERVER) && !array_key_exists($name, $_ENV)) {
+                putenv(sprintf('%s=%s', $name, $value));
+                $_ENV[$name] = $value;
+                $_SERVER[$name] = $value;
+            }
+        }
+    }
+}
+
+// MariaDB Verbindingsgegevens (pas deze aan naar uw server instellingen of gebruik .env)
+define('DB_HOST', getenv('DB_HOST') ?: '127.0.0.1');
+define('DB_PORT', getenv('DB_PORT') ?: '3306');
+define('DB_NAME', getenv('DB_NAME') ?: 'fociz');
+define('DB_USER', getenv('DB_USER') ?: 'root');
+define('DB_PASS', getenv('DB_PASS') !== false ? getenv('DB_PASS') : '');
+define('DB_CHARSET', 'utf8mb4');
+
+// Applicatie instellingen
+define('APP_NAME', 'Fociz');
+define('APP_URL', getenv('APP_URL') ?: ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https://' : 'http://') . ($_SERVER['HTTP_HOST'] ?? 'localhost')));
+define('APP_SECRET', getenv('APP_SECRET') ?: 'fociz-maria-db-super-secret-key-998877');
+
+// Tijdzone
+date_default_timezone_set('Europe/Amsterdam');
+

config/database.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * MariaDB PDO Databaseverbinding & Automatische Migratie
+ */
+
+require_once __DIR__ . '/config.php';
+
+function get_db_connection(): PDO {
+    static $pdo = null;
+
+    if ($pdo === null) {
+        $dsn = sprintf(
+            'mysql:host=%s;port=%s;dbname=%s;charset=%s',
+            DB_HOST,
+            DB_PORT,
+            DB_NAME,
+            DB_CHARSET
+        );
+
+        $options = [
+            PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
+            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+            PDO::ATTR_EMULATE_PREPARES   => false,
+        ];
+
+        try {
+            $pdo = new PDO($dsn, DB_USER, DB_PASS, $options);
+            // Zorg ervoor dat tabellen bestaan
+            ensure_tables_exist($pdo);
+        } catch (PDOException $e) {
+            // Als de database zelf nog niet bestaat, probeer deze aan te maken indien gebruiker rechten heeft
+            if ($e->getCode() == 1049) {
+                try {
+                    $tempDsn = sprintf('mysql:host=%s;port=%s;charset=%s', DB_HOST, DB_PORT, DB_CHARSET);
+                    $tempPdo = new PDO($tempDsn, DB_USER, DB_PASS, $options);
+                    $tempPdo->exec(sprintf('CREATE DATABASE IF NOT EXISTS `%s` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci', DB_NAME));
+                    $pdo = new PDO($dsn, DB_USER, DB_PASS, $options);
+                    ensure_tables_exist($pdo);
+                    return $pdo;
+                } catch (PDOException $ex) {
+                    die("Database verbindingsfout: Kan database '" . htmlspecialchars(DB_NAME) . "' niet aanmaken of vinden. Maak deze handmatig aan in MariaDB.");
+                }
+            }
+            die("MariaDB Verbindingsfout: " . htmlspecialchars($e->getMessage()) . "<br><small>Controleer uw instellingen in config/config.php of .env</small>");
+        }
+    }
+
+    return $pdo;
+}
+
+/**
+ * Zorgt ervoor dat alle tabellen uit schema.sql aanwezig zijn in MariaDB
+ */
+function ensure_tables_exist(PDO $pdo): void {
+    try {
+        $result = $pdo->query("SHOW TABLES LIKE 'users'");
+        if ($result->rowCount() === 0) {
+            $schemaFile = __DIR__ . '/../schema.sql';
+            if (file_exists($schemaFile)) {
+                $sql = file_get_contents($schemaFile);
+                $pdo->exec($sql);
+            }
+        }
+    } catch (PDOException $e) {
+        // Tabellen bestaan waarschijnlijk al of er is een permissiebeperking
+    }
+}
+

includes/auth.php

@@ -0,0 +1,136 @@
+<?php
+/**
+ * Authenticatie & Autorisatie Guard voor Fociz
+ */
+
+require_once __DIR__ . '/../config/database.php';
+require_once __DIR__ . '/totp.php';
+
+function start_secure_session(): void {
+    if (session_status() === PHP_SESSION_NONE) {
+        // Veilige sessiecookie parameters
+        $isSecure = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on');
+        session_set_cookie_params([
+            'lifetime' => 7 * 24 * 60 * 60, // 7 dagen
+            'path' => '/',
+            'domain' => '',
+            'secure' => $isSecure,
+            'httponly' => true,
+            'samesite' => 'Lax'
+        ]);
+        session_start();
+    }
+}
+
+/**
+ * Controleert of er al een beheerder bestaat in MariaDB
+ */
+function has_admin_user(): bool {
+    $db = get_db_connection();
+    $stmt = $db->query("SELECT COUNT(*) FROM users WHERE role = 'ADMIN'");
+    return ((int)$stmt->fetchColumn()) > 0;
+}
+
+/**
+ * Haalt de huidige ingelogde gebruiker op uit de database
+ */
+function get_logged_in_user(): ?array {
+    start_secure_session();
+
+    if (empty($_SESSION['user_id']) || empty($_SESSION['is_2fa_verified'])) {
+        return null;
+    }
+
+    $db = get_db_connection();
+    $stmt = $db->prepare("SELECT id, name, email, role, two_factor_enabled, created_at FROM users WHERE id = ?");
+    $stmt->execute([$_SESSION['user_id']]);
+    $user = $stmt->fetch();
+
+    return $user ?: null;
+}
+
+/**
+ * Beschermt pagina's: dwingt login + 2FA af
+ */
+function require_auth(): array {
+    start_secure_session();
+
+    // 1. Controleer of eerste setup nodig is
+    if (!has_admin_user()) {
+        header('Location: /auth/setup.php');
+        exit;
+    }
+
+    // 2. Controleer of gebruiker ingelogd én 2FA geverifieerd is
+    $user = get_logged_in_user();
+    if (!$user) {
+        header('Location: /auth/login.php');
+        exit;
+    }
+
+    return $user;
+}
+
+/**
+ * Dwingt beheerder (ADMIN) rol af
+ */
+function require_admin(): array {
+    $user = require_auth();
+    if ($user['role'] !== 'ADMIN') {
+        header('Location: /planner.php');
+        exit;
+    }
+    return $user;
+}
+
+/**
+ * Maakt een nieuwe uitnodiging aan voor een collega
+ */
+function create_invite(int $createdById, string $email, string $role = 'MEMBER'): string {
+    $db = get_db_connection();
+    $token = bin2hex(random_bytes(24));
+    $expiresAt = date('Y-m-d H:i:s', strtotime('+7 days'));
+
+    $stmt = $db->prepare("INSERT INTO invites (token, email, role, expires_at, created_by_id) VALUES (?, ?, ?, ?, ?)");
+    $stmt->execute([$token, strtolower(trim($email)), $role, $expiresAt, $createdById]);
+
+    return $token;
+}
+
+/**
+ * Valideert een invite token
+ */
+function validate_invite(string $token): ?array {
+    $db = get_db_connection();
+    $stmt = $db->prepare("
+        SELECT i.*, u.name as inviter_name, u.email as inviter_email 
+        FROM invites i
+        JOIN users u ON i.created_by_id = u.id
+        WHERE i.token = ?
+    ");
+    $stmt->execute([$token]);
+    $invite = $stmt->fetch();
+
+    if (!$invite) return null;
+    if ($invite['used_at'] !== null) return null;
+    if (strtotime($invite['expires_at']) < time()) return null;
+
+    return $invite;
+}
+
+/**
+ * CSRF token helpers
+ */
+function get_csrf_token(): string {
+    start_secure_session();
+    if (empty($_SESSION['csrf_token'])) {
+        $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
+    }
+    return $_SESSION['csrf_token'];
+}
+
+function verify_csrf_token(?string $token): bool {
+    start_secure_session();
+    return !empty($token) && !empty($_SESSION['csrf_token']) && hash_equals($_SESSION['csrf_token'], $token);
+}
+

includes/footer.php

@@ -0,0 +1,24 @@
+</main>
+
+<footer class="border-t border-slate-800/80 py-6 text-center text-xs text-slate-500">
+    <div class="max-w-7xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-2">
+        <div class="flex items-center space-x-2">
+            <span class="font-bold text-slate-400">Fociz</span>
+            <span>&bull;</span>
+            <span>Focus & Structuur Systeem</span>
+        </div>
+        <div>
+            <span>Beveiligd met MariaDB & Tweestapsverificatie (2FA)</span>
+        </div>
+    </div>
+</footer>
+
+<script>
+    // Lucide Icons initialiseren
+    if (typeof lucide !== 'undefined') {
+        lucide.createIcons();
+    }
+</script>
+</body>
+</html>
+

includes/header.php

@@ -0,0 +1,144 @@
+<?php
+/**
+ * Header & Navigatiebalk voor Fociz
+ */
+
+require_once __DIR__ . '/auth.php';
+$currentUser = $currentUser ?? get_logged_in_user();
+$currentPage = basename($_SERVER['PHP_SELF']);
+?>
+<!DOCTYPE html>
+<html lang="nl" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= htmlspecialchars($pageTitle ?? 'Fociz — Focus, Dagplanning & Roadmap') ?></title>
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        brand: {
+                            50: '#f0fdf4',
+                            500: '#10b981',
+                            600: '#059669',
+                            700: '#047857',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        body {
+            background-color: #090d16;
+            color: #f1f5f9;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        }
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: #0f172a; }
+        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #475569; }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col antialiased selection:bg-emerald-500 selection:text-white">
+
+<?php if ($currentUser): ?>
+<header class="sticky top-0 z-40 bg-[#0c121e]/90 backdrop-blur-md border-b border-slate-800/80">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16">
+            <!-- Brand Logo -->
+            <div class="flex items-center space-x-6">
+                <a href="/planner.php" class="flex items-center space-x-2.5 group">
+                    <div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-emerald-600 to-teal-400 flex items-center justify-center text-slate-950 font-black text-lg shadow-md shadow-emerald-500/20 group-hover:scale-105 transition">
+                        F
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="text-xl font-bold tracking-tight text-white leading-none">Fociz</span>
+                        <span class="text-[10px] text-emerald-400 tracking-wider font-semibold uppercase">Focus & Structuur</span>
+                    </div>
+                </a>
+
+                <!-- Nav Tabs -->
+                <nav class="hidden md:flex items-center space-x-1">
+                    <a href="/planner.php" class="flex items-center space-x-2 px-3.5 py-2 rounded-lg text-sm font-medium transition <?= $currentPage === 'planner.php' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' ?>">
+                        <i data-lucide="calendar" class="w-4 h-4"></i>
+                        <span>Dagplanning</span>
+                    </a>
+                    <a href="/brainstorm.php" class="flex items-center space-x-2 px-3.5 py-2 rounded-lg text-sm font-medium transition <?= in_array($currentPage, ['brainstorm.php', 'brainstorm_canvas.php']) ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' ?>">
+                        <i data-lucide="lightbulb" class="w-4 h-4"></i>
+                        <span>Brainstorm</span>
+                    </a>
+                    <a href="/roadmap.php" class="flex items-center space-x-2 px-3.5 py-2 rounded-lg text-sm font-medium transition <?= $currentPage === 'roadmap.php' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' ?>">
+                        <i data-lucide="map" class="w-4 h-4"></i>
+                        <span>Roadmap</span>
+                    </a>
+                    <a href="/integrations.php" class="flex items-center space-x-2 px-3.5 py-2 rounded-lg text-sm font-medium transition <?= $currentPage === 'integrations.php' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' ?>">
+                        <i data-lucide="layers" class="w-4 h-4"></i>
+                        <span>Integraties</span>
+                    </a>
+                    <?php if ($currentUser['role'] === 'ADMIN'): ?>
+                    <a href="/users.php" class="flex items-center space-x-2 px-3.5 py-2 rounded-lg text-sm font-medium transition <?= $currentPage === 'users.php' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' ?>">
+                        <i data-lucide="users" class="w-4 h-4"></i>
+                        <span>Team & Invites</span>
+                    </a>
+                    <?php endif; ?>
+                </nav>
+            </div>
+
+            <!-- Right side: User & 2FA Status -->
+            <div class="flex items-center space-x-3">
+                <div class="hidden sm:flex items-center space-x-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/25 text-emerald-400 text-xs font-medium">
+                    <i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
+                    <span>2FA Actief</span>
+                </div>
+
+                <div class="text-right hidden sm:block">
+                    <div class="text-xs font-semibold text-slate-200"><?= htmlspecialchars($currentUser['name']) ?></div>
+                    <div class="text-[10px] text-slate-500">
+                        <?= $currentUser['role'] === 'ADMIN' ? 'Beheerder' : 'Collega' ?> • <?= htmlspecialchars($currentUser['email']) ?>
+                    </div>
+                </div>
+
+                <a href="/auth/logout.php" title="Veilig uitloggen" class="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/20 transition">
+                    <i data-lucide="log-out" class="w-4 h-4"></i>
+                </a>
+            </div>
+        </div>
+
+        <!-- Mobile Navigation -->
+        <div class="flex md:hidden items-center justify-around py-2 border-t border-slate-800/60 text-xs">
+            <a href="/planner.php" class="flex flex-col items-center py-1 <?= $currentPage === 'planner.php' ? 'text-emerald-400 font-bold' : 'text-slate-400' ?>">
+                <i data-lucide="calendar" class="w-4 h-4 mb-0.5"></i>
+                <span>Planning</span>
+            </a>
+            <a href="/brainstorm.php" class="flex flex-col items-center py-1 <?= in_array($currentPage, ['brainstorm.php', 'brainstorm_canvas.php']) ? 'text-emerald-400 font-bold' : 'text-slate-400' ?>">
+                <i data-lucide="lightbulb" class="w-4 h-4 mb-0.5"></i>
+                <span>Brainstorm</span>
+            </a>
+            <a href="/roadmap.php" class="flex flex-col items-center py-1 <?= $currentPage === 'roadmap.php' ? 'text-emerald-400 font-bold' : 'text-slate-400' ?>">
+                <i data-lucide="map" class="w-4 h-4 mb-0.5"></i>
+                <span>Roadmap</span>
+            </a>
+            <a href="/integrations.php" class="flex flex-col items-center py-1 <?= $currentPage === 'integrations.php' ? 'text-emerald-400 font-bold' : 'text-slate-400' ?>">
+                <i data-lucide="layers" class="w-4 h-4 mb-0.5"></i>
+                <span>Koppelingen</span>
+            </a>
+            <?php if ($currentUser['role'] === 'ADMIN'): ?>
+            <a href="/users.php" class="flex flex-col items-center py-1 <?= $currentPage === 'users.php' ? 'text-emerald-400 font-bold' : 'text-slate-400' ?>">
+                <i data-lucide="users" class="w-4 h-4 mb-0.5"></i>
+                <span>Team</span>
+            </a>
+            <?php endif; ?>
+        </div>
+    </div>
+</header>
+<?php endif; ?>
+
+<main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8">
+

includes/totp.php

@@ -0,0 +1,132 @@
+<?php
+/**
+ * Pure PHP TOTP (RFC 6238) & 2FA Implementatie
+ * Volledig compatibel met Google Authenticator, Microsoft Authenticator & 1Password
+ */
+
+class TOTP {
+    private static string $base32Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+
+    /**
+     * Genereert een willekeurige 16-teken Base32 geheime sleutel
+     */
+    public static function generateSecret(int $length = 16): string {
+        $secret = '';
+        $bytes = random_bytes($length);
+        for ($i = 0; $i < $length; $i++) {
+            $secret .= self::$base32Chars[ord($bytes[$i]) % 32];
+        }
+        return $secret;
+    }
+
+    /**
+     * Decodeert een Base32 string naar binaire data
+     */
+    private static function base32Decode(string $b32): string {
+        $b32 = strtoupper(trim($b32));
+        $buffer = 0;
+        $bufferBits = 0;
+        $binary = '';
+
+        for ($i = 0; $i < strlen($b32); $i++) {
+            $char = $b32[$i];
+            $val = strpos(self::$base32Chars, $char);
+            if ($val === false) continue; // Negeer spaties/ongeldige tekens
+
+            $buffer = ($buffer << 5) | $val;
+            $bufferBits += 5;
+
+            if ($bufferBits >= 8) {
+                $bufferBits -= 8;
+                $binary .= chr(($buffer >> $bufferBits) & 0xFF);
+            }
+        }
+
+        return $binary;
+    }
+
+    /**
+     * Berekent de 6-cijferige TOTP code voor een bepaald tijdsinterval
+     */
+    public static function getCode(string $secret, ?int $timestamp = null): string {
+        if ($timestamp === null) {
+            $timestamp = time();
+        }
+
+        $timeCounter = floor($timestamp / 30);
+        $binaryKey = self::base32Decode($secret);
+
+        // Converteer tijdsinterval naar 8-byte big-endian binaire string
+        $binaryTime = pack('N*', 0) . pack('N*', $timeCounter);
+
+        $hash = hash_hmac('sha1', $binaryTime, $binaryKey, true);
+        $offset = ord($hash[strlen($hash) - 1]) & 0x0F;
+
+        $binaryCode = (
+            ((ord($hash[$offset]) & 0x7F) << 24) |
+            ((ord($hash[$offset + 1]) & 0xFF) << 16) |
+            ((ord($hash[$offset + 2]) & 0xFF) << 8) |
+            (ord($hash[$offset + 3]) & 0xFF)
+        );
+
+        $otp = $binaryCode % 1000000;
+        return str_pad((string)$otp, 6, '0', STR_PAD_LEFT);
+    }
+
+    /**
+     * Verifieert een ingevoerde 6-cijferige 2FA code (met 1 tijdstap speling naar voor/achter)
+     */
+    public static function verifyCode(string $secret, string $userInputCode, int $window = 1): boolean {
+        $userInputCode = trim(str_replace(' ', '', $userInputCode));
+        if (strlen($userInputCode) !== 6 || !ctype_digit($userInputCode)) {
+            return false;
+        }
+
+        $currentTime = time();
+        for ($i = -$window; $i <= $window; $i++) {
+            $calcCode = self::getCode($secret, $currentTime + ($i * 30));
+            if (hash_equals($calcCode, $userInputCode)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Maakt de otpauth:// URL aan voor authenticator apps
+     */
+    public static function getOtpAuthUrl(string $email, string $secret, string $issuer = 'Fociz'): string {
+        return sprintf(
+            'otpauth://totp/%s:%s?secret=%s&issuer=%s&algorithm=SHA1&digits=6&period=30',
+            rawurlencode($issuer),
+            rawurlencode($email),
+            $secret,
+            rawurlencode($issuer)
+        );
+    }
+
+    /**
+     * Genereert een QR code afbeelding URL (via QuickChart HTTPS)
+     */
+    public static function getQrCodeUrl(string $otpAuthUrl, int $size = 220): string {
+        return sprintf(
+            'https://quickchart.io/qr?text=%s&size=%d&margin=1&ecLevel=M',
+            urlencode($otpAuthUrl),
+            $size
+        );
+    }
+
+    /**
+     * Genereert een lijst met eenmalige herstelcodes
+     */
+    public static function generateBackupCodes(int $count = 8): array {
+        $codes = [];
+        for ($i = 0; $i < $count; $i++) {
+            $bytes = bin2hex(random_bytes(4));
+            $codes[] = strtoupper(substr($bytes, 0, 4) . '-' . substr($bytes, 4, 4));
+        }
+        return $codes;
+    }
+}
+

index.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Fociz Entrypoint
+ */
+
+require_once __DIR__ . '/includes/auth.php';
+start_secure_session();
+
+if (!has_admin_user()) {
+    header('Location: /auth/setup.php');
+    exit;
+}
+
+if (!empty($_SESSION['user_id']) && !empty($_SESSION['is_2fa_verified'])) {
+    header('Location: /planner.php');
+    exit;
+}
+
+header('Location: /auth/login.php');
+exit;
+

integrations.php

@@ -0,0 +1,304 @@
+<?php
+/**
+ * Fociz Integraties Hub (Outlook, Teams, Jira)
+ */
+
+require_once __DIR__ . '/includes/header.php';
+$db = get_db_connection();
+$userId = $currentUser['id'];
+
+// Formulierverwerking voor integratie instellingen
+$message = null;
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $provider = $_POST['provider'] ?? '';
+    $isDemo = isset($_POST['is_demo_mode']) ? 1 : 0;
+    $settings = json_encode([
+        'client_id' => $_POST['client_id'] ?? '',
+        'client_secret' => $_POST['client_secret'] ?? '',
+        'tenant_id' => $_POST['tenant_id'] ?? '',
+        'jira_domain' => $_POST['jira_domain'] ?? '',
+        'jira_email' => $_POST['jira_email'] ?? '',
+        'jira_api_token' => $_POST['jira_api_token'] ?? '',
+    ]);
+
+    if (in_array($provider, ['OUTLOOK', 'TEAMS', 'JIRA'])) {
+        $stmt = $db->prepare("
+            INSERT INTO integrations (user_id, provider, is_enabled, is_demo_mode, settings, last_sync_at)
+            VALUES (?, ?, 1, ?, ?, NOW())
+            ON DUPLICATE KEY UPDATE is_demo_mode = VALUES(is_demo_mode), settings = VALUES(settings), last_sync_at = NOW()
+        ");
+        $stmt->execute([$userId, $provider, $isDemo, $settings]);
+        $message = "Instellingen voor {$provider} succesvol opgeslagen.";
+    }
+}
+
+// Haal huidige configuraties op
+$stmtConfigs = $db->prepare("SELECT * FROM integrations WHERE user_id = ?");
+$stmtConfigs->execute([$userId]);
+$configsRaw = $stmtConfigs->fetchAll();
+$configs = [];
+foreach ($configsRaw as $c) {
+    $configs[$c['provider']] = $c;
+    $configs[$c['provider']]['settings_parsed'] = json_decode($c['settings'] ?? '{}', true) ?: [];
+}
+
+// Jira demo issues
+$jiraIssues = [
+    [
+        'key' => 'FOC-101',
+        'summary' => 'Tweestapsverificatie (2FA TOTP) flow implementeren',
+        'status' => 'In Progress',
+        'priority' => 'High',
+        'epic' => 'Security & Access',
+    ],
+    [
+        'key' => 'FOC-102',
+        'summary' => 'Interactief whiteboard canvas voor brainstormsessies',
+        'status' => 'To Do',
+        'priority' => 'High',
+        'epic' => 'Brainstorming Module',
+    ],
+    [
+        'key' => 'FOC-103',
+        'summary' => 'Koppeling met Microsoft Outlook Calendar & Teams Graph API',
+        'status' => 'In Review',
+        'priority' => 'Medium',
+        'epic' => 'Integrations Hub',
+    ],
+    [
+        'key' => 'FOC-104',
+        'summary' => 'Roadmap kwartaalweergave en voortgangsindicatoren',
+        'status' => 'To Do',
+        'priority' => 'Medium',
+        'epic' => 'Roadmap Module',
+    ]
+];
+?>
+
+<div class="space-y-6">
+    <!-- Header -->
+    <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl">
+        <div class="flex items-center space-x-2 text-blue-400 text-xs font-semibold uppercase tracking-wider mb-1">
+            <i data-lucide="layers" class="w-4 h-4"></i>
+            <span>Connectiviteit & Synchronisatie</span>
+        </div>
+        <h1 class="text-2xl sm:text-3xl font-black text-white tracking-tight">
+            Integraties Hub
+        </h1>
+        <p class="text-slate-400 text-xs sm:text-sm mt-1">
+            Beheer uw koppelingen met Microsoft Outlook (agenda & taken), Microsoft Teams (meetings) en Atlassian Jira (issues & roadmap).
+        </p>
+    </div>
+
+    <?php if ($message): ?>
+        <div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-xs font-semibold flex items-center space-x-2">
+            <i data-lucide="check-circle" class="w-4 h-4"></i>
+            <span><?= htmlspecialchars($message) ?></span>
+        </div>
+    <?php endif; ?>
+
+    <!-- Integratie Cards Grid -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        
+        <!-- 1. OUTLOOK -->
+        <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl flex flex-col justify-between">
+            <div>
+                <div class="flex items-center justify-between mb-4">
+                    <div class="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/30 text-blue-400 flex items-center justify-center font-bold">
+                        <i data-lucide="calendar" class="w-5 h-5"></i>
+                    </div>
+                    <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-medium flex items-center space-x-1">
+                        <i data-lucide="check-circle" class="w-3 h-3"></i>
+                        <span>Actief</span>
+                    </span>
+                </div>
+
+                <h3 class="text-base font-bold text-white mb-1">Microsoft Outlook</h3>
+                <p class="text-xs text-slate-400 mb-4">
+                    Synchroniseert uw agenda-afspraken en e-mails automatisch naar uw dagplanning en time-blocks.
+                </p>
+
+                <div class="bg-slate-950/60 rounded-xl p-3 border border-slate-800/80 text-xs space-y-2 mb-4">
+                    <div class="flex items-center justify-between text-slate-400">
+                        <span>Status:</span>
+                        <span class="text-emerald-400 font-semibold">Gekoppeld</span>
+                    </div>
+                    <div class="flex items-center justify-between text-slate-400">
+                        <span>Sync frequentie:</span>
+                        <span class="text-slate-200">Elke 15 min</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Instellingen formulier -->
+            <form method="POST" action="/integrations.php" class="pt-3 border-t border-slate-800 space-y-3">
+                <input type="hidden" name="provider" value="OUTLOOK">
+                
+                <label class="flex items-center space-x-2 text-xs text-slate-300">
+                    <input type="checkbox" name="is_demo_mode" value="1" <?= empty($configs['OUTLOOK']) || !empty($configs['OUTLOOK']['is_demo_mode']) ? 'checked' : '' ?> class="rounded bg-slate-900 border-slate-700 text-emerald-500">
+                    <span>Gebruik interactieve Sandbox data</span>
+                </label>
+
+                <button type="submit" class="w-full py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs font-semibold transition">
+                    Instellingen Bijwerken
+                </button>
+            </form>
+        </div>
+
+        <!-- 2. MICROSOFT TEAMS -->
+        <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl flex flex-col justify-between">
+            <div>
+                <div class="flex items-center justify-between mb-4">
+                    <div class="w-10 h-10 rounded-xl bg-indigo-500/10 border border-indigo-500/30 text-indigo-400 flex items-center justify-center font-bold">
+                        <i data-lucide="video" class="w-5 h-5"></i>
+                    </div>
+                    <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-medium flex items-center space-x-1">
+                        <i data-lucide="check-circle" class="w-3 h-3"></i>
+                        <span>Actief</span>
+                    </span>
+                </div>
+
+                <h3 class="text-base font-bold text-white mb-1">Microsoft Teams</h3>
+                <p class="text-xs text-slate-400 mb-4">
+                    Toont vandaag geplande Teams meetings met directe 'Deelnemen' links en kanaalupdates.
+                </p>
+
+                <div class="bg-slate-950/60 rounded-xl p-3 border border-slate-800/80 text-xs space-y-2 mb-4">
+                    <div class="flex items-center justify-between text-slate-400">
+                        <span>Direct Deelnemen:</span>
+                        <span class="text-emerald-400 font-semibold">Ondersteund</span>
+                    </div>
+                    <div class="flex items-center justify-between text-slate-400">
+                        <span>Meldingen:</span>
+                        <span class="text-slate-200">Ingeschakeld</span>
+                    </div>
+                </div>
+            </div>
+
+            <form method="POST" action="/integrations.php" class="pt-3 border-t border-slate-800 space-y-3">
+                <input type="hidden" name="provider" value="TEAMS">
+                
+                <label class="flex items-center space-x-2 text-xs text-slate-300">
+                    <input type="checkbox" name="is_demo_mode" value="1" <?= empty($configs['TEAMS']) || !empty($configs['TEAMS']['is_demo_mode']) ? 'checked' : '' ?> class="rounded bg-slate-900 border-slate-700 text-emerald-500">
+                    <span>Gebruik interactieve Sandbox data</span>
+                </label>
+
+                <button type="submit" class="w-full py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs font-semibold transition">
+                    Instellingen Bijwerken
+                </button>
+            </form>
+        </div>
+
+        <!-- 3. ATLASSIAN JIRA -->
+        <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl flex flex-col justify-between">
+            <div>
+                <div class="flex items-center justify-between mb-4">
+                    <div class="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/30 text-sky-400 flex items-center justify-center font-bold">
+                        <i data-lucide="trello" class="w-5 h-5"></i>
+                    </div>
+                    <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-medium flex items-center space-x-1">
+                        <i data-lucide="check-circle" class="w-3 h-3"></i>
+                        <span>Actief</span>
+                    </span>
+                </div>
+
+                <h3 class="text-base font-bold text-white mb-1">Atlassian Jira</h3>
+                <p class="text-xs text-slate-400 mb-4">
+                    Koppelt Jira Epics en Issues direct aan uw roadmap items en takenlijst.
+                </p>
+
+                <div class="bg-slate-950/60 rounded-xl p-3 border border-slate-800/80 text-xs space-y-2 mb-4">
+                    <div class="flex items-center justify-between text-slate-400">
+                        <span>Two-way Status Sync:</span>
+                        <span class="text-emerald-400 font-semibold">Ondersteund</span>
+                    </div>
+                    <div class="flex items-center justify-between text-slate-400">
+                        <span>Roadmap Linkage:</span>
+                        <span class="text-slate-200">Actief</span>
+                    </div>
+                </div>
+            </div>
+
+            <form method="POST" action="/integrations.php" class="pt-3 border-t border-slate-800 space-y-2">
+                <input type="hidden" name="provider" value="JIRA">
+                
+                <div>
+                    <label class="block text-[10px] text-slate-400 mb-0.5">Jira Cloud Domein</label>
+                    <input type="text" name="jira_domain" placeholder="uwbedrijf.atlassian.net" value="<?= htmlspecialchars($configs['JIRA']['settings_parsed']['jira_domain'] ?? '') ?>" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1 text-xs text-white placeholder-slate-600 focus:outline-none">
+                </div>
+
+                <label class="flex items-center space-x-2 text-xs text-slate-300 pt-1">
+                    <input type="checkbox" name="is_demo_mode" value="1" <?= empty($configs['JIRA']) || !empty($configs['JIRA']['is_demo_mode']) ? 'checked' : '' ?> class="rounded bg-slate-900 border-slate-700 text-emerald-500">
+                    <span>Gebruik interactieve Sandbox data</span>
+                </label>
+
+                <button type="submit" class="w-full py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs font-semibold transition">
+                    Jira Opslaan
+                </button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Gesynchroniseerde Jira Issues & 1-Click Import naar Dagplanning -->
+    <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
+        <div class="flex items-center justify-between pb-3 border-b border-slate-800">
+            <div class="flex items-center space-x-2">
+                <i data-lucide="check-square" class="w-5 h-5 text-sky-400"></i>
+                <h3 class="text-sm font-bold text-white uppercase tracking-wider">
+                    Jira Issues Toegewezen aan U
+                </h3>
+            </div>
+            <span class="text-xs text-slate-400 font-mono"><?= count($jiraIssues) ?> issues</span>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <?php foreach ($jiraIssues as $issue): ?>
+                <div class="bg-slate-950/60 border border-slate-800 hover:border-slate-700 rounded-xl p-4 flex flex-col justify-between transition">
+                    <div>
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="font-mono text-xs font-bold text-sky-400 bg-sky-500/10 border border-sky-500/20 px-2 py-0.5 rounded">
+                                <?= htmlspecialchars($issue['key']) ?>
+                            </span>
+                            <span class="text-[10px] font-semibold px-2 py-0.5 rounded bg-slate-800 text-slate-300">
+                                <?= htmlspecialchars($issue['status']) ?>
+                            </span>
+                        </div>
+                        <h4 class="text-xs font-bold text-white leading-snug">
+                            <?= htmlspecialchars($issue['summary']) ?>
+                        </h4>
+                        <span class="text-[10px] text-slate-500 mt-1 block">Epic: <?= htmlspecialchars($issue['epic']) ?></span>
+                    </div>
+
+                    <div class="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between">
+                        <span class="text-[10px] font-bold text-amber-400"><?= htmlspecialchars($issue['priority']) ?> Priority</span>
+                        <button onclick="importJiraToTasks('<?= htmlspecialchars(addslashes($issue['summary'])) ?>', '<?= htmlspecialchars($issue['key']) ?>')" class="flex items-center space-x-1 text-[11px] font-semibold text-emerald-400 hover:text-emerald-300 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 px-2.5 py-1 rounded-lg transition">
+                            <i data-lucide="plus" class="w-3 h-3"></i>
+                            <span>Plan als Dagtaak</span>
+                        </button>
+                    </div>
+                </div>
+            <?php endforeach; ?>
+        </div>
+    </div>
+</div>
+
+<script>
+async function importJiraToTasks(title, jiraKey) {
+    const res = await fetch('/api/planner.php?action=add_task', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+            title: `[${jiraKey}] ${title}`,
+            priority: 'P1',
+            date: '<?= date('Y-m-d') ?>'
+        })
+    });
+    const data = await res.json();
+    if (data.success) {
+        alert(`Jira issue ${jiraKey} is toegevoegd aan uw dagplanning!`);
+    }
+}
+</script>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>
+

planner.php

@@ -0,0 +1,494 @@
+<?php
+/**
+ * Fociz Dagplanning, Focus Modus & Time-blocking
+ */
+
+require_once __DIR__ . '/includes/header.php';
+
+$db = get_db_connection();
+$userId = $currentUser['id'];
+$today = date('Y-m-d');
+
+// Haal dagplanning op of maak aan
+$stmtPlan = $db->prepare("SELECT * FROM daily_plans WHERE user_id = ? AND plan_date = ?");
+$stmtPlan->execute([$userId, $today]);
+$dailyPlan = $stmtPlan->fetch();
+
+if (!$dailyPlan) {
+    $stmtCreatePlan = $db->prepare("
+        INSERT INTO daily_plans (user_id, plan_date, focus_goal) 
+        VALUES (?, ?, 'Mijn belangrijkste doel van vandaag behalen')
+    ");
+    $stmtCreatePlan->execute([$userId, $today]);
+    $planId = (int)$db->lastInsertId();
+    $dailyPlan = ['id' => $planId, 'plan_date' => $today, 'focus_goal' => 'Mijn belangrijkste doel van vandaag behalen', 'notes' => ''];
+}
+
+// Haal taken op voor vandaag
+$stmtTasks = $db->prepare("
+    SELECT * FROM tasks 
+    WHERE user_id = ? AND (daily_plan_id = ? OR daily_plan_id IS NULL)
+    ORDER BY is_completed ASC, priority ASC, time_block_start ASC, created_at DESC
+");
+$stmtTasks->execute([$userId, $dailyPlan['id']]);
+$tasks = $stmtTasks->fetchAll();
+
+// Outlook demo / gesynchroniseerde events
+$outlookEvents = [
+    [
+        'id' => 'evt-1',
+        'subject' => 'Daily Team Standup & Focus Sync',
+        'start' => '09:00',
+        'end' => '09:30',
+        'location' => 'Microsoft Teams',
+        'meeting_url' => 'https://teams.microsoft.com',
+    ],
+    [
+        'id' => 'evt-2',
+        'subject' => 'Sprint & Roadmap Review met Stakeholders',
+        'start' => '11:00',
+        'end' => '12:00',
+        'location' => 'Vergaderruimte A & Teams',
+        'meeting_url' => 'https://teams.microsoft.com',
+    ],
+    [
+        'id' => 'evt-3',
+        'subject' => 'Architectuur & MariaDB Database Evaluatie',
+        'start' => '14:30',
+        'end' => '15:30',
+        'location' => 'Online Teams Call',
+        'meeting_url' => 'https://teams.microsoft.com',
+    ]
+];
+
+$hours = ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"];
+
+// Nederlandse datumformattering
+$dutchDays = ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'];
+$dutchMonths = ['', 'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'];
+$formattedDate = $dutchDays[date('w')] . ' ' . date('j') . ' ' . $dutchMonths[(int)date('n')] . ' ' . date('Y');
+?>
+
+<div class="space-y-6">
+    <!-- Top Banner: Datum & Hoofddoel -->
+    <div class="bg-gradient-to-r from-slate-900 via-[#0e1626] to-slate-900 border border-slate-800 rounded-2xl p-6 shadow-2xl">
+        <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+            <div>
+                <div class="flex items-center space-x-2 text-emerald-400 text-xs font-semibold uppercase tracking-wider mb-1">
+                    <i data-lucide="calendar" class="w-4 h-4"></i>
+                    <span><?= htmlspecialchars($formattedDate) ?></span>
+                </div>
+                <h1 class="text-2xl sm:text-3xl font-black text-white tracking-tight">
+                    Dagplanning & Structuur
+                </h1>
+            </div>
+
+            <div class="flex items-center space-x-2">
+                <a href="/integrations.php" class="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-blue-950/60 border border-blue-800/60 text-blue-300 hover:text-white hover:bg-blue-900/60 text-xs font-medium transition">
+                    <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
+                    <span>Outlook & Teams Verbonden</span>
+                </a>
+            </div>
+        </div>
+
+        <!-- Dagdoel invoerveld -->
+        <div class="mt-5 pt-4 border-t border-slate-800/80">
+            <label class="block text-xs font-bold text-emerald-400 uppercase tracking-wider mb-1.5 flex items-center space-x-1.5">
+                <i data-lucide="target" class="w-4 h-4"></i>
+                <span>Mijn Belangrijkste Dagdoel (Nummer 1 Focus)</span>
+            </label>
+            <div class="flex items-center space-x-2">
+                <input 
+                    type="text" 
+                    id="focusGoalInput"
+                    value="<?= htmlspecialchars($dailyPlan['focus_goal'] ?? '') ?>"
+                    placeholder="Wat moet er vandaag absoluut gebeuren voor succes?" 
+                    class="flex-1 bg-slate-950/70 border border-slate-700/80 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500 font-medium transition"
+                >
+                <button 
+                    onclick="saveGoal()" 
+                    id="saveGoalBtn"
+                    class="px-4 py-2.5 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold text-xs rounded-xl transition flex items-center space-x-1 shadow-md shadow-emerald-500/20"
+                >
+                    <i data-lucide="check-circle-2" class="w-4 h-4"></i>
+                    <span>Opslaan</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Grid: Timer + Takenlijst (Links) & Timeblocking (Rechts) -->
+    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        
+        <!-- Linker kolom: Focus Timer & Taken -->
+        <div class="lg:col-span-7 space-y-6">
+            
+            <!-- Focus Modus Timer -->
+            <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl relative overflow-hidden backdrop-blur-sm">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-2">
+                        <div class="w-8 h-8 rounded-lg bg-emerald-500/10 text-emerald-400 flex items-center justify-center">
+                            <i data-lucide="flame" class="w-4 h-4"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-sm font-bold text-white uppercase tracking-wider">Focus Modus</h3>
+                            <p class="text-[11px] text-slate-400">Pomodoro & diepe concentratie</p>
+                        </div>
+                    </div>
+
+                    <div class="flex bg-slate-950/80 p-1 rounded-xl border border-slate-800 text-xs">
+                        <button onclick="setTimerPreset(25)" id="btnPreset25" class="px-2.5 py-1 rounded-lg font-bold bg-emerald-500 text-slate-950 transition">25m Focus</button>
+                        <button onclick="setTimerPreset(50)" id="btnPreset50" class="px-2.5 py-1 rounded-lg text-slate-400 hover:text-slate-200 transition">50m Deep</button>
+                        <button onclick="setTimerPreset(5)" id="btnPreset5" class="px-2.5 py-1 rounded-lg text-slate-400 hover:text-slate-200 transition">5m Pauze</button>
+                    </div>
+                </div>
+
+                <div class="text-center my-6">
+                    <div id="timerDisplay" class="text-5xl sm:text-6xl font-black font-mono tracking-tight text-white mb-2">25:00</div>
+                    <div class="min-h-[22px] text-xs text-slate-400 truncate max-w-sm mx-auto flex items-center justify-center space-x-1">
+                        <span class="text-emerald-400 font-medium">Actieve focus:</span>
+                        <span id="activeTaskDisplay" class="text-slate-200 font-semibold">Kies een taak hieronder</span>
+                    </div>
+
+                    <div class="w-full bg-slate-950/80 h-2 rounded-full overflow-hidden mt-4 border border-slate-800/80">
+                        <div id="timerProgress" class="h-full bg-gradient-to-r from-emerald-500 to-teal-400 transition-all duration-300 rounded-full" style="width: 0%"></div>
+                    </div>
+                </div>
+
+                <div class="flex items-center justify-center space-x-3">
+                    <button id="timerToggleBtn" onclick="toggleTimer()" class="flex items-center space-x-2 px-6 py-2.5 rounded-xl font-bold text-sm bg-emerald-500 hover:bg-emerald-600 text-slate-950 transition shadow-lg shadow-emerald-500/20">
+                        <i data-lucide="play" class="w-4 h-4 fill-current"></i>
+                        <span id="timerToggleText">Start Focus</span>
+                    </button>
+                    <button onclick="resetTimer()" class="p-2.5 rounded-xl bg-slate-800/80 text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition border border-slate-700/60" title="Reset">
+                        <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Takenlijst -->
+            <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl backdrop-blur-sm">
+                <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800">
+                    <div>
+                        <h3 class="text-sm font-bold text-white uppercase tracking-wider flex items-center space-x-2">
+                            <span>Dagtaken & Prioriteiten</span>
+                            <span class="text-xs font-normal text-slate-400">(<?= count($tasks) ?>)</span>
+                        </h3>
+                    </div>
+
+                    <button onclick="toggleAddTaskForm()" class="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-emerald-500 hover:bg-emerald-600 text-slate-950 text-xs font-bold transition shadow-md shadow-emerald-500/20">
+                        <i data-lucide="plus" class="w-4 h-4"></i>
+                        <span>Nieuwe Taak</span>
+                    </button>
+                </div>
+
+                <!-- Nieuwe taak formulier (verborgen by default) -->
+                <div id="addTaskForm" class="hidden mb-4 p-4 rounded-xl bg-slate-950/90 border border-emerald-500/30 space-y-3">
+                    <div>
+                        <label class="block text-[11px] font-medium text-slate-400 mb-1">Taaktitel</label>
+                        <input type="text" id="newTaskTitle" placeholder="Wat moet er vandaag gedaan worden?" class="w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2 text-white text-xs placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-emerald-500">
+                    </div>
+                    <div class="grid grid-cols-2 gap-3">
+                        <div>
+                            <label class="block text-[11px] font-medium text-slate-400 mb-1">Prioriteit</label>
+                            <select id="newTaskPriority" class="w-full bg-slate-900 border border-slate-800 rounded-lg px-2.5 py-1.5 text-white text-xs focus:outline-none">
+                                <option value="P1">P1 - Brandend / Hoogste Focus</option>
+                                <option value="P2" selected>P2 - Belangrijk (Standaard)</option>
+                                <option value="P3">P3 - Regulier / Lage druk</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-[11px] font-medium text-slate-400 mb-1">Tijdblok (Starttijd)</label>
+                            <input type="text" id="newTaskTime" placeholder="Bijv. 09:30" class="w-full bg-slate-900 border border-slate-800 rounded-lg px-2.5 py-1.5 text-white text-xs font-mono focus:outline-none">
+                        </div>
+                    </div>
+                    <div class="flex space-x-2 pt-1">
+                        <button onclick="submitNewTask()" class="px-4 py-1.5 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold rounded-lg text-xs transition">Opslaan</button>
+                        <button onclick="toggleAddTaskForm()" class="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-400 rounded-lg text-xs transition">Annuleren</button>
+                    </div>
+                </div>
+
+                <!-- Taken weergave -->
+                <div class="space-y-2" id="tasksContainer">
+                    <?php if (empty($tasks)): ?>
+                        <div class="text-center py-8 text-slate-500 text-xs">
+                            Nog geen taken gepland voor vandaag. Klik op 'Nieuwe Taak' om te beginnen.
+                        </div>
+                    <?php else: ?>
+                        <?php foreach ($tasks as $task): ?>
+                            <div class="group flex items-center justify-between p-3 rounded-xl border <?= $task['is_completed'] ? 'bg-slate-950/30 border-slate-900 opacity-60' : 'bg-slate-950/60 border-slate-800 hover:border-slate-700' ?> transition" id="task-row-<?= $task['id'] ?>">
+                                <div class="flex items-center space-x-3 truncate mr-2">
+                                    <button onclick="toggleTask(<?= $task['id'] ?>, <?= $task['is_completed'] ? 0 : 1 ?>)" class="w-5 h-5 rounded-lg border flex items-center justify-center transition <?= $task['is_completed'] ? 'bg-emerald-500 border-emerald-500 text-slate-950 font-bold' : 'border-slate-700 hover:border-emerald-400 bg-slate-900' ?>">
+                                        <?php if ($task['is_completed']): ?>
+                                            <i data-lucide="check" class="w-3.5 h-3.5 stroke-[3]"></i>
+                                        <?php endif; ?>
+                                    </button>
+
+                                    <div class="truncate">
+                                        <span class="text-xs font-medium block truncate <?= $task['is_completed'] ? 'line-through text-slate-500' : 'text-slate-200' ?>">
+                                            <?= htmlspecialchars($task['title']) ?>
+                                        </span>
+                                        <?php if (!empty($task['time_block_start'])): ?>
+                                            <span class="text-[10px] text-slate-400 font-mono flex items-center space-x-1 mt-0.5">
+                                                <i data-lucide="clock" class="w-2.5 h-2.5"></i>
+                                                <span><?= htmlspecialchars($task['time_block_start']) ?></span>
+                                            </span>
+                                        <?php endif; ?>
+                                    </div>
+                                </div>
+
+                                <div class="flex items-center space-x-2 flex-shrink-0">
+                                    <span class="text-[10px] font-bold px-2 py-0.5 rounded-full <?= $task['priority'] === 'P1' ? 'bg-red-500/20 text-red-400 border border-red-500/30' : ($task['priority'] === 'P2' ? 'bg-amber-500/20 text-amber-400 border border-amber-500/30' : 'bg-slate-800 text-slate-400') ?>">
+                                        <?= htmlspecialchars($task['priority']) ?>
+                                    </span>
+
+                                    <?php if (!$task['is_completed']): ?>
+                                        <button onclick="selectFocusTask('<?= htmlspecialchars(addslashes($task['title'])) ?>')" title="Koppel aan Focus Timer" class="p-1.5 rounded-lg text-slate-400 hover:text-emerald-400 hover:bg-emerald-500/10 transition">
+                                            <i data-lucide="flame" class="w-3.5 h-3.5"></i>
+                                        </button>
+                                    <?php endif; ?>
+
+                                    <button onclick="deleteTask(<?= $task['id'] ?>)" title="Verwijderen" class="p-1.5 rounded-lg text-slate-600 hover:text-red-400 hover:bg-red-500/10 opacity-0 group-hover:opacity-100 transition">
+                                        <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        <?php endforeach; ?>
+                    <?php endif; ?>
+                </div>
+            </div>
+
+            <!-- Dagnotities & Reflectie -->
+            <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl backdrop-blur-sm">
+                <div class="flex items-center space-x-2 mb-3">
+                    <i data-lucide="book-open" class="w-4 h-4 text-emerald-400"></i>
+                    <h3 class="text-sm font-bold text-white uppercase tracking-wider">Dagnotities & Kladblok</h3>
+                </div>
+                <textarea 
+                    id="dailyNotesInput"
+                    rows="3" 
+                    placeholder="Belangrijke aantekeningen, reflecties of snelle memo's voor vandaag..." 
+                    onblur="saveGoal()"
+                    class="w-full bg-slate-950/70 border border-slate-800 rounded-xl p-3 text-white text-xs placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-emerald-500 resize-none transition"
+                ><?= htmlspecialchars($dailyPlan['notes'] ?? '') ?></textarea>
+            </div>
+        </div>
+
+        <!-- Rechter kolom: Timeblocking & Outlook Tijdlijn -->
+        <div class="lg:col-span-5 space-y-6">
+            <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl backdrop-blur-sm">
+                <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800">
+                    <div class="flex items-center space-x-2">
+                        <i data-lucide="clock" class="w-5 h-5 text-emerald-400"></i>
+                        <h3 class="text-sm font-bold text-white uppercase tracking-wider">Tijdlijn & Time-blocking</h3>
+                    </div>
+                    <span class="text-xs text-slate-400">08:00 – 18:00</span>
+                </div>
+
+                <div class="space-y-2">
+                    <?php foreach ($hours as $hour): 
+                        $hourInt = (int)explode(':', $hour)[0];
+                        
+                        // Zoek Outlook meetings
+                        $slotEvents = array_filter($outlookEvents, function($e) use ($hourInt) {
+                            return (int)explode(':', $e['start'])[0] === $hourInt;
+                        });
+
+                        // Zoek taken in dit blok
+                        $slotTasks = array_filter($tasks, function($t) use ($hourInt) {
+                            return !empty($t['time_block_start']) && (int)explode(':', $t['time_block_start'])[0] === $hourInt;
+                        });
+                    ?>
+                        <div class="flex items-start group min-h-[50px] border-b border-slate-800/40 pb-2 last:border-0">
+                            <div class="w-14 text-xs font-mono font-medium text-slate-400 pt-1 flex-shrink-0">
+                                <?= $hour ?>
+                            </div>
+
+                            <div class="flex-1 space-y-1.5">
+                                <!-- Outlook meetings -->
+                                <?php foreach ($slotEvents as $evt): ?>
+                                    <div class="flex items-center justify-between p-2 rounded-xl bg-blue-950/40 border border-blue-800/50 text-blue-200 text-xs shadow-sm">
+                                        <div class="flex items-center space-x-2 truncate mr-2">
+                                            <span class="px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-400 font-mono text-[10px] font-bold">
+                                                <?= $evt['start'] ?> - <?= $evt['end'] ?>
+                                            </span>
+                                            <span class="font-semibold truncate"><?= htmlspecialchars($evt['subject']) ?></span>
+                                        </div>
+                                        <a href="<?= htmlspecialchars($evt['meeting_url']) ?>" target="_blank" class="flex items-center space-x-1 text-[10px] text-blue-400 hover:text-blue-300 bg-blue-500/20 px-2 py-0.5 rounded-lg flex-shrink-0">
+                                            <i data-lucide="video" class="w-3 h-3"></i>
+                                            <span>Deelnemen</span>
+                                        </a>
+                                    </div>
+                                <?php endforeach; ?>
+
+                                <!-- Geplande taken -->
+                                <?php foreach ($slotTasks as $t): ?>
+                                    <div class="flex items-center justify-between p-2 rounded-xl border text-xs <?= $t['is_completed'] ? 'bg-slate-900/40 border-slate-800 text-slate-500 line-through' : 'bg-emerald-950/30 border-emerald-800/40 text-emerald-100' ?>">
+                                        <div class="flex items-center space-x-2 truncate mr-2">
+                                            <span class="px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 font-mono text-[10px] font-bold">
+                                                <?= htmlspecialchars($t['time_block_start']) ?>
+                                            </span>
+                                            <span class="font-semibold truncate"><?= htmlspecialchars($t['title']) ?></span>
+                                        </div>
+                                        <span class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400">
+                                            <?= $t['priority'] ?>
+                                        </span>
+                                    </div>
+                                <?php endforeach; ?>
+
+                                <?php if (empty($slotEvents) && empty($slotTasks)): ?>
+                                    <button onclick="quickSchedule('<?= $hour ?>')" class="w-full text-left py-1 px-2 rounded-lg border border-dashed border-transparent hover:border-slate-800 hover:bg-slate-950/40 text-slate-600 hover:text-slate-400 text-xs transition">
+                                        + Plan taak om <?= $hour ?>
+                                    </button>
+                                <?php endif; ?>
+                            </div>
+                        </div>
+                    <?php endforeach; ?>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+// --- Focus Timer Logica ---
+let timerInterval = null;
+let timerSeconds = 25 * 60;
+let totalDuration = 25 * 60;
+let isRunning = false;
+
+function updateTimerDisplay() {
+    const min = Math.floor(timerSeconds / 60);
+    const sec = timerSeconds % 60;
+    document.getElementById('timerDisplay').innerText = 
+        `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
+
+    const progress = ((totalDuration - timerSeconds) / totalDuration) * 100;
+    document.getElementById('timerProgress').style.width = `${progress}%`;
+}
+
+function setTimerPreset(minutes) {
+    clearInterval(timerInterval);
+    isRunning = false;
+    timerSeconds = minutes * 60;
+    totalDuration = minutes * 60;
+    updateTimerDisplay();
+
+    // Toggle styling
+    document.getElementById('timerToggleText').innerText = 'Start Focus';
+    document.getElementById('btnPreset25').className = minutes === 25 ? 'px-2.5 py-1 rounded-lg font-bold bg-emerald-500 text-slate-950' : 'px-2.5 py-1 rounded-lg text-slate-400 hover:text-slate-200';
+    document.getElementById('btnPreset50').className = minutes === 50 ? 'px-2.5 py-1 rounded-lg font-bold bg-emerald-500 text-slate-950' : 'px-2.5 py-1 rounded-lg text-slate-400 hover:text-slate-200';
+    document.getElementById('btnPreset5').className = minutes === 5 ? 'px-2.5 py-1 rounded-lg font-bold bg-teal-500 text-slate-950' : 'px-2.5 py-1 rounded-lg text-slate-400 hover:text-slate-200';
+}
+
+function toggleTimer() {
+    if (isRunning) {
+        clearInterval(timerInterval);
+        isRunning = false;
+        document.getElementById('timerToggleText').innerText = 'Hervatten';
+    } else {
+        isRunning = true;
+        document.getElementById('timerToggleText').innerText = 'Pauzeren';
+        timerInterval = setInterval(() => {
+            if (timerSeconds > 0) {
+                timerSeconds--;
+                updateTimerDisplay();
+            } else {
+                clearInterval(timerInterval);
+                isRunning = false;
+                document.getElementById('timerToggleText').innerText = 'Start Focus';
+                alert('Focus sessie voltooid! Neem even een korte pauze.');
+            }
+        }, 1000);
+    }
+}
+
+function resetTimer() {
+    clearInterval(timerInterval);
+    isRunning = false;
+    timerSeconds = totalDuration;
+    document.getElementById('timerToggleText').innerText = 'Start Focus';
+    updateTimerDisplay();
+}
+
+function selectFocusTask(title) {
+    document.getElementById('activeTaskDisplay').innerText = title;
+}
+
+// --- Dagdoel & Taken AJAX ---
+async function saveGoal() {
+    const focusGoal = document.getElementById('focusGoalInput').value;
+    const notes = document.getElementById('dailyNotesInput').value;
+    const btn = document.getElementById('saveGoalBtn');
+
+    btn.innerText = 'Opslaan...';
+    try {
+        await fetch('/api/planner.php?action=save_goal', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ focus_goal: focusGoal, notes: notes, date: '<?= $today ?>' })
+        });
+        btn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i><span>Opgeslagen</span>';
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+        setTimeout(() => {
+            btn.innerHTML = '<i data-lucide="check-circle-2" class="w-4 h-4"></i><span>Opslaan</span>';
+            if (typeof lucide !== 'undefined') lucide.createIcons();
+        }, 1500);
+    } catch(err) {
+        btn.innerText = 'Fout';
+    }
+}
+
+function toggleAddTaskForm() {
+    const form = document.getElementById('addTaskForm');
+    form.classList.toggle('hidden');
+    if (!form.classList.contains('hidden')) {
+        document.getElementById('newTaskTitle').focus();
+    }
+}
+
+function quickSchedule(hour) {
+    toggleAddTaskForm();
+    document.getElementById('newTaskTime').value = hour;
+}
+
+async function submitNewTask() {
+    const title = document.getElementById('newTaskTitle').value.trim();
+    const priority = document.getElementById('newTaskPriority').value;
+    const time = document.getElementById('newTaskTime').value.trim();
+
+    if (!title) return;
+
+    const res = await fetch('/api/planner.php?action=add_task', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ title, priority, time_block_start: time, date: '<?= $today ?>' })
+    });
+    const data = await res.json();
+    if (data.success) {
+        location.reload();
+    }
+}
+
+async function toggleTask(taskId, isCompleted) {
+    await fetch('/api/planner.php?action=toggle_task', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ task_id: taskId, is_completed: isCompleted })
+    });
+    location.reload();
+}
+
+async function deleteTask(taskId) {
+    if (!confirm('Taak verwijderen?')) return;
+    await fetch('/api/planner.php?action=delete_task', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ task_id: taskId })
+    });
+    document.getElementById(`task-row-${taskId}`)?.remove();
+}
+</script>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>
+

roadmap.php

@@ -0,0 +1,329 @@
+<?php
+/**
+ * Fociz Roadmap & Tijdlijn
+ */
+
+require_once __DIR__ . '/includes/header.php';
+$db = get_db_connection();
+
+$selectedQuarter = $_GET['quarter'] ?? 'ALL';
+$selectedStatus = $_GET['status'] ?? 'ALL';
+
+$sql = "
+    SELECT r.*, u.name as creator_name, c.content as brainstorm_snippet
+    FROM roadmap_items r
+    JOIN users u ON r.created_by_id = u.id
+    LEFT JOIN brainstorm_cards c ON r.origin_brainstorm_card_id = c.id
+    WHERE 1=1
+";
+$params = [];
+
+if ($selectedQuarter !== 'ALL') {
+    $sql .= " AND r.quarter = ?";
+    $params[] = $selectedQuarter;
+}
+if ($selectedStatus !== 'ALL') {
+    $sql .= " AND r.status = ?";
+    $params[] = $selectedStatus;
+}
+
+$sql .= " ORDER BY r.quarter ASC, r.priority DESC, r.due_date ASC";
+$stmt = $db->prepare($sql);
+$stmt->execute($params);
+$roadmapItems = $stmt->fetchAll();
+
+$quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
+?>
+
+<div class="space-y-6">
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl">
+        <div>
+            <div class="flex items-center space-x-2 text-emerald-400 text-xs font-semibold uppercase tracking-wider mb-1">
+                <i data-lucide="map" class="w-4 h-4"></i>
+                <span>Planning & Strategie</span>
+            </div>
+            <h1 class="text-2xl sm:text-3xl font-black text-white tracking-tight">
+                Roadmap & Tijdlijn
+            </h1>
+            <p class="text-slate-400 text-xs sm:text-sm mt-1">
+                Centraal overzicht van alle mijlpalen, features en doelen, direct voortgekomen uit brainstorms en gesynchroniseerd met Jira.
+            </p>
+        </div>
+
+        <button onclick="document.getElementById('newItemModal').classList.remove('hidden')" class="flex items-center space-x-2 px-4 py-2.5 rounded-xl bg-emerald-500 hover:bg-emerald-600 text-slate-950 text-xs font-bold transition shadow-lg shadow-emerald-500/20 flex-shrink-0">
+            <i data-lucide="plus" class="w-4 h-4"></i>
+            <span>Nieuw Item</span>
+        </button>
+    </div>
+
+    <!-- Filters: Quarters & Status -->
+    <div class="flex flex-wrap items-center justify-between gap-3 bg-slate-900/40 border border-slate-800/80 rounded-2xl p-4">
+        <!-- Quarter Tabs -->
+        <div class="flex items-center space-x-1 text-xs">
+            <a href="/roadmap.php?quarter=ALL&status=<?= htmlspecialchars($selectedStatus) ?>" class="px-3 py-1.5 rounded-xl transition font-medium <?= $selectedQuarter === 'ALL' ? 'bg-emerald-500 text-slate-950 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800' ?>">
+                Alle Quarters
+            </a>
+            <?php foreach ($quarters as $q): ?>
+                <a href="/roadmap.php?quarter=<?= $q ?>&status=<?= htmlspecialchars($selectedStatus) ?>" class="px-3 py-1.5 rounded-xl transition font-medium <?= $selectedQuarter === $q ? 'bg-emerald-500 text-slate-950 font-bold' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800' ?>">
+                    <?= $q ?>
+                </a>
+            <?php endforeach; ?>
+        </div>
+
+        <!-- Status Filter -->
+        <div class="flex items-center space-x-2 text-xs">
+            <span class="text-slate-500">Status:</span>
+            <select onchange="window.location.href='/roadmap.php?quarter=<?= htmlspecialchars($selectedQuarter) ?>&status='+this.value" class="bg-slate-800 border border-slate-700 rounded-xl px-2.5 py-1 text-white text-xs focus:outline-none">
+                <option value="ALL" <?= $selectedStatus === 'ALL' ? 'selected' : '' ?>>Alle Statussen</option>
+                <option value="PLANNED" <?= $selectedStatus === 'PLANNED' ? 'selected' : '' ?>>Gepland</option>
+                <option value="IN_PROGRESS" <?= $selectedStatus === 'IN_PROGRESS' ? 'selected' : '' ?>>In Uitvoering</option>
+                <option value="REVIEW" <?= $selectedStatus === 'REVIEW' ? 'selected' : '' ?>>In Review</option>
+                <option value="COMPLETED" <?= $selectedStatus === 'COMPLETED' ? 'selected' : '' ?>>Voltooid</option>
+            </select>
+        </div>
+    </div>
+
+    <!-- Roadmap Items Lijst -->
+    <div class="space-y-4">
+        <?php if (empty($roadmapItems)): ?>
+            <div class="bg-slate-900/60 border border-slate-800/80 rounded-2xl p-12 text-center">
+                <i data-lucide="map-pin" class="w-12 h-12 text-emerald-500/40 mx-auto mb-3"></i>
+                <h3 class="text-base font-bold text-white">Geen items gevonden op de roadmap</h3>
+                <p class="text-xs text-slate-400 mt-1 max-w-sm mx-auto">
+                    Ga naar een <a href="/brainstorm.php" class="text-amber-400 underline">Brainstorm sessie</a> en zet ideeën met één klik om naar de roadmap, of voeg handmatig een item toe.
+                </p>
+            </div>
+        <?php else: ?>
+            <?php foreach ($roadmapItems as $item): ?>
+                <div class="bg-slate-900/80 border border-slate-800 hover:border-slate-700 rounded-2xl p-5 shadow-lg transition space-y-3" id="roadmap-item-<?= $item['id'] ?>">
+                    
+                    <!-- Top header van item -->
+                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+                        <div class="flex items-center space-x-2.5 flex-wrap">
+                            <!-- Quarter badge -->
+                            <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/15 text-emerald-400 font-mono text-xs font-bold border border-emerald-500/30">
+                                <?= htmlspecialchars($item['quarter']) ?>
+                            </span>
+
+                            <!-- Type badge -->
+                            <span class="px-2 py-0.5 rounded-full bg-slate-800 text-slate-300 text-[10px] font-semibold">
+                                <?= htmlspecialchars($item['type']) ?>
+                            </span>
+
+                            <!-- Priority badge -->
+                            <span class="text-[10px] font-bold px-2 py-0.5 rounded-full <?= $item['priority'] === 'CRITICAL' ? 'bg-red-500/20 text-red-400' : ($item['priority'] === 'HIGH' ? 'bg-amber-500/20 text-amber-400' : 'bg-slate-800 text-slate-400') ?>">
+                                <?= htmlspecialchars($item['priority']) ?>
+                            </span>
+
+                            <!-- Jira Issue Key link -->
+                            <?php if (!empty($item['jira_issue_key'])): ?>
+                                <a href="/integrations.php" class="flex items-center space-x-1 px-2 py-0.5 rounded-full bg-blue-950/60 border border-blue-800/60 text-blue-300 text-[10px] font-mono hover:underline">
+                                    <i data-lucide="layers" class="w-3 h-3"></i>
+                                    <span><?= htmlspecialchars($item['jira_issue_key']) ?></span>
+                                </a>
+                            <?php endif; ?>
+                        </div>
+
+                        <!-- Status Selector -->
+                        <div class="flex items-center space-x-2">
+                            <select onchange="updateRoadmapStatus(<?= $item['id'] ?>, this.value)" class="bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-slate-200 font-semibold focus:outline-none">
+                                <option value="PLANNED" <?= $item['status'] === 'PLANNED' ? 'selected' : '' ?>>⏳ Gepland</option>
+                                <option value="IN_PROGRESS" <?= $item['status'] === 'IN_PROGRESS' ? 'selected' : '' ?>>⚡ In Uitvoering</option>
+                                <option value="REVIEW" <?= $item['status'] === 'REVIEW' ? 'selected' : '' ?>>🔍 In Review</option>
+                                <option value="COMPLETED" <?= $item['status'] === 'COMPLETED' ? 'selected' : '' ?>>✅ Voltooid</option>
+                            </select>
+
+                            <button onclick="deleteRoadmapItem(<?= $item['id'] ?>)" title="Verwijderen" class="p-1.5 rounded-lg text-slate-600 hover:text-red-400 hover:bg-red-500/10 transition">
+                                <i data-lucide="trash-2" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Titel & Beschrijving -->
+                    <div>
+                        <h3 class="text-base font-bold text-white leading-snug">
+                            <?= htmlspecialchars($item['title']) ?>
+                        </h3>
+                        <?php if (!empty($item['description'])): ?>
+                            <p class="text-slate-400 text-xs mt-1 whitespace-pre-wrap">
+                                <?= htmlspecialchars($item['description']) ?>
+                            </p>
+                        <?php endif; ?>
+                    </div>
+
+                    <!-- Origin Brainstorm snippet -->
+                    <?php if (!empty($item['origin_brainstorm_card_id'])): ?>
+                        <div class="bg-slate-950/50 rounded-xl p-2.5 text-[11px] text-slate-400 flex items-center space-x-2 border border-slate-800">
+                            <i data-lucide="lightbulb" class="w-3.5 h-3.5 text-amber-400 flex-shrink-0"></i>
+                            <span class="truncate">Ontstaan uit brainstormsessie</span>
+                        </div>
+                    <?php endif; ?>
+
+                    <!-- Voortgangsbalk & Deadline -->
+                    <div class="pt-2 border-t border-slate-800/60 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs">
+                        <!-- Progress Slider -->
+                        <div class="flex items-center space-x-3 flex-1 max-w-md">
+                            <span class="text-slate-400 text-[11px] font-medium w-16">Voortgang:</span>
+                            <div class="flex-1 bg-slate-950 h-2 rounded-full overflow-hidden border border-slate-800">
+                                <div class="bg-gradient-to-r from-emerald-500 to-teal-400 h-full transition-all" style="width: <?= $item['progress'] ?>%"></div>
+                            </div>
+                            <span class="font-mono text-slate-200 font-bold w-10 text-right"><?= $item['progress'] ?>%</span>
+                            <div class="flex space-x-1">
+                                <button onclick="updateRoadmapProgress(<?= $item['id'] ?>, 25)" class="px-1.5 py-0.5 rounded bg-slate-800 text-[10px] text-slate-400 hover:text-white">25%</button>
+                                <button onclick="updateRoadmapProgress(<?= $item['id'] ?>, 50)" class="px-1.5 py-0.5 rounded bg-slate-800 text-[10px] text-slate-400 hover:text-white">50%</button>
+                                <button onclick="updateRoadmapProgress(<?= $item['id'] ?>, 100)" class="px-1.5 py-0.5 rounded bg-emerald-500/20 text-[10px] text-emerald-400 hover:text-emerald-300 font-bold">100%</button>
+                            </div>
+                        </div>
+
+                        <!-- Deadline & Creator -->
+                        <div class="flex items-center space-x-3 text-slate-500 text-[11px]">
+                            <?php if (!empty($item['due_date'])): ?>
+                                <span class="flex items-center space-x-1 text-slate-300">
+                                    <i data-lucide="calendar" class="w-3.5 h-3.5 text-emerald-400"></i>
+                                    <span>Deadline: <?= date('d-m-Y', strtotime($item['due_date'])) ?></span>
+                                </span>
+                            <?php endif; ?>
+                            <span>Toegevoegd door <?= htmlspecialchars($item['creator_name']) ?></span>
+                        </div>
+                    </div>
+                </div>
+            <?php endforeach; ?>
+        <?php endif; ?>
+    </div>
+</div>
+
+<!-- Modal: Nieuw Roadmap Item Handmatig Toevoegen -->
+<div id="newItemModal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-2xl max-w-lg w-full">
+        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800">
+            <h3 class="text-base font-bold text-white flex items-center space-x-2">
+                <i data-lucide="map" class="w-4 h-4 text-emerald-400"></i>
+                <span>Nieuw Roadmap Item Toevoegen</span>
+            </h3>
+            <button onclick="document.getElementById('newItemModal').classList.add('hidden')" class="text-slate-400 hover:text-white">
+                <i data-lucide="x" class="w-5 h-5"></i>
+            </button>
+        </div>
+
+        <div class="space-y-4">
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1">Titel / Doel</label>
+                <input type="text" id="manualTitle" placeholder="Bijv. 2FA Authenticatie afronden" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2 text-white text-xs placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-emerald-500">
+            </div>
+
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1">Beschrijving / Specificatie</label>
+                <textarea id="manualDescription" rows="3" placeholder="Wat houdt deze milestone of feature in?" class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-white text-xs placeholder-slate-500 focus:outline-none resize-none"></textarea>
+            </div>
+
+            <div class="grid grid-cols-2 gap-3">
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Kwartaal</label>
+                    <select id="manualQuarter" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white text-xs focus:outline-none">
+                        <option value="Q1">Q1</option>
+                        <option value="Q2">Q2</option>
+                        <option value="Q3" selected>Q3</option>
+                        <option value="Q4">Q4</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Type</label>
+                    <select id="manualType" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white text-xs focus:outline-none">
+                        <option value="FEATURE" selected>Feature</option>
+                        <option value="EPIC">Epic</option>
+                        <option value="MILESTONE">Mijlpaal</option>
+                        <option value="TASK">Taak</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-2 gap-3">
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Prioriteit</label>
+                    <select id="manualPriority" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white text-xs focus:outline-none">
+                        <option value="CRITICAL">Kritiek</option>
+                        <option value="HIGH" selected>Hoog</option>
+                        <option value="MEDIUM">Normaal</option>
+                        <option value="LOW">Laag</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-slate-300 mb-1">Jira Issue Key (optioneel)</label>
+                    <input type="text" id="manualJiraKey" placeholder="Bijv. FOC-101" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-1.5 text-white text-xs font-mono focus:outline-none">
+                </div>
+            </div>
+
+            <div>
+                <label class="block text-xs font-medium text-slate-300 mb-1">Streefdatum</label>
+                <input type="date" id="manualDueDate" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-1.5 text-white text-xs focus:outline-none">
+            </div>
+
+            <div class="flex space-x-2 pt-2">
+                <button onclick="submitManualItem()" class="flex-1 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 px-4 rounded-xl text-xs transition">
+                    Toevoegen aan Roadmap
+                </button>
+                <button onclick="document.getElementById('newItemModal').classList.add('hidden')" class="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl text-xs transition">
+                    Annuleren
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+async function updateRoadmapStatus(id, status) {
+    await fetch('/api/roadmap.php?action=update_item', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ id, status })
+    });
+}
+
+async function updateRoadmapProgress(id, progress) {
+    await fetch('/api/roadmap.php?action=update_item', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ id, progress })
+    });
+    location.reload();
+}
+
+async function deleteRoadmapItem(id) {
+    if (!confirm('Dit roadmap item verwijderen?')) return;
+    await fetch('/api/roadmap.php?action=delete_item', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ id })
+    });
+    document.getElementById(`roadmap-item-${id}`)?.remove();
+}
+
+async function submitManualItem() {
+    const title = document.getElementById('manualTitle').value.trim();
+    const description = document.getElementById('manualDescription').value.trim();
+    const quarter = document.getElementById('manualQuarter').value;
+    const type = document.getElementById('manualType').value;
+    const priority = document.getElementById('manualPriority').value;
+    const jira_key = document.getElementById('manualJiraKey').value.trim();
+    const due_date = document.getElementById('manualDueDate').value;
+
+    if (!title) {
+        alert('Titel is verplicht');
+        return;
+    }
+
+    const res = await fetch('/api/roadmap.php?action=add_item', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ title, description, quarter, type, priority, jira_key, due_date })
+    });
+    const data = await res.json();
+    if (data.success) {
+        location.reload();
+    }
+}
+</script>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>
+

schema.sql

@@ -0,0 +1,128 @@
+-- Fociz MariaDB Databaseschema
+-- UTF-8 / utf8mb4 ondersteuning voor emoticons, sticky notes en internationale tekens
+
+CREATE TABLE IF NOT EXISTS `users` (
+  `id` INT AUTO_INCREMENT PRIMARY KEY,
+  `name` VARCHAR(120) NOT NULL,
+  `email` VARCHAR(191) NOT NULL UNIQUE,
+  `password_hash` VARCHAR(255) NOT NULL,
+  `role` ENUM('ADMIN', 'MEMBER') NOT NULL DEFAULT 'MEMBER',
+  `two_factor_secret` VARCHAR(120) NULL,
+  `two_factor_enabled` TINYINT(1) NOT NULL DEFAULT 0,
+  `backup_codes` TEXT NULL,
+  `avatar_url` VARCHAR(255) NULL,
+  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `invites` (
+  `id` INT AUTO_INCREMENT PRIMARY KEY,
+  `token` VARCHAR(64) NOT NULL UNIQUE,
+  `email` VARCHAR(191) NOT NULL,
+  `role` ENUM('ADMIN', 'MEMBER') NOT NULL DEFAULT 'MEMBER',
+  `expires_at` DATETIME NOT NULL,
+  `used_at` DATETIME NULL,
+  `created_by_id` INT NOT NULL,
+  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  INDEX (`token`),
+  CONSTRAINT `fk_invites_user` FOREIGN KEY (`created_by_id`) REFERENCES `users` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `daily_plans` (
+  `id` INT AUTO_INCREMENT PRIMARY KEY,
+  `user_id` INT NOT NULL,
+  `plan_date` DATE NOT NULL,
+  `focus_goal` TEXT NULL,
+  `secondary_goals` TEXT NULL,
+  `notes` TEXT NULL,
+  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  UNIQUE KEY `uk_user_date` (`user_id`, `plan_date`),
+  CONSTRAINT `fk_dailyplans_user` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `tasks` (
+  `id` INT AUTO_INCREMENT PRIMARY KEY,
+  `user_id` INT NOT NULL,
+  `daily_plan_id` INT NULL,
+  `title` VARCHAR(255) NOT NULL,
+  `description` TEXT NULL,
+  `status` ENUM('TODO', 'IN_PROGRESS', 'DONE', 'CANCELLED') NOT NULL DEFAULT 'TODO',
+  `priority` ENUM('P1', 'P2', 'P3') NOT NULL DEFAULT 'P2',
+  `time_block_start` VARCHAR(10) NULL,
+  `time_block_end` VARCHAR(10) NULL,
+  `duration_minutes` INT NULL DEFAULT 30,
+  `is_completed` TINYINT(1) NOT NULL DEFAULT 0,
+  `source` VARCHAR(50) NOT NULL DEFAULT 'FOCIZ',
+  `external_id` VARCHAR(100) NULL,
+  `external_url` TEXT NULL,
+  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  INDEX (`user_id`),
+  CONSTRAINT `fk_tasks_user` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE,
+  CONSTRAINT `fk_tasks_plan` FOREIGN KEY (`daily_plan_id`) REFERENCES `daily_plans` (`id`) ON DELETE SET NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `brainstorm_sessions` (
+  `id` INT AUTO_INCREMENT PRIMARY KEY,
+  `title` VARCHAR(255) NOT NULL,
+  `description` TEXT NULL,
+  `theme` VARCHAR(100) NOT NULL DEFAULT 'Algemeen',
+  `created_by_id` INT NOT NULL,
+  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  INDEX (`created_by_id`),
+  CONSTRAINT `fk_brainstorm_user` FOREIGN KEY (`created_by_id`) REFERENCES `users` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `brainstorm_cards` (
+  `id` INT AUTO_INCREMENT PRIMARY KEY,
+  `session_id` INT NOT NULL,
+  `content` TEXT NOT NULL,
+  `category` VARCHAR(100) NOT NULL DEFAULT 'Ideeën',
+  `color` VARCHAR(20) NOT NULL DEFAULT 'amber',
+  `votes` INT NOT NULL DEFAULT 0,
+  `author_name` VARCHAR(120) NULL,
+  `converted_to_roadmap_item_id` INT NULL,
+  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  INDEX (`session_id`),
+  CONSTRAINT `fk_cards_session` FOREIGN KEY (`session_id`) REFERENCES `brainstorm_sessions` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `roadmap_items` (
+  `id` INT AUTO_INCREMENT PRIMARY KEY,
+  `title` VARCHAR(255) NOT NULL,
+  `description` TEXT NULL,
+  `type` VARCHAR(50) NOT NULL DEFAULT 'FEATURE',
+  `status` VARCHAR(50) NOT NULL DEFAULT 'PLANNED',
+  `quarter` VARCHAR(20) NOT NULL DEFAULT 'Q3',
+  `priority` VARCHAR(20) NOT NULL DEFAULT 'MEDIUM',
+  `progress` INT NOT NULL DEFAULT 0,
+  `start_date` DATE NULL,
+  `due_date` DATE NULL,
+  `jira_issue_key` VARCHAR(50) NULL,
+  `origin_brainstorm_card_id` INT NULL,
+  `created_by_id` INT NOT NULL,
+  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  INDEX (`created_by_id`),
+  CONSTRAINT `fk_roadmap_user` FOREIGN KEY (`created_by_id`) REFERENCES `users` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+CREATE TABLE IF NOT EXISTS `integrations` (
+  `id` INT AUTO_INCREMENT PRIMARY KEY,
+  `user_id` INT NOT NULL,
+  `provider` ENUM('OUTLOOK', 'TEAMS', 'JIRA') NOT NULL,
+  `is_enabled` TINYINT(1) NOT NULL DEFAULT 1,
+  `is_demo_mode` TINYINT(1) NOT NULL DEFAULT 1,
+  `access_token` TEXT NULL,
+  `refresh_token` TEXT NULL,
+  `settings` TEXT NULL,
+  `last_sync_at` DATETIME NULL,
+  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  UNIQUE KEY `uk_user_provider` (`user_id`, `provider`),
+  CONSTRAINT `fk_integrations_user` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+

users.php

@@ -0,0 +1,266 @@
+<?php
+/**
+ * Fociz Team & Uitnodigingen Beheer (Enkel voor Admin)
+ */
+
+require_once __DIR__ . '/includes/header.php';
+$adminUser = require_admin();
+$db = get_db_connection();
+
+$message = null;
+$generatedLink = null;
+$error = null;
+
+// Uitnodiging aanmaken
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'create_invite') {
+    $email = strtolower(trim($_POST['email'] ?? ''));
+    $role = in_array($_POST['role'] ?? '', ['ADMIN', 'MEMBER']) ? $_POST['role'] : 'MEMBER';
+
+    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        $error = "Voer een geldig e-mailadres in.";
+    } else {
+        // Controleer of e-mail al bestaat
+        $stmtCheck = $db->prepare("SELECT id FROM users WHERE email = ?");
+        $stmtCheck->execute([$email]);
+        if ($stmtCheck->fetch()) {
+            $error = "Er bestaat al een gebruiker met dit e-mailadres.";
+        } else {
+            $token = create_invite($adminUser['id'], $email, $role);
+            $baseUrl = rtrim(APP_URL, '/');
+            $generatedLink = "{$baseUrl}/auth/invite.php?token={$token}";
+            $message = "Uitnodigingslink succesvol aangemaakt!";
+        }
+    }
+}
+
+// Uitnodiging intrekken
+if (isset($_GET['delete_invite'])) {
+    $inviteId = (int)$_GET['delete_invite'];
+    $stmtDel = $db->prepare("DELETE FROM invites WHERE id = ?");
+    $stmtDel->execute([$inviteId]);
+    header('Location: /users.php');
+    exit;
+}
+
+// Gebruiker verwijderen
+if (isset($_GET['delete_user'])) {
+    $delUserId = (int)$_GET['delete_user'];
+    if ($delUserId !== (int)$adminUser['id']) {
+        $stmtDelUser = $db->prepare("DELETE FROM users WHERE id = ?");
+        $stmtDelUser->execute([$delUserId]);
+    }
+    header('Location: /users.php');
+    exit;
+}
+
+// Haal alle gebruikers op
+$users = $db->query("SELECT * FROM users ORDER BY created_at DESC")->fetchAll();
+
+// Haal alle uitnodigingen op
+$invites = $db->query("
+    SELECT i.*, u.name as inviter_name 
+    FROM invites i 
+    JOIN users u ON i.created_by_id = u.id 
+    ORDER BY i.created_at DESC
+")->fetchAll();
+?>
+
+<div class="space-y-6">
+    <!-- Header -->
+    <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl">
+        <div class="flex items-center space-x-2 text-emerald-400 text-xs font-semibold uppercase tracking-wider mb-1">
+            <i data-lucide="shield" class="w-4 h-4"></i>
+            <span>Beheerderspaneel</span>
+        </div>
+        <h1 class="text-2xl sm:text-3xl font-black text-white tracking-tight">
+            Team & Uitnodigingen
+        </h1>
+        <p class="text-slate-400 text-xs sm:text-sm mt-1">
+            Fociz is strikt afgesloten: nieuwe collega's kunnen enkel toegang krijgen na het ontvangen van een uitnodigingslink en verplichte 2FA-activatie.
+        </p>
+    </div>
+
+    <?php if ($error): ?>
+        <div class="p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-xs font-semibold flex items-center space-x-2">
+            <i data-lucide="alert-triangle" class="w-4 h-4"></i>
+            <span><?= htmlspecialchars($error) ?></span>
+        </div>
+    <?php endif; ?>
+
+    <?php if ($message && $generatedLink): ?>
+        <div class="p-5 rounded-2xl bg-emerald-950/40 border border-emerald-500/40 text-white space-y-2 shadow-xl">
+            <div class="flex items-center space-x-2 text-emerald-400 font-bold text-xs">
+                <i data-lucide="check-circle-2" class="w-4 h-4"></i>
+                <span><?= htmlspecialchars($message) ?></span>
+            </div>
+            <p class="text-xs text-slate-300">
+                Kopieer onderstaande beveiligde registratielink en stuur deze naar de collega:
+            </p>
+            <div class="flex items-center space-x-2 bg-slate-950 p-2.5 rounded-xl border border-slate-800">
+                <input type="text" readonly id="inviteLinkInput" value="<?= htmlspecialchars($generatedLink) ?>" class="bg-transparent text-emerald-300 font-mono text-xs flex-1 outline-none">
+                <button onclick="copyInviteLink()" class="px-3 py-1.5 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold text-xs rounded-lg transition flex items-center space-x-1">
+                    <i data-lucide="copy" class="w-3.5 h-3.5"></i>
+                    <span id="copyBtnText">Kopiëren</span>
+                </button>
+            </div>
+        </div>
+    <?php endif; ?>
+
+    <!-- Uitnodiging Genereren Kaart -->
+    <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl">
+        <h3 class="text-base font-bold text-white mb-4 flex items-center space-x-2">
+            <i data-lucide="user-plus" class="w-5 h-5 text-emerald-400"></i>
+            <span>Nieuwe Collega Uitnodigen</span>
+        </h3>
+
+        <form method="POST" action="/users.php" class="grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
+            <input type="hidden" name="action" value="create_invite">
+
+            <div class="md:col-span-6">
+                <label class="block text-xs font-medium text-slate-300 mb-1">E-mailadres van collega</label>
+                <input type="email" name="email" required placeholder="collega@bedrijf.nl" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-emerald-500 text-xs">
+            </div>
+
+            <div class="md:col-span-3">
+                <label class="block text-xs font-medium text-slate-300 mb-1">Rol</label>
+                <select name="role" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-white text-xs focus:outline-none">
+                    <option value="MEMBER">Collega (Standaard)</option>
+                    <option value="ADMIN">Mede-beheerder</option>
+                </select>
+            </div>
+
+            <div class="md:col-span-3">
+                <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 px-4 rounded-xl text-xs transition shadow-lg shadow-emerald-500/20 flex items-center justify-center space-x-2">
+                    <i data-lucide="link" class="w-4 h-4"></i>
+                    <span>Genereer Link</span>
+                </button>
+            </div>
+        </form>
+    </div>
+
+    <!-- Actieve Gebruikers Tabel -->
+    <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
+        <div class="flex items-center justify-between pb-3 border-b border-slate-800">
+            <h3 class="text-sm font-bold text-white uppercase tracking-wider flex items-center space-x-2">
+                <i data-lucide="users" class="w-4 h-4 text-emerald-400"></i>
+                <span>Geregistreerde Teamleden (<?= count($users) ?>)</span>
+            </h3>
+        </div>
+
+        <div class="overflow-x-auto">
+            <table class="w-full text-left text-xs text-slate-300">
+                <thead class="bg-slate-950/60 text-slate-400 uppercase text-[10px] tracking-wider border-b border-slate-800">
+                    <tr>
+                        <th class="p-3">Naam & E-mail</th>
+                        <th class="p-3">Rol</th>
+                        <th class="p-3">2FA Beveiliging</th>
+                        <th class="p-3">Lid sinds</th>
+                        <th class="p-3 text-right">Acties</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-800/60">
+                    <?php foreach ($users as $u): ?>
+                        <tr class="hover:bg-slate-800/30 transition">
+                            <td class="p-3">
+                                <div class="font-bold text-white"><?= htmlspecialchars($u['name']) ?></div>
+                                <div class="text-[11px] text-slate-400 font-mono"><?= htmlspecialchars($u['email']) ?></div>
+                            </td>
+                            <td class="p-3">
+                                <span class="px-2 py-0.5 rounded text-[10px] font-bold <?= $u['role'] === 'ADMIN' ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-slate-800 text-slate-300' ?>">
+                                    <?= $u['role'] === 'ADMIN' ? 'Beheerder' : 'Collega' ?>
+                                </span>
+                            </td>
+                            <td class="p-3">
+                                <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px] font-medium flex items-center space-x-1 w-max">
+                                    <i data-lucide="shield-check" class="w-3 h-3"></i>
+                                    <span>2FA Actief</span>
+                                </span>
+                            </td>
+                            <td class="p-3 text-slate-400">
+                                <?= date('d-m-Y', strtotime($u['created_at'])) ?>
+                            </td>
+                            <td class="p-3 text-right">
+                                <?php if ($u['id'] !== $adminUser['id']): ?>
+                                    <a href="/users.php?delete_user=<?= $u['id'] ?>" onclick="return confirm('Gebruiker verwijderen?')" class="text-slate-500 hover:text-red-400 transition p-1">
+                                        <i data-lucide="trash-2" class="w-4 h-4 inline"></i>
+                                    </a>
+                                <?php else: ?>
+                                    <span class="text-[10px] text-slate-600 font-medium">Uzelf</span>
+                                <?php endif; ?>
+                            </td>
+                        </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- Uitstaande Uitnodigingen Tabel -->
+    <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
+        <div class="flex items-center justify-between pb-3 border-b border-slate-800">
+            <h3 class="text-sm font-bold text-white uppercase tracking-wider flex items-center space-x-2">
+                <i data-lucide="mail" class="w-4 h-4 text-amber-400"></i>
+                <span>Uitnodigingen Status (<?= count($invites) ?>)</span>
+            </h3>
+        </div>
+
+        <div class="overflow-x-auto">
+            <table class="w-full text-left text-xs text-slate-300">
+                <thead class="bg-slate-950/60 text-slate-400 uppercase text-[10px] tracking-wider border-b border-slate-800">
+                    <tr>
+                        <th class="p-3">Uitgenodigd E-mailadres</th>
+                        <th class="p-3">Rol</th>
+                        <th class="p-3">Status</th>
+                        <th class="p-3">Verloopt op</th>
+                        <th class="p-3 text-right">Actie</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-800/60">
+                    <?php if (empty($invites)): ?>
+                        <tr><td colspan="5" class="p-4 text-center text-slate-500">Nog geen uitnodigingen verstuurd.</td></tr>
+                    <?php else: ?>
+                        <?php foreach ($invites as $inv): 
+                            $isUsed = !empty($inv['used_at']);
+                            $isExpired = strtotime($inv['expires_at']) < time();
+                        ?>
+                            <tr class="hover:bg-slate-800/30 transition">
+                                <td class="p-3 font-mono"><?= htmlspecialchars($inv['email']) ?></td>
+                                <td class="p-3"><?= htmlspecialchars($inv['role']) ?></td>
+                                <td class="p-3">
+                                    <?php if ($isUsed): ?>
+                                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-500/20 text-emerald-400">Geaccepteerd</span>
+                                    <?php elseif ($isExpired): ?>
+                                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-red-500/20 text-red-400">Verlopen</span>
+                                    <?php else: ?>
+                                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-500/20 text-amber-400">In afwachting</span>
+                                    <?php endif; ?>
+                                </td>
+                                <td class="p-3 text-slate-400"><?= date('d-m-Y H:i', strtotime($inv['expires_at'])) ?></td>
+                                <td class="p-3 text-right">
+                                    <a href="/users.php?delete_invite=<?= $inv['id'] ?>" onclick="return confirm('Uitnodiging intrekken?')" class="text-slate-500 hover:text-red-400 transition p-1">
+                                        <i data-lucide="trash-2" class="w-4 h-4 inline"></i>
+                                    </a>
+                                </td>
+                            </tr>
+                        <?php endforeach; ?>
+                    <?php endif; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<script>
+function copyInviteLink() {
+    const input = document.getElementById('inviteLinkInput');
+    input.select();
+    navigator.clipboard.writeText(input.value);
+    document.getElementById('copyBtnText').innerText = 'Gekopieerd!';
+    setTimeout(() => {
+        document.getElementById('copyBtnText').innerText = 'Kopiëren';
+    }, 2000);
+}
+</script>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>
+