Documentation

ExpenseTab Documentation

The ExpenseTab component is used to manage and track all expenses within the financial plan. It separates expenses into two main categories: primary expenses, which are typically ongoing (like pre and post-retirement living costs), and additional expenses, which can be one-off or recurring.

This tab controls:

  • Primary Expenses: Regular, ongoing expenses, such as living costs before and after retirement.
  • Additional Expenses: Specific, individual expenses that can occur at different frequencies and have their own inflation rates.

Inputs

Primary Expenses

These represent the main living expenses, typically split into pre-retirement and post-retirement periods. The primary expenses section is collapsible and its state persists in localStorage.

Pre-Retirement Expenses:

  • Annual Expense: The total yearly spending for this expense category.
  • Inflation Rate (%): The annual rate at which this expense is expected to increase. This overrides the default inflation rate. Only visible when hideInflationInputs is false. Read-only in Real Values mode. Max: 20%, step: 0.5%
  • Start Age: The age when these expenses begin. Range: 0 to ending_age (no lower bound from scenario for pre-retirement). Clamped to 0-110 on blur.
  • End Age: The age when these expenses end. Range: starting_age to ending_age. Clamped to 0-110 on blur, must not be less than Start Age.

Post-Retirement Expenses:

  • Annual Expense: The total yearly spending for this expense category.
  • Inflation Rate (%): The annual rate at which this expense is expected to increase. This overrides the default inflation rate. Only visible when hideInflationInputs is false. Read-only in Real Values mode. Max: 20%, step: 0.5%
  • Start Age: The age when these expenses begin. Range: starting_age to ending_age. Clamped to 0-110 on blur.
  • End Age: The age when these expenses end. Range: starting_age to ending_age. Clamped to 0-110 on blur, must not be less than Start Age.

Additional Expenses

These are for any other specific expenses you want to track. Each additional expense card is individually collapsible with state persisted in localStorage.

  • Description: A custom name for the expense (e.g., "Annual Holiday", "New Car Purchase"). Editable inline in the card header.
  • Annual Expense: The amount of the expense.
  • Frequency (years): How often the expense occurs. For example, 1 for yearly, 5 for every five years. Minimum: 1.
  • Inflation Rate (%): The individual inflation rate for this expense. Only visible when hideInflationInputs is false. Max: 20%, step: 0.5%. Read-only in Real Values mode.
  • Start Age: The age when this expense period begins. Range: starting_age to ending_age. Clamped to 0-110 on blur.
  • End Age: The age when this expense period ends. Range: starting_age to ending_age. Clamped to 0-110 on blur, must not be less than Start Age.

Calculations

Expense Inflation

All expenses are adjusted for inflation to reflect their future cost.

Formula: Inflated Expense = Annual Expense * (1 + Inflation Rate / 100) ^ (Current Age - Start Age)

Example:

  • Annual Expense: $60,000
  • Inflation Rate: 2.5%
  • Start Age: 40
  • Current Age: 50

Inflated Expense = $60,000 * (1 + 2.5 / 100) ^ (50 - 40) = $60,000 * 1.025 ^ 10 = $76,805

Real Values Mode: When realValuesMode is enabled, the component handles inflation differently:

  • Retrieves original inflation rates from inputData.original_inflation_rates JSONB field (for expense1 and expense2)
  • If missing, reverse-calculates: Original Rate = Adjusted Rate + Global Inflation
  • Displays adjusted rate: Displayed Rate = Original Rate - Global Inflation

Frequency of Additional Expenses

Additional expenses can be set to occur at specific intervals using the Frequency input. The expense is only applied in years that match the frequency.

Formula: An expense is applied if (Current Age - Start Age) % Frequency == 0

Example:

  • Expense: New Car
  • Start Age: 40
  • Frequency: 10 years

The expense will be applied at ages 40, 50, 60, and so on, until the End Age is reached.

UI Features

Layout Modes

The component supports multiple layout modes:

Normal View (isSidebarView = false):

  • Primary expenses displayed in 2-column grid (pre-retirement and post-retirement side-by-side)
  • When hideInflationInputs = true: 3-column layout (Annual Expense | Start Age | End Age)
  • When hideInflationInputs = false: 2-row layout (Row 1: Annual Expense | Inflation Rate, Row 2: Start Age | End Age)

Sidebar View (isSidebarView = true):

  • All expenses displayed in single-column vertical layout
  • 2-3 row layout: Row 1: Annual Expense, Row 2: Inflation Rate (if not hidden), Row 3: Start Age | End Age