Ajoute un filtre par tag de signalement sur /lignes et /dashboard/compte

Même modèle multiselect/OR que les filtres Compte et Type déjà en place,
en complément (pas en remplacement) du simple on/off "Signalées
uniquement" du grand livre. Sur /dashboard/compte, la liste d'options se
limite aux tags réellement présents pour le compte sélectionné, et se
réinitialise au changement de compte.

web/modules/custom/figli_compta_ledger/css/dashboard.css

@@ -101,6 +101,75 @@ html.gin--dark-mode #figli-dashboard-app {
   color: var(--figli-text);
 }
 
+/* Signalement filter (Lignes signalées section) -- same multiselect
+   widget as /lignes' Compte/Type filters (home.css), duplicated here
+   rather than shared, see this project's established convention for
+   dashboard.js/dashboard-compte.js vs home.js. */
+#figli-dashboard-app .figli-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+#figli-dashboard-app .figli-filter-clear {
+  background: transparent;
+  border: none;
+  color: var(--figli-text-light);
+  cursor: pointer;
+  font-size: 0.8rem;
+  line-height: 1;
+  padding: 0.15rem;
+}
+#figli-dashboard-app .figli-filter-clear:hover {
+  color: var(--figli-error);
+}
+#figli-dashboard-app .figli-multiselect {
+  position: relative;
+}
+#figli-dashboard-app .figli-multiselect-trigger {
+  font-size: 0.85rem;
+  padding: 0.2rem 0.4rem;
+  background: var(--figli-bg);
+  color: var(--figli-text);
+  border: 1px solid var(--figli-border);
+  border-radius: 4px;
+  width: 12rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+}
+#figli-dashboard-app .figli-multiselect-arrow {
+  float: right;
+  color: var(--figli-text-light);
+}
+#figli-dashboard-app .figli-multiselect-panel {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 20;
+  min-width: 100%;
+  white-space: nowrap;
+  background: var(--figli-bg);
+  color: var(--figli-text);
+  border: 1px solid var(--figli-border);
+  border-radius: 4px;
+  padding: 0.3rem 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+#figli-dashboard-app .figli-multiselect:hover .figli-multiselect-panel {
+  display: block;
+}
+#figli-dashboard-app .figli-multiselect-option {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+  font-weight: 400;
+  padding: 0.15rem 0;
+}
+
 /* --- Reconciliation tables (reste à verser, sur-versé, non liés) --- */
 #figli-dashboard-app .figli-recon-table {
   width: 100%;

web/modules/custom/figli_compta_ledger/js/dashboard-compte.js

@@ -250,6 +250,9 @@
         comptes: [],
         stats: null,
         selectedCompte: '',
+        // Filtre "Lignes signalées" -- même modèle multi-valeurs/OR que
+        // sur /lignes. Propre à ce compte (voir selectCompte()).
+        flagFilter: [],
       };
     },
     computed: {
@@ -341,13 +344,28 @@
           .filter((r) => r.hasFlag && r.parCompte[this.selectedCompte] !== undefined)
           .sort((a, b) => (b.date || '').localeCompare(a.date || ''));
       },
