Improvements (#379)

* Improvements

- Fix button visibility in reports on light theme
- Unify logic for provider syncs
- Add default option is to skip accounts linking ( no op default )

* Stability fixes and UX improvements

* FIX add unlinking when deleting lunch flow connection as well

* Wrap updates in transaction

* Some more improvements

* FIX proper provider setup check

* Make provider section collapsible

* Fix balance calculation

* Restore focus ring

* Use browser default focus

* Fix lunch flow balance for credit cards

app/views/accounts/index/_manual_accounts.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (accounts:) %>
 
 <details open class="group bg-container p-4 shadow-border-xs rounded-xl">
-  <summary class="flex items-center gap-2 focus-visible:outline-hidden">
+  <summary class="flex items-center gap-2">
     <%= icon("chevron-right", class: "group-open:transform group-open:rotate-90") %>
 
     <div class="flex items-center justify-center h-8 w-8 rounded-full bg-black/5">

app/views/lunchflow_items/_lunchflow_item.html.erb

@@ -2,7 +2,7 @@
 
 <%= tag.div id: dom_id(lunchflow_item) do %>
   <details open class="group bg-container p-4 shadow-border-xs rounded-xl">
-    <summary class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
+    <summary class="flex items-center justify-between gap-2">
       <div class="flex items-center gap-2">
         <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
 
@@ -23,6 +23,11 @@
               <p class="text-destructive text-sm animate-pulse"><%= t(".deletion_in_progress") %></p>
             <% end %>
           </div>
+          <% if lunchflow_item.accounts.any? %>
+            <p class="text-xs text-secondary">
+              <%= lunchflow_item.institution_summary %>
+            </p>
+          <% end %>
           <% if lunchflow_item.syncing? %>
             <div class="text-secondary flex items-center gap-1">
               <%= icon "loader", size: "sm", class: "animate-spin" %>
@@ -35,7 +40,15 @@
             </div>
           <% else %>
             <p class="text-secondary">
-              <%= lunchflow_item.last_synced_at ? t(".status", timestamp: time_ago_in_words(lunchflow_item.last_synced_at)) : t(".status_never") %>
+              <% if lunchflow_item.last_synced_at %>
+                <% if lunchflow_item.sync_status_summary %>
+                  <%= t(".status_with_summary", timestamp: time_ago_in_words(lunchflow_item.last_synced_at), summary: lunchflow_item.sync_status_summary) %>
+                <% else %>
+                  <%= t(".status", timestamp: time_ago_in_words(lunchflow_item.last_synced_at)) %>
+                <% end %>
+              <% else %>
+                <%= t(".status_never") %>
+              <% end %>
             </p>
           <% end %>
         </div>
@@ -67,10 +80,36 @@
       <div class="space-y-4 mt-4">
         <% if lunchflow_item.accounts.any? %>
           <%= render "accounts/index/account_groups", accounts: lunchflow_item.accounts %>
-        <% else %>
+        <% end %>
+
+        <%# Use model methods for consistent counts %>
+        <% unlinked_count = lunchflow_item.unlinked_accounts_count %>
+        <% linked_count = lunchflow_item.linked_accounts_count %>
+        <% total_count = lunchflow_item.total_accounts_count %>
+
+        <% if unlinked_count > 0 %>
+          <div class="p-4 flex flex-col gap-3 items-center justify-center">
+            <p class="text-primary font-medium text-sm"><%= t(".setup_needed") %></p>
+            <p class="text-secondary text-sm"><%= t(".setup_description", linked: linked_count, total: total_count) %></p>
+            <%= render DS::Link.new(
+              text: t(".setup_action"),
+              icon: "settings",
+              variant: "primary",
+              href: setup_accounts_lunchflow_item_path(lunchflow_item),
+              frame: :modal
+            ) %>
+          </div>
+        <% elsif lunchflow_item.accounts.empty? && total_count == 0 %>
           <div class="p-4 flex flex-col gap-3 items-center justify-center">
             <p class="text-primary font-medium text-sm"><%= t(".no_accounts_title") %></p>
             <p class="text-secondary text-sm"><%= t(".no_accounts_description") %></p>
+            <%= render DS::Link.new(
+              text: t(".setup_action"),
+              icon: "settings",
+              variant: "primary",
+              href: setup_accounts_lunchflow_item_path(lunchflow_item),
+              frame: :modal
+            ) %>
           </div>
         <% end %>
       </div>

app/views/lunchflow_items/_subtype_select.html.erb

@@ -0,0 +1,23 @@
+<div class="subtype-select" data-type="<%= account_type %>" style="display: none;">
+  <% if subtype_config[:options].present? %>
+    <%= label_tag "account_subtypes[#{lunchflow_account.id}]", subtype_config[:label],
+                 class: "block text-sm font-medium text-primary mb-2" %>
+    <% selected_value = "" %>
+    <% if account_type == "Depository" %>
+      <% n = lunchflow_account.name.to_s.downcase %>
+      <% selected_value = "" %>
+      <% if n =~ /\bchecking\b|\bchequing\b|\bck\b|demand\s+deposit/ %>
+        <% selected_value = "checking" %>
+      <% elsif n =~ /\bsavings\b|\bsv\b/ %>
+        <% selected_value = "savings" %>
+      <% elsif n =~ /money\s+market|\bmm\b/ %>
+        <% selected_value = "money_market" %>
+      <% end %>
+    <% end %>
+    <%= select_tag "account_subtypes[#{lunchflow_account.id}]",
+                  options_for_select([["Select #{account_type == 'Depository' ? 'subtype' : 'type'}", ""]] + subtype_config[:options], selected_value),
+                  { class: "appearance-none bg-container border border-primary rounded-md px-3 py-2 text-sm leading-6 text-primary focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none w-full" } %>
+  <% else %>
+    <p class="text-sm text-secondary"><%= subtype_config[:message] %></p>
+  <% end %>
+</div>

app/views/lunchflow_items/setup_accounts.html.erb

@@ -0,0 +1,111 @@
+<% content_for :title, "Set Up Lunch Flow Accounts" %>
+
+<%= render DS::Dialog.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) do %>
+    <div class="flex items-center gap-2">
+      <%= icon "building-2", class: "text-primary" %>
+      <span class="text-primary"><%= t(".subtitle") %></span>
+    </div>
+  <% end %>
+
+  <% dialog.with_body do %>
+    <%= form_with url: complete_account_setup_lunchflow_item_path(@lunchflow_item),
+                  method: :post,
+                  local: true,
+                  data: {
+                    controller: "loading-button",
+                    action: "submit->loading-button#showLoading",
+                    loading_button_loading_text_value: t(".creating_accounts"),
+                    turbo_frame: "_top"
+                  },
+                  class: "space-y-6" do |form| %>
+
+      <div class="space-y-4">
+        <% if @api_error.present? %>
+          <div class="p-8 flex flex-col gap-3 items-center justify-center text-center">
+            <%= icon "alert-circle", size: "lg", class: "text-destructive" %>
+            <p class="text-primary font-medium"><%= t(".fetch_failed") %></p>
+            <p class="text-destructive text-sm"><%= @api_error %></p>
+          </div>
+        <% elsif @lunchflow_accounts.empty? %>
+          <div class="p-8 flex flex-col gap-3 items-center justify-center text-center">
+            <%= icon "check-circle", size: "lg", class: "text-success" %>
+            <p class="text-primary font-medium"><%= t(".no_accounts_to_setup") %></p>
+            <p class="text-secondary text-sm"><%= t(".all_accounts_linked") %></p>
+          </div>
+        <% else %>
+          <div class="bg-surface border border-primary p-4 rounded-lg">
+            <div class="flex items-start gap-3">
+              <%= icon "info", size: "sm", class: "text-primary mt-0.5 flex-shrink-0" %>
+              <div>
+                <p class="text-sm text-primary mb-2">
+                  <strong><%= t(".choose_account_type") %></strong>
+                </p>
+                <ul class="text-xs text-secondary space-y-1 list-disc list-inside">
+                  <% @account_type_options.reject { |_, type| type == "skip" }.each do |label, type| %>
+                    <li><strong><%= label %></strong></li>
+                  <% end %>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <% @lunchflow_accounts.each do |lunchflow_account| %>
+          <div class="border border-primary rounded-lg p-4">
+            <div class="flex items-center justify-between mb-3">
+              <div>
+                <h3 class="font-medium text-primary">
+                  <%= lunchflow_account.name %>
+                  <% if lunchflow_account.institution_metadata.present? && lunchflow_account.institution_metadata['name'].present? %>
+                    <span class="text-secondary">• <%= lunchflow_account.institution_metadata["name"] %></span>
+                  <% end %>
+                </h3>
+                <p class="text-sm text-secondary">
+                  <%= t(".balance") %>: <%= number_to_currency(lunchflow_account.current_balance || 0, unit: lunchflow_account.currency) %>
+                </p>
+              </div>
+            </div>
+
+            <div class="space-y-3" data-controller="account-type-selector" data-account-type-selector-account-id-value="<%= lunchflow_account.id %>">
+              <div>
+                <%= label_tag "account_types[#{lunchflow_account.id}]", t(".account_type_label"),
+                             class: "block text-sm font-medium text-primary mb-2" %>
+                <%= select_tag "account_types[#{lunchflow_account.id}]",
+                              options_for_select(@account_type_options, "skip"),
+                              { class: "appearance-none bg-container border border-primary rounded-md px-3 py-2 text-sm leading-6 text-primary focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none w-full",
+                                data: {
+                                  action: "change->account-type-selector#updateSubtype"
+                                } } %>
+              </div>
+
+              <!-- Subtype dropdowns (shown/hidden based on account type) -->
+              <div data-account-type-selector-target="subtypeContainer">
+                <% @subtype_options.each do |account_type, subtype_config| %>
+                  <%= render "lunchflow_items/subtype_select", account_type: account_type, subtype_config: subtype_config, lunchflow_account: lunchflow_account %>
+                <% end %>
+              </div>
+            </div>
+          </div>
+          <% end %>
+        <% end %>
+      </div>
+
+      <div class="flex gap-3">
+        <%= render DS::Button.new(
+          text: t(".create_accounts"),
+          variant: "primary",
+          icon: "plus",
+          type: "submit",
+          class: "flex-1",
+          disabled: @api_error.present? || @lunchflow_accounts.empty?,
+          data: { loading_button_target: "button" }
+        ) %>
+        <%= render DS::Link.new(
+          text: t(".cancel"),
+          variant: "secondary",
+          href: accounts_path
+        ) %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

