Spécifications Dashboard Admin

1.1Description

Le dashboard admin (rewapp-admin) est l'interface web permettant aux administrateurs de gérer l'ensemble de la plateforme REWAPP : utilisateurs, commerçants, transactions, événements, abonnements, facturation et analytique.

C'est une application Angular + Ionic avec un système d'authentification (JWT), une navigation par sidebar, et un routing protégé par AuthGuard.

1.2Fonctionnalités Principales

• Dashboard : vue d'ensemble de l'activité (raccourci vers /dashboard)
• Commerçants : liste, création, modification, détail partenaire (/merchants, /partner/:id)
• Utilisateurs : liste, détail, gestion (/users, /user/:id)
• Analytics : tableaux de bord analytiques (/analytics)
• Statistiques : reporting détaillé (/statistics)
• Events : gestion des événements (/events, /event/:id)
• Transactions : historique des transactions (/transactions)
• Demandes : détail d'une demande (/request-detail/:id)
• Notifications : gestion des notifications (/notifications)
• Commercial Discounts : remises commerciales (/commercial-discounts)
• Billing : facturation (/billing)
• Tarifs : plans d'abonnement (/subscription-plans)
• Paramètres : configuration admin (/settings)

2.1Structure du Projet

rewapp-admin/src/app/
├── app.component.ts
├── app.config.ts
├── app.routes.ts           # Routes + AuthGuard
├── core/
│   └── guards/
│       └── auth.guard.ts   # Protection des routes authentifiées
├── pages/                   # Une sous-dossier par page
│   ├── login/              # LoginPage
│   ├── dashboard/           # DashboardPage
│   ├── partner/:id         # PartnerPage
│   ├── statistics/          # StatisticsPage
│   ├── settings/            # SettingsPage
│   ├── request-detail/:id/  # RequestDetailPage
│   ├── notifications/      # NotificationsPage
│   ├── users/               # UsersPage
│   ├── user/:id/            # UserDetailPage
│   ├── merchants/           # MerchantsPage
│   ├── analytics/           # AnalyticsPage
│   ├── events/             # EventsPage
│   ├── event/:id/           # EventDetailPage
│   ├── transactions/         # TransactionsPage
│   ├── commercial-discounts/ # CommercialDiscountsPage
│   ├── billing/             # BillingPage
│   └── subscription-plans/   # SubscriptionPlansPage
├── services/
└── shared/
    └── components/
        ├── app-shell/       # AppShellComponent (sidebar + layout)
        ├── sidebar/         # SidebarComponent (navigation)
        └── user-card/       # UserCardComponent (profil admin)

2.2Routes

Redirects (anciennes routes)

2.3Sidebar Navigation

L'AppShellComponent wrap toutes les pages protégées et affiche la sidebar.

3.1Login

• Route : /login → LoginPage
• Accessible publiquement (pas de AuthGuard)
• Service : AuthService
• APrès login réussi → redirection vers /dashboard
• Logout → suppression token + redirection /login

3.2Protection des Routes

• AuthGuard dans core/guards/auth.guard.ts
• Vérifie la présence et validité du token JWT
• Si non authentifié → redirection vers /login
• Toutes les routes enfants de AppShellComponent sont protégées

4.1Tableau de Bord

Route : /dashboard | Composant : DashboardPage

Page d'accueil après login. Affiche les KPIs principaux et les dernières activités.

4.2Commerçants

4.3Utilisateurs

4.4Analytics & Statistiques

4.5Événements

4.6Autres Pages

5.1Technologies

5.2Architecture

• Routing avec lazy-loading (chaque page est un chunk séparé)
• AppShellComponent = layout wrapper avec sidebar — ne se recharge pas au change de route
• Icons SVG dans src/assets/icons/
• Services Angular dans src/app/services/
• Modèles TypeScript dans src/app/models/
• Sidebar collapsible (mobile)