Africa Bridge Pay Wiki

Appearance

🔒 Indicateurs API Réservés aux Admins ​

📋 Changement Effectué ​

Les indicateurs techniques de l'API de taux de change sont désormais visibles uniquement pour les administrateurs.

🎯 Raison ​

Les informations techniques (source API, cache, fallback, bouton refresh) ne sont pas pertinentes pour les utilisateurs finaux. Seuls les administrateurs ont besoin de :

  • Vérifier la source des taux (API/CACHE/FALLBACK)
  • Rafraîchir manuellement les taux
  • Voir les messages d'erreur techniques

Pour l'utilisateur final : Seul le taux lui-même est important, pas d'où il vient.

🔄 Composants Modifiés ​

1. ABPvsBankComparer.tsx ​

Avant : Tous les utilisateurs voyaient

  • Badge source (🌐 API / 📦 CACHE / ⚠️ FALLBACK)
  • Bouton de rafraîchissement
  • Indicateur 🔴 Live dans le tableau
  • Messages d'erreur

Après : Uniquement les admins voient ces éléments

tsx
import { useAuth } from '@/context/AuthContext';

const { isAdmin } = useAuth();

// Badge source - Admin uniquement
{isAdmin && source && (
  <span>Badge source</span>
)}

// Bouton refresh - Admin uniquement
{isAdmin && !loading && (
  <button onClick={refresh}>...</button>
)}

// Indicateur Live - Admin uniquement
{isAdmin && source === 'API' && <span>🔴 Live</span>}

// Message d'erreur - Admin uniquement
{isAdmin && error && (
  <div>{error}</div>
)}

2. ExchangeRateIndicator.tsx ​

Nouveau prop : showAdminInfo?: boolean

tsx
// Utilisation
<ExchangeRateIndicator showAdminInfo={isAdmin} />

Version compacte :

  • showAdminInfo={true} : Affiche badge "Live" + bouton refresh
  • showAdminInfo={false} : Affiche seulement le taux

Version détaillée :

  • showAdminInfo={true} : Affiche bouton refresh + footer avec source
  • showAdminInfo={false} : Affiche seulement les taux et marges

👥 Vue selon le rôle ​

Utilisateur Normal (Client) ​

┌────────────────────────────────────────┐
│  🌟 Comparateur de performance         │
│                                        │
│  Pourquoi passer par Africa Bridge Pay│
│                                        │
│  [Slider: 10 000 USD]                 │
│                                        │
│  Taux de change appliqué               │
│  ABP: 1 USD = 611.05 XOF              │
│  Banque: 1 USD = 626.18 XOF (Pénalisant)
└────────────────────────────────────────┘

Administrateur ​

┌────────────────────────────────────────┐
│  🌟 Comparateur  🌐 Taux en temps réel │
│  [↻]                                   │
│                                        │
│  Pourquoi passer par Africa Bridge Pay│
│                                        │
│  [Slider: 10 000 USD]                 │
│                                        │
│  Taux de change appliqué               │
│  ABP: 1 USD = 611.05 XOF 🔴 Live      │
│  Banque: 1 USD = 626.18 XOF (Pénalisant)
└────────────────────────────────────────┘

🧪 Comment Tester ​

1. En tant qu'utilisateur normal (non connecté) ​

bash
# Aller sur la landing page
http://localhost:3000/home

# Scroller jusqu'au comparateur
# ✅ Vérifier qu'il n'y a PAS :
#    - Badge "🌐 Taux en temps réel"
#    - Bouton refresh (↻)
#    - Indicateur "🔴 Live" dans le tableau
#    - Messages d'erreur API

2. En tant que client connecté ​

bash
# Se connecter avec
Email: client@demo.com
Password: client123

# Aller sur le calculateur
http://localhost:3000/calculator

# Scroller jusqu'au comparateur
# ✅ Vérifier qu'il n'y a PAS les indicateurs techniques

3. En tant qu'admin ​

bash
# Se connecter avec
Email: admin@demo.com
Password: admin123

