js_admin 0.0.1 → 0.1.0

data/app/helpers/js_admin/application_helper.rb

@@ -1,53 +1,245 @@
 module JSAdmin
   module ApplicationHelper
-    TEXT_INPUT_CLASSES = "w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
-    SELECT_INPUT_CLASSES = "w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
-    CHECKBOX_INPUT_CLASSES = "h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500"
+    CONTENT_FRAME_ID = "js_admin_content"
+    CONTENT_BODY_ID = "js_admin_content_body"
+    FLASH_ID = "js_admin_flash"
+    THEME_COOKIE_NAME = "js_admin_theme"
+
+    TEXT_INPUT_CLASSES = [
+      "w-full rounded-md border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-950 shadow-sm",
+      "placeholder:text-slate-400 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200",
+      "dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500",
+      "dark:focus:border-sky-400 dark:focus:ring-sky-900"
+    ].join(" ")
+
+    SELECT_INPUT_CLASSES = [
+      "w-full rounded-md border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-950 shadow-sm",
+      "focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200",
+      "dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100",
+      "dark:focus:border-sky-400 dark:focus:ring-sky-900"
+    ].join(" ")
+
+    CHECKBOX_INPUT_CLASSES = [
+      "h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500",
+      "dark:border-slate-700 dark:bg-slate-900 dark:focus:ring-sky-700"
+    ].join(" ")
+
+    TEXT_INPUT_ERROR_CLASSES = [
+      "w-full rounded-md border border-rose-400 bg-white px-3.5 py-2.5 text-sm text-slate-950 shadow-sm",
+      "placeholder:text-slate-400 focus:border-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-200",
+      "dark:border-rose-500 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500",
+      "dark:focus:border-rose-400 dark:focus:ring-rose-950"
+    ].join(" ")
+
+    SELECT_INPUT_ERROR_CLASSES = [
+      "w-full rounded-md border border-rose-400 bg-white px-3.5 py-2.5 text-sm text-slate-950 shadow-sm",
+      "focus:border-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-200",
+      "dark:border-rose-500 dark:bg-slate-900 dark:text-slate-100",
+      "dark:focus:border-rose-400 dark:focus:ring-rose-950"
+    ].join(" ")
+
+    CHECKBOX_INPUT_ERROR_CLASSES = [
+      "h-4 w-4 rounded border-rose-400 text-rose-600 focus:ring-rose-500",
+      "dark:border-rose-500 dark:bg-slate-900 dark:focus:ring-rose-900"
+    ].join(" ")
+
+    FIELD_LABEL_CLASSES = "text-sm font-medium text-slate-700 dark:text-slate-300 sm:col-span-4"
+    FIELD_LABEL_ERROR_CLASSES = "text-sm font-medium text-rose-700 dark:text-rose-300 sm:col-span-4"
+    FIELD_ERROR_TEXT_CLASSES = "mt-2 text-sm text-rose-600 dark:text-rose-300"
+    FORM_ERROR_CLASSES = "rounded-md border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+
+    SIDEBAR_LINK_BASE_CLASSES = [
+      "block rounded-md px-3 py-2 text-sm font-medium",
+      "hover:bg-slate-100 hover:text-slate-950",
+      "dark:hover:bg-slate-800 dark:hover:text-slate-100"
+    ].join(" ")
+
+    SIDEBAR_LINK_ACTIVE_CLASSES = "bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-200"
+    SIDEBAR_LINK_INACTIVE_CLASSES = "text-slate-700 dark:text-slate-300"
+
+    FLASH_BASE_CLASSES = [
+      "transform rounded-md border px-4 py-3 text-sm shadow-lg transition duration-300 ease-out"
+    ].join(" ")
+
+    FLASH_CLASSES = {
+      notice: "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200",
+      alert: "border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+    }.freeze
+
+    PAGINATION_LINK_CLASSES = [
+      "inline-flex h-9 min-w-9 items-center justify-center rounded-md border border-slate-300 bg-white px-3 text-sm font-medium",
+      "text-slate-700 shadow-sm hover:bg-slate-50",
+      "dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
+    ].join(" ")
+
+    PAGINATION_DISABLED_CLASSES = [
+      "inline-flex h-9 min-w-9 items-center justify-center rounded-md border border-slate-200 bg-slate-100 px-3 text-sm font-medium",
+      "text-slate-400 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-600"
+    ].join(" ")
+
+    PAGINATION_STATUS_CLASSES = [
+      "inline-flex h-9 min-w-28 items-center justify-center rounded-md border border-slate-200 bg-slate-50 px-3 text-sm font-medium",
+      "text-slate-700 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200"
+    ].join(" ")
 
     def js_admin_field_input(form, field)
       case field.input_kind
       when :text_area
-        form.text_area(field.name, rows: 5, class: TEXT_INPUT_CLASSES)
+        tag.textarea(js_admin_field_value(form, field), **js_admin_input_options(form, field, js_admin_text_input_classes(form, field)), rows: 5)
       when :check_box
         tag.div(class: "flex h-10 items-center") do
-          form.check_box(field.name, class: CHECKBOX_INPUT_CLASSES)
+          safe_join([
+            tag.input(type: "hidden", name: js_admin_field_name(form, field), value: "0", autocomplete: "off"),
+            tag.input(**js_admin_input_options(form, field, js_admin_checkbox_input_classes(form, field)).merge(type: "checkbox", value: "1", checked: js_admin_checkbox_checked?(form, field)))
+          ])
         end
       when :number_field
-        form.number_field(field.name, step: field.number_step, class: TEXT_INPUT_CLASSES)
+        tag.input(**js_admin_input_options(form, field, js_admin_text_input_classes(form, field)).merge(type: "number", step: field.number_step, value: js_admin_field_value(form, field)))
       when :date_field
-        form.date_field(field.name, class: TEXT_INPUT_CLASSES)
+        tag.input(**js_admin_input_options(form, field, js_admin_text_input_classes(form, field)).merge(type: "date", value: js_admin_formatted_field_value(form, field, "%Y-%m-%d")))
       when :datetime_field
-        form.datetime_field(field.name, class: TEXT_INPUT_CLASSES)
+        tag.input(**js_admin_input_options(form, field, js_admin_text_input_classes(form, field)).merge(type: "datetime-local", value: js_admin_formatted_field_value(form, field, "%Y-%m-%dT%H:%M:%S")))
       when :time_field
-        form.time_field(field.name, class: TEXT_INPUT_CLASSES)
+        tag.input(**js_admin_input_options(form, field, js_admin_text_input_classes(form, field)).merge(type: "time", value: js_admin_formatted_field_value(form, field, "%H:%M:%S")))
       when :enum_select
-        form.select(field.name, field.enum_values, { include_blank: true }, class: SELECT_INPUT_CLASSES)
+        select_tag(js_admin_field_name(form, field), options_for_select(field.enum_values, js_admin_field_value(form, field)), js_admin_select_options(form, field))
       when :association_select
-        form.select(field.name, field.association_options, { include_blank: true }, class: SELECT_INPUT_CLASSES)
+        select_tag(js_admin_field_name(form, field), options_for_select(field.association_options, js_admin_field_value(form, field)), js_admin_select_options(form, field))
       else
-        form.text_field(field.name, class: TEXT_INPUT_CLASSES)
+        tag.input(**js_admin_input_options(form, field, js_admin_text_input_classes(form, field)).merge(type: "text", value: js_admin_field_value(form, field)))
       end
     end
 
+    def js_admin_field_id(form, field)
+      "#{form.object_name}_#{field.name}".tr("][", "_").delete_suffix("_")
+    end
+
+    def js_admin_field_error_id(form, field)
+      "#{js_admin_field_id(form, field)}_error"
+    end
+
+    def js_admin_field_errors(record, field)
+      record.errors[field.name].map(&:to_s)
+    end
+
+    def js_admin_form_errors(record, resource)
+      editable_attributes = resource.editable_fields.map { |field| field.name.to_sym }
+
+      record.errors.filter_map do |error|
+        next if editable_attributes.include?(error.attribute.to_sym)
+
+        error.full_message
+      end
+    end
+
+    def js_admin_field_label_classes(record, field)
+      js_admin_field_errors(record, field).any? ? FIELD_LABEL_ERROR_CLASSES : FIELD_LABEL_CLASSES
+    end
+
+    def js_admin_field_error_text_classes
+      FIELD_ERROR_TEXT_CLASSES
+    end
+
+    def js_admin_form_error_classes
+      FORM_ERROR_CLASSES
+    end
+
+    def js_admin_content_frame_id
+      CONTENT_FRAME_ID
+    end
+
+    def js_admin_content_body_id
+      CONTENT_BODY_ID
+    end
+
+    def js_admin_flash_id
+      FLASH_ID
+    end
+
+    def js_admin_content_frame_data
+      {
+        turbo_action: "advance"
+      }
+    end
+
+    def js_admin_content_link_data
+      {
+        turbo_frame: js_admin_content_frame_id,
+        turbo_action: "advance"
+      }
+    end
+
     def js_admin_table_value(field, record)
       value = field.formatted_value(record)
-      classes = value == "NULL" ? "text-slate-400" : "text-slate-700"
+      classes = value == "NULL" ? "text-slate-400 dark:text-slate-500" : "text-slate-700 dark:text-slate-200"
 
       tag.span(truncate(value, length: 80), class: classes)
     end
 
+    def js_admin_sidebar_top_level_resources
+      js_admin_sidebar_resources.select { |resource| js_admin_resource_namespace(resource).blank? }
+    end
+
+    def js_admin_sidebar_namespace_groups
+      js_admin_sidebar_resources
+        .reject { |resource| js_admin_resource_namespace(resource).blank? }
+        .group_by { |resource| js_admin_resource_namespace(resource) }
+        .sort_by { |namespace, _resources| namespace }
+        .to_h
+    end
+
+    def js_admin_sidebar_resource_label(resource)
+      resource.model_class.name.demodulize.underscore.humanize
+    end
+
+    def js_admin_sidebar_namespace_label(namespace)
+      namespace.split("::").map { |name| name.underscore.humanize }.join(" / ")
+    end
+
+    def js_admin_sidebar_namespace_open?(resources)
+      resources.any? { |resource| js_admin_sidebar_resource_active?(resource) }
+    end
+
+    def js_admin_sidebar_link_classes(resource)
+      state_classes = if js_admin_sidebar_resource_active?(resource)
+        SIDEBAR_LINK_ACTIVE_CLASSES
+      else
+        SIDEBAR_LINK_INACTIVE_CLASSES
+      end
+
+      "#{SIDEBAR_LINK_BASE_CLASSES} #{state_classes}"
+    end
+
+    def js_admin_flash_classes(type)
+      [ FLASH_BASE_CLASSES, FLASH_CLASSES.fetch(type.to_sym) ].join(" ")
+    end
+
+    def js_admin_pagination_link_classes
+      PAGINATION_LINK_CLASSES
+    end
+
+    def js_admin_pagination_disabled_classes
+      PAGINATION_DISABLED_CLASSES
+    end
+
+    def js_admin_pagination_status_classes
+      PAGINATION_STATUS_CLASSES
+    end
+
     def js_admin_stylesheet_link_tag(logical_name)
       return unless js_admin_asset_exists?("#{logical_name}.css")
 
       stylesheet_link_tag logical_name, "data-turbo-track": "reload"
     end
 
-    def js_admin_hotwire_javascript_tags
-      if respond_to?(:javascript_importmap_tags) && Rails.root.join("config/importmap.rb").exist?
-        javascript_importmap_tags
-      elsif js_admin_asset_exists?("application.js")
-        javascript_include_tag "application", type: "module", "data-turbo-track": "reload"
-      end
+    def js_admin_javascript_tags
+      return unless respond_to?(:javascript_importmap_tags)
+
+      javascript_importmap_tags "js_admin"
+    end
+
+    def js_admin_html_classes
+      "dark" if cookies[THEME_COOKIE_NAME] == "dark"
     end
 
     def js_admin_asset_exists?(logical_path)
@@ -63,5 +255,80 @@ module JSAdmin
     rescue StandardError
       false
     end
+
+    private
+
+    def js_admin_field_name(form, field)
+      "#{form.object_name}[#{field.name}]"
+    end
+
+    def js_admin_input_options(form, field, input_classes)
+      js_admin_field_html_options(form, field, input_classes).merge(name: js_admin_field_name(form, field))
+    end
+
+    def js_admin_select_options(form, field)
+      js_admin_field_html_options(form, field, js_admin_select_input_classes(form, field)).merge(include_blank: true)
+    end
+
+    def js_admin_field_html_options(form, field, input_classes)
+      options = {
+        id: js_admin_field_id(form, field),
+        class: input_classes
+      }
+
+      if js_admin_field_errors(form.object, field).any?
+        options[:aria] = {
+          invalid: "true",
+          describedby: js_admin_field_error_id(form, field)
+        }
+      end
+
+      options
+    end
+
+    def js_admin_text_input_classes(form, field)
+      js_admin_field_errors(form.object, field).any? ? TEXT_INPUT_ERROR_CLASSES : TEXT_INPUT_CLASSES
+    end
+
+    def js_admin_select_input_classes(form, field)
+      js_admin_field_errors(form.object, field).any? ? SELECT_INPUT_ERROR_CLASSES : SELECT_INPUT_CLASSES
+    end
+
+    def js_admin_checkbox_input_classes(form, field)
+      js_admin_field_errors(form.object, field).any? ? CHECKBOX_INPUT_ERROR_CLASSES : CHECKBOX_INPUT_CLASSES
+    end
+
+    def js_admin_field_value(form, field)
+      before_type_cast_method = "#{field.name}_before_type_cast"
+
+      if form.object.respond_to?(before_type_cast_method)
+        form.object.public_send(before_type_cast_method)
+      else
+        form.object.public_send(field.name)
+      end
+    end
+
+    def js_admin_formatted_field_value(form, field, format)
+      value = js_admin_field_value(form, field)
+      return value if value.blank? || !value.respond_to?(:strftime)
+
+      value.strftime(format)
+    end
+
+    def js_admin_checkbox_checked?(form, field)
+      ActiveModel::Type::Boolean.new.cast(js_admin_field_value(form, field))
+    end
+
+    def js_admin_sidebar_resources
+      JSAdmin.resources.sort_by { |resource| resource.model_class.name }
+    end
+
+    def js_admin_resource_namespace(resource)
+      resource.model_class.name.deconstantize
+    end
+
+    def js_admin_sidebar_resource_active?(resource)
+      params[:model_id] == resource.model_id
+    end
   end
 end

data/app/views/js_admin/home/index.html.erb

@@ -0,0 +1,5 @@
+<% content_for :title, "JSAdmin" %>
+
+<%= render layout: "layouts/js_admin/content_frame" do %>
+  <div data-js-admin-home></div>
+<% end %>

data/app/views/js_admin/models/_index_content.html.erb

@@ -0,0 +1,20 @@
+<div class="mb-8">
+  <h1 class="text-2xl font-semibold text-slate-950 dark:text-slate-100">Models</h1>
+  <p class="mt-2 text-sm text-slate-600 dark:text-slate-400"><%= pluralize(@resources.size, "model") %> available</p>
+</div>
+
+<div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+  <ul class="divide-y divide-slate-200 dark:divide-slate-800">
+    <% @resources.each do |resource| %>
+      <li>
+        <%= link_to resources_path(resource.model_id), class: "flex items-center justify-between gap-6 px-5 py-5 hover:bg-slate-50 dark:hover:bg-slate-800/70 sm:px-6" do %>
+          <span>
+            <span class="block text-sm font-medium text-slate-950 dark:text-slate-100"><%= resource.label %></span>
+            <span class="mt-1.5 block text-xs text-slate-500 dark:text-slate-400"><%= resource.model_class.name %></span>
+          </span>
+          <span class="text-sm text-slate-500 dark:text-slate-400"><%= number_with_delimiter(resource.count) %></span>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</div>

data/app/views/js_admin/models/index.html.erb

@@ -1,22 +1,5 @@
 <% content_for :title, "JSAdmin Models" %>
 
-<div class="mb-6">
-  <h1 class="text-2xl font-semibold text-slate-950">Models</h1>
-  <p class="mt-1 text-sm text-slate-600"><%= pluralize(@resources.size, "model") %> available</p>
-</div>
-
-<div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
-  <ul class="divide-y divide-slate-200">
-    <% @resources.each do |resource| %>
-      <li>
-        <%= link_to resources_path(resource.model_id), class: "flex items-center justify-between px-4 py-4 hover:bg-slate-50" do %>
-          <span>
-            <span class="block text-sm font-medium text-slate-950"><%= resource.label %></span>
-            <span class="mt-1 block text-xs text-slate-500"><%= resource.model_class.name %></span>
-          </span>
-          <span class="text-sm text-slate-500"><%= number_with_delimiter(resource.count) %></span>
-        <% end %>
-      </li>
-    <% end %>
-  </ul>
-</div>
+<%= render layout: "layouts/js_admin/content_frame" do %>
+  <%= render "index_content" %>
+<% end %>

data/app/views/js_admin/resources/_edit_content.html.erb

@@ -0,0 +1,11 @@
+<div class="mb-8">
+  <div class="mb-2 text-sm text-slate-500 dark:text-slate-400">
+    <%= link_to "Home", root_path, class: "hover:text-slate-950 dark:hover:text-slate-100" %> /
+    <%= link_to @resource.label, resources_path(@resource.model_id), class: "hover:text-slate-950 dark:hover:text-slate-100" %> /
+    <%= link_to @resource.display_name(@record), resource_path(@resource.model_id, @record), class: "hover:text-slate-950 dark:hover:text-slate-100" %> /
+    Edit
+  </div>
+  <h1 class="text-2xl font-semibold text-slate-950 dark:text-slate-100">Edit <%= @resource.display_name(@record) %></h1>
+</div>
+
+<%= render "form", record: @record, resource: @resource, url: resource_path(@resource.model_id, @record) %>

data/app/views/js_admin/resources/_form.html.erb

@@ -1,22 +1,29 @@
-<%= form_with model: record, url: url, class: "space-y-6" do |form| %>
-  <% if record.errors.any? %>
-    <div class="rounded-md border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
-      <p class="font-medium"><%= pluralize(record.errors.count, "error") %> prevented this record from being saved.</p>
-      <ul class="mt-2 list-disc space-y-1 pl-5">
-        <% record.errors.full_messages.each do |message| %>
+<%= form_with model: record, url: url, class: "space-y-7" do |form| %>
+  <% form_errors = js_admin_form_errors(record, resource) %>
+
+  <% if form_errors.any? %>
+    <div class="<%= js_admin_form_error_classes %>" role="alert">
+      <ul class="list-disc space-y-1 pl-5">
+        <% form_errors.each do |message| %>
           <li><%= message %></li>
         <% end %>
       </ul>
     </div>
   <% end %>
 
-  <div class="rounded-lg border border-slate-200 bg-white shadow-sm">
-    <div class="divide-y divide-slate-200">
+  <div class="rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+    <div class="divide-y divide-slate-200 dark:divide-slate-800">
       <% resource.editable_fields.each do |field| %>
-        <div class="grid gap-2 px-4 py-4 sm:grid-cols-3">
-          <%= form.label field.name, field.human_name, class: "text-sm font-medium text-slate-700" %>
-          <div class="sm:col-span-2">
+        <% field_errors = js_admin_field_errors(record, field) %>
+
+        <div class="grid gap-3 px-5 py-5 sm:grid-cols-12 sm:gap-6 sm:px-6">
+          <%= tag.label field.human_name, for: js_admin_field_id(form, field), class: js_admin_field_label_classes(record, field) %>
+          <div class="sm:col-span-8">
             <%= js_admin_field_input(form, field) %>
+
+            <% if field_errors.any? %>
+              <p id="<%= js_admin_field_error_id(form, field) %>" class="<%= js_admin_field_error_text_classes %>"><%= field_errors.to_sentence %></p>
+            <% end %>
           </div>
         </div>
       <% end %>
@@ -24,7 +31,7 @@
   </div>
 
   <div class="flex items-center gap-2">
-    <%= form.submit class: "inline-flex items-center justify-center rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-sky-700" %>
-    <%= link_to "Cancel", record.persisted? ? resource_path(resource.model_id, record) : resources_path(resource.model_id), class: "inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50" %>
+    <%= form.submit class: "inline-flex items-center justify-center rounded-md bg-sky-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-400" %>
+    <%= link_to "Cancel", record.persisted? ? resource_path(resource.model_id, record) : resources_path(resource.model_id), class: "inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800" %>
   </div>
 <% end %>

data/app/views/js_admin/resources/_index_content.html.erb

@@ -0,0 +1,74 @@
+<div class="mb-8 flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
+  <div>
+    <div class="mb-2 text-sm text-slate-500 dark:text-slate-400"><%= link_to "Home", root_path, class: "hover:text-slate-950 dark:hover:text-slate-100" %> / <%= @resource.label %></div>
+    <h1 class="text-2xl font-semibold text-slate-950 dark:text-slate-100"><%= @resource.label %></h1>
+    <p class="mt-2 text-sm text-slate-600 dark:text-slate-400"><%= number_with_delimiter(@total_count) %> records</p>
+  </div>
+
+  <%= link_to "New #{@resource.singular_label}", new_resource_path(@resource.model_id), class: "inline-flex items-center justify-center rounded-md bg-sky-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-400" %>
+</div>
+
+<div class="overflow-x-auto rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+  <table class="min-w-full divide-y divide-slate-200 dark:divide-slate-800">
+    <thead class="bg-slate-50 dark:bg-slate-900">
+      <tr>
+        <% @resource.list_fields.each do |field| %>
+          <th scope="col" class="whitespace-nowrap px-5 py-4 text-left text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400"><%= field.human_name %></th>
+        <% end %>
+        <th scope="col" class="w-44 px-5 py-4 text-right text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Actions</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-slate-200 bg-white dark:divide-slate-800 dark:bg-slate-900">
+      <% @records.each do |record| %>
+        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/70">
+          <% @resource.list_fields.each do |field| %>
+            <td class="whitespace-nowrap px-5 py-4 text-sm"><%= js_admin_table_value(field, record) %></td>
+          <% end %>
+          <td class="whitespace-nowrap px-5 py-4 text-right text-sm">
+            <div class="flex items-center justify-end gap-3">
+              <%= link_to "View", resource_path(@resource.model_id, record), class: "font-medium text-sky-700 hover:text-sky-900 dark:text-sky-300 dark:hover:text-sky-200" %>
+              <%= link_to "Edit", edit_resource_path(@resource.model_id, record), class: "font-medium text-slate-700 hover:text-slate-950 dark:text-slate-300 dark:hover:text-slate-100" %>
+              <%= button_to "Delete", resource_path(@resource.model_id, record), method: :delete, form: { class: "inline", data: { turbo_confirm: "Delete this record?" } }, class: "font-medium text-rose-700 hover:text-rose-900 dark:text-rose-300 dark:hover:text-rose-200" %>
+            </div>
+          </td>
+        </tr>
+      <% end %>
+
+      <% if @records.empty? %>
+        <tr>
+          <td colspan="<%= @resource.list_fields.size + 1 %>" class="px-5 py-12 text-center text-sm text-slate-500 dark:text-slate-400">No records</td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<div class="mt-6 flex justify-end">
+  <nav class="flex flex-wrap items-center justify-end gap-2" aria-label="Pagination">
+    <% if @page > 1 %>
+      <%= link_to "First", resources_path(@resource.model_id, page: 1), class: js_admin_pagination_link_classes %>
+    <% else %>
+      <span class="<%= js_admin_pagination_disabled_classes %>" aria-disabled="true">First</span>
+    <% end %>
+
+    <% if @resource.previous_page?(@page) %>
+      <%= link_to "Previous", resources_path(@resource.model_id, page: @page - 1), class: js_admin_pagination_link_classes %>
+    <% else %>
+      <span class="<%= js_admin_pagination_disabled_classes %>" aria-disabled="true">Previous</span>
+    <% end %>
+
+    <span class="<%= js_admin_pagination_status_classes %>" aria-current="page" aria-label="Page <%= @page %> of <%= @total_pages %>"><%= @page %> / <%= @total_pages %></span>
+
+    <% if @resource.next_page?(@page) %>
+      <%= link_to "Next", resources_path(@resource.model_id, page: @page + 1), class: js_admin_pagination_link_classes %>
+    <% else %>
+      <span class="<%= js_admin_pagination_disabled_classes %>" aria-disabled="true">Next</span>
+    <% end %>
+
+    <% if @page < @total_pages %>
+      <%= link_to "Last", resources_path(@resource.model_id, page: @total_pages), class: js_admin_pagination_link_classes %>
+    <% else %>
+      <span class="<%= js_admin_pagination_disabled_classes %>" aria-disabled="true">Last</span>
+    <% end %>
+  </nav>
+</div>

data/app/views/js_admin/resources/_new_content.html.erb

@@ -0,0 +1,10 @@
+<div class="mb-8">
+  <div class="mb-2 text-sm text-slate-500 dark:text-slate-400">
+    <%= link_to "Home", root_path, class: "hover:text-slate-950 dark:hover:text-slate-100" %> /
+    <%= link_to @resource.label, resources_path(@resource.model_id), class: "hover:text-slate-950 dark:hover:text-slate-100" %> /
+    New
+  </div>
+  <h1 class="text-2xl font-semibold text-slate-950 dark:text-slate-100">New <%= @resource.singular_label %></h1>
+</div>
+
+<%= render "form", record: @record, resource: @resource, url: resources_path(@resource.model_id) %>

data/app/views/js_admin/resources/_show_content.html.erb

@@ -0,0 +1,26 @@
+<div class="mb-8 flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
+  <div>
+    <div class="mb-2 text-sm text-slate-500 dark:text-slate-400">
+      <%= link_to "Home", root_path, class: "hover:text-slate-950 dark:hover:text-slate-100" %> /
+      <%= link_to @resource.label, resources_path(@resource.model_id), class: "hover:text-slate-950 dark:hover:text-slate-100" %> /
+      <%= @resource.display_name(@record) %>
+    </div>
+    <h1 class="text-2xl font-semibold text-slate-950 dark:text-slate-100"><%= @resource.display_name(@record) %></h1>
+  </div>
+
+  <div class="flex gap-2">
+    <%= link_to "Edit", edit_resource_path(@resource.model_id, @record), class: "inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800" %>
+    <%= button_to "Delete", resource_path(@resource.model_id, @record), method: :delete, form: { data: { turbo_confirm: "Delete this record?" } }, class: "inline-flex items-center justify-center rounded-md bg-rose-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-rose-700 dark:bg-rose-500 dark:hover:bg-rose-400" %>
+  </div>
+</div>
+
+<div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+  <dl class="divide-y divide-slate-200 dark:divide-slate-800">
+    <% @resource.fields.each do |field| %>
+      <div class="grid gap-3 px-5 py-5 sm:grid-cols-12 sm:gap-6 sm:px-6">
+        <dt class="text-sm font-medium text-slate-600 dark:text-slate-300 sm:col-span-4"><%= field.human_name %></dt>
+        <dd class="text-sm text-slate-950 dark:text-slate-100 sm:col-span-8"><%= js_admin_table_value(field, @record) %></dd>
+      </div>
+    <% end %>
+  </dl>
+</div>

data/app/views/js_admin/resources/destroy.turbo_stream.erb

@@ -0,0 +1,7 @@
+<%= turbo_stream.update js_admin_flash_id do %>
+  <%= render "layouts/js_admin/flash_messages", notice: notice, alert: alert %>
+<% end %>
+
+<%= turbo_stream.update js_admin_content_body_id do %>
+  <%= render "index_content" %>
+<% end %>

data/app/views/js_admin/resources/edit.html.erb

@@ -1,13 +1,5 @@
 <% content_for :title, "Edit #{@resource.display_name(@record)}" %>
 
-<div class="mb-6">
-  <div class="mb-2 text-sm text-slate-500">
-    <%= link_to "Models", root_path, class: "hover:text-slate-950" %> /
-    <%= link_to @resource.label, resources_path(@resource.model_id), class: "hover:text-slate-950" %> /
-    <%= link_to @resource.display_name(@record), resource_path(@resource.model_id, @record), class: "hover:text-slate-950" %> /
-    Edit
-  </div>
-  <h1 class="text-2xl font-semibold text-slate-950">Edit <%= @resource.display_name(@record) %></h1>
-</div>
-
-<%= render "form", record: @record, resource: @resource, url: resource_path(@resource.model_id, @record) %>
+<%= render layout: "layouts/js_admin/content_frame" do %>
+  <%= render "edit_content" %>
+<% end %>