easy-admin-rails 0.1.0

data/app/views/easy_admin/passwords/new.html.erb

@@ -0,0 +1,41 @@
+<!-- Form -->
+<div class="p-10">
+  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: "space-y-8" }) do |f| %>
+    
+    <!-- Input Field Container -->
+    <div class="space-y-4">
+      <!-- Email Field -->
+      <div class="relative">
+        <%= f.email_field :email, autofocus: true, autocomplete: "email",
+                          class: "w-full px-6 py-5 bg-gray-50/80 border-0 text-gray-900 placeholder-gray-400 focus:bg-gray-100/80 focus:ring-0 focus:outline-none text-base rounded-2xl transition-colors duration-200 font-medium",
+                          placeholder: "Email address" %>
+      </div>
+    </div>
+
+    <!-- Helper Text -->
+    <div class="text-sm text-gray-500 text-center font-medium">
+      Enter your email and we'll send you a reset link
+    </div>
+
+    <!-- Submit Button -->
+    <div class="pt-4">
+      <%= f.submit "Send Reset Instructions", 
+                   class: "w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-bold py-5 px-6 rounded-2xl transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-500/30 text-base shadow-xl shadow-blue-500/20 active:scale-[0.98]" %>
+    </div>
+
+  <% end %>
+
+  <!-- Links -->
+  <div class="text-center pt-6 space-y-3">
+    <%= link_to "Back to Sign In", new_session_path(resource_name), 
+                class: "block text-base text-blue-500 hover:text-blue-600 font-bold transition-colors duration-200" %>
+    
+    <% if devise_mapping.registerable? && controller_name != 'registrations' %>
+      <div class="text-base text-gray-600">
+        Don't have an account?
+        <%= link_to "Create account", new_registration_path(resource_name), 
+                    class: "text-blue-500 hover:text-blue-600 font-bold ml-2 transition-colors duration-200" %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/easy_admin/registrations/new.html.erb

@@ -0,0 +1,65 @@
+<!-- Form -->
+<div class="p-10">
+  <%= form_for(resource, as: resource_name, url: registration_path(resource_name), local: true, html: { class: "space-y-8" }) do |f| %>
+    
+    <!-- Input Fields Container -->
+    <div class="space-y-4">
+      <!-- First Name Field -->
+      <div class="relative">
+        <%= f.text_field :first_name, autofocus: true, autocomplete: "given-name",
+                        class: "w-full px-6 py-5 bg-gray-50/80 border-0 text-gray-900 placeholder-gray-400 focus:bg-gray-100/80 focus:ring-0 focus:outline-none text-base rounded-2xl transition-colors duration-200 font-medium",
+                        placeholder: "First name" %>
+      </div>
+
+      <!-- Last Name Field -->
+      <div class="relative">
+        <%= f.text_field :last_name, autocomplete: "family-name",
+                        class: "w-full px-6 py-5 bg-gray-50/80 border-0 text-gray-900 placeholder-gray-400 focus:bg-gray-100/80 focus:ring-0 focus:outline-none text-base rounded-2xl transition-colors duration-200 font-medium",
+                        placeholder: "Last name" %>
+      </div>
+
+      <!-- Email Field -->
+      <div class="relative">
+        <%= f.email_field :email, autocomplete: "email",
+                          class: "w-full px-6 py-5 bg-gray-50/80 border-0 text-gray-900 placeholder-gray-400 focus:bg-gray-100/80 focus:ring-0 focus:outline-none text-base rounded-2xl transition-colors duration-200 font-medium",
+                          placeholder: "Email address" %>
+      </div>
+
+      <!-- Password Field -->
+      <div class="relative">
+        <%= f.password_field :password, autocomplete: "new-password",
+                             class: "w-full px-6 py-5 bg-gray-50/80 border-0 text-gray-900 placeholder-gray-400 focus:bg-gray-100/80 focus:ring-0 focus:outline-none text-base rounded-2xl transition-colors duration-200 font-medium",
+                             placeholder: "Password" %>
+      </div>
+
+      <!-- Password Confirmation Field -->
+      <div class="relative">
+        <%= f.password_field :password_confirmation, autocomplete: "new-password",
+                             class: "w-full px-6 py-5 bg-gray-50/80 border-0 text-gray-900 placeholder-gray-400 focus:bg-gray-100/80 focus:ring-0 focus:outline-none text-base rounded-2xl transition-colors duration-200 font-medium",
+                             placeholder: "Confirm password" %>
+      </div>
+    </div>
+
+    <% if @minimum_password_length %>
+      <div class="text-sm text-gray-500 text-center font-medium">
+        Password must be at least <%= @minimum_password_length %> characters
+      </div>
+    <% end %>
+
+    <!-- Submit Button -->
+    <div class="pt-4">
+      <%= f.submit "Create Account", 
+                   class: "w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-bold py-5 px-6 rounded-2xl transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-500/30 text-base shadow-xl shadow-blue-500/20 active:scale-[0.98]" %>
+    </div>
+
+  <% end %>
+
+  <!-- Links -->
+  <div class="text-center pt-6">
+    <div class="text-base text-gray-600">
+      Already have an account?
+      <%= link_to "Sign in", new_session_path(resource_name), 
+                  class: "text-blue-500 hover:text-blue-600 font-bold ml-2 transition-colors duration-200" %>
+    </div>
+  </div>
+</div>