app/views/plaid_items/_plaid_item.html.erb

@@ -2,7 +2,7 @@
 
 <%= tag.div id: dom_id(plaid_item) do %>
   <details open class="group bg-container p-4 shadow-border-xs rounded-xl">
-    <summary class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
+    <summary class="flex items-center justify-between gap-2">
       <div class="flex items-center gap-2">
         <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
 

app/views/settings/_section.html.erb

@@ -1,12 +1,31 @@
-<%# locals: (title:, subtitle: nil, content:) %>
-<section class="bg-container shadow-border-xs rounded-xl p-4 space-y-4">
-  <div>
-    <h2 class="text-lg font-medium text-primary"><%= title %></h2>
-    <% if subtitle.present? %>
-      <p class="text-secondary text-sm mt-1"><%= subtitle %></p>
-    <% end %>
-  </div>
-  <div class="space-y-4">
-    <%= content %>
-  </div>
-</section>
+<%# locals: (title:, subtitle: nil, content:, collapsible: false, open: true) %>
+<% if collapsible %>
+  <details <%= "open" if open %> class="group bg-container shadow-border-xs rounded-xl p-4">
+    <summary class="flex items-center justify-between gap-2 cursor-pointer rounded-lg list-none [&::-webkit-details-marker]:hidden">
+      <div class="flex items-center gap-2">
+        <%= icon "chevron-right", class: "text-secondary group-open:transform group-open:rotate-90 transition-transform" %>
+        <div>
+          <h2 class="text-lg font-medium text-primary"><%= title %></h2>
+          <% if subtitle.present? %>
+            <p class="text-secondary text-sm"><%= subtitle %></p>
+          <% end %>
+        </div>
+      </div>
+    </summary>
+    <div class="space-y-4 mt-4">
+      <%= content %>
+    </div>
+  </details>
+<% else %>
+  <section class="bg-container shadow-border-xs rounded-xl p-4 space-y-4">
+    <div>
+      <h2 class="text-lg font-medium text-primary"><%= title %></h2>
+      <% if subtitle.present? %>
+        <p class="text-secondary text-sm mt-1"><%= subtitle %></p>
+      <% end %>
+    </div>
+    <div class="space-y-4">
+      <%= content %>
+    </div>
+  </section>
+<% end %>

