# Spécification – Panneau Droit Détail ESTAIR (Révision)
> Remplacement des accordions par des **Grow Tabs** · Objets contextuels en vue liste complète
> Référence tabs : `components/tabs` → variante **Grow** (`grow` prop sur `v-tabs`)

---

## Architecture révisée du panneau Détail

```
┌─ PANNEAU DROIT (480px, fixed right, slide-in) ──────────┐
│                                                           │
│  ┌─ Header ──────────────────────────────────────────┐  │
│  │  👁  {label_primaire}                        ✕   │  │
│  └───────────────────────────────────────────────────┘  │
│                                                           │
│  ┌─ Barre d'actions ─────────────────────────────────┐  │
│  │  [✏ Modifier]  [📋 Dupliquer]  [🗑 Supprimer]    │  │
│  └───────────────────────────────────────────────────┘  │
│                                                           │
│  ══════════════ SECTION 1 — DÉTAIL ══════════════════   │
│                                                           │
│  ┌─ Grow Tabs (blocs metadata) ──────────────────────┐  │
│  │  Bloc A  │  Bloc B  │  Bloc C  │  Bloc D          │  │
│  ├───────────────────────────────────────────────────┤  │
│  │                                          ↑        │  │
│  │  Champ        Valeur   Champ     Valeur  │        │  │
│  │  Champ        Valeur   Champ     Valeur  │ max-   │  │
│  │  Champ long             Valeur           │ height │  │
│  │  ...                                     │ scroll │  │
│  │                                          ↓        │  │
│  └───────────────────────────────────────────────────┘  │
│                                                           │
│  ══════════════ SECTION 2 — CONTEXTES ═══════════════   │
│                                                           │
│  ┌─ Grow Tabs (objets contextuels) ──────────────────┐  │
│  │  Tickets [3] │ EMDs [0] │ Docs [5] │ Factures [2] │  │
│  ├───────────────────────────────────────────────────┤  │
│  │  [+ Nouveau]  [⚙ Filtres]   [🔍 Rechercher…]     │  │
│  │                                  [10▼]  [Export]  │  │
│  │  ─────────────────────────────────────────────── │  │
│  │  ☐  Col 1       Col 2    Col 3    Statut   ⋮     │  │
│  │  ☐  …           …        …        …        ⋮     │  │
│  │  ─────────────────────────────────────────────── │  │
│  │  Showing 1 to 5 of 10        «‹ 1 2 3 ›»        │  │
│  └───────────────────────────────────────────────────┘  │
│                                                           │
└───────────────────────────────────────────────────────────┘
```

---

## Section 1 — Détail avec Grow Tabs

### Composant Vuexy
`<v-tabs grow>` — les tabs se répartissent la largeur disponible à parts égales, sans limite.

```vue
<v-tabs v-model="activeDetailTab" grow>
  <v-tab v-for="bloc in detailBlocks" :key="bloc.id">
    {{ bloc.label }}
  </v-tab>
</v-tabs>
<v-window v-model="activeDetailTab">
  <v-window-item v-for="bloc in detailBlocks" :key="bloc.id">
    <!-- grille 2 champs par ligne -->
  </v-window-item>
</v-window>
```

### Style des tabs (variante Grow)
- Onglet actif : texte violet + underline violet (2px)
- Onglet inactif : texte gris, pas de bordure
- Tous les onglets occupent exactement `100% / N` de la largeur
- Si le label déborde → tronqué avec ellipsis + tooltip au hover

### Contenu du tab actif

**Grille 2 colonnes :**
```
┌────────────────────────────────────────────┐
│  Label          Valeur   Label    Valeur   │
│  Label          Valeur   Label    Valeur   │
│  Label long              Valeur (span 2)  │
└────────────────────────────────────────────┘
```

- Champs `colSpan: 1` → 2 par ligne (label gris 12px + valeur 14px)
- Champs `colSpan: 2` → pleine largeur (ex: textarea, URL longue)
- Valeurs de type badge → rendu badge coloré (statuts)
- Valeurs de type lien → texte violet cliquable
- Valeurs de type montant → formaté avec devise

### Hauteur max + scroll

```css
.detail-tab-content {
  max-height: 45vh;   /* ~45% de la hauteur viewport */
  overflow-y: auto;
  padding: 16px;
  scroll-behavior: smooth;
}
/* Scrollbar discrète */
.detail-tab-content::-webkit-scrollbar { width: 4px; }
.detail-tab-content::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 2px; }
```

> **Ratio 45vh** : laisse de la place pour la barre d'actions (≈48px) + les tabs (≈44px) + la section contextes en dessous. À ajuster selon les retours utilisateurs.

---

## Section 2 — Objets Contextuels avec Grow Tabs

### Tab de navigation entre objets contextuels

```vue
<v-tabs v-model="activeContextTab" grow>
  <v-tab v-for="ctx in contextObjects" :key="ctx.moduleId">
    {{ ctx.label }}
    <v-chip size="x-small" class="ms-2">{{ ctx.count }}</v-chip>
  </v-tab>
</v-tabs>
```

**Badge count sur chaque tab :**
- Fond violet clair + texte violet si count > 0
- Fond gris clair + texte gris si count = 0
- Le badge se met à jour en temps réel après chaque création/suppression

---

### Vue liste contextuelle — identique à la vue liste principale

