wkadmin/the-tip-top-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign employee panel with blanc cassé theme

Browse Source 
- Update employee layout with off-white sidebar and logo
- Add mobile responsive menu
- Simplify header with UserDropdown only
- Redesign verification page with admin-style design
- Change employee avatar to blue color
- Remove unused stats cards

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-12-03 20:44:44 +01:00
parent 8d2012bb2c
commit e7fef17831
2 changed files with 305 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
app/employe/layout.tsx
View File

@ -2,10 +2,10 @@
import { useAuth } from "@/contexts/AuthContext"; import { useAuth } from "@/contexts/AuthContext";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect } from "react"; import { useEffect, useState } from "react";
import { Loading } from "@/components/ui/Loading"; import { Loading } from "@/components/ui/Loading";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { Ticket, BarChart3 } from "lucide-react"; import { Ticket, BarChart3, Menu, X } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import Logo from "@/components/Logo"; import Logo from "@/components/Logo";
@ -19,6 +19,7 @@ export default function EmployeLayout({
const { user, isAuthenticated, isLoading, logout } = useAuth(); const { user, isAuthenticated, isLoading, logout } = useAuth();
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const [isOpen, setIsOpen] = useState(false);
useEffect(() => { useEffect(() => {
if (!isLoading && !isAuthenticated) { if (!isLoading && !isAuthenticated) {
@ -55,67 +56,104 @@ export default function EmployeLayout({
label: "Dashboard", label: "Dashboard",
href: "/employe/dashboard", href: "/employe/dashboard",
icon: <BarChart3 className="w-5 h-5" />, icon: <BarChart3 className="w-5 h-5" />,
color: "green",
}, },
{ {
label: "Validation des Tickets", label: "Validation des Tickets",
href: "/employe/verification", href: "/employe/verification",
icon: <Ticket className="w-5 h-5" />, icon: <Ticket className="w-5 h-5" />,
color: "emerald",
}, },
]; ];
const isActive = (href: string) => pathname === href; const isActive = (href: string) => pathname === href;
const getActiveStyles = (color: string) => {
const styles: Record<string, string> = {
green: "bg-gradient-to-r from-green-600 to-green-700 text-white shadow-lg shadow-green-500/30",
emerald: "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-500/30",
};
return styles[color] || styles.green;
};
return ( return (
<div className="flex min-h-screen bg-gray-50"> <div className="flex min-h-screen bg-gray-50">
{/* Sidebar */} {/* Mobile menu button */}
<aside className="w-64 bg-white shadow-lg border-r border-gray-200 flex flex-col"> <button
{/* Logo/Header */} onClick={() => setIsOpen(!isOpen)}
<div className="p-6 border-b border-gray-200"> className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-xl bg-white shadow-lg hover:bg-gray-50 border border-gray-100"
<h2 className="text-xl font-bold text-gray-900">Thé Tip Top</h2> >
<p className="text-sm text-gray-500 mt-1">Espace Employé</p> {isOpen ? (
</div> <X className="w-6 h-6 text-gray-600" />
) : (
<Menu className="w-6 h-6 text-gray-600" />
)}
</button>
{/* Navigation */} {/* Overlay for mobile */}
<nav className="flex-1 p-4 space-y-2"> {isOpen && (
{navItems.map((item) => ( <div
<Link className="lg:hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-30"
key={item.href} onClick={() => setIsOpen(false)}
href={item.href} />
className={` )}
flex items-center gap-3 px-4 py-3 rounded-lg transition-colors
${ {/* Sidebar */}
isActive(item.href) <aside
? "bg-green-600 text-white" className={`
: "text-gray-700 hover:bg-gray-100" fixed top-0 left-0 h-full bg-[#faf8f5] shadow-xl z-40 transition-transform duration-300 ease-in-out border-r border-gray-200
} ${isOpen ? "translate-x-0" : "-translate-x-full"}
`} lg:translate-x-0 lg:static
> w-72
{item.icon} `}
<span className="font-medium">{item.label}</span> >
</Link> <div className="flex flex-col h-full">
))} {/* Logo/Header */}
</nav> <div className="p-6 border-b border-gray-200">
<div className="flex items-center gap-3">
<Logo size="md" showText={false} />
<div>
<h2 className="text-xl font-bold text-[#1e3a5f]">Thé Tip Top</h2>
<p className="text-sm text-gray-500">Espace Employé</p>
</div>
</div>
</div>
{/* Navigation */}
<nav className="flex-1 p-4 space-y-2">
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 mb-3">Menu Principal</p>
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
onClick={() => setIsOpen(false)}
className={`
flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200
${
isActive(item.href)
? getActiveStyles(item.color)
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
}
`}
>
{item.icon}
<span className="font-medium">{item.label}</span>
</Link>
))}
</nav>
</div>
</aside> </aside>
{/* Main Content */} {/* Main Content */}
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
{/* Header */} {/* Header */}
<header className="bg-white shadow-sm border-b border-gray-200 px-6 py-4"> <header className="bg-[#faf8f5] shadow-sm border-b border-gray-200 px-6 py-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-end">
<div className="flex items-center gap-4">
<Logo size="md" showText={false} />
<div>
<h1 className="text-2xl font-bold text-gray-900">
Thé Tip Top - Espace Employé
</h1>
</div>
</div>
<UserDropdown <UserDropdown
user={user} user={user}
profilePath="/employe/profil" profilePath="/employe/profil"
onLogout={handleLogout} onLogout={handleLogout}
accentColor="green" accentColor="blue"
/> />
</div> </div>
</header> </header>

424
app/employe/verification/page.tsx
View File

@ -4,7 +4,6 @@ import { useState, useEffect } from "react";
import { employeeService } from "@/services/employee.service"; import { employeeService } from "@/services/employee.service";
import { Ticket } from "@/types"; import { Ticket } from "@/types";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { StatusBadge, StatCard } from "@/components/ui";
import { import {
Search, Search,
CheckCircle, CheckCircle,
@ -12,7 +11,8 @@ import {
RefreshCw, RefreshCw,
Users, Users,
Clock, Clock,
BarChart3, Ticket as TicketIcon,
Gift,
} from "lucide-react"; } from "lucide-react";
export default function EmployeeVerificationPage() { export default function EmployeeVerificationPage() {
@ -73,7 +73,7 @@ export default function EmployeeVerificationPage() {
setValidating(true); setValidating(true);
try { try {
await employeeService.validateTicket(selectedTicket.id, "APPROVE"); await employeeService.validateTicket(selectedTicket.id, "APPROVE");
toast.success("✅ Ticket validé ! Le lot peut être remis au client."); toast.success("Ticket validé ! Le lot peut être remis au client.");
setShowModal(false); setShowModal(false);
setSelectedTicket(null); setSelectedTicket(null);
loadPendingTickets(); loadPendingTickets();
@ -125,42 +125,44 @@ export default function EmployeeVerificationPage() {
} }
return ( return (
<div className="min-h-full bg-gradient-to-br from-gray-50 via-white to-gray-50 p-8"> <div className="p-6">
{/* Header */} {/* Header */}
<div className="mb-8"> <div className="mb-6">
<h1 className="text-4xl font-bold text-[#2d5a3d] mb-2"> <div className="flex items-center gap-3 mb-2">
Validation des Tickets <div className="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-xl flex items-center justify-center shadow-lg">
</h1> <TicketIcon className="w-6 h-6 text-white" />
<p className="text-gray-600 text-lg"> </div>
Scannez ou recherchez un code pour valider les lots gagnés <div>
</p> <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
Validation des Tickets
</h1>
<p className="text-gray-500">
Scannez ou recherchez un code pour valider les lots gagnés
</p>
</div>
</div>
</div> </div>
{/* Search Section */} {/* Search Section - Style blanc cassé */}
<div className="bg-gradient-to-r from-green-600 to-green-700 rounded-2xl shadow-lg p-8 mb-8"> <div className="bg-[#faf8f5] rounded-2xl p-6 mb-6 border border-gray-200">
<div className="flex items-center gap-3 mb-4"> <div className="flex flex-col md:flex-row gap-4 items-center">
<div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center"> <div className="flex-1 w-full">
<Search className="w-5 h-5 text-white" /> <div className="relative">
</div> <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
<h2 className="text-xl font-bold text-white"> <input
Rechercher un ticket type="text"
</h2> placeholder="Entrez le code du ticket (ex: TTABC123)"
</div> value={searchCode}
<div className="flex gap-4"> onChange={(e) => setSearchCode(e.target.value.toUpperCase())}
<div className="flex-1"> onKeyPress={(e) => e.key === "Enter" && handleSearch()}
<input className="w-full pl-12 pr-4 py-3 bg-white border border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent font-mono text-lg"
type="text" maxLength={12}
placeholder="Entrez le code du ticket (ex: TTABC123)" />
value={searchCode} </div>
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> </div>
<button <button
onClick={handleSearch} 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]" className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-xl hover:from-emerald-700 hover:to-teal-700 transition-all font-semibold shadow-lg hover:shadow-xl"
> >
<Search className="w-5 h-5" /> <Search className="w-5 h-5" />
Rechercher Rechercher
@ -168,15 +170,16 @@ export default function EmployeeVerificationPage() {
</div> </div>
</div> </div>
{/* Lots en attente de remise */}
<div className="bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden"> {/* Table des tickets en attente */}
<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="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-gradient-to-r from-gray-50 to-gray-100">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center"> <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
<Clock className="w-5 h-5 text-yellow-600" /> <Clock className="w-5 h-5 text-amber-600" />
</div> </div>
<div> <div>
<h2 className="text-xl font-bold text-gray-800"> <h2 className="text-lg font-bold text-gray-800">
Lots en attente de remise Lots en attente de remise
</h2> </h2>
<p className="text-sm text-gray-500">{tickets.length} ticket(s) en attente</p> <p className="text-sm text-gray-500">{tickets.length} ticket(s) en attente</p>
@ -184,9 +187,10 @@ export default function EmployeeVerificationPage() {
</div> </div>
<button <button
onClick={loadPendingTickets} 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" disabled={loading}
className="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-xl font-semibold hover:bg-gray-50 transition-colors shadow-sm border border-gray-200"
> >
<RefreshCw className="w-4 h-4" /> <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
Actualiser Actualiser
</button> </button>
</div> </div>
@ -194,10 +198,10 @@ export default function EmployeeVerificationPage() {
<div className="overflow-x-auto"> <div className="overflow-x-auto">
{tickets.length === 0 ? ( {tickets.length === 0 ? (
<div className="text-center py-16"> <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"> <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<CheckCircle className="w-10 h-10 text-green-600" /> <CheckCircle className="w-8 h-8 text-green-600" />
</div> </div>
<p className="text-gray-800 mb-2 font-semibold text-lg"> <p className="text-gray-900 font-medium text-lg mb-2">
Aucun lot en attente Aucun lot en attente
</p> </p>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
@ -206,69 +210,88 @@ export default function EmployeeVerificationPage() {
</div> </div>
) : ( ) : (
<table className="min-w-full"> <table className="min-w-full">
<thead className="bg-gray-50 border-b border-gray-100"> <thead className="bg-gradient-to-r from-gray-50 to-gray-100">
<tr> <tr>
<th className="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider"> <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Code Ticket
</th>
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Client Client
</th> </th>
<th className="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider"> <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Lot Gagné Lot Gagné
</th> </th>
<th className="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider"> <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Date Date
</th> </th>
<th className="px-6 py-4 text-right text-xs font-bold text-gray-500 uppercase tracking-wider"> <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Action Actions
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-50"> <tbody className="divide-y divide-gray-100">
{tickets.map((ticket, index) => ( {tickets.map((ticket) => (
<tr key={ticket.id} className={`hover:bg-green-50/50 transition-colors ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50/30'}`}> <tr key={ticket.id} className="hover:bg-gray-50 transition-colors">
<td className="px-6 py-5"> {/* CODE TICKET */}
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center gap-3"> <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"> <div className="w-10 h-10 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg flex items-center justify-center">
{ticket.user ? `${ticket.user.firstName?.charAt(0) || ''}${ticket.user.lastName?.charAt(0) || ''}` : 'N/A'} <TicketIcon className="w-5 h-5 text-white" />
</div>
<span className="text-sm font-mono font-semibold text-gray-900">
{ticket.code}
</span>
</div>
</td>
{/* CLIENT */}
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white text-xs font-bold">
{ticket.user ? `${ticket.user.firstName?.charAt(0) || ''}${ticket.user.lastName?.charAt(0) || ''}` : '?'}
</div> </div>
<div> <div>
<div className="text-sm font-semibold text-gray-900"> <div className="text-sm font-medium text-gray-900">
{ticket.user ? `${ticket.user.firstName} ${ticket.user.lastName}` : 'N/A'} {ticket.user ? `${ticket.user.firstName} ${ticket.user.lastName}` : 'N/A'}
</div> </div>
<div className="text-sm text-gray-500"> <div className="text-xs text-gray-500">
{ticket.user?.email || 'N/A'} {ticket.user?.email || 'N/A'}
</div> </div>
</div> </div>
</div> </div>
</td> </td>
<td className="px-6 py-5">
<div> {/* LOT GAGNÉ */}
<div className="text-sm font-semibold text-gray-900"> <td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center gap-2">
<Gift className="w-4 h-4 text-purple-500" />
<span className="text-sm font-medium text-gray-900">
{ticket.prize?.name || 'N/A'} {ticket.prize?.name || 'N/A'}
</div> </span>
<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> </div>
</td> </td>
<td className="px-6 py-5 whitespace-nowrap">
<div className="text-sm font-medium text-gray-700"> {/* DATE */}
{ticket.playedAt <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
? new Date(ticket.playedAt).toLocaleDateString('fr-FR') {ticket.playedAt
: 'N/A'} ? new Date(ticket.playedAt).toLocaleDateString('fr-FR', {
</div> year: 'numeric',
month: '2-digit',
day: '2-digit'
})
: '-'}
</td> </td>
<td className="px-6 py-5 whitespace-nowrap text-right">
{/* ACTIONS */}
<td className="px-6 py-4 whitespace-nowrap">
<button <button
onClick={() => { onClick={() => {
setSelectedTicket(ticket); setSelectedTicket(ticket);
setShowModal(true); 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" className="px-4 py-2 text-sm font-medium bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-lg hover:from-emerald-700 hover:to-teal-700 transition-colors"
> >
Traiter 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> </button>
</td> </td>
</tr> </tr>
@ -281,155 +304,161 @@ export default function EmployeeVerificationPage() {
{/* Modal de validation */} {/* Modal de validation */}
{showModal && selectedTicket && ( {showModal && selectedTicket && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg max-w-2xl w-full p-6"> <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden">
<h2 className="text-2xl font-bold text-gray-900 mb-6"> <div className="bg-gradient-to-r from-emerald-600 to-teal-600 px-6 py-4">
Détails du Ticket <div className="flex items-center justify-between">
</h2> <h2 className="text-xl font-bold text-white">Détails du Ticket</h2>
<button
onClick={() => {
setShowModal(false);
setSelectedTicket(null);
setShowRejectInput(false);
setRejectReason("");
}}
className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-colors"
>
<XCircle className="w-5 h-5" />
</button>
</div>
</div>
<div className="space-y-6"> <div className="p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-200px)]">
{/* Ticket Code */} {/* Code et Statut */}
<div className="bg-gray-50 rounded-lg p-6"> <div className="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl">
<p className="text-sm font-medium text-gray-600 mb-2"> <div className="flex items-center gap-3">
Code du ticket <div className="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl flex items-center justify-center">
</p> <TicketIcon className="w-6 h-6 text-white" />
<p className="text-xl font-mono font-bold text-gray-900"> </div>
{selectedTicket.code} <div>
</p> <p className="text-xs text-gray-500">Code ticket</p>
<p className="text-lg font-mono font-bold text-gray-900">{selectedTicket.code}</p>
</div>
</div>
<span className="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm font-medium">
En attente
</span>
</div> </div>
{/* Client Info */} {/* Client Info */}
<div className="bg-blue-50 rounded-lg p-6 border-l-4 border-blue-500"> <div className="p-4 bg-blue-50 rounded-xl border border-blue-100">
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2"> <p className="text-xs text-blue-600 font-semibold mb-2 uppercase">Client</p>
<Users className="w-5 h-5 text-blue-600" /> <div className="flex items-center gap-3">
Informations du Client <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white font-bold">
</h3> {selectedTicket.user ? `${selectedTicket.user.firstName?.charAt(0) || ''}${selectedTicket.user.lastName?.charAt(0) || ''}` : '?'}
<div className="space-y-2"> </div>
<div> <div>
<p className="text-sm font-medium text-gray-600">Nom complet</p> <p className="font-semibold text-gray-900">
<p className="text-base font-semibold text-gray-900">
{selectedTicket.user ? `${selectedTicket.user.firstName} ${selectedTicket.user.lastName}` : 'N/A'} {selectedTicket.user ? `${selectedTicket.user.firstName} ${selectedTicket.user.lastName}` : 'N/A'}
</p> </p>
<p className="text-sm text-gray-500">{selectedTicket.user?.email || 'N/A'}</p>
{selectedTicket.user?.phone && (
<p className="text-sm text-gray-500">{selectedTicket.user.phone}</p>
)}
</div> </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>
</div> </div>
{/* Prize Info */} {/* Lot gagné */}
<div className="bg-green-50 rounded-lg p-6 border-l-4 border-green-500"> <div className="p-4 bg-purple-50 rounded-xl border border-purple-100">
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2"> <p className="text-xs text-purple-600 font-semibold mb-2 uppercase">Lot à remettre</p>
<CheckCircle className="w-5 h-5 text-green-600" /> <div className="flex items-center gap-3">
Lot Gagné <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center">
</h3> <Gift className="w-5 h-5 text-white" />
<div className="space-y-2"> </div>
<div> <div>
<p className="text-xl font-bold text-green-600"> <p className="font-semibold text-gray-900">{selectedTicket.prize?.name}</p>
{selectedTicket.prize?.name || 'N/A'} <p className="text-sm text-gray-500">{selectedTicket.prize?.description}</p>
</p>
<p className="text-sm text-gray-600 mt-1">
{selectedTicket.prize?.description || 'Description non disponible'}
</p>
</div> </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>
</div> </div>
{/* Date */}
<div className="p-4 bg-gray-50 rounded-xl">
<p className="text-xs text-gray-500 font-semibold mb-1 uppercase">Date de participation</p>
<p className="text-sm font-medium text-gray-900">
{selectedTicket.playedAt
? new Date(selectedTicket.playedAt).toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'long',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
: 'N/A'}
</p>
</div>
{/* Reject Reason Input */} {/* Reject Reason Input */}
{showRejectInput && ( {showRejectInput && (
<div> <div className="p-4 bg-red-50 rounded-xl border border-red-100">
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-red-700 mb-2">
Raison du rejet * Raison du rejet *
</label> </label>
<textarea <textarea
value={rejectReason} value={rejectReason}
onChange={(e) => setRejectReason(e.target.value)} onChange={(e) => setRejectReason(e.target.value)}
placeholder="Ex: Ticket endommagé, code illisible..." 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" className="w-full px-4 py-2 border border-red-200 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
rows={3} rows={3}
/> />
</div> </div>
)} )}
</div>
{/* Actions */} {/* Actions */}
<div className="flex gap-3 justify-end pt-4"> <div className="px-6 py-4 bg-gray-50 border-t flex gap-3 justify-end">
{!showRejectInput ? ( {!showRejectInput ? (
<> <>
<button <button
onClick={() => { onClick={() => {
setShowModal(false); setShowModal(false);
setSelectedTicket(null); setSelectedTicket(null);
}} }}
disabled={validating} disabled={validating}
className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium" className="px-4 py-2.5 bg-gray-200 text-gray-700 rounded-xl font-semibold hover:bg-gray-300 transition-colors"
> >
Annuler Annuler
</button> </button>
<button <button
onClick={() => setShowRejectInput(true)} onClick={() => setShowRejectInput(true)}
disabled={validating} 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" className="px-4 py-2.5 bg-red-600 text-white rounded-xl font-semibold hover:bg-red-700 transition-colors flex items-center gap-2"
> >
<XCircle className="w-4 h-4" /> <XCircle className="w-4 h-4" />
Rejeter Rejeter
</button> </button>
<button <button
onClick={handleValidate} onClick={handleValidate}
disabled={validating} 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" className="px-4 py-2.5 bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-xl font-semibold hover:from-emerald-700 hover:to-teal-700 transition-colors flex items-center gap-2"
> >
<CheckCircle className="w-4 h-4" /> <CheckCircle className="w-4 h-4" />
{validating ? "Validation..." : "Valider et Remettre"} {validating ? "Validation..." : "Valider et Remettre"}
</button> </button>
</> </>
) : ( ) : (
<> <>
<button <button
onClick={() => { onClick={() => {
setShowRejectInput(false); setShowRejectInput(false);
setRejectReason(""); setRejectReason("");
}} }}
disabled={validating} disabled={validating}
className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium" className="px-4 py-2.5 bg-gray-200 text-gray-700 rounded-xl font-semibold hover:bg-gray-300 transition-colors"
> >
Retour Retour
</button> </button>
<button <button
onClick={handleReject} onClick={handleReject}
disabled={validating || !rejectReason.trim()} 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" className="px-4 py-2.5 bg-red-600 text-white rounded-xl font-semibold hover:bg-red-700 transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
> >
<XCircle className="w-4 h-4" /> <XCircle className="w-4 h-4" />
{validating ? "Rejet..." : "Confirmer le Rejet"} {validating ? "Rejet..." : "Confirmer le Rejet"}
</button> </button>
</> </>
)} )}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -437,4 +466,3 @@ export default function EmployeeVerificationPage() {
</div> </div>
); );
} }