Add documentation about using path aliases for imports

.github/copilot-instructions.md

@@ -1,8 +1,8 @@
-# GitHub Copilot Instructions for my-bank-app
+# GitHub Copilot Instructions for Finance App
 
-## Project Goal
+## Project Overview
 
-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).
+This project is a financial transaction management application built with Astro and TypeScript, using Prisma for database operations. It follows a two-column dashboard layout for managing bank accounts and transactions.
 
 ## Technology Stack
 
@@ -134,8 +134,76 @@ This project is a web user interface (UI) for a CRUD (Create, Read, Update, Dele
 
 ## 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.
+### Import Path Aliases
+
+Always use the path aliases defined in `tsconfig.json` instead of relative imports. This makes the code more maintainable and easier to refactor.
+
+```typescript
+// ❌ DON'T use relative imports like this
+import { transactionService } from '../../../../data/db.service';
+import type { Transaction } from '../../../../types';
+
+// ✅ DO use path aliases like this
+import { transactionService } from '@data/db.service';
+import type { Transaction } from '@types';
+```
+
+The following path aliases are configured:
+
+- `@/*`: Maps to `src/*` for any source files
+- `@components/*`: Maps to `src/components/*` for component imports
+- `@layouts/*`: Maps to `src/layouts/*` for layout imports
+- `@data/*`: Maps to `src/data/*` for data services and database operations
+- `@pages/*`: Maps to `src/pages/*` for page components
+- `@styles/*`: Maps to `src/styles/*` for style imports
+- `@stores/*`: Maps to `src/stores/*` for state management
+- `@utils/*`: Maps to `src/utils.ts` for utility functions
+- `@types`: Maps to `src/types.ts` for type imports
+
+### TypeScript Usage
+
+- Use TypeScript for all new files
+- Use proper type annotations and avoid `any` types
+- For imports that are only used as types, use `import type`:
+
+```typescript
+// For values (like services, components)
+import { accountService } from '@data/db.service';
+
+// For types only
+import type { Account, Transaction } from '@types';
+```
+
+### Prisma & Database Operations
+
+- Always handle Prisma's `Decimal` types appropriately:
+  - Convert to `number` using `Number()` when sending to the client
+  - Use the `number | Decimal` union type in interfaces
+
+### Component Structure
+
+- Keep components focused on specific tasks
+- Use Astro components for server-rendered content
+- Use React components (`.tsx`) for interactive UI elements
+
+### API Endpoints
+
+- Follow RESTful conventions
+- Include proper error handling
+- Validate input data thoroughly
+- Return appropriate HTTP status codes
+
+## Styling
+
+- Use CSS variables for consistent theming
+- Follow the established color scheme and design patterns
+- Ensure responsive design works on various screen sizes
+
+## File Structure
+
+Keep new files organized according to the established project structure:
+- Components in `src/components/`
+- API endpoints in `src/pages/api/`
+- Services in `src/data/`
+- State management in `src/stores/`
+- Styles in `src/styles/`