fluxbit_view_components 0.3.0 → 0.4.0

data/lib/generators/fluxbit/templates/index.html.erb.tt

@@ -0,0 +1,254 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+<div data-controller="fx-select-all">
+  <div id="notice" class="fixed top-4 right-4 z-50 max-w-md w-auto">
+    <%%= render "shared/flash" %>
+  </div>
+<% if options[:turbo] -%>
+<% if options[:ui] == "drawer" -%>
+  <turbo-frame id="drawer"></turbo-frame>
+<% elsif options[:ui] == "modal" -%>
+  <turbo-frame id="modal"></turbo-frame>
+<% end -%>
+<% end -%>
+  <%%= fx_heading(class: "m-4", size: 2) { t("<%= plural %>.titles.index") } %>
+  
+  <%%= fx_breadcrumb(class: "m-4") do |breadcrumb| %>
+    <%% breadcrumb.with_item(href: root_path, icon: "heroicons_solid:home") %>
+<% if namespaced? -%>
+<% namespace_path.split("/").each do |ns| -%>
+    <%% breadcrumb.with_item { "<%= ns.camelize %>" } %>
+<% end -%>
+<% end -%>
+    <%% breadcrumb.with_item(href: <%= path_prefix %><%= plural %>_path) { t("<%= plural %>.titles.index") } %>
+    <%% breadcrumb.with_item(current_page: true) { t("<%= plural %>.titles.index_name") } %>
+  <%% end %>
+
+  <%%= fx_card(class: "m-4") do |card| %>
+    <%% card.with_section do %>
+      <%%= form_with(id: "<%= singular %>_index", url: <%= path_prefix %><%= plural %>_path, method: :get, local: true,
+          data: { controller: "fx-auto-submit" }) do |form| %>
+        <div class="flex justify-between">
+          <div class="flex gap-2 items-end">
+<% if options[:paginator] -%>
+            <input type="hidden" id="perPageParam" name="per_page" value="<%%= params["per_page"] %>">
+<% end -%>
+            <%%= fx_text_field name: :q, value: params[:q], type: :search,
+                placeholder: t("<%= plural %>.helpers.search"),
+                addon: "heroicons_solid:magnifying-glass",
+                data: { action: 'keydown.enter->fx-auto-submit#submit' } %>
+            <%% if @has_filters %>
+              <%%= fx_button as: :a, href: <%= path_prefix %><%= plural %>_path(<% if options[:paginator] %>per_page: params["per_page"]<% end %>),
+                  color: :light, class: "w-auto px-4 h-[42px]", remove_class: "w-full",
+                  title: t("<%= plural %>.actions.remove_filters") do %>
+                <%%= anyicon("heroicons_solid:x-mark", class: "size-3") %>
+              <%% end #button %>
+            <%% end %>
+          </div>
+          <div class="flex gap-2">
+            <%%= fx_button as: :a, href: new_<%= path_prefix %><%= singular %>_path,
+                class: "w-auto px-4", remove_class: "w-full"<% if options[:turbo] && options[:ui] != "none" %>, data: { turbo_frame: "<%= options[:ui] == "modal" ? "modal" : "drawer" %>" }<% end %> do %>
+              <%%= anyicon("heroicons_solid:plus", class: "size-4") %>
+              <span class="pl-2 pr-4 hidden md:inline"><%%= t("<%= plural %>.actions.new") %></span>
+            <%% end #button %>
+
+            <%%= fx_button id: "actionButton", as: :button, type: "button", color: :light, class: "w-auto px-4",
+                title: "Actions", data: { "fx-select-all-target": "showOnEmptySelect" },
+                remove_class: "w-full" do |actions_button| %>
+              <%%= anyicon("heroicons_solid:ellipsis-vertical", class: "size-4") %>
+              <span class="pl-2 pr-4 hidden md:inline">
+                <%%== t("<%= plural %>.actions.actions") %>
+              </span>
+              <%% actions_button.with_dropdown(id: "dropdownActionButton") do |dropdown| %>
+<% attributes
+  .select { |a| %i[boolean].include?(a.type) }
+  .each do |attr|
+-%>
+                <%% dropdown.with_item do %>
+                  <%%= link_to "#",
+                      class: "inline-flex px-2",
+                      data: { 
+                        controller: "fx-method-link",
+                        fx_method_link_method_value: "patch",
+                        fx_method_link_url_value: update_all_<%= path_prefix %><%= plural %>_path,
+                        fx_method_link_params_value: { <%= singular %>: { <%= attr.name %>: true } },
+                        fx_method_link_form_data_id_value: "<%= singular %>_edit"
+                      },
+                      title: t("<%= plural %>.messages.click_to_change_<%= attr.name %>") do %>
+                    <%%= anyicon("heroicons_solid:check-circle", class: "size-5") %>
+                    <%%= t("<%= plural %>.actions.activate_<%= attr.name %>_selected") %>
+                  <%% end # link_to %>
+                <%% end # dropdown item %>
+
+                <%% dropdown.with_item do %>
+                  <%%= link_to "#",
+                      class: "inline-flex px-2",
+                      data: { 
+                        controller: "fx-method-link",
+                        fx_method_link_method_value: "patch",
+                        fx_method_link_url_value: update_all_<%= path_prefix %><%= plural %>_path,
+                        fx_method_link_params_value: { <%= singular %>: { <%= attr.name %>: false } },
+                        fx_method_link_form_data_id_value: "<%= singular %>_edit"
+                      },
+                      title: t("<%= plural %>.messages.click_to_change_<%= attr.name %>") do %>
+                    <%%= anyicon("heroicons_solid:x-circle", class: "size-5") %>
+                    <%%= t("<%= plural %>.actions.deactivate_<%= attr.name %>_selected") %>
+                  <%% end # link_to %>
+                <%% end # dropdown item %>
+<% end -%>
+                <%% dropdown.with_item do %>
+                  <%%= link_to "#",
+                      onclick: "event.preventDefault();",
+                      class: "inline-flex px-2",
+                      data: {
+                        "modal-target": "confirm-mass-deletion-modal",
+                        "modal-toggle": "confirm-mass-deletion-modal"
+                      },
+                      title: t("<%= plural %>.messages.click_to_destroy_selected") do %>
+                    <%%= anyicon("heroicons_solid:trash", class: "size-5") %>
+                    <%%= t("<%= plural %>.actions.delete_selected") %>
+                  <%% end # link_to %>
+                <%% end # dropdown item %>
+              <%% end # dropdown %>
+            <%% end # button %>
+
+            <%%= fx_button id: "filterButton", as: :button, type: "button", color: :light, class: "w-auto px-4",
+                title: t("<%= plural %>.helpers.filter"), remove_class: "w-full" do |filter_button| %>
+              <%%= anyicon("heroicons_solid:funnel", class: "size-4") %>
+              <span class="pl-2 pr-4 hidden md:inline"><%%= t("<%= plural %>.helpers.filter") %></span>
+              <%% filter_button.with_dropdown(id: "dropdownFilterButton") do |dropdown| %>
+                <div class="px-2">
+<% attributes
+  .select { |a| %i[integer decimal text string].include?(a.type) }
+  .first(5)
+  .each do |attr|
+-%>
+                  <%%= fx_text_field id: "<%= attr.name %>Filter", label: t("<%= plural %>.fields.<%= attr.name -%>"), name: "<%= attr.name -%>",
+                      value: @<%= attr.name %>, placeholder: t("<%= plural %>.helpers.filter_<%= attr.name -%>"), class: "mb-2",
+                      data: { action: "keydown.enter->fx-auto-submit#submit" }
+                  %>
+<% end -%>
+                  <%% if @has_filters %>
+                    <%%= fx_link href: <%= path_prefix %><%= plural -%>_path(<% if options[:paginator] %>per_page: params["per_page"]<% end %>) { t("<%= plural -%>.actions.remove_filters") } %>
+                  <%% end %>
+                </div>
+              <%% end #dropdown %>
+            <%% end # button %>
+
+            <%%= fx_button as: :a, href: <%= path_prefix %><%= plural -%>_path(request.query_parameters.merge(format: :csv)), type: "button",
+                color: :light, class: "w-auto px-4", title: t("<%= plural %>.helpers.export"), remove_class: "w-full" do %>
+              <%%= anyicon("heroicons_solid:arrow-down-tray", class: "size-4") %>
+              <span class="pl-2 pr-4 hidden md:inline"><%%= t("<%= plural %>.actions.export") %></span>
+            <%% end # button %>
+          </div>
+        </div>
+      <%% end #form %>
+    <%% end # section %>
+
+    <%% card.with_section(no_class: true) do %>
+      <%%= form_with(id: "<%= singular %>_edit", name: "<%= singular %>_edit", url: <%= path_prefix %><%= plural %>_path, method: :get, local: true) do |form| %>
+        <%%= fx_table(striped: true, bordered: true, hover: true, tbody_html: {id: "<%= plural %>"}) do |table| %>
+          <%% table.with_header do |header| %>
+            <%% header.with_cell(title: "Select All/Deselect All") {
+              fx_checkbox(id: "<%= singular %>_select_all", data: { "fx-select-all-target": "selectAll" }) } %>
+<% attributes.reject { |attr| attr.type == :password_digest }.first(5).each do |attr| -%>
+            <%% header.with_cell { fx_sort_field(:<%= attr.name %>, :<%= path_prefix %><%= plural %>_path, t("<%= plural %>.fields.<%= attr.name %>")) } %>
+<% end -%>
+            <%% header.with_cell { "" } %>
+          <%% end %>
+          <%% if @<%= plural %>.count > 0 %>
+            <%% render "<%= plural %>", <%= plural %>: @<%= plural %> %>
+          <%% else %>
+            <tr id="not_found"><td colspan=7>
+              <div class="text-center text-gray-500 dark:text-gray-400 py-20 flex flex-col items-center justify-center">
+                <%%= anyicon("heroicons_solid:exclamation-circle", class: "size-12 mb-2") %>
+                <p><%%= t("<%= plural %>.messages.no_records") %></p>
+                <p><%%= t("<%= plural %>.messages.no_records_sub") %></p>
+              </div>
+            </td></tr>
+          <%% end %>
+        <%% end # table %>
+      <%% end # form %>
+    <%% end #section %>
+
+<% if options[:paginator] -%>
+    <%% if @<%= plural %>.count > 1 %>
+      <%% card.with_section do %>
+        <%%= fx_flex(gap: 2, align_items: :center, justify_content: :space_between) do %>
+          <div class="text-sm text-gray-700 dark:text-gray-400 m-0 p-2">
+            <%%== t("<%= plural %>.messages.pagination_info", start: @pagy.from, end: @pagy.to, total: @pagy.count) %>
+          </div>
+          <%%= fx_flex(gap: 2, align_items: :center) do %>
+            <%%= fx_pagination(@pagy, id: 'nav', sizing: 1, show_first_last: true) if @<%= plural %>.count > @page_size%>
+            <%%= fx_select id: "perPage", name:"per_page", class: "pr-4", data: {
+                controller: "fx-assigner fx-auto-submit",
+                fx_assigner_change_param: {
+                    "#perPageParam" => {
+                      "value": { element: "#per_page", attribute: "value" }
+                    }
+                  }.to_json,
+                fx_assigner_prevent_default_param: "true",
+                fx_auto_submit_form_id_param: "<%= singular %>_index",
+                action: "change->fx-assigner#assign change->fx-auto-submit#submit",
+              },
+              options: options_for_select([
+                [t("<%= plural %>.actions.per_page", count: 5), "5"],
+                [t("<%= plural %>.actions.per_page", count: 10), "10"],
+                [t("<%= plural %>.actions.per_page", count: 20), "20"],
+                [t("<%= plural %>.actions.per_page", count: 50), "50"],
+                [t("<%= plural %>.actions.per_page", count: 100), "100"]
+              ], selected: params["per_page"] || "5") %>
+          <%% end # flex %>
+        <%% end # flex %>
+      <%% end # section %>
+    <%% end # if count %>
+<% end -%>
+  <%% end # card %>
+
+  <%%= fx_modal id: "confirm-deletion-modal", size: 1 do |modal| %>
+    <%%= fx_flex(vertical: true, align_items: :center) do %>
+      <%%= anyicon("heroicons_solid:trash", class: "size-11 text-red-600 pb-2") %>
+      <%%= t("<%= plural %>.messages.confirm_destroy") %>
+      <%%= fx_flex(gap: 2, class: "mt-4") do %>
+        <%%= fx_button(as: :button, color: :light, class: "w-auto px-4", remove_class: "w-full",
+            data: {
+              "modal-target": "confirm-deletion-modal",
+              "modal-toggle": "confirm-deletion-modal"
+            }) { t("<%= plural %>.actions.cancel_destroy") } %>
+        <%%= fx_button(as: :a, href: "#", id: "confirm-deletion-button",
+            color: :danger, class: "w-auto text-nowrap px-4", remove_class: "w-full",
+            data: {
+              controller: "fx-method-link",
+              fx_method_link_method_value: "delete",
+              fx_method_link_url_value: <%= path_prefix %><%= singular %>_path(0),
+              "modal-target": "confirm-deletion-modal",
+              "modal-toggle": "confirm-deletion-modal"
+            }) { t("<%= plural %>.actions.confirm_destroy") } %>
+      <%% end #flex %>
+    <%% end #flex %>
+  <%% end # modal %>
+
+  <%%= fx_modal id: "confirm-mass-deletion-modal", size: 1 do |modal| %>
+    <%%= fx_flex(vertical: true, align_items: :center) do %>
+      <%%= anyicon("heroicons_solid:trash", class: "size-11 text-red-600 pb-2") %>
+      <div><%%== t("<%= plural %>.messages.confirm_bulk_destroy") %></div>
+      <%%= fx_flex(gap: 2, class: "mt-4") do %>
+        <%%= fx_button(as: :button, color: :light, class: "w-auto px-4", remove_class: "w-full",
+            data: {
+              "modal-target": "confirm-mass-deletion-modal",
+              "modal-toggle": "confirm-mass-deletion-modal"
+            }) { t("<%= plural %>.actions.cancel_destroy") } %>
+        <%%= fx_button(as: :a, href: "#", id: "confirm-deletion-button",
+            color: :danger, class: "w-auto text-nowrap px-4", remove_class: "w-full",
+            data: {
+              "modal-target": "confirm-mass-deletion-modal",
+              "modal-toggle": "confirm-mass-deletion-modal",
+
+              controller: "fx-method-link",
+              fx_method_link_method_value: "delete",
+              fx_method_link_url_value: destroy_all_<%= path_prefix %><%= plural %>_path,
+              fx_method_link_form_data_id_value: "<%= singular %>_edit"
+            }) { t("<%= plural %>.actions.confirm_destroy") } %>
+      <%% end #flex %>
+    <%% end #flex %>
+  <%% end # modal %>
+</div>

