@mostajs/flotte-ui 0.1.1 → 0.2.0

package/src/formulaires.js

@@ -0,0 +1,328 @@
+// @mostajs/flotte-ui — les formulaires d'écriture (planches B à F) : rendu POST et LECTEURS. Fonctions PURES.
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+//
+// Le module n'écrit rien. Un lecteur transforme le corps d'un formulaire en ARGUMENTS de l'API de @mostajs/flotte et
+// signale les champs mal formés (requis absent, nombre ou date illisible) ; les RÈGLES restent au moteur (motif de
+// plaque, doublon, recul du compteur, transition permise). L'application appelle le moteur ; s'il refuse, elle rend
+// le formulaire REMPLI avec `refus` : erreurDeFlotte place l'erreur sous son champ.
+import { esc } from '@mostajs/app-shell-ui';
+import { CODES, TRANSITIONS, regles as R } from '@mostajs/flotte';
+import { contexte, lienFiche, capacite, badgeStatut, bandeauKo, texteRefus, bouton } from './commun.js';
+
+const gele = (o) => { Object.values(o).forEach((v) => v && typeof v === 'object' && gele(v)); return Object.freeze(o); };
+
+// ── Lecture des valeurs saisies ──
+const brut = (v) => (v === undefined || v === null ? '' : typeof v === 'string' ? v.trim() : v);
+/** « 18 500,00 » → 18500 ; NaN si illisible. */
+export function nombre(s) {
+  const t = String(s).replace(/[\s  ]/g, '').replace(',', '.');
+  return /^-?\d+(\.\d+)?$/.test(t) ? Number(t) : NaN;
+}
+/** « 2026-03-15 » ou « 15/03/2026 » → « 2026-03-15 » ; null si ce n'est pas un jour réel. */
+export function jour(s) {
+  const t = String(s).trim();
+  const m = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(t);
+  const iso = m ? `${m[3]}-${m[2]}-${m[1]}` : t;
+  return R.estJour(iso) ? iso : null;
+}
+const vrai = (v) => v === true || ['on', '1', 'true', 'oui'].includes(String(v).trim().toLowerCase());
+
+/** Lit un champ selon sa forme ; rend [valeur] ou [undefined, codeErreur] ; un champ vide non requis est omis. */
+function lireChamp(forme, v, requis) {
+  if (forme === 'booleen') return [vrai(v)];
+  const b = brut(v);
+  if (b === '' || (forme === 'fichier' && typeof b === 'object' && !b.nom)) return requis ? [undefined, 'requis'] : [undefined];
+  if (forme === 'nombre') { const n = nombre(b); return Number.isFinite(n) ? [n] : [undefined, 'nombre']; }
+  if (forme === 'date') { const d = jour(b); return d ? [d] : [undefined, 'date']; }
+  return [b];
+}
+
+// ── Les refus du moteur, placés sous leur champ ──
+const CHAMP_DE = Object.freeze({
+  IMMATRICULATION: 'immatriculation', DOUBLON: 'immatriculation', TYPE: 'type', ATTRIBUT: 'attributs', RECUL: 'km', MOTIF: 'motif', CONDUCTEUR_OCCUPE: 'conducteur',
+});
+/** Le champ où rendre un refus du moteur : { champ, code } ; champ null = bandeau général ; code null = pas une ErreurFlotte. */
+export function erreurDeFlotte(e) {
+  if (!e || e.name !== 'ErreurFlotte' || typeof e.code !== 'string') return { champ: null, code: null };
+  return { champ: CHAMP_DE[e.code] ?? null, code: e.code };
+}
+/** Les erreurs à afficher : celles du lecteur, plus le refus du moteur ; et le refus qui n'a pas de champ. */
+function erreursEtRefus(erreurs = {}, refus) {
+  const e = { ...erreurs };
+  if (!refus) return { e, general: null };
+  const { champ, code } = erreurDeFlotte(refus);
+  if (champ) { e[champ] = code; return { e, general: null }; }
+  return { e, general: refus };
+}
+
+// ── Le rendu d'un champ : libellé, contrôle, aide, erreur SOUS le champ ──
+function texteErreur(x, code) {
+  return ['requis', 'nombre', 'date', 'choix'].includes(code) ? x.tx(`formulaire.${code}`) : x.lib('erreur', code);
+}
+function champ(x, { nom, libelle, forme = 'texte', valeur, requis = false, erreur, options = [], aide, suffixe, attrs = '', cache = false }) {
+  const id = `fl-${nom.replace(/[^\w-]/g, '-')}`;
+  const aria = erreur ? ` aria-invalid="true" aria-describedby="${id}-err"` : '';
+  const req = requis ? ' required' : '';
+  const v = valeur === undefined || valeur === null ? '' : String(valeur);
+  let ctrl;
+  if (forme === 'choix') {
+    ctrl = `<select name="${esc(nom)}" id="${id}"${req}${aria}${attrs}>${options.map(([val, l]) => `<option value="${esc(val)}"${String(val) === v ? ' selected' : ''}>${esc(l)}</option>`).join('')}</select>`;
+  } else if (forme === 'long') {
+    ctrl = `<textarea name="${esc(nom)}" id="${id}" rows="3"${req}${aria}${attrs}>${esc(v)}</textarea>`;
+  } else if (forme === 'booleen') {
+    ctrl = `<input type="checkbox" name="${esc(nom)}" id="${id}" value="on"${vrai(valeur) ? ' checked' : ''}${aria}${attrs}>`;
+  } else if (forme === 'fichier') {
+    ctrl = `<input type="file" name="${esc(nom)}" id="${id}"${req}${aria}${attrs}>`;
+  } else {
+    const type = forme === 'date' ? 'date' : 'text';
+    const im = forme === 'nombre' ? ' inputmode="decimal"' : '';
+    ctrl = `<input type="${type}" name="${esc(nom)}" id="${id}" value="${esc(v)}"${im}${req}${aria}${attrs}>`;
+  }
+  if (suffixe) ctrl = `<span class="fl-suffixe">${ctrl}<span>${esc(suffixe)}</span></span>`;
+  const etiquette = `<label for="${id}"${cache ? ' class="fl-sr"' : ''}>${esc(libelle)}${requis ? ' <span class="fl-requis" aria-hidden="true">*</span>' : ''}</label>`;
+  return `<div class="fl-champ${forme === 'booleen' ? ' fl-case' : ''}${erreur ? ' fl-erreur-champ' : ''}">${forme === 'booleen' ? `${ctrl} ${etiquette}` : `${etiquette}${ctrl}`}`
+    + `${erreur ? `<p class="fl-erreur" id="${id}-err">${x.k.icone('alerte', 14)} ${esc(texteErreur(x, erreur))}</p>` : ''}${aide ? `<p class="fl-aide">${esc(aide)}</p>` : ''}</div>`;
+}
+const groupe = (n, titre, corps, classe = '') => `<fieldset class="fl-groupe ${classe}"><legend><span class="fl-num">${n}</span> ${esc(titre)}</legend>${corps}</fieldset>`;
+const boutons = (x, annuler, libelle, classe = '') => `<div class="fl-boutons">${annuler ? `<a class="${bouton(x, 'fl-secondaire')}" href="${esc(annuler)}">${esc(x.tx('action.annuler'))}</a>` : ''}`
+  + `<button type="submit" class="${bouton(x, classe)}">${esc(libelle)}</button></div>`;
+const recap = (x, f) => (f ? `<div class="fl-recap"><span class="fl-vignette">${x.k.icone('camion', 32)}</span><div><b dir="ltr">${esc(f.plaque)}</b><br>${esc(x.lib('type', f.vehicule.type))} · ${esc(capacite(x, f.capacite))}</div><div>${badgeStatut(x, f.vehicule.statut)}</div></div>` : '');
+
+// ── Véhicule : nouveau et modifier (16.39, planche F) ───────────────────────────────────────────────────────
+/** Les attributs déclarés, par type ; et l'union (le formulaire sans script les montre tous, le lecteur ne garde que ceux du type). */
+const attributsDe = (declarations, type) => Object.entries(declarations.types?.[type]?.attributs || {});
+const tousAttributs = (declarations) => {
+  const m = new Map();
+  for (const t of Object.values(declarations.types || {})) for (const [a, forme] of Object.entries(t.attributs || {})) if (!m.has(a)) m.set(a, forme);
+  return [...m];
+};
+const libelleAttribut = (x, a) => { const l = x.tx(`formulaire.attribut.${a}`); return l === `formulaire.attribut.${a}` ? a : l; };
+
+/**
+ * Le formulaire « Nouveau véhicule » ou « Modifier » (multipart : il porte les pièces). Rend { titre, sousTitre, corps }.
+ * vm : { mode: 'nouveau'|'modifier', vehicule? (lu par flotte.lire), declarations, sites, valeurs?, erreurs?, refus? }
+ * opts : ceux du rendu, et liens.enregistrer (l'action POST), liens.base (Annuler).
+ */
+export function rendreFormulaireVehicule(vm, opts = {}) {
+  const x = contexte({ ...opts, declarations: vm.declarations || opts.declarations });
+  const D = vm.declarations || {}, sites = vm.sites || {}, nouveau = vm.mode !== 'modifier', v = vm.vehicule || null;
+  const base = nouveau ? { mode: 'propre' } : {
+    immatriculation: v.immatriculation, chassis: v.chassis ?? '', miseEnService: v.miseEnService ?? '', site: v.site ?? '', mode: v.mode ?? 'propre',
+    ...Object.fromEntries(Object.entries(v.attributs || {}).map(([a, n]) => [`attributs.${a}`, n])),
+  };
+  const val = { ...base, ...(vm.valeurs || {}) };
+  const { e, general } = erreursEtRefus(vm.erreurs, vm.refus);
+  const C = (o) => champ(x, { ...o, valeur: val[o.nom], erreur: e[o.nom] });
+  const types = Object.keys(D.types || {});
+  const typeChoisi = nouveau ? val.type : v.type;
+  const categories = types.map((t) => `${x.lib('type', t)} : ${D.types[t].categoriePermis ?? '—'}`).join(' · ');
+  const attributs = nouveau ? tousAttributs(D) : attributsDe(D, v.type);
+  const ident = [
+    C({ nom: 'immatriculation', libelle: x.tx('formulaire.immatriculation'), requis: true, attrs: ' dir="ltr" autocomplete="off"' }),
+    nouveau ? C({ nom: 'type', libelle: x.tx('formulaire.type'), forme: 'choix', requis: true, options: [['', x.tx('formulaire.choisir')], ...types.map((t) => [t, x.lib('type', t)])] })
+      : `<div class="fl-champ"><span class="fl-etiquette">${esc(x.tx('formulaire.type'))}</span><b>${esc(x.lib('type', v.type))}</b></div>`,
+    `<div class="fl-champ"><span class="fl-etiquette">${esc(x.tx('formulaire.categorie'))}</span><output>${esc(typeChoisi ? D.types?.[typeChoisi]?.categoriePermis ?? '—' : '—')}</output>`
+      + `<p class="fl-aide">${esc(x.tx('formulaire.categorieAide', { liste: categories }))}</p></div>`,
+    ...attributs.map(([a, forme]) => (forme === 'booleen'
+      ? C({ nom: `attributs.${a}`, libelle: libelleAttribut(x, a), forme: 'booleen' })
+      : C({ nom: `attributs.${a}`, libelle: libelleAttribut(x, a), forme: forme === 'nombre' ? 'nombre' : 'texte' }))),
+    C({ nom: 'chassis', libelle: x.tx('info.chassis'), attrs: ' dir="ltr"' }),
+    C({ nom: 'miseEnService', libelle: x.tx('info.miseEnService'), forme: 'date' }),
+  ].join('');
+  const regions = [...new Set(Object.values(sites).map((s) => s.region).filter(Boolean))].sort();
+  const regionChoisie = val.region || sites[val.site]?.region || '';
+  const stations = `<div class="fl-champ${e.site ? ' fl-erreur-champ' : ''}"><label for="fl-site">${esc(x.tx('formulaire.station'))} <span class="fl-requis" aria-hidden="true">*</span></label>`
+    + `<select name="site" id="fl-site" required${e.site ? ' aria-invalid="true" aria-describedby="fl-site-err"' : ''}><option value="">${esc(x.tx('formulaire.choisir'))}</option>`
+    + regions.map((r) => `<optgroup label="${esc(r)}">${Object.entries(sites).filter(([, s]) => s.region === r).map(([code, s]) => `<option value="${esc(code)}"${code === val.site ? ' selected' : ''}>${esc(code)} — ${esc(s.libelle ?? code)}</option>`).join('')}</optgroup>`).join('')
+    + Object.entries(sites).filter(([, s]) => !s.region).map(([code, s]) => `<option value="${esc(code)}"${code === val.site ? ' selected' : ''}>${esc(code)} — ${esc(s.libelle ?? code)}</option>`).join('')
+    + `</select>${e.site ? `<p class="fl-erreur" id="fl-site-err">${x.k.icone('alerte', 14)} ${esc(texteErreur(x, e.site))}</p>` : ''}</div>`;
+  const modes = `<fieldset class="fl-champ"><legend>${esc(x.tx('formulaire.mode'))}</legend>${CODES.mode.map((m) => `<label class="fl-radio"><input type="radio" name="mode" value="${esc(m)}"${m === (val.mode || 'propre') ? ' checked' : ''}> ${esc(x.lib('mode', m))}</label>`).join('')}</fieldset>`;
+  const rattachement = `${champ(x, { nom: 'region', libelle: x.tx('formulaire.region'), forme: 'choix', valeur: regionChoisie, options: [['', x.tx('formulaire.choisir')], ...regions.map((r) => [r, r])] })}${stations}${modes}`;
+  let suite = '';
+  if (nouveau) {
+    const compteur = C({ nom: 'kmDepart', libelle: x.tx('formulaire.kmDepart'), forme: 'nombre', requis: true, suffixe: 'km', aide: x.tx('formulaire.kmDepartAide') });
+    const lignes = Object.entries(D.echeances || {}).map(([t, d]) => {
+      const n = (k) => `echeance.${t}.${k}`;
+      const cell = (k, forme) => champ(x, { nom: n(k), libelle: `${x.lib('echeance', t)} — ${x.tx(`formulaire.champ.${k}`)}`, forme, valeur: val[n(k)], erreur: e[n(k)], cache: true });
+      return `<tr><th scope="row">${esc(x.lib('echeance', t))}${d.obligatoire ? ` ${x.k.badge(x.tx('documents.obligatoire'), 'rouge')}` : ''}</th><td>${cell('debut', 'date')}</td><td>${cell('fin', 'date')}</td><td>${cell('piece', 'fichier')}</td></tr>`;
+    }).join('');
+    const docs = lignes ? `<div class="fl-defile"><table class="${esc(x.c.tableau)} fl-docs-form"><thead><tr><th scope="col">${esc(x.tx('formulaire.document'))}</th><th scope="col">${esc(x.tx('formulaire.champ.debut'))}</th><th scope="col">${esc(x.tx('formulaire.champ.fin'))}</th><th scope="col">${esc(x.tx('formulaire.champ.piece'))}</th></tr></thead><tbody>${lignes}</tbody></table></div>` : '';
+    suite = `<div class="fl-form-bas">${groupe(3, x.tx('formulaire.compteur'), compteur)}${groupe(4, x.tx('formulaire.documents'), docs, 'fl-large-groupe')}</div>`;
+  }
+  const action = (x.liens.enregistrer ?? '');
+  const annuler = nouveau ? x.liens.base : (x.liens.fiche ? x.liens.fiche(v.id, '') : x.liens.base);
+  const corps = `<div class="fl-ecran fl-formulaire">${general ? bandeauKo(x, esc(texteRefus(x, general))) : ''}${e.attributs ? bandeauKo(x, esc(texteErreur(x, e.attributs))) : ''}`
+    + `<form method="post" action="${esc(action)}" enctype="multipart/form-data" novalidate><div class="fl-form-haut">${groupe(1, x.tx('formulaire.identification'), ident)}${groupe(2, x.tx('formulaire.rattachement'), rattachement)}</div>`
+    + `${suite}${boutons(x, annuler, nouveau ? x.tx('formulaire.inscrire') : x.tx('action.enregistrer'))}</form></div>`;
+  return {
+    titre: nouveau ? x.tx('formulaire.nouveau') : x.tx('formulaire.modifier', { plaque: v.immatriculation }),
+    sousTitre: nouveau ? x.tx('formulaire.nouveauSous') : x.tx('formulaire.modifierSous'), corps,
+  };
+}
+
+/**
+ * Lit « Nouveau véhicule ». Rend { donnees, erreurs } : donnees = { code, immatriculation, type, attributs, chassis,
+ * miseEnService, site, mode, kmDepart, echeances: [{ type, debut, fin?, piece? }] } — inscrire(donnees), puis
+ * relever(kmDepart) et poserEcheance pour chaque échéance. Le code est celui saisi, sinon la plaque sans espaces.
+ */
+export function lireFormulaireVehicule(corps = {}, { declarations = {} } = {}) {
+  const erreurs = {}, d = {};
+  const imm = brut(corps.immatriculation);
+  if (!imm) erreurs.immatriculation = 'requis'; else d.immatriculation = String(imm).replace(/\s+/g, ' ');
+  const type = brut(corps.type);
+  const declare = type && declarations.types?.[type];
+  if (!declare) erreurs.type = 'requis'; else d.type = type;
+  d.code = brut(corps.code) || (d.immatriculation ? d.immatriculation.replace(/[\s-]/g, '') : undefined);
+  if (d.code === undefined) delete d.code;
+  d.attributs = {};
+  for (const [a, forme] of declare ? attributsDe(declarations, type) : []) {
+    const [val, err] = lireChamp(forme === 'nombre' ? 'nombre' : forme === 'booleen' ? 'booleen' : 'texte', corps[`attributs.${a}`], false);
+    if (err) erreurs[`attributs.${a}`] = err; else if (val !== undefined) d.attributs[a] = val;
+  }
+  d.chassis = brut(corps.chassis) || null;
+  const [mes, errMes] = lireChamp('date', corps.miseEnService, false);
+  if (errMes) erreurs.miseEnService = errMes; else d.miseEnService = mes ?? null;
+  const site = brut(corps.site);
+  if (!site) erreurs.site = 'requis'; else d.site = site;
+  const mode = brut(corps.mode) || 'propre';
+  if (!CODES.mode.includes(mode)) erreurs.mode = 'choix'; else d.mode = mode;
+  const [km, errKm] = lireChamp('nombre', corps.kmDepart, true);
+  if (errKm) erreurs.kmDepart = errKm; else d.kmDepart = km;
+  d.echeances = [];
+  for (const t of Object.keys(declarations.echeances || {})) {
+    const n = (k) => corps[`echeance.${t}.${k}`];
+    if (brut(n('debut')) === '') continue;
+    const e = { type: t };
+    for (const [k, forme] of [['debut', 'date'], ['fin', 'date'], ['piece', 'fichier']]) {
+      const [val, err] = lireChamp(forme, n(k), k === 'debut');
+      if (err) erreurs[`echeance.${t}.${k}`] = err; else if (val !== undefined) e[k] = val;
+    }
+    d.echeances.push(e);
+  }
+  return { donnees: d, erreurs };
+}
+
+/**
+ * Lit « Modifier » : seuls les champs PRÉSENTS dans le corps et DIFFÉRENTS du véhicule (lu par flotte.lire), au
+ * format de flotte.modifier(id, champs). Les attributs changés seuls (modifier les fusionne). { donnees, erreurs }.
+ */
+export function lireModification(corps = {}, vehicule, { declarations = {} } = {}) {
+  const erreurs = {}, d = {};
+  const a = (k) => Object.prototype.hasOwnProperty.call(corps, k);
+  if (a('immatriculation')) {
+    const imm = String(brut(corps.immatriculation)).replace(/\s+/g, ' ');
+    if (!imm) erreurs.immatriculation = 'requis'; else if (imm.toUpperCase() !== vehicule.immatriculation) d.immatriculation = imm;
+  }
+  const attributs = {};
+  for (const [nom, forme] of attributsDe(declarations, vehicule.type)) {
+    if (!a(`attributs.${nom}`)) continue;
+    const [val, err] = lireChamp(forme === 'nombre' ? 'nombre' : forme === 'booleen' ? 'booleen' : 'texte', corps[`attributs.${nom}`], false);
+    if (err) erreurs[`attributs.${nom}`] = err; else if (val !== undefined && val !== vehicule.attributs?.[nom]) attributs[nom] = val;
+  }
+  if (Object.keys(attributs).length) d.attributs = attributs;
+  if (a('chassis')) { const c = brut(corps.chassis) || null; if (c !== (vehicule.chassis ?? null)) d.chassis = c; }
+  if (a('miseEnService')) {
+    const [m, err] = lireChamp('date', corps.miseEnService, false);
+    if (err) erreurs.miseEnService = err; else if ((m ?? null) !== (vehicule.miseEnService ?? null)) d.miseEnService = m ?? null;
+  }
+  if (a('site')) { const s = brut(corps.site); if (!s) erreurs.site = 'requis'; else if (s !== vehicule.site) d.site = s; }
+  if (a('mode')) { const m = brut(corps.mode); if (!CODES.mode.includes(m)) erreurs.mode = 'choix'; else if (m !== vehicule.mode) d.mode = m; }
+  return { donnees: d, erreurs };
+}
+
+// ── Changement de statut et réforme (16.36) ─────────────────────────────────────────────────────────────────
+/**
+ * Le formulaire d'une transition, pour la fiche `f` (construireFiche). Motif obligatoire si la transition l'exige ;
+ * la réforme passe par une confirmation (définitif). Une transition impossible depuis le statut courant : refus.
+ * opts : ceux du rendu, plus { valeurs?, erreurs?, refus?, action? } ; à défaut d'action, liens.statut(id, transition).
+ */
+export function rendreFormulaireStatut(f, transition, opts = {}) {
+  const x = contexte(opts), id = f.vehicule.id;
+  const t = f.transitions.find((y) => y.id === transition);
+  const titre = x.tx('formulaire.statutTitre', { transition: x.lib('transition', transition), plaque: f.plaque });
+  if (!t) return { titre, corps: `<div class="fl-ecran fl-formulaire">${bandeauKo(x, esc(x.lib('erreur', 'TRANSITION')))}${recap(x, f)}</div>` };
+  const { e, general } = erreursEtRefus(opts.erreurs, opts.refus);
+  const val = opts.valeurs || {};
+  const action = opts.action ?? (x.liens.statut ? x.liens.statut(id, transition) : '');
+  const reforme = transition === 'reformer';
+  const dernier = [...(f.vehicule.historique || [])].reverse().find((h) => h.vers === f.vehicule.statut && h.motif);
+  const confirmer = reforme ? `<div class="fl-confirmer" role="note">${x.k.icone('alerte', 24)}<div><b>${esc(x.tx('formulaire.reformerQuestion'))}</b><p class="fl-retard">${esc(x.tx('formulaire.definitif'))}</p>`
+    + `<p class="fl-doux">${esc(x.tx('formulaire.definitifAide'))}</p></div></div>` : '';
+  const actuel = `<div class="fl-champ"><span class="fl-etiquette">${esc(x.tx('formulaire.statutActuel'))}</span>${badgeStatut(x, f.vehicule.statut)}${dernier ? `<p class="fl-doux">« ${esc(dernier.motif)} »</p>` : ''}</div>`;
+  const motif = champ(x, { nom: 'motif', libelle: x.tx('formulaire.motif'), forme: 'long', requis: t.motif, valeur: val.motif, erreur: e.motif, aide: x.tx('formulaire.motifAide') });
+  const corps = `<div class="fl-ecran fl-formulaire">${general ? bandeauKo(x, esc(texteRefus(x, general))) : ''}${confirmer}`
+    + `<form method="post" action="${esc(action)}" class="fl-carte">${recap(x, f)}${actuel}${motif}${reforme ? '<input type="hidden" name="confirme" value="1">' : ''}`
+    + `${boutons(x, lienFiche(x, id), x.lib('transition', transition), reforme ? 'fl-danger' : '')}</form></div>`;
+  return { titre, corps };
+}
+
+/** Lit un changement de statut : { donnees: { motif, confirme }, erreurs } ; le motif est requis si la transition l'exige. */
+export function lireStatut(corps = {}, transition) {
+  const motif = brut(corps.motif) || null;
+  const donnees = { motif, confirme: vrai(corps.confirme ?? '') };
+  const t = TRANSITIONS.find((y) => y.id === transition);
+  const erreurs = {};
+  if (t?.motif && !motif) erreurs.motif = 'requis';
+  if (transition === 'reformer' && !donnees.confirme) erreurs.confirme = 'requis';
+  return { donnees, erreurs };
+}
+
+// ── Les formulaires de saisie, sur une table déclarative ────────────────────────────────────────────────────
+/**
+ * Chaque formulaire : ses champs, dans l'ordre, au format de l'argument de la fonction du moteur :
+ * plan → planifierEntretien, intervention → ouvrirIntervention, cloture → cloreIntervention, plein → saisirPlein,
+ * releve → relever, echeance → poserEcheance. `choix` : nature (CODES.nature), plans (ceux du véhicule), echeances (déclarées).
+ */
+export const FORMULAIRES = gele({
+  plan: [{ nom: 'libelle', forme: 'texte', requis: true }, { nom: 'tousLesKm', forme: 'nombre' }, { nom: 'tousLesJours', forme: 'nombre' }, { nom: 'toleranceKm', forme: 'nombre' }, { nom: 'toleranceJours', forme: 'nombre' }],
+  intervention: [{ nom: 'nature', forme: 'choix', requis: true, choix: 'nature' }, { nom: 'plan', forme: 'choix', choix: 'plans' }, { nom: 'prestataire', forme: 'texte' }, { nom: 'description', forme: 'long' }, { nom: 'ouverteLe', forme: 'date' }],
+  cloture: [{ nom: 'km', forme: 'nombre' }, { nom: 'cout', forme: 'nombre' }, { nom: 'le', forme: 'date' }],
+  plein: [{ nom: 'le', forme: 'date' }, { nom: 'km', forme: 'nombre', requis: true }, { nom: 'litres', forme: 'nombre', requis: true }, { nom: 'montant', forme: 'nombre', requis: true }, { nom: 'complet', forme: 'booleen' }, { nom: 'piece', forme: 'fichier', libelle: 'ticket' }],
+  releve: [{ nom: 'km', forme: 'nombre', requis: true }, { nom: 'le', forme: 'date' }],
+  echeance: [{ nom: 'type', forme: 'choix', requis: true, choix: 'echeances' }, { nom: 'debut', forme: 'date', requis: true }, { nom: 'fin', forme: 'date' }, { nom: 'reference', forme: 'texte' }, { nom: 'organisme', forme: 'texte' }, { nom: 'cout', forme: 'nombre' }, { nom: 'piece', forme: 'fichier' }],
+});
+
+/** Lit un formulaire de FORMULAIRES : { donnees, erreurs } ; un champ vide non requis est omis (le moteur prend son défaut). */
+export function lireFormulaire(nom, corps = {}, { declarations } = {}) {
+  const champs = FORMULAIRES[nom];
+  if (!champs) throw new Error(`flotte-ui : formulaire inconnu : ${nom}`);
+  const donnees = {}, erreurs = {};
+  for (const c of champs) {
+    const [val, err] = lireChamp(c.forme === 'long' || c.forme === 'choix' ? 'texte' : c.forme, corps[c.nom], c.requis);
+    if (err) { erreurs[c.nom] = err; continue; }
+    if (val === undefined) continue;
+    if (c.choix === 'nature' && !CODES.nature.includes(val)) { erreurs[c.nom] = 'choix'; continue; }
+    if (c.choix === 'echeances' && declarations && !declarations.echeances?.[val]) { erreurs[c.nom] = 'choix'; continue; }
+    donnees[c.nom] = val;
+  }
+  return { donnees, erreurs };
+}
+
+/**
+ * Rend un formulaire de FORMULAIRES pour la fiche `fiche` (construireFiche). Rend { titre, corps }.
+ * vm : { fiche, declarations?, valeurs?, erreurs?, refus? } ; opts : ceux du rendu, plus { action } (POST).
+ */
+export function rendreFormulaire(nom, vm = {}, opts = {}) {
+  const champs = FORMULAIRES[nom];
+  if (!champs) throw new Error(`flotte-ui : formulaire inconnu : ${nom}`);
+  const D = vm.declarations || opts.declarations || {};
+  const x = contexte({ ...opts, declarations: D });
+  const f = vm.fiche || null, val = vm.valeurs || {};
+  const { e, general } = erreursEtRefus(vm.erreurs, vm.refus);
+  const options = {
+    nature: CODES.nature.map((n) => [n, x.lib('nature', n)]),
+    plans: [['', x.tx('formulaire.champ.aucunPlan')], ...(f?.plans || []).map((p) => [p.id, p.libelle])],
+    echeances: Object.keys(D.echeances || {}).map((t) => [t, x.lib('echeance', t)]),
+  };
+  const fichier = champs.some((c) => c.forme === 'fichier');
+  const html = champs.map((c) => champ(x, {
+    nom: c.nom, libelle: x.tx(`formulaire.champ.${c.libelle || c.nom}`), forme: c.forme, requis: Boolean(c.requis), valeur: val[c.nom], erreur: e[c.nom],
+    options: c.choix ? options[c.choix] : [], suffixe: c.nom === 'km' ? 'km' : c.nom === 'litres' ? 'L' : (c.nom === 'montant' || c.nom === 'cout') && x.devise ? x.devise : undefined,
+    aide: c.nom === 'km' && f && f.km !== null && f.km !== undefined ? x.tx('formulaire.dernierReleve', { km: x.nf(f.km) }) : undefined,
+  })).join('');
+  const action = opts.action ?? '';
+  const corps = `<div class="fl-ecran fl-formulaire">${general ? bandeauKo(x, esc(texteRefus(x, general))) : ''}`
+    + `<form method="post" action="${esc(action)}"${fichier ? ' enctype="multipart/form-data"' : ''} class="fl-carte" novalidate>${recap(x, f)}${html}`
+    + `${boutons(x, f ? lienFiche(x, f.vehicule.id, nom === 'plein' || nom === 'releve' ? 'pleins' : nom === 'echeance' ? 'documents' : 'entretiens') : x.liens.base, x.tx('action.enregistrer'))}</form></div>`;
+  return { titre: x.tx(`formulaire.${nom}`), corps };
+}

