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

antigravitygemini · 28 steps · 48s · 7 filessession e9822963-894@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 08 / 28
data.jschange 1/1
/**
 * Personal Finance Dashboard - Data Manager & Core Logic
 */
 
(function (root, factory) {
  if (typeof exports === 'object' && typeof module !== 'undefined') {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
  } else {
    root.FinanceData = factory();
  }
})(typeof self !== 'undefined' ? self : this, function () {
  'use strict';
 
  const STORAGE_KEY_TX = 'pf_dashboard_transactions_v1';
  const STORAGE_KEY_BUDGETS = 'pf_dashboard_budgets_v1';
 
  const DEFAULT_CATEGORIES = [
    'Housing',
    'Food & Dining',
    'Transportation',
    'Utilities',
    'Entertainment',
    'Shopping',
    'Healthcare',
    'Income',
    'Investment',
    'Other'
  ];
 
  const DEFAULT_BUDGETS = {
    'Housing': 1500,
    'Food & Dining': 600,
    'Transportation': 300,
    'Utilities': 250,
    'Entertainment': 200,
    'Shopping': 400,
    'Healthcare': 150,
    'Other': 200
  };
 
  // Helper to generate realistic dates relative to current date
  function getPastDate(daysAgo) {
    const d = new Date();
    d.setDate(d.getDate() - daysAgo);
    return d.toISOString().split('T')[0];
  }
 
  const SAMPLE_TRANSACTIONS = [
    { id: 'tx-1', date: getPastDate(0), description: 'Tech Corp Paycheck', amount: 3500.00, category: 'Income', type: 'income', notes: 'Bi-weekly salary' },
    { id: 'tx-2', date: getPastDate(1), description: 'Trader Joe Groceries', amount: 142.50, category: 'Food & Dining', type: 'expense', notes: 'Weekly groceries' },
    { id: 'tx-3', date: getPastDate(2), description: 'Apartment Rent', amount: 1400.00, category: 'Housing', type: 'expense', notes: 'Monthly rent' },
    { id: 'tx-4', date: getPastDate(3), description: 'Electric & Gas Utility', amount: 115.20, category: 'Utilities', type: 'expense', notes: 'Power bill' },
    { id: 'tx-5', date: getPastDate(4), description: 'Subway & Bus Fare', amount: 32.00, category: 'Transportation', type: 'expense', notes: 'Transit pass' },
    { id: 'tx-6', date: getPastDate(5), description: 'Cinema & Snacks', amount: 45.00, category: 'Entertainment', type: 'expense', notes: 'Movie night' },
    { id: 'tx-7', date: getPastDate(7), description: 'Online Retail Purchase', amount: 89.99, category: 'Shopping', type: 'expense', notes: 'New headphones' },
    { id: 'tx-8', date: getPastDate(9), description: 'Pharmacy Prescription', amount: 28.40, category: 'Healthcare', type: 'expense', notes: 'Meds' },
    { id: 'tx-9', date: getPastDate(11), description: 'Coffee Shop', amount: 18.75, category: 'Food & Dining', type: 'expense', notes: 'Meeting drinks' },
    { id: 'tx-10', date: getPastDate(14), description: 'Freelance Design Work', amount: 850.00, category: 'Income', type: 'income', notes: 'Side project client' },
    { id: 'tx-11', date: getPastDate(16), description: 'Whole Foods Market', amount: 178.30, category: 'Food & Dining', type: 'expense', notes: 'Organic groceries' },
    { id: 'tx-12', date: getPastDate(18), description: 'Gas Station Refill', amount: 54.10, category: 'Transportation', type: 'expense', notes: 'Car fuel' },
    { id: 'tx-13', date: getPastDate(20), description: 'Internet Service Provider', amount: 79.99, category: 'Utilities', type: 'expense', notes: 'Fiber internet' },
    { id: 'tx-14', date: getPastDate(22), description: 'Dining at Italian Bistro', amount: 125.00, category: 'Food & Dining', type: 'expense', notes: 'Dinner with friends' },
    { id: 'tx-15', date: getPastDate(25), description: 'Clothing Store', amount: 165.50, category: 'Shopping', type: 'expense', notes: 'Work wardrobe' },
    { id: 'tx-16', date: getPastDate(28), description: 'Stock Dividend', amount: 120.00, category: 'Investment', type: 'income', notes: 'Index fund dividend' }
  ];
 
  class FinanceDataService {
    constructor() {
      this._hasLocalStorage = typeof localStorage !== 'undefined';
    }
 
    // --- Storage Operations ---
 
    loadTransactions() {
      if (!this._hasLocalStorage) return [...SAMPLE_TRANSACTIONS];
      try {
        const json = localStorage.getItem(STORAGE_KEY_TX);
        if (!json) {
          this.saveTransactions(SAMPLE_TRANSACTIONS);
          return [...SAMPLE_TRANSACTIONS];
        }
        const data = JSON.parse(json);
        return Array.isArray(data) ? data : [...SAMPLE_TRANSACTIONS];
      } catch (e) {
        console.error('Error loading transactions from localStorage:', e);
        return [...SAMPLE_TRANSACTIONS];
      }
    }
 
    saveTransactions(transactions) {
      if (!this._hasLocalStorage) return;
      try {
        localStorage.setItem(STORAGE_KEY_TX, JSON.stringify(transactions));
      } catch (e) {
        console.error('Error saving transactions to localStorage:', e);
      }
    }
 
    loadBudgets() {
      if (!this._hasLocalStorage) return { ...DEFAULT_BUDGETS };
      try {
        const json = localStorage.getItem(STORAGE_KEY_BUDGETS);
        if (!json) {
          this.saveBudgets(DEFAULT_BUDGETS);
          return { ...DEFAULT_BUDGETS };
        }
        const data = JSON.parse(json);
        return typeof data === 'object' && data !== null ? data : { ...DEFAULT_BUDGETS };
      } catch (e) {
        console.error('Error loading budgets from localStorage:', e);
        return { ...DEFAULT_BUDGETS };
      }
    }
 
    saveBudgets(budgets) {
      if (!this._hasLocalStorage) return;
      try {
        localStorage.setItem(STORAGE_KEY_BUDGETS, JSON.stringify(budgets));
      } catch (e) {
        console.error('Error saving budgets to localStorage:', e);
      }
    }
 
    resetToSampleData() {
      if (this._hasLocalStorage) {
        localStorage.removeItem(STORAGE_KEY_TX);
        localStorage.removeItem(STORAGE_KEY_BUDGETS);
      }
      this.saveTransactions(SAMPLE_TRANSACTIONS);
      this.saveBudgets(DEFAULT_BUDGETS);
      return { transactions: [...SAMPLE_TRANSACTIONS], budgets: { ...DEFAULT_BUDGETS } };
    }
 
    // --- Transaction CRUD Logic ---
 
    generateId() {
      return 'tx-' + Date.now().toString(36) + '-' + Math.random().toString(36).substring(2, 7);
    }
 
    validateTransaction(tx) {
      const errors = [];
      if (!tx.date || isNaN(Date.parse(tx.date))) {
        errors.push('Valid date is required (YYYY-MM-DD)');
      }
      if (!tx.description || typeof tx.description !== 'string' || tx.description.trim().length === 0) {
        errors.push('Description is required');
      }
      const numAmount = parseFloat(tx.amount);
      if (isNaN(numAmount) || numAmount <= 0) {
        errors.push('Amount must be a positive number');
      }
      if (!tx.category || typeof tx.category !== 'string') {
        errors.push('Category is required');
      }
      if (tx.type !== 'income' && tx.type !== 'expense') {
        errors.push('Type must be either "income" or "expense"');
      }
      return {
        isValid: errors.length === 0,
        errors,
        sanitized: errors.length === 0 ? {
          id: tx.id || this.generateId(),
          date: tx.date,
          description: tx.description.trim(),
          amount: parseFloat(numAmount.toFixed(2)),
          category: tx.category.trim(),
          type: tx.type,
          notes: (tx.notes || '').trim()
        } : null
      };
    }
 
    addTransaction(transactions, newTx) {
      const validation = this.validateTransaction(newTx);
      if (!validation.isValid) {
        throw new Error(validation.errors.join('; '));
      }
      const updated = [validation.sanitized, ...transactions];
      this.saveTransactions(updated);
      return updated;
    }
 
    updateTransaction(transactions, id, updatedFields) {
      const index = transactions.findIndex(t => t.id === id);
      if (index === -1) {
        throw new Error(`Transaction with id "${id}" not found`);
      }
      const merged = { ...transactions[index], ...updatedFields, id };
      const validation = this.validateTransaction(merged);
      if (!validation.isValid) {
        throw new Error(validation.errors.join('; '));
      }
      const updated = [...transactions];
      updated[index] = validation.sanitized;
      this.saveTransactions(updated);
      return updated;
    }
 
    deleteTransaction(transactions, id) {
      const updated = transactions.filter(t => t.id !== id);
      this.saveTransactions(updated);
      return updated;
    }
 
    // --- Analytics & Summary Calculations ---
 
    calculateSummary(transactions) {
      let totalIncome = 0;
      let totalExpense = 0;
 
      (transactions || []).forEach(tx => {
        const amt = parseFloat(tx.amount) || 0;
        if (tx.type === 'income') {
          totalIncome += amt;
        } else if (tx.type === 'expense') {
          totalExpense += amt;
        }
      });
 
      const netBalance = totalIncome - totalExpense;
      const savingsRate = totalIncome > 0 ? ((netBalance / totalIncome) * 100) : 0;
 
      return {
        totalIncome: parseFloat(totalIncome.toFixed(2)),
        totalExpense: parseFloat(totalExpense.toFixed(2)),
        netBalance: parseFloat(netBalance.toFixed(2)),
        savingsRate: parseFloat(Math.max(0, savingsRate).toFixed(1))
      };
    }
 
    calculateCategorySpending(transactions, monthFilter = null) {
      const spending = {};
      DEFAULT_CATEGORIES.forEach(cat => {
        spending[cat] = 0;
      });
 
      (transactions || []).forEach(tx => {
        if (tx.type !== 'expense') return;
        if (monthFilter) {
          const txMonth = tx.date.substring(0, 7); // 'YYYY-MM'
          if (txMonth !== monthFilter) return;
        }
        const cat = tx.category || 'Other';
        spending[cat] = (spending[cat] || 0) + (parseFloat(tx.amount) || 0);
      });
 
      // Format amounts to 2 decimal places
      Object.keys(spending).forEach(cat => {
        spending[cat] = parseFloat(spending[cat].toFixed(2));
      });
 
      return spending;
    }
 
    calculateSpendingOverTime(transactions, groupMode = 'daily') {
      if (!transactions || transactions.length === 0) {
        return { labels: [], incomeValues: [], expenseValues: [] };
      }
 
      // Sort by date ascending
      const sorted = [...transactions].sort((a, b) => a.date.localeCompare(b.date));
 
      const timeMap = {};
 
      sorted.forEach(tx => {
        let key = tx.date; // default YYYY-MM-DD
        if (groupMode === 'monthly') {
          key = tx.date.substring(0, 7); // YYYY-MM
        }
        if (!timeMap[key]) {
          timeMap[key] = { income: 0, expense: 0 };
        }
        const amt = parseFloat(tx.amount) || 0;
        if (tx.type === 'income') {
          timeMap[key].income += amt;
        } else {
          timeMap[key].expense += amt;
        }
      });
 
      const keys = Object.keys(timeMap).sort();
      const labels = keys;
      const incomeValues = keys.map(k => parseFloat(timeMap[k].income.toFixed(2)));
      const expenseValues = keys.map(k => parseFloat(timeMap[k].expense.toFixed(2)));
 
      return { labels, incomeValues, expenseValues };
    }
 
    filterTransactions(transactions, filters = {}) {
      const { category, search, startDate, endDate, type } = filters;
      let result = [...(transactions || [])];
 
      if (category && category !== 'All') {
        result = result.filter(t => t.category === category);
      }
 
      if (type && type !== 'All') {
        result = result.filter(t => t.type === type.toLowerCase());
      }
 
      if (startDate) {
        result = result.filter(t => t.date >= startDate);
      }
 
      if (endDate) {
        result = result.filter(t => t.date <= endDate);
      }
 
      if (search && search.trim() !== '') {
        const q = search.trim().toLowerCase();
        result = result.filter(t => 
          (t.description && t.description.toLowerCase().includes(q)) ||
          (t.notes && t.notes.toLowerCase().includes(q)) ||
          (t.category && t.category.toLowerCase().includes(q)) ||
          (t.amount && t.amount.toString().includes(q))
        );
      }
 
      return result;
    }
 
    // --- CSV Import / Export Helpers ---
 
    exportToCSV(transactions) {
      const headers = ['ID', 'Date', 'Description', 'Amount', 'Category', 'Type', 'Notes'];
      const rows = (transactions || []).map(t => [
        t.id || '',
        t.date || '',
        `"${(t.description || '').replace(/"/g, '""')}"`,
        t.amount !== undefined ? t.amount : 0,
        `"${(t.category || '').replace(/"/g, '""')}"`,
        t.type || 'expense',
        `"${(t.notes || '').replace(/"/g, '""')}"`
      ]);
 
      return [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
    }
 
    parseCSV(csvText) {
      if (!csvText || typeof csvText !== 'string') {
        throw new Error('CSV content must be a non-empty string');
      }
 
      const lines = csvText.split(/\r?\n/).filter(line => line.trim() !== '');
      if (lines.length === 0) {
        throw new Error('CSV file is empty');
      }
 
      // Helper to parse CSV line respecting quotes
      const parseCSVLine = (line) => {
        const result = [];
        let current = '';
        let inQuotes = false;
        for (let i = 0; i < line.length; i++) {
          const char = line[i];
          if (char === '"') {
            if (inQuotes && line[i + 1] === '"') {
              current += '"';
              i++;
            } else {
              inQuotes = !inQuotes;
            }
          } else if (char === ',' && !inQuotes) {
            result.push(current.trim());
            current = '';
          } else {
            current += char;
          }
        }
        result.push(current.trim());
        return result;
      };
 
      const headerLine = parseCSVLine(lines[0]).map(h => h.toLowerCase());
      const dateIdx = headerLine.findIndex(h => h.includes('date'));
      const descIdx = headerLine.findIndex(h => h.includes('desc') || h.includes('title') || h.includes('name'));
      const amtIdx = headerLine.findIndex(h => h.includes('amount') || h.includes('price') || h.includes('val'));
      const catIdx = headerLine.findIndex(h => h.includes('category') || h.includes('cat'));
      const typeIdx = headerLine.findIndex(h => h.includes('type'));
      const notesIdx = headerLine.findIndex(h => h.includes('note') || h.includes('memo'));
 
      const parsedTransactions = [];
      const errors = [];
 
      for (let i = 1; i < lines.length; i++) {
        const row = parseCSVLine(lines[i]);
        if (row.length < 2) continue; // skip blank or malformed lines
 
        const rawDate = dateIdx !== -1 ? row[dateIdx] : getPastDate(0);
        const rawDesc = descIdx !== -1 ? row[descIdx] : 'Imported Transaction';
        let rawAmtStr = amtIdx !== -1 ? row[amtIdx] : '0';
        rawAmtStr = rawAmtStr.replace(/[\$\,\s]/g, '');
        const rawAmt = parseFloat(rawAmtStr);
 
        let rawCat = catIdx !== -1 && row[catIdx] ? row[catIdx] : 'Other';
        let rawType = typeIdx !== -1 && row[typeIdx] ? row[typeIdx].toLowerCase() : null;
 
        if (!rawType) {
          if (!isNaN(rawAmt) && rawAmt < 0) {
            rawType = 'expense';
          } else if (rawCat.toLowerCase().includes('income') || rawCat.toLowerCase().includes('salary')) {
            rawType = 'income';
          } else {
            rawType = 'expense';
          }
        }
 
        const absAmt = Math.abs(isNaN(rawAmt) ? 0 : rawAmt);
 
        const txCandidate = {
          id: this.generateId(),
          date: rawDate,
          description: rawDesc,
          amount: absAmt,
          category: rawCat,
          type: rawType === 'income' ? 'income' : 'expense',
          notes: notesIdx !== -1 ? row[notesIdx] : 'CSV Import'
        };
 
        const validation = this.validateTransaction(txCandidate);
        if (validation.isValid) {
          parsedTransactions.push(validation.sanitized);
        } else {
          errors.push(`Line ${i + 1}: ${validation.errors.join(', ')}`);
        }
      }
 
      return {
        transactions: parsedTransactions,
        errors
      };
    }
 
    // --- Utilities ---
 
    formatCurrency(amount, currencySymbol = '$') {
      const val = typeof amount === 'number' ? amount : parseFloat(amount) || 0;
      const formatted = Math.abs(val).toLocaleString('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
      return (val < 0 ? '-' : '') + currencySymbol + formatted;
    }
 
    formatDate(dateStr) {
      if (!dateStr) return '';
      const parts = dateStr.split('-');
      if (parts.length !== 3) return dateStr;
      const d = new Date(parts[0], parts[1] - 1, parts[2]);
      return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
    }
  }
 
  const service = new FinanceDataService();
  return {
    FinanceDataService,
    service,
    DEFAULT_CATEGORIES,
    DEFAULT_BUDGETS,
    SAMPLE_TRANSACTIONS
  };
});
 
465 linesjs
Writes …/charts.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#antigravity #css #gemini #graphics #html #javascript #quick
i2-r5-agy
← all sessions