Monthly Business Reporting

Compare revenue, expenses, and profit by month or quarter—with trends, PDF exports, and saved snapshots.

Overview

Monthly Business Reporting is a single-page browser app for finance and operations teams who need quick period-over-period views without a full BI stack. Pick a month or quarter, see KPI cards and an AG Grid table with previous-period comparison, chart trends, import raw data from Excel, download a PDF report, and save report snapshots that persist in your browser.

Key features

Period selection

• Toggle between Month and Quarter views.
• Month mode: choose month and year from dropdowns.
• Quarter mode: choose Q1–Q4 and year.
• Header shows the current period label and the previous period used for comparison.

Metrics grid

• AG Grid table with Revenue, Expenses, and Profit for the selected period.
• Columns for current value, previous period, dollar change, and percent change.
• Color-coded change cells (green up, red down).

Summary KPI cards

• Three cards for Revenue, Expenses, and Profit.
• Conditional formatting: green left border when the change is favorable (revenue/profit up, expenses down), red when unfavorable.
• Percent change vs the previous period shown on each card.

Charts

• Bar chart — side-by-side current vs previous period for all three metrics.
• Line chart — revenue and profit trend across the last six periods.
• Charts update when you change period type or dates; colors adapt in dark mode.

Data import

• Import Excel or CSV via SheetJS.
• Expected columns: Period (e.g. `2026-06` or `2026-Q2`), Metric, Value.
• Imported rows merge into the dataset and refresh cards, grid, and charts.

PDF export

• One-click Download PDF generates a Business Performance Report with title, period, generation date, comparison period, and a metrics table.

Saved reports

• Save report stores a snapshot (period, revenue, profit, timestamp) in localStorage.
• Saved reports table with Load and Delete actions.

Theme & persistence

• Dark mode toggle with AG Grid dark theme styling.
• Raw data, saved reports, and theme preference persist in localStorage across reloads.

Data & persistence

Sample monthly and quarterly data ships with the app. Import adds new period/metric rows. Three localStorage keys hold raw metrics data, saved report snapshots, and dark-mode preference.

Charts & reporting

Chart.js powers bar and line charts. jsPDF with AutoTable generates downloadable PDF summaries.

Built with

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

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