Expense Breakdown
Monthly Income vs Expenses
Category Breakdown
Main Job
Graphics
Municipal
Additional Funds
No additional funds added.
Income vs Expenses & Net Balance
Expense Categories by Month
| Category | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec | Total |
|---|
Changelog
4 releasesAdmin 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.
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.
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
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
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
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
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