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

refactor: Convert ticket views to use only Tailwind CSS

Browse Source 
- Rewrite ticket show view to use pure Tailwind CSS classes
- Update color scheme from gray-* to slate-* for modern look
- Replace indigo gradients with violet for better consistency
- Enhance spacing, typography, and visual hierarchy
- Add ticket_view route and controller action for PDF-like display
- Implement responsive QR code display with proper sizing
- Update status badge colors for better semantic meaning
- Improve accessibility with better button layouts and focus states

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kbe
2025-09-06 00:33:24 +02:00
parent 7ef934d8a8
commit bc47027c22
5 changed files with 234 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/stylesheets/application.postcss.css
View File

@@ -13,3 +13,16 @@
/* Import pages */ /* Import pages */
@import "pages/home"; @import "pages/home";
/* QR Code Styles */
.qr-code-container {
@apply flex items-center justify-center;
}
.qr-code-container svg {
max-width: 100% !important;
max-height: 100% !important;
width: 208px !important;
height: 208px !important;
display: block !important;
}

19
app/controllers/tickets_controller.rb
View File

@@ -3,7 +3,7 @@
# This controller now primarily handles legacy redirects and backward compatibility # This controller now primarily handles legacy redirects and backward compatibility
# Most ticket creation functionality has been moved to OrdersController # Most ticket creation functionality has been moved to OrdersController
class TicketsController < ApplicationController class TicketsController < ApplicationController
before_action :authenticate_user!, only: [ :payment_success, :payment_cancel, :show, :download_ticket ] before_action :authenticate_user!, only: [ :payment_success, :payment_cancel, :show, :ticket_view, :download_ticket ]
before_action :set_event, only: [ :checkout, :retry_payment ] before_action :set_event, only: [ :checkout, :retry_payment ]
@@ -59,6 +59,23 @@ class TicketsController < ApplicationController
redirect_to dashboard_path, alert: "Billet non trouvé" redirect_to dashboard_path, alert: "Billet non trouvé"
end end
# Display ticket in PDF-like format
def ticket_view
@ticket = Ticket.joins(order: :user).includes(:event, :ticket_type, order: :user).find_by(
tickets: { id: params[:ticket_id] },
orders: { user_id: current_user.id }
)
if @ticket.nil?
redirect_to dashboard_path, alert: "Billet non trouvé ou vous n'avez pas l'autorisation d'accéder à ce billet"
return
end
@event = @ticket.event
rescue ActiveRecord::RecordNotFound
redirect_to dashboard_path, alert: "Billet non trouvé"
end
# Download PDF ticket - only accessible by ticket owner # Download PDF ticket - only accessible by ticket owner
# User must be authenticated to download ticket # User must be authenticated to download ticket
# TODO: change ID to an unique identifier (UUID) # TODO: change ID to an unique identifier (UUID)

149
app/views/tickets/show.html.erb
View File

