---
title: "PRD — Migration UI vers Onyx"
module: dev
type: functional
status: active
updated: 2026-03-20
---

# PRD — Migration UI vers Onyx

**Statut :** En cours | **Dernière MAJ :** 2026-03-18 | **Owner :** Dev

---

## Contexte

ISI-APP dispose d'un design system interne appelé **Onyx** (`x-onyx.*`). Ce document liste toutes les vues et modules qui utilisent encore l'ancien système (Bootstrap brut, `x-global.*`) et sert de backlog pour migrer progressivement vers Onyx.

---

## Bilan global

| Catégorie | Fichiers | % |
|-----------|----------|---|
| **Modernes** (x-onyx uniquement) | 310 | 14.7% |
| **Legacy** (sans x-onyx) | 1 801 | 85.3% |
| **TOTAL** | 2 111 | 100% |

### Répartition du legacy

| Pattern | Occurrences | Composant Onyx cible |
|---------|-------------|----------------------|
| `class="row"` / `class="col-*"` | ~600 | — (pas de x-onyx.grid prévu) |
| `class="card"` / `class="card-body"` | ~153 | `x-onyx.panel` |
| `class="modal"` | ~150 | `x-onyx.modal` *(à créer)* |
| `class="form-group"` / `class="form-control"` | ~81 | `x-onyx.form-group` + `x-onyx.input` |
| `class="btn"` | ~43 | `x-onyx.button` |
| `class="alert"` | ~40 | `x-onyx.alert` |
| `x-global.*` | ~342 fichiers | Remplacer par x-onyx équivalents |

---

## Composants Onyx existants (41)

| Catégorie | Composants |
|-----------|------------|
| **Inputs** | input, select, form-group, toggle, file-upload, icon-picker |
| **Buttons** | button, dropdown, dropdown-item, back-button, back-top |
| **Alerts** | alert, callout, empty-state |
| **Cards** | panel, stat-card, media-card, menu-card, menu-card-compact |
| **Nav** | tabs, tabs-nav, accordion, stepper, timeline, description-list |
| **Status** | badge, status-dot, progress, spinner, skeleton |
| **Data** | chart, period-selector |
| **Utils** | avatar, divider, tooltip, kbd, code, page-header |

### Composants manquants (à créer avant migration)

| Composant | Urgence | Occurrences actuelles |
|-----------|---------|----------------------|
| `x-onyx.modal` | HAUTE | ~150 fichiers |
| `x-onyx.breadcrumb` | MOYENNE | — |
| `x-onyx.pagination` | MOYENNE | — |
| `x-onyx.table` | BASSE | (TableWire couvre ce cas) |

---

## Backlog par module

### PHASE 1 — Composants globaux (débloque tout le reste)

> **Impact maximal.** Refactoriser `components/global/*` migre indirectement des centaines de vues qui les incluent.

| Statut | Module | Fichiers legacy | Priorité |
|--------|--------|----------------|----------|
| [ ] | `components/global/input/*` | ~30 | HAUTE |
| [ ] | `components/global/button/*` | ~20 | HAUTE |
| [ ] | `components/global/modal.blade.php` | 1 (mais ~150 usages) | HAUTE |
| [ ] | `components/global/card/*` | ~15 | MOYENNE |
| [ ] | `components/global/alert/*` | 7 | MOYENNE |
| [ ] | Reste `components/global/` | ~180 | BASSE |

---

### PHASE 2 — Modules pilotes (faible volume, fort impact vitrine)

| Statut | Module | Fichiers legacy | Notes |
|--------|--------|----------------|-------|
| [ ] | `livewire/admin/` | 33 | Bon ratio, visible en interne |
| [ ] | `livewire/gmao/` | 22 | Presque terminé |
| [ ] | `admin/` (views) | 10 | Petit volume |
| [ ] | `livewire/param-dsi/` | ~6 | Impact cross-module |

---

### PHASE 3 — Livewire (cœur de l'app)

