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 22 / 33
app.jschange 1/1
/**
 * app.js - Main UI Controller & Application State Manager
 */
 
(function () {
  'use strict';
 
  // Application State
  const STORAGE_KEY_TX = 'finance_app_transactions';
  const STORAGE_KEY_THEME = 'finance_app_theme';
 
  let transactions = [];
  let categories = window.FinanceData.DEFAULT_CATEGORIES;
  
  let currentFilters = {
    search: '',
    category: 'all',
    type: 'all',
    startDate: '',
    endDate: ''
  };
 
  let currentSort = {
    sortBy: 'date',
    sortOrder: 'desc'
  };
 
  let editingTransactionId = null;
  let hoveredChartIndex = -1;
 
  // DOM Elements
  const elements = {};
 
  function initElements() {
    elements.themeToggleBtn = document.getElementById('theme-toggle-btn');
    elements.addTxBtn = document.getElementById('add-tx-btn');
    elements.importCsvBtn = document.getElementById('import-csv-btn');
    elements.exportCsvBtn = document.getElementById('export-csv-btn');
    elements.shortcutsBtn = document.getElementById('shortcuts-btn');
    elements.csvFileInput = document.getElementById('csv-file-input');
 
    // Summary Cards
    elements.netWorthVal = document.getElementById('net-worth-val');
    elements.incomeVal = document.getElementById('income-val');
    elements.expensesVal = document.getElementById('expenses-val');
    elements.savingsVal = document.getElementById('savings-val');
    elements.savingsRateVal = document.getElementById('savings-rate-val');
 
    // Table & Filters
    elements.searchInput = document.getElementById('search-input');
    elements.categoryFilter = document.getElementById('category-filter');
    elements.typeFilter = document.getElementById('type-filter');
    elements.txTbody = document.getElementById('tx-tbody');
    elements.txCount = document.getElementById('tx-count');
 
    // Budget Progress List
    elements.budgetList = document.getElementById('budget-list');
 
    // Canvas Charts
    elements.spendingCanvas = document.getElementById('spending-canvas');
 
    // Transaction Modal
    elements.txModal = document.getElementById('tx-modal');
    elements.txModalTitle = document.getElementById('tx-modal-title');
    elements.txForm = document.getElementById('tx-form');
    elements.txIdInput = document.getElementById('tx-id');
    elements.txTypeInput = document.getElementById('tx-type');
    elements.txDateInput = document.getElementById('tx-date');
    elements.txAmountInput = document.getElementById('tx-amount');
    elements.txCategoryInput = document.getElementById('tx-category');
    elements.txDescInput = document.getElementById('tx-desc');
    elements.txNotesInput = document.getElementById('tx-notes');
    elements.modalCloseBtn = document.getElementById('modal-close-btn');
    elements.modalCancelBtn = document.getElementById('modal-cancel-btn');
 
    // Shortcuts Modal
    elements.shortcutsModal = document.getElementById('shortcuts-modal');
    elements.shortcutsCloseBtn = document.getElementById('shortcuts-close-btn');
 
    // Toast Container
    elements.toastContainer = document.getElementById('toast-container');
  }
 
  // Load Transactions from localStorage or Seed Data
  function loadInitialData() {
    try {
      const stored = localStorage.getItem(STORAGE_KEY_TX);
      if (stored) {
        transactions = JSON.parse(stored);
      } else {
        transactions = [...window.FinanceData.DEFAULT_TRANSACTIONS];
        saveData();
      }
    } catch (e) {
      console.warn('Failed to load from localStorage, using defaults', e);
      transactions = [...window.FinanceData.DEFAULT_TRANSACTIONS];
    }
  }
 
  // Save Transactions to localStorage
  function saveData() {
    try {
      localStorage.setItem(STORAGE_KEY_TX, JSON.stringify(transactions));
    } catch (e) {
      console.error('Failed to save to localStorage', e);
    }
  }
 
  // Theme Management
  function initTheme() {
    const savedTheme = localStorage.getItem(STORAGE_KEY_THEME) || 'dark';
    setTheme(savedTheme);
  }
 
  function setTheme(theme) {
    if (theme === 'dark') {
      document.documentElement.setAttribute('data-theme', 'dark');
      if (elements.themeToggleBtn) elements.themeToggleBtn.innerHTML = '☀️';
    } else {
      document.documentElement.removeAttribute('data-theme');
      if (elements.themeToggleBtn) elements.themeToggleBtn.innerHTML = '🌙';
    }
    localStorage.setItem(STORAGE_KEY_THEME, theme);
    renderCharts();
  }
 
  function toggleTheme() {
    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
    setTheme(isDark ? 'light' : 'dark');
    showToast(`Switched to ${isDark ? 'light' : 'dark'} theme`, 'info');
  }
 
  // Toast Notification
  function showToast(message, type = 'info') {
    if (!elements.toastContainer) return;
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.innerHTML = `
      <span>${type === 'success' ? '✓' : type === 'error' ? '⚠️' : 'ℹ️'}</span>
      <span>${message}</span>
    `;
    elements.toastContainer.appendChild(toast);
 
    setTimeout(() => toast.classList.add('show'), 10);
    setTimeout(() => {
      toast.classList.remove('show');
      setTimeout(() => toast.remove(), 300);
    }, 3000);
  }
 
  // Populate Filter Dropdowns
  function populateCategories() {
    if (!elements.categoryFilter || !elements.txCategoryInput) return;
 
    elements.categoryFilter.innerHTML = '<option value="all">All Categories</option>';
    elements.txCategoryInput.innerHTML = '';
 
    categories.forEach(cat => {
      // Add to table filter dropdown
      const opt = document.createElement('option');
      opt.value = cat.id;
      opt.textContent = `${cat.icon} ${cat.name}`;
      elements.categoryFilter.appendChild(opt);
 
      // Add to modal form category dropdown
      const formOpt = document.createElement('option');
      formOpt.value = cat.id;
      formOpt.textContent = `${cat.icon} ${cat.name}`;
      elements.txCategoryInput.appendChild(formOpt);
    });
  }
 
  // Render Summary Cards
  function renderSummary() {
    const summary = window.FinanceData.calculateSummary(transactions);
 
    if (elements.netWorthVal) {
      const net = summary.netSavings;
      elements.netWorthVal.textContent = (net >= 0 ? '$' : '-$') + Math.abs(net).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      elements.netWorthVal.style.color = net >= 0 ? 'var(--text-primary)' : 'var(--expense-color)';
    }
 
    if (elements.incomeVal) {
      elements.incomeVal.textContent = '$' + summary.totalIncome.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
 
    if (elements.expensesVal) {
      elements.expensesVal.textContent = '$' + summary.totalExpenses.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
 
    if (elements.savingsVal) {
      elements.savingsVal.textContent = '$' + summary.netSavings.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
 
    if (elements.savingsRateVal) {
      elements.savingsRateVal.textContent = `${summary.savingsRate}% rate`;
    }
  }
 
  // Render Monthly Budget Bars
  function renderBudgets() {
    if (!elements.budgetList) return;
 
    const categorySpending = window.FinanceData.calculateCategorySpending(transactions, categories);
    elements.budgetList.innerHTML = '';
 
    categorySpending.forEach(cat => {
      if (cat.budget <= 0) return; // Skip categories without a budget cap
 
      const item = document.createElement('div');
      item.className = 'budget-item';
 
      const fillClass = cat.status === 'danger' ? 'fill-danger' : cat.status === 'warning' ? 'fill-warning' : 'fill-good';
 
      item.innerHTML = `
        <div class="budget-info">
          <span class="budget-label">
            <span>${cat.icon}</span>
            <span>${cat.name}</span>
          </span>
          <span class="budget-values">
            $${cat.spent.toLocaleString()} / $${cat.budget.toLocaleString()} (${cat.percentage}%)
          </span>
        </div>
        <div class="progress-track">
          <div class="progress-fill ${fillClass}" style="width: ${Math.min(cat.percentage, 100)}%;"></div>
        </div>
      `;
 
      elements.budgetList.appendChild(item);
    });
  }
 
  // Render Canvas Charts
  function renderCharts() {
    if (!elements.spendingCanvas || !window.FinanceCharts) return;
 
    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
    const trendData = window.FinanceData.calculateDailySpendingTrends(transactions, 30);
 
    window.FinanceCharts.renderSpendingChart(elements.spendingCanvas, trendData, {
      isDark,
      hoveredIndex: hoveredChartIndex
    });
  }
 
  // Canvas Hover Listener
  function initChartInteractions() {
    if (!elements.spendingCanvas) return;
 
    elements.spendingCanvas.addEventListener('mousemove', (e) => {
      const rect = elements.spendingCanvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const width = rect.width;
      const paddingLeft = 55;
      const paddingRight = 20;
      const plotWidth = width - paddingLeft - paddingRight;
 
      const trendData = window.FinanceData.calculateDailySpendingTrends(transactions, 30);
      if (trendData.length === 0) return;
 
      if (x >= paddingLeft && x <= width - paddingRight) {
        const ratio = (x - paddingLeft) / plotWidth;
        const idx = Math.round(ratio * (trendData.length - 1));
        if (idx !== hoveredChartIndex && idx >= 0 && idx < trendData.length) {
          hoveredChartIndex = idx;
          renderCharts();
        }
      } else if (hoveredChartIndex !== -1) {
        hoveredChartIndex = -1;
        renderCharts();
      }
    });
 
    elements.spendingCanvas.addEventListener('mouseleave', () => {
      if (hoveredChartIndex !== -1) {
        hoveredChartIndex = -1;
        renderCharts();
      }
    });
  }
 
  // Render Transactions Table
  function renderTransactions() {
    if (!elements.txTbody) return;
 
    const filtered = window.FinanceData.filterTransactions(transactions, currentFilters);
    const sorted = window.FinanceData.sortTransactions(filtered, currentSort.sortBy, currentSort.sortOrder);
 
    if (elements.txCount) {
      elements.txCount.textContent = `Showing ${sorted.length} of ${transactions.length} transactions`;
    }
 
    if (sorted.length === 0) {
      elements.txTbody.innerHTML = `
        <tr>
          <td colspan="6">
            <div class="empty-state">
              <div>🔍</div>
              <p>No transactions found matching your criteria</p>
            </div>
          </td>
        </tr>
      `;
      return;
    }
 
    elements.txTbody.innerHTML = '';
 
    sorted.forEach(tx => {
      const tr = document.createElement('tr');
      const catObj = categories.find(c => c.id === tx.category) || { name: tx.category, icon: '🏷️' };
      const isIncome = tx.type === 'income';
 
      tr.innerHTML = `
        <td>${tx.date}</td>
        <td>
          <span class="badge ${isIncome ? 'badge-income' : 'badge-expense'}">
            ${isIncome ? '📈 Income' : '📉 Expense'}
          </span>
        </td>
        <td>
          <span>${catObj.icon} ${catObj.name}</span>
        </td>
        <td>
          <strong>${escapeHtml(tx.description)}</strong>
          ${tx.notes ? `<div style="font-size:11px; color:var(--text-muted);">${escapeHtml(tx.notes)}</div>` : ''}
        </td>
        <td class="${isIncome ? 'amount-income' : 'amount-expense'}">
          ${isIncome ? '+' : '-'}$${parseFloat(tx.amount).toFixed(2)}
        </td>
        <td>
          <div class="table-actions">
            <button class="btn btn-secondary btn-xs edit-btn" data-id="${tx.id}">Edit</button>
            <button class="btn btn-danger btn-xs delete-btn" data-id="${tx.id}">Delete</button>
          </div>
        </td>
      `;
 
      elements.txTbody.appendChild(tr);
    });
 
    // Attach Event Listeners to Edit/Delete Buttons
    elements.txTbody.querySelectorAll('.edit-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const id = e.currentTarget.getAttribute('data-id');
        openTxModal(id);
      });
    });
 
    elements.txTbody.querySelectorAll('.delete-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const id = e.currentTarget.getAttribute('data-id');
        handleDeleteTx(id);
      });
    });
  }
 
  function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }
 
  // Handle Add/Edit Modal
  function openTxModal(txId = null) {
    editingTransactionId = txId;
 
    if (txId) {
      // Editing existing transaction
      const tx = transactions.find(t => t.id === txId);
      if (!tx) return;
 
      elements.txModalTitle.textContent = 'Edit Transaction';
      elements.txIdInput.value = tx.id;
      elements.txTypeInput.value = tx.type;
      elements.txDateInput.value = tx.date;
      elements.txAmountInput.value = tx.amount;
      elements.txCategoryInput.value = tx.category;
      elements.txDescInput.value = tx.description;
      elements.txNotesInput.value = tx.notes || '';
    } else {
      // Adding new transaction
      elements.txModalTitle.textContent = 'Add New Transaction';
      elements.txForm.reset();
      elements.txIdInput.value = '';
      elements.txDateInput.value = new Date().toISOString().split('T')[0];
      elements.txTypeInput.value = 'expense';
      elements.txCategoryInput.value = 'food';
    }
 
    elements.txModal.classList.add('active');
    setTimeout(() => elements.txDescInput.focus(), 100);
  }
 
  function closeTxModal() {
    elements.txModal.classList.remove('active');
    editingTransactionId = null;
  }
 
  function handleFormSubmit(e) {
    e.preventDefault();
 
    const txData = {
      id: elements.txIdInput.value || null,
      date: elements.txDateInput.value,
      type: elements.txTypeInput.value,
      amount: parseFloat(elements.txAmountInput.value),
      category: elements.txCategoryInput.value,
      description: elements.txDescInput.value,
      notes: elements.txNotesInput.value
    };
 
    try {
      if (editingTransactionId) {
        transactions = window.FinanceData.updateTransaction(transactions, editingTransactionId, txData);
        showToast('Transaction updated successfully', 'success');
      } else {
        transactions = window.FinanceData.addTransaction(transactions, txData);
        showToast('Transaction added successfully', 'success');
      }
 
      saveData();
      refreshAll();
      closeTxModal();
    } catch (err) {
      showToast(err.message, 'error');
    }
  }
 
  function handleDeleteTx(id) {
    const tx = transactions.find(t => t.id === id);
    if (!tx) return;
 
    if (confirm(`Are you sure you want to delete "${tx.description}"?`)) {
      transactions = window.FinanceData.deleteTransaction(transactions, id);
      saveData();
      refreshAll();
      showToast('Transaction deleted', 'info');
    }
  }
 
  // Handle CSV Export
  function handleCsvExport() {
    const csvContent = window.FinanceData.generateCSV(transactions);
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', `finance_export_${new Date().toISOString().split('T')[0]}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    showToast('CSV export downloaded', 'success');
  }
 
  // Handle CSV Import
  function handleCsvImport(e) {
    const file = e.target.files[0];
    if (!file) return;
 
    const reader = new FileReader();
    reader.onload = function (evt) {
      const text = evt.target.result;
      const parsed = window.FinanceData.parseCSV(text);
 
      if (!parsed.success) {
        showToast('CSV Import failed: ' + parsed.errors.join('; '), 'error');
        return;
      }
 
      const replaceAll = confirm(`Found ${parsed.transactions.length} valid transactions in CSV.\n\nClick 'OK' to REPLACE current transactions, or 'Cancel' to MERGE them.`);
      
      if (replaceAll) {
        transactions = parsed.transactions;
      } else {
        transactions = [...parsed.transactions, ...transactions];
      }
 
      saveData();
      refreshAll();
      showToast(`Imported ${parsed.transactions.length} transactions successfully!`, 'success');
      e.target.value = ''; // reset file input
    };
    reader.readAsText(file);
  }
 
  // Shortcuts Modal
  function openShortcutsModal() {
    elements.shortcutsModal.classList.add('active');
  }
 
  function closeShortcutsModal() {
    elements.shortcutsModal.classList.remove('active');
  }
 
  // Global Keyboard Shortcuts
  function initKeyboardShortcuts() {
    document.addEventListener('keydown', (e) => {
      // Don't trigger when user is typing in an input/textarea
      const isInputActive = ['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName);
 
      if (e.key === 'Escape') {
        closeTxModal();
        closeShortcutsModal();
        return;
      }
 
      if (isInputActive) return;
 
      if (e.key === 'n' || e.key === 'N') {
        e.preventDefault();
        openTxModal();
      } else if (e.key === '/') {
        e.preventDefault();
        if (elements.searchInput) elements.searchInput.focus();
      } else if (e.key === 'd' || e.key === 'D') {
        e.preventDefault();
        toggleTheme();
      } else if (e.key === '?') {
        e.preventDefault();
        openShortcutsModal();
      }
    });
  }
 
  // Refresh All UI Components
  function refreshAll() {
    renderSummary();
    renderBudgets();
    renderCharts();
    renderTransactions();
  }
 
  // Bind Event Listeners
  function bindEvents() {
    // Theme Toggle
    if (elements.themeToggleBtn) {
      elements.themeToggleBtn.addEventListener('click', toggleTheme);
    }
 
    // Add Tx Button
    if (elements.addTxBtn) {
      elements.addTxBtn.addEventListener('click', () => openTxModal());
    }
 
    // Modal Close
    if (elements.modalCloseBtn) elements.modalCloseBtn.addEventListener('click', closeTxModal);
    if (elements.modalCancelBtn) elements.modalCancelBtn.addEventListener('click', closeTxModal);
 
    // Form Submit
    if (elements.txForm) elements.txForm.addEventListener('submit', handleFormSubmit);
 
    // Filter Controls
    if (elements.searchInput) {
      elements.searchInput.addEventListener('input', (e) => {
        currentFilters.search = e.target.value;
        renderTransactions();
      });
    }
 
    if (elements.categoryFilter) {
      elements.categoryFilter.addEventListener('change', (e) => {
        currentFilters.category = e.target.value;
        renderTransactions();
      });
    }
 
    if (elements.typeFilter) {
      elements.typeFilter.addEventListener('change', (e) => {
        currentFilters.type = e.target.value;
        renderTransactions();
      });
    }
 
    // CSV Controls
    if (elements.exportCsvBtn) {
      elements.exportCsvBtn.addEventListener('click', handleCsvExport);
    }
 
    if (elements.importCsvBtn) {
      elements.importCsvBtn.addEventListener('click', () => elements.csvFileInput.click());
    }
 
    if (elements.csvFileInput) {
      elements.csvFileInput.addEventListener('change', handleCsvImport);
    }
 
    // Shortcuts Modal
    if (elements.shortcutsBtn) {
      elements.shortcutsBtn.addEventListener('click', openShortcutsModal);
    }
    if (elements.shortcutsCloseBtn) {
      elements.shortcutsCloseBtn.addEventListener('click', closeShortcutsModal);
    }
 
    // Window Resize Redraw Charts
    window.addEventListener('resize', () => {
      renderCharts();
    });
  }
 
  // App Initialization
  function init() {
    initElements();
    loadInitialData();
    populateCategories();
    initTheme();
    bindEvents();
    initChartInteractions();
    initKeyboardShortcuts();
    refreshAll();
  }
 
  // Run on DOM ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
 
})();
 
622 linesjs
**Constructing Self-Test Page** I'm currently focused on building `tests.html`. It will loa…
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