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:** Currently using static JSON files (`src/data/accounts.json`, `src/data/transactions.json`). **The goal is to eventually replace this with a backend API.**

## 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).
*   **Data Loading:** Initial data for accounts and transactions is loaded from static JSON files on the server-side (`src/pages/index.astro`).
*   **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`.

## File Structure Overview

*   `src/components/`: Reusable UI components.
*   `src/data/`: Static JSON data files (temporary).
*   `src/layouts/`: Base page layout(s).
*   `src/pages/`: Astro pages (routes). `index.astro` is the main page.
*   `src/styles/`: Global CSS styles.
*   `src/types.ts`: TypeScript type definitions.
*   `src/utils.ts`: Utility functions (formatting, etc.).
*   `public/`: Static assets.

## Next Steps & TODOs

1.  **Backend API Integration:**
    *   Define the expected API endpoints (e.g., `GET /api/accounts`, `GET /api/accounts/:id/transactions`, `POST /api/transactions`, `PUT /api/transactions/:id`, `DELETE /api/transactions/:id`).
    *   Replace static JSON data fetching in `index.astro` with `fetch` calls to the backend API during server-side rendering (or potentially client-side, depending on strategy).
    *   Update client-side logic to interact with the API for CRUD operations.
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:** As complexity grows, consider a more robust client-side state management solution if passing data via `define:vars` and simple DOM manipulation becomes unwieldy (e.g., using Nano Stores or a more full-featured framework integration if needed later).
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.