From cdb96f25ad5a38c0df13488256ddc104a3ec4e2a Mon Sep 17 00:00:00 2001
From: mankiratt <smankirat526@gmail.com>
Date: Mon, 11 May 2026 21:56:05 +1000
Subject: [PATCH] Technical Task 2: Error & loading state integration across
 all admin pages

---
 .../HMI/ui/public/admin/admin-nodes.html      | 369 ++++---
 .../HMI/ui/public/admin/admin-request.html    | 422 ++++----
 .../HMI/ui/public/admin/api-explorer.html     |  42 +-
 .../HMI/ui/public/admin/cloud-compute.html    | 120 +--
 .../HMI/ui/public/admin/css/styles.min.css    |  97 +-
 .../HMI/ui/public/admin/dashboard.html        | 362 ++++---
 .../HMI/ui/public/admin/donations.html        | 424 ++++----
 .../HMI/ui/public/admin/feedback.html         | 988 +++++++++---------
 .../ui/public/admin/hmi-data-insights.html    | 506 +++++----
 .../ui/public/admin/js/admin-page-state.js    |  64 ++
 .../HMI/ui/public/admin/js/api-explorer.js    | 211 ++--
 .../HMI/ui/public/admin/notifications.html    | 138 ++-
 .../HMI/ui/public/admin/profile.html          | 134 ++-
 .../HMI/ui/public/admin/projects.html         | 107 +-
 .../HMI/ui/public/admin/projects.js           |  98 +-
 .../HMI/ui/public/admin/sensor-health.html    | 259 ++---
 .../admin/sensor_health/add-project.html      | 113 +-
 .../ui/public/admin/sensor_health/alerts.html |  76 +-
 .../ui/public/admin/sensor_health/charts.js   |  99 +-
 .../ui/public/admin/sensor_health/reboot.html | 106 +-
 .../ui/public/admin/sensor_health/script.js   | 326 ++++--
 .../public/admin/sensor_health/settings.html  | 103 +-
 .../HMI/ui/public/admin/template.html         |  94 +-
 23 files changed, 3001 insertions(+), 2257 deletions(-)
 create mode 100644 src/Components/HMI/ui/public/admin/js/admin-page-state.js
diff --git a/src/Components/HMI/ui/public/admin/admin-nodes.html b/src/Components/HMI/ui/public/admin/admin-nodes.html
index e4a9cab84..7cde506b6 100644
--- a/src/Components/HMI/ui/public/admin/admin-nodes.html
+++ b/src/Components/HMI/ui/public/admin/admin-nodes.html
@@ -5,11 +5,27 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Echo Admin - Node Network</title>
+
   <link rel="shortcut icon" type="image/png" href="/admin/images/logos/favicon.png" />
   <link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
-  <script type="text/javascript" src="https://kit.fontawesome.com/8aa980d912.js" crossorigin="anonymous"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.6/dist/dist/vis-network.min.css" />
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+    crossorigin="anonymous"
+  />
+  <script
+    type="text/javascript"
+    src="https://kit.fontawesome.com/8aa980d912.js"
+    crossorigin="anonymous"
+  ></script>
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.6/dist/dist/vis-network.min.css"
+  />
+
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
+
   <style>
     #network-container {
       width: 100%;
@@ -18,6 +34,7 @@
       background-color: #f8f9fa;
       border-radius: 8px;
     }
+
     .node-details {
       padding: 20px;
       background: white;
@@ -25,6 +42,7 @@
       box-shadow: 0 0 10px rgba(0,0,0,0.1);
       margin-top: 20px;
     }
+
     .component-card {
       margin-bottom: 15px;
       padding: 15px;
@@ -32,14 +50,17 @@
       border-radius: 8px;
       background: #f8f9fa;
     }
+
     .component-card h5 {
       margin: 0;
       color: #2a3547;
     }
+
     .component-card .properties {
       margin-top: 10px;
       font-size: 14px;
     }
+
     .property-item {
       display: flex;
       justify-content: space-between;
@@ -51,17 +72,20 @@
 </head>
 
 <body>
-  <!--  Body Wrapper -->
-  <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
-    data-sidebar-position="fixed" data-header-position="fixed">
-    <!-- Sidebar Start -->
+  <div
+    class="page-wrapper"
+    id="main-wrapper"
+    data-layout="vertical"
+    data-navbarbg="skin6"
+    data-sidebartype="full"
+    data-sidebar-position="fixed"
+    data-header-position="fixed"
+  >
     <div id="sidebar"></div>
-    <!--  Sidebar End -->
-    <!--  Main wrapper -->
+
     <div class="body-wrapper">
-      <!--  Header Start -->
       <div id="header"></div>
-      <!--  Header End -->
+
       <div class="container-fluid">
         <div class="admin-page-status">
           <div class="admin-error-banner d-none" role="alert" aria-live="polite">
@@ -73,20 +97,23 @@
               <i class="ti ti-x"></i>
             </button>
           </div>
-      
+
           <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
             <div class="spinner-border text-danger" aria-hidden="true"></div>
             <span class="admin-loading-spinner__text">Loading...</span>
           </div>
         </div>
+
         <div class="row">
           <div class="col-12">
             <div class="card">
               <div class="card-body">
                 <h5 class="card-title fw-semibold mb-4">Node Network</h5>
                 <div id="network-container"></div>
+
                 <div id="node-details" class="node-details" style="display: none;">
                   <h4 id="node-title" class="mb-4"></h4>
+
                   <div class="row">
                     <div class="col-md-6">
                       <div class="mb-3">
@@ -99,6 +126,7 @@ <h4 id="node-title" class="mb-4"></h4>
                         <strong>Location:</strong> <span id="node-location"></span>
                       </div>
                     </div>
+
                     <div class="col-md-6">
                       <div class="mb-3">
                         <strong>Custom Properties:</strong>
@@ -106,13 +134,14 @@ <h4 id="node-title" class="mb-4"></h4>
                       </div>
                     </div>
                   </div>
+
                   <h5 class="mt-4 mb-3">Components</h5>
                   <div id="node-components"></div>
                 </div>
               </div>
             </div>
+
             <h2>Detections</h2>
-            <!-- Displays List of Animal Detections -->
             <div class="markup_column" id="detections-container">
               <div class="detection-entry">
                 <div class="detection-animal">animal: </div>
@@ -121,9 +150,8 @@ <h2>Detections</h2>
                 <div class="detection-time">time: </div>
               </div>
             </div>
-            
+
             <h2>Nodes</h2>
-            <!-- Displays List of Nodes & their status -->
             <div class="markup_column" id="nodes-container">
               <div class="node-entry">
                 <div class="node-id">node id: </div>
@@ -136,9 +164,8 @@ <h2>Nodes</h2>
                 <div class="node-status">status: 🔴</div>
               </div>
             </div>
-            
+
             <h2>System Log</h2>
-            <!-- Displays List of System Events -->
             <div class="markup_column" id="systemlog-container">
               <div class="systemlog-entry">
                 <div class="systemlog-event">event:</div>
@@ -162,27 +189,74 @@ <h2>System Log</h2>
         </div>
       </div>
     </div>
+
     <div id="footer"></div>
   </div>
-  </div>
+
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript" src="/admin/js/sidebarmenu.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
+    crossorigin="anonymous"
+  ></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.6/dist/vis-network.min.js"></script>
+
   <script>
-    // Load header and sidebar components
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
+
     $(document).ready(function() {
-      $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
+      });
       $("#header").load("/admin/component/header-component.html");
       $("#footer").load("/admin/component/footer-component.html");
     });
 
-    // Network visualization (with graceful fallback)
+    function showNodeDetails(node) {
+      document.getElementById('node-details').style.display = 'block';
+      document.getElementById('node-title').textContent = node.name || 'Unknown Node';
+      document.getElementById('node-type').textContent = node.type || '';
+      document.getElementById('node-model').textContent = node.model || '';
+
+      const loc = node.location || {};
+      document.getElementById('node-location').textContent =
+        (loc.latitude !== undefined && loc.longitude !== undefined)
+          ? `${loc.latitude}, ${loc.longitude}`
+          : 'Unknown';
+
+      const propertiesDiv = document.getElementById('node-properties');
+      propertiesDiv.innerHTML = '';
+      const customProps = node.customProperties || {};
+      Object.entries(customProps).forEach(([key, value]) => {
+        propertiesDiv.innerHTML += `<div class="property-item"><span>${key}:</span> <span>${value}</span></div>`;
+      });
+
+      const componentsDiv = document.getElementById('node-components');
+      componentsDiv.innerHTML = '';
+      if (node.components && node.components.length > 0) {
+        node.components.forEach(component => {
+          const compProps = component.customProperties || {};
+          componentsDiv.innerHTML += `
+            <div class="component-card">
+              <h5>${component.type || ''} - ${component.model || ''}</h5>
+              <div class="properties">
+                ${Object.entries(compProps).map(([key, value]) => `
+                  <div class="property-item"><span>${key}:</span> <span>${value}</span></div>
+                `).join('')}
+              </div>
+            </div>
+          `;
+        });
+      } else {
+        componentsDiv.innerHTML = '<p>No components found.</p>';
+      }
+    }
+
     async function initNetwork() {
       const container = document.getElementById('network-container');
 
-      // Helper to build the vis network from a nodes array
       function buildNetwork(nodes) {
         const nodeData = nodes.map(node => ({
           id: node._id,
@@ -200,7 +274,10 @@ <h2>System Log</h2>
           }
         });
 
-        const data = { nodes: new vis.DataSet(nodeData), edges: new vis.DataSet(edges) };
+        const data = {
+          nodes: new vis.DataSet(nodeData),
+          edges: new vis.DataSet(edges)
+        };
 
         const options = {
           nodes: { shape: 'dot', size: 20, font: { size: 14 } },
@@ -210,167 +287,185 @@ <h2>System Log</h2>
             arduino: { color: { background: '#2196F3', border: '#1976D2' } },
             raspberry_pi: { color: { background: '#F44336', border: '#D32F2F' } }
           },
-          physics: { stabilization: true, barnesHut: { gravitationalConstant: -10000, springConstant: 0.002 } }
+          physics: {
+            stabilization: true,
+            barnesHut: { gravitationalConstant: -10000, springConstant: 0.002 }
+          }
         };
 
-        // clear previous contents
         container.innerHTML = '';
         return new vis.Network(container, data, options);
       }
 
+      pageState.hideError();
+      pageState.showLoading();
+
       try {
         let nodes = [];
+        let usedFallback = false;
+
         try {
           const controller = new AbortController();
           const timeoutId = setTimeout(() => controller.abort(), 4000);
-          const response = await fetch('http://localhost:9000/iot/nodes', { signal: controller.signal });
+
+          const response = await fetch('http://localhost:9000/iot/nodes', {
+            signal: controller.signal
+          });
+
           clearTimeout(timeoutId);
-          if (response.ok) {
-            nodes = await response.json();
-          } else {
-            console.warn('Nodes fetch returned status', response.status);
+
+          if (!response.ok) {
+            throw new Error(`Failed to fetch nodes: ${response.status}`);
           }
+
+          nodes = await response.json();
         } catch (fetchErr) {
           console.warn('Could not fetch nodes from backend:', fetchErr);
+          pageState.showError('Live node data is unavailable. Showing fallback network data.');
+          usedFallback = true;
         }
 
-        // If no nodes returned, use a local sample dataset so the UI isn't blank
         if (!nodes || nodes.length === 0) {
           nodes = [
-            { _id: '1', name: 'Gateway', type: 'master', model: 'G100', location: { latitude: 0, longitude: 0 }, customProperties: { ip: '192.168.1.1' }, components: [], connectedNodes: ['2', '3'] },
-            { _id: '2', name: 'Node A', type: 'arduino', model: 'A1', location: { latitude: 51.5, longitude: -0.12 }, customProperties: { battery: '85%' }, components: [{ type: 'PIR Sensor', model: 'PIR-1', customProperties: { range: '5m' } }], connectedNodes: [] },
-            { _id: '3', name: 'Node B', type: 'raspberry_pi', model: 'RPi4', location: { latitude: 51.51, longitude: -0.13 }, customProperties: { battery: '60%' }, components: [], connectedNodes: [] }
+            {
+              _id: '1',
+              name: 'Gateway',
+              type: 'master',
+              model: 'G100',
+              location: { latitude: 0, longitude: 0 },
+              customProperties: { ip: '192.168.1.1' },
+              components: [],
+              connectedNodes: ['2', '3']
+            },
+            {
+              _id: '2',
+              name: 'Node A',
+              type: 'arduino',
+              model: 'A1',
+              location: { latitude: 51.5, longitude: -0.12 },
+              customProperties: { battery: '85%' },
+              components: [
+                {
+                  type: 'PIR Sensor',
+                  model: 'PIR-1',
+                  customProperties: { range: '5m' }
+                }
+              ],
+              connectedNodes: []
+            },
+            {
+              _id: '3',
+              name: 'Node B',
+              type: 'raspberry_pi',
+              model: 'RPi4',
+              location: { latitude: 51.51, longitude: -0.13 },
+              customProperties: { battery: '60%' },
+              components: [],
+              connectedNodes: []
+            }
           ];
         }
 
         const network = buildNetwork(nodes);
 
-        // Show node details when clicked (prefer local data; fall back to backend lookup)
         network.on('click', async function(params) {
-          if (params.nodes && params.nodes.length > 0) {
-            const nodeId = params.nodes[0];
-            const local = (nodes || []).find(n => String(n._id) === String(nodeId));
-            if (local) {
-              showNodeDetails(local);
-              return;
-            }
-            try {
-              const resp = await fetch(`http://localhost:9000/iot/nodes/${nodeId}`);
-              if (resp.ok) {
-                const node = await resp.json();
-                showNodeDetails(node);
-              }
-            } catch (err) {
-              console.warn('Could not fetch node details for', nodeId, err);
-            }
-          }
-        });
+          if (!(params.nodes && params.nodes.length > 0)) return;
 
-      } catch (error) {
-        console.error('Error initializing network:', error);
-        // final fallback: render a simple placeholder message
-        container.innerHTML = '<div style="padding:30px;color:#666">Network visualization unavailable.</div>';
-      }
-    }
+          const nodeId = params.nodes[0];
+          const local = (nodes || []).find(n => String(n._id) === String(nodeId));
 
-    function showNodeDetails(node) {
-      document.getElementById('node-details').style.display = 'block';
-      document.getElementById('node-title').textContent = node.name || 'Unknown Node';
-      document.getElementById('node-type').textContent = node.type || '';
-      document.getElementById('node-model').textContent = node.model || '';
-      const loc = node.location || {};
-      document.getElementById('node-location').textContent = (loc.latitude !== undefined && loc.longitude !== undefined) ? `${loc.latitude}, ${loc.longitude}` : 'Unknown';
-
-      // Show custom properties
-      const propertiesDiv = document.getElementById('node-properties');
-      propertiesDiv.innerHTML = '';
-      const customProps = node.customProperties || {};
-      Object.entries(customProps).forEach(([key, value]) => {
-        propertiesDiv.innerHTML += `<div class="property-item"><span>${key}:</span> <span>${value}</span></div>`;
-      });
+          if (local) {
+            showNodeDetails(local);
+            return;
+          }
 
-      // Show components
-      const componentsDiv = document.getElementById('node-components');
-      componentsDiv.innerHTML = '';
-      if (node.components && node.components.length > 0) {
-        node.components.forEach(component => {
-          const compProps = component.customProperties || {};
-          componentsDiv.innerHTML += `
-            <div class="component-card">
-              <h5>${component.type || ''} - ${component.model || ''}</h5>
-              <div class="properties">
-                ${Object.entries(compProps).map(([key, value]) => `
-                  <div class="property-item"><span>${key}:</span> <span>${value}</span></div>
-                `).join('')}
-              </div>
-            </div>
-          `;
-        });
-      } else {
-        componentsDiv.innerHTML = '<p>No components found.</p>';
-      }
-    }
+          pageState.hideError();
+          pageState.showLoading();
 
-          // Function to add a Detection Entry in the Notifications Section 
-      function addDetectionEntry(detectionData){
+          try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 4000);
 
-        // placeholder, modify once backend + frontend is fully connected 
-        const entryContainer = document.createElement("div");
-        const detectedAnimal = document.createElement("div");
-        const detectedConfidence = document.createElement("div");
-        const detectedLocation = document.createElement("div");
-        const detectedTime = document.createElement("div");
+            const resp = await fetch(`http://localhost:9000/iot/nodes/${nodeId}`, {
+              signal: controller.signal
+            });
 
-        entryContainer.classList.add("detection-entry");
-        detectedAnimal.classList.add("detection-animal");
-        detectedConfidence.classList.add("detection-confidence");
-        detectedLocation.classList.add("detection-location");
-        detectedTime.classList.add("detection-time");
+            clearTimeout(timeoutId);
 
-        detectedAnimal.text = `Animal: `;
-        detectedConfidence.text = `Confidence: `;
-        detectedLocation.text = `Location: `;
-        detectedTime.text = `Time: `;
+            if (!resp.ok) {
+              throw new Error(`Failed to fetch node details: ${resp.status}`);
+            }
 
-        entryContainer.append(detectedAnimal, detectedConfidence, detectedLocation, detectedTime);
+            const node = await resp.json();
+            showNodeDetails(node);
+          } catch (err) {
+            console.warn('Could not fetch node details for', nodeId, err);
+            pageState.showError('Failed to load node details.');
+          } finally {
+            pageState.hideLoading();
+          }
+        });
 
-        // adds the detection entry as a child of the detections container 
-        const detectionsContainer = document.querySelector("#detections-container");
-        detectionsContainer.append(entryContainer);
+        if (!usedFallback) {
+          pageState.hideError();
+        }
 
+      } catch (error) {
+        console.error('Error initializing network:', error);
+        container.innerHTML = '<div style="padding:30px;color:#666">Network visualization unavailable.</div>';
+        pageState.showError('Network visualization unavailable.');
+      } finally {
+        pageState.hideLoading();
       }
+    }
 
+    function addDetectionEntry(detectionData) {
+      const entryContainer = document.createElement("div");
+      const detectedAnimal = document.createElement("div");
+      const detectedConfidence = document.createElement("div");
+      const detectedLocation = document.createElement("div");
+      const detectedTime = document.createElement("div");
 
-      // Function to add Nodes Data in the Notifications Section 
-      function populateNodesData(nodesData){
+      entryContainer.classList.add("detection-entry");
+      detectedAnimal.classList.add("detection-animal");
+      detectedConfidence.classList.add("detection-confidence");
+      detectedLocation.classList.add("detection-location");
+      detectedTime.classList.add("detection-time");
 
-        // placeholder, modify once backend + frontend is fully connected 
-        const nodeEntryContainer = document.createElement("div");
-        const nodeID = document.createElement("div");
-        const nodeDevice = document.createElement("div");
-        const nodeStatus = document.createElement("div");
+      detectedAnimal.text = `Animal: `;
+      detectedConfidence.text = `Confidence: `;
+      detectedLocation.text = `Location: `;
+      detectedTime.text = `Time: `;
 
-        nodeEntryContainer.classList.add("node-entry");
-        nodeID.classList.add("node-id");
-        nodeDevice.classList.add("node-device");
-        nodeStatus.classList.add("node-status");
+      entryContainer.append(detectedAnimal, detectedConfidence, detectedLocation, detectedTime);
 
-        nodeID.text = `Node ID:`;
-        nodeDevice.text = `Node Device:`;
-        nodeStatus.text = `Node Status:`;
+      const detectionsContainer = document.querySelector("#detections-container");
+      detectionsContainer.append(entryContainer);
+    }
 
-        nodeEntryContainer.append(nodeID, nodeDevice, nodeStatus);
+    function populateNodesData(nodesData) {
+      const nodeEntryContainer = document.createElement("div");
+      const nodeID = document.createElement("div");
+      const nodeDevice = document.createElement("div");
+      const nodeStatus = document.createElement("div");
 
-        const nodesContainer = document.querySelector("#nodes-container");
-        nodesContainer.append(nodeEntryContainer);
+      nodeEntryContainer.classList.add("node-entry");
+      nodeID.classList.add("node-id");
+      nodeDevice.classList.add("node-device");
+      nodeStatus.classList.add("node-status");
 
-      }
+      nodeID.text = `Node ID:`;
+      nodeDevice.text = `Node Device:`;
+      nodeStatus.text = `Node Status:`;
 
+      nodeEntryContainer.append(nodeID, nodeDevice, nodeStatus);
 
+      const nodesContainer = document.querySelector("#nodes-container");
+      nodesContainer.append(nodeEntryContainer);
+    }
 
-    // Initialize network when page loads
     window.addEventListener('load', initNetwork);
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/admin-request.html b/src/Components/HMI/ui/public/admin/admin-request.html
index 639724350..df025bd5e 100644
--- a/src/Components/HMI/ui/public/admin/admin-request.html
+++ b/src/Components/HMI/ui/public/admin/admin-request.html
@@ -5,18 +5,22 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Echo Admin</title>
+
   <link rel="shortcut icon" type="image/png" href="/admin/images/logos/favicon.png" />
   <link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
-    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
-  <script type="text/javascript" src="https://kit.fontawesome.com/8aa980d912.js" crossorigin="anonymous"></script>
 
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
-    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+    crossorigin="anonymous"
+  />
 
+  <script type="text/javascript" src="https://kit.fontawesome.com/8aa980d912.js" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
-  <!--- Requests Page Styling -->
+
+  <!-- Requests Page Styling -->
   <link type="text/css" rel="stylesheet" href="./css/requests.css">
+
   <!-- jQuery -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@@ -25,24 +29,33 @@
 
   <script type="text/javascript" src="/admin/js/sidebarmenu.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
-  <!-- <script type="text/javascript" src="../../node_modules/apexcharts/dist/apexcharts.min.js"></script> -->
   <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" />
   <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
-  <script type="text/javascript" src="./admin/js/dashboard.js"></script>
-  <script type="text/javascript" src="./admin/js/app.min.js"></script>
+
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
 </head>
 
 <body>
-  <!--  Body Wrapper -->
-  <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
-    data-sidebar-position="fixed" data-header-position="fixed">
+  <!-- Body Wrapper -->
+  <div
+    class="page-wrapper"
+    id="main-wrapper"
+    data-layout="vertical"
+    data-navbarbg="skin6"
+    data-sidebartype="full"
+    data-sidebar-position="fixed"
+    data-header-position="fixed"
+  >
     <!-- Sidebar Start -->
     <div id="sidebar"></div>
-    <!--  Sidebar End -->
-    <!--  Main wrapper -->
+    <!-- Sidebar End -->
+
+    <!-- Main wrapper -->
     <div class="body-wrapper">
       <div id="header"></div>
+
       <div class="container-fluid">
         <div class="admin-page-status">
           <div class="admin-error-banner d-none" role="alert" aria-live="polite">
@@ -54,18 +67,17 @@
               <i class="ti ti-x"></i>
             </button>
           </div>
-      
+
           <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
             <div class="spinner-border text-danger" aria-hidden="true"></div>
             <span class="admin-loading-spinner__text">Loading...</span>
           </div>
         </div>
+
         <div class="card">
           <div class="card-body">
             <div class="screen-content">
-
               <h1>REQUESTS</h1>
-              <!-- <i class="screen-icon fa-brands fa-codepen"></i> -->
 
               <div class="screen-user">
                 <table>
@@ -82,163 +94,166 @@ <h1>REQUESTS</h1>
                       <th>Status</th>
                     </tr>
                   </thead>
-                  <tbody id="data-body">
-                  </tbody>
+                  <tbody id="data-body"></tbody>
                 </table>
               </div>
             </div>
           </div>
         </div>
       </div>
+
       <div id="footer"></div>
-      </div>
     </div>
+  </div>
 
