Add Property Details View (#1116)

* Add backend for property account details

* Rubocop updates

* Add property form with details

* Revert "Rubocop updates"

This reverts commit 05b0b8f3a4.

* Bump brakeman to latest version

* Add overview section to property view

* Lint fixes

app/views/accounts/_form.html.erb

@@ -0,0 +1,21 @@
+<%# locals: (account:, url:) %>
+
+<%= styled_form_with model: account, url: url, scope: :account, class: "flex flex-col gap-4 justify-between grow", data: { turbo: false } do |f| %>
+  <div class="grow space-y-2">
+    <%= 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") } %>
+    <%= money_with_currency_field f, :balance_money, label: t(".balance"), required: "required", default_currency: Current.family.currency %>
+
+    <% if account.new_record? %>
+      <div class="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.yesterday, min: Account::Entry.min_supported_date %></div>
+        <div class="w-1/2"><%= f.number_field :start_balance, label: t(".start_balance"), placeholder: 90 %></div>
+      </div>
+    <% end %>
+
+    <%= render "accounts/accountables/#{permitted_accountable_partial(account.accountable_type)}", f: f %>
+  </div>
+
+  <%= f.submit "#{account.new_record? ? "Add" : "Update"} #{account.accountable.model_name.human.downcase}" %>
+<% end %>

app/views/accounts/_overview.html.erb

@@ -0,0 +1,3 @@
+<%# locals: (account:) %>
+
+<%= render partial: "accounts/accountables/#{account.accountable_type.downcase}/overview", locals: { account: account } %>

app/views/accounts/accountables/_property.html.erb

@@ -0,0 +1,34 @@
+<%# locals: (f:) %>
+
+<div>
+  <hr class="my-4">
+
+  <div class="space-y-2">
+    <%= f.fields_for :accountable do |af| %>
+      <div class="flex gap-2">
+        <%= af.number_field :year_built, label: t(".year_built"), placeholder: 2005 %>
+        <%= af.number_field :area_value, label: t(".area_value"), placeholder: 2000 %>
+        <%= af.select :area_unit,
+                  [["Square feet", "sqft"], ["Square meters", "sqm"]],
+                  { label: t(".area_unit") } %>
+      </div>
+
+      <%= af.fields_for :address do |address_form| %>
+        <div class="flex gap-2">
+          <%= address_form.text_field :line1, label: t(".line1"), placeholder: "123 Main St", required: true %>
+          <%= address_form.text_field :line2, label: t(".line2"), placeholder: "Apt 1" %>
+        </div>
+
+        <div class="flex gap-2">
+          <%= address_form.text_field :locality, label: t(".city"), placeholder: "Sacramento", required: true %>
+          <%= address_form.text_field :region, label: t(".state"), placeholder: "CA", required: true %>
+        </div>
+
+        <div class="flex gap-2">
+          <%= address_form.text_field :postal_code, label: t(".postal_code"), placeholder: "95814" %>
+          <%= address_form.text_field :country, label: t(".country"), placeholder: "USA", required: true %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

app/views/accounts/accountables/property/_overview.html.erb

@@ -0,0 +1,40 @@
+<%# locals: (account:) %>
+
+<div class="grid grid-cols-3 gap-2">
+  <div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
+    <h4 class="text-gray-500 text-sm"><%= t(".market_value") %></h4>
+    <p class="text-xl font-medium text-gray-900"><%= format_money(account.balance_money) %></p>
+  </div>
+
+  <div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
+    <h4 class="text-gray-500 text-sm"><%= t(".purchase_price") %></h4>
+    <p class="text-xl font-medium text-gray-900">
+      <%= account.property.purchase_price ? format_money(account.property.purchase_price) : t(".unknown") %>
+    </p>
+  </div>
+
+  <div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
+    <h4 class="text-gray-500 text-sm flex items-center gap-1"><%= t(".trend") %></h4>
+    <div class="flex items-center gap-1" style="color: <%= account.property.trend.color %>">
+      <p class="text-xl font-medium">
+        <%= account.property.trend.value %>
+      </p>
+
+      <p>(<%= account.property.trend.percent %>%)</p>
+    </div>
+  </div>
+
+  <div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
+    <h4 class="text-gray-500 text-sm"><%= t(".year_built") %></h4>
+    <p class="text-xl font-medium text-gray-900">
+      <%= account.property.year_built || t(".unknown") %>
+    </p>
+  </div>
+
+  <div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
+    <h4 class="text-gray-500 text-sm"><%= t(".living_area") %></h4>
+    <p class="text-xl font-medium text-gray-900">
+      <%= account.property.area || t(".unknown") %>
+    </p>
+  </div>
+</div>

app/views/accounts/edit.html.erb

@@ -1,15 +1,3 @@
 <%= modal_form_wrapper title: t(".edit", account: @account.name) do %>
-  <%= styled_form_with model: @account, class: "space-y-4", data: { turbo_frame: "_top" } do |f| %>
-    <%= f.text_field :name, label: t(".name") %>
-    <%= money_with_currency_field f, :balance_money, label: t(".balance"), default_currency: @account.currency, disable_currency: true %>
-
-    <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 %>
+  <%= render "form", account: @account, url: edit_account_form_url(@account) %>
 <% end %>

app/views/accounts/new.html.erb

@@ -73,26 +73,10 @@
         <% end %>
         <span>Add <%= @account.accountable.model_name.human.downcase %></span>
       </div>
-      <%= styled_form_with model: @account, url: accounts_path, scope: :account, class: "m-5 mt-1 flex flex-col justify-between grow", data: { turbo: false } do |f| %>
-        <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/accountables/#{permitted_accountable_partial(@account.accountable_type)}", f: f %>
-          <%= money_with_currency_field f, :balance_money, label: t(".balance"), required: "required", default_currency: Current.family.currency %>
 
-          <div>
-            <%= 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 mb-6">
-              <div class="w-1/2"><%= f.date_field :start_date, label: t(".start_date"), max: Date.yesterday, min: Account::Entry.min_supported_date %></div>
-              <div class="w-1/2"><%= f.number_field :start_balance, label: t(".start_balance") %></div>
-            </div>
-          </div>
-        </div>
-        <%= f.submit "Add #{@account.accountable.model_name.human.downcase}" %>
-      <% end %>
+      <div class="p-4 pt-1">
+        <%= render "form", account: @account, url: new_account_form_url(@account) %>
+      </div>
     <% end %>
   </div>
 <% end %>

app/views/accounts/show.html.erb

@@ -1,10 +1,16 @@
 <%= turbo_stream_from @account %>
 
 <%= tag.div id: dom_id(@account), class: "space-y-4" do %>
-  <div class="flex justify-between items-center">
+  <header class="flex justify-between items-center">
     <div class="flex items-center gap-3">
       <%= image_tag account_logo_url(@account), class: "w-8 h-8" %>
-      <h2 class="font-medium text-xl"><%= @account.name %></h2>
+      <div>
+        <h2 class="font-medium text-xl"><%= @account.name %></h2>
+
+        <% if @account.property? && @account.property.address %>
+          <p class="text-gray-500"><%= @account.property.address %></p>
+        <% end %>
+      </div>
     </div>
     <div class="flex items-center gap-3">
       <%= button_to sync_account_path(@account), method: :post, class: "flex items-center gap-2", title: "Sync Account" do %>
@@ -43,7 +49,7 @@
         </div>
       <% end %>
     </div>
-  </div>
+  </header>
 
   <% if @account.highest_priority_issue %>
     <%= render partial: "issues/issue", locals: { issue: @account.highest_priority_issue } %>
@@ -79,7 +85,10 @@
     </div>
   </div>
 
-  <% selected_tab_key, selected_tab_content_path = selected_account_tab(@account).values_at(:key, :content_path) %>
+  <% selected_tab = selected_account_tab(@account) %>
+  <% selected_tab_key = selected_tab[:key] %>
+  <% selected_tab_partial_path = selected_tab[:partial_path] %>
+  <% selected_tab_route = selected_tab[:route] %>
 
   <div class="flex gap-2 text-sm text-gray-900 font-medium mb-4">
     <% account_tabs(@account).each do |tab| %>
@@ -88,8 +97,12 @@
   </div>
 
   <div class="min-h-[800px]">
-    <%= turbo_frame_tag dom_id(@account, selected_tab_key), src: selected_tab_content_path do %>
-      <%= render "account/entries/loading" %>
+    <% if selected_tab_route.present? %>
+      <%= turbo_frame_tag dom_id(@account, selected_tab_key), src: selected_tab_route do %>
+        <%= render "account/entries/loading" %>
+      <% end %>
+    <% else %>
+      <%= render selected_tab_partial_path, account: @account %>
     <% end %>
   </div>
 <% end %>