aperonight/app/views/orders/index.html.erb

<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-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"/>
      </svg>
      <%= link_to dashboard_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
        Tableau de bord
      <% 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">Toutes mes commandes</li>
    </ol>
  </nav>

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