Include Thredded flash messages styling and moderation stats updates

Author: drusepth

app/views/thredded/moderation/pending.html.erb

@@ -4,39 +4,37 @@
 
 <%= thredded_page do %>
   <div class="thredded--main-section mt-6">
+    <%
+      pending_review_count = Thredded::Post.pending_moderation.count
+      approved_today_count = Thredded::Post.where(moderation_state: :approved).where('updated_at >= ?', Time.zone.now.beginning_of_day).count
+      blocked_today_count  = Thredded::Post.where(moderation_state: :blocked).where('updated_at >= ?', Time.zone.now.beginning_of_day).count
+    %>
     <!-- Moderation Stats Dashboard -->
-    <div class="moderation-dashboard grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+    <div class="moderation-dashboard grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
       <div class="stat-card bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6 flex flex-col items-center text-center">
         <div class="stat-icon pending text-3xl mb-2 text-amber-500">
           <i class="material-icons text-current text-3xl">pending_actions</i>
         </div>
-        <div class="stat-value text-3xl font-bold dark:text-white"><%= @posts.try(:total_count) || 0 %></div>
+        <div class="stat-value text-3xl font-bold dark:text-white"><%= pending_review_count %></div>
         <div class="stat-label text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest mt-1">Pending Review</div>
       </div>
 
       <div class="stat-card bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6 flex flex-col items-center text-center">
         <div class="stat-icon approved text-3xl mb-2 text-emerald-500">
           <i class="material-icons text-current text-3xl">check_circle</i>
         </div>
-        <div class="stat-value text-3xl font-bold dark:text-white">--</div>
+        <div class="stat-value text-3xl font-bold dark:text-white"><%= approved_today_count %></div>
         <div class="stat-label text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest mt-1">Approved Today</div>
       </div>
 
       <div class="stat-card bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6 flex flex-col items-center text-center">
         <div class="stat-icon blocked text-3xl mb-2 text-red-500">
           <i class="material-icons text-current text-3xl">block</i>
         </div>
-        <div class="stat-value text-3xl font-bold dark:text-white">--</div>
+        <div class="stat-value text-3xl font-bold dark:text-white"><%= blocked_today_count %></div>
         <div class="stat-label text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest mt-1">Blocked Today</div>
       </div>
 
-      <div class="stat-card bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6 flex flex-col items-center text-center">
-        <div class="stat-icon users text-3xl mb-2 text-blue-500">
-          <i class="material-icons text-current text-3xl">group</i>
-        </div>
-        <div class="stat-value text-3xl font-bold dark:text-white">--</div>
-        <div class="stat-label text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest mt-1">Active Users</div>
-      </div>
     </div>
 
     <!-- Last Moderated Notice -->

app/views/thredded/shared/_field_errors.html.erb

@@ -0,0 +1,5 @@
+<% unless messages.blank? %>
+  <div class="mb-4 p-4 text-sm font-medium text-red-800 rounded-lg bg-red-50 dark:bg-red-900/30 dark:text-red-300 dark:border dark:border-red-800/50" role="alert">
+    <%= safe_join messages, raw("<br>") %>
+  </div>
+<% end %>

app/views/thredded/shared/_flash_messages.html.erb

@@ -0,0 +1,24 @@
+<% [:success, :error, :notice, :alert].each do |key| %>
+  <% if flash[key] %>
+    <% 
+      color_classes = case key.to_sym
+                      when :success then "bg-green-50 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800/50"
+                      when :error, :alert then "bg-red-50 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800/50"
+                      when :warning then "bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800/50"
+                      else "bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800/50"
+                      end
+      icon = case key.to_sym
+             when :success then "check_circle"
+             when :error, :alert then "error"
+             when :warning then "warning"
+             else "info"
+             end
+    %>
+    <div class="flex items-center p-4 mb-4 text-sm border rounded-lg <%= color_classes %>" role="alert" data-thredded-flash-message>
+      <i class="material-icons flex-shrink-0 inline mr-3" style="font-size: 20px;"><%= icon %></i>
+      <div class="font-medium">
+        <%= flash[key] %>
+      </div>
+    </div>
+  <% end %>
+<% end %>