# Dofus Manager UI/UX Specification

## Introduction

Ce document définit les objectifs d'expérience utilisateur, l'architecture de l'information, les flux utilisateur et les spécifications de design visuel pour l'interface de **Dofus Manager**. Il sert de fondation pour le design visuel et le développement frontend, assurant une expérience cohérente et centrée sur l'utilisateur.

---

## Overall UX Goals & Principles

### Target User Persona

**Theo - Le Multi-Compteur Organisé**

| Attribut | Description |
|----------|-------------|
| **Profil** | Joueur passionné de Dofus gérant 60+ personnages niveau 200 |
| **Contexte d'usage** | Joue sur PC avec souvent un second écran pour consulter ses données |
| **Frustrations actuelles** | Tableur Excel illisible, modifications fragiles, contraintes de compte gérées mentalement |
| **Objectifs** | Trouver rapidement qui n'a pas fait quoi, composer des teams valides, mettre à jour efficacement |
| **Expertise technique** | À l'aise avec les outils complexes, préfère la densité d'info à la simplicité |
| **Fréquence d'usage** | Quotidien pendant les sessions de jeu + planification hebdomadaire |

### Usability Goals

1. **Efficacité de navigation** — Trouver n'importe quelle information en moins de 3 clics depuis le dashboard
2. **Mises à jour rapides** — Pouvoir mettre à jour la progression d'une team entière en moins de 30 secondes
3. **Prévention d'erreurs** — Impossible d'ajouter 2 personnages du même compte dans une team active
4. **Vue d'ensemble immédiate** — Voir l'état global (teams, progressions, monnaies) en un coup d'œil
5. **Mémorabilité** — Interface cohérente permettant de retrouver ses repères après plusieurs jours d'absence

### Design Principles

1. **Densité maîtrisée** — Maximiser l'information visible sans surcharger visuellement. Utiliser la hiérarchie typographique et les espaces blancs stratégiquement.

2. **Consistance des patterns** — Tous les tableaux se comportent de la même façon (tri, filtres, pagination). Toutes les actions CRUD suivent le même flow.

3. **Feedback immédiat** — Chaque action utilisateur génère une réponse visuelle instantanée (loading states, toasts, transitions).

4. **Raccourcis pour experts** — Permettre les bulk actions, raccourcis clavier (V2), et filtres combinés pour les utilisateurs avancés.

5. **Fail-safe par design** — Les actions destructives demandent confirmation. Les contraintes métier sont validées avant même que l'utilisateur ne puisse les violer.

### Change Log

| Date | Version | Description | Author |
|------|---------|-------------|--------|
| 2026-01-17 | 0.1 | Création initiale | Sally (UX Expert) |

---

## Information Architecture (IA)

### Site Map / Screen Inventory

```mermaid
graph TD
    A[🏠 Dashboard<br/>Vue d'ensemble principale] --> B[👥 Personnages]
    A --> C[📁 Comptes]
    A --> D[⚔️ Teams]
    A --> E[⚙️ Paramètres]

    A --> A1[Widget Comptes]
    A --> A2[Widget Personnages]
    A --> A3[Widget Teams]
    A --> A4[Widget Monnaies]
    A --> A5[Actions rapides]

    B --> B1[Liste Personnages]
    B1 --> B2[Fiche Personnage]
    B2 --> B2a[Progressions]
    B2 --> B2b[Monnaies]
    B2 --> B2c[Teams]

    C --> C1[Liste Comptes]
    C1 --> C2[Fiche Compte]
    C2 --> C2a[Personnages du compte]
    C2 --> C2b[Métiers]
    C2 --> C2c[Récompenses]

    D --> D1[Liste Teams]
    D1 --> D2[Fiche Team]
    D2 --> D2a[Membres]
    D2 --> D2b[Statut Progressions]

    E --> E1[Serveurs]
    E --> E2[Monnaies]
    E --> E3[Données DofusDB]

    B1 --> F[🔄 Bulk Actions]
    F --> F1[Bulk Progressions]
    F --> F2[Bulk Monnaies]
```

### Navigation Structure

**Primary Navigation (Sidebar)**