@@ -1,30 +1,30 @@
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8"> <div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 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">
<!-- Breadcrumb --> <!-- Breadcrumb -->
<nav class="mb-8" aria-label="Breadcrumb"> <nav class="mb-8" aria-label="Breadcrumb">
<ol class="flex items-center space-x-2 text-sm"> <ol class="flex items-center space-x-2 text-sm">
<%= link_to root_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %> <%= link_to root_path, class: "text-slate-500 hover:text-purple-600 transition-colors duration-200" do %>
<svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<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" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
</svg> </svg>
Accueil Accueil
<% end %> <% end %>
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
</svg> </svg>
<%= link_to dashboard_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %> <%= link_to dashboard_path, class: "text-slate-500 hover:text-purple-600 transition-colors duration-200" do %>
Tableau de bord Tableau de bord
<% end %> <% end %>
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
</svg> </svg>
<li class="font-medium text-gray-900" aria-current="page">Billet #<%= @ticket.id %></li> <li class="font-medium text-slate-900" aria-current="page">Billet #<%= @ticket.id %></li>
</ol> </ol>
</nav> </nav>
<div class="bg-white rounded-2xl shadow-xl overflow-hidden"> <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200">
<!-- Ticket Header --> <!-- Ticket Header -->
<div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-8 py-6"> <div class="bg-gradient-to-r from-purple-600 to-violet-600 px-8 py-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<h1 class="text-2xl md:text-3xl font-bold text-white mb-2">Billet Électronique</h1> <h1 class="text-2xl md:text-3xl font-bold text-white mb-2">Billet Électronique</h1>
@@ -33,12 +33,12 @@
<div class="text-right"> <div class="text-right">
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%= <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%=
case @ticket.status case @ticket.status
when 'active' then 'bg-green-100 text-green-800' when 'active' then 'bg-emerald-100 text-emerald-800'
when 'draft' then 'bg-yellow-100 text-yellow-800' when 'draft' then 'bg-amber-100 text-amber-800'
when 'used' then 'bg-gray-100 text-gray-800' when 'used' then 'bg-slate-100 text-slate-800'
when 'expired' then 'bg-red-100 text-red-800' when 'expired' then 'bg-red-100 text-red-800'
when 'refunded' then 'bg-blue-100 text-blue-800' when 'refunded' then 'bg-sky-100 text-sky-800'
else 'bg-gray-100 text-gray-800' else 'bg-slate-100 text-slate-800'
end %>"> end %>">
<%= <%=
case @ticket.status case @ticket.status
@@ -58,47 +58,49 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Event Details --> <!-- Event Details -->
<div> <div>
<h2 class="text-xl font-semibold text-gray-900 mb-6">Détails de l'événement</h2> <h2 class="text-xl font-semibold text-slate-900 mb-6">Détails de l'événement</h2>
<div class="space-y-4"> <div class="space-y-6">
<div> <div>
<label class="block text-sm font-medium text-gray-500 mb-1">Événement</label> <label class="block text-sm font-medium text-slate-500 mb-2">Événement</label>
<p class="text-lg font-semibold text-gray-900"><%= @event.name %></p> <p class="text-lg font-semibold text-slate-900"><%= @event.name %></p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-500 mb-1">Date et heure</label> <label class="block text-sm font-medium text-slate-500 mb-2">Date et heure</label>
<div class="flex items-center text-gray-900"> <div class="flex items-start text-slate-900">
<svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mr-2 mt-0.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<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" 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>
<%= @event.start_time.strftime("%d %B %Y") %><br> <div>
<small class="text-gray-600"><%= @event.start_time.strftime("%H:%M") %></small> <div class="font-medium"><%= @event.start_time.strftime("%d %B %Y") %></div>
<div class="text-sm text-slate-600"><%= @event.start_time.strftime("%H:%M") %></div>
</div>
</div> </div>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-500 mb-1">Lieu</label> <label class="block text-sm font-medium text-slate-500 mb-2">Lieu</label>
<div class="flex items-center text-gray-900"> <div class="flex items-center text-slate-900">
<svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<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" 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"/> <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg> </svg>
<%= @event.venue_name %> <span class="font-medium"><%= @event.venue_name %></span>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-500 mb-1">Type de billet</label> <label class="block text-sm font-medium text-slate-500 mb-2">Type de billet</label>
<p class="text-gray-900 font-medium"><%= @ticket.ticket_type.name %></p> <p class="text-slate-900 font-medium mb-1"><%= @ticket.ticket_type.name %></p>
<p class="text-sm text-gray-600"><%= @ticket.ticket_type.description %></p> <p class="text-sm text-slate-600"><%= @ticket.ticket_type.description %></p>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-500 mb-1">Prix</label> <label class="block text-sm font-medium text-slate-500 mb-2">Prix</label>
<p class="text-xl font-bold text-gray-900"> <p class="text-2xl font-bold text-slate-900">
<%= number_to_currency(@ticket.price_euros, unit: "€", separator: ",", delimiter: " ", format: "%n %u") %> <%= number_to_currency(@ticket.price_euros, unit: "€", separator: ",", delimiter: " ", format: "%n %u") %>
</p> </p>
</div> </div>
@@ -107,38 +109,36 @@
<!-- Ticket Details --> <!-- Ticket Details -->
<div> <div>
<h2 class="text-xl font-semibold text-gray-900 mb-6">Informations du billet</h2> <h2 class="text-xl font-semibold text-slate-900 mb-6">Informations du billet</h2>
<div class="space-y-4"> <div class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-500 mb-1">Prénom</label> <label class="block text-sm font-medium text-slate-500 mb-2">Prénom</label>
<p class="text-gray-900 font-medium"><%= @ticket.first_name %></p> <p class="text-slate-900 font-medium"><%= @ticket.first_name %></p>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-500 mb-1">Nom</label> <label class="block text-sm font-medium text-slate-500 mb-2">Nom</label>
<p class="text-gray-900 font-medium"><%= @ticket.last_name %></p> <p class="text-slate-900 font-medium"><%= @ticket.last_name %></p>
</div> </div>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-500 mb-1">Date d'achat</label> <label class="block text-sm font-medium text-slate-500 mb-2">Date d'achat</label>
<p class="text-gray-900"><%= @ticket.created_at.strftime("%d %B %Y à %H:%M") %></p> <p class="text-slate-900 font-medium"><%= @ticket.created_at.strftime("%d %B %Y à %H:%M") %></p>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-500 mb-1">Code QR</label> <label class="block text-sm font-medium text-slate-500 mb-2">QR Code</label>
<div class="bg-gray-50 rounded-lg p-4 text-center"> <div class="bg-slate-50 rounded-xl p-6 text-center border border-slate-200">
<div class="inline-block bg-white p-4 rounded-lg shadow-sm"> <div class="inline-block bg-white p-4 rounded-xl shadow-sm border border-slate-200">
<!-- QR Code would be generated here --> <div class="w-64 h-64 flex items-center justify-center">
<div class="w-32 h-32 bg-gray-200 rounded flex items-center justify-center"> <%= raw @ticket.generate_qr_svg %>
<svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/>
</svg>
</div> </div>
</div> </div>
<p class="text-xs text-gray-500 mt-2 font-mono"><%= @ticket.qr_code %></p> <p class="text-xs text-slate-500 mt-3 font-mono tracking-wider"><%= @ticket.qr_code[0..7]... %></p>
<p class="text-xs text-slate-400 mt-1">Scannez ce code à l'entrée</p>
</div> </div>
</div> </div>
</div> </div>
@@ -146,21 +146,21 @@
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="mt-8 pt-6 border-t border-gray-200"> <div class="mt-8 pt-6 border-t border-slate-200">
<div class="flex flex-col sm:flex-row gap-4"> <div class="flex flex-col sm:flex-row gap-4">
<%= link_to dashboard_path, <%= link_to dashboard_path,
class: "px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 text-center font-medium transition-colors duration-200" do %> class: "flex items-center justify-center px-6 py-3 border border-slate-300 text-slate-700 rounded-xl hover:bg-slate-50 hover:border-slate-400 font-medium transition-all duration-200" do %>
<svg class="w-4 h-4 inline-block 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" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/> <path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
</svg> </svg>
Retour au tableau de bord Retour au tableau de bord
<% end %> <% end %>
<% if @ticket.status == 'active' %> <% if @ticket.status == 'active' %>
<%= link_to download_ticket_path(@ticket.id), <%= link_to download_ticket_path(@ticket.id),
class: "flex-1 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5 text-center" do %> class: "flex-1 flex items-center justify-center bg-gradient-to-r from-purple-600 to-violet-600 hover:from-purple-700 hover:to-violet-700 text-white font-medium py-3 px-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5" do %>
<svg class="w-4 h-4 inline-block 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" stroke-width="2">
<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"/> <path stroke-linecap="round" stroke-linejoin="round" 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> </svg>
Télécharger le PDF Télécharger le PDF
<% end %> <% end %>
@@ -169,17 +169,26 @@
</div> </div>
<!-- Important Notice --> <!-- Important Notice -->
<div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4"> <div class="mt-6 bg-sky-50 border border-sky-200 rounded-xl p-6">
<div class="flex items-start"> <div class="flex items-start">
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 text-sky-600 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
<div class="flex-1"> <div class="flex-1">
<h3 class="text-blue-800 font-medium mb-1">Informations importantes</h3> <h3 class="text-sky-800 font-semibold mb-2">Informations importantes</h3>
<ul class="text-blue-700 text-sm space-y-1"> <ul class="text-sky-700 text-sm space-y-2">
<li>• Présentez ce billet (ou son code QR) à l'entrée de l'événement</li> <li class="flex items-start">
<li>• Arrivez en avance pour éviter les files d'attente</li> <span class="w-1.5 h-1.5 bg-sky-600 rounded-full mt-2 mr-3 flex-shrink-0"></span>
<li>• En cas de problème, contactez l'organisateur</li> Présentez ce billet (ou son code QR) à l'entrée de l'événement
</li>
<li class="flex items-start">
<span class="w-1.5 h-1.5 bg-sky-600 rounded-full mt-2 mr-3 flex-shrink-0"></span>
Arrivez en avance pour éviter les files d'attente
</li>
<li class="flex items-start">
<span class="w-1.5 h-1.5 bg-sky-600 rounded-full mt-2 mr-3 flex-shrink-0"></span>
En cas de problème, contactez l'organisateur
</li>
</ul> </ul>
</div> </div>
</div> </div>

