# Spécification – Utilisateurs & Pages Auth complémentaires ESTAIR
> Pages reprises depuis Vuexy avec adaptations ESTAIR

---

## Page 1 – Liste des Utilisateurs avec Rôles
> Fichier Vuexy : `apps/roles`
> Route ESTAIR : `/users`

### Structure générale
```
┌─ Titre ──────────────────────────────────────────────────┐
│  Liste des Utilisateurs                                   │
│  Gérez les accès selon les rôles assignés                 │
├─ Grille de rôles (cards 3 colonnes) ─────────────────────┤
│  [Card Rôle]  [Card Rôle]  [Card Ajouter un rôle]        │
│  [Card Rôle]  [Card Rôle]                                 │
├─ Tableau utilisateurs ───────────────────────────────────┤
│  Total utilisateurs avec leurs rôles                      │
│  [Show 10▼]  [Search User…]  [Sélectionner un rôle▼]    │
│  Tableau                                                  │
└──────────────────────────────────────────────────────────┘
```

---

### Zone 1 – Cards de Rôles

**Visuel Vuexy :** Grille 3 colonnes, cards blanches avec ombre légère.  
Chaque card : total users (petit texte gris) + avatars empilés avec overflow `+N` (coin haut droit) + nom du rôle (bold) + lien "Edit Role" + icône dupliquer.

**Adaptation ESTAIR – 6 rôles :**

| Card | Rôle | Couleur badge |
|------|------|--------------|
| 1 | Admin | Violet |
| 2 | Support | Bleu |
| 3 | Sale | Vert |
| 4 | Finance | Orange |
| 5 | Agency | Cyan |
| 6 | Agent | Gris |

**Structure d'une card :**
```
┌──────────────────────────────────────────┐
│  Total X utilisateurs          [+N] 👤👤👤│
│                                           │
│  Admin                           [⧉]     │
│  Modifier le rôle                         │
└──────────────────────────────────────────┘
```

**Card "Ajouter un rôle" (7ème card) :**
- Illustration 3D Vuexy (personnage féminin violet) → **identique**
- Bouton `+ Ajouter un rôle` (violet)
- Sous-texte : `Ajouter un nouveau rôle s'il n'existe pas`
- **Visible uniquement pour le rôle `admin`**

**Clic "Modifier le rôle" :** Ouvre une modale de gestion des permissions (matrice CRUD par module — voir `Configuration_Keycloak_ESTAIR.md`)

---

### Zone 2 – Tableau Utilisateurs

**Colonnes :**

| Colonne | Contenu Vuexy | Contenu ESTAIR |
|---------|--------------|----------------|
| ☐ | Checkbox | Identique |
| USER | **Photo réelle** + Nom complet + Email | **Photo Keycloak** (ou initiales si absente) + Nom complet + Email |
| RÔLE | Icône colorée + nom du rôle | Icône colorée + rôle Keycloak |
| AGENCE | — | Nom de l'agence liée (si rôle `agency`/`agent`) |
| STATUT | Badge `Active` vert / `Inactive` gris / `Pending` orange | Identique (statut Keycloak) |
| ACTIONS | 🗑 Supprimer · 👁 Voir · ⋮ Menu | 🗑 · 👁 · ⋮ (Modifier / Suspendre / Réinitialiser MDP) |

> **Différence clé vs Vuexy :** Suppression des colonnes PLAN et BILLING (non pertinentes pour ESTAIR). Ajout de la colonne AGENCE.

**Toolbar :**
```
[Show 10▼]              [🔍 Rechercher un utilisateur…]  [Sélectionner un rôle ▼]
```

**Badges statut :**
- `Actif` → vert (`#28c76f`)
- `Inactif` → gris (`#82868b`)
- `En attente` → orange (`#ff9f43`)
- `Suspendu` → rouge (`#ea5455`)

**Photos :**
- Source : attribut `picture` du token Keycloak (URL avatar)
- Fallback : cercle coloré avec initiales (Nom + Prénom)
- Taille : 38px × 38px, `border-radius: 50%`

---

## Page 2 – Vue Détail Utilisateur
> Fichier Vuexy : `apps/user/view/{id}`
> Route ESTAIR : `/users/{id}`

### Structure générale — Layout 2 colonnes
```
┌─ Colonne gauche (fixe ~400px) ──┬─ Colonne droite (tabs) ──────────┐
│  Photo + Nom + Badge rôle       │  [Account] [Sécurité] [Agence]   │
│  2 KPIs                         │                                    │
│  ─────────────────────────      │  Contenu du tab actif             │
│  Détails                        │                                    │
│  [Modifier]  [Suspendre]        │                                    │
└─────────────────────────────────┴────────────────────────────────────┘
```

---

### Colonne gauche – Card Profil

**Visuel Vuexy :**
- Photo de profil (rectangle arrondi ~80px)
- Nom en bold + badge rôle violet centré sous le nom
- 2 KPIs horizontaux avec icône + valeur + label
- Section "Details" en liste label/valeur
- Boutons `Edit` (violet) + `Suspend` (rouge outline)

**Adaptation ESTAIR :**

| Élément Vuexy | Élément ESTAIR |
|--------------|----------------|
| Photo profil | Photo Keycloak / initiales |
| Badge rôle | Badge coloré selon rôle ESTAIR |
| KPI 1 : Task Done | Tickets émis (count `etats-de-ventes`) |
| KPI 2 : Project Done | EMDs actifs (count `emds`) |
| Username | Identifiant Keycloak |
| Billing Email | Email |
| Status | Statut Keycloak (Actif / Inactif / Suspendu) |
| Role | Rôle ESTAIR |
| Tax ID | Code agence (si `agency`/`agent`) |
| Contact | Téléphone |
| Language | Langue |
| Country | Pays |
| Bouton `Edit` | `Modifier` → ouvre panneau droit Create/Update |
| Bouton `Suspend` | `Suspendre` → confirmation modale |