# Aller sur n'importe quelle page avec le comparateur
# ✅ Vérifier qu'il Y A :
#    - Badge "🌐 Taux en temps réel" (ou CACHE/FALLBACK)
#    - Bouton refresh (↻)
#    - Indicateur "🔴 Live" dans le tableau (si API)
#    - Messages d'erreur si problème API

🔐 Vérification isAdmin ​

Le composant utilise le contexte d'authentification :

typescript
import { useAuth } from '@/context/AuthContext';

const { isAdmin } = useAuth();

// isAdmin = true si :
// 1. Utilisateur connecté
// 2. Role = 'admin'
// 3. Mode admin activé (toggleAdminMode)

Important : isAdmin est false pour :

  • Utilisateurs non connectés
  • Utilisateurs avec role 'client'
  • Admins qui ont désactivé le mode admin

📊 Matrice de Visibilité ​

ÉlémentNon connectéClientAdmin
Taux XOF✅✅✅
Badge source❌❌✅
Bouton refresh❌❌✅
Indicateur Live❌❌✅
Message erreur API❌❌✅

🎨 Avantages UX ​

Pour l'utilisateur normal ​

✅ Interface épurée et claire
✅ Concentré sur l'essentiel (les taux)
✅ Pas de confusion avec des termes techniques
✅ Expérience fluide sans distraction

Pour l'admin ​

✅ Visibilité complète de l'état du système
✅ Peut diagnostiquer les problèmes
✅ Peut forcer le rafraîchissement
✅ Voit la source des données

🚀 Utilisation dans d'autres composants ​

Si vous créez un nouveau composant qui affiche des taux :

tsx
import { useAuth } from '@/context/AuthContext';
import { useExchangeRates } from '@/hooks/useExchangeRates';

function MyComponent() {
  const { isAdmin } = useAuth();
  const { rates, source, refresh } = useExchangeRates();

  return (
    <div>
      {/* Taux - Visible par tous */}
      <p>1 USD = {rates.USD.client} XOF</p>

      {/* Indicateurs techniques - Admin uniquement */}
      {isAdmin && (
        <>
          <span>Source: {source}</span>
          <button onClick={refresh}>Rafraîchir</button>
        </>
      )}
    </div>
  );
}

📝 Best Practices ​

✅ À faire ​

  • Toujours conditionner les indicateurs techniques avec isAdmin
  • Garder l'interface utilisateur simple et claire
  • Afficher seulement les informations pertinentes pour chaque rôle

❌ À éviter ​

  • Afficher des termes techniques aux utilisateurs finaux
  • Exposer des messages d'erreur système aux clients
  • Montrer des contrôles qui ne leur servent pas

🔮 Prochaines Étapes ​

Phase 1 : Admin Dashboard ​

Créer une page dédiée /admin/exchange-rates avec :

  • Historique des taux
  • Statistiques d'utilisation API
  • Logs des erreurs
  • Configuration des marges

Phase 2 : Alertes Admin ​

Notifier les admins si :

  • L'API échoue pendant > 1h
  • Fallback utilisé pendant > 24h
  • Taux anormalement différent (> 5% vs précédent)

Phase 3 : Permissions Granulaires ​

typescript
// Niveaux d'accès
enum AdminLevel {
  SUPER_ADMIN = 'super_admin',     // Tout voir + modifier
  ADMIN = 'admin',                 // Tout voir
  COMPLIANCE = 'compliance',       // Voir taux + logs
  SUPPORT = 'support'              // Voir seulement état
}

✅ Résultat ​

Avant : Tous les utilisateurs voyaient des badges techniques
Après : Interface épurée pour clients, infos techniques pour admins

Impact :

  • ✅ UX améliorée pour utilisateurs finaux
  • ✅ Admins gardent visibilité technique
  • ✅ Séparation claire des responsabilités
  • ✅ Interface plus professionnelle

Documentation Africa Bridge Pay

Copyright © 2026 Africa Bridge Pay