| Icône | Label | Route | Description |
|-------|-------|-------|-------------|
| 🏠 | Dashboard | `/` | Vue d'ensemble, KPIs, accès rapide |
| 👥 | Personnages | `/characters` | Liste principale avec filtres |
| 📁 | Comptes | `/accounts` | Gestion des comptes Dofus |
| ⚔️ | Teams | `/teams` | Composition et statut des teams |
| ⚙️ | Paramètres | `/settings` | Configuration (serveurs, monnaies, sync) |

**Secondary Navigation (Contextuelle)**

- **Onglets sur fiches détail** : Personnage → [Infos | Progressions | Monnaies | Teams]
- **Sous-menu Paramètres** : [Serveurs | Monnaies | Données DofusDB]
- **Actions groupées** : Accessible depuis la toolbar des listes (quand sélection active)

**Breadcrumb Strategy**

Format : `Section > Sous-section > Élément`

Exemples :
- `Personnages > Krosmaster-Cra`
- `Teams > Main Team > Statut Progressions`
- `Paramètres > Données DofusDB`

**Dashboard Content**

| Widget | Contenu | Action au clic |
|--------|---------|----------------|
| **Comptes** | Liste des comptes avec nb persos, ogrines | → Fiche compte |
| **Personnages** | Total, répartition par classe/niveau | → Liste filtrée |
| **Teams** | Teams actives avec % complétion | → Fiche team |
| **Monnaies** | Totaux globaux par type | → Détail par compte |
| **Progressions** | Résumé global (X% Dofus faits, Y donjons) | → Bulk actions |
| **Actions rapides** | Boutons : Nouveau perso, Bulk update, Sync DofusDB | → Action directe |

---

## User Flows

### Flow 1: Trouver les personnages qui n'ont pas fait X

**User Goal:** Identifier rapidement quels personnages n'ont pas complété une progression spécifique

**Entry Points:** Dashboard → Widget Progressions, Sidebar → Personnages, Fiche Team

**Success Criteria:** Liste filtrée affichée en < 3 clics, < 5 secondes

```mermaid
graph TD
    A[Dashboard] --> B[Clic Personnages]
    B --> C[Liste avec Filtres]
    C --> D[Ouvrir filtre Progression]
    D --> E[Sélectionner type]
    E --> F[Sélectionner N'a pas fait]
    F --> G[✅ Liste filtrée affichée]

    G --> H{Action suivante?}
    H --> I[Voir fiche perso]
    H --> J[Sélectionner plusieurs]
    J --> K[Bulk Update]
```

**Edge Cases:**
- Aucun résultat → Message "Tous les personnages ont complété X" avec bouton reset
- Filtres combinés complexes → Indicateur des filtres actifs + "Clear all"

### Flow 2: Composer une team valide

**User Goal:** Créer ou modifier une team en respectant la contrainte compte

**Success Criteria:** Team créée avec membres valides, erreur claire si conflit

```mermaid
graph TD
    A[Liste Teams] --> B[Nouvelle Team]
    B --> C[Modal création]
    C --> D[Saisir nom + type]
    D --> E[Enregistrer]
    E --> F[Fiche Team vide]

    F --> G[Ajouter membre]
    G --> H[Sélecteur personnages]
    H --> I[Sélectionner perso]

    I --> K{Même compte dans team?}
    K -->|Non| L[✅ Membre ajouté]
    K -->|Oui| M[❌ Erreur conflit]
    M --> H

    L --> O{Continuer?}
    O -->|Oui| G
    O -->|Non| P[✅ Team complète]
```

### Flow 3: Bulk update progressions pour une team

**User Goal:** Marquer une progression faite pour tous les membres d'une team

**Success Criteria:** Mise à jour de N personnages en < 30 secondes

```mermaid
graph TD
    A[Fiche Team] --> B[Section Statut Progressions]
    B --> C[Sélectionner progression]
    C --> D[Voir statut par membre]
    D --> E{Tous faits?}
    E -->|Non| G[Bouton Marquer fait pour tous]

    G --> H[Modal confirmation]
    H --> I[Récap: X persos à mettre à jour]
    I --> J{Confirmer?}
    J -->|Oui| K[Processing...]
    K --> L[✅ Toast: X persos mis à jour]
    L --> M[Refresh → 100%]
```

