Update project documentation for database integration

- Update README.md with database setup instructions and path alias usage
- Add comprehensive database connection and migration instructions
- Document TypeScript path aliases with clear usage examples
- Update .github/copilot-instructions.md with current project state
- Remove outdated TODOs related to database implementation
- Update Next Steps section to focus on UI implementation tasks
- Add guidelines for handling Prisma Decimal types with proper conversion
- Improve developer onboarding with clearer setup instructions

.github/copilot-instructions.md

@@ -87,50 +87,49 @@ This project is a financial transaction management application built with Astro
 
 ## Next Steps & TODOs
 
-1.  **Fix Update Button Issue:**
+1. **Implement Frontend Transaction Management:**
-    *   Fix the disabled state of the update button in transaction editing mode (see issue #33)
+   * Add client-side JavaScript to the `AddTransactionForm.astro` component to handle form submission
-    *   Ensure proper form validation state management
+   * Implement proper form validation for transaction data
-    *   Test updates to transactions thoroughly
+   * Connect the form to the API endpoints using fetch requests
+   * Handle success/error responses from the API
+   * Update UI state after successful operations
 
-2.  **Implement Create Functionality:**
+2. **Complete UI Interaction for CRUD Operations:**
-    *   Add client-side JavaScript to the `AddTransactionForm.astro` component (or enhance the script in `index.astro`) to handle form submission.
+   * Add event listeners to "Edit" buttons in `TransactionTable.astro`
-    *   Prevent default form submission.
+   * Implement edit mode in the transaction form
-    *   Perform basic client-side validation (required fields, numeric amount).
+   * Add confirmation dialog for transaction deletion
-    *   Send a `POST` request to the backend API with the new transaction data.
+   * Ensure account balances update correctly after transactions change
-    *   On success:
+   * Implement proper error messaging for failed operations
-        *   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:**
+3. **Enhance Error Handling:**
-    *   Add event listeners to the "Edit" buttons in `TransactionTable.astro`.
+   * Add user-friendly error messages for API errors
-    *   When "Edit" is clicked:
+   * Implement form validation with visual feedback
-        *   Expand the `AddTransactionForm` (or potentially use a modal).
+   * Add loading states during API operations
-        *   Populate the form fields with the data from the selected transaction.
+   * Handle network errors gracefully
-        *   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:**
+4. **Improve State Management:**
-    *   Add event listeners to the "Delete" buttons in `TransactionTable.astro`.
+   * Refine the NanoStores implementation for better reactivity
-    *   When "Delete" is clicked:
+   * Add proper state synchronization between components
-        *   Show a confirmation dialog (e.g., `window.confirm`).
+   * Implement optimistic UI updates for better perceived performance
-        *   If confirmed, send a `DELETE` request to `/api/transactions/:id`.
+   * Consider implementing proper state machines for complex UI states
-    *   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.
+5. **Add User Authentication & Authorization:**
+   * Implement user login/registration functionality
+   * Add authentication middleware to API endpoints
+   * Restrict access to accounts based on user ownership
+   * Implement session management
 
-6.  **Error Handling:** Implement more robust error handling and user feedback for API calls.
+6. **Enhance Testing Coverage:**
+   * Add more unit tests for UI components
+   * Expand integration tests for API endpoints
+   * Add end-to-end tests for critical user flows
+   * Implement automated testing in CI pipeline
 
-7.  **Styling/UI Improvements:** Refine CSS, potentially add loading indicators, improve responsiveness further.
+7. **UI/UX Improvements:**
+   * Add loading indicators for async operations
+   * Improve mobile responsiveness
+   * Add dark mode support
+   * Enhance accessibility features
 
 ## Code Style & Conventions
 

README.md

@@ -1,4 +1,4 @@
-# My Bank App - Financial Transaction Manager
+# Financial Transaction Manager
 
 A web application for managing financial transactions across multiple bank accounts.
 
@@ -7,7 +7,7 @@ A web application for managing financial transactions across multiple bank accou
 *   **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:** Currently uses an in-memory data store (`src/data/store.ts`) accessed via API endpoints (`src/pages/api/`).
+*   **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
@@ -33,6 +33,52 @@ The MCP server will automatically start when you open the project in a devcontai
 
 ### 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';
+```
+
 ## Development Container Setup
 
 ### GitHub Personal Access Token