Arnav Gupta Personal Financial Tracker

Build me a website which will be a personal financial tracker that helps create plan for future income and expenses and plan for goals in life.

Basic Details and Tech Stack to be used

Tech Stack

Framework: React
Language: Typescript
Styling: Tailwind
Icons: Lucide
Charting: Recharts

Basic logic of the underlying core calculations

Portfolio {
	startYear: Int, default=2015 // year from which calculations to be started 
	endYear: Int default=2075 // year till which to calculate 
	incomeStreams: IncomeStream[]
	expenseStreams: ExpenseStream[]
	majorExpenses: MajorExpense[]
	assets: Asset[]
}
IncomeStream { // there can be multiple income streams
	name // eg: salary, consulting 
	startYear // from when this income started 
	endYear // till when this income will exist
	annualAmount // amount of income in the first year (startYear) 
	annualGrowth (percentage) 
}

ExpenseStream { // there can be multiple ongoing expense streams
	name // eg: daily-life, children-education
	startYear
	endYear
	annualAmmount
	annualGrowth // inflation of expenses
}

MajorExpense { // these are for large expenses like car, house 
	name 
	totalAmmount 
	isInInstallments // if true, then spent over years (eg via a loan)
	annualInstallmentAmount 
	installmentStartYear
	installmentEndYear // same as installment start year if not in installments 
	annualInterest // 0 if not in installments, use this to calculate annualInstallmentAmount
}

Asset { 
	type // eg: cash, stocks, property,
	name
	currentAmmount
	annualGrowth // the APR of growth, can be negative for depreciating asset like car
	spendPriority // a ranking number, higher ranked is spent from first when required for expenses 
	isForSavings: boolean // if true, then some part of annual savings get contributed to this
}

SavingsDistribution { // during different spans, you might be saving in different mixes
	startYear
	endYear
	distribution: Map<Asset, Number> // how much percentage goes into which asset. sum MUST BE 100! 
} // there cannot be savings distribution ranges with overlapping start and end years

The website should have the following sections to take input from the user

Basic Infor
- Their age
- Start year
- End Year
Income Streams
- allow adding income streams with [+ Add] button
- every income stream, user can enter start, end years, income ammount and growth
- ammount entered is considered current year ammount, and values between startYear to current year are interpolated
Expense Streams
- allow adding expense streams with [+ Add] button
- every expense stream, user can enter start, end years, income ammount and growth
Assets
- allow adding assets with a [+ Add] button
- asset type should be a selector between "Cash & Equivalents", "Stocks & Equities", "Movable Property (Car)", "Immovable Property (House)"
- add a checkbox for "Add savings into this asset every year"
- add a drop down [1-10] "Priority of spending from this asset if required (higher is spent first)"
Major Expenses
- allow adding major expenses with [+ Add] button
- when adding expense have a checkbox for "Loan / Installments"
  - when this is checked, take data for % interest, start and end year and calculate the annual value from there
Savings Distribution
- Let people distribute their savings among different assets
- Add multiple distribution ranges using [+Add] button, make sure valid ranges exist for the ENTIRE duration of start to end year
- For any distribution range, give sliders to distribute saving among all active assets that year (that have isForSavings=true)
- Sum of those sliders is constrainted to be 100

After taking input from the user, here is how the calculations should be done.

For the year eg: 2021
- For every income stream
  - increase the 2020 value by % growth
  - if the endYear has come then turn down income to 0
- For every expense stream
  - increase the 2020 value by % inflation
  - if endYear has come, then turn expense down to 0
  - if new expense stream starts this year, start with initial value
  - major expenses are just a one-time expense if they are not in installments
    - if they are in installments, they are just like another expense stream,
    - but they have constant value per year, no % inflation
- For assets
  - first calculate if total income > total expense or not
    - if income > expense; then savings = income - expense
      - split savings as per that year's savingsDistribution and add to savings
      - also grow savings be the % growth of that savings
      - thus; asset[2021] = asset[2020] + asset[2020] x growth + savings x distribution share of this asset
    - if income < expense; then burn = expense - income
      - go through the assets in decreasing order of their spendPriority and reduce them by the burn
      - if all assets are zeroed out and still that year's burn is not accounted for, then throw a calculation error

The chart at the end of the website should live-update, as inputs are added by user. There should be a "Refresh" button to force the calculations too. There should be an "Export CSV" button to export the chart data in CSV format.

The chart should use the following ways to display.

Incomes: stacked bars, +ve (above 0)
Expenses: stacked bars, -ve (below 0)
Assets: stacked area
Major Expenses (if without installedment): scatter dot
- major expenses which are installments should be stacked with other expense streams in the bars

v0.1

Continue your previous response

v0.2

The Personal Financial Tracker is now complete! This application allows users to plan their financial future by tracking income, expenses, assets, and major life expenses.

Key Features

Comprehensive Financial Planning:
- Track multiple income streams with customizable growth rates
- Manage ongoing expenses with inflation adjustments
- Plan for major one-time expenses or loans/installments
- Track different types of assets with varying growth rates
- Distribute savings among different assets
Interactive Visualization:
- Overview chart showing income, expenses, and asset growth
- Detailed income breakdown with stacked bar charts
- Expense visualization with both recurring and one-time expenses
- Asset growth visualization with stacked area charts
Calculation Engine:
- Year-by-year financial projection
- Handles asset growth, savings distribution, and expense management
- Calculates loan installments based on principal, interest rate, and term
- Validates inputs to ensure complete and consistent financial planning
User-Friendly Interface:
- Tabbed navigation for different sections
- Add/remove functionality for all financial components
- Live updates as inputs change
- Export to CSV for further analysis

To get started, simply:

Enter your basic information (age and planning timeframe)
Add your income streams
Add your expense streams and major expenses
Define your assets and how you want to distribute savings
View your financial projection in the charts

The application will automatically calculate your financial future based on your inputs and show you how your wealth will grow over time.

Change currency and symbol to Indian Rupee, make currency number look like lac/crore instead of full number in the charts.
On changing saving distribution slider, it gives arbitrary percent like 91, 93 when I am sliding it to 100. Check all sliders and make sure they update the value that they show. add Input box besides the slider, and let user change from there as well.
Show errors on top, show it by default if any data is missing to add for the graph to show up.
In some cases, graph is not rendering and there is no error shown why graph is not rendered (especially when Major Expenses are added with loan installments not checked), there should be always either graph rendering or an error shown at all times
Remove unnecessary validations and make sure it follows the PRD and only add required validations.

PRD: