Budget page improvements

Aberwyn/Models/MenuViewModel.cs

@@ -60,8 +60,8 @@ public class WeeklyMenu
         public string LunchMealName { get; set; }
         public string DinnerMealName { get; set; }
     }
-public class Meal
-{
+    public class Meal
+    {
         [Key]
         [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
         public int Id { get; set; }
@@ -84,7 +84,7 @@ public class Meal
         public string? Instructions { get; set; }  
 
         public List<Ingredient> Ingredients { get; set; } = new();
-}
+    }
 
     public class Ingredient
     {

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>

Aberwyn/wwwroot/css/budget.css

@@ -88,40 +88,7 @@ body {
         background-color: #cbd5e1;
     }
 
-.summary-cards {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 8px;
-    margin: 16px 0 12px;
-}
 
-.summary-card {
-    background-color: var(--bg-card);
-    padding: 8px 10px;
-    border-radius: 10px;
-    text-align: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    font-weight: 600;
-    font-size: 13px;
-    min-width: 130px;
-}
-
-    .summary-card.income {
-        border-top: 3px solid var(--card-income);
-    }
-
-    .summary-card.expense {
-        border-top: 3px solid var(--card-expense);
-        color: var(--card-expense);
-    }
-
-    .summary-card.savings {
-        border-top: 3px solid var(--card-savings);
-    }
-
-    .summary-card.leftover {
-        border-top: 3px solid var(--card-leftover);
-    }
 
 .budget-grid {
     display: grid;
@@ -535,3 +502,170 @@ color: var(--btn-check);
         .suggestion-list li:hover {
             background: #334155;
         }
+
+
+
+
+/* Summary */
+.budget-overview-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 8px 0 16px;
+}
+
+.budget-summary-box,
+.budget-chart-box {
+    flex: 1 1 250px;
+    background-color: var(--bg-card);
+    padding: 8px 12px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+    min-width: 220px;
+}
+
+    .budget-summary-box h3,
+    .budget-chart-box h3 {
+        margin: 0 0 6px;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--text-main);
+    }
+
+.summary-list,
+.category-summary-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+    .summary-list li,
+    .category-summary-list li {
+        display: flex;
+        justify-content: space-between;
+        padding: 1px 0;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 1.4;
+        color: var(--text-main);
+    }
+
+        .summary-list li span:first-child {
+            font-weight: 600;
+            color: var(--text-sub);
+        }
+
+    .category-summary-list li {
+        border-top: 1px dashed var(--border-color);
+        padding: 3px 0;
+        font-size: 11.5px;
+    }
+
+.highlight {
+    font-weight: 700;
+}
+
+    .highlight.leftover.plus {
+        color: #15803d;
+    }
+
+    .highlight.leftover.minus {
+        color: #dc2626;
+    }
+
+
+
+
+/* chart */
+.chart-area {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+    .chart-legend h4 {
+        margin: 0 0 6px;
+        font-size: 13px;
+        font-weight: 600;
+    }
+
+.chart-area {
+    flex: 1;
+    min-width: 200px;
+    max-width: 340px;
+}
+
+canvas {
+    max-width: 100%;
+    height: auto;
+}
+
+@media (min-width: 769px) {
+    .budget-overview-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+        align-items: start;
+    }
+
+    .budget-chart-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        min-height: 300px;
+        text-align: center;
+    }
+
+        .budget-chart-box .chart-row {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .budget-chart-box .chart-area {
+            flex: 1;
+            max-width: 420px;
+            width: 100%;
+        }
+
+        .budget-chart-box canvas {
+            max-width: 100%;
+            height: auto;
+        }
+
+}
+
+@media (max-width: 768px) {
+    .budget-overview-row {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .budget-summary-box,
+    .budget-chart-box {
+        width: 100%;
+    }
+
+    .chart-row {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .chart-area {
+        max-width: 100%;
+    }
+
+    .chart-legend {
+        width: 100%;
+        text-align: center;
+        padding-bottom: 10px;
+    }
+
+    .chart-area canvas {
+        max-width: 240px;
+        height: auto;
+    }
+}

Aberwyn/wwwroot/js/budget.js

@@ -5,6 +5,7 @@ app.controller('BudgetController', function ($scope, $http) {
     $scope.loading = false;
     $scope.error = null;
     $scope.menuOpen = false;
+    $scope.chartMode = "pie";
 
     const today = new Date();
     $scope.selectedYear = today.getFullYear();
@@ -140,6 +141,7 @@ app.controller('BudgetController', function ($scope, $http) {
             })
             .finally(function () {
                 $scope.loading = false;
+                setTimeout($scope.drawCategoryChart, 0);
             });
     };
 
@@ -760,8 +762,70 @@ $scope.addItemFromDefinition = function (cat) {
         });
     };
 
+    $scope.isExpenseCategory = function (cat) {
+        return cat.items.some(i => i.isExpense);
+    };
+
+    $scope.drawCategoryChart = function () {
+        const ctx = document.getElementById("expenseChart");
+        if (!ctx || !$scope.budget?.categories) return;
+
+        const labels = [];
+        const data = [];
+        const colors = [];
+
+
+        $scope.budget.categories.forEach(cat => {
+            const sum = cat.items
+                .filter(i => i.isExpense)
+                .reduce((acc, i) => acc + i.amount, 0);
+
+            if (sum > 0) {
+                labels.push(cat.name);
+                data.push(sum);
+                colors.push(cat.color || "#94a3b8");
+            }
+        });
+
+        const total = data.reduce((a, b) => a + b, 0);
+        const topIndex = data.indexOf(Math.max(...data));
+
+        $scope.topExpenseCategory = topIndex !== -1 ? {
+            name: labels[topIndex],
+            value: data[topIndex],
+            percent: (data[topIndex] / total) * 100
+        } : null;
+
+        if (window.expenseChart && typeof window.expenseChart.destroy === 'function') {
+            window.expenseChart.destroy();
+        }
+
+        window.expenseChart = new Chart(ctx, {
+            type: 'pie',
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: data,
+                    backgroundColor: colors
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: { display: false },
+                    tooltip: {
+                        callbacks: {
+                            label: ctx => `${ctx.label}: ${ctx.formattedValue} kr`
+                        }
+                    }
+                }
+            }
+        });
+    };
+
 
     $scope.loadItemDefinitions().then(() => {
         $scope.loadBudget();
     });
+
 });