Cash Flow Forecast

Project monthly inflows, outflows, and ending cash with scenario comparison.

Overview

Cash Flow Forecast is a single-page browser app for finance teams and operators who need to model cash movement across months, track running balances, and compare Base vs Optimistic scenarios. It uses AG-Grid for the forecast matrix, Alpine.js for calculations and forms, Chart.js for trends, and SheetJS for Excel import/export — all in one HTML file.

Key features

Forecast grid

• AG-Grid with category rows and Jan–Jun month columns
• Inflow rows (green) and Outflow rows (red) with editable monthly amounts
• Total column per row
• Calculated rows: Net Cash Flow, Running Balance, MoM Variance
• Monthly Total row at the bottom

Running balance & variance

• Opening balance input seeds the running balance
• Net cash = inflows − outflows each month
• Running balance accumulates month over month
• Month-over-month variance highlights changes in net cash

Categories & summary

• Alpine.js form to add new Inflow or Outflow categories
• Default monthly amount applied to all six months
• Summary cards: Net Cash (period), Ending Balance, Scenario Variance

Scenarios & chart

• Base and Optimistic scenarios (Optimistic: +12% inflows, −5% outflows)
• Chart.js line chart for net cash flow and running balance
• Dashed Base balance line when viewing Optimistic scenario

Import & export

• Import Excel/CSV to replace category rows (with confirmation)
• Export full forecast including calculated rows to `cash-flow-forecast-export.xlsx`

Theme & persistence

• Dark mode with saved preference
• Forecast data, opening balance, and scenario stored in localStorage

Data & persistence

• 7 sample categories pre-loaded (Customer Receipts, Payroll, Rent, etc.)
• Stored in localStorage (`cashFlowForecast_v1`)
• Import replaces category rows; calculated rows recompute automatically

Built with

Tailwind CSS, Alpine.js, AG-Grid Community, Chart.js, and SheetJS — all from CDN in a single HTML page.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.