feat: Enhance user dashboard and order management
- Add orders index action to OrdersController with pagination support - Simplify dashboard to focus on user orders and actions - Redesign order show page with improved layout and ticket access - Remove complex event metrics in favor of streamlined order management - Add direct links to ticket downloads and better order navigation - Improve responsive design and user experience across order views 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kbe
106
app/views/orders/index.html.erb
Normal file
106
app/views/orders/index.html.erb
Normal file
@@ -0,0 +1,106 @@
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100">Toutes mes commandes</h1>
|
||||
<p class="text-slate-600 dark:text-slate-400 mt-2">Consultez l'historique de toutes vos commandes</p>
|
||||
</div>
|
||||
|
||||
<%= link_to dashboard_path, class: "inline-flex items-center px-4 py-2 bg-purple-100 hover:bg-purple-200 text-purple-700 font-medium rounded-lg transition-colors duration-200" do %>
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
|
||||
Retour au tableau de bord
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!-- Orders List -->
|
||||
<% if @orders.any? %>
|
||||
<div class="space-y-6">
|
||||
<% @orders.each do |order| %>
|
||||
<div class="card hover-lift">
|
||||
<div class="card-body">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-3 mb-2">
|
||||
<h3 class="font-semibold text-slate-900 dark:text-slate-100"><%= 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' %>">
|
||||
<%= order.status.humanize %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 text-sm text-slate-600 dark:text-slate-400 mb-3">
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="calendar" class="w-4 h-4 mr-1"></i>
|
||||
<%= order.event.start_time.strftime("%d %B %Y à %H:%M") %>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="map-pin" class="w-4 h-4 mr-1"></i>
|
||||
<%= order.event.venue_name %>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4 mr-1"></i>
|
||||
<%= pluralize(order.tickets.count, 'billet') %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">
|
||||
Commande #<%= order.id %> • <%= order.created_at.strftime("%d/%m/%Y") %> • <%= order.total_amount_euros %>€
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2 ml-4">
|
||||
<%= 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 %>
|
||||
<i data-lucide="eye" class="w-4 h-4 mr-2"></i>
|
||||
Voir détails
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick tickets preview -->
|
||||
<div class="border-t border-slate-200 dark:border-slate-600 pt-3">
|
||||
<div class="grid gap-2">
|
||||
<% 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 items-center space-x-2">
|
||||
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
|
||||
<span class="font-medium"><%= ticket.ticket_type.name %></span>
|
||||
<span class="text-slate-500">- <%= ticket.first_name %> <%= ticket.last_name %></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<%= link_to ticket_download_path(ticket.qr_code),
|
||||
class: "text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200" do %>
|
||||
<i data-lucide="download" class="w-3 h-3"></i>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if order.tickets.count > 3 %>
|
||||
<div class="text-xs text-slate-500 text-center">
|
||||
et <%= order.tickets.count - 3 %> autre<%= order.tickets.count - 3 > 1 ? 's' : '' %> billet<%= order.tickets.count - 3 > 1 ? 's' : '' %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-8">
|
||||
<%= paginate @orders %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="text-center 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">
|
||||
<i data-lucide="shopping-bag" class="w-8 h-8 text-slate-400"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-2">Aucune commande</h3>
|
||||
<p class="text-slate-600 dark:text-slate-400 mb-6">Vous n'avez encore passé aucune commande.</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 %>
|
||||
<i data-lucide="search" class="w-4 h-4 mr-2"></i>
|
||||
Découvrir les événements
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -1,102 +1,214 @@
|
||||
<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-purple-50 to-indigo-50 py-8">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="mb-8" aria-label="Breadcrumb">
|
||||
<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 %>
|
||||
<svg class="w-4 h-4 inline-block mr-1" 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"/>
|
||||
</svg>
|
||||
Accueil
|
||||
<% end %>
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
<!-- 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>
|
||||
<%= link_to events_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
|
||||
Événements
|
||||
<% end %>
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
<%= link_to event_path(@order.event.slug, @order.event), class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
|
||||
<%= @order.event.name %>
|
||||
<% end %>
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
<li class="font-medium text-gray-900" aria-current="page">Commande #<%= @order.id %></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
|
||||
<div class="border-b border-gray-200 pb-6 mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-2">Détails de la commande</h1>
|
||||
<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-1" 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>
|
||||
Commande #<%= @order.id %>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-1" 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.status.titleize %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Order Items -->
|
||||
<div class="space-y-4 mb-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Billets commandés</h3>
|
||||
<% @tickets.each do |ticket| %>
|
||||
<div class="flex items-center justify-between py-4 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"><%= 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="text-xs text-gray-500 mt-1">
|
||||
Statut: <%= ticket.status.titleize %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-lg font-semibold text-gray-900"><%= ticket.price_euros %>€</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<!-- Order Total -->
|
||||
<div class="border-t border-gray-200 pt-6">
|
||||
<div class="flex items-center justify-between text-lg">
|
||||
<span class="font-medium text-gray-900">Total</span>
|
||||
<span class="font-bold text-2xl text-purple-600"><%= @order.total_amount_euros %>€</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-2">TVA incluse</p>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="border-t border-gray-200 pt-6 mt-6">
|
||||
<div class="flex space-x-4">
|
||||
<%= link_to event_path(@order.event.slug, @order.event), class: "bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors" do %>
|
||||
<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>
|
||||
<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" 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 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>
|
||||
Retour à l'événement
|
||||
<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 <%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<% if @order.status == 'paid' || @order.status == 'completed' %>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
<% else %>
|
||||
<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"/>
|
||||
<% end %>
|
||||
</svg>
|
||||
<span class="<%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %> font-medium">
|
||||
<%= @order.status.humanize %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<% @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>
|
||||
<% if @order.status == 'paid' || @order.status == 'completed' %>
|
||||
<div class="flex items-center text-xs text-green-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="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Actif
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-lg font-semibold text-gray-900"><%= ticket.price_euros %>€</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if @order.can_retry_payment? %>
|
||||
<%= link_to checkout_order_path(@order), class: "bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors" do %>
|
||||
<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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
|
||||
</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 <%= @order.status == 'paid' || @order.status == 'completed' ? 'payé' : 'à payer' %></span>
|
||||
<span class="font-bold text-2xl <%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-purple-600' %>">
|
||||
<%= @order.total_amount_euros %>€
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions & Ticket Access -->
|
||||
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 h-fit">
|
||||
<% if @order.status == 'paid' || @order.status == 'completed' %>
|
||||
<!-- Ticket Access -->
|
||||
<div class="border-b border-gray-200 pb-6 mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-2">Accédez à Vos Billets</h2>
|
||||
<p class="text-sm text-gray-600">Téléchargez ou consultez vos billets</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Download Tickets -->
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
|
||||
<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>
|
||||
Procéder au paiement
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<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>
|
||||
<div class="space-y-2">
|
||||
<% @tickets.each_with_index do |ticket, index| %>
|
||||
<div class="flex items-center justify-between p-3 border border-purple-200 rounded-lg bg-purple-50 hover:bg-purple-100 transition-colors">
|
||||
<%= link_to ticket_path(ticket.qr_code), class: "flex-1 flex items-center text-purple-700 hover:text-purple-800 font-medium" do %>
|
||||
<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">
|
||||
<%= index + 1 %>
|
||||
</div>
|
||||
<%= 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 %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Day -->
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<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 class="ml-4">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% else %>
|
||||
<!-- 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>
|
||||
|
||||
<% if @order.can_retry_payment? %>
|
||||
<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 %>
|
||||
<% 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 %>
|
||||
<% 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>
|
||||
|
||||
@@ -1,39 +1,36 @@
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Hero section with metrics -->
|
||||
<div class="mt-4 mb-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100">Tableau de bord</h1>
|
||||
<!-- Simplified header -->
|
||||
<div class="my-8">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="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>
|
||||
</div>
|
||||
|
||||
<!-- Promoter Actions -->
|
||||
<% if current_user.promoter? %>
|
||||
<div class="flex items-center space-x-3">
|
||||
<%= link_to promoter_events_path, class: "inline-flex items-center px-4 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200" do %>
|
||||
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
|
||||
<%= 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 %>
|
||||
<i data-lucide="calendar-plus" class="w-4 h-4 mr-2"></i>
|
||||
Mes événements
|
||||
Mes Événements
|
||||
<% end %>
|
||||
<%= link_to new_promoter_event_path, class: "inline-flex items-center px-4 py-2 bg-black text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200" do %>
|
||||
<%= 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 %>
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i>
|
||||
Créer un événement
|
||||
Créer un Événement
|
||||
<% end %>
|
||||
</div>
|
||||
<% 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 %>
|
||||
<i data-lucide="search" class="w-4 h-4 mr-2"></i>
|
||||
Découvrir des Événements
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
|
||||
<%= render partial: 'components/metric_card', locals: { title: "Mes réservations", value: @booked_events, classes: "from-green-100 to-emerald-100" } %>
|
||||
|
||||
<%= render partial: 'components/metric_card', locals: { title: "Événements aujourd'hui", value: @events_today, classes: "from-blue-100 to-sky-100" } %>
|
||||
|
||||
<%= render partial: 'components/metric_card', locals: { title: "Événements demain", value: @events_tomorrow, classes: "from-purple-100 to-indigo-100" } %>
|
||||
|
||||
<%= render partial: 'components/metric_card', locals: { title: "À venir", value: @upcoming_events, classes: "from-orange-100 to-amber-100" } %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Draft orders needing payment -->
|
||||
<% if @draft_orders.any? %>
|
||||
<div class="card hover-lift mb-8 border-orange-200 bg-orange-50">
|
||||
<div class="card mb-8 border-orange-200 bg-orange-50">
|
||||
<div class="card-header bg-orange-100 rounded-lg">
|
||||
|
||||
<div class="mx-4 py-4">
|
||||
@@ -41,7 +38,7 @@
|
||||
<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"/>
|
||||
</svg>
|
||||
Commandes en attente de paiement
|
||||
Commandes en Attente de Paiement
|
||||
</h2>
|
||||
<p class="text-orange-700 mt-1">Vous avez des commandes qui nécessitent un paiement</p>
|
||||
</div>
|
||||
@@ -62,7 +59,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-orange-600 bg-orange-100 px-2 py-1 rounded-full">
|
||||
Commande #<%= order.id %>
|
||||
Order #<%= order.id %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -92,7 +89,7 @@
|
||||
|
||||
<%= 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 %>
|
||||
Reprendre le paiement (<%= order.total_amount_euros %>€)
|
||||
Reprendre le Paiement (€<%= order.total_amount_euros %>)
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,96 +99,148 @@
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<!-- User's booked events -->
|
||||
<div class="card hover-lift mb-8">
|
||||
<!-- User's Orders Section -->
|
||||
<div class="card mb-8">
|
||||
<div class="card-header">
|
||||
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Mes événements réservés</h2>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="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">
|
||||
<%= pluralize(@user_orders.count, 'commande') %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<% if @user_booked_events.any? %>
|
||||
<ul class="space-y-4">
|
||||
<% @user_booked_events.each do |event| %>
|
||||
<li>
|
||||
<%= render partial: 'components/event_item', locals: { event: event } %>
|
||||
</li>
|
||||
<% if @user_orders.any? %>
|
||||
<div class="space-y-4">
|
||||
<% @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="flex items-start justify-between mb-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-3 mb-2">
|
||||
<h3 class="font-semibold text-slate-900 dark:text-slate-100"><%= 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' %>">
|
||||
<%= order.status.humanize %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 text-sm text-slate-600 dark:text-slate-400 mb-3">
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="calendar" class="w-4 h-4 mr-1"></i>
|
||||
<%= order.event.start_time.strftime("%d %B %Y à %H:%M") %>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="map-pin" class="w-4 h-4 mr-1"></i>
|
||||
<%= order.event.venue_name %>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4 mr-1"></i>
|
||||
<%= pluralize(order.tickets.count, 'billet') %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">
|
||||
Order #<%= order.id %> • <%= order.created_at.strftime("%m/%d/%Y") %> • €<%= order.total_amount_euros %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2 ml-4">
|
||||
<%= 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 %>
|
||||
<i data-lucide="eye" class="w-4 h-4 mr-2"></i>
|
||||
Voir les Détails
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick tickets preview -->
|
||||
<div class="border-t border-slate-200 dark:border-slate-600 pt-3">
|
||||
<div class="grid gap-2">
|
||||
<% 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 items-center space-x-2">
|
||||
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
|
||||
<span class="font-medium"><%= ticket.ticket_type.name %></span>
|
||||
<span class="text-slate-500">- <%= ticket.first_name %> <%= ticket.last_name %></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<%= link_to ticket_download_path(ticket.qr_code),
|
||||
class: "text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200" do %>
|
||||
<i data-lucide="download" class="w-3 h-3"></i>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if order.tickets.count > 3 %>
|
||||
<div class="text-xs text-slate-500 text-center">
|
||||
et <%= pluralize(order.tickets.count - 3, 'autre billet') %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% if @booked_events > 5 %>
|
||||
</div>
|
||||
|
||||
<% if @user_orders.count >= 10 %>
|
||||
<div class="mt-6 text-center">
|
||||
<%= link_to "Voir toutes mes réservations", "#", 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" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="text-center py-8">
|
||||
<p class="text-slate-600 dark:text-slate-400 mb-4">Vous n'avez encore réservé aucun événement.</p>
|
||||
<%= link_to "Découvrir les événements", 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" %>
|
||||
<div class="text-center 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">
|
||||
<i data-lucide="shopping-bag" class="w-8 h-8 text-slate-400"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 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>
|
||||
<%= 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 %>
|
||||
<i data-lucide="search" class="w-4 h-4 mr-2"></i>
|
||||
Découvrir des Événements
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's events -->
|
||||
<div class="card hover-lift mb-8">
|
||||
<div class="card-header">
|
||||
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Évenements du jour</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<% if @today_events.any? %>
|
||||
<ul class="space-y-4">
|
||||
<% @today_events.each do |event| %>
|
||||
<li>
|
||||
<%= render partial: 'components/event_item', locals: { event: event } %>
|
||||
</li>
|
||||
<!-- Quick Events Preview - Simplified -->
|
||||
<% if @user_orders.any? %>
|
||||
<div class="my-8 card">
|
||||
<div class="card-header">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="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 %>
|
||||
Voir tout →
|
||||
<% end %>
|
||||
</ul>
|
||||
<% else %>
|
||||
<p class="text-slate-600 dark:text-slate-400">Aucun évenement aujourd'hui.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tomorrow's events -->
|
||||
<div class="card hover-lift mb-8">
|
||||
<div class="card-header">
|
||||
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Évenements de demain</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<% if @tomorrow_events.any? %>
|
||||
<ul class="space-y-4">
|
||||
<% @tomorrow_events.each do |event| %>
|
||||
<li>
|
||||
<%= render partial: 'components/event_item', locals: { event: event } %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% else %>
|
||||
<p class="text-slate-600 dark:text-slate-400">Aucune partie demain.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Other upcoming events with pagination -->
|
||||
<div class="card hover-lift">
|
||||
<div class="card-header">
|
||||
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Autres évenements à venir</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<% if @other_events.any? %>
|
||||
<ul class="space-y-4">
|
||||
<% @other_events.each do |event| %>
|
||||
<li>
|
||||
<%= render partial: 'components/event_item', locals: { event: event } %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-8">
|
||||
<%= paginate @other_events %>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="text-slate-600 dark:text-slate-400">Aucune autre partie à venir.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<% if @upcoming_preview_events.any? %>
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<% @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">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100 mb-2"><%= event.name %></h4>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400 space-y-1">
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="calendar" class="w-3 h-3 mr-1"></i>
|
||||
<%= event.start_time.strftime("%d %B") %>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="map-pin" class="w-3 h-3 mr-1"></i>
|
||||
<%= event.venue_name %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="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 %>
|
||||
Voir l'Événement →
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="text-slate-600 dark:text-slate-400">Aucun événement à venir pour le moment.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user