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

claude-codeclaude-fable-5 · 113 steps · 23m 10s · 8 filessession aaf47577-736@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 · 113 steps codex · 56 steps pi · 22 steps antigravity · 33 steps
compare in arena
step 66 / 113
data.jschange 1/2
/*
 * data.js — core finance logic: transactions, budgets, CSV, aggregation, storage.
 * Pure logic only (no DOM). Loads as a browser global (FinanceData) or a
 * CommonJS module so tests.js can exercise it under node.
 *
 * Data model: a transaction is { id, date: 'YYYY-MM-DD', description, category,
 * amount }. Amounts are signed — negative = money out (spending), positive =
 * money in. The sign is derived from the category: 'Income' is the only
 * positive category; every spending category stores a negative amount.
 */
(function (global, factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    global.FinanceData = factory();
  }
})(typeof self !== 'undefined' ? self : this, function () {
  'use strict';
 
  var CATEGORIES = ['Groceries', 'Rent', 'Transport', 'Dining', 'Entertainment', 'Utilities', 'Shopping', 'Other'];
  var INCOME_CATEGORY = 'Income';
  var ALL_CATEGORIES = CATEGORIES.concat([INCOME_CATEGORY]);
 
  var DEFAULT_BUDGETS = {
    Groceries: 500,
    Rent: 1600,
    Transport: 200,
    Dining: 250,
    Entertainment: 150,
    Utilities: 250,
    Shopping: 200,
    Other: 150
  };
 
  var STORAGE_KEYS = {
    transactions: 'vibefin.transactions.v1',
    budgets: 'vibefin.budgets.v1',
    theme: 'vibefin.theme'
  };
 
  var MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
  var uidCounter = 0;
  function uid() {
    uidCounter += 1;
    return 'txn-' + Date.now().toString(36) + '-' + uidCounter.toString(36) + '-' + Math.random().toString(36).slice(2, 8);
  }
 
  function round2(n) {
    return Math.round((n + Number.EPSILON) * 100) / 100;
  }
 
  // ── transactions ──────────────────────────────────────────────────────────
 
  function normalizeTransaction(input) {
    var category = String(input.category == null ? '' : input.category).trim();
    var rawAmount = typeof input.amount === 'number' ? input.amount : Number(input.amount);
    var amount;
    if (typeof rawAmount !== 'number' || !isFinite(rawAmount)) {
      amount = NaN;
    } else {
      var mag = round2(Math.abs(rawAmount));
      amount = category === INCOME_CATEGORY ? mag : -mag;
    }
    return {
      date: String(input.date == null ? '' : input.date).trim(),
      description: String(input.description == null ? '' : input.description).trim(),
      category: category,
      amount: amount
    };
  }
 
  function validateTransaction(t) {
    var errors = [];
    if (!/^\d{4}-\d{2}-\d{2}$/.test(t.date)) {
      errors.push('date must be YYYY-MM-DD');
    } else if (isNaN(Date.parse(t.date))) {
      errors.push('date is not a real calendar date');
    }
    if (!t.description) {
      errors.push('description is required');
    }
    if (ALL_CATEGORIES.indexOf(t.category) === -1) {
      errors.push('unknown category "' + t.category + '"');
    }
    if (typeof t.amount !== 'number' || !isFinite(t.amount)) {
      errors.push('amount must be a number');
    } else if (t.amount === 0) {
      errors.push('amount must be non-zero');
    }
    return errors;
  }
 
  function addTransaction(list, input) {
    var t = normalizeTransaction(input);
    var errors = validateTransaction(t);
    if (errors.length) {
      throw new Error(errors.join('; '));
    }
    t.id = typeof input.id === 'string' && input.id ? input.id : uid();
    return list.concat([t]);
  }
 
  function updateTransaction(list, id, patch) {
    var idx = -1;
    for (var i = 0; i < list.length; i++) {
      if (list[i].id === id) { idx = i; break; }
    }
    if (idx === -1) {
      throw new Error('Transaction not found: ' + id);
    }
    var merged = {};
    var existing = list[idx];
    for (var k in existing) { merged[k] = existing[k]; }
    for (var p in patch) { if (p !== 'id') { merged[p] = patch[p]; } }
    var t = normalizeTransaction(merged);
    var errors = validateTransaction(t);
    if (errors.length) {
      throw new Error(errors.join('; '));
    }
    t.id = id;
    var next = list.slice();
    next[idx] = t;
    return next;
  }
 
  function deleteTransaction(list, id) {
    return list.filter(function (t) { return t.id !== id; });
  }
 
  function getTransaction(list, id) {
    for (var i = 0; i < list.length; i++) {
      if (list[i].id === id) { return list[i]; }
    }
    return null;
  }
 
  function sortTransactions(list) {
    // Newest first; equal dates keep insertion order (Array.sort is stable).
    return list.slice().sort(function (a, b) {
      return a.date < b.date ? 1 : a.date > b.date ? -1 : 0;
    });
  }
 
  function filterTransactions(list, opts) {
    opts = opts || {};
    var category = opts.category || 'all';
    var search = String(opts.search || '').trim().toLowerCase();
    var from = opts.from || null; // inclusive ISO date
    var to = opts.to || null;     // inclusive ISO date
    return list.filter(function (t) {
      if (category !== 'all' && t.category !== category) { return false; }
      if (from && t.date < from) { return false; }
      if (to && t.date > to) { return false; }
      if (search) {
        var hay = (t.description + ' ' + t.category).toLowerCase();
        if (hay.indexOf(search) === -1) { return false; }
      }
      return true;
    });
  }
 
  // ── months & aggregation ──────────────────────────────────────────────────
 
  function monthKey(dateStr) {
    return String(dateStr).slice(0, 7);
  }
 
  function monthLabel(key) {
    var y = key.slice(0, 4);
    var m = parseInt(key.slice(5, 7), 10);
    return (MONTH_NAMES[m - 1] || '?') + ' ' + y;
  }
 
  function monthAdd(key, n) {
    var y = parseInt(key.slice(0, 4), 10);
    var m = parseInt(key.slice(5, 7), 10);
    var total = y * 12 + (m - 1) + n;
    var ny = Math.floor(total / 12);
    var nm = (total % 12 + 12) % 12 + 1;
    return String(ny).padStart(4, '0') + '-' + String(nm).padStart(2, '0');
  }
 
  function monthRange(fromKey, toKey) {
    if (!fromKey || !toKey || fromKey > toKey) { return []; }
    var out = [];
    var k = fromKey;
    while (k <= toKey && out.length < 1200) {
      out.push(k);
      k = monthAdd(k, 1);
    }
    return out;
  }
 
  // Spending (expenses only, as positive magnitudes) per month, with gap
  // months filled with 0 so a time chart gets an even series.
  function monthlySeries(list, opts) {
    opts = opts || {};
    var byMonth = {};
    var minK = null;
    var maxK = null;
    list.forEach(function (t) {
      var k = monthKey(t.date);
      if (minK === null || k < minK) { minK = k; }
      if (maxK === null || k > maxK) { maxK = k; }
      if (t.amount < 0) {
        byMonth[k] = (byMonth[k] || 0) + (-t.amount);
      }
    });
    var fromK = opts.fromMonth || minK;
    var toK = opts.toMonth || maxK;
    if (!fromK || !toK) { return []; }
    return monthRange(fromK, toK).map(function (k) {
      return { month: k, total: round2(byMonth[k] || 0) };
    });
  }
 
  function spendingByCategory(list, mKey) {
    var out = {};
    list.forEach(function (t) {
      if (t.amount >= 0) { return; }
      if (mKey && monthKey(t.date) !== mKey) { return; }
      out[t.category] = round2((out[t.category] || 0) + (-t.amount));
    });
    return out;
  }
 
  function totals(list, mKey) {
    var spent = 0;
    var income = 0;
    list.forEach(function (t) {
      if (mKey && monthKey(t.date) !== mKey) { return; }
      if (t.amount > 0) { income += t.amount; } else { spent += -t.amount; }
    });
    return { spent: round2(spent), income: round2(income), net: round2(income - spent) };
  }
 
  // ── budgets ───────────────────────────────────────────────────────────────
 
  // spent == budget is "at the limit" (warning); only past it is "over".
  function budgetStatus(spent, budget) {
    if (!(typeof budget === 'number' && isFinite(budget) && budget > 0)) {
      return { ratio: null, level: 'none' };
    }
    var ratio = spent / budget;
    var level = ratio > 1 ? 'over' : ratio >= 0.8 ? 'warning' : 'ok';
    return { ratio: ratio, level: level };
  }
 
  // ── CSV ───────────────────────────────────────────────────────────────────
 
  // RFC 4180-ish parser: quoted fields, escaped "" quotes, commas and
  // newlines inside quotes, CRLF or LF line endings, trailing newline ignored.
  function parseCSV(text) {
    var rows = [];
    if (typeof text !== 'string' || text === '') { return rows; }
    var row = [];
    var field = '';
    var inQuotes = false;
    var fieldQuoted = false;
    function endField() { row.push(field); field = ''; fieldQuoted = false; }
    function endRow() { endField(); rows.push(row); row = []; }
    for (var i = 0; i < text.length; i++) {
      var ch = text[i];
      if (inQuotes) {
        if (ch === '"') {
          if (text[i + 1] === '"') { field += '"'; i++; } else { inQuotes = false; }
        } else {
          field += ch;
        }
      } else if (ch === '"') {
        inQuotes = true;
        fieldQuoted = true;
      } else if (ch === ',') {
        endField();
      } else if (ch === '\n') {
        endRow();
      } else if (ch === '\r') {
        if (text[i + 1] === '\n') { i++; }
        endRow();
      } else {
        field += ch;
      }
    }
    if (field !== '' || row.length || fieldQuoted) { endRow(); }
    return rows;
  }
 
  function csvEscape(value) {
    var s = String(value == null ? '' : value);
    if (/[",\r\n]/.test(s)) {
      return '"' + s.replace(/"/g, '""') + '"';
    }
    return s;
  }
 
  var CSV_HEADER = ['date', 'description', 'category', 'amount'];
 
  function toCSV(list) {
    var lines = [CSV_HEADER.join(',')];
    list.forEach(function (t) {
      lines.push([
        csvEscape(t.date),
        csvEscape(t.description),
        csvEscape(t.category),
        csvEscape(t.amount.toFixed(2))
      ].join(','));
    });
    return lines.join('\n') + '\n';
  }
 
  // "$1,234.56", "-45", "(45.00)" (accounting negative) → number; NaN if unparseable.
  function parseAmount(s) {
    if (typeof s === 'number') { return s; }
    if (typeof s !== 'string') { return NaN; }
    var t = s.trim();
    if (!t) { return NaN; }
    var neg = false;
    var m = /^\((.*)\)$/.exec(t);
    if (m) { neg = true; t = m[1]; }
    t = t.replace(/[$\s,]/g, '');
    if (t === '' || !/^[-+]?\d*\.?\d+$/.test(t)) { return NaN; }
    var n = Number(t);
    return neg ? -Math.abs(n) : n;
  }
 
  // Import: header row required with at least date + amount columns.
  // Category matching is case-insensitive; unknown categories fall back to
  // 'Other'. If there is no category column, positive amounts become Income
  // and negative amounts become Other. Bad rows are skipped and reported.
  function transactionsFromCSV(text) {
    var rows = parseCSV(text);
    if (!rows.length) {
      return { transactions: [], errors: ['File is empty'] };
    }
    var header = rows[0].map(function (h) { return h.trim().toLowerCase(); });
    function col(names) {
      for (var i = 0; i < names.length; i++) {
        var idx = header.indexOf(names[i]);
        if (idx !== -1) { return idx; }
      }
      return -1;
    }
    var dateIdx = col(['date']);
    var amtIdx = col(['amount']);
    var descIdx = col(['description', 'memo', 'payee', 'name']);
    var catIdx = col(['category']);
    if (dateIdx === -1 || amtIdx === -1) {
      return { transactions: [], errors: ['Missing required column(s): a header row with "date" and "amount" is required'] };
    }
 
    var lowerAll = ALL_CATEGORIES.map(function (c) { return c.toLowerCase(); });
    var transactions = [];
    var errors = [];
    for (var r = 1; r < rows.length; r++) {
      var row = rows[r];
      var allEmpty = row.every(function (f) { return String(f).trim() === ''; });
      if (allEmpty) { continue; }
      var amount = parseAmount(row[amtIdx]);
      var category;
      if (catIdx === -1) {
        category = amount > 0 ? INCOME_CATEGORY : 'Other';
      } else {
        var catRaw = String(row[catIdx] == null ? '' : row[catIdx]).trim().toLowerCase();
        var ci = lowerAll.indexOf(catRaw);
        category = ci === -1 ? 'Other' : ALL_CATEGORIES[ci];
      }
      var t = normalizeTransaction({
        date: row[dateIdx],
        description: descIdx === -1 ? 'Imported transaction' : row[descIdx],
        category: category,
        amount: amount
      });
      var errs = validateTransaction(t);
      if (errs.length) {
        errors.push('Row ' + (r + 1) + ': ' + errs.join('; '));
      } else {
        t.id = uid();
        transactions.push(t);
      }
    }
    return { transactions: transactions, errors: errors };
  }
 
  // ── formatting ────────────────────────────────────────────────────────────
 
  var currencyFmt = null;
  function formatCurrency(n) {
    if (currencyFmt === null) {
      currencyFmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
    }
    return currencyFmt.format(n);
  }
 
  // Axis-tick style: $0, $250, $1K, $1.5K
  function formatCompactCurrency(n) {
    var abs = Math.abs(n);
    var sign = n < 0 ? '-' : '';
    if (abs >= 1000) {
      var k = round2(abs / 1000);
      var s = (k % 1 === 0 ? String(k) : k.toFixed(1)) + 'K';
      return sign + '$' + s;
    }
    return sign + '$' + String(round2(abs));
  }
 
  // ── storage ───────────────────────────────────────────────────────────────
  // `storage` is anything with getItem/setItem (window.localStorage, or a
  // plain fake in tests). Returns null when nothing was ever saved (so the
  // app can seed demo data), [] when saved data is corrupt.
 
  function loadTransactions(storage) {
    var raw;
    try {
      raw = storage.getItem(STORAGE_KEYS.transactions);
    } catch (e) {
      return [];
    }
    if (raw == null) { return null; }
    var parsed;
    try {
      parsed = JSON.parse(raw);
    } catch (e) {
      return [];
    }
    if (!Array.isArray(parsed)) { return []; }
    var out = [];
    parsed.forEach(function (entry) {
      if (!entry || typeof entry !== 'object' || typeof entry.id !== 'string') { return; }
      var t = normalizeTransaction(entry);
      if (validateTransaction(t).length === 0) {
        t.id = entry.id;
        out.push(t);
      }
    });
    return out;
  }
 
  function saveTransactions(storage, list) {
    storage.setItem(STORAGE_KEYS.transactions, JSON.stringify(list));
  }
 
  function loadBudgets(storage) {
    var out = {};
    for (var k in DEFAULT_BUDGETS) { out[k] = DEFAULT_BUDGETS[k]; }
    var raw;
    try {
      raw = storage.getItem(STORAGE_KEYS.budgets);
    } catch (e) {
      return out;
    }
    if (raw == null) { return out; }
    var parsed;
    try {
      parsed = JSON.parse(raw);
    } catch (e) {
      return out;
    }
    if (!parsed || typeof parsed !== 'object') { return out; }
    CATEGORIES.forEach(function (cat) {
      var v = parsed[cat];
      if (typeof v === 'number' && isFinite(v) && v >= 0) { out[cat] = v; }
    });
    return out;
  }
 
  function saveBudgets(storage, budgets) {
    storage.setItem(STORAGE_KEYS.budgets, JSON.stringify(budgets));
  }
 
  // ── demo data ─────────────────────────────────────────────────────────────
 
  function mulberry32(seed) {
    var a = seed >>> 0;
    return function () {
      a = (a + 0x6D2B79F5) >>> 0;
      var t = a;
      t = Math.imul(t ^ (t >>> 15), t | 1);
      t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
    };
  }
 
  // Deterministic sample data for the six months ending at todayIso's month;
  // future-dated entries within the current month are dropped.
  function demoData(todayIso) {
    var rng = mulberry32(42);
    function amt(min, max) { return round2(min + rng() * (max - min)); }
    var curKey = monthKey(todayIso);
    var months = monthRange(monthAdd(curKey, -5), curKey);
    var out = [];
    function pad2(n) { return String(n).padStart(2, '0'); }
    function push(k, day, description, category, amount) {
      var date = k + '-' + pad2(day);
      if (date > todayIso) { return; }
      out.push({
        id: uid(),
        date: date,
        description: description,
        category: category,
        amount: category === INCOME_CATEGORY ? Math.abs(amount) : -Math.abs(amount)
      });
    }
    months.forEach(function (k) {
      push(k, 1, 'Salary', INCOME_CATEGORY, 3800);
      push(k, 1, 'Rent', 'Rent', 1600);
      push(k, 5, 'Electric & internet', 'Utilities', amt(170, 245));
      [3, 9, 16, 23].forEach(function (day) {
        push(k, day, 'Groceries', 'Groceries', amt(70, 140));
      });
      [7, 19].forEach(function (day) {
        push(k, day, 'Transit & fuel', 'Transport', amt(18, 60));
      });
      [6, 13, 26].forEach(function (day) {
        push(k, day, 'Restaurants & coffee', 'Dining', amt(16, 70));
      });
      push(k, 11, 'Streaming & events', 'Entertainment', amt(10, 55));
      if (rng() > 0.5) { push(k, 24, 'Concert tickets', 'Entertainment', amt(20, 60)); }
      if (rng() > 0.35) { push(k, 15, 'Online shopping', 'Shopping', amt(25, 130)); }
      if (rng() > 0.6) { push(k, 20, 'Miscellaneous', 'Other', amt(10, 80)); }
    });
    return out;
  }
 
  return {
    CATEGORIES: CATEGORIES,
    INCOME_CATEGORY: INCOME_CATEGORY,
    ALL_CATEGORIES: ALL_CATEGORIES,
    DEFAULT_BUDGETS: DEFAULT_BUDGETS,
    STORAGE_KEYS: STORAGE_KEYS,
    uid: uid,
    round2: round2,
    normalizeTransaction: normalizeTransaction,
    validateTransaction: validateTransaction,
    addTransaction: addTransaction,
    updateTransaction: updateTransaction,
    deleteTransaction: deleteTransaction,
    getTransaction: getTransaction,
    sortTransactions: sortTransactions,
    filterTransactions: filterTransactions,
    monthKey: monthKey,
    monthLabel: monthLabel,
    monthAdd: monthAdd,
    monthRange: monthRange,
    monthlySeries: monthlySeries,
    spendingByCategory: spendingByCategory,
    totals: totals,
    budgetStatus: budgetStatus,
    parseCSV: parseCSV,
    csvEscape: csvEscape,
    toCSV: toCSV,
    parseAmount: parseAmount,
    transactionsFromCSV: transactionsFromCSV,
    formatCurrency: formatCurrency,
    formatCompactCurrency: formatCompactCurrency,
    loadTransactions: loadTransactions,
    saveTransactions: saveTransactions,
    loadBudgets: loadBudgets,
    saveBudgets: saveBudgets,
    demoData: demoData
  };
});
 
563 linesjs
Now `charts.js` — the canvas line chart with hover/crosshair, plus the node-testable tick m…
Files at this step
drag the rail to scrub
Discussion

1 comment on this trajectory. Recorded by @patrick-toulme.
@patrick-toulme7/28/2026, 5:35:41 AM
Dogfood artifact — this 4-way comparison was recorded, exported, and uploaded entirely through the agentsage pipeline as part of full-coverage testing. Safe to delete.
#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #medium #skills #subagents #testing
r1-claude
← all sessions