Checkpoint: Sélecteur d'année global (2025, 2026, 2027+) sur Renouvellement PC, CAPEX-Construction, CAPEX-Synthèse et DSI-OPEX. Données CAPEX isolées par année en localStorage. Titres dynamiques selon l'année sélectionnée.

2026-06-03 09:49:14 +00:00
parent 858f0dc4d9
commit 787928c722
7 changed files with 189 additions and 55 deletions
--- a/client/src/components/AnneeSelectorBar.tsx
+++ b/client/src/components/AnneeSelectorBar.tsx
@@ -0,0 +1,66 @@
+// AnneeSelectorBar.tsx — Sélecteur d'année réutilisable
+// Utilisé dans : Renouvellement PC, CAPEX-Construction, CAPEX-Synthèse, DSI-OPEX
+
+import { Calendar, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useAnnee, ANNEES_DISPONIBLES } from '../contexts/AnneeContext';
+
+interface AnneeSelectorBarProps {
+  label?: string;
+  className?: string;
+}
+
+export function AnneeSelectorBar({ label, className = '' }: AnneeSelectorBarProps) {
+  const { annee, setAnnee } = useAnnee();
+  const idx = ANNEES_DISPONIBLES.indexOf(annee);
+
+  const prev = () => { if (idx > 0) setAnnee(ANNEES_DISPONIBLES[idx - 1]); };
+  const next = () => { if (idx < ANNEES_DISPONIBLES.length - 1) setAnnee(ANNEES_DISPONIBLES[idx + 1]); };
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      {label && (
+        <span className="text-xs text-muted-foreground font-medium mr-1">{label}</span>
+      )}
+      <div className="flex items-center gap-1 bg-card border border-border rounded-lg px-1 py-0.5 shadow-sm">
+        <button
+          onClick={prev}
+          disabled={idx === 0}
+          className="p-1 rounded hover:bg-muted/60 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          title="Année précédente"
+        >
+          <ChevronLeft className="w-3.5 h-3.5 text-muted-foreground" />
+        </button>
+
+        {/* Boutons d'année */}
+        <div className="flex items-center gap-0.5">
+          {ANNEES_DISPONIBLES.map(a => (
+            <button
+              key={a}
+              onClick={() => setAnnee(a)}
+              className={`px-2.5 py-1 rounded text-xs font-semibold transition-all duration-150 ${
+                a === annee
+                  ? 'bg-primary text-white shadow-sm'
+                  : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+              }`}
+            >
+              {a}
+            </button>
+          ))}
+        </div>
+
+        <button
+          onClick={next}
+          disabled={idx === ANNEES_DISPONIBLES.length - 1}
+          className="p-1 rounded hover:bg-muted/60 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          title="Année suivante"
+        >
+          <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
+        </button>
+      </div>
+      <div className="flex items-center gap-1 text-xs text-muted-foreground">
+        <Calendar className="w-3.5 h-3.5" />
+        <span>Exercice {annee}</span>
+      </div>
+    </div>
+  );
+}