the-tip-top-frontend/components/admin

📦 Composants d'Administration - The Tip Top

Documentation des composants d'administration pour le frontend Next.js.

---

📁 Structure

components/admin/
├── index.ts                 # Export centralisé
├── PrizeManagement.tsx      # Gestion des prix
├── UserManagement.tsx       # Gestion des utilisateurs
├── TicketManagement.tsx     # Gestion des tickets
├── Statistics.tsx           # Statistiques globales
└── README.md               # Ce fichier

---

🎯 Composants disponibles

1. PrizeManagement - Gestion des Prix

Gère tous les prix du jeu (création, modification, suppression).

Fonctionnalités:

• ✅ Liste tous les prix avec pagination
• ✅ Créer un nouveau prix
• ✅ Modifier un prix existant
• ✅ Supprimer (désactiver) un prix
• ✅ Affichage du stock et probabilités
• ✅ Filtrage par statut (actif/inactif)

Utilisation:

import { PrizeManagement } from '@/components/admin';

export default function AdminPrizesPage() {
  return (
    <div>
      <PrizeManagement />
    </div>
  );
}

Props:

Aucune (composant autonome)

---

2. UserManagement - Gestion des Utilisateurs

Gère tous les utilisateurs de la plateforme.

Fonctionnalités:

• ✅ Liste paginée des utilisateurs
• ✅ Créer un nouvel employé
• ✅ Modifier le rôle d'un utilisateur
• ✅ Vérifier/Dévérifier un email
• ✅ Supprimer un utilisateur
• ✅ Filtrage par rôle (CLIENT, EMPLOYEE, ADMIN)

Utilisation:

import { UserManagement } from '@/components/admin';

export default function AdminUsersPage() {
  return (
    <div>
      <UserManagement />
    </div>
  );
}

Props:

Aucune (composant autonome)

---

3. TicketManagement - Gestion des Tickets

Visualise tous les tickets du système avec filtres avancés.

Fonctionnalités:

• ✅ Liste paginée de tous les tickets
• ✅ Filtrage par statut (PENDING, VALIDATED, REJECTED, CLAIMED)
• ✅ Visualisation des détails d'un ticket
• ✅ Affichage des informations utilisateur et prix
• ✅ Historique complet (dates de jeu, validation, etc.)

Utilisation:

import { TicketManagement } from '@/components/admin';

export default function AdminTicketsPage() {
  return (
    <div>
      <TicketManagement />
    </div>
  );
}

Props:

Aucune (composant autonome)

---

4. Statistics - Statistiques Globales

Affiche les statistiques globales de la plateforme.

Fonctionnalités:

• ✅ Statistiques utilisateurs (total, par rôle, emails vérifiés)
• ✅ Statistiques tickets (total, par statut)
• ✅ Statistiques prix (total, actifs, stock, distribués)
• ✅ Rafraîchissement manuel

Utilisation:

import { Statistics } from '@/components/admin';

export default function AdminDashboard() {
  return (
    <div>
      <Statistics />
    </div>
  );
}

Props:

Aucune (composant autonome)

---

🔌 Intégration dans Next.js

Exemple de page admin complète

Créer un fichier app/admin/dashboard/page.tsx:

'use client';

import { useState } from 'react';
import {
  Statistics,
  PrizeManagement,
  UserManagement,
  TicketManagement
} from '@/components/admin';

