soufiane
c578b81645
- Reorder sidebar: Dashboard first, then Validation des Tickets - Add gradient backgrounds and modern card designs - Replace emojis with SVG icons in statistics cards - Add avatars with initials for client display - Improve action cards with colored gradients (green, purple, slate) - Style search sections with gradient backgrounds - Add hover effects and transitions - Remove value display from prize details (already in name) - Improve filter buttons with gradient when active - Add zebra striping and better table styling 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
441 lines
17 KiB
TypeScript
441 lines
17 KiB
TypeScript
"use client";
|
|
|
|
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,
|
|
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();
|
|
// Trier par date décroissante (plus récent en premier)
|
|
const sortedData = data.sort((a: Ticket, b: Ticket) => {
|
|
const dateA = a.playedAt ? new Date(a.playedAt).getTime() : 0;
|
|
const dateB = b.playedAt ? new Date(b.playedAt).getTime() : 0;
|
|
return dateB - dateA;
|
|
});
|
|
setTickets(sortedData);
|
|
} 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);
|
|
}
|
|
};
|
|
|
|
|
|
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="min-h-full bg-gradient-to-br from-gray-50 via-white to-gray-50 p-8">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl font-bold text-[#2d5a3d] mb-2">
|
|
Validation des Tickets
|
|
</h1>
|
|
<p className="text-gray-600 text-lg">
|
|
Scannez ou recherchez un code pour valider les lots gagnés
|
|
</p>
|
|
</div>
|
|
|
|
{/* Search Section */}
|
|
<div className="bg-gradient-to-r from-green-600 to-green-700 rounded-2xl shadow-lg p-8 mb-8">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
|
|
<Search className="w-5 h-5 text-white" />
|
|
</div>
|
|
<h2 className="text-xl font-bold text-white">
|
|
Rechercher un ticket
|
|
</h2>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<div className="flex-1">
|
|
<input
|
|
type="text"
|
|
placeholder="Entrez le code du ticket (ex: TTABC123)"
|
|
value={searchCode}
|
|
onChange={(e) => setSearchCode(e.target.value.toUpperCase())}
|
|
onKeyPress={(e) => e.key === "Enter" && handleSearch()}
|
|
className="w-full px-5 py-4 border-2 border-white/20 bg-white/10 text-white placeholder-white/60 rounded-xl focus:ring-2 focus:ring-white focus:border-transparent font-mono text-lg backdrop-blur-sm"
|
|
maxLength={12}
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={handleSearch}
|
|
className="flex items-center gap-2 px-8 py-4 bg-white text-green-700 rounded-xl hover:bg-green-50 transition-all font-bold shadow-lg hover:shadow-xl hover:scale-[1.02]"
|
|
>
|
|
<Search className="w-5 h-5" />
|
|
Rechercher
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lots en attente de remise */}
|
|
<div className="bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden">
|
|
<div className="px-6 py-5 border-b border-gray-100 flex items-center justify-between bg-gradient-to-r from-gray-50 to-white">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
|
|
<Clock className="w-5 h-5 text-yellow-600" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-bold text-gray-800">
|
|
Lots en attente de remise
|
|
</h2>
|
|
<p className="text-sm text-gray-500">{tickets.length} ticket(s) en attente</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={loadPendingTickets}
|
|
className="flex items-center gap-2 px-4 py-2 text-green-700 bg-green-50 hover:bg-green-100 rounded-lg transition-colors font-medium"
|
|
>
|
|
<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="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<CheckCircle className="w-10 h-10 text-green-600" />
|
|
</div>
|
|
<p className="text-gray-800 mb-2 font-semibold text-lg">
|
|
Aucun lot en attente
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
Tous les lots ont été remis !
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<table className="min-w-full">
|
|
<thead className="bg-gray-50 border-b border-gray-100">
|
|
<tr>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
|
|
Client
|
|
</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
|
|
Lot Gagné
|
|
</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
|
|
Date
|
|
</th>
|
|
<th className="px-6 py-4 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">
|
|
Action
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-50">
|
|
{tickets.map((ticket, index) => (
|
|
<tr key={ticket.id} className={`hover:bg-green-50/50 transition-colors ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50/30'}`}>
|
|
<td className="px-6 py-5">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
|
|
{ticket.user ? `${ticket.user.firstName?.charAt(0) || ''}${ticket.user.lastName?.charAt(0) || ''}` : 'N/A'}
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-semibold text-gray-900">
|
|
{ticket.user ? `${ticket.user.firstName} ${ticket.user.lastName}` : 'N/A'}
|
|
</div>
|
|
<div className="text-sm text-gray-500">
|
|
{ticket.user?.email || 'N/A'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-5">
|
|
<div>
|
|
<div className="text-sm font-semibold text-gray-900">
|
|
{ticket.prize?.name || 'N/A'}
|
|
</div>
|
|
<div className="text-xs text-gray-500 font-mono bg-gray-100 inline-block px-2 py-1 rounded mt-1">
|
|
{ticket.code}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-5 whitespace-nowrap">
|
|
<div className="text-sm font-medium text-gray-700">
|
|
{ticket.playedAt
|
|
? new Date(ticket.playedAt).toLocaleDateString('fr-FR')
|
|
: 'N/A'}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-5 whitespace-nowrap text-right">
|
|
<button
|
|
onClick={() => {
|
|
setSelectedTicket(ticket);
|
|
setShowModal(true);
|
|
}}
|
|
className="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-green-600 to-green-700 text-white text-sm font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition-all shadow-sm hover:shadow-md"
|
|
>
|
|
Traiter
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</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 Code */}
|
|
<div className="bg-gray-50 rounded-lg p-6">
|
|
<p className="text-sm font-medium text-gray-600 mb-2">
|
|
Code du ticket
|
|
</p>
|
|
<p className="text-xl font-mono font-bold text-gray-900">
|
|
{selectedTicket.code}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Client Info */}
|
|
<div className="bg-blue-50 rounded-lg p-6 border-l-4 border-blue-500">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
|
<Users className="w-5 h-5 text-blue-600" />
|
|
Informations du Client
|
|
</h3>
|
|
<div className="space-y-2">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Nom complet</p>
|
|
<p className="text-base font-semibold text-gray-900">
|
|
{selectedTicket.user ? `${selectedTicket.user.firstName} ${selectedTicket.user.lastName}` : 'N/A'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Email</p>
|
|
<p className="text-sm text-gray-900">
|
|
{selectedTicket.user?.email || 'N/A'}
|
|
</p>
|
|
</div>
|
|
{selectedTicket.user?.phone && (
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Téléphone</p>
|
|
<p className="text-sm text-gray-900">
|
|
{selectedTicket.user.phone}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Prize Info */}
|
|
<div className="bg-green-50 rounded-lg p-6 border-l-4 border-green-500">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
|
<CheckCircle className="w-5 h-5 text-green-600" />
|
|
Lot Gagné
|
|
</h3>
|
|
<div className="space-y-2">
|
|
<div>
|
|
<p className="text-xl font-bold text-green-600">
|
|
{selectedTicket.prize?.name || 'N/A'}
|
|
</p>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
{selectedTicket.prize?.description || 'Description non disponible'}
|
|
</p>
|
|
</div>
|
|
{selectedTicket.playedAt && (
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Date de gain</p>
|
|
<p className="text-sm text-gray-900">
|
|
{new Date(selectedTicket.playedAt).toLocaleDateString('fr-FR', {
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</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>
|
|
);
|
|
}
|
|
|