Add eye button to details header and show month name

- Replace "Total" with the current month name (e.g., "Декабрь")
- Add eye icon to header that opens modal with all transactions
- Header eye button is always visible (50% opacity)
- When hovering a sector, header shows sector name with eye button

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

app.js

@@ -1501,21 +1501,63 @@ function setupHoverEvents(sunburstData) {
                 <span class="color-circle" style="background-color: ${color};"></span>
                 ${name}
             </span>
+            <button class="eye-btn header-eye-btn" title="View transaction details">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                    <circle cx="12" cy="12" r="3"/>
+                </svg>
+            </button>
             <span class="hover-amount">${value.toLocaleString()} ₽</span>
         `;
+        // Add click handler to header eye button
+        const headerEyeBtn = detailsHeader.querySelector('.header-eye-btn');
+        if (headerEyeBtn && data) {
+            headerEyeBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                openTransactionModal(data);
+            });
+        }
     }
 
     // Show the default view with top categories
     function showDefaultView() {
-        currentHoveredData = null;
+        // Use month name instead of "Total"
+        const selectedMonth = document.getElementById('month-select').value;
+        const monthName = getRussianMonthName(selectedMonth);
+
+        // Create a virtual "data" object for the total view that contains all transactions
+        const allTransactions = [];
+        sunburstData.data.forEach(category => {
+            if (category.transactions) {
+                allTransactions.push(...category.transactions);
+            }
+        });
+        const totalData = { name: monthName, transactions: allTransactions };
+        currentHoveredData = totalData;
+
         detailsHeader.innerHTML = `
             <span class="hover-name">
-                <span class="color-circle" style="background-color: #ffffff;"></span>
+                <span class="color-circle" style="background-color: #5470c6;"></span>
-                Total
+                ${monthName}
             </span>
+            <button class="eye-btn header-eye-btn" title="View all transactions">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                    <circle cx="12" cy="12" r="3"/>
+                </svg>
+            </button>
             <span class="hover-amount">${sunburstData.total.toLocaleString()} ₽</span>
         `;
 
+        // Add click handler to header eye button
+        const headerEyeBtn = detailsHeader.querySelector('.header-eye-btn');
+        if (headerEyeBtn) {
+            headerEyeBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                openTransactionModal(totalData);
+            });
+        }
+
         // Show top categories as default items
         displayDetailsItems(sunburstData.data, sunburstData.total);
     }

styles.css

@@ -341,6 +341,11 @@ body {
     color: #333;
 }
 
+/* Header eye button - always visible */
+.header-eye-btn {
+    opacity: 0.5;
+}
+
 /* Floating eye button on chart (shown when hovering over sunburst sector) */
 .chart-eye-btn {
     position: absolute;