127 lines
4.5 KiB
Markdown
127 lines
4.5 KiB
Markdown
# 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
|