app/views/settings/providers/_lunchflow_panel.html.erb

@@ -52,11 +52,14 @@
     </div>
   <% end %>
 
-  <% items = local_assigns[:lunchflow_items] || @lunchflow_items || Current.family.lunchflow_items.where.not(api_key: nil) %>
-  <% if items&.any? %>
-    <div class="flex items-center gap-2">
+  <% items = local_assigns[:lunchflow_items] || @lunchflow_items || Current.family.lunchflow_items.where.not(api_key: [nil, ""]) %>
+  <div class="flex items-center gap-2">
+    <% if items&.any? %>
       <div class="w-2 h-2 bg-success rounded-full"></div>
       <p class="text-sm text-secondary">Configured and ready to use. Visit the <a href="<%= accounts_path %>" class="link">Accounts</a> tab to manage and set up accounts.</p>
-    </div>
-  <% end %>
+    <% else %>
+      <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+      <p class="text-sm text-secondary">Not configured</p>
+    <% end %>
+  </div>
 </div>

app/views/settings/providers/_provider_form.html.erb

@@ -74,10 +74,13 @@
   <% end %>
 
   <%# Show configuration status %>
-  <% if configuration.configured? %>
-    <div class="flex items-center gap-2 mt-4">
+  <div class="flex items-center gap-2 mt-4">
+    <% if configuration.configured? %>
       <div class="w-2 h-2 bg-success rounded-full"></div>
       <p class="text-sm text-secondary">Configured and ready to use</p>
