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
2025-09-06 22:55:27 +02:00
parent f1750cb887
commit e86b84ba61
6 changed files with 481 additions and 208 deletions

View 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>