diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index e460738..00a5593 100644 --- a/.github/copilot-instructions.md +++ b/.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:** - * 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 +1. **Implement Frontend Transaction Management:** + * Add client-side JavaScript to the `AddTransactionForm.astro` component to handle form submission + * Implement proper form validation for transaction data + * 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:** - * 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). +2. **Complete UI Interaction for CRUD Operations:** + * Add event listeners to "Edit" buttons in `TransactionTable.astro` + * Implement edit mode in the transaction form + * Add confirmation dialog for transaction deletion + * Ensure account balances update correctly after transactions change + * Implement proper error messaging for failed operations -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. +3. **Enhance Error Handling:** + * Add user-friendly error messages for API errors + * Implement form validation with visual feedback + * Add loading states during API operations + * Handle network errors gracefully -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. +4. **Improve State Management:** + * Refine the NanoStores implementation for better reactivity + * Add proper state synchronization between components + * Implement optimistic UI updates for better perceived performance + * Consider implementing proper state machines for complex UI states -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 diff --git a/README.md b/README.md index 20b3dc5..45f5b09 100644 --- a/README.md +++ b/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