377 lines
8.2 KiB
Markdown
377 lines
8.2 KiB
Markdown
# 📦 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
|