# Financial Transaction Manager

A web application for managing financial transactions across multiple bank accounts.

## Project Overview

*   **Purpose:** Provides a user interface for CRUD operations on financial transactions.
*   **Technology:** Built with Astro, TypeScript, and plain CSS, utilizing Astro API routes.
*   **Layout:** Features a two-column dashboard design with a sidebar for account selection/actions and a main area for transaction display.
*   **Data Management:** Uses Prisma ORM for database operations (`src/data/db.service.ts`), accessed via API endpoints (`src/pages/api/`).
*   **Key Features (Implemented & Planned):** Account switching, transaction listing, adding, editing, and deleting transactions.

## Logs
This app is currently deployed using Cloudflare Pages. The logs can be viewed with the `npx wrangler pages deployment tail --project-name finance` command.

## Development Environment Setup

For detailed setup instructions, including container building, environment configuration, authentication, and troubleshooting, see [ENVIRONMENT_SETUP.md](ENVIRONMENT_SETUP.md).

### Quick Start

1. **Prerequisites**
   - Docker Desktop installed and running
   - VS Code with Remote - Containers extension
   - GitHub account with Personal Access Token (PAT)

2. **Setup Steps**
   - Clone this repository
   - Copy `.devcontainer/.env.example` to `.devcontainer/.env` and add your GitHub PAT
   - Open in VS Code and select "Reopen in Container" when prompted

### Database Setup

The project uses Prisma ORM for database operations. To set up the database:

1. Create a `.env` file in the project root with your database connection string:
   ```
   DATABASE_URL="postgresql://username:password@localhost:5432/finance"
   ```

2. Run database migrations:
   ```bash
   npx prisma migrate dev
   ```

3. Seed the database with initial data (optional):
   ```bash
   npx prisma db seed
   ```

4. To view and manage your data visually:
   ```bash
   npx prisma studio
   ```

## Path Aliases

This project uses TypeScript path aliases for cleaner imports. Instead of using relative paths like `../../../../data/db.service`, use the following aliases:

- `@/*` - Maps to `src/*`
- `@components/*` - Maps to `src/components/*`
- `@layouts/*` - Maps to `src/layouts/*`
- `@data/*` - Maps to `src/data/*`
- `@pages/*` - Maps to `src/pages/*`
- `@styles/*` - Maps to `src/styles/*`
- `@stores/*` - Maps to `src/stores/*`
- `@utils/*` - Maps to `src/utils.ts`
- `@types` - Maps to `src/types.ts`

Example:
```typescript
// ✅ DO use path aliases like this
import { transactionService } from '@data/db.service';
import type { Transaction } from '@types';

// ❌ DON'T use relative imports like this
import { transactionService } from '../../../../data/db.service';
```

### Enforcing Path Aliases with Biome.js

This project uses [Biome.js](https://biomejs.dev/) for code formatting and linting. Biome enforces the use of path aliases instead of relative imports. To run Biome checks:

```bash
npm run check
```

To automatically fix issues:

```bash
npm run check -- --apply
```

The Biome configuration (in `biome.json`) includes rules for import sorting and path alias enforcement. To customize the rules, edit the `biome.json` file.