# BO OneUI Visual QA Checklist (Pixel-Fit)

Date reference: 2026-03-01
Scope: `dashboard`, `users`, `missions`, `kyc`, `payouts`, `finance`

## 1) Setup test

1. Clear cache navigateur.
2. Se connecter au BO: `/bo/login`.
3. Tester en Desktop (>=1440px) puis Mobile (390x844).
4. Verifier Light et Dark mode (toggle OneUI sidebar).

## 2) Global checks (all pages)

1. Hero section:
- Breadcrumb visible et aligne horizontalement.
- Titre + sous-titre alignes a gauche.
- Action bar (`bo-hero-actions`) sur la ligne suivante, espacements constants.

2. Blocks:
- `block-header` hauteur homogène.
- `block-options` alignes a droite.
- Espacement vertical constant entre blocs (`items-push`).

3. Tables:
- `thead` en uppercase petit format.
- `tbody` hover uniforme.
- Colonnes actions non cassees (pas de wrap incoherent).
- Badges statuts lisibles en Light/Dark.

4. Form controls:
- Labels uppercase petits.
- `input/select` hauteur homogène.
- Boutons filtres alignes en bas des champs.

5. Navigation:
- Sidebar item actif correct.
- Dropdown user complet (Dashboard/Users/Missions/KYC/Payouts/Finance).

## 3) Page-by-page checks

## Dashboard
1. 8 KPI cards affichent icones + valeur + sous-ligne sans debordement.
2. Boutons rapides (Users/Missions/KYC/Payouts/Finance) alignes et consistants.
3. Tables "Dernieres missions" et "Derniers paiements" affichent boutons "Voir".
4. Sections moderation (KYC, preuves, litiges) gardent actions lisibles.
5. Bloc "Push Test" reste compact et lisible.

## Users
1. Filtres (recherche, role, kyc, activite) sur une grille stable desktop.
2. Bouton "Nouvel utilisateur" aligne a droite en desktop.
3. Badge role: `ADMIN` rouge, `LINER` vert, `CLIENT` bleu.
4. Colonne actions `Edit/Delete` sans saut de ligne.
5. Pagination visible dans le footer block.

## Missions
1. Filtres avances (status/client/liner/date/budget) restent alignes desktop.
2. Colonnes date/budget/statut non tronquees desktop.
3. Boutons actions `Edit/Delete` sans overlap.
4. Ligne mission garde titre + event + lieu sur 3 niveaux lisibles.

## KYC
1. Filtres status/type/date fonctionnels visuellement (alignement inputs).
2. Statuts `PENDING/APPROVED/REJECTED` correctement colores.
3. Actions `Approve/Reject` compactes, champ motif lisible.
4. Lien document (si present) visible et cliquable.

## Payouts
1. Filtres provider/date/amount conservent alignement.
2. Colonne method affiche provider + label sans casser la table.
3. Actions `Process/Mark paid/Mark failed` verticales et stables.
4. Affichage dates (Demande/Paye) sans retour ligne aggressif.

## Finance
1. 6 KPI cards sur une ligne XXL, wrapping propre en taille plus petite.
2. Deux tables (paiements/payouts) ont meme densite et alignements.
3. Actions retry/paid/failed sans collision avec input reason.
4. Navigation rapide vers Dashboard/Payouts/Missions OK.

## 4) Mobile checks (390x844)

1. Hero actions wrap correctement (pas de bouton coupe).
2. Tables scroll horizontal propre (pas de layout break).
3. Formulaire filtres stack vertical lisible.
4. Boutons actions restent tappables (>=32px hauteur).
5. Sidebar off-canvas ferme correctement.

## 5) Acceptance criteria

1. Aucun debordement horizontal hors tables scrollables.
2. Aucun texte coupe sur boutons d'actions principaux.
3. Aucune regression de contraste en dark mode.
4. Cohérence visuelle inter-pages (hero, block headers, tables, filters).

## 6) Defect template

1. Page:
2. Viewport:
3. Mode (Light/Dark):
4. Description:
5. Capture:
6. Severity (`minor/major/blocker`):
