easy-admin-rails 0.1.0

data/app/components/easy_admin/infinite_scroll_component.rb

@@ -0,0 +1,82 @@
+module EasyAdmin
+  class InfiniteScrollComponent < Phlex::HTML
+    def initialize(pagy:, resource_class:, current_params: {}, current_path:)
+      @pagy = pagy
+      @resource_class = resource_class
+      @current_params = current_params
+      @current_path = current_path
+    end
+
+    def view_template
+      div(
+        id: "infinite-scroll-container",
+        class: "infinite-scroll-container mt-6",
+        data: {
+          controller: "infinite-scroll",
+          infinite_scroll_url_value: next_page_url,
+          infinite_scroll_has_more_value: has_more_pages?
+        }
+      ) do
+        div(
+          class: "infinite-scroll-loading bg-gray-50 border border-gray-200 rounded-lg p-6 text-center hidden",
+          data: { infinite_scroll_target: "loading" }
+        ) do
+          div(class: "loading-spinner mb-3") do
+            div(class: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto")
+          end
+          div(class: "text-gray-600 text-sm font-medium mb-1") { "Loading more #{@resource_class.title.downcase}..." }
+          div(class: "text-gray-500 text-xs") { "Scroll down or click 'Load More' to see additional results" }
+        end
+
+        # "Load More" button - simple and clean
+        if has_more_pages?
+          div(
+            class: "infinite-scroll-load-more mt-6 text-center",
+            data: { infinite_scroll_target: "loadMore" }
+          ) do
+            a(
+              href: next_page_url,
+              class: "inline-flex items-center justify-center px-8 py-3 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 transition-colors duration-200",
+              data: { action: "click->infinite-scroll#loadMore" }
+            ) do
+              span { "Load More" }
+            end
+          end
+        end
+
+        # End message when no more pages - always show for infinite scroll
+        unless has_more_pages?
+          div(
+            class: "infinite-scroll-end mt-6 text-center bg-gray-50 border border-gray-200 rounded-lg p-6",
+            data: { infinite_scroll_target: "end" }
+          ) do
+            div(class: "mb-3") do
+              div(class: "w-12 h-12 mx-auto bg-gray-200 rounded-full flex items-center justify-center mb-3") do
+                unsafe_raw '<svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                </svg>'
+              end
+            end
+            div(class: "text-gray-700 font-medium mb-1") { "All records loaded" }
+            div(class: "text-gray-400 text-xs") { "You've reached the end of the list" }
+          end
+        end
+      end
+    end
+
+    private
+
+    def has_more_pages?
+      @pagy.next.present?
+    end
+
+    def next_page_url
+      return "" unless has_more_pages?
+      
+      # Build URL with current params plus next page
+      # Use pagy.next which gives us the correct next page number
+      url_params = @current_params.merge(page: @pagy.next)
+      "#{@current_path}?#{url_params.to_query}"
+    end
+  end
+end

data/app/components/easy_admin/lazy_chart_card_component.rb

@@ -0,0 +1,128 @@
+module EasyAdmin
+  class LazyChartCardComponent < Phlex::HTML
+    def initialize(chart_config:, record:)
+      @chart_config = chart_config
+      @record = record
+    end
+
+    def view_template
+      div(class: @chart_config[:css_classes]) do
+        if @chart_config[:title]
+          div(class: "card-header") do
+            h5(class: "card-title") { @chart_config[:title] }
+          end
+        end
+        
+        div(class: "card-body") do
+          div(
+            id: chart_id,
+            data: {
+              controller: "chart",
+              chart_type_value: @chart_config[:chart_type],
+              chart_height_value: @chart_config[:height],
+              chart_config_value: chart_data.to_json,
+              chart_data_source_value: @chart_config[:data_source]
+            }
+          )
+        end
+      end
+    end
+
+    private
+
+    def chart_id
+      "chart-#{@chart_config.object_id}"
+    end
+
+    def chart_data
+      base_config = @chart_config[:config] || {}
+      
+      # If data_source is specified, fetch data dynamically
+      if @chart_config[:data_source]
+        dynamic_data = fetch_chart_data(@chart_config[:data_source])
+        base_config.merge(dynamic_data)
+      else
+        base_config
+      end
+    end
+
+    def fetch_chart_data(data_source)
+      case data_source
+      when Symbol
+        # Call method on record
+        @record.public_send(data_source) if @record.respond_to?(data_source)
+      when Proc
+        # Execute proc with record context
+        data_source.call(@record)
+      when String
+        # Treat as association or method name
+        if @record.respond_to?(data_source)
+          process_association_data(@record.public_send(data_source))
+        end
+      else
+        {}
+      end || {}
+    end
+
+    def process_association_data(data)
+      case data
+      when ActiveRecord::Relation, Array
+        # Process collection data for charts
+        case @chart_config[:chart_type]
+        when :pie, :donut
+          process_pie_data(data)
+        when :line, :area
+          process_time_series_data(data)
+        when :bar, :column
+          process_category_data(data)
+        else
+          { series: data.count }
+        end
+      else
+        { series: [data.to_i] }
+      end
+    end
+
+    def process_pie_data(data)
+      if data.respond_to?(:group)
+        grouped = data.group(:status).count # Example grouping
+        {
+          series: grouped.values,
+          labels: grouped.keys.map(&:humanize)
+        }
+      else
+        { series: [data.count], labels: ["Total"] }
+      end
+    end
+
+    def process_time_series_data(data)
+      if data.respond_to?(:group_by_day)
+        daily_data = data.group_by_day(:created_at).count
+        {
+          series: [{
+            name: @chart_config[:title] || "Data",
+            data: daily_data.values
+          }],
+          categories: daily_data.keys.map { |date| date.strftime("%b %d") }
+        }
+      else
+        { series: [{ name: "Data", data: [data.count] }] }
+      end
+    end
+
+    def process_category_data(data)
+      if data.respond_to?(:group)
+        grouped = data.group(:category).count # Example grouping
+        {
+          series: [{
+            name: @chart_config[:title] || "Count",
+            data: grouped.values
+          }],
+          categories: grouped.keys.map(&:humanize)
+        }
+      else
+        { series: [{ name: "Total", data: [data.count] }] }
+      end
+    end
+  end
+end

data/app/components/easy_admin/lazy_metric_card_component.rb

@@ -0,0 +1,76 @@
+module EasyAdmin
+  class LazyMetricCardComponent < Phlex::HTML
+    def initialize(metric_config:, record:)
+      @metric_config = metric_config
+      @record = record
+    end
+
+    def view_template
+      div(class: @metric_config[:css_classes]) do
+        div(class: "card-body") do
+          div(class: "counter-status d-flex md-mb-0") do
+            div(class: "counter-icon bg-#{@metric_config[:color]}-transparent") do
+              if @metric_config[:icon]
+                unsafe_raw "<i class=\"#{@metric_config[:icon]} text-#{@metric_config[:color]}\"></i>"
+              end
+            end
+            
+            div(class: "ms-auto") do
+              h5(class: "fs-13") { @metric_config[:title] }
+              h2(class: "mb-0 fs-22 mb-1 mt-1") do
+                render_metric_value
+              end
+              
+              if @metric_config[:trend]
+                p(class: "text-muted mb-0 fs-11") do
+                  trend_icon = trend_positive?(@metric_config[:trend]) ? "si si-arrow-up-circle text-success" : "si si-arrow-down-circle text-danger"
+                  unsafe_raw "<i class=\"#{trend_icon} me-1\"></i>#{@metric_config[:trend]}"
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def render_metric_value
+      case @metric_config[:value]
+      when Symbol
+        # Dynamic value from record
+        value = @record.public_send(@metric_config[:value])
+        format_metric_value(value)
+      when Proc
+        # Execute proc with record context
+        value = @metric_config[:value].call(@record)
+        format_metric_value(value)
+      else
+        # Static value
+        format_metric_value(@metric_config[:value])
+      end
+    end
+
+    def format_metric_value(value)
+      case @metric_config[:format]
+      when :currency
+        "$#{number_with_delimiter(value)}"
+      when :percentage
+        "#{value}%"
+      when :number
+        number_with_delimiter(value)
+      else
+        value.to_s
+      end
+    end
+
+    def trend_positive?(trend_text)
+      positive_words = %w[increase up growth positive gain]
+      positive_words.any? { |word| trend_text.downcase.include?(word) }
+    end
+
+    def number_with_delimiter(value)
+      value.to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse
+    end
+  end
+end

data/app/components/easy_admin/modal_frame_component.rb

@@ -0,0 +1,26 @@
+module EasyAdmin
+  class ModalFrameComponent < BaseComponent
+    def view_template
+      # Modal backdrop
+      div(
+        id: "modal-backdrop",
+        class: "fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 opacity-0 transition-opacity duration-300",
+        style: "display: none;",
+        data: { 
+          controller: "modal",
+          action: "click->modal#closeOnBackdrop"
+        }
+      ) do
+        div(class: "relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 xl:w-2/5 shadow-lg rounded-md bg-white") do
+          # Modal content will be loaded here via turbo-frame
+          turbo_frame(id: "modal") do
+            div(class: "text-center p-8") do
+              div(class: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto") { }
+              p(class: "mt-4 text-gray-500") { "Loading..." }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/navbar_component.rb

@@ -0,0 +1,226 @@
+module EasyAdmin
+  class NavbarComponent < Phlex::HTML
+    def initialize(page_title: "Dashboard", breadcrumbs: nil, current_user: nil)
+      @page_title = page_title
+      @breadcrumbs = breadcrumbs
+      @current_user = current_user
+    end
+
+    def view_template
+      header(
+        class: "bg-white border-b border-gray-200 px-6 py-4 lg:ml-64 transition-all duration-300 fixed top-0 right-0 left-0 z-30",
+        data: { 
+          controller: "navbar-scroll",
+          navbar_scroll_target: "navbar"
+        }
+      ) do
+        div(class: "flex items-center justify-between") do
+          # Left side - Sidebar toggle + Page title and breadcrumbs
+          render_left_section
+          
+          # Right side - Actions and user menu
+          render_right_section
+        end
+      end
+    end
+
+    private
+
+    def render_left_section
+      div(class: "flex items-center space-x-4") do
+        # Sidebar toggle button (desktop)
+        button(
+          class: "hidden lg:block p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+          title: "Toggle sidebar",
+          data: { action: "click->sidebar#toggle" }
+        ) do
+          unsafe_raw('<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>')
+        end
+
+        div(class: "flex items-center space-x-3") do
+          h1(
+            class: "hidden md:block text-xl font-semibold text-gray-900 transition-opacity duration-300",
+            data: { navbar_scroll_target: "content" }
+          ) { @page_title }
+          
+          if @breadcrumbs&.any?
+            nav(
+              class: "hidden md:flex transition-opacity duration-300", 
+              aria_label: "Breadcrumb",
+              data: { navbar_scroll_target: "content" }
+            ) do
+              ol(class: "flex items-center space-x-2 text-sm text-gray-500") do
+                @breadcrumbs.each_with_index do |crumb, index|
+                  li do
+                    if index > 0
+                      span(class: "mx-2 text-gray-400") { "/" }
+                    end
+                    
+                    if crumb[:url]
+                      a(href: crumb[:url], class: "hover:text-gray-700") { crumb[:label] }
+                    else
+                      span(class: "text-gray-900") { crumb[:label] }
+                    end
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    def render_right_section
+      div(class: "flex items-center space-x-4") do
+        # Notifications button
+        div(
+          class: "transition-opacity duration-300",
+          data: { navbar_scroll_target: "content" }
+        ) do
+          render_icon_button("notifications", notification_icon)
+        end
+        
+        # Search button
+        div(
+          class: "transition-opacity duration-300",
+          data: { navbar_scroll_target: "content" }
+        ) do
+          render_icon_button("search", search_icon)
+        end
+        
+        # Settings button - only if global_settings enabled and Flipper available
+        if settings_enabled?
+          div(
+            class: "transition-opacity duration-300",
+            data: { navbar_scroll_target: "content" }
+          ) do
+            render_settings_button
+          end
+        end
+        
+        # User menu dropdown - only hide the text part
+        render_user_menu
+      end
+    end
+
+    def render_icon_button(name, icon_svg)
+      button(
+        class: "p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+        title: name.capitalize
+      ) do
+        unsafe_raw(icon_svg)
+      end
+    end
+
+    def render_settings_button
+      button(
+        class: "p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+        title: "Settings",
+        data: { 
+          controller: "event-emitter",
+          event_emitter_event_value: "settings:open",
+          action: "click->event-emitter#emit"
+        }
+      ) do
+        unsafe_raw(settings_icon)
+      end
+    end
+
+    def render_user_menu
+      div(class: "relative", data: { controller: "dropdown" }) do
+        # User menu trigger
+        button(
+          class: "flex items-center space-x-3 p-2 text-sm bg-white rounded-lg hover:bg-gray-50 focus:outline-none transition-all duration-300",
+          data: {
+            action: "click->dropdown#toggle",
+            dropdown_target: "trigger"
+          }
+        ) do
+          # User avatar
+          div(class: "w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center") do
+            span(class: "text-white font-medium text-sm") { user_initials }
+          end
+          
+          # User info (hidden on mobile and when scrolled)
+          div(
+            class: "hidden md:block text-left transition-opacity duration-300",
+            data: { navbar_scroll_target: "content" }
+          ) do
+            div(class: "font-medium text-gray-900") { user_name }
+            div(class: "text-xs text-gray-500") { user_role }
+          end
+          
+          # Dropdown chevron
+          unsafe_raw(chevron_down_icon)
+        end
+
+        # Dropdown menu
+        div(
+          class: "absolute right-0 z-10 mt-2 w-48 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none hidden",
+          data: { dropdown_target: "menu" }
+        ) do
+          div(class: "py-1") do
+            render_menu_item("Sign out", logout_icon, "#", "text-red-600 hover:bg-red-50")
+          end
+        end
+      end
+    end
+
+    def render_menu_item(label, icon_svg, url, extra_classes = "text-gray-700 hover:bg-gray-100")
+      a(
+        href: url,
+        class: "block px-4 py-2 text-sm #{extra_classes}"
+      ) do
+        div(class: "flex items-center space-x-2") do
+          unsafe_raw(icon_svg)
+          span { label }
+        end
+      end
+    end
+
+    def user_initials
+      if @current_user&.respond_to?(:name)
+        @current_user.name.split.map(&:first).join.upcase[0..1]
+      else
+        "A"
+      end
+    end
+
+    def user_name
+      @current_user&.respond_to?(:name) ? @current_user.name : "Admin User"
+    end
+
+    def user_role
+      @current_user&.respond_to?(:role) ? @current_user.role.capitalize : "Administrator"
+    end
+
+    # SVG Icons
+    def notification_icon
+      '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5-5v5zM10.06 9.06A4 4 0 0 1 14 5.5a4 4 0 0 1 4 4 4 4 0 0 1-.44 1.81l3.94 3.94L20 16l-3.5-3.5A8 8 0 0 1 4 10a8 8 0 0 1 6.06-.94z"/></svg>'
+    end
+
+    def search_icon
+      '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>'
+    end
+
+    def settings_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 chevron_down_icon
+      '<svg class="w-4 h-4 text-gray-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-dropdown-target="chevron"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>'
+    end
+
+    def profile_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="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 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
+
+    def settings_enabled?
+      EasyAdmin.configuration.global_settings && defined?(Flipper)
+    end
+  end
+end

data/app/components/easy_admin/notification_component.rb

@@ -0,0 +1,83 @@
+module EasyAdmin
+  class NotificationComponent < Phlex::HTML
+    def initialize(type:, message:, title: nil, duration: 4000)
+      @type = type
+      @message = message
+      @title = title
+      @duration = duration
+    end
+
+    def view_template
+      unsafe_raw("<turbo-frame id=\"notifications\">")
+      div(
+        class: "fixed top-4 right-4 max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 transform translate-x-full opacity-0 transition-all duration-300 ease-in-out z-50",
+        data: {
+          controller: "notification",
+          notification_type_value: @type,
+          notification_message_value: @message,
+          notification_duration_value: @duration
+        }
+      ) do
+        div(class: "p-4") do
+          div(class: "flex items-start") do
+            div(class: "flex-shrink-0") do
+              render_icon
+            end
+            
+            div(class: "ml-3 w-0 flex-1") do
+              if @title
+                p(class: "text-sm font-medium text-gray-900") { @title }
+              end
+              
+              p(class: notification_text_classes) { @message }
+            end
+            
+            div(class: "ml-4 flex-shrink-0 flex") do
+              button(
+                type: "button",
+                class: "bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+                data: { action: "click->notification#close" }
+              ) do
+                span(class: "sr-only") { "Close" }
+                unsafe_raw('<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>')
+              end
+            end
+          end
+        end
+      end
+      unsafe_raw("</turbo-frame>")
+    end
+
+    private
+
+    def render_icon
+      case @type.to_sym
+      when :success
+        div(class: "w-6 h-6 text-green-400") do
+          unsafe_raw('<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>')
+        end
+      when :error
+        div(class: "w-6 h-6 text-red-400") do
+          unsafe_raw('<svg 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>')
+        end
+      when :warning
+        div(class: "w-6 h-6 text-yellow-400") do
+          unsafe_raw('<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>')
+        end
+      else # info
+        div(class: "w-6 h-6 text-blue-400") do
+          unsafe_raw('<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>')
+        end
+      end
+    end
+
+    def notification_text_classes
+      base_classes = "text-sm"
+      if @title
+        "#{base_classes} text-gray-500"
+      else
+        "#{base_classes} text-gray-900"
+      end
+    end
+  end
+end