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

antigravitygemini · 33 steps · 47s · 7 filessession 80eb4a24-374@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 11 / 33
data.jschange 1/1
/**
 * data.js - Core Data Store & Business Logic for Personal Finance Dashboard
 * Compatible with both Browser global context and Node.js CommonJS/ESM context.
 */
 
(function (exports) {
  'use strict';
 
  // Seed Data: Default Categories with Monthly Budgets
  const DEFAULT_CATEGORIES = [
    { id: 'housing', name: 'Housing & Rent', budget: 1500, icon: '🏠', color: '#6366f1' },
    { id: 'food', name: 'Food & Groceries', budget: 600, icon: '🛒', color: '#10b981' },
    { id: 'transportation', name: 'Transportation', budget: 350, icon: '🚗', color: '#f59e0b' },
    { id: 'utilities', name: 'Utilities & Bills', budget: 250, icon: '⚡', color: '#06b6d4' },
    { id: 'entertainment', name: 'Entertainment & Fun', budget: 200, icon: '🎬', color: '#ec4899' },
    { id: 'shopping', name: 'Shopping', budget: 300, icon: '🛍️', color: '#8b5cf6' },
    { id: 'healthcare', name: 'Healthcare & Fitness', budget: 150, icon: '🏥', color: '#ef4444' },
    { id: 'savings', name: 'Investments & Savings', budget: 500, icon: '💰', color: '#14b8a6' },
    { id: 'income', name: 'Income Source', budget: 0, icon: '💵', color: '#22c55e' }
  ];
 
  // Helper to construct sample dates relative to today
  function getDateOffset(daysAgo) {
    const d = new Date();
    d.setDate(d.getDate() - daysAgo);
    return d.toISOString().split('T')[0];
  }
 
  // Seed Data: Realistic sample transactions over the past 30 days
  const DEFAULT_TRANSACTIONS = [
    { id: 'tx-1', date: getDateOffset(0), category: 'income', type: 'income', amount: 3800.00, description: 'Bi-weekly Salary Deposit', notes: 'Main employer paycheck' },
    { id: 'tx-2', date: getDateOffset(1), category: 'housing', type: 'expense', amount: 1450.00, description: 'Monthly Rent Payment', notes: 'Apartment rent' },
    { id: 'tx-3', date: getDateOffset(2), category: 'food', type: 'expense', amount: 142.50, description: 'Trader Joe\'s Groceries', notes: 'Weekly grocery restock' },
    { id: 'tx-4', date: getDateOffset(4), category: 'utilities', type: 'expense', amount: 98.40, description: 'Electric & Gas Utility', notes: 'City Power & Light' },
    { id: 'tx-5', date: getDateOffset(5), category: 'transportation', type: 'expense', amount: 48.00, description: 'Gas Station Refill', notes: 'Fuel' },
    { id: 'tx-6', date: getDateOffset(7), category: 'entertainment', type: 'expense', amount: 24.99, description: 'Netflix & Spotify Subscriptions', notes: 'Monthly streaming' },
    { id: 'tx-7', date: getDateOffset(9), category: 'food', type: 'expense', amount: 64.20, description: 'Dining out at Bistro', notes: 'Dinner with friends' },
    { id: 'tx-8', date: getDateOffset(11), category: 'shopping', type: 'expense', amount: 129.99, description: 'Running Shoes', notes: 'New footwear' },
    { id: 'tx-9', date: getDateOffset(14), category: 'income', type: 'income', amount: 450.00, description: 'Freelance Design Consulting', notes: 'Side project' },
    { id: 'tx-10', date: getDateOffset(15), category: 'healthcare', type: 'expense', amount: 45.00, description: 'Pharmacy & Vitamins', notes: 'Health supplies' },
    { id: 'tx-11', date: getDateOffset(18), category: 'food', type: 'expense', amount: 185.30, description: 'Whole Foods Market', notes: 'Groceries' },
    { id: 'tx-12', date: getDateOffset(20), category: 'savings', type: 'expense', amount: 500.00, description: 'Index Fund Contribution', notes: 'Monthly investment' },
    { id: 'tx-13', date: getDateOffset(22), category: 'transportation', type: 'expense', amount: 35.00, description: 'Subway Pass Refill', notes: 'Transit card' },
    { id: 'tx-14', date: getDateOffset(25), category: 'entertainment', type: 'expense', amount: 75.00, description: 'Concert Tickets', notes: 'Live event' },
    { id: 'tx-15', date: getDateOffset(28), category: 'income', type: 'income', amount: 3800.00, description: 'Bi-weekly Salary Deposit', notes: 'Main employer paycheck' }
  ];
 
  /**
   * Validate a transaction object.
   */
  function validateTransaction(tx) {
    const errors = [];
    if (!tx.date || isNaN(Date.parse(tx.date))) {
      errors.push('A valid date is required.');
    }
    if (!tx.description || typeof tx.description !== 'string' || tx.description.trim() === '') {
      errors.push('Description is required.');
    }
    const amt = parseFloat(tx.amount);
    if (isNaN(amt) || amt <= 0) {
      errors.push('Amount must be a positive number.');
    }
    if (!tx.type || (tx.type !== 'income' && tx.type !== 'expense')) {
      errors.push('Type must be either "income" or "expense".');
    }
    if (!tx.category || typeof tx.category !== 'string') {
      errors.push('Category is required.');
    }
    return {
      valid: errors.length === 0,
      errors
    };
  }
 
  /**
   * Calculate summary metrics: total balance, total income, total expenses, net savings, savings rate.
   */
  function calculateSummary(transactions) {
    let totalIncome = 0;
    let totalExpenses = 0;
 
    (transactions || []).forEach(tx => {
      const amt = parseFloat(tx.amount) || 0;
      if (tx.type === 'income') {
        totalIncome += amt;
      } else if (tx.type === 'expense') {
        totalExpenses += amt;
      }
    });
 
    const netSavings = totalIncome - totalExpenses;
    const savingsRate = totalIncome > 0 ? (netSavings / totalIncome) * 100 : 0;
 
    return {
      totalIncome: Math.round(totalIncome * 100) / 100,
      totalExpenses: Math.round(totalExpenses * 100) / 100,
      netSavings: Math.round(netSavings * 100) / 100,
      savingsRate: Math.round(savingsRate * 10) / 10
    };
  }
 
  /**
   * Calculate budget breakdown per category for expenses.
   */
  function calculateCategorySpending(transactions, categories = DEFAULT_CATEGORIES) {
    const spendingMap = {};
    (categories || []).forEach(cat => {
      spendingMap[cat.id] = 0;
    });
 
    (transactions || []).forEach(tx => {
      if (tx.type === 'expense') {
        const catId = tx.category;
        const amt = parseFloat(tx.amount) || 0;
        spendingMap[catId] = (spendingMap[catId] || 0) + amt;
      }
    });
 
    return (categories || [])
      .filter(cat => cat.id !== 'income')
      .map(cat => {
        const spent = Math.round((spendingMap[cat.id] || 0) * 100) / 100;
        const budget = cat.budget || 0;
        const remaining = Math.round((budget - spent) * 100) / 100;
        const percentage = budget > 0 ? Math.min(Math.round((spent / budget) * 100), 200) : (spent > 0 ? 100 : 0);
        let status = 'good'; // good, warning, danger
        if (percentage >= 100) status = 'danger';
        else if (percentage >= 80) status = 'warning';
 
        return {
          id: cat.id,
          name: cat.name,
          icon: cat.icon,
          color: cat.color,
          budget,
          spent,
          remaining,
          percentage,
          status
        };
      });
  }
 
  /**
   * Group transactions by date for the spending-over-time chart.
   * Returns daily sorted array of { date, label, income, expense, net, cumulative }
   */
  function calculateDailySpendingTrends(transactions, daysLimit = 30) {
    const map = {};
 
    // Get date range
    const sorted = [...(transactions || [])].sort((a, b) => new Date(a.date) - new Date(b.date));
    
    if (sorted.length === 0) {
      return [];
    }
 
    // Determine min and max dates
    let startDate = new Date(sorted[0].date);
    let endDate = new Date(sorted[sorted.length - 1].date);
    
    // Ensure at least 7 days span
    const diffDays = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
    if (diffDays < 7) {
      startDate = new Date(endDate);
      startDate.setDate(startDate.getDate() - 7);
    }
 
    // Initialize all dates in range
    const curr = new Date(startDate);
    while (curr <= endDate) {
      const dateStr = curr.toISOString().split('T')[0];
      map[dateStr] = { date: dateStr, income: 0, expense: 0 };
      curr.setDate(curr.getDate() + 1);
    }
 
    // Populate data
    (transactions || []).forEach(tx => {
      if (map[tx.date]) {
        const amt = parseFloat(tx.amount) || 0;
        if (tx.type === 'income') {
          map[tx.date].income += amt;
        } else {
          map[tx.date].expense += amt;
        }
      }
    });
 
    const dates = Object.keys(map).sort();
    let cumulative = 0;
 
    return dates.map(d => {
      const inc = Math.round(map[d].income * 100) / 100;
      const exp = Math.round(map[d].expense * 100) / 100;
      const net = inc - exp;
      cumulative += net;
 
      // Format date label (e.g. "Jul 28")
      const dateObj = new Date(d + 'T00:00:00');
      const label = dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
 
      return {
        date: d,
        label,
        income: inc,
        expense: exp,
        net: Math.round(net * 100) / 100,
        cumulative: Math.round(cumulative * 100) / 100
      };
    });
  }
 
  /**
   * Filter transactions by search query, category, date range, and type.
   */
  function filterTransactions(transactions, filters = {}) {
    const { search, category, startDate, endDate, type } = filters;
    const query = search ? search.trim().toLowerCase() : '';
 
    return (transactions || []).filter(tx => {
      // Search text match (description, notes, category)
      if (query) {
        const descMatch = (tx.description || '').toLowerCase().includes(query);
        const notesMatch = (tx.notes || '').toLowerCase().includes(query);
        const catMatch = (tx.category || '').toLowerCase().includes(query);
        const amtMatch = (tx.amount || '').toString().includes(query);
        if (!descMatch && !notesMatch && !catMatch && !amtMatch) {
          return false;
        }
      }
 
      // Category filter
      if (category && category !== 'all') {
        if (tx.category !== category) {
          return false;
        }
      }
 
      // Type filter
      if (type && type !== 'all') {
        if (tx.type !== type) {
          return false;
        }
      }
 
      // Date range filter
      if (startDate && tx.date < startDate) {
        return false;
      }
      if (endDate && tx.date > endDate) {
        return false;
      }
 
      return true;
    });
  }
 
  /**
   * Sort transactions by field and direction.
   */
  function sortTransactions(transactions, sortBy = 'date', sortOrder = 'desc') {
    const copy = [...(transactions || [])];
    const modifier = sortOrder === 'asc' ? 1 : -1;
 
    return copy.sort((a, b) => {
      if (sortBy === 'date') {
        return modifier * (new Date(a.date) - new Date(b.date));
      }
      if (sortBy === 'amount') {
        return modifier * (parseFloat(a.amount) - parseFloat(b.amount));
      }
      if (sortBy === 'description') {
        return modifier * a.description.localeCompare(b.description);
      }
      if (sortBy === 'category') {
        return modifier * a.category.localeCompare(b.category);
      }
      return 0;
    });
  }
 
  /**
   * Add a new transaction.
   */
  function addTransaction(transactions, newTx) {
    const validation = validateTransaction(newTx);
    if (!validation.valid) {
      throw new Error('Invalid transaction: ' + validation.errors.join(', '));
    }
 
    const txToAdd = {
      id: newTx.id || 'tx-' + Date.now() + '-' + Math.random().toString(36).substring(2, 7),
      date: newTx.date,
      description: newTx.description.trim(),
      amount: parseFloat(newTx.amount),
      type: newTx.type,
      category: newTx.category,
      notes: (newTx.notes || '').trim()
    };
 
    return [txToAdd, ...(transactions || [])];
  }
 
  /**
   * Update an existing transaction by ID.
   */
  function updateTransaction(transactions, id, updatedTx) {
    const validation = validateTransaction(updatedTx);
    if (!validation.valid) {
      throw new Error('Invalid transaction: ' + validation.errors.join(', '));
    }
 
    return (transactions || []).map(tx => {
      if (tx.id === id) {
        return {
          ...tx,
          date: updatedTx.date,
          description: updatedTx.description.trim(),
          amount: parseFloat(updatedTx.amount),
          type: updatedTx.type,
          category: updatedTx.category,
          notes: (updatedTx.notes || '').trim()
        };
      }
      return tx;
    });
  }
 
  /**
   * Delete a transaction by ID.
   */
  function deleteTransaction(transactions, id) {
    return (transactions || []).filter(tx => tx.id !== id);
  }
 
  /**
   * Generate CSV string from transactions array.
   */
  function generateCSV(transactions) {
    const headers = ['id', 'date', 'type', 'category', 'amount', 'description', 'notes'];
    const rows = (transactions || []).map(tx => {
      return [
        tx.id || '',
        tx.date || '',
        tx.type || '',
        tx.category || '',
        tx.amount || 0,
        `"${(tx.description || '').replace(/"/g, '""')}"`,
        `"${(tx.notes || '').replace(/"/g, '""')}"`
      ].join(',');
    });
 
    return [headers.join(','), ...rows].join('\n');
  }
 
  /**
   * Parse CSV string into transactions array.
   */
  function parseCSV(csvContent) {
    if (!csvContent || typeof csvContent !== 'string') {
      return { success: false, transactions: [], errors: ['Empty CSV content'] };
    }
 
    const lines = csvContent.split(/\r?\n/).filter(line => line.trim() !== '');
    if (lines.length === 0) {
      return { success: false, transactions: [], errors: ['No content in CSV'] };
    }
 
    // Helper to split CSV line handling quotes
    function parseCSVLine(text) {
      const result = [];
      let cur = '';
      let inQuotes = false;
 
      for (let i = 0; i < text.length; i++) {
        const char = text[i];
        if (char === '"') {
          if (inQuotes && text[i + 1] === '"') {
            cur += '"';
            i++;
          } else {
            inQuotes = !inQuotes;
          }
        } else if (char === ',' && !inQuotes) {
          result.push(cur);
          cur = '';
        } else {
          cur += char;
        }
      }
      result.push(cur);
      return result;
    }
 
    const headerLine = parseCSVLine(lines[0]).map(h => h.trim().toLowerCase());
    
    // Map headers to field indexes
    const dateIdx = headerLine.indexOf('date');
    const typeIdx = headerLine.indexOf('type');
    const catIdx = headerLine.indexOf('category');
    const amtIdx = headerLine.indexOf('amount');
    const descIdx = headerLine.indexOf('description');
    const notesIdx = headerLine.indexOf('notes');
 
    if (dateIdx === -1 || amtIdx === -1 || descIdx === -1) {
      return {
        success: false,
        transactions: [],
        errors: ['CSV must contain headers: "date", "amount", and "description"']
      };
    }
 
    const imported = [];
    const errors = [];
 
    for (let i = 1; i < lines.length; i++) {
      const cols = parseCSVLine(lines[i]);
      if (cols.length === 0 || (cols.length === 1 && cols[0].trim() === '')) continue;
 
      const rawDate = cols[dateIdx] ? cols[dateIdx].trim() : '';
      const rawAmt = cols[amtIdx] ? cols[amtIdx].trim().replace(/[\$,]/g, '') : '0';
      const rawDesc = cols[descIdx] ? cols[descIdx].trim() : 'Imported item';
      let rawType = typeIdx !== -1 && cols[typeIdx] ? cols[typeIdx].trim().toLowerCase() : '';
      let rawCat = catIdx !== -1 && cols[catIdx] ? cols[catIdx].trim().toLowerCase() : '';
      const rawNotes = notesIdx !== -1 && cols[notesIdx] ? cols[notesIdx].trim() : '';
 
      const amt = parseFloat(rawAmt);
 
      // Deduce type if missing
      if (!rawType) {
        rawType = amt < 0 ? 'expense' : (rawCat === 'income' ? 'income' : 'expense');
      }
 
      // Deduce category if missing
      if (!rawCat) {
        rawCat = rawType === 'income' ? 'income' : 'food';
      }
 
      const tx = {
        id: 'tx-import-' + i + '-' + Date.now(),
        date: rawDate,
        amount: Math.abs(amt),
        type: rawType === 'income' ? 'income' : 'expense',
        category: rawCat,
        description: rawDesc,
        notes: rawNotes
      };
 
      const val = validateTransaction(tx);
      if (val.valid) {
        imported.push(tx);
      } else {
        errors.push(`Row ${i + 1}: ${val.errors.join(' ')}`);
      }
    }
 
    return {
      success: imported.length > 0,
      transactions: imported,
      errors
    };
  }
 
  // Export functions to exports object (Node module.exports or window.FinanceData)
  exports.DEFAULT_CATEGORIES = DEFAULT_CATEGORIES;
  exports.DEFAULT_TRANSACTIONS = DEFAULT_TRANSACTIONS;
  exports.validateTransaction = validateTransaction;
  exports.calculateSummary = calculateSummary;
  exports.calculateCategorySpending = calculateCategorySpending;
  exports.calculateDailySpendingTrends = calculateDailySpendingTrends;
  exports.filterTransactions = filterTransactions;
  exports.sortTransactions = sortTransactions;
  exports.addTransaction = addTransaction;
  exports.updateTransaction = updateTransaction;
  exports.deleteTransaction = deleteTransaction;
  exports.generateCSV = generateCSV;
  exports.parseCSV = parseCSV;
 
})(typeof exports !== 'undefined' ? exports : (window.FinanceData = {}));
 
480 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
r5-agy
← all sessions