Travel & Expense Reconciliation

Track business trips, log expenses, reconcile receipts, and submit reports for approval — all in one browser page.

Overview

This app helps finance teams and traveling employees manage trip-based expense reports without spreadsheets or separate tools. Select a business trip, log individual expenses by category, reconcile line items against receipts, and walk each trip through an approval workflow. Summary KPIs, a category spending chart, and Excel/PDF exports make month-end reconciliation straightforward. Everything runs in a single self-contained HTML page with data saved locally in your browser.

Key features

Trip and expense grids

• Trips grid — View all business trips with destination, traveler, dates, approval status, and expense totals. Click a row to filter expenses and open the trip summary.
• Expenses grid — See line items for the selected trip: date, category, description, amount, reconciliation status, and receipt flag. Edit or delete individual entries; select multiple rows for bulk reconciliation actions.

Expense entry form

• Add or edit expenses — Alpine.js form to pick a trip, enter date, category, description, and amount.
• Live trip total preview — See how the selected trip's total will change before you save.

Trip summary & approval

• Trip summary panel — Destination, traveler, dates, purpose, expense count, total spend, and reconciliation progress for the selected trip.
• Approval workflow — Submit a draft trip for approval, then approve or reject pending trips (simulated manager actions).

Reconciliation

• Status tracking — Each expense is Matched, Unmatched, or Pending review, with color-coded grid cells.
• Bulk actions — Mark selected expenses as reconciled (Matched) or flag them as Unmatched.

Reporting & data exchange

• KPI cards — Active trips, total spend, unreconciled item count, and pending approvals at a glance.
• Category chart — Doughnut chart of spending by category (Airfare, Lodging, Meals, Transport, etc.).
• Excel import/export — Download trips and expenses as a workbook; import `.xlsx` files to add data.
• PDF summary — Generate a printable trip and expense report with jsPDF.

Persistence & theme

• localStorage — Trips, expenses, and selected trip are saved automatically and restored on reload.
• Reset data — Restore sample data with confirmation.
• Dark mode — Toggle light/dark theme; preference is remembered. AG Grid and Chart.js adapt to the theme.

Data & persistence

Sample data includes three trips (Chicago, London, Austin) and seven expense line items with mixed reconciliation and approval states. All changes persist in `localStorage` under `travel-expense-data`. Dark mode preference is stored separately. Use Reset data to reload the sample dataset.

Charts & reporting

The category doughnut chart aggregates all expenses by type and updates when you add, edit, or reconcile items. Excel export produces separate Trips and Expenses sheets. PDF export includes summary totals plus tabular trip and expense detail.

Built with

Tailwind CSS (CDN), AG Grid Community, Alpine.js, Chart.js, SheetJS (xlsx), and jsPDF with autoTable — all loaded from CDN in a single HTML file.

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