feat(bi): add period selector dropdown to cost avoidance metric

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>
This commit is contained in:
TheFlow 2025-10-27 11:20:11 +13:00
parent 96ba8fdb16
commit 88f9ccfb34
2 changed files with 32 additions and 3 deletions

View file

@ -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>

View file

@ -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();
}