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.