Expense Reports

Submit, track, and approve employee reimbursements.

Overview

This expense reporting app supports both employees submitting reimbursements and managers reviewing them. Add expenses with categories and receipt attachments, filter by status and date, approve or reject submissions, and export summaries—all in the browser with data that persists between visits.

Key features

Dashboard

KPI cards show Total spend, Pending amount, and Approved amount based on the current filters and view.

Employee and manager views

Toggle between Employee view and Manager view. In manager mode, a banner explains the approval workflow, and Approve / Reject buttons appear on rows with Submitted status.

Add expenses

The add-expense form captures:

• Date, description, category, amount, status
• Attach receipt (simulated—marks the row as having a receipt)

Categories include Meals, Travel, Supplies, Software, Training, and Other.

Expense table

AG Grid columns: Date, Description, Category, Amount, Receipt, Status. All fields are editable inline. Status uses color coding for Draft, Submitted, Approved, and Rejected. A pinned bottom row totals filtered amounts. Columns sort and resize.

Filters

• Status: All, Draft, Submitted, Approved, Rejected
• Date range: From / To

Filters apply to the grid, KPIs, and category chart.

Charts

A pie chart shows spending breakdown by category for the filtered dataset.

Import and export

• Export to Excel — filtered expenses
• Import Excel/CSV — appends new rows
• PDF Summary — totals plus expense table (jsPDF)

Appearance

Dark mode with localStorage persistence.

Data & persistence

Ten sample expense rows load on first visit. All expenses and the next ID counter save to localStorage, so submissions and approvals survive page reloads.

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.