-      // Solde net des lignes signalées elles-mêmes (entrées reçues moins
+      // Tags réellement présents parmi les lignes signalées de ce compte
-      // versements sortis, pour ce compte) -- pas un total "reste dû"
+      // -- dérivé de lignesSignalees (pas de lignesSignaleesFiltrees), pour
-      // comme totalResteAVerser ci-dessous, juste la somme des montants
+      // que la liste d'options du filtre reste stable même une fois un tag
-      // affichés dans le tableau, pour avoir une idée de l'ampleur de ce
+      // sélectionné (sinon les autres tags disparaîtraient du menu dès
-      // qui est signalé.
+      // qu'on en coche un).
+      flagsDisponibles() {
+        return Array.from(new Set(this.lignesSignalees.flatMap((r) => r.flags))).sort();
+      },
+      // Même modèle "plusieurs valeurs, sémantique OR" que le filtre Type
+      // sur /lignes -- une ligne ressort si elle porte au moins un des
+      // tags cochés.
+      lignesSignaleesFiltrees() {
+        if (!this.flagFilter.length) return this.lignesSignalees;
+        return this.lignesSignalees.filter((r) => this.flagFilter.some((f) => r.flags.includes(f)));
+      },
+      // Solde net des lignes signalées (filtrées) elles-mêmes (entrées
+      // reçues moins versements sortis, pour ce compte) -- pas un total
+      // "reste dû" comme totalResteAVerser ci-dessous, juste la somme des
+      // montants affichés dans le tableau, pour avoir une idée de
+      // l'ampleur de ce qui est signalé (ou de ce sous-ensemble de tags).
       totalLignesSignalees() {
-        return Math.round(this.lignesSignalees.reduce((sum, r) => sum + r.parCompte[this.selectedCompte], 0) * 100) / 100;
+        return Math.round(this.lignesSignaleesFiltrees.reduce((sum, r) => sum + r.parCompte[this.selectedCompte], 0) * 100) / 100;
       },
       totalResteAVerser() {
         return Math.round(this.resteAVerserPositif.reduce((sum, r) => sum + r.residual, 0) * 100) / 100;
@@ -484,6 +502,10 @@
       },
       selectCompte(compte) {
         this.selectedCompte = compte;
+        // A tag selected for one compte may not even exist for the next
+        // one -- flagsDisponibles() would just drop it from the visible
+        // options while leaving it silently active in flagFilter.
+        this.flagFilter = [];
         writeHashCompte(compte);
       },
       async load() {

web/modules/custom/figli_compta_ledger/js/home.js

@@ -289,6 +289,7 @@
       filterCompte: params.get('compte') ? params.get('compte').split(',') : [],
       filterClient: params.get('client') || '',
       filterType: params.get('type') ? params.get('type').split(',') : [],
+      filterFlag: params.get('tag') ? params.get('tag').split(',') : [],
       filterYear: params.get('annee') || '',
       onlyErrors: params.get('ecarts') === '1',
       onlyFlagged: params.get('signale') === '1',
@@ -301,6 +302,7 @@
     if (state.filterCompte.length) params.set('compte', state.filterCompte.join(','));
     if (state.filterClient) params.set('client', state.filterClient);
     if (state.filterType.length) params.set('type', state.filterType.join(','));
+    if (state.filterFlag.length) params.set('tag', state.filterFlag.join(','));
     if (state.filterYear) params.set('annee', state.filterYear);
     if (state.onlyErrors) params.set('ecarts', '1');
     if (state.onlyFlagged) params.set('signale', '1');
@@ -397,6 +399,11 @@
         filterCompte: [],
         filterClient: '',
         filterType: [],
+        // Same array/OR-semantics/multiselect model as filterCompte/
+        // filterType above -- independent of onlyFlagged (the plain on/
+        // off toggle): this narrows to specific tags, onlyFlagged just
+        // means "has any tag at all".
+        filterFlag: [],
         filterYear: '',
         jumpYearValue: '',
         // Not a filter itself (jumpYearValue always resets to '' right
@@ -593,6 +600,7 @@
           if (this.filterCompte.length && !this.filterCompte.some((c) => r.parCompte[c] !== undefined)) return false;
           if (this.filterClient && r.client !== this.filterClient) return false;
           if (this.filterType.length && !this.filterType.includes(r.type)) return false;
+          if (this.filterFlag.length && !this.filterFlag.some((f) => r.flags.includes(f))) return false;
           if (this.filterYear && (r.date || '').slice(0, 4) !== this.filterYear) return false;
           if (this.onlyErrors && !r.hasError) return false;
           if (this.onlyFlagged && !r.hasFlag) return false;
@@ -1331,7 +1339,7 @@
       // filter with only a few matches a year could search almost forever
       // without surfacing more of them.
       isFiltering() {
-        return !!(this.filterCompte.length || this.filterClient || this.filterType.length || this.onlyErrors || this.onlyFlagged);
+        return !!(this.filterCompte.length || this.filterClient || this.filterType.length || this.filterFlag.length || this.onlyErrors || this.onlyFlagged);
       },
       // Keeps extending the window (both directions) as long as a filter
       // leaves too few matching rows to fill the viewport -- otherwise
@@ -1543,6 +1551,7 @@
           filterCompte: this.filterCompte,
           filterClient: this.filterClient,
           filterType: this.filterType,
+          filterFlag: this.filterFlag,
           filterYear: this.filterYear,
           onlyErrors: this.onlyErrors,
           onlyFlagged: this.onlyFlagged,
@@ -1592,6 +1601,10 @@
         this.ensureScrollable();
         this.syncHash();
       },
