Clean NOC dashboard UI with real inventory data

script.js

@@ -3,4 +3,73 @@ document.addEventListener("DOMContentLoaded", () => {
   if (yearSpan) {
     yearSpan.textContent = new Date().getFullYear();
   }
-});
+
+  loadNocStatus();
+});
+
+async function loadNocStatus() {
+  try {
+    const response = await fetch("data/noc-status.json");
+
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    const statusText = document.getElementById("noc-status-text");
+    const nodes = document.getElementById("metric-nodes");
+    const services = document.getElementById("metric-services");
+    const vlans = document.getElementById("metric-vlans");
+    const edge = document.getElementById("metric-edge");
+    const grid = document.getElementById("noc-system-grid");
+
+    if (!statusText || !nodes || !services || !vlans || !edge || !grid) {
+      return;
+    }
+
+    statusText.textContent = `${data.nocName} — ${data.status} — ${data.lastUpdated}`;
+
+    nodes.textContent = data.summary.nodes;
+    services.textContent = data.summary.services;
+    vlans.textContent = data.summary.vlans;
+    edge.textContent = data.summary.edgeSystems;
+
+    grid.innerHTML = "";
+
+    data.systems.forEach((system) => {
+      const card = document.createElement("article");
+      card.className = "noc-system-card";
+
+      const status = system.status.toLowerCase();
+
+      const statusClass =
+        status.includes("online") || status.includes("operational")
+          ? "online"
+          : status.includes("building") || status.includes("tuning") || status.includes("active")
+          ? "warning"
+          : "planned";
+
+      card.innerHTML = `
+        <div class="noc-system-top">
+          <span class="mini-status ${statusClass}"></span>
+          <span>${system.layer}</span>
+        </div>
+        <h3>${system.name}</h3>
+        <p>${system.type}</p>
+        <code>${system.address}</code>
+        <small>Status: ${system.status}</small>
+      `;
+
+      grid.appendChild(card);
+    });
+  } catch (error) {
+    const statusText = document.getElementById("noc-status-text");
+
+    if (statusText) {
+      statusText.textContent = "Ced’s NOC data unavailable";
+    }
+
+    console.error("Failed to load NOC status:", error);
+  }
+}