data/lib/generators/fluxbit/templates/index.json.jbuilder.tt

@@ -0,0 +1,33 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+# app/views/<%= plural %>/index.json.jbuilder
+json.<%= plural %> @<%= plural %> do |<%= singular %>|
+  json.id <%= singular %>.id
+<% attributes.each do |att|
+  name = att.name
+  next if att.type.to_s == 'password_digest'  # handle password fields separately 
+-%>
+  json.<%= name %> <%= singular %>.<%= name %>
+<% end -%>
+  json.created_at <%= singular %>.created_at
+  json.updated_at <%= singular %>.updated_at
+  json.url <%= path_prefix %><%= singular %>_url(<%= singular %>, format: :json)
+end
+
+json.pagination do
+  json.current_page @pagy.page
+  json.total_pages @pagy.pages
+  json.total_count @pagy.count
+  json.per_page @pagy.limit
+  json.next_page @pagy.next
+  json.prev_page @pagy.prev
+end
+
+json.filters do
+  json.search @q
+<% attributes
+  .select { |a| %i[integer decimal text string].include?(a.type) }
+  .each do |att|
+-%>
+  json.<%= att.name %> @<%= att.name %>
+<% end -%>
+end

data/lib/generators/fluxbit/templates/new.html.erb.tt

@@ -0,0 +1,47 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+<% if options[:ui] == "drawer" -%>
+<% if options[:turbo] -%>
+<%% if turbo_frame_request? %>
+  <turbo-frame id="drawer">
+    <%%= fx_drawer(id: "new-drawer", placement: :right, sizing: :xl, data: {controller: "fx-drawer"}) do |drawer| %>
+      <%% drawer.with_header { t("<%= plural %>.titles.new") } %>
+      <%%= render "form", <%= singular %>: @<%= singular %> %>
+    <%% end %>
+    <script>document.dispatchEvent(new CustomEvent("showDrawer:new-drawer"));</script>
+  </turbo-frame>
+<%% else %>
+  <%%= fx_heading(class: "m-4", size: 2) { t("<%= plural %>.titles.new") } %>
+  <%%= fx_card(class: "m-4") do |card| %>
+    <%% card.with_section do %>
+      <%%= render "form", <%= singular %>: @<%= singular %> %>
+    <%% end %>
+  <%% end %>
+<%% end %>
+<% end -%>
+<% elsif options[:ui] == "modal" -%>
+<% if options[:turbo] -%>
+<%% if turbo_frame_request? %>
+  <turbo-frame id="modal">
+    <%%= fx_modal(id: "new-modal", size: :xl, data: {controller: "fx-modal"}) do |modal| %>
+      <%% modal.with_header { t("<%= plural %>.titles.new") } %>
+      <%%= render "form", <%= singular %>: @<%= singular %> %>
+    <%% end %>
+    <script>document.dispatchEvent(new CustomEvent("showModal:new-modal"));</script>
+  </turbo-frame>
+<%% else %>
+  <%%= fx_heading(class: "m-4", size: 2) { t("<%= plural %>.titles.new") } %>
+  <%%= fx_card(class: "m-4") do |card| %>
+    <%% card.with_section do %>
+      <%%= render "form", <%= singular %>: @<%= singular %> %>
+    <%% end %>
+  <%% end %>
+<%% end %>
+<% end -%>
+<% else -%>
+  <%%= fx_heading(class: "m-4", size: 2) { t("<%= plural %>.titles.new") } %>
+  <%%= fx_card(class: "m-4") do |card| %>
+    <%% card.with_section do %>
+      <%%= render "form", <%= singular %>: @<%= singular %> %>
+    <%% end %>
+  <%% end %>
+<% end -%>

