mirror of
https://github.com/we-promise/sure.git
synced 2026-04-08 06:44:52 +00:00
187 lines
9.6 KiB
Plaintext
187 lines
9.6 KiB
Plaintext
<div class="space-y-4 flex flex-col">
|
|
<header class="flex justify-between items-center text-primary font-medium">
|
|
<h1 class="text-xl"><%= t("recurring_transactions.title") %></h1>
|
|
<div class="flex items-center gap-2">
|
|
<% unless @family.recurring_transactions_disabled? %>
|
|
<%= render DS::Menu.new do |menu| %>
|
|
<% menu.with_item(
|
|
variant: "button",
|
|
text: t("recurring_transactions.cleanup_stale"),
|
|
href: cleanup_recurring_transactions_path,
|
|
method: :post,
|
|
icon: "trash-2") %>
|
|
<% end %>
|
|
|
|
<%= render DS::Link.new(
|
|
text: t("recurring_transactions.identify_patterns"),
|
|
icon: "search",
|
|
variant: "outline",
|
|
href: identify_recurring_transactions_path,
|
|
method: :post
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="bg-container rounded-xl shadow-border-xs p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-primary"><%= t("recurring_transactions.settings.enable_label") %></p>
|
|
<p class="text-xs text-secondary"><%= t("recurring_transactions.settings.enable_description") %></p>
|
|
</div>
|
|
<%= form_with url: update_settings_recurring_transactions_path, method: :patch, data: { turbo_frame: "_top", controller: "auto-submit-form" } do |f| %>
|
|
<%= f.hidden_field :recurring_transactions_disabled, value: @family.recurring_transactions_disabled? ? "false" : "true" %>
|
|
<%= render DS::Toggle.new(
|
|
id: "recurring_transactions_enabled",
|
|
name: "toggle_display",
|
|
checked: !@family.recurring_transactions_disabled?,
|
|
data: { auto_submit_form_target: "auto" }
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<% unless @family.recurring_transactions_disabled? %>
|
|
<div class="p-4 bg-container-inset border border-secondary rounded-lg">
|
|
<div class="flex items-start gap-2">
|
|
<%= icon "info", class: "w-5 h-5 text-link mt-0.5 flex-shrink-0" %>
|
|
<div>
|
|
<p class="text-sm font-medium text-primary mb-2"><%= t("recurring_transactions.info.title") %></p>
|
|
<p class="text-xs text-secondary mb-2"><%= t("recurring_transactions.info.manual_description") %></p>
|
|
<p class="text-xs text-secondary mb-1"><%= t("recurring_transactions.info.automatic_description") %></p>
|
|
<ul class="list-disc list-inside text-xs text-secondary space-y-0.5 ml-2">
|
|
<% t("recurring_transactions.info.triggers").each do |trigger| %>
|
|
<li><%= trigger %></li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-container rounded-xl shadow-border-xs p-4">
|
|
<% if @recurring_transactions.empty? %>
|
|
<div class="text-center py-12">
|
|
<div class="text-secondary mb-4">
|
|
<%= icon "repeat", size: "xl" %>
|
|
</div>
|
|
<p class="text-primary font-medium mb-2"><%= t("recurring_transactions.empty.title") %></p>
|
|
<p class="text-secondary text-sm mb-4"><%= t("recurring_transactions.empty.description") %></p>
|
|
<%= render DS::Link.new(
|
|
text: t("recurring_transactions.identify_patterns"),
|
|
icon: "search",
|
|
variant: "primary",
|
|
href: identify_recurring_transactions_path,
|
|
method: :post
|
|
) %>
|
|
</div>
|
|
<% else %>
|
|
<div class="rounded-xl bg-container-inset space-y-1 p-1">
|
|
<div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
|
|
<p><%= t("recurring_transactions.title") %></p>
|
|
<span class="text-subdued">·</span>
|
|
<p><%= @recurring_transactions.count %></p>
|
|
</div>
|
|
|
|
<div class="bg-container rounded-lg shadow-border-xs overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="text-xs uppercase font-medium text-secondary border-b border-divider">
|
|
<th class="text-left py-3 px-2"><%= t("recurring_transactions.table.merchant") %></th>
|
|
<th class="text-left py-3 px-2"><%= t("recurring_transactions.table.amount") %></th>
|
|
<th class="text-left py-3 px-2"><%= t("recurring_transactions.table.expected_day") %></th>
|
|
<th class="text-left py-3 px-2"><%= t("recurring_transactions.table.next_date") %></th>
|
|
<th class="text-left py-3 px-2"><%= t("recurring_transactions.table.last_occurrence") %></th>
|
|
<th class="text-left py-3 px-2"><%= t("recurring_transactions.table.status") %></th>
|
|
<th class="text-right py-3 px-2"><%= t("recurring_transactions.table.actions") %></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% @recurring_transactions.each do |recurring_transaction| %>
|
|
<tr class="border-b border-subdued hover:bg-surface-hover <%= "opacity-60" unless recurring_transaction.active? %>">
|
|
<td class="py-3 px-2 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<% if recurring_transaction.merchant.present? %>
|
|
<% if recurring_transaction.merchant.logo_url.present? %>
|
|
<%= image_tag recurring_transaction.merchant.logo_url,
|
|
class: "w-6 h-6 rounded-full",
|
|
loading: "lazy" %>
|
|
<% else %>
|
|
<%= render DS::FilledIcon.new(
|
|
variant: :text,
|
|
text: recurring_transaction.merchant.name,
|
|
size: "sm",
|
|
rounded: true
|
|
) %>
|
|
<% end %>
|
|
<span class="text-primary font-medium"><%= recurring_transaction.merchant.name %></span>
|
|
<% else %>
|
|
<%= render DS::FilledIcon.new(
|
|
variant: :text,
|
|
text: recurring_transaction.name,
|
|
size: "sm",
|
|
rounded: true
|
|
) %>
|
|
<span class="text-primary font-medium"><%= recurring_transaction.name %></span>
|
|
<% end %>
|
|
<% if recurring_transaction.manual? %>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-tint-10 text-link">
|
|
<%= t("recurring_transactions.badges.manual") %>
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-2 text-sm font-medium <%= recurring_transaction.amount.negative? ? "text-success" : "text-primary" %>">
|
|
<% if recurring_transaction.manual? && recurring_transaction.has_amount_variance? %>
|
|
<div class="inline-flex items-center gap-1 cursor-help group" title="<%= t("recurring_transactions.amount_range", min: format_money(-recurring_transaction.expected_amount_min_money), max: format_money(-recurring_transaction.expected_amount_max_money)) %>">
|
|
<span class="text-xs text-secondary group-hover:text-primary transition-colors">~</span>
|
|
<span class="border-b border-dashed border-subdued group-hover:border-primary transition-colors"><%= format_money(-recurring_transaction.expected_amount_avg_money) %></span>
|
|
</div>
|
|
<% else %>
|
|
<%= format_money(-recurring_transaction.amount_money) %>
|
|
<% end %>
|
|
</td>
|
|
<td class="py-3 px-2 text-sm text-secondary">
|
|
<%= t("recurring_transactions.day_of_month", day: recurring_transaction.expected_day_of_month) %>
|
|
</td>
|
|
<td class="py-3 px-2 text-sm text-secondary">
|
|
<%= l(recurring_transaction.next_expected_date, format: :short) %>
|
|
</td>
|
|
<td class="py-3 px-2 text-sm text-secondary">
|
|
<%= l(recurring_transaction.last_occurrence_date, format: :short) %>
|
|
</td>
|
|
<td class="py-3 px-2 text-sm">
|
|
<% if recurring_transaction.active? %>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-50 text-success">
|
|
<%= t("recurring_transactions.status.active") %>
|
|
</span>
|
|
<% else %>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-inset text-primary">
|
|
<%= t("recurring_transactions.status.inactive") %>
|
|
</span>
|
|
<% end %>
|
|
</td>
|
|
<td class="py-3 px-2 text-sm text-right">
|
|
<div class="flex items-center justify-end gap-2">
|
|
<%= link_to toggle_status_recurring_transaction_path(recurring_transaction),
|
|
data: { turbo_method: :post },
|
|
class: "text-secondary hover:text-primary" do %>
|
|
<%= icon recurring_transaction.active? ? "pause" : "play", size: "sm" %>
|
|
<% end %>
|
|
<%= link_to recurring_transaction_path(recurring_transaction),
|
|
data: { turbo_method: :delete, turbo_confirm: t("recurring_transactions.confirm_delete") },
|
|
class: "text-secondary hover:text-destructive" do %>
|
|
<%= icon "trash-2", size: "sm" %>
|
|
<% end %>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|