### Flow 4: Ajouter un nouveau personnage

**User Goal:** Créer un personnage avec toutes ses informations

**Success Criteria:** Personnage créé et visible en < 1 minute

```mermaid
graph TD
    A[Liste Personnages] --> B[Clic Ajouter]
    B --> C[Modal création]
    C --> D[Saisir pseudo]
    D --> E[Sélectionner classe]
    E --> F[Saisir niveau]
    F --> G[Sélectionner serveur]
    G --> H[Sélectionner compte]
    H --> I{Validation}
    I -->|OK| J[Enregistrer]
    J --> K[✅ Toast confirmation]
    K --> L[Liste rafraîchie]
```

### Flow 5: Consulter le Dashboard

**User Goal:** Vue d'ensemble instantanée de tous les comptes et personnages

**Success Criteria:** Toutes les informations clés visibles sans scroll sur desktop

```mermaid
graph TD
    A[Accès Dashboard] --> B[Chargement widgets]
    B --> C[Affichage simultané]

    C --> D[Widget Comptes]
    C --> E[Widget Personnages]
    C --> F[Widget Teams]
    C --> G[Widget Monnaies]
    C --> H[Widget Progressions]

    D --> I[Clic → Liste comptes]
    E --> J[Clic → Liste personnages]
    F --> K[Clic → Liste teams]
```

---

## Wireframes & Mockups

### Screen 1: Dashboard

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  ☰  DOFUS MANAGER                                        [🌙 Dark Mode]    │
├────────────┬────────────────────────────────────────────────────────────────┤
│            │                                                                │
│  🏠 Dashboard│  DASHBOARD                                    [+ Nouveau ▾]  │
│            │  ───────────────────────────────────────────────────────────── │
│  👥 Persos │                                                                │
│            │  ┌─────────────────┐  ┌─────────────────┐  ┌────────────────┐  │
│  📁 Comptes│  │ 📁 COMPTES      │  │ 👥 PERSONNAGES  │  │ ⚔️ TEAMS       │  │
│            │  │  12 comptes     │  │  64 personnages │  │  3 actives     │  │
│  ⚔️ Teams  │  │  45,230 ogrines │  │  Niv. moy: 198  │  │  87% complete  │  │
│            │  │  [Voir tout →]  │  │  [Voir tout →]  │  │  [Voir tout →] │  │
│  ─────────│  └─────────────────┘  └─────────────────┘  └────────────────┘  │
│  ⚙️ Settings│                                                                │
│            │  ┌─────────────────────────────────┐  ┌──────────────────────┐ │
│            │  │ 💰 MONNAIES                     │  │ 📊 PROGRESSIONS      │ │
│            │  │  Doplons      12,450           │  │  Dofus     ████░ 72% │ │
│            │  │  Orichor       3,200           │  │  Donjons   ██░░░ 45% │ │
│            │  │  Kamas glace   8,100           │  │  Recherchés███░░ 61% │ │
│            │  │  [Détail par compte →]          │  │  [Bulk Update →]     │ │
│            │  └─────────────────────────────────┘  └──────────────────────┘ │
│            │                                                                │
│            │  ┌─────────────────────────────────────────────────────────┐   │
│            │  │ ⚡ ACTIONS RAPIDES                                       │   │
│            │  │  [+ Personnage]  [+ Team]  [Bulk Progressions]  [Sync] │   │
│            │  └─────────────────────────────────────────────────────────┘   │
└────────────┴────────────────────────────────────────────────────────────────┘
```

### Screen 2: Liste Personnages

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  ☰  DOFUS MANAGER                                        [🌙]              │
├────────────┬────────────────────────────────────────────────────────────────┤
│            │  PERSONNAGES                        🔍 [Rechercher...    ]     │
│  🏠 Dashboard│  ─────────────────────────────────────────────────────────────  │
│ ►👥 Persos │                                                                │
│            │  ┌──────────────┐  ┌──────────────────────────────────────────┐│
│  📁 Comptes│  │ FILTRES      │  │  ☑ Sélection: 3    [Bulk Actions ▾]      ││
│            │  │              │  │  ─────────────────────────────────────── ││
│  ⚔️ Teams  │  │ ▼ Classe     │  │  ☐ │ Nom          │Classe│Niv│Serveur│Cpt││
│            │  │  ☑ Cra    12 │  │  ──┼──────────────┼──────┼───┼───────┼───││
│  ─────────│  │  ☑ Iop    8  │  │  ☑ │ Krosmaster   │ Cra  │200│Imagiro│C1 ││
│  ⚙️ Settings│  │  ☐ Enu    6  │  │  ☐ │ TankMaster   │ Iop  │200│Imagiro│C1 ││
│            │  │              │  │  ☑ │ MoneyMaker   │ Enu  │200│Imagiro│C2 ││
│            │  │ ▼ Serveur    │  │  ☐ │ HealBot      │ Eni  │200│Imagiro│C2 ││
│            │  │  ☑ Imagiro   │  │  ☑ │ PortalGuy    │ Elio │200│Imagiro│C3 ││
│            │  │              │  │  ─────────────────────────────────────── ││
│            │  │ ▼ Progression│  │  Showing 1-20 of 64     [< 1 2 3 4 >]    ││
│            │  │  Type: [──▾] │  └──────────────────────────────────────────┘│
│            │  │  ○ A fait    │                                              │
│            │  │  ○ N'a pas   │  [+ Ajouter Personnage]                      │
│            │  │ [Réinitialiser]│                                             │
│            │  └──────────────┘                                              │
└────────────┴────────────────────────────────────────────────────────────────┘
```

