elaine_crud 0.1.0

data/app/helpers/elaine_crud/search_helper.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module ElaineCrud
+  # Helper methods for rendering search and filter UI components
+  module SearchHelper
+    # Render a filter field based on its type
+    # @param field_info [Hash] Field information with name, type, and config
+    # @return [String] HTML for the filter field
+    def render_filter_field(field_info)
+      field_name = field_info[:name]
+      filter_type = field_info[:type]
+      config = field_info[:config]
+
+      case filter_type
+      when :select
+        render_select_filter(field_name, config)
+      when :boolean
+        render_boolean_filter(field_name, config)
+      when :date_range
+        render_date_range_filter(field_name, config)
+      when :text
+        render_text_filter(field_name, config)
+      else
+        render_text_filter(field_name, config)
+      end
+    end
+
+    # Render a select dropdown filter
+    # @param field_name [Symbol] Field name
+    # @param config [FieldConfiguration, nil] Field configuration
+    # @return [String] HTML for select filter
+    def render_select_filter(field_name, config)
+      content_tag(:div, class: "flex flex-col") do
+        label = content_tag(:label, config&.title || field_name.to_s.humanize,
+                           class: "text-sm font-medium text-gray-700 mb-1")
+
+        options = get_filter_options(field_name, config)
+        select = select_tag "filter[#{field_name}]",
+                           options_for_select(options, @active_filters[field_name.to_s]),
+                           include_blank: "All",
+                           class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+
+        label + select
+      end
+    end
+
+    # Render a boolean filter (Yes/No/All)
+    # @param field_name [Symbol] Field name
+    # @param config [FieldConfiguration, nil] Field configuration
+    # @return [String] HTML for boolean filter
+    def render_boolean_filter(field_name, config)
+      content_tag(:div, class: "flex flex-col") do
+        label = content_tag(:label, config&.title || field_name.to_s.humanize,
+                           class: "text-sm font-medium text-gray-700 mb-1")
+
+        select = select_tag "filter[#{field_name}]",
+                           options_for_select([["All", ""], ["Yes", "true"], ["No", "false"]],
+                                            @active_filters[field_name.to_s]),
+                           class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+
+        label + select
+      end
+    end
+
+    # Render a date range filter (from/to inputs)
+    # @param field_name [Symbol] Field name
+    # @param config [FieldConfiguration, nil] Field configuration
+    # @return [String] HTML for date range filter
+    def render_date_range_filter(field_name, config)
+      content_tag(:div, class: "flex flex-col") do
+        label = content_tag(:label, config&.title || field_name.to_s.humanize,
+                           class: "text-sm font-medium text-gray-700 mb-1")
+
+        from_field = date_field_tag "filter[#{field_name}_from]",
+                                     @active_filters["#{field_name}_from"],
+                                     placeholder: "From",
+                                     class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
+
+        to_field = date_field_tag "filter[#{field_name}_to]",
+                                   @active_filters["#{field_name}_to"],
+                                   placeholder: "To",
+                                   class: "block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
+
+        label + from_field + to_field
+      end
+    end
+
+    # Render a text input filter
+    # @param field_name [Symbol] Field name
+    # @param config [FieldConfiguration, nil] Field configuration
+    # @return [String] HTML for text filter
+    def render_text_filter(field_name, config)
+      content_tag(:div, class: "flex flex-col") do
+        label = content_tag(:label, config&.title || field_name.to_s.humanize,
+                           class: "text-sm font-medium text-gray-700 mb-1")
+
+        input = text_field_tag "filter[#{field_name}]",
+                              @active_filters[field_name.to_s],
+                              placeholder: "Filter by #{(config&.title || field_name.to_s.humanize).downcase}",
+                              class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+
+        label + input
+      end
+    end
+
+    # Get filter options for a field
+    # @param field_name [Symbol] Field name
+    # @param config [FieldConfiguration, nil] Field configuration
+    # @return [Array] Array of [display, value] pairs for select options
+    def get_filter_options(field_name, config)
+      # If field has configured options, use those
+      if config&.has_options?
+        options = config.options
+        # Handle both array and hash formats
+        if options.is_a?(Hash)
+          options.to_a
+        else
+          options.map { |opt| [opt, opt] }
+        end
+      # If it's a foreign key, get options from related model
+      elsif config&.has_foreign_key?
+        config.foreign_key_options(controller)
+      # Otherwise, get distinct values from database
+      else
+        crud_model.distinct.pluck(field_name).compact.sort.map { |v| [v, v] }
+      end
+    rescue => e
+      Rails.logger.error "ElaineCrud: Error getting filter options for #{field_name}: #{e.message}"
+      []
+    end
+  end
+end

