# Spécification – Refonte Interface ESTAIR (Frontend Nuxt 3)

## Contexte

Le projet consiste à refondre l'interface frontend d'ESTAIR en migrant depuis **ChapDesign** vers un nouveau projet **Nuxt 3**. L'objectif est de répliquer le travail déjà effectué dans ChapDesign, en produisant une spécification complète de chaque section de l'interface.

Le framework UI de référence est **Vuexy (Vue.js)**.

---

## 1. Architecture des types de pages

Le menu de navigation est produit dynamiquement par le backend (Chap). Il doit supporter plusieurs **types de pages** :

| Type | Description |
|------|-------------|
| `crud` | Interfaces liste / détail / create / update |
| `dashboard` | Rapports et tableaux de bord dynamiques |
| `setup` | Configuration des paramètres applicatifs (à implémenter) |

> **Important :** Les pages de type `dashboard` ne doivent pas être codées en dur dans le frontend. Elles doivent être chargées via le menu produit par Chap, exactement comme les autres types de pages.

---

## 2. Section Dashboard

### 2.1 Dashboard Général

Le premier rapport est un dashboard d'activité globale dont le contenu dépend du rôle connecté :

| Rôle | Vue |
|------|-----|
| `admin`, `finance`, `support` | Vue globale – données de toutes les agences |
| `agency`, `agent` | Vue restreinte – données de l'agence connectée uniquement |

**Référence UI :** Dashboard Analytics Vuexy  
`vuexy-vuejs-admin-template/demo-1/dashboards/analytics`  
→ Répliquer l'identité visuelle : code couleur, types de diagrammes, style des KPI.

#### Gestion de la période

- Toutes les données remontent sur une **période définie** (date début / date fin)
- **Période par défaut :** 7 jours calendaires glissants
- **Périodes prédéfinies disponibles :** Aujourd'hui, Hier, Avant-hier, 7 jours, 1 mois

### 2.2 Rapport de Contrôle d'Activité

Réplication du rapport existant dans ChapDesign (appel service STR, 5 contrôles).

**Rôles concernés :** `super_admin`, `finance`, `support`  
**Rôles exclus :** `agency`, `agent`

---

## 3. Architecture des Rapports (Généralisation)

L'objectif est de **généraliser la production de rapports** depuis le backend.

### Principe

1. Le backend définit le **type de composant** à utiliser (camembert, barre, ligne, tableau, KPI, etc.)
2. Le backend fournit les **données formatées** selon l'interface attendue par ce type de composant
3. Le frontend interprète et affiche sans logique métier propre au rapport

### Interfaces à définir (Backend → Frontend)

À produire sous forme de contrats d'interface (types TypeScript / JSON Schema) pour chaque type de composant graphique :

- `PieChartData`
- `BarChartData`
- `LineChartData`
- `KpiCardData`
- `DataTableData`
- *(autres à définir selon les besoins)*

> **Analogie :** Même logique que les interfaces CRUD dynamiques – le frontend interprète les métadonnées produites par le backend.

---

## 4. Interfaces CRUD

### 4.1 Badges / KPI des modules

Chaque module CRUD doit afficher **3 indicateurs clés (KPIs)** sous forme de badges.

**Types d'indicateurs :**
- `count` – Nombre total d'éléments du module
- `average_amount` – Montant moyen sur la période
- *(3ème à définir par module)*

**Période par défaut :** 30 jours glissants

**Modules nécessitant une période** (temporalité importante) :
- États de vente
- Mouvements
- Banque
- *(liste complète à fournir)*

**Modules sans période** (données de référence statiques) :
- *(liste à fournir)*

> La gestion des badges doit être **dynamique**, pas codée en dur.

### 4.2 Vue Liste

**Référence UI :** `ecommerce/order/list` et `user/list` de Vuexy  
→ Disposition simple, claire, épurée, très lisible. Badges en en-tête.

#### Comportement

- Clic sur une ligne → ouverture du **panneau droit** (vue détail)
- Animation d'entrée et de sortie du panneau détail (slide / fade)

#### Bugs identifiés

| Bug | Description |
|-----|-------------|
| Recherche tableau | La recherche sur le champ (ex: `maker`) ne filtre pas les résultats – le paramètre `search` n'est pas pris en compte dans la requête |
| Filtre panneau | Le filtre appliqué depuis le panneau filtre ne fonctionne pas – la requête retourne toujours le nombre total d'éléments (ex: 268) |

**Exemple de requête impactée :**
```
GET api/proxy/estair/admin/accounts?page=1&size=100&search=maker&filters={"name":{"operator":"contains","value":"maker"},"balance_m-1":{"operator":"gt","value":"0"}}
```

#### CTAs manquants

