better_page 2.0.0

data/lib/generators/better_page/templates/view_components/ui/footer_component.rb.tt

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module BetterPage
+  module Ui
+    class FooterComponent < BetterPage::ApplicationViewComponent
+      def initialize(actions: [], info: nil)
+        @actions = actions
+        @info = info
+      end
+
+      attr_reader :actions, :info
+
+      def actions? = actions.any?
+      def info? = info.present?
+
+      def action_classes(style)
+        base = "inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+
+        case style&.to_sym
+        when :primary
+          "#{base} border-transparent text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500"
+        when :secondary
+          "#{base} border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-blue-500"
+        when :danger
+          "#{base} border-transparent text-white bg-red-600 hover:bg-red-700 focus:ring-red-500"
+        else
+          "#{base} border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-blue-500"
+        end
+      end
+    end
+  end
+end

data/lib/generators/better_page/templates/view_components/ui/header_component.html.erb.tt

@@ -0,0 +1,55 @@
+<header class="bg-white shadow rounded-xl p-4">
+  <%% if breadcrumbs? %>
+    <nav class="flex mb-4" aria-label="Breadcrumb">
+      <ol class="inline-flex items-center space-x-1 md:space-x-3">
+        <%% breadcrumbs.each_with_index do |crumb, i| %>
+          <li class="inline-flex items-center">
+            <%% if crumb[:path] %>
+              <%%= link_to crumb[:label], crumb[:path], class: "text-sm text-gray-500 hover:text-gray-700" %>
+            <%% else %>
+              <span class="text-sm font-medium text-gray-500"><%%= crumb[:label] %></span>
+            <%% end %>
+            <%% unless i == breadcrumbs.size - 1 %>
+              <svg class="w-4 h-4 mx-2 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+              </svg>
+            <%% end %>
+          </li>
+        <%% end %>
+      </ol>
+    </nav>
+  <%% end %>
+
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900"><%%= title %></h1>
+      <%% if metadata? %>
+        <div class="mt-1 flex items-center space-x-4">
+          <%% metadata.each do |meta| %>
+            <span class="text-sm text-gray-500">
+              <%% if meta[:icon] %>
+                <span class="mr-1"><%%= meta[:icon] %></span>
+              <%% end %>
+              <%%= meta[:value] %>
+            </span>
+          <%% end %>
+        </div>
+      <%% end %>
+    </div>
+
+    <%% if actions? %>
+      <div class="flex space-x-3">
+        <%% actions.each do |action| %>
+          <%%= link_to action[:path],
+              data: { turbo_method: action[:method], turbo_confirm: action[:confirm] }.compact,
+              class: action_classes(action[:style]) do %>
+            <%% if action[:icon] %>
+              <span class="mr-2"><%%= action[:icon] %></span>
+            <%% end %>
+            <%%= action[:label] %>
+          <%% end %>
+        <%% end %>
+      </div>
+    <%% end %>
+  </div>
+</header>

data/lib/generators/better_page/templates/view_components/ui/header_component.rb.tt

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module BetterPage
+  module Ui
+    class HeaderComponent < BetterPage::ApplicationViewComponent
+      def initialize(title:, breadcrumbs: [], actions: [], metadata: [])
+        @title = title
+        @breadcrumbs = breadcrumbs
+        @actions = actions
+        @metadata = metadata
+      end
+
+      attr_reader :title, :breadcrumbs, :actions, :metadata
+
+      def breadcrumbs? = breadcrumbs.any?
+      def actions? = actions.any?
+      def metadata? = metadata.any?
+
+      def action_classes(style)
+        base = "inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+
+        case style&.to_sym
+        when :primary
+          "#{base} bg-blue-600 text-white ring-blue-600 hover:bg-blue-700 focus:ring-blue-500"
+        when :secondary
+          "#{base} bg-white text-gray-900 ring-gray-300 hover:bg-gray-50 focus:ring-blue-500"
+        when :danger
+          "#{base} bg-red-600 text-white ring-red-600 hover:bg-red-700 focus:ring-red-500"
+        when :success
+          "#{base} bg-green-600 text-white ring-green-600 hover:bg-green-700 focus:ring-green-500"
+        when :warning
+          "#{base} bg-yellow-600 text-white ring-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500"
+        else
+          "#{base} bg-white text-gray-900 ring-gray-300 hover:bg-gray-50 focus:ring-blue-500"
+        end
+      end
+    end
+  end
+end

