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

<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 -->
    <%= render 'components/breadcrumb', crumbs: [
      { name: 'Accueil', path: root_path },
      { name: 'Tableau de bord', path: dashboard_path },
      { name: "Commande ##{@order.id}", path: order_path(@order) },
      { name: 'Facture', path: nil }
    ] %>

    <!-- Invoice Header -->
    <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
        <div>
          <h1 class="text-3xl font-bold text-gray-900 mb-2">Facture</h1>
          <p class="text-gray-600">Commande #<%= @order.id %> • <%= @order.created_at.strftime("%d %B %Y") %></p>
        </div>
        <div class="mt-4 md:mt-0">
          <% if @stripe_invoice_pdf_url %>
            <%= link_to @stripe_invoice_pdf_url, target: "_blank", class: "inline-flex items-center px-4 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors" do %>
              <i data-lucide="download" class="w-4 h-4 mr-2"></i>
              Télécharger la facture (PDF)
            <% end %>
          <% end %>
        </div>
      </div>

      <!-- Invoice Details -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        <!-- From -->
        <div>
          <h3 class="text-lg font-semibold text-gray-900 mb-3">Émis par</h3>
          <div class="bg-purple-50 rounded-lg p-4 border border-purple-200">
            <h4 class="font-semibold text-purple-900"><%= ENV.fetch("INVOICE_COMPANY_NAME", "AperoNight") %></h4>
            <div class="mt-2 space-y-1 text-sm text-purple-700">
              <% if ENV["INVOICE_COMPANY_ADDRESS_LINE_1"].present? %>
                <p><%= ENV["INVOICE_COMPANY_ADDRESS_LINE_1"] %></p>
              <% end %>
              <% if ENV["INVOICE_COMPANY_ADDRESS_LINE_2"].present? %>
                <p><%= ENV["INVOICE_COMPANY_ADDRESS_LINE_2"] %></p>
              <% end %>
              <% if ENV["INVOICE_COMPANY_EMAIL"].present? %>
                <p><%= ENV["INVOICE_COMPANY_EMAIL"] %></p>
              <% end %>
              <% if ENV["INVOICE_COMPANY_PHONE"].present? %>
                <p><%= ENV["INVOICE_COMPANY_PHONE"] %></p>
              <% end %>
              <% if ENV["INVOICE_COMPANY_VAT_NUMBER"].present? %>
                <p>TVA: <%= ENV["INVOICE_COMPANY_VAT_NUMBER"] %></p>
              <% end %>
              <% if ENV["INVOICE_COMPANY_SIRET"].present? %>
                <p>SIRET: <%= ENV["INVOICE_COMPANY_SIRET"] %></p>
              <% end %>
            </div>
          </div>
        </div>

        <!-- To -->
        <div>
          <h3 class="text-lg font-semibold text-gray-900 mb-3">Facturé à</h3>
          <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
            <h4 class="font-semibold text-gray-900">
              <%= @order.user.first_name %> <%= @order.user.last_name %>
            </h4>
            <div class="mt-2 space-y-1 text-sm text-gray-600">
              <p><%= @order.user.email %></p>
              <% if @order.user.company_name.present? %>
                <p><%= @order.user.company_name %></p>
              <% end %>
            </div>
          </div>
        </div>
      </div>

      <!-- Event Information -->
      <div class="mb-8">
        <h3 class="text-lg font-semibold text-gray-900 mb-3">Événement</h3>
        <div class="bg-indigo-50 rounded-lg p-4 border border-indigo-200">
          <h4 class="font-semibold text-indigo-900 text-lg"><%= @order.event.name %></h4>
          <div class="mt-2 space-y-1 text-sm text-indigo-700">
            <% if @order.event.start_time %>
              <div class="flex items-center">
                <i data-lucide="clock" class="w-4 h-4 mr-2"></i>
                <%= @order.event.start_time.strftime("%d %B %Y à %H:%M") %>
              </div>
            <% end %>
            <% if @order.event.venue_name.present? %>
              <div class="flex items-center">
                <i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
                <%= @order.event.venue_name %>
              </div>
            <% end %>
          </div>
        </div>
      </div>

      <!-- Items -->
      <div class="mb-8">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Détails de la facture</h3>
        <div class="overflow-hidden border border-gray-200 rounded-lg">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Quantité</th>
                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Prix unitaire</th>
                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <% @tickets.group_by(&:ticket_type).each do |ticket_type, tickets| %>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm font-medium text-gray-900"><%= ticket_type.name %></div>
                    <div class="text-sm text-gray-500"><%= ticket_type.description %></div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right"><%= tickets.count %></td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right"><%= "%.2f" % (ticket_type.price_cents / 100.0) %>€</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 text-right"><%= "%.2f" % (tickets.count * ticket_type.price_cents / 100.0) %>€</td>
                </tr>
              <% end %>
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Frais de service</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">1</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">1.00€</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 text-right">1.00€</td>
              </tr>
            </tbody>
            <tfoot class="bg-gray-50">
              <tr>
                <th colspan="3" scope="col" class="px-6 py-3 text-right text-sm font-medium text-gray-900 uppercase tracking-wider">Total</th>
                <th scope="col" class="px-6 py-3 text-right text-lg font-bold text-gray-900"><%= "%.2f" % @order.total_amount_euros %>€</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      <!-- Payment Information -->
      <div class="border-t border-gray-200 pt-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-3">Paiement</h3>
        <div class="flex items-center">
          <div class="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
            <i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
          </div>
          <div class="ml-4">
            <h4 class="font-medium text-gray-900">Paiement effectué</h4>
            <p class="text-sm text-gray-600">Commande #<%= @order.id %> payée le <%= @order.updated_at.strftime("%d %B %Y") %></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>