From f1d5c55c03a33a5ec12201db949b7f7d4ab2427e Mon Sep 17 00:00:00 2001
From: Niek Rabelink <niek.rabelink@gmail.com>
Date: Thu, 10 Sep 2026 16:31:26 +0200
Subject: [PATCH] feat(planner): enhance timeline widget with integrated week
 overview and improved navigation

---
 planner.php | 231 +++++++++++++++++++++++++++-------------------------
 1 file changed, 120 insertions(+), 111 deletions(-)

diff --git a/planner.php b/planner.php
index f65abb9..89dfa58 100644
--- a/planner.php
+++ b/planner.php
@@ -271,8 +271,8 @@ try {
 // 5c. Widget Catalogus & Raster Indeling (Fociz v2.0)
 $availableWidgets = [
     'daily_goal'        => ['id' => 'daily_goal', 'title' => 'Dagfocus & Hoofddoel', 'category' => 'Planning', 'icon' => 'target', 'enabled' => true, 'col_span' => 12, 'order' => 1, 'desc' => 'Centraal focusdoel voor de dag met snelle tellers'],
-    'tasks'             => ['id' => 'tasks', 'title' => 'Dagtaken & Prioriteiten', 'category' => 'Planning', 'icon' => 'check-square', 'enabled' => true, 'col_span' => 7, 'order' => 2, 'desc' => 'Volledige takenlijst met P1/P2/P3, tijdvakken en Outlook synchronisatie'],
-    'timeline'          => ['id' => 'timeline', 'title' => 'Tijdlijn & Time-blocking', 'category' => 'Agenda', 'icon' => 'clock', 'enabled' => true, 'col_span' => 5, 'order' => 3, 'desc' => 'Visueel urenoverzicht met lunchpauze, afspraken en AI Slim Indelen'],
+    'timeline'          => ['id' => 'timeline', 'title' => 'Tijdlijn & Dag/Weekoverzicht', 'category' => 'Agenda', 'icon' => 'calendar', 'enabled' => true, 'col_span' => 12, 'order' => 2, 'desc' => 'Gecombineerd weekoverzicht, dagselectie en uren-tijdlijn met time-blocking en AI'],
+    'tasks'             => ['id' => 'tasks', 'title' => 'Dagtaken & Prioriteiten', 'category' => 'Planning', 'icon' => 'check-square', 'enabled' => true, 'col_span' => 7, 'order' => 3, 'desc' => 'Volledige takenlijst met P1/P2/P3, tijdvakken en Outlook synchronisatie'],
     'outlook_mail'      => ['id' => 'outlook_mail', 'title' => 'Outlook E-mail Widget', 'category' => 'Communicatie', 'icon' => 'mail', 'enabled' => true, 'col_span' => 6, 'order' => 4, 'desc' => 'Inkomende e-mails direct inzien en met 1 klik inplannen als taak'],
     'jira_queue'        => ['id' => 'jira_queue', 'title' => 'Jira Tickets & Wachtrijen', 'category' => 'Ontwikkeling', 'icon' => 'layers', 'enabled' => true, 'col_span' => 6, 'order' => 5, 'desc' => 'Openstaande Jira tickets (DX/SD wachtrijen) met directe importknop'],
     'calendar_meetings' => ['id' => 'calendar_meetings', 'title' => 'Agenda & Teams Meetings', 'category' => 'Agenda', 'icon' => 'video', 'enabled' => true, 'col_span' => 6, 'order' => 6, 'desc' => 'Vandaag geplande afspraken met 1-klik Teams deelnemen knop'],
@@ -464,106 +464,6 @@ for ($h = $startHour; $h <= $endHour; $h++) {
         </div>
     </div>
 
-    <!-- Week Navigatie & Dagselector -->
-    <div class="fociz-card p-5 sm:p-6">
-        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-4 mb-4 border-b border-slate-100 dark:border-slate-800/60">
-            <!-- Navigatie controls -->
-            <div class="flex items-center space-x-2">
-                <a href="planner.php?date=<?= $prevWeekDate ?>" onclick="switchPlannerDate('<?= $prevWeekDate ?>', event); return false;" class="flex items-center space-x-1.5 px-3.5 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 text-xs font-semibold transition shadow-2xs" title="Vorige week (Maandag <?= date('j M', strtotime($prevWeekDate)) ?>)">
-                    <i data-lucide="chevron-left" class="w-4 h-4"></i>
-                    <span class="hidden sm:inline">Vorige week</span>
-                </a>
-
-                <a href="planner.php" onclick="switchPlannerDate('<?= $today ?>', event); return false;" class="px-3.5 py-1.5 rounded-xl <?= $isTodaySelected ? 'bg-slate-900 text-white dark:bg-white dark:text-slate-900 font-bold shadow-xs' : 'bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 font-semibold shadow-2xs' ?> text-xs transition" title="Spring direct naar vandaag">
-                    Vandaag
-                </a>
-
-                <a href="planner.php?date=<?= $nextWeekDate ?>" onclick="switchPlannerDate('<?= $nextWeekDate ?>', event); return false;" class="flex items-center space-x-1.5 px-3.5 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 text-xs font-semibold transition shadow-2xs" title="Volgende week (Maandag <?= date('j M', strtotime($nextWeekDate)) ?>)">
-                    <span class="hidden sm:inline">Volgende week</span>
-                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
-                </a>
-            </div>
-
-            <!-- Week Titel & Datumrange -->
-            <div class="text-center md:text-left">
-                <div class="text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400">
-                    Week <?= $weekNumber ?> &bull; <?= $yearNumber ?>
-                </div>
-                <div class="text-base font-black text-slate-900 dark:text-white">
-                    <?= htmlspecialchars($formattedWeekRange) ?>
-                </div>
-            </div>
-
-            <!-- Directe datumselector -->
-            <div class="flex items-center space-x-2 justify-end">
-                <label for="jumpDateInput" class="text-xs text-slate-500 dark:text-slate-400 font-medium hidden sm:inline">Datum:</label>
-                <input 
-                    type="date" 
-                    id="jumpDateInput" 
-                    value="<?= htmlspecialchars($selectedDate) ?>" 
-                    onchange="if(this.value) { switchPlannerDate(this.value, event); }"
-                    class="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-1.5 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 font-medium cursor-pointer shadow-2xs"
-                >
-            </div>
-        </div>
-
-        <!-- 7 Dagen Weekstrook -->
-        <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 gap-3">
-            <?php foreach ($weekDays as $wd): ?>
-                <a 
-                    href="<?= ($wd['date'] === $today) ? 'planner.php' : ('planner.php?date=' . $wd['date']) ?>" 
-                    onclick="switchPlannerDate('<?= $wd['date'] ?>', event); return false;"
-                    class="fociz-card-interactive group relative flex flex-col p-3.5 rounded-2xl border transition-all text-left <?= $wd['is_selected'] 
-                        ? 'bg-gradient-to-b from-indigo-500/15 via-indigo-500/5 to-transparent dark:from-indigo-500/25 dark:via-indigo-500/10 dark:to-transparent border-indigo-500 ring-2 ring-indigo-500/40 shadow-sm' 
-                        : 'bg-slate-50/70 dark:bg-[#0c0f17]/50 border-slate-200/80 dark:border-slate-800/80 hover:border-indigo-300 dark:hover:border-indigo-600/50 hover:bg-white dark:hover:bg-[#111624] shadow-2xs' ?>"
-                >
-                    <div class="flex items-center justify-between mb-1.5">
-                        <span class="text-[11px] font-bold uppercase tracking-wider <?= $wd['is_selected'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-500 dark:text-slate-400' ?>">
-                            <?= $wd['short_name'] ?>
-                        </span>
-                        <?php if ($wd['is_today']): ?>
-                            <span class="px-2 py-0.5 rounded-full text-[9px] font-extrabold uppercase bg-indigo-600 text-white shadow-xs">
-                                Nu
-                            </span>
-                        <?php endif; ?>
-                    </div>
-
-                    <div class="flex items-baseline space-x-1.5 mb-3">
-                        <span class="text-2xl font-black <?= $wd['is_selected'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-900 dark:text-white' ?>">
-                            <?= $wd['day_num'] ?>
-                        </span>
-                        <span class="text-[11px] font-semibold text-slate-400 dark:text-slate-500 uppercase">
-                            <?= $wd['month_short'] ?>
-                        </span>
-                    </div>
-
-                    <!-- Mini chips voor taken en meetings op deze dag -->
-                    <div class="flex flex-col gap-1.5 mt-auto pt-2 border-t border-slate-200/60 dark:border-slate-800/60 text-[10px]">
-                        <div class="flex items-center justify-between px-2 py-1 rounded-lg bg-white/70 dark:bg-slate-900/60 border border-slate-200/50 dark:border-slate-800/50 text-slate-600 dark:text-slate-400">
-                            <span class="flex items-center space-x-1">
-                                <i data-lucide="check-square" class="w-3 h-3 text-indigo-500"></i>
-                                <span>Taken</span>
-                            </span>
-                            <span class="font-bold <?= $wd['task_count'] > 0 ? ($wd['completed_count'] === $wd['task_count'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-800 dark:text-slate-200') : 'text-slate-400' ?>">
-                                <?= $wd['completed_count'] ?>/<?= $wd['task_count'] ?>
-                            </span>
-                        </div>
-
-                        <div class="flex items-center justify-between px-2 py-1 rounded-lg bg-sky-50/70 dark:bg-sky-500/10 border border-sky-200/50 dark:border-sky-500/20 text-sky-800 dark:text-sky-300">
-                            <span class="flex items-center space-x-1">
-                                <i data-lucide="calendar" class="w-3 h-3 text-sky-500"></i>
-                                <span>Agenda</span>
-                            </span>
-                            <span class="font-bold">
-                                <?= $wd['meeting_count'] ?>
-                            </span>
-                        </div>
-                    </div>
-                </a>
-            <?php endforeach; ?>
-        </div>
-    </div>
-
     <!-- Modular Customizable Widget Grid Container (Fociz v2.0) -->
     <div class="relative w-full" id="focizWidgetGridContainer">
         <!-- Blueprint Achtergrond Raster (zichtbaar zodra een widget wordt opgepakt) -->
@@ -881,27 +781,136 @@ for ($h = $startHour; $h <= $endHour; $h++) {
                     </div>
 
                 <?php elseif ($wId === 'timeline'): ?>
-                    <!-- Widget 3: Tijdlijn & Time-blocking -->
-                    <div class="fociz-card p-5 sm:p-6 overflow-hidden">
-                        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100 dark:border-slate-800">
+                    <!-- Widget: Tijdlijn, Weekoverzicht & Dagselector (1 Geïntegreerde Widget) -->
+                    <div class="fociz-card p-5 sm:p-6 overflow-hidden space-y-5">
+                        
+                        <!-- 1. Week Navigatie & Directe Datumkeuze -->
+                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-3 pb-3 border-b border-slate-100 dark:border-slate-800/80">
+                            <!-- Navigatie controls -->
                             <div class="flex items-center space-x-2">
-                                <i data-lucide="clock" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
-                                <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider">Tijdlijn & Time-blocking</h3>
+                                <a href="planner.php?date=<?= $prevWeekDate ?>" onclick="switchPlannerDate('<?= $prevWeekDate ?>', event); return false;" class="flex items-center space-x-1.5 px-3.5 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 text-xs font-semibold transition shadow-2xs cursor-pointer" title="Vorige week (Maandag <?= date('j M', strtotime($prevWeekDate)) ?>)">
+                                    <i data-lucide="chevron-left" class="w-4 h-4"></i>
+                                    <span class="hidden sm:inline">Vorige week</span>
+                                </a>
+
+                                <a href="planner.php" onclick="switchPlannerDate('<?= $today ?>', event); return false;" class="px-3.5 py-1.5 rounded-xl <?= $isTodaySelected ? 'bg-slate-900 text-white dark:bg-white dark:text-slate-900 font-bold shadow-xs' : 'bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 font-semibold shadow-2xs' ?> text-xs transition cursor-pointer" title="Spring direct naar vandaag">
+                                    Vandaag
+                                </a>
+
+                                <a href="planner.php?date=<?= $nextWeekDate ?>" onclick="switchPlannerDate('<?= $nextWeekDate ?>', event); return false;" class="flex items-center space-x-1.5 px-3.5 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 text-xs font-semibold transition shadow-2xs cursor-pointer" title="Volgende week (Maandag <?= date('j M', strtotime($nextWeekDate)) ?>)">
+                                    <span class="hidden sm:inline">Volgende week</span>
+                                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
+                                </a>
                             </div>
-                            <div class="flex items-center space-x-2">
+
+                            <!-- Week Titel & Datumrange -->
+                            <div class="text-center md:text-left">
+                                <div class="text-[11px] font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400">
+                                    Week <?= $weekNumber ?> &bull; <?= $yearNumber ?>
+                                </div>
+                                <div class="text-sm sm:text-base font-black text-slate-900 dark:text-white">
+                                    <?= htmlspecialchars($formattedWeekRange) ?>
+                                </div>
+                            </div>
+
+                            <!-- Rechterkant: AI Slim Indelen & Directe datumselector -->
+                            <div class="flex flex-wrap items-center space-x-2 justify-end">
                                 <?php if ($aiSettings['ai_enabled'] && $aiSettings['has_key']): ?>
-                                    <button onclick="aiSmartSchedule(this)" id="aiScheduleBtn" title="Laat AI Co-Pilot openstaande taken optimaal inplannen om meetings en lunch heen" class="flex items-center space-x-1.5 px-3 py-1 rounded-lg bg-gradient-to-r from-indigo-600 to-sky-600 hover:from-indigo-500 hover:to-sky-500 text-white text-xs font-semibold shadow-xs transition cursor-pointer">
+                                    <button onclick="aiSmartSchedule(this)" id="aiScheduleBtn" title="Laat AI Co-Pilot openstaande taken optimaal inplannen om meetings en lunch heen" class="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-r from-indigo-600 to-sky-600 hover:from-indigo-500 hover:to-sky-500 text-white text-xs font-semibold shadow-xs transition cursor-pointer">
                                         <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
                                         <span class="hidden sm:inline">AI Slim Indelen</span>
                                     </button>
                                 <?php endif; ?>
+
                                 <?php if ($isOutlookConnected): ?>
-                                    <span class="px-2 py-0.5 rounded-lg bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 text-sky-700 dark:text-sky-400 text-[10px] font-semibold">Outlook 365</span>
+                                    <span class="hidden sm:inline-flex px-2 py-1 rounded-xl bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 text-sky-700 dark:text-sky-400 text-[10px] font-semibold">Outlook 365</span>
                                 <?php endif; ?>
-                                <span class="text-xs text-slate-500 dark:text-slate-400 font-mono"><?= $hours[0] ?> – <?= end($hours) ?></span>
+
+                                <input 
+                                    type="date" 
+                                    id="jumpDateInput" 
+                                    value="<?= htmlspecialchars($selectedDate) ?>" 
+                                    onchange="if(this.value) { switchPlannerDate(this.value, event); }"
+                                    class="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl px-2.5 py-1.5 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 font-medium cursor-pointer shadow-2xs"
+                                >
                             </div>
                         </div>
 
+                        <!-- 2. 7 Dagen Weekstrook (Dagselector) -->
+                        <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 gap-2.5">
+                            <?php foreach ($weekDays as $wd): ?>
+                                <a 
+                                    href="<?= ($wd['date'] === $today) ? 'planner.php' : ('planner.php?date=' . $wd['date']) ?>" 
+                                    onclick="switchPlannerDate('<?= $wd['date'] ?>', event); return false;"
+                                    class="fociz-card-interactive group relative flex flex-col p-3 rounded-xl border transition-all text-left <?= $wd['is_selected'] 
+                                        ? 'bg-gradient-to-b from-indigo-500/15 via-indigo-500/5 to-transparent dark:from-indigo-500/25 dark:via-indigo-500/10 dark:to-transparent border-indigo-500 ring-2 ring-indigo-500/40 shadow-sm' 
+                                        : 'bg-slate-50/70 dark:bg-[#0c0f17]/50 border-slate-200/80 dark:border-slate-800/80 hover:border-indigo-300 dark:hover:border-indigo-600/50 hover:bg-white dark:hover:bg-[#111624] shadow-2xs' ?>"
+                                >
+                                    <div class="flex items-center justify-between mb-1">
+                                        <span class="text-[10px] font-bold uppercase tracking-wider <?= $wd['is_selected'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-500 dark:text-slate-400' ?>">
+                                            <?= $wd['short_name'] ?>
+                                        </span>
+                                        <?php if ($wd['is_today']): ?>
+                                            <span class="px-1.5 py-0.2 rounded-full text-[8px] font-extrabold uppercase bg-indigo-600 text-white shadow-xs">
+                                                Nu
+                                            </span>
+                                        <?php endif; ?>
+                                    </div>
+
+                                    <div class="flex items-baseline space-x-1 mb-2">
+                                        <span class="text-xl font-black <?= $wd['is_selected'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-900 dark:text-white' ?>">
+                                            <?= $wd['day_num'] ?>
+                                        </span>
+                                        <span class="text-[10px] font-semibold text-slate-400 dark:text-slate-500 uppercase">
+                                            <?= $wd['month_short'] ?>
+                                        </span>
+                                    </div>
+
+                                    <!-- Mini chips voor taken en meetings op deze dag -->
+                                    <div class="flex flex-col gap-1 mt-auto pt-1.5 border-t border-slate-200/60 dark:border-slate-800/60 text-[9px]">
+                                        <div class="flex items-center justify-between px-1.5 py-0.5 rounded-md bg-white/70 dark:bg-slate-900/60 border border-slate-200/50 dark:border-slate-800/50 text-slate-600 dark:text-slate-400">
+                                            <span class="flex items-center space-x-1">
+                                                <i data-lucide="check-square" class="w-2.5 h-2.5 text-indigo-500"></i>
+                                                <span>Taken</span>
+                                            </span>
+                                            <span class="font-bold <?= $wd['task_count'] > 0 ? ($wd['completed_count'] === $wd['task_count'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-800 dark:text-slate-200') : 'text-slate-400' ?>">
+                                                <?= $wd['completed_count'] ?>/<?= $wd['task_count'] ?>
+                                            </span>
+                                        </div>
+
+                                        <div class="flex items-center justify-between px-1.5 py-0.5 rounded-md bg-sky-50/70 dark:bg-sky-500/10 border border-sky-200/50 dark:border-sky-500/20 text-sky-800 dark:text-sky-300">
+                                            <span class="flex items-center space-x-1">
+                                                <i data-lucide="calendar" class="w-2.5 h-2.5 text-sky-500"></i>
+                                                <span>Agenda</span>
+                                            </span>
+                                            <span class="font-bold">
+                                                <?= $wd['meeting_count'] ?>
+                                            </span>
+                                        </div>
+                                    </div>
+                                </a>
+                            <?php endforeach; ?>
+                        </div>
+
+                        <!-- 3. Sub-header van de Tijdlijn voor de geselecteerde dag -->
+                        <div class="flex items-center justify-between pt-3 border-t border-slate-100 dark:border-slate-800/80">
+                            <div class="flex items-center space-x-2">
+                                <div class="w-7 h-7 rounded-lg bg-indigo-50 dark:bg-indigo-950/50 text-indigo-600 dark:text-indigo-400 flex items-center justify-center font-bold">
+                                    <i data-lucide="clock" class="w-3.5 h-3.5"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider">
+                                        Tijdlijn & Time-blocking voor <?= htmlspecialchars($formattedSelectedDate) ?>
+                                    </h4>
+                                    <p class="text-[10px] text-slate-400">Urenindeling & synchronisatie met Outlook</p>
+                                </div>
+                            </div>
+                            <span class="text-xs text-slate-500 dark:text-slate-400 font-mono font-semibold bg-slate-100 dark:bg-slate-800/70 px-2.5 py-1 rounded-lg">
+                                <?= $hours[0] ?> – <?= end($hours) ?>
+                            </span>
+                        </div>
+
+                        <!-- 4. De urentijdlijn rijen -->
                         <div class="space-y-2.5">
                             <?php foreach ($hours as $hour): 
                                 $hourInt = (int)explode(':', $hour)[0];