### Screen 3: Fiche Personnage

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  ☰  DOFUS MANAGER                                        [🌙]              │
├────────────┬────────────────────────────────────────────────────────────────┤
│            │  ← Personnages / Krosmaster                    [✏️] [🗑️]       │
│  🏠 Dashboard│  ─────────────────────────────────────────────────────────────  │
│  👥 Persos │                                                                │
│            │  ┌─────────────────────────────────────────────────────────┐   │
│  📁 Comptes│  │  [Avatar]   KROSMASTER                                  │   │
│            │  │             Classe: Cra    Niveau: 200                  │   │
│  ⚔️ Teams  │  │             Serveur: Imagiro   Compte: Compte1          │   │
│            │  │             Teams: Main Team, Team Succès               │   │
│  ─────────│  └─────────────────────────────────────────────────────────┘   │
│  ⚙️ Settings│                                                                │
│            │  ┌─────────────────────────────────────────────────────────┐   │
│            │  │  [Infos] [Progressions] [Monnaies] [Teams]              │   │
│            │  ├─────────────────────────────────────────────────────────┤   │
│            │  │  PROGRESSIONS                    Filtre: [Tous ▾]       │   │
│            │  │                                                         │   │
│            │  │  ▼ Quêtes Dofus (7/10)                                  │   │
│            │  │    ☑ Dofus Turquoise    ✓ 2026-01-10                   │   │
│            │  │    ☑ Dofus Pourpre      ✓ 2026-01-08                   │   │
│            │  │    ☐ Dofus des Glaces                                   │   │
│            │  │                                                         │   │
│            │  │  ▼ Donjons 191-200 (12/18)                              │   │
│            │  │    ☑ Bethel             ✓ 2026-01-15                   │   │
│            │  │    ☐ Tal Kasha                                          │   │
│            │  └─────────────────────────────────────────────────────────┘   │
└────────────┴────────────────────────────────────────────────────────────────┘
```

### Screen 4: Fiche Team

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  ☰  DOFUS MANAGER                                        [🌙]              │
├────────────┬────────────────────────────────────────────────────────────────┤
│            │  ← Teams / Main Team                           [✏️] [🗑️]       │
│  🏠 Dashboard│                                                                │
│  👥 Persos │  ┌────────────────────────────────────────────────────────┐    │
│            │  │  MAIN TEAM                          Type: Main         │    │
│  📁 Comptes│  │  8 membres • ✅ Active • 8 comptes différents          │    │
│            │  └────────────────────────────────────────────────────────┘    │
│  ⚔️ Teams  │                                                                │
│            │  ┌────────────────────────────────────────────────────────┐    │
│  ─────────│  │  [Membres] [Statut Progressions]                       │    │
│  ⚙️ Settings│  ├────────────────────────────────────────────────────────┤    │
│            │  │  STATUT PROGRESSIONS                                   │    │
│            │  │                                                        │    │
│            │  │  Progression: [Dofus Turquoise          ▾]            │    │
│            │  │                                                        │    │
│            │  │  ████████████████████░░░░  75% (6/8)  [Marquer tous]  │    │
│            │  │                                                        │    │
│            │  │  │ Perso        │ Statut │ Date       │               │    │
│            │  │  │ Krosmaster   │   ✅   │ 2026-01-10 │               │    │
│            │  │  │ TankMaster   │   ✅   │ 2026-01-10 │               │    │
│            │  │  │ HealBot      │   ❌   │     —      │               │    │
│            │  │  │ SramKiller   │   ❌   │     —      │               │    │
│            │  └────────────────────────────────────────────────────────┘    │
└────────────┴────────────────────────────────────────────────────────────────┘
```

