odentas cd1ce09be5 feat: Ajouter tri personnalisable (date début/fin) dans la page contrats

- Ajouter les états sortField et sortOrder au composant PageContrats
- Modifier le hook useContrats pour passer sort et order à l'API
- Adapter l'endpoint /api/contrats pour supporter les paramètres de tri dynamiques
- Rendre les headers 'Début' et 'Fin' cliquables avec indicateurs visuels (▲/▼)
- Tri par défaut: date de fin décroissante (contrats les plus proches d'expirer en premier)

2025-10-20 14:12:34 +02:00

4.7 KiB

Raw Blame History

applyTo
**

Instructions pour les IA 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 :
```
"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

Exemple : fix: Corriger focus trap de la calculatrice

Toujours proposer un git commit et un git push à la fin d'une modification.

⚠️ Points d'Attention

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

4.7 KiB Raw Blame History