From cc4ff46191a9f68d8a096afd5daa28bfda759f23 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Mon, 27 Oct 2025 11:20:11 +1300
Subject: [PATCH] feat(bi): add period selector dropdown to cost avoidance
 metric
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added time period filtering to cost avoidance calculation:

HTML changes:
- Added dropdown selector next to "Cost Avoidance" title
- Options: 7 days, 30 days (default), 90 days, 1 year, all time
- Green focus ring matching metric theme

JavaScript changes:
- Filter audit data by selected time period before calculating costs
- Event listener updates calculation when period changes
- Cutoff date logic for temporal filtering
- Defaults to 30 days if selector not found

Users can now see cost avoidance for different time windows to track
governance ROI trends over various periods.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/admin/audit-analytics.html  | 11 ++++++++++-
 public/js/admin/audit-analytics.js | 24 ++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/public/admin/audit-analytics.html b/public/admin/audit-analytics.html
index 896509a0..0d17393f 100644
--- a/public/admin/audit-analytics.html
+++ b/public/admin/audit-analytics.html
@@ -167,7 +167,16 @@
         <!-- Cost Avoidance -->
         <div class="bg-white rounded-lg p-4 border-2 border-green-200">
           <div class="flex items-center justify-between mb-3">
-            <h4 class="text-md font-semibold text-gray-800">Cost Avoidance This Period</h4>
+            <div class="flex items-center space-x-3">
+              <h4 class="text-md font-semibold text-gray-800">Cost Avoidance</h4>
+              <select id="cost-period-selector" class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-2 focus:ring-green-500 focus:border-transparent">
+                <option value="7">7 days</option>
+                <option value="30" selected>30 days</option>
+                <option value="90">90 days</option>
+                <option value="365">1 year</option>
+                <option value="all">All time</option>
+              </select>
+            </div>
             <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
             </svg>
diff --git a/public/js/admin/audit-analytics.js b/public/js/admin/audit-analytics.js
index 06f12992..eb18eaf8 100644
--- a/public/js/admin/audit-analytics.js
+++ b/public/js/admin/audit-analytics.js
@@ -182,8 +182,18 @@ async function renderBusinessIntelligence() {
     });
   }
 
-  // Cost Avoidance - load from API
-  const blockedDecisions = auditData.filter(d => !d.allowed);
+  // Cost Avoidance - filter by selected period
+  const period = document.getElementById('cost-period-selector')?.value || '30';
+  let filteredData = auditData;
+
+  if (period !== 'all') {
+    const days = parseInt(period);
+    const cutoffDate = new Date();
+    cutoffDate.setDate(cutoffDate.getDate() - days);
+    filteredData = auditData.filter(d => new Date(d.timestamp) >= cutoffDate);
+  }
+
+  const blockedDecisions = filteredData.filter(d => !d.allowed);
   let totalCost = 0;
   const costByLevel = { CRITICAL: 0, HIGH: 0, MEDIUM: 0, LOW: 0 };
 
@@ -1144,6 +1154,16 @@ function init() {
     configCostsBtn.addEventListener('click', showCostConfigModal);
   }
 
+  // Setup cost period selector
+  const periodSelector = document.getElementById('cost-period-selector');
+  if (periodSelector) {
+    console.log('[Audit Analytics] Cost period selector found, attaching event listener');
+    periodSelector.addEventListener('change', () => {
+      console.log('[Audit Analytics] Period changed, recalculating cost avoidance...');
+      renderBusinessIntelligence();
+    });
+  }
+
   // Load initial data
   loadAuditData();
 }