easy-admin-rails 0.2.5 → 0.2.7

data/app/components/easy_admin/form_layout_component.rb

@@ -0,0 +1,553 @@
+module EasyAdmin
+  class FormLayoutComponent < BaseComponent
+    include EasyAdmin::FieldsHelper
+    
+    def initialize(resource_class:, form:, record: nil)
+      @resource_class = resource_class
+      @form = form
+      @record = record
+    end
+    
+    def view_template
+      has_custom = @resource_class.has_custom_form_layout?
+      
+      if has_custom
+        render_custom_layout
+      else
+        render_default_layout
+      end
+    end
+    
+    private
+    
+    def render_custom_layout
+      layout_type, layout_content = @resource_class.form_layout_definition
+      
+      case layout_type
+      when :ast
+        render_ast_layout(layout_content)
+      when :component
+        render layout_content
+      else
+        render_default_layout
+      end
+    end
+    
+    def render_ast_layout(root_node)
+      if root_node
+        render_children(root_node)
+      end
+    end
+    
+    def render_children(node)
+      return unless node&.children
+      
+      node.children.each do |child|
+        render_node(child)
+      end
+    end
+    
+    def render_node(node)
+      case node
+      when EasyAdmin::Layouts::Nodes::Row
+        render_row_node(node)
+      when EasyAdmin::Layouts::Nodes::Column
+        render_column_node(node)
+      when EasyAdmin::Layouts::Nodes::Card
+        render_card_node(node)
+      when EasyAdmin::Layouts::Nodes::Section
+        render_section_node(node)
+      when EasyAdmin::Layouts::Nodes::Grid
+        render_grid_node(node)
+      when EasyAdmin::Layouts::Nodes::FieldNode
+        render_field_node(node)
+      when EasyAdmin::Layouts::Nodes::Heading
+        render_heading_node(node)
+      when EasyAdmin::Layouts::Nodes::Divider
+        render_divider_node(node)
+      when EasyAdmin::Layouts::Nodes::Tabs
+        render_tabs_node(node)
+      when EasyAdmin::Layouts::Nodes::Tab
+        nil
+      when EasyAdmin::Layouts::Nodes::Content
+        render_content_node(node)
+      when EasyAdmin::Layouts::Nodes::Spacer
+        render_spacer_node(node)
+      when EasyAdmin::Layouts::Nodes::RenderNode
+        render_render_node(node)
+      else
+        nil
+      end
+    end
+    
+    def render_row_node(node)
+      classes = ["grid", "items-stretch"]
+      
+      # Check if any child column has explicit size - if so, use 12-column grid
+      has_sized_columns = node.children.any? { |child| 
+        child.is_a?(EasyAdmin::Layouts::Nodes::Column) && child.attributes[:size] 
+      }
+      
+      if has_sized_columns
+        # Use 12-column grid for Bootstrap-style column sizing
+        classes << "grid-cols-1 md:grid-cols-12"
+      elsif node.attributes[:columns]
+        # Use simple equal-width columns
+        columns = node.attributes[:columns]
+        case columns
+        when 1
+          classes << "grid-cols-1"
+        when 2
+          classes << "grid-cols-1 md:grid-cols-2"
+        when 3
+          classes << "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+        when 4
+          classes << "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+        else
+          classes << "grid-cols-1 md:grid-cols-#{[columns, 12].min}"
+        end
+      else
+        classes << "grid-cols-1"
+      end
+      
+      # Add spacing with Tailwind gap classes
+      spacing = node.attributes[:spacing] || "medium"
+      case spacing
+      when "small", "sm"
+        classes << "gap-2"
+      when "medium", "md"
+        classes << "gap-4"
+      when "large", "lg"
+        classes << "gap-6"
+      else
+        classes << "gap-4"
+      end
+      
+      div(class: classes.join(" ")) do
+        render_children(node)
+      end
+    end
+    
+    def render_column_node(node)
+      classes = ["flex", "flex-col", "h-full"]
+      
+      # Handle column spanning in Tailwind CSS Grid
+      if node.attributes[:size]
+        size = node.attributes[:size]
+        # On mobile, all columns take full width, on desktop use specified size
+        case size
+        when 1
+          classes << "col-span-1 md:col-span-1"
+        when 2
+          classes << "col-span-1 md:col-span-2"
+        when 3
+          classes << "col-span-1 md:col-span-3"
+        when 4
+          classes << "col-span-1 md:col-span-4"
+        when 5
+          classes << "col-span-1 md:col-span-5"
+        when 6
+          classes << "col-span-1 md:col-span-6"
+        when 7
+          classes << "col-span-1 md:col-span-7"
+        when 8
+          classes << "col-span-1 md:col-span-8"
+        when 9
+          classes << "col-span-1 md:col-span-9"
+        when 10
+          classes << "col-span-1 md:col-span-10"
+        when 11
+          classes << "col-span-1 md:col-span-11"
+        when 12
+          classes << "col-span-1 md:col-span-12"
+        else
+          classes << "col-span-full"
+        end
+      end
+      
+      div(class: classes.join(" ")) do
+        render_children(node)
+      end
+    end
+    
+    def render_card_node(node)
+      # Build card classes with Tailwind
+      card_classes = ["bg-white", "rounded-lg", "shadow-sm", "border", "mb-4", "flex-1", "flex", "flex-col", "h-full"]
+      
+      # Add color styling with Tailwind
+      if node.attributes[:color]
+        case node.attributes[:color]
+        when "primary"
+          card_classes << "border-blue-200"
+        when "secondary"
+          card_classes << "border-gray-200"
+        when "success"
+          card_classes << "border-green-200"
+        when "info"
+          card_classes << "border-cyan-200"
+        when "warning"
+          card_classes << "border-yellow-200"
+        when "danger"
+          card_classes << "border-red-200"
+        when "light"
+          card_classes << "border-gray-100"
+        when "dark"
+          card_classes << "border-gray-800"
+        else
+          card_classes << "border-gray-200"
+        end
+      else
+        card_classes << "border-gray-200"
+      end
+      
+      div(class: card_classes.join(" ")) do
+        # Card header
+        if node.attributes[:title]
+          header_classes = ["px-6", "py-4", "border-b", "border-gray-200"]
+          
+          # Add header color styling with Tailwind
+          if node.attributes[:color]
+            case node.attributes[:color]
+            when "primary"
+              header_classes << "bg-blue-50"
+            when "secondary"
+              header_classes << "bg-gray-50"
+            when "success"
+              header_classes << "bg-green-50"
+            when "info"
+              header_classes << "bg-cyan-50"
+            when "warning"
+              header_classes << "bg-yellow-50"
+            when "danger"
+              header_classes << "bg-red-50"
+            when "light"
+              header_classes << "bg-gray-25"
+            when "dark"
+              header_classes << "bg-gray-800 text-white"
+            else
+              header_classes << "bg-gray-50"
+            end
+          else
+            header_classes << "bg-gray-50"
+          end
+          
+          div(class: header_classes.join(" ")) do
+            h3(class: "text-lg font-semibold text-gray-900") { node.attributes[:title] }
+          end
+        end
+        
+        # Card body
+        div(class: "px-6 py-4 flex-1") do
+          render_children(node)
+        end
+      end
+    end
+    
+    def render_section_node(node)
+      div(class: "mb-6") do
+        if node.attributes[:title]
+          h3(class: "text-lg font-medium leading-6 text-gray-900 mb-4") do
+            node.attributes[:title]
+          end
+        end
+        render_children(node)
+      end
+    end
+    
+    def render_grid_node(node)
+      columns = node.attributes[:columns] || 2
+      classes = ["grid"]
+      
+      # Add responsive column classes with Tailwind CSS Grid
+      case columns
+      when 1
+        classes << "grid-cols-1"
+      when 2
+        classes << "grid-cols-1 md:grid-cols-2"
+      when 3
+        classes << "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+      when 4
+        classes << "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+      else
+        classes << "grid-cols-1 md:grid-cols-#{[columns, 6].min}"
+      end
+      
+      # Add spacing
+      spacing = node.attributes[:spacing] || "medium"
+      classes << spacing_class(spacing)
+      
+      div(class: classes.join(" ")) do
+        render_children(node)
+      end
+    end
+    
+    def render_field_node(node)
+      base_field_config = @resource_class.find_field_config(node.field_name) || {}
+      field_config = base_field_config.merge(node.attributes).merge({
+        name: node.field_name,
+        label: node.attributes[:label] || base_field_config[:label] || node.field_name.to_s.humanize,
+        type: node.attributes[:type] || base_field_config[:type]
+      })
+      
+      div(class: "mb-6") do
+        render_form_field(field_config)
+      end
+    end
+    
+    def render_form_field(field_config)
+      if field_config[:type] == :has_many
+        render_has_many_form_field(field_config)
+      else
+        field_definition = {
+          name: field_config[:name],
+          type: field_config[:type] || :text,
+          field_type: field_config[:type] || :text,
+          label: field_config[:label],
+          required: field_config[:required],
+          help_text: field_config[:help_text],
+          options: field_config[:options],
+          multiple: field_config[:multiple]
+        }.merge(field_config)
+
+        result = render_field(field_definition, action: :form, form: @form, record: @record)
+        
+        unsafe_raw result
+      end
+    end
+    
+    def render_has_many_form_field(field_config)
+      div(class: "mb-6") do
+        div(class: "block text-sm font-medium text-gray-700 mb-2") do
+          field_config[:label]
+        end
+        
+        if @record
+          association = @record.public_send(field_config[:name])
+          count = association.respond_to?(:count) ? association.count : 0
+          
+          div(class: "px-4 py-3 bg-gray-50 border border-gray-200 rounded-md") do
+            p(class: "text-sm text-gray-600") do
+              "#{count} #{field_config[:name].to_s.humanize.downcase} associated with this #{@resource_class.resource_name.humanize.downcase}"
+            end
+            
+            if field_config[:help_text]
+              p(class: "mt-2 text-xs text-gray-500") { field_config[:help_text] }
+            end
+            
+            p(class: "mt-2 text-xs text-gray-400") do
+              "Manage #{field_config[:name].to_s.humanize.downcase} through the #{field_config[:name].to_s.humanize} section"
+            end
+          end
+        else
+          div(class: "px-4 py-3 bg-gray-50 border border-gray-200 rounded-md") do
+            p(class: "text-sm text-gray-600") do
+              "#{field_config[:name].to_s.humanize} will be available after saving this #{@resource_class.resource_name.humanize.downcase}"
+            end
+            
+            if field_config[:help_text]
+              p(class: "mt-2 text-xs text-gray-500") { field_config[:help_text] }
+            end
+          end
+        end
+      end
+    end
+    
+    
+    def render_heading_node(node)
+      level = node.attributes[:level] || 2
+      tag_name = "h#{level}"
+      classes = ["mb-3", "font-semibold"]
+      
+      # Add appropriate text sizing based on heading level
+      case level
+      when 1
+        classes << "text-xl text-gray-900"
+      when 2
+        classes << "text-lg text-gray-900"
+      when 3
+        classes << "text-base text-gray-800"
+      when 4
+        classes << "text-sm text-gray-800"
+      else
+        classes << "text-sm text-gray-700"
+      end
+      
+      send(tag_name, class: classes.join(" ")) { node.text }
+    end
+    
+    def render_divider_node(node)
+      margin = node.attributes[:margin] || 4
+      hr(class: "my-#{margin} border-gray-200")
+    end
+    
+    def render_tabs_node(node)
+      tabs_id = node.attributes[:id] || "form-tabs-#{SecureRandom.hex(4)}"
+      
+      div(class: "form-tabs", 
+          data: { 
+            controller: "form-tabs",
+            action: "tab:selected@window->form-tabs#handleTabSelection"
+          }) do
+
+        render_tab_navigation(node, tabs_id)
+
+        render_tab_content(node, tabs_id)
+      end
+    end
+    
+    def render_tab_navigation(tabs_node, tabs_id)
+      nav(class: "border-b border-gray-200 mb-4 sm:mb-6") do
+        # Desktop tabs
+        ul(class: "flex flex-wrap -mb-px text-sm font-medium text-center", role: "tablist") do
+          tabs_node.children.each_with_index do |tab_node, index|
+            next unless tab_node.is_a?(EasyAdmin::Layouts::Nodes::Tab)
+            
+            li(class: "mr-2", role: "presentation") do
+              button(
+                class: tab_button_classes(index == 0),
+                id: "#{tab_node.attributes[:name]}-tab",
+                data: {
+                  form_tabs_target: "tabButton",
+                  tab_id: tab_node.attributes[:name],
+                  action: "click->form-tabs#switchTab"
+                },
+                type: "button",
+                role: "tab"
+              ) do
+                if tab_node.attributes[:icon]
+                  span(class: "inline-flex items-center") do
+                    unsafe_raw(tab_icon(tab_node.attributes[:icon]))
+                    span(class: "ml-2") { tab_node.label }
+                  end
+                else
+                  plain tab_node.label
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+    
+    def render_tab_content(tabs_node, tabs_id)
+      Rails.logger.info "🔍 [FormLayout] render_tab_content started"
+      div(class: "tab-content") do
+        tabs_node.children.each_with_index do |tab_node, index|
+          next unless tab_node.is_a?(EasyAdmin::Layouts::Nodes::Tab)
+
+          div(
+            class: tab_panel_classes(index == 0),
+            id: "#{tab_node.attributes[:name]}-panel",
+            data: { form_tabs_target: "tabPanel" },
+            role: "tabpanel"
+          ) do
+            div(class: "bg-white shadow-sm rounded-lg border border-gray-200") do
+              div(class: "px-4 py-5 sm:p-6") do
+                if tab_node.label && !tab_node.label.empty?
+                  h3(class: "text-lg font-medium leading-6 text-gray-900 mb-6") do
+                    tab_node.label
+                  end
+                end
+                
+                div(class: "grid grid-cols-1 gap-6") do
+                  render_children(tab_node)
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+    
+    def render_content_node(node)
+      if node.block
+        context = EasyAdmin::Layouts::LayoutContext.new(
+          record: @record,
+          resource_class: @resource_class,
+          form_builder: @form
+        )
+        result = context.instance_exec(&node.block)
+        if result.respond_to?(:call)
+          render result
+        else
+          unsafe_raw result.to_s
+        end
+      end
+    end
+    
+    def render_default_layout
+      div(class: "bg-white shadow-sm rounded-lg border border-gray-200") do
+        div(class: "px-4 py-5 sm:p-6") do
+          div(class: "grid grid-cols-1 gap-6") do
+            @resource_class.fields_config.each do |field_config|
+              next if field_config[:readonly] || field_config[:form] == false
+              render_form_field(field_config)
+            end
+          end
+        end
+      end
+    end
+    
+    def tab_button_classes(active = false)
+      base_classes = "inline-flex items-center p-4 border-b-2 rounded-t-lg transition-colors duration-200"
+      
+      if active
+        active_classes = "text-blue-600 border-blue-600"
+      else
+        inactive_classes = "text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300"
+      end
+      
+      "#{base_classes} #{active ? active_classes : inactive_classes}"
+    end
+
+    def tab_panel_classes(active = false)
+      base_classes = "tab-panel"
+      visibility_classes = active ? "block" : "hidden"
+      
+      "#{base_classes} #{visibility_classes}"
+    end
+    
+    def tab_icon(icon_name)
+      case icon_name.to_sym
+      when :user
+        '<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>'
+      when :security
+        '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>'
+      when :settings, :info
+        '<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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>'
+      else
+        '<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="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>'
+      end
+    end
+    
+    def render_spacer_node(node)
+      div(class: "my-#{node.attributes[:size] || 4}")
+    end
+    
+    def render_render_node(node)
+      if node.component_class
+        begin
+          component = node.component_class.constantize.new(**node.attributes)
+          render component
+        rescue => e
+          div(class: "bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-md") do
+            "Component class not found: #{node.component_class}"
+          end
+        end
+      end
+    end
+    
+    def spacing_class(spacing)
+      case spacing
+      when "small", "sm"
+        "gap-2"
+      when "medium", "md"
+        "gap-4"
+      when "large", "lg"
+        "gap-6"
+      else
+        "gap-4"
+      end
+    end
+  end
+end

