Appearance
Runway Panel
Answers the question: "If I stopped earning today, how many months would my savings last?" Displays a large hero number with a progress bar and responds to What-If Simulator changes.
What It Shows
| Element | Detail |
|---|---|
| Hero number | Months of runway (displays infinity symbol when burn rate is zero) |
| Progress bar | Visual fill against a 24-month scale |
| Scale labels | 0, 12 mo, 24+ mo |
| Cash on Hand card | Current total liquid savings |
| Monthly Burn card | Average monthly expenses |
| Delta badge | Change in runway months when What-If Simulator is active |
Key Features
Color-coded hero -- The runway number changes color based on severity:
Months Color Meaning > 12 Green Healthy runway 6 -- 12 Yellow Caution < 6 Red Critical Progress bar -- Fills proportionally up to a 24-month maximum. Includes a gradient fill and glow effect.
What-If delta -- When the What-If Simulator is active, a badge shows the +/- change in runway months compared to the base scenario.
Infinity handling -- When monthly burn is zero or negative (saving more than spending), the runway displays an infinity symbol.
Data Source
| Hook | Fields |
|---|---|
useSimulation | runwayMonths, cashOnHand, monthlyBurn, baseRunwayMonths |
Stat card values formatted with formatNZD().
Interactivity
| Action | Result |
|---|---|
| Activate What-If Simulator | Delta badge appears showing runway change |
| Adjust simulator sliders | Runway recalculates in real time |
The panel itself has no direct controls -- it reacts to the What-If Simulator.
Related Panels
- What-If Simulator -- drives the scenario adjustments
- Cashflow Panel -- monthly income/expense data feeding burn rate
- Net Worth Panel -- cash on hand aligns with asset totals