data/app/views/easy_admin/resources/_redirect.turbo_stream.erb

@@ -0,0 +1,3 @@
+<turbo-stream action="redirect" url="<%= url %>">
+  <template></template>
+</turbo-stream>

data/app/views/easy_admin/resources/_table_rows.html.erb

@@ -0,0 +1,46 @@
+<% records.each do |record| %>
+  <tr class="hover:bg-gray-100 cursor-pointer transition-colors duration-150" 
+      onclick="window.location='<%= easy_admin.resource_path(resource_class.route_key, record) %>'">
+    <% resource_class.index_fields.each_with_index do |field, index| %>
+      <td class="whitespace-nowrap px-6 py-4 text-sm <%= 'mobile-hide' if index > 2 %>">
+        <div class="text-gray-900 font-medium">
+          <%== render_field(field, action: :index, value: record.public_send(field[:name]), record: record) %>
+        </div>
+      </td>
+    <% end %>
+    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+      <div class="flex items-center justify-end space-x-2 sm:mobile-actions">
+        <%= link_to easy_admin.resource_path(resource_class.route_key, record), 
+                    class: "inline-flex items-center justify-center w-8 h-8 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors duration-150", 
+                    onclick: "event.stopPropagation()",
+                    title: "View" do %>
+          <svg class="h-4 w-4" 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>
+        <% end %>
+        <%= link_to easy_admin.edit_resource_path(resource_class.route_key, record), 
+                    class: "inline-flex items-center justify-center w-8 h-8 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-lg transition-colors duration-150", 
+                    onclick: "event.stopPropagation()",
+                    title: "Edit" do %>
+          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+          </svg>
+        <% end %>
+        <%= link_to easy_admin.resource_path(resource_class.route_key, record), 
+                    method: :delete, 
+                    class: "inline-flex items-center justify-center w-8 h-8 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors duration-150",
+                    onclick: "event.stopPropagation()",
+                    title: "Delete",
+                    data: { 
+                      confirm: "Are you sure you want to delete this #{resource_class.singular_title.downcase}?",
+                      method: :delete
+                    } do %>
+          <svg class="h-4 w-4" 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>
+        <% end %>
+      </div>
+    </td>
+  </tr>
+<% end %>

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

