removed any hardcoded values

Author: atijare

web/budgeting.html

@@ -27,9 +27,13 @@ <h1>Budgeting</h1>
         <p class="subtle">Plan your monthly spend, track actuals, and move unused funds to savings or another category.</p>
       </div>
       <div class="budget-hero-meta">
-        <label class="subtle" for="budgetMonthSelect">Month</label>
-        <select id="budgetMonthSelect" class="month-select" aria-label="Select budget month"></select>
-        <span class="pill" id="budgetPeriod" aria-live="polite">—</span>
+        <div class="month-controls">
+          <div class="month-row">
+            <label class="subtle" for="budgetMonthSelect">Month</label>
+            <select id="budgetMonthSelect" class="month-select" aria-label="Select budget month"></select>
+          </div>
+          <span class="pill" id="budgetPeriod" aria-live="polite">—</span>
+        </div>
         <button class="btn" id="btnResetBudgets" type="button">Reset defaults</button>
       </div>
     </section>

web/home.html

@@ -83,7 +83,7 @@ <h2>Net Worth</h2>
           </div>
           <div class="net-worth-chart">
             <canvas id="netWorthChart" aria-label="Net worth trend" role="img"></canvas>
-            <p class="chart-caption subtle">Last 6 months</p>
+            <p class="chart-caption subtle">Recent months</p>
           </div>
         </article>
 

web/scripts/budgeting.js

@@ -6,19 +6,19 @@ import { api } from "./api.js";
   const CURRENCY_FALLBACK = "USD";
 
   const DEFAULT_CATEGORIES = [
-    { name: "Housing", budget: 1500 },
-    { name: "Utilities", budget: 220 },
-    { name: "Groceries", budget: 450 },
-    { name: "Transportation", budget: 180 },
-    { name: "Dining", budget: 200 },
-    { name: "Health", budget: 160 },
-    { name: "Entertainment", budget: 140 },
-    { name: "Subscriptions", budget: 65 },
-    { name: "Travel", budget: 120 },
-    { name: "Education", budget: 90 },
-    { name: "Giving", budget: 75 },
-    { name: "Savings", budget: 300 },
-    { name: "Other", budget: 100 },
+    { name: "Housing", budget: null },
+    { name: "Utilities", budget: null },
+    { name: "Groceries", budget: null },
+    { name: "Transportation", budget: null },
+    { name: "Dining", budget: null },
+    { name: "Health", budget: null },
+    { name: "Entertainment", budget: null },
+    { name: "Subscriptions", budget: null },
+    { name: "Travel", budget: null },
+    { name: "Education", budget: null },
+    { name: "Giving", budget: null },
+    { name: "Savings", budget: null },
+    { name: "Other", budget: null },
   ];
 
   const $ = (sel, root = document) => root.querySelector(sel);
