Skip to content

TRANSACTION_DETAIL_GUIDE.md

Latest commit

 

History

History
129 lines (108 loc) · 4.58 KB

TRANSACTION_DETAIL_GUIDE.md

File metadata and controls

129 lines (108 loc) · 4.58 KB

📋 Guide - Page de Détail de Transaction

🎯 Objectif

Créer une page de détail complète pour afficher les informations détaillées d'une transaction quand on clique dessus dans le tableau.

✅ Changements Effectués

1. Service Amélioré (lib/admin-transaction-service.ts)

  • ✨ Ajout des interfaces complètes :
    • User - Informations utilisateur
    • WalletOwner - Propriétaire du portefeuille
    • Balance - Solde du portefeuille
    • Wallet - Détails du portefeuille
  • ✨ Nouvelle interface AdminTransactionDetailResponse pour les réponses détaillées
  • 🔧 Nouvelle méthode : AdminTransactionService.getTransactionDetail(transactionId: string)
    • Récupère les détails complets d'une transaction via l'API
    • Inclut: transaction, compte, portefeuille, solde, propriétaires

2. Page de Détail Créée (app/transactions/[id]/page.tsx)

  • 📄 Page complète et responsive pour afficher les détails d'une transaction
  • 🎨 Design moderne avec Tailwind CSS + icônes Lucide
  • 📊 Affichage structuré en sections :
    • Statut Principal - État, Montant, Type
    • Détails Transaction - ID, référence, dates, frais
    • Informations Compte - Nom, ID, pays, mode
    • Portefeuille - Type, devise, taux, montants max
    • Solde Portefeuille - Solde disponible, gelé, en attente, total
    • Méthode de Paiement - Logo, nom, slug, nom technique
    • Propriétaires - Liste des propriétaires du portefeuille
    • Statistiques Balances - Ancien vs nouveau solde + différence

3. Tableau Amélioré (components/AdminTransactionTable.tsx)

  • 🖱️ Chaque ligne du tableau est maintenant cliquable
  • ↗️ Navigation automatique vers /transactions/[id] au clic
  • ✨ Feedback visuel amélioré :
    • Curseur "pointeur" au survol
    • Fond qui s'éclaircit
    • Ombre légère au survol

🚀 Utilisation

Pour afficher les détails d'une transaction :

  1. Accédez au tableau des transactions admin
  2. Cliquez sur n'importe quelle ligne pour voir les détails complets
  3. Utilisez le bouton "Retourner" ou la flèche de retour pour revenir au tableau

URL de détail :

/transactions/[id]

Exemple :

/transactions/9377dc2f-921a-4e0d-9a78-71a50f634451

📱 Fonctionnalités de la Page de Détail

✅ Affichages Multiples :

  • Statut de la transaction avec icône et badge coloré
  • Montant en gros caractères avec devise appropriée
  • Type de transaction avec icône
  • Messages d'erreur gracieux si la transaction n'existe pas
  • Chargement avec spinner animé

✅ Sections d'Information :

  • Informations de transaction complètes
  • Détails du compte
  • Information du portefeuille
  • Solde actuel en plusieurs catégories
  • Détails de la méthode de paiement avec logo
  • Liste des propriétaires du portefeuille

✅ Interactions :

  • Bouton "Copier" sur les IDs longues
  • Navigation fluide vers les détails
  • Formatage des dates en français
  • Formatage des montants avec devise

🔗 API Utilisée

GET https://api-pay-prod.faroty.me/payments/api/v1/admin/transactions/{transactionId}
Header: x-api-key: fk_live_Qbtr6Cv-s91sQ7rdz7ii2HcPs7rF8b8qE81w_pPzYi5oW5L8thU4kVTgOzQdYF31X8R2B5U6sHk

📊 Structure de Réponse API

La réponse contient :

{
  "success": true,
  "message": "Détail de la transaction récupéré avec succès",
  "statusCode": 200,
  "timestamp": "2026-05-12T07:31:45.91068142",
  "data": {
    "transaction": { ... },
    "account": { ... },
    "wallet": { ... },
    "balance": { ... },
    "walletOwners": [ ... ]
  }
}

🎨 Design

  • Couleur primaire : #8A56B2 (Violet)
  • Layout : Sidebar + TopNav + Contenu
  • Responsive : Mobile, Tablet, Desktop
  • Composants : Cards, Badges, Icons, Buttons

🔒 Sécurité

  • La clé API est stockée de manière sécurisée dans le service
  • Les requêtes vont via le serveur Next.js (fetch côté server/client)
  • Les données sensibles peuvent être masquées si nécessaire

🐛 Gestion d'Erreurs

  • Affichage d'erreur gracieux avec message spécifique
  • Fallback sur page vide si données manquantes
  • Loader pendant le chargement des données
  • Logs de debug pour diagnostic

📝 Notes

  • Les transactions avec ID invalide affichent une erreur 404-like
  • La page s'auto-rafraîchit si l'URL change
  • Tous les montants sont formatés selon la locale FR
  • Les dates sont formatées en français

Prêt à utiliser ! Cliquez sur une transaction pour voir tous ses détails. 🎉