Update Copilot instructions to reflect database integration

This commit is contained in:
GitHub Copilot
2025-05-06 08:57:53 +00:00
parent a5dcad1486
commit a8ec2734c8

View File

@@ -9,7 +9,7 @@ This project is a web user interface (UI) for a CRUD (Create, Read, Update, Dele
* **Framework:** Astro (latest version) * **Framework:** Astro (latest version)
* **Language:** TypeScript, JavaScript (client-side scripts), HTML, CSS * **Language:** TypeScript, JavaScript (client-side scripts), HTML, CSS
* **Styling:** Plain CSS (`src/styles/global.css`) * **Styling:** Plain CSS (`src/styles/global.css`)
* **Data:** Using Astro's built-in API routes in `src/pages/api/` with a temporary in-memory store (`src/data/store.ts`). **The goal is to eventually replace the in-memory store with a persistent database.** * **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:** VS Code Dev Container using private Docker image (`ghcr.io/acedanger/finance-devcontainer:latest`)
## Development Environment ## Development Environment
@@ -41,20 +41,22 @@ This project is a web user interface (UI) for a CRUD (Create, Read, Update, Dele
* **Components:** Separate Astro components exist for major UI sections (Sidebar, MainContent, TransactionTable, AddTransactionForm, AccountSummary). * **Components:** Separate Astro components exist for major UI sections (Sidebar, MainContent, TransactionTable, AddTransactionForm, AccountSummary).
* **API Integration:** * **API Integration:**
* API routes structure implemented in `src/pages/api/` * API routes structure implemented in `src/pages/api/`
* Temporary data store in `src/data/store.ts` * Database integration using Prisma ORM in `src/data/db.service.ts`
* All API endpoints implemented and ready to use: * All API endpoints implemented and fully functional:
* GET /api/accounts - List all accounts * GET /api/accounts - List all accounts
* GET /api/accounts/:id - Get single account details * GET /api/accounts/:id - Get single account details
* GET /api/accounts/:id/transactions - Get transactions for an account * GET /api/accounts/:id/transactions - Get transactions for an account
* POST /api/transactions - Create new transaction * POST /api/transactions - Create new transaction
* PUT /api/transactions/:id - Update existing transaction * PUT /api/transactions/:id - Update existing transaction
* DELETE /api/transactions/:id - Delete transaction * DELETE /api/transactions/:id - Delete transaction
* Error handling and validation included * Comprehensive error handling and validation
* Prepared for future database integration with modular store design * 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`). * **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`). * **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). * **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`. * **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 ## File Structure Overview
@@ -64,22 +66,32 @@ This project is a web user interface (UI) for a CRUD (Create, Read, Update, Dele
* `.env.example`: Template for container environment variables * `.env.example`: Template for container environment variables
* `src/components/`: Reusable UI components. * `src/components/`: Reusable UI components.
* `src/data/`: Data store and persistence layer. * `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/layouts/`: Base page layout(s).
* `src/pages/`: Astro pages and API routes. * `src/pages/`: Astro pages and API routes.
* `index.astro`: Main page * `index.astro`: Main page
* `api/`: Backend API endpoints * `api/`: Backend API endpoints
* `accounts/`: Account-related endpoints * `accounts/`: Account-related endpoints
* `transactions/`: Transaction-related endpoints * `transactions/`: Transaction-related endpoints
* `src/stores/`: Client-side state management.
* `transactionStore.ts`: NanoStore implementation for transactions
* `src/styles/`: Global CSS styles. * `src/styles/`: Global CSS styles.
* `src/types.ts`: TypeScript type definitions. * `src/types.ts`: TypeScript type definitions.
* `src/utils.ts`: Utility functions (formatting, etc.). * `src/utils.ts`: Utility functions (formatting, etc.).
* `public/`: Static assets. * `public/`: Static assets.
* `prisma/`: Database schema and migrations.
* `schema.prisma`: Prisma schema definition
* `migrations/`: Database migrations
* `seed.ts`: Seed data script
## Next Steps & TODOs ## Next Steps & TODOs
1. **Complete API Implementation:** 1. **Fix Update Button Issue:**
* Add error handling and validation * Fix the disabled state of the update button in transaction editing mode (see issue #33)
* Prepare for future database integration * Ensure proper form validation state management
* Test updates to transactions thoroughly
2. **Implement Create Functionality:** 2. **Implement Create Functionality:**
* Add client-side JavaScript to the `AddTransactionForm.astro` component (or enhance the script in `index.astro`) to handle form submission. * Add client-side JavaScript to the `AddTransactionForm.astro` component (or enhance the script in `index.astro`) to handle form submission.
* Prevent default form submission. * Prevent default form submission.
@@ -91,6 +103,7 @@ This project is a web user interface (UI) for a CRUD (Create, Read, Update, Dele
* Refresh the transaction list for the current account (either by re-fetching or adding the new transaction to the client-side state). * 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. * Update the account balance display.
* Handle API errors (display messages to the user). * Handle API errors (display messages to the user).
3. **Implement Update Functionality:** 3. **Implement Update Functionality:**
* Add event listeners to the "Edit" buttons in `TransactionTable.astro`. * Add event listeners to the "Edit" buttons in `TransactionTable.astro`.
* When "Edit" is clicked: * When "Edit" is clicked:
@@ -102,6 +115,7 @@ This project is a web user interface (UI) for a CRUD (Create, Read, Update, Dele
* Refresh the transaction list. * Refresh the transaction list.
* Update the account balance. * Update the account balance.
* Handle API errors. * Handle API errors.
4. **Implement Delete Functionality:** 4. **Implement Delete Functionality:**
* Add event listeners to the "Delete" buttons in `TransactionTable.astro`. * Add event listeners to the "Delete" buttons in `TransactionTable.astro`.
* When "Delete" is clicked: * When "Delete" is clicked:
@@ -111,8 +125,11 @@ This project is a web user interface (UI) for a CRUD (Create, Read, Update, Dele
* Remove the transaction row from the UI. * Remove the transaction row from the UI.
* Update the account balance. * Update the account balance.
* Handle API errors. * 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).
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. 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. 7. **Styling/UI Improvements:** Refine CSS, potentially add loading indicators, improve responsiveness further.
## Code Style & Conventions ## Code Style & Conventions