167 lines
7.5 KiB
Plaintext
167 lines
7.5 KiB
Plaintext
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Breadcrumb -->
|
|
<%= render 'components/breadcrumb', crumbs: [
|
|
{ name: 'Accueil', path: root_path },
|
|
{ name: 'Tableau de bord', path: dashboard_path },
|
|
{ name: "Commande ##{@order.id}", path: order_path(@order) },
|
|
{ name: "Billet ##{@ticket.id}", path: nil }
|
|
] %>
|
|
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
|
|
<!-- Ticket Header -->
|
|
<div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-8 py-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl md:text-3xl font-bold text-white mb-2">Billet électronique</h1>
|
|
<p class="text-purple-100">ID: #<%= @ticket.id %></p>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%=
|
|
case @ticket.status
|
|
when 'active' then 'bg-green-100 text-green-800'
|
|
when 'draft' then 'bg-yellow-100 text-yellow-800'
|
|
when 'used' then 'bg-gray-100 text-gray-800'
|
|
when 'expired' then 'bg-red-100 text-red-800'
|
|
when 'refunded' then 'bg-blue-100 text-blue-800'
|
|
else 'bg-gray-100 text-gray-800'
|
|
end %>">
|
|
<%=
|
|
case @ticket.status
|
|
when 'active' then 'Valide'
|
|
when 'draft' then 'En attente'
|
|
when 'used' then 'Utilisé'
|
|
when 'expired' then 'Expiré'
|
|
when 'refunded' then 'Remboursé'
|
|
else @ticket.status.humanize
|
|
end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Event Details -->
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-6">Détails de l'événement</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 mb-1">Événement</label>
|
|
<p class="text-lg font-semibold text-gray-900"><%= @event.name %></p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 mb-1">Date et heure</label>
|
|
<div class="flex items-center text-gray-900">
|
|
<i data-lucide="calendar" class="w-4 h-4 mr-2 text-gray-400"></i>
|
|
<%= @event.start_time.strftime("%d %B %Y") %><br>
|
|
<small class="text-gray-600"><%= @event.start_time.strftime("%H:%M") %></small>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 mb-1">Lieu</label>
|
|
<div class="flex items-center text-gray-900">
|
|
<i data-lucide="map-pin" class="w-4 h-4 mr-2 text-gray-400"></i>
|
|
<%= @event.venue_name %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 mb-1">Type de billet</label>
|
|
<p class="text-gray-900 font-medium"><%= @ticket.ticket_type.name %></p>
|
|
<p class="text-sm text-gray-600"><%= @ticket.ticket_type.description %></p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 mb-1">Prix</label>
|
|
<p class="text-xl font-bold text-gray-900">
|
|
<%= format_ticket_price(@ticket.price_cents) %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ticket Details -->
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-6">Informations du billet</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 mb-1">Prénom</label>
|
|
<p class="text-gray-900 font-medium"><%= @ticket.first_name %></p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 mb-1">Nom</label>
|
|
<p class="text-gray-900 font-medium"><%= @ticket.last_name %></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 mb-1">Date d'achat</label>
|
|
<p class="text-gray-900"><%= @ticket.created_at.strftime("%d %B %Y à %H:%M") %></p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-500 mb-1">QR Code</label>
|
|
<div class="bg-gray-50 rounded-lg p-4 text-center">
|
|
<div class="inline-block bg-white p-4 rounded-lg shadow-sm">
|
|
<div data-controller="qr-code" data-qr-code-data-value="<%= @ticket.qr_code %>" class="w-32 h-32">
|
|
<!-- Loading indicator -->
|
|
<div data-qr-code-target="loading" class="w-32 h-32 bg-gray-100 rounded flex items-center justify-center">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
|
|
</div>
|
|
<!-- QR code container -->
|
|
<div data-qr-code-target="container" class="w-32 h-32"></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-2 font-mono"><%= @ticket.qr_code %></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="mt-8 pt-6 border-t border-gray-200">
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<%= link_to order_path(@order),
|
|
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 %>
|
|
<i data-lucide="arrow-left" class="w-4 h-4 inline-block mr-2"></i>
|
|
Retour aux informations de commande
|
|
<% end %>
|
|
|
|
<% if @ticket.status == 'active' %>
|
|
<%= link_to ticket_download_path(@ticket.qr_code),
|
|
class: "flex-1 btn btn-primary 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 %>
|
|
<i data-lucide="download" class="w-4 h-4 inline-block mr-2"></i>
|
|
Télécharger le PDF
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Important Notice -->
|
|
<div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<div class="flex items-start">
|
|
<i data-lucide="info" class="w-5 h-5 text-blue-600 mr-2 mt-0.5"></i>
|
|
<div class="flex-1">
|
|
<h3 class="text-blue-800 font-medium mb-1">Informations importantes</h3>
|
|
<ul class="text-blue-700 text-sm space-y-1">
|
|
<li>• Présentez ce billet (ou son code QR) à l'entrée de l'événement</li>
|
|
<li>• Arrivez en avance pour éviter les files d'attente</li>
|
|
<li>• En cas de problème, contactez l'organisateur</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |