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 20 / 28
app.jschange 1/1
/**
 * Personal Finance Dashboard - Application Controller
 */
 
(function () {
  'use strict';
 
  // Global App State
  const state = {
    transactions: [],
    budgets: {},
    filters: {
      search: '',
      category: 'All',
      type: 'All',
      startDate: '',
      endDate: ''
    },
    chartGroupMode: 'daily',
    theme: 'dark',
    editingTxId: null,
    spendingChart: null,
    donutChart: null
  };
 
  const service = FinanceData.service;
  const categories = FinanceData.DEFAULT_CATEGORIES;
 
  // DOM Elements cache
  let el = {};
 
  function cacheDOMElements() {
    el = {
      html: document.documentElement,
      // KPIs
      kpiIncome: document.getElementById('kpi-income'),
      kpiExpense: document.getElementById('kpi-expense'),
      kpiBalance: document.getElementById('kpi-balance'),
      kpiBalanceSub: document.getElementById('kpi-balance-sub'),
      kpiSavingsRate: document.getElementById('kpi-savings-rate'),
      
      // Charts
      spendingCanvas: document.getElementById('spending-chart'),
      donutCanvas: document.getElementById('donut-chart'),
      chartGroupSelect: document.getElementById('chart-group-select'),
 
      // Budgets
      budgetListContainer: document.getElementById('budget-list-container'),
      btnEditBudgets: document.getElementById('btn-edit-budgets'),
 
      // Table & Filters
      transactionsTbody: document.getElementById('transactions-tbody'),
      txCountBadge: document.getElementById('tx-count-badge'),
      searchInput: document.getElementById('search-input'),
      categoryFilter: document.getElementById('category-filter'),
      typeFilter: document.getElementById('type-filter'),
      startDateFilter: document.getElementById('start-date-filter'),
      endDateFilter: document.getElementById('end-date-filter'),
      btnClearFilters: document.getElementById('btn-clear-filters'),
 
      // Buttons
      btnThemeToggle: document.getElementById('btn-theme-toggle'),
      btnShortcuts: document.getElementById('btn-shortcuts'),
      btnImportCSV: document.getElementById('btn-import-csv'),
      btnExportCSV: document.getElementById('btn-export-csv'),
      btnAddTx: document.getElementById('btn-add-tx'),
      btnResetSample: document.getElementById('btn-reset-sample'),
 
      // Modals & Forms
      modalTx: document.getElementById('modal-transaction'),
      formTx: document.getElementById('form-transaction'),
      txTitle: document.getElementById('modal-tx-title'),
      txId: document.getElementById('tx-id'),
      txType: document.getElementById('tx-type'),
      txDate: document.getElementById('tx-date'),
      txDesc: document.getElementById('tx-description'),
      txAmount: document.getElementById('tx-amount'),
      txCategory: document.getElementById('tx-category'),
      txNotes: document.getElementById('tx-notes'),
 
      modalImport: document.getElementById('modal-import'),
      csvFileInput: document.getElementById('csv-file-input'),
      csvRawText: document.getElementById('csv-raw-text'),
      csvPreviewMsg: document.getElementById('csv-preview-msg'),
      btnConfirmImport: document.getElementById('btn-confirm-import'),
 
      modalBudgets: document.getElementById('modal-budgets'),
      formBudgets: document.getElementById('form-budgets'),
      budgetInputsContainer: document.getElementById('budget-inputs-container'),
 
      modalShortcuts: document.getElementById('modal-shortcuts'),
      toastContainer: document.getElementById('toast-container')
    };
  }
 
  // --- Initialization ---
 
  function init() {
    cacheDOMElements();
 
    // Load theme setting
    const savedTheme = localStorage.getItem('pf_dashboard_theme') || 'dark';
    setTheme(savedTheme);
 
    // Load initial data
    state.transactions = service.loadTransactions();
    state.budgets = service.loadBudgets();
 
    // Populate category dropdown options
    populateCategoryDropdowns();
 
    // Instantiate Canvas Charts
    if (typeof FinanceCharts !== 'undefined') {
      state.spendingChart = new FinanceCharts.SpendingChart(el.spendingCanvas, {
        isDark: state.theme === 'dark'
      });
      state.donutChart = new FinanceCharts.CategoryDonutChart(el.donutCanvas, {
        isDark: state.theme === 'dark'
      });
    }
 
    // Attach Event Handlers
    attachEventListeners();
 
    // Set default date in transaction modal to today
    el.txDate.value = new Date().toISOString().split('T')[0];
 
    // Initial Render
    renderAll();
 
    // Handle Window Resize for crisp canvas redrawing
    window.addEventListener('resize', () => {
      renderCharts();
    });
  }
 
  function populateCategoryDropdowns() {
    // Fill table filter dropdown
    el.categoryFilter.innerHTML = '<option value="All">All Categories</option>';
    categories.forEach(cat => {
      const opt = document.createElement('option');
      opt.value = cat;
      opt.textContent = cat;
      el.categoryFilter.appendChild(opt);
    });
 
    // Fill Modal form category dropdown
    el.txCategory.innerHTML = '';
    categories.forEach(cat => {
      const opt = document.createElement('option');
      opt.value = cat;
      opt.textContent = cat;
      el.txCategory.appendChild(opt);
    });
  }
 
  // --- Theme Management ---
 
  function setTheme(theme) {
    state.theme = theme;
    el.html.setAttribute('data-theme', theme);
    localStorage.setItem('pf_dashboard_theme', theme);
    if (el.btnThemeToggle) {
      el.btnThemeToggle.textContent = theme === 'dark' ? '🌙' : '☀️';
    }
    const isDark = theme === 'dark';
    if (state.spendingChart) state.spendingChart.setTheme(isDark);
    if (state.donutChart) state.donutChart.setTheme(isDark);
  }
 
  function toggleTheme() {
    setTheme(state.theme === 'dark' ? 'light' : 'dark');
    showToast(`Switched to ${state.theme} theme`, 'info');
  }
 
  // --- Main Render Dispatcher ---
 
  function renderAll() {
    const filtered = service.filterTransactions(state.transactions, state.filters);
 
    renderKPIs(filtered);
    renderTransactionsTable(filtered);
    renderBudgetBars();
    renderCharts();
  }
 
  // --- Render KPI Cards ---
 
  function renderKPIs(filteredTransactions) {
    const summary = service.calculateSummary(filteredTransactions);
 
    el.kpiIncome.textContent = service.formatCurrency(summary.totalIncome);
    el.kpiExpense.textContent = service.formatCurrency(summary.totalExpense);
    
    el.kpiBalance.textContent = service.formatCurrency(summary.netBalance);
    if (summary.netBalance >= 0) {
      el.kpiBalance.style.color = 'var(--income-green)';
      el.kpiBalanceSub.textContent = 'Positive cashflow';
    } else {
      el.kpiBalance.style.color = 'var(--expense-rose)';
      el.kpiBalanceSub.textContent = 'Deficit spending';
    }
 
    el.kpiSavingsRate.textContent = summary.savingsRate + '%';
    if (summary.savingsRate >= 20) {
      el.kpiSavingsRate.style.color = 'var(--income-green)';
    } else if (summary.savingsRate >= 10) {
      el.kpiSavingsRate.style.color = 'var(--warning-amber)';
    } else {
      el.kpiSavingsRate.style.color = 'var(--expense-rose)';
    }
  }
 
  // --- Render Transactions Table ---
 
  function renderTransactionsTable(transactions) {
    el.txCountBadge.textContent = `${transactions.length} ${transactions.length === 1 ? 'entry' : 'entries'}`;
    el.transactionsTbody.innerHTML = '';
 
    if (transactions.length === 0) {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td colspan="7" style="text-align: center; padding: 32px; color: var(--text-muted);">
          No transactions match your current filters.
        </td>
      `;
      el.transactionsTbody.appendChild(tr);
      return;
    }
 
    transactions.forEach(tx => {
      const tr = document.createElement('tr');
      const isIncome = tx.type === 'income';
 
      tr.innerHTML = `
        <td>${service.formatDate(tx.date)}</td>
        <td style="font-weight: 600;">${escapeHTML(tx.description)}</td>
        <td><span class="badge badge-category">${escapeHTML(tx.category)}</span></td>
        <td><span class="badge ${isIncome ? 'badge-income' : 'badge-expense'}">${isIncome ? 'Income' : 'Expense'}</span></td>
        <td class="${isIncome ? 'amount-income' : 'amount-expense'}">
          ${isIncome ? '+' : '-'}${service.formatCurrency(tx.amount)}
        </td>
        <td style="color: var(--text-secondary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
          ${escapeHTML(tx.notes || '-')}
        </td>
        <td style="text-align: right;">
          <div class="action-buttons" style="justify-content: flex-end;">
            <button class="action-btn edit-tx-btn" data-id="${tx.id}" title="Edit Transaction">✏️</button>
            <button class="action-btn delete delete-tx-btn" data-id="${tx.id}" title="Delete Transaction">🗑️</button>
          </div>
        </td>
      `;
 
      el.transactionsTbody.appendChild(tr);
    });
  }
 
  // --- Render Budget Progress Bars ---
 
  function renderBudgetBars() {
    el.budgetListContainer.innerHTML = '';
    const spendingMap = service.calculateCategorySpending(state.transactions);
 
    Object.keys(state.budgets).forEach(cat => {
      const limit = state.budgets[cat] || 0;
      const spent = spendingMap[cat] || 0;
      const percent = limit > 0 ? Math.min(100, Math.round((spent / limit) * 100)) : 0;
      const isExceeded = spent > limit;
 
      let fillColor = 'var(--income-green)';
      let statusTag = 'On Track';
      let tagBg = 'var(--income-green-bg)';
      let tagColor = 'var(--income-green)';
 
      if (isExceeded) {
        fillColor = 'var(--expense-rose)';
        statusTag = 'Exceeded';
        tagBg = 'var(--expense-rose-bg)';
        tagColor = 'var(--expense-rose)';
      } else if (percent >= 80) {
        fillColor = 'var(--warning-amber)';
        statusTag = 'Warning';
        tagBg = 'var(--warning-amber-bg)';
        tagColor = 'var(--warning-amber)';
      }
 
      const item = document.createElement('div');
      item.className = 'budget-item';
      item.innerHTML = `
        <div class="budget-item-header">
          <div class="budget-item-cat">
            <span>${escapeHTML(cat)}</span>
            <span class="budget-status-tag" style="background: ${tagBg}; color: ${tagColor};">${statusTag}</span>
          </div>
          <div class="budget-item-values">
            $${spent.toLocaleString()} / <span style="color: var(--text-muted);">$${limit.toLocaleString()}</span>
          </div>
        </div>
        <div class="budget-progress-track">
          <div class="budget-progress-fill" style="width: ${percent}%; background-color: ${fillColor};"></div>
        </div>
      `;
 
      el.budgetListContainer.appendChild(item);
    });
  }
 
  // --- Render Canvas Charts ---
 
  function renderCharts() {
    const filtered = service.filterTransactions(state.transactions, state.filters);
 
    // Spending timeline line chart
    if (state.spendingChart) {
      const timeData = service.calculateSpendingOverTime(filtered, state.chartGroupMode);
      state.spendingChart.setData(timeData);
    }
 
    // Category donut chart
    if (state.donutChart) {
      const catSpending = service.calculateCategorySpending(filtered);
      state.donutChart.setData(catSpending);
    }
  }
 
  // --- Modal Helpers ---
 
  function openModal(modalEl) {
    if (modalEl) modalEl.classList.add('active');
  }
 
  function closeModal(modalEl) {
    if (modalEl) modalEl.classList.remove('active');
  }
 
  function closeAllModals() {
    document.querySelectorAll('.modal-backdrop').forEach(m => m.classList.remove('active'));
  }
 
  // --- Transaction Modal Handlers ---
 
  function openNewTxModal() {
    state.editingTxId = null;
    el.txTitle.textContent = 'New Transaction';
    el.txId.value = '';
    el.txType.value = 'expense';
    el.txDate.value = new Date().toISOString().split('T')[0];
    el.txDesc.value = '';
    el.txAmount.value = '';
    el.txCategory.value = categories[0] || 'Other';
    el.txNotes.value = '';
    openModal(el.modalTx);
    setTimeout(() => el.txDesc.focus(), 100);
  }
 
  function openEditTxModal(txId) {
    const tx = state.transactions.find(t => t.id === txId);
    if (!tx) return;
 
    state.editingTxId = txId;
    el.txTitle.textContent = 'Edit Transaction';
    el.txId.value = tx.id;
    el.txType.value = tx.type;
    el.txDate.value = tx.date;
    el.txDesc.value = tx.description;
    el.txAmount.value = tx.amount;
    el.txCategory.value = tx.category;
    el.txNotes.value = tx.notes || '';
 
    openModal(el.modalTx);
  }
 
  function handleTxFormSubmit(e) {
    e.preventDefault();
 
    const txData = {
      id: el.txId.value || undefined,
      type: el.txType.value,
      date: el.txDate.value,
      description: el.txDesc.value,
      amount: parseFloat(el.txAmount.value),
      category: el.txCategory.value,
      notes: el.txNotes.value
    };
 
    try {
      if (state.editingTxId) {
        state.transactions = service.updateTransaction(state.transactions, state.editingTxId, txData);
        showToast('Transaction updated successfully', 'success');
      } else {
        state.transactions = service.addTransaction(state.transactions, txData);
        showToast('New transaction added', 'success');
      }
      closeModal(el.modalTx);
      renderAll();
    } catch (err) {
      showToast(err.message || 'Error saving transaction', 'error');
    }
  }
 
  function handleDeleteTx(txId) {
    if (confirm('Are you sure you want to delete this transaction?')) {
      state.transactions = service.deleteTransaction(state.transactions, txId);
      showToast('Transaction deleted', 'info');
      renderAll();
    }
  }
 
  // --- Budgets Modal Handler ---
 
  function openBudgetsModal() {
    el.budgetInputsContainer.innerHTML = '';
    categories.forEach(cat => {
      if (cat === 'Income') return; // Only set limits for expenses
      const limit = state.budgets[cat] !== undefined ? state.budgets[cat] : 500;
      
      const div = document.createElement('div');
      div.className = 'form-group';
      div.style.marginBottom = '8px';
      div.innerHTML = `
        <label class="form-label" style="font-size: 0.85rem;">${escapeHTML(cat)} Budget ($)</label>
        <input type="number" class="form-input budget-input-field" data-cat="${escapeHTML(cat)}" value="${limit}" min="0" step="50" />
      `;
      el.budgetInputsContainer.appendChild(div);
    });
    openModal(el.modalBudgets);
  }
 
  function handleBudgetsFormSubmit(e) {
    e.preventDefault();
    const newBudgets = { ...state.budgets };
    const inputs = el.budgetInputsContainer.querySelectorAll('.budget-input-field');
 
    inputs.forEach(input => {
      const cat = input.getAttribute('data-cat');
      const val = parseFloat(input.value);
      if (cat && !isNaN(val) && val >= 0) {
        newBudgets[cat] = val;
      }
    });
 
    state.budgets = newBudgets;
    service.saveBudgets(state.budgets);
    showToast('Budget limits updated', 'success');
    closeModal(el.modalBudgets);
    renderBudgetBars();
  }
 
  // --- CSV Import / Export Handlers ---
 
  function handleExportCSV() {
    const csvContent = service.exportToCSV(state.transactions);
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
 
    const a = document.createElement('a');
    a.href = url;
    a.download = `WealthPulse_Transactions_${new Date().toISOString().split('T')[0]}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
 
    showToast('Exported CSV file', 'success');
  }
 
  function openImportCSVModal() {
    el.csvFileInput.value = '';
    el.csvRawText.value = '';
    el.csvPreviewMsg.textContent = '';
    openModal(el.modalImport);
  }
 
  function handleCSVFileInput(e) {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function (evt) {
      el.csvRawText.value = evt.target.result;
    };
    reader.readAsText(file);
  }
 
  function handleConfirmImport() {
    const text = el.csvRawText.value;
    if (!text || text.trim() === '') {
      showToast('Please select a CSV file or paste CSV text', 'error');
      return;
    }
 
    try {
      const parsed = service.parseCSV(text);
      if (parsed.transactions.length === 0) {
        showToast('No valid transactions found in CSV', 'error');
        return;
      }
 
      // Merge transactions
      let addedCount = 0;
      parsed.transactions.forEach(tx => {
        state.transactions = service.addTransaction(state.transactions, tx);
        addedCount++;
      });
 
      showToast(`Successfully imported ${addedCount} transactions!`, 'success');
      closeModal(el.modalImport);
      renderAll();
    } catch (err) {
      showToast(err.message || 'Error parsing CSV', 'error');
    }
  }
 
  // --- Event Listeners Setup ---
 
  function attachEventListeners() {
    // Navbar & Global Actions
    el.btnThemeToggle.addEventListener('click', toggleTheme);
    el.btnShortcuts.addEventListener('click', () => openModal(el.modalShortcuts));
    el.btnAddTx.addEventListener('click', openNewTxModal);
    el.btnExportCSV.addEventListener('click', handleExportCSV);
    el.btnImportCSV.addEventListener('click', openImportCSVModal);
    el.btnEditBudgets.addEventListener('click', openBudgetsModal);
 
    el.btnResetSample.addEventListener('click', () => {
      if (confirm('Reset dashboard to default sample transactions and budgets?')) {
        const res = service.resetToSampleData();
        state.transactions = res.transactions;
        state.budgets = res.budgets;
        showToast('Reset data to default sample', 'info');
        renderAll();
      }
    });
 
    // Form Submissions
    el.formTx.addEventListener('submit', handleTxFormSubmit);
    el.formBudgets.addEventListener('submit', handleBudgetsFormSubmit);
    el.btnConfirmImport.addEventListener('click', handleConfirmImport);
    el.csvFileInput.addEventListener('change', handleCSVFileInput);
 
    // Modal Close Buttons
    document.querySelectorAll('[data-close-modal]').forEach(btn => {
      btn.addEventListener('click', () => {
        const modalId = btn.getAttribute('data-close-modal');
        closeModal(document.getElementById(modalId));
      });
    });
 
    // Close modal on backdrop click
    document.querySelectorAll('.modal-backdrop').forEach(backdrop => {
      backdrop.addEventListener('click', e => {
        if (e.target === backdrop) closeModal(backdrop);
      });
    });
 
    // Filters Toolbar Controls
    el.searchInput.addEventListener('input', e => {
      state.filters.search = e.target.value;
      renderAll();
    });
 
    el.categoryFilter.addEventListener('change', e => {
      state.filters.category = e.target.value;
      renderAll();
    });
 
    el.typeFilter.addEventListener('change', e => {
      state.filters.type = e.target.value;
      renderAll();
    });
 
    el.startDateFilter.addEventListener('change', e => {
      state.filters.startDate = e.target.value;
      renderAll();
    });
 
    el.endDateFilter.addEventListener('change', e => {
      state.filters.endDate = e.target.value;
      renderAll();
    });
 
    el.btnClearFilters.addEventListener('click', () => {
      state.filters = { search: '', category: 'All', type: 'All', startDate: '', endDate: '' };
      el.searchInput.value = '';
      el.categoryFilter.value = 'All';
      el.typeFilter.value = 'All';
      el.startDateFilter.value = '';
      el.endDateFilter.value = '';
      renderAll();
      showToast('Filters cleared', 'info');
    });
 
    el.chartGroupSelect.addEventListener('change', e => {
      state.chartGroupMode = e.target.value;
      renderCharts();
    });
 
    // Table Actions (Edit & Delete via Event Delegation)
    el.transactionsTbody.addEventListener('click', e => {
      const editBtn = e.target.closest('.edit-tx-btn');
      if (editBtn) {
        const id = editBtn.getAttribute('data-id');
        openEditTxModal(id);
        return;
      }
 
      const deleteBtn = e.target.closest('.delete-tx-btn');
      if (deleteBtn) {
        const id = deleteBtn.getAttribute('data-id');
        handleDeleteTx(id);
        return;
      }
    });
 
    // Keyboard Shortcuts Listener
    window.addEventListener('keydown', handleGlobalKeydown);
  }
 
  // --- Keyboard Shortcuts Dispatcher ---
 
  function handleGlobalKeydown(e) {
    // Ignore keydown when user is typing in input, select or textarea
    const active = document.activeElement;
    const isInput = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.tagName === 'SELECT');
 
    // Esc closes all modals even if inside an input
    if (e.key === 'Escape') {
      closeAllModals();
      return;
    }
 
    if (isInput) return;
 
    if (e.key === 'n' || e.key === 'N') {
      e.preventDefault();
      openNewTxModal();
    } else if (e.key === '/') {
      e.preventDefault();
      el.searchInput.focus();
    } else if (e.key === 'd' || e.key === 'D') {
      e.preventDefault();
      toggleTheme();
    } else if (e.key === 'e' || e.key === 'E') {
      e.preventDefault();
      handleExportCSV();
    } else if (e.key === 'i' || e.key === 'I') {
      e.preventDefault();
      openImportCSVModal();
    } else if (e.key === '?') {
      e.preventDefault();
      openModal(el.modalShortcuts);
    }
  }
 
  // --- Toast Notification Utility ---
 
  function showToast(message, type = 'info') {
    if (!el.toastContainer) return;
    const toast = document.createElement('div');
    toast.className = 'toast';
 
    let icon = 'ℹ️';
    if (type === 'success') icon = '✅';
    if (type === 'error') icon = '⚠️';
 
    toast.innerHTML = `<span>${icon}</span> <span>${escapeHTML(message)}</span>`;
    el.toastContainer.appendChild(toast);
 
    setTimeout(() => {
      toast.style.opacity = '0';
      toast.style.transform = 'translateY(10px)';
      toast.style.transition = 'all 0.3s ease';
      setTimeout(() => toast.remove(), 300);
    }, 3000);
  }
 
  // --- Security XSS Helper ---
 
  function escapeHTML(str) {
    if (typeof str !== 'string') return str;
    return str.replace(/[&<>'"]/g, tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      "'": '&#39;',
      '"': '&quot;'
    }[tag] || tag));
  }
 
  // Initialize App on DOMContentLoaded
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
 
696 linesjs
Writes …/tests.html
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