aperonight/app/views/pages/dashboard.html.erb

<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Hero section with metrics -->
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-6">Tableau de bord</h1>
    <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 tickets needing payment -->
  <% if @draft_tickets.any? %>
    <div class="card hover-lift mb-8 border-orange-200 bg-orange-50">
      <div class="card-header bg-orange-100 rounded-lg">

        <div class="mx-4 py-4">
          <h2 class="text-2xl font-bold text-orange-900 flex items-center">
            <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>
            Billets en attente de paiement
          </h2>
          <p class="text-orange-700 mt-1">Vous avez des billets qui nécessitent un paiement</p>
        </div>

      </div>
      <div class="card-body">
        <div class="space-y-4">
          <% @draft_tickets.group_by(&:event).each do |event, tickets| %>
            <div class="bg-white rounded-lg p-4 border border-orange-200">
              <div class="flex items-start justify-between mb-3">
                <div>
                  <h3 class="font-semibold text-gray-900"><%= event.name %></h3>
                  <p class="text-sm text-gray-600">
                    <svg class="w-4 h-4 inline mr-1" 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>
                    <%= event.start_time.strftime("%d %B %Y à %H:%M") %>
                  </p>
                </div>
                <span class="text-sm font-medium text-orange-600 bg-orange-100 px-2 py-1 rounded-full">
                  <%= tickets.count %> billet<%= 's' if tickets.count > 1 %>
                </span>
              </div>

              <div class="grid gap-2 mb-4">
                <% tickets.each do |ticket| %>
                  <div class="flex items-center justify-between text-sm bg-gray-50 rounded p-2">
                    <div>
                      <span class="font-medium"><%= ticket.ticket_type.name %></span>
                      <span class="text-gray-600">- <%= ticket.first_name %> <%= ticket.last_name %></span>
                    </div>
                    <div class="flex items-center space-x-2">
                      <span class="text-gray-600">Expire <%= time_ago_in_words(ticket.expires_at) %></span>
                      <span class="font-medium text-gray-900"><%= number_to_currency(ticket.price_euros, unit: "€") %></span>
                    </div>
                  </div>
                <% end %>
              </div>

              <div class="flex items-center justify-between">
                <div class="text-sm text-gray-600">
                  <% max_attempts = tickets.map(&:payment_attempts).max %>
                  Tentatives: <%= max_attempts %>/3
                  <% if tickets.any?(&:expiring_soon?) %>
                    <span class="text-orange-600 font-medium ml-2">⚠️ Expire bientôt</span>
                  <% end %>
                </div>

                <%= form_tag ticket_retry_payment_path(event.slug, event.id), method: :post do %>
                  <%= hidden_field_tag :ticket_ids, tickets.map(&:id).join(',') %>
                  <%= submit_tag "Reprendre le paiement",
                      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" %>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  <% end %>

  <!-- User's booked 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">Mes événements réservés</h2>
    </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>
          <% end %>
        </ul>
        <% if @booked_events > 5 %>
          <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" %>
          </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>
      <% 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>
          <% 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>
</div>