nexo-brain 5.3.26 → 5.3.27

package/src/dashboard/templates/calendar 2.html

@@ -1,591 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Calendar{% endblock %}
-
-{% block page_title %}Calendar{% endblock %}
-
-{% block header_actions %}
-<!-- View toggle -->
-<div class="flex items-center gap-0.5 bg-slate-800/60 rounded-lg p-0.5 mr-3">
-    <button id="btn-month" onclick="setView('month')" class="text-xs px-3 py-1 rounded-md font-display font-medium transition-all">Month</button>
-    <button id="btn-week" onclick="setView('week')" class="text-xs px-3 py-1 rounded-md font-display font-medium transition-all">Week</button>
-    <button id="btn-day" onclick="setView('day')" class="text-xs px-3 py-1 rounded-md font-display font-medium transition-all">Day</button>
-</div>
-<!-- Navigation -->
-<button onclick="navigatePrev()" class="text-slate-400 hover:text-white px-2 py-1 transition-colors text-lg leading-none">&larr;</button>
-<span id="period-label" class="text-sm font-display font-medium min-w-[200px] text-center"></span>
-<button onclick="navigateNext()" class="text-slate-400 hover:text-white px-2 py-1 transition-colors text-lg leading-none">&rarr;</button>
-<button onclick="goToday()" class="text-xs px-2.5 py-1 rounded-md bg-slate-800 text-slate-400 hover:bg-slate-700 transition-colors">Today</button>
-{% endblock %}
-
-{% block head %}
-<style>
-    .modal-backdrop { backdrop-filter: blur(4px); }
-    .status-done { opacity: 0.6; }
-    .status-done .item-text { text-decoration: line-through; }
-    @keyframes calFadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
-    .modal-animate { animation: calFadeIn 0.15s ease-out; }
-    @keyframes spin { to { transform: rotate(360deg); } }
-    .spin { animation: spin 0.6s linear infinite; }
-</style>
-{% endblock %}
-
-{% block content %}
-<!-- Calendar content area -->
-<div id="calendar-content" class="flex-1 overflow-auto"></div>
-
-<!-- Modal -->
-<div id="modal-overlay" class="hidden fixed inset-0 z-[100] flex items-center justify-center modal-backdrop bg-gray-950/70" onclick="closeModal(event)">
-    <div id="modal-box" class="modal-animate bg-slate-900 border border-slate-700/60 rounded-xl shadow-2xl w-full max-w-lg mx-4 max-h-[85vh] flex flex-col" onclick="event.stopPropagation()">
-        <!-- Modal header -->
-        <div class="flex items-center justify-between px-5 py-4 border-b border-slate-800/60 flex-shrink-0">
-            <div>
-                <h2 id="modal-title" class="text-base font-display font-semibold text-slate-100"></h2>
-                <p id="modal-subtitle" class="text-xs text-slate-500 font-mono mt-0.5"></p>
-            </div>
-            <button onclick="closeModalDirect()" class="w-7 h-7 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-slate-800 transition-colors text-xl leading-none">&times;</button>
-        </div>
-        <!-- Modal body -->
-        <div id="modal-body" class="overflow-y-auto flex-1 px-5 py-4 space-y-5"></div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-    const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
-    const DAYS_SHORT = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
-    const DAYS_LONG = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
-
-    let currentView = 'month';
-    let currentYear = new Date().getFullYear();
-    let currentMonth = new Date().getMonth() + 1;
-    let currentWeekStart = getWeekStart(new Date());
-    let currentDay = new Date();
-    let calendarItems = { reminders: [], followups: [] };
-
-    // --- Helpers ---
-
-    function today() {
-        const d = new Date();
-        return ymd(d);
-    }
-
-    function ymd(date) {
-        return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;
-    }
-
-    function parseDate(str) {
-        const parts = str.slice(0,10).split('-');
-        return new Date(parseInt(parts[0]), parseInt(parts[1])-1, parseInt(parts[2]));
-    }
-
-    function getWeekStart(date) {
-        const d = new Date(date);
-        const dow = (d.getDay() + 6) % 7;
-        d.setDate(d.getDate() - dow);
-        return d;
-    }
-
-    function addDays(date, n) {
-        const d = new Date(date);
-        d.setDate(d.getDate() + n);
-        return d;
-    }
-
-    function getItemDate(item) {
-        return (item.due_date || item.date || '').slice(0, 10);
-    }
-
-    function getItemStatus(item, dateStr) {
-        const status = (item.status || 'pending').toLowerCase();
-        if (status === 'completed' || status === 'done') return 'done';
-        const todayStr = today();
-        if (dateStr && dateStr < todayStr) return 'overdue';
-        return 'pending';
-    }
-
-    function buildItemsLookup(items) {
-        const map = {};
-        (items.reminders || []).forEach(r => {
-            const d = getItemDate(r);
-            if (d) {
-                if (!map[d]) map[d] = { reminders: [], followups: [] };
-                map[d].reminders.push(r);
-            }
-        });
-        (items.followups || []).forEach(f => {
-            const d = getItemDate(f);
-            if (d) {
-                if (!map[d]) map[d] = { reminders: [], followups: [] };
-                map[d].followups.push(f);
-            }
-        });
-        return map;
-    }
-
-    // --- Status badge HTML ---
-
-    function statusBadgeHtml(status) {
-        if (status === 'done') {
-            return `<span class="inline-flex items-center gap-1 text-xs font-mono font-semibold px-1.5 py-0.5 rounded bg-emerald-500/15 text-emerald-400 uppercase tracking-wide">
-                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block"></span>DONE
-            </span>`;
-        }
-        if (status === 'overdue') {
-            return `<span class="inline-flex items-center gap-1 text-xs font-mono font-semibold px-1.5 py-0.5 rounded bg-red-500/15 text-red-400 uppercase tracking-wide">
-                <span class="w-1.5 h-1.5 rounded-full bg-red-500 inline-block"></span>OVERDUE
-            </span>`;
-        }
-        return `<span class="inline-flex items-center gap-1 text-xs font-mono font-semibold px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-400 uppercase tracking-wide">
-            <span class="w-1.5 h-1.5 rounded-full bg-amber-500 inline-block"></span>PENDING
-        </span>`;
-    }
-
-    function statusDotHtml(status) {
-        if (status === 'done') return '<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 flex-shrink-0 inline-block"></span>';
-        if (status === 'overdue') return '<span class="w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0 inline-block"></span>';
-        return '<span class="w-1.5 h-1.5 rounded-full bg-amber-500 flex-shrink-0 inline-block"></span>';
-    }
-
-    // --- Item card HTML ---
-
-    function itemCardHtml(item, type, dateStr, compact) {
-        const status = getItemStatus(item, dateStr);
-        const desc = escapeHtml(item.description || item.content || item.title || '—');
-        const category = item.category ? escapeHtml(item.category) : null;
-        const id = item.id;
-        const isReminder = type === 'reminder';
-        const isDone = status === 'done';
-
-        const typeTag = isReminder
-            ? `<span class="text-xs font-mono font-semibold px-1.5 py-0.5 rounded bg-violet-500/15 text-violet-400 uppercase tracking-wide">Reminder</span>`
-            : `<span class="text-xs font-mono font-semibold px-1.5 py-0.5 rounded bg-pink-500/15 text-pink-400 uppercase tracking-wide">Followup</span>`;
-
-        const catTag = category
-            ? `<span class="text-xs font-mono px-1.5 py-0.5 rounded bg-slate-700/50 text-slate-400">${category}</span>`
-            : '';
-
-        const executeBtn = (!isReminder && !isDone)
-            ? `<button onclick="executeFollowup(${id}, this)" class="ml-auto text-xs px-2.5 py-1 rounded-md bg-violet-600 hover:bg-violet-500 text-white font-display font-medium transition-colors flex-shrink-0 flex items-center gap-1">
-                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 3l14 9-14 9V3z"/></svg>
-                Execute
-              </button>`
-            : '';
-
-        const idTag = `<span class="text-xs font-mono text-slate-600">#${id}</span>`;
-
-        if (compact) {
-            return `<div class="flex items-start gap-1.5 py-1 ${isDone ? 'opacity-60' : ''}">
-                ${statusDotHtml(status)}
-                <span class="text-xs text-slate-300 leading-snug ${isDone ? 'line-through text-slate-500' : ''} flex-1 min-w-0 truncate">${desc}</span>
-            </div>`;
-        }
-
-        return `<div class="bg-slate-800/40 border border-slate-700/40 rounded-lg p-3.5 ${isDone ? 'status-done' : ''}">
-            <div class="flex items-center gap-2 flex-wrap mb-2">
-                ${typeTag}
-                ${statusBadgeHtml(status)}
-                ${catTag}
-                ${idTag}
-                ${executeBtn}
-            </div>
-            <div class="text-sm text-slate-200 leading-relaxed item-text">${desc}</div>
-        </div>`;
-    }
-
-    // --- Execute followup ---
-
-    async function executeFollowup(id, btn) {
-        const originalHtml = btn.innerHTML;
-        btn.innerHTML = `<svg class="w-3 h-3 spin" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Running`;
-        btn.disabled = true;
-        try {
-            const res = await fetch(`/api/ops/execute/${id}`, { method: 'POST' });
-            const data = await res.json();
-            if (res.ok) {
-                btn.innerHTML = `<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> Done`;
-                btn.className = btn.className.replace('bg-violet-600 hover:bg-violet-500', 'bg-emerald-700 cursor-default');
-                await loadCalendarData();
-            } else {
-                const errMsg = data.error || data.detail || 'HTTP ' + res.status;
-                btn.innerHTML = '\u2717 ' + errMsg;
-                btn.title = errMsg;
-                btn.className = btn.className.replace('bg-violet-600 hover:bg-violet-500', 'bg-red-700');
-                setTimeout(() => { btn.innerHTML = originalHtml; btn.title = ''; btn.disabled = false; btn.className = btn.className.replace('bg-red-700', 'bg-violet-600 hover:bg-violet-500'); }, 3000);
-            }
-        } catch(e) {
-            btn.innerHTML = '\u2717 ' + e.message;
-            setTimeout(() => { btn.innerHTML = originalHtml; btn.disabled = false; }, 3000);
-        }
-    }
-
-    // --- Data loading ---
-
-    async function loadCalendarData() {
-        try {
-            const res = await fetch(`/api/calendar?year=${currentYear}&month=${currentMonth}`);
-            calendarItems = await res.json();
-        } catch(e) {
-            calendarItems = { reminders: [], followups: [] };
-        }
-    }
-
-    // --- View management ---
-
-    function setView(view) {
-        currentView = view;
-        updateViewButtons();
-        renderView();
-    }
-
-    function updateViewButtons() {
-        ['month','week','day'].forEach(v => {
-            const btn = document.getElementById(`btn-${v}`);
-            if (v === currentView) {
-                btn.className = 'text-xs px-3 py-1 rounded-md font-display font-medium transition-all bg-violet-600 text-white';
-            } else {
-                btn.className = 'text-xs px-3 py-1 rounded-md font-display font-medium transition-all text-slate-400 hover:text-slate-200';
-            }
-        });
-    }
-
-    function navigatePrev() {
-        if (currentView === 'month') {
-            currentMonth--;
-            if (currentMonth < 1) { currentMonth = 12; currentYear--; }
-        } else if (currentView === 'week') {
-            currentWeekStart = addDays(currentWeekStart, -7);
-            currentYear = currentWeekStart.getFullYear();
-            currentMonth = currentWeekStart.getMonth() + 1;
-        } else {
-            currentDay = addDays(currentDay, -1);
-            currentYear = currentDay.getFullYear();
-            currentMonth = currentDay.getMonth() + 1;
-        }
-        loadAndRender();
-    }
-
-    function navigateNext() {
-        if (currentView === 'month') {
-            currentMonth++;
-            if (currentMonth > 12) { currentMonth = 1; currentYear++; }
-        } else if (currentView === 'week') {
-            currentWeekStart = addDays(currentWeekStart, 7);
-            currentYear = currentWeekStart.getFullYear();
-            currentMonth = currentWeekStart.getMonth() + 1;
-        } else {
-            currentDay = addDays(currentDay, 1);
-            currentYear = currentDay.getFullYear();
-            currentMonth = currentDay.getMonth() + 1;
-        }
-        loadAndRender();
-    }
-
-    function goToday() {
-        const now = new Date();
-        currentYear = now.getFullYear();
-        currentMonth = now.getMonth() + 1;
-        currentWeekStart = getWeekStart(now);
-        currentDay = now;
-        loadAndRender();
-    }
-
-    async function loadAndRender() {
-        await loadCalendarData();
-        renderView();
-    }
-
-    function renderView() {
-        if (currentView === 'month') renderMonth();
-        else if (currentView === 'week') renderWeek();
-        else renderDay();
-    }
-
-    // --- Month view ---
-
-    function renderMonth() {
-        document.getElementById('period-label').textContent = `${MONTHS[currentMonth - 1]} ${currentYear}`;
-
-        const firstDay = new Date(currentYear, currentMonth - 1, 1);
-        const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
-        const startDow = (firstDay.getDay() + 6) % 7;
-        const todayStr = today();
-        const itemsByDate = buildItemsLookup(calendarItems);
-
-        let headerHtml = `<div class="grid grid-cols-7 mb-1">`;
-        DAYS_SHORT.forEach(d => {
-            headerHtml += `<div class="p-2 text-center text-xs uppercase tracking-wider text-slate-500 font-display font-medium">${d}</div>`;
-        });
-        headerHtml += `</div>`;
-
-        let cells = '';
-
-        // Previous month padding
-        const prevMonthLast = new Date(currentYear, currentMonth - 1, 0).getDate();
-        for (let i = startDow - 1; i >= 0; i--) {
-            cells += `<div class="bg-gray-950 p-2 min-h-[90px] opacity-25">
-                <div class="text-xs text-slate-500 font-display">${prevMonthLast - i}</div>
-            </div>`;
-        }
-
-        // Current month days
-        for (let d = 1; d <= daysInMonth; d++) {
-            const dateStr = `${currentYear}-${String(currentMonth).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
-            const isToday = dateStr === todayStr;
-            const dayItems = itemsByDate[dateStr];
-
-            const bgClass = `bg-gray-950 hover:bg-slate-900/60 cursor-pointer transition-colors`;
-            const ringClass = isToday ? 'ring-1 ring-inset ring-violet-500/50' : '';
-            const dayNumClass = isToday
-                ? 'w-6 h-6 flex items-center justify-center rounded-full bg-violet-600 text-white font-semibold text-xs'
-                : 'text-xs text-slate-400 font-display';
-
-            let dotsHtml = '';
-            if (dayItems) {
-                const allItems = [
-                    ...dayItems.reminders.map(r => ({ ...r, type: 'reminder' })),
-                    ...dayItems.followups.map(f => ({ ...f, type: 'followup' }))
-                ];
-                const total = allItems.length;
-
-                let doneDots = [], pendingDots = [], overdueDots = [];
-                allItems.forEach(item => {
-                    const st = getItemStatus(item, dateStr);
-                    const color = st === 'done' ? 'bg-emerald-500' : st === 'overdue' ? 'bg-red-500' : 'bg-amber-500';
-                    const dot = `<span class="w-1.5 h-1.5 rounded-full ${color} flex-shrink-0"></span>`;
-                    if (st === 'done') doneDots.push(dot);
-                    else if (st === 'overdue') overdueDots.push(dot);
-                    else pendingDots.push(dot);
-                });
-
-                const visibleDots = [...overdueDots, ...pendingDots, ...doneDots].slice(0, 5);
-                const overflow = total > 5 ? `<span class="text-xs text-slate-500 font-mono leading-none">+${total - 5}</span>` : '';
-                dotsHtml = `<div class="flex flex-wrap gap-0.5 mt-1.5 items-center">${visibleDots.join('')}${overflow}</div>`;
-            }
-
-            cells += `<div class="${bgClass} ${ringClass} p-2 min-h-[90px]" onclick="openDayModal('${dateStr}')">
-                <div class="${dayNumClass}">${d}</div>
-                ${dotsHtml}
-            </div>`;
-        }
-
-        // Next month padding
-        const totalCells = startDow + daysInMonth;
-        const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);
-        for (let d = 1; d <= remaining; d++) {
-            cells += `<div class="bg-gray-950 p-2 min-h-[90px] opacity-25">
-                <div class="text-xs text-slate-500 font-display">${d}</div>
-            </div>`;
-        }
-
-        document.getElementById('calendar-content').innerHTML = `
-            ${headerHtml}
-            <div class="grid grid-cols-7 gap-px bg-slate-800/30 rounded-lg overflow-hidden border border-slate-800/30">
-                ${cells}
-            </div>
-        `;
-    }
-
-    // --- Week view ---
-
-    function renderWeek() {
-        const weekEnd = addDays(currentWeekStart, 6);
-        const startLabel = currentWeekStart.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-        const endLabel = weekEnd.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
-        document.getElementById('period-label').textContent = `${startLabel} \u2013 ${endLabel}`;
-
-        const todayStr = today();
-        const itemsByDate = buildItemsLookup(calendarItems);
-
-        let headerHtml = `<div class="grid grid-cols-7 gap-px mb-0.5">`;
-        for (let i = 0; i < 7; i++) {
-            const d = addDays(currentWeekStart, i);
-            const dStr = ymd(d);
-            const isToday = dStr === todayStr;
-            const dayItems = itemsByDate[dStr];
-            const count = dayItems ? (dayItems.reminders.length + dayItems.followups.length) : 0;
-
-            headerHtml += `<div class="p-3 text-center ${isToday ? 'bg-violet-500/10' : 'bg-slate-900/30'} rounded-t-lg cursor-pointer hover:bg-slate-800/50 transition-colors" onclick="openDayModal('${dStr}')">
-                <div class="text-xs uppercase tracking-wider text-slate-500 font-display">${DAYS_SHORT[i]}</div>
-                <div class="text-lg font-display font-semibold mt-0.5 ${isToday ? 'text-violet-400' : 'text-slate-200'}">${d.getDate()}</div>
-                ${count > 0 ? `<div class="text-xs font-mono text-slate-500 mt-0.5">${count} item${count !== 1 ? 's' : ''}</div>` : ''}
-            </div>`;
-        }
-        headerHtml += `</div>`;
-
-        let bodyHtml = `<div class="grid grid-cols-7 gap-px bg-slate-800/20 rounded-b-lg overflow-hidden border border-slate-800/30 border-t-0">`;
-        for (let i = 0; i < 7; i++) {
-            const d = addDays(currentWeekStart, i);
-            const dStr = ymd(d);
-            const isToday = dStr === todayStr;
-            const dayItems = itemsByDate[dStr];
-
-            let itemsHtml = '';
-            if (dayItems) {
-                const allItems = [
-                    ...dayItems.reminders.map(r => ({ ...r, _type: 'reminder' })),
-                    ...dayItems.followups.map(f => ({ ...f, _type: 'followup' }))
-                ];
-                allItems.sort((a, b) => {
-                    const order = { overdue: 0, pending: 1, done: 2 };
-                    return order[getItemStatus(a, dStr)] - order[getItemStatus(b, dStr)];
-                });
-                itemsHtml = allItems.map(item => itemCardHtml(item, item._type, dStr, true)).join('');
-            }
-
-            bodyHtml += `<div class="${isToday ? 'bg-violet-500/5' : 'bg-gray-950'} p-2 min-h-[160px] cursor-pointer hover:bg-slate-900/40 transition-colors" onclick="openDayModal('${dStr}')">
-                ${itemsHtml || `<div class="text-xs text-slate-700 text-center mt-4">\u2014</div>`}
-            </div>`;
-        }
-        bodyHtml += `</div>`;
-
-        document.getElementById('calendar-content').innerHTML = headerHtml + bodyHtml;
-    }
-
-    // --- Day view ---
-
-    function renderDay() {
-        const dStr = ymd(currentDay);
-        const label = currentDay.toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
-        document.getElementById('period-label').textContent = label;
-
-        const itemsByDate = buildItemsLookup(calendarItems);
-        const dayItems = itemsByDate[dStr];
-
-        const dayReminders = dayItems ? dayItems.reminders : [];
-        const dayFollowups = dayItems ? dayItems.followups : [];
-        const total = dayReminders.length + dayFollowups.length;
-
-        const todayStr = today();
-        const isToday = dStr === todayStr;
-
-        let html = `<div class="max-w-2xl mx-auto">`;
-
-        html += `<div class="flex items-center gap-3 mb-6">
-            <div class="text-2xl font-display font-bold ${isToday ? 'text-violet-400' : 'text-slate-100'}">${label}</div>
-            <span class="text-sm font-mono text-slate-500">${total} item${total !== 1 ? 's' : ''}</span>
-        </div>`;
-
-        if (total === 0) {
-            html += `<div class="text-center py-16 text-slate-600 font-display">
-                <div class="text-4xl mb-3">\u2014</div>
-                <div>No items for this day</div>
-            </div>`;
-        } else {
-            if (dayReminders.length > 0) {
-                html += `<div class="mb-6">
-                    <div class="flex items-center gap-2 mb-3">
-                        <span class="text-xs font-mono font-semibold px-2 py-0.5 rounded bg-violet-500/15 text-violet-400 uppercase tracking-wide">Reminders (User)</span>
-                        <span class="text-xs text-slate-600 font-mono">${dayReminders.length}</span>
-                    </div>
-                    <div class="space-y-2">
-                        ${dayReminders.map(r => itemCardHtml(r, 'reminder', dStr, false)).join('')}
-                    </div>
-                </div>`;
-            }
-
-            if (dayFollowups.length > 0) {
-                html += `<div class="mb-6">
-                    <div class="flex items-center gap-2 mb-3">
-                        <span class="text-xs font-mono font-semibold px-2 py-0.5 rounded bg-pink-500/15 text-pink-400 uppercase tracking-wide">Followups (NEXO)</span>
-                        <span class="text-xs text-slate-600 font-mono">${dayFollowups.length}</span>
-                    </div>
-                    <div class="space-y-2">
-                        ${dayFollowups.map(f => itemCardHtml(f, 'followup', dStr, false)).join('')}
-                    </div>
-                </div>`;
-            }
-        }
-
-        html += `</div>`;
-        document.getElementById('calendar-content').innerHTML = html;
-    }
-
-    // --- Modal ---
-
-    function openDayModal(dateStr) {
-        const date = parseDate(dateStr);
-        const label = date.toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
-
-        const itemsByDate = buildItemsLookup(calendarItems);
-        const dayItems = itemsByDate[dateStr];
-
-        const dayReminders = dayItems ? dayItems.reminders : [];
-        const dayFollowups = dayItems ? dayItems.followups : [];
-        const total = dayReminders.length + dayFollowups.length;
-
-        document.getElementById('modal-title').textContent = label;
-        document.getElementById('modal-subtitle').textContent = `${total} item${total !== 1 ? 's' : ''}`;
-
-        let bodyHtml = '';
-
-        if (total === 0) {
-            bodyHtml = `<div class="text-center py-10 text-slate-600 font-display">No items for this day</div>`;
-        } else {
-            const sortItems = (arr, type) => {
-                const copy = arr.map(r => ({ ...r, _type: type }));
-                copy.sort((a, b) => {
-                    const order = { overdue: 0, pending: 1, done: 2 };
-                    return order[getItemStatus(a, dateStr)] - order[getItemStatus(b, dateStr)];
-                });
-                return copy;
-            };
-
-            if (dayReminders.length > 0) {
-                bodyHtml += `<div>
-                    <div class="flex items-center gap-2 mb-2.5">
-                        <span class="text-xs font-mono font-semibold px-2 py-0.5 rounded bg-violet-500/15 text-violet-400 uppercase tracking-wide">Reminders (User)</span>
-                        <span class="text-xs text-slate-600 font-mono">${dayReminders.length}</span>
-                    </div>
-                    <div class="space-y-2">
-                        ${sortItems(dayReminders, 'reminder').map(r => itemCardHtml(r, 'reminder', dateStr, false)).join('')}
-                    </div>
-                </div>`;
-            }
-
-            if (dayFollowups.length > 0) {
-                bodyHtml += `<div>
-                    <div class="flex items-center gap-2 mb-2.5">
-                        <span class="text-xs font-mono font-semibold px-2 py-0.5 rounded bg-pink-500/15 text-pink-400 uppercase tracking-wide">Followups (NEXO)</span>
-                        <span class="text-xs text-slate-600 font-mono">${dayFollowups.length}</span>
-                    </div>
-                    <div class="space-y-2">
-                        ${sortItems(dayFollowups, 'followup').map(f => itemCardHtml(f, 'followup', dateStr, false)).join('')}
-                    </div>
-                </div>`;
-            }
-        }
-
-        document.getElementById('modal-body').innerHTML = bodyHtml;
-
-        const overlay = document.getElementById('modal-overlay');
-        overlay.classList.remove('hidden');
-        const box = document.getElementById('modal-box');
-        box.classList.remove('modal-animate');
-        void box.offsetWidth;
-        box.classList.add('modal-animate');
-
-        document._modalEscHandler = (e) => { if (e.key === 'Escape') closeModalDirect(); };
-        document.addEventListener('keydown', document._modalEscHandler);
-    }
-
-    function closeModal(e) {
-        if (e.target === document.getElementById('modal-overlay')) {
-            closeModalDirect();
-        }
-    }
-
-    function closeModalDirect() {
-        document.getElementById('modal-overlay').classList.add('hidden');
-        if (document._modalEscHandler) {
-            document.removeEventListener('keydown', document._modalEscHandler);
-        }
-    }
-
-    // --- Init ---
-
-    updateViewButtons();
-    loadAndRender();
-</script>
-{% endblock %}