Interactions Utilisateurs — UI/UX & Comportement de l'Application

Automobile Business Center — Burkina Faso

Document de référence pour les interactions utilisateurs, les spécifications UI/UX et le comportement attendu de chaque écran de la plateforme.
Dernière mise à jour : février 2026

Table des matières

Principes généraux
Rôles et permissions
Navigation & Header
Page d'accueil (/)
Marketplace / Catalogue (/marketplace)
Recherche avancée (/advanced-search)
Détail d'un véhicule (/vehicle/[id])
Inscription (/register)
Connexion (/login)
Tableau de bord (/dashboard)
Mes annonces (/mes-annonces)
Créer une annonce (/creer-annonce)
Favoris (/favoris)
Mon profil (/profil)
Pages SEO catégories (/voitures/[slug])
Pages statiques
États de chargement & erreurs
Comportement mobile
Système de notifications
Flux de données & séquences

1. Principes généraux

1.1 Design mobile-first

+80 % des utilisateurs naviguent sur téléphone au Burkina Faso
Taille de touche minimum : 44 × 44 px sur mobile
Les images s'adaptent à la largeur de l'écran (responsive)
Le menu de navigation se replie en hamburger ☰ sous md (768 px)

1.2 Performance

Images optimisées, chargement progressif (lazy load)
Pages légères — connexion souvent lente en zone sahélienne
Squelette de chargement (skeleton) affiché pendant les requêtes réseau

1.3 Langue & localisation

Interface entièrement en français
Devise : FCFA (XOF) — format 1 500 000 FCFA
Villes : liste officielle des villes du Burkina Faso uniquement
Numéros de téléphone : préfixe +226 (BF)

1.4 Palette de couleurs et sémantique des badges

Couleur	Usage	Exemple
Accent (orange-rouge)	Appels à l'action principaux, prix	Bouton "Publier", prix en FCFA
Vert `#22c55e`	Succès, statut "En ligne", vérifié	Badge "En ligne", "Compte vérifié"
Orange `#f97316`	Avertissement, statut "En attente"	Badge "En attente de validation"
Rouge `#ef4444`	Erreur, danger, statut "Refusé"	Message d'erreur, badge "Refusé"
Gris	Statut neutre, "Vendu"	Badge "Vendu"
Bleu `#3b82f6`	Information, "Brouillon"	Badge "Brouillon"
`#25D366` (WhatsApp vert)	Bouton WhatsApp uniquement	Bouton "WhatsApp" sur la fiche véhicule

1.5 Feedback utilisateur

Toast / notification : toute action modifiant la base de données → toast succès ou toast erreur (3 secondes)
Indicateur de chargement : spinner ou texte "Chargement…" pendant les appels réseau
Message vide : illustration + texte explicatif + bouton d'action si une liste est vide
Validation inline : les erreurs de formulaire s'affichent sous le champ concerné, en rouge, immédiatement après la perte de focus ou la soumission

2. Rôles et permissions

2.1 Visiteur (non connecté)

Action	Autorisé	Comportement
Voir la liste des véhicules	✅	Accès libre
Utiliser la recherche	✅	Accès libre
Ouvrir la fiche d'un véhicule	✅	Accès libre
Voir le numéro de téléphone du vendeur	✅	Affiché si renseigné
Appeler le vendeur	✅	Lien `tel:`
Contacter via WhatsApp	✅	Lien `wa.me/`
Envoyer un message	❌	Redirection vers `/register` avec message "Créez un compte gratuit pour contacter le vendeur"
Ajouter aux favoris	❌	Redirection vers `/login`
Publier une annonce	❌	Redirection vers `/login` ou `/sell`

2.2 Acheteur (BUYER, connecté)

Action	Autorisé
Toutes les actions visiteur	✅
Ajouter / retirer des favoris	✅
Envoyer un message à un vendeur	✅
Gérer son profil	✅
Créer une annonce	❌ (doit changer de rôle vers SELLER)

2.3 Vendeur particulier (SELLER)

Action	Autorisé
Toutes les actions Acheteur	✅
Créer une annonce (max 2 gratuites)	✅
Modifier / supprimer ses annonces	✅
Ajouter jusqu'à 10 photos par annonce	✅
Marquer une annonce "Vendu"	✅
Voir les stats de ses annonces (vues, clics WhatsApp)	✅

2.4 Revendeur (RESELLER) / Importateur (IMPORTER)

Action	Autorisé
Toutes les actions Vendeur	✅
Nombre d'annonces élevé (selon abonnement)	✅
Page boutique (à venir)	🔜

2.5 Concessionnaire (DEALER)

Action	Autorisé
Toutes les actions Revendeur	✅
Profil de concessionnaire vérifié (badge)	✅ (après validation admin)
Page boutique avec logo et description	✅

2.6 Administrateur (admin panel)

Action	Autorisé
Valider / refuser les annonces	✅
Supprimer les annonces frauduleuses	✅
Bloquer des utilisateurs	✅
Gérer les mises en avant	✅
Voir les statistiques globales	✅

