Skip to main content

Architecture Web - Dashboard Next.js

Vue d'ensemble​

Le dashboard web Tranoo (tranoo_landing) est une application Next.js 15 avec React 19, destinée aux administrateurs pour la supervision et la gestion de la plateforme.

Stack technique​

ComposantTechnologieVersion
FrameworkNext.js15.3.4
ReactReact19.2.1
LangageTypeScript^5
StylingTailwind CSS^3.4.1
UI ComponentsRadix UIMultiple
IconsLucide React^0.474.0
ChartsRecharts^2.15.3
HTTP ClientAxios^1.10.0
Internationalisationnext-intl^4.13.1
PDF GenerationjsPDF^3.0.1
Excel Exportxlsx^0.18.5
Date HandlingDay.js^1.11.13
FirebaseFirebase^11.9.1
CAPTCHATurnstile^1.5.3
NotificationsSonner^2.0.4

Structure du projet​

tranoo_landing/
├── app/                          # App Router Next.js 15
│   ├── dashboard/                # Dashboard admin
│   │   └── utilisateurs/         # Gestion utilisateurs
│   │       └── details/         # Détails utilisateur
│   ├── login/                    # Page connexion
│   └── ...                       # Autres pages
├── components/                   # Composants React
│   ├── ui/                       # Composants UI réutilisables
│   └── ...                       # Autres composants
├── lib/                         # Utilitaires et helpers
├── i18n/                        # Configuration i18n
│   ├── routing.ts               # Routing internationalisé
│   └── request.ts               # Configuration requêtes
├── messages/                    # Traductions
│   ├── fr.json                  # Français
│   ├── en.json                  # Anglais
│   └── ar.json                  # Arabe
├── data/                        # Données statiques
├── public/                      # Fichiers statiques
├── middleware.ts                 # Middleware Next.js
├── next.config.ts               # Configuration Next.js
├── tailwind.config.ts           # Configuration Tailwind
├── tsconfig.json               # Configuration TypeScript
├── .env                        # Variables environnement
└── package.json                # Dépendances

Fonctionnalités principales​

Gestion des utilisateurs​

  • Vendeurs : Validation, catalogue, ventes
  • Acheteurs : Suivi achats, activité
  • Transitaires : Vérification documents, abonnements (Transit international)
  • Chauffeurs : Demandes chauffeur, contacts tricycles
  • Agents : Performance, commissions, retraits (Agents commerciaux)
  • Administrateurs : Gestion système

Supervision​

  • Statistiques globales
  • Suivi des commandes
  • Missions de transit et vérification transitaires
  • Rapports et exports

Configuration​

  • Paramètres système
  • Tarification (abonnements, publicité, vérification)
  • Gestion des abonnements transitaires

Architecture des composants​

UI Components (Radix UI)​

  • Avatar - Avatars utilisateurs
  • Checkbox - Cases à cocher
  • Dropdown Menu - Menus déroulants
  • Label - Labels formulaires
  • Radio Group - Groupes radio
  • Select - Sélecteurs
  • Separator - Séparateurs
  • Switch - Interrupteurs
  • Tabs - Onglets
  • Slot - Slots composition

Icons​

  • Lucide React - Icônes modernes
  • FontAwesome - Icônes supplémentaires
  • Heroicons - Icônes Heroicons

Charts​

  • Recharts - Graphiques et visualisations
  • Statistiques utilisateurs
  • Évolution des ventes
  • Performance livreurs

Internationalisation​

Configuration next-intl​

  • Langues supportées : français (défaut), anglais, arabe
  • Routing : Sans préfixe URL (cookie-based)
  • Cookie : NEXT_LOCALE
  • Sélecteur : LocaleSwitcher component

Fichiers de traduction​

messages/
├── fr.json    # Français
├── en.json    # Anglais
└── ar.json    # Arabe

Utilisation​

const t = useTranslations("verification");
t("maCle")

Authentification​

Session web​

  • Header : X-Web-Session-Id (UUID)
  • Plateforme : X-Client-Platform: web
  • Durée : 30 minutes (configurable)
  • Stockage : Cookie + localStorage

Firebase Auth​

  • Intégration Firebase pour authentification
  • Token Firebase pour requêtes API
  • Gestion des sessions

CAPTCHA​

  • Turnstile (Cloudflare) pour protection
  • Intégration @marsidev/react-turnstile
  • Protection contre bots

Communication avec le backend​

API REST​

  • Base URL configurée dans .env
  • Axios pour requêtes HTTP
  • Headers :
    • Authorization: Bearer <token>
    • X-Client-Platform: web
    • X-Web-Session-Id: <uuid>
    • Accept-Language: fr|en|ar

Endpoints principaux​

  • /api/users/vendeurs/all - Liste vendeurs
  • /api/users/acheteurs/all - Liste acheteurs
  • /api/users/transitaires/all - Liste transitaires
  • /api/users/chauffeurs/all - Liste chauffeurs
  • /api/users/admins/all - Liste admins
  • /api/protected/stats - Statistiques globales
  • /api/protected/stats/acheteurs - Stats acheteurs

Exports​

Excel​

  • xlsx pour export Excel
  • Export des listes utilisateurs
  • Export des statistiques

PDF​

  • jsPDF pour génération PDF
  • jsPDF-autotable pour tableaux
  • Factures et rapports

Sécurité​

Middleware​

  • Protection des routes admin
  • Vérification session web
  • Gestion locale

Validation​

  • Validation formulaires côté client
  • Validation côté serveur
  • Protection CSRF

Rate Limiting​

  • Limitation requêtes API
  • Protection contre abus

Performance​

Next.js 15​

  • App Router
  • Server Components
  • Turbopack (dev)
  • Optimisation automatique

Optimisations​

  • Code splitting automatique
  • Image optimization
  • Font optimization
  • Lazy loading

Développement​

Scripts npm​

npm run dev          # Développement (Turbopack)
npm run build        # Build production
npm run start        # Démarrer production
npm run lint         # Linting
npm run export       # Export statique

Environnement​

NEXT_PUBLIC_API_URL=     # URL backend API
NEXT_PUBLIC_FIREBASE_*=  # Configuration Firebase

Déploiement​

Build​

npm run build

Start​

npm run start

Export statique​

npm run export

Voir aussi​