@@ -0,0 +1,151 @@
+<% content_for :title, "Edit #{@resource_class.singular_title}" %>
+
+<!-- Page Header -->
+<div class="mb-4 sm:mb-6">
+  <!-- Mobile Header -->
+  <div class="sm:hidden mb-4">
+    <div class="flex items-center justify-between mb-3">
+      <h1 class="text-lg font-semibold text-gray-900">Edit <%= @resource_class.singular_title %></h1>
+      <div class="flex space-x-2">
+        <%= link_to easy_admin.resource_path(@resource_class.route_key, @record), 
+                    class: "inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-xs font-medium text-gray-700 bg-white hover:bg-gray-50" 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="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>
+        <% end %>
+        
+        <%= link_to easy_admin.resources_path(@resource_class.route_key), 
+                    class: "inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-xs font-medium text-gray-700 bg-white hover:bg-gray-50" 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="M10 19l-7-7m0 0l7-7m0 7h18"/>
+          </svg>
+        <% end %>
+      </div>
+    </div>
+    
+    <!-- Mobile Breadcrumb -->
+    <nav class="text-xs text-gray-500">
+      <%= link_to @resource_class.title, easy_admin.resources_path(@resource_class.route_key), class: "hover:text-gray-700" %> 
+      / <%= link_to (@record.respond_to?(:name) ? @record.name : "##{@record.id}"), easy_admin.resource_path(@resource_class.route_key, @record), class: "hover:text-gray-700" %> 
+      / Edit
+    </nav>
+  </div>
+  
+  <!-- Desktop Header -->
+  <div class="hidden sm:flex items-center justify-between">
+    <nav class="flex" aria-label="Breadcrumb">
+      <ol class="inline-flex items-center space-x-1 md:space-x-3">
+        <li>
+          <%= link_to easy_admin.resources_path(@resource_class.route_key), 
+                      class: "text-gray-500 hover:text-gray-700 text-sm font-medium" do %>
+            <%= @resource_class.title %>
+          <% end %>
+        </li>
+        <li>
+          <div class="flex items-center">
+            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+            </svg>
+            <%= link_to easy_admin.resource_path(@resource_class.route_key, @record), 
+                        class: "ml-1 text-gray-500 hover:text-gray-700 text-sm font-medium" do %>
+              <%= @record.respond_to?(:name) ? @record.name : "##{@record.id}" %>
+            <% end %>
+          </div>
+        </li>
+        <li>
+          <div class="flex items-center">
+            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+            </svg>
+            <span class="ml-1 text-sm font-medium text-gray-900">Edit</span>
+          </div>
+        </li>
+      </ol>
+    </nav>
+    
+    <div class="flex space-x-3">
+      <%= link_to easy_admin.resource_path(@resource_class.route_key, @record), 
+                  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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
+        <svg class="w-4 h-4 mr-2" 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>
+        View
+      <% end %>
+      
+      <%= link_to easy_admin.resources_path(@resource_class.route_key), 
+                  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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
+        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m0 7h18"/>
+        </svg>
+        Back to <%= @resource_class.title %>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<!-- Form Container -->
+<div class="max-w-4xl mx-auto">
+  <%= form_with model: @record, url: easy_admin.resource_path(@resource_class.route_key, @record), 
+                method: :patch, local: true, multipart: true, class: "space-y-6" do |form| %>
+    
+    <!-- Error Messages -->
+    <% if @record.errors.any? %>
+      <div class="bg-red-50 border border-red-200 rounded-md p-4">
+        <div class="flex">
+          <div class="flex-shrink-0">
+            <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+            </svg>
+          </div>
+          <div class="ml-3">
+            <h3 class="text-sm font-medium text-red-800">
+              <%= pluralize(@record.errors.count, "error") %> prohibited this <%= @resource_class.singular_title.downcase %> from being saved:
+            </h3>
+            <div class="mt-2 text-sm text-red-700">
+              <ul class="list-disc pl-5 space-y-1">
+                <% @record.errors.full_messages.each do |message| %>
+                  <li><%= message %></li>
+                <% end %>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <!-- Form Fields -->
+    <% if @resource_class.has_form_tabs? %>
+      <%= EasyAdmin::FormTabsComponent.new(resource_class: @resource_class, form: form).call.html_safe %>
+    <% else %>
+      <!-- Default Single Card Layout -->
+      <div class="bg-white shadow-sm rounded-lg border border-gray-200">
+        <div class="px-4 py-5 sm:p-6">
+          <h3 class="text-lg font-medium leading-6 text-gray-900 mb-6">
+            <%= @resource_class.singular_title %> Information
+          </h3>
+          
+          <div class="grid grid-cols-1 gap-6">
+            <% @resource_class.form_fields.each do |field| %>
+              <div>
+                <%= render_field(field, action: :form, form: form) %>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <!-- Action Buttons -->
+    <div class="flex items-center justify-end space-x-3 pt-6">
+      <%= link_to easy_admin.resource_path(@resource_class.route_key, @record), 
+                  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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
+        Cancel
+      <% end %>
+      
+      <%= form.submit "Update #{@resource_class.singular_title}", 
+                      class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
+    </div>
+  <% end %>
+</div>