[Logo + "Automobile Business Center"]   [Acheter] [Vendre] [Revendeurs] [Recherche avancée]   [♡] [+ Publier] [Mes annonces] [Mon compte ▼] [Déconnexion]
                                                                                                 ↑ Caché si non connecté                     ↑ Visible si connecté

Si non connecté :

[Logo]   [Acheter] [Vendre] [Revendeurs] [Recherche avancée]   [Connexion] [Inscription]

Clic sur ☰ → tiroir vertical qui s'ouvre sous le header
Liste des liens avec séparation visuelle entre navigation publique et espace personnel
Clic sur un lien → ferme le menu et navigue

Contenu du menu mobile si connecté :

Acheter
Vendre
Revendeurs
Recherche avancée
──────────────
Mes favoris
Mes annonces
Mon profil
Tableau de bord
──────────────
Déconnexion

3.3 Comportement du lien actif

Le lien correspondant à la page courante s'affiche avec la couleur accent + font-medium
Déterminé par usePathname() comparé au href de chaque lien

3.4 Bouton "Publier" (header)

Bouton accent visible uniquement si connecté
Clic → /creer-annonce
Si non connecté, ce bouton est remplacé par "Connexion" / "Inscription"

3.5 Déconnexion

Clic "Déconnexion" → supabase.auth.signOut() → setUser(null) → l'interface repasse en mode visiteur sans rechargement de page

4. Page d'accueil (/)

4.1 Layout général

┌─────────────────────────────────────┐
│ HEADER                              │
├─────────────────────────────────────┤
│ HERO — Titre + Barre de recherche   │
│ Recherches populaires               │
├─────────────────────────────────────┤
│ DERNIÈRES ANNONCES (4 cartes)       │
│ [Voir tout le catalogue →]          │
├─────────────────────────────────────┤
│ POURQUOI NOUS CHOISIR (4 cartes)    │
├─────────────────────────────────────┤
│ COMMENT ÇA MARCHE (3 étapes)        │
├─────────────────────────────────────┤
│ CTA — "Prêt à trouver votre voiture?"│
├─────────────────────────────────────┤
│ STATS (annonces, vendeurs, etc.)    │
├─────────────────────────────────────┤
│ FOOTER                              │
└─────────────────────────────────────┘

4.2 Hero & Barre de recherche rapide

Composant : LandingSearchBar

Champ texte libre : "Rechercher une marque, modèle…"
Bouton "Rechercher" → soumet le formulaire vers /marketplace?search=<valeur>
Autocomplete (SearchAutocomplete) : après 2 caractères saisis, suggestions dynamiques apparaissent en dropdown
Clic sur une suggestion → navigation directe vers /marketplace?search=<suggestion>
Touche Escape → ferme le dropdown

Recherches populaires :

Boutons pill cliquables : "Toyota Prado", "Toyota Hilux", "Mercedes Classe C", "BMW Série 3"
Clic → soumet vers /marketplace?search=<terme>

4.3 Section "Dernières annonces"

4 cartes véhicules les plus récents (status = PUBLISHED)
Chaque carte est un lien vers /vehicle/<id>
Survol → légère mise à l'échelle de l'image (scale-110)
Badge prix en haut à droite de l'image
Si aucune annonce publiée : section masquée

Bouton "Parcourir les annonces" → /marketplace
Bouton "Vendre ma voiture" → /sell

5. Marketplace / Catalogue (/marketplace)

5.1 Layout

┌──────────────────────────────────────────┐
│ HEADER                                   │
├──────────────────────────────────────────┤
│ HERO                                     │
│ "Trouvez votre prochaine voiture"        │
│ [Barre de recherche texte] [Filtres ▼]   │
│ Panneau de filtres rapides (si ouvert)   │
├──────────────────────────────────────────┤
│ N véhicule(s) trouvé(s)     [Trier par ▼]│
├──────────────────────────────────────────┤
│ GRILLE 4 colonnes (lg), 2 (md), 1 (sm)  │
│ [Card] [Card] [Card] [Card]              │
│ [Card] [Card] [Card] [Card]              │
│ …                                        │
└──────────────────────────────────────────┘

5.2 Barre de recherche

Saisie en temps réel → filtre la liste côté client (sans rechargement)
Touche Enter ou bouton "Rechercher" → idem
Icône loupe à gauche du champ

5.3 Panneau de filtres rapides

Déclenché par le bouton ⚙ Filtres ▼ :

Filtre	Type	Valeurs
Prix	Select	Tranches en FCFA (< 1 M, 1–3 M, 3–5 M, 5–10 M, > 10 M)
Carburant	Select	Essence, Diesel, Électrique, Hybride, GPL
Ville	Select	16 villes du Burkina Faso
Marque	Select	Liste des marques (MAKES_MODELS)
Année min/max	Select	1900–2027
Trier par	Select	Plus récentes, Prix ↑, Prix ↓, Kilométrage ↑, Année ↓