---

## Component Library / Design System

**Design System:** shadcn/ui (composants copiés, personnalisables)

### Core Components

| Component | Purpose | Variants | States |
|-----------|---------|----------|--------|
| **DataTable** | Listes avec tri, filtres, pagination | default, selectable, compact | loading, empty, error, filtered |
| **FilterSidebar** | Panel de filtres multicritères | default, collapsible, modal | default, active, loading |
| **StatCard** | Widget Dashboard KPI | default, progress, compact | loading, default, hover |
| **EntityCard** | Header fiches détail | character, account, team | default, editing |
| **ProgressionCheckbox** | Toggle fait/pas fait | default, with-date, bulk | unchecked, checked, loading, disabled |
| **BulkActionBar** | Actions sur sélection multiple | floating, inline | hidden, visible, processing |
| **Modal** | Dialogues création/édition/confirmation | form, confirm, selector | default, loading, error |
| **Toast** | Notifications feedback | success, error, warning, info | entering, visible, exiting |
| **Tabs** | Navigation sous-sections | default, pills, underline | default, active, disabled |
| **EmptyState** | Affichage liste vide | no-data, no-results, error | — |

---

## Branding & Style Guide

### Color Palette

#### Dark Mode (Principal)

| Color Type | Hex Code | Usage |
|------------|----------|-------|
| **Background** | `#0F172A` | Fond principal (slate-900) |
| **Foreground** | `#F8FAFC` | Texte principal |
| **Card** | `#1E293B` | Fond cartes (slate-800) |
| **Primary** | `#60A5FA` | Actions principales (blue-400) |
| **Secondary** | `#94A3B8` | Texte secondaire (slate-400) |
| **Accent** | `#A78BFA` | Highlights (violet-400) |
| **Border** | `#475569` | Bordures (slate-600) |

#### Semantic Colors

| Color Type | Hex | Usage |
|------------|-----|-------|
| **Success** | `#4ADE80` | Confirmations, complété |
| **Warning** | `#FBBF24` | Alertes |
| **Error** | `#F87171` | Erreurs |
| **Info** | `#60A5FA` | Informations |

### Typography

| Element | Size | Weight | Line Height |
|---------|------|--------|-------------|
| **H1** | 32px | 700 | 1.2 |
| **H2** | 24px | 600 | 1.3 |
| **H3** | 20px | 600 | 1.4 |
| **Body** | 14px | 400 | 1.5 |
| **Small** | 12px | 400 | 1.4 |

**Font:** Inter (system-ui fallback)

### Iconography

**Library:** Lucide Icons

| Context | Size |
|---------|------|
| Navigation | 20px |
| Buttons | 16px |
| Inline | 14px |

### Spacing Scale (base 4px)

| Token | Value |
|-------|-------|
| `space-1` | 4px |
| `space-2` | 8px |
| `space-3` | 12px |
| `space-4` | 16px |
| `space-6` | 24px |
| `space-8` | 32px |

### Layout Constants

| Element | Value |
|---------|-------|
| Sidebar width | 240px (collapsed: 64px) |
| Max content width | 1280px |
| Border radius | 8px (cards), 6px (buttons) |

