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

feat: Enhance user dashboard and order management

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

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

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