Files
sure/app/views/transactions/index.html.erb
Zach Gollwitzer 90a9546f32 Pre-launch design sync with Figma spec (#2154)
* Add lookbook + viewcomponent, organize design system file

* Build menu component

* Button updates

* More button fixes

* Replace all menus with new ViewComponent

* Checkpoint: fix tests, all buttons and menus converted

* Split into Link and Button components for clarity

* Button cleanup

* Simplify custom confirmation configuration in views

* Finalize button, link component API

* Add toggle field to custom form builder + Component

* Basic tabs component

* Custom tabs, convert all menu / tab instances in app

* Gem updates

* Centralized icon helper

* Update all icon usage to central helper

* Lint fixes

* Centralize all disclosure instances

* Dialog replacements

* Consolidation of all dialog styles

* Test fixes

* Fix app layout issues, move to component with slots

* Layout simplification

* Flakey test fix

* Fix dashboard mobile issues

* Finalize homepage

* Lint fixes

* Fix shadows and borders in dark mode

* Fix tests

* Remove stale class

* Fix filled icon logic

* Move transparent? to public interface
2025-04-30 18:14:22 -04:00

98 lines
4.3 KiB
Plaintext

<div class="space-y-4 pb-20 flex flex-col" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
<header class="flex justify-between items-center text-primary font-medium">
<h1 class="text-xl">Transactions</h1>
<div class="flex items-center gap-5">
<div class="flex items-center gap-2">
<%= render MenuComponent.new do |menu| %>
<% menu.with_item(variant: "button", text: "Dev only: Sync all", href: sync_all_accounts_path, method: :post, icon: "refresh-cw") %>
<% menu.with_item(variant: "link", text: "New rule", href: new_rule_path(resource_type: "transaction"), icon: "plus", data: { turbo_frame: :modal }) %>
<% menu.with_item(variant: "link", text: "Edit rules", href: rules_path, icon: "git-branch", data: { turbo_frame: :_top }) %>
<% menu.with_item(variant: "link", text: "Edit categories", href: categories_path, icon: "shapes", data: { turbo_frame: :_top }) %>
<% menu.with_item(variant: "link", text: "Edit tags", href: tags_path, icon: "tags", data: { turbo_frame: :_top }) %>
<% menu.with_item(variant: "link", text: "Edit merchants", href: family_merchants_path, icon: "store", data: { turbo_frame: :_top }) %>
<% menu.with_item(variant: "link", text: "Edit imports", href: imports_path, icon: "hard-drive-upload", data: { turbo_frame: :_top }) %>
<% menu.with_item(variant: "link", text: "Import", href: new_import_path, icon: "download", data: { turbo_frame: "modal", class_name: "md:!hidden" }) %>
<% end %>
<div class="hidden md:flex">
<%= render LinkComponent.new(
text: t(".import"),
icon: "download",
variant: "outline",
href: new_import_path,
frame: :modal,
) %>
</div>
<%= render LinkComponent.new(
text: "New transaction",
icon: "plus",
variant: "primary",
href: new_transaction_path,
frame: :modal,
class: "hidden md:inline-flex"
) %>
<%= render LinkComponent.new(
icon: "plus",
variant: "icon-inverse",
href: new_transaction_path,
frame: :modal,
class: "rounded-full md:hidden"
) %>
</div>
</div>
</header>
<%= render "summary", totals: @totals %>
<div id="transactions"
data-controller="bulk-select"
data-bulk-select-singular-label-value="<%= t(".transaction") %>"
data-bulk-select-plural-label-value="<%= t(".transactions") %>"
class="flex flex-col bg-container rounded-xl shadow-border-xs p-4">
<%= render "transactions/searches/search" %>
<div id="entry-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
<%= render "transactions/selection_bar" %>
</div>
<% if @pagy.count > 0 %>
<div class="grow overflow-y-auto">
<div class="grid-cols-12 bg-container-inset rounded-xl px-5 py-3 text-xs uppercase font-medium text-secondary items-center mb-4 hidden md:grid">
<div class="pl-0.5 col-span-8 flex items-center gap-4">
<%= check_box_tag "selection_entry",
class: "checkbox checkbox--light",
data: { action: "bulk-select#togglePageSelection" } %>
<p>transaction</p>
</div>
<p class="col-span-2">category</p>
<p class="col-span-2 justify-self-end">amount</p>
</div>
<% if @transactions.any? %>
<div class="md:hidden text-xs uppercase font-medium text-secondary mb-2 px-2">
<%= check_box_tag "selection_entry",
class: "checkbox checkbox--light mr-2 ml-1",
data: { action: "bulk-select#togglePageSelection" } %>
<span>TRANSACTION</span>
</div>
<% end %>
<div class="space-y-6">
<%= entries_by_date(@transactions.map(&:entry), totals: true) do |entries| %>
<%= render entries %>
<% end %>
</div>
</div>
<% else %>
<%= render "entries/empty" %>
<% end %>
<div class="pt-4">
<%= render "shared/pagination", pagy: @pagy %>
</div>
</div>
</div>