easy-admin-rails 0.1.0

data/app/components/easy_admin/combined_filters_component.rb

@@ -0,0 +1,232 @@
+module EasyAdmin
+  class CombinedFiltersComponent < Phlex::HTML
+    def initialize(resource_class:, current_params: {}, search_params: {}, current_period: nil)
+      @resource_class = resource_class
+      @current_params = current_params
+      @search_params = search_params || {}
+      @current_period = current_period
+    end
+
+    def view_template
+      return unless has_any_filters?
+
+      div(
+        id: "combined-filters",
+        class: "bg-white shadow rounded-lg mb-6",
+        data: { controller: "collapsible-filters" }
+      ) do
+        # Header with collapse toggle
+        div(
+          class: "px-6 py-4 border-b border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors duration-150",
+          data: { action: "click->collapsible-filters#toggle" }
+        ) do
+          div(class: "flex items-center justify-between") do
+            div(class: "flex items-center space-x-2") do
+              h3(class: "text-lg font-medium text-gray-900") { "Filters" }
+              if has_active_filters?
+                span(class: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800") do
+                  active_filter_count.to_s
+                end
+              end
+            end
+            
+            # Collapse/Expand icon
+            div(data: { collapsible_filters_target: "icon" }) do
+              unsafe_raw '<svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+              </svg>'
+            end
+          end
+        end
+
+        # Collapsible content
+        div(
+          class: "transition-all duration-300 ease-in-out",
+          data: { collapsible_filters_target: "content" }
+        ) do
+          form(
+            method: "get",
+            action: route_helper.resources_path(@resource_class.route_key),
+            class: "space-y-4"
+          ) do
+            # Preserve existing params (except filter params)
+            preserve_params
+
+            # Field Filters (Advanced)
+            if @resource_class.filterable_fields.any?
+              div(class: "px-6 pt-4") do
+                label(class: "block text-sm font-medium text-gray-700 mb-3") { "Advanced Filters" }
+                div(class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4") do
+                  @resource_class.filterable_fields.each do |field|
+                    render_filter_field(field)
+                  end
+                end
+              end
+            end
+
+            # Quick Period Filters
+            if has_quick_filters?
+              div(class: "px-6 #{@resource_class.filterable_fields.any? ? 'pb-4' : 'py-4'}") do
+                div(class: "mb-3") do
+                  label(class: "block text-sm font-medium text-gray-700 mb-2") { "Quick Filters" }
+                  render_quick_filters
+                end
+              end
+            end
+
+            # Action buttons
+            div(class: "px-6 py-4 bg-gray-50 border-t border-gray-200") do
+              div(class: "flex items-center justify-between") do
+                # Clear filters button
+                if has_active_filters?
+                  a(
+                    href: build_clear_filters_url,
+                    class: "text-sm text-red-600 hover:text-red-800 font-medium"
+                  ) { "Clear all filters" }
+                else
+                  div # Empty div for spacing
+                end
+
+                # Apply button
+                button(
+                  type: "submit",
+                  class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                ) do
+                  unsafe_raw '<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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707v6.586l-4-4V9.414a1 1 0 00-.293-.707L3.293 6.293A1 1 0 013 5.586V4z"></path>
+                  </svg>'
+                  span { "Apply Filters" }
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def has_any_filters?
+      has_quick_filters? || @resource_class.filterable_fields.any?
+    end
+
+    def has_quick_filters?
+      true # We always show period filters
+    end
+
+    def route_helper
+      @route_helper ||= EasyAdmin::Engine.routes.url_helpers
+    end
+
+    def preserve_params
+      # Preserve non-filter params (scope, sort, direction, page, period)
+      preserved_params = @current_params.except(:q)
+      preserved_params.each do |key, value|
+        input(type: "hidden", name: key, value: value)
+      end
+    end
+
+    def render_quick_filters
+      div(class: "flex flex-wrap gap-2") do
+        render_quick_filter_link("All Time", nil)
+        render_quick_filter_link("Today", "today")
+        render_quick_filter_link("Last 7 Days", "7d")
+        render_quick_filter_link("Last 30 Days", "30d")
+        render_quick_filter_link("Last 90 Days", "90d")
+        render_quick_filter_link("Last Year", "1y")
+      end
+    end
+
+    def render_quick_filter_link(label, period)
+      # Check if active - nil period means "All Time" is active when @current_period is blank
+      active = if period.nil?
+                 @current_period.blank?
+               else
+                 @current_period.to_s == period.to_s
+               end
+      css_classes = if active
+                     "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 bg-blue-600 text-white shadow-sm"
+                   else
+                     "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"
+                   end
+
+      a(href: build_quick_filter_url(period), class: css_classes, data: { turbo_prefetch: "false" }) { label }
+    end
+
+
+    def build_quick_filter_url(period)
+      current_params = @current_params.dup
+      
+      # Set or remove period parameter
+      if period
+        current_params[:period] = period
+      else
+        current_params.delete(:period)
+      end
+      
+      base_url = route_helper.resources_path(@resource_class.route_key)
+      query_string = current_params.to_query
+      query_string.present? ? "#{base_url}?#{query_string}" : base_url
+    end
+
+    def render_filter_field(field)
+      component_class = filter_component_for_field(field)
+      render component_class.new(field: field, search_params: @search_params)
+    end
+
+    def filter_component_for_field(field)
+      case field[:type]
+      when :string, :email, :text
+        EasyAdmin::Fields::Index::Filters::StringComponent
+      when :boolean
+        EasyAdmin::Fields::Index::Filters::BooleanComponent
+      when :select, :belongs_to
+        EasyAdmin::Fields::Index::Filters::SelectComponent
+      when :number, :integer
+        EasyAdmin::Fields::Index::Filters::NumberComponent
+      when :date, :datetime
+        EasyAdmin::Fields::Index::Filters::DateComponent
+      else
+        EasyAdmin::Fields::Index::Filters::StringComponent
+      end
+    end
+
+    def has_active_filters?
+      has_active_search_params? || @current_period.present?
+    end
+
+    def has_active_search_params?
+      return false unless @search_params.present?
+      
+      @search_params.each do |key, value|
+        return true if value.present?
+      end
+      
+      false
+    end
+
+    def active_filter_count
+      count = 0
+      count += 1 if @current_period.present?
+      
+      if @search_params.present?
+        @search_params.each do |key, value|
+          count += 1 if value.present?
+        end
+      end
+      
+      count
+    end
+
+    def build_clear_filters_url
+      base_url = route_helper.resources_path(@resource_class.route_key)
+      clear_params = @current_params.except(:q, :period)
+      
+      if clear_params.present? && !clear_params.empty?
+        "#{base_url}?#{clear_params.to_query}"
+      else
+        base_url
+      end
+    end
+  end
+end

data/app/components/easy_admin/confirmation_modal_component.rb

@@ -0,0 +1,61 @@
+module EasyAdmin
+  class ConfirmationModalComponent < BaseComponent
+    def initialize(title:, message:, confirm_text: "Confirm", cancel_text: "Cancel", danger: false)
+      @title = title
+      @message = message
+      @confirm_text = confirm_text
+      @cancel_text = cancel_text
+      @danger = danger
+    end
+    
+    def view_template
+      div(
+        id: "confirmation-modal",
+        class: "fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50",
+        data: { 
+          controller: "confirmation-modal",
+          action: "click->confirmation-modal#clickOutside"
+        }
+      ) do
+        div(
+          class: "relative top-20 mx-auto p-5 border w-11/12 max-w-md shadow-lg rounded-md bg-white",
+          data: { confirmation_modal_target: "modal" }
+        ) do
+          # Header
+          div(class: "flex items-center justify-between pb-4 mb-4 border-b border-gray-200") do
+            h3(class: "text-lg font-semibold text-gray-900") { @title }
+            button(
+              type: "button",
+              class: "text-gray-400 hover:text-gray-600 text-xl",
+              data: { action: "click->confirmation-modal#cancel" }
+            ) { "×" }
+          end
+          
+          # Message
+          p(class: "text-sm text-gray-600 mb-4") { @message }
+          
+          # Action buttons
+          div(class: "flex justify-end space-x-3 pt-4 border-t border-gray-200 mt-4") do
+            button(
+              type: "button",
+              class: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50",
+              data: { action: "click->confirmation-modal#cancel" }
+            ) { @cancel_text }
+            
+            confirm_button_class = if @danger
+              "px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700"
+            else
+              "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
+            end
+            
+            button(
+              type: "button",
+              class: confirm_button_class,
+              data: { action: "click->confirmation-modal#confirm" }
+            ) { @confirm_text }
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/context_menu_component.rb

@@ -0,0 +1,161 @@
+module EasyAdmin
+  class ContextMenuComponent < BaseComponent
+    def initialize(record:, resource_class:, actions:)
+      @record = record
+      @resource_class = resource_class
+      @actions = actions
+    end
+    
+    def view_template
+      div(class: "context-menu bg-white rounded-lg shadow-lg border border-gray-200 py-1 min-w-48") do
+        # Default actions
+        render_default_actions
+        
+        # Custom row actions
+        if @actions.any?
+          render_divider
+          render_custom_actions
+        end
+      end
+    end
+    
+    private
+    
+    def render_default_actions
+      # View action
+      a(
+        href: resource_show_url,
+        class: "context-menu-item w-full text-left block",
+        data: { turbo: "false" }
+      ) do
+        div(class: "flex items-center space-x-2") do
+          unsafe_raw <<~SVG
+            <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>
+          SVG
+          span { "View" }
+        end
+      end
+      
+      # Edit action
+      a(
+        href: resource_edit_url,
+        class: "context-menu-item w-full text-left block",
+        data: { turbo: "false" }
+      ) do
+        div(class: "flex items-center space-x-2") do
+          unsafe_raw <<~SVG
+            <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="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>
+          SVG
+          span { "Edit" }
+        end
+      end
+      
+      # Delete action
+      button(
+        type: "button",
+        class: "context-menu-item danger w-full text-left",
+        data: {
+          controller: "row-action",
+          action: "click->row-action#execute",
+          row_action_action_class_value: "EasyAdmin::DeleteAction",
+          row_action_execution_mode_value: "instant",
+          row_action_confirm_value: "Are you sure you want to delete this #{@resource_class.singular_title.downcase}?",
+          row_action_record_id_value: @record.id,
+          row_action_resource_name_value: @resource_class.route_key
+        }
+      ) do
+        div(class: "flex items-center space-x-2") do
+          unsafe_raw <<~SVG
+            <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="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>
+          SVG
+          span { "Delete" }
+        end
+      end
+    end
+    
+    def render_custom_actions
+      @actions.each do |action_data|
+        action_instance = action_data[:instance]
+        action_class = action_data[:class]
+        
+        button(
+          type: "button",
+          class: "context-menu-item w-full text-left #{action_style_class(action_instance)}",
+          data: {
+            controller: "row-action",
+            action: "click->row-action#execute",
+            row_action_action_class_value: action_class.name,
+            row_action_execution_mode_value: action_instance.class.execution_mode.to_s,
+            row_action_confirm_value: action_instance.class.confirm_message,
+            row_action_record_id_value: @record.id,
+            row_action_resource_name_value: @resource_class.route_key
+          }
+        ) do
+          div(class: "flex items-center space-x-2") do
+            if action_instance.class.icon
+              span(class: "text-base") { action_instance.class.icon }
+            else
+              render_default_icon(action_instance)
+            end
+            span { action_instance.class.label }
+          end
+        end
+      end
+    end
+    
+    def render_divider
+      div(class: "context-menu-divider")
+    end
+    
+    def action_style_class(action_instance)
+      case action_instance.class.style
+      when :danger
+        "danger"
+      when :warning
+        "text-yellow-600 hover:bg-yellow-50 hover:text-yellow-700"
+      when :success
+        "text-green-600 hover:bg-green-50 hover:text-green-700"
+      else
+        ""
+      end
+    end
+    
+    def render_default_icon(action_instance)
+      case action_instance.class.style
+      when :danger
+        unsafe_raw <<~SVG
+          <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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+          </svg>
+        SVG
+      when :success
+        unsafe_raw <<~SVG
+          <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        SVG
+      else
+        unsafe_raw <<~SVG
+          <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="M13 10V3L4 14h7v7l9-11h-7z"/>
+          </svg>
+        SVG
+      end
+    end
+    
+    def resource_show_url
+      easy_admin_url_helpers.resource_path(@resource_class.route_key, @record)
+    end
+    
+    def resource_edit_url
+      easy_admin_url_helpers.edit_resource_path(@resource_class.route_key, @record)
+    end
+  end
+end

data/app/components/easy_admin/dashboards/base_card_component.rb

@@ -0,0 +1,152 @@
+module EasyAdmin
+  module Dashboards
+    class BaseCardComponent < EasyAdmin::BaseComponent
+      attr_reader :card, :dashboard_class, :data, :request_params
+
+      def initialize(card:, dashboard_class:, data: nil, request_params: nil)
+        @card = card
+        @dashboard_class = dashboard_class
+        @data = data
+        @request_params = request_params || ActionController::Parameters.new.permit!
+      end
+
+      def view_template
+        div(
+          class: card_classes,
+          role: "region",
+          "aria-labelledby": card_title_id
+        ) do
+          render_card_header
+          render_card_body
+          render_card_footer if card[:footer]
+        end
+      end
+
+      private
+
+      def card_classes
+        classes = ["bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"]
+        classes << "flex flex-col" # Ensure flex layout
+        classes << column_span_class
+        classes << row_span_class if card[:rows] > 1
+        classes.join(" ")
+      end
+
+      def column_span_class
+        cols = card[:cols] || 1
+        case cols
+        when 1
+          "col-span-1"
+        when 2
+          "col-span-1 sm:col-span-2"
+        when 3
+          "col-span-1 sm:col-span-2 lg:col-span-3"
+        when 4
+          "col-span-1 sm:col-span-2 lg:col-span-4"
+        else
+          "col-span-1"
+        end
+      end
+
+      def row_span_class
+        "row-span-#{card[:rows]}"
+      end
+
+      def card_title_id
+        "#{card[:name]}_title"
+      end
+
+      def render_card_header
+        div(class: "px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center justify-between") do
+          h2(id: card_title_id, class: "text-lg font-semibold text-gray-900") { plain card[:title] }
+          div(class: "flex items-center space-x-2") do
+            render_card_actions if card[:actions]
+          end
+        end
+      end
+
+      def render_card_body
+        body_classes = card[:type] == :table ? "" : "p-6"
+        div(class: body_classes) do
+          turbo_frame(
+            id: "card_#{card[:name]}",
+            src: card_url,
+            loading: "lazy",
+            data: { controller: "dashboard-card" }
+          ) do
+            render_skeleton
+          end
+        end
+      end
+
+      def render_card_footer
+        div(class: "px-6 py-4 bg-gray-50/30 border-t border-gray-100") do
+          plain card[:footer]
+        end
+      end
+
+      def render_card_actions
+        # Override in subclasses
+      end
+
+      def render_skeleton
+        case card[:type]
+        when :metric
+          render_metric_skeleton
+        when :chart
+          render_chart_skeleton
+        when :table
+          render_table_skeleton
+        else
+          render_default_skeleton
+        end
+      end
+
+      def render_metric_skeleton
+        div(class: "animate-pulse") do
+          div(class: "h-8 bg-gray-200 rounded mb-2")
+          div(class: "h-4 bg-gray-200 rounded w-3/5")
+        end
+      end
+
+      def render_chart_skeleton
+        div(class: "animate-pulse") do
+          div(class: "h-32 bg-gray-200 rounded")
+        end
+      end
+
+      def render_table_skeleton
+        div(class: "animate-pulse space-y-3") do
+          div(class: "grid grid-cols-4 gap-4 mb-4") do
+            4.times do
+              div(class: "h-4 bg-gray-200 rounded")
+            end
+          end
+          5.times do
+            div(class: "grid grid-cols-4 gap-4") do
+              4.times do
+                div(class: "h-4 bg-gray-100 rounded")
+              end
+            end
+          end
+        end
+      end
+
+      def render_default_skeleton
+        div(class: "animate-pulse space-y-3") do
+          div(class: "h-6 bg-gray-200 rounded")
+          div(class: "h-4 bg-gray-200 rounded")
+          div(class: "h-4 bg-gray-200 rounded w-4/5")
+        end
+      end
+
+      def card_url
+        easy_admin_url_helpers.dashboards_dashboard_card_path(
+          dashboard_name: dashboard_class.route_key,
+          card_name: card[:name],
+          **request_params.to_h.symbolize_keys
+        )
+      end
+    end
+  end
+end

data/app/components/easy_admin/dashboards/card_error_component.rb

@@ -0,0 +1,23 @@
+module EasyAdmin
+  module Dashboards
+    class CardErrorComponent < BaseComponent
+      def initialize(error:)
+        @error = error
+      end
+
+      def view_template
+        div(class: "p-6 text-center") do
+          div(class: "mb-4") do
+            unsafe_raw <<~SVG
+              <svg class="mx-auto h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+            SVG
+          end
+          div(class: "text-red-600 font-medium mb-2") { "Error loading card" }
+          div(class: "text-sm text-gray-500") { @error }
+        end
+      end
+    end
+  end
+end