# Instructions pour Copilot - Espace Paie Odentas

## 📋 Context du Projet

**Nom du projet** : Nouvel Espace Paie Odentas
**Type** : Application Web Next.js 14 (Full-Stack)
**Langage principal** : TypeScript + React
**Base de données** : Supabase (PostgreSQL)
**Authentification** : Supabase Auth + 2FA TOTP
**Hébergement** : Vercel (région cdg1 - Paris)

## 🎯 Architecture du Projet

### Stack Technologique
- **Frontend** : Next.js 14, React 18, TypeScript, Tailwind CSS
- **Backend** : Next.js API Routes, TypeScript
- **Authentification** : Supabase Auth, TOTP 2FA
- **Base de données** : Supabase PostgreSQL
- **Stockage** : AWS S3, Supabase Storage
- **Signatures électroniques** : Docuseal
- **Analytics** : PostHog
- **PDF** : PDFMonkey

### Structure des Dossiers
```
/app               → Next.js App Router (pages et layouts)
/app/api           → API Routes (devraient être sur cdg1 dans vercel.json)
/components        → Composants React réutilisables
/lib               → Utilitaires et helpers
/hooks             → Hooks React personnalisés
/templates-mails   → Templates d'emails HTML
/public            → Assets statiques
```

## 🔑 Points Importants

### 1. Authentification & Sécurité
- Toujours utiliser `createRouteHandlerClient` pour les routes API
- Le 2FA TOTP est activable mais optionnel
- Les statuts MFA sont : "verified" (activé) et autres (désactivé)
- **Important** : Comparer avec `!== "verified"` au lieu de `=== "unverified"` (le type n'existe pas)

### 2. Configuration Vercel
- **Région des Functions API** : cdg1 (Paris) - À MAINTENIR dans vercel.json
- Les functions ne doivent PAS être sur iad1 (risque de panne)
- Configuration dans `vercel.json` :
  ```json
  "regions": ["cdg1"]
  ```

### 3. Base de Données
- Tables principales :
  - `profiles` → Utilisateurs
  - `organizations` → Entreprises/clients
  - `employees` → Salariés
  - `contracts` → Contrats CDDU et RG
  - `payslips` → Fiches de paie
  - `cotisations` → Cotisations mensuelles
  - `salary_transfers` → Virements salaires

### 4. Régimes de Contrats
- **CDDU** : CDD d'usage (intermittents du spectacle)
  - `CDDU_MONO` : Mono-mois
  - `CDDU_MULTI` : Multi-mois
- **RG** : Régime Général (salaires classiques)

### 5. Composants Clés

#### Formulaire CDDU
- Fichier : `components/contrats/NouveauCDDUForm.tsx`
- Contient un bouton calculatrice pour saisir les montants
- Utilise le composant `Calculator` pour les calculs
- Support des deux régimes (CDDU et RG)

#### Calculatrice
- Fichier : `components/Calculator.tsx`
- Modale draggable avec focus
- **Important** : Vérifier que le focus ne capture pas les autres champs
- Utiliser `calculatorRef.current.contains(document.activeElement)` pour vérifier le focus

### 6. Hooks Personnalisés
- `useDemoMode()` → Mode démo activé/désactivé
- `usePageTitle()` → Définir le titre de la page
- `usePostHog()` → Analytics PostHog

## ✅ Standards de Code

### TypeScript
- Toujours définir les types explicitement
- Utiliser les enums pour les statuts
- Valider les types de statuts MFA avec `!==` plutôt que `===`
- JAMAIS d'emojis dans le code (commentaires, messages, etc.)

### Composants React
- Utiliser "use client" pour les composants interactifs
- Préférer les fonctions pures
- Gestion du focus : vérifier que le focus est bien sur l'élément avant de capturer les événements
- Pour l'UI/UX : Uniquement des icônes Lucide React (depuis `lucide-react`)
- JAMAIS d'emojis dans l'interface utilisateur

### Styling
- Utiliser Tailwind CSS avec les utilitaires de base
- Palette de couleurs : slate, indigo, orange, green, red
- Réutiliser les classes composables (flex, gap, etc.)

## 🐛 Corrections Récentes

- Ajout du bouton calculatrice au formulaire CDDU
- Correction des comparaisons de statut MFA (unverified → !== "verified")
- Correction du focus trap de la calculatrice
- Migration des API Functions de iad1 vers cdg1

## 📝 Conventions de Commit

- `feat:` → Nouvelle fonctionnalité
- `fix:` → Correction de bug
- `chore:` → Tâche de maintenance
- `style:` → Changements de style uniquement
- `refactor:` → Refactorisation de code

## ⚠️ Points d'Attention

1. **Région Vercel** : Toujours vérifier que cdg1 est défini dans vercel.json
2. **Authentification** : Ne jamais exposer les tokens en client-side
3. **Focus management** : Toujours vérifier le focus avant de capturer les événements clavier
4. **Typage MFA** : Utiliser `!== "verified"` pour les comparaisons, jamais `=== "unverified"`
5. **Build local** : Tester avec `npm run build` avant de pousser