feat(#173): carte congés maquette + mini-spec bulles pour alignement back

Layout aqua (valise, période une ligne, pilules peintes, lien agenda), encre pétrole, et docs/32 pour palette sémantique + demandes API couleur. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-01 17:10:41 +02:00
parent 8b1c4555ad
commit 32f6eeeeed
7 changed files with 407 additions and 17 deletions
@@ -0,0 +1,159 @@
+# Mini-spec · Bulles / file d’attention (#173)
+
+*Front · octobre 2026 — pour alignement backend (garant de la spec API).*
+
+---
+
+## 1. Contexte / objectif
+
+Les bulles (cartes) sont la **file d’attention** du quotidien parent / AM : décisions et infos proches (congés, arrêt maladie, absences, plus tard soins / admin).
+
+Cette note formalise :
+1. **Ce qui est déjà en place côté front** (branche `feature/173-feed-bulles-parent`).
+2. La **palette sémantique** retenue (couleur = famille).
+3. Les **évolutions API** souhaitées pour que le back pousse les bonnes `couleur` / types.
+4. Les **idées de bulles futures** (non branchées).
+
+Les cartes restent une **mémoire courte** (`purge_at`) ; la source de vérité absences / congés reste `absences_garde` (voir `31_MINI-SPEC-QUOTIDIEN-PARENT-AM.md`).
+
+---
+
+## 2. Contrat API actuel (rappel)
+
+Endpoint principal : `GET /api/v1/cards` (filtre couple / placement).
+
+Champs utiles côté UI :
+
+| Champ | Rôle UI |
+|-------|---------|
+| `type_code` | Layout + libellé sémantique + icône |
+| `couleur` | Teinte du fond pastel (`assets/cards/card_*_h.png`) |
+| `titre` | Fallback si `type_code` inconnu |
+| `statut` | `ouverte` · `refusee` · `traitee` |
+| `response_mode` | `none` · `ack` · `accept_refuse` |
+| `is_creator` | Masque les boutons réponse pour le créateur |
+| `payload.date_debut` / `date_fin` | Période affichée |
+| `payload.motif` | Non affiché sur la maquette congés actuelle |
+| `last_refuse_comment` | Affiché si `refusee` |
+| `id_absence` | Lien métier absence / congé |
+| `purge_at` | Péremption file |
+
+**Règle front actuelle :** le destinataire peut répondre si `!is_creator && statut == ouverte && response_mode != none`.
+
+---
+
+## 3. Évolutions front déjà livrées (#173)
+
+### 3.1 Feed
+
+- Widget partagé `CartesFeed` (parent + AM).
+- Fond carte via widget `Carte` (bandeau / 9-slice horizontal).
+- Dégradés haut / bas sur la liste scrollable.
+- Plus de libellés « À traiter / Traité » : actions via **modales** accepter / refuser / ack.
+- Libellés UI sémantiques (indépendants du `titre` API brut) :
+  - `conge_am` → « Demande de congés »
+  - `arret_maladie_am` → « Arrêt maladie »
+  - `absence_enfant` (+ `_modif`) → « Notification d’absence »
+
+### 3.2 Carte **congés** (`conge_am`) — maquette validée
+
+| Élément | Comportement |
+|---------|----------------|
+| Fond | **Aqua** forcé côté front (même si l’API envoie encore `lavender`) |
+| Encre | Pétrole désaturé `#315F63` (titre) ; date un peu plus claire `#4A7276` ; lien `#2B5868` |
+| Icône | Valise `assets/images/valise.png` |
+| Période | Une ligne type « Du 04 au 06 novembre 2026 » + petite icône calendrier |
+| Actions | Pilules peintes ✓ vert / ✕ corail (`btn_coche_pilule` / `btn_croix_pilule`) si `accept_refuse` |
+| Lien | « Ouvrir dans l’agenda ↗ » (stub UI pour l’instant) |
+| Opacité | Carte atténuée si `traitee` (sauf règle arrêt maladie ci-dessous) |
+
+### 3.3 Arrêt maladie (`arret_maladie_am`)
+
+- Reste **visible / opaque** tant que la période n’est pas finie (`date_fin` jour inclus), même si `statut == traitee`.
+- Icône thermomètre (asset dédié). Fond encore piloté par `couleur` API (cible produit : **bleu** — voir §4).
+
+### 3.4 Assets couleurs horizontales
+
+Teintes dispo dans `frontend/assets/cards/` (V + H), dont **`aqua`** ajouté pour les congés.
+
+Clés API reconnues côté front : `red` · `pink` · `peach` · `lime` · `lavender` · `green` · `blue` · **`aqua`**. Défaut UI si inconnu : `peach`.
+
+---
+
+## 4. Palette sémantique (alignement demandé)
+
+| Couleur API (`couleur`) | Famille | Types / exemples |
+|-------------------------|---------|------------------|
+| **`aqua`** | Congés | `conge_am` |
+| **`blue`** | Arrêt maladie | `arret_maladie_am` |
+| **`pink`** | Soins du quotidien | médicament, température, bobo, crème… (futur) |
+| **`peach`** | Absence / info pratique | `absence_enfant`, `absence_enfant_modif` |
+| **`lavender`** | Administratif / autre | infos admin, divers (à utiliser avec parcimonie) |
+
+**Principes**
+
+- La **couleur** = famille (lisible sans lire tout le texte).
+- L’**icône** précise l’action (surtout sur fond rose : thermomètre, flacon, pansement, croix de soin…).
+- Rose = doux / rassurant, **pas** une alerte médicale forte.
+- Éviter le lavande pour les congés (trop « admin », dissonant avec valise / aqua).
+
+### Demande backend (prioritaire)
+
+1. Seeds / création de cartes : `conge_am` → `couleur: "aqua"` (le front force déjà ; l’API devrait être source de vérité).
+2. `arret_maladie_am` → `couleur: "blue"`.
+3. `absence_enfant*` → `couleur: "peach"`.
+4. Documenter les valeurs autorisées de `couleur` (enum / check) pour inclure `aqua`.
+5. Ne plus mapper les congés sur `lavender`.
+
+---
+
+## 5. Idées de bulles futures (hors scope #173)
+
+Non implémentées ; pour anticipation contrat types + couleurs.
+
+| Famille | Couleur | Exemples de `type_code` (propositions) | `response_mode` typique | Icônes (ex.) |
+|---------|---------|----------------------------------------|-------------------------|--------------|
+| Soins | `pink` | `soin_temperature`, `soin_medicament`, `soin_bobo`, `soin_creme` | `ack` (parent) | thermomètre, flacon, pansement, tube |
+| Sortie / autorisation | `peach` ou `lavender` | `sortie_a_valider` | `accept_refuse` | à définir |
+| Admin | `lavender` | `info_admin`, `document_a_fournir` | `ack` / `none` | classeur, tampon |
+| Congé / maladie (évol.) | `aqua` / `blue` | modif période, annulation | selon métier | valise / thermomètre |
+
+**Variante soins :** un seul fond rose ; l’icône change selon l’événement — la famille « santé/soin » reste immédiate.
+
+---
+
+## 6. Comportements métier à ne pas casser
+
+- Créateur : pas de boutons réponse ; éventuel libellé « En attente de réponse ».
+- Refus : afficher `last_refuse_comment` si présent.
+- Congé : `accept_refuse` côté destinataire.
+- Absence enfant : souvent info / ack (pas de veto AM en V1 — voir mini-spec quotidien).
+- Péremption : respecter `purge_at` / retention ; pas un historique long.
+
+---
+
+## 7. Fichiers front de référence
+
+- `frontend/lib/models/carte_bulle.dart` — mapping type → libellé / icône / fond
+- `frontend/lib/widgets/quotidien/cartes_feed.dart` — layout feed + carte congés
+- `frontend/lib/models/card_assets.dart` — enum teintes dont `aqua`
+- Assets : `frontend/assets/cards/card_aqua(_h).png`, `frontend/assets/images/valise.png`, `frontend/assets/images/cartes/btn_*_pilule.png`
+
+---
+
+## 8. Non-régression / recettes suggérées (back + front)
+
+- [ ] Carte `conge_am` créée avec `couleur=aqua` (et lisible si encore lavande côté vieux seeds grâce au forçage front).
+- [ ] Accept / refuse congé → statut + commentaire refus.
+- [ ] Arrêt maladie traité mais période en cours → reste visible côté destinataire.
+- [ ] Filtre couple / placement : une seule file pour le couple actif.
+- [ ] Aucune régression sur `absence_enfant` (création parent → bulle AM).
+
+---
+
+## 9. Références
+
+- Ticket front : **#173**
+- Contrat cartes / réponses : **#194** (si applicable)
+- Quotidien parent–AM : `docs/31_MINI-SPEC-QUOTIDIEN-PARENT-AM.md`
+- Maquette congés : `ressources/bulle_congés.jpg`
@@ -108,7 +108,7 @@ class CarteBulle {
  String? get iconAsset {
    switch (typeCode) {
      case 'conge_am':
-        return 'assets/images/cartes/icon_carte_conges2.png';
+        return 'assets/images/valise.png';
      case 'arret_maladie_am':
        return 'assets/images/cartes/icon_carte_maladie.png';
      case 'absence_enfant':
@@ -405,6 +405,13 @@ class _CartesFeedState extends State<CartesFeed> {
 }

 class _BulleTile extends StatelessWidget {
+  /// Encre aqua foncé — harmonisée fond aqua / valise (pas le violet).
+  static const Color _aquaInk = Color(0xFF315F63);
+  /// Date : même famille, ~12 % plus claire.
+  static const Color _aquaDate = Color(0xFF4A7276);
+  /// Lien agenda : légère dérive bleue.
+  static const Color _aquaLink = Color(0xFF2B5868);
+
  final CarteBulle card;
  final bool busy;
  final VoidCallback onAccept;
@@ -419,11 +426,7 @@ class _BulleTile extends StatelessWidget {
    required this.onRefuse,
  });

-  String _fmtLong(String? iso) {
-    if (iso == null || iso.isEmpty) return '…';
-    final dt = DateTime.tryParse(iso);
-    if (dt == null) return iso;
-    const mois = [
+  static const _mois = [
    'janvier',
    'février',
    'mars',
@@ -437,8 +440,37 @@ class _BulleTile extends StatelessWidget {
    'novembre',
    'décembre',
  ];
+
+  String _fmtLong(String? iso) {
+    if (iso == null || iso.isEmpty) return '…';
+    final dt = DateTime.tryParse(iso);
+    if (dt == null) return iso;
    final jj = dt.day.toString().padLeft(2, '0');
-    return '$jj ${mois[dt.month - 1]} ${dt.year}';
+    return '$jj ${_mois[dt.month - 1]} ${dt.year}';
+  }
+
+  /// Une ligne type maquette : « Du 04 au 06 novembre 2026 ».
+  String _fmtPeriodeUneLigne() {
+    final d1 = DateTime.tryParse(card.dateDebut ?? '');
+    final d2 = DateTime.tryParse(card.dateFin ?? '');
+    if (d1 == null && d2 == null) return '';
+    if (d1 != null && d2 == null) return 'Le ${_fmtLong(card.dateDebut)}';
+    if (d1 == null && d2 != null) return 'Au ${_fmtLong(card.dateFin)}';
+    final a = d1!;
+    final b = d2!;
+    final j1 = a.day.toString().padLeft(2, '0');
+    final j2 = b.day.toString().padLeft(2, '0');
+    if (a.year == b.year && a.month == b.month && a.day == b.day) {
+      return 'Le $j1 ${_mois[a.month - 1]} ${a.year}';
+    }
+    if (a.year == b.year && a.month == b.month) {
+      return 'Du $j1 au $j2 ${_mois[a.month - 1]} ${a.year}';
+    }
+    if (a.year == b.year) {
+      return 'Du $j1 ${_mois[a.month - 1]} au $j2 ${_mois[b.month - 1]} ${a.year}';
+    }
+    return 'Du $j1 ${_mois[a.month - 1]} ${a.year} '
+        'au $j2 ${_mois[b.month - 1]} ${b.year}';
  }

  /// Arrêt maladie : reste opaque tant que la période n’est pas finie.
@@ -449,6 +481,175 @@ class _BulleTile extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    if (card.isCongeAm) return _buildConge(context);
+    return _buildGeneric(context);
+  }
+
+  Widget _buildConge(BuildContext context) {
+    final periode = _fmtPeriodeUneLigne();
+
+    return Opacity(
+      opacity: _attenuee ? 0.55 : 1,
+      child: Carte(
+        assetPath: card.backgroundAsset,
+        constraints: const BoxConstraints(minHeight: 140),
+        padding: const EdgeInsets.fromLTRB(22, 18, 18, 14),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        card.titreAffiche,
+                        maxLines: 2,
+                        overflow: TextOverflow.ellipsis,
+                        style: GoogleFonts.merienda(
+                          fontSize: 18,
+                          fontWeight: FontWeight.w700,
+                          color: _aquaInk,
+                        ),
+                      ),
+                      if (periode.isNotEmpty) ...[
+                        const SizedBox(height: 10),
+                        Row(
+                          crossAxisAlignment: CrossAxisAlignment.center,
+                          children: [
+                            Image.asset(
+                              'assets/images/cartes/icon_calendrier_crayon.png',
+                              width: 28,
+                              height: 28,
+                              fit: BoxFit.contain,
+                              filterQuality: FilterQuality.high,
+                            ),
+                            const SizedBox(width: 8),
+                            Expanded(
+                              child: Text(
+                                periode,
+                                maxLines: 2,
+                                overflow: TextOverflow.ellipsis,
+                                style: GoogleFonts.merienda(
+                                  fontSize: 15,
+                                  fontWeight: FontWeight.w600,
+                                  color: _aquaDate,
+                                  height: 1.25,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ],
+                      if (card.statut == CarteStatut.refusee) ...[
+                        const SizedBox(height: 8),
+                        Text(
+                          card.lastRefuseComment != null &&
+                                  card.lastRefuseComment!.trim().isNotEmpty
+                              ? 'Refusé — ${card.lastRefuseComment}'
+                              : 'Refusé',
+                          maxLines: 2,
+                          overflow: TextOverflow.ellipsis,
+                          style: GoogleFonts.merriweather(
+                            fontSize: 12,
+                            fontStyle: FontStyle.italic,
+                            color: _aquaInk,
+                          ),
+                        ),
+                      ] else if (card.statut == CarteStatut.ouverte &&
+                          card.isCreator) ...[
+                        const SizedBox(height: 8),
+                        Text(
+                          'En attente de réponse',
+                          style: GoogleFonts.merriweather(
+                            fontSize: 12,
+                            color: QuotidienTheme.muted,
+                          ),
+                        ),
+                      ],
+                    ],
+                  ),
+                ),
+                if (card.iconAsset != null) ...[
+                  const SizedBox(width: 8),
+                  Image.asset(
+                    card.iconAsset!,
+                    width: 72,
+                    height: 72,
+                    fit: BoxFit.contain,
+                    filterQuality: FilterQuality.high,
+                  ),
+                ],
+              ],
+            ),
+            const SizedBox(height: 10),
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                if (card.peutRepondre)
+                  busy
+                      ? const SizedBox(
+                          width: 28,
+                          height: 28,
+                          child: CircularProgressIndicator(strokeWidth: 2),
+                        )
+                      : Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            _PilulePeinteButton(
+                              asset:
+                                  'assets/images/cartes/btn_coche_pilule.png',
+                              tooltip: 'Accepter',
+                              onTap: onAccept,
+                            ),
+                            const SizedBox(width: 10),
+                            _PilulePeinteButton(
+                              asset:
+                                  'assets/images/cartes/btn_croix_pilule.png',
+                              tooltip: 'Refuser',
+                              onTap: onRefuse,
+                            ),
+                          ],
+                        ),
+                const Spacer(),
+                InkWell(
+                  onTap: () {
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      const SnackBar(
+                        content: Text('Agenda — à venir.'),
+                        duration: Duration(seconds: 2),
+                      ),
+                    );
+                  },
+                  borderRadius: BorderRadius.circular(6),
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 4,
+                      vertical: 4,
+                    ),
+                    child: Text(
+                      'Ouvrir dans l’agenda ↗',
+                      style: GoogleFonts.merienda(
+                        fontSize: 13,
+                        fontWeight: FontWeight.w600,
+                        color: _aquaLink,
+                        decoration: TextDecoration.underline,
+                        decorationColor: _aquaLink,
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildGeneric(BuildContext context) {
    final memeJour = card.dateDebut != null &&
        card.dateFin != null &&
        card.dateDebut == card.dateFin;
@@ -606,7 +807,37 @@ class _BulleTile extends StatelessWidget {
  }
 }

-/// Bouton pilule dessiné pleine largeur (fond pastel + coche / croix).
+/// Bouton pilule peinte (coche / croix intégrées) — carte congés.
+class _PilulePeinteButton extends StatelessWidget {
+  final String asset;
+  final String tooltip;
+  final VoidCallback onTap;
+
+  const _PilulePeinteButton({
+    required this.asset,
+    required this.tooltip,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Tooltip(
+      message: tooltip,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(20),
+        child: Image.asset(
+          asset,
+          height: 36,
+          fit: BoxFit.contain,
+          filterQuality: FilterQuality.high,
+        ),
+      ),
+    );
+  }
+}
+
+/// Bouton pilule dessiné (fond pastel + coche / croix).
 class _ActionPill extends StatelessWidget {
  final String asset;
  final String iconAsset;