ruby_cms 0.2.1.0 → 1.0.0

data/lib/generators/ruby_cms/templates/views/admin/dashboard/_gmail_token_status.html.erb

@@ -0,0 +1,69 @@
+<% gmail_token = @current_user_cms&.google_oauth_token %>
+<% gmail_connected = @current_user_cms&.gmail_connected? %>
+<div class="flex h-full flex-col rounded-lg border border-gray-200/80 bg-white shadow-sm">
+  <div class="flex items-center justify-between gap-3 border-b border-gray-100 px-5 py-3">
+    <div>
+      <p class="text-sm font-semibold text-gray-900">Gmail</p>
+      <p class="text-xs text-gray-500">OAuth-token voor mail verzenden.</p>
+    </div>
+    <%= link_to "View all", admin_gmail_index_path, class: "text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors" %>
+  </div>
+
+  <div class="flex-1 divide-y divide-gray-100">
+    <% if gmail_connected && gmail_token.present? %>
+      <div class="flex items-start gap-3 px-5 py-3">
+        <div class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-100">
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset bg-emerald-50 text-emerald-700 ring-emerald-200">Verbonden</span>
+          </div>
+          <p class="mt-2 text-sm font-medium text-gray-900 truncate"><%= gmail_token.email %></p>
+          <p class="mt-1 text-sm text-gray-500">
+            Token verloopt
+            <% if gmail_token.expired? %>
+              <span class="font-medium text-rose-600"> — verlopen</span>
+            <% elsif gmail_token.expires_soon? %>
+              <span class="font-medium text-amber-600"> — <%= l gmail_token.expires_at, format: :short %> (binnenkort)</span>
+            <% else %>
+              <span class="text-gray-700"> — <%= l gmail_token.expires_at, format: :short %></span>
+            <% end %>
+          </p>
+          <% if gmail_token.refresh_failed? %>
+            <p class="mt-2 text-xs text-rose-600">
+              Laatste refresh mislukt
+              <% if gmail_token.respond_to?(:last_refresh_error) && gmail_token.last_refresh_error.present? %>
+                <span class="text-rose-700/90"> — <%= truncate(gmail_token.last_refresh_error, length: 120) %></span>
+              <% end %>
+            </p>
+          <% end %>
+        </div>
+      </div>
+    <% elsif gmail_token.present? %>
+      <div class="flex items-start gap-3 px-5 py-3">
+        <div class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-100">
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+        </div>
+        <div class="min-w-0 flex-1">
+          <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset bg-amber-50 text-amber-800 ring-amber-200">Actie nodig</span>
+          <p class="mt-2 text-sm text-gray-700">Token is ongeldig of verlopen. Vernieuw de koppeling onder Gmail.</p>
+          <% if gmail_token.email.present? %>
+            <p class="mt-1 text-xs text-gray-500">Laatst gekoppeld: <%= gmail_token.email %></p>
+          <% end %>
+        </div>
+      </div>
+    <% else %>
+      <div class="px-5 py-10 text-center">
+        <div class="mx-auto mb-2 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 text-gray-600 ring-1 ring-inset ring-gray-200">
+          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+        </div>
+        <p class="text-sm font-medium text-gray-900">Geen Gmail gekoppeld</p>
+        <p class="mt-1 text-xs text-gray-500">Koppel je account om mail te verzenden.</p>
+        <%= link_to admin_gmail_index_path, class: "mt-4 inline-flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors" do %>
+          Gmail koppelen <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/{app/views/ruby_cms → lib/generators/ruby_cms/templates/views}/admin/dashboard/blocks/_analytics_overview.html.erb

@@ -1,11 +1,11 @@
 <%# Analytics — same outer shell as sibling cards; softer interior (no box-in-box borders) %>
 <div class="flex h-full min-w-0 flex-col overflow-hidden rounded-lg border border-gray-200/80 bg-white shadow-sm">
   <%# Header — aligned with Quick actions / Recent errors %>