data/app/components/easy_admin/navbar_component.rb

@@ -160,17 +160,28 @@ module EasyAdmin
           data: { dropdown_target: "menu" }
         ) do
           div(class: "py-1") do
-            render_menu_item("Sign out", logout_icon, "#", "text-red-600 hover:bg-red-50")
+            render_menu_item("Settings", settings_menu_icon, EasyAdmin::Engine.routes.url_helpers.profile_path, "text-gray-700 hover:bg-gray-100")
+            render_menu_item("Sign out", logout_icon, EasyAdmin::Engine.routes.url_helpers.destroy_admin_user_session_path, "text-red-600 hover:bg-red-50", method: :delete)
           end
         end
       end
     end
 
-    def render_menu_item(label, icon_svg, url, extra_classes = "text-gray-700 hover:bg-gray-100")
-      a(
+    def render_menu_item(label, icon_svg, url, extra_classes = "text-gray-700 hover:bg-gray-100", method: :get)
+      link_options = {
         href: url,
         class: "block px-4 py-2 text-sm #{extra_classes}"
-      ) do
+      }
+      
+      # Add method and confirmation for delete operations
+      if method == :delete
+        link_options[:data] = { 
+          turbo_method: :delete,
+          turbo_confirm: "Are you sure you want to sign out?"
+        }
+      end
+      
+      a(**link_options) do
         div(class: "flex items-center space-x-2") do
           unsafe_raw(icon_svg)
           span { label }
