Basic Plaid Integration (#1433)

* Basic plaid data model and linking

* Remove institutions, add plaid items

* Improve schema and Plaid provider

* Add webhook verification sketch

* Webhook verification

* Item accounts and balances sync setup

* Provide test encryption keys

* Fix test

* Only provide encryption keys in prod

* Try defining keys in test env

* Consolidate account sync logic

* Add back plaid account initialization

* Plaid transaction sync

* Sync UI overhaul for Plaid

* Add liability and investment syncing

* Handle investment webhooks and process current day holdings

* Remove logs

* Remove "all" period select for performance

* fix amount calc

* Remove todo comment

* Coming soon for investment historical data

* Document Plaid configuration

* Listen for holding updates

app/views/accounts/_account_type.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (accountable:) %>
 
-<%= link_to new_polymorphic_path(accountable, institution_id: params[:institution_id], step: "method_select", return_to: params[:return_to]),
+<%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]),
             class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
   <span style="background-color: color-mix(in srgb, <%= accountable.color %> 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
     <%= lucide_icon(accountable.icon, style: "color: #{accountable.color}", class: "w-5 h-5") %>

app/views/accounts/_form.html.erb

@@ -5,12 +5,6 @@
     <%= form.hidden_field :accountable_type %>
     <%= form.hidden_field :return_to, value: params[:return_to] %>
 
-    <% if account.new_record? %>
-      <%= form.hidden_field :institution_id %>
-    <% else %>
-      <%= form.collection_select :institution_id, Current.family.institutions.alphabetically, :id, :name, { include_blank: t(".ungrouped"), label: t(".institution") } %>
-    <% end %>
-
     <%= form.text_field :name, placeholder: t(".name_placeholder"), required: "required", label: t(".name_label") %>
     <%= form.money_field :balance, label: t(".balance"), required: true, default_currency: Current.family.currency %>
 

app/views/accounts/_sync_all_button.html.erb

@@ -1,4 +0,0 @@
-<%= button_to sync_all_accounts_path, class: "btn btn--outline flex items-center gap-2", title: t(".sync") do %>
-  <%= lucide_icon "refresh-cw", class: "w-5 h-5" %>
-  <span><%= t(".sync") %></span>
-<% end %>

app/views/accounts/index.html.erb

@@ -7,19 +7,14 @@
     <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>
+        <%= button_to sync_all_accounts_path,
+                      disabled: Current.family.syncing?,
+                      class: "btn btn--outline flex items-center gap-2",
+                      title: t(".sync") do %>
+          <%= lucide_icon "refresh-cw", class: "w-5 h-5" %>
+          <span><%= t(".sync") %></span>
         <% end %>
 
-        <%= render "sync_all_button" %>
-
         <%= link_to new_account_path(return_to: accounts_path),
                     data: { turbo_frame: "modal" },
                     class: "btn btn--primary flex items-center gap-1" do %>
@@ -30,16 +25,16 @@
     </div>
   </header>
 
-  <% if @accounts.empty? && @institutions.empty? %>
+  <% if @manual_accounts.empty? && @plaid_items.empty? %>
     <%= render "empty" %>
   <% else %>
     <div class="space-y-2">
-      <% @institutions.each do |institution| %>
-        <%= render "accounts/index/institution_accounts", institution: %>
+      <% if @plaid_items.any? %>
+        <%= render @plaid_items.sort_by(&:created_at) %>
       <% end %>
 
-      <% if @accounts.any? %>
-        <%= render "accounts/index/institutionless_accounts", accounts: @accounts %>
+      <% if @manual_accounts.any? %>
+        <%= render "accounts/index/manual_accounts", accounts: @manual_accounts %>
       <% end %>
     </div>
   <% end %>

app/views/accounts/index/_account_groups.erb

@@ -1,6 +1,6 @@
 <%# locals: (accounts:) %>
 
-<% accounts.group_by(&:accountable_type).each do |group, accounts| %>
+<% accounts.group_by(&:accountable_type).sort_by { |group, _| group }.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>

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

