feat: Internal invoice generation
- TODO: make use of Stripe invoice
This commit is contained in:
kbe
173
app/views/orders/invoice.html.erb
Normal file
173
app/views/orders/invoice.html.erb
Normal file
@@ -0,0 +1,173 @@
|
||||
<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 -->
|
||||
<nav class="flex mb-6" aria-label="Breadcrumb">
|
||||
<ol class="inline-flex items-center space-x-1 md:space-x-2 rounded-lg bg-white px-4 py-2 shadow-sm">
|
||||
<li class="inline-flex items-center">
|
||||
<%= link_to "Accueil", root_path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600" %>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<%= link_to "Tableau de bord", dashboard_path, class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<%= link_to "Commande ##{@order.id}", order_path(@order), class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="ml-1 text-sm font-medium text-purple-600 md:ml-2">Facture</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- 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 %>
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
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">AperoNight</h4>
|
||||
<div class="mt-2 space-y-1 text-sm text-purple-700">
|
||||
<p>123 Avenue des Événements</p>
|
||||
<p>75000 Paris, France</p>
|
||||
<p>contact@apero-night.fr</p>
|
||||
</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">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<%= @order.event.start_time.strftime("%d %B %Y à %H:%M") %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if @order.event.venue_name.present? %>
|
||||
<div class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<%= @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">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</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>
|
||||
Reference in New Issue
Block a user