data/lib/generators/better_page/templates/view_components/ui/modal_component.html.erb.tt

@@ -0,0 +1,70 @@
+<div id="<%%= id %>"
+     data-controller="modal"
+     data-modal-confirm-close-value="<%%= confirm_close %>">
+
+  <%%# Trigger slot - bottone per aprire il modal %>
+  <%% if trigger? %>
+    <%%= trigger %>
+  <%% end %>
+
+  <%%# Container del modal (nascosto di default) %>
+  <div data-modal-target="container"
+       class="hidden relative z-50"
+       aria-modal="true"
+       role="dialog">
+
+    <%%# Backdrop %>
+    <div data-modal-target="backdrop"
+         data-action="click->modal#backdropClick"
+         class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 ease-out opacity-0">
+    </div>
+
+    <%%# Modal panel container %>
+    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div data-modal-target="panel"
+             class="<%%= panel_classes %> opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+
+          <%%# Header %>
+          <%% if show_header? %>
+            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+              <div class="flex items-center gap-4">
+                <%% if title? %>
+                  <h3 class="text-lg font-semibold leading-6 text-gray-900"><%%= title %></h3>
+                <%% end %>
+                <%% if header_actions? %>
+                  <div class="flex items-center gap-2">
+                    <%%= actions %>
+                  </div>
+                <%% end %>
+              </div>
+              <%% if closable? %>
+                <button type="button"
+                        data-action="click->modal#requestClose"
+                        class="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                  <span class="sr-only">Close</span>
+                  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              <%% end %>
+            </div>
+          <%% end %>
+
+          <%%# Content %>
+          <div class="px-4 py-4">
+            <%%= content %>
+          </div>
+
+          <%%# Footer %>
+          <%% if footer_actions? %>
+            <div class="flex items-center justify-end gap-2 px-4 py-3 border-t border-gray-200 bg-gray-50">
+              <%%= actions %>
+            </div>
+          <%% end %>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/better_page/templates/view_components/ui/modal_component.rb.tt

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module BetterPage
+  module Ui
+    class ModalComponent < BetterPage::ApplicationViewComponent
+      renders_one :trigger
+      renders_one :actions
+
+      SIZES = {
+        normal: "max-w-md",
+        large: "max-w-2xl"
+      }.freeze
+
+      def initialize(id:, title: nil, size: :normal, closable: true, actions_position: :footer, confirm_close: false)
+        @id = id
+        @title = title
+        @size = size.to_sym
+        @closable = closable
+        @actions_position = actions_position.to_sym
+        @confirm_close = confirm_close
+      end
+
+      attr_reader :id, :title, :size, :closable, :actions_position, :confirm_close
+
+      def closable?
+        @closable
+      end
+
+      def title?
+        title.present?
+      end
+
+      def show_header?
+        title? || closable?
+      end
+
+      def header_actions?
+        actions? && actions_position == :header
+      end
+
+      def footer_actions?
+        actions? && actions_position == :footer
+      end
+
+      def size_class
+        SIZES.fetch(size, SIZES[:normal])
+      end
+
+      def panel_classes
+        "relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full #{size_class}"
+      end
+    end
+  end
+end

data/lib/generators/better_page/templates/view_components/ui/overview_component.html.erb.tt