Fermeture du panneau : re-clic sur le bouton "Filtres" (chevron bascule)
Bouton "Réinitialiser les filtres" : remet tous les filtres à leur valeur par défaut

5.4 Carte véhicule

┌──────────────────────────────────┐
│ [IMAGE 16:10]                    │
│ [Badge : En ligne 🟢]  [♡ Favori]│
├──────────────────────────────────┤
│ Titre du véhicule                │
│ Année · Transmission · Carburant │
│ Kilométrage                      │
│ ─────────────────────────────── │
│ PRIX (FCFA)     Vendeur [✓]      │
└──────────────────────────────────┘

Interactions sur la carte :

Élément	Action	Résultat
Image ou titre	Clic	Navigation vers `/vehicle/<id>`
Bouton ♡ Favori	Clic (connecté)	Ajout/retrait de favoris, cœur plein/vide
Bouton ♡ Favori	Clic (non connecté)	Toast : "Connectez-vous pour sauvegarder des favoris"
Badge "En ligne"	—	Indicateur visuel uniquement
Badge "Vendu"	—	Carte légèrement grisée

Image manquante : placeholder texte "PAS D'IMAGE" sur fond gris

5.5 Filtre par concessionnaire

Si ?dealerId=<id> est présent dans l'URL :

Badge "Annonces de : <Nom concessionnaire>" affiché
Lien "Voir toutes les annonces" → /marketplace (sans dealerId)

5.6 État vide

"Aucun véhicule trouvé"
[Réinitialiser les filtres]

6. Recherche avancée (/advanced-search)

6.1 Layout

┌─────────────────────────────────────────────────────┐
│ HEADER                                              │
├──────────────────────┬──────────────────────────────┤
│ SIDEBAR FILTRES      │ RÉSULTATS                    │
│ (collapsible mobile) │ N véhicule(s) trouvé(s)     │
│                      │ [Grille de cartes]           │
│ [Réinitialiser]      │                             │
└──────────────────────┴──────────────────────────────┘

Sur mobile : la sidebar passe au-dessus des résultats, avec un bouton ⊞ Filtres pour l'afficher/masquer.

6.2 Sections de filtres (toutes collapsibles)

Chaque section a un titre cliquable avec icône ▲/▼ :

Section	Type de contrôle	Valeurs
Marque & Modèle	Select Marque → Select Modèle (dynamique)	MAKES_MODELS
Villes	Checkboxes multi-sélection	16 villes BF
Prix (FCFA)	Slider double ou inputs min/max	0 → 1 000 000 000
Année	Slider double	1900 → 2027
Kilométrage	Slider double	0 → 500 000 km
Carburant	Checkboxes	Essence, Diesel, Électrique, Hybride, GPL
Transmission	Checkboxes	Manuelle, Automatique
Carrosserie	Checkboxes	Berline, SUV, Pickup, Citadine, Break, Cabriolet, Utilitaire, Autre
Couleur extérieure	Checkboxes	13 couleurs
Couleur intérieure	Checkboxes	12 couleurs
Sellerie	Checkboxes	Cuir, Alcantara, Tissu
Traction	Checkboxes	Propulsion, 4×4, Traction avant, Transmission intégrale
Options	Checkboxes groupées	46 options (confort, multimédia, sécurité, extérieur)
Options admin.	Checkboxes	10 options (dédouané, carte grise, importé…)
Nombre de places	Checkboxes	2, 4, 5, 7
Type de vendeur	Checkboxes	Particulier, Concessionnaire, Revendeur, Importateur
Photos	Toggle Switch	"Uniquement avec photos"
Promotions	Toggle Switch	"Uniquement en promotion"

6.3 Comportement des filtres

Filtrage en temps réel côté client sur les données déjà chargées
Modèle : la liste de modèles se met à jour dynamiquement lorsqu'une marque est sélectionnée. Si la marque est changée, le modèle sélectionné est réinitialisé.
Sliders (Radix UI Slider) :
- Affichage de la valeur actuelle sous le slider
- Prix formaté en FCFA
- Kilométrage formaté avec séparateur de milliers + "km"
"Réinitialiser les filtres" : bouton en bas de la sidebar → tous les filtres reviennent aux valeurs par défaut

6.4 Affichage du compteur de résultats

En tête de la zone de résultats : **N** véhicule(s) trouvé(s)
Le nombre se met à jour en temps réel sans rechargement

7. Détail d'un véhicule (/vehicle/[id])

7.1 Layout

┌──────────────────────────────────────────────────┐
│ HEADER                                           │
├──────────────────────────────────────────────────┤
│ ← Retour aux annonces                           │
├──────────────────────────┬───────────────────────┤
│ COL GAUCHE (lg:2/3)      │ COL DROITE (lg:1/3)  │
│                          │ [Sticky top-24]       │
│ [Galerie photos]         │ Titre + Prix FCFA     │
│ [Thumbnails]             │ [Appeler] [WhatsApp]  │
│                          │ [♡] [Share]           │
│ [Caractéristiques]       │ ─────────────────     │
│ [Équipements]            │ Vendeur               │
│ [Description]            │ (info + badges)       │
│                          │ [Envoyer un message]  │
└──────────────────────────┴───────────────────────┘

