diff --git a/.gitignore b/.gitignore index d35a5e3..8292551 100644 --- a/.gitignore +++ b/.gitignore @@ -45,3 +45,5 @@ next-env.d.ts /src/generated/prisma /db/data + +/graphify-out diff --git a/copilot-instructions.md b/copilot-instructions.md new file mode 100644 index 0000000..c5dc4d0 --- /dev/null +++ b/copilot-instructions.md @@ -0,0 +1,423 @@ +# Copilot Instructions for Annas Rechnungsmanager + +**Project**: German accounting & invoice management system for tax consultants +**Tech Stack**: React Router v7, TypeScript, Prisma, MariaDB, Tailwind CSS v4, Docker +**Language**: English for code/comments, German for business logic and docs + +--- + +## Quick Start for Copilot + +### 1. Setup & Environment +Before making any changes, ensure the environment is ready: + +```bash +npm install # Install dependencies +cp .env.example .env # Create .env from example +npx prisma migrate deploy # Apply database migrations +npm run db:seed # Seed initial data (optional) +npm run dev # Start dev server on http://localhost:5173 +``` + +**Database**: Requires MariaDB 10.5+ (or MySQL 8.0+). Can run via Docker: +```bash +docker-compose up -d # Starts MariaDB, Redis (if configured) +``` + +### 2. Codebase Map +- **`app/`** — React Router v7 (file-based routing, SSR) + - `routes/` — Page routes + API endpoints (REST) + - `components/` — Shared UI (shadcn/ui + Tailwind) + - `lib/` — Business logic, DB queries, utils + - `session.server.ts` — Auth & cookie sessions +- **`prisma/`** — Database schema, migrations, seed script +- **`scripts/`** — CLI helpers (setup-admin, reset-password) +- **`public/`** — Static assets (SVGs, images) +- **`graphify-out/`** — Knowledge graph (visual map of code - see GRAPH_REPORT.md) + +### 3. Key Files to Know +| File | Purpose | +|------|---------| +| `prisma/schema.prisma` | Data model (Users, Companies, Invoices, Customers, etc.) | +| `app/root.tsx` | Root layout, error boundaries, global styles | +| `app/entry.server.tsx` | Server-side rendering entry | +| `app/session.server.ts` | Auth logic, session management | +| `app/lib/tax.ts` | German tax calculations (USt, AFA) | +| `app/lib/prisma.server.ts` | DB client initialization | + +--- + +## Development Workflows + +### Adding a New Feature +1. **Understand the domain**: Read `CLAUDE.md` section 1 (project overview) +2. **Find the god node**: Check `graphify-out/GRAPH_REPORT.md` for related files +3. **Implement in layers**: + - Add schema to `prisma/schema.prisma` → `npx prisma migrate dev` + - Create API endpoint in `app/routes/api.*` + - Create UI route in `app/routes/` + - Add business logic to `app/lib/` +4. **Test**: `npm run typecheck && npm run lint && npm run test` (if tests exist) +5. **Verify in dev**: `npm run dev` → test manually in browser + +### Editing Existing Routes/Components +- Routes use **file-based routing**: `app/routes/companies.$id.tsx` → `/companies/123` +- Nested routes: `app/routes/companies.$id.invoices.tsx` → `/companies/123/invoices` +- API routes: `app/routes/api.invoices.ts` → `POST /api/invoices` +- Use `loader` for GET data, `action` for POST/PUT/DELETE (Remix/React Router pattern) + +### Database Changes +```bash +# Make changes to prisma/schema.prisma, then: +npx prisma migrate dev --name description # Creates migration + applies it +npx prisma studio # GUI browser for data +``` + +### Authentication +- Sessions stored in browser cookies (signed, httpOnly) +- Check `app/session.server.ts` for session helpers +- Protect routes with `requireAuth()` or check `session` in loader +- Passwords hashed with bcryptjs + +--- + +## Code Style & Conventions + +### TypeScript +- **Strict mode enabled** (`strict: true` in tsconfig.json) +- Use `unknown` for external data, then guard with type checks +- Don't use `any` — use `unknown` + assertion if needed +- Nullable types: prefer explicit `| null` over optional `?` + +### React Router v7 +- Use **loaders** for data fetching (server-side) +- Use **actions** for mutations +- **Return** `redirect()`, `json()`, or React components from loaders +- Use `
` instead of `` for proper handling + +### Database Queries +- Use Prisma (never raw SQL in business code) +- Keep queries in `app/lib/` (not in components or routes) +- Example: `app/lib/invoices.ts` exports `getInvoiceById()`, `createInvoice()`, etc. + +### UI Components +- Use **shadcn/ui** components (in `app/components/ui/`) +- Style with **Tailwind CSS v4** utility classes +- Keep components small, prefer composition over props drilling +- Use ``, `