From 055db1652984b6b1b3710f9cf1a33de9e30d48f2 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane.baali99@gmail.com>
Date: Wed, 3 Dec 2025 16:41:28 +0100
Subject: [PATCH] feat: improve design of Lots, Marketing & Tirages pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PrizeManagement (Lots & Prix):
- Add stats cards (Total, Stock, Distribués, Taux)
- Modern card design with gradient headers per prize type
- Stock progress bars and better layout

Marketing Data:
- Improved stat cards with gradient backgrounds
- Modern chart containers with icon badges
- Enhanced export section with gradient header

Tirages:
- Improved existing draw alert with grid layout
- Modern participants table with avatars
- Enhanced draw result display with cards

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/admin/marketing-data/page.tsx    | 137 ++++----
 app/admin/tirages/page.tsx           | 479 +++++++++++++++------------
 components/admin/PrizeManagement.tsx | 230 +++++++++----
 3 files changed, 510 insertions(+), 336 deletions(-)

diff --git a/app/admin/marketing-data/page.tsx b/app/admin/marketing-data/page.tsx
index d6ebab6..9f7db60 100644
--- a/app/admin/marketing-data/page.tsx
+++ b/app/admin/marketing-data/page.tsx
@@ -238,60 +238,68 @@ export default function MarketingPage() {
 
       {/* Statistiques globales */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
-        <Card className="p-6">
+        <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6 border border-blue-200">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-gray-600">Total Clients</p>
-              <p className="text-3xl font-bold text-gray-900 mt-1">
+              <p className="text-sm text-blue-600 font-medium">Total Clients</p>
+              <p className="text-3xl font-bold text-blue-700 mt-1">
                 {stats.totalClients.toLocaleString()}
               </p>
             </div>
-            <Users className="w-12 h-12 text-blue-500" />
+            <div className="w-14 h-14 bg-blue-200 rounded-xl flex items-center justify-center">
+              <Users className="w-7 h-7 text-blue-600" />
+            </div>
           </div>
-        </Card>
+        </div>
 
-        <Card className="p-6">
+        <div className="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 border border-green-200">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-gray-600">Participants Actifs</p>
-              <p className="text-3xl font-bold text-green-600 mt-1">
+              <p className="text-sm text-green-600 font-medium">Participants Actifs</p>
+              <p className="text-3xl font-bold text-green-700 mt-1">
                 {stats.activeParticipants.toLocaleString()}
               </p>
-              <p className="text-xs text-gray-500 mt-1">
+              <p className="text-xs text-green-600 mt-1">
                 {((stats.activeParticipants / stats.totalClients) * 100).toFixed(1)}% du total
               </p>
             </div>
-            <UserCheck className="w-12 h-12 text-green-500" />
+            <div className="w-14 h-14 bg-green-200 rounded-xl flex items-center justify-center">
+              <UserCheck className="w-7 h-7 text-green-600" />
+            </div>
           </div>
-        </Card>
+        </div>
 
-        <Card className="p-6">
+        <div className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl p-6 border border-purple-200">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-gray-600">Gagnants</p>
-              <p className="text-3xl font-bold text-purple-600 mt-1">
+              <p className="text-sm text-purple-600 font-medium">Gagnants</p>
+              <p className="text-3xl font-bold text-purple-700 mt-1">
                 {stats.winners.toLocaleString()}
               </p>
-              <p className="text-xs text-gray-500 mt-1">
-                {((stats.winners / stats.activeParticipants) * 100).toFixed(1)}% de conversion
+              <p className="text-xs text-purple-600 mt-1">
+                {stats.activeParticipants > 0 ? ((stats.winners / stats.activeParticipants) * 100).toFixed(1) : 0}% de conversion
               </p>
             </div>
-            <Gift className="w-12 h-12 text-purple-500" />
+            <div className="w-14 h-14 bg-purple-200 rounded-xl flex items-center justify-center">
+              <Gift className="w-7 h-7 text-purple-600" />
+            </div>
           </div>
-        </Card>
+        </div>
 
-        <Card className="p-6">
+        <div className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl p-6 border border-orange-200">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-gray-600">Inactifs</p>
-              <p className="text-3xl font-bold text-orange-600 mt-1">
+              <p className="text-sm text-orange-600 font-medium">Inactifs</p>
+              <p className="text-3xl font-bold text-orange-700 mt-1">
                 {stats.inactiveParticipants.toLocaleString()}
               </p>
-              <p className="text-xs text-gray-500 mt-1">À réactiver</p>
+              <p className="text-xs text-orange-600 mt-1">À réactiver</p>
+            </div>
+            <div className="w-14 h-14 bg-orange-200 rounded-xl flex items-center justify-center">
+              <TrendingUp className="w-7 h-7 text-orange-600" />
             </div>
-            <TrendingUp className="w-12 h-12 text-orange-500" />
           </div>
-        </Card>
+        </div>
       </div>
 
       {/* Graphiques - Affichés uniquement s'il y a des données valides */}
@@ -300,9 +308,11 @@ export default function MarketingPage() {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
             {/* Répartition par genre */}
             {filteredGenderData.length > 0 && (
-              <Card className="p-6">
+              <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                 <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
-                  <BarChart3 className="w-6 h-6 text-blue-600" />
+                  <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
+                    <BarChart3 className="w-5 h-5 text-blue-600" />
+                  </div>
                   Répartition par Genre
                 </h2>
                 <ResponsiveContainer width="100%" height={300}>
@@ -324,14 +334,16 @@ export default function MarketingPage() {
                     <Legend />
                   </PieChart>
                 </ResponsiveContainer>
-              </Card>
+              </div>
             )}
 
             {/* Répartition par âge */}
             {filteredAgeData.length > 0 && (
-              <Card className="p-6">
+              <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                 <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
-                  <BarChart3 className="w-6 h-6 text-green-600" />
+                  <div className="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
+                    <BarChart3 className="w-5 h-5 text-green-600" />
+                  </div>
                   Répartition par Âge
                 </h2>
                 <ResponsiveContainer width="100%" height={300}>
@@ -341,54 +353,60 @@ export default function MarketingPage() {
                     <YAxis />
                     <Tooltip />
                     <Legend />
-                    <Bar dataKey="count" fill="#10b981" name="Participants" />
+                    <Bar dataKey="count" fill="#10b981" name="Participants" radius={[4, 4, 0, 0]} />
                   </BarChart>
                 </ResponsiveContainer>
-              </Card>
+              </div>
             )}
           </div>
 
           {/* Top villes */}
           {filteredCityData.length > 0 && (
-            <Card className="p-6 mb-6">
+            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
               <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
-                <MapPin className="w-6 h-6 text-purple-600" />
+                <div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
+                  <MapPin className="w-5 h-5 text-purple-600" />
+                </div>
                 Top Villes ({filteredCityData.length})
               </h2>
               <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                 {filteredCityData.slice(0, 10).map((city, index) => (
                   <div
                     key={index}
-                    className="bg-gradient-to-br from-purple-50 to-blue-50 p-4 rounded-lg border border-purple-200"
+                    className="bg-gradient-to-br from-purple-50 to-indigo-50 p-4 rounded-xl border border-purple-100 hover:shadow-md transition-shadow"
                   >
-                    <p className="text-sm text-gray-600">#{index + 1}</p>
+                    <span className="inline-block px-2 py-0.5 bg-purple-200 text-purple-700 text-xs font-bold rounded-full mb-2">#{index + 1}</span>
                     <p className="font-bold text-gray-900 truncate">{city.city}</p>
                     <p className="text-2xl font-bold text-purple-600">{city.count}</p>
                   </div>
                 ))}
               </div>
-            </Card>
+            </div>
           )}
         </>
       )}
 
       {/* Section Export */}
-      <Card className="p-6">
-        <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
-          <Download className="w-6 h-6 text-blue-600" />
-          Exporter les Données pour Emailing
-        </h2>
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+        <div className="bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-4">
+          <h2 className="text-xl font-bold text-white flex items-center gap-3">
+            <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
+              <Download className="w-5 h-5 text-white" />
+            </div>
+            Exporter les Données pour Emailing
+          </h2>
+        </div>
 
-        <div className="space-y-4">
+        <div className="p-6 space-y-5">
           {/* Sélection du segment */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
               Segment à exporter
             </label>
             <select
               value={selectedSegment}
               onChange={(e) => setSelectedSegment(e.target.value)}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             >
               <option value="all">Tous les clients ({stats.totalClients})</option>
               <option value="active">
@@ -407,11 +425,11 @@ export default function MarketingPage() {
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {filteredCityData.length > 0 && (
                 <div>
-                  <label className="block text-sm text-gray-700 mb-1">Ville</label>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Ville</label>
                   <select
                     value={filters.city}
                     onChange={(e) => setFilters({ ...filters, city: e.target.value })}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+                    className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                   >
                     <option value="">Toutes les villes</option>
                     {filteredCityData.slice(0, 10).map((city) => (
@@ -425,11 +443,11 @@ export default function MarketingPage() {
 
               {filteredGenderData.length > 0 && (
                 <div>
-                  <label className="block text-sm text-gray-700 mb-1">Genre</label>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Genre</label>
                   <select
                     value={filters.gender}
                     onChange={(e) => setFilters({ ...filters, gender: e.target.value })}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+                    className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                   >
                     <option value="">Tous les genres</option>
                     {filteredGenderData.map((g) => (
@@ -444,12 +462,12 @@ export default function MarketingPage() {
           )}
 
           {/* Boutons d'action */}
-          <div className="flex gap-3 pt-4">
+          <div className="flex gap-3 pt-2">
             <Button
               onClick={exportSegmentData}
               isLoading={exportLoading}
               disabled={exportLoading}
-              className="bg-blue-600 hover:bg-blue-700"
+              className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700"
             >
               <Download className="w-5 h-5 mr-2" />
               Exporter en CSV
@@ -461,15 +479,20 @@ export default function MarketingPage() {
             </Button>
           </div>
 
-          <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-            <p className="text-sm text-blue-800">
-              <strong>Note:</strong> L'export générera un fichier CSV avec les emails, noms,
-              prénoms et autres données de contact. Utilisez ce fichier pour vos campagnes
-              d'emailing avec votre outil préféré (Mailchimp, SendGrid, etc.).
-            </p>
+          <div className="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-xl">
+            <div className="flex items-start gap-3">
+              <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                <Mail className="w-4 h-4 text-blue-600" />
+              </div>
+              <p className="text-sm text-blue-800">
+                <strong>Note:</strong> L'export générera un fichier CSV avec les emails, noms,
+                prénoms et autres données de contact. Utilisez ce fichier pour vos campagnes
+                d'emailing avec votre outil préféré (Mailchimp, SendGrid, etc.).
+              </p>
+            </div>
           </div>
         </div>
-      </Card>
+      </div>
     </div>
   );
 }
diff --git a/app/admin/tirages/page.tsx b/app/admin/tirages/page.tsx
index 715d22d..4df5cea 100644
--- a/app/admin/tirages/page.tsx
+++ b/app/admin/tirages/page.tsx
@@ -378,248 +378,295 @@ ${report.draw.notifiedAt ? `📧 Gagnant notifié le: ${new Date(report.draw.not
 
       {/* Alerte si un tirage existe déjà */}
       {hasExistingDraw && existingDraw && (
-        <Card className="p-6 mb-6 border-yellow-500 bg-yellow-50">
-          <div className="flex items-start gap-4">
-            <AlertCircle className="w-6 h-6 text-yellow-600 flex-shrink-0 mt-1" />
-            <div className="flex-1">
-              <h3 className="font-bold text-yellow-900 mb-2">Un tirage a déjà été effectué!</h3>
-              <div className="space-y-1 text-sm text-yellow-800">
-                <p><strong>Date:</strong> {new Date(existingDraw.draw_date).toLocaleString('fr-FR')}</p>
-                <p><strong>Gagnant:</strong> {existingDraw.winner_name} ({existingDraw.winner_email})</p>
-                <p><strong>Prix:</strong> {existingDraw.prize_name} - {existingDraw.prize_value}€</p>
-                <p><strong>Participants éligibles:</strong> {existingDraw.eligible_participants} / {existingDraw.total_participants}</p>
-                <p>
-                  <strong>Statut:</strong>{' '}
-                  <span
-                    className={`px-2 py-1 rounded text-xs ${
-                      existingDraw.status === 'CLAIMED'
-                        ? 'bg-green-100 text-green-800'
-                        : existingDraw.status === 'NOTIFIED'
-                        ? 'bg-blue-100 text-blue-800'
-                        : 'bg-gray-100 text-gray-800'
-                    }`}
-                  >
-                    {existingDraw.status}
-                  </span>
-                </p>
-              </div>
-
-              <div className="flex gap-2 mt-4 flex-wrap">
-                <Button onClick={downloadReport} size="sm" variant="outline">
-                  <Download className="w-4 h-4 mr-1" />
-                  Télécharger rapport
-                </Button>
-
-                {existingDraw.status === 'COMPLETED' && (
-                  <Button onClick={markAsNotified} size="sm" variant="outline">
-                    <Mail className="w-4 h-4 mr-1" />
-                    Marquer comme notifié
-                  </Button>
-                )}
-
-                {existingDraw.status === 'NOTIFIED' && (
-                  <Button onClick={markAsClaimed} size="sm" variant="outline">
-                    <CheckCircle className="w-4 h-4 mr-1" />
-                    Marquer comme récupéré
-                  </Button>
-                )}
-
-                <Button
-                  onClick={deleteDraw}
-                  size="sm"
-                  variant="outline"
-                  className="border-red-300 text-red-700 hover:bg-red-50 hover:border-red-400"
-                >
-                  <Trash2 className="w-4 h-4 mr-1" />
-                  Annuler ce tirage
-                </Button>
+        <div className="mb-6 bg-gradient-to-r from-amber-50 to-yellow-50 rounded-2xl border-2 border-amber-200 overflow-hidden">
+          <div className="bg-gradient-to-r from-amber-500 to-yellow-500 px-6 py-3">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
+                <Trophy className="w-5 h-5 text-white" />
               </div>
+              <h3 className="font-bold text-white text-lg">Tirage déjà effectué</h3>
             </div>
           </div>
-        </Card>
+          <div className="p-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
+              <div className="bg-white p-4 rounded-xl border border-amber-100">
+                <p className="text-xs text-gray-500 uppercase font-semibold mb-1">Date</p>
+                <p className="font-bold text-gray-900">{new Date(existingDraw.draw_date).toLocaleString('fr-FR')}</p>
+              </div>
+              <div className="bg-white p-4 rounded-xl border border-amber-100">
+                <p className="text-xs text-gray-500 uppercase font-semibold mb-1">Gagnant</p>
+                <p className="font-bold text-gray-900">{existingDraw.winner_name}</p>
+                <p className="text-xs text-gray-500">{existingDraw.winner_email}</p>
+              </div>
+              <div className="bg-white p-4 rounded-xl border border-amber-100">
+                <p className="text-xs text-gray-500 uppercase font-semibold mb-1">Prix</p>
+                <p className="font-bold text-gray-900">{existingDraw.prize_name}</p>
+                <p className="text-sm text-purple-600 font-semibold">{existingDraw.prize_value}€</p>
+              </div>
+              <div className="bg-white p-4 rounded-xl border border-amber-100">
+                <p className="text-xs text-gray-500 uppercase font-semibold mb-1">Statut</p>
+                <span
+                  className={`inline-flex px-3 py-1 rounded-full text-sm font-semibold ${
+                    existingDraw.status === 'CLAIMED'
+                      ? 'bg-green-100 text-green-700'
+                      : existingDraw.status === 'NOTIFIED'
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'bg-gray-100 text-gray-700'
+                  }`}
+                >
+                  {existingDraw.status === 'CLAIMED' ? 'Récupéré' : existingDraw.status === 'NOTIFIED' ? 'Notifié' : existingDraw.status}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex gap-2 flex-wrap">
+              <Button onClick={downloadReport} size="sm" variant="outline" className="rounded-xl">
+                <Download className="w-4 h-4 mr-1" />
+                Télécharger rapport
+              </Button>
+
+              {existingDraw.status === 'COMPLETED' && (
+                <Button onClick={markAsNotified} size="sm" variant="outline" className="rounded-xl">
+                  <Mail className="w-4 h-4 mr-1" />
+                  Marquer comme notifié
+                </Button>
+              )}
+
+              {existingDraw.status === 'NOTIFIED' && (
+                <Button onClick={markAsClaimed} size="sm" variant="outline" className="rounded-xl">
+                  <CheckCircle className="w-4 h-4 mr-1" />
+                  Marquer comme récupéré
+                </Button>
+              )}
+
+              <Button
+                onClick={deleteDraw}
+                size="sm"
+                variant="outline"
+                className="border-red-300 text-red-700 hover:bg-red-50 hover:border-red-400 rounded-xl"
+              >
+                <Trash2 className="w-4 h-4 mr-1" />
+                Annuler ce tirage
+              </Button>
+            </div>
+          </div>
+        </div>
       )}
 
       {/* Liste des participants éligibles */}
-      <Card className="p-6 mb-6">
-        <div className="flex items-center justify-between mb-6">
-          <div>
-            <h2 className="text-2xl font-bold flex items-center gap-2">
-              <Users className="w-6 h-6 text-blue-600" />
-              Participants Éligibles
-            </h2>
-            <p className="text-gray-600 text-sm mt-1">
-              {loading
-                ? 'Chargement en cours...'
-                : participants.length > 0
-                  ? `${participants.length} participant${participants.length > 1 ? 's' : ''} éligible${participants.length > 1 ? 's' : ''} au tirage`
-                  : 'Aucun participant chargé'}
-            </p>
-          </div>
-          <Button
-            onClick={loadParticipants}
-            isLoading={loading}
-            disabled={loading}
-            size="sm"
-          >
-            <RefreshCw className="w-4 h-4 mr-2" />
-            Actualiser
-          </Button>
-        </div>
-
-        {loading && (
-          <div className="text-center py-12">
-            <RefreshCw className="w-12 h-12 text-blue-600 animate-spin mx-auto mb-4" />
-            <p className="text-gray-600">Chargement des participants éligibles...</p>
-          </div>
-        )}
-
-        {!loading && participants.length === 0 && (
-          <div className="text-center py-12 bg-gray-50 rounded-lg">
-            <Users className="w-16 h-16 text-gray-400 mx-auto mb-4" />
-            <p className="text-gray-600 text-lg font-medium">Aucun participant éligible</p>
-            <p className="text-gray-500 text-sm mt-2">
-              Vérifiez que des participants ont joué au moins {minTickets} ticket{minTickets > 1 ? 's' : ''}
-            </p>
-          </div>
-        )}
-
-        {!loading && participants.length > 0 && (
-          <>
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead className="bg-gradient-to-r from-blue-50 to-purple-50">
-                  <tr>
-                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
-                      #
-                    </th>
-                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
-                      Nom Complet
-                    </th>
-                    <th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
-                      Email
-                    </th>
-                    <th className="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">
-                      Tickets Joués
-                    </th>
-                    <th className="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">
-                      Lots Gagnés
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="bg-white divide-y divide-gray-200">
-                  {participants.map((participant, index) => (
-                    <tr key={participant.id} className="hover:bg-blue-50 transition-colors">
-                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                        {index + 1}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <div className="flex items-center">
-                          <User className="w-5 h-5 text-blue-500 mr-2" />
-                          <span className="text-sm font-medium text-gray-900">
-                            {participant.first_name} {participant.last_name}
-                          </span>
-                        </div>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
-                        {participant.email}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-center">
-                        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
-                          {participant.tickets_played}
-                        </span>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-center">
-                        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
-                          {participant.prizes_won}
-                        </span>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-
-            {/* Bouton de tirage au sort */}
-            <div className="mt-8 p-6 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg border-2 border-yellow-200">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h3 className="text-lg font-bold text-gray-900 mb-1">
-                    Prêt à lancer le tirage au sort ?
-                  </h3>
-                  <p className="text-sm text-gray-600">
-                    {participants.length} participant{participants.length > 1 ? 's ont' : ' a'} une chance égale de gagner {prizeName} ({prizeValue}€)
-                  </p>
-                </div>
-                <Button
-                  onClick={conductDraw}
-                  disabled={loading}
-                  size="lg"
-                  className="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600"
-                >
-                  <Trophy className="w-5 h-5 mr-2" />
-                  Lancer le Tirage
-                </Button>
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
+        <div className="bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
+                <Users className="w-5 h-5 text-white" />
+              </div>
+              <div>
+                <h2 className="text-xl font-bold text-white">Participants Éligibles</h2>
+                <p className="text-blue-100 text-sm">
+                  {loading
+                    ? 'Chargement en cours...'
+                    : participants.length > 0
+                      ? `${participants.length} participant${participants.length > 1 ? 's' : ''} éligible${participants.length > 1 ? 's' : ''}`
+                      : 'Aucun participant'}
+                </p>
               </div>
             </div>
-          </>
-        )}
-      </Card>
+            <Button
+              onClick={loadParticipants}
+              isLoading={loading}
+              disabled={loading}
+              size="sm"
+              className="bg-white text-blue-600 hover:bg-blue-50 rounded-xl"
+            >
+              <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+              Actualiser
+            </Button>
+          </div>
+        </div>
+
+        <div className="p-6">
+          {loading && (
+            <div className="text-center py-12">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+              <p className="text-gray-600">Chargement des participants éligibles...</p>
+            </div>
+          )}
+
+          {!loading && participants.length === 0 && (
+            <div className="text-center py-12 bg-gray-50 rounded-xl">
+              <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Users className="w-8 h-8 text-gray-400" />
+              </div>
+              <p className="text-gray-900 text-lg font-medium">Aucun participant éligible</p>
+              <p className="text-gray-500 text-sm mt-2">
+                Vérifiez que des participants ont joué au moins {minTickets} ticket{minTickets > 1 ? 's' : ''}
+              </p>
+            </div>
+          )}
+
+          {!loading && participants.length > 0 && (
+            <>
+              <div className="overflow-x-auto rounded-xl border border-gray-100">
+                <table className="w-full">
+                  <thead className="bg-gradient-to-r from-gray-50 to-gray-100">
+                    <tr>
+                      <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                        #
+                      </th>
+                      <th className="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                        Participant
+                      </th>
+                      <th className="px-6 py-4 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                        Tickets Joués
+                      </th>
+                      <th className="px-6 py-4 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                        Lots Gagnés
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-100">
+                    {participants.map((participant, index) => (
+                      <tr key={participant.id} className="hover:bg-blue-50 transition-colors">
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <span className="inline-flex items-center justify-center w-8 h-8 bg-gray-100 rounded-lg text-sm font-bold text-gray-600">
+                            {index + 1}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
+                              {participant.first_name?.charAt(0)}{participant.last_name?.charAt(0)}
+                            </div>
+                            <div>
+                              <p className="text-sm font-semibold text-gray-900">
+                                {participant.first_name} {participant.last_name}
+                              </p>
+                              <p className="text-xs text-gray-500">{participant.email}</p>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-center">
+                          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-blue-100 text-blue-700">
+                            {participant.tickets_played}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-center">
+                          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-purple-100 text-purple-700">
+                            {participant.prizes_won}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              {/* Bouton de tirage au sort */}
+              <div className="mt-6 p-6 bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl border-2 border-amber-200">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="text-lg font-bold text-gray-900 mb-1">
+                      Prêt à lancer le tirage au sort ?
+                    </h3>
+                    <p className="text-sm text-gray-600">
+                      {participants.length} participant{participants.length > 1 ? 's ont' : ' a'} une chance égale de gagner {prizeName} ({prizeValue}€)
+                    </p>
+                  </div>
+                  <Button
+                    onClick={conductDraw}
+                    disabled={loading}
+                    size="lg"
+                    className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 rounded-xl shadow-lg"
+                  >
+                    <Trophy className="w-5 h-5 mr-2" />
+                    Lancer le Tirage
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
 
       {/* Résultat du tirage */}
       {drawResult && (
-        <Card className="p-6 bg-gradient-to-br from-yellow-50 to-orange-50 border-yellow-500">
-          <div className="text-center">
-            <Trophy className="w-16 h-16 text-yellow-600 mx-auto mb-4" />
-            <h2 className="text-3xl font-bold text-gray-900 mb-2">
-              Félicitations au gagnant!
+        <div className="bg-gradient-to-br from-amber-50 via-yellow-50 to-orange-50 rounded-2xl border-2 border-amber-300 overflow-hidden">
+          <div className="bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-4 text-center">
+            <Trophy className="w-12 h-12 text-white mx-auto mb-2" />
+            <h2 className="text-2xl font-bold text-white">
+              Félicitations au gagnant !
             </h2>
+          </div>
 
-            <div className="bg-white rounded-lg p-6 my-6 shadow-lg">
-              <User className="w-12 h-12 text-blue-600 mx-auto mb-3" />
-              <h3 className="text-2xl font-bold text-gray-900 mb-2">
-                {drawResult.winner.name}
-              </h3>
-              <p className="text-gray-600 mb-1">{drawResult.winner.email}</p>
-              <p className="text-sm text-gray-500">
-                {drawResult.winner.ticketsPlayed} ticket(s) joué(s)
-              </p>
+          <div className="p-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+              {/* Gagnant */}
+              <div className="bg-white rounded-2xl p-6 shadow-lg border border-blue-100">
+                <div className="flex items-center gap-4 mb-4">
+                  <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-bold text-xl">
+                    {drawResult.winner.name.split(' ').map(n => n[0]).join('')}
+                  </div>
+                  <div>
+                    <p className="text-xs text-blue-600 font-semibold uppercase">Gagnant</p>
+                    <h3 className="text-xl font-bold text-gray-900">
+                      {drawResult.winner.name}
+                    </h3>
+                  </div>
+                </div>
+                <div className="space-y-2 text-sm">
+                  <p className="text-gray-600">{drawResult.winner.email}</p>
+                  <p className="text-gray-500">
+                    {drawResult.winner.ticketsPlayed} ticket(s) joué(s)
+                  </p>
+                </div>
+              </div>
+
+              {/* Prix */}
+              <div className="bg-white rounded-2xl p-6 shadow-lg border border-purple-100">
+                <div className="flex items-center gap-4 mb-4">
+                  <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full flex items-center justify-center">
+                    <Gift className="w-8 h-8 text-white" />
+                  </div>
+                  <div>
+                    <p className="text-xs text-purple-600 font-semibold uppercase">Prix gagné</p>
+                    <h3 className="text-xl font-bold text-gray-900">
+                      {drawResult.prize.name}
+                    </h3>
+                  </div>
+                </div>
+                <p className="text-3xl font-bold text-purple-600">
+                  {drawResult.prize.value}€
+                </p>
+              </div>
             </div>
 
-            <div className="bg-white rounded-lg p-6 shadow-lg">
-              <Gift className="w-12 h-12 text-purple-600 mx-auto mb-3" />
-              <h3 className="text-xl font-bold text-gray-900 mb-1">
-                {drawResult.prize.name}
-              </h3>
-              <p className="text-2xl font-bold text-purple-600">
-                {drawResult.prize.value}€
-              </p>
-            </div>
-
-            <div className="mt-6 grid grid-cols-3 gap-4 text-center">
-              <div>
-                <p className="text-2xl font-bold text-gray-900">
+            {/* Stats */}
+            <div className="grid grid-cols-3 gap-4 mb-6">
+              <div className="bg-white rounded-xl p-4 text-center border border-gray-100">
+                <p className="text-3xl font-bold text-gray-900">
                   {drawResult.statistics.totalParticipants}
                 </p>
-                <p className="text-sm text-gray-600">Total participants</p>
+                <p className="text-sm text-gray-500">Total participants</p>
               </div>
-              <div>
-                <p className="text-2xl font-bold text-blue-600">
+              <div className="bg-white rounded-xl p-4 text-center border border-blue-100">
+                <p className="text-3xl font-bold text-blue-600">
                   {drawResult.statistics.eligibleParticipants}
                 </p>
-                <p className="text-sm text-gray-600">Éligibles</p>
+                <p className="text-sm text-gray-500">Éligibles</p>
               </div>
-              <div>
-                <p className="text-2xl font-bold text-green-600">1</p>
-                <p className="text-sm text-gray-600">Gagnant</p>
+              <div className="bg-white rounded-xl p-4 text-center border border-green-100">
+                <p className="text-3xl font-bold text-green-600">1</p>
+                <p className="text-sm text-gray-500">Gagnant</p>
               </div>
             </div>
 
-            <div className="mt-6 flex gap-3 justify-center">
-              <Button onClick={downloadReport}>
+            <div className="flex gap-3 justify-center">
+              <Button onClick={downloadReport} className="rounded-xl">
                 <Download className="w-4 h-4 mr-2" />
                 Télécharger le rapport
               </Button>
-              <Button variant="outline" onClick={() => {
+              <Button variant="outline" className="rounded-xl" onClick={() => {
                 if (typeof window !== 'undefined') {
                   window.location.reload();
                 }
@@ -629,7 +676,7 @@ ${report.draw.notifiedAt ? `📧 Gagnant notifié le: ${new Date(report.draw.not
               </Button>
             </div>
           </div>
-        </Card>
+        </div>
       )}
     </div>
   );
diff --git a/components/admin/PrizeManagement.tsx b/components/admin/PrizeManagement.tsx
index a5c7790..f812fbc 100644
--- a/components/admin/PrizeManagement.tsx
+++ b/components/admin/PrizeManagement.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { adminService } from '@/services/admin.service';
 import { Prize, CreatePrizeData, UpdatePrizeData } from '@/types';
+import { Gift, Package, Trophy, Percent, Archive, RefreshCw, X } from 'lucide-react';
 
 export default function PrizeManagement() {
   const [prizes, setPrizes] = useState<Prize[]>([]);
@@ -91,86 +92,189 @@ export default function PrizeManagement() {
     setIsModalOpen(false);
   };
 
+  // Calculer les stats
+  const prizeStats = useMemo(() => {
+    const totalStock = prizes.reduce((acc, p) => acc + (p.initialStock || p.stock || 0), 0);
+    const totalUsed = prizes.reduce((acc, p) => acc + (p.ticketsUsed || 0), 0);
+    const activeCount = prizes.filter(p => p.isActive).length;
+    return { totalStock, totalUsed, activeCount, totalPrizes: prizes.length };
+  }, [prizes]);
+
+  // Fonction pour obtenir l'icône et la couleur selon le type
+  const getPrizeStyle = (type: string) => {
+    switch (type) {
+      case 'GRAND_PRIZE':
+        return { bg: 'from-purple-500 to-purple-600', icon: Trophy, color: 'purple' };
+      case 'PHYSICAL':
+        return { bg: 'from-blue-500 to-blue-600', icon: Package, color: 'blue' };
+      default:
+        return { bg: 'from-emerald-500 to-emerald-600', icon: Gift, color: 'emerald' };
+    }
+  };
+
   if (loading) {
-    return <div className="text-center py-8">Chargement des prix...</div>;
+    return (
+      <div className="flex items-center justify-center py-16">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Chargement des lots...</p>
+        </div>
+      </div>
+    );
   }
 
   return (
     <div className="p-6">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold">Gestion des Prix</h1>
+      {/* Stats rapides */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+        <div className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 border border-purple-200">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-purple-200 rounded-lg flex items-center justify-center">
+              <Gift className="w-5 h-5 text-purple-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-purple-700">{prizeStats.totalPrizes}</p>
+              <p className="text-xs text-purple-600">Total Lots</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-4 border border-green-200">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-green-200 rounded-lg flex items-center justify-center">
+              <Archive className="w-5 h-5 text-green-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-green-700">{prizeStats.totalStock}</p>
+              <p className="text-xs text-green-600">Stock Total</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 border border-blue-200">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-blue-200 rounded-lg flex items-center justify-center">
+              <Package className="w-5 h-5 text-blue-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-blue-700">{prizeStats.totalUsed}</p>
+              <p className="text-xs text-blue-600">Distribués</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-gradient-to-br from-amber-50 to-amber-100 rounded-xl p-4 border border-amber-200">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-amber-200 rounded-lg flex items-center justify-center">
+              <Percent className="w-5 h-5 text-amber-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-amber-700">{prizeStats.totalStock > 0 ? ((prizeStats.totalUsed / prizeStats.totalStock) * 100).toFixed(1) : 0}%</p>
+              <p className="text-xs text-amber-600">Taux distrib.</p>
+            </div>
+          </div>
+        </div>
       </div>
 
       {error && (
-        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-          {error}
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl mb-6 flex items-center gap-3">
+          <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
+            <X className="w-5 h-5 text-red-600" />
+          </div>
+          <span>{error}</span>
         </div>
       )}
 
       {/* Liste des prix */}
       {prizes.length === 0 ? (
-        <div className="text-center py-12 text-gray-500">
-          Aucun prix trouvé. Cliquez sur "Ajouter un prix" pour commencer.
+        <div className="text-center py-16 bg-gray-50 rounded-2xl border-2 border-dashed border-gray-200">
+          <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <Gift className="w-8 h-8 text-gray-400" />
+          </div>
+          <p className="text-gray-500 font-medium">Aucun lot trouvé</p>
         </div>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {prizes.map((prize) => (
-          <div
-            key={prize.id}
-            className="border rounded-lg p-4 shadow-sm hover:shadow-md transition"
-          >
-            <div className="flex justify-between items-start mb-3">
-              <h3 className="font-semibold text-lg">{prize.name}</h3>
-              <span
-                className={`px-2 py-1 rounded text-xs ${
-                  prize.isActive
-                    ? 'bg-green-100 text-green-800'
-                    : 'bg-gray-100 text-gray-800'
-                }`}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {prizes.map((prize) => {
+            const style = getPrizeStyle(prize.type);
+            const IconComponent = style.icon;
+            const stockRemaining = (prize.initialStock || 0) - (prize.ticketsUsed || 0);
+
+            return (
+              <div
+                key={prize.id}
+                className="bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all overflow-hidden"
               >
-                {prize.isActive ? 'Actif' : 'Inactif'}
-              </span>
-            </div>
-
-            <p className="text-sm text-gray-600 mb-2">{prize.description}</p>
-
-            <div className="space-y-1 text-sm mb-3">
-              <p><strong>Type:</strong> {prize.type}</p>
-              <p><strong>Valeur:</strong> {prize.value}€</p>
-
-              {/* Affichage spécial pour le Grand Prix (tirage au sort) */}
-              {prize.type === 'GRAND_PRIZE' ? (
-                <>
-                  <p><strong>Probabilité:</strong> N/A (Tirage au sort)</p>
-                  <div className="mt-2 p-2 bg-purple-50 border border-purple-200 rounded">
-                    <p className="text-purple-800 font-semibold text-xs">
-                      🎯 TIRAGE AU SORT
-                    </p>
-                    <p className="text-purple-700 text-xs mt-1">
-                      Attribué lors du tirage final parmi les participants éligibles
-                    </p>
-                  </div>
-                </>
-              ) : (
-                <>
-                  <p><strong>Probabilité:</strong> {(prize.probability * 100).toFixed(1)}%</p>
-                  <p>
-                    <strong>Stock généré:</strong> {prize.initialStock !== undefined ? prize.initialStock : prize.stock}
-                  </p>
-                  <p>
-                    <strong>Stock restant:</strong>{' '}
-                    <span className={((prize.initialStock || 0) - (prize.ticketsUsed || 0)) === 0 ? 'text-red-600 font-semibold' : 'text-green-600 font-semibold'}>
-                      {(prize.initialStock || 0) - (prize.ticketsUsed || 0)}
+                {/* Header avec gradient */}
+                <div className={`bg-gradient-to-r ${style.bg} p-4`}>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
+                        <IconComponent className="w-5 h-5 text-white" />
+                      </div>
+                      <h3 className="font-bold text-white text-lg">{prize.name}</h3>
+                    </div>
+                    <span
+                      className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                        prize.isActive
+                          ? 'bg-white/20 text-white'
+                          : 'bg-gray-800/20 text-white/70'
+                      }`}
+                    >
+                      {prize.isActive ? 'Actif' : 'Inactif'}
                     </span>
-                  </p>
-                  {prize.ticketsUsed !== undefined && prize.ticketsUsed > 0 && (
-                    <p><strong>Tickets utilisés:</strong> {prize.ticketsUsed}</p>
+                  </div>
+                </div>
+
+                {/* Contenu */}
+                <div className="p-5">
+                  <p className="text-sm text-gray-600 mb-4">{prize.description}</p>
+
+                  {/* Affichage spécial pour le Grand Prix */}
+                  {prize.type === 'GRAND_PRIZE' ? (
+                    <div className="p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border border-purple-100">
+                      <div className="flex items-center gap-2 mb-2">
+                        <Trophy className="w-5 h-5 text-purple-600" />
+                        <span className="font-bold text-purple-800">TIRAGE AU SORT</span>
+                      </div>
+                      <p className="text-sm text-purple-700">
+                        Attribué lors du tirage final parmi les participants éligibles
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {/* Probabilité */}
+                      <div className="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
+                        <span className="text-sm text-gray-600">Probabilité</span>
+                        <span className="font-bold text-gray-900">{(prize.probability * 100).toFixed(1)}%</span>
+                      </div>
+
+                      {/* Stock */}
+                      <div className="p-3 bg-gray-50 rounded-xl">
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-sm text-gray-600">Stock</span>
+                          <span className={`font-bold ${stockRemaining === 0 ? 'text-red-600' : 'text-green-600'}`}>
+                            {stockRemaining} / {prize.initialStock || prize.stock}
+                          </span>
+                        </div>
+                        <div className="w-full bg-gray-200 rounded-full h-2">
+                          <div
+                            className={`h-2 rounded-full ${stockRemaining === 0 ? 'bg-red-500' : 'bg-green-500'}`}
+                            style={{ width: `${((prize.initialStock || prize.stock) > 0 ? (stockRemaining / (prize.initialStock || prize.stock)) * 100 : 0)}%` }}
+                          ></div>
+                        </div>
+                      </div>
+
+                      {/* Tickets utilisés */}
+                      {prize.ticketsUsed !== undefined && prize.ticketsUsed > 0 && (
+                        <div className="flex items-center justify-between p-3 bg-blue-50 rounded-xl">
+                          <span className="text-sm text-blue-700">Distribués</span>
+                          <span className="font-bold text-blue-800">{prize.ticketsUsed}</span>
+                        </div>
+                      )}
+                    </div>
                   )}
-                </>
-              )}
-            </div>
-          </div>
-        ))}
+                </div>
+              </div>
+            );
+          })}
         </div>
       )}
     </div>