7.2 Galerie photos

Interaction	Comportement
Flèche gauche `‹`	Affiche l'image précédente (cyclique)
Flèche droite `›`	Affiche l'image suivante (cyclique)
Clic sur une miniature	Affiche la photo correspondante dans la vue principale
Miniature active	Bordure de couleur accent (2 px)
Compteur	`X / N` affiché en bas au centre de l'image principale
Aucune image	Texte "Aucune image disponible" sur fond gris

7.3 Boutons de contact

Bouton "Appeler"

Style : bouton plein couleur accent
Action : href="tel:<numéro>" → ouvre le numéroteur du téléphone
Affiché uniquement si le vendeur a renseigné un numéro

Bouton "WhatsApp"

Style : bouton vert #25D366, icône MessageCircle
Action : href="https://wa.me/<numéro>?text=<message_encodé>"
Message pré-rempli : "Bonjour, je suis intéressé par votre annonce: <titre> sur Automobile Business Center"
target="_blank" + rel="noopener noreferrer"
Affiché uniquement si le vendeur a renseigné un numéro

Bouton "♡ Favori"

Icône cœur (vide/plein selon état)
Connecté : toggle favori
Non connecté : redirection vers /login

Icône Share2
Comportement à venir (futur : navigator.share() ou copier le lien)

7.4 Section "Vendeur"

Concessionnaire vérifié :

[Logo]  Nom du concessionnaire
        [Badge "Revendeur vérifié" — couleur accent]
        Adresse, Ville

Particulier vérifié :

[Avatar initiale]  Nom complet
                   [Badge "Compte vérifié" — vert]

Informations de contact (si renseignées) :

📞 Numéro de téléphone
✉️ Adresse email

7.5 Section "Caractéristiques"

Grille 2 colonnes avec icône + label + valeur :

Champ	Icône
Marque & Modèle	🚗
Année	📅
Kilométrage	🔢
Carburant	⛽
Transmission	📄
Carrosserie	🚗
Couleur	🎨
VIN	📄
Ville	📍

7.6 Section "Équipements"

Liste des options (issues du champ features[]) en grille 3 colonnes
Chaque option précédée d'un ✓ accent

7.7 Section "Description"

Texte libre du vendeur
whitespace-pre-line pour respecter les sauts de ligne

8. Inscription (/register)

8.1 Champs communs à tous les types

Champ	Type	Requis	Règle
Prénom	Texte	✅	—
Nom	Texte	✅	—
Email	Email	✅	Format email valide
Mot de passe	Password	✅	≥ 6 caractères
Confirmer mot de passe	Password	✅	= mot de passe
Type de compte	Radio	✅	5 choix (voir ci-dessous)
Ville	Select	—	16 villes BF

8.2 Types de comptes et champs conditionnels

Acheteur (BUYER)

Aucun champ supplémentaire.

Vendeur particulier (SELLER)

Champ	Type	Requis
Téléphone	Tel	—
Type de pièce d'identité	Select	—
Copie de la pièce d'identité	File (image/pdf)	—

Revendeur (RESELLER) / Importateur (IMPORTER)

Champ	Type	Requis
Nom de l'entreprise	Texte	—
Téléphone	Tel	—
Date de début d'activité	Date	—
Type de pièce d'identité	Select	—
Copie de la pièce d'identité	File	—

Concessionnaire certifié (DEALER)

Champ	Type	Requis
Nom du concessionnaire	Texte	✅
Numéro RCB	Texte	—
Site web	URL	—
Téléphone	Tel	—
Date de début d'activité	Date	—
Adresse	Texte	—
Type de pièce d'identité	Select	—
Copie de la pièce d'identité	File	—

Types de pièces d'identité : CNIB, Acte de naissance, Permis de conduire, Passeport

8.3 Affichage conditionnel

Les champs supplémentaires s'affichent immédiatement lorsque le type de compte correspondant est sélectionné (pas de rechargement de page)
Animation : apparition fluide (transition CSS)

8.4 Validation du formulaire

Cas	Comportement
Mot de passe < 6 caractères	Message d'erreur sous le champ, soumission bloquée
Mots de passe différents	Message d'erreur "Les mots de passe ne correspondent pas"
Email déjà utilisé	Message d'erreur Supabase affiché
Champs requis vides	Mise en évidence rouge du champ, soumission bloquée

8.5 Après l'inscription (succès)

Affichage d'un écran de succès avec icône ✓ verte
Message : "Votre compte a été créé avec succès ! Veuillez vérifier votre email pour confirmer votre inscription."
Redirection automatique vers /login après 3 secondes

8.6 Lien vers la connexion

En bas du formulaire : "Déjà un compte ? Connectez-vous" → /login

9.1 Champs

