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

pigpt-5.5 · 22 steps · 2m 52s · 6 filessession 0fc0b110-d05@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 08 / 22

data.jschange 1/1

/* Personal finance dashboard core data + storage logic. Browser global: FinanceData, Node: module.exports */
(function (root, factory) {
  const api = factory();
  if (typeof module === 'object' && module.exports) module.exports = api;
  root.FinanceData = api;
})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
  const STORAGE_KEY = 'finance-dashboard-transactions-v1';
  const BUDGET_KEY = 'finance-dashboard-budgets-v1';
 
  const defaultCategories = ['Housing', 'Food', 'Transport', 'Utilities', 'Health', 'Entertainment', 'Shopping', 'Income', 'Other'];
  const defaultBudgets = { Housing: 1800, Food: 650, Transport: 350, Utilities: 300, Health: 250, Entertainment: 250, Shopping: 300, Other: 200 };
 
  const sampleTransactions = [
    { id: 't1', date: '2026-07-01', description: 'Paycheck', category: 'Income', amount: 4200 },
    { id: 't2', date: '2026-07-02', description: 'Rent', category: 'Housing', amount: -1650 },
    { id: 't3', date: '2026-07-04', description: 'Groceries', category: 'Food', amount: -126.45 },
    { id: 't4', date: '2026-07-07', description: 'Metro card', category: 'Transport', amount: -48 },
    { id: 't5', date: '2026-07-12', description: 'Movie night', category: 'Entertainment', amount: -38 },
    { id: 't6', date: '2026-07-15', description: 'Freelance', category: 'Income', amount: 850 },
    { id: 't7', date: '2026-07-18', description: 'Pharmacy', category: 'Health', amount: -22.8 },
    { id: 't8', date: '2026-07-21', description: 'Electric bill', category: 'Utilities', amount: -95.2 },
    { id: 't9', date: '2026-06-03', description: 'Groceries', category: 'Food', amount: -112.1 },
    { id: 't10', date: '2026-06-14', description: 'Paycheck', category: 'Income', amount: 4200 }
  ];
 
  function uid() {
    return 't-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
  }
 
  function clone(value) { return JSON.parse(JSON.stringify(value)); }
 
  function parseAmount(value) {
    if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
    const cleaned = String(value || '').replace(/[$,\s]/g, '');
    const n = Number(cleaned);
    return Number.isFinite(n) ? n : 0;
  }
 
  function normalizeTransaction(input) {
    const tx = {
      id: input.id || uid(),
      date: input.date || new Date().toISOString().slice(0, 10),
      description: String(input.description || '').trim() || 'Untitled',
      category: String(input.category || 'Other').trim() || 'Other',
      amount: Math.round(parseAmount(input.amount) * 100) / 100
    };
    if (!/^\d{4}-\d{2}-\d{2}$/.test(tx.date)) throw new Error('Date must be YYYY-MM-DD');
    return tx;
  }
 
  function sortTransactions(transactions) {
    return clone(transactions).sort((a, b) => (b.date + b.id).localeCompare(a.date + a.id));
  }
 
  function addTransaction(transactions, input) {
    return sortTransactions([normalizeTransaction(input), ...transactions]);
  }
 
  function updateTransaction(transactions, id, patch) {
    let found = false;
    const updated = transactions.map(tx => {
      if (tx.id !== id) return tx;
      found = true;
      return normalizeTransaction({ ...tx, ...patch, id });
    });
    if (!found) throw new Error('Transaction not found');
    return sortTransactions(updated);
  }
 
  function deleteTransaction(transactions, id) {
    return transactions.filter(tx => tx.id !== id);
  }
 
  function filterTransactions(transactions, filters) {
    const category = filters && filters.category;
    const month = filters && filters.month;
    const q = (filters && filters.query || '').toLowerCase();
    return transactions.filter(tx => {
      const categoryOk = !category || category === 'All' || tx.category === category;
      const monthOk = !month || tx.date.slice(0, 7) === month;
      const queryOk = !q || tx.description.toLowerCase().includes(q) || tx.category.toLowerCase().includes(q);
      return categoryOk && monthOk && queryOk;
    });
  }
 
  function summarize(transactions) {
    const income = transactions.filter(t => t.amount > 0).reduce((s, t) => s + t.amount, 0);
    const expense = transactions.filter(t => t.amount < 0).reduce((s, t) => s + Math.abs(t.amount), 0);
    return { income, expense, balance: income - expense, count: transactions.length };
  }
 
  function categorySpend(transactions, month) {
    return transactions.reduce((acc, tx) => {
      if (tx.amount >= 0) return acc;
      if (month && tx.date.slice(0, 7) !== month) return acc;
      acc[tx.category] = (acc[tx.category] || 0) + Math.abs(tx.amount);
      return acc;
    }, {});
  }
 
  function spendingOverTime(transactions) {
    const byDay = {};
    transactions.forEach(tx => {
      if (tx.amount < 0) byDay[tx.date] = (byDay[tx.date] || 0) + Math.abs(tx.amount);
    });
    return Object.keys(byDay).sort().map(date => ({ date, amount: Math.round(byDay[date] * 100) / 100 }));
  }
 
  function escapeCsv(value) {
    const s = String(value == null ? '' : value);
    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
  }
 
  function toCSV(transactions) {
    const rows = [['id', 'date', 'description', 'category', 'amount'], ...sortTransactions(transactions).map(t => [t.id, t.date, t.description, t.category, t.amount])];
    return rows.map(row => row.map(escapeCsv).join(',')).join('\n');
  }
 
  function parseCsvLine(line) {
    const out = [];
    let cur = '', quoted = false;
    for (let i = 0; i < line.length; i++) {
      const ch = line[i];
      if (quoted && ch === '"' && line[i + 1] === '"') { cur += '"'; i++; }
      else if (ch === '"') quoted = !quoted;
      else if (!quoted && ch === ',') { out.push(cur); cur = ''; }
      else cur += ch;
    }
    out.push(cur);
    return out;
  }
 
  function fromCSV(csv) {
    const lines = String(csv || '').split(/\r?\n/).filter(Boolean);
    if (!lines.length) return [];
    const headers = parseCsvLine(lines[0]).map(h => h.trim().toLowerCase());
    return lines.slice(1).map(line => {
      const cols = parseCsvLine(line);
      const obj = {};
      headers.forEach((h, i) => { obj[h] = cols[i]; });
      return normalizeTransaction(obj);
    });
  }
 
  function loadTransactions(storage) {
    try {
      const raw = storage && storage.getItem(STORAGE_KEY);
      return raw ? JSON.parse(raw).map(normalizeTransaction) : clone(sampleTransactions);
    } catch (_) { return clone(sampleTransactions); }
  }
 
  function saveTransactions(storage, transactions) {
    if (storage) storage.setItem(STORAGE_KEY, JSON.stringify(sortTransactions(transactions)));
  }
 
  function loadBudgets(storage) {
    try {
      const raw = storage && storage.getItem(BUDGET_KEY);
      return raw ? { ...defaultBudgets, ...JSON.parse(raw) } : clone(defaultBudgets);
    } catch (_) { return clone(defaultBudgets); }
  }
 
  function saveBudgets(storage, budgets) {
    if (storage) storage.setItem(BUDGET_KEY, JSON.stringify(budgets));
  }
 
  return { STORAGE_KEY, BUDGET_KEY, defaultCategories, defaultBudgets, sampleTransactions, normalizeTransaction, addTransaction, updateTransaction, deleteTransaction, filterTransactions, summarize, categorySpend, spendingOverTime, toCSV, fromCSV, loadTransactions, saveTransactions, loadBudgets, saveBudgets };
});
 

169 linesjs

Writes charts.js

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.

#css #gpt #gpt-5.5 #graphics #html #javascript #pi #quick #testing #ui

r4-pi

← all sessions