data/app/javascript/controllers/dropdown_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Dropdown controller for export menu
+export default class extends Controller {
+  static targets = ["menu"]
+
+  toggle(event) {
+    event.stopPropagation()
+    this.menuTarget.classList.toggle("hidden")
+  }
+
+  hide(event) {
+    if (event && this.element.contains(event.target)) {
+      return
+    }
+    this.menuTarget.classList.add("hidden")
+  }
+}

data/app/views/elaine_crud/base/_edit_row.html.erb

@@ -0,0 +1,60 @@
+<%# Edit form wrapped in turbo-frame for seamless inline editing %>
+<%# Calculate how many columns we have in the grid %>
+<% header_layout = calculate_layout_header(columns.map(&:to_sym)) %>
+<% total_columns = header_layout.length %>
+
+<%# Wrap entire edit row in matching turbo-frame %>
+<turbo-frame id="record_<%= record.id %>" class="contents">
+  <%# Edit form spans all columns %>
+  <%= form_with model: record, url: { action: :update, id: record.id }, method: :patch, class: "contents" do |form| %>
+
+    <%# Form content spanning all columns (including actions column) %>
+    <div class="bg-blue-50 border-2 border-blue-400 p-6 border-b" style="grid-column: 1 / -1;">
+    <%# Calculate layout for this record %>
+    <% record_layout = calculate_layout(record, columns.map(&:to_sym)) %>
+
+    <%# Render layout rows for editing %>
+    <% record_layout.each_with_index do |layout_row, row_index| %>
+      <%# Single CSS Grid container with synchronized column widths %>
+      <div class="grid gap-x-4 gap-y-4 <%= 'mb-4' unless row_index == record_layout.length - 1 %>" style="grid-template-columns: 1fr 2fr 1fr;">
+        <% layout_row.each_with_index do |column_config, col_index| %>
+          <% field_name = column_config[:field_name] %>
+          <% colspan = column_config[:colspan] || 1 %>
+          <% rowspan = column_config[:rowspan] || 1 %>
+
+          <%# Column 1: Field Name/Title %>
+          <div class="text-sm font-medium text-gray-700 py-3 <%= 'border-b border-blue-200' unless col_index == layout_row.length - 1 %> <%= 'col-span-' + colspan.to_s if colspan > 1 %>">
+            <%= field_title(field_name) %>
+            <% if record.errors[field_name].any? %>
+              <div class="text-red-500 font-normal text-xs mt-1">
+                <%= record.errors[field_name].first %>
+              </div>
+            <% end %>
+          </div>
+
+          <%# Column 2: Form Input %>
+          <div class="py-2 <%= 'border-b border-blue-200' unless col_index == layout_row.length - 1 %> <%= 'col-span-' + colspan.to_s if colspan > 1 %>">
+            <%= render_form_field(form, record, field_name) %>
+          </div>
+
+          <%# Column 3: Field Description %>
+          <div class="text-xs text-gray-500 py-3 <%= 'border-b border-blue-200' unless col_index == layout_row.length - 1 %> <%= 'col-span-' + colspan.to_s if colspan > 1 %>">
+            <% if field_description(field_name).present? %>
+              <%= field_description(field_name) %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%# Action buttons at the bottom %>
+    <div class="flex justify-end space-x-3 pt-6 border-t-2 border-blue-300 mt-6">
+      <%= form.submit "Save Changes",
+          class: "bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded shadow-md border border-green-700" %>
+      <%= link_to "Cancel",
+          url_for(action: :index, page: params[:page], per_page: params[:per_page]),
+          class: "bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-6 rounded shadow-md border-2 border-gray-400" %>
+    </div>
+  </div>
+  <% end %>
+</turbo-frame>

data/app/views/elaine_crud/base/_export_button.html.erb