@@ -61,7 +61,12 @@ import { api } from "./api.js";
 
       return normalized.map((c) => {
         const stored = byName.get(normalizeName(c.name));
-        return stored ? { ...c, budget: Number(stored.budget) || 0 } : c;
+        if (!stored) return c;
+        if (stored.budget === null || stored.budget === undefined || stored.budget === "") {
+          return { ...c, budget: null };
+        }
+        const value = Number(stored.budget);
+        return { ...c, budget: Number.isFinite(value) ? value : null };
       });
     } catch {
       return DEFAULT_CATEGORIES.map((c) => ({ ...c }));
@@ -112,9 +117,10 @@ import { api } from "./api.js";
   function computeTotals(categories, spentMap) {
     const totals = categories.reduce(
       (acc, c) => {
+        const budget = Number.isFinite(c.budget) ? c.budget : 0;
         const spent = spentMap.get(normalizeName(c.name)) || 0;
-        const remaining = c.budget - spent;
-        acc.totalBudget += c.budget;
+        const remaining = budget - spent;
+        acc.totalBudget += budget;
         acc.totalSpent += spent;
         acc.totalRemaining += remaining;
         if (normalizeName(c.name) !== "savings" && remaining > 0) acc.unused += remaining;
@@ -153,8 +159,9 @@ import { api } from "./api.js";
 
     categories.forEach((c, idx) => {
       const spent = spentMap.get(normalizeName(c.name)) || 0;
-      const remaining = c.budget - spent;
-      const progress = c.budget > 0 ? Math.min(spent / c.budget, 1) : 0;
+      const budget = Number.isFinite(c.budget) ? c.budget : 0;
+      const remaining = budget - spent;
+      const progress = budget > 0 ? Math.min(spent / budget, 1) : 0;
 
       const tr = document.createElement("tr");
 
@@ -167,7 +174,7 @@ import { api } from "./api.js";
       input.type = "number";
       input.min = "0";
       input.step = "1";
-      input.value = c.budget;
+      input.value = c.budget ?? "";
       input.className = "budget-input";
       input.dataset.index = String(idx);
       tdBudget.appendChild(input);
@@ -208,7 +215,8 @@ import { api } from "./api.js";
       if (isTarget) return { ...c };
 
       const spent = c.spent || 0;
-      const remaining = c.budget - spent;
+      const budget = Number.isFinite(c.budget) ? c.budget : 0;
+      const remaining = budget - spent;
       if (remaining > 0) {
         unused += remaining;
         return { ...c, budget: spent };
@@ -218,7 +226,10 @@ import { api } from "./api.js";
 
     const targetIndex = updated.findIndex((c) => normalizeName(c.name) === targetKey);
     if (targetIndex >= 0) {
-      updated[targetIndex].budget += unused;
+      const current = Number.isFinite(updated[targetIndex].budget)
+        ? updated[targetIndex].budget
+        : 0;
+      updated[targetIndex].budget = current + unused;
     }
 
     return { updated, moved: unused };
@@ -298,8 +309,12 @@ import { api } from "./api.js";
       if (!target.dataset.index) return;
 
       const idx = Number(target.dataset.index);
-      const next = Number(target.value || 0);
-      state.categories[idx].budget = Math.max(0, Number.isFinite(next) ? next : 0);
+      if (target.value === "") {
+        state.categories[idx].budget = null;
+      } else {
+        const next = Number(target.value || 0);
+        state.categories[idx].budget = Math.max(0, Number.isFinite(next) ? next : 0);
+      }
       saveCategories(state.categories.map(({ name, budget }) => ({ name, budget })), state.monthKey);
 
       const updatedTotals = computeTotals(state.categories, state.spentMap);

web/scripts/home.js

@@ -173,13 +173,13 @@ import { api } from "./api.js";
     const dpr = window.devicePixelRatio || 1;
 
     canvas.width = parentWidth * dpr;
-    canvas.height = 220 * dpr;
+    canvas.height = 260 * dpr;
 
     const ctx = canvas.getContext("2d");
     ctx.setTransform(1, 0, 0, 1, 0, 0);
     ctx.scale(dpr, dpr);
 
-    ctx.clearRect(0, 0, parentWidth, 220);
+    ctx.clearRect(0, 0, parentWidth, 260);
 
     if (!series?.length) return;
 
@@ -329,33 +329,7 @@ import { api } from "./api.js";
   // ============================================================
   //  NET WORTH DATA + RENDER
   // ============================================================
-  function buildDemoNetWorth(currency) {
-    return {
-      currency,
-      asOf: new Date().toISOString(),
-      assets: [
-        { name: "Checking", amount: 4200 },
-        { name: "Savings", amount: 7800 },
-        { name: "Investments", amount: 15300 },
-        { name: "Property", amount: 62000 },
-      ],
-      liabilities: [
-        { name: "Credit Card", amount: 1800 },
-        { name: "Auto Loan", amount: 6200 },
-        { name: "Student Loan", amount: 12400 },
-      ],
-      trend: [
-        { label: "Aug", value: 68000 },
-        { label: "Sep", value: 69200 },
-        { label: "Oct", value: 70100 },
-        { label: "Nov", value: 71450 },
-        { label: "Dec", value: 70980 },
-        { label: "Jan", value: 72620 },
-      ],
-    };
-  }
-
-  function buildMonthlyNet(records, monthsBack = 6) {
+  function buildMonthlyNet(records, monthsBack = 12) {
     const now = new Date();
     const months = [];
     for (let i = monthsBack - 1; i >= 0; i -= 1) {
@@ -392,24 +366,30 @@ import { api } from "./api.js";
       }
     }
 
-    const demo = buildDemoNetWorth(currency);
-    if (!records?.length) return demo;
-
-    const assetsTotal = demo.assets.reduce((s, a) => s + a.amount, 0);
-    const liabilitiesTotal = demo.liabilities.reduce((s, l) => s + l.amount, 0);
-    const base = assetsTotal - liabilitiesTotal;
-    const months = buildMonthlyNet(records, 6);
+    if (!records?.length) {
+      return {
+        currency,
+        asOf: null,
+        assets: [],
+        liabilities: [],
+        trend: [],
+      };
+    }
 
+    const base = 0;
+    const months = buildMonthlyNet(records, 12);
     let running = base;
     const trend = months.map((m) => {
       running += m.net;
       return { label: m.label, value: Math.max(0, running) };
     });
 
     return {
-      ...demo,
-      trend,
+      currency,
       asOf: new Date().toISOString(),
+      assets: [],
+      liabilities: [],
+      trend,
     };
   }
 
@@ -419,21 +399,29 @@ import { api } from "./api.js";
     const liabilitiesTotal = (data.liabilities || []).reduce((s, l) => s + l.amount, 0);
     const netWorth = assetsTotal - liabilitiesTotal;
 
-    setText("#netWorthTotal", fmtMoney(netWorth, data.currency));
-    setText("#assetsTotal", fmtMoney(assetsTotal, data.currency));
-    setText("#liabilitiesTotal", fmtMoney(liabilitiesTotal, data.currency));
-
-    const deltaBase = data.trend?.length ? data.trend[0].value : netWorth;
-    const delta = netWorth - deltaBase;
-    const deltaLabel = delta >= 0 ? "up" : "down";
-    setText(
-      "#netWorthDelta",
-      `${delta >= 0 ? "+" : "-"}${fmtMoney(Math.abs(delta), data.currency)} ${deltaLabel} vs 6 months ago`
-    );
-    setText(
-      "#netWorthUpdated",
-      `Updated ${new Date(data.asOf).toLocaleDateString()}`
-    );
+    if (!data.assets?.length && !data.liabilities?.length && !data.trend?.length) {
+      setText("#netWorthTotal", "—");
+      setText("#assetsTotal", "—");
+      setText("#liabilitiesTotal", "—");
+      setText("#netWorthDelta", "Connect accounts to see your net worth trend.");
+      setText("#netWorthUpdated", "No net worth data yet");
+    } else {
+      setText("#netWorthTotal", fmtMoney(netWorth, data.currency));
+      setText("#assetsTotal", fmtMoney(assetsTotal, data.currency));
+      setText("#liabilitiesTotal", fmtMoney(liabilitiesTotal, data.currency));
+
+      const deltaBase = data.trend?.length ? data.trend[0].value : netWorth;
+      const delta = netWorth - deltaBase;
+      const deltaLabel = delta >= 0 ? "up" : "down";
+      setText(
+        "#netWorthDelta",
+        `${delta >= 0 ? "+" : "-"}${fmtMoney(Math.abs(delta), data.currency)} ${deltaLabel} vs previous period`
+      );
+      setText(
+        "#netWorthUpdated",
+        data.asOf ? `Updated ${new Date(data.asOf).toLocaleDateString()}` : "No net worth data yet"
+      );
+    }
 
     const assetsList = $("#assetsList");
     const liabilitiesList = $("#liabilitiesList");
@@ -464,7 +452,9 @@ import { api } from "./api.js";
     renderList(assetsList, data.assets);
     renderList(liabilitiesList, data.liabilities);
 
-    drawNetWorthChart($("#netWorthChart"), data.trend, data.currency);
+    if (data.trend?.length) {
+      drawNetWorthChart($("#netWorthChart"), data.trend, data.currency);
+    }
   }
 
   function renderKpis(comp, viewLabel) {
@@ -697,7 +687,9 @@ import { api } from "./api.js";
 
       const redraw = debounce(() => {
         drawBarChart(canvas, computed.categories);
-        drawNetWorthChart($("#netWorthChart"), netWorthData.trend, netWorthData.currency);
+        if (netWorthData.trend?.length) {
+          drawNetWorthChart($("#netWorthChart"), netWorthData.trend, netWorthData.currency);
+        }
       }, 150);
 
       window.addEventListener("resize", redraw);

web/styles/budgeting.css

@@ -20,6 +20,19 @@
   justify-content: flex-end;
 }
 
+.month-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.35rem;
+}
+
+.month-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .month-select {
   min-width: 160px;
   padding: 0.45rem 0.6rem;

web/styles/home.css

@@ -70,15 +70,14 @@
 
 .net-worth-grid {
   display: grid;
-  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
+  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.6fr);
   gap: 1rem;
 }
 
 .net-worth-summary {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
-  gap: 1.5rem;
-  align-items: center;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1rem;
   padding: 1.25rem;
 }
 
@@ -106,15 +105,20 @@
 
 .net-worth-breakdown {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 1rem;
-  padding: 1.25rem !important;
+  padding: 1.5rem !important;
+  align-items: start;
 }
 
 .breakdown-col h3 {
   margin-bottom: 0.5rem;
 }
 
+.breakdown-col {
+  min-width: 0;
+}
+
 .networth-list {
   list-style: none;
   margin: 0;
@@ -124,7 +128,7 @@
 .networth-list li {
   display: flex;
   justify-content: space-between;
-  gap: 0.75rem;
+  gap: 1rem;
   padding: 0.4rem 0;
   border-bottom: 1px dashed var(--border);
 }