---

## Accessibility Requirements

**Standard:** Pas de conformité WCAG formelle (app personnelle)

**Approche pragmatique :** Bonnes pratiques "gratuites" via shadcn/ui

### Key Requirements

| Category | Requirement |
|----------|-------------|
| **Visual** | Contraste 4.5:1, focus visible, états sans couleur seule |
| **Interaction** | Navigation clavier, focus trap modals, touch targets 44px |
| **Content** | Labels formulaires, messages d'erreur associés, structure headings |

---

## Responsiveness Strategy

### Breakpoints

| Breakpoint | Min Width | Target |
|------------|-----------|--------|
| **sm** (Mobile) | 0 | Smartphones |
| **md** (Tablet) | 640px | Tablettes |
| **lg** (Desktop) | 1024px | Laptops |
| **xl** (Wide) | 1280px | Grands moniteurs |

### Adaptation Patterns

| Element | Desktop | Tablet | Mobile |
|---------|---------|--------|--------|
| **Sidebar** | Expanded | Collapsed (icons) | Burger menu |
| **Dashboard** | 3 colonnes | 2 colonnes | 1 colonne |
| **DataTable** | Full | Colonnes prioritaires | Cards |
| **Modals** | Centré 500px | 90vw | Plein écran |
| **Filtres** | Sidebar | Sidebar mini | Modal |

---

## Animation & Micro-interactions

### Motion Principles

1. **Fonctionnel avant décoratif**
2. **Rapide et non-bloquant** (150-300ms)
3. **Subtil et cohérent**
4. **Respect prefers-reduced-motion**

### Key Animations

| Animation | Durée | Usage |
|-----------|-------|-------|
| Hover | 150ms | Buttons, rows |
| Fade in | 200ms | Contenu chargé |
| Slide in | 250ms | Modals, drawers |
| Toast | 300ms in / 200ms out | Notifications |
| Checkbox | 150ms | Toggle état |

### Performance Goals

| Metric | Target |
|--------|--------|
| First Contentful Paint | < 1.5s |
| Time to Interactive | < 3s |
| Interaction Response | < 100ms |
| Animation FPS | 60fps |

---

## Next Steps

### Immediate Actions

1. Générer les maquettes haute-fidélité (v0, Lovable, ou Figma)
2. Setup le projet avec shadcn/ui et configurer le thème
3. Implémenter le Layout principal (sidebar + header)
4. Développer le Dashboard avec widgets mockés

### Design Handoff Checklist

- [x] All user flows documented
- [x] Component inventory complete
- [x] Accessibility requirements defined
- [x] Responsive strategy clear
- [x] Brand guidelines incorporated
- [x] Performance goals established

### Prompt v0.dev (Dashboard)

```
Create a dark mode dashboard for a Dofus MMORPG character management app called "Dofus Manager".

Layout:
- Left sidebar (240px) with navigation: Dashboard (active), Characters, Accounts, Teams, Settings
- Main content area with widgets grid

Widgets (3 columns on desktop):
1. "Comptes" card: showing "12 comptes" and "45,230 ogrines" with folder icon
2. "Personnages" card: showing "64 personnages" and "Niv. moy: 198" with users icon
3. "Teams" card: showing "3 actives" and "87% complete" with swords icon
4. "Monnaies" card (spans 2 cols): list of currencies with amounts
5. "Progressions" card: progress bars for Dofus, Donjons, Recherchés
6. "Actions rapides" section: buttons for + Personnage, + Team, Bulk Progressions, Sync

Style: shadcn/ui, dark slate background (#0F172A), blue primary (#60A5FA), Inter font 14px
```

### Prompt v0.dev (Liste Personnages)

```
Create a character list page for "Dofus Manager" with filters sidebar.

Layout:
- Left filter sidebar (250px): Classe checkboxes, Serveur checkboxes, Progression filter
- Main data table: checkbox, Nom, Classe, Niveau, Serveur, Compte columns
- Top bar: search input, bulk actions when selected, + Ajouter button
- Pagination at bottom

Style: Dark mode, shadcn/ui, dense table rows (48px height), hover shows edit/delete icons
```