ruby_cms 0.2.1.0 → 1.0.0

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

@@ -0,0 +1,58 @@
+<%
+  MEDIA_TONE_THUMB = {
+    "coral"  => "bg-gradient-to-br from-[#fff5f0] to-[#ffe8db] border-[#fde2cf] text-[#9a3412]",
+    "purple" => "bg-gradient-to-br from-[#f5f3ff] to-[#ede9fe] border-[#ddd6fe] text-[#5b21b6]",
+    "blue"   => "bg-gradient-to-br from-[#eff6ff] to-[#dbeafe] border-[#bfdbfe] text-[#1e3a8a]",
+    "sand"   => "bg-gradient-to-br from-[#fefce8] to-[#fef9c3] border-[#fde68a] text-[#854d0e]",
+  }.freeze
+
+  MEDIA_TONE_PILL = {
+    "coral"  => "text-[#9a3412] border-[#fde2cf]",
+    "purple" => "text-[#5b21b6] border-[#ddd6fe]",
+    "blue"   => "text-[#1e3a8a] border-[#bfdbfe]",
+    "sand"   => "text-[#854d0e] border-[#fde68a]",
+  }.freeze
+%>
+<div class="flex-1 overflow-y-auto p-[18px_22px] grid grid-cols-[repeat(auto-fill,minmax(168px,1fr))] gap-4">
+  <% media_assets.each do |asset|
+       tone = (asset.tone.presence || "coral")
+       thumb_classes = MEDIA_TONE_THUMB[tone] || MEDIA_TONE_THUMB["coral"]
+       pill_classes  = MEDIA_TONE_PILL[tone]  || MEDIA_TONE_PILL["coral"]
+       kind_label = case asset.kind when "image" then "IMG" when "doc" then "PDF" when "video" then "VIDEO" else asset.kind.to_s.upcase end %>
+    <%= link_to admin_media_asset_path(asset),
+          class: "flex flex-col gap-2 cursor-pointer rounded-[12px] text-inherit no-underline",
+          data: { id: asset.id, turbo_frame: "_top" } do %>
+      <div class="relative aspect-[4/3] rounded-[10px] border overflow-hidden grid place-items-center transition-[transform,box-shadow] duration-150 hover:-translate-y-0.5 hover:shadow-[0_8px_18px_rgba(15,23,42,0.10)] data-[selected=true]:outline-[2.5px] data-[selected=true]:outline-[#2563eb] data-[selected=true]:outline-offset-2 <%= thumb_classes %>">
+        <% if asset.kind == "image" && asset.file.attached? %>
+          <%= image_tag asset.cdn_url, class: "absolute inset-0 w-full h-full object-cover z-0", alt: asset.name, loading: "lazy" %>
+        <% else %>
+          <%# Decorative dot pattern — approximated; exact radial-gradient pattern omitted as purely decorative %>
+          <div class="absolute inset-0 opacity-50"></div>
+          <div class="relative z-[1] opacity-70"><%= media_asset_icon(asset.kind, size: 28) %></div>
+        <% end %>
+        <span class="absolute top-2 left-2 font-mono font-semibold text-[9px] tracking-[0.06em] px-[6px] py-[2px] rounded-full border bg-white/85 z-[2] <%= pill_classes %>"><%= kind_label %></span>
+        <button type="button"
+                class="absolute top-2 right-2 w-[22px] h-[22px] rounded-full bg-white/85 border border-[rgba(15,23,42,0.15)] grid place-items-center text-white z-[2] cursor-pointer p-0 data-[on=true]:bg-[#2563eb] data-[on=true]:border-[#2563eb]"
+                data-action="click->admin--media-selection#toggle"
+                data-admin--media-selection-target="checkbox"
+                data-id="<%= asset.id %>"
+                data-on="false"
+                aria-label="Selecteer <%= asset.name %>">
+          <span data-admin--media-selection-target="checkboxIcon" hidden><%= media_asset_check_icon %></span>
+        </button>
+        <% if asset.used_count.to_i.zero? %>
+          <span class="absolute bottom-2 left-2 font-sans font-semibold text-[10px] bg-[#fffbeb] text-[#b45309] border border-[#fef3c7] px-[7px] py-[2px] rounded-full z-[2]">ongebruikt</span>
+        <% end %>
+      </div>
+      <div>
+        <div class="text-[12.5px] font-medium text-[#0f172a] overflow-hidden text-ellipsis whitespace-nowrap font-mono"><%= asset.name %></div>
+        <div class="text-[11.5px] text-[#64748b]">
+          <% if (asset.kind == "image" || asset.kind == "video") && asset.width.present? && asset.height.present? %>
+            <%= asset.width %>×<%= asset.height %> ·
+          <% end %>
+          <%= number_to_human_size(asset.size_kb.to_i * 1024) %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,43 @@
+<%
+  MEDIA_TONE_THUMB = {
+    "coral"  => "bg-gradient-to-br from-[#fff5f0] to-[#ffe8db] border-[#fde2cf] text-[#9a3412]",
+    "purple" => "bg-gradient-to-br from-[#f5f3ff] to-[#ede9fe] border-[#ddd6fe] text-[#5b21b6]",
+    "blue"   => "bg-gradient-to-br from-[#eff6ff] to-[#dbeafe] border-[#bfdbfe] text-[#1e3a8a]",
+    "sand"   => "bg-gradient-to-br from-[#fefce8] to-[#fef9c3] border-[#fde68a] text-[#854d0e]",
+  }.freeze unless defined?(MEDIA_TONE_THUMB)
+%>
+<div class="flex-1 overflow-y-auto px-[22px] pb-[22px]">
+  <div class="flex items-center gap-[14px] py-[10px] border-b border-[#e5e7eb] text-[11.5px] font-semibold uppercase tracking-[0.06em] text-[#64748b] sticky top-0 bg-white z-[1]">
+    <span style="width: 36px;"></span>
+    <span style="flex: 1;">Bestand</span>
+    <span style="width: 110px;">Afmetingen</span>
+    <span style="width: 80px;">Grootte</span>
+    <span style="width: 90px;">Gebruikt</span>
+    <span style="width: 130px;">Geüpload</span>
+  </div>
+  <% media_assets.each do |asset|
+       tone = asset.tone.presence || "coral"
+       thumb_classes = MEDIA_TONE_THUMB[tone] || MEDIA_TONE_THUMB["coral"] %>
+    <%= link_to admin_media_asset_path(asset),
+          class: "flex items-center gap-[14px] py-[10px] border-b border-[#e5e7eb] cursor-pointer text-inherit no-underline hover:bg-[#f9fafb]",
+          data: { turbo_frame: "_top" } do %>
+      <div class="w-[36px] h-[36px] rounded-[6px] border shrink-0 grid place-items-center <%= thumb_classes %>"><%= media_asset_icon(asset.kind, size: 14) %></div>
+      <div style="flex: 1; min-width: 0;">
+        <div style="font-size: 13px; font-weight: 500; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><%= asset.name %></div>
+        <div style="font-size: 11.5px; color: #64748b;">
+          <%= asset.folder %><%= " · #{Array(asset.tags).join(', ')}" if Array(asset.tags).any? %>
+        </div>
+      </div>
+      <span class="font-mono text-[12px] text-[#475569]" style="width: 110px;"><%= asset.kind == "doc" ? "—" : (asset.width.present? && asset.height.present? ? "#{asset.width}×#{asset.height}" : "—") %></span>
+      <span class="font-mono text-[12px] text-[#475569]" style="width: 80px;"><%= number_to_human_size(asset.size_kb.to_i * 1024) %></span>
+      <span style="width: 90px;">
+        <% if asset.used_count.to_i.zero? %>
+          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-amber-50 text-amber-700 border border-amber-100">ongebruikt</span>
+        <% else %>
+          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700"><%= asset.used_count %>×</span>
+        <% end %>
+      </span>
+      <span style="width: 130px; font-size: 12px; color: #64748b;"><%= time_ago_in_words(asset.created_at) %> geleden</span>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,13 @@
+<%= AdminPage do %>
+  <%= AdminPageHeader(
+    title: "Bewerken: #{@media_asset.name}",
+    breadcrumbs: [
+      { label: "Admin", url: admin_root_path },
+      { label: "Media library", url: admin_media_assets_path },
+      { label: @media_asset.name, url: admin_media_asset_path(@media_asset) },
+      { label: "Bewerken" }
+    ]
+  ) %>
+
+  <%= render "form" %>
+<% end %>

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