@@ -219,6 +230,10 @@ module EasyAdmin
       '<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>'
     end
 
+    def settings_menu_icon
+      '<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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>'
+    end
+
     def logout_icon
       '<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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>'
     end

data/app/components/easy_admin/permissions/user_role_permissions_component.rb

@@ -14,8 +14,6 @@ module EasyAdmin
         # Get actual permissions from permissions_cache
         @user_permissions = get_user_permissions_from_cache(user)
         @available_resources = EasyAdmin::Permissions.available_resources
-        
-        Rails.logger.debug "UserRolePermissionsComponent: user=#{@user&.id}, role=#{@current_role&.name}, cached_permissions=#{@user_permissions.size}"
       end
 
       def view_template
@@ -192,4 +190,4 @@ module EasyAdmin
       end
     end
   end
-end
+end

data/app/components/easy_admin/profile/change_password_modal_component.rb

@@ -0,0 +1,75 @@
+module EasyAdmin
+  module Profile
+    class ChangePasswordModalComponent < BaseComponent
+      def initialize(user:)
+        @user = user
+      end
+      
+      def view_template
+        div do
+          p(class: "text-sm text-gray-600 mb-6") { "Update your password to keep your account secure" }
+          
+          form(action: EasyAdmin::Engine.routes.url_helpers.update_password_path, method: :patch, data: { turbo_frame: "_top" }) do
+            input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token) if helpers.respond_to?(:form_authenticity_token)
+            input(type: "hidden", name: "_method", value: "patch")
+            
+            div(class: "space-y-4") do
+              # Current Password
+              div do
+                label(for: "admin_user_current_password", class: "block text-sm font-medium text-gray-700 mb-2") { "Current Password" }
+                input(
+                  type: "password",
+                  name: "admin_user[current_password]",
+                  id: "admin_user_current_password",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                  placeholder: "Enter current password",
+                  required: true
+                )
+              end
+              
+              # New Password
+              div do
+                label(for: "admin_user_password", class: "block text-sm font-medium text-gray-700 mb-2") { "New Password" }
+                input(
+                  type: "password",
+                  name: "admin_user[password]",
+                  id: "admin_user_password",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                  placeholder: "Enter new password",
+                  required: true
+                )
+              end
+              
+              # Confirm Password
+              div do
+                label(for: "admin_user_password_confirmation", class: "block text-sm font-medium text-gray-700 mb-2") { "Confirm New Password" }
+                input(
+                  type: "password",
+                  name: "admin_user[password_confirmation]",
+                  id: "admin_user_password_confirmation",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                  placeholder: "Confirm new password",
+                  required: true
+                )
+              end
+              
+              # Submit button
+              div(class: "flex space-x-3 pt-4") do
+                input(
+                  type: "submit",
+                  value: "Update Password",
+                  class: "flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors cursor-pointer"
+                )
+                button(
+                  type: "button",
+                  class: "flex-1 bg-gray-300 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-400 transition-colors",
+                  data: { action: "click->modal#close" }
+                ) { "Cancel" }
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end