kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

develop #3

Merged
kbe merged 227 commits from develop into main 2025-09-16 14:35:23 +00:00
Conversation 0 Commits 227 Files Changed 295 +323 -158
5 changed files with 323 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7694e50fa0 - Show all commits

40
app/services/ticket_pdf_generator.rb
View File

@@ -140,14 +140,14 @@ class TicketPdfGenerator
pdf.fill_color "6366F1" pdf.fill_color "6366F1"
pdf.font "Helvetica", style: :bold, size: 24 pdf.font "Helvetica", style: :bold, size: 24
pdf.text "AperoNight", align: :center pdf.text "AperoNight", align: :center
pdf.move_down 5 pdf.move_down 5
pdf.font "Helvetica", size: 10 pdf.font "Helvetica", size: 10
pdf.fill_color "64748B" pdf.fill_color "64748B"
pdf.text "Billet d'entree", align: :center pdf.text "Billet d'entree", align: :center
pdf.move_down 20 pdf.move_down 20
# Simple divider line # Simple divider line
pdf.stroke_color "E5E7EB" pdf.stroke_color "E5E7EB"
pdf.horizontal_line 0, pdf.bounds.width pdf.horizontal_line 0, pdf.bounds.width
@@ -160,24 +160,24 @@ class TicketPdfGenerator
pdf.font "Helvetica", style: :bold, size: 18 pdf.font "Helvetica", style: :bold, size: 18
pdf.text ticket.event.name, align: :center pdf.text ticket.event.name, align: :center
pdf.move_down 15 pdf.move_down 15
# Two-column layout for ticket details # Two-column layout for ticket details
pdf.bounding_box([0, pdf.cursor], width: pdf.bounds.width, height: 120) do pdf.bounding_box([ 0, pdf.cursor ], width: pdf.bounds.width, height: 120) do
# Left column # Left column
pdf.bounding_box([0, pdf.cursor], width: pdf.bounds.width / 2 - 20, height: 120) do pdf.bounding_box([ 0, pdf.cursor ], width: pdf.bounds.width / 2 - 20, height: 120) do
create_info_item(pdf, "Date", ticket.event.start_time.strftime("%d %B %Y")) create_info_item(pdf, "Date", ticket.event.start_time.strftime("%d %B %Y"))
create_info_item(pdf, "Heure", ticket.event.start_time.strftime("%H:%M")) create_info_item(pdf, "Heure", ticket.event.start_time.strftime("%H:%M"))
create_info_item(pdf, "Lieu", ticket.event.venue_name) create_info_item(pdf, "Lieu", ticket.event.venue_name)
end end
# Right column # Right column
pdf.bounding_box([pdf.bounds.width / 2 + 20, pdf.cursor], width: pdf.bounds.width / 2 - 20, height: 120) do pdf.bounding_box([ pdf.bounds.width / 2 + 20, pdf.cursor ], width: pdf.bounds.width / 2 - 20, height: 120) do
create_info_item(pdf, "Type", ticket.ticket_type.name) create_info_item(pdf, "Type", ticket.ticket_type.name)
create_info_item(pdf, "Prix", "#{sprintf('%.2f', ticket.price_euros)} €") create_info_item(pdf, "Prix", "#{sprintf('%.2f', ticket.price_euros)} €")
create_info_item(pdf, "Titulaire", "#{ticket.first_name} #{ticket.last_name}") create_info_item(pdf, "Titulaire", "#{ticket.first_name} #{ticket.last_name}")
end end
end end
pdf.move_down 30 pdf.move_down 30
end end
@@ -185,7 +185,7 @@ class TicketPdfGenerator
pdf.font "Helvetica", style: :bold, size: 9 pdf.font "Helvetica", style: :bold, size: 9
pdf.fill_color "64748B" pdf.fill_color "64748B"
pdf.text label.upcase pdf.text label.upcase
pdf.move_down 2 pdf.move_down 2
pdf.font "Helvetica", size: 11 pdf.font "Helvetica", size: 11
pdf.fill_color "1F2937" pdf.fill_color "1F2937"
@@ -197,25 +197,25 @@ class TicketPdfGenerator
# Center the QR code horizontally # Center the QR code horizontally
qr_size = 120 qr_size = 120
x_position = (pdf.bounds.width - qr_size) / 2 x_position = (pdf.bounds.width - qr_size) / 2
pdf.bounding_box([x_position, pdf.cursor], width: qr_size, height: qr_size + 40) do pdf.bounding_box([ x_position, pdf.cursor ], width: qr_size, height: qr_size + 40) do
# QR Code title # QR Code title
pdf.font "Helvetica", style: :bold, size: 12 pdf.font "Helvetica", style: :bold, size: 12
pdf.fill_color "1F2937" pdf.fill_color "1F2937"
pdf.text "Code d'entree", align: :center pdf.text "Code d'entree", align: :center
pdf.move_down 10 pdf.move_down 10
# Generate QR code # Generate QR code
generate_simple_qr_code(pdf, qr_size) generate_simple_qr_code(pdf, qr_size)
pdf.move_down 10 pdf.move_down 10
# QR code ID # QR code ID
pdf.font "Helvetica", size: 8 pdf.font "Helvetica", size: 8
pdf.fill_color "64748B" pdf.fill_color "64748B"
pdf.text "ID: #{ticket.qr_code[0..15]}...", align: :center pdf.text "ID: #{ticket.qr_code[0..15]}...", align: :center
end end
pdf.move_down 40 pdf.move_down 40
end end
@@ -250,14 +250,14 @@ class TicketPdfGenerator
pdf.fill_color "64748B" pdf.fill_color "64748B"
pdf.text "Ce billet est valable pour une seule entree.", align: :center pdf.text "Ce billet est valable pour une seule entree.", align: :center
pdf.text "Presentez ce code QR a l'entree de l'evenement.", align: :center pdf.text "Presentez ce code QR a l'entree de l'evenement.", align: :center
pdf.move_down 10 pdf.move_down 10
# Divider line # Divider line
pdf.stroke_color "E5E7EB" pdf.stroke_color "E5E7EB"
pdf.horizontal_line 0, pdf.bounds.width pdf.horizontal_line 0, pdf.bounds.width
pdf.move_down 5 pdf.move_down 5
# Generation timestamp # Generation timestamp
pdf.font "Helvetica", size: 7 pdf.font "Helvetica", size: 7
pdf.fill_color "9CA3AF" pdf.fill_color "9CA3AF"
@@ -294,4 +294,4 @@ class TicketPdfGenerator
# Final fallback: simple ticket identifier # Final fallback: simple ticket identifier
"TICKET-#{ticket.id}" "TICKET-#{ticket.id}"
end end
end end