@@ -0,0 +1,22 @@
+<%% if fields? %>
+  <div class="bg-white shadow overflow-hidden rounded-lg mb-6">
+    <div class="px-4 py-5 sm:p-6">
+      <dl class="grid grid-cols-1 gap-x-4 gap-y-8 <%%= grid_classes %>">
+        <%% fields.each do |field| %>
+          <div class="<%%= field[:span] ? "sm:col-span-#{field[:span]}" : '' %>">
+            <dt class="text-sm font-medium text-gray-500"><%%= field[:label] %></dt>
+            <dd class="mt-1 text-sm text-gray-900">
+              <%% if field[:format] == :badge && field[:color] %>
+                <span class="<%%= badge_classes(field[:color]) %>"><%%= format_value(field) %></span>
+              <%% elsif field[:link] %>
+                <%%= link_to format_value(field), field[:link], class: "text-blue-600 hover:text-blue-500" %>
+              <%% else %>
+                <%%= format_value(field) %>
+              <%% end %>
+            </dd>
+          </div>
+        <%% end %>
+      </dl>
+    </div>
+  </div>
+<%% end %>

data/lib/generators/better_page/templates/view_components/ui/overview_component.rb.tt

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module BetterPage
+  module Ui
+    class OverviewComponent < BetterPage::ApplicationViewComponent
+      def initialize(fields:, columns: 2)
+        @fields = fields
+        @columns = columns
+      end
+
+      attr_reader :fields, :columns
+
+      def fields? = fields.any?
+
+      def grid_classes
+        case columns
+        when 1 then "sm:grid-cols-1"
+        when 2 then "sm:grid-cols-2"
+        when 3 then "sm:grid-cols-3"
+        when 4 then "sm:grid-cols-4"
+        else "sm:grid-cols-2"
+        end
+      end
+
+      def format_value(field)
+        value = field[:value]
+        return field[:empty] || "-" if value.blank?
+
+        case field[:format]&.to_sym
+        when :currency
+          number_to_currency(value)
+        when :date
+          value.respond_to?(:strftime) ? value.strftime("%B %d, %Y") : value
+        when :datetime
+          value.respond_to?(:strftime) ? value.strftime("%B %d, %Y %H:%M") : value
+        when :boolean
+          value ? "Yes" : "No"
+        when :percentage
+          "#{value}%"
+        when :badge
+          value
+        else
+          value
+        end
+      end
+
+      def badge_classes(color)
+        base = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
+
+        case color&.to_sym
+        when :green
+          "#{base} bg-green-100 text-green-800"
+        when :red
+          "#{base} bg-red-100 text-red-800"
+        when :yellow
+          "#{base} bg-yellow-100 text-yellow-800"
+        when :blue
+          "#{base} bg-blue-100 text-blue-800"
+        when :blue
+          "#{base} bg-blue-100 text-blue-800"
+        when :purple
+          "#{base} bg-purple-100 text-purple-800"
+        when :pink
+          "#{base} bg-pink-100 text-pink-800"
+        else
+          "#{base} bg-gray-100 text-gray-800"
+        end
+      end
+    end
+  end
+end

data/lib/generators/better_page/templates/view_components/ui/pagination_component.html.erb.tt

@@ -0,0 +1,63 @@
+<%% if paginated? || show_info? %>
+  <nav class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6" aria-label="Pagination">
+    <%% if show_info? %>
+      <div class="hidden sm:block">
+        <p class="text-sm text-gray-700">
+          Showing
+          <span class="font-medium"><%%= from_count %></span>
+          to
+          <span class="font-medium"><%%= to_count %></span>
+          of
+          <span class="font-medium"><%%= total_count %></span>
+          results
+        </p>
+      </div>
+    <%% end %>
+
+    <%% if paginated? %>
+      <div class="flex flex-1 justify-between sm:justify-end">
+        <div class="isolate inline-flex -space-x-px rounded-md shadow-sm">
+          <%% if current_page > 1 %>
+            <%%= link_to url_for(page: current_page - 1), class: "relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0" do %>
+              <span class="sr-only">Previous</span>
+              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
+              </svg>
+            <%% end %>
+          <%% else %>
+            <span class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-300 ring-1 ring-inset ring-gray-300 cursor-not-allowed">
+              <span class="sr-only">Previous</span>
+              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
+              </svg>
+            </span>
+          <%% end %>
+
+          <%% page_numbers.each do |page| %>
+            <%% if page == :ellipsis %>
+              <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300">...</span>
+            <%% else %>
+              <%%= link_to page, url_for(page: page), class: page_link_classes(page) %>
+            <%% end %>
+          <%% end %>
+
+          <%% if current_page < total_pages %>
+            <%%= link_to url_for(page: current_page + 1), class: "relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0" do %>
+              <span class="sr-only">Next</span>
+              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+              </svg>
+            <%% end %>
+          <%% else %>
+            <span class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-300 ring-1 ring-inset ring-gray-300 cursor-not-allowed">
+              <span class="sr-only">Next</span>
+              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+              </svg>
+            </span>
+          <%% end %>
+        </div>
+      </div>
+    <%% end %>
+  </nav>
+<%% end %>

