feat: implement flash messages system with auto-dismiss notifications

- Add flash message helper and styles for consistent notifications
- Replace Devise error messages with flash-based notifications
- Add dashboard page with event statistics
- Configure SMTP settings for development and production
- Update authentication controllers to use flash messages
- Add JavaScript controller for auto-dismiss functionality

app/views/devise/confirmations/new.html.erb

@@ -1,7 +1,6 @@
 <h2>Resend confirmation instructions</h2>
 
 <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
 
   <div class="field">
     <%= f.label :email %><br />

app/views/devise/passwords/edit.html.erb

@@ -1,4 +1,4 @@
-<div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
+<div class="flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
   <div class="max-w-md w-full space-y-8">
     <div>
       <%= link_to "/" do %>
@@ -13,7 +13,6 @@
     </div>
 
     <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: "mt-8 space-y-6" }) do |f| %>
-      <%= render "devise/shared/error_messages", resource: resource %>
       <%= f.hidden_field :reset_password_token %>
 
       <div class="space-y-4">
@@ -22,19 +21,19 @@
           <% if @minimum_password_length %>
             <em class="text-sm text-neutral-500">(<%= @minimum_password_length %> caractères minimum)</em>
           <% end %>
-          <%= f.password_field :password, autofocus: true, autocomplete: "new-password", 
+          <%= f.password_field :password, autofocus: true, autocomplete: "new-password",
               class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
         </div>
 
         <div>
           <%= f.label :password_confirmation, "Confirmer le nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
-          <%= f.password_field :password_confirmation, autocomplete: "new-password", 
+          <%= f.password_field :password_confirmation, autocomplete: "new-password",
               class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
         </div>
       </div>
 
       <div class="actions">
-        <%= f.submit "Changer mon mot de passe", 
+        <%= f.submit "Changer mon mot de passe",
             class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
       </div>
     <% end %>

app/views/devise/passwords/new.html.erb

@@ -1,4 +1,4 @@
-<div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
+<div class="flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
   <div class="max-w-md w-full space-y-8">
     <div>
       <%= link_to "/" do %>
@@ -13,19 +13,18 @@
     </div>
 
     <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: "mt-8 space-y-6" }) do |f| %>
-      <%= render "devise/shared/error_messages", resource: resource %>
 
       <div>
         <%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
         <div class="mt-1">
-          <%= f.email_field :email, autofocus: true, autocomplete: "email", 
-              class: "appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm", 
+          <%= f.email_field :email, autofocus: true, autocomplete: "email",
+              class: "appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm",
               placeholder: "Adresse email" %>
         </div>
       </div>
 
       <div>
-        <%= f.submit "Envoyer le lien de réinitialisation", 
+        <%= f.submit "Envoyer le lien de réinitialisation",
             class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
       </div>
     <% end %>

app/views/devise/registrations/new.html.erb

@@ -1,4 +1,4 @@
-<div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
+<div class="flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
   <div class="max-w-md w-full space-y-8">
     <div>
       <%= link_to "/" do %>
@@ -16,12 +16,11 @@
     </div>
 
     <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "mt-8 space-y-6" }) do |f| %>
-      <%= render "devise/shared/error_messages", resource: resource %>
 
       <div class="space-y-4">
         <div>
           <%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
-          <%= f.email_field :email, autofocus: true, autocomplete: "email", 
+          <%= f.email_field :email, autofocus: true, autocomplete: "email",
               class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
         </div>
 
@@ -30,13 +29,13 @@
           <% if @minimum_password_length %>
           <em class="text-sm text-neutral-500">(<%= @minimum_password_length %> caractères minimum)</em>
           <% end %>
-          <%= f.password_field :password, autocomplete: "new-password", 
+          <%= f.password_field :password, autocomplete: "new-password",
               class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
         </div>
 
         <div>
           <%= f.label :password_confirmation, class: "block text-sm font-medium text-neutral-700" %>
-          <%= f.password_field :password_confirmation, autocomplete: "new-password", 
+          <%= f.password_field :password_confirmation, autocomplete: "new-password",
               class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
         </div>
       </div>

app/views/devise/sessions/new.html.erb

@@ -1,4 +1,4 @@
-<div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
+<div class="flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
   <div class="max-w-md w-full space-y-8">
     <div>
       <%= link_to "/" do %>
@@ -16,20 +16,19 @@
     </div>
 
     <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "mt-8 space-y-6" }) do |f| %>
-      <%= devise_error_messages! %>
 
       <div class="rounded-md shadow-sm -space-y-px">
         <div class="field">
           <%= f.label :email, class: "sr-only" %>
-          <%= f.email_field :email, autofocus: true, autocomplete: "email", 
-              class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-t-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm", 
+          <%= f.email_field :email, autofocus: true, autocomplete: "email",
+              class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-t-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm",
               placeholder: "Adresse email" %>
         </div>
 
         <div class="field">
           <%= f.label :password, class: "sr-only" %>
-          <%= f.password_field :password, autocomplete: "current-password", 
-              class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-b-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm", 
+          <%= f.password_field :password, autocomplete: "current-password",
+              class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-b-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm",
               placeholder: "Mot de passe" %>
         </div>
       </div>

app/views/devise/shared/_error_messages.html.erb

@@ -1,14 +1,5 @@
 <% if resource.errors.any? %>
