# Personal Finances

A modern personal finance management application for tracking net worth, managing debt, invoicing clients, and monitoring cashflow.

## Features

### Net Worth Tracking

- Track assets (cash, investments, property, vehicles)
- Track liabilities (mortgages, loans, credit cards)
- Visualize net worth over time with charts
- View asset allocation breakdown

### Debt Management

- Organize debts by custom categories
- Track multiple accounts per category
- Monitor paydown progress with visual indicators
- View by category or individual account

### Invoicing

- Create and manage invoices
- Track invoice status (draft, sent, paid, overdue)
- Manage client database
- View outstanding and paid totals

### Cashflow

- Track income sources with various frequencies
- Categorize expenses (essential vs discretionary)
- Monitor savings rate
- Log recent transactions

## Tech Stack

- **React 19** with TypeScript
- **Vite** for fast development and builds
- **Redux Toolkit** for state management
- **React Router** for navigation
- **shadcn/ui** + **Tailwind CSS** for UI components
- **Recharts** for data visualization
- **date-fns** for date formatting
- **Lucide React** for icons

## Getting Started

### Prerequisites

- [Bun](https://bun.sh/) (or Node.js 18+)

### Installation

```bash
cd frontend-web
bun install
```

### Development

```bash
bun run dev
```

Open [http://localhost:5174](http://localhost:5174) in your browser.

### Build

```bash
bun run build
```

### Preview Production Build

```bash
bun run preview
```

## Project Structure

```
src/
├── components/
│   ├── ui/           # shadcn/ui components
│   ├── dialogs/      # Modal dialog components
│   └── Layout.tsx    # Main app layout with sidebar
├── pages/
│   ├── NetWorthPage.tsx
│   ├── DebtsPage.tsx
│   ├── InvoicesPage.tsx
│   ├── ClientsPage.tsx
│   └── CashflowPage.tsx
├── store/
│   ├── slices/       # Redux slices for each feature
│   ├── store.ts      # Redux store configuration
│   ├── hooks.ts      # Typed Redux hooks
│   └── index.ts      # Barrel exports
├── App.tsx           # Root component with routing
├── main.tsx          # Entry point
└── index.css         # Global styles and theme
```

## Design

- Dark glass aesthetic with subtle transparency
- Minimal, clean interface
- **Funnel Sans** for headings
- **Inter** for body text
- Greyscale palette with green accents for positive values