data/lib/generators/better_page/templates/view_components/ui/pagination_component.rb.tt

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module BetterPage
+  module Ui
+    class PaginationComponent < BetterPage::ApplicationViewComponent
+      def initialize(items:, info: true)
+        @items = items
+        @show_info = info
+      end
+
+      attr_reader :items
+
+      def show_info? = @show_info
+      def paginated? = items.respond_to?(:total_pages) && items.total_pages > 1
+
+      def current_page = items.respond_to?(:current_page) ? items.current_page : 1
+      def total_pages = items.respond_to?(:total_pages) ? items.total_pages : 1
+      def total_count = items.respond_to?(:total_count) ? items.total_count : items.size
+
+      def from_count
+        return 0 if total_count.zero?
+
+        per_page = items.respond_to?(:limit_value) ? items.limit_value : 25
+        ((current_page - 1) * per_page) + 1
+      end
+
+      def to_count
+        per_page = items.respond_to?(:limit_value) ? items.limit_value : 25
+        [current_page * per_page, total_count].min
+      end
+
+      def page_numbers
+        return [] unless paginated?
+
+        pages = []
+        window = 2
+
+        # Always show first page
+        pages << 1
+
+        # Add ellipsis if needed
+        pages << :ellipsis if current_page > window + 2
+
+        # Add pages around current
+        ((current_page - window)..(current_page + window)).each do |page|
+          pages << page if page > 1 && page < total_pages
+        end
+
+        # Add ellipsis if needed
+        pages << :ellipsis if current_page < total_pages - window - 1
+
+        # Always show last page
+        pages << total_pages if total_pages > 1
+
+        pages.uniq
+      end
+
+      def page_link_classes(page)
+        base = "relative inline-flex items-center px-4 py-2 text-sm font-medium"
+
+        if page == current_page
+          "#{base} z-10 bg-blue-50 border-blue-500 text-blue-600"
+        else
+          "#{base} bg-white border-gray-300 text-gray-500 hover:bg-gray-50"
+        end
+      end
+    end
+  end
+end

data/lib/generators/better_page/templates/view_components/ui/panel_component.html.erb.tt

@@ -0,0 +1,31 @@
+<div class="bg-white shadow rounded-lg overflow-hidden mb-6" <%% if collapsible? %>data-controller="panel"<%% end %>>
+  <%% if title? %>
+    <div class="px-4 py-5 sm:px-6 border-b border-gray-200 <%%= collapsible? ? 'cursor-pointer' : '' %>" <%% if collapsible? %>data-action="click->panel#toggle"<%% end %>>
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-lg font-medium leading-6 text-gray-900"><%%= title %></h3>
+          <%% if description? %>
+            <p class="mt-1 text-sm text-gray-500"><%%= description %></p>
+          <%% end %>
+        </div>
+        <%% if collapsible? %>
+          <div class="ml-4 flex-shrink-0">
+            <svg class="h-5 w-5 text-gray-400 transition-transform" data-panel-target="icon" <%%= collapsed? ? '' : 'style="transform: rotate(180deg)"' %> fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        <%% end %>
+      </div>
+    </div>
+  <%% end %>
+
+  <%% if fields? %>
+    <div class="px-4 py-5 sm:p-6 <%%= collapsed? ? 'hidden' : '' %>" <%% if collapsible? %>data-panel-target="content"<%% end %>>
+      <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
+        <%% fields.each do |field| %>
+          <%%= render BetterPage::Ui::FieldComponent.new(**field) %>
+        <%% end %>
+      </div>
+    </div>
+  <%% end %>
+</div>