163
app/views/orders/payment_cancel.html.erb Normal file
View File

@@ -0,0 +1,163 @@
<div class="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-50 py-8">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header -->
<div class="text-center mb-8">
<div class="mx-auto w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</div>
<h1 class="text-3xl font-bold text-gray-900 mb-2">Détails de la Commande</h1>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Event & Order Details -->
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="border-b border-gray-200 pb-6 mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Détails de Votre Commande</h2>
<% if @order %>
<div class="flex items-center text-sm text-gray-600 space-x-4">
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<div class="flex flex-col">
<span class="font-medium">Commande n°<%= @order.id %></span>
<span class="text-xs text-gray-500"><%= @order.created_at.strftime("%d %B %Y") %></span>
</div>
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-1 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span class="text-red-600 font-medium">
Paiement annulé
</span>
</div>
</div>
<% else %>
<p class="text-gray-600">Aucune commande trouvée.</p>
<% end %>
</div>
<% if @order %>
<!-- Event Information -->
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-900 mb-3">Événement</h3>
<div class="bg-purple-50 rounded-lg p-4 border border-purple-200">
<h4 class="font-semibold text-purple-900 text-lg"><%= @order.event.name %></h4>
<div class="mt-2 space-y-1 text-sm text-purple-700">
<% if @order.event.start_time %>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<%= @order.event.start_time.strftime("%d %B %Y à %H:%M") %>
</div>
<% end %>
<% if @order.event.venue_name.present? %>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
<%= @order.event.venue_name %>
</div>
<% end %>
<% if @order.event.venue_address.present? %>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
</svg>
<%= @order.event.venue_address %>
</div>
<% end %>
</div>
</div>
</div>
<!-- Summary -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Récapitulatif</h3>
<% @order.tickets.each do |ticket| %>
<div class="flex items-center justify-between py-3 border-b border-gray-100 last:border-b-0">
<div class="flex-1 min-w-0">
<h4 class="text-sm font-medium text-gray-900 truncate"><%= ticket.ticket_type.name %></h4>
<div class="flex items-center text-xs text-gray-500 mt-1">
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<%= ticket.first_name %> <%= ticket.last_name %>
</div>
<div class="flex items-center text-xs text-red-600 mt-1">
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
En attente de paiement
</div>
</div>
<div class="text-right">
<div class="text-lg font-semibold text-gray-900"><%= ticket.price_euros %>€</div>
</div>
</div>
<% end %>
</div>
<!-- Total -->
<div class="border-t border-gray-200 pt-6 mt-6">
<div class="flex items-center justify-between text-lg">
<span class="font-medium text-gray-900">Total à payer</span>
<span class="font-bold text-2xl text-red-600">
<%= @order.total_amount_euros %>€
</span>
</div>
</div>
<% end %>
</div>
<!-- Actions & Ticket Access -->
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 h-fit">
<% if @order&.can_retry_payment? %>
<!-- Payment Required -->
<div class="border-b border-gray-200 pb-6 mb-6">
<h2 class="text-xl font-bold text-gray-900 mb-2">Paiement Requis</h2>
<p class="text-sm text-gray-600">Votre commande nécessite un paiement</p>
</div>
<div class="mb-6">
<%= link_to checkout_order_path(@order), class: "block w-full text-center py-3 px-4 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition-colors" do %>
<div class="flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
</svg>
Procéder au Paiement
</div>
<% end %>
</div>
<% end %>
<!-- Navigation Actions -->
<div class="border-t border-gray-200 pt-6 mt-6">
<div class="space-y-3">
<%= link_to dashboard_path, class: "block w-full text-center py-3 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors" do %>
<div class="flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
Retour au Tableau de Bord
</div>
<% end %>
<%= link_to event_path(@order.event.slug, @order.event), class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %>
<div class="flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
Voir l'Événement Complet
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>

