1. Objectif de la page

La page Mes transactions permet à l’utilisateur de :

• consulter l’historique détaillé de toutes ses opérations financières
• rechercher une transaction spécifique
• filtrer les transactions par type (ex. transferts)
• accéder au détail d’une transaction

2. Accès à la page

Cette page est accessible depuis :

• la page Accueil via le lien Voir tout des transactions
• le menu principal de l’application

3. En‑tête de la page

3.1 Bouton retour

• Icône : flèche retour
• Action : revenir à la page précédente

3.2 Titre

Mes transactions

🎯 Indique clairement le contenu de la page.

4. Barre de recherche

4.1 Champ de recherche

• Placeholder : Rechercher une transaction…
• Icône : loupe
• Fonctionnalité :
  • recherche par nom de contact
  • recherche par montant
  • recherche par date
• Comportement :
  • filtrage dynamique de la liste
  • affichage des résultats en temps réel

5. Filtre de transactions

5.1 Filtre : Transferts

• Type : bouton / puce de filtre
• Fonction :
  • affiche uniquement les transactions de type transfert
  • exclut les autres opérations (recharges, paiements, factures)
• État visuel :
  • actif lorsqu’il est sélectionné

📌 Des filtres supplémentaires peuvent être ajoutés (recharges, paiements, factures, etc.).

6. Liste des transactions

6.1 Organisation

• Affichage en liste verticale
• Classement par ordre chronologique décroissant
• Les transactions les plus récentes apparaissent en premier

6.2 Contenu d’une ligne de transaction

Chaque transaction contient :

a) Icône de sens

• ➡️ À : transaction sortante (envoi)
• ⬅️ De : transaction entrante (réception)

b) Libellé

• Nom du destinataire ou de l’expéditeur
  (ex. À Anicette BITAH / De Amongoa Bilé)

c) Date et heure

• Format : JJ/MM/AAAA à HH:MM

d) Montant

• Rouge (-) : débit
  Exemple : - 100 F CFA
• Vert (+) : crédit
  Exemple : + 200 F CFA

e) Statut

• Terminé (couleur verte)
• Indique que la transaction a été effectuée avec succès

f) Indicateur de navigation

• Chevron ( > )
• Permet d’accéder au détail complet de la transaction

7. Actions utilisateur

• ✅ Faire défiler l’historique
• ✅ Rechercher une transaction
• ✅ Filtrer par type
• ✅ Sélectionner une transaction pour voir les détails (référence, statut, frais, etc.)

8. Comportements fonctionnels attendus

• Synchronisation en temps réel avec le backend
• Mise à jour automatique lors d’une nouvelle transaction
• Gestion des erreurs réseau
• Message d’état vide si aucune transaction n’est trouvée

9. Règles UX / UI

• Codes couleurs clairs (vert = entrée, rouge = sortie)
• Alignement lisible des montants
• Icônes explicites
• Bonne lisibilité sur mobile

10. Sécurité et confidentialité

• Affichage limité au compte de l’utilisateur connecté
• Données protégées et non modifiables
• Aucune action destructive possible depuis cette page

11. Résumé

✅ Vue complète et détaillée de l’historique financier
✅ Recherche et filtres intégrés
✅ Lecture rapide grâce aux indicateurs visuels
✅ Page clé pour le suivi et la transparence financière