Guide d'Utilisation - Africa Bridge Pay MVP

🎯 Vue d'ensemble

Africa Bridge Pay est une plateforme fintech qui simplifie les paiements internationaux entre l'Afrique de l'Ouest et la Chine/Inde.

🚀 Démarrage Rapide

1. Lancer l'application

# Mode développement
npm run dev

# Ouvrir http://localhost:3000

2. Premier accès - Inscription

1. Page d'accueil : Redirection automatique vers /onboarding
2. Formulaire d'inscription :
   • Nom complet
   • Email
   • Téléphone (+221 XX XXX XX XX)
   • Mot de passe

3. Profil d'Entreprise (KYB)

Après l'inscription, complétez votre profil :

• Informations entreprise :

  • Nom de l'entreprise
  • Pays (Sénégal)
  • Numéro RCCM
  • Numéro NINEA

• Documents requis :

  • Registre du Commerce (PDF/Image)
  • Pièce d'identité du gérant (PDF/Image)
  • Upload par glisser-déposer

📱 Interface Client

Dashboard (/dashboard)

Après validation du KYB, accédez au tableau de bord :

Statistiques

• 📊 Volume Total : Montant total des transactions en XOF
• ⏳ En attente : Nombre de transactions en attente de paiement
• ✅ Complétées : Transactions payées avec succès

Liste des Transactions

• Affichage de toutes vos transactions

• Statuts colorés :

  • 🟠 En attente de paiement
  • 🔵 Fonds reçus
  • 🟣 En cours de transfert
  • 🟢 Payé

• Actions disponibles :

  • Statut "En attente" → Voir les instructions de paiement
  • Statut "Payé" → Télécharger la preuve de virement

Gestion des Fournisseurs (/suppliers)

Gérez vos partenaires commerciaux :

Ajouter un Fournisseur

1. Cliquez sur "Nouveau"
2. Remplissez le formulaire :
   • Nom de l'entreprise
   • Pays (Chine, Inde, Autre)
   • Adresse de l'usine
   • Informations bancaires :
     • Nom de la banque
     • Code SWIFT
     • Numéro de compte/IBAN
     • Alipay ID (optionnel)
     • WeChat Pay ID (optionnel)
   • Devise préférée (USD/CNY)
   • Mode de paiement préféré

Fonctionnalités

• ✏️ Modifier : Mettre à jour les informations
• 🗑️ Supprimer : Retirer un fournisseur
• 🔍 Rechercher : Filtrer par nom ou pays

Calculateur de Frais (/calculator)

Estimez le coût de votre transaction :

1. Saisissez le montant (ex: 1000)
2. Choisissez la devise (USD ou CNY)
3. Visualisez instantanément :
   • Taux de change appliqué
   • Montant converti en XOF
   • Frais de service (0.5% du montant source)
   • Frais de transfert (14.00 EUR + 0.5% du montant)
   • Montant Total à payer

Exemple de Calcul

Montant : 1000 USD

Taux appliqué     : 1 USD = 572.06 XOF (566.4 × 1.01)
Montant converti  : 572 060 XOF
Frais de service  :   2 860 XOF (0.5%)
Frais de transfert:  12 043 XOF (14.00 EUR + 0.5%)
─────────────────────────────────
TOTAL            : 586 963 XOF

Créer une Transaction (/new-transaction)

Processus en 3 étapes :

Étape 1 : Sélection du Fournisseur

• Option A : Choisir un fournisseur existant dans la liste déroulante
• Option B : Créer un nouveau fournisseur (formulaire rapide)

Étape 2 : Détails de la Facture

• Upload facture : PDF ou Image (glisser-déposer)
• Numéro de facture : Référence unique
• Montant : Valeur en devise étrangère
• Devise : USD ou CNY

Étape 3 : Récapitulatif & Paiement

• Voir le récapitulatif financier complet

• Choisir le mode de paiement local :

  • Virement Bancaire
  • Mobile Money

• Confirmer la transaction

Effectuer le Paiement Local

Après création de la transaction :

1. Statut initial : "En attente de paiement"
2. Cliquez sur "Instructions de paiement"
3. Coordonnées bancaires affichées :

   IBAN: SN08 SN012 01013 065974570121 87
   Banque: CBAO
   Bénéficiaire: Africa Bridge Pay SARL

4. Effectuez le virement depuis votre banque
5. Le statut passe à "Fonds reçus" après validation admin

🔐 Interface Administrateur

Basculer en Mode Admin

Cliquez sur "Mode Admin" dans la barre de navigation.

Supervision des Opérations (/admin)

Statistiques Admin

• Total de transactions
• En attente (orange)
• Fonds reçus (bleu)
• En transfert (violet)
• Complétées (vert)

Liste des Transactions

• Filtres :
  • Recherche par numéro de facture ou fournisseur
  • Filtrage par statut
• Action : Cliquer sur "Détails" pour gérer une transaction

Traitement d'une Transaction (/admin/transactions/[id])

Informations Affichées

• Détails de la transaction
• Informations du fournisseur
• Coordonnées bancaires complètes
• Facture téléchargeable

Workflow Admin

1. Transaction en "En attente de paiement"

