Sales Forecast Models

Product and channel sales forecasts with growth rates, scenarios, and actuals comparison in one browser page.

Overview

Sales Forecast Models is a single-page app for sales and revenue planning teams who need to project monthly sales by product and channel without rebuilding a spreadsheet. Enter historical actuals in an editable grid, set a monthly growth rate, compare Base, Conservative, and Aggressive scenarios, chart actual vs forecast totals, import or export workbooks, and pick up where you left off with automatic browser save.

Key features

KPI summary cards

• YTD actual — sum of actual sales through the selected last actual month.
• Total forecast — full-period total under the Base scenario.
• Conservative total — full-period total with −30% growth adjustment.
• Aggressive total — full-period total with +30% growth adjustment.
• All four cards update instantly when actuals, growth rate, or last actual month change.

Growth rate controls

• Number input for monthly growth rate (%) (−20% to 50%, 0.5% steps).
• Matching range slider (−5% to 25%) with a live formatted label (e.g. “4% / month”).
• Last actual month dropdown (Jan–Jun) defines where actuals end and forecasts begin.
• Future months compound from the last actual value using the growth rate and active scenario multiplier.

Forecast scenarios

• Base — forecasts use the entered growth rate as-is.
• Conservative (−30%) — applies a 0.7× multiplier to the growth rate on projected months.
• Aggressive (+30%) — applies a 1.3× multiplier to the growth rate on projected months.
• Scenario selector updates the grid forecast columns, chart line, and KPI cards immediately.

Actual vs forecast chart

• Chart.js line chart titled with the active scenario.
• Actual line shows monthly total actuals through the last actual month (gaps after that month).
• Forecast line shows monthly forecast totals for the active scenario across all months (dashed green line).
• Axis labels, legends, and grid lines adapt to light or dark theme.

Sales grid

• AG Grid table with Product and Channel pinned columns and six month groups (Jan–Jun).
• Each month has Actual and Forecast sub-columns with color-coded backgrounds.
• Actual cells are editable through the last actual month; future actual cells show “—”.
• Forecast values are computed automatically and read-only.
• Pinned bottom total row sums actual and forecast columns across all products and channels.
• Sortable, resizable columns; single-click editing on actual cells.

Excel import & export

• Import history accepts `.xlsx`, `.xls`, or `.csv` files and loads actual sales columns into the grid.
• Export Excel downloads `sales-forecast.xlsx` with two sheets:
• Forecast — product, channel, and monthly actual/forecast values for the active scenario display.
• Settings — growth rate, active scenario, and last actual month.

Theme

• Dark mode toggle in the header (☀️ / 🌙) using Tailwind `class` dark mode.
• AG Grid uses a custom dark theme; Chart.js colors adapt when dark mode is on.
• Dark mode preference persists across page reloads.

Data & persistence

Sample data ships with six product/channel rows (Enterprise Suite, Pro Plan, Starter, Add-ons across Direct, Partners, Online, and Retail channels) with Jan–Mar actuals populated. Edits to actuals, growth rate, scenario, and last actual month auto-save to browser localStorage on every change and restore on page reload. Import/export uses SheetJS workbooks for sharing data outside the browser.

Charts & reporting

Chart.js powers the actual vs forecast line chart with monthly totals aggregated across all rows. Four KPI cards summarize YTD actuals and full-period forecast totals for Base, Conservative, and Aggressive scenarios. SheetJS generates the downloadable Excel workbook.

Built with

Tailwind CSS, Alpine.js, AG Grid Community, Chart.js, and SheetJS (xlsx).

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