-    </div>
-  <% end %>
+    <% else %>
+      <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+      <p class="text-sm text-secondary">Not configured</p>
+    <% end %>
+  </div>
 </div>

app/views/settings/providers/_simplefin_panel.html.erb

@@ -36,12 +36,13 @@
     </div>
   <% end %>
 
-  <% if @simplefin_items&.any? %>
-    <div class="flex items-center gap-2">
+  <div class="flex items-center gap-2">
+    <% if @simplefin_items&.any? %>
       <div class="w-2 h-2 bg-success rounded-full"></div>
       <p class="text-sm text-secondary">Configured and ready to use. Visit the <a href="<%= accounts_path %>" class="link">Accounts</a> tab to manage and set up accounts.</p>
-    </div>
-  <% else %>
-    <div class="text-sm text-secondary">No SimpleFIN connections yet.</div>
-  <% end %>
+    <% else %>
+      <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+      <p class="text-sm text-secondary">Not configured</p>
+    <% end %>
+  </div>
 </div>

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

@@ -1,6 +1,6 @@
 <%= content_for :page_title, "Bank Sync Providers" %>
 
-<div class="space-y-8">
+<div class="space-y-4">
   <div>
     <p class="text-secondary mb-4">
       Configure credentials for third-party bank sync providers. Settings configured here will override environment variables.
@@ -9,18 +9,18 @@
 
   <% @provider_configurations.each do |config| %>
     <% next if config.provider_key.to_s.casecmp("simplefin").zero? %>
-    <%= settings_section title: config.provider_key.titleize do %>
+    <%= settings_section title: config.provider_key.titleize, collapsible: true, open: false do %>
       <%= render "settings/providers/provider_form", configuration: config %>
     <% end %>
   <% end %>
 
-  <%= settings_section title: "Lunch Flow" do %>
+  <%= settings_section title: "Lunch Flow", collapsible: true, open: false do %>
     <turbo-frame id="lunchflow-providers-panel">
       <%= render "settings/providers/lunchflow_panel" %>
     </turbo-frame>
   <% end %>
 
-  <%= settings_section title: "SimpleFIN" do %>
+  <%= settings_section title: "SimpleFIN", collapsible: true, open: false do %>
     <turbo-frame id="simplefin-providers-panel">
       <%= render "settings/providers/simplefin_panel" %>
     </turbo-frame>

app/views/simplefin_items/_simplefin_item.html.erb

@@ -2,7 +2,7 @@
 
 <%= tag.div id: dom_id(simplefin_item) do %>
   <details open class="group bg-container p-4 shadow-border-xs rounded-xl">
-    <summary class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
+    <summary class="flex items-center justify-between gap-2">
       <div class="flex items-center gap-2">
         <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
 

app/views/simplefin_items/setup_accounts.html.erb

@@ -79,7 +79,7 @@
                 <%= label_tag "account_types[#{simplefin_account.id}]", "Account Type:",
                              class: "block text-sm font-medium text-primary mb-2" %>
                 <% inferred = @inferred_map[simplefin_account.id] || {} %>
-                <% selected_type = inferred[:confidence] == :high ? inferred[:type] : "" %>
+                <% selected_type = inferred[:confidence] == :high ? inferred[:type] : "skip" %>
                 <%= select_tag "account_types[#{simplefin_account.id}]",
                               options_for_select(@account_type_options, selected_type),
                               { class: "appearance-none bg-container border border-primary rounded-md px-3 py-2 text-sm leading-6 text-primary focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none w-full",