data/app/views/easy_admin/resources/index.html.erb

@@ -0,0 +1,12 @@
+<% content_for :title, @resource_class.title %>
+
+<%== EasyAdmin::Resources::IndexComponent.new(
+  resource_class: @resource_class,
+  current_scope: @current_scope,
+  scope_counts: @scope_counts || {},
+  current_params: params.permit(:search, :scope, :sort, :direction, :period, :page, q: {}),
+  search_params: params[:q] || {},
+  current_period: @current_period,
+  current_user: current_admin_user
+).call %>
+

data/app/views/easy_admin/resources/index.turbo_stream.erb

@@ -0,0 +1,139 @@
+<%= turbo_stream.replace "table-frame" do %>
+  <%= turbo_frame_tag "table-frame" do %>
+    <!-- Striped Table -->
+    <div class="mt-8 flow-root">
+      <div class="mobile-table-wrapper -mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+          <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+            <table class="table-striped min-w-full divide-y divide-gray-300">
+              <thead class="bg-gray-50">
+                <tr>
+                  <% @resource_class.index_fields.each_with_index do |field, index| %>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wide <%= 'mobile-hide' if index > 2 %>">
+                      <% if field[:sortable] %>
+                        <div class="flex items-center justify-between">
+                          <%= link_to field[:label], request.params.merge(sort: field[:name], direction: params[:direction] == 'asc' ? 'desc' : 'asc'), 
+                                      class: "group hover:text-gray-900 transition-colors duration-150" do %>
+                            <%= field[:label] %>
+                          <% end %>
+                          <span class="ml-2 flex-none text-gray-400 hover:text-gray-600">
+                            <% if params[:sort] == field[:name].to_s %>
+                              <% if params[:direction] == 'asc' %>
+                                <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                  <path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd"/>
+                                </svg>
+                              <% else %>
+                                <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                  <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
+                                </svg>
+                              <% end %>
+                            <% else %>
+                              <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
+                              </svg>
+                            <% end %>
+                          </span>
+                        </div>
+                      <% else %>
+                        <%= field[:label] %>
+                      <% end %>
+                    </th>
+                  <% end %>
+                  <th scope="col" class="relative px-6 py-3">
+                    <span class="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody id="records-container" class="divide-y divide-gray-200 bg-white">
+                <% @records.each do |record| %>
+                  <tr class="hover:bg-gray-100 cursor-pointer transition-colors duration-150" 
+                      onclick="window.location='<%= easy_admin.resource_path(@resource_class.route_key, record) %>'">
+                    <% @resource_class.index_fields.each_with_index do |field, index| %>
+                      <td class="whitespace-nowrap px-6 py-4 text-sm <%= 'mobile-hide' if index > 2 %>">
+                        <div class="text-gray-900 font-medium">
+                          <%== render_field(field, action: :index, value: record.public_send(field[:name]), record: record) %>
+                        </div>
+                      </td>
+                    <% end %>
+                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                      <div class="flex items-center justify-end space-x-2 sm:mobile-actions">
+                        <%= link_to easy_admin.resource_path(@resource_class.route_key, record), 
+                                    class: "inline-flex items-center justify-center w-8 h-8 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors duration-150", 
+                                    onclick: "event.stopPropagation()",
+                                    title: "View" do %>
+                          <svg class="h-4 w-4" 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>
+                        <% end %>
+                        <%= link_to easy_admin.edit_resource_path(@resource_class.route_key, record), 
+                                    class: "inline-flex items-center justify-center w-8 h-8 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-lg transition-colors duration-150", 
+                                    onclick: "event.stopPropagation()",
+                                    title: "Edit" do %>
+                          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                          </svg>
+                        <% end %>
+                        <%= link_to easy_admin.resource_path(@resource_class.route_key, record), 
+                                    method: :delete, 
+                                    class: "inline-flex items-center justify-center w-8 h-8 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors duration-150",
+                                    onclick: "event.stopPropagation()",
+                                    title: "Delete",
+                                    data: { 
+                                      confirm: "Are you sure you want to delete this #{@resource_class.singular_title.downcase}?",
+                                      method: :delete
+                                    } do %>
+                          <svg class="h-4 w-4" 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>
+                        <% end %>
+                      </div>
+                    </td>
+                  </tr>
+                <% end %>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Pagination within the turbo frame -->
+    <div id="infinite-scroll-container">
+      <% if @resource_class.respond_to?(:infinite_scroll_enabled?) && @resource_class.infinite_scroll_enabled? %>
+        <%== EasyAdmin::InfiniteScrollComponent.new(
+              pagy: @pagy,
+              resource_class: @resource_class,
+              current_params: params.permit(:search, :scope, :sort, :direction, :period),
+              current_path: request.path
+            ).call %>
+      <% else %>
+        <%== EasyAdmin::ResourcePaginationComponent.new(
+              pagy: @pagy,
+              resource_class: @resource_class,
+              request_params: params
+            ).call %>
+      <% end %>
+    </div>
+
+    <!-- Empty state within the turbo frame -->
+    <% if @records.empty? && @pagy.page == 1 %>
+      <div class="text-center py-12">
+        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
+        </svg>
+        <h3 class="mt-2 text-sm font-semibold text-gray-900">No <%= @resource_class.title.downcase %></h3>
+        <p class="mt-1 text-sm text-gray-500">Get started by creating a new <%= @resource_class.singular_title.downcase %>.</p>
+        <div class="mt-6">
+          <%= link_to easy_admin.new_resource_path(@resource_class.route_key), 
+                      class: "inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" do %>
+            <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"/>
+            </svg>
+            New <%= @resource_class.singular_title %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/easy_admin/resources/index_frame.html.erb