@@ -1,91 +0,0 @@
-<%# locals: (institution:) %>
-
-<details open class="group bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
-  <summary class="flex items-center justify-between gap-2 focus-visible:outline-none">
-    <div class="flex items-center gap-2">
-      <%= 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>
-
-      <div class="pl-1 text-sm">
-        <%= link_to institution.name, edit_institution_path(institution), data: { turbo_frame: :modal }, class: "font-medium text-gray-900 hover:underline" %>
-        <% if institution.has_issues? %>
-          <div class="flex items-center gap-1 text-error">
-            <%= lucide_icon "alert-octagon", class: "shrink-0 w-4 h-4" %>
-            <%= tag.span t(".has_issues") %>
-          </div>
-        <% elsif institution.syncing? %>
-          <div class="text-gray-500 flex items-center gap-1">
-            <%= lucide_icon "loader", class: "w-4 h-4 animate-pulse" %>
-            <%= tag.span t(".syncing") %>
-          </div>
-        <% else %>
-          <p class="text-gray-500"><%= institution.last_synced_at ? t(".status", last_synced_at: time_ago_in_words(institution.last_synced_at)) : t(".status_never") %></p>
-        <% end %>
-      </div>
-    </div>
-
-    <div class="flex items-center gap-2">
-      <%= button_to sync_institution_path(institution), method: :post, class: "text-gray-900 flex hover:text-gray-800 items-center text-sm font-medium hover:underline" do %>
-        <%= lucide_icon "refresh-cw", class: "w-4 h-4" %>
-      <% end %>
-
-      <%= 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, return_to: accounts_path),
-                    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 %>
-    </div>
-  </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, return_to: accounts_path), 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/index/_manual_accounts.html.erb

@@ -12,6 +12,6 @@
   </summary>
 
   <div class="space-y-4 mt-4">
-    <%= render "accountable_group", accounts: accounts %>
+    <%= render "accounts/index/account_groups", accounts: accounts %>
   </div>
 </details>

app/views/accounts/new/_method_selector.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (path:) %>
+<%# locals: (path:, link_token: nil) %>
 
 <%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
   <div class="text-sm">
@@ -9,11 +9,13 @@
       <%= t("accounts.new.method_selector.manual_entry") %>
     <% end %>
 
-    <span class="flex items-center w-full gap-4 p-2 px-2 text-center border border-transparent rounded-lg cursor-not-allowed focus:outline-none focus:bg-gray-50 focus:border focus:border-gray-200 text-gray-400">
-      <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("link-2", class: "text-gray-500 w-5 h-5") %>
-      </span>
-      <%= t("accounts.new.method_selector.connected_entry") %>
-    </span>
+    <% if link_token.present? %>
+      <button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-link-token-value="<%= @link_token %>" 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">
+        <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("link-2", class: "text-gray-500 w-5 h-5") %>
+        </span>
+        <%= t("accounts.new.method_selector.connected_entry") %>
+      </button>
+    <% end %>
   </div>
 <% end %>

app/views/accounts/show/_header.html.erb

@@ -20,8 +20,10 @@
     <% end %>
 
     <div class="flex items-center gap-3 ml-auto">
-      <%= 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-500 hover:text-gray-400" %>
+      <% unless account.plaid_account_id.present? %>
+        <%= button_to sync_account_path(account), disabled: account.syncing?, class: "flex items-center gap-2", title: "Sync Account" do %>
+          <%= lucide_icon "refresh-cw", class: "w-4 h-4 text-gray-500 hover:text-gray-400" %>
+        <% end %>
       <% end %>
 
       <%= render "accounts/show/menu", account: account %>

app/views/accounts/show/_menu.html.erb

@@ -2,23 +2,32 @@
 
 <%= 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),
+    <% if account.plaid_account_id.present? %>
+      <%= link_to accounts_path,
+                      data: { turbo_frame: :_top },
+                      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(".manage") %></span>
+      <% end %>
+    <% else %>
+      <%= 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" %>
+        <%= lucide_icon "pencil-line", class: "w-5 h-5 text-gray-500" %>
 
-      <span><%= t(".edit") %></span>
-    <% end %>
+        <span><%= t(".edit") %></span>
+      <% end %>
 
-    <%= link_to new_import_path,
+      <%= link_to new_import_path,
                       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 "download", class: "w-5 h-5 text-gray-500" %>
+        <%= lucide_icon "download", class: "w-5 h-5 text-gray-500" %>
 
-      <span><%= t(".import") %></span>
-    <% end %>
+        <span><%= t(".import") %></span>
+      <% end %>
 
-    <%= button_to account_path(account),
+      <%= button_to account_path(account),
                         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: {
@@ -29,7 +38,8 @@
                             accept: t(".confirm_accept", name: account.name)
                           }
                         } do %>
-      <%= lucide_icon("trash-2", class: "w-5 h-5 mr-2") %> Delete account
+        <%= lucide_icon("trash-2", class: "w-5 h-5 mr-2") %> Delete account
+      <% end %>
     <% end %>
   </div>
 <% end %>