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

Update breadcrumbs to use dynamic component with new design system colors

Browse Source 
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
kbe
2025-09-08 17:51:11 +02:00
parent eefa6c3ce2
commit e4d778355e
6 changed files with 996 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/views/orders/show.html.erb
View File

@@ -1,36 +1,16 @@
<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>
<span class="ml-1 text-sm font-medium text-purple-600 md:ml-2">Commande #<%= @order.id %></span>
</div>
</li>
</ol>
</nav>
<%= render 'components/breadcrumb', crumbs: [
{ name: 'Accueil', path: root_path },
{ name: 'Tableau de bord', path: dashboard_path },
{ name: "Commande ##{@order.id}", path: nil }
] %>
<!-- Header -->
<div class="text-center mb-8">
<div class="mx-auto w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
<i data-lucide="file-text" class="w-8 h-8 text-purple-600"></i>
</div>
<h1 class="text-3xl font-bold text-gray-900 mb-2">Détails de la Commande</h1>
</div>
@@ -41,22 +21,14 @@
<h2 class="text-2xl font-bold text-gray-900 mb-2">Informations</h2>
<div class="flex items-center text-sm text-gray-600 space-x-4">
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
<i data-lucide="file-text" class="w-4 h-4 mr-2 flex-shrink-0"></i>
<div class="flex flex-col">
<span class="font-medium">Commande n°<%= @order.id %></span>
<span class="text-xs text-gray-500"><%= @order.created_at.strftime("%d %B %Y") %></span>
</div>
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-1 <%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<% if @order.status == 'paid' || @order.status == 'completed' %>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
<% else %>
<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"/>
<% end %>
</svg>
<i data-lucide="<%= @order.status == 'paid' || @order.status == 'completed' ? 'check-circle' : 'clock' %>" class="w-4 h-4 mr-1 <%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %>"></i>
<span class="<%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %> font-medium">
<%= case @order.status
when 'paid' then 'Payé'
@@ -76,26 +48,19 @@
<div class="mt-2 space-y-1 text-sm text-purple-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>
<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">
<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>
<i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
<%= @order.event.venue_name %>
</div>
<% end %>
<% if @order.event.venue_address.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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
</svg>
<i data-lucide="navigation" class="w-4 h-4 mr-2"></i>
<%= @order.event.venue_address %>
</div>
<% end %>
@@ -112,16 +77,12 @@
<div class="flex-1 min-w-0">
<h4 class="text-sm font-medium text-gray-900 truncate"><%= ticket.ticket_type.name %></h4>
<div class="flex items-center text-xs text-gray-500 mt-1">
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<i data-lucide="user" class="w-3 h-3 mr-1"></i>
<%= ticket.first_name %> <%= ticket.last_name %>
</div>
<% if @order.status == 'paid' || @order.status == 'completed' %>
<div class="flex items-center text-xs text-green-600 mt-1">
<svg class="w-3 h-3 mr-1" 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>
<i data-lucide="check-circle" class="w-3 h-3 mr-1"></i>
Actif
</div>
<% end %>
@@ -158,18 +119,14 @@
<div class="border-t border-gray-200 pt-6 mt-6">
<div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
<i data-lucide="file-text" class="w-4 h-4 text-blue-600"></i>
</div>
<div class="ml-4">
<h3 class="font-semibold text-gray-900 mb-1">Consulter la Facture</h3>
<p class="text-gray-600 text-sm mb-3">Téléchargez ou consultez la facture de votre commande.</p>
<div class="mt-2">
<%= link_to invoice_order_path(@order), class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-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="M9 12h6m-6 4h6m2 5H7a2 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>
<i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
Voir la facture
<% end %>
</div>
@@ -192,9 +149,7 @@
<!-- Download Tickets -->
<div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-purple-600" 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>
<i data-lucide="download" class="w-4 h-4 text-purple-600"></i>
</div>
<div class="ml-4">
<h3 class="font-semibold text-gray-900 mb-1">Télécharger Vos Billets</h3>
@@ -209,9 +164,7 @@
<%= ticket.first_name %> <%= ticket.last_name %>
<% end %>
<%= link_to ticket_download_path(ticket.qr_code), class: "ml-3 p-2 text-purple-600 hover:text-purple-800 hover:bg-purple-200 rounded-lg transition-colors", title: "Télécharger le billet PDF" do %>
<svg class="w-4 h-4" 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>
<i data-lucide="download" class="w-4 h-4"></i>
<% end %>
</div>
<% end %>
@@ -222,9 +175,7 @@
<!-- Event Day -->
<div class="flex items-start">
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
</div>
<div class="ml-4">
<h3 class="font-semibold text-gray-900 mb-1">Le Jour de l'Événement</h3>
@@ -243,9 +194,7 @@
<div class="mb-6">
<%= link_to checkout_order_path(@order), class: "block w-full text-center py-3 px-4 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition-colors" do %>
<div class="flex items-center justify-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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
</svg>
<i data-lucide="credit-card" class="w-4 h-4 mr-2"></i>
Procéder au Paiement
</div>
<% end %>
@@ -258,17 +207,13 @@
<div class="space-y-3">
<%= link_to dashboard_path, class: "block w-full text-center py-3 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors" do %>
<div class="flex items-center justify-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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
Retour au tableau de bord
</div>
<% end %>
<%= link_to event_path(@order.event.slug, @order.event), class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %>
<div class="flex items-center justify-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="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>
<i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
Voir la page d'évenement
</div>
<% end %>
@@ -277,4 +222,4 @@
</div>
</div>
</div>
</div>
</div>