package/src/index.js

@@ -3,7 +3,13 @@
 //
 // Deux temps : CONSTRUIRE (async, lit l'API de flotte → vue-modèle de codes) puis RENDRE (pur, vue-modèle → HTML,
 // avec le kit et la langue de l'application). L'application garde son gabarit, son menu, ses routes et ses droits.
-export { construireTableau, construireFiche, ONGLETS } from './vue.js';
-export { rendreTableau, rendreFiche, exporterCsv } from './rendu.js';
+export { construireTableau, construireFiche, construireMonVehicule, construireAptitudes, periodeDe, ONGLETS } from './vue.js';
+export {
+  rendreTableau, rendreFiche, rendrePageVehicule, exporterCsv, rendreMonVehicule, rendreChoixVehicule, rendreRefusDepart, rendreDisponibles,
+} from './rendu.js';
+export {
+  rendreFormulaireVehicule, lireFormulaireVehicule, lireModification, rendreFormulaireStatut, lireStatut, FORMULAIRES, rendreFormulaire, lireFormulaire,
+  erreurDeFlotte, nombre, jour,
+} from './formulaires.js';
 export { TEXTES, texte } from './textes.js';
 export { KIT_DEFAUT, FLOTTE_CSS, COULEURS } from './kit.js';

package/src/kit.js

