feat: Implement complete event ticketing system with Stripe integration and email confirmations

- Enhanced events index page with improved visual design and better information display
- Completely redesigned event show page with modern layout, ticket selection, and checkout functionality
- Implemented Stripe payment processing for ticket purchases
- Created ticket generation system with PDF tickets and QR codes
- Added email confirmation system with ticket attachments
- Updated database configuration to use SQLite for easier development setup
- Fixed gem dependencies and resolved conflicts
- Improved error handling throughout the checkout process
- Enhanced Stimulus controller for ticket cart management
- Added proper redirect handling for successful and cancelled payments

app/controllers/events_controller.rb

@@ -1,26 +1,28 @@
 class EventsController < ApplicationController
+  before_action :authenticate_user!, only: [:checkout, :payment_success, :download_ticket]
+  before_action :set_event, only: [:show, :checkout]
+  
   # Display all events
   def index
-    @events = Event.includes(:user).upcoming.page(params[:page]).per(1)
-    # @events = Event.page(params[:page]).per(12)
+    @events = Event.includes(:user).upcoming.page(params[:page]).per(12)
   end
 
   # Display desired event
   def show
-    @event = Event.find(params[:id])
+    # Event is set by set_event callback
   end
 
-  # Handle checkout process
+  # Handle checkout process - Create Stripe session
   def checkout
-    @event = Event.find(params[:id])
     cart_data = JSON.parse(params[:cart] || "{}")
 
     if cart_data.empty?
-      redirect_to event_path(@event), alert: "Please select at least one ticket"
+      redirect_to event_path(@event.slug, @event), alert: "Veuillez sélectionner au moins un billet"
       return
     end
 
     # Create order items from cart
+    line_items = []
     order_items = []
     total_amount = 0
 
@@ -34,12 +36,27 @@ class EventsController < ApplicationController
       # Check availability
       available = ticket_type.quantity - ticket_type.tickets.count
       if quantity > available
-        redirect_to event_path(@event), alert: "Not enough tickets available for #{ticket_type.name}"
+        redirect_to event_path(@event.slug, @event), alert: "Pas assez de billets disponibles pour #{ticket_type.name}"
         return
       end
 
+      # Create Stripe line item
+      line_items << {
+        price_data: {
+          currency: 'eur',
+          product_data: {
+            name: "#{@event.name} - #{ticket_type.name}",
+            description: ticket_type.description,
+          },
+          unit_amount: ticket_type.price_cents,
+        },
+        quantity: quantity,
+      }
+
+      # Store for ticket creation
       order_items << {
-        ticket_type: ticket_type,
+        ticket_type_id: ticket_type.id,
+        ticket_type_name: ticket_type.name,
         quantity: quantity,
         price_cents: ticket_type.price_cents
       }
@@ -48,17 +65,90 @@ class EventsController < ApplicationController
     end
 
     if order_items.empty?
-      redirect_to event_path(@event), alert: "Invalid order"
+      redirect_to event_path(@event.slug, @event), alert: "Commande invalide"
       return
     end
 
-    # Here you would typically:
-    # 1. Create an Order record
-    # 2. Create Ticket records for each item
-    # 3. Redirect to payment processing
+    begin
+      # Create Stripe Checkout Session
+      session = Stripe::Checkout::Session.create({
+        payment_method_types: ['card'],
+        line_items: line_items,
+        mode: 'payment',
+        success_url: payment_success_url(event_id: @event.id, session_id: '{CHECKOUT_SESSION_ID}'),
+        cancel_url: event_url(@event.slug, @event),
+        customer_email: current_user.email,
+        metadata: {
+          event_id: @event.id,
+          user_id: current_user.id,
+          order_items: order_items.to_json
+        }
+      })
 
-    # For now, we'll just redirect with a success message
-    # In a real app, you'd redirect to a payment page
-    redirect_to event_path(@event), notice: "Order created successfully! Proceeding to payment..."
+      redirect_to session.url, allow_other_host: true
+    rescue Stripe::StripeError => e
+      redirect_to event_path(@event.slug, @event), alert: "Erreur de traitement du paiement : #{e.message}"
+    end
+  end
+
+  # Handle successful payment
+  def payment_success
+    session_id = params[:session_id]
+    event_id = params[:event_id]
+
+    begin
+      session = Stripe::Checkout::Session.retrieve(session_id)
+      
+      if session.payment_status == 'paid'
+        # Create tickets
+        @event = Event.find(event_id)
+        order_items = JSON.parse(session.metadata['order_items'])
+        @tickets = []
+
+        order_items.each do |item|
+          ticket_type = TicketType.find(item['ticket_type_id'])
+          item['quantity'].times do
+            ticket = Ticket.create!(
+              user: current_user,
+              ticket_type: ticket_type,
+              status: 'active'
+            )
+            @tickets << ticket
+            
+            # Send confirmation email for each ticket
+            TicketMailer.purchase_confirmation(ticket).deliver_now
+          end
+        end
+
+        render 'payment_success'
+      else
+        redirect_to event_path(@event.slug, @event), alert: "Le paiement n'a pas été complété avec succès"
+      end
+    rescue Stripe::StripeError => e
+      redirect_to dashboard_path, alert: "Erreur lors du traitement de votre confirmation de paiement : #{e.message}"
+    rescue => e
+      redirect_to dashboard_path, alert: "Une erreur inattendue s'est produite : #{e.message}"
+    end
+  end
+
+  # Download ticket PDF
+  def download_ticket
+    @ticket = current_user.tickets.find(params[:ticket_id])
+    
+    respond_to do |format|
+      format.pdf do
+        pdf = @ticket.to_pdf
+        send_data pdf, 
+          filename: "ticket-#{@ticket.event.name.parameterize}-#{@ticket.qr_code[0..7]}.pdf",
+          type: 'application/pdf',
+          disposition: 'attachment'
+      end
+    end
+  end
+
+  private
+
+  def set_event
+    @event = Event.find(params[:id])
   end
 end

app/controllers/pages_controller.rb

@@ -18,8 +18,19 @@ class PagesController < ApplicationController
   # User dashboard showing personalized content
   # Accessible only to authenticated users
   def dashboard