data/lib/generators/fluxbit/templates/partial.html.erb.tt

@@ -0,0 +1,61 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+<%%= fx_table(striped: true, only_rows: true, hover: true) do |table| %>
+  <%% <%= plural %>.each do |<%= singular %>| %>
+    <%% table.with_row(
+      id: dom_id(<%= singular %>), 
+      class: "cursor-pointer hover:bg-gray-50",
+      title: <%= %{t("#{plural}.helpers.click_to_edit")} %>,
+      <% if options[:turbo] && options[:ui] != "none" -%>data: {
+        controller: "fx-row-click",
+        fx_row_click_url_value: edit_<%= path_prefix %><%= singular %>_path(<%= singular %>),
+        fx_row_click_frame_value: "<%= options[:ui] == "modal" ? "modal" : "drawer" %>"
+      }<% end -%>) do |row| %>
+      <%% row.with_cell(width: "1%") { fx_checkbox(id: dom_id(<%= singular %>, "select"), value: <%= singular %>.id, name: "<%= singular %>_ids[]", data: { "fx-select-all-target": "select" }) } %>
+
+<% attributes.reject { |attr| attr.type == :password_digest }.first(5).each do |attr| 
+  attr_name = attr.name
+  attr_type = attr.type -%>
+
+  <% if attr_type == :boolean -%>
+      <%% row.with_cell(width: "1%", class: "text-center") do %>
+        <%%= link_to "#",
+            class: "inline-flex items-center justify-center w-full h-full",
+            data: { 
+              controller: "fx-method-link",
+              fx_method_link_method_value: "patch",
+              fx_method_link_url_value: <%= path_prefix %><%= singular %>_path(<%= singular %>),
+              fx_method_link_params_value: { <%= singular %>: { <%= attr_name %>: !<%= singular %>.<%= attr_name %> } }
+            },
+            title: <%= %{t("#{plural}.helpers.click_to_change_#{attr_name}")} %> do %>
+          <%%= anyicon(
+            "heroicons_solid:#{<%= singular %>.<%= attr_name %>? ? 'check-circle' : 'x-circle'}",
+            class: "size-5 #{<%= singular %>.<%= attr_name %>? ? 'text-green-600' : 'text-red-600'}") %>
+        <%% end %>
+      <%% end %>
+  <% else -%>
+      <%% row.with_cell { <%= singular %>.<%= attr_name %>.to_s } %>
+  <% end -%>
+<% end -%>
+
+      <%% row.with_cell(width: "1%") do %>
+        <%%= fx_button color: :danger_outline,
+            onclick: "event.preventDefault();",
+            data: {
+              href: <%= path_prefix %><%= singular %>_path(<%= singular %>),
+              controller: "fx-assigner",
+              fx_assigner_change_param: {
+                "#confirm-deletion-button" => {
+                  "data-fx-method-link-url-value" => <%= path_prefix %><%= singular %>_path(<%= singular %>),
+                }
+              }.to_json,
+              fx_assigner_prevent_default_param: "true",
+              action: "fx-assigner#assign",
+              "modal-target": "confirm-deletion-modal",
+              "modal-toggle": "confirm-deletion-modal"
+            }, remove_class: "w-full" do %>
+          <%%= anyicon("heroicons_solid:trash", class: "size-4") %>
+        <%% end %>
+      <%% end %>
+    <%% end %>
+  <%% end %>
+<%% end %>