Champ	Type	Requis
Email	Email	✅
Mot de passe	Password	✅

9.2 Soumission

Appel supabase.auth.signInWithPassword()
Succès → redirection vers /marketplace + router.refresh()
Échec → message d'erreur affiché en haut du formulaire

9.3 Lien

"Pas encore de compte ? Inscrivez-vous" → /register

10. Tableau de bord (/dashboard)

Accès requis : utilisateur connecté. Si non connecté → redirection vers /login.

10.1 Chargement

Le serveur :

Vérifie l'authentification Supabase
Récupère le profil depuis la table users
Affiche "Bonjour, <prénom> 👋" ou <email_prefix> si pas de nom

10.2 Cartes de statistiques

Statistique	Icône	Couleur
Annonces actives	🚗	Accent
Vues totales	👁	Bleu
Favoris reçus	♥	Rouge
Annonces totales	📄	Vert

Ces valeurs sont actuellement à 0 (à brancher sur les requêtes réelles).

10.3 Actions rapides (grille 2×2 sur mobile, 4 colonnes sur desktop)

Bouton	Destination
Publier une annonce	`/creer-annonce`
Mes annonces	`/mes-annonces`
Mes favoris	`/favoris`
Mon profil	`/profil`

Chaque action : carte cliquable avec icône + texte, bordure accent au survol.

10.4 Activité récente

Vide : illustration 🚗 + texte "Aucune activité récente" + bouton "Publier ma première annonce" → /creer-annonce
Non vide (futur) : liste chronologique des dernières actions

11. Mes annonces (/mes-annonces)

Accès requis : utilisateur connecté → redirection vers /login sinon.

11.1 En-tête de page

"Mes annonces"    N annonce(s)          [+ Créer une annonce]

11.2 État vide

🚗  "Vous n'avez pas encore d'annonces"
    "Publiez votre première annonce et touchez des milliers d'acheteurs"
    [Créer ma première annonce]

11.3 Ligne d'annonce

┌───────────────────────────────────────────────────────┐
│ [Miniature 96×80] │ Titre              [Badge statut] │
│                   │ PRIX FCFA                         │
│                   │ Marque Modèle · Année · km        │
│                   │ [Voir] [Modifier] [Marquer vendu] [Supprimer] │
└───────────────────────────────────────────────────────┘

11.4 Badges de statut

Statut DB	Label affiché	Couleur
PUBLISHED	En ligne	Vert
PENDING	En attente	Orange
REJECTED	Refusé	Rouge
SOLD	Vendu	Gris
DRAFT	Brouillon	Bleu

11.5 Actions sur chaque annonce

Bouton	Action	Visibilité
Voir	`/vehicle/<id>`	Toujours
Modifier	`/creer-annonce?edit=<id>` (à implémenter)	Toujours
Marquer vendu	Met le statut à `SOLD`	Si statut ≠ SOLD
Supprimer	Supprime l'annonce (confirmation préalable)	Toujours

Confirmation de suppression : dialogue modal "Êtes-vous sûr de vouloir supprimer cette annonce ? Cette action est irréversible." avec boutons "Annuler" et "Supprimer".

12. Créer une annonce (/creer-annonce)

Accès requis : utilisateur connecté. Si non connecté → redirection vers /login.

12.1 Indicateur de progression (step stepper)

① Informations véhicule → ② Détails & options → ③ Photos → ④ Contact → ⑤ Récapitulatif

Étape complétée : cercle vert avec ✓
Étape active : cercle couleur accent + texte en gras
Étape future : cercle gris
Sur mobile : seules les icônes sont visibles (labels masqués sous md)

12.2 Étape 1 — Informations véhicule

Champ	Type	Requis
Marque	Select (MAKES_MODELS)	✅
Modèle	Select (dynamique selon marque)	✅
Année	Select (2026 → 1900)	✅
Kilométrage	Nombre	✅
Carburant	Select	✅
Transmission	Select	✅
Carrosserie	Select	✅
Couleur extérieure	Select (EXTERIOR_COLORS)	—
Nombre de portes	Select (2/3/4/5)	—
Nombre de places	Select (2/4/5/7)	—

Comportement :

La sélection de la Marque réinitialise le Modèle et met à jour dynamiquement sa liste
Si le Modèle est désactivé tant que la Marque n'est pas sélectionnée

12.3 Étape 2 — Détails & options

Champ	Type	Requis
Titre de l'annonce	Texte (max 100 car.)	✅
Prix (FCFA)	Nombre (max 1 000 000 000)	✅
Ville	Select (BURKINA_CITIES)	✅
Prix négociable	Checkbox	—
Description	Textarea (max 2 000 car.)	—
Options du véhicule	Checkboxes groupées	—
Options administratives	Checkboxes	—

Bouton "Générer automatiquement" (titre) :

Cliquable uniquement si Marque, Modèle, Année et Ville sont renseignés
Génère le titre : "<Marque> <Modèle> <Année> - <Ville>"

Compteur de caractères :