@@ -0,0 +1,36 @@
+<%= AdminPage do %>
+<%= AdminPageHeader(
+  title: "Media library",
+  breadcrumbs: [
+    { label: "Admin", url: admin_root_path },
+    { label: "Content" },
+    { label: "Media library" }
+  ],
+  subtitle: "#{@total_count} bestanden · #{(@total_size_kb.to_f / 1024).round(1)}MB totaal · #{@unused_count} ongebruikt"
+) do %>
+  <%= link_to "#", class: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50" do %>
+    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M16 12l-4 4-4-4M12 16V4" /></svg>
+    Bulk download
+  <% end %>
+
+  <div data-controller="admin--media-uploader">
+    <%= form_with url: admin_media_assets_path, method: :post, multipart: true, local: true,
+                  data: { admin__media_uploader_target: "form" },
+                  html: { class: "inline" } do |f| %>
+      <%= f.hidden_field :folder, value: @folder %>
+      <%= f.file_field :file, multiple: true,
+            data: { admin__media_uploader_target: "input", action: "change->admin--media-uploader#submit" },
+            class: "hidden",
+            accept: "image/*,video/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" %>
+      <button type="button"
+              data-action="click->admin--media-uploader#open"
+              class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700">
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M16 8l-4-4-4 4M12 4v12" /></svg>
+        Upload
+      </button>
+    <% end %>
+  </div>
+<% end %>
+
+<%= render "admin_table_content" %>
+<% end %>

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

