Dashboard Administration (24 Pages)

Dashboard React multifonction pour administrateurs RGZ — gestion complète revendeurs, abonnés, finances, opérations, monitoring.

URL de production : https://admin-rgz.duckdns.orgAuth : JWT RS256 + Bearer token Rôles : admin, noc, billing, compliance

Pages Principales (24)

Groupe Core (4 pages)

1. Dashboard (KPIs Globaux)

┌────────────────────────────────────────────────────┐
│ Admin RGZ Dashboard                      [logout]   │
├────────────────────────────────────────────────────┤
│ METRICS TODAY                                       │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │
│ │ Revenus  │ │ Sessions │ │Revendeurs│ │ P0Alerts
│ │ 2.4M FCFA│ │ 12,345   │ │ 287      │ │   3    │
│ │ +15% vs J-1
│ └──────────┘ └──────────┘ └──────────┘ └────────┘ │
│                                                     │
│ TOP RESELLERS                                       │
│ ┌─ Kossou Tech    │ 450K FCFA  │ 1,234 sessions  │ │
│ ├─ TechConnect    │ 380K FCFA  │ 890 sessions    │ │
│ ├─ WiFi Center    │ 320K FCFA  │ 756 sessions    │ │
│ └─ (11 plus)      │            │                 │ │
│                                                     │
│ INCIDENTS ACTIFS (P0 = CRITICAL)                   │
│ ┌─ [P0] RGZ-core offline                    10 min │ │
│ ├─ [P1] RADIUS auth failing (5% rate)       2h     │ │
│ └─ [P2] Grafana slow queries                45 min │ │
│                                                     │
│ 7-DAY REVENUE TREND (graphique linéaire)           │
│          ↑ 2.4M                                    │
│          │     ╱╲    ╱╲    ╱╲                      │
│      1.8M│───╱  ╲──╱  ╲──╱  ╲──                     │
│          │────────────────────→                    │
│          Mon Tue Wed Thu Fri Sat Sun                │
│                                                     │
└────────────────────────────────────────────────────┘

KPI	Source	Refresh	Alert
Revenus jour	DB invoices sum	1 min	>3M FCFA ✓
Sessions actives	Redis/RADIUS	Real-time	>15K ⚠️ >20K 🔴
Revendeurs	DB count active	5 min	<200 🔴
P0 Alerts	Prometheus + custom	Real-time	Any 🔴

API : GET /api/v1/dashboard/kpis → Cache Redis 60s

Composants : <KPICard>, <SlaChart>, <DataTable>, <StatusBadge>

Standard OAuth2 form / JWT request.