data/lib/generators/fluxbit/templates/policy.rb.tt

@@ -0,0 +1,36 @@
+class <%= file_name.singularize.camelize %>Policy < ApplicationPolicy
+  def index?
+    true
+  end
+
+  def show?
+    true
+  end
+
+  def create?
+    true
+  end
+
+  def update?
+    true
+  end
+
+  def destroy?
+    false
+  end
+
+  def update_all?
+    update?
+  end
+
+  def destroy_all?
+    destroy?
+  end
+
+  class Scope < ApplicationPolicy::Scope
+    # NOTE: Be explicit about which records you allow access to!
+    def resolve
+      scope.all
+    end
+  end
+end

data/lib/generators/fluxbit/templates/send_alert_via_drawer.erb.tt

@@ -0,0 +1,10 @@
+<turbo-frame id="drawer">
+<script>
+  alertsContainer = document.getElementById("notice");
+  if (alertsContainer) {
+    const alertElement = document.createElement("div");
+    alertElement.innerHTML = `<%%= j fx_alert(color: color) { sanitize(message.to_s, tags: [], attributes: []) } %>`;
+    alertsContainer.appendChild(alertElement);
+  }
+</script>
+</turbo-frame>

data/lib/generators/fluxbit/templates/show.html.erb.tt

@@ -0,0 +1,44 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+<p id="notice"><%%= notice %></p>
+
+<%%= fx_heading(class: "m-4", size: 2) { t("<%= plural %>.titles.show") } %>
+
+<%%= fx_card(class: "m-4") do |card| %>
+  <%% card.with_section do %>
+    <div class="grid gap-4 sm:grid-cols-2">
+
+<% attributes.reject { |attr| attr.type == :password_digest }.each do |attr| -%>
+  <% attr_name = attr.name -%>
+  <% if attr.type == :boolean -%>
+      <div>
+        <p class="text-xs uppercase tracking-wide text-gray-500"><%%= t("<%= plural %>.fields.<%= attr_name %>") %></p>
+        <%%= fx_badge(pill: true, color: @<%= singular %>.<%= attr_name %>? ? :success_bordered : :danger_bordered) { t(@<%= singular %>.<%= attr_name %>?, scope: "<%= plural %>.values.<%= attr_name %>") } %>
+      </div>
+  <% elsif attr.type == :text -%>
+      <div class="sm:col-span-2">
+        <p class="text-xs uppercase tracking-wide text-gray-500"><%%= t("<%= plural %>.fields.<%= attr_name %>") %></p>
+        <p class="mt-1 leading-relaxed text-gray-700 whitespace-pre-line"><%%= @<%= singular %>.<%= attr_name %> || t("<%= plural %>.values.no_value") %></p>
+      </div>
+  <% else -%>
+      <div>
+        <p class="text-xs uppercase tracking-wide text-gray-500"><%%= t("<%= plural %>.fields.<%= attr_name %>") %></p>
+        <p class="mt-1 font-medium text-gray-900"><%%= @<%= singular %>.<%= attr_name %> || t("<%= plural %>.values.no_value") %></p>
+      </div>
+  <% end -%>
+<% end -%>
+    </div>
+
+    <%%= render "metadata", <%= singular %>: @<%= singular %> %>
+  <%% end %>
+<%% end %>
+
+<div class="m-4 flex gap-2">
+  <%%= fx_button as: :a, href: edit_<%= path_prefix %><%= singular %>_path(@<%= singular %>), data: { turbo_frame: "drawer" }, remove_class: "w-full", class: "p-2 px-4" do %>
+    <%%= anyicon("heroicons_solid:pencil", class: "size-4") %>
+    <span class="pl-2"><%%= t("<%= plural %>.actions.edit") %></span>
+  <%% end %>
+  <%%= fx_button as: :a, href: <%= path_prefix %><%= plural %>_path, remove_class: "w-full", class: "p-2 px-4" do %>
+    <%%= anyicon("heroicons_solid:arrow-left", class: "size-4") %>
+    <span class="pl-2"><%%= t("<%= plural %>.actions.back") %></span>
+  <%% end %>
+</div>