- Bouton **« Nouveau »** absent sur la vue PNR (et potentiellement d'autres modules)
- À vérifier : s'assurer que tous les CTAs définis dans ChapDesign sont bien présents

### 4.3 Export

**Comportement attendu :**
- Afficher la **liste globale** de tous les champs de l'objet (pas seulement les colonnes visibles)
- **Présélectionner** les champs actuellement affichés dans le tableau
- Permettre d'ajouter / retirer des champs de la sélection d'export
- Ajouter un bouton **« Tout sélectionner »** pour cocher tous les champs

### 4.4 Panneau Filtre

**Améliorations attendues :**
- Élargir le panneau filtre pour qu'il ait la **même largeur que le panneau détail**
- Disposer chaque élément de filtre sur **une seule ligne** (au lieu de 3 lignes actuellement)
- Ajouter un **code couleur** pour distinguer les filtres `ET` des filtres `OU`

### 4.5 Vue Détail

**Mise en page :**
- **2 champs par ligne** : `[label] [valeur]` – `[label] [valeur]`
- Organisation en **blocs collapsibles** (étendus / réduits)

**Objets contextuels :**
- Un objet contextuel a **la même mise en page qu'une vue liste**
- Mêmes CTAs disponibles (ajouter, modifier, supprimer)
- Les objets contextuels **sans données** (badge à 0) doivent être remontés au même niveau que les autres (ne plus les regrouper en bas dans « Autres »)
- Badge à `0` visible → bouton **« + Ajouter »** actif même à 0

### 4.6 Système de Panneaux Empilés (Stack)

**Comportement FILO (First In, Last Out) :**
- Clic sur élément d'un objet contextuel → nouveau panneau par-dessus
- Fermeture → on ferme toujours le **dernier panneau ouvert** (pas le premier)

**Bug actuel :** Le clic dans la liste ferme le premier panneau au lieu du dernier.

**Distinction visuelle entre panneaux superposés :**
- Chaque panneau supplémentaire est décalé de **20px** (plus petit) pour indiquer la profondeur
- Animation d'entrée et sortie à chaque empilement / dépilement

### 4.7 Vue Create / Update

- Organisation en **blocs collapsibles** (même logique que la vue détail)
- Vérifier le chargement des **picklists** (bug observé : affichage « objet » au lieu de la valeur)
- Vérifier le bon fonctionnement des champs **autocomplete**

---

## 5. Interface Utilisateurs

Interface dédiée, distincte de la vue liste CRUD classique.

**Référence UI :** `vuexy-vuejs-admin-template/demo-1/apps/roles`

**Profil utilisateur :**  
**Référence UI :** `user-profile/profile` de Vuexy

---

## 6. Pages d'Authentification (Keycloak)

| Page | Référence Vuexy |
|------|----------------|
| Login | `pages/authentication/login-v2` |
| Register | `pages/authentication/register-v2` |

---

## 7. Menu de Navigation

- **Revoir les icônes** du menu
- La section **Dashboard** contiendra plusieurs rapports (pas un seul) → prévoir une structure de sous-menus

---

## 8. Composants UI – Sélections Vuexy

### Composants

| Composant | URL | Variante |
|-----------|-----|----------|
| Alert | `components/alert` | Tonal |
| Avatar | `components/avatar` | Tonal |
| Button | `components/button` | Tonal |
| Chip | `components/chip` | Color |
| Expansion Panel | `components/expansion-panel` | Basic |
| Progress Linear | `components/progress-linear` | Indeterminate |
| Tabs | `components/tabs` | Fixed |
| Timeline | `components/timeline` | Outlined Timeline |
| Tooltip | `components/tooltip` | Delay On Hover |

### Éléments de Formulaire

| Composant | URL | Variante |
|-----------|-----|----------|
| Autocomplete | `forms/autocomplete` | Underlined |
| Checkbox | `forms/checkbox` | Basic |
| Combobox | – | Underlined |
| Date/Time | – | Basic |
| File Input | – | Underlined |
| Radio | – | Colors |
| Custom Input (radio) | `forms/custom-input` | Custom Radios |
| Custom Input (checkbox) | `forms/custom-input` | Custom Checkboxes |
| Select | – | Underlined |
| Switch | – | Basic |
| Textarea | `forms/textarea` | Underlined |
| Textfield | `forms/textfield` | Underlined |

### Layouts de Formulaires

| Layout | URL | Variante |
|--------|-----|----------|
| Multi-colonnes | `forms/form-layouts` | Multiple Column |
| Section collapsible | `forms/form-layouts` | Collapsible Section |
| Wizard numéroté | `forms/form-wizard-numbered` | Numbered Validation |

---

## 9. Actions en Attente / Compléments à Fournir

- [ ] Liste complète des modules opérationnels ESTAIR (pour définition des KPIs badges)
- [ ] Liste des modules nécessitant une période vs. modules de référence statique
- [ ] Définition des 3 KPIs par module
- [ ] Contrats d'interface Backend → Frontend pour les types de composants de rapport
- [ ] Inventaire des CTAs manquants sur chaque module