108 lines
3.3 KiB
Markdown
108 lines
3.3 KiB
Markdown
# Fix : Numéro Congés Spectacles - Page Auto-déclaration
|
||
|
||
## Problème identifié
|
||
|
||
Le champ "Numéro de Congés Spectacles" n'était **pas présent** dans le formulaire de la page d'auto-déclaration (`/auto-declaration`), alors que :
|
||
- ✅ Le champ existe dans la base de données (`salaries.conges_spectacles`)
|
||
- ✅ L'API backend gère correctement ce champ (`/api/auto-declaration/route.ts`)
|
||
- ✅ Le champ était pré-rempli depuis la base de données
|
||
|
||
**Conséquence** : Les salariés ne pouvaient pas saisir ou modifier leur numéro de Congés Spectacles via l'auto-déclaration.
|
||
|
||
## Solution appliquée
|
||
|
||
### 1. Modification de l'interface FormData
|
||
Ajout du champ `conges_spectacles` dans l'interface TypeScript :
|
||
|
||
```typescript
|
||
interface FormData {
|
||
// ... autres champs
|
||
// État civil
|
||
date_naissance: string;
|
||
lieu_naissance: string;
|
||
numero_secu: string;
|
||
conges_spectacles: string; // ← AJOUTÉ
|
||
// ...
|
||
}
|
||
```
|
||
|
||
### 2. Initialisation de l'état
|
||
Ajout de `conges_spectacles: ''` dans l'état initial du formulaire.
|
||
|
||
### 3. Pré-remplissage depuis la base de données
|
||
Ajout de la ligne pour pré-remplir le champ depuis les données du salarié :
|
||
|
||
```typescript
|
||
setFormData(prev => ({
|
||
...prev,
|
||
// ...
|
||
conges_spectacles: data.conges_spectacles || '',
|
||
// ...
|
||
}));
|
||
```
|
||
|
||
### 4. Envoi vers l'API
|
||
Ajout du champ dans les données envoyées lors de la sauvegarde :
|
||
|
||
```typescript
|
||
const updateData = {
|
||
// ...
|
||
conges_spectacles: formData.conges_spectacles || null,
|
||
// ...
|
||
};
|
||
```
|
||
|
||
### 5. Ajout du champ HTML dans le formulaire
|
||
Nouveau champ ajouté dans la section "État civil", après le numéro de Sécurité Sociale :
|
||
|
||
```tsx
|
||
<div>
|
||
<LabelComponent>Votre numéro de Congés Spectacles</LabelComponent>
|
||
<input
|
||
value={formData.conges_spectacles}
|
||
onChange={(e) => setFormData(prev => ({
|
||
...prev,
|
||
conges_spectacles: e.target.value
|
||
}))}
|
||
className="w-full px-3 py-2 rounded-lg border bg-white text-sm"
|
||
placeholder="Numéro d'objet (si intermittent)"
|
||
/>
|
||
<p className="text-[11px] text-slate-500 mt-1">
|
||
Ce champ est facultatif. Il concerne uniquement les intermittents du spectacle.
|
||
</p>
|
||
</div>
|
||
```
|
||
|
||
## Fichiers modifiés
|
||
|
||
- ✅ `/app/auto-declaration/page.tsx` - Ajout du champ dans le formulaire
|
||
- ℹ️ `/app/api/auto-declaration/route.ts` - Aucune modification (déjà fonctionnel)
|
||
|
||
## Emplacement du champ
|
||
|
||
Le champ a été placé dans la section **"État civil"**, juste après le numéro de Sécurité Sociale, car :
|
||
- Il concerne l'état administratif du salarié
|
||
- C'est un numéro d'identification professionnel (comme le NIR)
|
||
- Position logique pour les intermittents du spectacle
|
||
|
||
## Caractéristiques du champ
|
||
|
||
- **Type** : Input texte
|
||
- **Obligatoire** : Non (facultatif)
|
||
- **Public cible** : Intermittents du spectacle
|
||
- **Placeholder** : "Numéro d'objet (si intermittent)"
|
||
- **Aide** : Message explicatif précisant que c'est facultatif
|
||
|
||
## Tests recommandés
|
||
|
||
1. ✅ Vérifier que le champ s'affiche correctement
|
||
2. ✅ Tester la saisie d'un numéro Congés Spectacles
|
||
3. ✅ Vérifier la sauvegarde en base de données
|
||
4. ✅ Tester le pré-remplissage si un numéro existe déjà
|
||
5. ✅ Vérifier que le champ reste facultatif (pas d'erreur si vide)
|
||
|
||
## Validation
|
||
|
||
- Le champ n'a pas de validation spécifique (format libre)
|
||
- Il n'est pas obligatoire
|
||
- Accepte n'importe quel texte/format
|