data/lib/generators/fluxbit/templates/show.json.jbuilder.tt

@@ -0,0 +1,6 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+# app/views/<%= plural %>s/show.json.jbuilder
+json.extract! @<%= singular %>, <%= attributes.reject { |a| 
+      a.type.to_s == "password_digest" }.map { |a|
+        ":#{a.name}" }.join(', ') %>, :created_at, :updated_at
+json.url <%= path_prefix %><%= singular %>_url(@<%= singular %>, format: :json)

data/lib/generators/fluxbit/templates/update.turbo_stream.erb.tt

@@ -0,0 +1,10 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+<%% if @<%= singular %>.errors.any? %>
+  <%%# On failure: re-render the form (with errors still in drawer) %>
+  <%%= turbo_stream.replace "<%= singular %>_form", partial: "<%= namespace_path %>/<%= plural %>/form", locals: { <%= plural %>: [@<%= singular %>] } %>
+<%% else %>
+  <%%# On success: replace the existing row, clear drawer, and show notice %>
+  <%%= turbo_stream.replace dom_id(@<%= singular %>), partial: "<%= namespace_path %>/<%= plural %>/<%= plural %>",  locals: { <%= plural %>: [@<%= singular %>] } %>
+  <%%= turbo_stream.update "drawer", "" %>
+  <%%= turbo_stream.append "notice", fx_alert(with_content: @message, color: :success) %>
+<%% end %>