┌─────────────────────────┐
│   ACCESS Admin Console  │
│      (Logo)             │
├─────────────────────────┤
│ Email/Username          │
│ [________________]      │
│                         │
│ Mot de passe            │
│ [________________]      │
│                         │
│ [Se connecter]          │
│ (CTA Jaune #f5c445)     │
│                         │
│ 🔒 Authentification 2FA │
│    en développement     │
└─────────────────────────┘

API : POST /api/v1/auth/login → JWT RS256 (15 min expiry + 7j refresh)

3. Subscribers (Liste + Détails)

Recherche par MSISDN / subscriber_ref
Colonnes : subscriber_ref | MSISDN | Status | Devices | Sessions actives | Forfait | Créé
Actions : [Détails] [Suspend] [Unblock] [Logs]

Colonne	Type	Éditable	Filtres
subscriber_ref	Text	✗	Recherche
MSISDN	E.164	✗	Recherche
Status	Enum	✓ Admin	active/suspended/blocked
Devices	Int	✗	=2 / >2 / <2
Sessions actives	Int	✗	Tri
Forfait	Text	✗	Filtre
Créé	Date	✗	Range

API : GET /api/v1/subscribers?page=1&status=active&sort=created_at

4. Sessions (RADIUS Actives)

Temps réel RADIUS sessions via PostgreSQL view
Colonnes : subscriber_ref | MAC | NAS-ID | Forfait | Durée | Octets ↓/↑ | Dernière activité
Actions : [Détails] [Déconnecter (CoA)] [Historique]

Colonne	Source	Refresh
subscriber_ref	radius_sessions FK	Real-time
MAC	radius_sessions	Real-time
NAS-ID	radius_sessions	Real-time
Forfait	invoices (dernière)	1 min
Durée	NOW() - session_start	Real-time
Octets	Acct-Output-Octets	30s (RADIUS)
Dernière activité	MAX(Acct-*)	30s

API : GET /api/v1/sessions?active=true (pollée toutes 5 sec frontend)

Groupe Revendeurs (4 pages)

5. Revendeurs (List)

DataTable filtrable par Status (candidate/validated/active/suspended/terminated)
Colonnes : Nom | Classif (V1/V2/V3) | Sites | Revenus 30j | Status | Actions
Pagination : 20/50/100 par page

Classif	Définition	Sites	VLAN	Simultaneous-Use
V1	Mono-site	1	100+N	2
V2	Multi-site (2-5)	2-5	1 partagé	4-6
V3	Multi-site (6+)	6+	1 partagé	8+

API : GET /api/v1/resellers?page=1&status=active&sort=-revenue_30d

6. ResellerDetail

Page détail revendeur unique : info générales, sites, revenus, abonnés, incidents.

┌─ PROFIL REVENDEUR ──────────────────────┐
│ Nom : Kossou Tech Connect               │
│ Classif : V2 (Multi-site)               │
│ Status : Active                         │
│ Date activation : 15/12/2025            │
│ Responsable : Kossou Jacques            │
│ Email : contact@kossou.bj              │
└─────────────────────────────────────────┘

┌─ SITES ─────────────────────────────────┐
│ S1 | Cotonou Centre   | 10.142.0.0/24  │
│ S2 | Cotonou Sud      | 10.143.0.0/24  │
└─────────────────────────────────────────┘

┌─ REVENUE (30J) ─────────────────────────┐
│ Total : 450K FCFA                       │
│ RGZ part : 225K FCFA (50%)              │
│ Revendeur : 225K FCFA (50%)             │
│ Commission 1.5% déduite : -6.75K FCFA  │
└─────────────────────────────────────────┘

ABONNÉS : 1,234 | SESSIONS ACTIVES : 567 | INCIDENTS P0/P1 : 0/2

API : GET /api/v1/resellers/{reseller_id} + subqueries sites/revenue/incidents

7. OnboardingManager (8 Étapes)

Pipeline 8 étapes enrichi : Candidature → RF Validation → Contrat/Paiement → VLAN/CPE → Installation → Formation → GoLive → Transition.

┌─ 8-STEP PIPELINE (Progress Bar) ────────────┐
│ [0] Candidature → [1] RF → [2] Contrat →    │
│ [3] VLAN/CPE → [4] Install → [5] Form →     │
│ [6] GoLive → [7] Transition                  │
│ Progress : 47% (3.7/8)                      │
└─────────────────────────────────────────────┘

┌─ METRICS PAR ÉTAPE ─────────────────────────┐
│ Step 0 (Candidature) : 15 in progress       │
│ Step 1 (RF) : 12 validated, 2 rejected      │
│ Step 2 (Contrat) : 8 signed, 2 pending pay  │
│ Step 3 (VLAN/CPE) : 6 provisioning...       │
│ Step 4 (Install) : 4 completed              │
│ Step 5 (Form) : 2 completed                 │
│ Step 6 (GoLive) : 1 completed               │
│ Step 7 (Transition) : 1 on week 2           │
└─────────────────────────────────────────────┘

┌─ RESELLERS ACTUELLEMENT À CHAQUE ÉTAPE ────┐
│ Step 3 : TechConnect (S1 config started)    │
│ Step 4 : Kossou Tech (Install 30% done)     │
│ Step 6 : WiFi Center (RADIUS OK, tests...)  │
└─────────────────────────────────────────────┘

[Voir détails pas à pas pour chaque revendeur]
[Étape 3 : Formulaire FortiGate + Cisco + Kea] (PROVISIONING RÉSEAU)

Components :

<OnboardingPipeline> : Barre 8 nœuds avec current step highlight
<StepMetrics> : Grille 8 colonnes (compteurs + status)
<StepDetail{N}> : Formulaire + actions (approve/reject/next) pour chaque étape

API :

GET /api/v1/onboarding/stats
GET /api/v1/onboarding/{reseller_id}/current-step
PUT /api/v1/onboarding/{reseller_id}/steps/{step}

LL#56 : Provisioning réseau (FortiGate/Cisco/Kea) déclenché à Étape 3 via POST provision-execute + rollback auto.

8. Dashboard Revendeur (Self-Service)

Accessible au revendeur via role-based access (reseller_id ownership check).

Sections : Mes Revenus (30j/90j/ytd), Mes Abonnés (actifs/historique), Mes Sessions, Mon Profil.

API : GET /api/v1/dashboard/reseller/me (filtre par JWT claim reseller_id)

Groupe Finances (4 pages)

9. Billing

Facturation moteur split 50/50 + commission 1.5%
DataTable : Revendeur | Période | Montant HT | Commission | Montant NET | Status (draft/sent/paid/overdue)
Filtres : Date range, Status, Revendeur
Actions : [Voir détails] [Envoyer] [Marquer payé] [Générer PDF]

API : GET /api/v1/billing?month=2026-02&status=sent (paginated)

10. Payments (KKiaPay Transactions)

Webhook history KKiaPay : Transaction ID | MSISDN | Montant | Provider | Status | Date
Filtres : Status (pending/completed/failed/refunded), Date, Provider
Retry failed : [Relancer paiement]

API : GET /api/v1/payments?status=failed + POST /api/v1/payments/{txn_id}/retry

11. Vouchers

Codes prépayés Luhn 8 chars
DataTable : Code | Value (FCFA) | Status (active/used/expired/revoked) | Date création | Utilisé par | Actions
Génération bulk : [Générer 100 codes] → CSV export

API : GET /api/v1/vouchers + POST /api/v1/vouchers/bulk-generate

12. Reports (SLA + Revenue)

Rapports mensuels/trimestriels
Onglets : SLA (uptime %, P95), Revenue (par revendeur), ARCEP (conformité)
Export : PDF / CSV
Calendrier : sélectionner mois/trimestre

API : GET /api/v1/reports/sla/{month} + GET /api/v1/reports/arcep/{quarter}/pdf

Groupe Opérations (6 pages)

13. Incidents

Tickets incidents P0/P1/P2
DataTable : Priorité | Titre | Détecteur | Status | Durée | Actions
Filtres : Priorité, Status (open/assigned/investigating/resolved/closed)
Actions : [Détails] [Assigner] [Update status] [Escalade]

API : GET /api/v1/incidents?priority=P0&status=open

14. AlertsCenter

Agrégateur Prometheus + custom alerts
Widgets : By severity (CRITICAL/WARNING/INFO), By service (rgz-api/rgz-radius/rgz-db/etc)
Timeline : chronologique, Mute 1h/8h/24h, Règles suppression

API : Websocket ws://api-rgz.duckdns.org/api/v1/alerts/stream (live updates)

15. RMA Dashboard

Return Merchandise Authorization
DataTable : Ticket RMA | Device serial | Status | Demandeur (revendeur) | Assigné | Date ouverture
Status flow : Signal → Diagnostic → Approbation → Expédition → Clôture
Actions : [Détails] [Affecter à] [Update status] [Tracker expédition]

API : GET /api/v1/rma?status=diagnostic

16. Sites

Carte + tableau revendeurs sites géolocalisés (22 villes Bénin)
Colonnes : Nom | Revendeur | Ville | VLAN | AP count | Last sync
Carte Leaflet : markers colors par status (online/offline/degraded)
Actions : [Détails] [Survey data] [Signal strength]

API : GET /api/v1/sites (lat/lng, last_seen_at) + GET /api/v1/sites/{site_id}/metrics

17. NetworkSupport

Logs réseau temps réel
Filtres : Service (RADIUS/DNS/Gateway), Level (INFO/WARN/ERROR), Date range
Recherche : free text (FTS PostgreSQL)
Export : JSON/TXT

API : GET /api/v1/logs/network?service=radius&level=ERROR (pagination, max 1000 lignes/requête)

18. CustomerCare

Support tickets utilisateurs (freeform ou prédéfinis)
DataTable : Ticket ID | Demandeur | Sujet | Status | Assigné | Créé il y a
Templates : "Je ne peux pas me connecter", "Forfait expiré", "Paiement KKiaPay échoué"
Actions : [Répondre] [Affecter] [Clore] [Feedback]

API : GET /api/v1/tickets?status=open + POST /api/v1/tickets/{id}/replies

Groupe Config / Compliance (4 pages)

19. BannersAdmin

Gestion bannières rotatives (8s par bannière)
Tableau : Banner ID | Titre | Image | Status (active/draft/archived) | Impressions | Clics | CTR | Actions
Upload : drag-drop image <2MB, format PNG/JPG
Scheduling : date début/fin, heures d'affichage
Actions : [Aperçu] [Planifier] [Archiver] [Stats détaillées]

API : GET /api/v1/banners?status=active + POST /api/v1/banners (multipart/form-data)

20. StatusPage

Page publique incidents + historique
Affichage : services online/degraded/offline, incident timeline
Personnalisable : logo, couleurs, message custom
Webhook : quand incident status change → update automatique

API : GET /api/v1/status (public, cache 60s)

21. Compliance Check

Pré-lancement checklist 14 items
Checkbox : APDP consent active, Logs immutables OK, Audit trail enabled, ARCEP reporting OK, etc.
Status global : Green (ready) / Yellow (in progress) / Red (blocked)
Actions : [Afficher détails] [Vérifier maintenant] [Export checklist]

API : GET /api/v1/compliance/checklist → array items avec status + last_checked_at

22. ARCEP Reports

Rapports trimestriels conformité
Téléchargement : Rapports passés (Q1/Q2/Q3/Q4 par année)
Génération manuelle : [Générer rapport Q1 2026] → statut job + download link
Historique : dates génération, tailles fichiers, signatures numériques

API : GET /api/v1/reports/arcep/list + POST /api/v1/reports/arcep/generate/{quarter}/{year}

23. MesBannieres (Revendeur)

Page revendeur pour upload propres banners (self-service).

API : GET /api/v1/banners/by-reseller/me + POST /api/v1/banners/upload

24. Encore +

Réservé future dépendance.

Composants React Réutilisables (12)

Composant	Usage	Props	Notes
`<KPICard>`	Afficher 1 métrique avec icône + trend	title, value, trend, icon	Couleur Jaune sur hover
`<DataTable>`	Listes paginées filtrable	data, columns, onRowClick, filters	Tri, recherche, actions
`<SlaChart>`	Graphique ligne/bar (Chart.js)	data, title, xLabel, yLabel	Responsive
`<StatusBadge>`	Étiquette status (active/offline/etc)	status, size	Couleurs : Vert/Rouge/Jaune
`<Modal>`	Dialog confirm/form	title, body, onConfirm	Click outside close
`<MapView>`	Carte Leaflet markers	markers, onClick, zoom	Géolocalisé 22 villes
`<PageHeader>`	Titre + breadcrumbs page	title, breadcrumbs	Fixed top
`<Pagination>`	Contrôles pagination	page, pages, onPageChange	Styled jaune #f5c445
`<SearchInput>`	Barre recherche	placeholder, onSearch, debounce	300ms debounce
`<AlertBanner>`	Notification top (success/error/warning)	type, message, duration	Auto-dismiss 5s
`<StatCard>`	Carte stats (mini-KPI)	label, value, unit	Gris background
`<Layout>`	Sidebar + header wrapper	children	Sidebar collapsible mobile

Authentification & Autorisation

javascript

// Authorization middleware
Rôles :
  - admin : Accès complet (toutes 24 pages)
  - noc : Opérations + Monitoring (pages 13-18)
  - billing : Finances uniquement (pages 9-12)
  - compliance : Compliance + Reports (pages 21-22)
  - reseller : Dashboard revendeur (page 8 + 23)

JWT claim : {sub: user_id, role: 'admin', reseller_id: null/UUID}
Vérification : Chaque endpoint check role + ownership (reseller_id)
Session : Redis TTL 8 heures, inactivité 1h = logout

WARNING

Sécurité — Vérification ownership systématique avant accès ressource (LL#SEC-01). Jamais faire confiance au frontend. Chaque endpoint valide role + resource_id match JWT claim.

Dernière mise à jour : 2026-02-24 Stack : React 18 + Tailwind CSS + Chart.js + Leaflet.js Hébergement : nginx:alpine (docker/web/) dernier nginx HTTPS : Let's Encrypt Traefik auto-renew

Dashboard Administration (24 Pages) ​

Navigation Globale ​

Pages Principales (24) ​

Groupe Core (4 pages) ​

1. Dashboard (KPIs Globaux) ​

2. Login ​

3. Subscribers (Liste + Détails) ​

4. Sessions (RADIUS Actives) ​

Groupe Revendeurs (4 pages) ​

5. Revendeurs (List) ​

6. ResellerDetail ​

7. OnboardingManager (8 Étapes) ​

8. Dashboard Revendeur (Self-Service) ​

Groupe Finances (4 pages) ​

9. Billing ​

10. Payments (KKiaPay Transactions) ​

11. Vouchers ​

12. Reports (SLA + Revenue) ​

Groupe Opérations (6 pages) ​

13. Incidents ​

14. AlertsCenter ​

15. RMA Dashboard ​

16. Sites ​

17. NetworkSupport ​

18. CustomerCare ​

Groupe Config / Compliance (4 pages) ​

19. BannersAdmin ​

20. StatusPage ​

21. Compliance Check ​

22. ARCEP Reports ​

23. MesBannieres (Revendeur) ​

24. Encore + ​

Composants React Réutilisables (12) ​

Authentification & Autorisation ​