287 lines
13 KiB
TypeScript
287 lines
13 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { useRouter } from "next/navigation";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
|
|
import { Badge } from "@/components/ui/Badge";
|
|
import Button from "@/components/Button";
|
|
import { Loading } from "@/components/ui/Loading";
|
|
import { Ticket } from "@/types";
|
|
import { gameService } from "@/services/game.service";
|
|
import { ROUTES, PRIZE_CONFIG } from "@/utils/constants";
|
|
import Link from "next/link";
|
|
|
|
export default function ClientPage() {
|
|
const { user, isAuthenticated, isLoading: authLoading } = useAuth();
|
|
const router = useRouter();
|
|
const [tickets, setTickets] = useState<Ticket[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [stats, setStats] = useState({
|
|
total: 0,
|
|
claimed: 0,
|
|
pending: 0,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!authLoading && !isAuthenticated) {
|
|
router.push(ROUTES.LOGIN);
|
|
return;
|
|
}
|
|
|
|
if (isAuthenticated) {
|
|
loadUserTickets();
|
|
}
|
|
}, [authLoading, isAuthenticated, router]);
|
|
|
|
const loadUserTickets = async () => {
|
|
try {
|
|
const response = await gameService.getMyTickets(1, 100);
|
|
const ticketsData = response?.data || [];
|
|
setTickets(ticketsData);
|
|
|
|
// Calculate stats
|
|
const total = ticketsData.length;
|
|
const claimed = ticketsData.filter((t: Ticket) => t.status === "CLAIMED").length;
|
|
const pending = ticketsData.filter((t: Ticket) => t.status === "PENDING").length;
|
|
|
|
setStats({ total, claimed, pending });
|
|
} catch (error) {
|
|
console.error("Error loading tickets:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
if (authLoading || isLoading) {
|
|
return (
|
|
<div className="min-h-[calc(100vh-8rem)] flex items-center justify-center">
|
|
<Loading size="lg" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!isAuthenticated) {
|
|
return null;
|
|
}
|
|
|
|
const getStatusBadge = (status: string) => {
|
|
switch (status) {
|
|
case "CLAIMED":
|
|
return <Badge variant="success">Réclamé</Badge>;
|
|
case "PENDING":
|
|
return <Badge variant="warning">En attente</Badge>;
|
|
case "REJECTED":
|
|
return <Badge variant="danger">Rejeté</Badge>;
|
|
default:
|
|
return <Badge variant="default">{status}</Badge>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 py-8">
|
|
<div className="container mx-auto px-4">
|
|
{/* Welcome Section */}
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-2">
|
|
Bonjour {user?.firstName} ! 👋
|
|
</h1>
|
|
<p className="text-gray-600">
|
|
Bienvenue dans votre espace client
|
|
</p>
|
|
</div>
|
|
|
|
{/* Quick Action */}
|
|
<div className="mb-8">
|
|
<div className="bg-gradient-to-r from-[#1a4d2e] to-[#2d5a3d] text-white rounded-xl shadow-md p-8">
|
|
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-2xl font-bold mb-2">
|
|
Vous avez un nouveau ticket ?
|
|
</h2>
|
|
<p className="text-green-50">
|
|
Entrez votre code et découvrez votre gain instantanément
|
|
</p>
|
|
</div>
|
|
<Link href={ROUTES.GAME}>
|
|
<button className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-4 rounded-lg transition-all hover:shadow-xl whitespace-nowrap">
|
|
Jouer maintenant 🎮
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Statistics Cards */}
|
|
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
|
<div className="bg-white rounded-xl shadow-md p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600 mb-2">
|
|
Total Participations
|
|
</p>
|
|
<p className="text-4xl font-bold text-gray-900">
|
|
{stats.total}
|
|
</p>
|
|
</div>
|
|
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-md p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600 mb-2">
|
|
Gains réclamés
|
|
</p>
|
|
<p className="text-4xl font-bold text-green-600">
|
|
{stats.claimed}
|
|
</p>
|
|
</div>
|
|
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
|
|
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-md p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600 mb-2">
|
|
En attente
|
|
</p>
|
|
<p className="text-4xl font-bold text-yellow-600">
|
|
{stats.pending}
|
|
</p>
|
|
</div>
|
|
<div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center">
|
|
<svg className="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Tickets */}
|
|
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-xl font-bold text-gray-900">Mes derniers tickets</h2>
|
|
<Link href={ROUTES.HISTORY}>
|
|
<button className="text-[#1a4d2e] hover:text-[#f59e0b] font-semibold text-sm transition-colors">
|
|
Voir tout l'historique
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="p-6">
|
|
{tickets.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<div className="text-6xl mb-4">🎲</div>
|
|
<p className="text-gray-600 mb-4">
|
|
Vous n'avez pas encore participé au jeu
|
|
</p>
|
|
<Link href={ROUTES.GAME}>
|
|
<button className="bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-6 py-3 rounded-lg transition-all">
|
|
Jouer maintenant
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
|
|
Code Ticket
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
|
|
Gain
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
|
|
Statut
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
|
|
Date
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200">
|
|
{tickets.slice(0, 5).map((ticket) => {
|
|
const prizeConfig = ticket.prize
|
|
? PRIZE_CONFIG[ticket.prize.type as keyof typeof PRIZE_CONFIG]
|
|
: null;
|
|
|
|
return (
|
|
<tr key={ticket.id} className="hover:bg-gray-50 transition-colors">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className="font-mono text-sm font-semibold text-gray-900">
|
|
{ticket.code}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<div className="flex items-center gap-3">
|
|
{prizeConfig && (
|
|
<>
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${prizeConfig.color}`}>
|
|
{ticket.prize?.type === 'INFUSEUR' && (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/>
|
|
</svg>
|
|
)}
|
|
{ticket.prize?.type === 'THE_SIGNATURE' && (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3z"/>
|
|
</svg>
|
|
)}
|
|
{ticket.prize?.type === 'COFFRET_DECOUVERTE' && (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/>
|
|
</svg>
|
|
)}
|
|
{ticket.prize?.type === 'COFFRET_PRESTIGE' && (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm6 9.09c0 4-2.55 7.7-6 8.83-3.45-1.13-6-4.82-6-8.83v-4.7l6-2.25 6 2.25v4.7zM8 10.5l1.5 1.5L15 6.5 13.5 5z"/>
|
|
</svg>
|
|
)}
|
|
{ticket.prize?.type === 'THE_GRATUIT' && (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900">
|
|
{prizeConfig.name}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{getStatusBadge(ticket.status)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
|
|
{ticket.playedAt ? new Date(ticket.playedAt).toLocaleDateString("fr-FR") : "-"}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|