Financial Statements

P&L, Balance Sheet, and Cash Flow with budgets, variance, and period comparison.

Overview

This browser-based financial statements app brings together profit & loss, balance sheet, and cash flow in one place. Finance users can review budget vs actual variance, switch between month and year-to-date views, compare two periods side by side, and export results to Excel or PDF. It is built as a single HTML page with no backend.

Key features

Dashboard KPIs

Summary cards highlight Revenue, Gross Margin %, Net Profit, and Total Assets. These metrics reflect the active statement tab and current period settings.

Three statement tabs

Switch between:

• P&L — revenue, cost of goods sold, operating expenses, and net profit
• Balance Sheet — assets, liabilities, and equity
• Cash Flow — operating, investing, and financing activities

Each tab uses an AG Grid with section grouping (e.g., Revenue, COGS, Operating Expenses) and a pinned total row at the bottom.

Period views

• Month vs YTD toggle changes how amounts are presented
• Compare periods mode shows two period selectors (sample range Dec 2025–Mar 2026) and adds Period A, Period B, and Difference columns
• In standard mode, columns are Line Item, Budget, Actual, Variance, and Var %
• Variance and difference cells use green/red background formatting
• Budget, actual, and comparison values are editable inline

Charts

A dynamic bar chart titles itself based on the active tab. It shows Actual vs Budget in normal mode, or Period A vs Period B when compare mode is on.

Export

• Export to Excel — active statement only
• Export to PDF — formatted summary with category, line item, budget, actual, and variance (jsPDF)

Appearance

Dark mode with localStorage persistence. Responsive header and controls.

Data & persistence

The app ships with sample multi-period data across revenue, expenses, assets, liabilities, and cash flow line items. Statement edits apply within the session; dark-mode preference is saved in the browser.

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.