feat: add backup calendar heatmap and enhanced backup visualization

- Add comprehensive backup calendar heatmap with monthly view
- Implement interactive calendar filtering linked to backup table
- Add backup summary cards for quick overview statistics
- Enhance backup table with click-to-filter calendar functionality
- Improve PBS and backup data visualization
- Add responsive design for mobile and desktop views
- Include backup type indicators and failure detection
- Persistent filter state across API updates

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

Co-Authored-By: Claude <noreply@anthropic.com>

Author: rcourtman

src/public/index.html

@@ -717,6 +717,33 @@
     </div>
     <div id="backups" class="tab-content hidden bg-white dark:bg-gray-800 rounded-b rounded-tr shadow p-3 mb-2">
       <p id="backups-loading-message" class="text-gray-500 dark:text-gray-400 p-4 text-center mb-2">Loading backup status overview...</p>
+      
+      <!-- Consolidated Backup Summary -->
+      <div id="backup-summary-container" class="hidden mb-4">
+        <!-- Consolidated backup summary will be inserted here -->
+      </div>
+      
+      <!-- Hidden: Node backup cards (replaced by consolidated summary) -->
+      <div id="node-backup-cards" class="hidden mb-3">
+        <!-- No longer used - replaced by consolidated summary -->
+      </div>
+      
+      <!-- Backup History Visualization -->
+      <div id="backup-visualization-section" class="hidden mb-6 space-y-4">
+        <!-- Hidden: Summary cards (replaced by consolidated summary) -->
+        <div id="backup-summary-cards-container" class="hidden">
+          <!-- No longer used - replaced by consolidated summary -->
+        </div>
+        <div id="backup-calendar-container" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Backup History Calendar</h3>
+          </div>
+          <div id="backup-calendar-heatmap">
+            <!-- Calendar heatmap will be inserted here -->
+          </div>
+        </div>
+      </div>
+      
       <div class="backups-filter flex flex-col md:flex-row justify-between items-stretch md:items-center gap-3 mb-3 p-2 bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-700 rounded">
           <div class="dashboard-filter-controls flex-grow flex items-center gap-2">
             <input type="text" id="backups-search" placeholder="Search Name, ID, Node (use ',' for OR)" class="flex-grow min-w-[200px] max-w-full p-1 px-2 h-7 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 outline-none" />
@@ -808,13 +835,13 @@
         <span id="backups-status-text" class="text-xs text-gray-500 dark:text-gray-400">Loading backup status...</span>
         <div class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-3">
           <span class="flex items-center gap-1">
-            <span class="w-2 h-2 bg-purple-500 rounded-full"></span>PBS
+            <span class="w-2 h-2 bg-green-500 rounded-full"></span>PBS
           </span>
           <span class="flex items-center gap-1">
-            <span class="w-2 h-2 bg-orange-500 rounded-full"></span>PVE
+            <span class="w-2 h-2 bg-yellow-400 rounded-full"></span>PVE
           </span>
           <span class="flex items-center gap-1">
-            <span class="w-2 h-2 bg-blue-500 rounded-full"></span>Snapshots
+            <span class="w-2 h-2 bg-blue-400 rounded-full"></span>Snapshots
           </span>
           <span class="mx-2">•</span>
           <span class="flex items-center gap-1">
@@ -920,6 +947,8 @@
   <script src="/js/ui/dashboard.js" defer></script>
   <script src="/js/ui/storage.js" defer></script>
   <script src="/js/ui/pbs.js" defer></script>
+  <script src="/js/ui/backup-summary-cards.js" defer></script>
+  <script src="/js/ui/calendar-heatmap.js" defer></script>
   <script src="/js/ui/backups.js" defer></script>
   <script src="/js/alertsHandler.js"></script>
   <script src="/js/hotReload.js" defer></script>

src/public/js/ui/backup-summary-cards.js

@@ -0,0 +1,77 @@
+PulseApp.ui = PulseApp.ui || {};
+
+PulseApp.ui.backupSummaryCards = (() => {
+    
+    function calculateBackupStatistics(backupData, guestId) {
+        const now = Date.now();
+        const stats = {
+            lastBackup: { time: null, type: null, status: 'none' },
+            coverage: { daily: 0, weekly: 0, monthly: 0 },
+            protected: { count: 0, oldestDate: null, coverage: 0 },
+            health: { score: 0, issues: [] }
+        };
+
+        // Find most recent backup across all types
+        const allBackups = [];
+        
+        ['pbsSnapshots', 'pveBackups', 'vmSnapshots'].forEach(type => {
+            if (!backupData[type]) return;
+            
+            const items = guestId 
+                ? backupData[type].filter(item => item.vmid == guestId)
+                : backupData[type];
+            
+            items.forEach(item => {
+                const timestamp = item.ctime || item.snaptime || item['backup-time'];
+                if (timestamp) {
+                    allBackups.push({
+                        time: timestamp * 1000,
+                        type: type,
+                        protected: item.protected || false,
+                        verification: item.verification
+                    });
+                }
+            });
+        });
+
+        // Sort by time descending
+        allBackups.sort((a, b) => b.time - a.time);
+
+        // Last backup info
+        if (allBackups.length > 0) {
+            const last = allBackups[0];
+            stats.lastBackup = {
+                time: last.time,
+                type: last.type,
+                status: last.verification?.state === 'failed' ? 'failed' : 'success',
+                age: now - last.time
+            };
+        }
+
+        // Calculate coverage (how many backups in each period)
+        const oneDayAgo = now - 24 * 60 * 60 * 1000;
+        const oneWeekAgo = now - 7 * 24 * 60 * 60 * 1000;
+        const oneMonthAgo = now - 30 * 24 * 60 * 60 * 1000;
+        
+        allBackups.forEach(backup => {
+            if (backup.time >= oneDayAgo) stats.coverage.daily++;
+            if (backup.time >= oneWeekAgo) stats.coverage.weekly++;
+            if (backup.time >= oneMonthAgo) stats.coverage.monthly++;
+        });
+
+        // Protected backups analysis
+        const protectedBackups = allBackups.filter(b => b.protected);
+        stats.protected.count = protectedBackups.length;
+        if (protectedBackups.length > 0) {
+            const oldestProtected = protectedBackups[protectedBackups.length - 1];
+            stats.protected.oldestDate = oldestProtected.time;
+            stats.protected.coverage = Math.floor((now - oldestProtected.time) / (24 * 60 * 60 * 1000));
+        }
+
+        return stats;
+    }
+
+    return {
+        calculateBackupStatistics
+    };
+})();