diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 61f2604..e460738 100644 --- a/.github/copilot-instructions.md +++ b/.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. \ No newline at end of file +### 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/` \ No newline at end of file