---

### Colonne droite – Tabs

**Tabs ESTAIR (adaptation des tabs Vuexy) :**

| Tab Vuexy | Tab ESTAIR | Contenu |
|-----------|-----------|---------|
| Account | **Compte** | Activité récente de l'utilisateur (timeline) |
| Security | **Sécurité** | Sessions actives Keycloak + historique connexions + reset MDP |
| Billing & Plan | **Agence** | Infos agence liée (si rôle `agency`/`agent`) · Solde · Crédit limit |
| Notifications | **Permissions** | Matrice lecture seule des permissions par module |
| Connections | **Historique** | Log des actions (audit trail) |

**Tab Compte – Activité (adapté de "User Activity Timeline" Vuexy) :**
- Timeline verticale avec point coloré + texte + horodatage
- Événements : connexion, émission ticket, remboursement, modification, etc.
- Pagination ou scroll infini

**Tab Sécurité :**
- Sessions actives (appareil, IP, localisation, date) + bouton "Révoquer"
- Dernières connexions (tableau simple)
- Bouton "Envoyer lien de réinitialisation MDP" (déclenche Keycloak)
- Activation/désactivation 2FA

---

## Page 3 – Vérification Email
> Fichier Vuexy : `pages/authentication/verify-email-v2`
> Route ESTAIR : `/verify-email`
> **Reprise telle quelle** – modifications textuelles uniquement

### Panneau droit

| Élément | Vuexy | ESTAIR |
|---------|-------|--------|
| Titre | `Verify your email 📧` | `Vérifiez votre email 📧` |
| Sous-titre | `Account activation link sent to your email address: hello@example.com Please follow the link inside to continue.` | `Un lien d'activation a été envoyé à l'adresse : {email_keycloak}. Cliquez sur le lien dans l'email pour continuer.` |
| Bouton | `Skip For Now` (violet) | `Passer pour l'instant` |
| Lien | `Didn't get the mail? Resend` | `Vous n'avez pas reçu l'email ? Renvoyer` |

**Branchement Keycloak :**
- Cette page s'affiche après le login si Keycloak renvoie `email_verified: false`
- `Passer pour l'instant` → redirige vers `/dashboard` (Keycloak peut être configuré pour autoriser l'accès sans vérification)
- `Renvoyer` → POST Keycloak Admin API : `PUT /users/{id}/execute-actions-email` avec action `VERIFY_EMAIL`

---

## Page 4 – Validation en Deux Étapes (2FA)
> Fichier Vuexy : `pages/authentication/two-steps-v2`
> Route ESTAIR : `/two-steps`
> **Reprise telle quelle** – modifications textuelles uniquement

### Panneau droit

| Élément | Vuexy | ESTAIR |
|---------|-------|--------|
| Titre | `Two Step Verification 💬` | `Vérification en deux étapes 💬` |
| Sous-titre ligne 1 | `We sent a verification code to your mobile. Enter the code from the mobile in the field below.` | `Un code de vérification a été envoyé à votre mobile. Saisissez le code reçu ci-dessous.` |
| Numéro masqué | `******1234` | `******{4 derniers chiffres}` (dynamique depuis Keycloak) |
| Label champ | `Type your 6 digit security code` | `Saisissez votre code de sécurité à 6 chiffres` |
| Champs OTP | 6 inputs individuels (1 chiffre chacun, focus auto) | **Identiques** |
| Bouton | `Verify My Account` (violet) | `Vérifier mon compte` |
| Lien | `Didn't get the code? Resend` | `Vous n'avez pas reçu le code ? Renvoyer` |

**Comportement des champs OTP (identique Vuexy) :**
- 6 inputs individuels de 1 caractère, `type="tel"` ou `type="number"`
- Focus automatique sur le suivant à chaque saisie
- Suppression → retour au précédent
- Paste d'un code complet → distribution automatique sur les 6 champs

**Branchement Keycloak :**
- Cette page s'affiche quand Keycloak retourne `required_actions: ["CONFIGURE_TOTP"]` ou quand le flow OTP est activé
- Bouton `Vérifier mon compte` → POST Keycloak token endpoint avec le code OTP
- `Renvoyer` → selon le type de 2FA configuré dans Keycloak (TOTP app = impossible de renvoyer / SMS = appel API SMS gateway)

---

## Récapitulatif des 4 pages

| Page | Route | Type | Modifications |
|------|-------|------|---------------|
| Liste Utilisateurs | `/users` | Page complète | Colonnes adaptées, 6 rôles ESTAIR, photo Keycloak |
| Vue Détail User | `/users/{id}` | Page complète | KPIs métier, tabs adaptés, données Keycloak |
| Verify Email | `/verify-email` | Auth (telle quelle) | Textes FR + branchement Keycloak |
| Two Steps | `/two-steps` | Auth (telle quelle) | Textes FR + branchement Keycloak OTP |

---

## Fichiers Vuexy à copier / adapter

```
src/pages/apps/roles/index.vue              → /users/index.vue
src/pages/apps/user/view/[id].vue           → /users/[id].vue
src/pages/authentication/verify-email-v2.vue → /verify-email.vue
src/pages/authentication/two-steps-v2.vue   → /two-steps.vue
```