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 76 / 113
app.jschange 1/1
/* app.js — UI wiring for Ledgerlight. All domain logic lives in data.js;
 * all canvas drawing lives in charts.js. */
(function () {
  'use strict';
 
  var FD = window.FinanceData;
  var FC = window.FinanceCharts;
  var $ = function (sel) { return document.querySelector(sel); };
 
  var state = {
    transactions: [],
    budgets: {},
    filters: { category: 'all', range: '6m', search: '' },
    editingId: null
  };
 
  function todayIso() {
    var d = new Date();
    var pad = function (n) { return String(n).padStart(2, '0'); };
    return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
  }
 
  function currentMonthKey() {
    return FD.monthKey(todayIso());
  }
 
  function catDotClass(category) {
    var i = FD.CATEGORIES.indexOf(category);
    return i === -1 ? 'cat-income' : 'cat-' + i;
  }
 
  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
  }
 
  function save() {
    FD.saveTransactions(localStorage, state.transactions);
  }
 
  // ── filters ───────────────────────────────────────────────────────────────
 
  var RANGE_MONTHS = { month: 1, '3m': 3, '6m': 6, '12m': 12 };
 
  function rangeFromDate() {
    var n = RANGE_MONTHS[state.filters.range];
    if (!n) { return null; } // 'all'
    return FD.monthAdd(currentMonthKey(), -(n - 1)) + '-01';
  }
 
  function chartBounds() {
    var n = RANGE_MONTHS[state.filters.range];
    if (!n) { return {}; } // 'all' — let the data define its own span
    return {
      fromMonth: FD.monthAdd(currentMonthKey(), -(n - 1)),
      toMonth: currentMonthKey()
    };
  }
 
  function visibleTransactions() {
    return FD.filterTransactions(state.transactions, {
      category: state.filters.category,
      search: state.filters.search,
      from: rangeFromDate()
    });
  }
 
  // ── rendering ─────────────────────────────────────────────────────────────
 
  function renderAll() {
    renderStats();
    renderChart();
    renderBudgets();
    renderTable();
  }
 
  function renderStats() {
    var curKey = currentMonthKey();
    var prevKey = FD.monthAdd(curKey, -1);
    var cur = FD.totals(state.transactions, curKey);
    var prev = FD.totals(state.transactions, prevKey);
 
    $('#hero-value').textContent = FD.formatCurrency(cur.spent);
    var deltaEl = $('#hero-delta');
    if (cur.spent === 0 && prev.spent === 0) {
      deltaEl.textContent = '';
    } else {
      var diff = FD.round2(cur.spent - prev.spent);
      var span = document.createElement('span');
      if (diff === 0) {
        span.textContent = 'level with ' + FD.monthLabel(prevKey);
      } else {
        // Spending going up is the bad direction.
        span.className = diff > 0 ? 'delta-bad' : 'delta-good';
        span.textContent = (diff > 0 ? '▲ ' : '▼ ') + FD.formatCurrency(Math.abs(diff));
      }
      deltaEl.textContent = '';
      deltaEl.appendChild(span);
      if (diff !== 0) {
        deltaEl.appendChild(document.createTextNode(' vs ' + FD.monthLabel(prevKey)));
      }
    }
 
    $('#income-value').textContent = FD.formatCurrency(cur.income);
    var netEl = $('#net-value');
    netEl.textContent = (cur.net > 0 ? '+' : '') + FD.formatCurrency(cur.net);
    netEl.classList.toggle('net-negative', cur.net < 0);
  }
 
  var RANGE_LABELS = {
    month: 'this month', '3m': 'last 3 months', '6m': 'last 6 months',
    '12m': 'last 12 months', all: 'all time'
  };
 
  function chartColors() {
    var css = getComputedStyle(document.documentElement);
    var get = function (name) { return css.getPropertyValue(name).trim(); };
    return {
      line: get('--series-1'),
      surface: get('--surface-1'),
      grid: get('--grid'),
      axis: get('--axis'),
      text: get('--text-primary'),
      muted: get('--text-muted')
    };
  }
 
  function renderChart() {
    var list = visibleTransactions();
    var series = FD.monthlySeries(list, chartBounds());
    var canvas = $('#spend-chart');
 
    var catLabel = state.filters.category === 'all' ? 'All categories' : state.filters.category;
    $('#chart-subtitle').textContent = catLabel + ' · ' + RANGE_LABELS[state.filters.range];
 
    FC.drawSpendingChart(canvas, series, {
      colors: chartColors(),
      formatValue: FD.formatCurrency,
      formatTick: FD.formatCompactCurrency
    });
    FC.attachHover(canvas, $('#chart-tooltip'), {
      label: FD.monthLabel,
      value: FD.formatCurrency
    });
 
    if (series.length) {
      var total = FD.round2(series.reduce(function (s, p) { return s + p.total; }, 0));
      canvas.setAttribute('aria-label',
        'Line chart of monthly spending, ' + FD.monthLabel(series[0].month) + ' to ' +
        FD.monthLabel(series[series.length - 1].month) + ', ' + catLabel + ', total ' +
        FD.formatCurrency(total) + '. Details are in the transactions table.');
    } else {
      canvas.setAttribute('aria-label', 'Line chart of monthly spending: no transactions in this range.');
    }
  }
 
  function renderBudgets() {
    var curKey = currentMonthKey();
    $('#budget-month').textContent = FD.monthLabel(curKey);
    var spending = FD.spendingByCategory(state.transactions, curKey);
    var listEl = $('#budget-list');
    listEl.textContent = '';
 
    FD.CATEGORIES.forEach(function (cat, i) {
      var spent = spending[cat] || 0;
      var budget = state.budgets[cat];
      var st = FD.budgetStatus(spent, budget);
      var pct = st.ratio === null ? 0 : Math.round(st.ratio * 100);
      var level = st.level === 'none' ? 'ok' : st.level;
 
      var row = document.createElement('div');
      row.className = 'budget-row';
 
      var note;
      var noteIcon = '';
      if (st.level === 'over') {
        noteIcon = '<span class="status-ic level-over" aria-hidden="true">⚠</span>';
        note = 'Over by ' + FD.formatCurrency(FD.round2(spent - budget)) + ' · ' + pct + '% of budget';
      } else if (st.level === 'warning') {
        noteIcon = '<span class="status-ic level-warning" aria-hidden="true">●</span>';
        note = 'Nearing limit · ' + pct + '% used';
      } else if (st.level === 'none') {
        note = 'No budget set';
      } else {
        note = pct + '% used';
      }
 
      row.innerHTML =
        '<div class="budget-top">' +
          '<span class="budget-name"><span class="cat-dot cat-' + i + '"></span>' + escapeHtml(cat) + '</span>' +
          '<span class="budget-nums">' + FD.formatCurrency(spent) + ' <span>of</span> $' +
            '<input class="budget-input" type="number" min="0" step="10" value="' + (budget || 0) + '"' +
            ' data-cat="' + escapeHtml(cat) + '" aria-label="Monthly budget for ' + escapeHtml(cat) + '">' +
          '</span>' +
        '</div>' +
        '<div class="budget-track level-' + level + '" role="progressbar" aria-valuemin="0" aria-valuemax="100"' +
          ' aria-valuenow="' + Math.min(pct, 100) + '" aria-label="' + escapeHtml(cat) + ' budget used">' +
          '<div class="budget-fill" style="width:' + Math.min(pct, 100) + '%"></div>' +
        '</div>' +
        '<div class="budget-note">' + noteIcon + '<span>' + escapeHtml(note) + '</span></div>';
 
      listEl.appendChild(row);
    });
  }
 
  function renderTable() {
    var visible = FD.sortTransactions(visibleTransactions());
    var tbody = $('#txn-tbody');
 
    $('#txn-count').textContent = visible.length === state.transactions.length
      ? visible.length + ' transaction' + (visible.length === 1 ? '' : 's')
      : visible.length + ' shown · ' + state.transactions.length + ' total';
 
    if (!visible.length) {
      tbody.innerHTML = '<tr class="empty"><td colspan="5">No transactions match. Add one above or press <kbd>i</kbd> to import a CSV.</td></tr>';
      return;
    }
 
    tbody.innerHTML = visible.map(function (t) {
      var income = t.amount > 0;
      return '<tr data-id="' + escapeHtml(t.id) + '"' + (t.id === state.editingId ? ' class="editing"' : '') + '>' +
        '<td class="td-date">' + escapeHtml(t.date) + '</td>' +
        '<td>' + escapeHtml(t.description) + '</td>' +
        '<td class="td-category"><span class="cat-dot ' + catDotClass(t.category) + '"></span>' + escapeHtml(t.category) + '</td>' +
        '<td class="td-amount' + (income ? ' income' : '') + '">' + (income ? '+' : '') + FD.formatCurrency(t.amount) + '</td>' +
        '<td class="td-actions">' +
          '<button type="button" class="btn btn-sm" data-action="edit">Edit</button> ' +
          '<button type="button" class="btn btn-sm btn-danger" data-action="delete">Delete</button>' +
        '</td>' +
      '</tr>';
    }).join('');
  }
 
  // ── form: add / edit ──────────────────────────────────────────────────────
 
  function resetForm() {
    state.editingId = null;
    $('#f-date').value = todayIso();
    $('#f-desc').value = '';
    $('#f-category').value = FD.CATEGORIES[0];
    $('#f-amount').value = '';
    $('#f-submit').textContent = 'Add';
    $('#f-cancel').hidden = true;
    $('#form-error').textContent = '';
  }
 
  function startEdit(id) {
    var t = FD.getTransaction(state.transactions, id);
    if (!t) { return; }
    state.editingId = id;
    $('#f-date').value = t.date;
    $('#f-desc').value = t.description;
    $('#f-category').value = t.category;
    $('#f-amount').value = Math.abs(t.amount).toFixed(2);
    $('#f-submit').textContent = 'Save changes';
    $('#f-cancel').hidden = false;
    $('#form-error').textContent = '';
    renderTable();
    $('#txn-form').scrollIntoView({ block: 'center', behavior: 'smooth' });
    $('#f-desc').focus();
  }
 
  function cancelEdit() {
    resetForm();
    renderTable();
  }
 
  function submitForm(e) {
    e.preventDefault();
    var input = {
      date: $('#f-date').value,
      description: $('#f-desc').value,
      category: $('#f-category').value,
      amount: parseFloat($('#f-amount').value)
    };
    try {
      if (state.editingId) {
        state.transactions = FD.updateTransaction(state.transactions, state.editingId, input);
      } else {
        state.transactions = FD.addTransaction(state.transactions, input);
      }
    } catch (err) {
      $('#form-error').textContent = err.message;
      return;
    }
    save();
    resetForm();
    renderAll();
    $('#f-desc').focus();
  }
 
  // ── CSV import / export ───────────────────────────────────────────────────
 
  function exportCSV() {
    var csv = FD.toCSV(FD.sortTransactions(state.transactions));
    var blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'transactions-' + todayIso() + '.csv';
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
    setStatus('Exported ' + state.transactions.length + ' transactions.');
  }
 
  function setStatus(msg) {
    $('#import-status').textContent = msg;
  }
 
  function importCSVText(text) {
    var result = FD.transactionsFromCSV(text);
    if (result.transactions.length) {
      state.transactions = state.transactions.concat(result.transactions);
      save();
      renderAll();
    }
    var msg = result.transactions.length
      ? 'Imported ' + result.transactions.length + ' transaction' + (result.transactions.length === 1 ? '' : 's') + '.'
      : 'Nothing imported.';
    if (result.errors.length) {
      msg += ' Skipped ' + result.errors.length + ' row' + (result.errors.length === 1 ? '' : 's') +
        ' — ' + result.errors.slice(0, 3).join(' · ') + (result.errors.length > 3 ? ' · …' : '');
    }
    setStatus(msg);
  }
 
  // ── theme ─────────────────────────────────────────────────────────────────
 
  function applyThemeButton() {
    var dark = document.documentElement.getAttribute('data-theme') !== 'light';
    var btn = $('#theme-btn');
    btn.textContent = dark ? 'Light mode' : 'Dark mode';
    btn.setAttribute('aria-label', dark ? 'Switch to light theme' : 'Switch to dark theme');
  }
 
  function toggleTheme() {
    var next = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', next);
    try { localStorage.setItem(FD.STORAGE_KEYS.theme, next); } catch (e) { /* ignore */ }
    applyThemeButton();
    renderChart(); // canvas colors come from the CSS tokens
  }
 
  // ── keyboard shortcuts ────────────────────────────────────────────────────
 
  function onKeydown(e) {
    var helpDialog = $('#help-dialog');
    if (e.key === 'Escape') {
      if (!helpDialog.open && state.editingId) { cancelEdit(); }
      return; // open dialogs close themselves on Escape
    }
    var el = e.target;
    var typing = el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' ||
      el.tagName === 'SELECT' || el.isContentEditable);
    if (typing || e.metaKey || e.ctrlKey || e.altKey) { return; }
 
    switch (e.key) {
      case 'n':
        e.preventDefault();
        resetForm();
        $('#f-desc').focus();
        break;
      case '/':
        e.preventDefault();
        $('#filter-search').focus();
        break;
      case 'e':
        e.preventDefault();
        exportCSV();
        break;
      case 'i':
        e.preventDefault();
        $('#import-file').click();
        break;
      case 't':
        e.preventDefault();
        toggleTheme();
        break;
      case '?':
        e.preventDefault();
        if (helpDialog.open) { helpDialog.close(); } else { helpDialog.showModal(); }
        break;
    }
  }
 
  // ── init ──────────────────────────────────────────────────────────────────
 
  function populateSelects() {
    var filterSel = $('#filter-category');
    filterSel.innerHTML = '<option value="all">All categories</option>' +
      FD.ALL_CATEGORIES.map(function (c) {
        return '<option value="' + escapeHtml(c) + '">' + escapeHtml(c) + '</option>';
      }).join('');
    $('#f-category').innerHTML = FD.CATEGORIES.concat([FD.INCOME_CATEGORY]).map(function (c) {
      return '<option value="' + escapeHtml(c) + '">' + escapeHtml(c) + '</option>';
    }).join('');
  }
 
  function bindEvents() {
    $('#txn-form').addEventListener('submit', submitForm);
    $('#f-cancel').addEventListener('click', cancelEdit);
 
    $('#txn-tbody').addEventListener('click', function (e) {
      var btn = e.target.closest('button[data-action]');
      if (!btn) { return; }
      var id = btn.closest('tr').getAttribute('data-id');
      if (btn.getAttribute('data-action') === 'edit') {
        startEdit(id);
      } else {
        var t = FD.getTransaction(state.transactions, id);
        if (t && confirm('Delete "' + t.description + '" (' + FD.formatCurrency(t.amount) + ')?')) {
          state.transactions = FD.deleteTransaction(state.transactions, id);
          if (state.editingId === id) { resetForm(); }
          save();
          renderAll();
        }
      }
    });
 
    $('#filter-category').addEventListener('change', function (e) {
      state.filters.category = e.target.value;
      renderAll();
    });
    $('#filter-range').addEventListener('change', function (e) {
      state.filters.range = e.target.value;
      renderAll();
    });
    $('#filter-search').addEventListener('input', function (e) {
      state.filters.search = e.target.value;
      renderChart();
      renderTable();
    });
    $('#clear-filters').addEventListener('click', function () {
      state.filters = { category: 'all', range: '6m', search: '' };
      $('#filter-category').value = 'all';
      $('#filter-range').value = '6m';
      $('#filter-search').value = '';
      renderAll();
    });
 
    $('#export-btn').addEventListener('click', exportCSV);
    $('#import-btn').addEventListener('click', function () { $('#import-file').click(); });
    $('#import-file').addEventListener('change', function (e) {
      var file = e.target.files && e.target.files[0];
      if (!file) { return; }
      var reader = new FileReader();
      reader.onload = function () { importCSVText(String(reader.result)); };
      reader.onerror = function () { setStatus('Could not read that file.'); };
      reader.readAsText(file);
      e.target.value = '';
    });
 
    $('#theme-btn').addEventListener('click', toggleTheme);
    $('#help-btn').addEventListener('click', function () { $('#help-dialog').showModal(); });
 
    $('#budget-list').addEventListener('change', function (e) {
      var input = e.target.closest('.budget-input');
      if (!input) { return; }
      var v = parseFloat(input.value);
      state.budgets[input.getAttribute('data-cat')] = isFinite(v) && v >= 0 ? FD.round2(v) : 0;
      FD.saveBudgets(localStorage, state.budgets);
      renderBudgets();
    });
 
    document.addEventListener('keydown', onKeydown);
 
    var resizeTimer = null;
    window.addEventListener('resize', function () {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(renderChart, 150);
    });
  }
 
  function init() {
    var stored = FD.loadTransactions(localStorage);
    if (stored === null) {
      state.transactions = FD.demoData(todayIso());
      save();
      setStatus('Loaded demo data to explore — edit or delete anything, it’s all yours.');
    } else {
      state.transactions = stored;
    }
    state.budgets = FD.loadBudgets(localStorage);
 
    populateSelects();
    bindEvents();
    resetForm();
    applyThemeButton();
    renderAll();
  }
 
  init();
})();
 
497 linesjs
Writes …/app.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: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