From 85663341ebb7cba0039a3bb8fc666726d19f6341 Mon Sep 17 00:00:00 2001
From: billz <billzimmerman@gmail.com>
Date: Sun, 23 Mar 2025 00:26:48 -0700
Subject: [PATCH 1/4] Initial commit

---
 templates/dashboard/data.php   |  19 +++++
 templates/dashboard/status.php | 123 +++++++++++++++++++++++++++++++++
 2 files changed, 142 insertions(+)
 create mode 100644 templates/dashboard/data.php
 create mode 100644 templates/dashboard/status.php

diff --git a/templates/dashboard/data.php b/templates/dashboard/data.php
new file mode 100644
index 00000000..bac508e6
--- /dev/null
+++ b/templates/dashboard/data.php
@@ -0,0 +1,19 @@
+<div class="tab-pane" id="data">
+  <h4 class="card-title mt-3">
+    <?php echo _("Hourly traffic"); ?>
+  </h4>
+
+  <div class="col-md-12">
+    <div class="col dbChart">
+      <canvas id="divDBChartBandwidthhourly"></canvas>
+    </div>
+  </div>
+
+</div><!-- /.tab-pane | data tab -->
+
+<script type="text/javascript"<?php //echo ' nonce="'.$csp_page_nonce.'"'; ?>>
+  // js translations:
+  var t = new Array();
+  t['send'] = '<?php echo addslashes(_('Send')); ?>';
+  t['receive'] = '<?php echo addslashes(_('Receive')); ?>';
+</script>
diff --git a/templates/dashboard/status.php b/templates/dashboard/status.php
new file mode 100644
index 00000000..5fc77913
--- /dev/null
+++ b/templates/dashboard/status.php
@@ -0,0 +1,123 @@
+<div class="tab-pane active" id="status">
+  <h4 class="card-title mt-3">
+    <?php echo _("Current status"); ?>
+  </h4>
+  <div class="dashboard-container row">
+    <div class="connections-left col-lg-4">
+      <div class="connection-item">
+        <a href="/network_conf" class="<?php echo $ethernetActive; ?>"><span><?php echo _("Ethernet"); ?></span></a>
+        <a href="/network_conf" class="<?php echo $ethernetActive; ?>"><i class="fas fa-ethernet fa-2xl"></i></a>
+      </div>
+      <div class="connection-item">
+        <a href="/network_conf" class="<?php echo $wirelessActive; ?>"><span><?php echo _("Repeater"); ?></span>
+        <a href="/network_conf" class="<?php echo $wirelessActive; ?>"><i class="fas fa-wifi fa-2xl"></i></a>
+      </div>
+      <div class="connection-item">
+        <a href="/network_conf" class="<?php echo $tetheringActive; ?>"><span><?php echo _("Tethering"); ?></span></a>
+        <a href="/network_conf" class="<?php echo $tetheringActive; ?>"><i class="fas fa-mobile-alt fa-2xl"></i></a>
+      </div>
+      <div class="connection-item">
+        <a href="/network_conf" class="<?php echo $cellularActive; ?>"><span><?php echo _("Cellular"); ?></span></a>
+        <a href="/network_conf" class="<?php echo $cellularActive; ?>"><i class="fas fa-broadcast-tower fa-2xl"></i></a>
+      </div>
+      <img src="app/img/dashed.svg" class="dashed-lines" alt="">
+      <img src="<?php echo htmlspecialchars(renderConnection($connectionType)); ?>" class="solid-lines" alt="Network connection">
+    </div>
+    <div class="center-device col-12 col-lg-4">
+      <div class="center-device-top">
+        <a href="/system_info"><img class="device-illustration" src="app/img/device.php" alt="<?php echo htmlspecialchars($revision, ENT_QUOTES); ?>"></a>
+        <div class="device-label"><a href="/system_info"><?php echo htmlspecialchars($revision, ENT_QUOTES); ?></a></div>
+        <div class="mt-1 small"><?php echo _("IP Address"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($ipv4Address, ENT_QUOTES); ?></a></div>
+        <div class="small"><?php echo _("Netmask"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($ipv4Netmask, ENT_QUOTES); ?></a></div>
+        <div class="small"><?php echo _("MAC Address"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($macAddress, ENT_QUOTES); ?></a></div>
+        <div class="small"><?php echo _("SSID"); ?>: <a href="/hostapd_conf"><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></a></div>
+      </div>
+
+      <div class="bottom">
+        <div class="device-status">
+          <a href="/hostapd_conf">
+            <div class="status-item <?php echo $hostapdStatus; ?>">
+              <i class="fas fa-bullseye fa-2xl"></i>
+              <span><?php echo _('AP'); ?></span>
+            </div>
+          </a>
+          <a href="/hostapd_conf?tab=advanced">
+            <div class="status-item <?php echo $bridgedStatus; ?>">
+              <i class="fas fa-bridge fa-2xl"></i>
+              <span><?php echo _('Bridged'); ?></span>
+            </div>
+          </a>
+          <a href="/adblock_conf">
+            <div class="status-item <?php echo $adblockStatus; ?>">
+              <i class="far fa-hand-paper fa-2xl"></i>
+              <span><?php echo _('Adblock'); ?></span>
+            </div>
+          </a>
+          <a href="<?php echo $vpnManaged; ?>">
+            <div class="status-item <?php echo $vpnStatus; ?>">
+              <i class="fas fa-shield-alt fa-2xl"></i>
+              <span><?php echo _('VPN'); ?></span>
+            </div>
+          </a>
+          <?php echo $firewallManaged; ?>
+            <div class="status-item <?php echo $firewallStatus; ?>">
+              <span class="fa-stack fa-2xl" style="line-height: 0!important;height: 100%!important;">
+                <i class="fas fa-fire-flame-curved fa-stack-1x"></i>
+                <?php echo $firewallUnavailable; ?>
+              </span>
+              <span><?php echo _('Firewall'); ?></span>
+            </div>
+          </a>
+        </div>
+
+        <div class="wifi-bands">
+          <a href="/hostapd_conf"><span class="band <?php echo $freq5active; ?>"><?php echo _("5G"); ?></span></a>
+          <a href="/hostapd_conf"><span class="band <?php echo $freq24active; ?>"><?php echo _("2.4G"); ?></span></a>
+        </div>
+      </div>
+
+      <div class="clients-mobile">
+        <div class="client-type">
+          <a href="/network_conf">
+            <i class="fas fa-globe"></i>
+            <div class="client-count">
+              <i class="fas <?php echo $connectionIcon; ?> badge-icon"></i>
+            </div>
+          </a>
+        </div>
+        <div class="client-type">
+          <a href="/dhcpd_conf">
+            <i class="fas fa-laptop <?php echo $totalClientsActive; ?>"></i>
+            <span class="client-count"><?php echo $totalClients; ?></span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="connections-right col-lg-4">
+      <div class="d-flex flex-column justify-content-around h-100">
+        <div class="connection-item connection-right">
+          <a href="/dhcpd_conf?tab=client-list" class="<?php echo $wirelessClientActive; ?>">
+            <span class="fa-stack">
+              <i class="fas fa-laptop fa-stack-1x fa-2xl"></i>
+              <i class="fas fa-wifi fa-stack-1x fa-xs"></i>
+            </span>
+          </a>
+          <a href="/dhcpd_conf?tab=client-list"><span class="text-nowrap <?php echo $wirelessClientActive; ?>"><?php echo $wirelessClientLabel; ?></span></a>
+        </div>
+        <div class="connection-item connection-right">
+          <a href="/dhcpd_conf?tab=client-list" class="<?php echo $ethernetClientActive; ?>">
+            <span class="fa-stack">
+              <i class="fas fa-laptop fa-stack-1x fa-2xl"></i>
+              <i class="fas fa-ethernet fa-stack-1x fa-xs"></i>
+            </span>
+          </a>
+          <a href="/dhcpd_conf?tab=client-list"><span class="text-nowrap <?php echo $ethernetClientActive; ?>"><?php echo $ethernetClientLabel; ?></span></a>
+        </div>
+      </div>
+      <?php echo renderClientConnections($wirelessClients, $ethernetClients); ?>
+      <img src="app/img/right-dashed.svg" class="dashed-lines dashed-lines-right" alt="">
+    </div>
+  </div>
+</div><!-- /.tab-pane | status tab -->
+

From 4d0de82986d725fadb511c80b08fd46328d11eb8 Mon Sep 17 00:00:00 2001
From: billz <billzimmerman@gmail.com>
Date: Sun, 23 Mar 2025 00:27:39 -0700
Subject: [PATCH 2/4] Add &$extraFooterScripts to support data usage graph

---
 includes/dashboard.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/includes/dashboard.php b/includes/dashboard.php
index 3e1b3e14..c6857b21 100755
--- a/includes/dashboard.php
+++ b/includes/dashboard.php
@@ -7,7 +7,7 @@ require_once 'includes/functions.php';
 /**
  * Displays the dashboard
  */
-function DisplayDashboard(): void
+function DisplayDashboard(&$extraFooterScripts): void
 {
     // instantiate RaspAP objects
     $system = new \RaspAP\System\Sysinfo;
@@ -123,6 +123,7 @@ function DisplayDashboard(): void
             "status"
         )
     );
+    $extraFooterScripts[] = array('src'=>'app/js/dashboardchart.js', 'defer'=>false);
 }
 
 /**

From 483b1fc27d505e19f0c890dedebe8de1adf628aa Mon Sep 17 00:00:00 2001
From: billz <billzimmerman@gmail.com>
Date: Sun, 23 Mar 2025 00:28:31 -0700
Subject: [PATCH 3/4] Split single template into tabs

---
 templates/dashboard.php | 167 +++++++---------------------------------
 1 file changed, 26 insertions(+), 141 deletions(-)

diff --git a/templates/dashboard.php b/templates/dashboard.php
index b4c34cda..394dcbf6 100755
--- a/templates/dashboard.php
+++ b/templates/dashboard.php
@@ -1,12 +1,12 @@
 <?php ob_start() ?>
-    <?php if (!RASPI_MONITOR_ENABLED) : ?>
-      <?php if ($state === "down") : ?>
-        <input type="submit" class="btn btn-success" value="<?php echo _("Start").' '.$interface ?>" name="ifup_wlan0" />
-      <?php else : ?>
-        <input type="submit" class="btn btn-warning" value="<?php echo _("Stop").' '.$interface ?>"  name="ifdown_wlan0" />
-      <?php endif ?>
+  <?php if (!RASPI_MONITOR_ENABLED) : ?>
+    <?php if ($state === "down") : ?>
+      <input type="submit" class="btn btn-success mt-2" value="<?php echo _("Start").' '.$interface ?>" name="ifup_wlan0" />
+    <?php else : ?>
+      <input type="submit" class="btn btn-warning mt-2" value="<?php echo _("Stop").' '.$interface ?>"  name="ifdown_wlan0" />
     <?php endif ?>
-    <button type="button" onClick="window.location.reload();" class="btn btn-outline btn-primary"><i class="fas fa-sync-alt"></i> <?php echo _("Refresh") ?></a>
+  <?php endif ?>
+  <button type="button" onClick="window.location.reload();" class="btn btn-outline btn-primary mt-2"><i class="fas fa-sync-alt"></i> <?php echo _("Refresh") ?></a>
 <?php $buttons = ob_get_clean(); ob_end_clean() ?>
 
 <div class="row">
@@ -21,150 +21,35 @@
           <div class="col">
             <button class="btn btn-light btn-icon-split btn-sm service-status float-end">
               <span class="icon"><i class="fas fa-circle service-status-<?php echo $state ?>"></i></span>
-              <span class="text service-status">
-                <?php echo strtolower($interface) .' '. _($state) ?>
-              </span>
+              <span class="text service-status"><?php echo strtolower($interface) .' '. _($state) ?></span>
             </button>
           </div>
         </div><!-- /.row -->
       </div><!-- /.card-header -->
-      <div class="card-wrapper">
 
-        <div class="card">
-          <div class="card-body">
-            <?php $status->showMessages(); ?>
-            <h4 class="card-title">
-              <?php echo _("Current status"); ?>
-            </h4>
-            <div class="dashboard-container row">
-              <div class="connections-left col-lg-4">
-                <div class="connection-item">
-                  <a href="/network_conf" class="<?php echo $ethernetActive; ?>"><span><?php echo _("Ethernet"); ?></span></a>
-                  <a href="/network_conf" class="<?php echo $ethernetActive; ?>"><i class="fas fa-ethernet fa-2xl"></i></a>
-                </div>
-                <div class="connection-item">
-                  <a href="/network_conf" class="<?php echo $wirelessActive; ?>"><span><?php echo _("Repeater"); ?></span>
-                  <a href="/network_conf" class="<?php echo $wirelessActive; ?>"><i class="fas fa-wifi fa-2xl"></i></a>
-                </div>
-                <div class="connection-item">
-                  <a href="/network_conf" class="<?php echo $tetheringActive; ?>"><span><?php echo _("Tethering"); ?></span></a>
-                  <a href="/network_conf" class="<?php echo $tetheringActive; ?>"><i class="fas fa-mobile-alt fa-2xl"></i></a>
-                </div>
-                <div class="connection-item">
-                  <a href="/network_conf" class="<?php echo $cellularActive; ?>"><span><?php echo _("Cellular"); ?></span></a>
-                  <a href="/network_conf" class="<?php echo $cellularActive; ?>"><i class="fas fa-broadcast-tower fa-2xl"></i></a>
-                </div>
-                <img src="app/img/dashed.svg" class="dashed-lines" alt="">
-                <img src="<?php echo htmlspecialchars(renderConnection($connectionType)); ?>" class="solid-lines" alt="Network connection">
-              </div>
-              <div class="center-device col-12 col-lg-4">
-                <div class="center-device-top">
-                  <a href="/system_info"><img class="device-illustration" src="app/img/device.php" alt="<?php echo htmlspecialchars($revision, ENT_QUOTES); ?>"></a>
-                  <div class="device-label"><a href="/system_info"><?php echo htmlspecialchars($revision, ENT_QUOTES); ?></a></div>
-                  <div class="mt-1 small"><?php echo _("IP Address"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($ipv4Address, ENT_QUOTES); ?></a></div>
-                  <div class="small"><?php echo _("Netmask"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($ipv4Netmask, ENT_QUOTES); ?></a></div>
-                  <div class="small"><?php echo _("MAC Address"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($macAddress, ENT_QUOTES); ?></a></div>
-                  <div class="small"><?php echo _("SSID"); ?>: <a href="/hostapd_conf"><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></a></div>
-                </div>
+      <div class="card-body">
+        <?php $status->showMessages(); ?>
+        <form action="wlan0_info" method="POST">
+          <?php echo CSRFTokenFieldTag() ?>
 
-                <div class="bottom">
-                  <div class="device-status">
-                    <a href="/hostapd_conf">
-                      <div class="status-item <?php echo $hostapdStatus; ?>">
-                        <i class="fas fa-bullseye fa-2xl"></i>
-                        <span><?php echo _('AP'); ?></span>
-                      </div>
-                    </a>
-                    <a href="/hostapd_conf?tab=advanced">
-                      <div class="status-item <?php echo $bridgedStatus; ?>">
-                        <i class="fas fa-bridge fa-2xl"></i>
-                        <span><?php echo _('Bridged'); ?></span>
-                      </div>
-                    </a>
-                    <a href="/adblock_conf">
-                      <div class="status-item <?php echo $adblockStatus; ?>">
-                        <i class="far fa-hand-paper fa-2xl"></i>
-                        <span><?php echo _('Adblock'); ?></span>
-                      </div>
-                    </a>
-                    <a href="<?php echo $vpnManaged; ?>">
-                      <div class="status-item <?php echo $vpnStatus; ?>">
-                        <i class="fas fa-shield-alt fa-2xl"></i>
-                        <span><?php echo _('VPN'); ?></span>
-                      </div>
-                    </a>
-                    <?php echo $firewallManaged; ?>
-                      <div class="status-item <?php echo $firewallStatus; ?>">
-                        <span class="fa-stack fa-2xl" style="line-height: 0!important;height: 100%!important;">
-                          <i class="fas fa-fire-flame-curved fa-stack-1x"></i>
-                          <?php echo $firewallUnavailable; ?>
-                        </span>
-                        <span><?php echo _('Firewall'); ?></span>
-                      </div>
-                    </a>
-                  </div>
+          <!-- Nav tabs -->
+          <ul class="nav nav-tabs">
+            <li class="nav-item"><a class="nav-link active" id="statustab" href="#status" aria-controls="status" data-bs-toggle="tab"><?php echo _("Status"); ?></a></li>
+            <li class="nav-item"><a class="nav-link" id="datatab" href="#data" data-bs-toggle="tab"><?php echo _("Data usage"); ?></a></li>
+          </ul>
 
-                  <div class="wifi-bands">
-                    <a href="/hostapd_conf"><span class="band <?php echo $freq5active; ?>"><?php echo _("5G"); ?></span></a>
-                    <a href="/hostapd_conf"><span class="band <?php echo $freq24active; ?>"><?php echo _("2.4G"); ?></span></a>
-                  </div>
-                </div>
+          <!-- Tab panes -->
+          <div class="tab-content">
+            <?php echo renderTemplate("dashboard/status", $__template_data) ?>
+            <?php echo renderTemplate("dashboard/data", $__template_data) ?>
+          </div><!-- /.tab-content -->
 
-                <div class="clients-mobile">
-                  <div class="client-type">
-                    <a href="/network_conf">
-                      <i class="fas fa-globe"></i>
-                      <div class="client-count">
-                        <i class="fas <?php echo $connectionIcon; ?> badge-icon"></i>
-                      </div>
-                    </a>
-                  </div>
-                  <div class="client-type">
-                    <a href="/dhcpd_conf">
-                      <i class="fas fa-laptop <?php echo $totalClientsActive; ?>"></i>
-                      <span class="client-count"><?php echo $totalClients; ?></span>
-                    </a>
-                  </div>
-                </div>
-              </div>
+          <?php echo $buttons ?>
+        </form>
+      </div><!-- /.card-body -->
 
-              <div class="connections-right col-lg-4">
-                <div class="d-flex flex-column justify-content-around h-100">
-                  <div class="connection-item connection-right">
-                    <a href="/dhcpd_conf?tab=client-list" class="<?php echo $wirelessClientActive; ?>">
-                      <span class="fa-stack">
-                        <i class="fas fa-laptop fa-stack-1x fa-2xl"></i>
-                        <i class="fas fa-wifi fa-stack-1x fa-xs"></i>
-                      </span>
-                    </a>
-                    <a href="/dhcpd_conf?tab=client-list"><span class="text-nowrap <?php echo $wirelessClientActive; ?>"><?php echo $wirelessClientLabel; ?></span></a>
-                  </div>
-                  <div class="connection-item connection-right">
-                    <a href="/dhcpd_conf?tab=client-list" class="<?php echo $ethernetClientActive; ?>">
-                      <span class="fa-stack">
-                        <i class="fas fa-laptop fa-stack-1x fa-2xl"></i>
-                        <i class="fas fa-ethernet fa-stack-1x fa-xs"></i>
-                      </span>
-                    </a>
-                    <a href="/dhcpd_conf?tab=client-list"><span class="text-nowrap <?php echo $ethernetClientActive; ?>"><?php echo $ethernetClientLabel; ?></span></a>
-                  </div>
-                </div>
-                <?php echo renderClientConnections($wirelessClients, $ethernetClients); ?>
-                <img src="app/img/right-dashed.svg" class="dashed-lines dashed-lines-right" alt="">
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-lg-12 mt-3">
-        </div>
-        <div class="row">
-          <form action="wlan0_info" method="POST">
-            <?php echo CSRFTokenFieldTag() ?>
-            <?php echo $buttons ?>
-          </form>
-        </div>
-      </div>
       <div class="card-footer"><?php echo _("Information provided by raspap.sysinfo"); ?></div>
+
     </div><!-- /.card -->
   </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->

From a24516a4d5f75ff6dfff88cabc79f5205fce567a Mon Sep 17 00:00:00 2001
From: billz <billzimmerman@gmail.com>
Date: Sun, 23 Mar 2025 00:33:27 -0700
Subject: [PATCH 4/4] Tweak divDBChartBandwidthhourly

---
 app/css/all.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/css/all.css b/app/css/all.css
index d95c8390..b42a34e2 100644
--- a/app/css/all.css
+++ b/app/css/all.css
@@ -169,7 +169,7 @@ th {
 }
 
 canvas#divDBChartBandwidthhourly {
-  height: 350px!important;
+  height: 509px!important;
 }
 
 .dbChart {