@@ -0,0 +1,88 @@
+<%# Export button with dropdown menu for CSV/Excel/JSON formats %>
+<div class="relative inline-block text-left" id="export-dropdown">
+  <button type="button"
+          onclick="toggleExportDropdown(event)"
+          class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded shadow-sm transition-colors duration-200">
+    <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+    </svg>
+    Export
+    <svg class="ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
+    </svg>
+  </button>
+
+  <div id="export-menu"
+       class="hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
+    <div class="py-1" role="menu" style="max-height: 300px; overflow-y: auto;">
+      <%
+        # Build export params, converting filter hash if present
+        csv_params = {action: :export, format: :csv}
+        csv_params[:search] = params[:search] if params[:search].present?
+        csv_params[:sort] = params[:sort] if params[:sort].present?
+        csv_params[:direction] = params[:direction] if params[:direction].present?
+        csv_params[:filter] = params[:filter].to_unsafe_h if params[:filter].present?
+      %>
+      <%= link_to(csv_params,
+                  {class: "flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-150 no-underline",
+                   role: "menuitem",
+                   style: "display: flex; text-decoration: none;"}) do %>
+        <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink: 0;">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+        <span>CSV Format</span>
+      <% end %>
+
+      <%
+        xlsx_params = {action: :export, format: :xlsx}
+        xlsx_params[:search] = params[:search] if params[:search].present?
+        xlsx_params[:sort] = params[:sort] if params[:sort].present?
+        xlsx_params[:direction] = params[:direction] if params[:direction].present?
+        xlsx_params[:filter] = params[:filter].to_unsafe_h if params[:filter].present?
+      %>
+      <%= link_to(xlsx_params,
+                  {class: "flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-150 no-underline",
+                   role: "menuitem",
+                   style: "display: flex; text-decoration: none;"}) do %>
+        <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink: 0;">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+        </svg>
+        <span>Excel (XLSX)</span>
+      <% end %>
+
+      <%
+        json_params = {action: :export, format: :json}
+        json_params[:search] = params[:search] if params[:search].present?
+        json_params[:sort] = params[:sort] if params[:sort].present?
+        json_params[:direction] = params[:direction] if params[:direction].present?
+        json_params[:filter] = params[:filter].to_unsafe_h if params[:filter].present?
+      %>
+      <%= link_to(json_params,
+                  {class: "flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-150 no-underline",
+                   role: "menuitem",
+                   style: "display: flex; text-decoration: none;"}) do %>
+        <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink: 0;">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+        </svg>
+        <span>JSON Format</span>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<script>
+  function toggleExportDropdown(event) {
+    event.stopPropagation();
+    const menu = document.getElementById('export-menu');
+    menu.classList.toggle('hidden');
+  }
+
+  // Close dropdown when clicking outside
+  document.addEventListener('click', function(event) {
+    const dropdown = document.getElementById('export-dropdown');
+    const menu = document.getElementById('export-menu');
+    if (dropdown && menu && !dropdown.contains(event.target)) {
+      menu.classList.add('hidden');
+    }
+  });
+</script>

data/app/views/elaine_crud/base/_foreign_key_select_refresh.html.erb

@@ -0,0 +1,52 @@
+<%# Partial to refresh foreign key dropdown after nested create %>
+<div id="<%= field_name %>_select_wrapper">
+  <% if field_config&.has_foreign_key? %>
+    <%
+      # Generate options from the foreign key configuration
+      target_model = field_config.foreign_key_config[:model]
+      display_field = field_config.foreign_key_config[:display]
+      scope = field_config.foreign_key_config[:scope]
+
+      # Get records using scope if provided
+      records = scope ? target_model.instance_exec(&scope) : target_model.all
+
+      # Generate options based on display configuration
+      options = records.map do |record|
+        label = case display_field
+                when Symbol
+                  record.public_send(display_field)
+                when Proc
+                  display_field.call(record)
+                else
+                  record.to_s
+                end
+        [label, record.id]
+      end
+    %>
+    <select class="block w-full border border-gray-500 focus:border-gray-700 text-sm bg-white px-3 py-2"
+            name="<%= parent_model %>[<%= field_name %>]"
+            id="<%= parent_model %>_<%= field_name %>">
+      <option value="">Select...</option>
+      <% options.each do |(label, value)| %>
+        <option value="<%= value %>" <%= 'selected' if value == selected_id %>>
+          <%= label %>
+        </option>
+      <% end %>
+    </select>
+  <% end %>
+</div>
+
+<script>
+  // Close modal after successful create and refresh
+  ElaineCrud.closeModal();
+
+  // Show success notification
+  const notification = document.createElement('div');
+  notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded shadow-lg z-50';
+  notification.textContent = '<%= @model_name %> created successfully!';
+  document.body.appendChild(notification);
+
+  setTimeout(() => {
+    notification.remove();
+  }, 3000);
+</script>

data/app/views/elaine_crud/base/_form.html.erb

