change charts corlor, update AFI

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

@@ -19,6 +19,7 @@
     <script src="/js/dashboard/charts.js"></script>
     <script src="/js/dashboard/export.js"></script>
 
+
     <style>
         body {
             margin: 0;
@@ -48,7 +49,8 @@
             top: 0;
             z-index: 1000;
         }
-        .btn{
+
+        .btn {
             border-radius: 0 !important;
         }
 
@@ -60,6 +62,7 @@
 
         .btn-theme-outline:hover {
             background-color: #cce0d4;
+            color: #0B8F3C;
         }
 
         .nav-item {
@@ -73,6 +76,7 @@
 
         .nav-item:hover {
             background: #cce0d4;
+            color: #0B8F3C;
         }
 
         .active-tab {
@@ -92,6 +96,23 @@
             border: 1px solid #E5E7EB;
         }
 
+        .chart-container {
+            position: relative;
+            height: 400px;
+            width: 100%;
+        }
+
+        .map-container {
+            height: 400px;
+            width: 100%;
+            position: relative;
+        }
+
+        #provinceMap {
+            height: 100%;
+            width: 100%;
+        }
+
         .form-select {
             border-radius: 0px !important;
         }
@@ -175,9 +196,9 @@
             position: absolute;
             top: 10%;
             transform: translateY(-50%);
-            background: rgba(0, 128, 0, 0.43);
-            color: white;
-            border: none;
+            background: #fff;
+            color: #0B8F3C;
+            border: 1px solid #0B8F3C;
             padding: 8px 15px;
             cursor: pointer;
             z-index: 10;
@@ -193,6 +214,7 @@
 
         .slide-btn:hover {
             background: rgba(7, 120, 24, 0.8);
+            color: #cee6d7;
         }
 
         @media print {
@@ -218,8 +240,8 @@
         <div class="brand-title">
             National Reference Medical Laboratory Surveillance Dashboard
         </div>
-        <div class="ms-auto small">
-            Last update: 12:05 | 2026-03-15
+        <div id="lastUpdated" class="ms-auto small">
+            Last update: --
         </div>
     </div>
 
@@ -284,22 +306,76 @@
             @yield('content')
         </div>
     </div>
-
+    <div id="reloadOverlay" style="
+            display:none;
+            position:fixed;
+            inset:0;
+            background:rgba(255,255,255,0.7);
+            z-index:99999;
+            justify-content:center;
+            align-items:center;
+            flex-direction:column;
+            font-size:18px;
+            font-weight:600;
+            color:#333;
+        ">
+        <div class="spinner-border text-primary mb-3"></div>
+        Updating dashboard data...
+    </div>
     @yield('scripts')
 
+
     <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            updateLastUpdated();
+        });
         window.addEventListener("click", (e) => {
             const modal = document.getElementById("chartModal");
             if (e.target === modal) modal.style.display = "none";
         });
 
+        function updateLastUpdated() {
+
+            const now = new Date();
+
+            const time = now.toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+
+            const date = now.toISOString().split('T')[0];
+
+            document.getElementById('lastUpdated').innerHTML =
+                `Last update: ${time} | ${date}`;
+        }
+
         function reloadDataSource() {
-            fetch(`/api/dashboard/reload`)
+
+            const overlay = document.getElementById('reloadOverlay');
+
+            overlay.style.display = 'flex';
+
+            fetch('/api/dashboard/reload')
                 .then(res => res.json())
-                .then(() => location.reload());
+                .then(() => {
+
+                    updateLastUpdated();
+
+                    location.reload();
+
+                })
+                .catch(err => {
+
+                    console.error(err);
+
+                    overlay.style.display = 'none';
+
+                    alert('Failed to update dashboard data.');
+
+                });
         }
     </script>
 
 </body>
 
-</html>
+</html>