sure/app/views/transactions/show.html.erb

<%= render DS::Dialog.new(variant: "drawer") do |dialog| %>
  <% dialog.with_header do %>
    <%= render "transactions/header", entry: @entry %>
  <% end %>

  <% dialog.with_body do %>
    <% dialog.with_section(title: t(".overview"), open: true) do %>
      <div class="pb-4">
        <%= styled_form_with model: @entry,
              url: transaction_path(@entry),
              class: "space-y-2",
              data: { controller: "auto-submit-form" } do |f| %>

          <%= f.text_field :name,
                label: t(".name_label"),
                "data-auto-submit-form-target": "auto" %>

          <%= f.date_field :date,
                label: t(".date_label"),
                max: Date.current,
                disabled: @entry.linked?,
                "data-auto-submit-form-target": "auto" %>

          <% unless @entry.transaction.transfer? %>
            <div class="flex items-center gap-2">
              <%= f.select :nature,
                    [["Expense", "outflow"], ["Income", "inflow"]],
                    { container_class: "w-1/3", label: t(".nature"), selected: @entry.amount.negative? ? "inflow" : "outflow" },
                    { data: { "auto-submit-form-target": "auto" }, disabled: @entry.linked? } %>

              <%= f.money_field :amount, label: t(".amount"),
                    container_class: "w-2/3",
                    auto_submit: true,
                    min: 0,
                    value: @entry.amount.abs,
                    disabled: @entry.linked?,
                    disable_currency: @entry.linked? %>
            </div>

            <%= f.fields_for :entryable do |ef| %>
              <%= ef.collection_select :category_id,
                      Current.family.categories.alphabetically,
                    :id, :name,
                    { label: t(".category_label"),
                      class: "text-subdued", include_blank: t(".uncategorized") },
                    "data-auto-submit-form-target": "auto" %>
            <% end %>
          <% end %>

        <% end %>
      </div>
    <% end %>

    <% dialog.with_section(title: t(".details")) do %>
      <div class="pb-4">
        <%= styled_form_with model: @entry,
              url: transaction_path(@entry),
              class: "space-y-2",
              data: { controller: "auto-submit-form" } do |f| %>
          <% unless @entry.transaction.transfer? %>
            <%= f.select :account,
                options_for_select(
                  Current.family.accounts.alphabetically.pluck(:name, :id),
                  @entry.account_id
                ),
                { label: t(".account_label") },
                { disabled: true } %>

            <%= f.fields_for :entryable do |ef| %>

              <%= ef.collection_select :merchant_id,
                    [@entry.transaction.merchant, *Current.family.merchants.alphabetically].compact,
                    :id, :name,
                    { include_blank: t(".none"),
                      label: t(".merchant_label"),
                      class: "text-subdued" },
                    "data-auto-submit-form-target": "auto" %>

              <%= ef.select :tag_ids,
                    Current.family.tags.alphabetically.pluck(:name, :id),
                    {
                      include_blank: t(".none"),
                      multiple: true,
                      label:    t(".tags_label")
                    },
                    { "data-controller": "multi-select", "data-auto-submit-form-target": "auto" } %>
            <% end %>
          <% end %>

          <%= f.text_area :notes,
                  label: t(".note_label"),
                  placeholder: t(".note_placeholder"),
                  rows: 5,
                  "data-auto-submit-form-target": "auto" %>

        <% end %>
      </div>
    <% end %>

    <% if (details = build_transaction_extra_details(@entry)) %>
      <% dialog.with_section(title: "Additional details", open: false) do %>
        <div class="px-3 py-2 space-y-3">
          <% if details[:kind] == :simplefin %>
            <% sf = details[:simplefin] %>
            <% if sf.present? %>
              <dl class="space-y-2">
                <% if sf[:payee].present? %>
                  <div class="flex items-center justify-between gap-2">
                    <dt class="text-secondary text-sm">Payee</dt>
                    <dd class="text-sm text-primary"><%= sf[:payee] %></dd>
                  </div>
                <% end %>
                <% if sf[:description].present? %>
                  <div class="flex items-center justify-between gap-2">
                    <dt class="text-secondary text-sm">Description</dt>
                    <dd class="text-sm text-primary"><%= sf[:description] %></dd>
                  </div>
                <% end %>
                <% if sf[:memo].present? %>
                  <div class="flex items-center justify-between gap-2">
                    <dt class="text-secondary text-sm">Memo</dt>
                    <dd class="text-sm text-primary"><%= sf[:memo] %></dd>
                  </div>
                <% end %>
              </dl>
            <% end %>

            <% if details[:provider_extras].present? %>
              <div class="pt-2">
                <h4 class="text-sm text-secondary mb-1">Provider extras</h4>
                <dl class="space-y-2">
                  <% details[:provider_extras].each do |ex| %>
                    <div class="flex items-center justify-between gap-2">
                      <dt class="text-secondary text-sm"><%= ex[:key] %></dt>
                      <dd class="text-sm text-primary truncate max-w-[60%]" title="<%= ex[:title] %>"><%= ex[:value] %></dd>
                    </div>
                  <% end %>
                </dl>
              </div>
            <% end %>
          <% else %>
            <pre class="text-xs text-secondary bg-surface-inset rounded p-2 overflow-auto"><%= details[:raw] %></pre>
          <% end %>
        </div>
      <% end %>
    <% end %>

    <% dialog.with_section(title: t(".settings")) do %>
      <div class="pb-4">
        <%= styled_form_with model: @entry,
              url: transaction_path(@entry),
              class: "p-3",
              data: { controller: "auto-submit-form" } do |f| %>
          <div class="flex cursor-pointer items-center gap-4 justify-between">
            <div class="text-sm space-y-1">
              <h4 class="text-primary">Exclude</h4>
              <p class="text-secondary">Excluded transactions will be removed from budgeting calculations and reports.</p>
            </div>

            <%= f.toggle :excluded, { data: { auto_submit_form_target: "auto" } } %>
          </div>
        <% end %>
      </div>

      <div class="pb-4">
        <%= styled_form_with model: @entry,
              url: transaction_path(@entry),
              class: "p-3",
              data: { controller: "auto-submit-form" } do |f| %>
          <%= f.fields_for :entryable do |ef| %>
            <div class="flex cursor-pointer items-center gap-4 justify-between">
              <div class="text-sm space-y-1">
                <h4 class="text-primary">One-time <%= @entry.amount.negative? ? "Income" : "Expense" %></h4>
                <p class="text-secondary">One-time transactions will be excluded from certain budgeting calculations and reports to help you see what's really important.</p>
              </div>

              <%= ef.toggle :kind, {
                    checked: @entry.transaction.one_time?,
                    data: { auto_submit_form_target: "auto" }
                  }, "one_time", "standard" %>
            </div>
          <% end %>
        <% end %>

        <div class="flex items-center justify-between gap-4 p-3">
          <div class="text-sm space-y-1">
            <h4 class="text-primary">Transfer or Debt Payment?</h4>
            <p class="text-secondary">Transfers and payments are special types of transactions that indicate money movement between 2 accounts.</p>
          </div>

          <%= render DS::Link.new(
            text: "Open matcher",
            icon: "arrow-left-right",
            variant: "outline",
            href: new_transaction_transfer_match_path(@entry),
            frame: :modal
          ) %>
        </div>

        <!-- Mark as Recurring Form -->
        <div class="flex items-center justify-between gap-2 p-3">
          <div class="text-sm space-y-1">
            <h4 class="text-primary"><%= t(".mark_recurring_title") %></h4>
            <p class="text-secondary"><%= t(".mark_recurring_subtitle") %></p>
          </div>

          <%= render DS::Button.new(
            text: t(".mark_recurring"),
            variant: "outline",
            icon: "repeat",
            href: mark_as_recurring_transaction_path(@entry.transaction),
            method: :post,
            frame: "_top"
          ) %>
        </div>

        <!-- Delete Transaction Form -->
        <div class="flex items-center justify-between gap-2 p-3">
          <div class="text-sm space-y-1">
            <h4 class="text-primary"><%= t(".delete_title") %></h4>
            <p class="text-secondary"><%= t(".delete_subtitle") %></p>
          </div>

          <%= render DS::Button.new(
            text: t(".delete"),
            variant: "outline-destructive",
            href: entry_path(@entry),
            method: :delete,
            confirm: CustomConfirm.for_resource_deletion("transaction"),
            frame: "_top"
          ) %>
        </div>
      </div>
    <% end %>
  <% end %>
<% end %>