> 538 fichiers legacy sur 687 (78%). À traiter sous-module par sous-module.

| Statut | Sous-module | Legacy | Total | % moderne |
|--------|-------------|--------|-------|-----------|
| [ ] | `livewire/core-model/` | 4 | 21 | 81% ✅ (finir) |
| [ ] | `livewire/ticketv4/` | 41 | 90 | 54% (en cours) |
| [ ] | `livewire/user/` | 24 | 26 | 8% |
| [ ] | `livewire/crm/` | 33 | 35 | 6% |
| [ ] | `livewire/project/` | 59 | 61 | 3% |
| [ ] | `livewire/entity/` | 26 | 26 | 0% |
| [ ] | `livewire/hardware/` | 25 | 25 | 0% |
| [ ] | Reste `livewire/` | ~326 | — | — |

---

### PHASE 4 — Hook (vues custom clients)

> 216 fichiers legacy sur 241 (89%). Vues générées/custom par client — migration délicate.

| Statut | Sous-dossier | Fichiers legacy | Notes |
|--------|-------------|----------------|-------|
| [ ] | `hook/*view.blade.php` | ~100 | Vues principales hook |
| [ ] | `hook/custom/tab/` | ~50 | Onglets custom |
| [ ] | `hook/custom/ctl/` | ~30 | Contrôles custom |
| [ ] | `hook/custom/tabcontent/` | ~40 | Contenus onglets |

---

### PHASE 5 — Autres modules

| Statut | Module | Fichiers legacy | Notes |
|--------|--------|----------------|-------|
| [ ] | `crm/` (views) | 68 | 100% legacy |
| [ ] | `see/` | 68 | 88% legacy |
| [ ] | `wikiv2/` | 37 | 95% legacy |
| [ ] | `email/` | 39 | 100% legacy (templates mail, à évaluer) |
| [ ] | `project/` (views) | 27 | 96% legacy |
| [ ] | `ticketv4/` (views) | 18 | 86% legacy |
| [ ] | `exports/` | 145 | 100% legacy — **probablement hors scope** (rapports PDF/Excel) |
| [ ] | `widgets/` | 11 | — |

---

## Règles de migration

### Ce qu'on remplace

```blade
{{-- ❌ AVANT --}}
<div class="card">
    <div class="card-header">Titre</div>
    <div class="card-body">Contenu</div>
</div>

{{-- ✅ APRÈS --}}
<x-onyx.panel title="Titre">Contenu</x-onyx.panel>
```

```blade
{{-- ❌ AVANT --}}
<div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" wire:model="email">
</div>

{{-- ✅ APRÈS --}}
<x-onyx.input type="email" label="Email" wire:model="email" />
```

```blade
{{-- ❌ AVANT --}}
<button class="btn btn-primary">Enregistrer</button>

{{-- ✅ APRÈS --}}
<x-onyx.button>Enregistrer</x-onyx.button>
```

```blade
{{-- ❌ AVANT --}}
<x-global.alert type="success" message="Sauvegardé" />

{{-- ✅ APRÈS --}}
<x-onyx.alert type="success">Sauvegardé</x-onyx.alert>
```

### Ce qu'on ne remplace PAS

- `exports/` — templates PDF/Excel, Bootstrap utilisé pour le rendu impression
- `email/` — templates mail HTML, contrainte de compatibilité clients mail
- Layouts racines (`layouts/`) — refactorer séparément avec précaution

---

## Comment utiliser ce fichier

1. **Choisir un module** dans le backlog ci-dessus
2. Cocher `[x]` quand le module est terminé
3. Lancer : `grep -rL "x-onyx" resources/views/<module>/` pour lister les fichiers restants
4. Utiliser le skill `/onyx-ui` pour la migration
5. Après migration : `vendor/bin/duster fix --dirty`

---

## Liens utiles

- Référence composants Onyx : `docs/dev/ui-components-reference.md`
- Skill migration : `/onyx-ui`
- Composants Onyx sources : `resources/views/components/onyx/`