-  <div id="error_explanation" data-turbo-cache="false" class="bg-red-50 border border-red-200 rounded-md p-4 mb-4">
-    <h2 class="text-lg font-medium text-red-800 mb-3">
-      <%= I18n.t("errors.messages.not_saved",
-                 count: resource.errors.count,
-                 resource: resource.class.model_name.human.downcase) %>
-    </h2>
-    <ul class="list-disc list-inside space-y-1">
-      <% resource.errors.full_messages.each do |message| %>
-        <li class="text-sm text-red-700"><%= message %></li>
-      <% end %>
-    </ul>
-  </div>
+  <% resource.errors.full_messages.each do |message| %>
+    <% flash.now[:error] = message %>
+  <% end %>
 <% end %>

app/views/devise/unlocks/new.html.erb

@@ -1,7 +1,6 @@
 <h2>Resend unlock instructions</h2>
 
 <%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
 
   <div class="field">
     <%= f.label :email %><br />

app/views/layouts/application.html.erb

@@ -7,28 +7,30 @@
     <meta name="mobile-web-app-capable" content="yes">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-
     <%= yield :head %>
-
     <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
     <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
-
     <link rel="icon" href="/icon.png" type="image/png">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/icon.png">
-
     <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "theme", "data-turbo-track": "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
   </head>
-
   <body class="h-full font-sans text-neutral-900 antialiased">
-    <div class="min-h-full">
-        <%= render "components/header" %>
+
+    <div class="">
+      <%= render "components/header" %>
 
       <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <%= yield %>
+        <div class="flash">
+          <%= render "shared/flash_messages" %>
+        </div>
+
+        <div class="yield">
+          <%= yield %>
+        </div>
       </main>
 
       <footer class="bg-neutral-100 text-neutral-600">
@@ -36,6 +38,7 @@
           <%= render "components/footer" %>
         </div>
       </footer>
+
     </div>
   </body>
 </html>

app/views/pages/dashboard.html.erb

@@ -0,0 +1,157 @@
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <!-- Hero section with metrics -->
+  <div class="mb-8">
+    <h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-6">Tableau de bord</h1>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+
+      <div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
+        <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+        <div class="relative">
+          <div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
+            <%= @available_parties %>
+          </div>
+          <p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
+            Événements disponibles
+          </p>
+          <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
+        </div>
+      </div>
+
+      <div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
+        <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+        <div class="relative">
+          <div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
+            <%= @events_this_week %>
+          </div>
+          <p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
+            Événements aujourd'hui
+          </p>
+          <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
+        </div>
+      </div>
+
+
+
+      <div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
+        <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+        <div class="relative">
+          <div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
+            <%= @events_this_week %>
+          </div>
+          <p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
+            Événements cette semaine
+          </p>
+          <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- Today's parties -->
+  <div class="card hover-lift mb-8">
+    <div class="card-header">
+      <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Évenements du jour</h2>
+    </div>
+    <div class="card-body">
+      <% if @today_parties.any? %>
+        <ul class="space-y-4">
+          <% @today_parties.each do |party| %>
+            <li>
+              <%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
+                <div class="flex items-center space-x-4">
+                  <div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
+                    <%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
+                      <%= party.name %>
+                    </h3>
+                    <p class="text-sm text-slate-600 dark:text-slate-400">
+                      <%= l(party.start_time, format: :short) %>
+                    </p>
+                  </div>
+                </div>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      <% else %>
+        <p class="text-slate-600 dark:text-slate-400">Aucune partie aujourd'hui.</p>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Tomorrow's parties -->
+  <div class="card hover-lift mb-8">
+    <div class="card-header">
+      <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Évenements de demain</h2>
+    </div>
+    <div class="card-body">
+      <% if @tomorrow_parties.any? %>
+        <ul class="space-y-4">
+          <% @tomorrow_parties.each do |party| %>
+            <li>
+              <%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
+                <div class="flex items-center space-x-4">
+                  <div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
+                    <%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
+                      <%= party.name %>
+                    </h3>
+                    <p class="text-sm text-slate-600 dark:text-slate-400">
+                      <%= l(party.start_time, format: :short) %>
+                    </p>
+                  </div>
+                </div>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      <% else %>
+        <p class="text-slate-600 dark:text-slate-400">Aucune partie demain.</p>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Other upcoming parties with pagination -->
+  <div class="card hover-lift">
+    <div class="card-header">
+      <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Autres évenements à venir</h2>
+    </div>
+    <div class="card-body">
+      <% if @other_parties.any? %>
+        <ul class="space-y-4">
+          <% @other_parties.each do |party| %>
+            <li>
+              <%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
+                <div class="flex items-center space-x-4">
+                  <div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
+                    <%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
+                      <%= party.name %>
+                    </h3>
+                    <p class="text-sm text-slate-600 dark:text-slate-400">
+                      <%= l(party.start_time, format: :short) %>
+                    </p>
+                  </div>
+                </div>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+
+        <!-- Pagination -->
+        <div class="mt-8">
+          <%= paginate @other_parties %>
+        </div>
+      <% else %>
+        <p class="text-slate-600 dark:text-slate-400">Aucune autre partie à venir.</p>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/shared/_flash_messages.html.erb

@@ -0,0 +1,25 @@
+<% flash.each do |type, message| %>
+  <% if message.present? %>
+    <div class="rounded-md bg-green-50 border-green-100 p-4 border <%= flash_class(type) %> animate-fade-in" data-controller="flash-message">
+      <div class="flex">
+        <div class="shrink-0">
+          <%= flash_icon(type) %>
+        </div>
+        <div class="ml-3 w-full">
+          <div class="space-y-2">
+            <div class="text-sm text-green-700">
+              <p class="text-sm font-medium"><%= message %></p>
+            </div>
+          </div>
+        </div>
+        <div class="ml-4 flex-shrink-0 flex">
+          <button data-action="click->flash-message#close" class="inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
+            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>