@@ -0,0 +1,142 @@
+<turbo-frame id="table-frame">
+  <!-- Striped Table -->
+  <div class="mt-8 flow-root">
+    <div class="mobile-table-wrapper -mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+          <table class="table-striped min-w-full divide-y divide-gray-300">
+            <thead class="bg-gray-50">
+              <tr>
+                <% @resource_class.index_fields.each_with_index do |field, index| %>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wide <%= 'mobile-hide' if index > 2 %>">
+                    <% if field[:sortable] %>
+                      <div class="flex items-center justify-between">
+                        <% 
+                          # Determine next direction: if currently sorting by this field and direction is 'asc', toggle to 'desc'
+                          # Otherwise default to 'asc' for new sort or when toggling from 'desc'
+                          next_direction = (params[:sort] == field[:name].to_s && params[:direction] == 'asc') ? 'desc' : 'asc'
+                        %>
+                        <%= link_to url_for(request.params.merge(sort: field[:name], direction: next_direction)), 
+                                    class: "group hover:text-gray-900 transition-colors duration-150" do %>
+                          <%= field[:label] %>
+                        <% end %>
+                        <span class="ml-2 flex-none text-gray-400 hover:text-gray-600">
+                          <% if params[:sort] == field[:name].to_s %>
+                            <% if params[:direction] == 'asc' %>
+                              <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd"/>
+                              </svg>
+                            <% else %>
+                              <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
+                              </svg>
+                            <% end %>
+                          <% else %>
+                            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
+                            </svg>
+                          <% end %>
+                        </span>
+                      </div>
+                    <% else %>
+                      <%= field[:label] %>
+                    <% end %>
+                  </th>
+                <% end %>
+                <th scope="col" class="relative px-6 py-3">
+                  <span class="sr-only">Actions</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody id="records-container" class="divide-y divide-gray-200 bg-white">
+              <% @records.each do |record| %>
+                <tr class="hover:bg-gray-100 cursor-pointer transition-colors duration-150" 
+                    onclick="window.location='<%= easy_admin.resource_path(@resource_class.route_key, record) %>'">
+                  <% @resource_class.index_fields.each_with_index do |field, index| %>
+                    <td class="whitespace-nowrap px-6 py-4 text-sm <%= 'mobile-hide' if index > 2 %>">
+                      <div class="text-gray-900 font-medium">
+                        <%== render_field(field, action: :index, value: record.public_send(field[:name]), record: record) %>
+                      </div>
+                    </td>
+                  <% end %>
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                    <div class="flex items-center justify-end space-x-2 sm:mobile-actions">
+                      <%= link_to easy_admin.resource_path(@resource_class.route_key, record), 
+                                  class: "inline-flex items-center justify-center w-8 h-8 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors duration-150", 
+                                  onclick: "event.stopPropagation()",
+                                  title: "View" do %>
+                        <svg class="h-4 w-4" 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>
+                      <% end %>
+                      <%= link_to easy_admin.edit_resource_path(@resource_class.route_key, record), 
+                                  class: "inline-flex items-center justify-center w-8 h-8 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-lg transition-colors duration-150", 
+                                  onclick: "event.stopPropagation()",
+                                  title: "Edit" do %>
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                        </svg>
+                      <% end %>
+                      <%= link_to easy_admin.resource_path(@resource_class.route_key, record), 
+                                  method: :delete, 
+                                  class: "inline-flex items-center justify-center w-8 h-8 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors duration-150",
+                                  onclick: "event.stopPropagation()",
+                                  title: "Delete",
+                                  data: { 
+                                    confirm: "Are you sure you want to delete this #{@resource_class.singular_title.downcase}?",
+                                    method: :delete
+                                  } do %>
+                        <svg class="h-4 w-4" 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>
+                      <% end %>
+                    </div>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Pagination within the turbo frame -->
+  <div id="infinite-scroll-container">
+    <% if @resource_class.respond_to?(:infinite_scroll_enabled?) && @resource_class.infinite_scroll_enabled? %>
+      <%== EasyAdmin::InfiniteScrollComponent.new(
+            pagy: @pagy,
+            resource_class: @resource_class,
+            current_params: params.permit(:search, :scope, :sort, :direction, :period, :page, q: {}),
+            current_path: request.path
+          ).call %>
+    <% else %>
+      <%== EasyAdmin::ResourcePaginationComponent.new(
+            pagy: @pagy,
+            resource_class: @resource_class,
+            request_params: params
+          ).call %>
+    <% end %>
+  </div>
+
+  <!-- Empty state within the turbo frame -->
+  <% if @records.empty? && @pagy.page == 1 %>
+    <div class="text-center py-12">
+      <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
+      </svg>
+      <h3 class="mt-2 text-sm font-semibold text-gray-900">No <%= @resource_class.title.downcase %></h3>
+      <p class="mt-1 text-sm text-gray-500">Get started by creating a new <%= @resource_class.singular_title.downcase %>.</p>
+      <div class="mt-6">
+        <%= link_to easy_admin.new_resource_path(@resource_class.route_key), 
+                    class: "inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" do %>
+          <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"/>
+          </svg>
+          New <%= @resource_class.singular_title %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</turbo-frame>