diff --git a/docs/32_MINI-SPEC-BULLES-CARTES.md b/docs/32_MINI-SPEC-BULLES-CARTES.md new file mode 100644 index 0000000..058dde0 --- /dev/null +++ b/docs/32_MINI-SPEC-BULLES-CARTES.md @@ -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` diff --git a/frontend/assets/images/cartes/btn_coche_pilule.png b/frontend/assets/images/cartes/btn_coche_pilule.png new file mode 100644 index 0000000..781c67c Binary files /dev/null and b/frontend/assets/images/cartes/btn_coche_pilule.png differ diff --git a/frontend/assets/images/cartes/btn_croix_pilule.png b/frontend/assets/images/cartes/btn_croix_pilule.png new file mode 100644 index 0000000..23de94b Binary files /dev/null and b/frontend/assets/images/cartes/btn_croix_pilule.png differ diff --git a/frontend/assets/images/cartes/icon_calendrier_crayon.png b/frontend/assets/images/cartes/icon_calendrier_crayon.png new file mode 100644 index 0000000..e00cc29 Binary files /dev/null and b/frontend/assets/images/cartes/icon_calendrier_crayon.png differ diff --git a/frontend/assets/images/valise.png b/frontend/assets/images/valise.png new file mode 100644 index 0000000..afe4bd6 Binary files /dev/null and b/frontend/assets/images/valise.png differ diff --git a/frontend/lib/models/carte_bulle.dart b/frontend/lib/models/carte_bulle.dart index d5b646d..13c521e 100644 --- a/frontend/lib/models/carte_bulle.dart +++ b/frontend/lib/models/carte_bulle.dart @@ -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': diff --git a/frontend/lib/widgets/quotidien/cartes_feed.dart b/frontend/lib/widgets/quotidien/cartes_feed.dart index 9c5e3fe..e8e02cc 100644 --- a/frontend/lib/widgets/quotidien/cartes_feed.dart +++ b/frontend/lib/widgets/quotidien/cartes_feed.dart @@ -405,6 +405,13 @@ class _CartesFeedState extends State { } 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,26 +426,51 @@ class _BulleTile extends StatelessWidget { required this.onRefuse, }); + static const _mois = [ + 'janvier', + 'février', + 'mars', + 'avril', + 'mai', + 'juin', + 'juillet', + 'août', + 'septembre', + 'octobre', + 'novembre', + 'décembre', + ]; + String _fmtLong(String? iso) { if (iso == null || iso.isEmpty) return '…'; final dt = DateTime.tryParse(iso); if (dt == null) return iso; - const mois = [ - 'janvier', - 'février', - 'mars', - 'avril', - 'mai', - 'juin', - 'juillet', - 'août', - 'septembre', - 'octobre', - 'novembre', - 'décembre', - ]; 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;