• Bouton : "Valider la Conformité"
• Action : Vérifier la facture et les informations
• Résultat : Statut → "Fonds reçus"

2. Transaction en "Fonds reçus" ou "En cours de transfert"

• Upload de la Preuve de Virement :
  • Reçu SWIFT MT103 (virement bancaire)
  • Reçu Alipay/WeChat Pay
• Bouton : "Marquer comme Payé"
• Résultat :
  • Statut → "Payé"
  • Preuve disponible pour le client
  • Notification automatique (simulée)

3. Transaction "Payée"

• Badge vert de confirmation
• Possibilité de télécharger la preuve

🎨 Design & UX

Responsive Design

• Mobile-First : Interface optimisée pour smartphone
• Navigation mobile : Menu hamburger sur petit écran
• Cartes adaptatives : Layout flexible selon la taille d'écran

Couleurs de Statut

Statut	Couleur	Signification
En attente de paiement	🟠 Orange	Client doit payer
Fonds reçus	🔵 Bleu	ABP a reçu les fonds
En cours de transfert	🟣 Violet	Virement international en cours
Payé	🟢 Vert	Transaction complétée

💾 Persistance des Données

LocalStorage (MVP)

Les données sont stockées dans le navigateur :

• Utilisateur : abp_user
• Entreprise : abp_company
• Fournisseurs : abp_suppliers
• Transactions : abp_transactions
• Mode Admin : abp_admin_mode

Réinitialiser les Données

Ouvrez la Console du navigateur (F12) :

// Tout supprimer
localStorage.clear()

// Supprimer un élément spécifique
localStorage.removeItem('abp_transactions')

🔄 Flux Complet d'une Transaction

┌─────────────────────────────────────────────────────────┐
│ 1. CLIENT : Créer Transaction                          │
│    ├─ Sélectionner fournisseur                         │
│    ├─ Upload facture                                   │
│    └─ Confirmer montant                                │
└──────────────────┬──────────────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ 2. STATUT : En attente de paiement 🟠                  │
└──────────────────┬──────────────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ 3. CLIENT : Effectuer virement local en XOF            │
│    └─ Vers compte Africa Bridge Pay                    │
└──────────────────┬──────────────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ 4. ADMIN : Valider la Conformité                       │
│    ├─ Vérifier facture                                 │
│    └─ Confirmer réception fonds                        │
└──────────────────┬──────────────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ 5. STATUT : Fonds reçus 🔵                             │
└──────────────────┬──────────────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ 6. ADMIN : Effectuer virement international            │
│    └─ Vers fournisseur (SWIFT/Alipay/WeChat)          │
└──────────────────┬──────────────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ 7. STATUT : En cours de transfert 🟣                   │
└──────────────────┬──────────────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ 8. ADMIN : Upload Preuve de Virement                   │
│    ├─ Reçu SWIFT MT103                                 │
│    └─ Reçu Alipay/WeChat                              │
└──────────────────┬──────────────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ 9. STATUT : Payé 🟢                                    │
│    └─ Preuve disponible pour le client                 │
└─────────────────────────────────────────────────────────┘

🔧 Personnalisation

Modifier les Taux de Change

Fichier : /lib/constants.ts

export const EXCHANGE_RATES = {
  USD: {
    interbank: 566.4,  // Taux interbancaire
    margin: 0.01,      // Marge de 1.0%
    client: 572.06,    // Taux appliqué au client (clientRate)
  },
  // ...
};

Modifier les Frais

// Frais de transfert (formule)
export const ABP_TRANSFER_FEE_FIXED = 14.00;  // 14.00 EUR fixe
export const ABP_TRANSFER_FEE_RATE = 0.005;   // 0.5% variable

// Commission de service
export const ABP_SERVICE_FEE_RATE = 0.005; // 0.5%

Ajouter un Pays

export const COUNTRIES = [
  { code: 'SN', name: 'Sénégal', flag: '🇸🇳' },
  
  { code: 'CN', name: 'Chine', flag: '🇨🇳' },
  { code: 'IN', name: 'Inde', flag: '🇮🇳' },
];

🐛 Dépannage

L'application ne démarre pas

rm -rf .next node_modules
npm install
npm run dev

Les données ne se sauvegardent pas

• Vérifiez que localStorage est activé dans votre navigateur
• Mode navigation privée : les données sont effacées à la fermeture

Erreur de build

npm run build
# Si erreur TypeScript
npm run build -- --debug

📞 Support & Contact

• Documentation : Voir README.md
• Déploiement : Voir DEPLOYMENT.md
• GitHub Issues : Pour signaler des bugs

🚀 Prochaines Étapes

Pour passer du MVP à la Production :

1. Backend API : Connecter une base de données
2. Authentification : JWT avec refresh tokens
3. Notifications : Email (SendGrid) + SMS (Twilio)
4. Paiements : Intégration Orange Money / Wave
5. KYC/KYB : Vérification automatisée
6. Analytics : Suivi des transactions en temps réel
7. Multi-devises : EUR, GBP, etc.
8. Export PDF : Génération de factures

---

Africa Bridge Pay - Simplifier les paiements internationaux 🌍💰