Merge branch 'master' of https://github.com/khantey1998/nrml-dashboard

# Conflicts:
#	dashboard/public/js/dashboard/filter.js

dashboard/public/js/dashboard/charts.js

@@ -32,11 +32,16 @@ Chart.register({
         if (chart.config.type !== 'doughnut') return;
         if (chart.$noData) return;
 
-        const { ctx, width, height } = chart;
+        const { ctx, chartArea } = chart;
 
         const data = chart.data.datasets[0].data;
         const total = data.reduce((a, b) => a + b, 0);
 
+        if (!chartArea) return;
+
+        const centerX = (chartArea.left + chartArea.right) / 2;
+        const centerY = (chartArea.top + chartArea.bottom) / 2;
+
         ctx.save();
 
         ctx.textAlign = 'center';
@@ -44,11 +49,11 @@ Chart.register({
 
         ctx.font = 'bold 18px sans-serif';
         ctx.fillStyle = '#111827';
-        ctx.fillText(total, width / 2, height / 2 - 8);
+        ctx.fillText(total, centerX, centerY - 8);
 
         ctx.font = '12px sans-serif';
         ctx.fillStyle = '#6b7280';
-        ctx.fillText('Total cases', width / 2, height / 2 + 12);
+        ctx.fillText('Total cases', centerX, centerY + 12);
 
         ctx.restore();
     }
@@ -247,7 +252,7 @@ function buildChart(id, type, labels, data) {
     }
     if (type === 'doughnut') {
         options.cutout = '70%';
-
+        options.maintainAspectRatio = false;
         options.elements = {
             arc: {
                 borderWidth: (ctx) => ctx.chart.$noData ? 0 : 1

dashboard/public/js/dashboard/export.js

@@ -0,0 +1,300 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    const toggle = document.getElementById("exportToggle");
+    const items = document.getElementById("exportItems");
+    const close = document.getElementById("exportClose");
+
+    if (!toggle || !items) return;
+
+    toggle.addEventListener("click", () => {
+        items.classList.toggle("show");
+
+        toggle.innerText = items.classList.contains("show")
+            ? "Export ▾"
+            : "Export ▸";
+    });
+
+    if (close) {
+        close.addEventListener("click", () => {
+            items.classList.remove("show");
+            toggle.innerText = "Export ▸";
+        });
+    }
+
+});
+
+function openChartSelector() {
+
+    if (typeof charts === "undefined" || Object.keys(charts).length === 0) {
+        alert("Charts are still loading. Please try again.");
+        return;
+    }
+
+    const modal = document.getElementById("chartModal");
+    const list = document.getElementById("chartList");
+
+    list.innerHTML = "";
+
+    Object.keys(charts).forEach(id => {
+        list.innerHTML += `
+            <label style="display:block;margin-bottom:6px;">
+                <input type="checkbox" value="${id}" checked>
+                ${formatChartName(id)}
+            </label>
+        `;
+    });
+    list.innerHTML += `
+        <label>
+            <input type="checkbox" value="provinceMap" checked>
+            Geographic Distribution
+        </label>
+    `;
+
+    modal.style.display = "block";
+}
+
+function closeChartSelector() {
+    document.getElementById("chartModal").style.display = "none";
+}
+
+function formatChartName(id) {
+    const map = {
+        trendChart: "Case Trend & Positivity",
+        pathogenChart: "Pathogen Distribution",
+        provinceMap: "Geographic Distribution",
+        ageChart: "Age Distribution",
+        sexChart: "Sex Distribution",
+        subtypeChart: "Influenza Subtypes",
+        sentinelChart: "Sentinel Site Distribution"
+    };
+
+    return map[id] || id;
+}
+
+async function exportSelectedCharts() {
+
+    const { jsPDF } = window.jspdf;
+    const pdf = new jsPDF("p", "mm", "a4");
+
+    const selected = document.querySelectorAll("#chartList input:checked");
+
+    const margin = 10;
+    const pageWidth = 210;
+    const usableWidth = pageWidth - margin * 2;
+
+    const gap = 5;
+    const chartWidth = (usableWidth - gap) / 2;
+
+    let y = 35;
+
+    // ===== HEADER =====
+    pdf.setFontSize(18);
+    pdf.setFont(undefined, "bold");
+    pdf.text(getReportTitle(), margin, 15);
+
+    pdf.setFontSize(10);
+    pdf.setFont(undefined, "normal");
+    pdf.text(`Generated: ${new Date().toLocaleString()}`, margin, 22);
+
+    pdf.setDrawColor(200);
+    pdf.line(margin, 25, pageWidth - margin, 25);
+
+    // ===== PREPARE ITEMS =====
+    const items = [];
+
+    for (const cb of selected) {
+
+        if (cb.value === "provinceMap") {
+            const mapImg = await getMapImage();
+
+            if (mapImg) {
+                items.push({
+                    id: "provinceMap",
+                    type: "map",
+                    img: mapImg
+                });
+            }
+
+            continue;
+        }
+
+        const chart = charts[cb.value];
+        if (!chart) continue;
+
+        items.push({
+            id: cb.value,
+            type: "chart",
+            chart
+        });
+    }
+
+    let i = 0;
+
+    const FIXED_HEIGHT = 70;
+    const FIXED_WIDTH = chartWidth;
+
+    while (i < items.length) {
+
+        const left = items[i];
+        const right = items[i + 1] || null;
+
+        let leftHeight = FIXED_HEIGHT;
+        let rightHeight = 0;
+
+        const xLeft = margin;
+
+        pdf.setFontSize(11);
+        pdf.setFont(undefined, "bold");
+        pdf.text(formatChartName(left.id), xLeft, y - 3);
+
+        let leftWidth = FIXED_WIDTH;
+        let leftImg;
+
+        if (left.type === "map") {
+            leftWidth = FIXED_WIDTH;
+            leftHeight = 60;
+            leftImg = left.img;
+        } else {
+            leftImg = left.chart.toBase64Image();
+
+            if (["doughnut", "pie"].includes(left.chart.config.type)) {
+                const size = Math.min(FIXED_WIDTH, FIXED_HEIGHT);
+                leftWidth = size;
+                leftHeight = size;
+            } else {
+                leftHeight = FIXED_HEIGHT;
+            }
+        }
+
+        const xLeftAdjusted = xLeft + (FIXED_WIDTH - leftWidth) / 2;
+
+        pdf.addImage(
+            leftImg,
+            "PNG",
+            xLeftAdjusted,
+            y,
+            leftWidth,
+            leftHeight
+        );
+
+        if (right) {
+
+            const xRight = margin + chartWidth + gap;
+
+            pdf.setFontSize(11);
+            pdf.setFont(undefined, "bold");
+            pdf.text(formatChartName(right.id), xRight, y - 3);
+
+            let rightWidth = FIXED_WIDTH;
+            let rightImg;
+
+            if (right.type === "map") {
+                rightWidth = FIXED_WIDTH;
+                rightHeight = 60;
+                rightImg = right.img;
+            } else {
+                rightImg = right.chart.toBase64Image();
+
+                if (["doughnut", "pie"].includes(right.chart.config.type)) {
+                    const size = Math.min(FIXED_WIDTH, FIXED_HEIGHT);
+                    rightWidth = size;
+                    rightHeight = size;
+                } else {
+                    rightHeight = FIXED_HEIGHT;
+                }
+            }
+
+            const xRightAdjusted = xRight + (FIXED_WIDTH - rightWidth) / 2;
+
+            pdf.addImage(
+                rightImg,
+                "PNG",
+                xRightAdjusted,
+                y,
+                rightWidth,
+                rightHeight
+            );
+
+            i += 2;
+        } else {
+            i += 1;
+        }
+
+        // ===== ROW HEIGHT =====
+        const rowHeight = Math.max(leftHeight, rightHeight);
+        y += rowHeight + 12;
+
+        // ===== PAGE BREAK =====
+        if (y > 260) {
+            pdf.addPage();
+            y = 30;
+        }
+    }
+
+    pdf.save("dashboard_report.pdf");
+    closeChartSelector();
+}
+function prepareMapForExport() {
+    if (!window.map) return;
+
+    const bounds = L.featureGroup(Object.values(map._layers)).getBounds();
+
+    if (bounds.isValid()) {
+        map.setView([12.5, 104.9], 6);
+    }
+}
+function exportFullDashboard() {
+
+    const el = document.querySelector(".content-area");
+
+    html2canvas(el, { scale: 2 }).then(canvas => {
+
+        const img = canvas.toDataURL("image/png");
+
+        const { jsPDF } = window.jspdf;
+        const pdf = new jsPDF("p", "mm", "a4");
+
+        const width = 210;
+        const height = (canvas.height * width) / canvas.width;
+
+        pdf.addImage(img, "PNG", 0, 0, width, height);
+
+        pdf.save("full_dashboard.pdf");
+
+    });
+
+    closeChartSelector();
+}
+async function getMapImage() {
+
+    const mapEl = document.getElementById("provinceMap");
+    if (!mapEl) return null;
+
+    prepareMapForExport();
+
+    // wait for map tiles to re-render
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    const canvas = await html2canvas(mapEl, {
+        useCORS: true,
+        scale: 2
+    });
+
+    return canvas.toDataURL("image/png");
+}
+function getReportTitle() {
+    const program = window.PROGRAM_CODE || "Overview";
+
+    const rangeType = document.getElementById("trend_range")?.value;
+
+    if (rangeType === "custom") {
+        const sy = document.getElementById("start_year")?.value;
+        const sw = document.getElementById("start_week")?.value;
+        const ey = document.getElementById("end_year")?.value;
+        const ew = document.getElementById("end_week")?.value;
+
+        return `${program} Report (W${sw}/${sy} – W${ew}/${ey})`;
+    }
+
+    return `${program} Report (Last ${rangeType} weeks)`;
+}

dashboard/public/js/dashboard/filter.js

@@ -75,9 +75,8 @@ class DashboardFilter {
 
         const year = new Date().getFullYear();
 
-        //for (let y = year-10; y <= year; y++) {
-        for (let y = year; y >= year-10; y--) {
 
+        for (let y = year; y >= year-20; y--) {
             this.startYear.innerHTML += `<option value="${y}">${y}</option>`;
             this.endYear.innerHTML += `<option value="${y}">${y}</option>`;
 

dashboard/public/js/program.js

@@ -2,7 +2,20 @@ const standardPrograms = ['SARI', 'ILI', 'LBM', 'AFI'];
 const programCode = (window.PROGRAM_CODE || '').trim().toUpperCase();
 let map;
 let provinceLayer;
+document.addEventListener("DOMContentLoaded", () => {
 
+    if (!standardPrograms.includes(programCode)) return;
+
+    new DashboardFilter((startYear, startWeek, endYear, endWeek) => {
+
+        fetch(`/api/dashboard/program?surveillance_id=${window.SURVEILLANCE_ID}&start_year=${startYear}&start_week=${startWeek}&end_year=${endYear}&end_week=${endWeek}`)
+            .then(res => res.json())
+            .then(programCode === 'AFI' ? renderAFIDashboard : renderDashboard)
+            .catch(err => console.error("Dashboard API error:", err));
+
+    });
+
+});
 function normalizeProvince(name, validSet) {
     if (!name || !validSet) return null;
 
@@ -33,22 +46,6 @@ function normalizeProvince(name, validSet) {
 
     return match || null;
 }
-
-document.addEventListener("DOMContentLoaded", () => {
-
-    if (!standardPrograms.includes(programCode)) return;
-
-    new DashboardFilter((startYear, startWeek, endYear, endWeek) => {
-
-        fetch(`/api/dashboard/program?surveillance_id=${window.SURVEILLANCE_ID}&start_year=${startYear}&start_week=${startWeek}&end_year=${endYear}&end_week=${endWeek}`)
-            .then(res => res.json())
-            .then(programCode === 'AFI' ? renderAFIDashboard : renderDashboard)
-            .catch(err => console.error("Dashboard API error:", err));
-
-    });
-
-});
-
 function renderAFIDashboard(data) {
     const pathogenRows = (data.pathogen_distribution || [])
         .sort((a, b) => b.total - a.total);
@@ -100,11 +97,9 @@ function renderProvinceHeatmap(rows) {
 
             rows.forEach(r => {
 
-                // ✅ FIX: use patient_province + validSet
                 const province = normalizeProvince(r.patient_province, validProvinces);
                 if (!province) return;
 
-                // ✅ FIX: accumulate instead of overwrite
                 if (!totals[province]) {
                     totals[province] = { total: 0, positive: 0 };
                 }
@@ -322,8 +317,6 @@ function renderDashboard(data) {
         '#8b5cf6', '#14b8a6', '#f97316', '#84cc16', '#e11dba', '#f6f63b'
     ];
 
-
-
     buildChart(
         'pathogenChart',
         'doughnut',
@@ -438,7 +431,6 @@ function getColorForPathogen(name) {
 
     if (colors[name]) return colors[name];
 
-    // fallback random color (for future pathogens)
     return `hsl(${Math.floor(Math.random() * 360)}, 70%, 60%)`;
 }
 function renderPathogenChart(rows) {
@@ -481,4 +473,4 @@ function renderSubtypeChart(rows) {
     );
 }
 
-//Seq
+

dashboard/resources/views/layouts/app.blade.php

@@ -4,23 +4,24 @@
 <head>
     <title>NRML Dashboard</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+
     <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
 
     <script src="/js/dashboard/filter.js"></script>
     <script src="/js/dashboard/charts.js"></script>
-
+    <script src="/js/dashboard/export.js"></script>
 
     <style>
-        body {
+        body { margin: 0; }
-            margin: 0;
-        }
 
-        /* HEADER */
         .top-navbar {
             height: 60px;
             background: #0B8F3C;
@@ -33,9 +34,9 @@
         .brand-title {
             font-weight: 600;
             font-size: 18px;
+            color: #f8f9fa;
         }
 
-        /* NAV BAR */
         .nav-bar {
             display: flex;
             background: white;
@@ -44,11 +45,8 @@
             position: sticky;
             top: 0;
             z-index: 1000;
-            background: white;
-            border-bottom: 1px solid #dcdcdc;
         }
 
-        /* NAV ITEMS */
         .btn-theme-outline {
             background-color: #fff;
             color: #0B8F3C;
@@ -57,7 +55,6 @@
 
         .btn-theme-outline:hover {
             background-color: #cce0d4;
-            color: #0B8F3C;
         }
 
         .nav-item {
@@ -69,9 +66,7 @@
             font-size: 14px;
         }
 
-        .nav-item:hover {
+        .nav-item:hover { background: #cce0d4; }
-            background: #cce0d4;
-        }
 
         .active-tab {
             color: #0B8F3C;
@@ -79,47 +74,60 @@
             background: #e5efe8;
         }
 
-        .content-area {
-            padding: 25px;
-        }
-
-        .brand-title {
-            font-weight: 600;
-            font-size: 18px;
-            color: #f8f9fa;
-        }
-
         .content-area {
             padding: 20px;
             background: #f8f9fa;
-            /*min-height: calc(100vh - 60px);*/
             min-height: calc(100vh - 110px);
         }
 
-        .brand-logo {
-            width: 32px;
-            height: 32px;
-            object-fit: contain;
-            margin-right: 10px;
-        }
-
         .card {
             border-radius: 0px !important;
             border: 1px solid #E5E7EB;
         }
 
-        .form-select{
+        .form-select { border-radius: 0px !important; }
-            border-radius: 0px !important;
+        .shadow-sm { box-shadow: none !important; }
+
+        .card h3 { color: #0B8F3C; }
+
+        /* EXPORT */
+        .export-control { position: relative; }
+
+        #exportItems {
+            display: flex;
+            gap: 8px;
+            opacity: 0;
+            transform: translateX(-10px);
+            pointer-events: none;
+            width: 0;
+            overflow: hidden;
+            transition: all 0.2s ease;
         }
 
-        .shadow-sm{
+        #exportItems.show {
-            box-shadow: none !important;
+            opacity: 1;
+            transform: translateX(0);
+            pointer-events: auto;
+            width: auto;
         }
 
-        .card h3 {
+        .export-modal {
-            color: #0B8F3C;
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.4);
+            z-index: 10000;
         }
 
+        .export-content {
+            background: white;
+            padding: 20px;
+            width: 400px;
+            margin: 10% auto;
+            border-radius: 10px;
+        }
+
+        /* SLIDE FEATURE (from master) */
         .slide-wrapper {
             position: relative;
             overflow: hidden;
@@ -136,23 +144,14 @@
             transition: all 0.5s ease-in-out;
         }
 
-        .slide.active {
+        .slide.active { left: 0; opacity: 1; z-index: 2; }
-            left: 0;
+        .slide.prev { left: -100%; opacity: 0; }
-            opacity: 1;
-            z-index: 2;
-        }
 
-        .slide.prev {
-            left: -100%;
-            opacity: 0;
-        }
-
-        /* Buttons */
         .slide-btn {
             position: absolute;
             top: 10%;
             transform: translateY(-50%);
-            background: rgba(0, 128, 0, 0.43);
+            background: rgba(0,128,0,0.43);
             color: white;
             border: none;
             padding: 8px 15px;
@@ -164,87 +163,104 @@
         .next-btn { right: 25px; }
 
         .slide-btn:hover {
-            background: rgba(7, 120, 24, 0.8);
+            background: rgba(7,120,24,0.8);
         }
 
+        @media print {
+            #floatingExport { display: none !important; }
+            .nav-bar, .top-navbar { display: none !important; }
+            .card { page-break-inside: avoid; }
+        }
     </style>
 </head>
 
 <body>
 
-    <!-- TOP HEADER -->
+<div class="top-navbar">
-    <div class="top-navbar">
+    <div class="brand-title">
-
+        National Reference Medical Laboratory Surveillance Dashboard
-        <div class="brand-title">
-            National Reference Medical Laboratory Surveillance Dashboard
-        </div>
-
-        <div class="ms-auto small">
-            Last update: 12:05 | 2026-03-15
-        </div>
-
     </div>
+    <div class="ms-auto small">
+        Last update: 12:05 | 2026-03-15
+    </div>
+</div>
 
-    <!-- NAVIGATION BAR -->
+<div class="nav-bar">
-    <div class="nav-bar">
 
-        <a href="/dashboard" class="nav-item {{ request()->is('dashboard') ? 'active-tab' : '' }}">
+    <a href="/dashboard" class="nav-item {{ request()->is('dashboard') ? 'active-tab' : '' }}">
-            Overview
+        Overview
-        </a>
+    </a>
 
-         @foreach($programs as $program)
+    @foreach($programs as $program)
-            <a href="/dashboard/{{ strtolower($program->code) }}" title="{{$program->name_en}}"
+        @if($program->code === 'SEQ')
-                class="nav-item {{ request()->is('dashboard/' . strtolower($program->code)) ? 'active-tab' : '' }}">
+            <a href="/dashboard/seq" class="nav-item {{ request()->is('dashboard/seq') ? 'active-tab' : '' }}">
+                SEQ
+            </a>
+        @else
+            <a href="/dashboard/{{ strtolower($program->code) }}"
+               class="nav-item {{ request()->is('dashboard/' . strtolower($program->code)) ? 'active-tab' : '' }}">
                 {{ $program->code }}
             </a>
-        @endforeach
+        @endif
-{{--        @foreach($programs->where('code', '!=', 'NDS') as $program)--}}
+    @endforeach
 
-{{--            @if($program->code === 'SEQ')--}}
+    <div class="ms-auto d-flex align-items-center gap-2 pe-3">
 
-{{--                <a href="/dashboard/seq"--}}
+        <button onclick="reloadDataSource()" class="btn btn-sm btn-theme-outline">
-{{--                    class="nav-item {{ request()->is('dashboard/seq') ? 'active-tab' : '' }}">--}}
+            Refresh Data
-{{--                    SEQ--}}
+        </button>
-{{--                </a>--}}
-{{--            @else--}}
-{{--                <a href="/dashboard/{{ strtolower($program->code) }}"--}}
-{{--                    class="nav-item {{ request()->is('dashboard/' . strtolower($program->code)) ? 'active-tab' : '' }}">--}}
-{{--                    {{ $program->code }}--}}
-{{--                </a>--}}
-{{--            @endif--}}
 
-{{--        @endforeach--}}
+        <div id="exportControl" class="d-flex align-items-center gap-2">
 
-        <div class="ms-auto d-flex align-items-center gap-4 pe-3">
+            <button id="exportToggle" class="btn btn-sm btn-theme-outline">
-            <button type="button" onclick="reloadDataSource()" class="btn btn-sm btn-theme-outline" style="border-radius: 0px !important;">
+                Export ▸
-                Refresh Data
             </button>
+
+            <div id="exportItems" class="align-items-center gap-2">
+                <button class="btn btn-sm btn-light" onclick="openChartSelector()">Charts</button>
+                <button class="btn btn-sm btn-light" onclick="exportFullDashboard()">Screen</button>
+                <button class="btn btn-sm btn-light" onclick="window.print()">Print</button>
+                <button class="btn btn-sm btn-outline-secondary" id="exportClose">✕</button>
+            </div>
+
+            <div id="chartModal" class="export-modal">
+                <div class="export-content">
+                    <h5>Select Charts</h5>
+                    <div id="chartList"></div>
+
+                    <div class="mt-3 d-flex justify-content-end gap-2">
+                        <button onclick="closeChartSelector()">Cancel</button>
+                        <button onclick="exportSelectedCharts()">Download PDF</button>
+                    </div>
+                </div>
+            </div>
+
         </div>
 
     </div>
 
-    <!-- Main Wrapper -->
+</div>
-    <div class="main-wrapper">
-
-        <!-- Page Content -->
-        <div class="content-area">
-            @yield('content')
-        </div>
 
+<div class="main-wrapper">
+    <div class="content-area">
+        @yield('content')
     </div>
+</div>
 
-    @yield('scripts')
+@yield('scripts')
 
-    <script>
+<script>
-        function reloadDataSource() {
+    window.addEventListener("click", (e) => {
-            fetch(`/api/dashboard/reload`)
+        const modal = document.getElementById("chartModal");
-                .then(res => res.json())
+        if (e.target === modal) modal.style.display = "none";
-                .then(data => {
+    });
-                    location.reload()
+
-                });
+    function reloadDataSource() {
-        }
+        fetch(`/api/dashboard/reload`)
-    </script>
+            .then(res => res.json())
+            .then(() => location.reload());
+    }
+</script>
 
 </body>
-
 </html>