finance/.github/copilot-instructions.md

# GitHub Copilot Instructions for my-bank-app

## Project Goal

This project is a web user interface (UI) for a CRUD (Create, Read, Update, Delete) application managing financial transactions for multiple bank accounts. The UI follows a two-column dashboard layout (Alternative 3 from the design phase).

## Technology Stack

*   **Framework:** Astro (latest version)
*   **Language:** TypeScript, JavaScript (client-side scripts), HTML, CSS
*   **Styling:** Plain CSS (`src/styles/global.css`)
*   **Data:** Using Astro's built-in API routes in `src/pages/api/` with persistent database storage via Prisma ORM (`src/data/db.service.ts`).
*   **Development Environment:** VS Code Dev Container using private Docker image (`ghcr.io/acedanger/finance-devcontainer:latest`)

## Development Environment

*   **Dev Container:** The project uses a VS Code Dev Container for consistent development environments.
    *   Container configuration in `.devcontainer/devcontainer.json`
    *   Uses a private container image hosted on GitHub Container Registry
    *   Image: `ghcr.io/acedanger/finance-devcontainer:latest`
    *   Includes all necessary development tools and extensions
    *   Configured with GitHub CLI and authentication
    *   Features Docker-in-Docker support for additional container needs
*   **Container Features:**
    *   Node.js and npm pre-installed
    *   Git and GitHub CLI configured
    *   TypeScript support
    *   VS Code extensions pre-configured
    *   Docker-in-Docker capability
    *   Automatic GitHub authentication
*   **Authentication:**
    *   Requires GitHub Personal Access Token for private container access
    *   Token should be configured in `.devcontainer/.env`
    *   GitHub CLI authentication handled in post-start command

## Current State & Key Features

*   **Layout:** A two-column dashboard layout (`src/layouts/BaseLayout.astro`, `src/pages/index.astro`) is implemented.
    *   **Sidebar:** (`src/components/Sidebar.astro`) Contains account selection dropdown and a collapsible section for adding new transactions. Includes an account summary section.
    *   **Main Content:** (`src/components/MainContent.astro`) Displays the header with the current account name and the transaction list.
*   **Components:** Separate Astro components exist for major UI sections (Sidebar, MainContent, TransactionTable, AddTransactionForm, AccountSummary).
*   **API Integration:** 
    *   API routes structure implemented in `src/pages/api/`
    *   Database integration using Prisma ORM in `src/data/db.service.ts`
    *   All API endpoints implemented and fully functional:
        *   GET /api/accounts - List all accounts
        *   GET /api/accounts/:id - Get single account details
        *   GET /api/accounts/:id/transactions - Get transactions for an account
        *   POST /api/transactions - Create new transaction
        *   PUT /api/transactions/:id - Update existing transaction
        *   DELETE /api/transactions/:id - Delete transaction
    *   Comprehensive error handling and validation
    *   Database persistence with proper transaction support
*   **Account Switching:** Selecting an account from the dropdown in the sidebar correctly updates the Main Content area (header, transaction table) and the Account Summary section using client-side JavaScript (`<script>` tag in `index.astro`).
*   **Collapsible Form:** The "Add Transaction" section in the sidebar (`src/components/AddTransactionForm.astro`) can be expanded and collapsed using client-side JavaScript (`<script>` tag in `AddTransactionForm.astro`).
*   **Basic Formatting:** Utility functions (`src/utils.ts`) exist for formatting currency and dates, used both server-side and client-side (mirrored in `index.astro` script).
*   **Types:** Basic TypeScript types for `Account` and `Transaction` are defined in `src/types.ts`.
*   **State Management:** Client-side state management using NanoStores, providing a reactive state for transactions and account data (`src/stores/transactionStore.ts`).
*   **Database Integration:** Complete integration with a relational database using Prisma ORM, including transaction support to maintain data integrity.

## File Structure Overview

*   `.devcontainer/`: Development container configuration
    *   `devcontainer.json`: VS Code Dev Container configuration
    *   `Dockerfile`: Base container definition (for reference)
    *   `.env.example`: Template for container environment variables
*   `src/components/`: Reusable UI components.
*   `src/data/`: Data store and persistence layer.
    *   `db.service.ts`: Database service layer using Prisma ORM
    *   `prisma.ts`: Prisma client initialization
*   `src/layouts/`: Base page layout(s).
*   `src/pages/`: Astro pages and API routes.
    *   `index.astro`: Main page
    *   `api/`: Backend API endpoints
        *   `accounts/`: Account-related endpoints
        *   `transactions/`: Transaction-related endpoints
*   `src/stores/`: Client-side state management.
    *   `transactionStore.ts`: NanoStore implementation for transactions
*   `src/styles/`: Global CSS styles.
*   `src/types.ts`: TypeScript type definitions.
*   `src/utils.ts`: Utility functions (formatting, etc.).
*   `public/`: Static assets.
*   `prisma/`: Database schema and migrations.
    *   `schema.prisma`: Prisma schema definition
    *   `migrations/`: Database migrations
    *   `seed.ts`: Seed data script

## Next Steps & TODOs

1.  **Fix Update Button Issue:**
    *   Fix the disabled state of the update button in transaction editing mode (see issue #33)
    *   Ensure proper form validation state management
    *   Test updates to transactions thoroughly

2.  **Implement Create Functionality:**
    *   Add client-side JavaScript to the `AddTransactionForm.astro` component (or enhance the script in `index.astro`) to handle form submission.
    *   Prevent default form submission.
    *   Perform basic client-side validation (required fields, numeric amount).
    *   Send a `POST` request to the backend API with the new transaction data.
    *   On success:
        *   Clear the form.
        *   Collapse the form (optional).
        *   Refresh the transaction list for the current account (either by re-fetching or adding the new transaction to the client-side state).
        *   Update the account balance display.
    *   Handle API errors (display messages to the user).

3.  **Implement Update Functionality:**
    *   Add event listeners to the "Edit" buttons in `TransactionTable.astro`.
    *   When "Edit" is clicked:
        *   Expand the `AddTransactionForm` (or potentially use a modal).
        *   Populate the form fields with the data from the selected transaction.
        *   Change the form's submit button/logic to perform an update (`PUT` request to `/api/transactions/:id`).
    *   On successful update:
        *   Clear/reset the form.
        *   Refresh the transaction list.
        *   Update the account balance.
    *   Handle API errors.

4.  **Implement Delete Functionality:**
    *   Add event listeners to the "Delete" buttons in `TransactionTable.astro`.
    *   When "Delete" is clicked:
        *   Show a confirmation dialog (e.g., `window.confirm`).
        *   If confirmed, send a `DELETE` request to `/api/transactions/:id`.
    *   On success:
        *   Remove the transaction row from the UI.
        *   Update the account balance.
    *   Handle API errors.

5.  **Refine State Management:** Continue improving the NanoStores implementation for better reactivity and handling of complex application states.

6.  **Error Handling:** Implement more robust error handling and user feedback for API calls.

7.  **Styling/UI Improvements:** Refine CSS, potentially add loading indicators, improve responsiveness further.

## Code Style & Conventions

*   Use TypeScript where possible.
*   Keep components focused on specific tasks.
*   Utilize utility functions for common tasks like formatting.
*   Comment code where logic is complex.
*   Prioritize semantic HTML and accessibility.