Cashbook

A personal finance tracker web application for visualizing and analyzing your credit card transactions.

Features

• Dashboard Overview: View net spend, total refunds, total charges, and transaction count at a glance
• Interactive Charts: Visualize spending patterns with Chart.js
  • Monthly card activity (charges vs refunds)
  • Spending by category breakdown
  • Daily expense patterns
  • Top spending categories
  • Refund rate analysis
  • Refund sources
• Filtering: Filter transactions by date range, category, and transaction type
• Transaction Table: Browse recent transactions with details

How to Run

Option 1: Open Directly in Browser

Simply open index.html in your web browser:

open index.html

Note: Some browsers may restrict loading local files. If charts don't load, use Option 2.

Option 2: Local Development Server (Recommended)

Using Python:

# Python 3
python -m http.server 8000

# Then open http://localhost:8000 in your browser

Using Node.js:

# Install a simple server globally (one time)
npm install -g serve

# Run the server
serve .

# Then open the URL shown in terminal

Using PHP:

php -S localhost:8000

Project Structure

cashbook/
├── index.html      # Main HTML file
├── styles.css      # Stylesheet
├── app.js          # Application logic and chart rendering
├── data/           # Transaction data files
│   ├── 2025.csv
│   ├── transactions_2024.csv
│   └── transactions_2025.csv
└── README.md

Data Format

Transaction CSV files should contain columns for:

• Date
• Description
• Category
• Amount (positive for charges, negative for refunds/payments)

Technologies Used

• HTML5, CSS3, JavaScript (ES6+)
• Chart.js - Interactive charts
• Google Fonts - Sora, Instrument Serif, JetBrains Mono

License

MIT