@@ -0,0 +1,45 @@
+<%# Shared form partial for new and edit views %>
+<% form_url = record.persisted? ? { action: :update, id: record.id } : { action: :create } %>
+<%= form_with model: record, url: form_url, local: true, class: "space-y-6" do |form| %>
+  
+  <%# Handle parent context for has_many relationships %>
+  <% if @parent_context && @parent_context[:record] %>
+    <%= form.hidden_field @parent_context[:foreign_key], value: @parent_context[:record].id %>
+    
+    <div class="mb-4 p-3 bg-gray-50 rounded-md">
+      <p class="text-sm text-gray-600">
+        Creating <%= record.class.name.underscore.humanize.downcase %> for
+        <strong><%= @parent_context[:model_class].name %>:</strong>
+        <%= @parent_context[:record].public_send(controller.send(:determine_display_field_for_model, @parent_context[:model_class])) %>
+      </p>
+    </div>
+  <% end %>
+
+  <%# Display validation errors if any %>
+  <% if record.errors.any? %>
+    <div class="bg-red-50 border border-red-200 rounded-md p-4 mb-4">
+      <h3 class="text-sm font-medium text-red-800">
+        <%= pluralize(record.errors.count, "error") %> prohibited this <%= record.class.name.underscore.humanize.downcase %> from being saved:
+      </h3>
+      <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
+        <% record.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <%# Render form fields using shared partial %>
+  <div class="space-y-4">
+    <%= render partial: 'elaine_crud/base/form_fields',
+               locals: { form: form, record: record } %>
+  </div>
+
+  <div class="flex justify-end space-x-3">
+    <%= link_to "Cancel", 
+        url_for(action: :index), 
+        class: "bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded" %>
+    <%= form.submit submit_text, 
+        class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>
+  </div>
+<% end %>

data/app/views/elaine_crud/base/_form_fields.html.erb

@@ -0,0 +1,45 @@
+<%# Shared form fields partial for reuse in modal and regular forms %>
+<% permitted_attributes.each do |field_name| %>
+  <%# Handle hash entries (like {tag_ids: []}) - convert to association name %>
+  <% original_param_name = field_name %>
+  <% if field_name.is_a?(Hash) %>
+    <%# Extract the key and convert tag_ids -> tags %>
+    <% original_param_name = field_name.keys.first.to_sym %>
+    <% field_name = field_name.keys.first.to_s.sub(/_ids$/, '').pluralize.to_sym %>
+  <% end %>
+
+  <%# Determine which field name to check for errors %>
+  <% error_field_name = field_name %>
+  <% if original_param_name.is_a?(Symbol) && original_param_name.to_s.end_with?('_ids') %>
+    <% param_field_name = original_param_name.to_s.sub(/_ids$/, '').pluralize.to_sym %>
+    <% error_field_name = record.errors[param_field_name].any? ? param_field_name : original_param_name %>
+  <% end %>
+
+  <% has_error = record.errors[error_field_name].any? %>
+
+  <div class="form-group">
+    <label for="<%= "#{record.class.name.underscore}_#{field_name}" %>"
+           class="block text-sm font-medium text-gray-700 mb-1">
+      <%= field_title(field_name) %>
+      <% if field_readonly?(field_name) %>
+        <span class="text-xs text-gray-500">(read-only)</span>
+      <% end %>
+    </label>
+
+    <%= render_form_field(form, record, field_name, has_error: has_error) %>
+
+    <%# Display field-level error message %>
+    <% if has_error %>
+      <p class="text-sm text-red-600 mt-1">
+        <%= record.errors[error_field_name].first %>
+      </p>
+    <% end %>
+
+    <%# Display field description (help text) %>
+    <% if field_description(field_name).present? %>
+      <p class="text-xs text-gray-500 mt-1">
+        <%= field_description(field_name) %>
+      </p>
+    <% end %>
+  </div>
+<% end %>

data/app/views/elaine_crud/base/_index_table.html.erb