data/lib/generators/better_page/templates/view_components/ui/panel_component.rb.tt

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module BetterPage
+  module Ui
+    class PanelComponent < BetterPage::ApplicationViewComponent
+      def initialize(title: nil, description: nil, fields: [], collapsible: false, collapsed: false)
+        @title = title
+        @description = description
+        @fields = fields
+        @collapsible = collapsible
+        @collapsed = collapsed
+      end
+
+      attr_reader :title, :description, :fields, :collapsible, :collapsed
+
+      def title? = title.present?
+      def description? = description.present?
+      def fields? = fields.any?
+      def collapsible? = collapsible
+      def collapsed? = collapsed
+    end
+  end
+end

data/lib/generators/better_page/templates/view_components/ui/statistics_component.html.erb.tt

@@ -0,0 +1,33 @@
+<%% if stats? %>
+  <div class="mb-6">
+    <dl class="grid gap-5 <%%= grid_classes %>">
+      <%% stats.each do |stat| %>
+        <div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
+          <dt>
+            <%% if stat[:icon] %>
+              <div class="absolute bg-blue-500 rounded-md p-3">
+                <span class="h-6 w-6 text-white"><%%= stat[:icon] %></span>
+              </div>
+            <%% end %>
+            <p class="<%%= stat[:icon] ? 'ml-16' : '' %> text-sm font-medium text-gray-500 truncate"><%%= stat[:label] %></p>
+          </dt>
+          <dd class="<%%= stat[:icon] ? 'ml-16' : '' %> flex items-baseline pb-6 sm:pb-7">
+            <p class="text-2xl font-semibold text-gray-900"><%%= stat[:value] %></p>
+            <%% if stat[:change] %>
+              <p class="ml-2 flex items-baseline text-sm font-semibold <%%= trend_classes(stat[:trend]) %>">
+                <%%= trend_icon(stat[:trend]) %>
+                <span class="sr-only"><%%= stat[:trend] == :up ? 'Increased' : 'Decreased' %> by</span>
+                <%%= stat[:change] %>
+              </p>
+            <%% end %>
+            <%% if stat[:link] %>
+              <div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
+                <%%= link_to stat[:link][:label], stat[:link][:path], class: "text-sm font-medium text-blue-600 hover:text-blue-500" %>
+              </div>
+            <%% end %>
+          </dd>
+        </div>
+      <%% end %>
+    </dl>
+  </div>
+<%% end %>

data/lib/generators/better_page/templates/view_components/ui/statistics_component.rb.tt

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module BetterPage
+  module Ui
+    class StatisticsComponent < BetterPage::ApplicationViewComponent
+      def initialize(stats:, columns: 4)
+        @stats = Array(stats)
+        @columns = columns
+      end
+
+      attr_reader :stats, :columns
+
+      def stats? = stats.any?
+
+      def grid_classes
+        case columns
+        when 2
+          "grid-cols-1 sm:grid-cols-2"
+        when 3
+          "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+        when 4
+          "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+        when 5
+          "grid-cols-1 sm:grid-cols-2 lg:grid-cols-5"
+        else
+          "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+        end
+      end
+
+      def trend_classes(trend)
+        case trend&.to_sym
+        when :up
+          "text-green-600"
+        when :down
+          "text-red-600"
+        else
+          "text-gray-500"
+        end
+      end
+
+      def trend_icon(trend)
+        case trend&.to_sym
+        when :up
+          '<svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>'.html_safe
+        when :down
+          '<svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>'.html_safe
+        end
+      end
+    end
+  end
+end