data/lib/generators/fluxbit/templates/update_all.turbo_stream.erb.tt

@@ -0,0 +1,20 @@
+<% singular = file_name.singularize; plural = file_name.pluralize -%>
+<%% if @errors.empty? %>
+  <%%# On success: replace the existing row, clear drawer, and show notice %>
+  <%% @<%= plural %>.each do |<%= singular %>| %>
+    <%%= turbo_stream.replace dom_id(<%= singular %>), 
+          partial: "<%= namespace_path %>/<%= plural %>/<%= plural %>", 
+          locals: { <%= plural %>: [<%= singular %>] } %>
+  <%% end %>
+<%% end %>
+<%%= turbo_stream.append "notice" do %>
+  <%%= fx_alert(color: @errors.any? ? :danger : :success) { @message } %>
+<%% end %>
+<%%= turbo_stream.after "notice" do %>
+  <script id="temp-script-<%= Time.current.to_i %>">
+    (function() {
+      document.getElementById("dropdownActionButton").classList.add("hidden");
+      document.currentScript.remove();
+    })();
+  </script>
+<%% end %>

data/lib/install/install.rb

@@ -7,6 +7,7 @@ layout_path = Rails.root.join("app/views/layouts/application.html.erb")
 importmap_binstub = Rails.root.join("bin/importmap")
 importmap_config = Rails.root.join("config/importmap.rb")
 stimulus_path = Rails.root.join("app/javascript/controllers/index.js")
