geo/prompts/widget-formulaire-passage-modal.md

🎯 Prompt : Widget Formulaire Passage Modal Cross-Platform

Contexte

Développement d'un widget modal de formulaire de passage pour GEOSECTOR, compatible Svelte (web) et Flutter (mobile).

Prompt à utiliser avec Cline/Claude

Je développe un widget modal de formulaire de passage pour GEOSECTOR qui doit fonctionner de manière identique sur :
- Web avec Svelte/SvelteKit
- Mobile avec Flutter

### Spécifications du widget

#### Interface utilisateur
- Modal centré avec overlay semi-transparent
- Formulaire avec 4 champs principaux :
  1. **Date** : sélecteur de date natif
  2. **Heure** : sélecteur d'heure (format 24h)
  3. **Commentaire** : textarea avec compteur (max 500 caractères)
  4. **Statut** : dropdown avec options ["En attente", "Validé", "Rejeté", "En cours"]

#### Fonctionnalités avancées
- Validation en temps réel avec messages d'erreur contextuels
- Sauvegarde automatique toutes les 30 secondes (draft local)
- Animations d'ouverture/fermeture fluides
- Gestion des états : loading, success, error
- Boutons d'action : Annuler, Sauvegarder (draft), Valider (final)

#### Contraintes techniques
- Design system cohérent entre Svelte et Flutter
- Accessibilité : labels, focus management, navigation clavier
- Responsive : adaptation automatique mobile/desktop
- Performance : lazy loading du composant
- Validation côté client + préparation validation serveur

### Structure souhaitée

#### Svelte (lib/components/PassageFormModal.svelte)

<script> // Props et logique de validation // Store pour gestion état // Auto-save logic </script>

```

Flutter (lib/widgets/passage_form_modal.dart)

class PassageFormModal extends StatefulWidget {
  // Widget avec même logique qu'en Svelte
  // Form validation
  // Auto-save functionality
}

Peux-tu m'accompagner dans le développement de ce widget en respectant ces spécifications et en optimisant pour la réutilisabilité ?

## Bonnes pratiques à appliquer
- Utiliser des validateurs côté client robustes
- Implémenter un système de debouncing pour l'auto-save
- Gérer proprement les animations et transitions
- Prévoir la gestion d'erreur réseau
- Tester l'accessibilité sur les deux plateformes

## Tests suggérés
- Tests unitaires de validation
- Tests d'intégration du formulaire
- Tests d'accessibilité
- Tests de performance (auto-save)