mise a jour

frontend/src/pages/Employe.jsx

@@ -1,74 +1,211 @@
 import { useState } from 'react'
+import { searchTicketApi, deliverClaimApi } from '../services/employee'
+import { useHandleAuthError } from '../hooks/useHandleAuthError'
+
+function formatDate(dateStr) {
+  return new Date(dateStr).toLocaleDateString('fr-FR', {
+    day: '2-digit',
+    month: 'long',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+const STATUS_CONFIG = {
+  PENDING:   { label: 'À remettre',  classes: 'bg-yellow-100 text-yellow-800' },
+  DELIVERED: { label: 'Déjà remis',  classes: 'bg-green-100 text-green-800'  },
+  CANCELLED: { label: 'Expiré',      classes: 'bg-gray-100 text-gray-500'    },
+}
 
 export default function Employe() {
-  const [code, setCode] = useState('')
-  const [gain, setGain] = useState(null)
+  const handleAuthError = useHandleAuthError()
+  const [code, setCode]         = useState('')
+  const [result, setResult]     = useState(null)
+  const [searching, setSearching] = useState(false)
+  const [delivering, setDelivering] = useState(false)
+  const [searchError, setSearchError] = useState('')
+  const [deliverError, setDeliverError] = useState('')
+  const [success, setSuccess]   = useState(false)
 
-  const handleSearch = (e) => {
+  const handleSearch = async (e) => {
     e.preventDefault()
-    // TODO: connecter au backend
-    setGain({
-      code,
-      lot: 'Thé signature (100g)',
-      client: 'Jean Dupont',
-      email: 'jean.dupont@email.com',
-      status: 'PENDING',
-    })
+    setResult(null)
+    setSuccess(false)
+    setDeliverError('')
+    setSearchError('')
+    setSearching(true)
+    try {
+      const data = await searchTicketApi(code.trim())
+      setResult(data)
+    } catch (err) {
+      if (!handleAuthError(err)) setSearchError(err.message)
+    } finally {
+      setSearching(false)
+    }
   }
 
-  const handleDeliver = () => {
-    // TODO: connecter au backend
-    setGain({ ...gain, status: 'DELIVERED' })
+  const handleDeliver = async () => {
+    if (!result?.claim?.id) return
+    setDeliverError('')
+    setDelivering(true)
+    try {
+      await deliverClaimApi(result.claim.id)
+      setResult((prev) => ({
+        ...prev,
+        claim: { ...prev.claim, status: 'DELIVERED', claimedAt: new Date().toISOString() },
+      }))
+      setSuccess(true)
+    } catch (err) {
+      if (!handleAuthError(err)) setDeliverError(err.message)
+    } finally {
+      setDelivering(false)
+    }
   }
 
+  const handleReset = () => {
+    setCode('')
+    setResult(null)
+    setSuccess(false)
+    setSearchError('')
+    setDeliverError('')
+  }
+
+  const statusCfg = result ? (STATUS_CONFIG[result.claim?.status] ?? STATUS_CONFIG.PENDING) : null
+
   return (
-    <div className="min-h-screen bg-gray-50 p-4 sm:p-6">
+    <div className="min-h-screen bg-gray-50 px-4 py-8 sm:py-12">
       <div className="max-w-lg mx-auto">
-        <h1 className="text-xl sm:text-2xl font-bold text-gray-800 mb-1">Espace Employé</h1>
-        <p className="text-gray-500 mb-5 sm:mb-6 text-sm sm:text-base">Vérifier et remettre un lot</p>
 
-        <form onSubmit={handleSearch} className="flex flex-col sm:flex-row gap-2 mb-5 sm:mb-6">
+        {/* En-tête */}
+        <div className="mb-8">
+          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Espace Employé</h1>
+          <p className="text-gray-500 mt-1 text-sm">Recherchez un code ticket pour remettre le lot au client.</p>
+        </div>
+
+        {/* Formulaire de recherche */}
+        <form onSubmit={handleSearch} className="flex gap-2 mb-6">
           <input
             type="text"
             value={code}
-            onChange={(e) => setCode(e.target.value)}
+            onChange={(e) => setCode(e.target.value.toUpperCase())}
             required
-            placeholder="Code ticket (TTT-XXXXX)"
-            className="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500 font-mono text-sm"
+            placeholder="Code ticket (10 caractères)"
+            maxLength={10}
+            className="flex-1 border border-gray-300 rounded-lg px-4 py-3 text-sm font-mono uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-[#006B6B] focus:border-[#006B6B]"
           />
           <button
             type="submit"
-            className="bg-green-700 hover:bg-green-800 text-white font-semibold px-5 py-2.5 rounded-lg transition-colors text-sm sm:text-base whitespace-nowrap"
+            disabled={searching || code.trim().length === 0}
+            className="bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-5 py-3 rounded-lg transition-colors text-sm whitespace-nowrap"
           >
-            Rechercher
+            {searching ? 'Recherche…' : 'Rechercher'}
           </button>
         </form>
 
-        {gain && (
-          <div className="bg-white rounded-xl shadow p-4 sm:p-6 space-y-3">
-            <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2">
-              <div>
-                <p className="font-bold text-gray-800 text-base sm:text-lg">{gain.lot}</p>
-                <p className="text-xs sm:text-sm text-gray-500 font-mono">{gain.code}</p>
-              </div>
-              <span className={`self-start text-xs font-semibold px-3 py-1 rounded-full ${gain.status === 'DELIVERED' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
-                {gain.status === 'DELIVERED' ? 'Remis' : 'À remettre'}
-              </span>
-            </div>
-            <div className="border-t pt-3 space-y-1">
-              <p className="text-sm text-gray-600"><span className="font-medium">Client :</span> {gain.client}</p>
-              <p className="text-sm text-gray-600"><span className="font-medium">Email :</span> {gain.email}</p>
-            </div>
-            {gain.status === 'PENDING' && (
-              <button
-                onClick={handleDeliver}
-                className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-2.5 rounded-lg transition-colors mt-2 text-sm sm:text-base"
-              >
-                Confirmer la remise du lot
-              </button>
-            )}
+        {/* Erreur de recherche */}
+        {searchError && (
+          <div className="mb-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
+            {searchError}
           </div>
         )}
+
+        {/* Résultat */}
+        {result && (
+          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+
+            {/* Bandeau succès remise */}
+            {success && (
+              <div className="bg-green-500 px-5 py-3 flex items-center gap-3">
+                <svg className="w-5 h-5 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-semibold">Lot remis avec succès — espace client mis à jour.</p>
+              </div>
+            )}
+
+            {/* En-tête carte : lot + statut */}
+            <div className="px-5 py-4 flex items-start justify-between gap-3 border-b border-gray-100">
+              <div>
+                <p className="font-bold text-gray-900 text-base">{result.lot.name}</p>
+                <p className="text-gray-500 text-xs mt-0.5">{result.lot.description}</p>
+                {result.lot.value && (
+                  <p className="text-[#006B6B] text-xs font-semibold mt-1">Valeur : {result.lot.value} €</p>
+                )}
+              </div>
+              <span className={`flex-shrink-0 text-xs font-semibold px-3 py-1 rounded-full ${statusCfg.classes}`}>
+                {statusCfg.label}
+              </span>
+            </div>
+
+            {/* Infos client */}
+            <div className="px-5 py-4 space-y-2 border-b border-gray-100">
+              <p className="text-xs text-gray-400 font-medium uppercase tracking-wider mb-2">Client</p>
+              <div className="flex items-center gap-3">
+                <div className="w-9 h-9 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
+                  {(result.client.firstname?.[0] ?? '?').toUpperCase()}{(result.client.lastname?.[0] ?? '?').toUpperCase()}
+                </div>
+                <div>
+                  <p className="text-sm font-semibold text-gray-800">
+                    {result.client.firstname} {result.client.lastname}
+                  </p>
+                  <p className="text-xs text-gray-500">{result.client.email}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Infos ticket */}
+            <div className="px-5 py-4 space-y-1 border-b border-gray-100">
+              <p className="text-xs text-gray-400 font-medium uppercase tracking-wider mb-2">Ticket</p>
+              <p className="text-sm text-gray-700">
+                <span className="font-medium">Code :</span>{' '}
+                <span className="font-mono">{result.ticket.code}</span>
+              </p>
+              <p className="text-sm text-gray-700">
+                <span className="font-medium">Utilisé le :</span> {formatDate(result.ticket.usedAt)}
+              </p>
+              {result.claim.claimedAt && (
+                <p className="text-sm text-gray-700">
+                  <span className="font-medium">Remis le :</span> {formatDate(result.claim.claimedAt)}
+                </p>
+              )}
+            </div>
+
+            {/* Actions */}
+            <div className="px-5 py-4 space-y-3">
+              {deliverError && (
+                <div className="px-4 py-2 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
+                  {deliverError}
+                </div>
+              )}
+
+              {result.claim.status === 'PENDING' && !success && (
+                <button
+                  onClick={handleDeliver}
+                  disabled={delivering}
+                  className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold py-3 rounded-xl transition-colors text-sm"
+                >
+                  {delivering ? 'Confirmation en cours…' : 'Confirmer la remise du lot'}
+                </button>
+              )}
+
+              {result.claim.status === 'CANCELLED' && (
+                <div className="px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 text-gray-500 text-sm text-center">
+                  Ce gain est expiré et ne peut plus être remis.
+                </div>
+              )}
+
+              <button
+                onClick={handleReset}
+                className="w-full border border-gray-200 text-gray-600 hover:bg-gray-50 font-medium py-2.5 rounded-xl transition-colors text-sm"
+              >
+                Rechercher un autre code
+              </button>
+            </div>
+
+          </div>
+        )}
+
       </div>
     </div>
   )