-  <div class="flex items-center justify-between gap-2 border-b border-gray-100 px-5 py-3">
+  <div class="flex flex-wrap items-center justify-between gap-2 border-b border-gray-100 px-4 py-3 sm:px-5">
     <div class="flex min-w-0 items-center gap-3">
       <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-sky-50 text-sky-600">
         <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
         </svg>
       </div>
       <div class="min-w-0">
@@ -14,13 +14,13 @@
       </div>
     </div>
     <%= link_to t("ruby_cms.admin.dashboard.analytics_view_all", default: "View all"),
-                ruby_cms_admin_analytics_path,
+                admin_analytics_path,
                 class: "shrink-0 text-sm font-medium text-gray-600 transition-colors hover:text-gray-900" %>
   </div>
 
   <% if @dashboard_analytics_stats.present? %>
     <%# KPIs — no inner ring/border (rings can render as a harsh outline); same padding rhythm as sibling cards %>
-    <div class="px-5 py-4">
+    <div class="px-4 py-4 sm:px-5">
       <div class="grid grid-cols-2 gap-x-4 gap-y-5">
           <%
             kpi = [
@@ -35,13 +35,13 @@
               <div class="flex items-center gap-2 text-gray-500">
                 <% case item[:icon]
                    when "eye" %>
-                  <svg class="h-4 w-4 shrink-0 <%= item[:cls] %>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+                  <svg class="h-4 w-4 shrink-0 <%= item[:cls] %>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
                 <% when "users" %>
-                  <svg class="h-4 w-4 shrink-0 <%= item[:cls] %>" 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 0z"/></svg>
+                  <svg class="h-4 w-4 shrink-0 <%= item[:cls] %>" 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 0z" /></svg>
                 <% when "sessions" %>
-                  <svg class="h-4 w-4 shrink-0 <%= item[:cls] %>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+                  <svg class="h-4 w-4 shrink-0 <%= item[:cls] %>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
                 <% else %>
-                  <svg class="h-4 w-4 shrink-0 <%= item[:cls] %>" 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>
+                  <svg class="h-4 w-4 shrink-0 <%= item[:cls] %>" 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>
                 <% end %>
                 <span class="text-[11px] font-medium leading-tight text-gray-600"><%= item[:label] %></span>
               </div>
@@ -53,7 +53,7 @@
 
     <% top = @dashboard_analytics_stats[:popular_pages] %>
     <% if top.present? %>
-      <div class="flex-1 border-t border-gray-100 px-5 pb-4 pt-3">
+      <div class="flex-1 border-t border-gray-100 px-4 pb-4 pt-3 sm:px-5">
         <p class="mb-2 text-xs font-medium text-gray-500"><%= t("ruby_cms.admin.dashboard.popular_pages", default: "Popular pages") %></p>
         <ul class="space-y-0.5">
           <% top.to_a.first(4).each_with_index do |(page_name, count), i| %>
@@ -69,9 +69,9 @@
       </div>
     <% end %>
   <% else %>
-    <div class="flex flex-1 flex-col items-center justify-center px-5 py-10 text-center">
+    <div class="flex flex-1 flex-col items-center justify-center px-4 py-10 text-center sm:px-5">
       <div class="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 text-gray-500">
-        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
       </div>
       <p class="text-sm font-medium text-gray-900"><%= t("ruby_cms.admin.dashboard.analytics_unavailable", default: "Analytics unavailable") %></p>
       <p class="mt-1 text-xs text-gray-500"><%= t("ruby_cms.admin.dashboard.analytics_unavailable_hint", default: "Could not load data.") %></p>

data/{app/views/ruby_cms → lib/generators/ruby_cms/templates/views}/admin/dashboard/blocks/_content_blocks_stats.html.erb

@@ -6,12 +6,12 @@
       <p class="mt-0.5 text-xs text-gray-500"><%= @content_blocks_published_count %> published</p>
     </div>
     <div class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-teal-50 text-teal-700 ring-1 ring-inset ring-teal-100">
-      <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h8"/></svg>
+      <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h8" /></svg>
     </div>
   </div>
   <div class="mt-3 border-t border-gray-100 pt-2">
-    <%= link_to ruby_cms_admin_content_blocks_path, class: "inline-flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" do %>
-      Manage <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
+    <%= link_to admin_content_blocks_path, class: "inline-flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" do %>
+      Manage <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg>
     <% end %>
   </div>
 </div>

data/lib/generators/ruby_cms/templates/views/admin/dashboard/blocks/_notifications.html.erb

@@ -0,0 +1,50 @@
+<%
+  notifs ||= []
+  unread_count ||= 0
+%>
+<div class="flex h-full flex-col rounded-lg border border-gray-200/80 bg-white shadow-sm">
+  <div class="flex flex-wrap items-center justify-between gap-2 border-b border-gray-100 px-4 py-3 sm:gap-3 sm:px-5">
+    <div>
+      <p class="text-sm font-semibold text-gray-900">Notificaties</p>
+      <p class="text-xs text-gray-500"><%= unread_count.positive? ? "#{unread_count} ongelezen" : "Geen ongelezen" %></p>
+    </div>
+    <% if unread_count.positive? %>
+      <%= button_to mark_all_read_admin_notifications_path,
+          method: :post,
+          form: { data: { turbo_frame: "_top" } },
+          class: "text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors bg-transparent border-0 p-0 cursor-pointer underline" do %>
+        Markeer alles
+      <% end %>
+    <% end %>
+  </div>
+
+  <% if notifs.any? %>
+    <div class="flex-1 divide-y divide-gray-100">
+      <% notifs.each do |n| %>
+        <%
+          title = n.respond_to?(:title) ? n.title.to_s : n.event&.params&.dig(:title).to_s
+          body  = n.respond_to?(:body)  ? n.body.to_s  : n.event&.params&.dig(:body).to_s
+          target_url = n.respond_to?(:url) && n.url.present? ? n.url : admin_audit_log_entries_path
+        %>
+        <%= button_to mark_read_admin_notification_path(n.id, next: target_url),
+            method: :post,
+            form: { data: { turbo_frame: "_top" }, class: "block w-full" },
+            class: "block w-full text-left px-4 py-3 sm:px-5 hover:bg-gray-50 bg-transparent border-0 cursor-pointer" do %>
+          <p class="truncate text-sm font-medium text-gray-900"><%= title.presence || "Notificatie" %></p>
+          <% if body.present? %>
+            <p class="mt-0.5 truncate text-xs text-gray-500"><%= body %></p>
+          <% end %>
+          <p class="mt-1 text-xs text-gray-400"><%= time_ago_in_words(n.created_at) %> geleden</p>
+        <% end %>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="flex flex-1 flex-col items-center justify-center px-4 py-8 text-center sm:px-5">
+      <div class="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-inset ring-emerald-100">
+        <svg class="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+      </div>
+      <p class="text-sm font-medium text-gray-900">Je bent helemaal bij</p>
+      <p class="mt-1 text-xs text-gray-500">Geen ongelezen notificaties.</p>
+    </div>
+  <% end %>
+</div>

data/{app/views/ruby_cms → lib/generators/ruby_cms/templates/views}/admin/dashboard/blocks/_permissions_stats.html.erb

@@ -6,12 +6,12 @@
       <p class="mt-0.5 text-xs text-gray-500"><%= @user_permissions_count %> grants</p>
     </div>
     <div class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-violet-50 text-violet-700 ring-1 ring-inset ring-violet-100">
-      <svg class="h-3.5 w-3.5" 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"/></svg>
+      <svg class="h-3.5 w-3.5" 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" /></svg>
     </div>
   </div>
   <div class="mt-3 border-t border-gray-100 pt-2">
-    <%= link_to ruby_cms_admin_permissions_path, class: "inline-flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" do %>
-      Manage <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
+    <%= link_to admin_permissions_path, class: "inline-flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" do %>
+      Manage <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg>
     <% end %>
   </div>
 </div>

data/{app/views/ruby_cms → lib/generators/ruby_cms/templates/views}/admin/dashboard/blocks/_quick_actions.html.erb

@@ -1,5 +1,5 @@
 <div class="flex h-full flex-col rounded-lg border border-gray-200/80 bg-white shadow-sm">
-  <div class="flex items-center justify-between gap-3 border-b border-gray-100 px-5 py-3">
+  <div class="flex items-center justify-between gap-3 border-b border-gray-100 px-4 py-3 sm:px-5">
     <div>
       <p class="text-sm font-semibold text-gray-900">Quick actions</p>
       <p class="text-xs text-gray-500">Jump to common admin tasks.</p>
@@ -7,56 +7,56 @@
   </div>
 
   <div class="flex flex-col divide-y divide-gray-100">
-    <%= link_to new_ruby_cms_admin_content_block_path, class: "group flex items-center justify-between gap-2 px-5 py-3 hover:bg-gray-50 transition-colors" do %>
+    <%= link_to new_admin_content_block_path, class: "group flex items-center justify-between gap-2 px-4 py-3 transition-colors hover:bg-gray-50 sm:px-5" do %>
       <div class="flex min-w-0 items-center gap-2.5">
-        <div class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-teal-50 text-teal-700 ring-1 ring-inset ring-teal-100 mr-2">
-          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+        <div class="mr-2 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-teal-100 text-teal-800">
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
         </div>
         <div class="min-w-0">
           <p class="text-sm font-medium text-gray-900">New content block</p>
           <p class="text-xs text-gray-500">Create a new block</p>
         </div>
       </div>
-      <svg class="h-4 w-4 shrink-0 text-gray-300 transition-colors group-hover:text-gray-500" 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>
+      <svg class="h-4 w-4 shrink-0 text-gray-300 transition-colors group-hover:text-gray-500" 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 %>
 
-    <%= link_to ruby_cms_admin_visual_editor_path, class: "group flex items-center justify-between gap-2 px-5 py-3 hover:bg-gray-50 transition-colors" do %>
+    <%= link_to admin_visual_editor_path, class: "group flex items-center justify-between gap-2 px-4 py-3 transition-colors hover:bg-gray-50 sm:px-5" do %>
       <div class="flex min-w-0 items-center gap-2.5">
         <div class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-100 mr-2">
-          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536M9 11l6 6M3 21h18"/></svg>
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536M9 11l6 6M3 21h18" /></svg>
         </div>
         <div class="min-w-0">
           <p class="text-sm font-medium text-gray-900">Visual editor</p>
           <p class="text-xs text-gray-500">Edit content visually</p>
         </div>
       </div>
-      <svg class="h-4 w-4 shrink-0 text-gray-300 transition-colors group-hover:text-gray-500" 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>
+      <svg class="h-4 w-4 shrink-0 text-gray-300 transition-colors group-hover:text-gray-500" 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 %>
 
-    <%= link_to ruby_cms_admin_visitor_errors_path, class: "group flex items-center justify-between gap-2 px-5 py-3 hover:bg-gray-50 transition-colors" do %>
+    <%= link_to admin_visitor_errors_path, class: "group flex items-center justify-between gap-2 px-4 py-3 transition-colors hover:bg-gray-50 sm:px-5" do %>
       <div class="flex min-w-0 items-center gap-2.5">
-        <div class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-100 mr-2">
-          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        <div class="mr-2 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-rose-100 text-rose-800">
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
         </div>
         <div class="min-w-0">
           <p class="text-sm font-medium text-gray-900">Visitor errors</p>
           <p class="text-xs text-gray-500">Review recent issues</p>
         </div>
       </div>
-      <svg class="h-4 w-4 shrink-0 text-gray-300 transition-colors group-hover:text-gray-500" 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>
+      <svg class="h-4 w-4 shrink-0 text-gray-300 transition-colors group-hover:text-gray-500" 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 %>
 
-    <%= link_to ruby_cms_admin_settings_path, class: "group flex items-center justify-between gap-2 px-5 py-3 hover:bg-gray-50 transition-colors" do %>
+    <%= link_to admin_settings_path, class: "group flex items-center justify-between gap-2 px-4 py-3 transition-colors hover:bg-gray-50 sm:px-5" do %>
       <div class="flex min-w-0 items-center gap-2.5">
         <div class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-200 mr-2">
-          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
         </div>
         <div class="min-w-0">
           <p class="text-sm font-medium text-gray-900">Settings</p>
           <p class="text-xs text-gray-500">Configure RubyCMS</p>
         </div>
       </div>
-      <svg class="h-4 w-4 shrink-0 text-gray-300 transition-colors group-hover:text-gray-500" 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>
+      <svg class="h-4 w-4 shrink-0 text-gray-300 transition-colors group-hover:text-gray-500" 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>

data/{app/views/ruby_cms → lib/generators/ruby_cms/templates/views}/admin/dashboard/blocks/_recent_errors.html.erb

@@ -1,36 +1,36 @@
 <div class="flex h-full flex-col rounded-lg border border-gray-200/80 bg-white shadow-sm">
-  <div class="flex items-center justify-between gap-3 border-b border-gray-100 px-5 py-3">
+  <div class="flex flex-wrap items-center justify-between gap-2 border-b border-gray-100 px-4 py-3 sm:gap-3 sm:px-5">
     <div>
       <p class="text-sm font-semibold text-gray-900">Recent errors</p>
       <p class="text-xs text-gray-500">Latest visitor errors.</p>
     </div>
-    <%= link_to "View all", ruby_cms_admin_visitor_errors_path, class: "text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors" %>
+    <%= link_to "View all", admin_visitor_errors_path, class: "text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors" %>
   </div>
 
   <% if @recent_errors.any? %>
     <div class="flex-1 divide-y divide-gray-100">
       <% @recent_errors.first(4).each do |error| %>
-        <div class="px-5 py-3">
+        <div class="px-4 py-3 sm:px-5">
           <p class="truncate text-sm font-medium text-gray-900">
             <span class="font-normal text-gray-500"><%= error.error_class %>:</span>
             <%= error.error_message.truncate(56) %>
           </p>
           <div class="mt-1.5 flex items-center justify-between gap-2">
             <div class="flex min-w-0 flex-wrap items-center gap-2">
-              <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset <%= error.resolved? ? 'bg-emerald-50 text-emerald-700 ring-emerald-200' : 'bg-rose-50 text-rose-700 ring-rose-200' %>">
-                <%= error.resolved? ? 'Resolved' : 'Unresolved' %>
+              <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset <%= error.resolved? ? "bg-emerald-50 text-emerald-700 ring-emerald-200" : "bg-rose-50 text-rose-700 ring-rose-200" %>">
+                <%= error.resolved? ? "Resolved" : "Unresolved" %>
               </span>
               <span class="text-xs text-gray-500"><%= time_ago_in_words(error.created_at) %> ago</span>
             </div>
-            <%= link_to "Open", ruby_cms_admin_visitor_error_path(error), class: "shrink-0 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" %>
+            <%= link_to "Open", admin_visitor_error_path(error), class: "shrink-0 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" %>
           </div>
         </div>
       <% end %>
     </div>
   <% else %>
-    <div class="flex flex-1 flex-col items-center justify-center px-5 py-8 text-center">
+    <div class="flex flex-1 flex-col items-center justify-center px-4 py-8 text-center sm:px-5">
       <div class="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-inset ring-emerald-100">
-        <svg class="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        <svg class="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
       </div>
       <p class="text-sm font-medium text-gray-900">No errors recorded</p>
       <p class="mt-1 text-xs text-gray-500">Everything is running smoothly.</p>

data/{app/views/ruby_cms → lib/generators/ruby_cms/templates/views}/admin/dashboard/blocks/_users_stats.html.erb

@@ -6,12 +6,12 @@
       <p class="mt-0.5 text-xs text-gray-500">registered</p>
     </div>
     <div class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-100">
-      <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a4 4 0 00-4-4h-1M9 20H4v-2a4 4 0 014-4h1m4-4a4 4 0 110-8 4 4 0 010 8z"/></svg>
+      <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a4 4 0 00-4-4h-1M9 20H4v-2a4 4 0 014-4h1m4-4a4 4 0 110-8 4 4 0 010 8z" /></svg>
     </div>
   </div>
   <div class="mt-3 border-t border-gray-100 pt-2">
-    <%= link_to ruby_cms_admin_users_path, class: "inline-flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" do %>
-      Manage <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
+    <%= link_to admin_users_path, class: "inline-flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" do %>
+      Manage <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg>
     <% end %>
   </div>
 </div>

data/{app/views/ruby_cms → lib/generators/ruby_cms/templates/views}/admin/dashboard/blocks/_visitor_errors_stats.html.erb

@@ -13,12 +13,12 @@
     </div>
     <% icon_bg = @unresolved_errors_count.to_i > 0 ? "bg-rose-50 text-rose-700 ring-rose-100" : "bg-emerald-50 text-emerald-700 ring-emerald-100" %>
     <div class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ring-1 ring-inset <%= icon_bg %>">
-      <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
+      <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" /></svg>
     </div>
   </div>
   <div class="mt-3 border-t border-gray-100 pt-2">
-    <%= link_to ruby_cms_admin_visitor_errors_path, class: "inline-flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" do %>
-      View all <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
+    <%= link_to admin_visitor_errors_path, class: "inline-flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" do %>
+      View all <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg>
     <% end %>
   </div>
 </div>

data/lib/generators/ruby_cms/templates/views/admin/dashboard/index.html.erb

@@ -0,0 +1,34 @@
+<%= AdminPageHeader(
+  title: "Dashboard",
+  subtitle: "Welcome back! Here's an overview of your CMS.",
+  breadcrumbs: [
+    { label: "Admin", url: admin_root_path },
+    { label: "Dashboard" }
+  ]
+) %>
+
+<div class="space-y-6">
+
+  <%# Main row: three equal columns — quick actions | recent errors | analytics %>
+  <% if @primary_main_blocks.any? %>
+    <div class="grid grid-cols-1 items-stretch gap-4 lg:grid-cols-3">
+      <% @primary_main_blocks.each do |block| %>
+        <div class="flex min-w-0 flex-col">
+          <%= render_dashboard_block(block) %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%# Host / custom dashboard blocks %>
+  <% if @extra_main_blocks.any? %>
+    <div class="grid grid-cols-1 items-stretch gap-4 lg:grid-cols-3">
+      <% @extra_main_blocks.each do |block| %>
+        <div class="flex min-w-0 flex-col <%= block[:span] == :double ? "lg:col-span-2" : "" %>">
+          <%= render_dashboard_block(block) %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+</div>

data/lib/generators/ruby_cms/templates/views/admin/media_assets/_admin_table_content.html.erb

@@ -0,0 +1,107 @@
+<%
+  total_mb     = (@total_size_kb.to_f / 1024).round(1)
+  storage_pct  = [ (total_mb / 100.0 * 100), 100 ].min
+%>
+<%= turbo_frame_tag "admin_table_content", class: "flex-1 flex flex-col min-h-0", data: { turbo_action: "advance" } do %>
+<div class="flex flex-1 min-h-0 border border-[#e5e7eb] rounded-[12px] overflow-hidden bg-white"
+     data-controller="admin--media-selection"
+     data-admin--media-selection-bulk-delete-url-value="<%= bulk_delete_admin_media_assets_path %>">
+
+  <%# ─────────────  Left rail  ───────────── %>
+  <aside class="w-[220px] shrink-0 bg-[#f9fafb] border-r border-[#e5e7eb] px-2 py-[14px] flex flex-col gap-px overflow-y-auto">
+    <div class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-[#94a3b8] px-[10px] pb-2 pt-[6px]">Folders</div>
+    <% [ [ "all", "Alle bestanden" ] ].each do |id, label| %>
+      <%= link_to admin_media_assets_path(folder: id, view: @view, sort: @sort),
+            class: "flex items-center gap-[10px] px-[10px] py-[7px] rounded-[7px] text-[13px] text-[#475569] no-underline cursor-pointer hover:bg-white hover:text-[#0f172a] data-[active=true]:bg-white data-[active=true]:text-[#0f172a] data-[active=true]:shadow-[0_0_0_1px_#e5e7eb] data-[active=true]:font-medium",
+            data: { active: @folder == id, turbo_frame: "admin_table_content" } do %>
+        <span class="text-[#94a3b8] inline-flex data-[active=true]:text-[#2563eb] [&_svg]:w-[14px] [&_svg]:h-[14px]"><%= media_chip_icon("layers") %></span>
+        <span style="flex: 1"><%= label %></span>
+        <span class="font-medium text-[11px] font-mono text-[#94a3b8]"><%= @folder_counts["all"] || 0 %></span>
+      <% end %>
+    <% end %>
+    <% @folders.each do |id| %>
+      <%= link_to admin_media_assets_path(folder: id, view: @view, sort: @sort),
+            class: "flex items-center gap-[10px] px-[10px] py-[7px] rounded-[7px] text-[13px] text-[#475569] no-underline cursor-pointer hover:bg-white hover:text-[#0f172a] data-[active=true]:bg-white data-[active=true]:text-[#0f172a] data-[active=true]:shadow-[0_0_0_1px_#e5e7eb] data-[active=true]:font-medium",
+            data: { active: @folder == id, turbo_frame: "admin_table_content" } do %>
+        <span class="text-[#94a3b8] inline-flex [&_svg]:w-[14px] [&_svg]:h-[14px]"><%= media_chip_icon("folder") %></span>
+        <span style="flex: 1"><%= id.humanize %></span>
+        <span class="font-medium text-[11px] font-mono text-[#94a3b8]"><%= @folder_counts[id] || 0 %></span>
+      <% end %>
+    <% end %>
+
+    <div class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-[#94a3b8] px-[10px] pb-2 pt-[6px] mt-[18px]">Storage</div>
+    <div class="px-[10px] py-1">
+      <div class="text-[12px] text-[#64748b] mb-[6px] flex justify-between">
+        <span>S3 · svgoor-prod</span>
+        <span class="tabular-nums"><%= total_mb %> / 100 MB</span>
+      </div>
+      <div class="h-[6px] bg-[#f1f5f9] rounded-[3px] overflow-hidden">
+        <div class="h-full bg-[#3b82f6] rounded-[3px]" style="width: <%= storage_pct %>%"></div>
+      </div>
+    </div>
+  </aside>
+
+  <%# ─────────────  Right main  ───────────── %>
+  <section class="flex-1 min-w-0 flex flex-col overflow-hidden bg-white">
+    <%# Toolbar %>
+    <div class="flex items-center gap-[10px] px-[22px] py-[12px] border-b border-[#e5e7eb] flex-wrap">
+      <%= form_with url: admin_media_assets_path, method: :get, local: true,
+            html: { class: "admin-search-field", data: { turbo_frame: "admin_table_content" } } do |f| %>
+        <%= media_chip_icon("search") %>
+        <%= f.hidden_field :folder, value: @folder %>
+        <%= f.hidden_field :view,   value: @view %>
+        <%= f.hidden_field :sort,   value: @sort %>
+        <%= f.search_field :search, value: @search, placeholder: "Zoek op naam of tag…" %>
+      <% end %>
+
+      <div class="inline-flex border border-[#e5e7eb] rounded-[8px] overflow-hidden bg-[#f8fafc] ml-auto">
+        <% [ [ "recent", "Recent" ], [ "name", "Naam" ], [ "size", "Grootte" ], [ "used", "Meest gebruikt" ] ].each do |val, label| %>
+          <%= link_to label,
+                admin_media_assets_path(folder: @folder, view: @view, sort: val, search: @search),
+                class: "bg-transparent border-0 px-[12px] py-[6px] text-[12.5px] text-[#475569] cursor-pointer inline-flex items-center gap-[6px] border-l border-[#e5e7eb] first:border-l-0 data-[active=true]:bg-white data-[active=true]:text-[#0f172a] data-[active=true]:font-semibold no-underline",
+                data: { active: @sort == val, turbo_frame: "admin_table_content" } %>
+        <% end %>
+      </div>
+
+      <div class="inline-flex border border-[#e5e7eb] rounded-[8px] overflow-hidden bg-[#f8fafc]">
+        <% [ [ "grid", "Grid" ], [ "list", "Lijst" ] ].each do |val, label| %>
+          <%= link_to label,
+                admin_media_assets_path(folder: @folder, view: val, sort: @sort, search: @search),
+                class: "bg-transparent border-0 px-[12px] py-[6px] text-[12.5px] text-[#475569] cursor-pointer inline-flex items-center gap-[6px] border-l border-[#e5e7eb] first:border-l-0 data-[active=true]:bg-white data-[active=true]:text-[#0f172a] data-[active=true]:font-semibold no-underline",
+                data: { active: @view == val, turbo_frame: "admin_table_content" } %>
+        <% end %>
+      </div>
+    </div>
+
+    <%# Bulk action bar (hidden until something is selected) %>
+    <div class="flex items-center gap-[12px] px-[22px] py-[10px] bg-[#eff6ff] border-b border-[#dbeafe] text-[13px] text-[#1e40af] font-medium hidden"
+         data-admin--media-selection-target="bar"
+         hidden>
+      <span class="font-semibold text-[12.5px] font-mono" data-admin--media-selection-target="count">0</span>
+      <span>geselecteerd</span>
+      <div class="ml-auto flex gap-[6px]">
+        <button type="button" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-white border border-blue-100 rounded hover:bg-blue-50">Download</button>
+        <button type="button" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-white border border-blue-100 rounded hover:bg-blue-50">Verplaats</button>
+        <button type="button"
+                data-action="click->admin--media-selection#destroy"
+                class="inline-flex items-center gap-1 px-2 py-1 text-xs text-red-700 bg-white border border-red-100 rounded hover:bg-red-50">Verwijderen</button>
+      </div>
+    </div>
+
+    <% if @media_assets.any? %>
+      <% if @view == "grid" %>
+        <%= render "grid", media_assets: @media_assets %>
+      <% else %>
+        <%= render "list", media_assets: @media_assets %>
+      <% end %>
+    <% else %>
+      <div class="flex-1 flex items-center justify-center p-12 text-center text-gray-500">
+        <div>
+          <p class="font-medium text-gray-700 mb-1">Nog geen bestanden</p>
+          <p class="text-sm">Upload je eerste bestand met de knop rechtsboven.</p>
+        </div>
+      </div>
+    <% end %>
+  </section>
+</div>
+<% end %>

data/lib/generators/ruby_cms/templates/views/admin/media_assets/_form.html.erb

@@ -0,0 +1,33 @@
+<%= form_with model: [ :admin, @media_asset ], local: true, class: "space-y-4" do |form| %>
+  <% if @media_asset.errors.any? %>
+    <div class="bg-red-50 border border-red-200 rounded p-3 text-sm text-red-800">
+      <ul class="list-disc pl-5">
+        <% @media_asset.errors.full_messages.each do |m| %>
+          <li><%= m %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div>
+    <%= form.label :name, "Naam", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= form.text_field :name, class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+  </div>
+
+  <div>
+    <%= form.label :folder, "Folder", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= form.select :folder,
+          (Admin::MediaAssetsController::DEFAULT_FOLDERS + (MediaAsset.distinct.pluck(:folder).compact)).uniq.map { |f| [ f.humanize, f ] },
+          {}, class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+  </div>
+
+  <div>
+    <%= form.label :tags, "Tags (komma-gescheiden)", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= form.text_field :tags, value: Array(@media_asset.tags).join(", "), class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500", placeholder: "logo, hero, banner" %>
+  </div>
+
+  <div class="flex items-center justify-end gap-2 pt-4 border-t border-gray-200">
+    <%= link_to "Annuleren", admin_media_asset_path(@media_asset), class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" %>
+    <%= form.submit "Opslaan", class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700" %>
+  </div>
+<% end %>