export default function AdminDashboard() {
  const [activeTab, setActiveTab] = useState('statistics');

  return (
    <div className="min-h-screen bg-gray-100">
      {/* Navigation tabs */}
      <div className="bg-white shadow">
        <nav className="flex space-x-4 p-4">
          <button
            onClick={() => setActiveTab('statistics')}
            className={`px-4 py-2 rounded ${
              activeTab === 'statistics'
                ? 'bg-blue-600 text-white'
                : 'bg-gray-200'
            }`}
          >
            Statistiques
          </button>
          <button
            onClick={() => setActiveTab('prizes')}
            className={`px-4 py-2 rounded ${
              activeTab === 'prizes'
                ? 'bg-blue-600 text-white'
                : 'bg-gray-200'
            }`}
          >
            Prix
          </button>
          <button
            onClick={() => setActiveTab('users')}
            className={`px-4 py-2 rounded ${
              activeTab === 'users'
                ? 'bg-blue-600 text-white'
                : 'bg-gray-200'
            }`}
          >
            Utilisateurs
          </button>
          <button
            onClick={() => setActiveTab('tickets')}
            className={`px-4 py-2 rounded ${
              activeTab === 'tickets'
                ? 'bg-blue-600 text-white'
                : 'bg-gray-200'
            }`}
          >
            Tickets
          </button>
        </nav>
      </div>

      {/* Content */}
      <div className="container mx-auto">
        {activeTab === 'statistics' && <Statistics />}
        {activeTab === 'prizes' && <PrizeManagement />}
        {activeTab === 'users' && <UserManagement />}
        {activeTab === 'tickets' && <TicketManagement />}
      </div>
    </div>
  );
}

---

🔐 Protection des routes admin

Utilisez un middleware pour protéger les routes admin:

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth_token');
  const user = request.cookies.get('user_data');

  if (!token || !user) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  const userData = JSON.parse(user.value);
  if (userData.role !== 'ADMIN') {
    return NextResponse.redirect(new URL('/', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/admin/:path*',
};

---

📡 Services utilisés

Tous les composants utilisent le service adminService qui communique avec l'API backend:

import { adminService } from '@/services/admin.service';

// Exemples d'utilisation
const stats = await adminService.getStatistics();
const prizes = await adminService.getAllPrizes();
const users = await adminService.getAllUsers(page, limit);
const tickets = await adminService.getAllTickets(page, limit, filters);

---

🎨 Personnalisation

Thèmes et styles

Les composants utilisent Tailwind CSS. Pour personnaliser:

1. Modifiez les classes Tailwind directement dans les composants
2. Ou créez des thèmes dans tailwind.config.js

Traductions

Les composants sont en français. Pour internationaliser:

1. Utilisez next-intl ou react-i18next
2. Remplacez les chaînes hardcodées par des clés de traduction

---

⚙️ Configuration requise

Variables d'environnement

NEXT_PUBLIC_API_URL=http://localhost:4000/api

Dépendances

• React 18+
• Next.js 14+
• TypeScript
• Tailwind CSS

---

🐛 Gestion des erreurs

Tous les composants gèrent les erreurs avec:

• Messages d'erreur utilisateur-friendly
• Affichage visuel des erreurs
• Logging des erreurs en console (développement)

---

📊 Exemple de flux complet

1. Créer un prix

// L'utilisateur clique sur "Ajouter un prix"
// → Modal s'ouvre
// → Remplit le formulaire
// → Soumet
// → adminService.createPrize() est appelé
// → Liste des prix est rafraîchie

2. Modifier un utilisateur

// L'utilisateur clique sur "Modifier" sur un user
// → Modal s'ouvre avec les données
// → Modifie le rôle
// → Soumet
// → adminService.updateUser() est appelé
// → Liste des users est rafraîchie

---

✅ Checklist d'intégration

• Installer les dépendances requises
• Configurer les variables d'environnement
• Ajouter le service adminService
• Ajouter les types TypeScript
• Protéger les routes admin avec middleware
• Créer les pages admin
• Tester chaque composant
• Ajouter la gestion des erreurs globale

---

🚀 Déploiement

Avant de déployer:

1. Vérifier que toutes les routes API sont sécurisées
2. Tester l'authentification admin
3. Vérifier les permissions CORS
4. Activer le cache pour les statistiques
5. Optimiser les images et assets

---

📞 Support

Pour toute question ou problème:

• Vérifier la console du navigateur
• Vérifier les logs de l'API backend
• Consulter la documentation de l'API

---

Version: 1.0.0 Dernière mise à jour: 2025-11-08 Auteur: The Tip Top Dev Team