# 📦 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:
```tsx
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:
```tsx
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:
```tsx
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:
```tsx
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`:

```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:

```typescript
// 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:

```typescript
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

```env
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

```tsx
// 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

```tsx
// 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