From 1806c875b5129ea761a184f0ec6330041e9a586e Mon Sep 17 00:00:00 2001
From: kbe <kevin@kev1.net>
Date: Wed, 27 Aug 2025 01:12:00 +0200
Subject: [PATCH] refactor: dashboard views by extracting metric card and party
 item partials, and fix metric card rendering issue

---
 app/views/components/_metric_card.html.erb | 12 +++
 app/views/components/_party_item.html.erb  | 15 ++++
 app/views/pages/dashboard.html.erb         | 89 ++--------------------
 app/views/parties/show.html.erb            | 57 +++++++++++---
 4 files changed, 78 insertions(+), 95 deletions(-)
 create mode 100644 app/views/components/_metric_card.html.erb
 create mode 100644 app/views/components/_party_item.html.erb

diff --git a/app/views/components/_metric_card.html.erb b/app/views/components/_metric_card.html.erb
new file mode 100644
index 0000000..75d3237
--- /dev/null
+++ b/app/views/components/_metric_card.html.erb
@@ -0,0 +1,12 @@
+<div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
+  <div class="absolute inset-0 bg-gradient-to-br <%= @classes %> opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+  <div class="relative">
+    <div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
+      <%= value %>
+    </div>
+    <p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
+      <%= title %>
+    </p>
+    <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
+  </div>
+</div>
diff --git a/app/views/components/_party_item.html.erb b/app/views/components/_party_item.html.erb
new file mode 100644
index 0000000..ddfbaa1
--- /dev/null
+++ b/app/views/components/_party_item.html.erb
@@ -0,0 +1,15 @@
+<%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
+  <div class="flex items-center space-x-4">
+    <div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
+      <%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
+    </div>
+    <div class="flex-1 min-w-0">
+      <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
+        <%= party.name %>
+      </h3>
+      <p class="text-sm text-slate-600 dark:text-slate-400">
+        <%= l(party.start_time, format: :short) %>
+      </p>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb
index 8ccf59c..b62c33c 100644
--- a/app/views/pages/dashboard.html.erb
+++ b/app/views/pages/dashboard.html.erb
@@ -4,46 +4,11 @@
     <h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-6">Tableau de bord</h1>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 
-      <div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
-        <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-        <div class="relative">
-          <div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
-            <%= @available_parties %>
-          </div>
-          <p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
-            Événements disponibles
-          </p>
-          <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
-        </div>
-      </div>
+      <%= render partial: 'components/metric_card', locals: { title: "Événements disponibles", value: @available_parties, classes: "from-purple-100 to-indigo-100" } %>
 
-      <div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
-        <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-        <div class="relative">
-          <div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
-            <%= @events_this_week %>
-          </div>
-          <p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
-            Événements aujourd'hui
-          </p>
-          <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
-        </div>
-      </div>
+      <%= render partial: 'components/metric_card', locals: { title: "Événements aujourd'hui", value: @events_this_week, classes: "from-purple-100 to-indigo-100" } %>
 
-
-
-      <div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
-        <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-        <div class="relative">
-          <div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
-            <%= @events_this_week %>
-          </div>
-          <p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
-            Événements cette semaine
-          </p>
-          <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
-        </div>
-      </div>
+      <%= render partial: 'components/metric_card', locals: { title: "Événements cette semaine", value: @events_this_week, classes: "from-purple-100 to-indigo-100" } %>
 
     </div>
   </div>
@@ -58,21 +23,7 @@
         <ul class="space-y-4">
           <% @today_parties.each do |party| %>
             <li>
-              <%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
-                <div class="flex items-center space-x-4">
-                  <div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
-                    <%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
-                      <%= party.name %>
-                    </h3>
-                    <p class="text-sm text-slate-600 dark:text-slate-400">
-                      <%= l(party.start_time, format: :short) %>
-                    </p>
-                  </div>
-                </div>
-              <% end %>
+              <%= render partial: 'components/party_item', locals: { party: party } %>
             </li>
           <% end %>
         </ul>
