refactor: reduce code duplication by using reusable components

- Delete duplicate page-new.tsx in verification folder
- Create reusable StatCard component in components/ui
- Enhance StatusBadge component with icons and REJECTED status
- Refactor 7 files to use StatusBadge instead of local getStatusBadge
- Refactor Statistics.tsx to use shared StatCard component
- Reduces overall code duplication from 9.85% to lower

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/client/page.tsx

@@ -3,7 +3,7 @@ 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 { StatusBadge } from "@/components/ui/StatusBadge";
 import Button from "@/components/Button";
 import { Loading } from "@/components/ui/Loading";
 import { Ticket } from "@/types";
@@ -64,18 +64,6 @@ export default function ClientPage() {
     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-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
@@ -266,7 +254,7 @@ export default function ClientPage() {
                             </div>
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap">
-                            {getStatusBadge(ticket.status)}
+                            <StatusBadge type="ticket" value={ticket.status} />
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
                             {ticket.playedAt ? new Date(ticket.playedAt).toLocaleDateString("fr-FR") : "-"}

app/employe/gains-client/page.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Card } from '@/components/ui/Card';
+import { Card, EmptyState, StatusBadge } from '@/components/ui';
-import { EmptyState } from '@/components/ui/EmptyState';
 import Button from '@/components/Button';
 import { api } from '@/hooks/useApi';
 import toast from 'react-hot-toast';
@@ -11,8 +10,6 @@ import {
   User,
   Gift,
   CheckCircle,
-  Clock,
-  XCircle,
   Phone,
   Mail,
   Package,
@@ -95,29 +92,6 @@ export default function GainsClientPage() {
     }
   };
 
-  const getStatusBadge = (status: string) => {
-    const badges = {
-      PENDING: (
-        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
-          <Clock className="w-4 h-4 mr-1" />
-          À remettre
-        </span>
-      ),
-      CLAIMED: (
-        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
-          <CheckCircle className="w-4 h-4 mr-1" />
-          Remis
-        </span>
-      ),
-      REJECTED: (
-        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
-          <XCircle className="w-4 h-4 mr-1" />
-          Rejeté
-        </span>
-      ),
-    };
-    return badges[status as keyof typeof badges] || badges.PENDING;
-  };
 
   return (
     <div className="p-6 max-w-7xl mx-auto">
@@ -262,7 +236,7 @@ export default function GainsClientPage() {
                           <h3 className="text-lg font-bold text-gray-900">
                             {prize.prize.name}
                           </h3>
-                          {getStatusBadge(prize.status)}
+                          <StatusBadge type="ticket" value={prize.status} showIcon />
                         </div>
 
                         <p className="text-sm text-gray-600 mb-3">

app/employe/historique/page.tsx

@@ -2,14 +2,11 @@
 
 import { useState, useEffect } from 'react';
 import { useAuth } from '@/hooks';
-import { Card, EmptyState } from '@/components/ui';
+import { Card, EmptyState, StatusBadge } from '@/components/ui';
 import { Loading } from '@/components/ui/Loading';
 import { api } from '@/hooks/useApi';
 import toast from 'react-hot-toast';
 import {
-  CheckCircle,
-  XCircle,
-  Clock,
   Calendar,
   User,
   Gift,
@@ -55,29 +52,6 @@ export default function EmployeeHistoryPage() {
     }
   };
 
-  const getStatusBadge = (status: string) => {
-    const badges = {
-      PENDING: (
-        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
-          <Clock className="w-4 h-4 mr-1" />
-          En attente
-        </span>
-      ),
-      CLAIMED: (
-        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
-          <CheckCircle className="w-4 h-4 mr-1" />
-          Validé
-        </span>
-      ),
-      REJECTED: (
-        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
-          <XCircle className="w-4 h-4 mr-1" />
-          Rejeté
-        </span>
-      ),
-    };
-    return badges[status as keyof typeof badges] || badges.PENDING;
-  };
 
   const filteredHistory = history.filter((ticket) => {
     if (filter === 'ALL') return true;
@@ -213,7 +187,7 @@ export default function EmployeeHistoryPage() {
                       <span className="font-mono font-bold text-lg text-gray-900">
                         {ticket.code}
                       </span>
-                      {getStatusBadge(ticket.status)}
+                      <StatusBadge type="ticket" value={ticket.status} showIcon />
                     </div>
 
                     <div className="grid md:grid-cols-2 gap-4 mb-3">

app/employe/verification/page-new.tsx

@@ -1,462 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { employeeService } from "@/services/employee.service";
-import { Ticket } from "@/types";
-import toast from "react-hot-toast";
-import {
-  Search,
-  CheckCircle,
-  XCircle,
-  RefreshCw,
-  AlertCircle,
-  Users,
-  Clock,
-  BarChart3,
-} from "lucide-react";
-
-export default function EmployeeVerificationPage() {
-  const [tickets, setTickets] = useState<Ticket[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [searchCode, setSearchCode] = useState("");
-  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
-  const [showModal, setShowModal] = useState(false);
-  const [validating, setValidating] = useState(false);
-  const [rejectReason, setRejectReason] = useState("");
-  const [showRejectInput, setShowRejectInput] = useState(false);
-
-  useEffect(() => {
-    loadPendingTickets();
-  }, []);
-
-  const loadPendingTickets = async () => {
-    try {
-      setLoading(true);
-      const data = await employeeService.getPendingTickets();
-      setTickets(data);
-    } catch (error: any) {
-      console.error("Error loading tickets:", error);
-      toast.error("Erreur lors du chargement des tickets");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSearch = () => {
-    if (!searchCode.trim()) {
-      toast.error("Veuillez entrer un code de ticket");
-      return;
-    }
-
-    const ticket = tickets.find(
-      (t) => t.code.toLowerCase() === searchCode.toLowerCase()
-    );
-
-    if (ticket) {
-      setSelectedTicket(ticket);
-      setShowModal(true);
-      setSearchCode("");
-    } else {
-      toast.error("Ticket non trouvé ou déjà traité");
-    }
-  };
-
-  const handleValidate = async () => {
-    if (!selectedTicket) return;
-
-    setValidating(true);
-    try {
-      await employeeService.validateTicket(selectedTicket.id, "APPROVE");
-      toast.success("✅ Ticket validé ! Le lot peut être remis au client.");
-      setShowModal(false);
-      setSelectedTicket(null);
-      loadPendingTickets();
-    } catch (error: any) {
-      toast.error(error.message || "Erreur lors de la validation");
-    } finally {
-      setValidating(false);
-    }
-  };
-
-  const handleReject = async () => {
-    if (!selectedTicket) return;
-
-    if (!rejectReason.trim()) {
-      toast.error("Veuillez indiquer la raison du rejet");
-      return;
-    }
-
-    setValidating(true);
-    try {
-      await employeeService.validateTicket(
-        selectedTicket.id,
-        "REJECT",
-        rejectReason
-      );
-      toast.success("Ticket rejeté");
-      setShowModal(false);
-      setSelectedTicket(null);
-      setShowRejectInput(false);
-      setRejectReason("");
-      loadPendingTickets();
-    } catch (error: any) {
-      toast.error(error.message || "Erreur lors du rejet");
-    } finally {
-      setValidating(false);
-    }
-  };
-
-  const getStatusBadge = (status: string) => {
-    const badges: Record<string, React.ReactElement> = {
-      PENDING: (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
-          <Clock className="w-3 h-3 mr-1" />
-          En attente
-        </span>
-      ),
-      REJECTED: (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
-          <XCircle className="w-3 h-3 mr-1" />
-          Rejeté
-        </span>
-      ),
-      CLAIMED: (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
-          <CheckCircle className="w-3 h-3 mr-1" />
-          Réclamé
-        </span>
-      ),
-    };
-    return badges[status] || badges.PENDING;
-  };
-
-  if (loading) {
-    return (
-      <div className="p-8">
-        <div className="animate-pulse space-y-4">
-          <div className="h-8 bg-gray-200 rounded w-1/4"></div>
-          <div className="h-32 bg-gray-200 rounded"></div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-8 bg-gray-50 min-h-screen">
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900 mb-2">
-          Validation des Tickets
-        </h1>
-        <p className="text-gray-600">
-          Scannez ou recherchez un code pour valider les lots gagnés
-        </p>
-      </div>
-
-      {/* Search Section */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
-        <h2 className="text-lg font-semibold text-gray-900 mb-4">
-          Rechercher un ticket
-        </h2>
-        <div className="flex gap-4">
-          <div className="flex-1">
-            <input
-              type="text"
-              placeholder="Entrez le code du ticket (ex: ABC123)"
-              value={searchCode}
-              onChange={(e) => setSearchCode(e.target.value.toUpperCase())}
-              onKeyPress={(e) => e.key === "Enter" && handleSearch()}
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent font-mono text-lg"
-              maxLength={10}
-            />
-          </div>
-          <button
-            onClick={handleSearch}
-            className="flex items-center gap-2 px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium"
-          >
-            <Search className="w-5 h-5" />
-            Rechercher
-          </button>
-        </div>
-      </div>
-
-      {/* Statistics Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-        <StatCard
-          title="Tickets en attente"
-          value={tickets.length}
-          icon={<Clock className="w-6 h-6" />}
-          color="yellow"
-        />
-        <StatCard
-          title="Aujourd'hui"
-          value={0}
-          icon={<Users className="w-6 h-6" />}
-          color="green"
-        />
-        <StatCard
-          title="Total traités"
-          value={0}
-          icon={<BarChart3 className="w-6 h-6" />}
-          color="blue"
-        />
-      </div>
-
-      {/* Tickets Table */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200">
-        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-gray-900">
-            Tickets en attente ({tickets.length})
-          </h2>
-          <button
-            onClick={loadPendingTickets}
-            className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
-          >
-            <RefreshCw className="w-4 h-4" />
-            Actualiser
-          </button>
-        </div>
-
-        <div className="overflow-x-auto">
-          {tickets.length === 0 ? (
-            <div className="text-center py-16">
-              <div className="text-6xl mb-4">✨</div>
-              <p className="text-gray-600 mb-2 font-medium">
-                Aucun ticket en attente
-              </p>
-              <p className="text-sm text-gray-500">
-                Tous les tickets ont été traités !
-              </p>
-            </div>
-          ) : (
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Code Ticket
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Client
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Lot Gagné
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Date
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Statut
-                  </th>
-                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
-                {tickets.map((ticket) => (
-                  <tr key={ticket.id} className="hover:bg-gray-50">
-                    <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 whitespace-nowrap">
-                      <div className="text-sm">
-                        <div className="font-medium text-gray-900">
-                          {ticket.user?.firstName} {ticket.user?.lastName}
-                        </div>
-                        <div className="text-gray-500">{ticket.user?.email}</div>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm font-medium text-gray-900">
-                        {ticket.prize?.name || "N/A"}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      {ticket.playedAt
-                        ? new Date(ticket.playedAt).toLocaleDateString("fr-FR")
-                        : "N/A"}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      {getStatusBadge(ticket.status)}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        onClick={() => {
-                          setSelectedTicket(ticket);
-                          setShowModal(true);
-                        }}
-                        className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
-                      >
-                        Traiter
-                      </button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          )}
-        </div>
-      </div>
-
-      {/* Modal de validation */}
-      {showModal && selectedTicket && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg max-w-2xl w-full p-6">
-            <h2 className="text-2xl font-bold text-gray-900 mb-6">
-              Détails du Ticket
-            </h2>
-
-            <div className="space-y-6">
-              {/* Ticket Info */}
-              <div className="bg-gray-50 rounded-lg p-6">
-                <div className="grid grid-cols-2 gap-6">
-                  <div>
-                    <p className="text-sm font-medium text-gray-600 mb-1">
-                      Code du ticket
-                    </p>
-                    <p className="text-xl font-mono font-bold text-gray-900">
-                      {selectedTicket.code}
-                    </p>
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium text-gray-600 mb-1">Statut</p>
-                    {getStatusBadge(selectedTicket.status)}
-                  </div>
-                </div>
-
-                <div className="mt-4 pt-4 border-t border-gray-200">
-                  <p className="text-sm font-medium text-gray-600 mb-1">
-                    Lot gagné
-                  </p>
-                  <p className="text-lg font-semibold text-green-600">
-                    {selectedTicket.prize?.name}
-                  </p>
-                  <p className="text-sm text-gray-500 mt-1">
-                    {selectedTicket.prize?.description}
-                  </p>
-                </div>
-
-                <div className="mt-4 pt-4 border-t border-gray-200">
-                  <p className="text-sm font-medium text-gray-600 mb-1">Client</p>
-                  <p className="text-base text-gray-900">
-                    {selectedTicket.user?.firstName} {selectedTicket.user?.lastName}
-                  </p>
-                  <p className="text-sm text-gray-500">
-                    {selectedTicket.user?.email}
-                  </p>
-                  {selectedTicket.user?.phone && (
-                    <p className="text-sm text-gray-500">
-                      {selectedTicket.user?.phone}
-                    </p>
-                  )}
-                </div>
-              </div>
-
-              {/* Reject Reason Input */}
-              {showRejectInput && (
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Raison du rejet *
-                  </label>
-                  <textarea
-                    value={rejectReason}
-                    onChange={(e) => setRejectReason(e.target.value)}
-                    placeholder="Ex: Ticket endommagé, code illisible..."
-                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
-                    rows={3}
-                  />
-                </div>
-              )}
-
-              {/* Actions */}
-              <div className="flex gap-3 justify-end pt-4">
-                {!showRejectInput ? (
-                  <>
-                    <button
-                      onClick={() => {
-                        setShowModal(false);
-                        setSelectedTicket(null);
-                      }}
-                      disabled={validating}
-                      className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium"
-                    >
-                      Annuler
-                    </button>
-                    <button
-                      onClick={() => setShowRejectInput(true)}
-                      disabled={validating}
-                      className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium flex items-center gap-2"
-                    >
-                      <XCircle className="w-4 h-4" />
-                      Rejeter
-                    </button>
-                    <button
-                      onClick={handleValidate}
-                      disabled={validating}
-                      className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium flex items-center gap-2"
-                    >
-                      <CheckCircle className="w-4 h-4" />
-                      {validating ? "Validation..." : "Valider et Remettre"}
-                    </button>
-                  </>
-                ) : (
-                  <>
-                    <button
-                      onClick={() => {
-                        setShowRejectInput(false);
-                        setRejectReason("");
-                      }}
-                      disabled={validating}
-                      className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium"
-                    >
-                      Retour
-                    </button>
-                    <button
-                      onClick={handleReject}
-                      disabled={validating || !rejectReason.trim()}
-                      className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                      <XCircle className="w-4 h-4" />
-                      {validating ? "Rejet..." : "Confirmer le Rejet"}
-                    </button>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface StatCardProps {
-  title: string;
-  value: number;
-  icon: React.ReactNode;
-  color: "yellow" | "green" | "blue";
-}
-
-function StatCard({ title, value, icon, color }: StatCardProps) {
-  const colors = {
-    yellow: "bg-yellow-100 text-yellow-600",
-    green: "bg-green-100 text-green-600",
-    blue: "bg-blue-100 text-blue-600",
-  };
-
-  return (
-    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm font-medium text-gray-600">{title}</p>
-          <p className="text-3xl font-bold text-gray-900 mt-2">
-            {value.toLocaleString("fr-FR")}
-          </p>
-        </div>
-        <div className={`p-3 rounded-lg ${colors[color]}`}>{icon}</div>
-      </div>
-    </div>
-  );
-}

app/employe/verification/page.tsx

@@ -4,12 +4,12 @@ import { useState, useEffect } from "react";
 import { employeeService } from "@/services/employee.service";
 import { Ticket } from "@/types";
 import toast from "react-hot-toast";
+import { StatusBadge, StatCard } from "@/components/ui";
 import {
   Search,
   CheckCircle,
   XCircle,
   RefreshCw,
-  AlertCircle,
   Users,
   Clock,
   BarChart3,
@@ -106,29 +106,6 @@ export default function EmployeeVerificationPage() {
     }
   };
 
-  const getStatusBadge = (status: string) => {
-    const badges: Record<string, React.ReactElement> = {
-      PENDING: (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
-          <Clock className="w-3 h-3 mr-1" />
-          En attente
-        </span>
-      ),
-      REJECTED: (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
-          <XCircle className="w-3 h-3 mr-1" />
-          Rejeté
-        </span>
-      ),
-      CLAIMED: (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
-          <CheckCircle className="w-3 h-3 mr-1" />
-          Réclamé
-        </span>
-      ),
-    };
-    return badges[status] || badges.PENDING;
-  };
 
   if (loading) {
     return (
@@ -438,31 +415,3 @@ export default function EmployeeVerificationPage() {
   );
 }
 
-interface StatCardProps {
-  title: string;
-  value: number;
-  icon: React.ReactNode;
-  color: "yellow" | "green" | "blue";
-}
-
-function StatCard({ title, value, icon, color }: StatCardProps) {
-  const colors = {
-    yellow: "bg-yellow-100 text-yellow-600",
-    green: "bg-green-100 text-green-600",
-    blue: "bg-blue-100 text-blue-600",
-  };
-
-  return (
-    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm font-medium text-gray-600">{title}</p>
-          <p className="text-3xl font-bold text-gray-900 mt-2">
-            {value.toLocaleString("fr-FR")}
-          </p>
-        </div>
-        <div className={`p-3 rounded-lg ${colors[color]}`}>{icon}</div>
-      </div>
-    </div>
-  );
-}

app/historique/page.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState, useCallback } 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 { StatusBadge } from "@/components/ui/StatusBadge";
 import Button from "@/components/Button";
 import { Loading } from "@/components/ui/Loading";
 import { Ticket } from "@/types";
@@ -89,18 +89,6 @@ export default function HistoriquePage() {
     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-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0] py-8">
@@ -331,7 +319,7 @@ export default function HistoriquePage() {
                             </div>
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap">
-                            {getStatusBadge(ticket.status)}
+                            <StatusBadge type="ticket" value={ticket.status} />
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
                             {ticket.playedAt

app/mes-lots/page.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect, useCallback } from "react";
 import { useAuth } from "@/contexts/AuthContext";
 import { useGame } from "@/hooks/useGame";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
-import { Badge } from "@/components/ui/Badge";
+import { StatusBadge } from "@/components/ui/StatusBadge";
 import {
   Table,
   TableHeader,
@@ -13,7 +13,7 @@ import {
   TableCell,
 } from "@/components/ui/Table";
 import { Loading } from "@/components/ui/Loading";
-import { PRIZE_CONFIG, TICKET_STATUS_LABELS, TICKET_STATUS_COLORS } from "@/utils/constants";
+import { PRIZE_CONFIG } from "@/utils/constants";
 import { formatDateTime } from "@/utils/helpers";
 import { Ticket } from "@/types";
 import { useRouter } from "next/navigation";
@@ -80,20 +80,6 @@ export default function HistoriquePage() {
     );
   }
 
-  const getStatusBadge = (status: string) => {
-    const statusLower = status.toLowerCase();
-    const variant =
-      statusLower === "claimed"
-        ? "success"
-        : statusLower === "pending"
-        ? "warning"
-        : "danger";
-    return (
-      <Badge variant={variant}>
-        {TICKET_STATUS_LABELS[statusLower as keyof typeof TICKET_STATUS_LABELS] || status}
-      </Badge>
-    );
-  };
 
   return (
     <div className="py-8">
@@ -232,7 +218,7 @@ export default function HistoriquePage() {
                             </div>
                           )}
                         </TableCell>
-                        <TableCell>{getStatusBadge(ticket.status)}</TableCell>
+                        <TableCell><StatusBadge type="ticket" value={ticket.status} /></TableCell>
                         <TableCell className="text-gray-600">
                           {ticket.playedAt ? formatDateTime(ticket.playedAt) : ticket.createdAt ? formatDateTime(ticket.createdAt) : '-'}
                         </TableCell>

components/admin/Statistics.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { adminService } from '@/services/admin.service';
 import { AdminStatistics } from '@/types';
+import { StatCard } from '@/components/ui';
 
 export default function Statistics() {
   const [stats, setStats] = useState<AdminStatistics | null>(null);
@@ -58,27 +59,27 @@ export default function Statistics() {
           <StatCard
             title="Total"
             value={stats.users.total}
-            color="bg-blue-100 text-blue-800"
+            color="blue"
           />
           <StatCard
             title="Clients"
             value={stats.users.clients}
-            color="bg-green-100 text-green-800"
+            color="green"
           />
           <StatCard
             title="Employés"
             value={stats.users.employees}
-            color="bg-purple-100 text-purple-800"
+            color="purple"
           />
           <StatCard
             title="Admins"
             value={stats.users.admins}
-            color="bg-red-100 text-red-800"
+            color="red"
           />
           <StatCard
             title="Emails vérifiés"
             value={stats.users.verifiedEmails}
-            color="bg-yellow-100 text-yellow-800"
+            color="yellow"
           />
         </div>
       </div>
@@ -90,27 +91,27 @@ export default function Statistics() {
           <StatCard
             title="Total"
             value={stats.tickets.total}
-            color="bg-blue-100 text-blue-800"
+            color="blue"
           />
           <StatCard
             title="En attente"
             value={stats.tickets.pending}
-            color="bg-yellow-100 text-yellow-800"
+            color="yellow"
           />
           <StatCard
             title="Réclamés"
             value={stats.tickets.claimed}
-            color="bg-green-100 text-green-800"
+            color="green"
           />
           <StatCard
             title="Rejetés"
             value={stats.tickets.rejected}
-            color="bg-red-100 text-red-800"
+            color="red"
           />
           <StatCard
             title="Récupérés"
             value={stats.tickets.claimed}
-            color="bg-purple-100 text-purple-800"
+            color="purple"
           />
         </div>
       </div>
@@ -128,19 +129,3 @@ export default function Statistics() {
   );
 }
 
-interface StatCardProps {
-  title: string;
-  value: number;
-  color: string;
-}
-
-function StatCard({ title, value, color }: StatCardProps) {
-  return (
-    <div className="bg-white rounded-lg shadow p-6">
-      <p className="text-sm text-gray-600 mb-2">{title}</p>
-      <p className={`text-3xl font-bold ${color}`}>
-        {(value || 0).toLocaleString('fr-FR')}
-      </p>
-    </div>
-  );
-}

components/admin/TicketManagement.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { adminService } from '@/services/admin.service';
 import { Ticket } from '@/types';
+import { StatusBadge } from '@/components/ui';
 
 export default function TicketManagement() {
   const [tickets, setTickets] = useState<Ticket[]>([]);
@@ -74,31 +75,6 @@ export default function TicketManagement() {
     loadTickets();
   }, [loadTickets]);
 
-  const getStatusBadgeColor = (status: string) => {
-    switch (status) {
-      case 'PENDING':
-        return 'bg-yellow-100 text-yellow-800';
-      case 'REJECTED':
-        return 'bg-red-100 text-red-800';
-      case 'CLAIMED':
-        return 'bg-green-100 text-green-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
-    }
-  };
-
-  const getStatusLabel = (status: string) => {
-    switch (status) {
-      case 'PENDING':
-        return 'En attente';
-      case 'REJECTED':
-        return 'Rejeté';
-      case 'CLAIMED':
-        return 'Réclamé';
-      default:
-        return status;
-    }
-  };
 
   if (loading && tickets.length === 0) {
     return <div className="text-center py-8">Chargement des tickets...</div>;
@@ -264,7 +240,7 @@ export default function TicketManagement() {
                     </p>
                     <p className="text-gray-500 text-sm mb-4">
                       {filterStatus
-                        ? `Aucun ticket avec le statut "${getStatusLabel(filterStatus)}"`
+                        ? `Aucun ticket avec le statut "${filterStatus === 'PENDING' ? 'En attente' : filterStatus === 'CLAIMED' ? 'Réclamé' : filterStatus === 'REJECTED' ? 'Rejeté' : filterStatus}"`
                         : 'Aucun ticket n\'a été créé pour le moment'
                       }
                     </p>
@@ -295,9 +271,7 @@ export default function TicketManagement() {
 
                 {/* STATUT */}
                 <td className="px-6 py-4 whitespace-nowrap">
-                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadgeColor(ticket.status)}`}>
+                  <StatusBadge type="ticket" value={ticket.status} />
-                    {getStatusLabel(ticket.status)}
-                  </span>
                 </td>
 
                 {/* DISTRIBUÉ LE (date d'utilisation du ticket) */}
@@ -374,9 +348,7 @@ export default function TicketManagement() {
                 <div>
                   <p className="text-sm font-medium text-gray-500">Statut</p>
                   <p className="mt-1">
-                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadgeColor(selectedTicket.status)}`}>
+                    <StatusBadge type="ticket" value={selectedTicket.status} />
-                      {getStatusLabel(selectedTicket.status)}
-                    </span>
                   </p>
                 </div>
               </div>

components/ui/StatCard.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/utils/helpers';
+
+type ColorVariant = 'blue' | 'green' | 'yellow' | 'red' | 'purple' | 'orange' | 'gray';
+
+interface StatCardProps {
+  title: string;
+  value: number | string;
+  icon?: React.ReactNode;
+  color?: ColorVariant;
+  subtitle?: string;
+  className?: string;
+}
+
+const colorClasses: Record<ColorVariant, { bg: string; text: string; iconBg: string }> = {
+  blue: { bg: 'bg-blue-50', text: 'text-blue-600', iconBg: 'bg-blue-100 text-blue-600' },
+  green: { bg: 'bg-green-50', text: 'text-green-600', iconBg: 'bg-green-100 text-green-600' },
+  yellow: { bg: 'bg-yellow-50', text: 'text-yellow-600', iconBg: 'bg-yellow-100 text-yellow-600' },
+  red: { bg: 'bg-red-50', text: 'text-red-600', iconBg: 'bg-red-100 text-red-600' },
+  purple: { bg: 'bg-purple-50', text: 'text-purple-600', iconBg: 'bg-purple-100 text-purple-600' },
+  orange: { bg: 'bg-orange-50', text: 'text-orange-600', iconBg: 'bg-orange-100 text-orange-600' },
+  gray: { bg: 'bg-gray-50', text: 'text-gray-600', iconBg: 'bg-gray-100 text-gray-600' },
+};
+
+export const StatCard: React.FC<StatCardProps> = ({
+  title,
+  value,
+  icon,
+  color = 'blue',
+  subtitle,
+  className,
+}) => {
+  const colors = colorClasses[color];
+  const formattedValue = typeof value === 'number' ? value.toLocaleString('fr-FR') : value;
+
+  return (
+    <div className={cn('bg-white rounded-lg shadow-sm border border-gray-200 p-6', className)}>
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-600">{title}</p>
+          <p className={cn('text-3xl font-bold mt-2', colors.text)}>
+            {formattedValue}
+          </p>
+          {subtitle && (
+            <p className="text-xs text-gray-500 mt-1">{subtitle}</p>
+          )}
+        </div>
+        {icon && (
+          <div className={cn('p-3 rounded-lg', colors.iconBg)}>
+            {icon}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;

components/ui/StatusBadge.tsx

@@ -2,15 +2,17 @@
 
 import React from 'react';
 import { cn } from '@/utils/helpers';
+import { CheckCircle, Clock, XCircle, AlertCircle } from 'lucide-react';
 
 type RoleType = 'ADMIN' | 'EMPLOYEE' | 'CLIENT' | string;
-type TicketStatusType = 'AVAILABLE' | 'CLAIMED' | 'PENDING' | 'EXPIRED' | string;
+type TicketStatusType = 'AVAILABLE' | 'CLAIMED' | 'PENDING' | 'EXPIRED' | 'REJECTED' | string;
 type StatusType = 'active' | 'inactive' | 'verified' | 'unverified' | string;
 
 interface StatusBadgeProps {
   type: 'role' | 'ticket' | 'status' | 'custom';
   value: string;
   className?: string;
+  showIcon?: boolean;
 }
 
 const roleColors: Record<string, string> = {
@@ -24,6 +26,7 @@ const ticketColors: Record<string, string> = {
   CLAIMED: 'bg-green-100 text-green-800',
   PENDING: 'bg-yellow-100 text-yellow-800',
   EXPIRED: 'bg-red-100 text-red-800',
+  REJECTED: 'bg-red-100 text-red-800',
 };
 
 const statusColors: Record<string, string> = {
@@ -44,6 +47,7 @@ const ticketLabels: Record<string, string> = {
   CLAIMED: 'Réclamé',
   PENDING: 'En attente',
   EXPIRED: 'Expiré',
+  REJECTED: 'Rejeté',
 };
 
 const statusLabels: Record<string, string> = {
@@ -53,6 +57,14 @@ const statusLabels: Record<string, string> = {
   unverified: 'Non vérifié',
 };
 
+const ticketIcons: Record<string, React.ReactNode> = {
+  AVAILABLE: <AlertCircle className="w-3 h-3 mr-1" />,
+  CLAIMED: <CheckCircle className="w-3 h-3 mr-1" />,
+  PENDING: <Clock className="w-3 h-3 mr-1" />,
+  EXPIRED: <XCircle className="w-3 h-3 mr-1" />,
+  REJECTED: <XCircle className="w-3 h-3 mr-1" />,
+};
+
 /**
  * Reusable status badge component for roles, ticket status, and general status
  */
@@ -60,9 +72,11 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({
   type,
   value,
   className,
+  showIcon = false,
 }) => {
   let colorClass = 'bg-gray-100 text-gray-800';
   let label = value;
+  let icon: React.ReactNode = null;
 
   switch (type) {
     case 'role':
@@ -72,6 +86,9 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({
     case 'ticket':
       colorClass = ticketColors[value] || colorClass;
       label = ticketLabels[value] || value;
+      if (showIcon) {
+        icon = ticketIcons[value] || null;
+      }
       break;
     case 'status':
       colorClass = statusColors[value] || colorClass;
@@ -85,11 +102,12 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({
   return (
     <span
       className={cn(
-        'px-2 py-1 inline-flex text-xs font-semibold rounded-full',
+        'px-2 py-1 inline-flex items-center text-xs font-semibold rounded-full',
         colorClass,
         className
       )}
     >
+      {icon}
       {label}
     </span>
   );

components/ui/index.ts

@@ -7,5 +7,6 @@ export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '.
 export { LoadingState } from './LoadingState';
 export { ErrorState } from './ErrorState';
 export { StatusBadge, getRoleBadgeColor, getTicketStatusColor, getStatusColor } from './StatusBadge';
+export { StatCard } from './StatCard';
 export { EmptyState } from './EmptyState';
 export { Pagination } from './Pagination';