Add institution management and account editing controls (#868)

* Add institution management

* Allow user to select institution on create or edit

* Improve redirect behavior

* Final cleanup

* i18n normalization

app/views/accounts/_account.html.erb

@@ -1,10 +1,14 @@
 <%= turbo_frame_tag dom_id(account) do %>
-  <div class="p-4 flex items-center justify-between gap-3">
+  <div class="p-4 flex items-center justify-between gap-3 group/account">
     <div class="flex items-center gap-3">
       <div class="w-8 h-8 flex items-center justify-center rounded-full text-xs font-medium <%= account.is_active ? "bg-blue-500/10 text-blue-500" : "bg-gray-500/10 text-gray-500" %>">
         <%= account.name[0].upcase %>
       </div>
       <%= link_to account.name, account, class: [(account.is_active ? "text-gray-900" : "text-gray-400"), "text-sm font-medium hover:underline"], data: { turbo_frame: "_top" } %>
+
+      <%= link_to edit_account_path(account), data: { turbo_frame: :modal }, class: "group-hover/account:flex hidden hover:opacity-80 items-center justify-center" do %>
+        <%= lucide_icon "pencil-line", class: "w-4 h-4 text-gray-500" %>
+      <% end %>
     </div>
     <div class="flex items-center gap-8">
       <p class="text-sm font-medium <%= account.is_active ? "text-gray-900" : "text-gray-400" %>">

app/views/accounts/_account_type.html.erb

@@ -1,4 +1,4 @@
-<%= link_to new_account_path(step: "method", type: type.class.name.demodulize), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-25 border border-transparent focus:border focus:border-gray-200 block px-2 hover:bg-gray-25 rounded-lg p-2" do %>
+<%= link_to new_account_path(step: "method", type: type.class.name.demodulize, institution_id: params[:institution_id]), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-25 border border-transparent focus:border focus:border-gray-200 block px-2 hover:bg-gray-25 rounded-lg p-2" do %>
   <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg <%= bg_color %> border border-alpha-black-25">
     <%= lucide_icon(icon, class: "#{text_color} w-5 h-5") %>
   </span>

app/views/accounts/_accountable_group.html.erb

@@ -0,0 +1,17 @@
+<%# locals: (accounts:) %>
+
+<% accounts.group_by(&:accountable_type).each do |group, accounts| %>
+  <div class="bg-gray-25 p-1 rounded-xl">
+    <div class="flex items-center px-4 py-2 text-xs font-medium text-gray-500">
+      <p><%= to_accountable_title(Accountable.from_type(group)) %></p>
+      <span class="text-gray-400 mx-2">&middot;</span>
+      <p><%= accounts.count %></p>
+      <p class="ml-auto"><%= format_money accounts.sum(&:balance_money) %></p>
+    </div>
+    <div class="bg-white">
+      <% accounts.each do |account| %>
+        <%= render account %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

app/views/accounts/_empty.html.erb

@@ -0,0 +1,11 @@
+<div class="flex justify-center items-center h-[800px] text-sm">
+  <div class="text-center flex flex-col items-center max-w-[300px]">
+    <%= tag.p t(".no_accounts"), class: "text-gray-900 mb-1 font-medium" %>
+    <%= tag.p t(".empty_message"), class: "text-gray-500 mb-4" %>
+
+    <%= link_to new_account_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
+      <%= lucide_icon("plus", class: "w-5 h-5") %>
+      <span><%= t(".new_account") %></span>
+    <% end %>
+  </div>
+</div>

app/views/accounts/_entry_method.html.erb

@@ -6,7 +6,7 @@
     <%= text %>
   </span>
 <% else %>
-  <%= link_to new_account_path(type: type.class.name.demodulize), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2" do %>
+  <%= link_to new_account_path(type: type.class.name.demodulize, institution_id: params[:institution_id]), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2" do %>
     <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
       <%= lucide_icon(icon, class: "text-gray-500 w-5 h-5") %>
     </span>

app/views/accounts/_institution_accounts.html.erb

@@ -0,0 +1,69 @@
+<%# locals: (institution:) %>
+
+<details open class="group bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
+  <summary class="flex items-center gap-2 focus-visible:outline-none">
+    <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-gray-500 w-5" %>
+
+    <div class="flex items-center justify-center h-8 w-8 bg-blue-600/10 rounded-full bg-black/5">
+      <% if institution_logo(institution) %>
+        <%= image_tag institution_logo(institution), class: "rounded-full h-full w-full" %>
+      <% else %>
+        <div class="flex items-center justify-center">
+          <%= tag.p institution.name.first.upcase, class: "text-blue-600 text-xs font-medium" %>
+        </div>
+      <% end %>
+    </div>
+
+    <%= link_to institution.name, edit_institution_path(institution), data: { turbo_frame: :modal }, class: "text-sm font-medium text-gray-900 ml-1 mr-auto hover:underline" %>
+
+    <%= contextual_menu do %>
+      <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+        <%= link_to new_account_path(institution_id: institution.id),
+                    class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg",
+                    data: { turbo_frame: :modal } do %>
+          <%= lucide_icon "plus", class: "w-5 h-5 text-gray-500" %>
+
+          <span><%= t(".add_account_to_institution") %></span>
+        <% end %>
+
+        <%= link_to edit_institution_path(institution),
+                    class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg",
+                    data: { turbo_frame: :modal } do %>
+          <%= lucide_icon "pencil-line", class: "w-5 h-5 text-gray-500" %>
+
+          <span><%= t(".edit") %></span>
+        <% end %>
+
+        <%= button_to institution_path(institution),
+                      method: :delete,
+                      class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
+                      data: {
+                        turbo_confirm: {
+                          title: t(".confirm_title"),
+                          body: t(".confirm_body"),
+                          accept: t(".confirm_accept")
+                        }
+                      } do %>
+          <%= lucide_icon "trash-2", class: "w-5 h-5" %>
+
+          <span><%= t(".delete") %></span>
+        <% end %>
+      </div>
+
+    <% end %>
+  </summary>
+
+  <div class="space-y-4 mt-4">
+    <% if institution.accounts.any? %>
+      <%= render "accountable_group", accounts: institution.accounts %>
+    <% else %>
+      <div class="p-4 flex flex-col gap-3 items-center justify-center">
+        <p class="text-gray-500 text-sm">There are no accounts in this financial institution</p>
+        <%= link_to new_account_path(institution_id: institution.id), class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-1.5 pr-2", data: { turbo_frame: "modal" } do %>
+          <%= lucide_icon("plus", class: "w-4 h-4") %>
+          <span><%= t(".new_account") %></span>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</details>

app/views/accounts/_institutionless_accounts.html.erb

@@ -0,0 +1,17 @@
+<%# locals: (accounts:) %>
+
+<details open class="group bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
+  <summary class="flex items-center gap-2 focus-visible:outline-none">
+    <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-gray-500 w-5" %>
+
+    <div class="flex items-center justify-center h-8 w-8 rounded-full bg-black/5">
+      <%= lucide_icon("folder-pen", class: "w-5 h-5 text-gray-500") %>
+    </div>
+
+    <span class="mr-auto text-sm font-medium text-gray-900"><%= t(".other_accounts") %></span>
+  </summary>
+
+  <div class="space-y-4 mt-4">
+    <%= render "accountable_group", accounts: accounts %>
+  </div>
+</details>

app/views/accounts/edit.html.erb

@@ -0,0 +1,21 @@
+<%= modal do %>
+  <article class="mx-auto w-full p-4 space-y-4 min-w-[350px]">
+    <header class="flex justify-between">
+      <h2 class="font-medium text-xl"><%= t(".edit", account: @account.name) %></h2>
+      <%= lucide_icon "x", class: "w-5 h-5 text-gray-500", data: { action: "click->modal#close" } %>
+    </header>
+
+    <%= form_with model: @account, data: { turbo_frame: "_top" } do |f| %>
+      <%= f.text_field :name, label: "Name" %>
+
+      <div class="relative">
+        <%= f.collection_select :institution_id, Current.family.institutions.alphabetically, :id, :name, { include_blank: t(".ungrouped"), label: t(".institution") } %>
+        <%= link_to new_institution_path do %>
+          <%= lucide_icon "plus", class: "text-gray-700 hover:text-gray-500 w-4 h-4 absolute right-3 top-2" %>
+        <% end %>
+      </div>
+
+      <%= f.submit %>
+    <% end %>
+  </article>
+<% end %>

app/views/accounts/index.html.erb

@@ -1,62 +1,45 @@
 <% content_for :sidebar do %>
   <%= render "settings/nav" %>
 <% end %>
+
 <div class="space-y-4">
-  <div class="flex items-center justify-between">
-    <h1 class="text-xl font-medium text-gray-900">Accounts</h1>
-    <%= link_to new_account_path, class: "flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
-      <%= lucide_icon("plus", class: "w-5 h-5") %>
-      <span><%= t(".new_account") %></span>
-    <% end %>
-  </div>
-  <% if @accounts.empty? %>
-    <div class="flex justify-center items-center h-[800px] text-sm">
-      <div class="text-center flex flex-col items-center max-w-[300px]">
-        <p class="text-gray-900 mb-1 font-medium">No accounts yet</p>
-        <p class="text-gray-500 mb-4">Add an account either via connection, importing or entering manually.</p>
-        <%= link_to new_account_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
+  <header class="flex justify-between items-center text-gray-900 font-medium">
+    <h1 class="text-xl"><%= t(".accounts") %></h1>
+    <div class="flex items-center gap-5">
+      <div class="flex items-center gap-2">
+        <%= contextual_menu do %>
+          <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+            <%= link_to new_institution_path,
+                        class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg font-normal",
+                        data: { turbo_frame: "modal" } do %>
+              <%= lucide_icon "building-2", class: "w-5 h-5 text-gray-500" %>
+              <span class="text-black"><%= t(".add_institution") %></span>
+            <% end %>
+          </div>
+        <% end %>
+
+        <%= link_to new_account_path,
+                    data: { turbo_frame: "modal" },
+                    class: "rounded-lg bg-gray-900 text-white flex items-center gap-1 justify-center hover:bg-gray-700 px-3 py-2" do %>
           <%= lucide_icon("plus", class: "w-5 h-5") %>
-          <span><%= t(".new_account") %></span>
+          <p class="text-sm font-medium"><%= t(".new_account") %></p>
         <% end %>
       </div>
     </div>
+  </header>
+
+  <% if @accounts.empty? && @institutions.empty? %>
+    <%= render "empty" %>
   <% else %>
-    <div>
-      <% @accounts.by_provider.each do |item| %>
-        <details open class="bg-white group p-4 border border-alpha-black-25 shadow-xs rounded-xl">
-          <summary class="flex items-center gap-2">
-            <%= lucide_icon("chevron-down", class: "hidden group-open:block w-5 h-5 text-gray-500") %>
-            <%= lucide_icon("chevron-right", class: "group-open:hidden w-5 h-5 text-gray-500") %>
-            <% if item[:name] == "Manual accounts" %>
-              <div class="flex items-center justify-center h-8 w-8 rounded-full bg-black/5">
-                <%= lucide_icon("folder-pen", class: "w-5 h-5 text-gray-500") %>
-              </div>
-            <% end %>
-            <span class="text-sm font-medium text-gray-900">
-              <%= item[:name] %>
-            </span>
-          </summary>
-          <div class="space-y-4 mt-4">
-            <% item[:accounts].each do |group, accounts| %>
-              <div class="bg-gray-25 p-1 rounded-xl">
-                <div class="flex items-center px-4 py-2 text-xs font-medium text-gray-500">
-                  <p><%= to_accountable_title(Accountable.from_type(group)) %></p>
-                  <span class="text-gray-400 mx-2">&middot;</span>
-                  <p><%= accounts.count %></p>
-                  <p class="ml-auto"><%= format_money accounts.sum(&:balance_money) %></p>
-                </div>
-                <div class="bg-white">
-                  <% accounts.each do |account| %>
-                    <%= render account %>
-                  <% end %>
-                </div>
-              </div>
-            <% end %>
-          </div>
-        </details>
+    <div class="space-y-2">
+      <% @institutions.each do |institution| %>
+        <%= render "institution_accounts", institution: %>
       <% end %>
+
+      <%= render "institutionless_accounts", accounts: @accounts %>
     </div>
   <% end %>
+
   <div class="flex justify-between gap-4">
     <% if self_hosted? %>
       <%= previous_setting("Self-Hosting", settings_hosting_path) %>

app/views/accounts/new.html.erb

@@ -76,6 +76,7 @@
         <div class="space-y-4 grow">
           <%= f.hidden_field :accountable_type %>
           <%= f.text_field :name, placeholder: t(".name.placeholder"), required: "required", label: t(".name.label"), autofocus: true %>
+          <%= f.collection_select :institution_id, Current.family.institutions.alphabetically, :id, :name, { include_blank: t(".ungrouped"), label: t(".institution") } %>
           <%= render "accounts/#{permitted_accountable_partial(@account.accountable_type)}", f: f %>
           <%= f.money_field :balance_money, label: t(".balance"), required: "required" %>
 
@@ -83,7 +84,7 @@
             <%= check_box_tag :add_start_values, class: "maybe-checkbox maybe-checkbox--light peer mb-1" %>
             <%= label_tag :add_start_values, t(".optional_start_balance_message"), class: "pl-1 text-sm text-gray-500" %>
 
-            <div class="hidden peer-checked:flex items-center gap-2 mt-3">
+            <div class="hidden peer-checked:flex items-center gap-2 mt-3 mb-6">
               <div class="w-1/2"><%= f.date_field :start_date, label: t(".start_date"), max: Date.current %></div>
               <div class="w-1/2"><%= f.number_field :start_balance, label: t(".start_balance") %></div>
             </div>

app/views/accounts/show.html.erb

@@ -9,15 +9,17 @@
       <%= button_to sync_account_path(@account), method: :post, class: "flex items-center gap-2", title: "Sync Account" do %>
         <%= lucide_icon "refresh-cw", class: "w-4 h-4 text-gray-900 hover:text-gray-500" %>
       <% end %>
-      <div class="relative cursor-not-allowed">
-        <div class="flex items-center gap-2 px-3 py-2">
-          <span class="text-gray-900"><%= @account.balance_money.currency.iso_code %> <%= @account.balance_money.currency.symbol %></span>
-          <%= lucide_icon("chevron-down", class: "w-5 h-5 text-gray-500") %>
-        </div>
-      </div>
 
       <%= contextual_menu do %>
         <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+          <%= link_to edit_account_path(@account),
+                      data: { turbo_frame: :modal },
+                      class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg" do %>
+            <%= lucide_icon "pencil-line", class: "w-5 h-5 text-gray-500" %>
+
+            <span><%= t(".edit") %></span>
+          <% end %>
+
           <%= link_to new_import_path(account_id: @account.id),
                       class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg" do %>
             <%= lucide_icon "download", class: "w-5 h-5 text-gray-500" %>

app/views/institutions/_form.html.erb

@@ -0,0 +1,27 @@
+<%= form_with model: institution, data: { turbo_frame: "_top", controller: "profile-image-preview" } do |f| %>
+
+  <div class="flex justify-center items-center py-4">
+    <%= f.label :logo do %>
+      <div class="relative cursor-pointer hover:opacity-80 w-16 h-16 rounded-full bg-gray-50">
+        <% persisted_logo = institution_logo(institution) %>
+
+        <% if persisted_logo %>
+          <%= image_tag persisted_logo, class: "absolute inset-0 rounded-full w-full h-full object-cover" %>
+        <% end %>
+
+        <div data-profile-image-preview-target="imagePreview" class="absolute inset-0 h-full w-full flex items-center justify-center">
+          <% unless persisted_logo %>
+            <%= lucide_icon "image-plus", class: "w-5 h-5 text-gray-500 cursor-pointer", data: { profile_image_preview_target: "template" } %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <%= f.file_field :logo,
+                   accept: "image/png, image/jpeg",
+                   class: "hidden",
+                   data: { profile_image_preview_target: "fileField", action: "profile-image-preview#preview" } %>
+  <%= f.text_field :name, label: t(".name") %>
+  <%= f.submit %>
+<% end %>

app/views/institutions/edit.html.erb

@@ -0,0 +1,10 @@
+<%= modal do %>
+  <article class="mx-auto w-full p-4 space-y-4 min-w-[350px]">
+    <header class="flex justify-between">
+      <h2 class="font-medium text-xl"><%= t(".edit", institution: @institution.name) %></h2>
+      <%= lucide_icon "x", class: "w-5 h-5 text-gray-500", data: { action: "click->modal#close" } %>
+    </header>
+
+    <%= render "form", institution: @institution %>
+  </article>
+<% end %>

app/views/institutions/new.html.erb

@@ -0,0 +1,10 @@
+<%= modal do %>
+  <article class="mx-auto w-full p-4 space-y-4 min-w-[350px]">
+    <header class="flex justify-between">
+      <h2 class="font-medium text-xl"><%= t(".new_institution") %></h2>
+      <%= lucide_icon "x", class: "w-5 h-5 text-gray-500", data: { action: "click->modal#close" } %>
+    </header>
+
+    <%= render "form", institution: @institution %>
+  </article>
+<% end %>

app/views/settings/profiles/show.html.erb

@@ -8,7 +8,7 @@
       <%= form_with model: Current.user, url: settings_profile_path, html: {data: { controller: "profile-image-preview" }} do |form| %>
         <div class="flex items-center gap-4">
           <div class="relative flex justify-center items-center bg-gray-50 w-24 h-24 rounded-full border border-alpha-black-25">
-            <div data-profile-image-preview-target="imagePreview">
+            <div data-profile-image-preview-target="imagePreview" class="h-full w-full flex justify-center items-center">
               <% profile_image_attached = Current.user.profile_image.attached? %>
               <% if profile_image_attached %>
                 <div class="h-24 w-24">

app/views/shared/_modal.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (content:, classes:) -%>
 <%= turbo_frame_tag "modal" do %>
-  <dialog class="bg-white border border-alpha-black-25 rounded-2xl max-h-[648px] max-w-[580px] w-min-content shadow-xs h-fit <%= classes %>" data-controller="modal" data-action="click->modal#clickOutside">
+  <dialog class="bg-white border border-alpha-black-25 rounded-2xl max-w-[580px] w-min-content shadow-xs h-fit <%= classes %>" data-controller="modal" data-action="click->modal#clickOutside">
     <div class="flex flex-col">
       <%= content %>
     </div>