easy-admin-rails 0.1.0

data/app/components/easy_admin/dashboards/cards/table_card_component.rb

@@ -0,0 +1,148 @@
+module EasyAdmin
+  module Dashboards
+    module Cards
+      class TableCardComponent < BaseCardComponent
+        private
+
+        def render_card_content
+          div(class: "flex flex-col h-full") do
+            # Table Content
+            div(class: "flex-1 overflow-auto") do
+              if card_data[:rows] && card_data[:rows].any?
+                render_table
+              else
+                render_no_data_state
+              end
+            end
+
+            # Footer
+            if card_data[:show_view_all] && card_data[:view_all_url]
+              render_table_footer
+            end
+          end
+        end
+
+        def render_table
+          table(class: "min-w-full divide-y divide-gray-200") do
+            # Table Header
+            if card_data[:headers]
+              thead(class: "bg-gray-50") do
+                tr do
+                  card_data[:headers].each do |header|
+                    th(
+                      class: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider",
+                      scope: "col"
+                    ) { header }
+                  end
+                end
+              end
+            end
+
+            # Table Body
+            tbody(class: "bg-white divide-y divide-gray-200") do
+              card_data[:rows].each_with_index do |row, index|
+                tr(class: index.even? ? "bg-white" : "bg-gray-50") do
+                  row.each do |cell|
+                    td(class: "px-6 py-4 whitespace-nowrap text-sm") do
+                      render_table_cell(cell)
+                    end
+                  end
+                end
+              end
+            end
+          end
+        end
+
+        def render_table_cell(cell)
+          case cell
+          when Hash
+            case cell[:type]
+            when :link
+              a(
+                href: cell[:url],
+                class: "text-blue-600 hover:text-blue-800 font-medium"
+              ) { cell[:text] }
+            when :badge
+              span(class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium #{badge_classes(cell[:variant])}") do
+                cell[:text]
+              end
+            when :avatar
+              div(class: "flex items-center") do
+                if cell[:image_url]
+                  img(
+                    class: "h-8 w-8 rounded-full",
+                    src: cell[:image_url],
+                    alt: cell[:alt] || ""
+                  )
+                else
+                  div(class: "h-8 w-8 rounded-full bg-gray-300 flex items-center justify-center") do
+                    span(class: "text-xs font-medium text-gray-700") do
+                      cell[:initials] || "?"
+                    end
+                  end
+                end
+                if cell[:text]
+                  span(class: "ml-2 text-gray-900") { cell[:text] }
+                end
+              end
+            when :progress
+              div(class: "w-full bg-gray-200 rounded-full h-2") do
+                div(
+                  class: "bg-blue-600 h-2 rounded-full",
+                  style: "width: #{[cell[:value] || 0, 100].min}%"
+                )
+              end
+            else
+              span(class: "text-gray-900") { cell[:text] || cell.to_s }
+            end
+          else
+            span(class: "text-gray-900") { cell.to_s }
+          end
+        end
+
+        def badge_classes(variant)
+          case variant&.to_s
+          when 'success'
+            "bg-green-100 text-green-800"
+          when 'warning'
+            "bg-yellow-100 text-yellow-800"
+          when 'danger', 'error'
+            "bg-red-100 text-red-800"
+          when 'info'
+            "bg-blue-100 text-blue-800"
+          else
+            "bg-gray-100 text-gray-800"
+          end
+        end
+
+        def render_no_data_state
+          div(class: "flex flex-col items-center justify-center py-8 text-gray-500") do
+            unsafe_raw <<~SVG
+              <svg class="w-12 h-12 mb-4 text-gray-400" 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>
+            SVG
+            p(class: "text-sm") { "No table data available" }
+          end
+        end
+
+        def render_table_footer
+          div(class: "px-6 py-3 bg-gray-50 border-t border-gray-200") do
+            div(class: "flex items-center justify-between") do
+              div(class: "text-sm text-gray-700") do
+                if card_data[:total_count] && card_data[:total_count] > 0
+                  "Showing #{card_data[:rows].length} of #{number_with_delimiter(card_data[:total_count])} entries"
+                end
+              end
+              
+              a(
+                href: card_data[:view_all_url],
+                class: "text-sm text-blue-600 hover:text-blue-800 font-medium"
+              ) { "View all" }
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+module EasyAdmin
+  module Dashboards
+    class ChartCardComponent < BaseCardComponent
+      private
+
+      def render_card_actions
+        if card[:chart_type] && card[:allow_chart_type_change]
+          select(class: "text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500", "aria-label": "Chart type") do
+            option("Line", value: "line", selected: card[:chart_type] == :line)
+            option("Area", value: "area", selected: card[:chart_type] == :area)
+            option("Bar", value: "bar", selected: card[:chart_type] == :bar)
+            option("Horizontal Bar", value: "horizontal_bar", selected: card[:chart_type] == :horizontal_bar)
+            option("Pie", value: "pie", selected: card[:chart_type] == :pie)
+            option("Donut", value: "donut", selected: card[:chart_type] == :donut)
+            option("Scatter", value: "scatter", selected: card[:chart_type] == :scatter)
+            option("Bubble", value: "bubble", selected: card[:chart_type] == :bubble)
+            option("Radar", value: "radar", selected: card[:chart_type] == :radar)
+            option("Polar Area", value: "polar_area", selected: card[:chart_type] == :polar_area)
+            option("Mixed", value: "mixed", selected: card[:chart_type] == :mixed)
+          end
+        end
+
+        if card[:time_period_options]
+          select(class: "text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 ml-2", "aria-label": "Time period") do
+            card[:time_period_options].each do |option|
+              option(option[:label], value: option[:value], selected: option[:selected])
+            end
+          end
+        end
+      end
+
+      def render_skeleton
+        div(class: "animate-pulse") do
+          div(class: "bg-gray-200 rounded", style: "height: #{chart_height}px;")
+        end
+      end
+
+      def chart_height
+        base_height = 200
+        card[:rows] > 1 ? base_height * card[:rows] : base_height
+      end
+    end
+  end
+end

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

@@ -0,0 +1,56 @@
+module EasyAdmin
+  module Dashboards
+    class MetricCardComponent < BaseCardComponent
+      def view_template
+        div(
+          class: card_classes,
+          role: "region",
+          "aria-labelledby": card_title_id
+        ) do
+          render_card_header
+          render_card_body
+          render_delta_footer if card[:show_delta]
+        end
+      end
+
+      private
+
+      def render_delta_footer
+        return unless data && data[:delta]
+        
+        div(class: "px-6 py-4 bg-gray-50/30 border-t border-gray-100") do
+          div(class: "flex items-center justify-between") do
+            span(class: delta_classes) do
+              span(class: "text-xs") { plain delta_icon }
+              plain " #{data[:delta]}%"
+            end
+            span(class: "text-xs text-gray-500") do
+              plain "vs #{data[:compare_period] || 'last period'}"
+            end
+          end
+        end
+      end
+
+      def delta_classes
+        base_classes = "inline-flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium"
+        if data[:delta].to_f > 0
+          "#{base_classes} bg-green-100 text-green-800"
+        elsif data[:delta].to_f < 0
+          "#{base_classes} bg-red-100 text-red-800"
+        else
+          "#{base_classes} bg-gray-100 text-gray-600"
+        end
+      end
+
+      def delta_icon
+        if data[:delta].to_f > 0
+          "↗"
+        elsif data[:delta].to_f < 0
+          "↘"  
+        else
+          "→"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,279 @@
+module EasyAdmin
+  module Dashboards
+    class RefreshStreamComponent < BaseComponent
+      def initialize(dashboard_class:, dashboard_instance:, card_name: nil)
+        @dashboard_class = dashboard_class
+        @dashboard_instance = dashboard_instance
+        @card_name = card_name
+      end
+
+      def view_template
+        render EasyAdmin::Turbo::ResponseComponent.new do |s|
+          if @card_name
+            # Refresh specific card
+            refresh_single_card(s, @card_name)
+          else
+            # Refresh all cards
+            @dashboard_class.visible_cards.each do |card|
+              refresh_single_card(s, card[:name])
+            end
+          end
+        end
+      end
+
+      private
+
+      def refresh_single_card(stream, card_name)
+        card = @dashboard_class.find_card(card_name)
+        return unless card
+
+        card_data = @dashboard_instance.card_data(card_name)
+        
+        stream.replace("card_#{card_name}") do
+          render_card_frame(card, card_data)
+        end
+      end
+
+      def render_card_frame(card, card_data)
+        turbo_frame(id: "card_#{card[:name]}") do
+          case card[:type]
+          when :metric
+            render_metric_card(card, card_data)
+          when :chart
+            render_chart_card(card, card_data)
+          when :table
+            render_table_card(card, card_data)
+          else
+            render_default_card(card, card_data)
+          end
+        end
+      end
+
+      def render_metric_card(card, card_data)
+        div(class: "p-6 flex flex-col h-full") do
+          # Main Metric Value with Trend Color
+          div(class: "flex items-start justify-between mb-4") do
+            div(class: "flex-1") do
+              div(class: metric_value_classes(card_data)) do
+                number_with_delimiter(card_data[:value] || 0)
+              end
+              div(class: "text-sm text-gray-600 font-medium") do
+                card[:description] || card[:title]
+              end
+            end
+            
+            # Trend Indicator
+            if card_data[:delta]
+              div(class: trend_indicator_classes(card_data)) do
+                trend_icon(card_data)
+              end
+            end
+          end
+          
+          # Sparkline
+          if card[:show_sparkline] && card_data[:sparkline_data]
+            div(class: "flex-1 mb-4") do
+              render_sparkline(card, card_data)
+            end
+          end
+          
+          # Delta Information
+          if card_data[:delta]
+            div(class: "mt-auto pt-4 border-t border-gray-100") do
+              div(class: "flex items-center justify-between") do
+                span(class: delta_badge_classes(card_data)) do
+                  trend_icon(card_data)
+                  span(class: "ml-1 font-semibold") { "#{card_data[:delta].abs}%" }
+                end
+                span(class: "text-xs text-gray-500") do
+                  "vs #{card_data[:compare_period] || 'last period'}"
+                end
+              end
+            end
+          end
+        end
+      end
+
+      def render_chart_card(card, card_data)
+        div(class: "p-6 flex flex-col h-full") do
+          div(class: "flex-1") do
+            div(
+              class: "w-full bg-gray-50 rounded-lg flex items-center justify-center",
+              style: "height: #{chart_height(card)}px;"
+            ) do
+              if card_data[:chart_data]
+                div(class: "text-gray-600") { "Chart: #{card[:title]}" }
+              else
+                div(class: "text-gray-400") { "No data available" }
+              end
+            end
+          end
+        end
+      end
+
+      def render_table_card(card, card_data)
+        div(class: "overflow-hidden") do
+          if card_data[:rows]&.any?
+            table(class: "min-w-full divide-y divide-gray-200") do
+              # Table header
+              if card_data[:headers]
+                thead(class: "bg-gray-50") do
+                  tr do
+                    card_data[:headers].each do |header|
+                      th(class: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider") do
+                        header
+                      end
+                    end
+                  end
+                end
+              end
+              
+              # Table body
+              tbody(class: "bg-white divide-y divide-gray-200") do
+                card_data[:rows].each do |row|
+                  tr do
+                    row.each do |cell|
+                      td(class: "px-6 py-4 whitespace-nowrap text-sm text-gray-900") do
+                        cell
+                      end
+                    end
+                  end
+                end
+              end
+            end
+          else
+            div(class: "p-6 text-center text-gray-400") do
+              "No data available"
+            end
+          end
+        end
+      end
+
+      def render_default_card(card, card_data)
+        div(class: "p-6") do
+          div(class: "text-gray-600") do
+            card[:title] || "Card content"
+          end
+        end
+      end
+
+      def render_sparkline(card, card_data)
+        svg(viewBox: "0 0 100 30", class: "w-full h-12") do
+          points = sparkline_points(card_data)
+          
+          # Gradient definition
+          defs do
+            linearGradient(id: "sparkline-gradient-#{card[:name]}", x1: "0%", y1: "0%", x2: "0%", y2: "100%") do
+              stop(offset: "0%", style: "stop-color:#{sparkline_color(card_data)};stop-opacity:0.3")
+              stop(offset: "100%", style: "stop-color:#{sparkline_color(card_data)};stop-opacity:0")
+            end
+          end
+          
+          # Line
+          polyline(
+            points: points,
+            stroke: sparkline_color(card_data),
+            stroke_width: "2",
+            fill: "none",
+            class: "drop-shadow-sm"
+          )
+          
+          # Fill area
+          polygon(
+            points: "#{points},100,30 0,30",
+            fill: "url(#sparkline-gradient-#{card[:name]})"
+          )
+        end
+      end
+
+      def chart_height(card)
+        base_height = 200
+        card[:rows] > 1 ? base_height * card[:rows] : base_height
+      end
+
+      # Helper methods
+      def metric_value_classes(card_data)
+        base_classes = "text-3xl font-bold mb-1"
+        if card_data[:delta]
+          case trend_direction(card_data)
+          when :positive
+            "#{base_classes} text-green-600"
+          when :negative  
+            "#{base_classes} text-red-600"
+          else
+            "#{base_classes} text-gray-900"
+          end
+        else
+          "#{base_classes} text-gray-900"
+        end
+      end
+      
+      def trend_indicator_classes(card_data)
+        base_classes = "flex items-center justify-center w-10 h-10 rounded-full"
+        case trend_direction(card_data)
+        when :positive
+          "#{base_classes} bg-green-100 text-green-600"
+        when :negative
+          "#{base_classes} bg-red-100 text-red-600" 
+        else
+          "#{base_classes} bg-gray-100 text-gray-600"
+        end
+      end
+      
+      def delta_badge_classes(card_data)
+        base_classes = "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
+        case trend_direction(card_data)
+        when :positive
+          "#{base_classes} bg-green-100 text-green-800"
+        when :negative
+          "#{base_classes} bg-red-100 text-red-800"
+        else
+          "#{base_classes} bg-gray-100 text-gray-600" 
+        end
+      end
+      
+      def trend_direction(card_data)
+        return :neutral unless card_data[:delta]
+        card_data[:delta].to_f > 0 ? :positive : (card_data[:delta].to_f < 0 ? :negative : :neutral)
+      end
+      
+      def trend_icon(card_data)
+        case trend_direction(card_data)
+        when :positive
+          "↗"
+        when :negative
+          "↘"
+        else
+          "→"
+        end
+      end
+      
+      def sparkline_color(card_data)
+        case trend_direction(card_data)
+        when :positive
+          "#059669" # green-600
+        when :negative
+          "#dc2626" # red-600
+        else
+          "#4f46e5" # indigo-600
+        end
+      end
+      
+      def sparkline_points(card_data)
+        return "" unless card_data[:sparkline_data]&.any?
+        
+        data = card_data[:sparkline_data]
+        max_val = data.map { |d| d[:value] }.max
+        min_val = data.map { |d| d[:value] }.min
+        range = max_val - min_val
+        range = 1 if range == 0
+        
+        data.map.with_index do |point, i|
+          x = i * (100.0 / (data.length - 1))
+          y = 25 - ((point[:value] - min_val) / range.to_f * 20)
+          "#{x},#{y}"
+        end.join(' ')
+      end
+    end
+  end
+end

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

@@ -0,0 +1,163 @@
+module EasyAdmin
+  module Dashboards
+    class ShowComponent < BaseComponent
+    def initialize(dashboard_class:, params: {}, request_path: nil)
+      @dashboard_class = dashboard_class
+      @params = params
+      @request_path = request_path
+    end
+
+    def view_template
+      div(class: "p-3 sm:p-4 md:p-6 max-w-7xl mx-auto") do
+        render_dashboard_header
+        render_dashboard_filters
+        render_dashboard_grid
+        render_dashboard_footer
+      end
+    end
+
+    private
+
+    def render_dashboard_header
+      div(class: "mb-4 sm:mb-6") do
+        div(class: "flex flex-col sm:flex-row sm:items-center sm:justify-between") do
+          div(class: "mb-4 sm:mb-0") do
+            h1(class: "text-xl sm:text-2xl md:text-3xl font-bold text-gray-900") { @dashboard_class.title }
+            p(class: "text-gray-600 text-sm md:text-base mt-1") { "Monitor your key metrics and insights" }
+          end
+          render_header_actions
+        end
+      end
+    end
+
+    def render_header_actions
+      div(class: "flex items-center space-x-2 sm:space-x-3") do
+        # Back to Admin button
+        a(
+          href: EasyAdmin::Engine.routes.url_helpers.root_path,
+          class: "inline-flex items-center px-3 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200"
+        ) do
+          unsafe_raw <<~SVG
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            </svg>
+          SVG
+          span(class: "hidden sm:inline") { "Back to Admin" }
+          span(class: "sm:hidden") { "Back" }
+        end
+
+        # Refresh button
+        button(
+          type: "button",
+          class: "inline-flex items-center px-3 py-2 bg-blue-600 border border-transparent rounded-lg text-sm font-medium text-white hover:bg-blue-700 transition-colors duration-200",
+          data: { action: "click->dashboard#refresh" }
+        ) do
+          unsafe_raw <<~SVG
+            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          SVG
+          span(class: "hidden sm:inline") { "Refresh" }
+        end
+      end
+    end
+
+    def render_dashboard_filters
+      div(class: "bg-white rounded-xl shadow-sm border border-gray-200 mb-4 sm:mb-6") do
+        div(class: "px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-100") do
+          h3(class: "text-sm font-semibold text-gray-900") { "Filters" }
+        end
+        div(class: "p-4 sm:p-6") do
+          render_filters_form
+        end
+      end
+    end
+
+    def render_filters_form
+      form(action: @request_path, method: :get, class: "space-y-4") do
+        div(class: "grid grid-cols-1 md:grid-cols-3 gap-4") do
+          # Date Range
+          div(class: "md:col-span-2") do
+            label(class: "block text-sm font-medium text-gray-700 mb-2") { "Date Range" }
+            div(class: "flex flex-col sm:flex-row sm:items-center gap-2") do
+              render EasyAdmin::DatePickerComponent.new(
+                name: :date_from,
+                value: @params[:date_from],
+                placeholder: "Start date"
+              )
+              span(class: "text-gray-400 text-sm hidden sm:block") { "—" }
+              render EasyAdmin::DatePickerComponent.new(
+                name: :date_to,
+                value: @params[:date_to],
+                placeholder: "End date"
+              )
+            end
+          end
+
+          # Apply Button
+          div(class: "flex items-end") do
+            input(
+              type: "submit",
+              value: "Apply Filters",
+              class: "w-full px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200 cursor-pointer"
+            )
+          end
+        end
+
+        render_quick_ranges
+      end
+    end
+
+    def render_quick_ranges
+      div do
+        label(class: "block text-sm font-medium text-gray-700 mb-2") { "Quick Filters" }
+        div(class: "flex flex-wrap gap-2") do
+          render_quick_range_link("Today", "today")
+          render_quick_range_link("Last 7 Days", "7d")
+          render_quick_range_link("Last 30 Days", "30d")
+          render_quick_range_link("Last 90 Days", "90d")
+          render_quick_range_link("Last Year", "1y")
+        end
+      end
+    end
+
+    def render_quick_range_link(label, period)
+      is_active = @params[:period] == period
+      link_classes = if is_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: "#{@request_path}?period=#{period}",
+        class: link_classes
+      ) { label }
+    end
+
+    def render_dashboard_grid
+      div(
+        class: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6",
+        data: { controller: "dashboard" }
+      ) do
+        @dashboard_class.visible_cards.each do |card|
+          render render_card(card, @dashboard_class, @params)
+        end
+      end
+    end
+
+    def render_dashboard_footer
+      div(class: "mt-8 flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm text-gray-500 border-t border-gray-200 pt-6") do
+        div(class: "flex items-center space-x-4") do
+          span { "Last updated #{time_ago_in_words(Time.current)} ago" }
+          div(class: "w-2 h-2 bg-green-400 rounded-full")
+          span(class: "text-green-600 font-medium") { "Live" }
+        end
+        div(class: "mt-4 sm:mt-0") do
+          a(href: "#", class: "text-blue-600 hover:text-blue-700 font-medium") { "View All Reports" }
+        end
+      end
+    end
+    end
+  end
+end