theo/dofus-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
BeauTroll
2026-01-19 08:52:38 +01:00
commit 46907ca153
193 changed files with 35051 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

596
docs/front-end-spec.md Normal file
View File

@@ -0,0 +1,596 @@
# 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
```