-    @available_events = Event.published.count
-    @events_this_week = Event.published.where("start_time BETWEEN ? AND ?", Date.current.beginning_of_week, Date.current.end_of_week).count
+    # Metrics for dashboard cards
+    @booked_events = current_user.tickets.joins(:ticket_type, :event).where(events: { state: :published }).count
+    @events_today = Event.published.where("DATE(start_time) = ?", Date.current).count
+    @events_tomorrow = Event.published.where("DATE(start_time) = ?", Date.current + 1).count
+    @upcoming_events = Event.published.upcoming.count
+
+    # User's booked events
+    @user_booked_events = Event.joins(ticket_types: :tickets)
+                               .where(tickets: { user: current_user, status: 'active' })
+                               .distinct
+                               .limit(5)
+
+    # Events sections
     @today_events = Event.published.where("DATE(start_time) = ?", Date.current).order(start_time: :asc)
     @tomorrow_events = Event.published.where("DATE(start_time) = ?", Date.current + 1).order(start_time: :asc)
     @other_events = Event.published.upcoming.where.not("DATE(start_time) IN (?)", [Date.current, Date.current + 1]).order(start_time: :asc).page(params[:page])

app/javascript/controllers/logout_controller.js

@@ -38,14 +38,14 @@ export default class extends Controller {
       credentials: "same-origin",
     })
       .then((response) => {
-        // console.log(this.element.dataset.loginUrlValue); // By default, we does not return anything.
+        // console.log(this.element.dataset.redirectUrlValue); // By default, we does not return anything.
 
         // By default the response does not include any url.
-        // Redirect to default login page (loginUrlValue)
+        // Redirect to default login page (redirectUrlValue)
         if (response.redirected) {
           window.location.href = response.url;
-        } else if (this.element.dataset.loginUrlValue) {
-          window.location.href = this.element.dataset.loginUrlValue;
+        } else if (this.element.dataset.redirectUrlValue) {
+          window.location.href = this.element.dataset.redirectUrlValue;
           return;
         }
         window.location.href = "/";

app/javascript/controllers/ticket_cart_controller.js

@@ -7,11 +7,14 @@ export default class extends Controller {
   connect() {
     this.cart = {}
     this.updateCartDisplay()
+    
+    // Check for pending cart in session storage (after login)
+    this.checkForPendingCart()
   }
 
   increaseQuantity(event) {
-    const ticketTypeId = event.currentTarget.dataset.ticketTypeId
-    const max = parseInt(event.currentTarget.dataset.max)
+    const ticketTypeId = event.params.ticketTypeId
+    const max = parseInt(event.params.max)
     const input = this.quantityTargetFor(ticketTypeId)
 
     const current = parseInt(input.value) || 0
@@ -22,7 +25,7 @@ export default class extends Controller {
   }
 
   decreaseQuantity(event) {
-    const ticketTypeId = event.currentTarget.dataset.ticketTypeId
+    const ticketTypeId = event.params.ticketTypeId
     const input = this.quantityTargetFor(ticketTypeId)
 
     const current = parseInt(input.value) || 0
@@ -32,6 +35,22 @@ export default class extends Controller {
     }
   }
 
+  updateQuantityFromInput(event) {
+    const input = event.target
+    const ticketTypeId = input.dataset.ticketTypeId
+    const max = parseInt(input.max)
+    const quantity = parseInt(input.value) || 0
+
+    // Validate input
+    if (quantity < 0) {
+      input.value = 0
+    } else if (quantity > max) {
+      input.value = max
+    }
+
+    this.updateCartItem(ticketTypeId, input)
+  }
+
   updateCartItem(ticketTypeId, input) {
     const name = input.dataset.name
     const price = parseInt(input.dataset.price)
@@ -59,28 +78,54 @@ export default class extends Controller {
       totalPrice += (this.cart[ticketTypeId].price * this.cart[ticketTypeId].quantity) / 100
     }
 
-    this.cartCountTarget.textContent = totalTickets
-    this.cartTotalTarget.textContent = totalPrice.toFixed(2)
+    // Update cart count and total
+    if (this.hasCartCountTarget) {
+      this.cartCountTarget.textContent = totalTickets
+    }
+    
+    if (this.hasCartTotalTarget) {
+      this.cartTotalTarget.textContent = totalPrice.toFixed(2)
+    }
 
-    const checkoutBtn = this.checkoutButtonTarget
-    if (totalTickets > 0) {
-      checkoutBtn.disabled = false
-    } else {
-      checkoutBtn.disabled = true
+    // Update checkout button state
+    if (this.hasCheckoutButtonTarget) {
+      const checkoutBtn = this.checkoutButtonTarget
+      if (totalTickets > 0) {
+        checkoutBtn.disabled = false
+        checkoutBtn.classList.remove('opacity-50', 'cursor-not-allowed')
+      } else {
+        checkoutBtn.disabled = true
+        checkoutBtn.classList.add('opacity-50', 'cursor-not-allowed')
+      }
     }
   }
 
   proceedToCheckout() {
     if (Object.keys(this.cart).length === 0) {
-      alert('Please select at least one ticket')
+      alert('Veuillez sélectionner au moins un billet')
       return
     }
 
+    // Check if user is authenticated
+    const isAuthenticated = document.body.dataset.userAuthenticated === "true"
+    
+    if (!isAuthenticated) {
+      if (confirm('Vous devez être connecté pour acheter des billets. Souhaitez-vous vous connecter maintenant ?')) {
+        // Store cart in session storage
+        sessionStorage.setItem('pending_cart', JSON.stringify({
+          eventId: this.eventIdValue,
+          cart: this.cart
+        }))
+        window.location.href = '/auth/sign_in'
+      }
+      return
+    }
+
+    // Create form and submit to checkout
     const form = document.createElement('form')
     form.method = 'POST'
-    form.action = `/events/${this.eventIdValue}/checkout`
-    form.style.display = 'none'
-
+    form.action = `/events/${document.body.dataset.eventSlug}.${this.eventIdValue}/checkout`
+    
     // Add CSRF token
     const csrfToken = document.querySelector('meta[name="csrf-token"]').content
     const csrfInput = document.createElement('input')
@@ -100,6 +145,31 @@ export default class extends Controller {
     form.submit()
   }
 
+  checkForPendingCart() {
+    const pendingCart = sessionStorage.getItem('pending_cart')
+    if (pendingCart) {
+      try {
+        const cartData = JSON.parse(pendingCart)
+        if (cartData.eventId == this.eventIdValue) {
+          this.cart = cartData.cart
+          this.updateCartDisplay()
+          
+          // Restore quantities in inputs
+          for (let ticketTypeId in this.cart) {
+            const input = this.quantityTargetFor(ticketTypeId)
+            if (input) {
+              input.value = this.cart[ticketTypeId].quantity
+            }
+          }
+        }
+        sessionStorage.removeItem('pending_cart')
+      } catch (e) {
+        console.error('Error restoring pending cart:', e)
+        sessionStorage.removeItem('pending_cart')
+      }
+    }
+  }
+
   // Helper method to find quantity input by ticket type ID
   quantityTargetFor(ticketTypeId) {
     return document.querySelector(`#quantity_${ticketTypeId}`)

app/mailers/ticket_mailer.rb

@@ -0,0 +1,21 @@
+class TicketMailer < ApplicationMailer
+  default from: 'notifications@aperonight.com'
+
+  def purchase_confirmation(ticket)
+    @ticket = ticket
+    @user = ticket.user
+    @event = ticket.event
+    
+    # Generate PDF attachment
+    pdf = @ticket.to_pdf
+    attachments["ticket-#{@event.name.parameterize}-#{@ticket.qr_code[0..7]}.pdf"] = {
+      mime_type: 'application/pdf',
+      content: pdf
+    }
+    
+    mail(
+      to: @user.email,
+      subject: "Confirmation d'achat - #{@event.name}"
+    )
+  end
+end

app/models/ticket.rb

@@ -12,6 +12,17 @@ class Ticket < ApplicationRecord
   validates :status, presence: true, inclusion: { in: %w[active used expired refunded] }
 
   before_validation :set_price_from_ticket_type, on: :create
+  before_validation :generate_qr_code, on: :create
+
+  # Generate PDF ticket
+  def to_pdf
+    TicketPdfGenerator.new(self).generate
+  end
+
+  # Price in euros (formatted)
+  def price_euros
+    price_cents / 100.0
+  end
 
   private
 
@@ -19,4 +30,13 @@ class Ticket < ApplicationRecord
     return unless ticket_type
     self.price_cents = ticket_type.price_cents
   end
+
+  def generate_qr_code
+    return if qr_code.present?
+    
+    loop do
+      self.qr_code = SecureRandom.uuid
+      break unless Ticket.exists?(qr_code: qr_code)
+    end
+  end
 end

app/services/ticket_pdf_generator.rb

@@ -0,0 +1,97 @@
+require 'prawn'
+require 'prawn/qrcode'
+require 'rqrcode'
+
+class TicketPdfGenerator
+  attr_reader :ticket
+
+  def initialize(ticket)
+    @ticket = ticket
+  end
+
+  def generate
+    Prawn::Document.new(page_size: [350, 600], margin: 20) do |pdf|
+      # Header
+      pdf.fill_color "2D1B69"
+      pdf.font "Helvetica", style: :bold, size: 24
+      pdf.text "ApéroNight", align: :center
+      pdf.move_down 10
+
+      # Event name
+      pdf.fill_color "000000"
+      pdf.font "Helvetica", style: :bold, size: 18
+      pdf.text ticket.event.name, align: :center
+      pdf.move_down 20
+
+      # Ticket info box
+      pdf.stroke_color "E5E7EB"
+      pdf.fill_color "F9FAFB"
+      pdf.rounded_rectangle [0, pdf.cursor], 310, 120, 10
+      pdf.fill_and_stroke
+
+      pdf.move_down 10
+      pdf.fill_color "000000"
+      pdf.font "Helvetica", size: 12
+
+      # Ticket details
+      pdf.text "Ticket Type:", style: :bold
+      pdf.text ticket.ticket_type.name
+      pdf.move_down 8
+
+      pdf.text "Price:", style: :bold
+      pdf.text "€#{ticket.price_euros}"
+      pdf.move_down 8
+
+      pdf.text "Date & Time:", style: :bold
+      pdf.text ticket.event.start_time.strftime("%B %d, %Y at %I:%M %p")
+      pdf.move_down 20
+
+      # Venue information
+      pdf.fill_color "374151"
+      pdf.font "Helvetica", style: :bold, size: 14
+      pdf.text "Venue Information"
+      pdf.move_down 8
+
+      pdf.font "Helvetica", size: 11
+      pdf.text ticket.event.venue_name, style: :bold
+      pdf.text ticket.event.venue_address
+      pdf.move_down 20
+
+      # QR Code
+      pdf.fill_color "000000"
+      pdf.font "Helvetica", style: :bold, size: 14
+      pdf.text "Ticket QR Code", align: :center
+      pdf.move_down 10
+
+      qr_code_data = {
+        ticket_id: ticket.id,
+        qr_code: ticket.qr_code,
+        event_id: ticket.event.id,
+        user_id: ticket.user.id
+      }.to_json
+
+      qrcode = RQRCode::QRCode.new(qr_code_data)
+      pdf.print_qr_code(qrcode, extent: 120, align: :center)
+      
+      pdf.move_down 15
+
+      # QR code text
+      pdf.font "Helvetica", size: 8
+      pdf.fill_color "6B7280"
+      pdf.text "QR Code: #{ticket.qr_code[0..7]}...", align: :center
+
+      # Footer
+      pdf.move_down 30
+      pdf.stroke_color "E5E7EB"
+      pdf.horizontal_line 0, 310
+      pdf.move_down 10
+
+      pdf.font "Helvetica", size: 8
+      pdf.fill_color "6B7280"
+      pdf.text "This ticket is valid for one entry only.", align: :center
+      pdf.text "Present this ticket at the venue entrance.", align: :center
+      pdf.move_down 5
+      pdf.text "Generated on #{Time.current.strftime('%B %d, %Y at %I:%M %p')}", align: :center
+    end.render
+  end
+end

app/views/components/_header.html.erb

@@ -8,9 +8,9 @@
 
         <div class="hidden sm:flex space-x-6">
           <%= link_to t("header.parties"), events_path,
-              class: "bg-black text-gray-100 hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
+              class: "text-gray-100 hover:text-purple-200 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
           <%= link_to t("header.concerts"), "#",
-              class: "bg-black text-gray-100 hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
+              class: "text-gray-100 hover:text-purple-200 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
         </div>
       </div>
 
@@ -34,7 +34,7 @@
                   class: "block px-4 py-2 text-sm bg-black text-gray-100 hover:bg-purple-700" %>
               <%= link_to t("header.logout"), destroy_user_session_path,
                   data: { controller: "logout", action: "click->logout#signOut",
-                         logout_url_value: destroy_user_session_path, login_url_value: new_user_session_path, turbo: false },
+                         logout_url_value: destroy_user_session_path, redirect_url_value: "/", turbo: false },
                   class: "block px-4 py-2 text-sm bg-black text-gray-100 hover:bg-purple-700 last:rounded-b-md" %>
             </div>
           </div>

app/views/components/_ticket_card.html.erb

@@ -1,66 +1,69 @@
-<div class="card rounded-2xl <%= sold_out ? "border border-neutral-200 opacity-75" : "border border-neutral-200 " %>">
-  <div class="card-body p-6">
-    <div class="flex justify-between items-start mb-4">
+<div class="bg-white rounded-xl border <%= sold_out ? "border-gray-200 opacity-75" : "border-purple-200" %> shadow-sm overflow-hidden">
+  <div class="p-5">
+    <div class="flex justify-between items-start mb-3">
       <div>
-        <h3 class="text-xl font-bold text-primary <%= "text-slate-400" if sold_out %>"><%= name %></h3>
-        <p class="text-neutral-600 text-sm <%= "text-slate-400" if sold_out %>"><%= description %></p>
+        <h3 class="text-lg font-bold text-gray-900 <%= "text-gray-400" if sold_out %>"><%= name %></h3>
+        <p class="text-gray-600 text-sm <%= "text-gray-400" if sold_out %>"><%= description %></p>
       </div>
       <div class="text-right">
-        <p class="text-2xl font-bold text-primary <%= "text-slate-400" if sold_out %>">
+        <p class="text-xl font-bold text-purple-700 <%= "text-gray-400" if sold_out %>">
           <%= number_to_currency(price_cents / 100.0, unit: "€") %>
         </p>
       </div>
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex justify-between items-center mt-4">
       <div>
-        <p class="text-sm text-neutral-600 flex items-center">
-          <% if sold_out %>
-            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 ml-2">
-              <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-red-400" fill="currentColor" viewBox="0 0 8 8">
-                <circle cx="4" cy="4" r="3" />
-              </svg>
-              Sold Out
-            </span>
-          <% else %>
-            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 ml-2">
-              <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-green-400" fill="currentColor" viewBox="0 0 8 8">
-                <circle cx="4" cy="4" r="3" />
-              </svg>
-              <%= remaining %> available
-            </span>
-          <% end %>
-        </p>
+        <% if sold_out %>
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+            <svg class="-ml-0.5 mr-1 h-2 w-2 text-red-400" fill="currentColor" viewBox="0 0 8 8">
+              <circle cx="4" cy="4" r="3" />
+            </svg>
+            Épuisé
+          </span>
+        <% else %>
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+            <svg class="-ml-0.5 mr-1 h-2 w-2 text-green-400" fill="currentColor" viewBox="0 0 8 8">
+              <circle cx="4" cy="4" r="3" />
+            </svg>
+            <%= remaining %> disponibles
+          </span>
+        <% end %>
       </div>
 
       <% unless sold_out %>
         <div class="flex items-center space-x-2">
           <button type="button"
-                  class="w-8 h-8 rounded-full bg-slate-200 hover:bg-slate-300 flex items-center justify-center transition-colors duration-200"
-                  onclick="decreaseQuantity(<%= id %>)">
-            <span class="text-slate-600">-</span>
+                  class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors duration-200"
+                  data-action="click->ticket-cart#decreaseQuantity"
+                  data-ticket-cart-ticket-type-id-param="<%= id %>"
+                  data-ticket-cart-max-param="<%= remaining %>">
+            <span class="text-gray-600 font-bold">-</span>
           </button>
           <input type="number"
                  id="quantity_<%= id %>"
                  min="0"
                  max="<%= remaining %>"
                  value="0"
-                 class="w-12 text-center border border-slate-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                 class="w-12 text-center border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-1"
+                 data-ticket-cart-target="quantity"
+                 data-ticket-type-id="<%= id %>"
                  data-name="<%= name %>"
-                 data-price="<%= price_cents %>"
-                 onchange="updateCart(<%= id %>, this.dataset.name, this.dataset.price)">
+                 data-price="<%= price_cents %>">
           <button type="button"
-                  class="w-8 h-8 rounded-full bg-slate-200 hover:bg-slate-300 flex items-center justify-center transition-colors duration-200"
-                  onclick="increaseQuantity(<%= id %>, <%= remaining %>)">
-            <span class="text-slate-600">+</span>
+                  class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors duration-200"
+                  data-action="click->ticket-cart#increaseQuantity"
+                  data-ticket-cart-ticket-type-id-param="<%= id %>"
+                  data-ticket-cart-max-param="<%= remaining %>">
+            <span class="text-gray-600 font-bold">+</span>
           </button>
         </div>
       <% else %>
-        <div class="text-sm text-slate-500 font-medium">
+        <div class="text-sm text-gray-500 font-medium">
           <svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
           </svg>
-          Unavailable
+          Indisponible
         </div>
       <% end %>
     </div>

app/views/events/index.html.erb

@@ -1,53 +1,91 @@
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
-  <h1 class="text-3xl font-bold text-gray-900 mb-8">Événements à venir</h1>
+  <div class="flex justify-between items-center mb-8">
+    <h1 class="text-3xl font-bold text-gray-900">Événements à venir</h1>
+    <div class="text-sm text-gray-500">
+      <%= @events.total_count %> événements trouvés
+    </div>
+  </div>
 
   <% if @events.any? %>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       <% @events.each do |event| %>
-        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+        <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+          <% if event.image.present? %>
+            <div class="h-48 overflow-hidden">
+              <%= image_tag event.image, class: "w-full h-full object-cover" %>
+            </div>
+          <% else %>
+            <div class="h-48 bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center">
+              <svg class="w-16 h-16 text-white opacity-80" 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>
+            </div>
+          <% end %>
+
           <div class="p-6">
-            <div class="flex justify-between items-start">
+            <div class="flex justify-between items-start mb-3">
               <div>
-                <h2 class="text-xl font-bold text-gray-900"><%= event.name %></h2>
-                <p class="text-sm text-gray-500 mt-1"><%= event.user.email %></p>
+                <h2 class="text-xl font-bold text-gray-900 line-clamp-1"><%= event.name %></h2>
+                <p class="text-sm text-gray-500 mt-1 flex items-center">
+                  <svg class="w-4 h-4 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>
+                  <%= event.user.email.split('@').first %>
+                </p>
               </div>
               <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                <%= event.start_time.strftime("%d/%m/%Y") %>
+                <%= event.start_time.strftime("%d/%m") %>
               </span>
             </div>
 
-            <div class="mt-4">
+            <div class="mb-4">
               <p class="text-gray-600 text-sm line-clamp-2"><%= event.description.truncate(100) %></p>
             </div>
 
-            <div class="mt-4 flex justify-between items-center">
+            <div class="flex justify-between items-center">
               <div>
                 <% if event.ticket_types.any? %>
                   <p class="text-sm font-medium text-gray-900">
                     À partir de <%= format_price(event.ticket_types.minimum(:price_cents)) %>€
                   </p>
+                  <p class="text-xs text-gray-500 flex items-center mt-1">
+                    <svg class="w-4 h-4 mr-1" 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" />
+                    </svg>
+                    <%= event.venue_name.truncate(20) %>
+                  </p>
                 <% else %>
                   <p class="text-sm text-gray-500">Pas de billets disponibles</p>
                 <% end %>
               </div>
 
-              <%= link_to "Voir les détails", event_path(event.slug, event), class: "inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" %>
+              <%= link_to event_path(event.slug, event), class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-200" do %>
+                Détails
+                <svg class="w-4 h-4 ml-2" 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>
+              <% end %>
             </div>
           </div>
         </div>
       <% end %>
     </div>
 
-    <div class="mt-8">
-      <%# paginate @events, theme: 'twitter_bootstrap' %>
-      <%= paginate @events %>
+    <div class="mt-8 flex justify-center">
+      <%= paginate @events, theme: "tailwind" %>
     </div>
   <% else %>
-    <div class="text-center py-12">
-      <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <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>
-      <h3 class="mt-2 text-sm font-medium text-gray-900">Aucun événement disponible</h3>
-      <p class="mt-1 text-sm text-gray-500">Il n'y a aucun événement à venir pour le moment.</p>
+    <div class="text-center py-16">
+      <div class="mx-auto max-w-md">
+        <div class="w-24 h-24 mx-auto bg-gradient-to-r from-purple-100 to-indigo-100 rounded-full flex items-center justify-center mb-6">
+          <svg class="w-12 h-12 text-purple-600" 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>
+        </div>
+        <h3 class="text-lg font-medium text-gray-900 mb-2">Aucun événement disponible</h3>
+        <p class="text-gray-500 mb-6">Il n'y a aucun événement à venir pour le moment.</p>
+        <%= link_to "Retour à l'accueil", root_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" %>
+      </div>
     </div>
   <% end %>
+</div>

app/views/events/payment_success.html.erb

@@ -0,0 +1,150 @@
+<div class="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-50 py-12 px-4 sm:px-6">
+  <div class="max-w-3xl mx-auto">
+    <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
+      <!-- Header -->
+      <div class="bg-gradient-to-r from-purple-600 to-indigo-700 px-6 py-8 text-center">
+        <div class="flex justify-center mb-4">
+          <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+            </svg>
+          </div>
+        </div>
+        <h1 class="text-3xl font-bold text-white mb-2">Paiement réussi !</h1>
+        <p class="text-purple-100">Félicitations pour votre achat</p>
+      </div>
+
+      <!-- Content -->
+      <div class="p-6 sm:p-8">
+        <div class="text-center mb-8">
+          <p class="text-xl text-gray-700">
+            Vos billets pour <span class="font-bold text-purple-700"><%= @event.name %></span> ont été achetés avec succès.
+          </p>
+          <p class="text-gray-500 mt-2">
+            Un email de confirmation avec vos billets a été envoyé à <span class="font-medium"><%= current_user.email %></span>
+          </p>
+        </div>
+
+        <!-- Event Details -->
+        <div class="bg-gray-50 rounded-xl p-6 mb-8">
+          <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
+            <svg class="w-5 h-5 mr-2 text-purple-600" 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"></path>
+            </svg>
+            Détails de l'événement
+          </h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="flex items-center p-3 bg-white rounded-lg">
+              <svg class="w-5 h-5 text-purple-500 mr-3" 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>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+              </svg>
+              <div>
+                <p class="text-xs text-gray-500">Lieu</p>
+                <p class="font-medium"><%= @event.venue_name %></p>
+              </div>
+            </div>
+            <div class="flex items-center p-3 bg-white rounded-lg">
+              <svg class="w-5 h-5 text-purple-500 mr-3" 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"></path>
+              </svg>
+              <div>
+                <p class="text-xs text-gray-500">Date & Heure</p>
+                <p class="font-medium"><%= @event.start_time.strftime("%d %B %Y à %H:%M") %></p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Tickets -->
+        <div class="mb-8">
+          <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
+            <svg class="w-5 h-5 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"></path>
+            </svg>
+            Vos billets
+          </h2>
+          
+          <div class="space-y-4">
+            <% @tickets.each do |ticket| %>
+              <div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl border border-purple-100 p-5">
+                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                  <div class="flex-1">
+                    <div class="flex items-center">
+                      <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mr-4">
+                        <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"></path>
+                        </svg>
+                      </div>
+                      <div>
+                        <h3 class="font-bold text-gray-900"><%= ticket.ticket_type.name %></h3>
+                        <p class="text-sm text-gray-600">Prix: <span class="font-medium"><%= number_to_currency(ticket.price_cents / 100.0, unit: "€") %></span></p>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div class="flex items-center space-x-2">
+                    <%= link_to download_ticket_path(ticket, format: :pdf), 
+                        class: "inline-flex items-center px-4 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:from-purple-700 hover:to-indigo-700 transition-all duration-200 text-sm font-medium shadow-sm" 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"></path>
+                      </svg>
+                      Télécharger PDF
+                    <% end %>
+                  </div>
+                </div>
+                
+                <div class="mt-4 pt-4 border-t border-purple-100 flex items-center justify-between">
+                  <div class="flex items-center">
+                    <svg class="w-4 h-4 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
+                    </svg>
+                    <span class="text-xs text-gray-500">Code QR: <%= ticket.qr_code[0..7] %></span>
+                  </div>
+                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                    Actif
+                  </span>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        </div>
+
+        <!-- Important Notice -->
+        <div class="bg-blue-50 border border-blue-100 rounded-xl p-5 mb-8">
+          <div class="flex">
+            <svg class="w-5 h-5 text-blue-500 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            <div>
+              <h3 class="font-bold text-blue-800 mb-1">Important</h3>
+              <p class="text-sm text-blue-700">
+                Veuillez télécharger et sauvegarder vos billets. Présentez-les à l'entrée du lieu pour accéder à l'événement. 
+                Un email de confirmation avec vos billets a été envoyé à votre adresse email.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <%= link_to dashboard_path, 
+              class: "inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl hover:from-purple-700 hover:to-indigo-700 transition-all duration-200 font-medium shadow-sm" do %>
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+            </svg>
+            Tableau de bord
+          <% end %>
+          
+          <%= link_to events_path, 
+              class: "inline-flex items-center justify-center px-6 py-3 bg-white text-gray-700 rounded-xl border border-gray-300 hover:bg-gray-50 transition-all duration-200 font-medium shadow-sm" do %>
+            <svg class="w-5 h-5 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"></path>
+            </svg>
+            Voir plus d'événements
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/events/show.html.erb

@@ -1,147 +1,185 @@
-<div class="min-h-screen bg-neutral-50" data-controller="ticket-cart" data-ticket-cart-event-id-value="<%= params[:id] %>">
-  <div class="max-w-7xl mx-auto md:px-4">
-
-    <nav class="mb-3 text-sm" aria-label="Breadcrumb">
-      <nav class="mb-3 text-sm" aria-label="Breadcrumb" role="navigation">
-        <span class="flex items-center text-slate-700" role="list">
-          <a href="/" class="hover:text-primary-600 transition-colors duration-200 flex items-center" role="listitem">
-            <svg class="w-4 h-4 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-              <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>
-            <span class="sr-only">Home</span>
-          </a>
-
-          <svg class="w-4 h-4 mx-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100" data-controller="ticket-cart" data-ticket-cart-event-id-value="<%= params[:id] %>">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <!-- Breadcrumb -->
+    <nav class="mb-6" 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>
-
-          <a href="/events" class="hover:text-primary-600 transition-colors duration-200 mx-2" role="listitem">
-            Events
-          </a>
-
-          <svg class="w-4 h-4 mx-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-          </svg>
-
-          <span class="mx-2 font-medium truncate max-w-[150px] sm:max-w-[250px]" role="listitem" aria-current="page">
-            <%= @event.name %>
-          </span>
-        </span>
-      </nav>
+          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 events_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
+          Événements
+        <% 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 truncate max-w-xs" aria-current="page">
+          <%= @event.name %>
+        </li>
+      </ol>
     </nav>
 
-    <div class="bg-white rounded-2xl shadow-lg p-4 sm:p-6 md:p-8 mb-6 sm:mb-8">
-      <div class="flex flex-col lg:flex-row gap-6 md:gap-8">
-        <!-- Left Column: Event Info & Image -->
-        <div class="w-full md:w-1/2">
-          <h1 class="text-4xl font-bold text-primary mb-4"><%= @event.name %></h1>
-
-          <% if @event.image.present? %>
-            <div class="relative rounded-2xl overflow-hidden mb-6">
-              <%= image_tag @event.image, class: "w-full h-96 object-cover" %>
-              <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50"></div>
-              <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black">
-                <h2 class="text-2xl font-semibold text-white mb-2">Event Details</h2>
-                <div class="flex flex-wrap gap-4 text-white">
-                  <div class="flex items-center">
-                    <svg class="w-5 h-5 mr-2 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                    </svg>
-                    <span><%= @event.venue_name %></span>
-                  </div>
-                  <div class="flex items-center">
-                    <svg class="w-5 h-5 mr-2 text-purple-400" 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"></path>
-                    </svg>
-                    <span><%= @event.start_time.strftime("%B %d, %Y at %I:%M %p") %></span>
-                  </div>
+    <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
+      <!-- Event Header with Image -->
+      <% if @event.image.present? %>
+        <div class="relative h-96">
+          <%= image_tag @event.image, class: "w-full h-full object-cover" %>
+          <div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent"></div>
+          <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
+            <div class="max-w-4xl mx-auto">
+              <h1 class="text-3xl md:text-4xl font-bold text-white mb-2"><%= @event.name %></h1>
+              <div class="flex flex-wrap items-center gap-4 text-white/90">
+                <div class="flex items-center">
+                  <svg class="w-5 h-5 mr-2 text-purple-400" 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>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                  </svg>
+                  <span><%= @event.venue_name %></span>
+                </div>
+                <div class="flex items-center">
+                  <svg class="w-5 h-5 mr-2 text-purple-400" 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"></path>
+                  </svg>
+                  <span><%= @event.start_time.strftime("%d %B %Y à %H:%M") %></span>
                 </div>
               </div>
             </div>
-          <% end %>
-
-          <div class="space-y-4">
-            <div>
-              <h2 class="text-xl font-semibold text-primary mb-2">Description</h2>
-              <p class="text-lg text-slate-600 leading-relaxed"><%= @event.description %></p>
-            </div>
-
-            <div class="space-y-3">
-              <div class="flex items-center space-x-4">
-                <svg class="w-5 h-5 text-purple-400" 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>
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                </svg>
-                <span class="font-medium text-slate-800">Location:</span>
-                <span class="text-slate-600"><%= @event.venue_address %></span>
-              </div>
-
-              <div class="flex items-center space-x-4">
-                <svg class="w-5 h-5 text-purple-400" 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"></path>
-                </svg>
-                <span class="font-medium text-slate-800">Date:</span>
-                <span class="text-slate-600"><%= @event.start_time.strftime("%B %d, %Y") %></span>
-              </div>
-            </div>
           </div>
         </div>
-
-        <!-- Right Column: Ticket Selection -->
-        <div class="w-full md:w-1/2">
-          <div class="space-y-6">
-            <h2 class="text-2xl font-bold text-slate-800 mb-6">Available Tickets</h2>
-
-            <div class="space-y-4">
-              <% @event.ticket_types.each do |ticket_type| %>
-                <% sold_out = ticket_type.quantity <= ticket_type.tickets.count %>
-                <% remaining = ticket_type.quantity - ticket_type.tickets.count %>
-
-                <%= render 'components/ticket_card', {
-                  id: ticket_type.id,
-                  name: ticket_type.name,
-                  description: ticket_type.description,
-                  price_cents: ticket_type.price_cents,
-                  quantity: ticket_type.quantity,
-                  sold_out: sold_out,
-                  remaining: remaining
-                } %>
-              <% end %>
-
-              <!-- Example of a sold out ticket type for demo purposes -->
-              <%= render 'components/ticket_card', {
-                name: "Early Bird Special",
-                description: "Limited time offer - discounted price for early purchasers",
-                price_cents: 1999,
-                quantity: 100,
-                sold_out: true,
-                remaining: 0
-              } %>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Sticky Checkout Bar -->
-    <div class="sticky bottom-0 bg-white border-t border-slate-200 p-6">
-      <div class="max-w-md mx-auto">
-        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
-          <div class="text-center sm:text-left">
-            <p class="text-sm text-slate-600">Total: <span id="cart-count" class="font-semibold">0</span> tickets</p>
-            <p class="text-xl font-bold text-primary">€<span id="cart-total">0.00</span></p>
-          </div>
-          <button id="checkout-btn"
-                  class="btn-primary w-full sm:w-auto px-8 py-3 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
-                  disabled
-                  onclick="proceedToCheckout()">
-            <span class="flex items-center justify-center">
-              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+      <% else %>
+        <div class="bg-gradient-to-r from-purple-600 to-indigo-700 p-8">
+          <h1 class="text-3xl md:text-4xl font-bold text-white mb-4"><%= @event.name %></h1>
+          <div class="flex flex-wrap items-center gap-4 text-white/90">
+            <div class="flex items-center">
+              <svg class="w-5 h-5 mr-2 text-purple-200" 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>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
               </svg>
-              Continue to Checkout
-            </span>
-          </button>
+              <span><%= @event.venue_name %></span>
+            </div>
+            <div class="flex items-center">
+              <svg class="w-5 h-5 mr-2 text-purple-200" 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"></path>
+              </svg>
+              <span><%= @event.start_time.strftime("%d %B %Y à %H:%M") %></span>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <!-- Event Content -->
+      <div class="p-6 md:p-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <!-- Left Column: Event Details -->
+          <div class="lg:col-span-2">
+            <div class="mb-8">
+              <h2 class="text-2xl font-bold text-gray-900 mb-4">Description</h2>
+              <div class="prose max-w-none text-gray-700">
+                <p class="text-lg leading-relaxed"><%= @event.description %></p>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+              <div class="bg-gray-50 rounded-xl p-6">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+                  <svg class="w-5 h-5 mr-2 text-purple-600" 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>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                  </svg>
+                  Lieu
+                </h3>
+                <p class="text-gray-700 font-medium"><%= @event.venue_name %></p>
+                <p class="text-gray-600 mt-1"><%= @event.venue_address %></p>
+              </div>
+
+              <div class="bg-gray-50 rounded-xl p-6">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
+                  <svg class="w-5 h-5 mr-2 text-purple-600" 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"></path>
+                  </svg>
+                  Date & Heure
+                </h3>
+                <p class="text-gray-700 font-medium"><%= @event.start_time.strftime("%A %d %B %Y") %></p>
+                <p class="text-gray-600 mt-1">À <%= @event.start_time.strftime("%H:%M") %></p>
+              </div>
+            </div>
+
+            <div class="mb-8">
+              <h3 class="text-lg font-semibold text-gray-900 mb-4">Organisateur</h3>
+              <div class="flex items-center">
+                <div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center text-white font-bold">
+                  <%= @event.user.email.first.upcase %>
+                </div>
+                <div class="ml-4">
+                  <p class="font-medium text-gray-900"><%= @event.user.email.split('@').first %></p>
+                  <p class="text-sm text-gray-500">Organisateur de l'événement</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right Column: Ticket Selection -->
+          <div class="lg:col-span-1">
+            <div class="sticky top-6">
+              <div class="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl border border-purple-100 p-6 shadow-sm">
+                <h2 class="text-2xl font-bold text-gray-900 mb-6">Billets disponibles</h2>
+
+                <% if @event.ticket_types.any? %>
+                  <div class="space-y-4 mb-6">
+                    <% @event.ticket_types.each do |ticket_type| %>
+                      <% sold_out = ticket_type.quantity <= ticket_type.tickets.count %>
+                      <% remaining = ticket_type.quantity - ticket_type.tickets.count %>
+
+                      <%= render 'components/ticket_card', {
+                        id: ticket_type.id,
+                        name: ticket_type.name,
+                        description: ticket_type.description,
+                        price_cents: ticket_type.price_cents,
+                        quantity: ticket_type.quantity,
+                        sold_out: sold_out,
+                        remaining: remaining
+                      } %>
+                    <% end %>
+                  </div>
+                <% else %>
+                  <div class="text-center py-8">
+                    <svg class="w-12 h-12 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
+                    </svg>
+                    <h3 class="mt-4 text-lg font-medium text-gray-900">Aucun billet disponible</h3>
+                    <p class="mt-2 text-gray-500">Les billets pour cet événement ne sont pas encore disponibles ou sont épuisés.</p>
+                  </div>
+                <% end %>
+
+                <!-- Cart Summary -->
+                <div class="border-t border-gray-200 pt-6 mt-6">
+                  <div class="flex justify-between items-center mb-2">
+                    <span class="text-gray-600">Total billets:</span>
+                    <span id="cart-count" class="font-medium">0</span>
+                  </div>
+                  <div class="flex justify-between items-center mb-4">
+                    <span class="text-gray-600">Montant total:</span>
+                    <span id="cart-total" class="text-xl font-bold text-purple-700">€0.00</span>
+                  </div>
+                  <button 
+                    id="checkout-btn"
+                    class="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium py-3 px-4 rounded-xl shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 flex items-center justify-center"
+                    disabled
+                    data-action="click->ticket-cart#proceedToCheckout">
+                    <svg class="w-5 h-5 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>
+                    Procéder au paiement
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

app/views/layouts/application.html.erb

@@ -28,7 +28,7 @@
     <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
 
   </head>
-  <body>
+  <body data-user-authenticated="<%= user_signed_in? %>" data-event-slug="<%= @event&.slug %>">
     <div class="app-wrapper">
       <%= render "components/header" %>
 

app/views/pages/dashboard.html.erb

@@ -2,14 +2,44 @@
   <!-- 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-3 gap-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
 
-      <%= render partial: 'components/metric_card', locals: { title: "Événements disponibles", value: @available_events, classes: "from-purple-100 to-indigo-100" } %>
+      <%= 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_this_week, classes: "from-purple-100 to-indigo-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 cette semaine", value: @events_this_week, classes: "from-purple-100 to-indigo-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>
+
+  <!-- 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>
 

app/views/ticket_mailer/purchase_confirmation.html.erb

@@ -0,0 +1,56 @@
+<div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; border-radius: 8px;">
+  <div style="text-align: center; padding: 20px 0; border-bottom: 1px solid #e9ecef;">
+    <h1 style="color: #4c1d95; margin: 0; font-size: 28px;">ApéroNight</h1>
+    <p style="color: #6c757d; margin: 10px 0 0;">Confirmation de votre achat</p>
+  </div>
+
+  <div style="background-color: white; border-radius: 8px; padding: 30px; margin: 20px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+    <h2 style="color: #212529; margin-top: 0;">Bonjour <%= @user.email.split('@').first %>,</h2>
+    
+    <p style="color: #495057; line-height: 1.6;">
+      Merci pour votre achat ! Nous avons le plaisir de vous confirmer votre billet pour l'événement <strong><%= @event.name %></strong>.
+    </p>
+    
+    <div style="background-color: #f8f9fa; border-radius: 6px; padding: 20px; margin: 25px 0;">
+      <h3 style="color: #4c1d95; margin-top: 0; border-bottom: 1px solid #e9ecef; padding-bottom: 10px;">Détails de votre billet</h3>
+      
+      <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
+        <div>
+          <p style="margin: 0; color: #6c757d; font-size: 14px;">Événement</p>
+          <p style="margin: 5px 0 0; font-weight: bold; color: #212529;"><%= @event.name %></p>
+        </div>
+        <div style="text-align: right;">
+          <p style="margin: 0; color: #6c757d; font-size: 14px;">Type de billet</p>
+          <p style="margin: 5px 0 0; font-weight: bold; color: #212529;"><%= @ticket.ticket_type.name %></p>
+        </div>
+      </div>
+      
+      <div style="display: flex; justify-content: space-between;">
+        <div>
+          <p style="margin: 0; color: #6c757d; font-size: 14px;">Date & heure</p>
+          <p style="margin: 5px 0 0; font-weight: bold; color: #212529;"><%= @event.start_time.strftime("%d %B %Y à %H:%M") %></p>
+        </div>
+        <div style="text-align: right;">
+          <p style="margin: 0; color: #6c757d; font-size: 14px;">Prix</p>
+          <p style="margin: 5px 0 0; font-weight: bold; color: #212529;"><%= number_to_currency(@ticket.price_cents / 100.0, unit: "€") %></p>
+        </div>
+      </div>
+    </div>
+    
+    <div style="text-align: center; margin: 30px 0;">
+      <p style="color: #495057; margin-bottom: 20px;">Votre billet est attaché à cet email en format PDF.</p>
+      <p style="color: #495057; margin-bottom: 20px;">Présentez-le à l'entrée de l'événement pour y accéder.</p>
+    </div>
+    
+    <div style="background-color: #fff3cd; border-radius: 6px; padding: 15px; border-left: 4px solid #ffc107;">
+      <p style="margin: 0; color: #856404; font-size: 14px;">
+        <strong>Important :</strong> Ce billet est valable pour une seule entrée. Conservez-le précieusement.
+      </p>
+    </div>
+  </div>
+  
+  <div style="text-align: center; color: #6c757d; font-size: 14px; padding: 20px 0;">
+    <p style="margin: 0;">Si vous avez des questions, contactez-nous à <a href="mailto:support@aperonight.com" style="color: #4c1d95; text-decoration: none;">support@aperonight.com</a></p>
+    <p style="margin: 10px 0 0;">&copy; <%= Time.current.year %> ApéroNight. Tous droits réservés.</p>
+  </div>
+</div>

app/views/ticket_mailer/purchase_confirmation.text.erb

@@ -0,0 +1,19 @@
+Bonjour <%= @user.email.split('@').first %>,
+
+Merci pour votre achat ! Nous avons le plaisir de vous confirmer votre billet pour l'événement "<%= @event.name %>".
+
+DÉTAILS DE VOTRE BILLET
+======================
+
+Événement : <%= @event.name %>
+Type de billet : <%= @ticket.ticket_type.name %>
+Date & heure : <%= @event.start_time.strftime("%d %B %Y à %H:%M") %>
+Prix : <%= number_to_currency(@ticket.price_cents / 100.0, unit: "€") %>
+
+Votre billet est attaché à cet email en format PDF. Présentez-le à l'entrée de l'événement pour y accéder.
+
+Important : Ce billet est valable pour une seule entrée. Conservez-le précieusement.
+
+Si vous avez des questions, contactez-nous à support@aperonight.com
+
+© <%= Time.current.year %> ApéroNight. Tous droits réservés.