+      filterFlag() {
+        this.ensureScrollable();
+        this.syncHash();
+      },
       onlyErrors() {
         this.ensureScrollable();
         this.syncHash();
@@ -1612,6 +1625,7 @@
       this.filterCompte = hashState.filterCompte;
       this.filterClient = hashState.filterClient;
       this.filterType = hashState.filterType;
+      this.filterFlag = hashState.filterFlag;
       this.onlyErrors = hashState.onlyErrors;
       this.onlyFlagged = hashState.onlyFlagged;
 

web/modules/custom/figli_compta_ledger/templates/figli-compta-dashboard-compte.html.twig

@@ -115,12 +115,25 @@
     <section class="figli-chart-section" v-if="lignesSignalees.length">
       <h2>Lignes signalées</h2>
       <p class="figli-note">Entrées et versements de {{ selectedCompte }} portant un signalement (voir la colonne "Signalement" dans le grand livre) -- indépendant du solde, une ligne déjà réglée peut quand même être signalée pour une autre raison.</p>
+      <label>Signalement
+        <span class="figli-filter-row">
+          <div class="figli-multiselect">
+            <div class="figli-multiselect-trigger">{{ flagFilter.length ? flagFilter.join(', ') : 'Tous' }} <span class="figli-multiselect-arrow">▾</span></div>
+            <div class="figli-multiselect-panel">
+              <label v-for="f in flagsDisponibles" :key="f" class="figli-multiselect-option">
+                <input type="checkbox" :value="f" v-model="flagFilter" /> {{ f }}
+              </label>
+            </div>
+          </div>
+          <button v-if="flagFilter.length" type="button" class="figli-filter-clear" @click="flagFilter = []" title="Effacer ce filtre">✕</button>
+        </span>
+      </label>
       <table class="figli-recon-table">
         <thead>
           <tr><th>Date</th><th>Type</th><th>Client</th><th>Libellé</th><th>Signalement</th><th>Montant</th></tr>
         </thead>
         <tbody>
-          <tr v-for="r in lignesSignalees" :key="r.id" class="figli-flag-row">
+          <tr v-for="r in lignesSignaleesFiltrees" :key="r.id" class="figli-flag-row">
             <td>{{ formatDate(r.date) }}</td>
             <td>{{ r.type === 'entree' ? 'Entrée' : 'Versement' }}</td>
             <td><a :href="ligneHref(r.client)">{{ r.client || '—' }}</a></td>
@@ -128,6 +141,7 @@
             <td><span v-for="f in r.flags" :key="f" class="figli-flag-badge">{{ f }}</span></td>
             <td :class="r.parCompte[selectedCompte] < 0 ? 'is-negative' : ''">{{ formatEur(r.parCompte[selectedCompte]) }}</td>
           </tr>
+          <tr v-if="!lignesSignaleesFiltrees.length"><td colspan="6" class="figli-note">Aucune ligne pour ce signalement.</td></tr>
         </tbody>
         <tfoot>
           <tr>

web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig

@@ -58,6 +58,21 @@
       </span>
     </label>
 
+    <label>Signalement
+      <span class="figli-filter-row">
+        <div class="figli-multiselect">
+          <div class="figli-multiselect-trigger">{{ filterFlag.length ? filterFlag.join(', ') : 'Tous' }} <span class="figli-multiselect-arrow">▾</span></div>
+          <div class="figli-multiselect-panel">
+            <label v-for="f in allFlagsList" :key="f" class="figli-multiselect-option">
+              <input type="checkbox" :value="f" v-model="filterFlag" /> {{ f }}
+            </label>
+            <p v-if="!allFlagsList.length" class="figli-note">Aucun signalement existant.</p>
+          </div>
+        </div>
+        <button v-if="filterFlag.length" type="button" class="figli-filter-clear" @click="filterFlag = []" title="Effacer ce filtre">✕</button>
+      </span>
+    </label>
+
     <label>Année
       <span class="figli-filter-row">
         <select v-model="filterYear">