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>
This commit is contained in:
parent
ac8d27ae05
commit
4d46456ada
|
|
@ -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") : "-"}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { Card, EmptyState, StatusBadge } from '@/components/ui';
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)}`}>
|
||||
{getStatusLabel(ticket.status)}
|
||||
</span>
|
||||
<StatusBadge type="ticket" value={ticket.status} />
|
||||
</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)}`}>
|
||||
{getStatusLabel(selectedTicket.status)}
|
||||
</span>
|
||||
<StatusBadge type="ticket" value={selectedTicket.status} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
60
components/ui/StatCard.tsx
Normal file
60
components/ui/StatCard.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user