@@ -0,0 +1,58 @@
+<%# Reusable table grid component for displaying records in a grid layout %>
+<%# Required locals: records (collection), columns (array of symbols) %>
+<%# Optional locals: show_actions (boolean, default: true) %>
+
+<% show_actions = local_assigns.fetch(:show_actions, true) %>
+
+<% if records.any? %>
+  <%# Calculate layout header to determine grid structure %>
+  <% header_layout = calculate_layout_header(columns.map(&:to_sym)) %>
+
+  <%# Remove ROW-ACTIONS column if show_actions is false %>
+  <% unless show_actions %>
+    <% header_layout = header_layout.reject { |config| config[:field_name].to_s == 'ROW-ACTIONS' } %>
+  <% end %>
+
+  <% grid_template = header_layout.map { |config| config[:width] }.join(' ') %>
+
+  <div class="overflow-x-auto">
+    <%# Main grid container - grid template defined once here for entire table %>
+    <div class="bg-white shadow-md border border-gray-300 inline-block min-w-full grid" style="grid-template-columns: <%= grid_template %>;">
+      <%# Header row - render all headers from layout %>
+      <% header_layout.each do |header_config| %>
+        <% if header_config[:field_name].to_s == 'ROW-ACTIONS' %>
+          <%# Actions column header %>
+          <div class="px-3 py-3 text-xs font-medium text-gray-700 uppercase tracking-wider border-b-2 border-gray-200 bg-gray-100">
+            Actions
+          </div>
+        <% else %>
+          <%# Regular column header %>
+          <div class="px-3 py-3 text-xs font-medium text-gray-700 uppercase tracking-wider border-r border-b-2 border-gray-200 bg-gray-100">
+            <% if header_column_sortable?(header_config) %>
+              <%= link_to sort_url_for(header_config[:field_name]), class: "flex items-center hover:text-blue-600 transition-colors duration-200" do %>
+                <span><%= header_column_title(header_config) %></span>
+                <%= sort_indicator(header_config[:field_name]).html_safe %>
+              <% end %>
+            <% else %>
+              <span><%= header_column_title(header_config) %></span>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+
+      <%# Records - each cell is a direct grid child %>
+      <% records.each_with_index do |record, index| %>
+        <% record_id = "record_#{record.id}" %>
+        <% row_bg_class = index.even? ? "bg-white" : "bg-gray-50" %>
+        <% is_last_record = index == records.length - 1 %>
+        <%# Render normal view row %>
+        <%= render 'elaine_crud/base/view_row', record: record, columns: columns, row_bg_class: row_bg_class, record_id: record_id, is_last_record: is_last_record, show_actions: show_actions %>
+      <% end %>
+    </div>
+  </div>
+<% else %>
+  <div class="bg-gray-50 border border-gray-200 rounded-lg p-8 text-center">
+    <h3 class="text-lg font-medium text-gray-900 mb-2">No records found</h3>
+    <p class="text-gray-600">No data to display.</p>
+  </div>
+<% end %>

data/app/views/elaine_crud/base/_modal.html.erb

@@ -0,0 +1,71 @@
+<%# Generic modal component for nested record creation %>
+<div id="elaine-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+  <!-- Background overlay -->
+  <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="ElaineCrud.closeModal()"></div>
+
+  <!-- Modal panel -->
+  <div class="flex min-h-full items-center justify-center p-4">
+    <div class="relative bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
+      <!-- Close button -->
+      <button type="button"
+              onclick="ElaineCrud.closeModal()"
+              class="absolute top-4 right-4 text-gray-400 hover:text-gray-500 z-10">
+        <span class="sr-only">Close</span>
+        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+
+      <!-- Modal content loaded via Turbo Frame -->
+      <div class="overflow-y-auto max-h-[85vh]">
+        <%= turbo_frame_tag "modal_content" do %>
+          <div class="p-6">
+            <p class="text-gray-500">Loading...</p>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+// Global ElaineCrud namespace for modal functions
+window.ElaineCrud = window.ElaineCrud || {};
+
+ElaineCrud.openModal = function() {
+  const modal = document.getElementById('elaine-modal');
+  if (modal) {
+    modal.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+  }
+};
+
+ElaineCrud.closeModal = function() {
+  const modal = document.getElementById('elaine-modal');
+  if (modal) {
+    modal.classList.add('hidden');
+    document.body.style.overflow = '';
+
+    // Clear modal content
+    const frame = document.getElementById('modal_content');
+    if (frame) {
+      frame.innerHTML = '<div class="p-6"><p class="text-gray-500">Loading...</p></div>';
+    }
+  }
+};
+
+// Listen for successful turbo form submissions in modal
+document.addEventListener('turbo:submit-end', function(event) {
+  if (event.detail.success && event.target.dataset.nestedCreate) {
+    // Close modal on successful submission
+    ElaineCrud.closeModal();
+  }
+});
+
+// Open modal when turbo frame loads in modal
+document.addEventListener('turbo:frame-load', function(event) {
+  if (event.target.id === 'modal_content') {
+    ElaineCrud.openModal();
+  }
+});
+</script>