Add pattern delete buttons to subscriptions and income pages

Author: rollecode

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

@@ -15,7 +15,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Plus, Loader2, Check } from "lucide-react";
+import { Plus, Loader2, Check, X } from "lucide-react";
 import { F } from "@/components/ui/f";
 
 interface Income {
@@ -157,6 +157,27 @@ export default function IncomePage() {
     } catch (err) { console.error("[income] Add pattern error:", err); }
   };
 
+  const deletePattern = async (patternId: number) => {
+    try {
+      await fetch("/api/matches", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: patternId }),
+      });
+      const matchData = await fetch("/api/matches").then((r) => r.json());
+      if (matchData.patterns) {
+        const grouped: Record<number, { id: number; payee_pattern: string }[]> = {};
+        for (const p of matchData.patterns) {
+          if (p.source_type === "income") {
+            if (!grouped[p.source_id]) grouped[p.source_id] = [];
+            grouped[p.source_id].push({ id: p.id, payee_pattern: p.payee_pattern });
+          }
+        }
+        setPatterns(grouped);
+      }
+    } catch (err) { console.error("[income] Delete pattern error:", err); }
+  };
+
   const deleteIncome = async (id: number) => {
     console.info("[income] Deleting:", id);
     try {
@@ -306,8 +327,13 @@ export default function IncomePage() {
                 </div>
                 {(patterns[editTarget.id] || []).length > 0 && (
                   <div className="match-pattern-list">
-                    {patterns[editTarget.id].map((p, i) => (
-                      <span key={i} className="match-pattern-tag">{p.payee_pattern}</span>
+                    {patterns[editTarget.id].map((p) => (
+                      <div key={p.id} className="match-pattern-item">
+                        <span className="match-pattern-tag">{p.payee_pattern}</span>
+                        <button type="button" className="batch-remove-btn" onClick={() => deletePattern(p.id)}>
+                          <X />
+                        </button>
+                      </div>
                     ))}
                   </div>
                 )}

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

@@ -16,7 +16,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Plus, Loader2, Check, AlertCircle } from "lucide-react";
+import { Plus, Loader2, Check, AlertCircle, X } from "lucide-react";
 import { F } from "@/components/ui/f";
 
 // Known brand configs
@@ -144,7 +144,7 @@ interface Subscription {
   is_paid: boolean;
   is_overdue: boolean;
   is_priority: number;
-  patterns: string[];
+  patterns: { id: number; pattern: string }[];
 }
 
 export default function SubscriptionsPage() {
@@ -274,6 +274,17 @@ export default function SubscriptionsPage() {
     } catch (err) { console.error("[subscriptions] Add pattern error:", err); }
   };
 
+  const deletePattern = async (patternId: number) => {
+    try {
+      await fetch("/api/matches", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: patternId }),
+      });
+      loadSubscriptions();
+    } catch (err) { console.error("[subscriptions] Delete pattern error:", err); }
+  };
+
   const active = subscriptions.filter((s) => s.is_active);
   const monthlyTotal = active.reduce((s, sub) => s + sub.amount, 0);
   const yearlyTotal = monthlyTotal * 12;
@@ -353,7 +364,7 @@ export default function SubscriptionsPage() {
                   </div>
                   <p className="subscription-card-meta">
                     {locale === "fi" ? "Veloitus" : "Billing"} {sub.due_day}. {locale === "fi" ? "päivä" : ""}
-                    {sub.patterns.length > 0 && <span className="list-item-patterns"> – {sub.patterns.join(", ")}</span>}
+                    {sub.patterns.length > 0 && <span className="list-item-patterns"> – {sub.patterns.map((p) => p.pattern).join(", ")}</span>}
                   </p>
                 </div>
                 <div className="subscription-card-right">
@@ -406,8 +417,13 @@ export default function SubscriptionsPage() {
                 </div>
                 {editTarget.patterns.length > 0 && (
                   <div className="match-pattern-list">
-                    {editTarget.patterns.map((p, i) => (
-                      <span key={i} className="match-pattern-tag">{p}</span>
+                    {editTarget.patterns.map((p) => (
+                      <div key={p.id} className="match-pattern-item">
+                        <span className="match-pattern-tag">{p.pattern}</span>
+                        <button type="button" className="batch-remove-btn" onClick={() => deletePattern(p.id)}>
+                          <X />
+                        </button>
+                      </div>
                     ))}
                   </div>
                 )}

src/app/api/subscriptions/route.ts

@@ -21,14 +21,14 @@ export async function GET() {
       .all(month) as { source_id: number; amount: number }[];
     const matchMap = new Map(matches.map((m) => [m.source_id, m.amount]));
 
-    // Get payee patterns
+    // Get payee patterns with IDs for deletion
     const patterns = db
-      .prepare("SELECT source_id, payee_pattern FROM payee_matches WHERE source_type = 'subscription'")
-      .all() as { source_id: number; payee_pattern: string }[];
-    const patternMap = new Map<number, string[]>();
+      .prepare("SELECT id, source_id, payee_pattern FROM payee_matches WHERE source_type = 'subscription'")
+      .all() as { id: number; source_id: number; payee_pattern: string }[];
+    const patternMap = new Map<number, { id: number; pattern: string }[]>();
     for (const p of patterns) {
       if (!patternMap.has(p.source_id)) patternMap.set(p.source_id, []);
-      patternMap.get(p.source_id)!.push(p.payee_pattern);
+      patternMap.get(p.source_id)!.push({ id: p.id, pattern: p.payee_pattern });
     }
 
     // Manual paid status (subscription IDs offset by 10000 to avoid collision with bills)

src/lib/daily-budget.ts

@@ -74,9 +74,8 @@ export function calculateDailyBudget(params: {
   }
   incomeEvents.sort((a, b) => a.absDay - b.absDay);
 
-  // Window end: at least minWindowDays, but extend to cover the next income after that
-  const minEnd = today + minWindowDays;
-  const endAbsDay = Math.max(minEnd, incomeEvents.find((e) => e.absDay >= minEnd)?.absDay || minEnd);
+  // Fixed 14-day window — no extension since we don't count future income
+  const endAbsDay = today + minWindowDays;
 
   const totalDays = endAbsDay - today;
   if (totalDays <= 0) return { dailyBudget: 0, tightestSegment: null, segmentCount: 0 };
@@ -126,7 +125,7 @@ export function calculateDailyBudget(params: {
   const pool = balance + windowIncome - windowObligations - windowSaving;
   const dailyBudget = Math.max(0, Math.round((pool / totalDays) * 100) / 100);
 
-  console.debug("[daily-budget] balance:", Math.round(balance), "windowIncome:", Math.round(windowIncome), "obligations:", Math.round(windowObligations), "saving:", Math.round(windowSaving), "pool:", Math.round(pool), "days:", totalDays, "daily:", dailyBudget);
+  console.info("[daily-budget] balance:", Math.round(balance), "windowIncome:", Math.round(windowIncome), "obligations:", Math.round(windowObligations), "saving:", Math.round(windowSaving), "pool:", Math.round(pool), "days:", totalDays, "daily:", dailyBudget);
 
   const tightestSegment = {
     startDay: today,