From b67266d3b323fe4748e4be0a2c91b7f282c0772a Mon Sep 17 00:00:00 2001
From: Jordan Wages <jordan@jordanwages.com>
Date: Sat, 19 Jul 2025 00:26:00 -0500
Subject: [PATCH] Add tabbed interface to dashboard

---
 templates/index.html | 94 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 80 insertions(+), 14 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 6294602..98e76ac 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,8 +9,17 @@
 <body class="section">
   <div class="container">
     <h1 class="title">ngxstat Reports</h1>
-    <div class="field is-grouped">
-      <div class="control has-icons-left">
+
+    <div class="tabs is-toggle" id="report-tabs">
+      <ul>
+        <li class="is-active" data-tab="overview"><a>Overview</a></li>
+        <li data-tab="all"><a>All Domains</a></li>
+        <li data-tab="domain"><a>Per Domain</a></li>
+      </ul>
+    </div>
+
+    <div id="controls" class="field is-grouped mb-4">
+      <div id="interval-control" class="control has-icons-left is-hidden">
         <div class="select is-small">
           <select id="interval-select">
             {% for interval in intervals %}
@@ -20,7 +29,7 @@
         </div>
         <span class="icon is-small is-left"><i data-feather="clock"></i></span>
       </div>
-      <div class="control has-icons-left">
+      <div id="domain-control" class="control has-icons-left is-hidden">
         <div class="select is-small">
           <select id="domain-select">
             <option value="">All Domains</option>
@@ -32,13 +41,24 @@
         <span class="icon is-small is-left"><i data-feather="server"></i></span>
       </div>
     </div>
-    <div id="overview" class="box mb-5">
-      <h2 class="subtitle">Overview</h2>
-      <p>Total logs: <span id="stat-total">-</span></p>
-      <p>Date range: <span id="stat-start">-</span> to <span id="stat-end">-</span></p>
-      <p>Unique domains: <span id="stat-domains">-</span></p>
+
+    <div id="overview-section">
+      <div id="overview" class="box mb-5">
+        <h2 class="subtitle">Overview</h2>
+        <p>Total logs: <span id="stat-total">-</span></p>
+        <p>Date range: <span id="stat-start">-</span> to <span id="stat-end">-</span></p>
+        <p>Unique domains: <span id="stat-domains">-</span></p>
+      </div>
+      <div id="overview-reports"></div>
+    </div>
+
+    <div id="all-section" class="is-hidden">
+      <div id="reports-all"></div>
+    </div>
+
+    <div id="domain-section" class="is-hidden">
+      <div id="reports-domain"></div>
     </div>
-    <div id="reports-container"></div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -47,7 +67,19 @@
   <script>
     const intervalSelect = document.getElementById('interval-select');
     const domainSelect = document.getElementById('domain-select');
-    const container = document.getElementById('reports-container');
+    const intervalControl = document.getElementById('interval-control');
+    const domainControl = document.getElementById('domain-control');
+    const tabs = document.querySelectorAll('#report-tabs li');
+    const sections = {
+      overview: document.getElementById('overview-section'),
+      all: document.getElementById('all-section'),
+      domain: document.getElementById('domain-section')
+    };
+    const containers = {
+      overview: document.getElementById('overview-reports'),
+      all: document.getElementById('reports-all'),
+      domain: document.getElementById('reports-domain')
+    };
     const totalElem = document.getElementById('stat-total');
     const startElem = document.getElementById('stat-start');
     const endElem = document.getElementById('stat-end');
@@ -55,6 +87,7 @@
 
     let currentInterval = intervalSelect.value;
     let currentDomain = domainSelect.value;
+    let currentTab = 'overview';
 
     function initReport(rep, base) {
       fetch(base + '/' + rep.json)
@@ -119,10 +152,23 @@
     }
 
     function loadReports() {
-      let path = currentInterval;
-      if (currentDomain) {
+      let path;
+      let container;
+      if (currentTab === 'overview') {
+        path = 'global';
+        container = containers.overview;
+      } else if (currentTab === 'all') {
+        path = currentInterval;
+        container = containers.all;
+      } else {
+        container = containers.domain;
+        if (!currentDomain) {
+          container.innerHTML = '<p>Select a domain</p>';
+          return;
+        }
         path = 'domains/' + currentDomain + '/' + currentInterval;
       }
+
       fetch(path + '/reports.json')
         .then(r => r.json())
         .then(reports => {
@@ -135,9 +181,26 @@
                 initReport(rep, path);
               });
           });
+          feather.replace();
         });
     }
 
+    function switchTab(name) {
+      currentTab = name;
+      tabs.forEach(tab => {
+        tab.classList.toggle('is-active', tab.dataset.tab === name);
+      });
+      Object.entries(sections).forEach(([key, section]) => {
+        section.classList.toggle('is-hidden', key !== name);
+      });
+      intervalControl.classList.toggle('is-hidden', name === 'overview');
+      domainControl.classList.toggle('is-hidden', name !== 'domain');
+      if (name === 'overview') {
+        loadStats();
+      }
+      loadReports();
+    }
+
     intervalSelect.addEventListener('change', () => {
       currentInterval = intervalSelect.value;
       loadReports();
@@ -148,8 +211,11 @@
       loadReports();
     });
 
-    loadReports();
-    loadStats();
+    tabs.forEach(tab => {
+      tab.addEventListener('click', () => switchTab(tab.dataset.tab));
+    });
+
+    switchTab('overview');
     feather.replace();
   </script>
 </body>
