Budget page improvements

Aberwyn/Views/Budget/Index.cshtml

@@ -34,13 +34,57 @@
         </div>
     </div>
 
-    <div class="summary-cards" ng-if="budget && budget.categories.length > 0" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0;">
-        <div class="summary-card income">Totalt inkomst<br><strong>{{ getTotalIncome() | number:0 }}</strong></div>
-        <div class="summary-card expense">Total utgift<br><strong>({{ getTotalExpense() | number:0 }})</strong></div>
-        <div class="summary-card savings">Sparande<br><strong>{{ getTotalSaving() | number:0 }}</strong></div>
-        <div class="summary-card leftover">Pengar kvar<br><strong>{{ getLeftover() | number:0 }}</strong></div>
+<div class="budget-overview-row" ng-if="budget && budget.categories.length > 0">
+  <!-- Vänster: Summering -->
+  <div class="budget-summary-box compact">
+    <h3>Sammanställning</h3>
+    <ul class="summary-list">
+        <li><span>💰 Inkomst:</span> {{ getTotalIncome() | number:0 }} kr</li>
+        <li><span>💸 Utgift:</span> {{ getTotalExpense() | number:0 }} kr</li>
+        <li><span>🏦 Sparande:</span> {{ getTotalSaving() | number:0 }} kr</li>
+        <p>
+            📈 Kvar:
+            <span class="highlight leftover" ng-class="{'plus': getLeftover() >= 0, 'minus': getLeftover() < 0}">
+                {{ getLeftover() | number:0 }} kr
+            </span>
+        </p>
+
+    </ul>
+    <hr>
+    <ul class="category-summary-list">
+      <li ng-repeat="cat in budget.categories">
+        <span style="color: {{ cat.color }}">{{ cat.name }}</span>
+        <span>{{ getCategorySum(cat) | number:0 }} kr</span>
+      </li>
+    </ul>
+  </div>
+
+  <!-- Höger: Diagramväxling -->
+    <div class="budget-chart-box compact">
+      <div class="chart-row">
+        <div class="chart-legend">
+          <h4>Utgifter</h4>
+
+          <p style="font-size: 12px; margin: 4px 0 10px;">
+            Totalt: <strong>{{ getTotalExpense() | number:0 }} kr</strong>
+          </p>
+
+          <p ng-if="topExpenseCategory" style="font-size: 12px; margin-bottom: 12px;">
+            Största kategori: <br>
+            <strong>{{ topExpenseCategory.name }}</strong> ({{ topExpenseCategory.percent | number:1 }}%)
+          </p>
+        </div>
+
+        <div class="chart-area">
+          <canvas id="expenseChart"></canvas>
+        </div>
+      </div>
     </div>
 
+</div>
+
+
+
     <div class="budget-grid" ng-if="budget && budget.categories">
         <div class="budget-card"
              ng-repeat="cat in budget.categories"
@@ -185,6 +229,7 @@
 
 </div>
 <link rel="stylesheet" href="~/css/budget.css" />
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
 <script src="~/js/budget.js"></script>