---
name: project-year-selector-kpi
description: "YearSelectorKpi — card sélecteur d'année violet/indigo sur la ligne KPI du Dashboard, synchronisé avec InteretsChartContext"
metadata: 
  node_type: memory
  type: project
  originSessionId: 9d8a4dc8-0caa-4a53-bf00-040dfe2afe4a
---

## Emplacement

Composant `YearSelectorKpi` défini dans `frontend/src/pages/Dashboard.jsx`, avant la fonction `Dashboard`. Doit être enfant de `InteretsChartProvider` pour accéder au contexte.

## Layout Dashboard modifié

Le `InteretsChartProvider` remonte pour englober à la fois la grille KPI et les graphiques :

```jsx
<InteretsChartProvider ...>
  {/* KPI + sélecteur */}
  <div style={{ display:'flex', gap:12, alignItems:'stretch', marginBottom:16 }}>
    <div className="kpi-grid" style={{ flex:1, marginBottom:0 }}>
      {/* 6 KPIs existants */}
    </div>
    <YearSelectorKpi />
  </div>
  {/* Graphiques */}
  <div style={{ display:'flex', gap:16, alignItems:'stretch', ... }}>
    <InteretsMensuelsChart /> + <InteretsDonutChart />
  </div>
</InteretsChartProvider>
```

`alignItems:'stretch'` + `marginBottom:0` sur le kpi-grid (override CSS) → la card année a la même hauteur que la grille.

## YearSelectorKpi

- **Couleur** : `linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%)` — violet/indigo, ombre `rgba(109,40,217,0.30)` qui s'intensifie à l'ouverture
- **Texte blanc**, label "PÉRIODE" en xs uppercase, chevron SVG animé (rotate 180° à l'ouverture)
- **Année en 2rem / bold** ; si modeGlobal actif → affiche "Depuis le début" en 1.1rem
- `width: 200px`, `flexShrink: 0`

## Dropdown custom

- Options : `{ value:'all', label:'Depuis le début' }` en tête, puis `availableYears` en ordre **croissant** (pas de `.reverse()`)
- Item actif : fond `rgba(109,40,217,0.08)`, couleur `#7c3aed`, bold, coche SVG ✓ à droite
- Hover : `var(--surface-2)`
- Séparateurs `borderBottom` entre items sauf le dernier
- `position: absolute; top: calc(100% + 6px); right: 0; z-index: 200`
- Fermeture sur clic extérieur via `useEffect` sur `mousedown`

## Synchronisation bidirectionnelle

```js
const handleSelect = (value) => {
  if (value === 'all') {
    if (!modeGlobal) toggleModeGlobal();   // active TOUT
  } else {
    if (modeGlobal) toggleModeGlobal();    // désactive TOUT
    setAnnee(value);
  }
};
```

- Changer l'année dans le bar chart → `annee` dans contexte → YearSelectorKpi se met à jour
- Activer TOUT dans le bar chart → `modeGlobal` dans contexte → affiche "Depuis le début"

**Why:** L'utilisateur doit voir l'année active de façon très visible et pouvoir la changer directement depuis le dashboard.
**How to apply:** Toujours garder YearSelectorKpi à l'intérieur de InteretsChartProvider. Si on déplace les graphiques, déplacer le Provider en même temps.