128
app/views/orders/payment_success.html.erb
View File

@@ -1,35 +1,36 @@
<div class="min-h-screen bg-gradient-to-br from-green-50 to-emerald-50 py-8"> <div class="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-50 py-8">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Success Header --> <!-- Header -->
<div class="text-center mb-12"> <div class="text-center mb-8">
<div class="mx-auto w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6"> <div class="mx-auto w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg> </svg>
</div> </div>
<h1 class="text-4xl font-bold text-gray-900 mb-4">Paiement réussi !</h1> <h1 class="text-3xl font-bold text-gray-900 mb-2">Détails de la Commande</h1>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Félicitations ! Votre commande a été traitée avec succès. Vous allez recevoir vos billets par email d'ici quelques minutes.
</p>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Order Summary --> <!-- Event & Order Details -->
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8"> <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="border-b border-gray-200 pb-6 mb-6"> <div class="border-b border-gray-200 pb-6 mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Récapitulatif de la commande</h2> <h2 class="text-2xl font-bold text-gray-900 mb-2">Détails de Votre Commande</h2>
<div class="flex items-center text-sm text-gray-600 space-x-4"> <div class="flex items-center text-sm text-gray-600 space-x-4">
<div class="flex items-center"> <div class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg> </svg>
Commande #<%= @order.id %> <div class="flex flex-col">
<span class="font-medium">Commande n°<%= @order.id %></span>
<span class="text-xs text-gray-500"><%= @order.created_at.strftime("%d %B %Y") %></span>
</div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<svg class="w-4 h-4 mr-1 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mr-1 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg> </svg>
<span class="text-green-600 font-medium">Payée</span> <span class="text-green-600 font-medium">
Payée
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -45,7 +46,7 @@
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
<%= l(@order.event.start_time, format: :long) %> <%= @order.event.start_time.strftime("%d %B %Y à %H:%M") %>
</div> </div>
<% end %> <% end %>
<% if @order.event.venue_name.present? %> <% if @order.event.venue_name.present? %>
@@ -57,13 +58,21 @@
<%= @order.event.venue_name %> <%= @order.event.venue_name %>
</div> </div>
<% end %> <% end %>
<% if @order.event.venue_address.present? %>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
</svg>
<%= @order.event.venue_address %>
</div>
<% end %>
</div> </div>
</div> </div>
</div> </div>
<!-- Tickets List --> <!-- Summary -->
<div class="space-y-4"> <div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Vos billets</h3> <h3 class="text-lg font-semibold text-gray-900 mb-4">Récapitulatif</h3>
<% @order.tickets.each do |ticket| %> <% @order.tickets.each do |ticket| %>
<div class="flex items-center justify-between py-3 border-b border-gray-100 last:border-b-0"> <div class="flex items-center justify-between py-3 border-b border-gray-100 last:border-b-0">
@@ -93,46 +102,47 @@
<div class="border-t border-gray-200 pt-6 mt-6"> <div class="border-t border-gray-200 pt-6 mt-6">
<div class="flex items-center justify-between text-lg"> <div class="flex items-center justify-between text-lg">
<span class="font-medium text-gray-900">Total payé</span> <span class="font-medium text-gray-900">Total payé</span>
<span class="font-bold text-2xl text-green-600"><%= @order.total_amount_euros %>€</span> <span class="font-bold text-2xl text-green-600">
<%= @order.total_amount_euros %>€
</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Next Steps --> <!-- Actions & Ticket Access -->
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 h-fit"> <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 h-fit">
<!-- Ticket Access -->
<div class="border-b border-gray-200 pb-6 mb-6"> <div class="border-b border-gray-200 pb-6 mb-6">
<h2 class="text-xl font-bold text-gray-900 mb-2">Prochaines étapes</h2> <h2 class="text-xl font-bold text-gray-900 mb-2">Accédez à Vos Billets</h2>
<p class="text-sm text-gray-600">Que faire maintenant ?</p> <p class="text-sm text-gray-600">Téléchargez ou consultez vos billets</p>
</div> </div>
<div class="space-y-6"> <div class="space-y-6">
<!-- Email Confirmation -->
<div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<span class="text-blue-600 font-semibold text-sm">1</span>
</div>
<div class="ml-4">
<h3 class="font-semibold text-gray-900 mb-1">Vérifiez votre email</h3>
<p class="text-gray-600 text-sm">Nous avons envoyé vos billets à <strong><%= current_user.email %></strong>. Vérifiez aussi vos spams.</p>
</div>
</div>
<!-- Download Tickets --> <!-- Download Tickets -->
<div class="flex items-start"> <div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center"> <div class="flex-shrink-0 w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<span class="text-purple-600 font-semibold text-sm">2</span> <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</div> </div>
<div class="ml-4"> <div class="ml-4">
<h3 class="font-semibold text-gray-900 mb-1">Téléchargez vos billets</h3> <h3 class="font-semibold text-gray-900 mb-1">Télécharger Vos Billets</h3>
<p class="text-gray-600 text-sm mb-3">Gardez vos billets sur votre téléphone ou imprimez-les.</p> <p class="text-gray-600 text-sm mb-3">Gardez vos billets sur votre téléphone ou imprimez-les.</p>
<div class="space-y-2"> <div class="space-y-2">
<% @order.tickets.each do |ticket| %> <% @order.tickets.each_with_index do |ticket, index| %>
<%= link_to ticket_download_path(ticket.qr_code), class: "inline-flex items-center px-3 py-2 border border-purple-300 rounded-md text-sm font-medium text-purple-700 bg-purple-50 hover:bg-purple-100 transition-colors mr-2 mb-2" do %> <div class="flex items-center justify-between p-3 border border-purple-200 rounded-lg bg-purple-50 hover:bg-purple-100 transition-colors">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <%= link_to ticket_path(ticket.qr_code), class: "flex-1 flex items-center text-purple-700 hover:text-purple-800 font-medium" do %>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> <div class="flex items-center justify-center w-6 h-6 bg-purple-200 text-purple-800 text-xs font-bold rounded-full mr-3">
</svg> <%= index + 1 %>
<%= ticket.first_name %> <%= ticket.last_name %> </div>
<% end %> <%= ticket.first_name %> <%= ticket.last_name %>
<% end %>
<%= link_to ticket_download_path(ticket.qr_code), class: "ml-3 p-2 text-purple-600 hover:text-purple-800 hover:bg-purple-200 rounded-lg transition-colors", title: "Télécharger le billet PDF" do %>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<% end %>
</div>
<% end %> <% end %>
</div> </div>
</div> </div>
@@ -141,46 +151,34 @@
<!-- Event Day --> <!-- Event Day -->
<div class="flex items-start"> <div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center"> <div class="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
<span class="text-green-600 font-semibold text-sm">3</span> <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div> </div>
<div class="ml-4"> <div class="ml-4">
<h3 class="font-semibold text-gray-900 mb-1">Le jour J</h3> <h3 class="font-semibold text-gray-900 mb-1">Le Jour de l'Événement</h3>
<p class="text-gray-600 text-sm">Présentez votre billet (QR code) à l'entrée. Arrivez un peu en avance !</p> <p class="text-gray-600 text-sm">Présentez votre billet (QR code) à l'entrée. Arrivez un peu en avance !</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Contact Support --> <!-- Navigation Actions -->
<div class="bg-gray-50 rounded-lg p-4 mt-8">
<h4 class="font-medium text-gray-900 mb-2">Besoin d'aide ?</h4>
<p class="text-gray-600 text-sm mb-3">Si vous avez des questions ou des problèmes avec votre commande, n'hésitez pas à nous contacter.</p>
<div class="space-y-2">
<%= link_to "mailto:support@example.com", class: "inline-flex items-center text-sm text-purple-600 hover:text-purple-700" do %>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
Contactez le support
<% end %>
</div>
</div>
<!-- Actions -->
<div class="border-t border-gray-200 pt-6 mt-6"> <div class="border-t border-gray-200 pt-6 mt-6">
<div class="space-y-3"> <div class="space-y-3">
<%= link_to dashboard_path, class: "block w-full text-center py-3 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors" do %> <%= link_to dashboard_path, class: "block w-full text-center py-3 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors" do %>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg> </svg>
Voir tous mes billets Retour au Tableau de Bord
</div> </div>
<% end %> <% end %>
<%= link_to events_path, class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %> <%= link_to event_path(@order.event.slug, @order.event), class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg> </svg>
Découvrir d'autres événements Voir l'Événement Complet
</div> </div>
<% end %> <% end %>
</div> </div>

