mirror of https://github.com/acedanger/finance.git synced 2025-12-05 22:50:12 -08:00

Files

GitHub Copilot d8678e68ed Refactor transaction components and styles

- Updated imports to use absolute paths for types and utilities.
- Enhanced TransactionTable component with mobile responsiveness and card-based layout.
- Improved loading and error handling in transaction fetching logic.
- Refactored transaction update API to streamline validation and data preparation.
- Added new styles for Radix UI components and improved global styles for better mobile experience.
- Implemented collapsible sections and improved button interactions in the UI.
- Updated tests to reflect changes in component structure and imports.

2025-05-07 17:10:21 -04:00

3.2 KiB

Raw Blame History

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.

Quick Start

Prerequisites
- Docker Desktop installed and running
- VS Code with Remote - Containers extension
- GitHub account with Personal Access Token (PAT)
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:

Create a .env file in the project root with your database connection string:
```
DATABASE_URL="postgresql://username:password@localhost:5432/finance"
```
Run database migrations:
```
npx prisma migrate dev
```
Seed the database with initial data (optional):
```
npx prisma db seed
```
To view and manage your data visually:
```
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:

// ✅ 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 for code formatting and linting. Biome enforces the use of path aliases instead of relative imports. To run Biome checks:

npm run check

To automatically fix issues:

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.

3.2 KiB Raw Blame History