> **Principe clé :** la vue liste d'un objet contextuel est **exactement la même** que la vue liste principale du module correspondant. Même toolbar, même tableau, même pagination, mêmes CTAs.

#### Toolbar contextuel
```
[+ Nouveau]  [⚙ Filtres [N]]     [🔍 Rechercher…]  [10▼]  [↑ Export]
```

- `+ Nouveau` → ouvre le **Form Wizard** en mode Create, **pré-rempli** avec la référence de l'objet parent (ex: `account_id` automatiquement sélectionné)
- `⚙ Filtres` → ouvre un **panneau filtre inline** sous le toolbar (pas de panneau droit imbriqué — l'espace est trop réduit)
- `🔍 Rechercher` → debounce 300ms, filtre côté API
- `[10▼]` → page size
- `↑ Export` → modale export

#### Tableau contextuel

Colonnes définies dans les métadonnées du module contextuel (`ModuleMetadata.columns`), identiques à celles de la vue liste principale — **sauf** que la colonne de référence au parent est masquée (inutile dans ce contexte).

Exemple — objet contextuel `factures` dans la vue détail d'un `account` :

| Col | Contenu (image 2 de référence) |
|-----|-------------------------------|
| ☐ | Checkbox |
| # | `#5036` (lien violet) |
| STATUT | Icône statut colorée |
| CLIENT | Avatar initiales + Nom + Email |
| TOTAL | Montant |
| DATE ÉMISSION | Date |
| BALANCE | Montant (négatif en rouge) ou badge `Payé` vert |
| ACTIONS | 🗑 · 👁 · ⋮ |

> L'image 2 fournie (vue invoice) est exactement le modèle à suivre pour chaque objet contextuel.

#### Pagination contextuelle
```
Showing 1 to 5 of 10 entries          «  ‹  1  2  ›  »
```
- Page size réduite par défaut à **5** (au lieu de 10 pour la vue principale) pour minimiser le scroll
- Pagination complète identique à la vue principale

---

## Comportement du scroll global du panneau

Le panneau droit est un **scroll unique vertical** — pas de scroll imbriqué :

```
Position 0  → Header + barre d'actions (sticky)
Position 1  → Section 1 : tabs détail + contenu (hauteur fixe max 45vh)
Position 2  → Section 2 : tabs contextes + vue liste (hauteur variable)
```

- Le **header + barre d'actions** sont en `position: sticky; top: 0` — ils restent visibles au scroll
- Les **tabs de détail** sont également sticky (`top: 96px`) pour garder la navigation visible
- Les **tabs contextuels** sont sticky (`top: 140px`) lors du scroll vers le bas

```css
.panel-header       { position: sticky; top: 0; z-index: 10; background: white; }
.detail-tabs-bar    { position: sticky; top: 96px; z-index: 9; background: white; }
.context-tabs-bar   { position: sticky; top: 140px; z-index: 8; background: white; }
```

---

## Panneau Filtre contextuel — mode inline

Dans la section contextuelle, le filtre s'ouvre **en inline** sous le toolbar (expansion verticale) plutôt qu'en panneau droit superposé :

```
[+ Nouveau]  [⚙ Filtres [2] ▲]    [🔍 …]  [10▼]  [↑ Export]
┌───────────────────────────────────────────────────────────┐
│  Opérateur :  ⦿ ET   ○ OU                                │
│  [Statut ▼] [est ▼] [Payé          ]  🔵 ET   ✕         │
│  [Date   ▼] [après ▼] [2024-01-01  ]  🔵 ET   ✕         │
│  [+ Ajouter un filtre]              [Annuler] [Appliquer] │
└───────────────────────────────────────────────────────────┘
```

- Animation : expand/collapse fluide (max-height transition 200ms)
- Même logique ET/OU avec code couleur que le panneau filtre principal

---

## Modifications par rapport à la spec précédente

| Aspect | Ancienne spec | Nouvelle spec |
|--------|--------------|---------------|
| Blocs détail | Accordions collapsibles | **Grow Tabs** (v-tabs grow) |
| Navigation entre blocs | Expand/collapse | Clic sur tab |
| Hauteur zone détail | Variable (tout affiché) | **max-height 45vh + scroll interne** |
| Objets contextuels | Liste empilée avec badges | **Grow Tabs** + badge count |
| Vue d'un objet contextuel | Vue liste simplifiée | **Vue liste complète** (toolbar + tableau + pagination) |
| Filtre contextuel | Panneau droit imbriqué | **Inline expansion** sous le toolbar |
| Empilement panneaux (FILO) | Nouveau panneau par-dessus | **Supprimé** — tout dans le même panneau via tabs |

> Le système FILO d'empilement de panneaux est **abandonné** au profit de la navigation par tabs, plus simple et plus lisible dans l'espace restreint du panneau 480px.

---

## Contrat metadata mis à jour

```typescript
interface BlockDef {
  id: string
  label: string          // Label du tab (court, ≤ 15 chars recommandé)
  icon?: string          // Optionnel — affiché si stacked tabs
  order: number
  required: boolean
  fields: FieldDef[]
}

interface ContextObjectDef {
  moduleId: string       // ex: "factures"
  label: string          // Label du tab ex: "Factures"
  parentField: string    // Champ de liaison ex: "account_id"
  columns: ColumnDef[]   // Colonnes du tableau contextuel
  defaultPageSize: 5     // Toujours 5 pour les contextes
  actions: ActionDef[]   // CTAs disponibles
}
```