+application_js_path = Rails.root.join("app/javascript/application.js")
 package_json_path = Rails.root.join("package.json")
 tailwind_config_path = Rails.root.join("tailwind.config.js")
 stylesheets_path = Rails.root.join("app/assets/stylesheets/application.tailwind.css")
@@ -25,6 +26,12 @@ system "#{RbConfig.ruby} ./bin/rails tailwindcss:install"
 say.call "- Installing Flowbite via npm..."
 system "npm install flowbite --save"
 
+say.call "- Installing Fluxbit ViewComponents JavaScript package via npm..."
+system "npm install fluxbit_view_components --save"
+
+say.call "- Installing flowbite-datepicker via npm..."
+system "npm install flowbite-datepicker --save"
+
 say.call "- Copying tailwind.config.js from template..."
 if File.exist?(template_path)
   FileUtils.cp(template_path, tailwind_config_path)
@@ -43,6 +50,57 @@ else
   say.call "⚠️ Couldn't find application.tailwind.css, skipping CSS modifications", :red
 end
 
+if application_js_path.exist?
+  say.call "- Updating application.js with Fluxbit imports..."
+  app_js_content = File.read(application_js_path)
+
+  unless app_js_content.include?("flowbite/dist/flowbite.turbo.js")
+    # Find the line with "./controllers" import and add before it
+    if app_js_content.include?("./controllers")
+      gsub_file application_js_path.to_s, 'import "./controllers"',
+        'import "flowbite/dist/flowbite.turbo.js"' + "\n" +
+        'import "flowbite-datepicker"' + "\n" +
+        'import "./controllers"' + "\n" +
+        'import "fluxbit-view-components"'
+      say.call "  Added Flowbite and Fluxbit imports to application.js"
+    else
+      say.call "  ⚠️ Couldn't find './controllers' import in application.js", :red
+      say.call "     Add these lines manually:", :red
+      say.call '     import "flowbite/dist/flowbite.turbo.js"', :red
+      say.call '     import "flowbite-datepicker"', :red
+      say.call '     import "fluxbit-view-components"', :red
+    end
+  else
+    say.call "  Flowbite imports already exist in application.js, skipping..."
+  end
+else
+  say.call "⚠️ Couldn't find application.js, skipping JavaScript modifications", :red
+  say.call "   Add these lines to your application.js:", :red
+  say.call '   import "flowbite/dist/flowbite.turbo.js"', :red
+  say.call '   import "flowbite-datepicker"', :red
+  say.call '   import "fluxbit-view-components"', :red
+end
+
+if stimulus_path.exist?
+  say.call "- Updating controllers/index.js with Fluxbit controllers..."
+  controllers_content = File.read(stimulus_path)
+
+  unless controllers_content.include?("registerFluxbitControllers")
+    # Add the Fluxbit controller registration at the end
+    controllers_content << "\nimport { registerFluxbitControllers } from \"fluxbit-view-components\"\n"
+    controllers_content << "registerFluxbitControllers(Stimulus)\n"
+    File.write(stimulus_path, controllers_content)
+    say.call "  Added Fluxbit controller registration to controllers/index.js"
+  else
+    say.call "  Fluxbit controllers already registered, skipping..."
+  end
+else
+  say.call "⚠️ Couldn't find controllers/index.js, skipping Stimulus controller setup", :red
+  say.call "   Add these lines to your controllers/index.js:", :red
+  say.call '   import { registerFluxbitControllers } from "fluxbit-view-components"', :red
+  say.call '   registerFluxbitControllers(Stimulus)', :red
+end
+
 if layout_path.exist?
   say.call "- Updating layout to include Fluxbit styles..."