Deploy BudgetBuddy update

app.py

@@ -126,9 +126,25 @@ def api_save(token: str, record_json: str) -> dict:
         return {"ok": False, "message": f"Save failed: {e}"}
 
 
+def _txn_dict(r: dict) -> dict:
+    return {"date": r.get("date", ""), "vendor": r.get("vendor", ""),
+            "total": analytics._num(r.get("total")), "category": analytics._category(r),
+            "source": r.get("source", "receipt"), "understanding": r.get("understanding", ""),
+            "currency": r.get("currency", ""),
+            "items": [{"name": str(it.get("name", "")), "amount": analytics._num(it.get("amount")),
+                       "qty": analytics._num(it.get("qty", 1)) or 1,
+                       "category": str(it.get("category") or analytics._category(r))}
+                      for it in (r.get("line_items") or [])]}
+
+
+def _sort_recent(records):
+    return sorted(records, key=lambda r: (analytics.parse_date(r.get("date")) or date.min,
+                                          str(r.get("saved_at", ""))), reverse=True)
+
+
 @app.api(name="dashboard")
-def api_dashboard(token: str, start: str = "", end: str = "",
-                  category: str = "All", granularity: str = "Monthly") -> dict:
+def api_dashboard(token: str, start: str = "", end: str = "", category: str = "All",
+                  granularity: str = "Monthly", cal_month: str = "") -> dict:
     user = auth.verify_token(token)
     if not user:
         return {"ok": False, "error": "auth"}