8
app/views/orders/show.html.erb
View File

@@ -13,7 +13,7 @@
<!-- Event & Order Details --> <!-- Event & Order Details -->
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8"> <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
<div class="border-b border-gray-200 pb-6 mb-6"> <div class="border-b border-gray-200 pb-6 mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Détails de Votre Commande</h2> <h2 class="text-2xl font-bold text-gray-900 mb-2">Informations</h2>
<div class="flex items-center text-sm text-gray-600 space-x-4"> <div class="flex items-center text-sm text-gray-600 space-x-4">
<div class="flex items-center"> <div class="flex items-center">
<svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -33,7 +33,11 @@
<% end %> <% end %>
</svg> </svg>
<span class="<%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %> font-medium"> <span class="<%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %> font-medium">
<%= @order.status.humanize %> <%= case @order.status
when 'paid' then 'Payé'
when 'completed' then 'Terminé'
else @order.status.humanize
end %>
</span> </span>
</div> </div>
</div> </div>

142
app/views/pages/dashboard.html.erb
View File

@@ -1,28 +1,28 @@
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
<!-- Simplified header --> <!-- Simplified header -->
<div class="my-8"> <div class="my-6 sm:my-8">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div>
<h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100">Mon tableau de bord</h1> <h1 class="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-slate-100">Mon tableau de bord</h1>
<p class="text-slate-600 dark:text-slate-400 mt-2">Gérez vos commandes et accédez à vos billets</p> <p class="text-sm sm:text-base text-slate-600 dark:text-slate-400 mt-1">Gérez vos commandes et accédez à vos billets</p>
</div> </div>
<!-- Promoter Actions --> <!-- Promoter Actions -->
<% if current_user.promoter? %> <% if current_user.promoter? %>
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3"> <div class="flex flex-col xs:flex-row items-stretch xs:items-center gap-2">
<%= link_to promoter_events_path, class: "inline-flex items-center justify-center px-4 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm sm:text-base" do %> <%= link_to promoter_events_path, class: "inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm" do %>
<i data-lucide="calendar-plus" class="w-4 h-4 mr-2"></i> <i data-lucide="calendar-plus" class="w-4 h-4 mr-1 sm:mr-2"></i>
Mes Événements <span class="whitespace-nowrap">Mes Événements</span>
<% end %> <% end %>
<%= link_to new_promoter_event_path, class: "inline-flex items-center justify-center px-4 py-2 bg-black text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200 text-sm sm:text-base" do %> <%= link_to new_promoter_event_path, class: "inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2 bg-black text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200 text-sm" do %>
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> <i data-lucide="plus" class="w-4 h-4 mr-1 sm:mr-2"></i>
Créer un Événement <span class="whitespace-nowrap">Créer un Événement</span>
<% end %> <% end %>
</div> </div>
<% else %> <% else %>
<%= link_to events_path, class: "inline-flex items-center justify-center px-4 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm sm:text-base" do %> <%= link_to events_path, class: "inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm" do %>
<i data-lucide="search" class="w-4 h-4 mr-2"></i> <i data-lucide="search" class="w-4 h-4 mr-1 sm:mr-2"></i>
Découvrir des Événements <span class="whitespace-nowrap">Découvrir des Événements</span>
<% end %> <% end %>
<% end %> <% end %>
</div> </div>
@@ -30,42 +30,40 @@
<!-- Draft orders needing payment --> <!-- Draft orders needing payment -->
<% if @draft_orders.any? %> <% if @draft_orders.any? %>
<div class="card mb-8 border-orange-200 bg-orange-50"> <div class="card mb-6 sm:mb-8 border-orange-200 bg-orange-50">
<div class="card-header bg-orange-100 rounded-lg"> <div class="card-header bg-orange-100 rounded-lg">
<div class="mx-4 py-3 sm:py-4">
<div class="mx-4 py-4"> <h2 class="text-lg sm:text-2xl font-bold text-orange-900 flex items-center">
<h2 class="text-2xl font-bold text-orange-900 flex items-center"> <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 mr-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
Commandes en Attente de Paiement Commandes en Attente de Paiement
</h2> </h2>
<p class="text-orange-700 mt-1">Vous avez des commandes qui nécessitent un paiement</p> <p class="text-sm sm:text-base text-orange-700 mt-1">Vous avez des commandes qui nécessitent un paiement</p>
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="space-y-4"> <div class="space-y-4">
<% @draft_orders.each do |order| %> <% @draft_orders.each do |order| %>
<div class="bg-white rounded-lg p-4 border border-orange-200"> <div class="bg-white rounded-lg p-3 sm:p-4 border border-orange-200">
<div class="flex items-start justify-between mb-3"> <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
<div> <div>
<h3 class="font-semibold text-gray-900"><%= order.event.name %></h3> <h3 class="font-semibold text-gray-900 text-sm sm:text-base"><%= order.event.name %></h3>
<p class="text-sm text-gray-600"> <p class="text-xs sm:text-sm text-gray-600 mt-1">
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 sm:w-4 sm:h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg> </svg>
<%= order.event.start_time.strftime("%d %B %Y à %H:%M") %> <%= order.event.start_time.strftime("%d %B %Y à %H:%M") %>
</p> </p>
</div> </div>
<span class="text-sm font-medium text-orange-600 bg-orange-100 px-2 py-1 rounded-full"> <span class="text-xs sm:text-sm font-medium text-orange-600 bg-orange-100 px-2 py-1 rounded-full whitespace-nowrap">
Order #<%= order.id %> Order #<%= order.id %>
</span> </span>
</div> </div>
<div class="grid gap-2 mb-4"> <div class="grid gap-2 mb-4">
<% order.tickets.each do |ticket| %> <% order.tickets.each do |ticket| %>
<div class="flex items-center justify-between text-sm bg-gray-50 rounded p-2"> <div class="flex flex-col sm:flex-row sm:items-center justify-between text-xs sm:text-sm bg-gray-50 rounded p-2 gap-2">
<div> <div>
<span class="font-medium"><%= ticket.ticket_type.name %></span> <span class="font-medium"><%= ticket.ticket_type.name %></span>
<span class="text-gray-600">- <%= ticket.first_name %> <%= ticket.last_name %></span> <span class="text-gray-600">- <%= ticket.first_name %> <%= ticket.last_name %></span>
@@ -77,18 +75,20 @@
<% end %> <% end %>
</div> </div>
<div class="flex items-center justify-between"> <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<div class="text-sm text-gray-600"> <div class="text-xs sm:text-sm text-gray-600">
Tentatives: <%= order.payment_attempts %>/3 <div class="mb-1 sm:mb-0">
Tentatives: <%= order.payment_attempts %>/3
</div>
<% if order.expiring_soon? %> <% if order.expiring_soon? %>
<span class="text-orange-600 font-medium ml-2">⚠️ Expire dans <%= time_ago_in_words(order.expires_at) %></span> <span class="text-orange-600 font-medium">⚠️ Expire dans <%= time_ago_in_words(order.expires_at) %></span>
<% else %> <% else %>
<span class="text-gray-500 ml-2">Expire dans <%= time_ago_in_words(order.expires_at) %></span> <span class="text-gray-500">Expire dans <%= time_ago_in_words(order.expires_at) %></span>
<% end %> <% end %>
</div> </div>
<%= link_to retry_payment_order_path(order), method: :post, <%= link_to retry_payment_order_path(order), method: :post,
class: "inline-flex items-center px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-lg hover:bg-orange-700 transition-colors duration-200" do %> class: "inline-flex items-center px-3 py-2 sm:px-4 sm:py-2 bg-orange-600 text-white text-xs sm:text-sm font-medium rounded-lg hover:bg-orange-700 transition-colors duration-200 whitespace-nowrap" do %>
Reprendre le Paiement (€<%= order.total_amount_euros %>) Reprendre le Paiement (€<%= order.total_amount_euros %>)
<% end %> <% end %>
</div> </div>
@@ -100,11 +100,11 @@
<% end %> <% end %>
<!-- User's Orders Section --> <!-- User's Orders Section -->
<div class="card mb-8"> <div class="card mb-6 sm:mb-8">
<div class="card-header"> <div class="card-header">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Mes Commandes</h2> <h2 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100">Mes Commandes</h2>
<span class="text-sm text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-700 px-3 py-1 rounded-full"> <span class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-700 px-2 py-1 sm:px-3 sm:py-1 rounded-full">
<%= pluralize(@user_orders.count, 'commande') %> <%= pluralize(@user_orders.count, 'commande') %>
</span> </span>
</div> </div>
@@ -113,40 +113,40 @@
<% if @user_orders.any? %> <% if @user_orders.any? %>
<div class="space-y-4"> <div class="space-y-4">
<% @user_orders.each do |order| %> <% @user_orders.each do |order| %>
<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-4 hover:shadow-md transition-shadow"> <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-3 sm:p-4 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between mb-4"> <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
<div class="flex-1"> <div class="flex-1">
<div class="flex items-center space-x-3 mb-2"> <div class="flex flex-wrap items-center gap-2 mb-2">
<h3 class="font-semibold text-slate-900 dark:text-slate-100"><%= order.event.name %></h3> <h3 class="font-semibold text-slate-900 dark:text-slate-100 text-sm sm:text-base"><%= order.event.name %></h3>
<span class="text-xs px-2 py-1 rounded-full <%= order.status == 'paid' ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' : order.status == 'completed' ? 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100' %>"> <span class="text-xs px-2 py-1 rounded-full <%= order.status == 'paid' ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' : order.status == 'completed' ? 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100' %>">
<%= order.status.humanize %> <%= order.status.humanize %>
</span> </span>
</div> </div>
<div class="flex items-center space-x-4 text-sm text-slate-600 dark:text-slate-400 mb-3"> <div class="flex flex-wrap items-center gap-3 text-xs sm:text-sm text-slate-600 dark:text-slate-400 mb-2">
<div class="flex items-center"> <div class="flex items-center">
<i data-lucide="calendar" class="w-4 h-4 mr-1"></i> <i data-lucide="calendar" class="w-3 h-3 sm:w-4 sm:h-4 mr-1"></i>
<%= order.event.start_time.strftime("%d %B %Y à %H:%M") %> <%= order.event.start_time.strftime("%d %B %Y à %H:%M") %>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<i data-lucide="map-pin" class="w-4 h-4 mr-1"></i> <i data-lucide="map-pin" class="w-3 h-3 sm:w-4 sm:h-4 mr-1"></i>
<%= order.event.venue_name %> <%= order.event.venue_name %>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<i data-lucide="shopping-bag" class="w-4 h-4 mr-1"></i> <i data-lucide="shopping-bag" class="w-3 h-3 sm:w-4 sm:h-4 mr-1"></i>
<%= pluralize(order.tickets.count, 'billet') %> <%= pluralize(order.tickets.count, 'billet') %>
</div> </div>
</div> </div>
<div class="text-sm text-slate-500 dark:text-slate-400"> <div class="text-xs sm:text-sm text-slate-500 dark:text-slate-400 mt-2">
Order #<%= order.id %> • <%= order.created_at.strftime("%m/%d/%Y") %> • €<%= order.total_amount_euros %> Order #<%= order.id %> • <%= order.created_at.strftime("%m/%d/%Y") %> • €<%= order.total_amount_euros %>
</div> </div>
</div> </div>
<div class="flex items-center space-x-2 ml-4"> <div class="flex items-center">
<%= link_to order_path(order), <%= link_to order_path(order),
class: "inline-flex items-center px-3 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors duration-200" do %> class: "inline-flex items-center px-3 py-2 bg-purple-600 hover:bg-purple-700 text-white text-xs sm:text-sm font-medium rounded-lg transition-colors duration-200 whitespace-nowrap" do %>
<i data-lucide="eye" class="w-4 h-4 mr-2"></i> <i data-lucide="eye" class="w-3 h-3 sm:w-4 sm:h-4 mr-1"></i>
Voir les Détails Voir les Détails
<% end %> <% end %>
</div> </div>
@@ -156,11 +156,11 @@
<div class="border-t border-slate-200 dark:border-slate-600 pt-3"> <div class="border-t border-slate-200 dark:border-slate-600 pt-3">
<div class="grid gap-2"> <div class="grid gap-2">
<% order.tickets.limit(3).each do |ticket| %> <% order.tickets.limit(3).each do |ticket| %>
<div class="flex items-center justify-between text-sm bg-slate-50 dark:bg-slate-700 rounded p-2"> <div class="flex flex-col sm:flex-row sm:items-center justify-between text-xs sm:text-sm bg-slate-50 dark:bg-slate-700 rounded p-2 gap-2">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<span class="w-2 h-2 bg-green-500 rounded-full"></span> <span class="w-2 h-2 bg-green-500 rounded-full"></span>
<span class="font-medium"><%= ticket.ticket_type.name %></span> <span class="font-medium"><%= ticket.ticket_type.name %></span>
<span class="text-slate-500">- <%= ticket.first_name %> <%= ticket.last_name %></span> <span class="text-slate-500 text-xs">- <%= ticket.first_name %> <%= ticket.last_name %></span>
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<%= link_to ticket_download_path(ticket.qr_code), <%= link_to ticket_download_path(ticket.qr_code),
@@ -182,19 +182,19 @@
</div> </div>
<% if @user_orders.count >= 10 %> <% if @user_orders.count >= 10 %>
<div class="mt-6 text-center"> <div class="mt-4 sm:mt-6 text-center">
<%= link_to "Voir Toutes Mes Commandes", orders_path, class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium transition-colors duration-200" %> <%= link_to "Voir Toutes Mes Commandes", orders_path, class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium transition-colors duration-200 text-sm" %>
</div> </div>
<% end %> <% end %>
<% else %> <% else %>
<div class="text-center py-12"> <div class="text-center py-8 sm:py-12">
<div class="w-16 h-16 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-4"> <div class="w-12 h-12 sm:w-16 sm:h-16 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
<i data-lucide="shopping-bag" class="w-8 h-8 text-slate-400"></i> <i data-lucide="shopping-bag" class="w-6 h-6 sm:w-8 sm:h-8 text-slate-400"></i>
</div> </div>
<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-2">Aucune Commande</h3> <h3 class="text-base sm:text-lg font-medium text-slate-900 dark:text-slate-100 mb-1 sm:mb-2">Aucune Commande</h3>
<p class="text-slate-600 dark:text-slate-400 mb-6">Vous n'avez pas encore passé de commandes.</p> <p class="text-sm sm:text-base text-slate-600 dark:text-slate-400 mb-4 sm:mb-6">Vous n'avez pas encore passé de commandes.</p>
<%= link_to events_path, class: "inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors duration-200" do %> <%= link_to events_path, class: "inline-flex items-center px-3 py-2 sm:px-4 sm:py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm" do %>
<i data-lucide="search" class="w-4 h-4 mr-2"></i> <i data-lucide="search" class="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2"></i>
Découvrir des Événements Découvrir des Événements
<% end %> <% end %>
</div> </div>
@@ -204,22 +204,22 @@
<!-- Quick Events Preview - Simplified --> <!-- Quick Events Preview - Simplified -->
<% if @user_orders.any? %> <% if @user_orders.any? %>
<div class="my-8 card"> <div class="my-6 sm:my-8 card">
<div class="card-header"> <div class="card-header">
<div class="flex items-center justify-between"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<h2 class="text-xl font-bold text-slate-900 dark:text-slate-100">Découvrir d'autres événements</h2> <h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-slate-100">Découvrir d'autres événements</h2>
<%= link_to events_path, class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium text-sm transition-colors duration-200" do %> <%= link_to events_path, class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium text-sm transition-colors duration-200 whitespace-nowrap" do %>
Voir tout → Voir tout →
<% end %> <% end %>
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<% if @upcoming_preview_events.any? %> <% if @upcoming_preview_events.any? %>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> <div class="grid gap-3 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<% @upcoming_preview_events.each do |event| %> <% @upcoming_preview_events.each do |event| %>
<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-4 hover:shadow-md transition-shadow"> <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-3 sm:p-4 hover:shadow-md transition-shadow">
<h4 class="font-medium text-slate-900 dark:text-slate-100 mb-2"><%= event.name %></h4> <h4 class="font-medium text-slate-900 dark:text-slate-100 mb-2 text-sm sm:text-base"><%= event.name %></h4>
<div class="text-sm text-slate-600 dark:text-slate-400 space-y-1"> <div class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 space-y-1">
<div class="flex items-center"> <div class="flex items-center">
<i data-lucide="calendar" class="w-3 h-3 mr-1"></i> <i data-lucide="calendar" class="w-3 h-3 mr-1"></i>
<%= event.start_time.strftime("%d %B") %> <%= event.start_time.strftime("%d %B") %>
@@ -229,8 +229,8 @@
<%= event.venue_name %> <%= event.venue_name %>
</div> </div>
</div> </div>
<div class="mt-3"> <div class="mt-2 sm:mt-3">
<%= link_to event_path(event.slug, event), class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-sm font-medium" do %> <%= link_to event_path(event.slug, event), class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-xs sm:text-sm font-medium" do %>
Voir l'Événement → Voir l'Événement →
<% end %> <% end %>
</div> </div>
@@ -238,7 +238,7 @@
<% end %> <% end %>
</div> </div>
<% else %> <% else %>
<p class="text-slate-600 dark:text-slate-400">Aucun événement à venir pour le moment.</p> <p class="text-slate-600 dark:text-slate-400 text-sm">Aucun événement à venir pour le moment.</p>
<% end %> <% end %>
</div> </div>
</div> </div>