@@ -0,0 +1,97 @@
+<%
+  tone = @media_asset.tone.presence || "coral"
+
+  MEDIA_TONE_BG = {
+    "coral"  => "bg-gradient-to-br from-[#fff5f0] to-[#ffe8db] border-[#fde2cf] text-[#9a3412]",
+    "purple" => "bg-gradient-to-br from-[#f5f3ff] to-[#ede9fe] border-[#ddd6fe] text-[#5b21b6]",
+    "blue"   => "bg-gradient-to-br from-[#eff6ff] to-[#dbeafe] border-[#bfdbfe] text-[#1e3a8a]",
+    "sand"   => "bg-gradient-to-br from-[#fefce8] to-[#fef9c3] border-[#fde68a] text-[#854d0e]",
+  }.freeze unless defined?(MEDIA_TONE_BG)
+
+  tone_classes = MEDIA_TONE_BG[tone] || MEDIA_TONE_BG["coral"]
+%>
+
+<%= AdminPage do %>
+<%= AdminPageHeader(
+  title: @media_asset.name,
+  breadcrumbs: [
+    { label: "Admin", url: admin_root_path },
+    { label: "Media library", url: admin_media_assets_path },
+    { label: @media_asset.name }
+  ]
+) do %>
+  <%= link_to "Terug", admin_media_assets_path, class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50" %>
+  <%= link_to "Bewerken", edit_admin_media_asset_path(@media_asset), class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700" %>
+<% end %>
+
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 p-4">
+  <%# Preview pane %>
+  <div>
+    <div class="rounded-[12px] border overflow-hidden grid place-items-center <%= tone_classes %>"
+         style="aspect-ratio: <%= @media_asset.kind == "doc" || @media_asset.width.blank? ? "4/5" : "#{@media_asset.width}/#{@media_asset.height}" %>;">
+      <% if @media_asset.kind == "image" && @media_asset.file.attached? %>
+        <%= image_tag @media_asset.cdn_url, alt: @media_asset.name, class: "w-full h-full object-contain" %>
+      <% elsif @media_asset.kind == "video" %>
+        <%= media_asset_icon("video", size: 48) %>
+      <% else %>
+        <%= media_asset_icon("doc", size: 48) %>
+      <% end %>
+    </div>
+  </div>
+
+  <%# Details + actions %>
+  <div class="space-y-6">
+    <section>
+      <div class="text-[10.5px] font-semibold tracking-[0.08em] uppercase text-[#94a3b8] mb-[6px]">Details</div>
+      <dl class="grid gap-[6px_14px] text-[13px]" style="grid-template-columns: 130px 1fr;">
+        <dt class="text-[#64748b]">Type</dt><dd class="m-0 text-[#0f172a] font-mono text-[12px] text-[#475569]"><%= @media_asset.mime_type %></dd>
+        <% if @media_asset.kind != "doc" && @media_asset.width.present? && @media_asset.height.present? %>
+          <dt class="text-[#64748b]">Afmetingen</dt><dd class="m-0 text-[#0f172a]"><%= @media_asset.width %> × <%= @media_asset.height %> px</dd>
+        <% end %>
+        <dt class="text-[#64748b]">Grootte</dt><dd class="m-0 text-[#0f172a]"><%= number_to_human_size(@media_asset.size_kb.to_i * 1024) %></dd>
+        <dt class="text-[#64748b]">Folder</dt><dd class="m-0 text-[#0f172a]"><%= @media_asset.folder %></dd>
+        <dt class="text-[#64748b]">Tags</dt><dd class="m-0 text-[#0f172a]"><%= Array(@media_asset.tags).any? ? Array(@media_asset.tags).join(", ") : "—" %></dd>
+        <dt class="text-[#64748b]">Geüpload door</dt><dd class="m-0 text-[#0f172a]"><%= @media_asset.uploaded_by&.email_address || "—" %></dd>
+        <dt class="text-[#64748b]">Geüpload op</dt><dd class="m-0 text-[#0f172a]"><%= l(@media_asset.created_at, format: :long) rescue @media_asset.created_at.to_fs(:short) %></dd>
+        <dt class="text-[#64748b]">Gebruikt</dt><dd class="m-0 text-[#0f172a]">
+          <% if @media_asset.used_count.to_i.zero? %>
+            Nergens · veilig om te verwijderen
+          <% else %>
+            <%= @media_asset.used_count %> content block<%= "s" if @media_asset.used_count.to_i != 1 %>
+          <% end %>
+        </dd>
+      </dl>
+    </section>
+
+    <% if @media_asset.cdn_url.present? %>
+      <section data-controller="admin--clipboard">
+        <div class="text-[10.5px] font-semibold tracking-[0.08em] uppercase text-[#94a3b8] mb-[6px]">Public URL</div>
+        <div style="display: flex; gap: 6px;">
+          <input type="text" readonly autocomplete="off"
+                 class="flex-1 h-[32px] rounded-[8px] border border-[#e5e7eb] px-[10px] font-mono font-medium text-[11.5px] text-[#0f172a] bg-[#f9fafb]"
+                 value="<%= @media_asset.cdn_url %>"
+                 data-admin--clipboard-target="source">
+          <button type="button"
+                  data-action="click->admin--clipboard#copy"
+                  data-admin--clipboard-target="button"
+                  class="inline-flex items-center gap-1 px-3 py-2 text-xs bg-white border border-gray-200 rounded hover:bg-gray-50">Kopieer</button>
+        </div>
+      </section>
+    <% end %>
+
+    <section style="display: flex; gap: 8px; flex-wrap: wrap;">
+      <%
+        # Whitelist http(s) URLs only — avoids `javascript:` etc. in href.
+        cdn_href = @media_asset.cdn_url.to_s
+        cdn_href = nil unless cdn_href.match?(%r{\Ahttps?://[^\s"'<>]+\z})
+      %>
+      <% if cdn_href %>
+        <%= link_to "Download", cdn_href, class: "inline-flex items-center gap-1 px-3 py-2 text-sm bg-white border border-gray-300 rounded hover:bg-gray-50", target: "_blank", rel: "noopener" %>
+      <% end %>
+      <%= link_to "Bewerken", edit_admin_media_asset_path(@media_asset), class: "inline-flex items-center gap-1 px-3 py-2 text-sm bg-white border border-gray-300 rounded hover:bg-gray-50" %>
+      <span style="flex: 1;"></span>
+      <%= button_to "Verwijderen", admin_media_asset_path(@media_asset), method: :delete, data: { turbo_confirm: "Weet je het zeker?" }, class: "inline-flex items-center gap-1 px-3 py-2 text-sm text-red-700 bg-white border border-red-200 rounded hover:bg-red-50" %>
+    </section>
+  </div>
+</div>
+<% end %>

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

@@ -0,0 +1,30 @@
+<div class="mx-auto max-w-2xl py-10">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-semibold tracking-tight">Passkeys</h1>
+    <%= link_to "Add passkey", new_admin_passkey_registration_path,
+          class: "inline-flex items-center justify-center rounded-[var(--radius)] bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-all duration-200 ease-soft hover:bg-primary/90" %>
+  </div>
+
+  <div class="rounded-[var(--radius)] border border-border bg-card shadow-sm">
+    <% if @passkey_credentials.empty? %>
+      <p class="text-sm text-muted-foreground p-6">No passkeys yet. Add one for faster sign-in.</p>
+    <% else %>
+      <ul class="divide-y divide-border">
+        <% @passkey_credentials.each do |cred| %>
+          <li class="flex items-center justify-between px-5 py-4">
+            <div>
+              <p class="font-medium"><%= cred.nickname %></p>
+              <p class="text-sm text-muted-foreground">
+                Last used <%= cred.last_used_at ? "#{time_ago_in_words(cred.last_used_at)} ago" : "never" %>
+              </p>
+            </div>
+            <%= button_to "Remove", admin_passkey_credential_path(cred),
+                  method: :delete,
+                  class: "text-sm font-medium text-destructive hover:underline",
+                  data: { turbo_confirm: "Remove this passkey?" } %>
+          </li>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+</div>

data/lib/generators/ruby_cms/templates/views/admin/passkey_registrations/new.html.erb

@@ -0,0 +1,23 @@
+<div class="mx-auto max-w-sm py-16"
+     data-controller="webauthn"
+     data-webauthn-options-url-value="<%= admin_passkey_registration_options_path %>"
+     data-webauthn-callback-url-value="<%= admin_passkey_registration_path %>">
+
+  <div class="rounded-[var(--radius)] border border-border bg-card shadow-sm p-8">
+    <div class="text-center mb-6">
+      <h1 class="text-2xl font-semibold tracking-tight">Add a passkey</h1>
+      <p class="mt-1 text-sm text-muted-foreground">Face ID, Touch ID, Windows Hello, or your password manager.</p>
+    </div>
+
+    <input name="nickname" placeholder="Name this device (e.g. My Mac)"
+           class="w-full rounded-[var(--radius)] border border-border bg-input px-3 py-2 text-sm shadow-sm mb-4 focus:outline-none focus:ring-2 focus:ring-ring/30">
+
+    <button data-action="webauthn#register"
+            class="w-full inline-flex items-center justify-center gap-2 rounded-[var(--radius)] bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground shadow transition-all duration-200 ease-soft hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card">
+      Create passkey
+    </button>
+
+    <%= link_to "Cancel", admin_user_path(Current.user, tab: "passkeys"),
+          class: "mt-4 block text-center text-sm text-muted-foreground hover:text-foreground transition-colors" %>
+  </div>
+</div>

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

@@ -0,0 +1,45 @@
+<%
+  current_filter    = @current_filter    || "all"
+  current_sort      = @sort_column       || "key"
+  current_direction = @sort_direction    || "asc"
+  filter_counts     = @filter_counts     || { all: 0, assigned: 0, unassigned: 0 }
+%>
+<%= render partial: "admin/shared/data_table", locals: {
+  id: "admin_table_content",
+  search_url: admin_permissions_path,
+  search_param: :q,
+  search_placeholder: t("admin.pages.permissions.search_placeholder", default: "Zoek op sleutel of naam…"),
+  filter_param: :filter,
+  current_filter: current_filter,
+  filter_pills: [
+    { key: :all,        label: t("admin.pages.common.all",        default: "Alle"),            count: filter_counts[:all] },
+    { key: :assigned,   label: t("admin.pages.permissions.assigned",   default: "Toegewezen"),     count: filter_counts[:assigned] },
+    { key: :unassigned, label: t("admin.pages.permissions.unassigned", default: "Niet toegewezen"), count: filter_counts[:unassigned] }
+  ],
+  columns_toggle: [
+    { key: :key,      label: t("admin.pages.permissions.key",      default: "Sleutel") },
+    { key: :name,     label: t("admin.pages.permissions.name",     default: "Naam") },
+    { key: :assigned, label: t("admin.pages.permissions.assigned", default: "Toegewezen") },
+    { key: :status,   label: t("admin.pages.common.status",        default: "Status") }
+  ],
+  headers: [
+    { key: :key,      label: t("admin.pages.permissions.key",      default: "Sleutel"),    sortable: true,  width: "240px" },
+    { key: :name,     label: t("admin.pages.permissions.name",     default: "Naam"),       sortable: true },
+    { key: :assigned, label: t("admin.pages.permissions.assigned", default: "Toegewezen"), sortable: true,  width: "160px" },
+    { key: :status,   label: t("admin.pages.common.status",        default: "Status"),     sortable: false, width: "120px" },
+    { key: :actions,  label: t("admin.pages.common.actions",       default: "Acties"),     actions: true,   width: "40px", align: :right }
+  ],
+  sort_url: admin_permissions_path,
+  current_sort: current_sort,
+  current_direction: current_direction,
+  bulk_delete_url: bulk_delete_admin_permissions_path,
+  collection: @permissions || [],
+  row_partial: "admin/permissions/row",
+  empty_state: {
+    title: t("admin.pages.permissions.empty_title", default: "Geen rechten"),
+    description: t("admin.pages.permissions.empty_description", default: "Er zijn nog geen rechten aangemaakt.")
+  },
+  pagination: @pagination,
+  pagination_path: admin_permissions_path,
+  preserved_query: { q: params[:q], filter: current_filter }.compact
+} %>

data/lib/generators/ruby_cms/templates/views/admin/permissions/_matrix.html.erb

@@ -0,0 +1,75 @@
+<%# Permission × User matrix. Click cell toggles UserPermission via JSON PATCH. %>
+<div class="flex flex-col flex-1 min-h-0 min-w-0"
+     data-controller="admin--permission-matrix"
+     data-admin--permission-matrix-csrf-value="<%= form_authenticity_token %>">
+
+  <div class="flex items-center gap-3 px-4 py-2.5 border-b border-[#e9e4d4]">
+    <div class="relative flex-1 max-w-md">
+      <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#a8a29e] pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z" /></svg>
+      <input type="search"
+             autocomplete="off"
+             placeholder="Zoek permissie of gebruiker…"
+             data-admin--permission-matrix-target="search"
+             data-action="input->admin--permission-matrix#filter"
+             class="w-full h-8 pl-8 pr-3 rounded-md border border-[#e9e4d4] bg-white text-[13px] text-[#1c1917] placeholder:text-[#a8a29e] focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
+    </div>
+    <span class="text-[11.5px] text-[#78716c]"><%= @permissions.size %> permissies · <%= @matrix_users.size %> gebruikers · klik op een cel om te wijzigen</span>
+  </div>
+
+  <div class="flex-1 overflow-auto">
+    <table class="w-full border-collapse text-[13px]"
+           data-admin--permission-matrix-target="table">
+      <thead class="sticky top-0 z-10 bg-white">
+        <tr>
+          <th class="sticky left-0 z-20 bg-white border-b border-r border-[#e9e4d4] px-3 py-2 text-left text-[11.5px] font-semibold uppercase tracking-[0.06em] text-[#78716c] min-w-[280px]">
+            Permissie
+          </th>
+          <% @matrix_users.each do |user| %>
+            <% initials = user.email_address.to_s.split(/[@.\s_-]/).first(2).map { |s| s[0].to_s.upcase }.join.presence || "??" %>
+            <th class="border-b border-[#e9e4d4] px-2 py-2 align-bottom"
+                data-admin--permission-matrix-target="userHeader"
+                data-user-email="<%= user.email_address.to_s.downcase %>">
+              <div class="flex flex-col items-center gap-1 min-w-[80px]" title="<%= user.email_address %>">
+                <span class="inline-flex items-center justify-center w-8 h-8 rounded-md bg-blue-600 text-white text-[11px] font-semibold"><%= initials %></span>
+                <span class="text-[10.5px] text-[#78716c] max-w-[100px] truncate"><%= user.email_address.to_s.split("@").first %></span>
+                <% if user.admin? %>
+                  <span class="inline-flex items-center gap-0.5 px-1 py-0 rounded text-[9px] font-medium border bg-red-50 text-red-700 border-red-100">Admin</span>
+                <% end %>
+              </div>
+            </th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <% @permissions.each do |permission| %>
+          <tr data-admin--permission-matrix-target="row"
+              data-permission-key="<%= permission.key.downcase %>"
+              data-permission-name="<%= permission.name.to_s.downcase %>"
+              class="border-b border-[#f5efde] hover:bg-[#faf8f3]/40">
+            <td class="sticky left-0 bg-white border-r border-[#e9e4d4] px-3 py-2 hover:bg-[#faf8f3]">
+              <div class="flex flex-col">
+                <span class="text-[13px] font-medium text-[#1c1917]"><%= permission.name %></span>
+                <span class="inline-flex w-fit items-center px-1.5 py-0.5 rounded font-mono text-[11px] font-medium bg-[#faf8f3] text-[#57534e] border border-[#e9e4d4] mt-0.5"><%= permission.key %></span>
+              </div>
+            </td>
+            <% @matrix_users.each do |user| %>
+              <% granted = @matrix_grants.include?([ user.id, permission.id ]) %>
+              <td class="border-r border-[#f5efde] p-0 text-center">
+                <button type="button"
+                        data-action="click->admin--permission-matrix#toggle"
+                        data-admin--permission-matrix-target="cell"
+                        data-url="<%= toggle_user_admin_permission_path(permission, user_id: user.id) %>"
+                        data-granted="<%= granted %>"
+                        aria-label="<%= granted ? "Trek in" : "Verleen" %> <%= permission.name %> aan <%= user.email_address %>"
+                        class="inline-flex items-center justify-center w-9 h-9 m-1 rounded-md border transition-all cursor-pointer
+                               <%= granted ? "bg-blue-600 border-blue-700 text-white hover:bg-blue-700" : "bg-white border-[#e9e4d4] text-transparent hover:bg-blue-50 hover:border-blue-200" %>">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+                </button>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>

data/lib/generators/ruby_cms/templates/views/admin/permissions/_row.html.erb

@@ -0,0 +1,62 @@
+<% permission = local_assigns[:permission] || local_assigns[:item] %>
+<% assigned_count = (defined?(@assigned_counts) && @assigned_counts) ? (@assigned_counts[permission.id] || 0) : (permission.respond_to?(:assigned_count) && permission.assigned_count ? permission.assigned_count.to_i : permission.users.count) %>
+<td data-column="key" class="py-1.5 px-3 align-middle">
+  <span class="inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[12px] font-medium bg-[#faf8f3] text-[#1c1917] border border-[#e9e4d4]"><%= permission.key %></span>
+</td>
+<td data-column="name" class="py-1.5 px-3 align-middle">
+  <div class="min-w-0">
+    <div class="text-[13px] font-medium text-[#1c1917] truncate"><%= permission.name %></div>
+    <% if permission.respond_to?(:description) && permission.description.present? %>
+      <div class="text-[12px] text-[#78716c] truncate"><%= permission.description %></div>
+    <% end %>
+  </div>
+</td>
+<td data-column="assigned" class="py-1.5 px-3 align-middle">
+  <% if assigned_count.positive? %>
+    <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium border bg-blue-50 text-blue-700 border-blue-100 whitespace-nowrap">
+      <span class="font-mono tabular-nums"><%= assigned_count %></span>
+      <span><%= t("admin.pages.permissions.users", default: "gebruikers") %></span>
+    </span>
+  <% else %>
+    <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium border bg-[#faf8f3] text-[#78716c] border-[#e9e4d4] whitespace-nowrap">
+      <%= t("admin.pages.permissions.unassigned", default: "Niet toegewezen") %>
+    </span>
+  <% end %>
+</td>
+<td data-column="status" class="py-1.5 px-3 align-middle">
+  <% if assigned_count.positive? %>
+    <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium border bg-green-50 text-green-700 border-green-100 whitespace-nowrap">
+      <span class="w-1.5 h-1.5 rounded-full bg-green-600"></span>
+      <%= t("admin.pages.common.active", default: "Actief") %>
+    </span>
+  <% else %>
+    <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium border bg-[#faf8f3] text-[#57534e] border-[#e9e4d4] whitespace-nowrap">
+      <%= t("admin.pages.common.inactive", default: "Inactief") %>
+    </span>
+  <% end %>
+</td>
+<td class="py-1.5 px-3 align-middle text-right w-10">
+  <div class="inline-flex items-center justify-end" onclick="event.stopPropagation()">
+    <%= render RubyUI::DropdownMenu.new do %>
+      <%= render RubyUI::DropdownMenuTrigger.new do %>
+        <%= Button(variant: :ghost, size: :sm, icon: true, type: :button, aria_label: t("admin.pages.common.actions", default: "Acties")) do %>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01" /></svg>
+        <% end %>
+      <% end %>
+      <%= render RubyUI::DropdownMenuContent.new do %>
+        <%= render RubyUI::DropdownMenuLabel.new { t("admin.pages.common.actions", default: "Acties") } %>
+        <%= render RubyUI::DropdownMenuSeparator.new %>
+        <%= render RubyUI::DropdownMenuItem.new(class: "text-red-600 hover:!bg-red-50", data: { turbo_method: :delete, turbo_confirm: t("admin.bulk_action_table.default_confirm", default: "Weet je het zeker?"), turbo_frame: "_top" }, href: admin_permission_path(permission)) { t("admin.bulk_action_table.delete_selected", default: "Verwijderen") } %>
+      <% end %>
+    <% end %>
+  </div>
+  <template data-ruby-ui--context-menu-target="content">
+    <div role="menu" class="z-50 min-w-[180px] outline-none overflow-hidden rounded-md border border-[#e9e4d4] bg-white p-1 text-[#1c1917] shadow-md">
+      <div class="px-2 py-1 text-[10.5px] font-semibold uppercase tracking-[0.06em] text-[#a8a29e]"><%= t("admin.pages.common.actions", default: "Acties") %></div>
+      <a href="<%= admin_permission_path(permission) %>" data-turbo-method="delete" data-turbo-frame="_top" data-turbo-confirm="<%= t("admin.bulk_action_table.default_confirm", default: "Weet je het zeker?") %>" role="menuitem" class="flex items-center gap-2 px-2 py-1.5 rounded-sm text-[13px] text-red-600 hover:bg-red-50 cursor-pointer no-underline">
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+        <%= t("admin.bulk_action_table.delete_selected", default: "Verwijderen") %>
+      </a>
+    </div>
+  </template>
+</td>

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

@@ -0,0 +1,65 @@
+<% total_count = @total_permissions_count || @permissions&.count || 0 %>
+<%= AdminPage do %>
+  <%= AdminPageHeader(
+    title: t("ruby_cms.admin.permissions.title", default: "Rechten"),
+    subtitle: "#{total_count} #{t("admin.pages.permissions.item_name", default: "recht").pluralize(total_count)}",
+    breadcrumbs: [
+      { label: t("ruby_cms.admin.breadcrumb.admin", default: "Admin"), url: admin_root_path },
+      { label: t("ruby_cms.admin.permissions.title", default: "Rechten") }
+    ]
+  ) do %>
+    <div class="inline-flex items-center rounded-md border border-[#e9e4d4] bg-white p-0.5">
+      <%= link_to admin_permissions_path(view: "list"),
+            class: "inline-flex items-center gap-1 h-7 px-2.5 rounded text-[12px] font-medium #{@view == 'list' ? 'bg-[#faf8f3] text-[#1c1917]' : 'text-[#78716c] hover:text-[#1c1917]'} no-underline transition-colors" do %>
+        <svg class="w-3.5 h-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 14h16M4 18h16" /></svg>
+        List
+      <% end %>
+      <%= link_to admin_permissions_path(view: "matrix"),
+            class: "inline-flex items-center gap-1 h-7 px-2.5 rounded text-[12px] font-medium #{@view == 'matrix' ? 'bg-[#faf8f3] text-[#1c1917]' : 'text-[#78716c] hover:text-[#1c1917]'} no-underline transition-colors" do %>
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h4v12H4zM10 6h4v12h-4zM16 6h4v12h-4z" /></svg>
+        Matrix
+      <% end %>
+    </div>
+    <button type="button"
+            class="inline-flex items-center gap-1.5 h-8 px-3 rounded-md bg-blue-600 text-white text-[12.5px] font-medium hover:bg-blue-700 transition-colors no-underline border-0 cursor-pointer"
+            data-controller="admin--toggle"
+            data-action="click->admin--toggle#toggle"
+            data-toggle-target-id="new-permission-form">
+      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6" /></svg>
+      <label class="cursor-pointer"><%= t("admin.pages.permissions.new", default: "Nieuw recht") %></label>
+    </button>
+  <% end %>
+
+  <% if flash[:alert] %>
+    <div class="mx-4 mt-3 rounded-md border border-rose-200 bg-rose-50 p-3">
+      <p class="text-[13px] text-rose-700 m-0"><%= flash[:alert] %></p>
+    </div>
+  <% end %>
+
+  <div id="new-permission-form" class="hidden mx-4 mt-3 rounded-lg border border-[#e9e4d4] bg-white shadow-sm p-5">
+    <h2 class="text-[14px] font-semibold text-[#1c1917] mb-3 mt-0"><%= t("admin.pages.permissions.create", default: "Recht aanmaken") %></h2>
+    <%= form_with model: [ :admin, Permission.new ], url: admin_permissions_path, method: :post do |f| %>
+      <div class="space-y-3 max-w-sm">
+        <div class="flex flex-col gap-1">
+          <%= f.label :key, t("admin.pages.permissions.key", default: "Sleutel"), class: "text-[12.5px] font-medium text-[#57534e]" %>
+          <%= f.text_field :key, class: "h-8 rounded-md border border-[#e9e4d4] bg-white px-2.5 text-[13px] text-[#1c1917] focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100", placeholder: "manage_something" %>
+          <p class="text-[11.5px] text-[#78716c] m-0"><%= t("admin.pages.permissions.key_hint", default: "URL-vriendelijke sleutel (bijv. manage_something)") %></p>
+        </div>
+        <div class="flex flex-col gap-1">
+          <%= f.label :name, t("admin.pages.permissions.name", default: "Naam"), class: "text-[12.5px] font-medium text-[#57534e]" %>
+          <%= f.text_field :name, class: "h-8 rounded-md border border-[#e9e4d4] bg-white px-2.5 text-[13px] text-[#1c1917] focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100", placeholder: "Manage Something" %>
+        </div>
+        <div class="flex items-center gap-2">
+          <%= f.submit t("admin.pages.permissions.create", default: "Recht aanmaken"), class: "inline-flex h-8 items-center justify-center rounded-md bg-blue-600 px-3 text-[12.5px] font-medium text-white hover:bg-blue-700 transition-colors cursor-pointer border-0" %>
+          <%= tag.button t("admin.pages.common.cancel", default: "Annuleren"), type: "button", class: "inline-flex h-8 items-center justify-center rounded-md border border-[#e9e4d4] bg-white px-3 text-[12.5px] font-medium text-[#57534e] hover:bg-[#faf8f3] transition-colors cursor-pointer", data: { controller: "admin--toggle", action: "click->admin--toggle#hide", toggle_target_id: "new-permission-form" } %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <% if @view == "matrix" %>
+    <%= render "matrix" %>
+  <% else %>
+    <%= render "admin_table_content" %>
+  <% end %>
+<% end %>