-
-    <script type="text/javascript">
-      $(document).ready(function () {
-        // Use jQuery's load() method to load component contents
-          console.log("Start!")
-          $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
-          $("#header").load("/admin/component/header-component.html");
-          $("#footer").load("/admin/component/footer-component.html");
+  <script type="text/javascript">
+    $(document).ready(function () {
+      console.log("Start!");
+      $("#sidebar").load("/admin/component/sidebar-component.html", function () {
+        $.getScript('/admin/js/sidebarmenu.js');
       });
-    </script>
-
-
-    <script>
-
-      function createDropdown(requestId, animal, modified) {
-        const dropdown = document.createElement('div');
-        dropdown.classList.add('dropdown');
-
-        const button = document.createElement('button');
-        button.textContent = 'Pending';
-        dropdown.appendChild(button);
-
-        const options = document.createElement('div');
-        options.classList.add('dropdown-options');
-        options.innerHTML = `
+      $("#header").load("/admin/component/header-component.html");
+      $("#footer").load("/admin/component/footer-component.html");
+    });
+  </script>
+
+  <script>
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
+
+    function createDropdown(requestId, animal, modified) {
+      const dropdown = document.createElement('div');
+      dropdown.classList.add('dropdown');
+
+      const button = document.createElement('button');
+      button.textContent = 'Pending';
+      dropdown.appendChild(button);
+
+      const options = document.createElement('div');
+      options.classList.add('dropdown-options');
+      options.innerHTML = `
         <button class="approve-btn" data-request-id="${requestId}" data-animal="${animal}" data-to="${modified}">Approve</button>
         <button class="deny-btn" data-request-id="${requestId}">Deny</button>
       `;
-        dropdown.appendChild(options);
-
-        return dropdown;
-      }
+      dropdown.appendChild(options);
 
-      const dataBody = document.getElementById('data-body');
-
-
-      //Update the table
-      function updateTable() {
-        fetch('/api/requests')
-          .then(response => response.json())
-          .then(data => {
-            data.forEach(item => {
-              const row = document.createElement('tr');
-              row.innerHTML = `
-                  <td>${item._id}</td>
-                  <td>
-                 
-                  <div class="dropdown">
-                    <button class="dropdown-toggle btn-small" data-user-id="${item.username}">${item.username}</button>
-                    <div class="dropdown-menu" style="display: none;">
-                        <button class="dropdown-item suspend-btn" data-user-id="${item.username}">Suspend</button>
-                        <button class="dropdown-item ban-btn" data-user-id="${item.username}">Ban</button>
-                    </div>
-                    </div>
-                  </td>
-
-                  <td>${item.animal}</td>
-                  <td>${item.requestingToChange}</td>
-                  <td>${item.initial}</td>
-                  <td>${item.modified}</td>
-                  <td>${item.source}</td>
-                  <td>${item.date}</td>
-  
-                  <td></td> <!-- Placeholder for status cell -->
-  
-               `;
-              dataBody.appendChild(row);
-
-              // Get the newly created row's status cell
-              const statusCell = row.querySelector('td:last-child');
-
-              if (item.status === 'pending') {
-                const dropdown = createDropdown(item._id, item.animal, item.modified);
-                statusCell.appendChild(dropdown);
-              } else {
-                statusCell.textContent = item.status;
-              }
-            });
-          })
-          .catch(error => {
-            console.error('Error fetching data:', error);
-          });
-      }
-
-      //Clear Table
-      function clearTable() {
-        const dataBody = document.getElementById('data-body');
-        dataBody.innerHTML = ''; // Remove all rows
-      }
+      return dropdown;
+    }
 
-      updateTable();
+    const dataBody = document.getElementById('data-body');
 
-      dataBody.addEventListener('click', event => {
-        const target = event.target;
+    function clearTable() {
+      dataBody.innerHTML = '';
+    }
 
+    async function updateTable() {
+      pageState.hideError();
+      pageState.showLoading();
 
+      try {
+        clearTable();
 
-      });
+        const response = await fetch('/api/requests');
 
-      // Close dropdowns when clicking elsewhere on the page
-      document.addEventListener('click', function (event) {
-        if (!event.target.closest('.dropdown')) {
-          document.querySelectorAll('.dropdown-menu').forEach(function (element) {
-            element.style.display = 'none';
-          });
+        if (!response.ok) {
+          throw new Error(`Status ${response.status}`);
         }
-      }, true);
 
-      dataBody.addEventListener('click', event => {
-        const target = event.target;
-        const requestId = target.getAttribute('data-request-id');
-        const animal = target.getAttribute('data-animal');
-        const modified = target.getAttribute('data-to');
-
-        if (target.classList.contains('dropdown-toggle')) {
-          const dropdownMenu = target.nextElementSibling;
-          dropdownMenu.style.display = dropdownMenu.style.display === 'none' ? 'block' : 'none';
-        }
-        else if (target.classList.contains('dropdown-item')) {
-          const userId = target.getAttribute('data-user-id');
-          if (target.classList.contains('suspend-btn')) {
-            console.log("Suspended ", userId);
-            //TODO: Add logic for suspending user
-            // suspendUser(userId);
-          } else if (target.classList.contains('ban-btn')) {
-            console.log("Banned ", userId);
-            //TODO: Add logic for banning user
-            // banUser(userId);
+        const data = await response.json();
+
+        data.forEach(item => {
+          const row = document.createElement('tr');
+
+          row.innerHTML = `
+            <td>${item._id}</td>
+            <td>
+              <div class="dropdown">
+                <button class="dropdown-toggle btn-small" data-user-id="${item.username}">
+                  ${item.username}
+                </button>
+                <div class="dropdown-menu" style="display: none;">
+                  <button class="dropdown-item suspend-btn" data-user-id="${item.username}">Suspend</button>
+                  <button class="dropdown-item ban-btn" data-user-id="${item.username}">Ban</button>
+                </div>
+              </div>
+            </td>
+            <td>${item.animal}</td>
+            <td>${item.requestingToChange}</td>
+            <td>${item.initial}</td>
+            <td>${item.modified}</td>
+            <td>${item.source}</td>
+            <td>${item.date}</td>
+            <td></td>
+          `;
+
+          dataBody.appendChild(row);
+
+          const statusCell = row.querySelector('td:last-child');
+
+          if (item.status === 'pending') {
+            const dropdown = createDropdown(item._id, item.animal, item.modified);
+            statusCell.appendChild(dropdown);
+          } else {
+            statusCell.textContent = item.status;
           }
-          // Close dropdown after action
-          target.closest('.dropdown-menu').style.display = 'none';
-        }
+        });
 
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        pageState.showError("Failed to load requests. Please try again.");
+      } finally {
+        pageState.hideLoading();
+      }
+    }
 
+    updateTable();
 
-        if (target.classList.contains('approve-btn')) {
-          console.log(`Approving request...`);
+    // Close dropdowns when clicking elsewhere
+    document.addEventListener('click', function (event) {
+      if (!event.target.closest('.dropdown')) {
+        document.querySelectorAll('.dropdown-menu').forEach(function (element) {
+          element.style.display = 'none';
+        });
+      }
+    }, true);
+
+    dataBody.addEventListener('click', async event => {
+      const target = event.target;
+      const requestId = target.getAttribute('data-request-id');
+      const animal = target.getAttribute('data-animal');
+      const modified = target.getAttribute('data-to');
+
+      if (target.classList.contains('dropdown-toggle')) {
+        const dropdownMenu = target.nextElementSibling;
+        dropdownMenu.style.display = dropdownMenu.style.display === 'none' ? 'block' : 'none';
+        return;
+      }
 
-          console.log("Request ID select:   ", requestId)
-          console.log("Changing status to:  ", modified)
+      if (target.classList.contains('dropdown-item')) {
+        const userId = target.getAttribute('data-user-id');
+
+        if (target.classList.contains('suspend-btn')) {
+          console.log("Suspended ", userId);
+          // TODO: suspend user logic
+        } else if (target.classList.contains('ban-btn')) {
+          console.log("Banned ", userId);
+          // TODO: ban user logic
+        }
 
+        target.closest('.dropdown-menu').style.display = 'none';
+        return;
+      }
 
+      if (target.classList.contains('approve-btn')) {
+        pageState.hideError();
+        pageState.showLoading();
 
+        try {
+          console.log(`Approving request...`);
+          console.log("Request ID select:   ", requestId);
+          console.log("Changing status to:  ", modified);
 
-          fetch(`/api/updateConservationStatus/${animal}`, {
+          const conservationResponse = await fetch(`/api/updateConservationStatus/${animal}`, {
             method: 'PATCH',
             headers: {
               'Content-Type': 'application/json'
@@ -246,31 +261,13 @@ <h1>REQUESTS</h1>
             body: JSON.stringify({
               status: modified
             })
-          })
-            .then(response => {
-              if (!response.ok) {
-                throw new Error('Network response was not ok');
-              }
-              // Return response text if the content type is not JSON
-              const contentType = response.headers.get('content-type');
-              if (contentType && contentType.indexOf('application/json') !== -1) {
-                return response.json();
-              } else {
-                return response.text();
-              }
-            })
-            .then(data => {
-              // Handle the response data
-              console.log('Request status updated:', data);
-              clearTable();
-              updateTable();
-            })
-            .catch(error => {
-              console.error('Error updating request status:', error);
-            });
+          });
+
+          if (!conservationResponse.ok) {
+            throw new Error('Failed to update conservation status');
+          }
 
-          //Perform API call to update the status
-          fetch(`/api/requests/${requestId}`, {
+          const requestResponse = await fetch(`/api/requests/${requestId}`, {
             method: 'PATCH',
             headers: {
               'Content-Type': 'application/json'
@@ -278,37 +275,34 @@ <h1>REQUESTS</h1>
             body: JSON.stringify({
               status: 'approved'
             })
-          })
-            .then(response => {
-              if (!response.ok) {
-                throw new Error('Network response was not ok');
-              }
-              // Return response text if the content type is not JSON
-              const contentType = response.headers.get('content-type');
-              if (contentType && contentType.indexOf('application/json') !== -1) {
-                return response.json();
-              } else {
-                return response.text();
-              }
-            })
-            .then(data => {
-              // Handle the response data
-              console.log('Request status updated:', data);
-            })
-            .catch(error => {
-              console.error('Error updating request status:', error);
-              return;
-            });
+          });
+
+          if (!requestResponse.ok) {
+            throw new Error('Failed to approve request');
+          }
 
+          clearTable();
+          await updateTable();
 
-        } else if (target.classList.contains('deny-btn')) {
+        } catch (error) {
+          console.error('Error updating request status:', error);
+          pageState.showError("Failed to approve request.");
+        } finally {
+          pageState.hideLoading();
+        }
 
-          console.log(`Denying request...`);
-          console.log("Request ID select:   ", requestId)
+        return;
+      }
 
+      if (target.classList.contains('deny-btn')) {
+        pageState.hideError();
+        pageState.showLoading();
 
-          //Perform API call to update the status
-          fetch(`/api/requests/${requestId}`, {
+        try {
+          console.log(`Denying request...`);
+          console.log("Request ID select:   ", requestId);
+
+          const response = await fetch(`/api/requests/${requestId}`, {
             method: 'PATCH',
             headers: {
               'Content-Type': 'application/json'
@@ -316,34 +310,24 @@ <h1>REQUESTS</h1>
             body: JSON.stringify({
               status: 'denied'
             })
-          })
-            .then(response => {
-              if (!response.ok) {
-                throw new Error('Network response was not ok');
-              }
-              // Return response text if the content type is not JSON
-              const contentType = response.headers.get('content-type');
-              if (contentType && contentType.indexOf('application/json') !== -1) {
-                return response.json();
-              } else {
-                return response.text();
-              }
-            })
-            .then(data => {
-              // Handle the response data
-              console.log('Request status updated:', data);
-            })
-            .catch(error => {
-              console.error('Error updating request status:', error);
-              return;
-            });
-          clearTable();
-          updateTable();
-        }
-      })
+          });
+
+          if (!response.ok) {
+            throw new Error('Failed to deny request');
+          }
 
-    </script>
+          clearTable();
+          await updateTable();
 
+        } catch (error) {
+          console.error('Error updating request status:', error);
+          pageState.showError("Failed to deny request.");
+        } finally {
+          pageState.hideLoading();
+        }
+      }
+    });
+  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/api-explorer.html b/src/Components/HMI/ui/public/admin/api-explorer.html
index 547f7bc0f..232fa230d 100644
--- a/src/Components/HMI/ui/public/admin/api-explorer.html
+++ b/src/Components/HMI/ui/public/admin/api-explorer.html
@@ -9,32 +9,28 @@
   <link rel="shortcut icon" type="image/png" href="/admin/images/logos/favicon.png" />
   <link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />
 
-  <!-- Bootstrap -->
   <link
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
     rel="stylesheet"
   />
 
-  <!-- Icons -->
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
   />
 
-  <!-- jQuery -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
-  <!-- Sidebar + App JS -->
   <script src="/admin/js/sidebarmenu.js"></script>
   <script src="/admin/js/app.min.js"></script>
 
-  <!-- Simplebar -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" />
   <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
+
+  <script src="/admin/js/admin-page-state.js"></script>
 </head>
 
 <body>
-  <!-- Page Wrapper -->
   <div
     class="page-wrapper"
     id="main-wrapper"
@@ -44,16 +40,29 @@
     data-sidebar-position="fixed"
     data-header-position="fixed"
   >
-    <!-- Sidebar -->
     <div id="sidebar"></div>
 
-    <!-- Main Content -->
     <div class="body-wrapper">
       <div id="header"></div>
 
       <div class="container-fluid">
+        <div class="admin-page-status">
+          <div class="admin-error-banner d-none" role="alert" aria-live="polite">
+            <div class="admin-error-banner__content">
+              <i class="ti ti-alert-circle"></i>
+              <span>Something went wrong while loading this page.</span>
+            </div>
+            <button type="button" class="admin-error-banner__dismiss" aria-label="Dismiss error message">
+              <i class="ti ti-x"></i>
+            </button>
+          </div>
+
+          <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
+            <div class="spinner-border text-danger" aria-hidden="true"></div>
+            <span class="admin-loading-spinner__text">Loading...</span>
+          </div>
+        </div>
 
-        <!-- Header Row -->
         <div class="d-flex align-items-start justify-content-between flex-wrap gap-2 mb-3">
           <div>
             <h5 class="fw-semibold mb-1">API Explorer</h5>
@@ -69,11 +78,8 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
           </div>
         </div>
 
-        <!-- Main Card -->
         <div class="card">
           <div class="card-body">
-
-            <!-- Endpoint Builder -->
             <div class="row g-3 mb-3">
               <div class="col-12 col-lg-3">
                 <label class="form-label">Start (epoch)</label>
@@ -103,16 +109,12 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
               </div>
             </div>
 
-            <!-- Action Buttons -->
             <div class="d-flex gap-2 flex-wrap mb-3">
               <button class="btn btn-primary" id="testBtn">Test</button>
               <button class="btn btn-outline-secondary" id="clearBtn">Clear Output</button>
             </div>
 
-            <!-- Content Row -->
             <div class="row g-3">
-
-              <!-- Endpoint List -->
               <div class="col-12 col-lg-4">
                 <div class="fw-semibold mb-2">Available now</div>
                 <div class="list-group mb-3">
@@ -142,7 +144,6 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
                 </div>
               </div>
 
-              <!-- Response -->
               <div class="col-12 col-lg-8">
                 <div class="fw-semibold mb-2">Response</div>
                 <pre
@@ -151,7 +152,6 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
                   style="min-height: 320px; overflow:auto;"
                 >Click "Test" to send a request.</pre>
               </div>
-
             </div>
           </div>
         </div>
@@ -160,7 +160,6 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
     </div>
   </div>
 
-  <!-- Load sidebar / header / footer -->
   <script type="text/javascript">
     $(document).ready(function () {
       $("#sidebar").load("/admin/component/sidebar-component.html", function () {
@@ -171,9 +170,8 @@ <h5 class="fw-semibold mb-1">API Explorer</h5>
     });
   </script>
 
-  <!-- Page Logic -->
-  <script src="./js/api-explorer.js"></script>
+  <script src="/admin/js/api-explorer.js"></script>
 
   <div id="footer"></div>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/cloud-compute.html b/src/Components/HMI/ui/public/admin/cloud-compute.html
index b01dfee53..78b58c922 100644
--- a/src/Components/HMI/ui/public/admin/cloud-compute.html
+++ b/src/Components/HMI/ui/public/admin/cloud-compute.html
@@ -4,19 +4,17 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Cloud compute</title>
+  <title>Cloud Compute</title>
+
   <link rel="shortcut icon" type="image/png" href="/admin/images/logos/favicon.png" />
   <link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />
 
-  <!-- Bootstrap CSS -->
   <link
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
     rel="stylesheet"
-    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
     crossorigin="anonymous"
   />
 
-  <!-- Font Awesome (icons) -->
   <script
     type="text/javascript"
     src="https://kit.fontawesome.com/8aa980d912.js"
@@ -28,7 +26,6 @@
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
   />
 
-  <!-- jQuery + daterangepicker -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
   <link
     rel="stylesheet"
@@ -41,26 +38,22 @@
     src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"
   ></script>
 
-  <!-- Existing Echo admin JS -->
   <script type="text/javascript" src="/admin/js/sidebarmenu.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
 
-  <!-- ApexCharts (for graphs) -->
   <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 
-  <!-- Simplebar -->
   <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"
   />
   <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
 
-  <!-- Existing dashboard JS -->
-  <script type="text/javascript" src="/admin/js/dashboard.js"></script>
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
 </head>
 
 <body>
-  <!--  Body Wrapper -->
   <div
     class="page-wrapper"
     id="main-wrapper"
@@ -70,15 +63,33 @@
     data-sidebar-position="fixed"
     data-header-position="fixed"
   >
-    <!-- Sidebar Start -->
     <div id="sidebar"></div>
-    <!--  Sidebar End -->
 
-    <!--  Main wrapper -->
     <div class="body-wrapper">
       <div id="header"></div>
 
       <div class="container-fluid">
+        <!-- Shared page status UI -->
+        <div class="admin-page-status">
+          <div class="admin-error-banner d-none" role="alert" aria-live="polite">
+            <div class="admin-error-banner__content">
+              <i class="ti ti-alert-circle"></i>
+              <span>Something went wrong while loading this page.</span>
+            </div>
+            <button
+              type="button"
+              class="admin-error-banner__dismiss"
+              aria-label="Dismiss error message"
+            >
+              <i class="ti ti-x"></i>
+            </button>
+          </div>
+
+          <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
+            <div class="spinner-border text-danger" aria-hidden="true"></div>
+            <span class="admin-loading-spinner__text">Loading...</span>
+          </div>
+        </div>
 
         <!-- Page Title -->
         <div class="row">
@@ -95,41 +106,25 @@ <h3 class="fw-semibold mb-4">Cloud Compute Management</h3>
                 <h6 class="fw-semibold mb-3">Compute Metrics</h6>
 
                 <div class="row">
-                  <!-- CPU -->
                   <div class="col-12 col-md-4 mb-3 mb-md-0">
                     <p class="text-muted mb-1">CPU Usage</p>
                     <h3 id="cpu-usage-value" class="fw-semibold mb-1">45%</h3>
-                    <p id="cpu-trend-text" class="text-muted mb-0">
-                      Trend: Rising ↑
-                    </p>
+                    <p id="cpu-trend-text" class="text-muted mb-0">Trend: Rising ↑</p>
                   </div>
 
-                  <!-- Memory -->
                   <div class="col-12 col-md-4 mb-3 mb-md-0">
                     <p class="text-muted mb-1">Memory Load</p>
-                    <h3 id="memory-usage-value" class="fw-semibold mb-1">
-                      6 / 16 GB
-                    </h3>
-                    <p id="memory-load-text" class="text-muted mb-0">
-                      Avg load: Medium
-                    </p>
+                    <h3 id="memory-usage-value" class="fw-semibold mb-1">6 / 16 GB</h3>
+                    <p id="memory-load-text" class="text-muted mb-0">Avg load: Medium</p>
                   </div>
 
-                  <!-- Storage -->
                   <div class="col-12 col-md-4">
                     <p class="text-muted mb-1">Storage Capacity</p>
-                    <h3 id="storage-usage-value" class="fw-semibold mb-1">
-                      1.3 / 3 TB
-                    </h3>
-                    <p id="storage-growth-text" class="text-muted mb-0">
-                      Growth: 8% weekly
-                    </p>
-                    <p id="storage-forecast-text" class="text-muted mb-0">
-                      Forecast: Full in 3 months
-                    </p>
+                    <h3 id="storage-usage-value" class="fw-semibold mb-1">1.3 / 3 TB</h3>
+                    <p id="storage-growth-text" class="text-muted mb-0">Growth: 8% weekly</p>
+                    <p id="storage-forecast-text" class="text-muted mb-0">Forecast: Full in 3 months</p>
                   </div>
                 </div>
-
               </div>
             </div>
           </div>
@@ -143,20 +138,14 @@ <h3 id="storage-usage-value" class="fw-semibold mb-1">
                 <h6 class="fw-semibold mb-3">Cost &amp; Billing Forecast</h6>
 
                 <div class="row align-items-stretch">
-                  <!-- Cost numbers -->
                   <div class="col-12 col-md-6 mb-3 mb-md-0">
                     <p class="text-muted mb-1">Current Monthly Spending</p>
-                    <h4 id="current-cost-amount" class="fw-semibold mb-3">
-                      $315.06 AUD
-                    </h4>
+                    <h4 id="current-cost-amount" class="fw-semibold mb-3">$315.06 AUD</h4>
 
                     <p class="text-muted mb-1">Estimated End-of-Month Cost</p>
-                    <h4 id="forecast-cost-amount" class="fw-semibold mb-0">
-                      $530.18 AUD
-                    </h4>
+                    <h4 id="forecast-cost-amount" class="fw-semibold mb-0">$530.18 AUD</h4>
                   </div>
 
-                  <!-- Cost Chart Placeholder -->
                   <div class="col-12 col-md-6 d-flex align-items-center">
                     <div class="w-100">
                       <p class="text-muted mb-2">Cost Over Time</p>
@@ -173,8 +162,7 @@ <h4 id="forecast-cost-amount" class="fw-semibold mb-0">
                       </div>
                     </div>
                   </div>
-
-                </div> <!-- row -->
+                </div>
               </div>
             </div>
           </div>
@@ -209,53 +197,43 @@ <h6 class="fw-semibold mb-3">CPU / Memory / Storage Usage Over Time</h6>
           <div class="col-12 mb-4">
             <div class="card">
               <div class="card-body d-flex flex-wrap gap-2">
-                <button
-                  type="button"
-                  class="btn btn-primary"
-                  id="btn-scale-up"
-                >
+                <button type="button" class="btn btn-primary" id="btn-scale-up">
                   Scale Up Resources
                 </button>
 
-                <button
-                  type="button"
-                  class="btn btn-outline-primary"
-                  id="btn-scale-down"
-                >
+                <button type="button" class="btn btn-outline-primary" id="btn-scale-down">
                   Scale Down Resources
                 </button>
 
-                <button
-                  type="button"
-                  class="btn btn-outline-secondary"
-                  id="btn-customise-alerts"
-                >
+                <button type="button" class="btn btn-outline-secondary" id="btn-customise-alerts">
                   Customise Alerts
                 </button>
               </div>
             </div>
           </div>
         </div>
+      </div>
 
-      </div> <!-- /container-fluid -->
       <div id="footer"></div>
-      </div>
-    </div> <!-- /body-wrapper -->
-  </div> <!-- /page-wrapper -->
+    </div>
+  </div>
 
-  <!-- Load sidebar + header -->
   <script type="text/javascript">
     $(document).ready(function() {
       console.log("Start!");
-      $("#sidebar").load("/admin/component/sidebar-component.html");
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
+      });
       $("#header").load("/admin/component/header-component.html");
       $("#footer").load("/admin/component/footer-component.html");
     });
-  </script>
 
-  <!-- Cloud Compute page JS (fake data + charts + buttons) -->
-  <script src="./admin/js/cloud-compute.js"></script>
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
+  </script>
 
+  <!-- Cloud Compute page JS -->
+  <script type="text/javascript" src="/admin/js/cloud-compute.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/css/styles.min.css b/src/Components/HMI/ui/public/admin/css/styles.min.css
index 2b12e2254..ab6c4fecc 100644
--- a/src/Components/HMI/ui/public/admin/css/styles.min.css
+++ b/src/Components/HMI/ui/public/admin/css/styles.min.css
@@ -16875,85 +16875,130 @@ ul {
 
    .admin-page-status {
     margin-bottom: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
   
+  /* ---- Error Banner ---- */
+  
   .admin-error-banner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     width: 100%;
-    padding: 14px 18px;
+    max-width: 600px;
+    padding: 14px 16px 14px 20px;
     margin-bottom: 16px;
-    background-color: #fbf2ef;
-    border: 1px solid #fa896b;
-    border-radius: 7px;
-    color: #c86e56;
-    box-shadow: rgba(145, 158, 171, 0.08) 0px 4px 12px -2px;
+    background-color: #fff2f2;
+    border: 1px solid #ffb3b3;
+    border-left: 4px solid #e03131;
+    border-radius: 9px;
+    color: #c92a2a;
+    box-shadow:
+      rgba(224, 49, 49, 0.12) 0px 4px 16px,
+      rgba(145, 158, 171, 0.06) 0px 1px 4px;
+    animation: adminBannerFadeIn 0.25s ease;
   }
   
   .admin-error-banner__content {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
+    min-width: 0;
   }
   
   .admin-error-banner__content i {
-    font-size: 18px;
+    font-size: 20px;
     line-height: 1;
+    flex-shrink: 0;
+    color: #e03131;
   }
   
   .admin-error-banner__content span {
     font-size: 14px;
-    font-weight: 600;
-    line-height: 1.4;
+    font-weight: 700;
+    line-height: 1.45;
+    color: #c92a2a;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   
   .admin-error-banner__dismiss {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
     padding: 0;
     border: none;
     border-radius: 6px;
     background: transparent;
-    color: #c86e56;
+    color: #e03131;
     cursor: pointer;
+    flex-shrink: 0;
+    opacity: 0.55;
+    transition: opacity 0.15s ease, background-color 0.15s ease;
   }
   
   .admin-error-banner__dismiss i {
-    font-size: 18px;
+    font-size: 15px;
     line-height: 1;
   }
   
   .admin-error-banner__dismiss:hover {
-    background-color: rgba(250, 137, 107, 0.12);
+    background-color: rgba(224, 49, 49, 0.10);
+    opacity: 1;
   }
   
+  /* ---- Loading Spinner ---- */
+  
   .admin-loading-spinner {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 12px;
     width: 100%;
-    padding: 14px 18px;
-    background-color: #ffffff;
-    border: 1px solid #ebf1f6;
-    border-radius: 7px;
-    box-shadow: rgba(145, 158, 171, 0.08) 0px 4px 12px -2px;
+    max-width: 600px;
+    padding: 14px 16px 14px 20px;
+    margin-bottom: 16px;
+    background-color: #f0f7f4;
+    border: 1px solid #a8cfc0;
+    border-left: 4px solid #2F6E4F;
+    border-radius: 9px;
+    box-shadow:
+      rgba(47, 110, 79, 0.12) 0px 4px 16px,
+      rgba(145, 158, 171, 0.06) 0px 1px 4px;
+    animation: adminBannerFadeIn 0.25s ease;
   }
   
   .admin-loading-spinner .spinner-border {
-    width: 1.25rem;
-    height: 1.25rem;
-    border-width: 0.18em;
+    width: 1.1rem;
+    height: 1.1rem;
+    border-width: 0.16em;
     flex-shrink: 0;
+    color: #2F6E4F;
   }
   
   .admin-loading-spinner__text {
     font-size: 14px;
-    font-weight: 600;
-    color: #5a6a85;
+    font-weight: 700;
+    color: #26583f;
     line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+  
+  /* ---- Shared animation ---- */
+  
+  @keyframes adminBannerFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/dashboard.html b/src/Components/HMI/ui/public/admin/dashboard.html
index 4b73d2571..a929feb0d 100644
--- a/src/Components/HMI/ui/public/admin/dashboard.html
+++ b/src/Components/HMI/ui/public/admin/dashboard.html
@@ -1,59 +1,40 @@
 <!doctype html>
 <html lang="en">
 
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Echo Admin</title>
-    <link rel="shortcut icon" type="image/png" href="/admin/images/logos/project-title.png" />
-    <link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />
-    <link rel="stylesheet" href="/admin/css/icons/tabler-icons/tabler-icons.css" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
-		<scrip type="text/javascript" src="https://kit.fontawesome.com/8aa980d912.js" crossorigin="anonymous"></script>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Echo Admin</title>
 
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
-      crossorigin="anonymous"
-    />
+  <link rel="shortcut icon" type="image/png" href="/admin/images/logos/project-title.png" />
+  <link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />
+  <link rel="stylesheet" href="/admin/css/icons/tabler-icons/tabler-icons.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
+    crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
 
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-    />
-    <!-- jQuery -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
-    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+  <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
 
-    <script type="text/javascript" src="/admin/js/sidebarmenu.js"></script>
-    <script type="text/javascript" src="/admin/js/app.min.js"></script>
-    <!-- <script type="text/javascript" src="../../node_modules/apexcharts/dist/apexcharts.min.js"></script> -->
-    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"
-    />
-    <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
-    <script type="text/javascript" src="/admin/js/dashboard.js"></script>
-    <script type="text.javascript" src="/admin/js/app.min.js"></script>
-  </head>
-    
-
-    
+  <script type="text/javascript" src="/admin/js/sidebarmenu.js"></script>
+  <script type="text/javascript" src="/admin/js/app.min.js"></script>
+  <script type="text/javascript" src="/admin/js/dashboard.js"></script>
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
+</head>
 
 <body>
-  <!--  Body Wrapper -->
   <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
     data-sidebar-position="fixed" data-header-position="fixed">
-    <!-- Sidebar Start -->
     <div id="sidebar"></div>
-    <!--  Sidebar End -->
-    <!--  Main wrapper -->
+
     <div class="body-wrapper">
       <div id="header"></div>
+
       <div class="container-fluid">
         <div class="admin-page-status">
           <div class="admin-error-banner d-none" role="alert" aria-live="polite">
@@ -65,86 +46,90 @@
               <i class="ti ti-x"></i>
             </button>
           </div>
-      
+
           <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
             <div class="spinner-border text-danger" aria-hidden="true"></div>
             <span class="admin-loading-spinner__text">Loading...</span>
           </div>
         </div>
-        <!--  Row 1 -->
 
         <div class="row">
-            <div class="col-xl-4 col-md-12">
-                <div class="card mat-stat-card">
-                    <div class="card-block">
-                        <div class="row align-items-center b-b-default">
-                            <div class="col-sm-6 b-r-default p-b-20 p-t-20">
-                                <div class="row align-items-center justify-content-center text-center">
-                                    <div class="col-4 p-r-0">
-                                        <i class="ti ti-user-check ti-2fa"></i>
-                                    </div>
-                                    <div class="col-8 p-l-0">
-                                        <h5>10K</h5>
-                                        <p class="text-muted m-b-0">Visitors</p>
-                                        <img src="/admin/images/logos/visitors-icon.png" width="42" height="42">
-                                    </div>
-                                </div>
-                            </div>
-                            
-                        <div class="col-sm-6 p-b-20 p-t-20">
-                                <div class="row align-items-center text-center">
-                                    <div class="col-4 p-r-0">
-                                        <i class="ti ti-wifi"></i>
-                                    </div>
-                                    <div class="col-8 p-l-0">
-                                        <h5>600</h5>
-                                        <p class="text-muted m-b-0">Network</p>
-                                        <img src="/admin/images/logos/network-icon.png" width="42" height="42">
-                                    </div>
-                                </div>
-                            </div></div>
-                        <div class="row align-items-center">
-                            <div class="col-sm-6 p-b-20 p-t-20 b-r-default">
-                                <div class="row align-items-center text-center">
-                                    <div class="col-4 p-r-0">
-                                        <i class="ti ti-file"></i>
-                                    </div>
-                                    <div class="col-8 p-l-0">
-                                        <h5>2000+</h5>
-                                        <p class="text-muted m-b-0">Files</p>
-                                        <img src="/admin/images/logos/files-icon.png" width="42" height="42">
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-sm-6 p-b-20 p-t-20">
-                                <div class="row align-items-center text-center">
-                                    <div class="col-4 p-r-0">
-                                        <i class="ti ti-mail"></i>
-                                    </div>
-                                    <div class="col-8 p-l-0">
-                                        <h5>120</h5>
-                                        <p class="text-muted m-b-0">Enquiries</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+          <div class="col-xl-4 col-md-12">
+            <div class="card mat-stat-card">
+              <div class="card-block">
+                <div class="row align-items-center b-b-default">
+                  <div class="col-sm-6 b-r-default p-b-20 p-t-20">
+                    <div class="row align-items-center justify-content-center text-center">
+                      <div class="col-4 p-r-0">
+                        <i class="ti ti-user-check ti-2fa"></i>
+                      </div>
+                      <div class="col-8 p-l-0">
+                        <h5>10K</h5>
+                        <p class="text-muted m-b-0">Visitors</p>
+                        <img src="/admin/images/logos/visitors-icon.png" width="42" height="42">
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="col-sm-6 p-b-20 p-t-20">
+                    <div class="row align-items-center text-center">
+                      <div class="col-4 p-r-0">
+                        <i class="ti ti-wifi"></i>
+                      </div>
+                      <div class="col-8 p-l-0">
+                        <h5>600</h5>
+                        <p class="text-muted m-b-0">Network</p>
+                        <img src="/admin/images/logos/network-icon.png" width="42" height="42">
+                      </div>
                     </div>
+                  </div>
                 </div>
+
+                <div class="row align-items-center">
+                  <div class="col-sm-6 p-b-20 p-t-20 b-r-default">
+                    <div class="row align-items-center text-center">
+                      <div class="col-4 p-r-0">
+                        <i class="ti ti-file"></i>
+                      </div>
+                      <div class="col-8 p-l-0">
+                        <h5>2000+</h5>
+                        <p class="text-muted m-b-0">Files</p>
+                        <img src="/admin/images/logos/files-icon.png" width="42" height="42">
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="col-sm-6 p-b-20 p-t-20">
+                    <div class="row align-items-center text-center">
+                      <div class="col-4 p-r-0">
+                        <i class="ti ti-mail"></i>
+                      </div>
+                      <div class="col-8 p-l-0">
+                        <h5>120</h5>
+                        <p class="text-muted m-b-0">Enquiries</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
+          </div>
         </div>
+
         <div class="row">
           <div class="col-lg-8 d-flex align-items-strech">
             <div class="card w-100">
-                <div class="card-body">
-                    <div class="d-sm-flex d-block align-items-center justify-content-between mb-9">
-                      <div class="mb-3 mb-sm-0">
-                        <h5 class="card-title fw-semibold">Live Event log</h5>
-                      </div>
-                    </div>
-                    <!-- <div id="chart"></div> -->
+              <div class="card-body">
+                <div class="d-sm-flex d-block align-items-center justify-content-between mb-9">
+                  <div class="mb-3 mb-sm-0">
+                    <h5 class="card-title fw-semibold">Live Event log</h5>
                   </div>
+                </div>
+                <div id="chart"></div>
+              </div>
             </div>
           </div>
+
           <div class="col-lg-4">
             <div class="row">
               <div class="col-lg-12">
@@ -154,15 +139,15 @@ <h5 class="card-title mb-9 fw-semibold">Donation Progress</h5>
                     <div class="row align-items-center">
                       <div class="col-8">
                         <h4 class="fw-semibold mb-3">Goal: AUD$1000</h4>
-                        <h4 class="" id="totalDonations" >Total Received: $</h4>
+                        <h4 id="totalDonations">Total Received: $</h4>
                         <div class="d-flex align-items-center">
                           <div class="me-4">
                             <span class="round-8 bg-primary rounded-circle me-2 d-inline-block"></span>
-                            <span class="">Donations</span>
+                            <span>Donations</span>
                           </div>
                           <div>
                             <span class="round-8 bg-light-primary rounded-circle me-2 d-inline-block"></span>
-                            <span class="">Subscription</span>
+                            <span>Subscription</span>
                           </div>
                         </div>
                       </div>
@@ -175,18 +160,15 @@ <h4 class="" id="totalDonations" >Total Received: $</h4>
                   </div>
                 </div>
               </div>
-            
-              
+
               <div class="col-lg-12">
                 <div class="card">
                   <div class="card-body">
                     <div class="row alig n-items-start">
                       <div class="col-12">
-                        <h5 class="card-title mb-12 fw-semibold"> Echo Map Access log - 7 days </h5>
+                        <h5 class="card-title mb-12 fw-semibold">Echo Map Access log - 7 days</h5>
                         <h4 class="fw-semibold mb-3">242 visits</h4>
-                        
                       </div>
-
                     </div>
                   </div>
                   <div id="visited"></div>
@@ -195,8 +177,8 @@ <h4 class="fw-semibold mb-3">242 visits</h4>
             </div>
           </div>
         </div>
+
         <div class="row">
-          
           <div class="col-lg-12 d-flex align-items-stretch">
             <div class="card w-100">
               <div class="card-body p-4">
@@ -207,12 +189,6 @@ <h5 class="card-title fw-semibold mb-4">Enquiries History</h5>
                       <tr>
                         <th class="border-bottom-0">
                           <h6 class="fw-semibold mb-0">Username</h6>
-                  <script type="text/javascript">
-                    $(document).ready(function() {
-                      $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
-                      $("#header").load("/admin/component/header-component.html");
-                    });
-                  </script>
                         </th>
                         <th class="border-bottom-0">
                           <h6 class="fw-semibold mb-0">Category</h6>
@@ -222,30 +198,36 @@ <h6 class="fw-semibold mb-0">Date</h6>
                         </th>
                       </tr>
                     </thead>
+
                     <tbody>
                       <tr>
-                        <td class="border-bottom-0"><h6 class="fw-semibold mb-0">vtn0901</h6></td>
                         <td class="border-bottom-0">
-                            <h6 class="fw-semibold mb-1">Tung Nguyen</h6>
-                            <span class="fw-normal">Deakin</span>                          
+                          <h6 class="fw-semibold mb-0">vtn0901</h6>
+                        </td>
+                        <td class="border-bottom-0">
+                          <h6 class="fw-semibold mb-1">Tung Nguyen</h6>
+                          <span class="fw-normal">Deakin</span>
                         </td>
                         <td class="border-bottom-0">
                           <p class="mb-0 fw-normal">I would like to talk abouut....</p>
                         </td>
                         <td class="border-bottom-0">
-                            <div class="d-flex align-items-center gap-2">
-                                <span class="badge bg-success rounded-3 fw-semibold">Enquiry</span>
-                              </div>
+                          <div class="d-flex align-items-center gap-2">
+                            <span class="badge bg-success rounded-3 fw-semibold">Enquiry</span>
+                          </div>
                         </td>
                         <td class="border-bottom-0">
                           <h6 class="fw-semibold mb-0 fs-4">02/08/2023</h6>
                         </td>
-                      </tr> 
+                      </tr>
+
                       <tr>
-                        <td class="border-bottom-0"><h6 class="fw-semibold mb-0">qtnck</h6></td>
                         <td class="border-bottom-0">
-                            <h6 class="fw-semibold mb-1">Quentin Cooke</h6>
-                            <span class="fw-normal">Echo</span>                          
+                          <h6 class="fw-semibold mb-0">qtnck</h6>
+                        </td>
+                        <td class="border-bottom-0">
+                          <h6 class="fw-semibold mb-1">Quentin Cooke</h6>
+                          <span class="fw-normal">Echo</span>
                         </td>
                         <td class="border-bottom-0">
                           <p class="mb-0 fw-normal">I would like to talk abouut....</p>
@@ -258,30 +240,36 @@ <h6 class="fw-semibold mb-1">Quentin Cooke</h6>
                         <td class="border-bottom-0">
                           <h6 class="fw-semibold mb-0 fs-4">06/06/2023</h6>
                         </td>
-                      </tr> 
+                      </tr>
+
                       <tr>
-                        <td class="border-bottom-0"><h6 class="fw-semibold mb-0">ben</h6></td>
                         <td class="border-bottom-0">
-                            <h6 class="fw-semibold mb-1">Benedict Nicholls</h6>
-                            <span class="fw-normal">DataBytes</span>                          
+                          <h6 class="fw-semibold mb-0">ben</h6>
+                        </td>
+                        <td class="border-bottom-0">
+                          <h6 class="fw-semibold mb-1">Benedict Nicholls</h6>
+                          <span class="fw-normal">DataBytes</span>
                         </td>
                         <td class="border-bottom-0">
                           <p class="mb-0 fw-normal">I would like to talk abouut....</p>
                         </td>
                         <td class="border-bottom-0">
-                            <div class="d-flex align-items-center gap-2">
-                                <span class="badge bg-secondary rounded-3 fw-semibold">Request</span>
-                              </div>
+                          <div class="d-flex align-items-center gap-2">
+                            <span class="badge bg-secondary rounded-3 fw-semibold">Request</span>
+                          </div>
                         </td>
                         <td class="border-bottom-0">
                           <h6 class="fw-semibold mb-0 fs-4">13/04/2023</h6>
                         </td>
-                      </tr>      
+                      </tr>
+
                       <tr>
-                        <td class="border-bottom-0"><h6 class="fw-semibold mb-0">rhtbj</h6></td>
                         <td class="border-bottom-0">
-                            <h6 class="fw-semibold mb-1">Rohit Bajaj</h6>
-                            <span class="fw-normal">Firebase community</span>                          
+                          <h6 class="fw-semibold mb-0">rhtbj</h6>
+                        </td>
+                        <td class="border-bottom-0">
+                          <h6 class="fw-semibold mb-1">Rohit Bajaj</h6>
+                          <span class="fw-normal">Firebase community</span>
                         </td>
                         <td class="border-bottom-0">
                           <p class="mb-0 fw-normal">I would like to talk abouut....</p>
@@ -294,7 +282,7 @@ <h6 class="fw-semibold mb-1">Rohit Bajaj</h6>
                         <td class="border-bottom-0">
                           <h6 class="fw-semibold mb-0 fs-4">29/03/2023</h6>
                         </td>
-                      </tr>                       
+                      </tr>
                     </tbody>
                   </table>
                 </div>
@@ -302,60 +290,66 @@ <h6 class="fw-semibold mb-0 fs-4">29/03/2023</h6>
             </div>
           </div>
         </div>
-        
+
       </div>
     </div>
+
     <div id="footer"></div>
-    </div>
   </div>
 
   <script type="text/javascript">
-  $(document).ready(function() {
-        // Use jQuery's load() method to load component contents
-        console.log("Start!")
-        $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
-        $("#header").load("/admin/component/header-component.html");
-        $("#footer").load("/admin/component/footer-component.html");
+    $(document).ready(function() {
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
       });
-    
-    
-  //Get the cumulative donations from the Stripe Account
-  //Calling API in server.js
-  fetch('/cumulativeDonations')
-    .then(response => response.json()) // Parse the JSON data
-    .then(data => {
-      // Update the content of the "totalDonations" element
+      $("#header").load("/admin/component/header-component.html");
+      $("#footer").load("/admin/component/footer-component.html");
+    });
+  
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
+  
+    async function loadDonations() {
       const totalDonationsElement = document.getElementById('totalDonations');
-      if (data === 0) {
-        console.log("data does not exists");
-        totalDonationsElement.innerHTML = "Total Donations: Connect Stripe Account";
-        // totalDonationsElement.innerHTML = `Total Donations: $${data.cumulativeTotal}`;
-      }
-      else if(data === undefined){
-        console.log("data is undefined");
-        totalDonationsElement.innerHTML = "Total Donations: Connect Stripe Account";
-      }
-      else{
-        console.log("data exists");
-        console.log(data);
-        if (data.cumulativeTotal === undefined) {
-          console.log("cumulativeTotal is undefined");
-          totalDonationsElement.innerHTML = "Total Donations: Connect Stripe Account";
+  
+      pageState.hideError();
+      pageState.showLoading();
+  
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 2000);
+  
+      try {
+        const response = await fetch('/cumulativeDonations', {
+          signal: controller.signal
+        });
+  
+        if (!response.ok) {
+          throw new Error(`Request failed with status ${response.status}`);
         }
-        else{
+  
+        const data = await response.json();
+  
+        if (data === 0 || data === undefined || data.cumulativeTotal === undefined) {
+          totalDonationsElement.innerHTML = "Total Donations: Connect Stripe Account";
+        } else {
           totalDonationsElement.innerHTML = `Total Donations: $${data.cumulativeTotal}`;
         }
-        // totalDonationsElement.innerHTML = `Total Donations: Connect Stripe Account`;
+      } catch (error) {
+        console.error('Error:', error);
+  
+        if (error.name === 'AbortError') {
+          pageState.showError('Loading donation data timed out. Please try again.');
+        } else {
+          pageState.showError('Failed to load donation data. Please try again.');
+        }
+      } finally {
+        clearTimeout(timeoutId);
+        pageState.hideLoading();
       }
-    })
-    .catch(error => {
-      console.error('Error:', error);
-      // Handle any errors that occur during the fetch
-    });
+    }
+  
+    loadDonations();
   </script>
-
 </body>
 
-
-
 </html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/donations.html b/src/Components/HMI/ui/public/admin/donations.html
index 23b31c623..32e5cc405 100644
--- a/src/Components/HMI/ui/public/admin/donations.html
+++ b/src/Components/HMI/ui/public/admin/donations.html
@@ -4,13 +4,13 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Echo Admin - Donations</title>
+
     <link rel="shortcut icon" type="image/png" href="/admin/images/logos/favicon.png" />
     <link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />
 
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
       rel="stylesheet"
-      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
       crossorigin="anonymous"
     />
 
@@ -36,10 +36,8 @@
 
     <script type="text/javascript" src="/admin/js/sidebarmenu.js"></script>
     <script type="text/javascript" src="/admin/js/app.min.js"></script>
-    <script type="text/javascript" src="/admin/js/dashboard.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
-
     <link
       rel="stylesheet"
       type="text/css"
@@ -47,231 +45,263 @@
     />
     <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
 
-    
+    <!-- Shared admin page state -->
+    <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
+
     <style>
-      /* Color-code donation status */
       .status-succeeded { color: green; font-weight: 600; }
       .status-failed { color: red; font-weight: 600; }
       .status-pending { color: orange; font-weight: 600; }
     </style>
   </head>
 
-  
-<body>
-  <!-- Page Wrapper with Admin Layout -->
-  <div
-    class="page-wrapper"
-    id="main-wrapper"
-    data-layout="vertical"
-    data-navbarbg="skin6"
-    data-sidebartype="full"
-    data-sidebar-position="fixed"
-    data-header-position="fixed"
-  >
-
-    <div id="sidebar"></div>
-
-    <!-- Main Content Wrapper -->
-    <div class="body-wrapper">
-      <div id="header"></div>
-      <div class="container-fluid">
-        <div class="row mb-4">
-          <div class="col-md-4">
-            <div class="card">
-              <div class="card-body text-center">
-                <h5>Total Donations</h5>
-                <h2 id="total-donations">$0.00</h2>
+  <body>
+    <div
+      class="page-wrapper"
+      id="main-wrapper"
+      data-layout="vertical"
+      data-navbarbg="skin6"
+      data-sidebartype="full"
+      data-sidebar-position="fixed"
+      data-header-position="fixed"
+    >
+      <div id="sidebar"></div>
+
+      <div class="body-wrapper">
+        <div id="header"></div>
+
+        <div class="container-fluid">
+          <div class="admin-page-status">
+            <div class="admin-error-banner d-none" role="alert" aria-live="polite">
+              <div class="admin-error-banner__content">
+                <i class="ti ti-alert-circle"></i>
+                <span>Something went wrong while loading this page.</span>
               </div>
+              <button type="button" class="admin-error-banner__dismiss" aria-label="Dismiss error message">
+                <i class="ti ti-x"></i>
+              </button>
+            </div>
+
+            <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
+              <div class="spinner-border text-danger" aria-hidden="true"></div>
+              <span class="admin-loading-spinner__text">Loading...</span>
             </div>
           </div>
-        </div>
-      
-
-        <!-- Donations Table Card -->
-        <div class="card" id="card-donations">
-          <div class="card-body">
-            <div class="d-flex justify-content-between align-items-center mb-3">
-              <h1 class="mb-0">Donations</h1>
-              <button id="refresh-btn" class="btn btn-primary">Refresh</button>
+
+          <div class="row mb-4">
+            <div class="col-md-4">
+              <div class="card">
+                <div class="card-body text-center">
+                  <h5>Total Donations</h5>
+                  <h2 id="total-donations">$0.00</h2>
+                </div>
+              </div>
             </div>
+          </div>
 
-            <table class="table table-striped table-hover align-middle">
-              <thead class="table-light">
-                <tr>
-                  <th>Amount</th>
-                  <th>Status</th>
-                  <th>Customer</th>
-                  <th>Date</th>
-                </tr>
-              </thead>
-              <tbody id="data-body">
-              </tbody>
-            </table>
+          <div class="card" id="card-donations">
+            <div class="card-body">
+              <div class="d-flex justify-content-between align-items-center mb-3">
+                <h1 class="mb-0">Donations</h1>
+                <button id="refresh-btn" class="btn btn-primary">Refresh</button>
+              </div>
+
+              <table class="table table-striped table-hover align-middle">
+                <thead class="table-light">
+                  <tr>
+                    <th>Amount</th>
+                    <th>Status</th>
+                    <th>Customer</th>
+                    <th>Date</th>
+                  </tr>
+                </thead>
+                <tbody id="data-body"></tbody>
+              </table>
+            </div>
           </div>
-        </div>
 
-        <!-- ( Donation Type Chart Card -->
-        <div class="row mb-4">
-          <div class="col-md-6">
-            <div class="card">
-              <div class="card-body">
-                <h5 class="card-title">Donation Types</h5>
-                <canvas id="donationChart" width="400" height="300"></canvas>
+          <div class="row mb-4">
+            <div class="col-md-6">
+              <div class="card">
+                <div class="card-body">
+                  <h5 class="card-title">Donation Types</h5>
+                  <canvas id="donationChart" width="400" height="300"></canvas>
+                </div>
               </div>
             </div>
           </div>
         </div>
+
+        <div id="footer"></div>
       </div>
     </div>
-    <div id="footer"></div>
-    </div>
-  </div>
 
-  <!-- Load Sidebar & Header Components -->
     <script type="text/javascript">
-    $(document).ready(function() {
-      console.log("Loading sidebar and header...");
-      $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
-      $("#header").load("/admin/component/header-component.html");
-      $("#footer").load("/admin/component/footer-component.html");
-    });
-  </script>
-
-  <!-- Donation Table Script-->
-
-  <script>
-    const dataBody = document.getElementById('data-body');
-    const refreshBtn = document.getElementById('refresh-btn');
-  
-    function clearTable() {
-      dataBody.innerHTML = '';
-    }
-  
-    async function updateTable() {
-      try {
-        const response = await fetch('/donations');
-        const data = await response.json();
-        const charges = data.charges?.data || [];
-  
-        clearTable();
-  
-        if (charges.length === 0) {
-          dataBody.innerHTML = `<tr><td colspan="4" class="text-center">No donations found.</td></tr>`;
-          return;
+      $(document).ready(function() {
+        $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+          $.getScript('/admin/js/sidebarmenu.js');
+        });
+        $("#header").load("/admin/component/header-component.html");
+        $("#footer").load("/admin/component/footer-component.html");
+      });
+    </script>
+
+    <script>
+      const pageState = createAdminPageState();
+      pageState.resetPageState();
+
+      const dataBody = document.getElementById('data-body');
+      const refreshBtn = document.getElementById('refresh-btn');
+      let donationChartInstance = null;
+
+      function clearTable() {
+        dataBody.innerHTML = '';
+      }
+
+      function updateDonationChart(donations) {
+        const typeCounts = {};
+        donations.forEach(d => {
+          const type = d.type || 'Unknown';
+          typeCounts[type] = (typeCounts[type] || 0) + 1;
+        });
+
+        const labels = Object.keys(typeCounts);
+        const data = Object.values(typeCounts);
+
+        const canvas = document.getElementById('donationChart');
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+
+        if (donationChartInstance) {
+          donationChartInstance.destroy();
         }
-  
-        charges.forEach(item => {
-          const row = document.createElement('tr');
-  
-          const amountDollars = (item.amount).toFixed(2);
-          const amountCell = document.createElement('td');
-          amountCell.textContent = `$${amountDollars}`;
-  
-          const statusCell = document.createElement('td');
-          statusCell.textContent = item.status;
-          statusCell.classList.add(`status-${item.status.toLowerCase()}`); 
-          
-          const nameOremailCell = document.createElement('td');
-          const name = item.name || item.billing_details?.name;
-          const email = item.email || item.billing_details?.email;
-
-          if (name && name !== 'Anonymous') {
-            nameOremailCell.textContent = name;
-          } else if (email && email !== 'N/A') {
-            nameOremailCell.textContent = email;
-          } else {
-            nameOremailCell.textContent = 'N/A';
-          }
 
-          let dateObj;
-          const dateCell = document.createElement('td');
-          if (item.created) {
-            dateObj = new Date(item.created * 1000); // Razorpay
-          } else if (item.timestamp) {
-            dateObj = new Date(item.timestamp);     // Stripe
-          } else {
-            dateObj = new Date();                   // fallback (today)
+        donationChartInstance = new Chart(ctx, {
+          type: 'pie',
+          data: {
+            labels: labels,
+            datasets: [{
+              label: 'Donation Types',
+              data: data,
+              backgroundColor: ['green', 'orange', 'blue', 'purple', 'gray'],
+              borderWidth: 1
+            }]
+          },
+          options: {
+            responsive: true,
+            plugins: {
+              legend: {
+                position: 'bottom',
+              },
+              title: {
+                display: true,
+                text: 'Donation Types'
+              }
+            }
           }
+        });
+      }
 
-          dateCell.textContent = isNaN(dateObj) ? 'Invalid Date' : dateObj.toLocaleDateString();
+      function updateTotalAmount(donations) {
+        const total = donations
+          .filter(d => d.status === 'succeeded')
+          .reduce((acc, curr) => acc + curr.amount, 0);
 
-  
-          row.appendChild(amountCell);
-          row.appendChild(statusCell);
-          row.appendChild(nameOremailCell);
-          row.appendChild(dateCell);
-  
-          dataBody.appendChild(row);
-        });
-  
-        updateDonationChart(charges);
-        updateTotalAmount(charges);
-  
-      } catch (error) {
-        console.error('Error fetching donations:', error);
+        document.getElementById('total-donations').textContent = `$${total.toFixed(2)}`;
       }
-    }
-  
-    refreshBtn.addEventListener('click', updateTable);
-  
-    let donationChartInstance = null;
-
-    function updateDonationChart(donations) {
-      const typeCounts = {};
-      donations.forEach(d => {
-        const type = d.type || 'Unknown';
-        typeCounts[type] = (typeCounts[type] || 0) + 1;
-      });
 
-      const labels = Object.keys(typeCounts);
-      const data = Object.values(typeCounts);
+      async function updateTable() {
+        pageState.hideError();
+        pageState.showLoading();
 
-      const ctx = document.getElementById('donationChart').getContext('2d');
+        try {
+          clearTable();
 
-      // Destroy old chart if it exists
-      if (donationChartInstance) {
-        donationChartInstance.destroy();
-      }
+          const response = await fetch('/donations');
 
-      donationChartInstance = new Chart(ctx, {
-        type: 'pie',
-        data: {
-          labels: labels,
-          datasets: [{
-            label: 'Donation Types',
-            data: data,
-            backgroundColor: ['green', 'orange', 'blue', 'purple', 'gray'],
-            borderWidth: 1
-          }]
-        },
-        options: {
-          responsive: true,
-          plugins: {
-            legend: {
-              position: 'bottom',
-            },
-            title: {
-              display: true,
-              text: 'Donation Types'
-            }
+          if (!response.ok) {
+            throw new Error(`Status ${response.status}`);
           }
+
+          const contentType = response.headers.get('content-type') || '';
+          if (!contentType.includes('application/json')) {
+            const rawText = await response.text();
+            console.error('Expected JSON but received:', rawText);
+            throw new Error('API did not return JSON.');
+          }
+
+          const data = await response.json();
+          const charges = data.charges?.data || [];
+
+          if (charges.length === 0) {
+            dataBody.innerHTML = `<tr><td colspan="4" class="text-center">No donations found.</td></tr>`;
+            updateDonationChart([]);
+            updateTotalAmount([]);
+            return;
+          }
+
+          charges.forEach(item => {
+            const row = document.createElement('tr');
+
+            const amountCell = document.createElement('td');
+            const amountDollars = Number(item.amount || 0).toFixed(2);
+            amountCell.textContent = `$${amountDollars}`;
+
+            const statusCell = document.createElement('td');
+            statusCell.textContent = item.status || 'unknown';
+            statusCell.classList.add(`status-${String(item.status || 'unknown').toLowerCase()}`);
+
+            const nameOrEmailCell = document.createElement('td');
+            const name = item.name || item.billing_details?.name;
+            const email = item.email || item.billing_details?.email;
+
+            if (name && name !== 'Anonymous') {
+              nameOrEmailCell.textContent = name;
+            } else if (email && email !== 'N/A') {
+              nameOrEmailCell.textContent = email;
+            } else {
+              nameOrEmailCell.textContent = 'N/A';
+            }
+
+            const dateCell = document.createElement('td');
+            let dateObj;
+            if (item.created) {
+              dateObj = new Date(item.created * 1000);
+            } else if (item.timestamp) {
+              dateObj = new Date(item.timestamp);
+            } else {
+              dateObj = new Date();
+            }
+
+            dateCell.textContent = isNaN(dateObj) ? 'Invalid Date' : dateObj.toLocaleDateString();
+
+            row.appendChild(amountCell);
+            row.appendChild(statusCell);
+            row.appendChild(nameOrEmailCell);
+            row.appendChild(dateCell);
+
+            dataBody.appendChild(row);
+          });
+
+          updateDonationChart(charges);
+          updateTotalAmount(charges);
+
+        } catch (error) {
+          console.error('Error fetching donations:', error);
+          pageState.showError('Failed to load donations. Please try again.');
+          clearTable();
+          dataBody.innerHTML = `<tr><td colspan="4" class="text-center text-muted">Unable to load donations.</td></tr>`;
+          updateDonationChart([]);
+          updateTotalAmount([]);
+        } finally {
+          pageState.hideLoading();
         }
-      });
-    }
-
-  
-    function updateTotalAmount(donations) {
-      const total = donations
-        .filter(d => d.status === 'succeeded')  // Only count successful donations.
-        .reduce((acc, curr) => acc + curr.amount, 0);
-      document.getElementById('total-donations').textContent = `$${(total).toFixed(2)}`;
-    }
-  
-    updateTable();
-  </script>
-  
-  
-  
-  
-</body>
-</html>
+      }
+
+      refreshBtn.addEventListener('click', updateTable);
+
+      updateTable();
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/feedback.html b/src/Components/HMI/ui/public/admin/feedback.html
index 6fe0078e5..1eb4e1fbd 100644
--- a/src/Components/HMI/ui/public/admin/feedback.html
+++ b/src/Components/HMI/ui/public/admin/feedback.html
@@ -10,6 +10,7 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"/>
   <link rel="stylesheet" type="text/css" href="/admin/css/styles.min.css" />
   <link rel="stylesheet" href="/admin/css/icons/tabler-icons/tabler-icons.css" />
+
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
 
@@ -203,538 +204,462 @@
     .req{ color: var(--danger); }
     .spinner-border{ width: 1.1rem; height: 1.1rem; }
   </style>
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
 
 <body>
-  <!--  Body Wrapper -->
-  <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
-    data-sidebar-position="fixed" data-header-position="fixed">
-    <!-- Sidebar Start -->
+  <div
+    class="page-wrapper"
+    id="main-wrapper"
+    data-layout="vertical"
+    data-navbarbg="skin6"
+    data-sidebartype="full"
+    data-sidebar-position="fixed"
+    data-header-position="fixed"
+  >
     <div id="sidebar"></div>
-    <!--  Sidebar End -->
-    <!--  Main wrapper -->
+
     <div class="body-wrapper">
       <div id="header"></div>
+
       <div class="container-fluid">
         <div class="feedback-page">
 
-  <!-- TOP HERO -->
-  <div class="hero mb-4">
-    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
-      <div>
-        <div class="d-flex align-items-center gap-2 mb-2">
-          <span class="soft-pill"><i class="bi bi-chat-dots me-1"></i> Client Feedback</span>
-          <span class="soft-pill" style="background:rgba(32,201,151,.10); color:var(--brand-2); border-color:rgba(32,201,151,.18)">
-            <i class="bi bi-shield-check me-1"></i> Trusted channel
-          </span>
-        </div>
-        <h2 class="fw-bold mb-1">Help us improve Project Echo</h2>
-        <p class="muted mb-0">Report bugs, request features, or share usability feedback. You’ll get an email confirmation after submitting.</p>
-      </div>
-
-      <div class="d-flex gap-2">
-        <a href="/admin-dashboard" class="btn btn-outline-secondary btn-sm">
-          <i class="bi bi-arrow-left me-1"></i> Back
-        </a>
-      </div>
-    </div>
-  </div>
-
-  <!-- Page Toolbar -->
-  <div class="page-toolbar mb-3 d-flex justify-content-between align-items-center">
-    <div class="toolbar-left"></div>
-    <div class="toolbar-right">
-      <button class="btn btn-primary me-2" id="toolbarSubmit" type="button"><i class="bi bi-send me-1"></i> Submit Feedback</button>
-      <button class="btn btn-outline-danger" id="toolbarClear" type="button"><i class="bi bi-trash3 me-1"></i> Clear</button>
-    </div>
-  </div>
-
-  <!-- ALERTS -->
-  <div id="successBanner" class="success-banner">
-    <i class="bi bi-check-circle-fill me-2"></i>
-    Thank you! Your feedback has been sent. Please check your email for confirmation.
-  </div>
-  <div id="errorBanner" class="error-banner">
-    <i class="bi bi-exclamation-triangle-fill me-2"></i>
-    <span id="errorText">Something went wrong.</span>
-  </div>
-
-  <div class="row g-4">
+          <div class="hero mb-4">
+            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
+              <div>
+                <div class="d-flex align-items-center gap-2 mb-2">
+                  <span class="soft-pill"><i class="bi bi-chat-dots me-1"></i> Client Feedback</span>
+                  <span class="soft-pill" style="background:rgba(32,201,151,.10); color:var(--brand-2); border-color:rgba(32,201,151,.18)">
+                    <i class="bi bi-shield-check me-1"></i> Trusted channel
+                  </span>
+                </div>
+                <h2 class="fw-bold mb-1">Help us improve Project Echo</h2>
+                <p class="muted mb-0">Report bugs, request features, or share usability feedback. You’ll get an email confirmation after submitting.</p>
+              </div>
 
-    <!-- LEFT: FORM -->
-    <div class="col-lg-8">
-      <div class="card">
-        <div class="card-body p-4">
+              <div class="d-flex gap-2">
+                <a href="/admin-dashboard" class="btn btn-outline-secondary btn-sm">
+                  <i class="bi bi-arrow-left me-1"></i> Back
+                </a>
+              </div>
+            </div>
+          </div>
 
-          <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
+          <div class="page-toolbar mb-3 d-flex justify-content-between align-items-center">
+            <div></div>
             <div>
-              <h5 class="section-title mb-1">Submit feedback</h5>
-              <div class="hint">Fields marked with <span class="req">*</span> are required.</div>
+              <button class="btn btn-primary me-2" id="toolbarSubmit" type="button">
+                <i class="bi bi-send me-1"></i> Submit Feedback
+              </button>
+              <button class="btn btn-outline-danger" id="toolbarClear" type="button">
+                <i class="bi bi-trash3 me-1"></i> Clear
+              </button>
             </div>
-            <button type="button" id="clearBtn" class="btn btn-outline-danger btn-sm">
-              <i class="bi bi-trash3 me-1"></i> Clear
-            </button>
           </div>
 
-          <form id="feedbackForm" novalidate>
-            <div class="row g-3">
-
-              <!-- EMAIL -->
-              <div class="col-md-6">
-                <label class="form-label">Your Email <span class="req">*</span></label>
-                <div class="input-group">
-                  <span class="input-group-text"><i class="bi bi-envelope"></i></span>
-                  <input type="email" id="email" class="form-control" placeholder="name@example.com" required />
-                </div>
-                <div class="invalid-feedback">Please enter a valid email.</div>
-              </div>
-
-              <!-- TYPE -->
-              <div class="col-md-6">
-                <label class="form-label">Feedback Type <span class="req">*</span></label>
-                <select id="type" class="form-select" required>
-                  <option value="">Select type</option>
-                  <option value="Bug">Bug</option>
-                  <option value="Feature Request">Feature Request</option>
-                  <option value="Usability">Usability</option>
-                  <option value="Data Issue">Data Issue</option>
-                  <option value="Other">Other</option>
-                </select>
-                <div class="invalid-feedback">Please select a feedback type.</div>
-              </div>
+          <div id="successBanner" class="success-banner">
+            <i class="bi bi-check-circle-fill me-2"></i>
+            Thank you! Your feedback has been sent. Please check your email for confirmation.
+          </div>
 
-              <!-- QUICK TAGS -->
-              <div class="col-12">
-                <label class="form-label mb-2">Quick tags (optional)</label>
-                <div class="d-flex flex-wrap gap-2" id="tagWrap">
-                  <label class="chip"><input type="checkbox" value="Dashboard"><i class="bi bi-speedometer2"></i> Dashboard</label>
-                  <label class="chip"><input type="checkbox" value="Data Insights"><i class="bi bi-graph-up"></i> Data Insights</label>
-                  <label class="chip"><input type="checkbox" value="Login/Auth"><i class="bi bi-shield-lock"></i> Login/Auth</label>
-                  <label class="chip"><input type="checkbox" value="Maps"><i class="bi bi-map"></i> Maps</label>
-                  <label class="chip"><input type="checkbox" value="Performance"><i class="bi bi-lightning"></i> Performance</label>
-                  <label class="chip"><input type="checkbox" value="UI/UX"><i class="bi bi-palette2"></i> UI/UX</label>
-                </div>
-                <div class="hint mt-2">Tags help the team route feedback faster.</div>
-              </div>
+          <div id="errorBanner" class="error-banner">
+            <i class="bi bi-exclamation-triangle-fill me-2"></i>
+            <span id="errorText">Something went wrong.</span>
+          </div>
 
-              <!-- SEVERITY -->
-              <div class="col-12">
-                <label class="form-label mb-2">Severity (optional)</label>
-                <div class="row g-2">
-                  <div class="col-md-4">
-                    <button type="button" class="w-100 severity-btn sev-low" data-sev="Low">
-                      <span class="sev-dot"></span><b>Low</b>
-                      <div class="hint mb-0">Minor issue</div>
-                    </button>
-                  </div>
-                  <div class="col-md-4">
-                    <button type="button" class="w-100 severity-btn sev-med" data-sev="Medium">
-                      <span class="sev-dot"></span><b>Medium</b>
-                      <div class="hint mb-0">Impacts workflow</div>
-                    </button>
-                  </div>
-                  <div class="col-md-4">
-                    <button type="button" class="w-100 severity-btn sev-high" data-sev="High">
-                      <span class="sev-dot"></span><b>High</b>
-                      <div class="hint mb-0">Blocking</div>
+          <div class="row g-4">
+            <div class="col-lg-8">
+              <div class="card">
+                <div class="card-body p-4">
+                  <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
+                    <div>
+                      <h5 class="section-title mb-1">Submit feedback</h5>
+                      <div class="hint">Fields marked with <span class="req">*</span> are required.</div>
+                    </div>
+                    <button type="button" id="clearBtn" class="btn btn-outline-danger btn-sm">
+                      <i class="bi bi-trash3 me-1"></i> Clear
                     </button>
                   </div>
-                </div>
-                <input type="hidden" id="severity" value="" />
-              </div>
 
-              <!-- PAGE / URL -->
-              <div class="col-md-6">
-                <label class="form-label">Page / Screen (optional)</label>
-                <div class="input-group">
-                  <span class="input-group-text"><i class="bi bi-link-45deg"></i></span>
-                  <input type="text" id="page" class="form-control" placeholder="e.g., /admin-hmi-data-insights" />
-                </div>
-                <div class="hint mt-1">Where did you notice this? URL or screen name.</div>
-              </div>
+                  <form id="feedbackForm" novalidate>
+                    <div class="row g-3">
+                      <div class="col-md-6">
+                        <label class="form-label">Your Email <span class="req">*</span></label>
+                        <div class="input-group">
+                          <span class="input-group-text"><i class="bi bi-envelope"></i></span>
+                          <input type="email" id="email" class="form-control" placeholder="name@example.com" required />
+                        </div>
+                        <div class="invalid-feedback">Please enter a valid email.</div>
+                      </div>
+
+                      <div class="col-md-6">
+                        <label class="form-label">Feedback Type <span class="req">*</span></label>
+                        <select id="type" class="form-select" required>
+                          <option value="">Select type</option>
+                          <option value="Bug">Bug</option>
+                          <option value="Feature Request">Feature Request</option>
+                          <option value="Usability">Usability</option>
+                          <option value="Data Issue">Data Issue</option>
+                          <option value="Other">Other</option>
+                        </select>
+                        <div class="invalid-feedback">Please select a feedback type.</div>
+                      </div>
+
+                      <div class="col-12">
+                        <label class="form-label mb-2">Quick tags (optional)</label>
+                        <div class="d-flex flex-wrap gap-2" id="tagWrap">
+                          <label class="chip"><input type="checkbox" value="Dashboard"><i class="bi bi-speedometer2"></i> Dashboard</label>
+                          <label class="chip"><input type="checkbox" value="Data Insights"><i class="bi bi-graph-up"></i> Data Insights</label>
+                          <label class="chip"><input type="checkbox" value="Login/Auth"><i class="bi bi-shield-lock"></i> Login/Auth</label>
+                          <label class="chip"><input type="checkbox" value="Maps"><i class="bi bi-map"></i> Maps</label>
+                          <label class="chip"><input type="checkbox" value="Performance"><i class="bi bi-lightning"></i> Performance</label>
+                          <label class="chip"><input type="checkbox" value="UI/UX"><i class="bi bi-palette2"></i> UI/UX</label>
+                        </div>
+                        <div class="hint mt-2">Tags help the team route feedback faster.</div>
+                      </div>
+
+                      <div class="col-12">
+                        <label class="form-label mb-2">Severity (optional)</label>
+                        <div class="row g-2">
+                          <div class="col-md-4">
+                            <button type="button" class="w-100 severity-btn sev-low" data-sev="Low">
+                              <span class="sev-dot"></span><b>Low</b>
+                              <div class="hint mb-0">Minor issue</div>
+                            </button>
+                          </div>
+                          <div class="col-md-4">
+                            <button type="button" class="w-100 severity-btn sev-med" data-sev="Medium">
+                              <span class="sev-dot"></span><b>Medium</b>
+                              <div class="hint mb-0">Impacts workflow</div>
+                            </button>
+                          </div>
+                          <div class="col-md-4">
+                            <button type="button" class="w-100 severity-btn sev-high" data-sev="High">
+                              <span class="sev-dot"></span><b>High</b>
+                              <div class="hint mb-0">Blocking</div>
+                            </button>
+                          </div>
+                        </div>
+                        <input type="hidden" id="severity" value="" />
+                      </div>
+
+                      <div class="col-md-6">
+                        <label class="form-label">Page / Screen (optional)</label>
+                        <div class="input-group">
+                          <span class="input-group-text"><i class="bi bi-link-45deg"></i></span>
+                          <input type="text" id="page" class="form-control" placeholder="e.g., /admin-hmi-data-insights" />
+                        </div>
+                        <div class="hint mt-1">Where did you notice this? URL or screen name.</div>
+                      </div>
+
+                      <div class="col-md-6">
+                        <label class="form-label">Follow-up (optional)</label>
+                        <div class="d-flex align-items-center gap-2 mt-1">
+                          <input class="form-check-input mt-0" type="checkbox" id="okToContact" />
+                          <label class="form-check-label" for="okToContact">
+                            It’s okay to contact me about this feedback
+                          </label>
+                        </div>
+                        <div class="hint mt-1">We’ll only use your email for this feedback thread.</div>
+                      </div>
+
+                      <div class="col-12">
+                        <label class="form-label">Message <span class="req">*</span></label>
+                        <textarea id="message" class="form-control" rows="6" placeholder="Tell us what happened / what you want to see..." maxlength="1000" required></textarea>
+                        <div class="d-flex justify-content-between align-items-center mt-1">
+                          <div class="invalid-feedback d-block" id="messageErr" style="display:none;">Please add a message.</div>
+                          <div class="counter" id="charCount">0 / 1000</div>
+                        </div>
+                      </div>
+
+                      <div class="col-12">
+                        <label class="form-label">Attachments (optional)</label>
+
+                        <div id="dropzone" class="dropzone">
+                          <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
+                            <div>
+                              <div class="fw-semibold"><i class="bi bi-paperclip me-1"></i> Drag & drop screenshots here</div>
+                              <div class="hint mb-0">PNG/JPG/PDF — up to 3 files, 2MB each. (Demo: sent as filenames only unless you wire backend upload)</div>
+                            </div>
+                            <div>
+                              <input type="file" id="files" class="d-none" accept=".png,.jpg,.jpeg,.pdf" multiple />
+                              <button type="button" class="btn btn-outline-secondary btn-sm" id="browseBtn">
+                                <i class="bi bi-folder2-open me-1"></i> Browse
+                              </button>
+                            </div>
+                          </div>
+
+                          <div id="fileList"></div>
+                        </div>
+                      </div>
+                    </div>
 
-              <!-- CONTACT OK -->
-              <div class="col-md-6">
-                <label class="form-label">Follow-up (optional)</label>
-                <div class="d-flex align-items-center gap-2 mt-1">
-                  <input class="form-check-input mt-0" type="checkbox" id="okToContact" />
-                  <label class="form-check-label" for="okToContact">
-                    It’s okay to contact me about this feedback
-                  </label>
+                    <div class="mt-4 d-flex flex-wrap gap-2">
+                      <button type="submit" class="btn btn-primary" id="submitBtn">
+                        <span class="btn-text"><i class="bi bi-send me-1"></i> Submit Feedback</span>
+                        <span class="btn-loading d-none"><span class="spinner-border me-2" role="status" aria-hidden="true"></span> Sending...</span>
+                      </button>
+
+                      <a href="/admin-dashboard" class="btn btn-outline-secondary">
+                        Cancel
+                      </a>
+                    </div>
+                  </form>
                 </div>
-                <div class="hint mt-1">We’ll only use your email for this feedback thread.</div>
               </div>
+            </div>
 
-              <!-- MESSAGE -->
-              <div class="col-12">
-                <label class="form-label">Message <span class="req">*</span></label>
-                <textarea id="message" class="form-control" rows="6" placeholder="Tell us what happened / what you want to see..." maxlength="1000" required></textarea>
-                <div class="d-flex justify-content-between align-items-center mt-1">
-                  <div class="invalid-feedback d-block" id="messageErr" style="display:none;">Please add a message.</div>
-                  <div class="counter" id="charCount">0 / 1000</div>
+            <div class="col-lg-4">
+              <div class="preview-card">
+                <div class="d-flex align-items-center justify-content-between mb-2">
+                  <div class="fw-semibold"><i class="bi bi-eye me-1"></i> Preview</div>
+                  <span class="soft-pill" id="statusPill"><i class="bi bi-circle-fill me-1" style="font-size:.6rem"></i> Draft</span>
                 </div>
-              </div>
 
-              <!-- ATTACHMENTS -->
-              <div class="col-12">
-                <label class="form-label">Attachments (optional)</label>
+                <div class="kv"><div class="k">Email</div><div class="v text-end" id="pvEmail">—</div></div>
+                <div class="kv"><div class="k">Type</div><div class="v text-end" id="pvType">—</div></div>
+                <div class="kv"><div class="k">Tags</div><div class="v text-end" id="pvTags">—</div></div>
+                <div class="kv"><div class="k">Severity</div><div class="v text-end" id="pvSev">—</div></div>
+                <div class="kv"><div class="k">Page</div><div class="v text-end" id="pvPage">—</div></div>
+                <div class="kv"><div class="k">OK to contact</div><div class="v text-end" id="pvOk">—</div></div>
 
-                <div id="dropzone" class="dropzone">
-                  <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
-                    <div>
-                      <div class="fw-semibold"><i class="bi bi-paperclip me-1"></i> Drag & drop screenshots here</div>
-                      <div class="hint mb-0">PNG/JPG/PDF — up to 3 files, 2MB each. (Demo: sent as filenames only unless you wire backend upload)</div>
-                    </div>
-                    <div>
-                      <input type="file" id="files" class="d-none" accept=".png,.jpg,.jpeg,.pdf" multiple />
-                      <button type="button" class="btn btn-outline-secondary btn-sm" id="browseBtn">
-                        <i class="bi bi-folder2-open me-1"></i> Browse
-                      </button>
-                    </div>
-                  </div>
+                <div class="mt-3">
+                  <div class="k muted mb-1">Message</div>
+                  <div class="p-3" style="border:1px solid var(--border); border-radius:14px; background:#fbfdff; min-height:120px; white-space:pre-wrap;" id="pvMsg">Start typing…</div>
+                </div>
 
-                  <div id="fileList"></div>
+                <div class="mt-3">
+                  <div class="k muted mb-1">Attachments</div>
+                  <div class="hint mb-0" id="pvFiles">—</div>
                 </div>
               </div>
-
             </div>
+          </div>
 
-            <!-- BUTTONS -->
-            <div class="mt-4 d-flex flex-wrap gap-2">
-              <button type="submit" class="btn btn-primary" id="submitBtn">
-                <span class="btn-text"><i class="bi bi-send me-1"></i> Submit Feedback</span>
-                <span class="btn-loading d-none"><span class="spinner-border me-2" role="status" aria-hidden="true"></span> Sending...</span>
-              </button>
-
-              <a href="/admin-dashboard" class="btn btn-outline-secondary">
-                Cancel
-              </a>
-            </div>
-
-            <hr class="my-4" />
-
-    
-          </form>
         </div>
       </div>
+
+      <div id="footer"></div>
     </div>
+  </div>
 
-    <!-- RIGHT: LIVE PREVIEW -->
-    <div class="col-lg-4">
-      <div class="preview-card">
-        <div class="d-flex align-items-center justify-content-between mb-2">
-          <div class="fw-semibold"><i class="bi bi-eye me-1"></i> Preview</div>
-          <span class="soft-pill" id="statusPill"><i class="bi bi-circle-fill me-1" style="font-size:.6rem"></i> Draft</span>
-        </div>
+  <script>
+    $(document).ready(function() {
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
+      });
+      $("#header").load("/admin/component/header-component.html");
+      $("#footer").load("/admin/component/footer-component.html");
 
-        <div class="kv"><div class="k">Email</div><div class="v text-end" id="pvEmail">—</div></div>
-        <div class="kv"><div class="k">Type</div><div class="v text-end" id="pvType">—</div></div>
-        <div class="kv"><div class="k">Tags</div><div class="v text-end" id="pvTags">—</div></div>
-        <div class="kv"><div class="k">Severity</div><div class="v text-end" id="pvSev">—</div></div>
-        <div class="kv"><div class="k">Page</div><div class="v text-end" id="pvPage">—</div></div>
-        <div class="kv"><div class="k">OK to contact</div><div class="v text-end" id="pvOk">—</div></div>
+      document.getElementById('toolbarSubmit')?.addEventListener('click', () => {
+        document.getElementById('submitBtn').click();
+      });
 
-        <div class="mt-3">
-          <div class="k muted mb-1">Message</div>
-          <div class="p-3" style="border:1px solid var(--border); border-radius:14px; background:#fbfdff; min-height:120px; white-space:pre-wrap;" id="pvMsg">Start typing…</div>
-        </div>
+      document.getElementById('toolbarClear')?.addEventListener('click', () => {
+        document.getElementById('clearBtn').click();
+      });
+    });
 
-        <div class="mt-3">
-          <div class="k muted mb-1">Attachments</div>
-          <div class="hint mb-0" id="pvFiles">—</div>
-        </div>
+    const form = document.getElementById("feedbackForm");
+    const successBanner = document.getElementById("successBanner");
+    const errorBanner = document.getElementById("errorBanner");
+    const errorText = document.getElementById("errorText");
+
+    const emailEl = document.getElementById("email");
+    const typeEl = document.getElementById("type");
+    const messageEl = document.getElementById("message");
+    const pageEl = document.getElementById("page");
+    const okEl = document.getElementById("okToContact");
+    const charCount = document.getElementById("charCount");
+    const severityHidden = document.getElementById("severity");
+
+    const msgErr = document.getElementById("messageErr");
+    const clearBtn = document.getElementById("clearBtn");
+    const submitBtn = document.getElementById("submitBtn");
+    const btnText = submitBtn.querySelector(".btn-text");
+    const btnLoading = submitBtn.querySelector(".btn-loading");
+
+    const tagWrap = document.getElementById("tagWrap");
+    const chips = Array.from(tagWrap.querySelectorAll(".chip"));
+    const sevBtns = Array.from(document.querySelectorAll(".severity-btn"));
+
+    const dropzone = document.getElementById("dropzone");
+    const browseBtn = document.getElementById("browseBtn");
+    const filesInput = document.getElementById("files");
+    const fileList = document.getElementById("fileList");
+
+    const pvEmail = document.getElementById("pvEmail");
+    const pvType = document.getElementById("pvType");
+    const pvTags = document.getElementById("pvTags");
+    const pvSev  = document.getElementById("pvSev");
+    const pvPage = document.getElementById("pvPage");
+    const pvOk   = document.getElementById("pvOk");
+    const pvMsg  = document.getElementById("pvMsg");
+    const pvFiles= document.getElementById("pvFiles");
+    const statusPill = document.getElementById("statusPill");
+
+    const MAX_FILES = 3;
+    const MAX_MB = 2;
+    let selectedFiles = [];
+
+    function setStatus(text){
+      statusPill.innerHTML = `<i class="bi bi-circle-fill me-1" style="font-size:.6rem"></i> ${text}`;
+    }
 
-      </div>
-    </div>
+    function showError(msg){
+      errorText.textContent = msg;
+      errorBanner.style.display = "block";
+      successBanner.style.display = "none";
+      errorBanner.scrollIntoView({behavior:"smooth", block:"start"});
+    }
 
-        </div> <!-- .feedback-content -->
-      </div> <!-- .container-fluid -->
-    </div> <!-- .body-wrapper -->
-  </div> <!-- .page-wrapper -->
-
-<script>
-  $(document).ready(function() {
-    $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
-    $("#header").load("/admin/component/header-component.html");
-    // toolbar hookups
-    document.getElementById('toolbarSubmit')?.addEventListener('click', () => document.getElementById('submitBtn').click());
-    document.getElementById('toolbarClear')?.addEventListener('click', () => document.getElementById('clearBtn').click());
-  });
-
-  const form = document.getElementById("feedbackForm");
-  const successBanner = document.getElementById("successBanner");
-  const errorBanner = document.getElementById("errorBanner");
-  const errorText = document.getElementById("errorText");
-
-  const emailEl = document.getElementById("email");
-  const typeEl = document.getElementById("type");
-  const messageEl = document.getElementById("message");
-  const pageEl = document.getElementById("page");
-  const okEl = document.getElementById("okToContact");
-  const charCount = document.getElementById("charCount");
-  const severityHidden = document.getElementById("severity");
-
-  const msgErr = document.getElementById("messageErr");
-  const clearBtn = document.getElementById("clearBtn");
-  const submitBtn = document.getElementById("submitBtn");
-  const btnText = submitBtn.querySelector(".btn-text");
-  const btnLoading = submitBtn.querySelector(".btn-loading");
-
-  const tagWrap = document.getElementById("tagWrap");
-  const chips = Array.from(tagWrap.querySelectorAll(".chip"));
-
-  const sevBtns = Array.from(document.querySelectorAll(".severity-btn"));
-
-  const dropzone = document.getElementById("dropzone");
-  const browseBtn = document.getElementById("browseBtn");
-  const filesInput = document.getElementById("files");
-  const fileList = document.getElementById("fileList");
-
-  // Preview fields
-  const pvEmail = document.getElementById("pvEmail");
-  const pvType = document.getElementById("pvType");
-  const pvTags = document.getElementById("pvTags");
-  const pvSev  = document.getElementById("pvSev");
-  const pvPage = document.getElementById("pvPage");
-  const pvOk   = document.getElementById("pvOk");
-  const pvMsg  = document.getElementById("pvMsg");
-  const pvFiles= document.getElementById("pvFiles");
-  const statusPill = document.getElementById("statusPill");
-
-  const MAX_FILES = 3;
-  const MAX_MB = 2;
-  let selectedFiles = []; // local list
-
-  function setStatus(text){
-    statusPill.innerHTML = `<i class="bi bi-circle-fill me-1" style="font-size:.6rem"></i> ${text}`;
-  }
-
-  function showError(msg){
-    errorText.textContent = msg;
-    errorBanner.style.display = "block";
-    successBanner.style.display = "none";
-    errorBanner.scrollIntoView({behavior:"smooth", block:"start"});
-  }
-  function showSuccess(){
-    successBanner.style.display = "block";
-    errorBanner.style.display = "none";
-    successBanner.scrollIntoView({behavior:"smooth", block:"start"});
-    setTimeout(()=> successBanner.style.display="none", 5000);
-  }
-
-  function updateChar(){
-    charCount.textContent = `${messageEl.value.length} / 1000`;
-    pvMsg.textContent = messageEl.value.trim() ? messageEl.value : "Start typing…";
-  }
-
-  function getSelectedTags(){
-    return chips
-      .filter(ch => ch.classList.contains("active"))
-      .map(ch => ch.querySelector("input").value);
-  }
-
-  function updatePreview(){
-    pvEmail.textContent = emailEl.value || "—";
-    pvType.textContent = typeEl.value || "—";
-    const tags = getSelectedTags();
-    pvTags.textContent = tags.length ? tags.join(", ") : "—";
-    pvSev.textContent = severityHidden.value || "—";
-    pvPage.textContent = pageEl.value || "—";
-    pvOk.textContent = okEl.checked ? "Yes" : "No";
-    pvFiles.textContent = selectedFiles.length ? selectedFiles.map(f => f.name).join(", ") : "—";
-
-    const hasAnything = !!(emailEl.value || typeEl.value || messageEl.value || pageEl.value || tags.length || severityHidden.value || selectedFiles.length);
-    setStatus(hasAnything ? "Draft" : "Empty");
-  }
-
-  // Chips toggle
-  chips.forEach(chip => {
-    chip.addEventListener("click", () => {
-      chip.classList.toggle("active");
-      updatePreview();
-    });
-  });
+    function showSuccess(){
+      successBanner.style.display = "block";
+      errorBanner.style.display = "none";
+      successBanner.scrollIntoView({behavior:"smooth", block:"start"});
+      setTimeout(() => {
+        successBanner.style.display = "none";
+      }, 5000);
+    }
 
-  // Severity toggle
-  sevBtns.forEach(btn => {
-    btn.addEventListener("click", () => {
-      sevBtns.forEach(b => b.classList.remove("active"));
-      if (severityHidden.value === btn.dataset.sev){
-        severityHidden.value = "";
-      } else {
-        btn.classList.add("active");
-        severityHidden.value = btn.dataset.sev;
-      }
-      updatePreview();
-    });
-  });
-
-  // File helpers (UI only)
-  function bytesToSize(bytes){
-    const mb = bytes / (1024*1024);
-    return `${mb.toFixed(2)} MB`;
-  }
-
-  function renderFiles(){
-    fileList.innerHTML = "";
-    selectedFiles.forEach((f, idx) => {
-      const div = document.createElement("div");
-      div.className = "file-item";
-      div.innerHTML = `
-        <div class="file-meta">
-          <i class="bi ${f.type.includes("pdf") ? "bi-file-earmark-pdf" : "bi-image"} fs-5"></i>
-          <div class="min-width-0">
-            <div class="file-name fw-semibold">${f.name}</div>
-            <div class="hint mb-0">${bytesToSize(f.size)}</div>
-          </div>
-        </div>
-        <button type="button" class="btn btn-outline-danger btn-sm small-btn" data-remove="${idx}">
-          <i class="bi bi-x-lg"></i>
-        </button>
-      `;
-      fileList.appendChild(div);
+    function updateChar(){
+      charCount.textContent = `${messageEl.value.length} / 1000`;
+      pvMsg.textContent = messageEl.value.trim() ? messageEl.value : "Start typing…";
+    }
+
+    function getSelectedTags(){
+      return chips
+        .filter(ch => ch.classList.contains("active"))
+        .map(ch => ch.querySelector("input").value);
+    }
+
+    function updatePreview(){
+      pvEmail.textContent = emailEl.value || "—";
+      pvType.textContent = typeEl.value || "—";
+      const tags = getSelectedTags();
+      pvTags.textContent = tags.length ? tags.join(", ") : "—";
+      pvSev.textContent = severityHidden.value || "—";
+      pvPage.textContent = pageEl.value || "—";
+      pvOk.textContent = okEl.checked ? "Yes" : "No";
+      pvFiles.textContent = selectedFiles.length ? selectedFiles.map(f => f.name).join(", ") : "—";
+
+      const hasAnything = !!(emailEl.value || typeEl.value || messageEl.value || pageEl.value || tags.length || severityHidden.value || selectedFiles.length);
+      setStatus(hasAnything ? "Draft" : "Empty");
+    }
+
+    chips.forEach(chip => {
+      chip.addEventListener("click", () => {
+        chip.classList.toggle("active");
+        updatePreview();
+      });
     });
 
-    fileList.querySelectorAll("[data-remove]").forEach(btn => {
+    sevBtns.forEach(btn => {
       btn.addEventListener("click", () => {
-        const i = parseInt(btn.getAttribute("data-remove"), 10);
-        selectedFiles.splice(i, 1);
-        renderFiles();
+        sevBtns.forEach(b => b.classList.remove("active"));
+        if (severityHidden.value === btn.dataset.sev){
+          severityHidden.value = "";
+        } else {
+          btn.classList.add("active");
+          severityHidden.value = btn.dataset.sev;
+        }
         updatePreview();
       });
     });
 
-    updatePreview();
-  }
-
-  function validateAndAddFiles(files){
-    const incoming = Array.from(files);
-    for (const f of incoming){
-      if (selectedFiles.length >= MAX_FILES){
-        showError(`You can attach up to ${MAX_FILES} files.`);
-        break;
-      }
-      const sizeMb = f.size / (1024*1024);
-      if (sizeMb > MAX_MB){
-        showError(`"${f.name}" is larger than ${MAX_MB}MB.`);
-        continue;
-      }
-      const okType = /image\/(png|jpeg)|application\/pdf/.test(f.type);
-      if (!okType){
-        showError(`"${f.name}" type not allowed. Use PNG/JPG/PDF only.`);
-        continue;
+    function bytesToSize(bytes){
+      const mb = bytes / (1024 * 1024);
+      return `${mb.toFixed(2)} MB`;
+    }
+
+    function renderFiles(){
+      fileList.innerHTML = "";
+      selectedFiles.forEach((f, idx) => {
+        const div = document.createElement("div");
+        div.className = "file-item";
+        div.innerHTML = `
+          <div class="file-meta">
+            <i class="bi ${f.type.includes("pdf") ? "bi-file-earmark-pdf" : "bi-image"} fs-5"></i>
+            <div class="min-width-0">
+              <div class="file-name fw-semibold">${f.name}</div>
+              <div class="hint mb-0">${bytesToSize(f.size)}</div>
+            </div>
+          </div>
+          <button type="button" class="btn btn-outline-danger btn-sm small-btn" data-remove="${idx}">
+            <i class="bi bi-x-lg"></i>
+          </button>
+        `;
+        fileList.appendChild(div);
+      });
+
+      fileList.querySelectorAll("[data-remove]").forEach(btn => {
+        btn.addEventListener("click", () => {
+          const i = parseInt(btn.getAttribute("data-remove"), 10);
+          selectedFiles.splice(i, 1);
+          renderFiles();
+          updatePreview();
+        });
+      });
+
+      updatePreview();
+    }
+
+    function validateAndAddFiles(files){
+      const incoming = Array.from(files);
+      for (const f of incoming){
+        if (selectedFiles.length >= MAX_FILES){
+          showError(`You can attach up to ${MAX_FILES} files.`);
+          break;
+        }
+        const sizeMb = f.size / (1024 * 1024);
+        if (sizeMb > MAX_MB){
+          showError(`"${f.name}" is larger than ${MAX_MB}MB.`);
+          continue;
+        }
+        const okType = /image\/(png|jpeg)|application\/pdf/.test(f.type);
+        if (!okType){
+          showError(`"${f.name}" type not allowed. Use PNG/JPG/PDF only.`);
+          continue;
+        }
+        selectedFiles.push(f);
       }
-      selectedFiles.push(f);
+      renderFiles();
     }
-    renderFiles();
-  }
 
-  browseBtn.addEventListener("click", () => filesInput.click());
-  filesInput.addEventListener("change", (e) => validateAndAddFiles(e.target.files));
+    browseBtn.addEventListener("click", () => filesInput.click());
+    filesInput.addEventListener("change", (e) => validateAndAddFiles(e.target.files));
 
-  // Drag n drop UI
-  ["dragenter","dragover"].forEach(evt => {
-    dropzone.addEventListener(evt, (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      dropzone.classList.add("drag");
-    });
-  });
-  ["dragleave","drop"].forEach(evt => {
-    dropzone.addEventListener(evt, (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      dropzone.classList.remove("drag");
+    ["dragenter","dragover"].forEach(evt => {
+      dropzone.addEventListener(evt, (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dropzone.classList.add("drag");
+      });
     });
-  });
-  dropzone.addEventListener("drop", (e) => validateAndAddFiles(e.dataTransfer.files));
-
-  // Live updates
-  [emailEl, typeEl, pageEl].forEach(el => el.addEventListener("input", updatePreview));
-  okEl.addEventListener("change", updatePreview);
-  messageEl.addEventListener("input", () => { updateChar(); updatePreview(); });
-
-  updateChar();
-  updatePreview();
-
-  // Clear
-  clearBtn.addEventListener("click", () => {
-    form.reset();
-    msgErr.style.display = "none";
-    severityHidden.value = "";
-    sevBtns.forEach(b => b.classList.remove("active"));
-    chips.forEach(c => c.classList.remove("active"));
-    selectedFiles = [];
-    renderFiles();
-    updateChar();
-    updatePreview();
-    successBanner.style.display = "none";
-    errorBanner.style.display = "none";
-    setStatus("Empty");
-  });
-
-  // Submit
-  form.addEventListener("submit", async (e) => {
-    e.preventDefault();
-    msgErr.style.display = "none";
-    successBanner.style.display = "none";
-    errorBanner.style.display = "none";
-
-    const email = emailEl.value.trim();
-    const type = typeEl.value.trim();
-    const message = messageEl.value.trim();
-
-    let valid = true;
-    if (!emailEl.checkValidity()){ emailEl.classList.add("is-invalid"); valid = false; }
-    else emailEl.classList.remove("is-invalid");
-
-    if (!type){ typeEl.classList.add("is-invalid"); valid = false; }
-    else typeEl.classList.remove("is-invalid");
-
-    if (!message){
-      msgErr.style.display = "block";
-      valid = false;
-    }
-
-    if (!valid) {
-      showError("Please fill the required fields correctly.");
-      return;
-    }
-
-    // UI loading state
-    submitBtn.disabled = true;
-    btnText.classList.add("d-none");
-    btnLoading.classList.remove("d-none");
-
-    try{
-      const payload = {
-        email,
-        type,
-        message,
-        page: pageEl.value.trim() || null,
-        severity: severityHidden.value || null,
-        tags: getSelectedTags(),
-        okToContact: okEl.checked,
-        attachments: selectedFiles.map(f => ({ name: f.name, size: f.size, type: f.type })) // UI-only metadata
-      };
-
-      const res = await fetch("/api/feedback", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload)
+
+    ["dragleave","drop"].forEach(evt => {
+      dropzone.addEventListener(evt, (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dropzone.classList.remove("drag");
       });
+    });
 
-      if (!res.ok){
-        const t = await res.text().catch(()=> "");
-        throw new Error(t || "Server error");
-      }
+    dropzone.addEventListener("drop", (e) => validateAndAddFiles(e.dataTransfer.files));
 
-      showSuccess();
-      setStatus("Sent");
+    [emailEl, typeEl, pageEl].forEach(el => el.addEventListener("input", updatePreview));
+    okEl.addEventListener("change", updatePreview);
+    messageEl.addEventListener("input", () => {
+      updateChar();
+      updatePreview();
+    });
 
-      // Reset form after submit
+    updateChar();
+    updatePreview();
+
+    clearBtn.addEventListener("click", () => {
       form.reset();
+      msgErr.style.display = "none";
       severityHidden.value = "";
       sevBtns.forEach(b => b.classList.remove("active"));
       chips.forEach(c => c.classList.remove("active"));
@@ -742,31 +667,100 @@ <h5 class="section-title mb-1">Submit feedback</h5>
       renderFiles();
       updateChar();
       updatePreview();
-    } catch(err){
-      console.error(err);
-      showError("Failed to send feedback. Please try again.");
-    } finally {
-      submitBtn.disabled = false;
-      btnLoading.classList.add("d-none");
-      btnText.classList.remove("d-none");
-    }
-  });
-</script>
+      successBanner.style.display = "none";
+      errorBanner.style.display = "none";
+      setStatus("Empty");
+      emailEl.classList.remove("is-invalid");
+      typeEl.classList.remove("is-invalid");
+    });
 
-      </div>
-        </div>
-      <div id="footer"></div>
-    </div>
-  </div>
+    form.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      msgErr.style.display = "none";
+      successBanner.style.display = "none";
+      errorBanner.style.display = "none";
+
+      const email = emailEl.value.trim();
+      const type = typeEl.value.trim();
+      const message = messageEl.value.trim();
+
+      let valid = true;
+
+      if (!emailEl.checkValidity()){
+        emailEl.classList.add("is-invalid");
+        valid = false;
+      } else {
+        emailEl.classList.remove("is-invalid");
+      }
+
+      if (!type){
+        typeEl.classList.add("is-invalid");
+        valid = false;
+      } else {
+        typeEl.classList.remove("is-invalid");
+      }
 
-<script>
-  $(document).ready(function() {
-    // Load sidebar/header/footer components
-    $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
-    $("#header").load("/admin/component/header-component.html");
-    $("#footer").load("/admin/component/footer-component.html");
-  });
-</script>
+      if (!message){
+        msgErr.style.display = "block";
+        valid = false;
+      }
 
+      if (!valid) {
+        showError("Please fill the required fields correctly.");
+        return;
+      }
+
+      submitBtn.disabled = true;
+      btnText.classList.add("d-none");
+      btnLoading.classList.remove("d-none");
+
+      try{
+        const payload = {
+          email,
+          type,
+          message,
+          page: pageEl.value.trim() || null,
+          severity: severityHidden.value || null,
+          tags: getSelectedTags(),
+          okToContact: okEl.checked,
+          attachments: selectedFiles.map(f => ({
+            name: f.name,
+            size: f.size,
+            type: f.type
+          }))
+        };
+
+        const res = await fetch("/api/feedback", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        });
+
+        if (!res.ok){
+          const t = await res.text().catch(() => "");
+          throw new Error(t || "Server error");
+        }
+
+        showSuccess();
+        setStatus("Sent");
+
+        form.reset();
+        severityHidden.value = "";
+        sevBtns.forEach(b => b.classList.remove("active"));
+        chips.forEach(c => c.classList.remove("active"));
+        selectedFiles = [];
+        renderFiles();
+        updateChar();
+        updatePreview();
+      } catch(err){
+        console.error(err);
+        showError("Failed to send feedback. Please try again.");
+      } finally {
+        submitBtn.disabled = false;
+        btnLoading.classList.add("d-none");
+        btnText.classList.remove("d-none");
+      }
+    });
+  </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/hmi-data-insights.html b/src/Components/HMI/ui/public/admin/hmi-data-insights.html
index 7931972a3..24d7b2994 100644
--- a/src/Components/HMI/ui/public/admin/hmi-data-insights.html
+++ b/src/Components/HMI/ui/public/admin/hmi-data-insights.html
@@ -19,7 +19,6 @@
   <link rel="shortcut icon" type="image/png" href="/admin/images/logos/favicon.png" />
   <link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />
 
-  <!-- Font Awesome (icons) -->
   <script
     type="text/javascript"
     src="https://kit.fontawesome.com/8aa980d912.js"
@@ -38,6 +37,9 @@
   />
   <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
 
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
+
   <style>
     body {
       background-color: #f5f7fb;
@@ -142,325 +144,312 @@
     data-sidebar-position="fixed"
     data-header-position="fixed"
   >
-    <!-- Sidebar Start -->
     <div id="sidebar"></div>
-    <!--  Sidebar End -->
 
-    <!--  Main wrapper -->
     <div class="body-wrapper">
       <div id="header"></div>
 
       <div class="container-fluid">
-
-    <!-- PAGE HEADER -->
-    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
-      <div class="mb-3 mb-md-0">
-        <h2 class="fw-semibold mb-1">Data Insights</h2>
-        <p class="text-muted mb-0">
-          Explore detection trends and species activity for Project Echo.
-        </p>
-      </div>
-
-      <div class="d-flex flex-wrap justify-content-end gap-2">
-        <!-- Export buttons -->
-        <button class="btn btn-outline-secondary btn-sm" id="downloadCsvBtn">
-          <i class="bi bi-file-earmark-spreadsheet me-1"></i> Download CSV
-        </button>
-        <button class="btn btn-outline-secondary btn-sm" id="downloadPdfBtn">
-          <i class="bi bi-file-earmark-pdf me-1"></i> Download PDF
-        </button>
-
-        <!-- Quick range buttons -->
-        <div class="d-flex gap-2 ms-md-2">
-          <button class="btn btn-outline-secondary btn-sm btn-range active" data-range="7">
-            Last 7 days
-          </button>
-          <button class="btn btn-outline-secondary btn-sm btn-range" data-range="30">
-            Last 30 days
-          </button>
-          <button class="btn btn-outline-secondary btn-sm btn-range" data-range="all">
-            All time
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- FILTER CARD -->
-    <div class="card shadow-soft mb-4">
-      <div class="card-body">
-        <h6 class="fw-semibold mb-3">Custom date &amp; time range</h6>
-        <form class="row g-3 align-items-end" id="filterForm">
-          <div class="col-md-3">
-            <label for="fromDate" class="form-label">From date</label>
-            <input type="date" class="form-control" id="fromDate" />
-          </div>
-          <div class="col-md-3">
-            <label for="toDate" class="form-label">To date</label>
-            <input type="date" class="form-control" id="toDate" />
-          </div>
-          <div class="col-md-2">
-            <label for="fromTime" class="form-label">From time</label>
-            <input type="time" class="form-control" id="fromTime" />
-          </div>
-          <div class="col-md-2">
-            <label for="toTime" class="form-label">To time</label>
-            <input type="time" class="form-control" id="toTime" />
-          </div>
-          <div class="col-md-2">
-            <button
-              type="button"
-              class="btn btn-primary w-100"
-              id="applyFiltersBtn"
-            >
-              Apply filters
+        <div class="admin-page-status">
+          <div class="admin-error-banner d-none" role="alert" aria-live="polite">
+            <div class="admin-error-banner__content">
+              <i class="ti ti-alert-circle"></i>
+              <span>Something went wrong while loading this page.</span>
+            </div>
+            <button type="button" class="admin-error-banner__dismiss" aria-label="Dismiss error message">
+              <i class="ti ti-x"></i>
             </button>
           </div>
-        </form>
-      </div>
-    </div>
 
-    <!-- SUMMARY CARDS -->
-    <div class="row g-4 mb-4">
-      <div class="col-md-3">
-        <div class="card shadow-soft h-100">
-          <div class="card-body">
-            <p class="text-muted mb-1 small">Total detections</p>
-            <h3 class="fw-semibold mb-2" id="totalDetections">1,284</h3>
-            <span class="badge badge-soft-success small">
-              <i class="bi bi-arrow-up-right me-1"></i>+12.5% from last period
-            </span>
+          <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
+            <div class="spinner-border text-danger" aria-hidden="true"></div>
+            <span class="admin-loading-spinner__text">Loading...</span>
           </div>
         </div>
-      </div>
 
-      <div class="col-md-3">
-        <div class="card shadow-soft h-100">
-          <div class="card-body">
-            <p class="text-muted mb-1 small">Active species</p>
-            <h3 class="fw-semibold mb-2" id="activeSpecies">12</h3>
-            <span class="badge badge-soft-success small">
-              <i class="bi bi-arrow-up-right me-1"></i>+8.2% from last period
-            </span>
+        <!-- PAGE HEADER -->
+        <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
+          <div class="mb-3 mb-md-0">
+            <h2 class="fw-semibold mb-1">Data Insights</h2>
+            <p class="text-muted mb-0">
+              Explore detection trends and species activity for Project Echo.
+            </p>
           </div>
-        </div>
-      </div>
 
-      <div class="col-md-3">
-        <div class="card shadow-soft h-100">
-          <div class="card-body">
-            <p class="text-muted mb-1 small">Peak activity time</p>
-            <h3 class="fw-semibold mb-2" id="peakTime">6:00 PM</h3>
-            <span class="badge badge-soft-primary small">
-              <i class="bi bi-activity me-1"></i>Most detections
-            </span>
-          </div>
-        </div>
-      </div>
+          <div class="d-flex flex-wrap justify-content-end gap-2">
+            <button class="btn btn-outline-secondary btn-sm" id="downloadCsvBtn">
+              <i class="bi bi-file-earmark-spreadsheet me-1"></i> Download CSV
+            </button>
+            <button class="btn btn-outline-secondary btn-sm" id="downloadPdfBtn">
+              <i class="bi bi-file-earmark-pdf me-1"></i> Download PDF
+            </button>
 
-      <div class="col-md-3">
-        <div class="card shadow-soft h-100">
-          <div class="card-body">
-            <p class="text-muted mb-1 small">Avg. daily detections</p>
-            <h3 class="fw-semibold mb-2" id="avgDaily">43</h3>
-            <span class="badge badge-soft-danger small">
-              <i class="bi bi-arrow-down-right me-1"></i>-3.1% from last period
-            </span>
+            <div class="d-flex gap-2 ms-md-2">
+              <button class="btn btn-outline-secondary btn-sm btn-range active" data-range="7">
+                Last 7 days
+              </button>
+              <button class="btn btn-outline-secondary btn-sm btn-range" data-range="30">
+                Last 30 days
+              </button>
+              <button class="btn btn-outline-secondary btn-sm btn-range" data-range="all">
+                All time
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
 
-    <!-- CHARTS ROW -->
-    <div class="row g-4">
-      <!-- Line chart card -->
-      <div class="col-lg-8">
-        <div class="card shadow-soft">
-          <div class="card-header bg-white border-0 pb-0">
-            <div class="d-flex justify-content-between align-items-center">
-              <div>
-                <h5 class="mb-1">Detections over time</h5>
-                <p class="text-muted mb-0 small">
-                  Timeline of detections for the selected range.
-                </p>
+        <!-- FILTER CARD -->
+        <div class="card shadow-soft mb-4">
+          <div class="card-body">
+            <h6 class="fw-semibold mb-3">Custom date &amp; time range</h6>
+            <form class="row g-3 align-items-end" id="filterForm">
+              <div class="col-md-3">
+                <label for="fromDate" class="form-label">From date</label>
+                <input type="date" class="form-control" id="fromDate" />
               </div>
-              <div class="btn-group btn-group-sm" role="group">
-                <button
-                  type="button"
-                  class="btn btn-outline-success btn-species active"
-                  data-species="all"
-                >
-                  All species
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-outline-success btn-species"
-                  data-species="deer"
-                >
-                  Deer
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-outline-success btn-species"
-                  data-species="bear"
-                >
-                  Bear
-                </button>
+              <div class="col-md-3">
+                <label for="toDate" class="form-label">To date</label>
+                <input type="date" class="form-control" id="toDate" />
+              </div>
+              <div class="col-md-2">
+                <label for="fromTime" class="form-label">From time</label>
+                <input type="time" class="form-control" id="fromTime" />
+              </div>
+              <div class="col-md-2">
+                <label for="toTime" class="form-label">To time</label>
+                <input type="time" class="form-control" id="toTime" />
+              </div>
+              <div class="col-md-2">
                 <button
                   type="button"
-                  class="btn btn-outline-success btn-species"
-                  data-species="wolf"
+                  class="btn btn-primary w-100"
+                  id="applyFiltersBtn"
                 >
-                  Wolf
+                  Apply filters
                 </button>
               </div>
-            </div>
-          </div>
-          <div class="card-body">
-            <div class="chart-container">
-              <canvas id="detectionsChart"></canvas>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Bar chart card -->
-      <div class="col-lg-4">
-        <div class="card shadow-soft h-100">
-          <div class="card-header bg-white border-0 pb-0">
-            <h5 class="mb-1">Detections by species</h5>
-            <p class="text-muted mb-0 small">
-              Distribution of detections in the selected period.
-            </p>
-          </div>
-          <div class="card-body">
-            <div class="chart-container">
-              <canvas id="speciesChart"></canvas>
-            </div>
+            </form>
           </div>
         </div>
-      </div>
-    </div>
 
-    <!-- RECENT ACTIVITY & SYSTEM STATUS -->
-    <div class="row g-4 mt-4">
-      <!-- Recent Activity -->
-      <div class="col-lg-6">
-        <div class="card shadow-soft h-100">
-          <div class="card-body">
-            <h5 class="mb-1">Recent Activity</h5>
-            <p class="text-muted small mb-3">Latest wildlife detections</p>
-
-            <div class="activity-item d-flex justify-content-between align-items-center">
-              <div>
-                <div class="fw-semibold">White-tailed Deer</div>
-                <div class="text-muted small">Zone A-3</div>
+        <!-- SUMMARY CARDS -->
+        <div class="row g-4 mb-4">
+          <div class="col-md-3">
+            <div class="card shadow-soft h-100">
+              <div class="card-body">
+                <p class="text-muted mb-1 small">Total detections</p>
+                <h3 class="fw-semibold mb-2" id="totalDetections">1,284</h3>
+                <span class="badge badge-soft-success small">
+                  <i class="bi bi-arrow-up-right me-1"></i>+12.5% from last period
+                </span>
               </div>
-              <div class="text-muted small">2 minutes ago</div>
             </div>
+          </div>
 
-            <div class="activity-item d-flex justify-content-between align-items-center">
-              <div>
-                <div class="fw-semibold">Black Bear</div>
-                <div class="text-muted small">Zone B-1</div>
+          <div class="col-md-3">
+            <div class="card shadow-soft h-100">
+              <div class="card-body">
+                <p class="text-muted mb-1 small">Active species</p>
+                <h3 class="fw-semibold mb-2" id="activeSpecies">12</h3>
+                <span class="badge badge-soft-success small">
+                  <i class="bi bi-arrow-up-right me-1"></i>+8.2% from last period
+                </span>
               </div>
-              <div class="text-muted small">15 minutes ago</div>
             </div>
+          </div>
 
-            <div class="activity-item d-flex justify-content-between align-items-center">
-              <div>
-                <div class="fw-semibold">Gray Wolf</div>
-                <div class="text-muted small">Zone C-2</div>
+          <div class="col-md-3">
+            <div class="card shadow-soft h-100">
+              <div class="card-body">
+                <p class="text-muted mb-1 small">Peak activity time</p>
+                <h3 class="fw-semibold mb-2" id="peakTime">6:00 PM</h3>
+                <span class="badge badge-soft-primary small">
+                  <i class="bi bi-activity me-1"></i>Most detections
+                </span>
               </div>
-              <div class="text-muted small">1 hour ago</div>
             </div>
+          </div>
 
-            <div class="activity-item d-flex justify-content-between align-items-center">
-              <div>
-                <div class="fw-semibold">Red Fox</div>
-                <div class="text-muted small">Zone A-1</div>
+          <div class="col-md-3">
+            <div class="card shadow-soft h-100">
+              <div class="card-body">
+                <p class="text-muted mb-1 small">Avg. daily detections</p>
+                <h3 class="fw-semibold mb-2" id="avgDaily">43</h3>
+                <span class="badge badge-soft-danger small">
+                  <i class="bi bi-arrow-down-right me-1"></i>-3.1% from last period
+                </span>
               </div>
-              <div class="text-muted small">2 hours ago</div>
             </div>
           </div>
         </div>
-      </div>
-
-      <!-- System Status -->
-      <div class="col-lg-6">
-        <div class="card shadow-soft h-100">
-          <div class="card-body">
-            <h5 class="mb-1">System Status</h5>
-            <p class="text-muted small mb-3">Camera network health</p>
 
-            <div class="status-item d-flex justify-content-between align-items-center">
-              <div>
-                <div class="fw-semibold">Zone A</div>
-                <div class="text-muted small">6/6 online</div>
+        <!-- CHARTS ROW -->
+        <div class="row g-4">
+          <div class="col-lg-8">
+            <div class="card shadow-soft">
+              <div class="card-header bg-white border-0 pb-0">
+                <div class="d-flex justify-content-between align-items-center">
+                  <div>
+                    <h5 class="mb-1">Detections over time</h5>
+                    <p class="text-muted mb-0 small">
+                      Timeline of detections for the selected range.
+                    </p>
+                  </div>
+                  <div class="btn-group btn-group-sm" role="group">
+                    <button type="button" class="btn btn-outline-success btn-species active" data-species="all">
+                      All species
+                    </button>
+                    <button type="button" class="btn btn-outline-success btn-species" data-species="deer">
+                      Deer
+                    </button>
+                    <button type="button" class="btn btn-outline-success btn-species" data-species="bear">
+                      Bear
+                    </button>
+                    <button type="button" class="btn btn-outline-success btn-species" data-species="wolf">
+                      Wolf
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="card-body">
+                <div class="chart-container">
+                  <canvas id="detectionsChart"></canvas>
+                </div>
               </div>
-              <span class="status-pill status-ok">Operational</span>
             </div>
+          </div>
 
-            <div class="status-item d-flex justify-content-between align-items-center">
-              <div>
-                <div class="fw-semibold">Zone B</div>
-                <div class="text-muted small">8/8 online</div>
+          <div class="col-lg-4">
+            <div class="card shadow-soft h-100">
+              <div class="card-header bg-white border-0 pb-0">
+                <h5 class="mb-1">Detections by species</h5>
+                <p class="text-muted mb-0 small">
+                  Distribution of detections in the selected period.
+                </p>
+              </div>
+              <div class="card-body">
+                <div class="chart-container">
+                  <canvas id="speciesChart"></canvas>
+                </div>
               </div>
-              <span class="status-pill status-ok">Operational</span>
             </div>
+          </div>
+        </div>
 
-            <div class="status-item d-flex justify-content-between align-items-center">
-              <div>
-                <div class="fw-semibold">Zone C</div>
-                <div class="text-muted small">7/8 online</div>
+        <!-- RECENT ACTIVITY & SYSTEM STATUS -->
+        <div class="row g-4 mt-4">
+          <div class="col-lg-6">
+            <div class="card shadow-soft h-100">
+              <div class="card-body">
+                <h5 class="mb-1">Recent Activity</h5>
+                <p class="text-muted small mb-3">Latest wildlife detections</p>
+
+                <div class="activity-item d-flex justify-content-between align-items-center">
+                  <div>
+                    <div class="fw-semibold">White-tailed Deer</div>
+                    <div class="text-muted small">Zone A-3</div>
+                  </div>
+                  <div class="text-muted small">2 minutes ago</div>
+                </div>
+
+                <div class="activity-item d-flex justify-content-between align-items-center">
+                  <div>
+                    <div class="fw-semibold">Black Bear</div>
+                    <div class="text-muted small">Zone B-1</div>
+                  </div>
+                  <div class="text-muted small">15 minutes ago</div>
+                </div>
+
+                <div class="activity-item d-flex justify-content-between align-items-center">
+                  <div>
+                    <div class="fw-semibold">Gray Wolf</div>
+                    <div class="text-muted small">Zone C-2</div>
+                  </div>
+                  <div class="text-muted small">1 hour ago</div>
+                </div>
+
+                <div class="activity-item d-flex justify-content-between align-items-center">
+                  <div>
+                    <div class="fw-semibold">Red Fox</div>
+                    <div class="text-muted small">Zone A-1</div>
+                  </div>
+                  <div class="text-muted small">2 hours ago</div>
+                </div>
               </div>
-              <span class="status-pill status-warning">Warning</span>
             </div>
+          </div>
 
-            <div class="status-item d-flex justify-content-between align-items-center">
-              <div>
-                <div class="fw-semibold">Zone D</div>
-                <div class="text-muted small">4/4 online</div>
+          <div class="col-lg-6">
+            <div class="card shadow-soft h-100">
+              <div class="card-body">
+                <h5 class="mb-1">System Status</h5>
+                <p class="text-muted small mb-3">Camera network health</p>
+
+                <div class="status-item d-flex justify-content-between align-items-center">
+                  <div>
+                    <div class="fw-semibold">Zone A</div>
+                    <div class="text-muted small">6/6 online</div>
+                  </div>
+                  <span class="status-pill status-ok">Operational</span>
+                </div>
+
+                <div class="status-item d-flex justify-content-between align-items-center">
+                  <div>
+                    <div class="fw-semibold">Zone B</div>
+                    <div class="text-muted small">8/8 online</div>
+                  </div>
+                  <span class="status-pill status-ok">Operational</span>
+                </div>
+
+                <div class="status-item d-flex justify-content-between align-items-center">
+                  <div>
+                    <div class="fw-semibold">Zone C</div>
+                    <div class="text-muted small">7/8 online</div>
+                  </div>
+                  <span class="status-pill status-warning">Warning</span>
+                </div>
+
+                <div class="status-item d-flex justify-content-between align-items-center">
+                  <div>
+                    <div class="fw-semibold">Zone D</div>
+                    <div class="text-muted small">4/4 online</div>
+                  </div>
+                  <span class="status-pill status-ok">Operational</span>
+                </div>
               </div>
-              <span class="status-pill status-ok">Operational</span>
             </div>
           </div>
         </div>
+
       </div>
     </div>
 
-      </div> <!-- /container-fluid -->
-    </div> <!-- /body-wrapper -->
     <div id="footer"></div>
-    </div>
-  </div> <!-- /page-wrapper -->
+  </div>
 
-  <!-- Load sidebar + header -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript" src="/admin/js/sidebarmenu.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
-  
+
   <script type="text/javascript">
     $(document).ready(function() {
       $("#sidebar").load("/admin/component/sidebar-component.html", function() {
-        // Re-run sidebar init so handlers and active-link logic apply to loaded markup
         $.getScript('/admin/js/sidebarmenu.js');
       });
-
       $("#header").load("/admin/component/header-component.html");
       $("#footer").load("/admin/component/footer-component.html");
     });
+
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
   </script>
 
-  <!-- Bootstrap JS -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-  <!-- Chart.js -->
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  <!-- jsPDF for PDF export -->
   <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
 
   <script>
     document.addEventListener("DOMContentLoaded", function () {
-      // ----------------- helpers -----------------
       function generateDateLabels(days) {
         const labels = [];
         const today = new Date();
@@ -480,8 +469,7 @@ <h5 class="mb-1">System Status</h5>
         );
       }
 
-      // ----------------- initial setup -----------------
-      let currentRange = 7; // days
+      let currentRange = 7;
       let currentSpecies = "all";
 
       const detectionsCtx = document
@@ -491,11 +479,9 @@ <h5 class="mb-1">System Status</h5>
         .getElementById("speciesChart")
         .getContext("2d");
 
-      // initial labels & data
       let labels = generateDateLabels(currentRange);
       let detectionsData = generateRandomData(labels.length, 60, 30);
 
-      // line chart: detections over time
       const detectionsChart = new Chart(detectionsCtx, {
         type: "line",
         data: {
@@ -525,18 +511,12 @@ <h5 class="mb-1">System Status</h5>
             },
           },
           scales: {
-            x: {
-              grid: { display: false },
-            },
-            y: {
-              beginAtZero: true,
-              grid: { color: "#eef1f7" },
-            },
+            x: { grid: { display: false } },
+            y: { beginAtZero: true, grid: { color: "#eef1f7" } },
           },
         },
       });
 
-      // bar chart: detections by species
       const speciesChart = new Chart(speciesCtx, {
         type: "bar",
         data: {
@@ -567,18 +547,12 @@ <h5 class="mb-1">System Status</h5>
             },
           },
           scales: {
-            x: {
-              grid: { display: false },
-            },
-            y: {
-              beginAtZero: true,
-              grid: { color: "#eef1f7" },
-            },
+            x: { grid: { display: false } },
+            y: { beginAtZero: true, grid: { color: "#eef1f7" } },
           },
         },
       });
 
-      // ----------------- chart refresh logic -----------------
       function refreshCharts() {
         const baseBySpecies = {
           all: 60,
@@ -606,7 +580,6 @@ <h5 class="mb-1">System Status</h5>
         speciesChart.update();
       }
 
-      // ----------------- quick range buttons -----------------
       document.querySelectorAll(".btn-range").forEach((btn) => {
         btn.addEventListener("click", () => {
           document
@@ -620,7 +593,6 @@ <h5 class="mb-1">System Status</h5>
         });
       });
 
-      // ----------------- species filter buttons -----------------
       document.querySelectorAll(".btn-species").forEach((btn) => {
         btn.addEventListener("click", () => {
           document
@@ -633,7 +605,6 @@ <h5 class="mb-1">System Status</h5>
         });
       });
 
-      // ----------------- Apply filters button -----------------
       document
         .getElementById("applyFiltersBtn")
         .addEventListener("click", () => {
@@ -649,11 +620,9 @@ <h5 class="mb-1">System Status</h5>
             toTime,
           });
 
-          // In future: call backend API here with these filters.
           refreshCharts();
         });
 
-      // ----------------- CSV DOWNLOAD -----------------
       function downloadCSV() {
         let csv = "Date,Detections\n";
         labels.forEach((label, idx) => {
@@ -674,7 +643,6 @@ <h5 class="mb-1">System Status</h5>
         .getElementById("downloadCsvBtn")
         .addEventListener("click", downloadCSV);
 
-      // ----------------- PDF DOWNLOAD -----------------
       const { jsPDF } = window.jspdf;
 
       function downloadPDF() {
@@ -707,4 +675,4 @@ <h5 class="mb-1">System Status</h5>
     });
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/js/admin-page-state.js b/src/Components/HMI/ui/public/admin/js/admin-page-state.js
new file mode 100644
index 000000000..673f0444d
--- /dev/null
+++ b/src/Components/HMI/ui/public/admin/js/admin-page-state.js
@@ -0,0 +1,64 @@
+(function (window) {
+  "use strict";
+
+  function createAdminPageState(options) {
+    const settings = Object.assign(
+      {
+        errorBannerSelector: ".admin-error-banner",
+        errorMessageSelector: ".admin-error-banner__content span",
+        errorDismissSelector: ".admin-error-banner__dismiss",
+        loadingSpinnerSelector: ".admin-loading-spinner",
+        hiddenClass: "d-none",
+        defaultErrorMessage: "Something went wrong while loading this page."
+      },
+      options || {}
+    );
+
+    const errorBanner = document.querySelector(settings.errorBannerSelector);
+    const errorMessage = document.querySelector(settings.errorMessageSelector);
+    const errorDismiss = document.querySelector(settings.errorDismissSelector);
+    const loadingSpinner = document.querySelector(settings.loadingSpinnerSelector);
+
+    function showLoading() {
+      if (loadingSpinner) loadingSpinner.classList.remove(settings.hiddenClass);
+    }
+
+    function hideLoading() {
+      if (loadingSpinner) loadingSpinner.classList.add(settings.hiddenClass);
+    }
+
+    function showError(message) {
+      if (errorMessage) {
+        errorMessage.textContent = message || settings.defaultErrorMessage;
+      }
+      if (errorBanner) {
+        errorBanner.classList.remove(settings.hiddenClass);
+      }
+    }
+
+    function hideError() {
+      if (errorBanner) {
+        errorBanner.classList.add(settings.hiddenClass);
+      }
+    }
+
+    function resetPageState() {
+      hideError();
+      hideLoading();
+    }
+
+    if (errorDismiss) {
+      errorDismiss.addEventListener("click", hideError);
+    }
+
+    return {
+      showLoading,
+      hideLoading,
+      showError,
+      hideError,
+      resetPageState
+    };
+  }
+
+  window.createAdminPageState = createAdminPageState;
+})(window);
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/js/api-explorer.js b/src/Components/HMI/ui/public/admin/js/api-explorer.js
index d003f9763..6bfebf70f 100644
--- a/src/Components/HMI/ui/public/admin/js/api-explorer.js
+++ b/src/Components/HMI/ui/public/admin/js/api-explorer.js
@@ -1,99 +1,122 @@
 (() => {
-    const endpointEl = document.getElementById("endpoint");
-    const testBtn = document.getElementById("testBtn");
-    const buildBtn = document.getElementById("buildBtn");
-    const clearBtn = document.getElementById("clearBtn");
-  
-    const startTs = document.getElementById("startTs");
-    const endTs = document.getElementById("endTs");
-  
-    const output = document.getElementById("output");
-    const statusBadge = document.getElementById("statusBadge");
-    const lastChecked = document.getElementById("lastChecked");
-    const respTime = document.getElementById("respTime");
-  
-    function setBadge(type, text) {
-      statusBadge.textContent = text;
-      statusBadge.className = "badge " + type;
-    }
-  
-    function buildMovementTimeEndpoint() {
-      const start = (startTs.value || "").trim();
-      const end = (endTs.value || "").trim();
-      endpointEl.value = `/movement_time/${start}/${end}`;
-    }
-  
-    // Build button
-    buildBtn?.addEventListener("click", () => {
-      buildMovementTimeEndpoint();
-    });
-  
-    // Clear output
-    clearBtn?.addEventListener("click", () => {
-      output.textContent = "Click \"Test\" to send a request.";
-      setBadge("bg-secondary", "Status: not checked");
-      lastChecked.textContent = "Last checked: —";
-      respTime.textContent = "Response time: —";
+  const endpointEl = document.getElementById("endpoint");
+  const testBtn = document.getElementById("testBtn");
+  const buildBtn = document.getElementById("buildBtn");
+  const clearBtn = document.getElementById("clearBtn");
+
+  const startTs = document.getElementById("startTs");
+  const endTs = document.getElementById("endTs");
+
+  const output = document.getElementById("output");
+  const statusBadge = document.getElementById("statusBadge");
+  const lastChecked = document.getElementById("lastChecked");
+  const respTime = document.getElementById("respTime");
+
+  const pageState = createAdminPageState();
+  pageState.resetPageState();
+
+  function setBadge(type, text) {
+    statusBadge.textContent = text;
+    statusBadge.className = "badge " + type;
+  }
+
+  function buildMovementTimeEndpoint() {
+    const start = (startTs.value || "").trim();
+    const end = (endTs.value || "").trim();
+    endpointEl.value = `/movement_time/${start}/${end}`;
+  }
+
+  buildBtn?.addEventListener("click", () => {
+    buildMovementTimeEndpoint();
+  });
+
+  clearBtn?.addEventListener("click", () => {
+    output.textContent = 'Click "Test" to send a request.';
+    setBadge("bg-secondary", "Status: not checked");
+    lastChecked.textContent = "Last checked: —";
+    respTime.textContent = "Response time: —";
+    pageState.hideError();
+    pageState.hideLoading();
+  });
+
+  document.querySelectorAll("[data-ep]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const ep = btn.getAttribute("data-ep");
+      endpointEl.value = ep;
+
+      if (ep && ep.startsWith("/movement_time/") && startTs && endTs) {
+        buildMovementTimeEndpoint();
+      }
     });
-  
-    // Clicking an endpoint from lists fills the input
-    document.querySelectorAll("[data-ep]").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        const ep = btn.getAttribute("data-ep");
-        endpointEl.value = ep;
-  
-        // If user clicked movement_time placeholder, also rebuild from inputs
-        if (ep && ep.startsWith("/movement_time/") && startTs && endTs) {
-          buildMovementTimeEndpoint();
-        }
+  });
+
+  testBtn?.addEventListener("click", async () => {
+    const endpoint = (endpointEl.value || "").trim();
+
+    lastChecked.textContent = "Last checked: " + new Date().toLocaleString();
+    respTime.textContent = "Response time: —";
+    output.textContent = `Sending GET ${endpoint}...\n`;
+
+    const url = endpoint.startsWith("http")
+      ? endpoint
+      : `${window.location.origin}${endpoint.startsWith("/") ? "" : "/"}${endpoint}`;
+
+    pageState.hideError();
+    pageState.showLoading();
+    setBadge("bg-warning", "Status: testing...");
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 5000);
+
+    try {
+      const t0 = performance.now();
+      const res = await fetch(url, {
+        method: "GET",
+        signal: controller.signal
       });
-    });
-  
-    testBtn.addEventListener("click", async () => {
-      const endpoint = (endpointEl.value || "").trim();
-      lastChecked.textContent = "Last checked: " + new Date().toLocaleString();
-      respTime.textContent = "Response time: —";
-      output.textContent = `Sending GET ${endpoint}...\n`;
-  
-      // Build a safe URL to avoid relative path issues
-      const url = endpoint.startsWith("http")
-        ? endpoint
-        : `${window.location.origin}${endpoint.startsWith("/") ? "" : "/"}${endpoint}`;
-  
-      try {
-        setBadge("bg-warning", "Status: testing...");
-  
-        const t0 = performance.now();
-        const res = await fetch(url, { method: "GET" });
-        const t1 = performance.now();
-        const ms = Math.round(t1 - t0);
-  
-        respTime.textContent = `Response time: ${ms} ms`;
-  
-        const contentType = res.headers.get("content-type") || "";
-        const raw = await res.text();
-  
-        setBadge(res.ok ? "bg-success" : "bg-danger", `Status: ${res.status}`);
-  
-        let body = raw;
-        if (contentType.includes("application/json")) {
-          try {
-            body = JSON.stringify(JSON.parse(raw), null, 2);
-          } catch (e) {}
+      const t1 = performance.now();
+      const ms = Math.round(t1 - t0);
+
+      respTime.textContent = `Response time: ${ms} ms`;
+
+      const contentType = res.headers.get("content-type") || "";
+      const raw = await res.text();
+
+      setBadge(res.ok ? "bg-success" : "bg-danger", `Status: ${res.status}`);
+
+      let body = raw;
+      if (contentType.includes("application/json")) {
+        try {
+          body = JSON.stringify(JSON.parse(raw), null, 2);
+        } catch (e) {
+          // keep raw text if JSON parsing fails
         }
-  
-        output.textContent =
-          `Request: GET ${url}\n` +
-          `HTTP Status: ${res.status}\n` +
-          `Content-Type: ${contentType || "unknown"}\n\n` +
-          `Response:\n${body}`;
-      } catch (err) {
-        setBadge("bg-danger", "Status: failed");
-        output.textContent =
-          `Request: GET ${url}\n\n` +
-          `Error:\n${err?.message || String(err)}`;
       }
-    });
-  })();
-  
-  
\ No newline at end of file
+
+      if (!res.ok) {
+        pageState.showError(`Request failed with status ${res.status}.`);
+      }
+
+      output.textContent =
+        `Request: GET ${url}\n` +
+        `HTTP Status: ${res.status}\n` +
+        `Content-Type: ${contentType || "unknown"}\n\n` +
+        `Response:\n${body}`;
+    } catch (err) {
+      setBadge("bg-danger", "Status: failed");
+
+      if (err.name === "AbortError") {
+        pageState.showError("Request timed out. Please try again.");
+      } else {
+        pageState.showError("Failed to fetch API response.");
+      }
+
+      output.textContent =
+        `Request: GET ${url}\n\n` +
+        `Error:\n${err?.message || String(err)}`;
+    } finally {
+      clearTimeout(timeoutId);
+      pageState.hideLoading();
+    }
+  });
+})();
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/notifications.html b/src/Components/HMI/ui/public/admin/notifications.html
index 5df59c258..51fb95184 100644
--- a/src/Components/HMI/ui/public/admin/notifications.html
+++ b/src/Components/HMI/ui/public/admin/notifications.html
@@ -2,62 +2,108 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Notifications</title>
-    <link rel="stylesheet" type="text/css" href="/admin/css/styles.min.css" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
-    <script type="text/javascript" src="https://kit.fontawesome.com/8aa980d912.js" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="/admin/js/app.min.js"></script>
-    <script type="text/javascript" src="/admin/js/notifications.js"></script>
-    <link rel="stylesheet" type="text/css" href="./admin/css/notifications.css" />
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Notifications</title>
+
+  <link rel="stylesheet" type="text/css" href="/admin/css/styles.min.css" />
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+    crossorigin="anonymous"
+  />
+
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
+  <script
+    type="text/javascript"
+    src="https://kit.fontawesome.com/8aa980d912.js"
+    crossorigin="anonymous"
+  ></script>
+
+  <script type="text/javascript" src="/admin/js/app.min.js"></script>
+  <script type="text/javascript" src="/admin/js/notifications.js"></script>
+
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
+
+  <!-- Fixed CSS path -->
+  <link rel="stylesheet" type="text/css" href="/admin/css/notifications.css" />
 </head>
 
 <body>
-<!-- Body Wrapper -->
-<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
-     data-sidebar-position="fixed" data-header-position="fixed">
-    <!-- Sidebar Start -->
+  <div
+    class="page-wrapper"
+    id="main-wrapper"
+    data-layout="vertical"
+    data-navbarbg="skin6"
+    data-sidebartype="full"
+    data-sidebar-position="fixed"
+    data-header-position="fixed"
+  >
     <div id="sidebar"></div>
-    <!-- Sidebar End -->
-    <!-- Main wrapper -->
+
     <div class="body-wrapper">
-        <div id="header"></div>
-        <div class="container-fluid">
-            <div class="card">
-                <div class="card-body">
-                    <div class="notification-header">
-                        <h2>Notifications</h2>
-                        <div class="btn-group">
-                            <button class="btn btn-sm btn-outline-primary" id="mark-all-read">
-                                <i class="fas fa-check-circle me-1"></i> Mark All as Read
-                            </button>
-                            <button class="btn btn-sm btn-outline-danger" id="delete-all-read">
-                                <i class="fas fa-trash-alt me-1"></i> Delete Read
-                            </button>
-                        </div>
-                    </div>
-                    <!-- Notification List -->
-                    <div id="notification-list">
-                        <!-- Notifications will be loaded here -->
-                    </div>
-                </div>
+      <div id="header"></div>
+
+      <div class="container-fluid">
+        <div class="admin-page-status">
+          <div class="admin-error-banner d-none" role="alert" aria-live="polite">
+            <div class="admin-error-banner__content">
+              <i class="ti ti-alert-circle"></i>
+              <span>Something went wrong while loading this page.</span>
             </div>
+            <button
+              type="button"
+              class="admin-error-banner__dismiss"
+              aria-label="Dismiss error message"
+            >
+              <i class="ti ti-x"></i>
+            </button>
+          </div>
+
+          <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
+            <div class="spinner-border text-danger" aria-hidden="true"></div>
+            <span class="admin-loading-spinner__text">Loading...</span>
+          </div>
         </div>
+
+        <div class="card">
+          <div class="card-body">
+            <div class="notification-header">
+              <h2>Notifications</h2>
+              <div class="btn-group">
+                <button class="btn btn-sm btn-outline-primary" id="mark-all-read">
+                  <i class="fas fa-check-circle me-1"></i> Mark All as Read
+                </button>
+                <button class="btn btn-sm btn-outline-danger" id="delete-all-read">
+                  <i class="fas fa-trash-alt me-1"></i> Delete Read
+                </button>
+              </div>
+            </div>
+
+            <div id="notification-list">
+              <!-- Notifications will be loaded here -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer"></div>
     </div>
-</div>
+  </div>
 
-<script>
+  <script>
     $(document).ready(function() {
-        // Load components
-        $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
-        $("#header").load("/admin/component/header-component.html");
-        $("#footer").load("/admin/component/footer-component.html");
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
+      });
+      $("#header").load("/admin/component/header-component.html");
+      $("#footer").load("/admin/component/footer-component.html");
     });
-</script>
+
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
+  </script>
 </body>
-<div id="footer"></div>
-</div>
 </html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/profile.html b/src/Components/HMI/ui/public/admin/profile.html
index 1aa092bbf..5163ff263 100644
--- a/src/Components/HMI/ui/public/admin/profile.html
+++ b/src/Components/HMI/ui/public/admin/profile.html
@@ -5,46 +5,95 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Echo Admin - Profile</title>
+
   <link rel="shortcut icon" type="image/png" href="/admin/images/logos/favicon.png" />
   <link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />
-  <link type="text/css" rel="stylesheet" href="./admin/css/profile.css" />
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
-  <script type="text/javascript" src="https://kit.fontawesome.com/8aa980d912.js" crossorigin="anonymous"></script>
-
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
-  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
+  <link type="text/css" rel="stylesheet" href="/admin/css/profile.css" />
+
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+    crossorigin="anonymous"
+  />
+
+  <script
+    type="text/javascript"
+    src="https://kit.fontawesome.com/8aa980d912.js"
+    crossorigin="anonymous"
+  ></script>
+
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+  />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"
+  />
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"
+  ></script>
 
   <script type="text/javascript" src="/admin/js/sidebarmenu.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" />
   <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
-  <script type="text/javascript" src="./admin/js/dashboard.js"></script>
+
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
 </head>
 
 <body>
-  <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
-    data-sidebar-position="fixed" data-header-position="fixed">
-    <!-- Sidebar Start -->
+  <div
+    class="page-wrapper"
+    id="main-wrapper"
+    data-layout="vertical"
+    data-navbarbg="skin6"
+    data-sidebartype="full"
+    data-sidebar-position="fixed"
+    data-header-position="fixed"
+  >
     <div id="sidebar"></div>
-    <!-- Sidebar End -->
-    <!-- Main wrapper -->
+
     <div class="body-wrapper">
       <div id="header"></div>
+
       <div class="container-fluid">
+        <div class="admin-page-status">
+          <div class="admin-error-banner d-none" role="alert" aria-live="polite">
+            <div class="admin-error-banner__content">
+              <i class="ti ti-alert-circle"></i>
+              <span>Something went wrong while loading this page.</span>
+            </div>
+            <button type="button" class="admin-error-banner__dismiss" aria-label="Dismiss error message">
+              <i class="ti ti-x"></i>
+            </button>
+          </div>
+
+          <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
+            <div class="spinner-border text-danger" aria-hidden="true"></div>
+            <span class="admin-loading-spinner__text">Loading...</span>
+          </div>
+        </div>
+
         <!-- Profile Card -->
         <div class="card profile-card">
           <div class="card-body">
-            <!-- Public Profile Section -->
             <h5 class="card-title fw-semibold mb-4">Profile</h5>
-            
+
             <div class="profile-picture-section mb-4">
               <div class="d-flex align-items-center">
                 <div class="profile-image-container me-3">
-                  <img src="./admin/images/default-profile.png" alt="Profile Picture" class="profile-image rounded-circle">
+                  <img
+                    src="/admin/images/default-profile.png"
+                    alt="Profile Picture"
+                    class="profile-image rounded-circle"
+                  >
                 </div>
                 <div>
                   <button type="button" class="btn btn-primary btn-sm me-2 change-picture-btn">Change Picture</button>
@@ -89,25 +138,27 @@ <h5 class="card-title fw-semibold mb-4">Profile</h5>
         <!-- Change Password Card -->
         <div class="card change-password-card">
           <div class="card-body">
-            <!-- Change Password Section -->
             <h5 class="card-title fw-semibold mb-4">Change Password</h5>
-            
+
             <form id="change-password-form">
               <div class="mb-3 position-relative">
                 <label for="currentPassword" class="form-label">Current Password</label>
                 <input type="password" class="form-control" id="currentPassword" required>
                 <i class="fas fa-eye toggle-password" data-target="#currentPassword" style="position: absolute; right: 10px; top: 38px; cursor: pointer; color: #6c757d;"></i>
               </div>
+
               <div class="mb-3 position-relative">
                 <label for="newPassword" class="form-label">New Password</label>
                 <input type="password" class="form-control" id="newPassword" required>
                 <i class="fas fa-eye toggle-password" data-target="#newPassword" style="position: absolute; right: 10px; top: 38px; cursor: pointer; color: #6c757d;"></i>
               </div>
+
               <div class="mb-3 position-relative">
                 <label for="confirmPassword" class="form-label">Confirm New Password</label>
                 <input type="password" class="form-control" id="confirmPassword" required>
                 <i class="fas fa-eye toggle-password" data-target="#confirmPassword" style="position: absolute; right: 10px; top: 38px; cursor: pointer; color: #6c757d;"></i>
               </div>
+
               <div class="mb-3">
                 <button type="submit" class="btn btn-primary">Change Password</button>
               </div>
@@ -118,16 +169,19 @@ <h5 class="card-title fw-semibold mb-4">Change Password</h5>
         <!-- Success/Error Message Container -->
         <div id="message-container" class="mt-3"></div>
       </div>
+
+      <div id="footer"></div>
     </div>
   </div>
 
   <script type="text/javascript">
     $(document).ready(function() {
-      $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
+      });
       $("#header").load("/admin/component/header-component.html");
       $("#footer").load("/admin/component/footer-component.html");
 
-      // User data mapping based on login table
       const userData = {
         "TN-HMI": { firstName: "TN-HMI", lastName: "TN-HMI", email: "TN-HMI@databytes.org" },
         "QC-HMI": { firstName: "QC-HMI", lastName: "QC-HMI", email: "QC-HMI@databytes.org" },
@@ -135,23 +189,19 @@ <h5 class="card-title fw-semibold mb-4">Change Password</h5>
         "BaNa-HMI": { firstName: "BaNa-HMI", lastName: "BaNa-HMI", email: "BaNa-HMI@databytes.org" }
       };
 
-      // Get the current logged-in user
-      const currentUser = localStorage.getItem('currentUser') || "TN-HMI"; // Default to TN-HMI if not set
+      const currentUser = localStorage.getItem('currentUser') || "TN-HMI";
 
-      // Pre-fill First Name, Last Name, and Email based on the logged-in user
       if (userData[currentUser]) {
         $("#firstName").val(userData[currentUser].firstName);
         $("#lastName").val(userData[currentUser].lastName);
         $("#location").val(userData[currentUser].email);
       }
 
-      // Load saved profile data from localStorage for other fields (profession, bio, profile picture)
       const savedProfile = JSON.parse(localStorage.getItem('userProfile')) || {};
       if (savedProfile.profession) $("#profession").val(savedProfile.profession);
       if (savedProfile.bio) $("#bio").val(savedProfile.bio);
       if (savedProfile.profilePicture) $(".profile-image").attr("src", savedProfile.profilePicture);
 
-      // Profile picture change
       $(".change-picture-btn").click(function() {
         $("#profilePictureInput").click();
       });
@@ -159,7 +209,6 @@ <h5 class="card-title fw-semibold mb-4">Change Password</h5>
       $("#profilePictureInput").change(function(e) {
         const file = e.target.files[0];
         if (file) {
-          // Validate file type
           const validImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
           if (!validImageTypes.includes(file.type)) {
             $("#message-container").html(
@@ -168,8 +217,7 @@ <h5 class="card-title fw-semibold mb-4">Change Password</h5>
             return;
           }
 
-          // Validate file size (e.g., max 5MB)
-          const maxSizeInBytes = 5 * 1024 * 1024; // 5MB
+          const maxSizeInBytes = 5 * 1024 * 1024;
           if (file.size > maxSizeInBytes) {
             $("#message-container").html(
               '<div class="alert alert-danger" role="alert">Image size must be less than 5MB.</div>'
@@ -177,7 +225,6 @@ <h5 class="card-title fw-semibold mb-4">Change Password</h5>
             return;
           }
 
-          // Preview and save the image
           const reader = new FileReader();
           reader.onload = function(e) {
             const imageUrl = e.target.result;
@@ -193,25 +240,22 @@ <h5 class="card-title fw-semibold mb-4">Change Password</h5>
         }
       });
 
-      // Delete picture
       $(".delete-picture-btn").click(function() {
         const profileData = JSON.parse(localStorage.getItem('userProfile')) || {};
         delete profileData.profilePicture;
         localStorage.setItem('userProfile', JSON.stringify(profileData));
-        $(".profile-image").attr("src", "./admin/images/default-profile.png");
+        $(".profile-image").attr("src", "/admin/images/default-profile.png");
         $("#message-container").html(
           '<div class="alert alert-success" role="alert">Profile Picture Removed. Save your Profile to confirm.</div>'
         );
       });
 
-      // Save profile form data to localStorage on submission with name validation
       $("#profile-form").submit(function(e) {
         e.preventDefault();
 
         const firstName = $("#firstName").val();
         const lastName = $("#lastName").val();
-        
-        // Regular expression to allow only letters (A-Z, a-z)
+
         const lettersOnly = /^[A-Za-z]+$/;
 
         if (!lettersOnly.test(firstName)) {
@@ -236,13 +280,11 @@ <h5 class="card-title fw-semibold mb-4">Change Password</h5>
           bio: $("#bio").val()
         };
 
-        // Preserve the profile picture if it exists
         const savedProfile = JSON.parse(localStorage.getItem('userProfile')) || {};
         if (savedProfile.profilePicture) {
           profileData.profilePicture = savedProfile.profilePicture;
         }
 
-        // Save to localStorage
         localStorage.setItem('userProfile', JSON.stringify(profileData));
 
         $("#message-container").html(
@@ -250,15 +292,12 @@ <h5 class="card-title fw-semibold mb-4">Change Password</h5>
         );
       });
 
-      // Change password form submission
       $("#change-password-form").submit(function(e) {
         e.preventDefault();
-        
-        const currentPassword = $("#currentPassword").val();
+
         const newPassword = $("#newPassword").val();
         const confirmPassword = $("#confirmPassword").val();
-        
-        // Validation
+
         if (newPassword !== confirmPassword) {
           $("#message-container").html(
             '<div class="alert alert-danger" role="alert">Passwords Do Not Match</div>'
@@ -273,15 +312,13 @@ <h5 class="card-title fw-semibold mb-4">Change Password</h5>
           return;
         }
 
-        // API call to change the password
         $("#message-container").html(
           '<div class="alert alert-success" role="alert">Password Successfully Changed</div>'
         );
-        
+
         this.reset();
       });
 
-      // Toggle password visibility
       $(".toggle-password").click(function() {
         const target = $(this).data("target");
         const input = $(target);
@@ -290,8 +327,9 @@ <h5 class="card-title fw-semibold mb-4">Change Password</h5>
         $(this).toggleClass("fa-eye fa-eye-slash");
       });
     });
+
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
   </script>
 </body>
-<div id="footer"></div>
-</div>
 </html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/projects.html b/src/Components/HMI/ui/public/admin/projects.html
index 463e2233b..0fa09d975 100644
--- a/src/Components/HMI/ui/public/admin/projects.html
+++ b/src/Components/HMI/ui/public/admin/projects.html
@@ -25,7 +25,7 @@
       crossorigin="anonymous"
     />
 
-    <!-- Icons & utilities (shared across admin) -->
+    <!-- Icons & utilities -->
     <script
       src="https://kit.fontawesome.com/8aa980d912.js"
       crossorigin="anonymous"
@@ -35,7 +35,7 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
     />
 
-    <!-- Date / range picker (shared) -->
+    <!-- Date / range picker -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
     <link
       rel="stylesheet"
@@ -43,21 +43,23 @@
     />
     <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
 
-    <!-- jQuery (required for this page) -->
+    <!-- jQuery -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
     <!-- Admin layout scripts -->
     <script src="/admin/js/sidebarmenu.js"></script>
     <script src="/admin/js/app.min.js"></script>
 
-    <!-- Charts & scroll helpers (shared) -->
+    <!-- Charts & scroll helpers -->
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"
     />
     <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
-    <script src="/admin/js/dashboard.js"></script>
+
+    <!-- Shared admin page state -->
+    <script src="/admin/js/admin-page-state.js"></script>
 
     <!-- Page-specific styles -->
     <link rel="stylesheet" href="/admin/projects.css" />
@@ -89,59 +91,42 @@
                 <i class="ti ti-x"></i>
               </button>
             </div>
-        
+
             <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
               <div class="spinner-border text-danger" aria-hidden="true"></div>
               <span class="admin-loading-spinner__text">Loading...</span>
             </div>
           </div>
+
           <div class="wildlife-dashboard-wrapper">
             <div class="wildlife-max-width">
-              <!-- Page title -->
               <section class="wildlife-hero">
                 <h1 class="wildlife-hero-title">Project Echo Management</h1>
               </section>
 
-              <!-- Stats row -->
               <section class="mb-4">
                 <div class="row g-3">
                   <div class="col-md-4">
                     <div class="wild-card">
                       <div class="wild-stat-label">Active Projects</div>
-                      <div
-                        class="wild-stat-value"
-                        id="activeProjectsCount"
-                      >
-                        0
-                      </div>
+                      <div class="wild-stat-value" id="activeProjectsCount">0</div>
                     </div>
                   </div>
                   <div class="col-md-4">
                     <div class="wild-card">
                       <div class="wild-stat-label">Ecologists</div>
-                      <div
-                        class="wild-stat-value"
-                        id="totalEcologistsCount"
-                      >
-                        0
-                      </div>
+                      <div class="wild-stat-value" id="totalEcologistsCount">0</div>
                     </div>
                   </div>
                   <div class="col-md-4">
                     <div class="wild-card">
                       <div class="wild-stat-label">Sensors Deployed</div>
-                      <div
-                        class="wild-stat-value"
-                        id="sensorsDeployedCount"
-                      >
-                        0
-                      </div>
+                      <div class="wild-stat-value" id="sensorsDeployedCount">0</div>
                     </div>
                   </div>
                 </div>
               </section>
 
-              <!-- Projects -->
               <section id="projectsSection">
                 <div class="wild-projects-header">
                   <div>
@@ -168,7 +153,7 @@ <h2>Projects</h2>
       </div>
     </div>
 
-      <!-- Create / Edit Project Modal -->
+    <!-- Create / Edit Project Modal -->
     <div
       class="modal fade"
       id="projectModal"
@@ -195,12 +180,7 @@ <h5 class="modal-title" id="projectModalLabel">
               <input type="hidden" id="projectId" value="" />
 
               <div class="mb-3">
-                <label
-                  class="form-label"
-                  for="projectName"
-                >
-                  Project Name
-                </label>
+                <label class="form-label" for="projectName">Project Name</label>
                 <input
                   type="text"
                   class="form-control"
@@ -211,12 +191,7 @@ <h5 class="modal-title" id="projectModalLabel">
               </div>
 
               <div class="mb-3">
-                <label
-                  class="form-label"
-                  for="projectDescription"
-                >
-                  Description
-                </label>
+                <label class="form-label" for="projectDescription">Description</label>
                 <textarea
                   class="form-control"
                   id="projectDescription"
@@ -227,12 +202,7 @@ <h5 class="modal-title" id="projectModalLabel">
 
               <div class="row g-3">
                 <div class="col-md-6">
-                  <label
-                    class="form-label"
-                    for="projectLocation"
-                  >
-                    Location
-                  </label>
+                  <label class="form-label" for="projectLocation">Location</label>
                   <input
                     type="text"
                     class="form-control"
@@ -242,28 +212,15 @@ <h5 class="modal-title" id="projectModalLabel">
                 </div>
 
                 <div class="col-md-3">
-                  <label
-                    class="form-label"
-                    for="projectStatus"
-                  >
-                    Status
-                  </label>
-                  <select
-                    class="form-select"
-                    id="projectStatus"
-                  >
+                  <label class="form-label" for="projectStatus">Status</label>
+                  <select class="form-select" id="projectStatus">
                     <option value="active" selected>Active</option>
                     <option value="planning">Planning</option>
                   </select>
                 </div>
 
                 <div class="col-md-3">
-                  <label
-                    class="form-label"
-                    for="projectSensors"
-                  >
-                    Sensors
-                  </label>
+                  <label class="form-label" for="projectSensors">Sensors</label>
                   <input
                     type="number"
                     min="0"
@@ -276,31 +233,17 @@ <h5 class="modal-title" id="projectModalLabel">
 
               <hr class="my-4" />
 
-              <!-- Ecologist assignment -->
               <div class="row g-3">
                 <div class="col-md-6">
-                  <label
-                    class="form-label"
-                    for="projectEcologists"
-                  >
-                    Assign Ecologists
-                  </label>
-                  <select
-                    class="form-select"
-                    id="projectEcologists"
-                    multiple
-                  >
-                    <!-- options populated via JS -->
-                  </select>
+                  <label class="form-label" for="projectEcologists">Assign Ecologists</label>
+                  <select class="form-select" id="projectEcologists" multiple></select>
                   <div class="form-text">
                     Hold Ctrl / Cmd to select multiple ecologists.
                   </div>
                 </div>
 
                 <div class="col-md-6">
-                  <label class="form-label">
-                    Ecologists on this project
-                  </label>
+                  <label class="form-label">Ecologists on this project</label>
                   <div
                     id="selectedEcologistsList"
                     class="border rounded p-2 small bg-light"
@@ -322,7 +265,6 @@ <h5 class="modal-title" id="projectModalLabel">
               </button>
 
               <div>
-                <!-- Create / Edit Project Modal -->
                 <button
                   type="button"
                   class="btn btn-secondary"
@@ -343,11 +285,11 @@ <h5 class="modal-title" id="projectModalLabel">
         </div>
       </div>
     </div>
+
     <div class="container-fluid">
       <div id="footer"></div>
     </div>
 
-    <!-- Bootstrap JS bundle (needed for modal) -->
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
@@ -355,5 +297,4 @@ <h5 class="modal-title" id="projectModalLabel">
     ></script>
     <script src="/admin/projects.js"></script>
   </body>
-</html>
-
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/projects.js b/src/Components/HMI/ui/public/admin/projects.js
index b8c5c92a8..fafe63484 100644
--- a/src/Components/HMI/ui/public/admin/projects.js
+++ b/src/Components/HMI/ui/public/admin/projects.js
@@ -1,4 +1,7 @@
 $(document).ready(function () {
+  const pageState = createAdminPageState();
+  pageState.resetPageState();
+
   // ================================================================
   // Layout Includes
   // ================================================================
@@ -49,13 +52,31 @@ $(document).ready(function () {
     }
   ];
 
-  // Use in-memory data for now
   let projects = [...defaultProjects];
   let nextProjectId = projects.length + 1;
 
   // ================================================================
   // HELPERS
   // ================================================================
+  function delay(ms = 250) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  async function runWithPageState(action, errorMessage) {
+    pageState.hideError();
+    pageState.showLoading();
+
+    try {
+      await delay();
+      return await action();
+    } catch (error) {
+      console.error(error);
+      pageState.showError(errorMessage);
+      throw error;
+    } finally {
+      pageState.hideLoading();
+    }
+  }
 
   function getEcologistNameById(id) {
     const match = ecologists.find(e => e.id === id);
@@ -196,7 +217,6 @@ $(document).ready(function () {
   // ================================================================
   // EVENT BINDINGS
   // ================================================================
-
   $("#newProjectBtn").on("click", openProjectModalForNew);
 
   $("#projectEcologists").on("change", updateSelectedEcologistsPreview);
@@ -209,7 +229,7 @@ $(document).ready(function () {
     modal.show();
   });
 
-  $("#projectForm").on("submit", function (e) {
+  $("#projectForm").on("submit", async function (e) {
     e.preventDefault();
 
     const idVal = $("#projectId").val();
@@ -225,45 +245,69 @@ $(document).ready(function () {
     };
 
     if (!data.name) {
-      alert("Project name is required.");
+      pageState.showError("Project name is required.");
       return;
     }
 
-    if (isNew) {
-      // TODO (backend): POST /api/projects
-      data.id = nextProjectId++;
-      projects.push(data);
-    } else {
-      // TODO (backend): PUT /api/projects/:id
-      const id = Number(idVal);
-      const index = projects.findIndex(p => p.id === id);
-      if (index !== -1) {
-        projects[index] = { id, ...data };
-      }
+    try {
+      await runWithPageState(async () => {
+        if (isNew) {
+          // TODO (backend): POST /api/projects
+          data.id = nextProjectId++;
+          projects.push(data);
+        } else {
+          // TODO (backend): PUT /api/projects/:id
+          const id = Number(idVal);
+          const index = projects.findIndex(p => p.id === id);
+          if (index === -1) {
+            throw new Error("Project not found.");
+          }
+          projects[index] = { id, ...data };
+        }
+
+        closeModal();
+        renderProjects();
+      }, "Failed to save project.");
+    } catch (error) {
+      // handled by runWithPageState
     }
-
-    closeModal();
-    renderProjects();
   });
 
-  $("#deleteProjectBtn").on("click", function () {
+  $("#deleteProjectBtn").on("click", async function () {
     const id = Number($("#projectId").val());
     if (!id) return;
 
     const confirmed = confirm("Delete this project? This cannot be undone.");
     if (!confirmed) return;
 
-    // TODO (backend): DELETE /api/projects/:id  
-    const index = projects.findIndex(p => p.id === id);
-    if (index !== -1) projects.splice(index, 1);
-
-    closeModal();
-    renderProjects();
+    try {
+      await runWithPageState(async () => {
+        // TODO (backend): DELETE /api/projects/:id
+        const index = projects.findIndex(p => p.id === id);
+        if (index === -1) {
+          throw new Error("Project not found.");
+        }
+
+        projects.splice(index, 1);
+        closeModal();
+        renderProjects();
+      }, "Failed to delete project.");
+    } catch (error) {
+      // handled by runWithPageState
+    }
   });
 
   // ================================================================
   // INITIAL RENDER
   // ================================================================
-  renderEcologistSelect();
-  renderProjects();
+  (async function initPage() {
+    try {
+      await runWithPageState(async () => {
+        renderEcologistSelect();
+        renderProjects();
+      }, "Failed to load project management data.");
+    } catch (error) {
+      // handled by runWithPageState
+    }
+  })();
 });
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/sensor-health.html b/src/Components/HMI/ui/public/admin/sensor-health.html
index 106cdc3a5..be2df4794 100644
--- a/src/Components/HMI/ui/public/admin/sensor-health.html
+++ b/src/Components/HMI/ui/public/admin/sensor-health.html
@@ -8,17 +8,31 @@
   <link rel="stylesheet" type="text/css" href="/admin/css/styles.min.css" />
   <link rel="stylesheet" href="/admin/css/icons/tabler-icons/tabler-icons.css" />
   <link rel="stylesheet" href="/admin/sensor_health/style.css" />
+
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
+
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
+
   <script src="/admin/sensor_health/script.js" defer></script>
   <script src="/admin/sensor_health/charts.js" defer></script>
 </head>
 <body>
-  <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
-    data-sidebar-position="fixed" data-header-position="fixed">
+  <div
+    class="page-wrapper"
+    id="main-wrapper"
+    data-layout="vertical"
+    data-navbarbg="skin6"
+    data-sidebartype="full"
+    data-sidebar-position="fixed"
+    data-header-position="fixed"
+  >
     <div id="sidebar"></div>
+
     <div class="body-wrapper">
       <div id="header"></div>
+
       <div class="container-fluid">
         <div class="admin-page-status">
           <div class="admin-error-banner d-none" role="alert" aria-live="polite">
@@ -30,149 +44,136 @@
               <i class="ti ti-x"></i>
             </button>
           </div>
-      
+
           <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
             <div class="spinner-border text-danger" aria-hidden="true"></div>
             <span class="admin-loading-spinner__text">Loading...</span>
           </div>
         </div>
-        <div class="sensor-page">
-
-
-  <!-- Mobile backdrop -->
-  <div class="mobile-backdrop" id="mobile-backdrop"></div>
-
-  <!-- MAIN -->
-  <main class="main">
-    <header class="page-header">
-      <div></div>
-      <div class="page-header-actions">
-      </div>
-    </header>
-
-    <!-- Content root (views load here) -->
-    <div id="view-root">
-      <div class="dashboard-shell">
-
-      <!-- HERO HEADER -->
-      <section class="hero-header">
-        <h1>Project echo</h1>
-        <p class="subtitle">wildlife sound monitoring & sensor management</p>
-
-        <div class="hero-actions">
-          <button class="btn-primary">View Projects</button>
-          <button class="btn-secondary">Learn More</button>
-        </div>
-      </section>
-
-
-
-      <!-- KPI CARDS -->
-      <section class="kpi-grid">
-        <div class="kpi-card">
-          <p>ACTIVE PROJECTS</p>
-          <h3>7</h3>
-        </div>
-
-        <div class="kpi-card">
-          <p>REGISTERED ECOLOGISTS</p>
-          <h3>69</h3>
-        </div>
-
-        <div class="kpi-card">
-          <p>SENSORS DEPLOYED</p>
-          <h3>420</h3>
-        </div>
-      </section>
-
-
-
-      <!-- PROJECT HIGHLIGHTS -->
-      <section class="card">
-        <h3>Active Projects</h3>
-        <p class="card-subtitle">Overview of ongoing conservation deployments</p>
-
-        <div class="form-grid">
-
-          <div class="card">
-            <h3>Rainforest A</h3>
-            <p class="note">
-              Amazon Basin — Zone A1<br>
-              32 active sensors
-            </p>
-            <span class="pill pill-success">ACTIVE</span>
-          </div>
-
-          <div class="card">
-            <h3>Savannah Trial</h3>
-            <p class="note">
-              Serengeti — West Ridge<br>
-              18 active sensors
-            </p>
-            <span class="pill pill-success">ACTIVE</span>
-          </div>
-
-          <div class="card">
-            <h3>Wetlands 2025</h3>
-            <p class="note">
-              New Plymouth — Zone Delta<br>
-              12 sensors in queue
-            </p>
-            <span class="pill pill-warning">PLANNING</span>
-          </div>
-
-        </div>
-      </section>
-
-
-
-      <!-- FOOTER COLUMNS -->
-      <section class="footer-columns">
-
-        <div>
-          <h4>Wildlife Sound Monitor</h4>
-          <ul>
-            <li>Automated biodiversity tracking</li>
-            <li>24/7 acoustic scanning</li>
-            <li>Data-driven conservation</li>
-          </ul>
-        </div>
-
-        <div>
-          <h4>Quick Links</h4>
-          <ul>
-            <li>Home</li>
-            <li>Projects</li>
-            <li>Deployment Guide</li>
-            <li>Documentation</li>
-          </ul>
-        </div>
 
-        <div>
-          <h4>Resources</h4>
-          <ul>
-            <li>API Reference</li>
-            <li>Support</li>
-            <li>Terms</li>
-            <li>Privacy Policy</li>
-          </ul>
+        <div class="sensor-page">
+          <div class="mobile-backdrop" id="mobile-backdrop"></div>
+
+          <main class="main">
+            <header class="page-header">
+              <div></div>
+              <div class="page-header-actions"></div>
+            </header>
+
+            <div id="view-root">
+              <div class="dashboard-shell">
+                <section class="hero-header">
+                  <h1>Project echo</h1>
+                  <p class="subtitle">wildlife sound monitoring &amp; sensor management</p>
+
+                  <div class="hero-actions">
+                    <button class="btn-primary">View Projects</button>
+                    <button class="btn-secondary">Learn More</button>
+                  </div>
+                </section>
+
+                <section class="kpi-grid">
+                  <div class="kpi-card">
+                    <p>ACTIVE PROJECTS</p>
+                    <h3>7</h3>
+                  </div>
+
+                  <div class="kpi-card">
+                    <p>REGISTERED ECOLOGISTS</p>
+                    <h3>69</h3>
+                  </div>
+
+                  <div class="kpi-card">
+                    <p>SENSORS DEPLOYED</p>
+                    <h3>420</h3>
+                  </div>
+                </section>
+
+                <section class="card">
+                  <h3>Active Projects</h3>
+                  <p class="card-subtitle">Overview of ongoing conservation deployments</p>
+
+                  <div class="form-grid">
+                    <div class="card">
+                      <h3>Rainforest A</h3>
+                      <p class="note">
+                        Amazon Basin — Zone A1<br>
+                        32 active sensors
+                      </p>
+                      <span class="pill pill-success">ACTIVE</span>
+                    </div>
+
+                    <div class="card">
+                      <h3>Savannah Trial</h3>
+                      <p class="note">
+                        Serengeti — West Ridge<br>
+                        18 active sensors
+                      </p>
+                      <span class="pill pill-success">ACTIVE</span>
+                    </div>
+
+                    <div class="card">
+                      <h3>Wetlands 2025</h3>
+                      <p class="note">
+                        New Plymouth — Zone Delta<br>
+                        12 sensors in queue
+                      </p>
+                      <span class="pill pill-warning">PLANNING</span>
+                    </div>
+                  </div>
+                </section>
+
+                <section class="footer-columns">
+                  <div>
+                    <h4>Wildlife Sound Monitor</h4>
+                    <ul>
+                      <li>Automated biodiversity tracking</li>
+                      <li>24/7 acoustic scanning</li>
+                      <li>Data-driven conservation</li>
+                    </ul>
+                  </div>
+
+                  <div>
+                    <h4>Quick Links</h4>
+                    <ul>
+                      <li>Home</li>
+                      <li>Projects</li>
+                      <li>Deployment Guide</li>
+                      <li>Documentation</li>
+                    </ul>
+                  </div>
+
+                  <div>
+                    <h4>Resources</h4>
+                    <ul>
+                      <li>API Reference</li>
+                      <li>Support</li>
+                      <li>Terms</li>
+                      <li>Privacy Policy</li>
+                    </ul>
+                  </div>
+                </section>
+              </div>
+            </div>
+          </main>
         </div>
+      </div>
 
-      </section>
-
-    </div><!-- END dashboard-shell -->
-    </div> <!-- END dashboard-shell -->
-        </div>
       <div id="footer"></div>
     </div>
   </div>
 
   <script>
     $(document).ready(function() {
-      $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
+      });
       $("#header").load("/admin/component/header-component.html");
       $("#footer").load("/admin/component/footer-component.html");
     });
+
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/sensor_health/add-project.html b/src/Components/HMI/ui/public/admin/sensor_health/add-project.html
index 85539dfa0..fca0de889 100644
--- a/src/Components/HMI/ui/public/admin/sensor_health/add-project.html
+++ b/src/Components/HMI/ui/public/admin/sensor_health/add-project.html
@@ -3,49 +3,128 @@
 <head>
   <meta charset="UTF-8" />
   <title>Add Project – Project Echo</title>
+
   <link rel="stylesheet" href="/admin/sensor_health/style.css" />
+
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
+
   <script src="/admin/sensor_health/script.js" defer></script>
 </head>
 <body>
 <div class="layout">
-  <aside class="sidebar"><div class="sidebar-brand"><img src="/admin/images/logos/echo-icon.png" class="brand-logo" alt="Echo logo" /></div>
+
+  <aside class="sidebar">
+    <div class="sidebar-brand">
+      <img src="/admin/images/logos/echo-icon.png" class="brand-logo" alt="Echo logo" />
+    </div>
+
     <nav class="sidebar-menu">
       <div class="nav-section">
         <div class="nav-title">MENU</div>
-        <a class="nav-link" href="/admin/dashboard.html"><span class="nav-icon">▦</span><span class="nav-text">Dashboard</span></a>
-        <a class="nav-link" href="/admin/sensor-health.html"><span class="nav-icon">📡</span><span class="nav-text">Sensor Health</span></a>
-        <a class="nav-link" href="/admin/sensor_health/alerts.html"><span class="nav-icon">🔔</span><span class="nav-text">Alerts</span></a>
-        <a class="nav-link" href="/admin/sensor_health/reboot.html"><span class="nav-icon">⟲</span><span class="nav-text">Reboot</span></a>
-        <a class="nav-link" href="/admin/sensor_health/settings.html"><span class="nav-icon">⚙</span><span class="nav-text">Settings</span></a>
-        <a class="nav-link active" href="/admin/sensor_health/add-project.html"><span class="nav-icon">➕</span><span class="nav-text">Add a Project</span></a>
+        <a class="nav-link" href="/admin/dashboard.html">
+          <span class="nav-icon">▦</span><span class="nav-text">Dashboard</span>
+        </a>
+        <a class="nav-link" href="/admin/sensor-health.html">
+          <span class="nav-icon">📡</span><span class="nav-text">Sensor Health</span>
+        </a>
+        <a class="nav-link" href="/admin/sensor_health/alerts.html">
+          <span class="nav-icon">🔔</span><span class="nav-text">Alerts</span>
+        </a>
+        <a class="nav-link" href="/admin/sensor_health/reboot.html">
+          <span class="nav-icon">⟲</span><span class="nav-text">Reboot</span>
+        </a>
+        <a class="nav-link" href="/admin/sensor_health/settings.html">
+          <span class="nav-icon">⚙</span><span class="nav-text">Settings</span>
+        </a>
+        <a class="nav-link active" href="/admin/sensor_health/add-project.html">
+          <span class="nav-icon">➕</span><span class="nav-text">Add a Project</span>
+        </a>
       </div>
     </nav>
 
-    <div class="sidebar-footer"> v1.0 • Admin Console </div>
+    <div class="sidebar-footer">v1.0 • Admin Console</div>
   </aside>
+
   <div class="mobile-backdrop" id="mobile-backdrop"></div>
+
   <main class="main">
-    <header class="page-header"><div></div><div class="page-header-actions"><button class="icon-button" id="menu-toggle">☰</button><button class="icon-button" id="theme-toggle">🌙</button></div></header>
+    <header class="page-header">
+      <div></div>
+      <div class="page-header-actions">
+        <button class="icon-button" id="menu-toggle">☰</button>
+        <button class="icon-button" id="theme-toggle">🌙</button>
+      </div>
+    </header>
+
     <div class="dashboard-shell">
-      <section class="hero-header"><h1>Create project</h1><p class="subtitle">add a new deployment area and assign sensors to it</p></section>
+
+      <!-- Shared page status UI -->
+      <div class="admin-page-status">
+        <div class="admin-error-banner d-none" role="alert" aria-live="polite">
+          <div class="admin-error-banner__content">
+            <i class="ti ti-alert-circle"></i>
+            <span>Something went wrong while loading this page.</span>
+          </div>
+          <button type="button" class="admin-error-banner__dismiss" aria-label="Dismiss error message">
+            <i class="ti ti-x"></i>
+          </button>
+        </div>
+
+        <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
+          <div class="spinner-border text-danger" aria-hidden="true"></div>
+          <span class="admin-loading-spinner__text">Loading...</span>
+        </div>
+      </div>
+
+      <section class="hero-header">
+        <h1>Create project</h1>
+        <p class="subtitle">add a new deployment area and assign sensors to it</p>
+      </section>
+
       <p id="project-message" class="note"></p>
-      <section class="card"><h3>Project details</h3><p class="card-subtitle">Fill in the core information for the project.</p>
-        <div class="form-grid"><div><label for="project-name">Project name</label><input id="project-name" placeholder="e.g. Echo – Amazon North 2025" /></div>
-        <div><label for="project-location">Location</label><input id="project-location" placeholder="e.g. Amazon Basin, Zone A3" /></div>
-        <div><label for="project-start">Start date</label><input id="project-start" type="date" /></div>
-        <div><label for="project-end">End date</label><input id="project-end" type="date" /></div></div>
+
+      <section class="card">
+        <h3>Project details</h3>
+        <p class="card-subtitle">Fill in the core information for the project.</p>
+
+        <div class="form-grid">
+          <div>
+            <label for="project-name">Project name</label>
+            <input id="project-name" placeholder="e.g. Echo – Amazon North 2025" />
+          </div>
+          <div>
+            <label for="project-location">Location</label>
+            <input id="project-location" placeholder="e.g. Amazon Basin, Zone A3" />
+          </div>
+          <div>
+            <label for="project-start">Start date</label>
+            <input id="project-start" type="date" />
+          </div>
+          <div>
+            <label for="project-end">End date</label>
+            <input id="project-end" type="date" />
+          </div>
+        </div>
+
         <label for="project-description">Description</label>
         <textarea id="project-description" placeholder="Briefly describe the project scope and habitat..."></textarea>
       </section>
-      <section class="card"><h3>Assign sensors</h3><p class="card-subtitle">Specify sensor IDs, ID ranges, or group names.</p>
+
+      <section class="card">
+        <h3>Assign sensors</h3>
+        <p class="card-subtitle">Specify sensor IDs, ID ranges, or group names.</p>
+
         <label for="project-sensors">Sensor IDs</label>
         <input id="project-sensors" placeholder="e.g. SEN-01–SEN-32 or Rainforest Group A" />
         <p class="note">Use commas, ranges (e.g. SEN-01–SEN-20), or group names.</p>
+
         <button class="btn-primary" onclick="fakeCreateProject()">Create project</button>
         <button class="btn-secondary" onclick="window.location='/admin/sensor-health.html'">Cancel</button>
       </section>
+
     </div>
   </main>
 </div>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/sensor_health/alerts.html b/src/Components/HMI/ui/public/admin/sensor_health/alerts.html
index 19fdefdc0..6fe9402d0 100644
--- a/src/Components/HMI/ui/public/admin/sensor_health/alerts.html
+++ b/src/Components/HMI/ui/public/admin/sensor_health/alerts.html
@@ -3,23 +3,35 @@
 <head>
   <meta charset="UTF-8" />
   <title>Alerts – Project Echo</title>
+
   <link rel="stylesheet" type="text/css" href="/admin/css/styles.min.css" />
   <link rel="stylesheet" href="/admin/css/icons/tabler-icons/tabler-icons.css" />
   <link rel="stylesheet" href="/admin/sensor_health/style.css" />
+
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
+
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
+
   <script src="/admin/sensor_health/script.js" defer></script>
   <script src="/admin/sensor_health/charts.js" defer></script>
 </head>
 <body>
-  <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
-    data-sidebar-position="fixed" data-header-position="fixed">
-    <!-- Sidebar Start -->
+  <div
+    class="page-wrapper"
+    id="main-wrapper"
+    data-layout="vertical"
+    data-navbarbg="skin6"
+    data-sidebartype="full"
+    data-sidebar-position="fixed"
+    data-header-position="fixed"
+  >
     <div id="sidebar"></div>
-    <!--  Sidebar End -->
-    <!--  Main wrapper -->
+
     <div class="body-wrapper">
       <div id="header"></div>
+
       <div class="container-fluid">
         <div class="sensor-page">
           <div class="dashboard-shell">
@@ -33,32 +45,60 @@
                   <i class="ti ti-x"></i>
                 </button>
               </div>
-          
+
               <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
                 <div class="spinner-border text-danger" aria-hidden="true"></div>
                 <span class="admin-loading-spinner__text">Loading...</span>
               </div>
             </div>
-      <section class="hero-header"><h1>Alerts</h1><p class="subtitle">real-time detection of issues across deployed sensors</p></section>
-      <section class="card"><h3>Alert Severity Overview</h3><p class="card-subtitle">Distribution of active alerts</p><canvas id="alertsChart" height="120"></canvas></section>
-      <section class="card"><h3>Active Alerts</h3><p class="card-subtitle">Sensors requiring immediate or near-term attention</p>
-        <table><thead><tr><th>Sensor</th><th>Issue</th><th>Details</th><th>Last Audio</th></tr></thead>
-        <tbody id="alerts-tbody">
-          <tr><td colspan="4">Loading…</td></tr>
-        </tbody></table>
-      </section>
-    </div> <!-- END dashboard-shell -->
+
+            <section class="hero-header">
+              <h1>Alerts</h1>
+              <p class="subtitle">real-time detection of issues across deployed sensors</p>
+            </section>
+
+            <section class="card">
+              <h3>Alert Severity Overview</h3>
+              <p class="card-subtitle">Distribution of active alerts</p>
+              <canvas id="alertsChart" height="120"></canvas>
+            </section>
+
+            <section class="card">
+              <h3>Active Alerts</h3>
+              <p class="card-subtitle">Sensors requiring immediate or near-term attention</p>
+              <table>
+                <thead>
+                  <tr>
+                    <th>Sensor</th>
+                    <th>Issue</th>
+                    <th>Details</th>
+                    <th>Last Audio</th>
+                  </tr>
+                </thead>
+                <tbody id="alerts-tbody">
+                  <tr><td colspan="4">Loading…</td></tr>
+                </tbody>
+              </table>
+            </section>
+          </div>
         </div>
-      <div id="footer"></div>
+
+        <div id="footer"></div>
+      </div>
     </div>
   </div>
 
   <script>
     $(document).ready(function() {
-      $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
+      });
       $("#header").load("/admin/component/header-component.html");
       $("#footer").load("/admin/component/footer-component.html");
     });
+
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/sensor_health/charts.js b/src/Components/HMI/ui/public/admin/sensor_health/charts.js
index a044bb521..268a70c1a 100644
--- a/src/Components/HMI/ui/public/admin/sensor_health/charts.js
+++ b/src/Components/HMI/ui/public/admin/sensor_health/charts.js
@@ -2,35 +2,106 @@
 document.addEventListener("DOMContentLoaded", () => {
   drawAlertsChart();
 });
+
 async function drawAlertsChart() {
   const canvas = document.getElementById("alertsChart");
   if (!canvas) return;
+
   const ctx = canvas.getContext("2d");
   const labels = ["Critical", "High", "Medium", "Low"];
-
   let values = [0, 0, 0, 0];
+
   try {
     const res = await fetch('/sensors/alerts');
+
+    if (!res.ok) {
+      throw new Error(`Failed to load alerts chart data: ${res.status}`);
+    }
+
+    const contentType = res.headers.get('content-type') || '';
+    if (!contentType.includes('application/json')) {
+      throw new Error('Alerts chart API did not return JSON.');
+    }
+
     const data = await res.json();
     const items = Array.isArray(data.items) ? data.items : [];
-    const counts = { Critical: 0, High: 0, Medium: 0, Low: 0 };
+
+    const counts = {
+      Critical: 0,
+      High: 0,
+      Medium: 0,
+      Low: 0
+    };
+
     for (const a of items) {
       const sev = String(a.severity || 'Medium');
-      if (counts[sev] !== undefined) counts[sev] += 1;
+      if (counts[sev] !== undefined) {
+        counts[sev] += 1;
+      }
     }
+
     values = [counts.Critical, counts.High, counts.Medium, counts.Low];
   } catch (e) {
-    // fall back to zeros
+    console.warn('Alerts chart fallback in use:', e);
+    values = [0, 0, 0, 0];
   }
 
-  const colors = ["#C8473C","#D29B38","#F59E0B","#2F6E4F"];
-  const width = canvas.width; const height = canvas.height; const padding = 30; const bottomPadding = 40; const topPadding = 20;
-  const maxValue = Math.max(...values, 1); const chartHeight = height - bottomPadding - topPadding; const scaleY = chartHeight / maxValue;
-  const barWidth = 32; const gap = 26;
-  ctx.clearRect(0,0,width,height);
-  ctx.strokeStyle = "rgba(148, 163, 184, 0.25)"; ctx.lineWidth = 1;
-  ctx.beginPath(); ctx.moveTo(padding, height - bottomPadding); ctx.lineTo(width - padding, height - bottomPadding); ctx.stroke();
-  ctx.font = "12px Inter, system-ui, sans-serif"; ctx.textAlign = "center";
-  values.forEach((value,i) => { const x = padding + i * (barWidth + gap) + barWidth/2; const barHeight = value * scaleY; const y = height - bottomPadding - barHeight; ctx.fillStyle = colors[i]; ctx.beginPath(); ctx.roundRect ? ctx.roundRect(x - barWidth/2, y, barWidth, barHeight, 6) : ctx.fillRect(x - barWidth/2, y, barWidth, barHeight); ctx.fill(); ctx.fillStyle = "#111827"; ctx.fillText(value, x, y - 6); ctx.fillStyle = "#6F7B74"; ctx.fillText(labels[i], x, height - bottomPadding + 18); });
+  const colors = ["#C8473C", "#D29B38", "#F59E0B", "#2F6E4F"];
+  const width = canvas.width;
+  const height = canvas.height;
+  const padding = 30;
+  const bottomPadding = 40;
+  const topPadding = 20;
+  const maxValue = Math.max(...values, 1);
+  const chartHeight = height - bottomPadding - topPadding;
+  const scaleY = chartHeight / maxValue;
+  const barWidth = 32;
+  const gap = 26;
+
+  ctx.clearRect(0, 0, width, height);
+
+  ctx.strokeStyle = "rgba(148, 163, 184, 0.25)";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(padding, height - bottomPadding);
+  ctx.lineTo(width - padding, height - bottomPadding);
+  ctx.stroke();
+
+  ctx.font = "12px Inter, system-ui, sans-serif";
+  ctx.textAlign = "center";
+
+  values.forEach((value, i) => {
+    const x = padding + i * (barWidth + gap) + barWidth / 2;
+    const barHeight = value * scaleY;
+    const y = height - bottomPadding - barHeight;
+
+    ctx.fillStyle = colors[i];
+
+    if (ctx.roundRect) {
+      ctx.roundRect(x - barWidth / 2, y, barWidth, barHeight, 6);
+      ctx.fill();
+    } else {
+      ctx.fillRect(x - barWidth / 2, y, barWidth, barHeight);
+    }
+
+    ctx.fillStyle = "#111827";
+    ctx.fillText(value, x, y - 6);
+
+    ctx.fillStyle = "#6F7B74";
+    ctx.fillText(labels[i], x, height - bottomPadding + 18);
+  });
 }
-if (!CanvasRenderingContext2D.prototype.roundRect) { CanvasRenderingContext2D.prototype.roundRect = function (x,y,w,h,r){ r = Math.min(r,w/2,h/2); this.beginPath(); this.moveTo(x + r, y); this.arcTo(x + w, y, x + w, y + h, r); this.arcTo(x + w, y + h, x, y + h, r); this.arcTo(x, y + h, x, y, r); this.arcTo(x, y, x + w, y, r); this.closePath(); return this; }; }
+
+if (!CanvasRenderingContext2D.prototype.roundRect) {
+  CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
+    r = Math.min(r, w / 2, h / 2);
+    this.beginPath();
+    this.moveTo(x + r, y);
+    this.arcTo(x + w, y, x + w, y + h, r);
+    this.arcTo(x + w, y + h, x, y + h, r);
+    this.arcTo(x, y + h, x, y, r);
+    this.arcTo(x, y, x + w, y, r);
+    this.closePath();
+    return this;
+  };
+}
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/sensor_health/reboot.html b/src/Components/HMI/ui/public/admin/sensor_health/reboot.html
index 10a8d1507..08d6769d8 100644
--- a/src/Components/HMI/ui/public/admin/sensor_health/reboot.html
+++ b/src/Components/HMI/ui/public/admin/sensor_health/reboot.html
@@ -3,48 +3,114 @@
 <head>
   <meta charset="UTF-8" />
   <title>Reboot Sensors – Project Echo</title>
+
   <link rel="stylesheet" type="text/css" href="/admin/css/styles.min.css" />
   <link rel="stylesheet" href="/admin/css/icons/tabler-icons/tabler-icons.css" />
   <link rel="stylesheet" href="/admin/sensor_health/style.css" />
+
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
+
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
+
   <script src="/admin/sensor_health/script.js" defer></script>
 </head>
 <body>
-  <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
-    data-sidebar-position="fixed" data-header-position="fixed">
-    <!-- Sidebar Start -->
+  <div
+    class="page-wrapper"
+    id="main-wrapper"
+    data-layout="vertical"
+    data-navbarbg="skin6"
+    data-sidebartype="full"
+    data-sidebar-position="fixed"
+    data-header-position="fixed"
+  >
     <div id="sidebar"></div>
-    <!--  Sidebar End -->
-    <!--  Main wrapper -->
+
     <div class="body-wrapper">
       <div id="header"></div>
+
       <div class="container-fluid">
         <div class="sensor-page">
           <div class="dashboard-shell">
-      <section class="hero-header"><h1>Reboot sensors</h1><p class="subtitle">queue reboot commands for malfunctioning or frozen devices</p></section>
-      <section class="card"><h3>Queue a reboot</h3><p class="card-subtitle">Send a reboot instruction to one or more sensors.</p>
-        <div class="form-grid"><div><label for="reboot-sensor">Sensor IDs</label><input id="reboot-sensor" placeholder="e.g. SEN-01, SEN-14, SEN-77"></div><div><label for="reboot-reason">Reason</label><input id="reboot-reason" placeholder="e.g. frozen board, config update"></div></div>
-        <button class="btn-primary" onclick="fakeReboot()">Reboot now</button>
-        <p id="reboot-message" class="note"></p>
-      </section>
-      <section class="card"><h3>Reboot history</h3><p class="card-subtitle">Recent reboot attempts and their outcomes.</p>
-        <table><thead><tr><th>Sensor</th><th>Status</th><th>Time</th></tr></thead><tbody id="reboot-history-tbody">
-          <tr><td colspan="3">Loading…</td></tr>
-        </tbody></table>
-      </section>
-    </div> <!-- END dashboard-shell -->
+            <div class="admin-page-status">
+              <div class="admin-error-banner d-none" role="alert" aria-live="polite">
+                <div class="admin-error-banner__content">
+                  <i class="ti ti-alert-circle"></i>
+                  <span>Something went wrong while loading this page.</span>
+                </div>
+                <button type="button" class="admin-error-banner__dismiss" aria-label="Dismiss error message">
+                  <i class="ti ti-x"></i>
+                </button>
+              </div>
+
+              <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
+                <div class="spinner-border text-danger" aria-hidden="true"></div>
+                <span class="admin-loading-spinner__text">Loading...</span>
+              </div>
+            </div>
+
+            <section class="hero-header">
+              <h1>Reboot sensors</h1>
+              <p class="subtitle">queue reboot commands for malfunctioning or frozen devices</p>
+            </section>
+
+            <section class="card">
+              <h3>Queue a reboot</h3>
+              <p class="card-subtitle">Send a reboot instruction to one or more sensors.</p>
+
+              <div class="form-grid">
+                <div>
+                  <label for="reboot-sensor">Sensor IDs</label>
+                  <input id="reboot-sensor" placeholder="e.g. SEN-01, SEN-14, SEN-77">
+                </div>
+                <div>
+                  <label for="reboot-reason">Reason</label>
+                  <input id="reboot-reason" placeholder="e.g. frozen board, config update">
+                </div>
+              </div>
+
+              <button class="btn-primary" onclick="fakeReboot()">Reboot now</button>
+              <p id="reboot-message" class="note"></p>
+            </section>
+
+            <section class="card">
+              <h3>Reboot history</h3>
+              <p class="card-subtitle">Recent reboot attempts and their outcomes.</p>
+
+              <table>
+                <thead>
+                  <tr>
+                    <th>Sensor</th>
+                    <th>Status</th>
+                    <th>Time</th>
+                  </tr>
+                </thead>
+                <tbody id="reboot-history-tbody">
+                  <tr><td colspan="3">Loading…</td></tr>
+                </tbody>
+              </table>
+            </section>
+          </div>
         </div>
-      <div id="footer"></div>
+
+        <div id="footer"></div>
+      </div>
     </div>
   </div>
 
   <script>
     $(document).ready(function() {
-      $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
+      });
       $("#header").load("/admin/component/header-component.html");
       $("#footer").load("/admin/component/footer-component.html");
     });
+
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/sensor_health/script.js b/src/Components/HMI/ui/public/admin/sensor_health/script.js
index 3bd65c53d..0de587785 100644
--- a/src/Components/HMI/ui/public/admin/sensor_health/script.js
+++ b/src/Components/HMI/ui/public/admin/sensor_health/script.js
@@ -1,5 +1,6 @@
-/* Project Echo — moved sensor health script.js (copied)
-   Handles sidebar toggle, theme, fake actions and UI helpers
+/* Project Echo — moved sensor health script.js
+   Handles sidebar toggle, theme, sensor-health data wiring,
+   and shared admin loading/error state support
 */
 
 const menuToggle = document.getElementById("menu-toggle");
@@ -18,6 +19,7 @@ if (mobileBackdrop) {
 }
 
 const themeToggle = document.getElementById("theme-toggle");
+
 function setTheme(darkMode) {
   if (darkMode) {
     document.documentElement.setAttribute("data-theme", "dark");
@@ -39,150 +41,254 @@ if (themeToggle) {
   });
 }
 
+// ================================================================
+// Shared admin page state helpers
+// ================================================================
+const pageState = window.createAdminPageState ? createAdminPageState() : null;
+pageState?.resetPageState();
+
+function showPageLoading() {
+  pageState?.showLoading();
+}
+
+function hidePageLoading() {
+  pageState?.hideLoading();
+}
+
+function showPageError(message) {
+  pageState?.showError(message);
+}
+
+function hidePageError() {
+  pageState?.hideError();
+}
+
+// ================================================================
+// Inline page message helper (existing behavior kept)
+// ================================================================
 function showMessage(elementId, message, type = "success") {
   const el = document.getElementById(elementId);
   if (!el) return;
-  const colors = { success: "var(--primary)", warning: "var(--warning)", danger: "var(--danger)" };
+
+  const colors = {
+    success: "var(--primary)",
+    warning: "var(--warning)",
+    danger: "var(--danger)"
+  };
+
   el.style.color = colors[type] || colors.success;
   el.style.marginTop = "10px";
   el.style.fontWeight = "600";
   el.textContent = message;
   el.style.opacity = 0;
-  setTimeout(() => { el.style.opacity = 1; el.style.transition = "opacity .4s"; }, 30);
+  setTimeout(() => {
+    el.style.opacity = 1;
+    el.style.transition = "opacity .4s";
+  }, 30);
 }
 
+// ================================================================
+// API helper
+// ================================================================
 async function apiFetch(path, options = {}) {
   const response = await fetch(path, {
-    headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
+    headers: {
+      "Content-Type": "application/json",
+      ...(options.headers || {})
+    },
     ...options,
   });
 
   if (!response.ok) {
-    const text = await response.text().catch(() => '');
+    const text = await response.text().catch(() => "");
     throw new Error(text || `Request failed: ${response.status}`);
   }
 
-  const contentType = response.headers.get('content-type') || '';
-  if (contentType.includes('application/json')) {
+  const contentType = response.headers.get("content-type") || "";
+  if (contentType.includes("application/json")) {
     return response.json();
   }
+
   return response.text();
 }
 
+// ================================================================
+// Formatting helpers
+// ================================================================
 function formatMinutesAgo(mins) {
-  if (mins === null || typeof mins === 'undefined') return '—';
+  if (mins === null || typeof mins === "undefined") return "—";
+
   const m = Number(mins);
-  if (!Number.isFinite(m)) return '—';
+  if (!Number.isFinite(m)) return "—";
+
   if (m < 60) return `${m}m ago`;
+
   const h = Math.floor(m / 60);
   const r = m % 60;
   return r ? `${h}h ${r}m ago` : `${h}h ago`;
 }
 
 function pillHtml(status) {
-  const s = String(status || '').trim();
-  let cls = 'pill-warning';
-  if (s === 'Online') cls = 'pill-success';
-  if (s === 'Offline') cls = 'pill-danger';
-  return `<span class="pill ${cls}">${s || 'Unknown'}</span>`;
+  const s = String(status || "").trim();
+  let cls = "pill-warning";
+
+  if (s === "Online") cls = "pill-success";
+  if (s === "Offline") cls = "pill-danger";
+
+  return `<span class="pill ${cls}">${s || "Unknown"}</span>`;
 }
 
+// ================================================================
+// Reboot sensors
+// ================================================================
 async function rebootSensors() {
   const sensorsRaw = document.getElementById("reboot-sensor")?.value.trim();
   const reason = document.getElementById("reboot-reason")?.value.trim();
+
   if (!sensorsRaw) {
     showMessage("reboot-message", "Please enter at least one sensor ID.", "warning");
+    showPageError("Please enter at least one sensor ID.");
     return;
   }
 
   const sensors = sensorsRaw
-    .split(',')
+    .split(",")
     .map(s => s.trim())
     .filter(Boolean);
 
+  hidePageError();
+  showPageLoading();
+
   try {
     const results = [];
+
     for (const sensorId of sensors) {
       const res = await apiFetch(`/sensors/${encodeURIComponent(sensorId)}/reboot`, {
-        method: 'POST',
+        method: "POST",
         body: JSON.stringify({ reason: reason || null }),
       });
       results.push(res);
     }
-    showMessage("reboot-message", `Reboot queued for ${sensors.join(', ')}.`, "success");
+
+    showMessage("reboot-message", `Reboot queued for ${sensors.join(", ")}.`, "success");
     await loadRecentRebootHistory();
   } catch (e) {
     showMessage("reboot-message", `Failed to queue reboot: ${e.message}`, "danger");
+    showPageError(`Failed to queue reboot: ${e.message}`);
+  } finally {
+    hidePageLoading();
   }
 }
 
+// ================================================================
+// Settings helpers
+// ================================================================
 function intervalLabelToSeconds(label) {
-  const text = String(label || '').toLowerCase();
-  if (text.includes('30')) return 30;
-  if (text.includes('10')) return 600;
-  if (text.includes('5')) return 300;
+  const text = String(label || "").toLowerCase();
+  if (text.includes("30")) return 30;
+  if (text.includes("10")) return 600;
+  if (text.includes("5")) return 300;
   return 60;
 }
 
 function secondsToIntervalLabel(seconds) {
   const s = Number(seconds);
-  if (s === 30) return '30 seconds';
-  if (s === 300) return '5 minutes';
-  if (s === 600) return '10 minutes';
-  return '1 minute';
+  if (s === 30) return "30 seconds";
+  if (s === 300) return "5 minutes";
+  if (s === 600) return "10 minutes";
+  return "1 minute";
 }
 
+// ================================================================
+// Save settings
+// ================================================================
 async function saveSettings() {
   const intervalLabel = document.getElementById("record-interval")?.value;
   const sensitivity = document.getElementById("sensitivity")?.value;
   const battery = Number(document.getElementById("battery-threshold")?.value);
 
+  hidePageError();
+  showPageLoading();
+
   try {
     const payload = {
       recordIntervalSeconds: intervalLabelToSeconds(intervalLabel),
-      sensitivity: sensitivity || 'Medium',
+      sensitivity: sensitivity || "Medium",
       batteryThresholdPct: Number.isFinite(battery) ? battery : 25,
     };
 
     await apiFetch(`/sensors/__default__/settings`, {
-      method: 'PUT',
+      method: "PUT",
       body: JSON.stringify({ settings: payload }),
     });
 
     showMessage("settings-message", `Settings saved.`, "success");
   } catch (e) {
     showMessage("settings-message", `Failed to save settings: ${e.message}`, "danger");
+    showPageError(`Failed to save settings: ${e.message}`);
+  } finally {
+    hidePageLoading();
   }
 }
 
+// ================================================================
+// Fake add project
+// ================================================================
 function fakeCreateProject() {
   const name = document.getElementById("project-name")?.value.trim();
   const loc = document.getElementById("project-location")?.value.trim();
   const sensors = document.getElementById("project-sensors")?.value.trim();
-  if (!name || !loc) { showMessage("project-message", "Project name and location are required.", "warning"); return; }
+
+  if (!name || !loc) {
+    showMessage("project-message", "Project name and location are required.", "warning");
+    showPageError("Project name and location are required.");
+    return;
+  }
+
+  hidePageError();
   showMessage("project-message", `Project "${name}" created successfully. Assigned sensors: ${sensors || "None"}.`);
 }
 
-document.querySelectorAll(".card").forEach((card) => { card.style.opacity = 0; setTimeout(() => { card.style.opacity = 1; card.style.transition = "opacity .45s ease"; }, 120); });
-const shell = document.querySelector(".dashboard-shell"); if (shell) { shell.style.opacity = 0; setTimeout(() => { shell.style.opacity = 1; shell.style.transition = "opacity .5s ease"; }, 80); }
+// ================================================================
+// Simple page fade-ins
+// ================================================================
+document.querySelectorAll(".card").forEach((card) => {
+  card.style.opacity = 0;
+  setTimeout(() => {
+    card.style.opacity = 1;
+    card.style.transition = "opacity .45s ease";
+  }, 120);
+});
+
+const shell = document.querySelector(".dashboard-shell");
+if (shell) {
+  shell.style.opacity = 0;
+  setTimeout(() => {
+    shell.style.opacity = 1;
+    shell.style.transition = "opacity .5s ease";
+  }, 80);
+}
 
-// Ensure sidebar nav always contains expected links (guard against unexpected DOM changes)
+// ================================================================
+// Sidebar safety
+// ================================================================
 function ensureSensorSidebar() {
-  const sidebar = document.querySelector('.sidebar .nav-section');
+  const sidebar = document.querySelector(".sidebar .nav-section");
   if (!sidebar) return;
+
   const required = [
-    {href: '/admin/dashboard.html', icon: '▦', text: 'Dashboard'},
-    {href: '/admin/sensor-health.html', icon: '📡', text: 'Sensor Health'},
-    {href: '/admin/sensor_health/alerts.html', icon: '🔔', text: 'Alerts'},
-    {href: '/admin/sensor_health/reboot.html', icon: '⟲', text: 'Reboot'},
-    {href: '/admin/sensor_health/settings.html', icon: '⚙', text: 'Settings'},
-    {href: '/admin/sensor_health/add-project.html', icon: '➕', text: 'Add a Project'}
+    { href: "/admin/dashboard.html", icon: "▦", text: "Dashboard" },
+    { href: "/admin/sensor-health.html", icon: "📡", text: "Sensor Health" },
+    { href: "/admin/sensor_health/alerts.html", icon: "🔔", text: "Alerts" },
+    { href: "/admin/sensor_health/reboot.html", icon: "⟲", text: "Reboot" },
+    { href: "/admin/sensor_health/settings.html", icon: "⚙", text: "Settings" },
+    { href: "/admin/sensor_health/add-project.html", icon: "➕", text: "Add a Project" }
   ];
 
   required.forEach(item => {
     if (!sidebar.querySelector(`a[href="${item.href}"]`)) {
-      const a = document.createElement('a');
-      a.className = 'nav-link';
+      const a = document.createElement("a");
+      a.className = "nav-link";
       a.href = item.href;
       a.innerHTML = `<span class="nav-icon">${item.icon}</span><span class="nav-text">${item.text}</span>`;
       sidebar.appendChild(a);
@@ -190,48 +296,52 @@ function ensureSensorSidebar() {
   });
 }
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("DOMContentLoaded", function() {
   ensureSensorSidebar();
-  const navSection = document.querySelector('.sidebar .nav-section');
+
+  const navSection = document.querySelector(".sidebar .nav-section");
   if (navSection) {
     const observer = new MutationObserver(() => ensureSensorSidebar());
     observer.observe(navSection, { childList: true });
   }
 });
 
-// ---- Page-specific data wiring ----
+// ================================================================
+// Sensor Health page
+// ================================================================
 async function loadSensorHealthPage() {
-  const tbody = document.getElementById('sensor-overview-tbody');
+  const tbody = document.getElementById("sensor-overview-tbody");
   if (!tbody) return;
 
-  const statusFilter = document.getElementById('sensor-status-filter');
-  const projectFilter = document.getElementById('sensor-project-filter');
+  const statusFilter = document.getElementById("sensor-status-filter");
+  const projectFilter = document.getElementById("sensor-project-filter");
 
   let lastItems = [];
 
   function render() {
-    const statusVal = statusFilter?.value || 'All';
-    const projectVal = projectFilter?.value || 'All Projects';
+    const statusVal = statusFilter?.value || "All";
+    const projectVal = projectFilter?.value || "All Projects";
 
     const filtered = lastItems.filter(item => {
-      if (statusVal !== 'All' && item.status !== statusVal) return false;
-      if (projectVal !== 'All Projects' && (item.project || '—') !== projectVal) return false;
+      if (statusVal !== "All" && item.status !== statusVal) return false;
+      if (projectVal !== "All Projects" && (item.project || "—") !== projectVal) return false;
       return true;
     });
 
-    tbody.innerHTML = '';
+    tbody.innerHTML = "";
+
     if (!filtered.length) {
       tbody.innerHTML = '<tr><td colspan="5">No sensors match the current filter.</td></tr>';
       return;
     }
 
     for (const item of filtered) {
-      const tr = document.createElement('tr');
+      const tr = document.createElement("tr");
       tr.innerHTML = `
         <td>${item.sensorId}</td>
-        <td>${item.project || '—'}</td>
+        <td>${item.project || "—"}</td>
         <td>${pillHtml(item.status)}</td>
-        <td>${typeof item.batteryPct === 'number' ? `${item.batteryPct}%` : '—'}</td>
+        <td>${typeof item.batteryPct === "number" ? `${item.batteryPct}%` : "—"}</td>
         <td>${formatMinutesAgo(item.lastSeenMinutesAgo)}</td>
       `;
       tbody.appendChild(tr);
@@ -239,15 +349,20 @@ async function loadSensorHealthPage() {
   }
 
   async function refresh() {
+    hidePageError();
+    showPageLoading();
+
     try {
-      const data = await apiFetch('/sensors/updates');
+      const data = await apiFetch("/sensors/updates");
       lastItems = Array.isArray(data.items) ? data.items : [];
 
-      // Populate project filter options dynamically
       if (projectFilter) {
         const projects = Array.from(new Set(lastItems.map(i => i.project).filter(Boolean))).sort();
         const current = projectFilter.value;
-        projectFilter.innerHTML = '<option>All Projects</option>' + projects.map(p => `<option>${p}</option>`).join('');
+        projectFilter.innerHTML =
+          '<option>All Projects</option>' +
+          projects.map(p => `<option>${p}</option>`).join("");
+
         if ([...projectFilter.options].some(o => o.value === current)) {
           projectFilter.value = current;
         }
@@ -256,59 +371,88 @@ async function loadSensorHealthPage() {
       render();
     } catch (e) {
       tbody.innerHTML = `<tr><td colspan="5">Failed to load sensors: ${e.message}</td></tr>`;
+      showPageError(`Failed to load sensors: ${e.message}`);
+    } finally {
+      hidePageLoading();
     }
   }
 
-  statusFilter?.addEventListener('change', render);
-  projectFilter?.addEventListener('change', render);
+  statusFilter?.addEventListener("change", render);
+  projectFilter?.addEventListener("change", render);
 
   await refresh();
   setInterval(refresh, 15000);
 }
 
+// ================================================================
+// Alerts page
+// ================================================================
 async function loadAlertsPage() {
-  const tbody = document.getElementById('alerts-tbody');
+  const tbody = document.getElementById("alerts-tbody");
   if (!tbody) return;
+
+  hidePageError();
+  showPageLoading();
+
   try {
-    const data = await apiFetch('/sensors/alerts');
+    const data = await apiFetch("/sensors/alerts");
     const items = Array.isArray(data.items) ? data.items : [];
-    tbody.innerHTML = '';
+
+    tbody.innerHTML = "";
+
     if (!items.length) {
       tbody.innerHTML = '<tr><td colspan="4">No active alerts.</td></tr>';
       return;
     }
+
     for (const alert of items) {
-      const tr = document.createElement('tr');
+      const tr = document.createElement("tr");
       const sevPill = pillHtml(alert.issue);
       tr.innerHTML = `
         <td>${alert.sensorId}</td>
         <td>${sevPill}</td>
-        <td>${alert.details || ''}</td>
+        <td>${alert.details || ""}</td>
         <td>${formatMinutesAgo(alert.lastAudioMinutesAgo)}</td>
       `;
       tbody.appendChild(tr);
     }
   } catch (e) {
     tbody.innerHTML = `<tr><td colspan="4">Failed to load alerts: ${e.message}</td></tr>`;
+    showPageError(`Failed to load alerts: ${e.message}`);
+  } finally {
+    hidePageLoading();
   }
 }
 
+// ================================================================
+// Reboot history page
+// ================================================================
 async function loadRecentRebootHistory() {
-  const tbody = document.getElementById('reboot-history-tbody');
+  const tbody = document.getElementById("reboot-history-tbody");
   if (!tbody) return;
+
+  hidePageError();
+  showPageLoading();
+
   try {
-    const data = await apiFetch('/sensors/reboots/recent?limit=50');
+    const data = await apiFetch("/sensors/reboots/recent?limit=50");
     const items = Array.isArray(data.items) ? data.items : [];
-    tbody.innerHTML = '';
+
+    tbody.innerHTML = "";
+
     if (!items.length) {
       tbody.innerHTML = '<tr><td colspan="3">No reboot history yet.</td></tr>';
       return;
     }
+
     for (const r of items) {
-      const t = r.requestedAt ? new Date(r.requestedAt).toLocaleString() : '—';
-      const status = String(r.status || 'Queued');
-      const cls = status.toLowerCase().includes('fail') ? 'pill-danger' : (status.toLowerCase().includes('success') ? 'pill-success' : 'pill-warning');
-      const tr = document.createElement('tr');
+      const t = r.requestedAt ? new Date(r.requestedAt).toLocaleString() : "—";
+      const status = String(r.status || "Queued");
+      const cls = status.toLowerCase().includes("fail")
+        ? "pill-danger"
+        : (status.toLowerCase().includes("success") ? "pill-success" : "pill-warning");
+
+      const tr = document.createElement("tr");
       tr.innerHTML = `
         <td>${r.sensorId}</td>
         <td><span class="pill ${cls}">${status}</span></td>
@@ -318,36 +462,54 @@ async function loadRecentRebootHistory() {
     }
   } catch (e) {
     tbody.innerHTML = `<tr><td colspan="3">Failed to load reboot history: ${e.message}</td></tr>`;
+    showPageError(`Failed to load reboot history: ${e.message}`);
+  } finally {
+    hidePageLoading();
   }
 }
 
+// ================================================================
+// Settings page
+// ================================================================
 async function loadSettingsPage() {
-  const interval = document.getElementById('record-interval');
-  const sensitivity = document.getElementById('sensitivity');
-  const battery = document.getElementById('battery-threshold');
+  const interval = document.getElementById("record-interval");
+  const sensitivity = document.getElementById("sensitivity");
+  const battery = document.getElementById("battery-threshold");
+
   if (!interval || !sensitivity || !battery) return;
 
+  hidePageError();
+  showPageLoading();
+
   try {
-    const data = await apiFetch('/sensors/__default__/settings');
+    const data = await apiFetch("/sensors/__default__/settings");
     const settings = data.settings || {};
     const intervalLabel = secondsToIntervalLabel(settings.recordIntervalSeconds);
 
-    // Set values if present
     interval.value = intervalLabel;
-    sensitivity.value = settings.sensitivity || 'Medium';
+    sensitivity.value = settings.sensitivity || "Medium";
     battery.value = Number(settings.batteryThresholdPct || 25);
   } catch (e) {
-    showMessage('settings-message', `Failed to load settings: ${e.message}`, 'danger');
+    showMessage("settings-message", `Failed to load settings: ${e.message}`, "danger");
+    showPageError(`Failed to load settings: ${e.message}`);
+  } finally {
+    hidePageLoading();
   }
 }
 
-// Keep existing onclick bindings working
+// ================================================================
+// Existing onclick compatibility
+// ================================================================
 window.fakeReboot = rebootSensors;
 window.fakeSaveSettings = saveSettings;
+window.fakeCreateProject = fakeCreateProject;
 
-document.addEventListener('DOMContentLoaded', () => {
+// ================================================================
+// Init page-specific loaders
+// ================================================================
+document.addEventListener("DOMContentLoaded", () => {
   loadSensorHealthPage();
   loadAlertsPage();
   loadRecentRebootHistory();
   loadSettingsPage();
-});
+});
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/sensor_health/settings.html b/src/Components/HMI/ui/public/admin/sensor_health/settings.html
index e380c76cd..803fc8c3a 100644
--- a/src/Components/HMI/ui/public/admin/sensor_health/settings.html
+++ b/src/Components/HMI/ui/public/admin/sensor_health/settings.html
@@ -3,45 +3,114 @@
 <head>
   <meta charset="UTF-8" />
   <title>Settings – Project Echo</title>
+
   <link rel="stylesheet" type="text/css" href="/admin/css/styles.min.css" />
   <link rel="stylesheet" href="/admin/css/icons/tabler-icons/tabler-icons.css" />
   <link rel="stylesheet" href="/admin/sensor_health/style.css" />
+
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
+
+  <!-- Shared admin page state -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
+
   <script src="/admin/sensor_health/script.js" defer></script>
 </head>
 <body>
-  <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
-    data-sidebar-position="fixed" data-header-position="fixed">
-    <!-- Sidebar Start -->
+  <div
+    class="page-wrapper"
+    id="main-wrapper"
+    data-layout="vertical"
+    data-navbarbg="skin6"
+    data-sidebartype="full"
+    data-sidebar-position="fixed"
+    data-header-position="fixed"
+  >
     <div id="sidebar"></div>
-    <!--  Sidebar End -->
-    <!--  Main wrapper -->
+
     <div class="body-wrapper">
       <div id="header"></div>
+
       <div class="container-fluid">
         <div class="sensor-page">
           <div class="dashboard-shell">
-      <section class="hero-header"><h1>Settings</h1><p class="subtitle">configure recording behaviour and alert thresholds</p></section>
-      <p id="settings-message" class="note"></p>
-      <section class="card"><h3>Recording & alert settings</h3><p class="card-subtitle">Adjust global defaults for sensor recording interval, sensitivity and low-battery alerts.</p>
-        <div class="form-grid"><div><label for="record-interval">Recording interval</label><select id="record-interval"><option>30 seconds</option><option selected>1 minute</option><option>5 minutes</option><option>10 minutes</option></select></div>
-        <div><label for="sensitivity">Sensitivity</label><select id="sensitivity"><option>Low</option><option selected>Medium</option><option>High</option></select></div>
-        <div><label for="battery-threshold">Battery warning threshold (%)</label><input id="battery-threshold" type="number" value="25" min="1" max="100" /></div></div>
-        <button class="btn-primary" onclick="fakeSaveSettings()">Save settings</button>
-      </section>
-    </div> <!-- END dashboard-shell -->
+            <div class="admin-page-status">
+              <div class="admin-error-banner d-none" role="alert" aria-live="polite">
+                <div class="admin-error-banner__content">
+                  <i class="ti ti-alert-circle"></i>
+                  <span>Something went wrong while loading this page.</span>
+                </div>
+                <button type="button" class="admin-error-banner__dismiss" aria-label="Dismiss error message">
+                  <i class="ti ti-x"></i>
+                </button>
+              </div>
+
+              <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
+                <div class="spinner-border text-danger" aria-hidden="true"></div>
+                <span class="admin-loading-spinner__text">Loading...</span>
+              </div>
+            </div>
+
+            <section class="hero-header">
+              <h1>Settings</h1>
+              <p class="subtitle">configure recording behaviour and alert thresholds</p>
+            </section>
+
+            <p id="settings-message" class="note"></p>
+
+            <section class="card">
+              <h3>Recording &amp; alert settings</h3>
+              <p class="card-subtitle">
+                Adjust global defaults for sensor recording interval, sensitivity and low-battery alerts.
+              </p>
+
+              <div class="form-grid">
+                <div>
+                  <label for="record-interval">Recording interval</label>
+                  <select id="record-interval">
+                    <option>30 seconds</option>
+                    <option selected>1 minute</option>
+                    <option>5 minutes</option>
+                    <option>10 minutes</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label for="sensitivity">Sensitivity</label>
+                  <select id="sensitivity">
+                    <option>Low</option>
+                    <option selected>Medium</option>
+                    <option>High</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label for="battery-threshold">Battery warning threshold (%)</label>
+                  <input id="battery-threshold" type="number" value="25" min="1" max="100" />
+                </div>
+              </div>
+
+              <button class="btn-primary" onclick="fakeSaveSettings()">Save settings</button>
+            </section>
+          </div>
         </div>
-      <div id="footer"></div>
+
+        <div id="footer"></div>
+      </div>
     </div>
   </div>
 
   <script>
     $(document).ready(function() {
-      $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
+      });
       $("#header").load("/admin/component/header-component.html");
       $("#footer").load("/admin/component/footer-component.html");
     });
+
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/Components/HMI/ui/public/admin/template.html b/src/Components/HMI/ui/public/admin/template.html
index 387bf6cf1..0c8740e22 100644
--- a/src/Components/HMI/ui/public/admin/template.html
+++ b/src/Components/HMI/ui/public/admin/template.html
@@ -5,74 +5,88 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Echo Admin</title>
+
   <link rel="shortcut icon" type="image/png" href="/admin/images/logos/favicon.png" />
   <link type="text/css" rel="stylesheet" href="/admin/css/styles.min.css" />
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
-  <scrip type="text/javascript" src="https://kit.fontawesome.com/8aa980d912.js" crossorigin="anonymous"></script>
-
-  <link
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
-    rel="stylesheet"
-    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
-    crossorigin="anonymous"
-  />
-
-  <link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-  />
-  <!-- jQuery -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
+  <link rel="stylesheet" href="/admin/css/icons/tabler-icons/tabler-icons.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
+
+  <script type="text/javascript" src="https://kit.fontawesome.com/8aa980d912.js" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
-
   <script type="text/javascript" src="/admin/js/sidebarmenu.js"></script>
   <script type="text/javascript" src="/admin/js/app.min.js"></script>
-  <!-- <script type="text/javascript" src="../../node_modules/apexcharts/dist/apexcharts.min.js"></script> -->
   <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-  <link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"
-  />
   <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
-  <script type="text/javascript" src="./admin/js/dashboard.js"></script>
+
+  <!-- Shared admin page state helper -->
+  <script type="text/javascript" src="/admin/js/admin-page-state.js"></script>
 </head>
 
 <body>
-  <!--  Body Wrapper -->
-  <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
-    data-sidebar-position="fixed" data-header-position="fixed">
-    <!-- Sidebar Start -->
+  <div
+    class="page-wrapper"
+    id="main-wrapper"
+    data-layout="vertical"
+    data-navbarbg="skin6"
+    data-sidebartype="full"
+    data-sidebar-position="fixed"
+    data-header-position="fixed"
+  >
     <div id="sidebar"></div>
-    <!--  Sidebar End -->
-    <!--  Main wrapper -->
+
     <div class="body-wrapper">
       <div id="header"></div>
+
       <div class="container-fluid">
+
+        <!-- Shared page status UI -->
+        <div class="admin-page-status">
+          <div class="admin-error-banner d-none" role="alert" aria-live="polite">
+            <div class="admin-error-banner__content">
+              <i class="ti ti-alert-circle"></i>
+              <span>Something went wrong while loading this page.</span>
+            </div>
+            <button type="button" class="admin-error-banner__dismiss" aria-label="Dismiss error message">
+              <i class="ti ti-x"></i>
+            </button>
+          </div>
+
+          <div class="admin-loading-spinner d-none" role="status" aria-live="polite">
+            <div class="spinner-border text-danger" aria-hidden="true"></div>
+            <span class="admin-loading-spinner__text">Loading...</span>
+          </div>
+        </div>
+
         <div class="card">
           <div class="card-body">
             <h5 class="card-title fw-semibold mb-4">Sample Page</h5>
-            <p class="mb-0">This is a sample page </p>
+            <p class="mb-0">This is a sample page</p>
           </div>
         </div>
+
       </div>
     </div>
-  </div>
 
+    <div id="footer"></div>
+  </div>
 
   <script type="text/javascript">
     $(document).ready(function() {
-              // Use jQuery's load() method to load component contents
-                console.log("Start!")
-                $("#sidebar").load("/admin/component/sidebar-component.html", function() { $.getScript('/admin/js/sidebarmenu.js'); });
-                $("#header").load("/admin/component/header-component.html");
-                $("#footer").load("/admin/component/footer-component.html");
-          });
+      $("#sidebar").load("/admin/component/sidebar-component.html", function() {
+        $.getScript('/admin/js/sidebarmenu.js');
+      });
+      $("#header").load("/admin/component/header-component.html");
+      $("#footer").load("/admin/component/footer-component.html");
+    });
+
+    const pageState = createAdminPageState();
+    pageState.resetPageState();
   </script>
 </body>
-<div id="footer"></div>
-</div>
-
 
 </html>
\ No newline at end of file
