Total Income
₱0.00
Total Expenses
₱0.00
Net Balance
₱0.00
Expense Breakdown
Monthly Income vs Expenses
Daily Expense Comparison
Category Breakdown
💼 Main Job
₱
₱
🎨 Graphics
₱
₱
🏛️ Municipal
₱
₱
Additional Funds
No additional funds added.
💰 From Savings
Auto-added from Savings withdrawalsNo savings withdrawals this month.
Emergency Funds
₱0.00
Current balance
Future Wedding
₱0.00
Current balance
Travel Funds
₱0.00
Current balance
Monthly Savings by Category
Emergency Funds
₱
₱
Future Wedding
₱
₱
Travel Funds
₱
₱
💸 Withdrawals -
Record money taken out of your savings. Withdrawals reduce each fund's balance and are added back to that month's Net Balance.
No withdrawals this month.
Income vs Expenses & Net Balance
Expense Categories by Month
| Category | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec | Total |
|---|
Changelog
18 releasesFrom Savings on Income
- New "From Savings" section on the Income page, auto-populated from savings withdrawals
- Each withdrawal recorded in the Savings tab appears here as income, with its reason and source fund
- Total Income now includes money pulled from savings
- Net Balance is unchanged: withdrawals moved from the savings deduction to the income side (no double counting), so the math stays identical
Savings Withdrawals
- New Withdrawals section on the Savings page - record money taken out of any fund
- Each withdrawal has a fund, date, reason, and amount (like an expense entry)
- Total cards now show the true current balance: deposits minus withdrawals
- Withdrawals are added back to that month's Net Balance (money set aside = deposits − withdrawals)
- Undo button when removing a withdrawal; saving deposits no longer wipes withdrawal history
- CSV export now includes a Savings Withdrawals section plus Deposited / Withdrawn / Net columns
Brighter Theme & Icons
- Softer dark theme: lighter navy background, cards, and borders - easier on the eyes
- Brighter chart grid lines, axis labels, and legends to match
- Category icons everywhere: 🧾 Bills, 💳 Debts, 🛒 Needs, 🍔 Food, 🎁 Wants, 📦 Miscellaneous, ⚡ Unexpected
- Savings icons: 🛡️ Emergency, 💍 Wedding, ✈️ Travel, 💰 Savings rows
- Income icons: 💼 Main Job, 🎨 Graphics, 🏛️ Municipal
- 💡 Monthly Insights and 🎯 Savings Goals card headers
Copy Confirmation Guard
- "Last month" copy button now shows a confirmation dialog before copying
- Dialog explains what will be copied (count, total amount, source and target month) and what happens after
- Duplicate warning: if this month already contains matching items, the dialog warns that copying again will create duplicates and the button changes to "Copy anyway"
- Cancel, ✕, clicking outside, or Escape all safely dismiss without copying
Big Improvements Batch
- Budget Limits now sync to the cloud - same limits on every device
- Edit button (✎) on every transaction - fix typos without delete + re-add
- Undo button on deletes - restore a removed transaction or fund within 6 seconds
- "Last month" button in Expenses copies a category's transactions from the previous month
- Install as an app: Add to Home Screen on iPhone opens full-screen with offline support (PWA)
- Export CSV button in Annual Summary - downloads transactions, income, and savings for the year
- Savings row added to the Month-over-Month table (green when up)
- Sync status indicator in the top bar - Synced / Syncing / Offline
- Summary cards show % change vs last month (e.g. "↑ 12% vs Apr")
Savings
- Added Savings tab with 3 categories: Emergency Funds, Future Wedding, and Travel Funds
- Each category has a 15th and 30th deposit slot per month
- Cumulative total cards at the top show all-time savings per category across all months
- Data saved per month alongside income and expenses; syncs to Supabase
Code Optimization
- Removed legacy migration functions (~200 lines of dead code)
- Pre-cache all 12 months on Annual Summary render - ~180 fewer data lookups
- Replaced
innerHTML +=loops with arrayjoin()for faster DOM updates - Extracted reusable helper functions; unified
STORAGE_KEYconstant - Removed unused variables and dead query selectors
Data & Insights
- Added Monthly Insights card at the top of the Dashboard (above summary cards)
- Insights auto-generate 4 bullets: net balance status, biggest expense category, biggest month-over-month change, and income utilization %
- Added Month-over-Month comparison table in Annual Summary - shows last month vs this month per category with color-coded ↑↓ change column
- Added Budget Limits per category in Admin → Budget Limits tab
- Progress bar appears in Expenses category header when a limit is set - turns yellow at 70%, red at 90%
- Summary cards (Income / Expenses / Net Balance) reordered to appear above Monthly Insights
Year Picker (2026-2030)
- Added year selector dropdown below the Budget Tracker logo in the sidebar
- Supports years 2026-2030; each year has its own independent data
- Selecting a year automatically navigates to Annual Summary
- Month dropdown repopulates to the selected year's months
- Mobile: year selector appears in the top bar next to the month dropdown
Mobile Expenses Fixes
- Fixed transaction amounts not showing on iPhone - iOS Safari grid min-width bug resolved
- Added scroll hint on category tabs so the last tab is no longer hard-clipped
- Improved category tab sizing, touch target sizes for Add/Remove buttons, and transaction row layout on small screens
Password Login Screen
- Added password-protected login screen before accessing the app
- Title "Geneva Budget Tracker" displayed on login page
- Password required every time the browser is closed and reopened (sessionStorage)
- Polished dark UI with ambient glow, glass-morphism card, and entrance animation
- Wrong password shows inline error; Enter key supported
Supabase Cloud Sync
- Integrated Supabase as cloud database - data now syncs across all devices
- Data loads from Supabase on startup; localStorage used as offline fallback
- All saves write to Supabase instantly in the background
- First device to connect automatically uploads local data to cloud
- iPhone and desktop now always see the same data
Mobile Responsive Layout
- Sidebar transforms into a fixed bottom navigation bar on mobile (≤640px)
- Nav items show icon + label vertically in a horizontal row
- iPhone safe area (home indicator) accounted for in bottom nav height
- All grids collapse to single column on small screens
- Expenses grand total card moves above category tabs on mobile
- Category tabs scroll horizontally; transaction rows adjusted for narrow screens
- Toast notifications repositioned above bottom nav bar
Daily Expense Comparison Chart
- Added Daily Expense Comparison bar chart to Dashboard
- Shows total spending per day for the active month
- Added spacing between Daily Expense chart and Category Breakdown card
- Fixed Monthly Income vs Expenses chart height (was too tall)
Food Category, Data Import & UX Fixes
- Added Food expense category; migrated Breakfast, Lunch, Dinner, Bread, Snacks, 7/11 items automatically
- Imported May 2026 entries from Excel - income and all expense transactions pre-loaded
- Default active month set to May 2026
- Expense transactions sorted newest-first
- Added running total card to Expenses tab
- Fixed delete button removing wrong transaction (sort-index bug)
- Annual Summary: replaced stacked bar with line chart per category across 12 months
- Removed duplicate Expense Breakdown chart from Annual Summary (already on Dashboard)
- Admin moved to bottom of sidebar with divider; nav item size increased
Admin Page
- Added Admin section with Changelog, Documentation, and Workflow tabs
- Full release history with version tags
- Step-by-step workflow guide for monthly budget tracking
- Complete feature documentation for all sections
Annual Summary Charts
- Added Income vs Expenses bar chart with Net Balance line overlay
- Added stacked bar chart for expense category breakdown by month
- Charts use interactive tooltips showing ₱ values on hover
- Fixed Annual Summary table headers to show Jan-Dec
Dark Theme & Layout Overhaul
- Full dark theme applied across all pages and modals
- Moved Active Month selector from sidebar to persistent top bar
- Expense categories now use clickable tab menu - only selected category is shown
- Chart axis labels and legends updated for dark background readability
Full Year Coverage
- Extended month range from May-December to January-December 2026
- Monthly trend bar chart now spans all 12 months
- Active Month selector defaults to January
Initial Release
- Dashboard with Total Income, Total Expenses, and Net Balance cards
- Expense breakdown donut chart and monthly trend bar chart
- Income tracker: Main Job, Graphics, Municipal - 15th & 30th paydays
- Additional Funds section for bonuses and external income
- 6 expense categories: Bills, Debts, Needs, Wants, Miscellaneous, Unexpected
- Annual Summary table with month-by-month breakdown
- Data persisted in browser localStorage
- Deployed to Vercel with GitHub auto-deploy
Documentation
5 sectionsDashboard
The Dashboard gives you a real-time snapshot of the selected month. The three hero cards show Total Income, Total Expenses, and Net Balance (green when positive, red when in deficit).
- Expense Breakdown - donut chart showing each category's share of total spending
- Monthly Trend - bar chart comparing income vs expenses for all 12 months
- Category Breakdown - progress bars showing each category's peso amount and percentage
Income
Track salary from three sources, each with a 15th and 30th payday slot:
- Main Job - primary employment salary
- Graphics - freelance / design income
- Municipal - government or municipal pay
Use Additional Funds for one-time income like bonuses, mid-year pay, or money received from others. Click Save Income to persist the values for the selected month.
Expenses
Expenses are split into 6 categories. Select a category tab to view and add transactions for it.
- Bills - recurring fixed costs (utilities, subscriptions, gas)
- Debts - loans, credit card payments, buy-now-pay-later
- Needs - food, groceries, laundry, transport, household essentials
- Wants - dining out, snacks, entertainment, non-essentials
- Miscellaneous - allowances, gifts, church offerings, personal care
- Unexpected - medical, emergency repairs, unplanned costs
Each transaction requires a date, description, and amount. Totals update instantly.
Annual Summary
The Annual Summary shows the full picture across all 12 months of 2026.
- Income vs Expenses chart - grouped bars with a net balance trend line
- Category breakdown chart - stacked bars showing how each expense type contributes per month
- Summary table - row-by-row breakdown of every category, total expenses, and net balance for each month with an annual total column
The Active Month selector does not affect this page - it always shows the full year.
Data & Storage
All budget data is saved automatically in your browser's localStorage - no account or internet connection required to view your data.
- Data persists across page refreshes and browser restarts
- Data is stored only on this device and browser - it does not sync across devices
- Clearing browser data or site storage will erase all entries
- Each month's data is stored independently under the key
budgetTracker2026
Workflow
Monthly ProcessFollow this process at the start and throughout each month to keep your budget tracker accurate and up to date.
1
Select the Active Month
At the top of any page, use the Active Month dropdown to select the month you are tracking. All Income and Expense entries are saved per month independently.
Do this first - entering data without selecting the right month will save it to the wrong month.
2
Log Your Income
Go to the Income tab and fill in your salary amounts for each source:
- Enter the 15th payday amount when you receive your mid-month salary
- Enter the 30th payday amount at end of month
- Add any Additional Funds (bonuses, borrowed money, mid-year pay) using the + Add Fund button
- Click Save Income to store all amounts for the month
3
Record Expenses Daily or Weekly
Go to the Expenses tab and log transactions as they happen or in batches.
- Select the correct category tab (Bills, Debts, Needs, Wants, Miscellaneous, Unexpected)
- Click + Add to open the transaction form
- Enter the date, a short description, and the amount in ₱
- Repeat for each expense - totals update immediately
When unsure which category to use: Bills = fixed recurring, Needs = essentials, Wants = non-essentials, Unexpected = unplanned.
4
Review the Dashboard
Switch to the Dashboard at any time to see your current standing for the month:
- Check the Net Balance card - green means you are within budget, red means overspent
- Review the Expense Breakdown donut to identify which categories are consuming the most
- Use the Category Breakdown progress bars to spot runaway spending
5
Close Out the Month
At the end of each month, do a final review before moving to the next:
- Make sure all bills and debts for the month are entered
- Verify the Total Income matches your actual received pay
- Note any categories that went over budget for adjustment next month
6
Check the Annual Summary
Visit Annual Summary periodically to see the bigger picture:
- The Income vs Expenses chart shows months where you saved vs overspent
- The stacked category chart reveals spending patterns across the year
- The Net Balance row in the table shows your cumulative financial position
Use the annual charts to plan ahead - if Miscellaneous is consistently high, consider setting a personal limit.
Budget Limits
per categorySet a monthly spending cap per category. A progress bar will appear in Expenses when a limit is set.