Add save-by-date targets and fix dashboard scrollbar, mobile payee list, sticky topbar, hidden-category filtering and budget nav alert (2.14.0)

Author: rollecode

CHANGELOG.md

@@ -1,3 +1,12 @@
+### 2.14.0: 2026-06-11
+
+* Add a save-by-date target type: set a goal amount and a date, and the monthly need is the amount still missing spread across the months left until that date
+* Fix the horizontal scrollbar on the dashboard by bounding the chart grid tracks and chart wrapper so charts shrink to fit, instead of clipping the overflow
+* Show the payee (Saaja) suggestions on mobile by replacing the native datalist with a custom dropdown, in both the add-expense and edit-transaction forms
+* Keep the sticky budget topbar below the app top bar across iOS Safari toolbar states by deriving its offset from the app top bar height including the safe area
+* Show hidden and snoozed categories only under the Kaikki filter, not in the overspent or money-available views
+* Add a notice dot on the Budjetti nav item that stays until no category is overspent, refreshing live as you assign money
+
 ### 2.13.6: 2026-06-11
 
 * Budget topbar on mobile: drop the side padding, keep the boxes on one line, and sit below the app top bar instead of behind it

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dough",
-  "version": "2.13.6",
+  "version": "2.14.0",
   "private": true,
   "scripts": {
     "dev": "next dev -H 0.0.0.0 -p 3030",

src/app/(app)/budget/page.tsx

@@ -6,6 +6,7 @@ import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { DateField } from "@/components/ui/date-field";
 import {
   Dialog,
   DialogContent,
@@ -42,6 +43,7 @@ interface BudgetCategory {
   target_monthly: number;
   target_amount: number;
   target_cadence: string;
+  target_date: string;
   snooze_until_month: string;
   target_active: boolean;
 }
@@ -97,11 +99,27 @@ function availEps(decimals: number): number {
 const CADENCES = ["daily", "weekly", "monthly", "yearly"] as const;
 
 function cadenceLabel(cadence: string, locale: string): string {
-  const fi: Record<string, string> = { daily: "Päivä", weekly: "Viikko", monthly: "Kuukausi", yearly: "Vuosi" };
-  const en: Record<string, string> = { daily: "Day", weekly: "Week", monthly: "Month", yearly: "Year" };
+  const fi: Record<string, string> = { daily: "Päivä", weekly: "Viikko", monthly: "Kuukausi", yearly: "Vuosi", by_date: "Päivään mennessä" };
+  const en: Record<string, string> = { daily: "Day", weekly: "Week", monthly: "Month", yearly: "Year", by_date: "By date" };
   return (locale === "fi" ? fi : en)[cadence] || cadence;
 }
 
+// Months from the viewed month to the target date, inclusive (mirrors lib/budget-math).
+function monthsUntilInclusive(month: string, targetDate: string): number {
+  const [cy, cm] = month.split("-").map(Number);
+  const ty = Number(targetDate.slice(0, 4));
+  const tm = Number(targetDate.slice(5, 7));
+  if (!ty || !tm) return 1;
+  return Math.max(1, (ty * 12 + tm) - (cy * 12 + cm) + 1);
+}
+
+// Format an ISO date (YYYY-MM-DD) as Finnish d.m.yyyy for display.
+function formatIsoDate(iso: string): string {
+  const p = iso.split("-");
+  if (p.length !== 3) return iso;
+  return `${Number(p[2])}.${Number(p[1])}.${p[0]}`;
+}
+
 function cadenceSuffix(cadence: string, locale: string): string {
   const fi: Record<string, string> = { daily: "/ pv", weekly: "/ vko", monthly: "/ kk", yearly: "/ v" };
   const en: Record<string, string> = { daily: "/ day", weekly: "/ wk", monthly: "/ mo", yearly: "/ yr" };
@@ -133,6 +151,7 @@ export default function BudgetPage() {
   const [targetEditing, setTargetEditing] = useState(false);
   const [targetDraft, setTargetDraft] = useState<string>("");
   const [targetCadence, setTargetCadence] = useState<string>("monthly");
+  const [targetDate, setTargetDate] = useState<string>("");
   const [moveOpen, setMoveOpen] = useState(false);
   const [moveDir, setMoveDir] = useState<"in" | "out">("out");
   const [moveOther, setMoveOther] = useState<string>("");
@@ -366,14 +385,25 @@ export default function BudgetPage() {
     if (!inspectorCat) return;
     const value = evalExpression(targetDraft);
     if (value === null) return;
+    // A by_date target is meaningless without a date — keep the editor open until one is given.
+    if (targetCadence === "by_date" && !targetDate) {
+      console.warn("[budget] by_date target needs a target date");
+      return;
+    }
     try {
       await fetch("/api/targets", {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ category_id: inspectorCat.id, monthly_amount: value, cadence: targetCadence }),
+        body: JSON.stringify({
+          category_id: inspectorCat.id,
+          monthly_amount: value,
+          cadence: targetCadence,
+          target_date: targetCadence === "by_date" ? targetDate : "",
+        }),
       });
       setTargetEditing(false);
       setTargetDraft("");
+      setTargetDate("");
       load(month);
     } catch (err) {
       console.error("[budget] Save target error:", err);
@@ -846,6 +876,9 @@ export default function BudgetPage() {
       {bdrag?.type === "group" && dropGroupAt === localGroups.length && <div className="budget-group-drop-line" aria-hidden="true" />}
 
       {(() => {
+        // Hidden/snoozed categories belong only under the "Kaikki" (all) filter, not the
+        // overspent / money-available views which should show active budget rows only.
+        if (filter !== "all") return null;
         const snoozedCats = (data?.categories || []).filter((c) => c.is_active && c.snoozed);
         if (snoozedCats.length === 0) return null;
         return (
@@ -866,6 +899,7 @@ export default function BudgetPage() {
       })()}
 
       {(() => {
+        if (filter !== "all") return null;
         const hiddenCats = (data?.categories || []).filter((c) => !c.is_active);
         if (hiddenCats.length === 0) return null;
         return (
@@ -910,9 +944,12 @@ export default function BudgetPage() {
           {inspectorCat && (() => {
             const c = inspectorCat;
             const availState = c.available > eps ? "is-positive" : c.available < -eps ? "is-negative" : "is-zero";
-            const hasTarget = c.target_monthly > 0;
+            const isByDate = c.target_cadence === "by_date";
+            // Use the configured amount, not the monthly need: a by_date goal that is already
+            // met has a zero monthly need but should still show as a (completed) target.
+            const hasTarget = c.target_amount > 0;
             const isSnoozed = hasTarget && c.snooze_until_month >= month;
-            const progress = hasTarget ? Math.min(1, c.budgeted / c.target_monthly) : 0;
+            const progress = c.target_monthly > 0 ? Math.min(1, c.budgeted / c.target_monthly) : (hasTarget ? 1 : 0);
             return (
               <>
                 <SheetHeader className="insp-header">
@@ -980,11 +1017,28 @@ export default function BudgetPage() {
                               {CADENCES.map((cad) => (
                                 <SelectItem key={cad} value={cad}>{cadenceLabel(cad, locale)}</SelectItem>
                               ))}
+                              <SelectItem value="by_date">{cadenceLabel("by_date", locale)}</SelectItem>
                             </SelectContent>
                           </Select>
                         </div>
+                        {targetCadence === "by_date" && (
+                          <div className="insp-target-date">
+                            <Label className="insp-target-date-label">{locale === "fi" ? "Mihin päivään mennessä" : "By which date"}</Label>
+                            <DateField value={targetDate} onChange={setTargetDate} />
+                          </div>
+                        )}
                         <p className="settings-help">
-                          {targetCadence === "monthly"
+                          {targetCadence === "by_date"
+                            ? (() => {
+                                const goal = evalExpression(targetDraft) || 0;
+                                if (!targetDate) return locale === "fi" ? "Säästä tämä summa valittuun päivään mennessä." : "Save this amount by the chosen date.";
+                                const n = monthsUntilInclusive(month, targetDate);
+                                const need = Math.max(0, (goal - c.carryover) / n);
+                                return locale === "fi"
+                                  ? `Tarvitaan noin ${fmt(Math.round(need * 100) / 100)} € / kk, jotta ${fmt(goal)} € on kasassa ${formatIsoDate(targetDate)}.`
+                                  : `Needs about ${fmt(Math.round(need * 100) / 100)} € / mo to reach ${fmt(goal)} € by ${formatIsoDate(targetDate)}.`;
+                              })()
+                            : targetCadence === "monthly"
                             ? (locale === "fi" ? "Summa, joka varataan tälle joka kuukausi." : "Amount assigned here every month.")
                             : (() => {
                                 const amt = evalExpression(targetDraft) || 0;
@@ -995,22 +1049,29 @@ export default function BudgetPage() {
                         <div className="insp-actions">
                           <Button type="button" size="sm" onClick={saveTarget}>{locale === "fi" ? "Tallenna" : "Save"}</Button>
                           {hasTarget && <Button type="button" variant="destructive" size="sm" onClick={() => clearTarget(c.id)}>{locale === "fi" ? "Poista" : "Clear"}</Button>}
-                          <Button type="button" variant="ghost" size="sm" onClick={() => { setTargetEditing(false); setTargetDraft(""); }}>{locale === "fi" ? "Peruuta" : "Cancel"}</Button>
+                          <Button type="button" variant="ghost" size="sm" onClick={() => { setTargetEditing(false); setTargetDraft(""); setTargetDate(""); }}>{locale === "fi" ? "Peruuta" : "Cancel"}</Button>
                         </div>
                       </div>
                     ) : hasTarget ? (
                       <div className="insp-target">
                         <div className="budget-target-progress insp-target-bar"><span className="budget-target-progress-fill" style={{ width: `${Math.round(progress * 100)}%` }} /></div>
                         <p className="insp-target-text">
-                          {isSnoozed ? (locale === "fi" ? "Tauolla tässä kuussa" : "Paused this month") : (
+                          {isSnoozed ? (locale === "fi" ? "Tauolla tässä kuussa" : "Paused this month") : isByDate ? (
+                            <>
+                              <F v={c.target_amount} s=" €" /> {locale === "fi" ? "→" : "by"} {c.target_date ? formatIsoDate(c.target_date) : ""}
+                              {c.target_monthly > 0
+                                ? <span className="text-muted"> · <F v={c.target_monthly} s=" €" /> {cadenceSuffix("monthly", locale)}</span>
+                                : <span className="text-positive"> · {locale === "fi" ? "valmis" : "funded"}</span>}
+                            </>
+                          ) : (
                             <>
                               <F v={c.target_amount} s=" €" /> {cadenceSuffix(c.target_cadence, locale)}
                               {c.target_cadence !== "monthly" && <span className="text-muted"> · <F v={c.target_monthly} s=" €" /> {cadenceSuffix("monthly", locale)}</span>}
                             </>
                           )}
                         </p>
                         <div className="insp-actions">
-                          <Button type="button" variant="outline" size="sm" onClick={() => { setTargetDraft(c.target_amount ? fmt(c.target_amount) : ""); setTargetCadence(c.target_cadence || "monthly"); setTargetEditing(true); }}>{locale === "fi" ? "Muokkaa" : "Edit"}</Button>
+                          <Button type="button" variant="outline" size="sm" onClick={() => { setTargetDraft(c.target_amount ? fmt(c.target_amount) : ""); setTargetCadence(c.target_cadence || "monthly"); setTargetDate(c.target_date || ""); setTargetEditing(true); }}>{locale === "fi" ? "Muokkaa" : "Edit"}</Button>
                           {isSnoozed ? (
                             <Button type="button" variant="outline" size="sm" onClick={() => unsnoozeTarget(c.id)}>{locale === "fi" ? "Jatka" : "Resume"}</Button>
                           ) : (
@@ -1019,7 +1080,7 @@ export default function BudgetPage() {
                         </div>
                       </div>
                     ) : (
-                      <Button type="button" variant="outline" size="sm" onClick={() => { setTargetDraft(""); setTargetCadence("monthly"); setTargetEditing(true); }}>{locale === "fi" ? "Aseta tavoite" : "Set a target"}</Button>
+                      <Button type="button" variant="outline" size="sm" onClick={() => { setTargetDraft(""); setTargetCadence("monthly"); setTargetDate(""); setTargetEditing(true); }}>{locale === "fi" ? "Aseta tavoite" : "Set a target"}</Button>
                     )}
                   </div>
 

src/app/(app)/transactions/page.tsx

@@ -27,6 +27,7 @@ import {
   Plus,
 } from "lucide-react";
 import { AddExpenseDialog } from "@/components/shared/add-expense-dialog";
+import { PayeeInput } from "@/components/shared/payee-input";
 import { F } from "@/components/ui/f";
 
 type FilterType = "all" | "income" | "expenses" | "transfers";
@@ -47,6 +48,7 @@ export default function TransactionsPage() {
   const [addOpen, setAddOpen] = useState(false);
   const [allAccounts, setAllAccounts] = useState<{ id: string; name: string }[]>([]);
   const [allCategories, setAllCategories] = useState<string[]>([]);
+  const [payees, setPayees] = useState<string[]>([]);
   const [editTx, setEditTx] = useState<{ id: string; payee: string; amount: number; category: string; memo: string | null; account_id: string; date: string } | null>(null);
   const [editSaving, setEditSaving] = useState(false);
   const [splitMode, setSplitMode] = useState(false);
@@ -61,6 +63,9 @@ export default function TransactionsPage() {
     fetch("/api/categories").then((r) => r.json()).then((data) => {
       if (Array.isArray(data.categories)) setAllCategories(data.categories.filter((c: { is_active: number }) => c.is_active).map((c: { name: string }) => c.name));
     }).catch(() => {});
+    fetch("/api/payees").then((r) => r.json()).then((data) => {
+      if (Array.isArray(data.payees)) setPayees(data.payees);
+    }).catch(() => {});
   }, []);
 
   const handleEditSave = async () => {
@@ -287,7 +292,7 @@ export default function TransactionsPage() {
             <div className="form-stack">
               <div className="form-field">
                 <Label>{locale === "fi" ? "Saaja" : "Payee"}</Label>
-                <Input value={editTx.payee} onChange={(e) => setEditTx({ ...editTx, payee: e.target.value })} />
+                <PayeeInput value={editTx.payee} onChange={(v) => setEditTx({ ...editTx, payee: v })} payees={payees} />
               </div>
               <div className="form-field">
                 <Label>{locale === "fi" ? "Summa" : "Amount"}</Label>

src/app/api/budget/alerts/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from "next/server";
+import { getSession } from "@/lib/auth";
+import { getDb } from "@/lib/db";
+import { availableForCategory } from "@/lib/budget-math";
+
+// Actionable budget state for the current month, used to show a notice dot on the Budjetti nav
+// item. "Overspent" = a category whose available balance has gone negative (YNAB's red
+// overbudgeted state). Reuses the canonical per-category available math so it matches the
+// budget page exactly. Snoozed categories and Ready-to-Assign are excluded.
+export async function GET() {
+  try {
+    const user = await getSession();
+    if (!user) return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
+
+    const db = getDb();
+    const now = new Date();
+    const month = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
+    console.debug("[budget/alerts] Computing overspent categories for", month);
+
+    const cats = db
+      .prepare("SELECT id, name FROM categories WHERE is_active = 1")
+      .all() as { id: number; name: string }[];
+    const snoozed = new Set(
+      (db.prepare("SELECT category_id FROM category_snoozes WHERE month = ?").all(month) as { category_id: number }[])
+        .map((r) => r.category_id)
+    );
+
+    let overspent = 0;
+    for (const c of cats) {
+      if (snoozed.has(c.id) || c.name === "Inflow: Ready to Assign") continue;
+      const available = availableForCategory(db, c.id, c.name, month);
+      if (available < -0.005) overspent++;
+    }
+
+    console.info("[budget/alerts] overspent categories:", overspent);
+    return NextResponse.json({ overspent });
+  } catch (err) {
+    console.error("[budget/alerts] error:", err);
+    return NextResponse.json({ overspent: 0 });
+  }
+}

src/app/api/budget/auto-assign/route.ts

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 import { getSession } from "@/lib/auth";
 import { getDb } from "@/lib/db";
 import { eventBus } from "@/lib/event-bus";
-import { availableForCategory, monthlyTargetEquivalent, monthBudgetNumbers, assignedForMonth, CATEGORY_ACTIVITY_PREDICATE } from "@/lib/budget-math";
+import { availableForCategory, monthlyTargetEquivalent, byDateMonthlyTarget, monthBudgetNumbers, assignedForMonth, CATEGORY_ACTIVITY_PREDICATE } from "@/lib/budget-math";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
@@ -26,14 +26,19 @@ function computeAutoAssign(db: ReturnType<typeof getDb>, month: string, mode: Mo
   // Per-mode "desired" amount each category should receive this month
   const desired = new Map<number, number>();
   if (mode === "underfunded") {
-    const targets = db.prepare("SELECT category_id, monthly_amount, COALESCE(cadence,'monthly') AS cadence, snooze_until_month FROM category_targets").all() as { category_id: number; monthly_amount: number; cadence: string; snooze_until_month: string }[];
+    const targets = db.prepare("SELECT category_id, monthly_amount, COALESCE(cadence,'monthly') AS cadence, COALESCE(target_date,'') AS target_date, snooze_until_month FROM category_targets").all() as { category_id: number; monthly_amount: number; cadence: string; target_date: string; snooze_until_month: string }[];
     const tMap = new Map(targets.map((t) => [t.category_id, t]));
     const snoozed = new Set((db.prepare("SELECT category_id FROM category_snoozes WHERE month = ?").all(month) as { category_id: number }[]).map((r) => r.category_id));
     for (const c of cats) {
       const t = tMap.get(c.id);
       if (!t || t.monthly_amount <= 0 || snoozed.has(c.id)) continue;
       if (t.snooze_until_month && t.snooze_until_month >= month) continue;
-      const need = round(monthlyTargetEquivalent(t.monthly_amount, t.cadence, month) - availableForCategory(db, c.id, c.name, month));
+      const available = availableForCategory(db, c.id, c.name, month);
+      // by_date: fund this month's share of what is still missing toward the goal. Other
+      // cadences refill the category up to their per-month equivalent.
+      const need = t.cadence === "by_date" && t.target_date
+        ? byDateMonthlyTarget(t.monthly_amount, available, month, t.target_date)
+        : round(monthlyTargetEquivalent(t.monthly_amount, t.cadence, month) - available);
       if (need > 0.005) desired.set(c.id, need);
     }
   } else {