QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-07 06:21:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: restore drawer positioning for transaction modals on desktop (#857) (#896)

Browse Source 
* feat: Add responsive dialog behavior for transaction modals

Add responsive option to DS::Dialog component that switches between:
- Mobile (< 1024px): Modal style (centered) with inline close button
- Desktop (≥ 1024px): Drawer style (right side panel) with header close button
Update transaction, transfer, holding, trade, and valuation views to use
responsive behavior, maintaining mobile experience while reverting desktop
to drawer style like budget categories.

Changes:
- app/components/DS/dialog.rb: Add responsive parameter and helper methods
- app/components/DS/dialog.html.erb: Apply responsive styling
- app/views/*/show.html.erb: Add responsive: true and hide close icons on mobile

* fix: Enhance close button accessibility in dialog components

* fix: Refactor dialog component to improve close button handling and accessibility
This commit is contained in:
StalkerSea
2026-02-10 17:02:15 -06:00
committed by GitHub
parent 28d99a2b0d
commit 4cf25ada63
9 changed files with 71 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/DS/dialog.html.erb
View File

@@ -1,16 +1,14 @@
<%= wrapper_element do %>
<%= tag.dialog class: "w-full h-full bg-transparent theme-dark:backdrop:bg-alpha-black-900 backdrop:bg-overlay pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] #{drawer? ? "lg:p-3" : "lg:p-1"}", **merged_opts do %>
<%= tag.dialog class: "w-full h-full bg-transparent theme-dark:backdrop:bg-alpha-black-900 backdrop:bg-overlay pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] #{(drawer? || responsive?) ? "lg:p-3" : "lg:p-1"}", **merged_opts do %>
<%= tag.div class: dialog_outer_classes do %>
<%= tag.div class: dialog_inner_classes, data: { DS__dialog_target: "content" } do %>
<div class="grow overflow-y-auto py-4 space-y-4 flex flex-col">
<% if header? %>
<%= header %>
<% end %>
<% if body? %>
<div class="px-4 grow">
<%= body %>
<% if sections.any? %>
<div class="space-y-4">
<% sections.each do |section| %>
@@ -20,11 +18,9 @@
<% end %>
</div>
<% end %>
<%# Optional, for customizing dialogs %>
<%= content %>
</div>
<% if actions? %>
<div class="flex items-center gap-2 justify-end p-4">
<% actions.each do |action| %>

33
app/components/DS/dialog.rb
View File

@@ -1,9 +1,9 @@
class DS::Dialog < DesignSystemComponent
renders_one :header, ->(title: nil, subtitle: nil, hide_close_icon: false, **opts, &block) do
renders_one :header, ->(title: nil, subtitle: nil, custom_header: false, **opts, &block) do
content_tag(:header, class: "px-4 flex flex-col gap-2", **opts) do
title_div = content_tag(:div, class: "flex items-center justify-between gap-2") do
title = content_tag(:h2, title, class: class_names("font-medium text-primary", drawer? ? "text-lg" : "")) if title
close_icon = render DS::Button.new(variant: "icon", class: "ml-auto", icon: "x", tabindex: "-1", data: { action: "DS--dialog#close" }) unless hide_close_icon
close_icon = close_button unless custom_header
safe_join([ title, close_icon ].compact)
end
@@ -33,7 +33,7 @@ class DS::Dialog < DesignSystemComponent
end
end
attr_reader :variant, :auto_open, :reload_on_close, :width, :disable_frame, :content_class, :disable_click_outside, :opts
attr_reader :variant, :auto_open, :reload_on_close, :width, :disable_frame, :content_class, :disable_click_outside, :opts, :responsive
VARIANTS = %w[modal drawer].freeze
WIDTHS = {
@@ -43,7 +43,7 @@ class DS::Dialog < DesignSystemComponent
full: "lg:max-w-full"
}.freeze
def initialize(variant: "modal", auto_open: true, reload_on_close: false, width: "md", frame: nil, disable_frame: false, content_class: nil, disable_click_outside: false, **opts)
def initialize(variant: "modal", auto_open: true, reload_on_close: false, width: "md", frame: nil, disable_frame: false, content_class: nil, disable_click_outside: false, responsive: false, **opts)
@variant = variant.to_sym
@auto_open = auto_open
@reload_on_close = reload_on_close
@@ -52,6 +52,7 @@ class DS::Dialog < DesignSystemComponent
@disable_frame = disable_frame
@content_class = content_class
@disable_click_outside = disable_click_outside
@responsive = responsive
@opts = opts
end
@@ -69,7 +70,9 @@ class DS::Dialog < DesignSystemComponent
end
def dialog_outer_classes
variant_classes = if drawer?
variant_classes = if responsive?
"items-center justify-center lg:items-end lg:justify-end"
elsif drawer?
"items-end justify-end"
else
"items-center justify-center"
@@ -82,7 +85,9 @@ class DS::Dialog < DesignSystemComponent
end
def dialog_inner_classes
variant_classes = if drawer?
variant_classes = if responsive?
"max-h-full lg:h-full lg:w-[550px]"
elsif drawer?
"lg:w-[550px] h-full"
else
class_names(
@@ -116,4 +121,20 @@ class DS::Dialog < DesignSystemComponent
def drawer?
variant == :drawer
end
def responsive?
@responsive
end
def close_button
classes = responsive? ? "ml-auto hidden lg:flex" : "ml-auto"
render DS::Button.new(
variant: "icon",
class: classes,
icon: "x",
title: I18n.t("common.close"),
aria_label: I18n.t("common.close"),
data: { action: "DS--dialog#close" }
)
end
end

55
app/views/holdings/show.html.erb
View File

@@ -1,21 +1,22 @@
<%= render DS::Dialog.new(frame: "drawer") do |dialog| %>
<% dialog.with_header(hide_close_icon: true) do %>
<%= render DS::Dialog.new(frame: "drawer", responsive: true) do |dialog| %>
<% dialog.with_header(custom_header: true) do %>
<div class="flex items-center justify-between">
<div>
<%= tag.h3 @holding.name, class: "text-2xl font-medium text-primary" %>
<%= tag.p @holding.ticker, class: "text-sm text-secondary" %>
</div>
<% if @holding.security.brandfetch_icon_url.present? %>
<%= image_tag @holding.security.brandfetch_icon_url, loading: "lazy", class: "w-9 h-9 rounded-full" %>
<% elsif @holding.security.logo_url.present? %>
<%= image_tag @holding.security.logo_url, loading: "lazy", class: "w-9 h-9 rounded-full" %>
<% else %>
<%= render DS::FilledIcon.new(variant: :text, text: @holding.name, size: "md", rounded: true) %>
<% end %>
<div class="flex items-center gap-3">
<% if @holding.security.brandfetch_icon_url.present? %>
<%= image_tag @holding.security.brandfetch_icon_url, loading: "lazy", class: "w-9 h-9 rounded-full" %>
<% elsif @holding.security.logo_url.present? %>
<%= image_tag @holding.security.logo_url, loading: "lazy", class: "w-9 h-9 rounded-full" %>
<% else %>
<%= render DS::FilledIcon.new(variant: :text, text: @holding.name, size: "md", rounded: true) %>
<% end %>
<%= dialog.close_button %>
</div>
</div>
<% end %>
<% dialog.with_body do %>
<% dialog.with_section(title: t(".overview"), open: true) do %>
<div class="pb-4">
@@ -33,13 +34,12 @@
<% end %>
<button type="button"
data-action="click->holding-security-remap#toggle"
class="text-secondary hover:text-primary"
aria-label="<%= t('.edit_security') %>">
class="text-secondary hover:text-primary"
aria-label="<%= t('.edit_security') %>">
<%= icon "pencil", size: "xs" %>
</button>
</dd>
</div>
<div data-holding-security-remap-target="form" class="hidden mt-3 space-y-3">
<% if Security.provider.present? %>
<%= form_with url: remap_security_holding_path(@holding), method: :patch, class: "space-y-3" do |f| %>
@@ -64,23 +64,24 @@
<% end %>
</div>
</div>
<div class="flex items-center justify-between text-sm">
<dt class="text-secondary"><%= t(".current_market_price_label") %></dt>
<dd class="text-primary">
<% begin %>
<%= @holding.security.current_price ? format_money(@holding.security.current_price) : t(".unknown") %>
<% rescue ActiveRecord::RecordInvalid, StandardError %>
<% rescue ActiveRecord::RecordInvalid %>
<%= t(".unknown") %>
<% rescue StandardError => e %>
<% logger.error "Error fetching current price for security #{@holding.security.id}: #{e.message}" %>
<% logger.error e.backtrace.first(5).join("\n") %>
<%= t(".unknown") %>
<% end %>
</dd>
</div>
<div class="flex items-center justify-between text-sm">
<dt class="text-secondary"><%= t(".portfolio_weight_label") %></dt>
<dd class="text-primary"><%= @holding.weight ? number_to_percentage(@holding.weight, precision: 2) : t(".unknown") %></dd>
</div>
<%# Average Cost with inline editor %>
<%
currency = Money::Currency.new(@holding.currency)
@@ -103,7 +104,6 @@
</button>
</dd>
</div>
<%# Inline cost basis editor (hidden by default) %>
<div class="hidden mt-3 space-y-3" data-drawer-cost-basis-target="form">
<%
@@ -136,7 +136,7 @@
autocomplete="off"
value="<%= number_with_precision(current_total, precision: 2) if current_total %>"
data-action="input->drawer-cost-basis#updatePerShare"
data-drawer-cost-basis-target="total">
data-drawer-cost-basis-target="total">
<span class="text-secondary text-sm"><%= currency.iso_code %></span>
</div>
</div>
@@ -144,7 +144,6 @@
<p class="text-xs text-secondary -mt-2">
= <%= currency.symbol %><span data-drawer-cost-basis-target="perShareValue"><%= number_with_precision(current_per_share, precision: 2) || "0.00" %></span> <%= t("holdings.cost_basis_cell.per_share") %>
</p>
<!-- Per-share input -->
<div class="pt-2 border-t border-tertiary">
<label class="text-xs text-secondary block mb-1"><%= t("holdings.cost_basis_cell.or_per_share_label") %></label>
@@ -156,11 +155,10 @@
autocomplete="off"
value="<%= number_with_precision(current_per_share, precision: 2) if current_per_share %>"
data-action="input->drawer-cost-basis#updateTotal"
data-drawer-cost-basis-target="perShare">
data-drawer-cost-basis-target="perShare">
<span class="text-secondary text-sm"><%= currency.iso_code %></span>
</div>
</div>
<div class="flex justify-end gap-2 pt-2">
<button type="button"
class="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-primary bg-gray-200 hover:bg-gray-300 theme-dark:bg-gray-700 theme-dark:hover:bg-gray-600"
@@ -172,7 +170,6 @@
<% end %>
</div>
</div>
<div class="flex items-center justify-between text-sm">
<dt class="text-secondary"><%= t(".total_return_label") %></dt>
<% if @holding.trend %>
@@ -186,7 +183,6 @@
</dl>
</div>
<% end %>
<% dialog.with_section(title: t(".history"), open: true) do %>
<div class="space-y-2">
<div class="px-3 py-4">
@@ -200,10 +196,8 @@
<div class="h-12 w-px bg-alpha-black-200"></div>
<% end %>
</div>
<div>
<p class="text-secondary text-xs uppercase"><%= l(trade_entry.date, format: :long) %></p>
<p class="text-primary"><%= t(
".trade_history_entry",
qty: trade_entry.trade.qty,
@@ -214,14 +208,12 @@
</li>
<% end %>
</ul>
<% else %>
<p class="text-secondary"><%= t(".no_trade_history") %></p>
<% end %>
</div>
</div>
<% end %>
<% if @holding.cost_basis_locked? || @holding.security_remapped? || @holding.account.can_delete_holdings? %>
<% dialog.with_section(title: t(".settings"), open: true) do %>
<div class="pb-4">
@@ -231,7 +223,6 @@
<h4 class="text-primary"><%= t(".security_remapped_label") %></h4>
<p class="text-secondary"><%= t(".provider_sent", ticker: @holding.provider_security.ticker) %></p>
</div>
<%= button_to t(".reset_to_provider"),
reset_security_holding_path(@holding),
method: :post,
@@ -243,14 +234,12 @@
} } %>
</div>
<% end %>
<% if @holding.cost_basis_locked? %>
<div class="flex items-center justify-between gap-2 p-3 border-b border-tertiary">
<div class="text-sm space-y-1">
<h4 class="text-primary"><%= t(".cost_basis_locked_label") %></h4>
<p class="text-secondary"><%= t(".cost_basis_locked_description") %></p>
</div>
<%= button_to t(".unlock_cost_basis"),
unlock_cost_basis_holding_path(@holding),
method: :post,
@@ -259,14 +248,12 @@
data: { turbo_confirm: { title: t(".unlock_confirm_title"), body: t(".unlock_confirm_body") } } %>
</div>
<% end %>
<% if @holding.account.can_delete_holdings? %>
<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>
<%= button_to t(".delete"),
holding_path(@holding),
method: :delete,

5
app/views/pages/dashboard/_cashflow_sankey.html.erb
View File

@@ -9,7 +9,6 @@
class: "bg-container border border-secondary font-medium rounded-lg px-3 py-2 text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0" %>
<% end %>
</div>
<% if sankey_data[:links].present? %>
<div class="w-full h-96">
<div
@@ -18,9 +17,8 @@
data-sankey-chart-currency-symbol-value="<%= sankey_data[:currency_symbol] %>"
class="w-full h-full"></div>
</div>
<%= render DS::Dialog.new(id: "cashflow-expanded-dialog", auto_open: false, width: "custom", disable_frame: true, content_class: "!w-[96vw] max-w-[1650px]", data: { action: "close->cashflow-expand#restore" }) do |dialog| %>
<% dialog.with_header(title: t("pages.dashboard.cashflow_sankey.title"), hide_close_icon: false) %>
<% dialog.with_header(title: t("pages.dashboard.cashflow_sankey.title")) %>
<% dialog.with_body do %>
<div class="w-full h-[85dvh] max-h-[90dvh] overflow-y-auto overscroll-contain">
<div
@@ -38,7 +36,6 @@
variant: :container,
icon: "activity" # cashflow placeholder icon
) %>
<p class="text-sm font-medium text-primary"><%= t("pages.dashboard.cashflow_sankey.no_data_title") %></p>
<p class="text-secondary text-sm"><%= t("pages.dashboard.cashflow_sankey.no_data_description") %></p>
<%= render DS::Link.new(

20
app/views/trades/show.html.erb
View File

@@ -1,13 +1,13 @@
<%= render DS::Dialog.new(frame: "drawer") do |dialog| %>
<% dialog.with_header(hide_close_icon: true) do %>
<%= render "trades/header", entry: @entry %>
<%= render DS::Dialog.new(frame: "drawer", responsive: true) do |dialog| %>
<% dialog.with_header(custom_header: true) do %>
<div class="flex items-start justify-between gap-4">
<%= render "trades/header", entry: @entry %>
<%= dialog.close_button %>
</div>
<% end %>
<% trade = @entry.trade %>
<% dialog.with_body do %>
<%= render "entries/protection_indicator", entry: @entry, unlock_path: unlock_trade_path(trade) %>
<% dialog.with_section(title: t(".details"), open: true) do %>
<div class="pb-4">
<%= styled_form_with model: @entry,
@@ -19,13 +19,11 @@
max: Date.current,
disabled: @entry.linked?,
"data-auto-submit-form-target": "auto" %>
<div class="flex items-center gap-2">
<%= f.select :nature,
[[t(".buy"), "outflow"], [t(".sell"), "inflow"]],
{ container_class: "w-1/3", label: t(".type_label"), selected: @entry.amount.negative? ? "outflow" : "inflow" },
{ data: { "auto-submit-form-target": "auto" }, disabled: @entry.linked? } %>
<%= f.fields_for :entryable do |ef| %>
<%= ef.number_field :qty,
label: t(".quantity_label"),
@@ -35,7 +33,6 @@
disabled: @entry.linked? %>
<% end %>
</div>
<%= f.fields_for :entryable do |ef| %>
<%= ef.money_field :price,
label: t(".cost_per_share_label"),
@@ -49,7 +46,6 @@
<% end %>
</div>
<% end %>
<% dialog.with_section(title: t(".additional")) do %>
<div class="pb-4">
<%= styled_form_with model: @entry,
@@ -64,7 +60,6 @@
<% end %>
</div>
<% end %>
<% dialog.with_section(title: t(".settings")) do %>
<div class="pb-4">
<!-- Exclude Trade Form -->
@@ -77,18 +72,15 @@
<h4 class="text-primary"><%= t(".exclude_title") %></h4>
<p class="text-secondary"><%= t(".exclude_subtitle") %></p>
</div>
<%= f.toggle :excluded, { data: { auto_submit_form_target: "auto" } } %>
</div>
<% end %>
<!-- Delete Trade 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>
<%= button_to t(".delete"),
entry_path(@entry),
method: :delete,

8
app/views/transactions/_header.html.erb
View File

@@ -1,32 +1,26 @@
<%# locals: (entry:) %>
<div class="flex items-start justify-between gap-4" id="<%= dom_id(entry, :header) %>">
<div>
<h3 class="font-medium flex items-center gap-2">
<span class="text-2xl text-primary">
<%= format_money -entry.amount_money %>
</span>
<span class="text-lg text-secondary">
<%= entry.currency %>
</span>
<% if entry.transaction.transfer? %>
<%= icon "arrow-left-right", size: "sm", class: "text-secondary" %>
<% end %>
<% if entry.linked? %>
<span title="<%= t('transactions.transaction.linked_with_plaid') %>" class="text-secondary">
<%= icon("refresh-ccw", size: "sm") %>
</span>
<% end %>
</h3>
<div class="flex items-center gap-2">
<span class="text-sm text-secondary">
<%= I18n.l(entry.date, format: :long) %>
</span>
<% if entry.transaction.pending? %>
<span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-1.5 py-0.5 border border-secondary text-secondary" title="<%= t("transactions.transaction.pending_tooltip") %>">
<%= icon "clock", size: "sm", color: "current" %>
@@ -35,6 +29,4 @@
<% end %>
</div>
</div>
<%= render DS::Button.new(variant: "icon", icon: "x", data: { action: "DS--dialog#close" }) %>
</div>

42
app/views/transactions/show.html.erb
View File

@@ -1,8 +1,10 @@
<%= render DS::Dialog.new(frame: "drawer") do |dialog| %>
<% dialog.with_header(hide_close_icon: true) do %>
<%= render "transactions/header", entry: @entry %>
<%= render DS::Dialog.new(frame: "drawer", responsive: true) do |dialog| %>
<% dialog.with_header(custom_header: true) do %>
<div class="flex items-start justify-between gap-4">
<%= render "transactions/header", entry: @entry %>
<%= dialog.close_button %>
</div>
<% end %>
<% dialog.with_body do %>
<%# Potential duplicate alert %>
<% if @entry.transaction.has_potential_duplicate? %>
@@ -14,7 +16,6 @@
<div class="flex-1 space-y-2">
<h4 class="text-sm font-medium text-primary"><%= t("transactions.show.potential_duplicate_title") %></h4>
<p class="text-sm text-secondary"><%= t("transactions.show.potential_duplicate_description") %></p>
<div class="mt-3 p-3 rounded bg-container border border-primary">
<div class="flex items-center justify-between">
<div>
@@ -26,7 +27,6 @@
</p>
</div>
</div>
<div class="flex items-center gap-2 mt-3">
<%= button_to t("transactions.show.merge_duplicate"),
merge_duplicate_transaction_path(@entry.transaction),
@@ -44,33 +44,27 @@
</div>
<% end %>
<% end %>
<%= render "entries/protection_indicator", entry: @entry, unlock_path: unlock_transaction_path(@entry.transaction) %>
<% dialog.with_section(title: t(".overview"), open: true) do %>
<div>
<%= 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,
@@ -79,7 +73,6 @@
disabled: @entry.linked?,
disable_currency: @entry.linked? %>
</div>
<%= f.fields_for :entryable do |ef| %>
<%= ef.collection_select :category_id,
Current.family.categories.alphabetically,
@@ -89,11 +82,9 @@
"data-auto-submit-form-target": "auto" %>
<% end %>
<% end %>
<% end %>
</div>
<% end %>
<% dialog.with_section(title: t(".details")) do %>
<%= styled_form_with model: @entry,
url: transaction_path(@entry),
@@ -107,9 +98,7 @@
),
{ label: t(".account_label") },
{ disabled: true } %>
<%= f.fields_for :entryable do |ef| %>
<%= ef.collection_select :merchant_id,
Current.family.available_merchants.alphabetically,
:id, :name,
@@ -117,7 +106,6 @@
label: t(".merchant_label"),
class: "text-subdued" },
"data-auto-submit-form-target": "auto" %>
<%= ef.select :tag_ids,
Current.family.tags.alphabetically.pluck(:name, :id),
{
@@ -128,16 +116,13 @@
{ "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 %>
<% 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">
@@ -165,7 +150,6 @@
<% end %>
</dl>
<% end %>
<% if details[:provider_extras].present? %>
<div class="pt-2">
<h4 class="text-sm text-secondary mb-1">Provider extras</h4>
@@ -185,7 +169,6 @@
</div>
<% end %>
<% end %>
<% dialog.with_section(title: t(".settings")) do %>
<div class="pb-4">
<%= styled_form_with model: @entry,
@@ -197,12 +180,10 @@
<h4 class="text-primary"><%= t(".exclude") %></h4>
<p class="text-secondary"><%= t(".exclude_description") %></p>
</div>
<%= f.toggle :excluded, { data: { auto_submit_form_target: "auto" } } %>
</div>
<% end %>
</div>
<% if @entry.account.investment? || @entry.account.crypto? %>
<div class="pb-4">
<%= styled_form_with model: @entry,
@@ -215,7 +196,6 @@
<h4 class="text-primary"><%= t(".activity_type") %></h4>
<p class="text-secondary"><%= t(".activity_type_description") %></p>
</div>
<%= ef.select :investment_activity_label,
options_for_select(
[["—", nil]] + Transaction::ACTIVITY_LABELS.map { |l| [t("transactions.activity_labels.#{l.parameterize(separator: '_')}"), l] },
@@ -229,7 +209,6 @@
<% end %>
</div>
<% end %>
<div class="pb-4">
<%= styled_form_with model: @entry,
url: transaction_path(@entry),
@@ -241,7 +220,6 @@
<h4 class="text-primary"><%= t(".one_time_title", type: @entry.amount.negative? ? t("transactions.form.income") : t("transactions.form.expense")) %></h4>
<p class="text-secondary"><%= t(".one_time_description") %></p>
</div>
<%= ef.toggle :kind, {
checked: @entry.transaction.one_time?,
data: { auto_submit_form_target: "auto" }
@@ -249,13 +227,11 @@
</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",
@@ -264,7 +240,6 @@
frame: :modal
) %>
</div>
<!-- Convert to Trade (Investment Accounts Only, not already converted) -->
<% if @entry.account.investment? && @entry.entryable.is_a?(Transaction) && !@entry.excluded? %>
<div class="flex items-center justify-between gap-2 p-3">
@@ -272,7 +247,6 @@
<h4 class="text-primary">Convert to Security Trade</h4>
<p class="text-secondary">Convert this transaction into a security trade (buy/sell) by providing ticker, shares, and price.</p>
</div>
<%= render DS::Button.new(
text: "Convert",
variant: "outline",
@@ -283,14 +257,12 @@
) %>
</div>
<% end %>
<!-- 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",
@@ -300,14 +272,12 @@
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",

21
app/views/transfers/show.html.erb
View File

@@ -1,28 +1,23 @@
<%= render DS::Dialog.new(frame: "drawer") do |dialog| %>
<% dialog.with_header(hide_close_icon: true) do %>
<%= render DS::Dialog.new(frame: "drawer", responsive: true) do |dialog| %>
<% dialog.with_header(custom_header: true) do %>
<div class="flex items-start justify-between gap-4">
<div>
<h3 class="font-medium flex items-center gap-2">
<span class="text-2xl text-primary">
<%= format_money @transfer.amount_abs %>
</span>
<span class="text-lg text-secondary">
<%= @transfer.amount_abs.currency.iso_code %>
</span>
<%= icon "arrow-left-right", size: "sm", class: "text-secondary" %>
</h3>
<span class="text-sm text-secondary">
<%= @transfer.name %>
</span>
</div>
<%= render DS::Button.new(variant: "icon", icon: "x", data: { action: "DS--dialog#close" }) %>
<%= dialog.close_button %>
</div>
<% end %>
<% dialog.with_body do %>
<% dialog.with_section(title: t(".overview"), open: true) do %>
<div class="pb-4 px-3 pt-2 text-sm space-y-3 text-primary">
@@ -34,20 +29,16 @@
<%= link_to @transfer.from_account.name, account_path(@transfer.from_account), data: { turbo_frame: "_top" } %>
</dd>
</dl>
<dl class="flex items-center gap-2 justify-between">
<dt class="text-secondary">Date</dt>
<dd class="font-medium"><%= l(@transfer.outflow_transaction.entry.date, format: :long) %></dd>
</dl>
<dl class="flex items-center gap-2 justify-between">
<dt class="text-secondary">Amount</dt>
<dd class="font-medium text-red-500"><%= format_money @transfer.outflow_transaction.entry.amount_money * -1 %></dd>
</dl>
</div>
<%= render "shared/ruler", classes: "my-2" %>
<div class="space-y-3">
<dl class="flex items-center gap-2 justify-between">
<dt class="text-secondary">To</dt>
@@ -56,12 +47,10 @@
<%= link_to @transfer.to_account.name, account_path(@transfer.to_account), data: { turbo_frame: "_top" } %>
</dd>
</dl>
<dl class="flex items-center gap-2 justify-between">
<dt class="text-secondary">Date</dt>
<dd class="font-medium"><%= l(@transfer.inflow_transaction.entry.date, format: :long) %></dd>
</dl>
<dl class="flex items-center gap-2 justify-between">
<dt class="text-secondary">Amount</dt>
<dd class="font-medium text-green-500">+<%= format_money @transfer.inflow_transaction.entry.amount_money * -1 %></dd>
@@ -69,14 +58,12 @@
</div>
</div>
<% end %>
<% dialog.with_section(title: t(".details")) do %>
<%= styled_form_with model: @transfer,
data: { controller: "auto-submit-form" }, class: "space-y-2" do |f| %>
<% if @transfer.categorizable? %>
<%= f.collection_select :category_id, @categories.alphabetically, :id, :name, { label: "Category", include_blank: "Uncategorized", selected: @transfer.outflow_transaction.category&.id }, "data-auto-submit-form-target": "auto" %>
<% end %>
<%= f.text_area :notes,
label: t(".note_label"),
placeholder: t(".note_placeholder"),
@@ -84,7 +71,6 @@
"data-auto-submit-form-target": "auto" %>
<% end %>
<% end %>
<% dialog.with_section(title: t(".settings")) do %>
<div class="pb-4">
<div class="flex items-center justify-between gap-2 p-3">
@@ -92,7 +78,6 @@
<h4 class="text-primary"><%= t(".delete_title") %></h4>
<p class="text-secondary"><%= t(".delete_subtitle") %></p>
</div>
<%= button_to t(".delete"),
transfer_path(@transfer),
method: :delete,

17
app/views/valuations/show.html.erb
View File

@@ -1,17 +1,17 @@
<% entry, account = @entry, @entry.account %>
<%= render DS::Dialog.new(frame: "drawer") do |dialog| %>
<% dialog.with_header(hide_close_icon: true) do %>
<%= render "valuations/header", entry: @entry %>
<%= render DS::Dialog.new(frame: "drawer", responsive: true) do |dialog| %>
<% dialog.with_header(custom_header: true) do %>
<div class="flex items-start justify-between gap-4">
<%= render "valuations/header", entry: @entry %>
<%= dialog.close_button %>
</div>
<% end %>
<% dialog.with_body do %>
<% if @error_message.present? %>
<div class="mb-4">
<%= render DS::Alert.new(message: @error_message, variant: :error) %>
</div>
<% end %>
<% dialog.with_section(title: t(".overview"), open: true) do %>
<div class="pb-4">
<%= styled_form_with model: entry,
@@ -22,11 +22,9 @@
<%= f.date_field :date,
label: t(".date_label"),
max: Date.current %>
<%= f.money_field :amount,
label: "Account value on date",
disable_currency: true %>
<div class="flex justify-end">
<%= render DS::Button.new(
text: "Update value",
@@ -37,7 +35,6 @@
<% end %>
</div>
<% end %>
<% dialog.with_section(title: t(".details")) do %>
<div class="pb-4">
<%= styled_form_with model: entry,
@@ -53,7 +50,6 @@
<% end %>
</div>
<% end %>
<% dialog.with_section(title: t(".settings")) do %>
<div class="pb-4">
<!-- Delete Valuation Form -->
@@ -62,7 +58,6 @@
<h4 class="text-primary"><%= t(".delete_title") %></h4>
<p class="text-secondary"><%= t(".delete_subtitle") %></p>
</div>
<%= button_to t(".delete"),
entry_path(entry),
method: :delete,