Initial commit — Moon Household Budget

templates/summary.html

@@ -0,0 +1,71 @@
+{% extends "base.html" %}
+{% block content %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<div class="page-header">
+  <h1>Spending Report</h1>
+</div>
+
+{% if by_category %}
+
+<!-- Horizontal bar chart -->
+<div class="card-wide" style="margin-bottom:1.5rem;">
+  <canvas id="spending-bar-chart" height="80"></canvas>
+</div>
+
+<div class="summary-grid">
+  {% for cat, data in by_category | dictsort %}
+  <div class="summary-card" style="border-top: 4px solid {{ colors.get(cat, '#ddd') }};">
+    <div class="summary-cat-name">{{ cat }}</div>
+    <div class="summary-cat-total">${{ data.total | money }}</div>
+    {% if data.subcategories %}
+    <ul class="subcat-list">
+      {% for sub, amt in data.subcategories | dictsort %}
+      <li>
+        <span>{{ sub }}</span>
+        <span>${{ amt | money }}</span>
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+  </div>
+  {% endfor %}
+</div>
+{% else %}
+<div class="empty-state">
+  <p>No categorized transactions yet. <a href="{{ url_for('import_transactions') }}">Import a statement</a> to get started.</p>
+</div>
+{% endif %}
+
+<script>
+{% if by_category %}
+const spendingLabels = {{ by_category.keys() | list | tojson }};
+const spendingValues = {{ by_category.values() | map(attribute='total') | list | tojson }};
+const spendingColors = [{% for cat in by_category %}'{{ colors.get(cat, "#ddd") }}',{% endfor %}];
+
+new Chart(document.getElementById('spending-bar-chart'), {
+  type: 'bar',
+  data: {
+    labels: spendingLabels,
+    datasets: [{
+      data: spendingValues,
+      backgroundColor: spendingColors,
+      borderRadius: 6,
+      borderSkipped: false,
+    }]
+  },
+  options: {
+    indexAxis: 'y',
+    plugins: {
+      legend: { display: false },
+      tooltip: { callbacks: { label: ctx => ' $' + ctx.parsed.x.toFixed(2) } }
+    },
+    scales: {
+      x: { grid: { color: '#f0ece6' }, ticks: { callback: v => '$' + v.toLocaleString() } },
+      y: { grid: { display: false } }
+    },
+    animation: { duration: 400 },
+  }
+});
+{% endif %}
+</script>
+{% endblock %}