Commission Calculator

Tiered incentives, payout tracking, and payroll simulation.

Overview

This commission calculator helps sales ops teams apply tiered commission rules, review earnings by salesperson and period, run a simulated payroll batch, and export reports. Sales transactions live in an editable grid with auto-calculated rates and payout status, backed by charts and Excel/PDF export—all in one browser page.

Key features

Dashboard KPIs

Summary cards show Total Sales, Total Commission, Pending Payout, and Paid Out for the selected period.

Tiered commission rules

An editor defines:

• Threshold ($)
• Rate up to threshold (%)
• Rate above threshold (%)

A live example sentence summarizes the current tier structure. Each sale row gets an auto-calculated Commission Rate and Commission Earned based on the tiered logic.

Period selection

Choose Monthly or Quarterly period type, then pick a specific period (Jan–Apr 2026 monthly; Q1–Q2 2026 quarterly). Grid totals, summaries, and trend charts respect the selection.

Sales grid

AG Grid columns: Salesperson, Product, Sale Amount, Commission Rate, Commission Earned, Payout Status. Inline editing for salesperson, product, sale amount, and payout status. Payout Status is Pending or Paid with color-coded cells. Pinned totals show sales, blended rate, and total commission. Columns sort, filter, and resize.

Summary and charts

• Summary by salesperson table — sales, commission, pending, paid, plus footer totals
• Bar chart — commission by person
• Line chart — commission trend across all periods (monthly or quarterly)

Upload and export

• Upload Excel/CSV — columns: Salesperson, Product, Sale Amount, Period
• Export commission report to Excel
• Export PDF summary by salesperson (jsPDF)

Save, load, and payroll

Toolbar actions:

• Save / Load — persist sales, tier rules, and period settings to localStorage
• Run Payroll — confirms then marks all Pending sales in the selected period as Paid

Appearance

Dark mode toggle with remembered preference.

Data & persistence

Eight sample transactions across three salespeople preload on first visit. Sales data, tier configuration, and settings persist in localStorage.

Built with

Tailwind CSS, AG Grid Community, Alpine.js, Chart.js, SheetJS, jsPDF, and jspdf-autotable.

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