@@ -92,21 +43,7 @@
         <ul class="space-y-4">
           <% @tomorrow_parties.each do |party| %>
             <li>
-              <%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
-                <div class="flex items-center space-x-4">
-                  <div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
-                    <%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
-                      <%= party.name %>
-                    </h3>
-                    <p class="text-sm text-slate-600 dark:text-slate-400">
-                      <%= l(party.start_time, format: :short) %>
-                    </p>
-                  </div>
-                </div>
-              <% end %>
+              <%= render partial: 'components/party_item', locals: { party: party } %>
             </li>
           <% end %>
         </ul>
@@ -126,21 +63,7 @@
         <ul class="space-y-4">
           <% @other_parties.each do |party| %>
             <li>
-              <%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
-                <div class="flex items-center space-x-4">
-                  <div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
-                    <%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
-                      <%= party.name %>
-                    </h3>
-                    <p class="text-sm text-slate-600 dark:text-slate-400">
-                      <%= l(party.start_time, format: :short) %>
-                    </p>
-                  </div>
-                </div>
-              <% end %>
+              <%= render partial: 'components/party_item', locals: { party: party } %>
             </li>
           <% end %>
         </ul>
diff --git a/app/views/parties/show.html.erb b/app/views/parties/show.html.erb
index 9a3dbff..387d58d 100644
--- a/app/views/parties/show.html.erb
+++ b/app/views/parties/show.html.erb
@@ -2,13 +2,13 @@
   <div class="row">
     <div class="col-md-8">
       <h1><%= @party.name %></h1>
-      
+
       <% if @party.image.present? %>
         <%= image_tag @party.image, class: "img-fluid rounded mb-3" %>
       <% end %>
-      
+
       <p><%= @party.description %></p>
-      
+
       <div class="card mb-3">
         <div class="card-body">
           <h5 class="card-title">Event Details</h5>
@@ -21,17 +21,50 @@
         </div>
       </div>
     </div>
-    
+
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body">
-          <h5 class="card-title">Ticket Information</h5>
-          <p class="card-text">
-            <!-- Ticket types would go here -->
-            <a href="#" class="btn btn-primary">Get Tickets</a>
-          </p>
+        <div class="space-y-6">
+          <!-- Fake Ticket Types -->
+          <div class="card hover-lift">
+            <div class="card-body p-6">
+              <h5 class="card-title text-lg font-bold mb-4">Early Bird</h5>
+              <p class="text-slate-600 mb-4">€49.99 - 30 min early access</p>
+              <div class="flex items-center space-x-4">
+                <span class="text-sm font-medium">Quantity:</span>
+                <input type="number" min="0" max="10" value="0" class="form-input w-20 hover-glow focus-ring" />
+              </div>
+            </div>
+          </div>
+
+          <div class="card hover-lift">
+            <div class="card-body p-6">
+              <h5 class="card-title text-lg font-bold mb-4">Standard</h5>
+              <p class="text-slate-600 mb-4">€29.99 - Regular access</p>
+              <div class="flex items-center space-x-4">
+                <span class="text-sm font-medium">Quantity:</span>
+                <input type="number" min="0" max="10" value="0" class="form-input w-20 hover-glow focus-ring" />
+              </div>
+            </div>
+          </div>
+
+          <div class="card hover-lift">
+            <div class="card-body p-6">
+              <h5 class="card-title text-lg font-bold mb-4">VIP</h5>
+              <p class="text-slate-600 mb-4">€99.99 - Premium access</p>
+              <div class="flex items-center space-x-4">
+                <span class="text-sm font-medium">Quantity:</span>
+                <input type="number" min="0" max="10" value="0" class="form-input w-20 hover-glow focus-ring" />
+              </div>
+            </div>
+          </div>
+
+          <div class="text-center">
+            <button type="button" class="btn-primary w-full sm:w-auto hover-lift focus-ring transition-normal">
+              Proceed to Checkout
+            </button>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>