@@ -25,6 +25,8 @@ const ICONES = {
   horloge: '<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.4 3.6 2.1-.8 1.3L11 13V6h2z"/>',
   fleche: '<path d="M4 11h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4 5.6-5.6H4z"/>',
   liste: '<path d="M3 5h2v2H3zm4 0h14v2H7zM3 11h2v2H3zm4 0h14v2H7zM3 17h2v2H3zm4 0h14v2H7z"/>',
+  cadenas: '<path d="M7 10V7a5 5 0 0 1 10 0v3h2v12H5V10zm2 0h6V7a3 3 0 0 0-6 0z"/>',
+  pieces: '<path d="M9 4c-3.9 0-7 1.3-7 3v3c0 1.7 3.1 3 7 3s7-1.3 7-3V7c0-1.7-3.1-3-7-3zm6 10.5c-1.6.9-3.8 1.5-6 1.5s-4.4-.6-6-1.5V17c0 1.7 3.1 3 7 3 1 0 2-.1 2.9-.3A6 6 0 0 1 15 14.5zM18 11a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/>',
   menu: '<path d="M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>',
 };
 
@@ -115,4 +117,38 @@ export const FLOTTE_CSS = `
 .fl-rapides{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fl-rapide{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:500;font-size:14px}.fl-rapide.plein{background:var(--fl-bleu);color:#fff}
 .fl-vide{color:var(--fl-doux);margin:8px 0}
 .fl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+.fl-k6{display:grid;gap:16px;grid-template-columns:repeat(6,minmax(0,1fr))}.fl-entete-fiche b{white-space:nowrap}.fl-boutons-fiche{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:10px}.fl-k4{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin:12px 0}.fl-k2{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
+@media (max-width:1600px){.fl-k6{grid-template-columns:repeat(3,minmax(0,1fr))}.fl-k4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:900px){.fl-k6,.fl-k4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.fl-k6,.fl-k4,.fl-k2{grid-template-columns:1fr}}
+.fl-puces{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.fl-puce{padding:6px 14px;border:1px solid var(--fl-ligne);border-radius:8px;text-decoration:none;color:inherit;font-size:13.5px;background:var(--fl-carte)}.fl-puce.actif{background:var(--fl-bleu);border-color:var(--fl-bleu);color:#fff}.fl-puce.actif .fl-n{color:#fff}
+.fl-mini{display:inline-grid;place-items:center;width:30px;height:24px;margin-inline-end:8px;border-radius:5px;background:#eef3fb;color:#5a7194;vertical-align:middle}
+.fl-empile{display:grid;gap:10px;font-size:13.5px}.fl-ligne-empile{display:grid;grid-template-columns:minmax(90px,auto) 24px 1fr;gap:10px;align-items:center}
+.fl-piste{display:flex;height:12px;border-radius:6px;background:var(--fl-ligne);overflow:hidden}.fl-piste i{display:block;height:100%}.fl-jauge .fl-piste i{background:var(--fl-bleu);border-radius:6px}
+.fl-legende-ligne{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--fl-doux);margin:10px 0 0}
+.fl-page{gap:16px}.fl-tete-page{display:flex;flex-wrap:wrap;gap:18px;align-items:center}.fl-grande{font-size:24px}.fl-ident{display:grid;gap:4px}.fl-qui{display:flex;gap:8px;align-items:center}.fl-actions{display:flex;gap:8px;margin-inline-start:auto;align-items:center}
+.fl-statut[open]>div{min-width:220px}.fl-statut>summary{display:inline-flex;font-size:inherit;font-weight:500;line-height:normal}
+.fl-secondaire{background:transparent!important;color:var(--fl-bleu)!important;border:1px solid currentColor!important}.fl-danger{background:var(--fl-rouge)!important;color:#fff!important}.fl-bloc{display:flex;justify-content:center;width:100%;margin-top:8px}
+.fl-titre-section{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 10px}.fl-titre-section h3{margin:0}.fl-titre-section>:last-child:not(h3){margin-inline-start:auto}
+.fl-docs,.fl-plans{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
+.fl-doc,.fl-plan{border:1px solid var(--fl-ligne);border-radius:12px;padding:14px;background:var(--fl-carte);display:grid;gap:10px;align-content:start}.fl-doc.fl-ko{border-color:#f3b4b4;background:#fff6f6}
+.fl-doc>header,.fl-plan>header{display:flex;gap:10px;align-items:flex-start}.fl-pastille-doc{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#eef3fb;color:var(--fl-bleu);flex:none}
+.fl-piece{display:flex;gap:8px;align-items:flex-start;padding:8px;border:1px solid var(--fl-ligne);border-radius:8px}.fl-replie summary{cursor:pointer;color:var(--fl-doux)}
+.fl-jauges{display:grid;gap:8px}.fl-jauge{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;font-size:13px}.fl-jauge .fl-piste{grid-column:1/-1}.fl-jauge>span:last-child{grid-column:1/-1}
+.fl-prochaine{display:flex;gap:8px;font-size:13.5px}.fl-cadenas{display:inline-flex;gap:4px;align-items:center;padding:2px 9px;border-radius:6px;background:#e5e9ee;font-size:12.5px}
+.fl-actuel{display:flex;gap:12px;align-items:center;border:1px solid var(--fl-ligne);border-radius:10px;padding:12px}
+.fl-frise{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--fl-ligne)}.fl-frise li{position:relative;padding:6px 0 12px;padding-inline-start:18px;display:grid;gap:3px}.fl-frise li::before{content:"";position:absolute;inset-inline-start:-7px;top:10px;width:12px;height:12px;border-radius:50%;background:#8ea3c0}.fl-frise li.actif::before{background:var(--fl-bleu)}
+.fl-panneau{border:1px solid var(--fl-ligne);border-radius:12px;padding:14px;margin-top:16px}.fl-boutons{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}.fl-en-ligne{display:inline}
+.fl-avert{color:var(--fl-orange);font-weight:500}
+.fl-colonnes{display:flex;gap:14px;align-items:flex-end;height:200px;padding-top:18px}.fl-colonne{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;font-size:12px}.fl-pile-col{flex:1;width:60%;display:flex;flex-direction:column-reverse}.fl-pile-col i{display:block;width:100%}.fl-total{font-weight:600}
+tr.choisi td{background:#e3f0fe}
+.fl-formulaire form{display:grid;gap:16px}.fl-form-haut{display:grid;gap:16px;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.fl-form-bas{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}@media (max-width:900px){.fl-form-haut,.fl-form-bas{grid-template-columns:1fr}}
+.fl-groupe{border:1px solid var(--fl-ligne);border-radius:12px;padding:16px;margin:0;background:var(--fl-carte);display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-content:start}.fl-groupe>legend{font-weight:700;font-size:17px;padding:0 6px}
+.fl-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fl-bleu);color:#fff;font-size:14px}
+.fl-champ{display:grid;gap:4px;align-content:start;justify-items:start;border:0;padding:0;margin:0}.fl-champ>.fl-suffixe{width:100%}.fl-groupe.fl-large-groupe{grid-template-columns:1fr}.fl-champ.fl-case{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.fl-formulaire>form.fl-carte{max-width:760px}.fl-docs-form td{vertical-align:top;min-width:150px}.fl-courbe{display:block;max-height:240px}.fl-champ label,.fl-etiquette,.fl-champ legend{font-weight:500;font-size:13.5px}.fl-champ input:not([type=radio]):not([type=checkbox]),.fl-champ select,.fl-champ textarea{min-height:40px;border:1px solid var(--fl-ligne);border-radius:8px;padding:6px 10px;font:inherit;background:var(--fl-carte);color:inherit;width:100%;box-sizing:border-box}
+.fl-erreur-champ input,.fl-erreur-champ select,.fl-erreur-champ textarea{border-color:var(--fl-rouge)!important}.fl-erreur{color:var(--fl-rouge);font-size:12.5px;margin:0}.fl-aide{color:var(--fl-doux);font-size:12px;margin:0}.fl-requis{color:var(--fl-rouge)}
+.fl-suffixe{display:flex}.fl-suffixe>span{display:grid;place-items:center;padding:0 10px;border:1px solid var(--fl-ligne);border-inline-start:0;border-radius:0 8px 8px 0;color:var(--fl-doux)}.fl-radio{display:flex;gap:8px;align-items:center;font-weight:400}
+.fl-recap{display:flex;gap:12px;align-items:center}.fl-confirmer{display:flex;gap:12px;padding:14px;border-radius:10px;background:#fdecec;color:#9b1c1c}.fl-confirmer p{margin:4px 0 0}
+.fl-mobile{max-width:480px}.fl-liste-infos{list-style:none;margin:0;padding:0;display:grid;gap:10px}.fl-liste-infos li{display:flex;gap:10px;align-items:flex-start}.fl-boutons-pleins{display:grid;gap:4px}
+.fl-choix{display:grid;gap:6px}.fl-option{display:grid;grid-template-columns:auto auto 1fr auto auto auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--fl-ligne);border-radius:10px;cursor:pointer}.fl-option.ko{background:#fff6f6}.fl-option:has(input:checked){border-color:var(--fl-bleu)}
+@media (max-width:560px){.fl-option{grid-template-columns:auto auto 1fr}}
+.fl-refus{display:flex;gap:12px;padding:16px;border-radius:12px;background:#fdecec;color:#9b1c1c;border:1px solid #f3b4b4}.fl-refus ul{margin:8px 0;padding-inline-start:18px;color:var(--fl-texte)}
 `;