118
app/views/tickets/ticket_view.html.erb Normal file
View File

@@ -0,0 +1,118 @@
<% content_for :title, "Billet ##{@ticket.id} - #{@ticket.event.name}" %>
<div class="min-h-screen bg-slate-100 py-8">
<div class="max-w-md mx-auto px-4">
<!-- Ticket Card -->
<div class="max-w-md bg-white rounded-xl shadow-2xl overflow-hidden mx-auto border border-slate-200">
<!-- Header -->
<div class="bg-gradient-to-r from-purple-700 to-violet-600 text-center py-6 px-6">
<h1 class="text-2xl font-bold text-white mb-2">ApéroNight</h1>
<div class="w-16 h-0.5 bg-purple-200 mx-auto rounded-full"></div>
</div>
<!-- Event Name -->
<div class="text-center py-4 px-6 bg-purple-50 border-b border-purple-100">
<h2 class="text-xl font-bold text-slate-900 leading-tight"><%= @ticket.event.name %></h2>
</div>
<!-- Ticket Information -->
<div class="p-6 space-y-4">
<!-- Ticket Holder -->
<div class="flex justify-between items-center py-2 border-b border-slate-100">
<span class="text-sm font-medium text-slate-600">Porteur du billet:</span>
<span class="text-sm font-semibold text-slate-900 text-right"><%= @ticket.first_name %> <%= @ticket.last_name %></span>
</div>
<!-- Ticket Type -->
<div class="flex justify-between items-center py-2 border-b border-slate-100">
<span class="text-sm font-medium text-slate-600">Type de billet:</span>
<span class="text-sm font-semibold text-slate-900"><%= @ticket.ticket_type.name %></span>
</div>
<!-- Price -->
<div class="flex justify-between items-center py-2 border-b border-slate-100">
<span class="text-sm font-medium text-slate-600">Prix:</span>
<span class="text-sm font-semibold text-slate-900">
<%= number_to_currency(@ticket.price_euros, unit: "€", separator: ",", delimiter: " ", format: "%n %u") %>
</span>
</div>
<!-- Date & Time -->
<div class="flex justify-between items-center py-2 border-b border-slate-100">
<span class="text-sm font-medium text-slate-600">Date & Heure:</span>
<div class="text-right">
<div class="text-sm font-semibold text-slate-900"><%= @ticket.event.start_time.strftime("%d %B %Y") %></div>
<div class="text-xs text-slate-600"><%= @ticket.event.start_time.strftime("%H:%M") %></div>
</div>
</div>
<!-- Venue -->
<div class="py-2 border-b border-slate-100">
<span class="text-sm font-medium text-slate-600 block mb-1">Lieu :</span>
<div class="text-sm font-semibold text-slate-900"><%= @ticket.event.venue_name %></div>
<% if @ticket.event.venue_address.present? %>
<div class="text-xs text-slate-600 mt-1"><%= @ticket.event.venue_address %></div>
<% end %>
</div>
</div>
<!-- QR Code Section -->
<div class="bg-slate-50 p-6 text-center border-t border-slate-200">
<h3 class="text-sm font-semibold text-slate-900 mb-4">Code QR du billet</h3>
<div class="inline-block bg-white p-6 rounded-xl shadow-sm border border-slate-200">
<div class="w-52 h-52 flex items-center justify-center qr-code-container">
<%= raw @ticket.generate_qr_svg %>
</div>
</div>
<p class="text-xs text-slate-500 mt-3 font-mono tracking-wider">QR: <%= @ticket.qr_code[0..7] %>...</p>
</div>
<!-- Footer Notice -->
<div class="bg-slate-100 px-6 py-4 text-center border-t border-slate-200">
<div class="space-y-2">
<p class="text-xs text-slate-600">Ce billet est valide pour une seule entrée.</p>
<p class="text-xs text-slate-600">Présentez ce billet à l'entrée du lieu.</p>
<div class="pt-2 border-t border-slate-200">
<p class="text-xs text-slate-500">
Généré le <%= Time.current.strftime('%d %B %Y à %H:%M') %>
</p>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="p-4 bg-white border-t border-slate-200">
<div class="flex space-x-2">
<%= link_to ticket_path(@ticket),
class: "flex-1 flex items-center justify-center bg-slate-100 hover:bg-slate-200 text-slate-700 py-2.5 px-3 rounded-lg text-sm font-medium transition-colors duration-200" do %>
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
Vue détaillée
<% end %>
<% if @ticket.status == 'active' %>
<%= link_to download_ticket_path(@ticket.id),
class: "flex-1 flex items-center justify-center bg-purple-600 hover:bg-purple-700 text-white py-2.5 px-3 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm hover:shadow-md" do %>
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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>
PDF
<% end %>
<% end %>
</div>
</div>
</div>
<!-- Navigation -->
<div class="text-center mt-6">
<%= link_to dashboard_path, class: "inline-flex items-center text-purple-600 hover:text-purple-800 text-sm font-medium transition-colors duration-200" do %>
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
</svg>
Retour au tableau de bord
<% end %>
</div>
</div>
</div>

1
config/routes.rb
View File

@@ -61,6 +61,7 @@ Rails.application.routes.draw do
get "tickets/checkout/events/:slug.:id", to: "tickets#checkout", as: "ticket_checkout" get "tickets/checkout/events/:slug.:id", to: "tickets#checkout", as: "ticket_checkout"
post "tickets/retry/events/:slug.:id", to: "tickets#retry_payment", as: "ticket_retry_payment" post "tickets/retry/events/:slug.:id", to: "tickets#retry_payment", as: "ticket_retry_payment"
get "tickets/:ticket_id", to: "tickets#show", as: "ticket" get "tickets/:ticket_id", to: "tickets#show", as: "ticket"
get "tickets/:ticket_id/view", to: "tickets#ticket_view", as: "ticket_view"
get "tickets/:ticket_id/download", to: "tickets#download_ticket", as: "download_ticket" get "tickets/:ticket_id/download", to: "tickets#download_ticket", as: "download_ticket"
# === Promoter Routes === # === Promoter Routes ===