662 lines
30 KiB
JavaScript
662 lines
30 KiB
JavaScript
import { useState, useEffect } from 'react'
|
||
import { getStatsApi, getUsersApi, drawWinnerApi, getWinnerApi, getEmailingContactsApi, setGameSettingsApi } from '../services/admin'
|
||
import { searchTicketApi, deliverClaimApi } from '../services/employee'
|
||
import { useHandleAuthError } from '../hooks/useHandleAuthError'
|
||
|
||
function StatCard({ label, value, sub }) {
|
||
return (
|
||
<div className="bg-white rounded-xl shadow p-4 text-center">
|
||
<p className="text-2xl sm:text-3xl font-bold text-[#006B6B]">{value ?? '—'}</p>
|
||
<p className="text-xs sm:text-sm text-gray-500 mt-1">{label}</p>
|
||
{sub && <p className="text-xs text-gray-500 mt-0.5">{sub}</p>}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Les cinq états renvoyés par l'API, chacun avec sa couleur : « programmé »
|
||
// ne doit pas être confondu avec « retraits uniquement ».
|
||
const PHASE_BADGES = {
|
||
NOT_CONFIGURED: { label: 'Non lancé', className: 'bg-amber-100 text-amber-700' },
|
||
SCHEDULED: { label: 'Programmé', className: 'bg-indigo-100 text-indigo-700' },
|
||
OPEN: { label: 'Participations ouvertes', className: 'bg-green-100 text-green-700' },
|
||
CLAIM_ONLY: { label: 'Retraits uniquement', className: 'bg-blue-100 text-blue-700' },
|
||
CLOSED: { label: 'Terminé', className: 'bg-red-100 text-red-700' },
|
||
}
|
||
|
||
const PHASE_PANELS = {
|
||
NOT_CONFIGURED: 'bg-amber-50 border border-amber-200',
|
||
SCHEDULED: 'bg-indigo-50 border border-indigo-200',
|
||
OPEN: 'bg-white',
|
||
CLAIM_ONLY: 'bg-white',
|
||
CLOSED: 'bg-red-50 border border-red-200',
|
||
}
|
||
|
||
const PHASE_TITLES = {
|
||
NOT_CONFIGURED: 'Jeu-concours non lancé',
|
||
SCHEDULED: 'Jeu-concours programmé',
|
||
OPEN: 'Jeu-concours en cours',
|
||
CLAIM_ONLY: 'Participations closes, retraits en cours',
|
||
CLOSED: 'Jeu-concours terminé',
|
||
}
|
||
|
||
function formatDate(dateStr) {
|
||
return new Date(dateStr).toLocaleDateString('fr-FR', {
|
||
day: '2-digit', month: 'long', year: 'numeric',
|
||
hour: '2-digit', minute: '2-digit',
|
||
})
|
||
}
|
||
|
||
export default function Admin() {
|
||
const handleAuthError = useHandleAuthError()
|
||
const [stats, setStats] = useState(null)
|
||
const [users, setUsers] = useState([])
|
||
const [winner, setWinner] = useState(undefined)
|
||
const [drawing, setDrawing] = useState(false)
|
||
const [drawError, setDrawError] = useState('')
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState('')
|
||
const [showConfirm, setShowConfirm] = useState(false)
|
||
|
||
// Lancement du jeu-concours
|
||
const [startDateInput, setStartDateInput] = useState('')
|
||
const [settingsSaving, setSettingsSaving] = useState(false)
|
||
const [settingsError, setSettingsError] = useState('')
|
||
const [settingsOk, setSettingsOk] = useState('')
|
||
|
||
// Remise de lot
|
||
const [ticketCode, setTicketCode] = useState('')
|
||
const [ticketResult, setTicketResult] = useState(null)
|
||
const [ticketSearching, setTicketSearching] = useState(false)
|
||
const [ticketDelivering, setTicketDelivering] = useState(false)
|
||
const [ticketSearchErr, setTicketSearchErr] = useState('')
|
||
const [ticketDeliverErr, setTicketDeliverErr] = useState('')
|
||
const [ticketSuccess, setTicketSuccess] = useState(false)
|
||
|
||
// Contacts emailing
|
||
const [emailingContacts, setEmailingContacts] = useState(null)
|
||
const [emailingLoading, setEmailingLoading] = useState(false)
|
||
const [emailingError, setEmailingError] = useState('')
|
||
|
||
useEffect(() => {
|
||
Promise.all([getStatsApi(), getUsersApi(), getWinnerApi()])
|
||
.then(([s, u, w]) => {
|
||
setStats(s)
|
||
setUsers(u.users)
|
||
setWinner(w)
|
||
})
|
||
.catch((e) => {
|
||
if (!handleAuthError(e)) setError(e.message)
|
||
})
|
||
.finally(() => setLoading(false))
|
||
}, [handleAuthError])
|
||
|
||
const handleSaveGameSettings = async (e) => {
|
||
e.preventDefault()
|
||
setSettingsError('')
|
||
setSettingsOk('')
|
||
setSettingsSaving(true)
|
||
try {
|
||
// L'input datetime-local renvoie une heure locale sans fuseau : on la
|
||
// convertit en ISO pour que le serveur reçoive un instant sans ambiguïté.
|
||
const data = await setGameSettingsApi(new Date(startDateInput).toISOString())
|
||
setStats((prev) => (prev ? { ...prev, gameWindow: data.gameWindow } : prev))
|
||
setSettingsOk(data.message)
|
||
setStartDateInput('')
|
||
} catch (err) {
|
||
if (!handleAuthError(err)) setSettingsError(err.message)
|
||
} finally {
|
||
setSettingsSaving(false)
|
||
}
|
||
}
|
||
|
||
const handleDraw = async () => {
|
||
setShowConfirm(false)
|
||
setDrawing(true)
|
||
setDrawError('')
|
||
try {
|
||
const data = await drawWinnerApi()
|
||
setWinner(data)
|
||
} catch (e) {
|
||
if (!handleAuthError(e)) setDrawError(e.message)
|
||
} finally {
|
||
setDrawing(false)
|
||
}
|
||
}
|
||
|
||
const handleLoadEmailingContacts = async () => {
|
||
setEmailingLoading(true)
|
||
setEmailingError('')
|
||
try {
|
||
const data = await getEmailingContactsApi()
|
||
setEmailingContacts(data.contacts)
|
||
} catch (e) {
|
||
if (!handleAuthError(e)) setEmailingError(e.message)
|
||
} finally {
|
||
setEmailingLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleExportEmailingCsv = () => {
|
||
if (!emailingContacts?.length) return
|
||
const header = ['Prénom', 'Nom', 'Email', 'Inscrit le']
|
||
const rows = emailingContacts.map((c) => [
|
||
c.firstname, c.lastname, c.email, new Date(c.createdAt).toLocaleDateString('fr-FR'),
|
||
])
|
||
const csv = [header, ...rows]
|
||
.map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(';'))
|
||
.join('\n')
|
||
// Le BOM en tete du fichier est indispensable : sans lui, Excel ouvre le
|
||
// CSV en ANSI et casse tous les accents. Ne pas le supprimer.
|
||
// eslint-disable-next-line no-irregular-whitespace
|
||
const blob = new Blob([`${csv}`], { type: 'text/csv;charset=utf-8;' })
|
||
const url = URL.createObjectURL(blob)
|
||
const link = document.createElement('a')
|
||
link.href = url
|
||
link.download = `contacts-emailing-${new Date().toISOString().slice(0, 10)}.csv`
|
||
link.click()
|
||
URL.revokeObjectURL(url)
|
||
}
|
||
|
||
const handleTicketSearch = async (e) => {
|
||
e.preventDefault()
|
||
setTicketResult(null)
|
||
setTicketSearchErr('')
|
||
setTicketDeliverErr('')
|
||
setTicketSuccess(false)
|
||
setTicketSearching(true)
|
||
try {
|
||
const data = await searchTicketApi(ticketCode.trim())
|
||
setTicketResult(data)
|
||
} catch (err) {
|
||
if (!handleAuthError(err)) setTicketSearchErr(err.message)
|
||
} finally {
|
||
setTicketSearching(false)
|
||
}
|
||
}
|
||
|
||
const handleTicketDeliver = async () => {
|
||
if (!ticketResult?.claim?.id) return
|
||
setTicketDeliverErr('')
|
||
setTicketDelivering(true)
|
||
try {
|
||
await deliverClaimApi(ticketResult.claim.id)
|
||
setTicketResult((prev) => ({
|
||
...prev,
|
||
claim: { ...prev.claim, status: 'DELIVERED', claimedAt: new Date().toISOString() },
|
||
}))
|
||
setTicketSuccess(true)
|
||
setStats((prev) => prev ? {
|
||
...prev,
|
||
claimsPending: Math.max(0, (prev.claimsPending ?? 1) - 1),
|
||
claimsDelivered: (prev.claimsDelivered ?? 0) + 1,
|
||
} : prev)
|
||
} catch (err) {
|
||
if (!handleAuthError(err)) setTicketDeliverErr(err.message)
|
||
} finally {
|
||
setTicketDelivering(false)
|
||
}
|
||
}
|
||
|
||
if (loading) return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||
<p className="text-gray-500">Chargement...</p>
|
||
</div>
|
||
)
|
||
|
||
if (error) return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
|
||
<p className="text-red-500 text-sm">{error}</p>
|
||
</div>
|
||
)
|
||
|
||
const winnerUser = winner?.winner?.user
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 p-4 sm:p-6">
|
||
<div className="max-w-5xl mx-auto space-y-6">
|
||
|
||
<h1 className="text-xl sm:text-2xl font-bold text-gray-800">Tableau de bord Admin</h1>
|
||
|
||
{/* Fenêtre du jeu-concours */}
|
||
{stats?.gameWindow && (
|
||
<div className={`rounded-xl shadow p-4 sm:p-6 ${PHASE_PANELS[stats.gameWindow.phase] ?? 'bg-white'}`}>
|
||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||
<div>
|
||
<p className="text-sm font-semibold text-gray-800">
|
||
{PHASE_TITLES[stats.gameWindow.phase] ?? 'Jeu-concours'}
|
||
</p>
|
||
{stats.gameWindow.configured ? (
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
Début : {formatDate(stats.gameWindow.startDate)}
|
||
<br />
|
||
Fin des participations : {formatDate(stats.gameWindow.participationDeadline)}
|
||
<br />
|
||
Fin des retraits de lots : {formatDate(stats.gameWindow.claimDeadline)}
|
||
</p>
|
||
) : (
|
||
<p className="text-xs text-gray-600 mt-1">
|
||
Choisissez une date de début pour ouvrir le jeu-concours.
|
||
</p>
|
||
)}
|
||
</div>
|
||
<span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${PHASE_BADGES[stats.gameWindow.phase]?.className ?? 'bg-gray-100 text-gray-700'}`}>
|
||
{PHASE_BADGES[stats.gameWindow.phase]?.label ?? 'État inconnu'}
|
||
</span>
|
||
</div>
|
||
|
||
<form onSubmit={handleSaveGameSettings} className="mt-4 pt-4 border-t border-gray-200 flex flex-wrap items-end gap-3">
|
||
<div className="flex-1 min-w-[220px]">
|
||
<label htmlFor="game-start" className="block text-xs font-medium text-gray-700 mb-1">
|
||
{stats.gameWindow.configured ? 'Corriger la date de début' : 'Date de début du jeu-concours'}
|
||
</label>
|
||
<input
|
||
type="datetime-local"
|
||
id="game-start"
|
||
value={startDateInput}
|
||
onChange={(e) => setStartDateInput(e.target.value)}
|
||
required
|
||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
|
||
/>
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
disabled={settingsSaving || !startDateInput}
|
||
className="bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-4 py-2 rounded-lg transition-colors text-xs sm:text-sm"
|
||
>
|
||
{settingsSaving ? 'Enregistrement…' : stats.gameWindow.configured ? 'Mettre à jour' : 'Lancer le jeu'}
|
||
</button>
|
||
</form>
|
||
|
||
<p className="text-xs text-gray-500 mt-2">
|
||
Les participations durent 30 jours, puis 30 jours supplémentaires sont laissés pour retirer les lots.
|
||
</p>
|
||
|
||
{settingsError && <p className="text-red-500 text-xs mt-2">{settingsError}</p>}
|
||
{settingsOk && <p className="text-green-600 text-xs mt-2">{settingsOk}</p>}
|
||
</div>
|
||
)}
|
||
|
||
{/* Stats principales */}
|
||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
|
||
<StatCard label="Participants" value={stats?.users} />
|
||
<StatCard label="Participations" value={stats?.participations} />
|
||
<StatCard label="Gains en attente" value={stats?.claimsPending} />
|
||
<StatCard label="Gains remis" value={stats?.claimsDelivered} />
|
||
</div>
|
||
|
||
{/* Stats tickets */}
|
||
<div className="grid grid-cols-3 gap-3 sm:gap-4">
|
||
<StatCard label="Tickets total" value={stats?.ticketsTotal} />
|
||
<StatCard label="Tickets utilisés" value={stats?.ticketsUsed} />
|
||
<StatCard label="Tickets restants" value={stats?.ticketsRemaining} />
|
||
</div>
|
||
|
||
{/* Stats démographiques */}
|
||
{stats?.genderStats && stats?.ageStats && (
|
||
<div className="grid sm:grid-cols-2 gap-3 sm:gap-4">
|
||
<div className="bg-white rounded-xl shadow p-4 sm:p-6">
|
||
<h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Genre des participants</h2>
|
||
<div className="space-y-2">
|
||
{[
|
||
{ label: 'Femmes', value: stats.genderStats.women },
|
||
{ label: 'Hommes', value: stats.genderStats.men },
|
||
{ label: 'Autre / non renseigné', value: stats.genderStats.other },
|
||
].map((row) => (
|
||
<div key={row.label} className="flex items-center justify-between text-sm">
|
||
<span className="text-gray-500">{row.label}</span>
|
||
<span className="font-semibold text-gray-800">{row.value}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl shadow p-4 sm:p-6">
|
||
<h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Âge des participants</h2>
|
||
<div className="space-y-2">
|
||
{['-18', '18-24', '25-34', '35-44', '45-54', '55-64', '65+', 'unknown'].map((bracket) => (
|
||
<div key={bracket} className="flex items-center justify-between text-sm">
|
||
<span className="text-gray-500">{bracket === 'unknown' ? 'Non renseigné' : `${bracket} ans`}</span>
|
||
<span className="font-semibold text-gray-800">{stats.ageStats[bracket] ?? 0}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Répartition par lot */}
|
||
{stats?.lotsStats?.length > 0 && (
|
||
<div className="bg-white rounded-xl shadow p-4 sm:p-6">
|
||
<h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Répartition des lots</h2>
|
||
<div className="overflow-x-auto -mx-4 sm:mx-0">
|
||
<table className="w-full text-sm min-w-[480px]">
|
||
<thead>
|
||
<tr className="text-left text-gray-500 border-b text-xs sm:text-sm">
|
||
<th className="pb-2 px-4 sm:px-0">Lot</th>
|
||
<th className="pb-2 px-4 sm:px-0 text-center">%</th>
|
||
<th className="pb-2 px-4 sm:px-0 text-center">Tickets</th>
|
||
<th className="pb-2 px-4 sm:px-0 text-center">Participations</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{stats.lotsStats.map((lot) => (
|
||
<tr key={lot.id} className="border-b last:border-0">
|
||
<td className="py-2.5 px-4 sm:px-0 font-medium text-gray-800 text-xs sm:text-sm">{lot.name}</td>
|
||
<td className="py-2.5 px-4 sm:px-0 text-center text-gray-500 text-xs sm:text-sm">{lot.percentage}%</td>
|
||
<td className="py-2.5 px-4 sm:px-0 text-center text-gray-600 text-xs sm:text-sm">{lot._count.tickets.toLocaleString('fr-FR')}</td>
|
||
<td className="py-2.5 px-4 sm:px-0 text-center text-[#006B6B] font-semibold text-xs sm:text-sm">{lot._count.participations}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Contacts emailing ── */}
|
||
<div className="bg-white rounded-xl shadow p-4 sm:p-6">
|
||
<div className="flex items-center justify-between mb-4 flex-wrap gap-2">
|
||
<h2 className="text-base sm:text-lg font-bold text-gray-800">Contacts emailing</h2>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={handleLoadEmailingContacts}
|
||
disabled={emailingLoading}
|
||
className="bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-4 py-2 rounded-lg transition-colors text-xs sm:text-sm"
|
||
>
|
||
{emailingLoading ? 'Chargement…' : emailingContacts ? 'Actualiser' : 'Charger les contacts'}
|
||
</button>
|
||
{emailingContacts?.length > 0 && (
|
||
<button
|
||
onClick={handleExportEmailingCsv}
|
||
className="border border-gray-200 text-gray-600 hover:bg-gray-50 font-semibold px-4 py-2 rounded-lg transition-colors text-xs sm:text-sm"
|
||
>
|
||
Exporter en CSV
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{emailingError && <p className="text-red-500 text-sm mb-3">{emailingError}</p>}
|
||
|
||
<p className="text-sm text-gray-500 mb-3">
|
||
Clients ayant accepté d'être contactés à des fins marketing.
|
||
{emailingContacts && <> — <span className="font-semibold text-gray-800">{emailingContacts.length}</span> contact(s)</>}
|
||
</p>
|
||
|
||
{emailingContacts && (
|
||
<div className="overflow-x-auto -mx-4 sm:mx-0">
|
||
<table className="w-full text-sm min-w-[400px]">
|
||
<thead>
|
||
<tr className="text-left text-gray-500 border-b text-xs sm:text-sm">
|
||
<th className="pb-2 px-4 sm:px-0">Nom</th>
|
||
<th className="pb-2 px-4 sm:px-0">Email</th>
|
||
<th className="pb-2 px-4 sm:px-0 text-right">Inscrit le</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{emailingContacts.length === 0 && (
|
||
<tr>
|
||
<td colSpan={3} className="py-6 text-center text-gray-500 text-sm">
|
||
Aucun contact n'a accepté l'emailing pour le moment
|
||
</td>
|
||
</tr>
|
||
)}
|
||
{emailingContacts.map((contact) => (
|
||
<tr key={contact.email} className="border-b last:border-0">
|
||
<td className="py-3 px-4 sm:px-0 font-medium text-gray-800 whitespace-nowrap text-xs sm:text-sm">
|
||
{contact.firstname} {contact.lastname}
|
||
</td>
|
||
<td className="py-3 px-4 sm:px-0 text-gray-500 text-xs">{contact.email}</td>
|
||
<td className="py-3 px-4 sm:px-0 text-right text-gray-500 text-xs">
|
||
{new Date(contact.createdAt).toLocaleDateString('fr-FR')}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* ── Remise de lot ── */}
|
||
<div className="bg-white rounded-xl shadow p-4 sm:p-6">
|
||
<h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Remise de lot</h2>
|
||
|
||
<form onSubmit={handleTicketSearch} className="flex gap-2 mb-4">
|
||
<label htmlFor="admin-ticket-code" className="sr-only">Code ticket</label>
|
||
<input
|
||
type="text"
|
||
id="admin-ticket-code"
|
||
value={ticketCode}
|
||
onChange={(e) => setTicketCode(e.target.value.toUpperCase())}
|
||
placeholder="Code ticket (10 caractères)"
|
||
maxLength={10}
|
||
className="flex-1 min-w-0 border border-gray-200 rounded-lg px-4 py-2.5 text-sm font-mono uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-[#006B6B] focus:border-[#006B6B]"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
disabled={ticketSearching || ticketCode.trim().length === 0}
|
||
className="bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-4 py-2.5 rounded-lg transition-colors text-sm whitespace-nowrap"
|
||
>
|
||
{ticketSearching ? 'Recherche…' : 'Rechercher'}
|
||
</button>
|
||
</form>
|
||
|
||
{ticketSearchErr && (
|
||
<p className="text-red-500 text-sm mb-3">{ticketSearchErr}</p>
|
||
)}
|
||
|
||
{ticketResult && (
|
||
<div className="border border-gray-100 rounded-xl overflow-hidden">
|
||
{ticketSuccess && (
|
||
<div className="bg-green-500 px-4 py-2.5 flex items-center gap-2">
|
||
<svg className="w-4 h-4 text-white flex-shrink-0" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
<p className="text-white text-sm font-medium">Lot remis avec succès.</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="px-4 py-3 flex items-start justify-between gap-3 border-b border-gray-100">
|
||
<div>
|
||
<p className="font-semibold text-gray-900 text-sm">{ticketResult.lot.name}</p>
|
||
<p className="text-gray-500 text-xs mt-0.5">{ticketResult.lot.description}</p>
|
||
{ticketResult.lot.value && <p className="text-[#006B6B] text-xs font-semibold mt-1">{ticketResult.lot.value} €</p>}
|
||
</div>
|
||
<span className={`flex-shrink-0 text-xs font-semibold px-2.5 py-1 rounded-full ${
|
||
ticketResult.claim?.status === 'DELIVERED' ? 'bg-green-100 text-green-700'
|
||
: ticketResult.claim?.status === 'CANCELLED' ? 'bg-gray-100 text-gray-500'
|
||
: 'bg-yellow-100 text-yellow-700'
|
||
}`}>
|
||
{ticketResult.claim?.status === 'DELIVERED' ? 'Remis'
|
||
: ticketResult.claim?.status === 'CANCELLED' ? 'Expiré'
|
||
: 'À remettre'}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="px-4 py-3 flex items-center gap-3 border-b border-gray-100">
|
||
<div className="w-8 h-8 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
|
||
{(ticketResult.client.firstname?.[0] ?? '?').toUpperCase()}{(ticketResult.client.lastname?.[0] ?? '?').toUpperCase()}
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-800">{ticketResult.client.firstname} {ticketResult.client.lastname}</p>
|
||
<p className="text-xs text-gray-500">{ticketResult.client.email}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-4 py-3 space-y-2">
|
||
{ticketDeliverErr && <p className="text-red-500 text-xs">{ticketDeliverErr}</p>}
|
||
|
||
{ticketResult.claim?.status === 'PENDING' && !ticketSuccess && (
|
||
<button
|
||
onClick={handleTicketDeliver}
|
||
disabled={ticketDelivering}
|
||
className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold py-2.5 rounded-lg transition-colors text-sm"
|
||
>
|
||
{ticketDelivering ? 'Confirmation…' : 'Confirmer la remise du lot'}
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => { setTicketCode(''); setTicketResult(null); setTicketSuccess(false); setTicketSearchErr(''); setTicketDeliverErr('') }}
|
||
className="w-full border border-gray-200 text-gray-500 hover:bg-gray-50 py-2 rounded-lg transition-colors text-sm"
|
||
>
|
||
Rechercher un autre code
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* ── Tirage au sort ── */}
|
||
<div className="bg-white rounded-xl shadow p-4 sm:p-6">
|
||
<h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Grand tirage au sort</h2>
|
||
|
||
{winnerUser ? (
|
||
/* Gagnant déjà tiré */
|
||
<div className="space-y-4">
|
||
<div className="flex items-center gap-4 p-4 bg-[#006B6B]/5 rounded-xl border border-[#006B6B]/20">
|
||
<div className="w-14 h-14 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-lg font-bold flex-shrink-0">
|
||
{(winnerUser.firstname?.[0] ?? '?').toUpperCase()}{(winnerUser.lastname?.[0] ?? '?').toUpperCase()}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-xs text-[#006B6B] font-semibold uppercase tracking-wider mb-0.5">Gagnant du grand tirage</p>
|
||
<p className="font-bold text-gray-900 text-base">{winnerUser.firstname} {winnerUser.lastname}</p>
|
||
<p className="text-gray-500 text-sm truncate">{winnerUser.email}</p>
|
||
</div>
|
||
<div className="flex-shrink-0">
|
||
<svg className="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
{winner?.winner?.createdAt && (
|
||
<p className="text-xs text-gray-500 text-right">
|
||
Tirage effectué le {formatDate(winner.winner.createdAt)}
|
||
</p>
|
||
)}
|
||
{/* Signalé uniquement au retour du tirage : le GET du gagnant ne
|
||
renvoie pas emailSent, et l'absence de la clé ne vaut pas échec. */}
|
||
{winner?.emailSent === false && (
|
||
<p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
|
||
L'email de notification n'a pas pu être envoyé au gagnant. Merci de le contacter directement à l'adresse ci-dessus.
|
||
</p>
|
||
)}
|
||
</div>
|
||
) : (
|
||
/* Pas encore de tirage */
|
||
<div className="space-y-3">
|
||
<div className="p-4 bg-gray-50 rounded-xl border border-gray-200">
|
||
<p className="text-sm text-gray-600 mb-1">
|
||
<span className="font-semibold text-gray-800">{stats?.participations ?? 0}</span> participations enregistrées
|
||
</p>
|
||
<p className="text-sm text-gray-600">
|
||
<span className="font-semibold text-gray-800">{stats?.users ?? 0}</span> participants éligibles
|
||
</p>
|
||
</div>
|
||
|
||
{drawError && (
|
||
<p className="text-red-500 text-sm px-1">{drawError}</p>
|
||
)}
|
||
|
||
<button
|
||
onClick={() => setShowConfirm(true)}
|
||
disabled={drawing || (stats?.users ?? 0) === 0}
|
||
className="flex items-center gap-2 bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-5 py-3 rounded-xl transition-colors text-sm"
|
||
>
|
||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
|
||
</svg>
|
||
{drawing ? 'Tirage en cours…' : 'Lancer le tirage au sort'}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Liste participants */}
|
||
<div className="bg-white rounded-xl shadow p-4 sm:p-6">
|
||
<h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">
|
||
Participants <span className="text-gray-500 font-normal text-sm">({users.length})</span>
|
||
</h2>
|
||
<div className="overflow-x-auto -mx-4 sm:mx-0">
|
||
<table className="w-full text-sm min-w-[400px]">
|
||
<thead>
|
||
<tr className="text-left text-gray-500 border-b text-xs sm:text-sm">
|
||
<th className="pb-2 px-4 sm:px-0">Nom</th>
|
||
<th className="pb-2 px-4 sm:px-0">Email</th>
|
||
<th className="pb-2 px-4 sm:px-0 text-right">Participations</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{users.length === 0 && (
|
||
<tr>
|
||
<td colSpan={3} className="py-6 text-center text-gray-500 text-sm">
|
||
Aucun participant pour le moment
|
||
</td>
|
||
</tr>
|
||
)}
|
||
{users.map((user) => (
|
||
<tr key={user.id} className="border-b last:border-0">
|
||
<td className="py-3 px-4 sm:px-0 font-medium text-gray-800 whitespace-nowrap text-xs sm:text-sm">
|
||
{user.firstname} {user.lastname}
|
||
</td>
|
||
<td className="py-3 px-4 sm:px-0 text-gray-500 text-xs">{user.email}</td>
|
||
<td className="py-3 px-4 sm:px-0 text-right text-[#006B6B] font-semibold text-xs sm:text-sm">
|
||
{user._count.participations}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* ── Modal de confirmation du tirage ── */}
|
||
{showConfirm && (
|
||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 px-4">
|
||
<div className="bg-white rounded-2xl w-full max-w-sm shadow-xl p-6">
|
||
|
||
<div className="flex justify-center mb-4">
|
||
<div className="w-14 h-14 rounded-full bg-yellow-100 flex items-center justify-center">
|
||
<svg className="w-7 h-7 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-lg font-bold text-gray-900 text-center mb-1">Lancer le tirage au sort ?</h3>
|
||
<p className="text-sm text-gray-500 text-center mb-4">
|
||
Un gagnant sera sélectionné aléatoirement parmi les <strong>{stats?.users}</strong> participants.
|
||
</p>
|
||
|
||
<div className="bg-red-50 border border-red-200 rounded-xl px-4 py-3 mb-5 flex gap-2 items-start">
|
||
<svg className="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||
</svg>
|
||
<p className="text-xs text-red-600">Cette action est <strong>irréversible</strong>. Le tirage ne peut être effectué qu'une seule fois.</p>
|
||
</div>
|
||
|
||
<div className="flex gap-3">
|
||
<button
|
||
onClick={() => setShowConfirm(false)}
|
||
className="flex-1 border border-gray-200 text-gray-600 hover:bg-gray-50 font-medium py-2.5 rounded-xl transition-colors text-sm"
|
||
>
|
||
Annuler
|
||
</button>
|
||
<button
|
||
onClick={handleDraw}
|
||
className="flex-1 bg-[#006B6B] hover:bg-[#005959] text-white font-semibold py-2.5 rounded-xl transition-colors text-sm"
|
||
>
|
||
Confirmer le tirage
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
)
|
||
}
|