@@ -138,18 +154,11 @@ def api_dashboard(token: str, start: str = "", end: str = "",
         cat = None if category in ("", "All", None) else category
         filt = analytics.filter_records(
             records, analytics.parse_date(start), analytics.parse_date(end), cat)
-        txns = [{"date": r.get("date", ""), "vendor": r.get("vendor", ""),
-                 "total": analytics._num(r.get("total")), "category": analytics._category(r),
-                 "source": r.get("source", "receipt"),
-                 "understanding": r.get("understanding", ""),
-                 "currency": r.get("currency", ""),
-                 "items": [{"name": str(it.get("name", "")), "amount": analytics._num(it.get("amount")),
-                            "qty": analytics._num(it.get("qty", 1)) or 1,
-                            "category": str(it.get("category") or analytics._category(r))}
-                           for it in (r.get("line_items") or [])]}
-                for r in sorted(filt, key=lambda r: (analytics.parse_date(r.get("date")) or date.min,
-                                                     str(r.get("saved_at", ""))), reverse=True)]
         today = date.today()
+        try:
+            cy, cm = (int(x) for x in cal_month.split("-")) if cal_month else (today.year, today.month)
+        except Exception:
+            cy, cm = today.year, today.month
         return {
             "ok": True,
             "summary": summ,
@@ -157,9 +166,11 @@ def api_dashboard(token: str, start: str = "", end: str = "",
             "by_category": analytics.spend_by_category(filt),
             "over_time": analytics.spend_over_time(filt, granularity or "Monthly"),
             "comparison": analytics.category_comparison(records),
-            "calendar": analytics.calendar_data(records, today.year, today.month),
-            "calendar_month": f"{today.year}-{today.month:02d}",
-            "transactions": txns,
+            "calendar": analytics.calendar_data(records, cy, cm),
+            "calendar_month": f"{cy}-{cm:02d}",
+            "transactions": [_txn_dict(r) for r in _sort_recent(filt)],
+            "recent": [_txn_dict(r) for r in _sort_recent(records)[:8]],
+            "has_any": len(records) > 0,
         }
     except Exception as e:
         import traceback

frontend/assets/app.js

@@ -72,6 +72,9 @@ async function loadDashboard() {
   budgetRing(s.this_month_total, d.budget, cur);
   $("#budget-sub").textContent = d.budget > 0 ? `${money(s.this_month_total, cur)} of ${money(d.budget, cur)} used` : "No budget set yet";
   donut(d.by_category, cur); $("#ot-sub").textContent = S.gran; timeChart(d.over_time); comparison(d.comparison, cur);
+  const rec = d.recent || [];
+  $("#recent").innerHTML = rec.length ? rec.map(t => txnCard(t, t.currency || cur)).join("") : `<div class="muted" style="font-size:.85rem">No transactions yet — add your first spend.</div>`;
+  wireTxnExpand();
 }
 function budgetRing(spent, budget, cur) {
   const ctx = $("#ring-budget"); if (S.charts.b) S.charts.b.destroy();
@@ -81,14 +84,14 @@ function budgetRing(spent, budget, cur) {
 }
 function donut(rows, cur) {
   const ctx = $("#chart-cat"); if (S.charts.c) S.charts.c.destroy();
-  if (!rows.length) { ctx.getContext("2d").clearRect(0, 0, ctx.width, ctx.height); return; }
-  S.charts.c = new Chart(ctx, { type: "doughnut", data: { labels: rows.map(r => r.category), datasets: [{ data: rows.map(r => r.amount), backgroundColor: rows.map(r => catColor(r.category)), borderWidth: 0, hoverOffset: 6 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: "64%", plugins: { legend: { position: "right", labels: { color: "#cfd6e4", boxWidth: 10, font: { size: 11 }, padding: 9, usePointStyle: true } }, tooltip: { callbacks: { label: c => ` ${c.label}: ${money(c.parsed, cur)}` } } } } });
+  const empty = !rows.length;
+  S.charts.c = new Chart(ctx, { type: "doughnut", data: { labels: empty ? ["No spending yet"] : rows.map(r => r.category), datasets: [{ data: empty ? [1] : rows.map(r => r.amount), backgroundColor: empty ? ["#242936"] : rows.map(r => catColor(r.category)), borderWidth: 0, hoverOffset: empty ? 0 : 6 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: "64%", plugins: { legend: { display: !empty, position: "right", labels: { color: "#cfd6e4", boxWidth: 10, font: { size: 11 }, padding: 9, usePointStyle: true } }, tooltip: { enabled: !empty, callbacks: { label: c => ` ${c.label}: ${money(c.parsed, cur)}` } } } } });
 }
 function timeChart(rows) {
   const ctx = $("#chart-time"); if (S.charts.t) S.charts.t.destroy();
-  if (!rows.length) { ctx.getContext("2d").clearRect(0, 0, ctx.width, ctx.height); return; }
+  const empty = !rows.length;
   const g = ctx.getContext("2d").createLinearGradient(0, 0, 0, 230); g.addColorStop(0, "rgba(215,242,90,.32)"); g.addColorStop(1, "rgba(215,242,90,0)");
-  S.charts.t = new Chart(ctx, { type: "line", data: { labels: rows.map(r => r.period), datasets: [{ data: rows.map(r => r.amount), borderColor: "#d7f25a", backgroundColor: g, fill: true, tension: .4, pointRadius: 3, pointBackgroundColor: "#d7f25a", borderWidth: 2.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { ticks: { color: "#8b94a6", font: { size: 10 } }, grid: { display: false } }, y: { ticks: { color: "#8b94a6", font: { size: 10 } }, grid: { color: "#ffffff0c" } } } } });
+  S.charts.t = new Chart(ctx, { type: "line", data: { labels: empty ? ["", ""] : rows.map(r => r.period), datasets: [{ data: empty ? [0, 0] : rows.map(r => r.amount), borderColor: "#d7f25a", backgroundColor: g, fill: true, tension: .4, pointRadius: empty ? 0 : 3, pointBackgroundColor: "#d7f25a", borderWidth: 2.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { ticks: { color: "#8b94a6", font: { size: 10 } }, grid: { display: false } }, y: { beginAtZero: true, ticks: { color: "#8b94a6", font: { size: 10 } }, grid: { color: "#ffffff0c" } } } } });
 }
 function comparison(rows, cur) {
   if (!rows || !rows.length) { $("#comparison").innerHTML = `<div class="muted" style="font-size:.84rem">No data yet.</div>`; return; }
@@ -101,9 +104,15 @@ async function saveBudget() { const v = num($("#budget-in").value); if (v <= 0)
 /* calendar */
 async function loadCalendar() {
   if (!S.token) return;
-  const t = new Date(), y = t.getFullYear(), m = t.getMonth(), iso = d => d.toISOString().slice(0, 10);
-  let d; try { d = await api("dashboard", { token: S.token, start: iso(new Date(y, m, 1)), end: iso(new Date(y, m + 1, 0)), category: "All", granularity: "Daily" }); } catch (e) { return; }
-  if (!d.ok) return; S.cal = d; renderCalendar();
+  if (!S.calYM) { const t = new Date(); S.calYM = [t.getFullYear(), t.getMonth() + 1]; }
+  const [y, m] = S.calYM, iso = d => d.toISOString().slice(0, 10);
+  let d; try { d = await api("dashboard", { token: S.token, start: iso(new Date(y, m - 1, 1)), end: iso(new Date(y, m, 0)), category: "All", granularity: "Daily", cal_month: `${y}-${String(m).padStart(2, "0")}` }); } catch (e) { return; }
+  if (!d.ok) return; S.cal = d; S.selDay = null; renderCalendar();
+  $("#cal-day-title").textContent = "Pick a day"; $("#cal-day").innerHTML = "";
+}
+function calNav(delta) {
+  if (!S.calYM) { const t = new Date(); S.calYM = [t.getFullYear(), t.getMonth() + 1]; }
+  let [y, m] = S.calYM; m += delta; if (m < 1) { m = 12; y--; } if (m > 12) { m = 1; y++; } S.calYM = [y, m]; loadCalendar();
 }
 function renderCalendar() {
   const d = S.cal; if (!d) return;
@@ -190,7 +199,20 @@ async function understandReceipt() {
   try { const r = await api("understand", { record_json: JSON.stringify(readReceipt()) }); fillReceipt(r.record); const u = $("#rc-understand"); u.classList.remove("hidden"); u.textContent = r.understanding || "Categorized."; const unc = r.uncertain || []; $("#rc-savemsg").textContent = unc.length ? "Double-check: " + unc.join(", ") : "Looks good — Save when ready."; $("#rc-savemsg").className = "msg " + (unc.length ? "warn" : "good"); $("#rc-save").disabled = false; }
   catch (e) { $("#rc-savemsg").textContent = "Error: " + e; } busy($("#rc-confirm"), false);
 }
-async function saveReceipt() { busy($("#rc-save"), true, "Saving…"); try { const r = await api("save", { token: S.token, record_json: JSON.stringify(readReceipt()) }); $("#rc-savemsg").textContent = r.ok ? "Saved." : r.message; $("#rc-savemsg").className = "msg " + (r.ok ? "good" : "warn"); if (r.ok) loadDashboard(); } catch (e) { $("#rc-savemsg").textContent = "Error: " + e; } busy($("#rc-save"), false); }
+function resetReceipt() {
+  fillReceipt({ line_items: [], charges: [] });
+  $("#rc-prev").innerHTML = ""; $("#rc-status").textContent = ""; $("#rc-understand").classList.add("hidden");
+  $("#rc-save").disabled = true; S.rcFile = null; $("#rc-file").value = ""; $("#rc-cam").value = "";
+}
+async function saveReceipt() {
+  busy($("#rc-save"), true, "Saving…");
+  try {
+    const r = await api("save", { token: S.token, record_json: JSON.stringify(readReceipt()) });
+    if (r.ok) { resetReceipt(); $("#rc-savemsg").textContent = "Saved ✓ — see it on your Dashboard."; $("#rc-savemsg").className = "msg good"; loadDashboard(); }
+    else { $("#rc-savemsg").textContent = r.message; $("#rc-savemsg").className = "msg warn"; }
+  } catch (e) { $("#rc-savemsg").textContent = "Error: " + e; }
+  busy($("#rc-save"), false);
+}
 
 /* payment */
 async function extractPayment() {
@@ -201,7 +223,12 @@ async function extractPayment() {
 }
 async function savePayment() {
   const rec = { vendor: $("#pm-vendor").value.trim(), date: $("#pm-date").value.trim(), currency: $("#pm-currency").value.trim(), line_items: [], charges: [], total: num($("#pm-amount").value), category: $("#pm-cat").value, note: $("#pm-note").value.trim(), source: "payment" };
-  busy($("#pm-save"), true, "Saving…"); try { const r = await api("save", { token: S.token, record_json: JSON.stringify(rec) }); $("#pm-savemsg").textContent = r.ok ? "Saved." : r.message; $("#pm-savemsg").className = "msg " + (r.ok ? "good" : "warn"); if (r.ok) loadDashboard(); } catch (e) { $("#pm-savemsg").textContent = "Error: " + e; } busy($("#pm-save"), false);
+  busy($("#pm-save"), true, "Saving…");
+  try {
+    const r = await api("save", { token: S.token, record_json: JSON.stringify(rec) });
+    if (r.ok) { ["pm-vendor", "pm-amount", "pm-date", "pm-currency", "pm-note"].forEach(i => $("#" + i).value = ""); $("#pm-prev").innerHTML = ""; $("#pm-status").textContent = ""; $("#pm-save").disabled = true; S.pmFile = null; $("#pm-file").value = ""; $("#pm-cam").value = ""; $("#pm-savemsg").textContent = "Saved ✓ — see it on your Dashboard."; $("#pm-savemsg").className = "msg good"; loadDashboard(); }
+    else { $("#pm-savemsg").textContent = r.message; $("#pm-savemsg").className = "msg warn"; }
+  } catch (e) { $("#pm-savemsg").textContent = "Error: " + e; } busy($("#pm-save"), false);
 }
 
 /* manual (item-wise) */
@@ -260,6 +287,8 @@ async function boot() {
   wireFile("#pm-file", "#pm-cam", "#pm-prev", f => S.pmFile = f);
   $("#mn-additem").onclick = () => $("#mn-items tbody").appendChild(mnItemRow());
   $("#mn-save").onclick = saveManual;
+  $("#cal-prev").onclick = () => calNav(-1); $("#cal-next").onclick = () => calNav(1);
+  $("#see-all").onclick = () => view("txns");
   ["#tx-q", "#tx-cat", "#tx-from", "#tx-to"].forEach(s => $(s).addEventListener("input", () => { if (s === "#tx-q") renderTxnList(); else loadTxns(); }));
   $("#chat-send").onclick = chat; $("#chat-in").addEventListener("keydown", e => { if (e.key === "Enter") chat(); });
   $("#chat-chips").innerHTML = ["How much did I spend this month?", "What's my top category?", "How much on Dining?"].map(q => `<button class="chip">${q}</button>`).join("");

frontend/index.html

@@ -27,6 +27,9 @@ svg{stroke-width:1.9;fill:none;stroke:currentColor;stroke-linecap:round;stroke-l
 input,select,textarea{width:100%;background:var(--surface2);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:11px 13px;font-size:.9rem;outline:none;transition:border-color .15s}
 input:focus,select:focus,textarea:focus{border-color:var(--lav)}
 input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7)}
+input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
+input[type=number]{-moz-appearance:textfield;appearance:textfield}
+.empty-chart{height:230px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:.86rem;border:1px dashed var(--line);border-radius:14px}
 label{display:block;font-size:.76rem;color:var(--muted);margin-bottom:6px;font-weight:600}
 .field{margin:13px 0} .row{display:flex;gap:11px}.row>*{flex:1} .msg{margin-top:11px;font-size:.84rem;min-height:1em}
 .btn{background:var(--lime);color:var(--lime-ink);font-weight:800;border-radius:13px;padding:11px 17px;font-size:.88rem;transition:filter .12s,transform .05s}
@@ -104,6 +107,9 @@ td input,td select{padding:8px 9px;border-radius:9px}
 .drop{border:1.5px dashed var(--line);border-radius:15px;padding:18px;text-align:center;color:var(--muted);font-size:.85rem;display:block;cursor:pointer}
 .drop:hover{border-color:var(--lav);color:var(--ink)} .drop img{max-height:280px;max-width:100%;border-radius:12px;margin-top:10px}
 .cap-row{display:flex;gap:9px;margin-top:10px}
+.upload-row{display:flex;gap:14px;align-items:stretch}
+.upload-actions{display:flex;flex-direction:column;gap:9px;justify-content:center;min-width:160px}
+@media(max-width:720px){.upload-row{flex-direction:column}.upload-actions{min-width:0}}
 .banner{border-radius:12px;padding:11px 14px;font-size:.84rem;margin:12px 0;border:1px solid transparent}
 .banner.ok{background:#10271d;color:var(--good);border-color:#1d3a2c} .banner.warn{background:#2c2611;color:var(--warn);border-color:#3c331a}
 .banner.lav{background:#211a37;color:var(--lav);border-color:#352c57}
@@ -203,6 +209,7 @@ td input,td select{padding:8px 9px;border-radius:9px}
         <div class="panel"><h3>Spend over time</h3><div class="ph-sub" id="ot-sub">Monthly</div><div class="chart-box"><canvas id="chart-time"></canvas></div></div>
         <div class="panel"><h3>This month vs last</h3><div class="ph-sub">By category</div><div class="cmp" id="comparison"></div></div>
       </div>
+      <div class="panel"><div style="display:flex;justify-content:space-between;align-items:center"><h3>Recent transactions</h3><button class="btn sm alt" id="see-all">See all</button></div><div class="ph-sub">Your latest spends</div><div id="recent"></div></div>
     </section>
 
     <!-- Add -->
@@ -214,28 +221,33 @@ td input,td select{padding:8px 9px;border-radius:9px}
         <button class="mode" data-mode="manual"><svg viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>Manual</button>
       </div>
 
-      <div id="mode-receipt" class="grid2b">
-        <div class="panel">
+      <div id="mode-receipt">
+        <div class="panel" style="margin-bottom:16px">
           <h3>Bill photo</h3><div class="ph-sub">Snap or upload — items, taxes, round-off and all</div>
-          <label class="drop" for="rc-file">Tap to choose a photo<div id="rc-prev"></div></label>
+          <div class="upload-row">
+            <label class="drop" for="rc-file" style="flex:1;margin:0">Tap to choose a photo<div id="rc-prev"></div></label>
+            <div class="upload-actions">
+              <label class="btn alt sm" for="rc-file" style="text-align:center">Choose file</label>
+              <label class="btn alt sm" for="rc-cam" style="text-align:center">Take photo</label>
+              <button class="btn" id="rc-extract">Extract</button>
+            </div>
+          </div>
           <input id="rc-file" type="file" accept="image/*" class="vh"><input id="rc-cam" type="file" accept="image/*" capture="environment" class="vh">
-          <div class="cap-row"><label class="btn alt sm" for="rc-file" style="flex:1;display:inline-flex;align-items:center;justify-content:center">Choose file</label><label class="btn alt sm" for="rc-cam" style="flex:1;display:inline-flex;align-items:center;justify-content:center">Take photo</label></div>
-          <button class="btn" id="rc-extract" style="margin-top:11px;width:100%">Extract</button><div class="msg" id="rc-status"></div>
+          <div class="msg" id="rc-status"></div>
         </div>
         <div class="panel">
-          <h3>Review &amp; understand</h3>
-          <div class="row"><div class="field"><label>Vendor</label><input id="rc-vendor"></div><div class="field"><label>Currency</label><input id="rc-currency"></div></div>
-          <div class="field"><label>Date</label><input id="rc-date" type="date"></div>
+          <h3>Review &amp; understand</h3><div class="ph-sub">Fix anything wrong, then let the AI categorize it</div>
+          <div class="row"><div class="field"><label>Vendor</label><input id="rc-vendor"></div><div class="field"><label>Date</label><input id="rc-date" type="date"></div><div class="field"><label>Currency</label><input id="rc-currency"></div></div>
           <label>Line items</label>
           <table id="rc-items"><thead><tr><th>Item</th><th class="col-qty">Qty</th><th class="col-amt">Amount</th><th class="col-cat">Category</th><th class="col-x"></th></tr></thead><tbody></tbody></table>
           <button class="btn sm alt" id="rc-additem" style="margin-top:8px">+ Add item</button>
-          <label style="margin-top:15px">Charges &amp; taxes</label>
-          <table id="rc-charges"><thead><tr><th>Label</th><th class="col-amt">Amount</th><th class="col-x"></th></tr></thead><tbody></tbody></table>
-          <button class="btn sm alt" id="rc-addcharge" style="margin-top:8px">+ Add charge</button>
-          <div class="row" style="margin-top:15px"><div class="field"><label>Total</label><input id="rc-total" type="number" inputmode="decimal"></div><div class="field"><label>Overall category</label><select id="rc-cat"></select></div></div>
+          <div class="row" style="margin-top:16px;align-items:flex-start">
+            <div style="flex:1"><label>Charges &amp; taxes</label><table id="rc-charges"><thead><tr><th>Label</th><th class="col-amt">Amount</th><th class="col-x"></th></tr></thead><tbody></tbody></table><button class="btn sm alt" id="rc-addcharge" style="margin-top:8px">+ Add charge</button></div>
+            <div style="flex:1"><div class="field" style="margin:0 0 13px"><label>Total</label><input id="rc-total" type="number" inputmode="decimal"></div><div class="field" style="margin:0"><label>Overall category</label><select id="rc-cat"></select></div></div>
+          </div>
           <div id="rc-recon" class="banner ok">Totals reconcile.</div>
           <div id="rc-understand" class="banner lav hidden"></div>
-          <div class="row"><button class="btn lav" id="rc-confirm">Understand &amp; categorize</button><button class="btn" id="rc-save" disabled>Save</button></div>
+          <div class="row" style="margin-top:4px"><button class="btn lav" id="rc-confirm">Understand &amp; categorize</button><button class="btn" id="rc-save" disabled>Save</button></div>
           <div class="msg" id="rc-savemsg"></div>
         </div>
       </div>
@@ -268,7 +280,9 @@ td input,td select{padding:8px 9px;border-radius:9px}
 
     <!-- Calendar -->
     <section id="view-calendar" class="hidden">
-      <div class="topbar"><div class="title">Calendar</div><div class="sub" id="cal-month"></div></div>
+      <div class="topbar"><div class="title">Calendar</div>
+        <div class="controls"><button class="btn sm alt" id="cal-prev">‹ Prev</button><div class="sub" id="cal-month" style="min-width:120px;text-align:center"></div><button class="btn sm alt" id="cal-next">Next ›</button></div>
+      </div>
       <div class="grid2b">
         <div class="panel"><div class="cal-grid" id="cal"></div></div>
         <div class="panel"><h3 id="cal-day-title">Pick a day</h3><div class="ph-sub">Spending on the selected day</div><div id="cal-day"></div></div>