Lieu

Page d’accueil > Transfert > Contact

Objectif

Cette page permet à l’utilisateur de sélectionner un contact pour effectuer une action (par exemple : transfert, paiement, ou autre interaction).

Éléments visibles

1. Titre

• Titre principal : Sélectionner un contact

2. Barre de recherche

• Champ de recherche avec placeholder : Rechercher un contact…
• Icône loupe : pour lancer la recherche.
• Bouton + (à droite) : permet d’ajouter un nouveau contact.

3. Liste des contacts

• Section : Tous les contacts
• État actuel : Chargement des contacts… (indiqué par un texte et une animation circulaire de chargement).

4. Barre de navigation (en bas)

• Accueil (icône maison)
• Factures (icône document)
• Devises (icône devise)
• Réglages (icône engrenage)
• Bouton central flottant : QR Code (probablement pour scanner un code et effectuer une action rapide).

Comportement attendu

• Recherche :
  • L’utilisateur saisit un nom ou numéro dans la barre de recherche pour filtrer les contacts.
• Ajout de contact :
  • En cliquant sur le bouton +, l’utilisateur est redirigé vers une page pour ajouter un nouveau contact.
• Chargement :
  • Pendant le chargement, la liste des contacts est indisponible.
  • Une fois le chargement terminé, les contacts s’affichent sous la section Tous les contacts.

Cas d’erreur

• Si aucun contact n’est disponible, afficher un message : Aucun contact trouvé.
• Si la recherche ne donne aucun résultat, afficher : Aucun contact correspondant.

Public cible

Utilisateurs souhaitant sélectionner un contact pour des opérations dans l’application.