Build a personal finance dashboard as a static web app in this directory: index.html, s…

claude-codeclaude-fable-5 · 77 steps · 13m 51s · 8 filessession a217294b-d60@patrick-toulme
Build a personal finance dashboard as a static web app in this directory: index.html, style.css, app.js, data.js, charts.js. Transactions table with add/edit/delete + localStorage, monthly budget bars, a canvas spending-over-time chart, category filters, CSV import/export, dark theme, keyboard shortcuts, and a self-test page (tests.html) that exercises the core logic. Run your tests with a headless check (node) and fix what fails.
same matchclaude-code · 77 steps codex · 49 steps opencode · 44 steps pi · 28 steps antigravity · 28 steps
compare in arena
step 15 / 77
data.jschange 1/1
/*
 * data.js — pure finance logic. No DOM, no globals touched.
 * Loads as window.Finance in the browser and module.exports in Node,
 * so the same code runs in the app and in the headless test suite.
 */
(function (root, factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    root.Finance = factory();
  }
})(typeof self !== 'undefined' ? self : this, function () {
  'use strict';
 
  var CATEGORIES = [
    'Groceries', 'Dining', 'Transport', 'Housing', 'Utilities',
    'Entertainment', 'Health', 'Shopping', 'Income', 'Other'
  ];
 
  // Monthly budgets per expense category. Income carries no budget.
  var DEFAULT_BUDGETS = {
    Groceries: 500,
    Dining: 250,
    Transport: 160,
    Housing: 1800,
    Utilities: 220,
    Entertainment: 150,
    Health: 120,
    Shopping: 200,
    Other: 150
  };
 
  var DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
 
  function isValidDate(str) {
    var m = DATE_RE.exec(str);
    if (!m) return false;
    var y = +m[1], mo = +m[2], d = +m[3];
    if (mo < 1 || mo > 12 || d < 1) return false;
    var days = [31, (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0 ? 29 : 28,
      31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    return d <= days[mo - 1];
  }
 
  function validateTransaction(tx) {
    var errors = [];
    if (!tx || typeof tx !== 'object') {
      return { ok: false, errors: ['not an object'] };
    }
    if (typeof tx.date !== 'string' || !isValidDate(tx.date)) {
      errors.push('date must be a valid YYYY-MM-DD date');
    }
    if (typeof tx.description !== 'string' || tx.description.trim() === '') {
      errors.push('description is required');
    }
    if (CATEGORIES.indexOf(tx.category) === -1) {
      errors.push('unknown category "' + tx.category + '"');
    }
    var amt = Number(tx.amount);
    if (typeof tx.amount === 'string' && tx.amount.trim() === '') amt = NaN;
    if (!isFinite(amt) || amt === 0) {
      errors.push('amount must be a non-zero number');
    }
    return { ok: errors.length === 0, errors: errors };
  }
 
  function normalize(tx) {
    return {
      id: tx.id,
      date: tx.date,
      description: tx.description.trim(),
      category: tx.category,
      amount: Math.round(Number(tx.amount) * 100) / 100
    };
  }
 
  function nextId(txs) {
    var max = 0;
    for (var i = 0; i < txs.length; i++) {
      if (typeof txs[i].id === 'number' && txs[i].id > max) max = txs[i].id;
    }
    return max + 1;
  }
 
  // All mutations return a new array; callers own persistence.
  function addTransaction(txs, tx) {
    var v = validateTransaction(tx);
    if (!v.ok) throw new Error('invalid transaction: ' + v.errors.join('; '));
    var withId = normalize(tx);
    withId.id = nextId(txs);
    return txs.concat([withId]);
  }
 
  function updateTransaction(txs, id, patch) {
    var found = false;
    var out = txs.map(function (t) {
      if (t.id !== id) return t;
      found = true;
      var merged = {
        id: t.id,
        date: patch.date !== undefined ? patch.date : t.date,
        description: patch.description !== undefined ? patch.description : t.description,
        category: patch.category !== undefined ? patch.category : t.category,
        amount: patch.amount !== undefined ? patch.amount : t.amount
      };
      var v = validateTransaction(merged);
      if (!v.ok) throw new Error('invalid transaction: ' + v.errors.join('; '));
      return normalize(merged);
    });
    if (!found) throw new Error('no transaction with id ' + id);
    return out;
  }
 
  function deleteTransaction(txs, id) {
    var out = txs.filter(function (t) { return t.id !== id; });
    if (out.length === txs.length) throw new Error('no transaction with id ' + id);
    return out;
  }
 
  function monthKey(date) {
    return String(date).slice(0, 7);
  }
 
  function monthLabel(month) {
    var names = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var parts = month.split('-');
    return names[+parts[1] - 1] + ' ' + parts[0];
  }
 
  function shiftMonth(month, delta) {
    var parts = month.split('-');
    var idx = +parts[0] * 12 + (+parts[1] - 1) + delta;
    var y = Math.floor(idx / 12);
    var m = (idx % 12 + 12) % 12 + 1;
    return y + '-' + (m < 10 ? '0' + m : '' + m);
  }
 
  // ['2025-09', ..., endMonth] — `count` consecutive months ending at endMonth.
  function monthRange(endMonth, count) {
    var out = [];
    for (var i = count - 1; i >= 0; i--) out.push(shiftMonth(endMonth, -i));
    return out;
  }
 
  // Map of month -> {month, spent, income, net}. spent is a positive number.
  function monthlyTotals(txs) {
    var map = {};
    for (var i = 0; i < txs.length; i++) {
      var t = txs[i];
      var key = monthKey(t.date);
      if (!map[key]) map[key] = { month: key, spent: 0, income: 0, net: 0 };
      if (t.amount < 0) map[key].spent += -t.amount;
      else map[key].income += t.amount;
      map[key].net += t.amount;
    }
    Object.keys(map).forEach(function (k) {
      map[k].spent = Math.round(map[k].spent * 100) / 100;
      map[k].income = Math.round(map[k].income * 100) / 100;
      map[k].net = Math.round(map[k].net * 100) / 100;
    });
    return map;
  }
 
  // Gap-filled series for charting: one entry per month, zeros where quiet.
  function monthlySeries(txs, endMonth, count) {
    var totals = monthlyTotals(txs);
    return monthRange(endMonth, count).map(function (m) {
      return totals[m] || { month: m, spent: 0, income: 0, net: 0 };
    });
  }
 
  // Positive spend per expense category, optionally limited to one month.
  function categoryTotals(txs, month) {
    var out = {};
    for (var i = 0; i < txs.length; i++) {
      var t = txs[i];
      if (t.amount >= 0) continue;
      if (month && monthKey(t.date) !== month) continue;
      out[t.category] = Math.round(((out[t.category] || 0) + -t.amount) * 100) / 100;
    }
    return out;
  }
 
  // Per-category budget standing for one month, most-consumed first.
  function budgetStatus(txs, budgets, month) {
    var spentBy = categoryTotals(txs, month);
    return Object.keys(budgets).map(function (cat) {
      var budget = budgets[cat];
      var spent = spentBy[cat] || 0;
      var pct = budget > 0 ? spent / budget : 0;
      return {
        category: cat,
        budget: budget,
        spent: spent,
        pct: pct,
        remaining: Math.round((budget - spent) * 100) / 100,
        over: spent > budget
      };
    }).sort(function (a, b) { return b.pct - a.pct || (a.category < b.category ? -1 : 1); });
  }
 
  function filterTransactions(txs, filters) {
    filters = filters || {};
    var cat = filters.category && filters.category !== 'All' ? filters.category : null;
    var q = filters.search ? String(filters.search).toLowerCase() : null;
    var month = filters.month && filters.month !== 'All' ? filters.month : null;
    return txs.filter(function (t) {
      if (cat && t.category !== cat) return false;
      if (month && monthKey(t.date) !== month) return false;
      if (q && t.description.toLowerCase().indexOf(q) === -1) return false;
      return true;
    });
  }
 
  function sortByDateDesc(txs) {
    return txs.slice().sort(function (a, b) {
      if (a.date !== b.date) return a.date < b.date ? 1 : -1;
      return b.id - a.id;
    });
  }
 
  /* ---------- CSV ---------- */
 
  var CSV_HEADER = 'date,description,category,amount';
 
  function csvEscape(field) {
    var s = String(field);
    if (/[",\n\r]/.test(s)) return '"' + s.replace(/"/g, '""') + '"';
    return s;
  }
 
  function toCSV(txs) {
    var lines = [CSV_HEADER];
    for (var i = 0; i < txs.length; i++) {
      var t = txs[i];
      lines.push([t.date, csvEscape(t.description), t.category, t.amount].join(','));
    }
    return lines.join('\n');
  }
 
  // State-machine CSV split: quoted fields may hold commas, quotes, newlines.
  function csvRows(text) {
    var rows = [];
    var row = [];
    var field = '';
    var inQuotes = false;
    var i = 0;
    while (i < text.length) {
      var ch = text[i];
      if (inQuotes) {
        if (ch === '"') {
          if (text[i + 1] === '"') { field += '"'; i += 2; continue; }
          inQuotes = false; i++; continue;
        }
        field += ch; i++; continue;
      }
      if (ch === '"') { inQuotes = true; i++; continue; }
      if (ch === ',') { row.push(field); field = ''; i++; continue; }
      if (ch === '\r') { i++; continue; }
      if (ch === '\n') { row.push(field); rows.push(row); row = []; field = ''; i++; continue; }
      field += ch; i++;
    }
    if (field !== '' || row.length > 0) { row.push(field); rows.push(row); }
    return rows.filter(function (r) { return !(r.length === 1 && r[0].trim() === ''); });
  }
 
  // -> {transactions: [{date,description,category,amount} without ids], errors: ['row N: why']}
  function parseCSV(text) {
    var rows = csvRows(String(text || ''));
    var transactions = [];
    var errors = [];
    var start = 0;
    if (rows.length && rows[0].join(',').toLowerCase().replace(/\s/g, '') === CSV_HEADER) {
      start = 1;
    }
    for (var r = start; r < rows.length; r++) {
      var cells = rows[r];
      if (cells.length !== 4) {
        errors.push('row ' + (r + 1) + ': expected 4 fields, got ' + cells.length);
        continue;
      }
      var tx = {
        date: cells[0].trim(),
        description: cells[1],
        category: cells[2].trim(),
        amount: Number(cells[3])
      };
      var v = validateTransaction(tx);
      if (!v.ok) {
        errors.push('row ' + (r + 1) + ': ' + v.errors.join('; '));
        continue;
      }
      transactions.push(tx);
    }
    return { transactions: transactions, errors: errors };
  }
 
  // Merge parsed rows into an existing list. -> {txs, added, errors}
  function importCSV(existing, text) {
    var parsed = parseCSV(text);
    var txs = existing;
    for (var i = 0; i < parsed.transactions.length; i++) {
      txs = addTransaction(txs, parsed.transactions[i]);
    }
    return { txs: txs, added: parsed.transactions.length, errors: parsed.errors };
  }
 
  /* ---------- Formatting ---------- */
 
  function formatMoney(n) {
    var neg = n < 0;
    var abs = Math.abs(Math.round(n * 100) / 100);
    var fixed = abs.toFixed(2);
    var parts = fixed.split('.');
    var intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return (neg ? '-$' : '$') + intPart + '.' + parts[1];
  }
 
  // Axis-tick form: no cents, compacts thousands ($1.2k).
  function formatMoneyShort(n) {
    var abs = Math.abs(n);
    var sign = n < 0 ? '-' : '';
    if (abs >= 1000) {
      var k = abs / 1000;
      return sign + '$' + (k >= 10 ? Math.round(k) : Math.round(k * 10) / 10) + 'k';
    }
    return sign + '$' + Math.round(abs);
  }
 
  /* ---------- Seed data ---------- */
 
  // Deterministic pseudo-random stream so seeded demos are reproducible.
  function lcg(seed) {
    var s = seed >>> 0;
    return function () {
      s = (s * 1664525 + 1013904223) >>> 0;
      return s / 4294967296;
    };
  }
 
  // Six months of plausible activity ending at `today` (YYYY-MM-DD).
  function sampleData(today) {
    var rand = lcg(42);
    var endMonth = monthKey(today);
    var months = monthRange(endMonth, 6);
    var txs = [];
    var merchants = {
      Groceries: ['Fresh Mart', 'Corner Grocer', 'Farm Box'],
      Dining: ['Noodle House', 'Cafe Lumen', 'Taqueria Sol'],
      Transport: ['Metro Card', 'City Fuel', 'RideShare'],
      Utilities: ['Power & Light', 'City Water', 'Fiber Internet'],
      Entertainment: ['Streamly', 'Cinema Row', 'Vinyl Attic'],
      Health: ['Pharmacy Plus', 'Yoga Loft'],
      Shopping: ['Thread & Co', 'Gadget Bin'],
      Other: ['Post Office', 'Gift Shop']
    };
    months.forEach(function (m, mi) {
      var isCurrent = m === endMonth;
      var dayCap = isCurrent ? Math.max(2, +today.slice(8, 10)) : 28;
      function day(d) {
        var dd = Math.min(d, dayCap);
        return m + '-' + (dd < 10 ? '0' + dd : dd);
      }
      txs.push({ date: day(1), description: 'Salary', category: 'Income', amount: 4200 });
      txs.push({ date: day(1), description: 'Rent', category: 'Housing', amount: -1800 });
      Object.keys(merchants).forEach(function (cat) {
        if (cat === 'Housing') return;
        var base = { Groceries: 4, Dining: 3, Transport: 2, Utilities: 2,
          Entertainment: 1, Health: 1, Shopping: 1, Other: 1 }[cat] || 1;
        var n = Math.max(1, Math.round(base * (0.6 + rand())));
        for (var i = 0; i < n; i++) {
          var names = merchants[cat];
          var typical = { Groceries: 55, Dining: 32, Transport: 40, Utilities: 85,
            Entertainment: 25, Health: 45, Shopping: 70, Other: 30 }[cat];
          var amount = -Math.round(typical * (0.5 + rand()) * 100) / 100;
          var d = 2 + Math.floor(rand() * 26);
          txs.push({
            date: day(d),
            description: names[Math.floor(rand() * names.length)],
            category: cat,
            amount: amount
          });
        }
      });
      if (mi % 2 === 0) {
        txs.push({ date: day(15), description: 'Freelance project', category: 'Income', amount: Math.round(300 + rand() * 400) });
      }
    });
    var out = [];
    for (var i = 0; i < txs.length; i++) out = addTransaction(out, txs[i]);
    return out;
  }
 
  return {
    CATEGORIES: CATEGORIES,
    DEFAULT_BUDGETS: DEFAULT_BUDGETS,
    isValidDate: isValidDate,
    validateTransaction: validateTransaction,
    nextId: nextId,
    addTransaction: addTransaction,
    updateTransaction: updateTransaction,
    deleteTransaction: deleteTransaction,
    monthKey: monthKey,
    monthLabel: monthLabel,
    shiftMonth: shiftMonth,
    monthRange: monthRange,
    monthlyTotals: monthlyTotals,
    monthlySeries: monthlySeries,
    categoryTotals: categoryTotals,
    budgetStatus: budgetStatus,
    filterTransactions: filterTransactions,
    sortByDateDesc: sortByDateDesc,
    toCSV: toCSV,
    parseCSV: parseCSV,
    importCSV: importCSV,
    formatMoney: formatMoney,
    formatMoneyShort: formatMoneyShort,
    sampleData: sampleData
  };
});
 
422 linesjs
Writes …/data.js
Files at this step
drag the rail to scrub
Discussion

1 comment on this trajectory. Recorded by @patrick-toulme.
@patrick-toulme7/28/2026, 5:09:30 PM
Dogfood iteration 2 — first true 5-way head-to-head, uploaded after fixing the capture-scaffolding leak, the 4-session cap, and the live agent badges. All five harnesses, same prompt, exact captures. Safe to delete.
#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #medium #skills #subagents #testing
i2-r1-claude
← all sessions