Description : compteur en temps réel N/2000 en bas à droite de la textarea

12.4 Étape 3 — Photos

Zone de dépôt cliquable (<label> + <input type="file" hidden>)
Accepte : image/*, multiple, max 10 photos
Prévisualisation en grille 3 colonnes
Badge "Principal" sur la première photo (photo de couverture)
Bouton ✕ sur chaque miniature (survol) → supprime la photo
Désactivé si 10 photos déjà ajoutées
Pas de restriction minimale (photos recommandées min. 3)

12.5 Étape 4 — Contact

Champ	Type	Requis
Numéro de téléphone	Tel	✅
Numéro WhatsApp	Tel	— (si vide = même que téléphone)
Email de contact	Email	—

12.6 Étape 5 — Récapitulatif

Affichage en tableau de toutes les informations saisies
Nombre de photos
Liste des options sélectionnées (badges)
Bandeau orange : "Votre annonce sera vérifiée par notre équipe avant publication (généralement sous 24h)."
Bouton "Publier l'annonce" → soumet vers Supabase avec status: "PENDING"
Après succès → redirection vers /mes-annonces

Bouton	Action
Suivant	Valide l'étape courante. Si erreur → message rouge + scroll vers l'erreur. Sinon passe à l'étape suivante.
Précédent	Retour à l'étape précédente sans validation
Publier l'annonce (étape 5)	Valide + soumet tout le formulaire

13. Favoris (/favoris)

Accès requis : utilisateur connecté → /login sinon.

13.1 État vide

♥  "Vous n'avez pas encore de favoris"
   "Parcourez nos annonces et ajoutez vos véhicules préférés"
   [Parcourir les annonces]

13.2 Grille de véhicules favoris

Même design que la marketplace (cartes 16:10) avec :

Icône ♥ rouge plein en haut à droite
Lien vers /vehicle/<id>

13.3 Suppression d'un favori

Futur : bouton ✕ sur la carte ou bouton "Retirer des favoris"
Feedback immédiat : disparition de la carte + toast "Retiré des favoris"

14. Mon profil (/profil)

Accès requis : utilisateur connecté.
Le chargement initial est côté client avec useEffect.

14.1 Carte "Informations du compte" (lecture seule)

[Avatar/initiale]  Nom complet ou email
                   email@exemple.com
                   [Badge type de compte]  [Badge "Vérifié" si applicable]

14.2 Formulaire de modification

Champ	Type	Pré-rempli
Nom complet	Texte	Oui (depuis `users.full_name`)
Téléphone	Tel	Oui
Ville	Select (BURKINA_CITIES)	Oui
URL de l'avatar	URL	Oui

Soumission :

Mise à jour dans supabase.from("users").update(...)
Succès → bandeau vert "Profil mis à jour avec succès" (dans le formulaire)
Erreur → bandeau rouge avec le message d'erreur

Le type de compte (BUYER/SELLER/DEALER…) n'est pas modifiable depuis cette page.

15. Pages SEO catégories (/voitures/[slug])

15.1 Résolution du slug

Type de slug	Exemple	Comportement
Ville BF (slugifié)	`ouagadougou`	Filtre `city = "Ouagadougou"`
Marque (slugifiée)	`toyota`	Filtre `make = "Toyota"`
Non reconnu	`xyz`	Affiche "Voitures au Burkina Faso" sans filtre

Exemple de slugification : "Bobo-Dioulasso" → "bobo-dioulasso"

15.2 Metadata SEO dynamique

Ville : "Voitures à Ouagadougou - Automobile Business Center"
Marque : "Toyota au Burkina Faso - Automobile Business Center"
Description : inclut le nombre de résultats trouvés

15.3 Grille de résultats

Identique à la marketplace (cartes 16:10). Si vide : lien "Voir toutes les annonces" → /marketplace.

16. Pages statiques

Page	URL	Contenu
À propos	`/about`	Présentation de la plateforme
Contact	`/contact`	Formulaire de contact
Aide	`/help`	FAQ et support
Mentions légales	`/legal`	CGU, confidentialité
Revendeurs	`/dealers`	Liste des concessionnaires
Vendre	`/sell`	Présentation des offres vendeurs

16.1 Page Vendre (/sell)

Si connecté :

[Commencer maintenant] → /creer-annonce

Si non connecté :

"Vous devez vous connecter pour publier une annonce"
[Se connecter]  [Créer un compte]

17. États de chargement & erreurs

17.1 Loading global

Fichier app/loading.tsx — affiché automatiquement par Next.js lors des transitions de page :

Spinner centré ou skeleton de la page

17.2 Squelette (Skeleton) — à implémenter

Pour les listes de véhicules : afficher 8 cartes skeleton bg-muted animate-pulse pendant le chargement.

17.3 Page 404

not-found() de Next.js — déclenché si un véhicule n'existe pas dans la base.

17.4 Erreurs API / Supabase

Si la base de données est inaccessible → liste vide + message discret
Si une action échoue → toast rouge : "Une erreur est survenue. Réessayez."
Les erreurs techniques ne sont jamais affichées brutes à l'utilisateur

17.5 Messages d'erreur de formulaire

[Champ texte avec bordure rouge]
⚠ Message d'erreur explicite en dessous

18. Comportement mobile

18.1 Header

Logo tronqué sur petits écrans : "ABC" ou icône seule (< 480 px)
Menu hamburger ☰ remplace la navigation desktop
Le menu mobile est un tiroir vertical en position sticky

18.2 Marketplace

1 colonne sur mobile, 2 sur tablette, 3–4 sur desktop
Bouton "Filtres" collé en haut (sticky) pour faciliter l'accès

18.3 Détail véhicule

Colonne droite (infos vendeur + boutons) passe sous la galerie
Boutons "Appeler" et "WhatsApp" : pleine largeur, taille tactile ≥ 48 px

18.4 Créer une annonce

Stepper horizontal → scrollable sur mobile
Grilles 2 colonnes réduites à 1 colonne si nécessaire
Photos : grille 3 colonnes réduite à 2 sur très petits écrans

Masquée par défaut sur mobile
Bouton "Filtres" flottant ou en haut → affiche la sidebar en overlay (fond grisé)
Bouton ✕ pour fermer

19. Système de notifications

19.1 Types de notifications (base de données)

Type	Déclencheur	Message exemple
`LISTING_APPROVED`	Admin valide une annonce	"Votre annonce Toyota Prado a été publiée"
`LISTING_REJECTED`	Admin refuse une annonce	"Votre annonce a été refusée. Raison : …"
`LISTING_EXPIRED`	Date d'expiration atteinte	"Votre annonce a expiré"
`LISTING_SOLD`	Vendeur marque vendu	"Félicitations pour la vente !"
`NEW_MESSAGE`	Acheteur envoie un message	"Nouveau message sur votre annonce"
`NEW_REVIEW`	Évaluation reçue	"Vous avez reçu une évaluation"
`SYSTEM_UPDATE`	Admin	Information système

19.2 Affichage (à implémenter)

Cloche 🔔 dans le header avec badge compteur (non lus)
Dropdown avec liste des notifications récentes
Marquer comme lu au clic

20. Flux de données & séquences

20.1 Flux d'achat d'un visiteur → contact vendeur

Accueil
  → Recherche / Marketplace
    → Fiche véhicule
      ├── Appeler (tel:) ────────────────────────────────► Appel direct
      ├── WhatsApp (wa.me/) ─────────────────────────────► WhatsApp
      └── Envoyer un message ──► Si non connecté : /register
                                  Si connecté    : formulaire message

20.2 Flux de publication d'une annonce (vendeur)

/register (SELLER) → Email de confirmation
  → /login
    → /creer-annonce (5 étapes)
      → Soumission → status: PENDING
        → Admin valide dans le panel admin
          → Notification "LISTING_APPROVED"
            → status: PUBLISHED → visible dans /marketplace

20.3 Flux de mise en avant (monétisation)

Vendeur paie via Orange Money / Moov
  → Envoie preuve à l'admin
    → Admin active "isFeatured: true" dans le panel
      → Annonce apparaît en haut des résultats

20.4 Cycle de vie d'une annonce

DRAFT ──► PENDING ──► PUBLISHED ──► SOLD
                 └──► REJECTED       └──► ARCHIVED
                                    
PUBLISHED ──► EXPIRED (si expiresAt atteinte)
PUBLISHED ──► SUSPENDED (si signalement admin)

20.5 Authentification (Supabase Auth)

Inscription ──► Email de confirmation ──► Clic lien (/auth/callback) ──► Connecté
Connexion ─────────────────────────────────────────────────────────────► Connecté
Déconnexion ───────────────────────────────────────────────────────────► Visiteur
Token expiré ──► Refresh token automatique (Supabase SDK)

Annexe A — URLs et routes de l'application

Route	Composant	Accès
`/`	`app/page.tsx`	Public
`/marketplace`	`app/marketplace/page.tsx`	Public
`/marketplace?search=<q>`	Même page, filtre client	Public
`/marketplace?dealerId=<id>`	Même page, filtre concessionnaire	Public
`/advanced-search`	`app/advanced-search/page.tsx`	Public
`/vehicle/<id>`	`app/vehicle/[id]/page.tsx`	Public
`/voitures/<slug>`	`app/voitures/[slug]/page.tsx`	Public (SEO)
`/login`	`app/login/page.tsx`	Public
`/register`	`app/register/page.tsx`	Public
`/auth/callback`	`app/auth/callback/page.tsx`	Public
`/dashboard`	`app/dashboard/page.tsx`	🔒 Connecté
`/mes-annonces`	`app/mes-annonces/page.tsx`	🔒 Connecté
`/creer-annonce`	`app/creer-annonce/page.tsx`	🔒 Connecté
`/favoris`	`app/favoris/page.tsx`	🔒 Connecté
`/profil`	`app/profil/page.tsx`	🔒 Connecté
`/sell`	`app/sell/page.tsx`	Public
`/dealers`	`app/dealers/page.tsx`	Public
`/about`	`app/about/page.tsx`	Public
`/contact`	`app/contact/page.tsx`	Public
`/help`	`app/help/page.tsx`	Public
`/legal`	`app/legal/page.tsx`	Public

Annexe B — Données de référence

Villes du Burkina Faso (16)

Ouagadougou, Bobo-Dioulasso, Koudougou, Banfora, Ouahigouya, Kaya, Tenkodogo, Fada N'Gourma, Dedougou, Manga, Ziniaré, Kongoussi, Gaoua, Dori, Titao, Diébougou

Marques disponibles (27)

Acura, Audi, BMW, Cadillac, Chevrolet, Ford, Genesis, GMC, Honda, Hyundai, Infiniti, Jaguar, Jeep, Kia, Land Rover, Lexus, Mazda, Mercedes-Benz, Mitsubishi, Nissan, Peugeot, Porsche, Renault, Suzuki, Toyota, Volkswagen, Volvo

Statuts d'annonce

Valeur DB	Libellé FR	Couleur
DRAFT	Brouillon	Bleu
PENDING	En attente de validation	Orange
PUBLISHED	En ligne	Vert
SOLD	Vendu	Gris
REJECTED	Refusé	Rouge
EXPIRED	Expiré	Gris
SUSPENDED	Suspendu	Rouge
ARCHIVED	Archivé	Gris

Types d'utilisateurs

Valeur DB	Libellé FR
BUYER	Acheteur
SELLER	Vendeur particulier
DEALER	Concessionnaire certifié
RESELLER	Revendeur
IMPORTER	Importateur

Document généré à partir du code source de la branche copilot/check-features-status.
Automobile Business Center — Burkina Faso — 2026

Automobile Business Center — Burkina Faso​

Table des matières​

1. Principes généraux​

1.1 Design mobile-first​

1.2 Performance​

1.3 Langue & localisation​

1.4 Palette de couleurs et sémantique des badges​

1.5 Feedback utilisateur​

2. Rôles et permissions​

2.1 Visiteur (non connecté)​

2.2 Acheteur (BUYER, connecté)​

2.3 Vendeur particulier (SELLER)​

2.4 Revendeur (RESELLER) / Importateur (IMPORTER)​

2.5 Concessionnaire (DEALER)​

2.6 Administrateur (admin panel)​

3. Navigation & Header​

3.1 Structure du header (desktop, ≥ 768 px)​

3.2 Menu mobile (hamburger, < 768 px)​

3.3 Comportement du lien actif​

3.4 Bouton "Publier" (header)​

3.5 Déconnexion​

4. Page d'accueil (/)​

4.1 Layout général​

4.2 Hero & Barre de recherche rapide​

4.3 Section "Dernières annonces"​

4.4 CTA Footer​

5. Marketplace / Catalogue (/marketplace)​

5.1 Layout​

5.2 Barre de recherche​

5.3 Panneau de filtres rapides​

5.4 Carte véhicule​

5.5 Filtre par concessionnaire​

5.6 État vide​

6. Recherche avancée (/advanced-search)​

6.1 Layout​

6.2 Sections de filtres (toutes collapsibles)​

6.3 Comportement des filtres​

6.4 Affichage du compteur de résultats​

7. Détail d'un véhicule (/vehicle/[id])​

7.1 Layout​

7.2 Galerie photos​

7.3 Boutons de contact​

Bouton "Appeler"​

Bouton "WhatsApp"​

Bouton "♡ Favori"​

Bouton "Share"​

7.4 Section "Vendeur"​

7.5 Section "Caractéristiques"​

7.6 Section "Équipements"​

7.7 Section "Description"​

8. Inscription (/register)​

8.1 Champs communs à tous les types​

8.2 Types de comptes et champs conditionnels​

Acheteur (BUYER)​

Vendeur particulier (SELLER)​

Revendeur (RESELLER) / Importateur (IMPORTER)​

Concessionnaire certifié (DEALER)​

8.3 Affichage conditionnel​

8.4 Validation du formulaire​

8.5 Après l'inscription (succès)​

8.6 Lien vers la connexion​

9. Connexion (/login)​

9.1 Champs​

9.2 Soumission​

9.3 Lien​

10. Tableau de bord (/dashboard)​

10.1 Chargement​

10.2 Cartes de statistiques​

10.3 Actions rapides (grille 2×2 sur mobile, 4 colonnes sur desktop)​

10.4 Activité récente​

11. Mes annonces (/mes-annonces)​

11.1 En-tête de page​

11.2 État vide​

11.3 Ligne d'annonce​

11.4 Badges de statut​

11.5 Actions sur chaque annonce​

12. Créer une annonce (/creer-annonce)​

12.1 Indicateur de progression (step stepper)​

12.2 Étape 1 — Informations véhicule​

12.3 Étape 2 — Détails & options​