Add loan and credit card views (#1268)

* Add loan and credit card views

* Lint fix

* Clean up overview card markup

* Lint fix

* Test fix

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

@@ -0,0 +1,21 @@
+<div>
+  <hr class="my-4">
+
+  <div class="space-y-2">
+    <%= f.fields_for :accountable do |credit_card_form| %>
+      <div class="flex items-center gap-2">
+        <%= credit_card_form.text_field :available_credit, label: t(".available_credit"), placeholder: t(".available_credit_placeholder") %>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <%= credit_card_form.text_field :minimum_payment, label: t(".minimum_payment"), placeholder: t(".minimum_payment_placeholder") %>
+        <%= credit_card_form.text_field :apr, label: t(".apr"), placeholder: t(".apr_placeholder") %>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <%= credit_card_form.date_field :expiration_date, label: t(".expiration_date") %>
+        <%= credit_card_form.text_field :annual_fee, label: t(".annual_fee"), placeholder: t(".annual_fee_placeholder") %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+<div>
+  <hr class="my-4">
+
+  <div class="space-y-2">
+    <%= f.fields_for :accountable do |loan_form| %>
+      <div class="flex items-center gap-2">
+        <%= loan_form.text_field :interest_rate, label: t(".interest_rate"), placeholder: t(".interest_rate_placeholder") %>
+        <%= loan_form.select :rate_type, options_for_select([["Fixed", "fixed"], ["Variable", "variable"], ["Adjustable", "adjustable"]]), { label: t(".rate_type") } %>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <%= loan_form.number_field :term_months, label: t(".term_months"), placeholder: t(".term_months_placeholder") %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -3,6 +3,8 @@
 <div>
   <hr class="my-4">
 
+  <h3 class="my-4 font-medium"><%= t(".additional_info") %> (<%= t(".optional") %>)</h3>
+
   <div class="space-y-2">
     <%= f.fields_for :accountable do |af| %>
       <div class="flex gap-2">
@@ -15,18 +17,18 @@
 
       <%= 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 :line1, label: t(".line1"), placeholder: "123 Main St" %>
           <%= 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 %>
+          <%= address_form.text_field :locality, label: t(".city"), placeholder: "Sacramento" %>
+          <%= address_form.text_field :region, label: t(".state"), placeholder: "CA" %>
         </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 %>
+          <%= address_form.text_field :country, label: t(".country"), placeholder: "USA" %>
         </div>
       <% end %>
     <% end %>

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

@@ -0,0 +1,27 @@
+<%# locals: (account:) %>
+
+<div class="grid grid-cols-3 gap-2">
+  <%= summary_card title: t(".amount_owed") do %>
+    <%= format_money(account.balance) %>
+  <% end %>
+
+  <%= summary_card title: t(".available_credit") do %>
+    <%= format_money(account.credit_card.available_credit) || t(".unknown") %>
+  <% end %>
+
+  <%= summary_card title: t(".minimum_payment") do %>
+    <%= format_money(account.credit_card.minimum_payment) || t(".unknown") %>
+  <% end %>
+
+  <%= summary_card title: t(".apr") do %>
+    <%= account.credit_card.apr ? number_to_percentage(account.credit_card.apr, precision: 2) : t(".unknown") %>
+  <% end %>
+
+  <%= summary_card title: t(".expiration_date") do %>
+    <%= account.credit_card.expiration_date ? l(account.credit_card.expiration_date, format: :long) : t(".unknown") %>
+  <% end %>
+
+  <%= summary_card title: t(".annual_fee") do %>
+    <%= format_money(account.credit_card.annual_fee) || t(".unknown") %>
+  <% end %>
+</div>

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

@@ -0,0 +1,41 @@
+<%# locals: (account:) %>
+
+<div class="grid grid-cols-3 gap-2">
+  <%= summary_card title: t(".original_principal") do %>
+    <%= format_money account.original_balance %>
+  <% end %>
+
+  <%= summary_card title: t(".remaining_principal") do %>
+    <%= format_money account.balance %>
+  <% end %>
+
+  <%= summary_card title: t(".interest_rate") do %>
+    <% if account.loan.interest_rate.present? %>
+      <%= number_to_percentage(account.loan.interest_rate, precision: 2) %>
+    <% else %>
+      <%= t(".unknown") %>
+    <% end %>
+  <% end %>
+
+  <%= summary_card title: t(".monthly_payment") do %>
+    <% if account.loan.rate_type.present? && account.loan.rate_type != 'fixed' %>
+      <%= t(".not_applicable") %>
+    <% elsif account.loan.rate_type == 'fixed' && account.loan.monthly_payment.present? %>
+      <%= format_money(account.loan.monthly_payment) %>
+    <% else %>
+      <%= t(".unknown") %>
+    <% end %>
+  <% end %>
+
+  <%= summary_card title: t(".term") do %>
+    <% if account.loan.term_months.present? %>
+      <%= pluralize(account.loan.term_months / 12, "year") %>
+    <% else %>
+      <%= t(".unknown") %>
+    <% end %>
+  <% end %>
+
+  <%= summary_card title: t(".type") do %>
+    <%= account.loan.rate_type&.titleize || t(".unknown") %>
+  <% end %>
+</div>

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

@@ -1,20 +1,15 @@
 <%# 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>
+  <%= summary_card title: t(".market_value") do %>
+    <%= format_money(account.balance_money) %>
+  <% end %>
 
-  <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>
+  <%= summary_card title: t(".purchase_price") do %>
+    <%= account.property.purchase_price ? format_money(account.property.purchase_price) : t(".unknown") %>
+  <% end %>
 
-  <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>
+  <%= summary_card title: t(".trend") do %>
     <div class="flex items-center gap-1" style="color: <%= account.property.trend.color %>">
       <p class="text-xl font-medium">
         <%= account.property.trend.value %>
@@ -22,19 +17,13 @@
 
       <p>(<%= account.property.trend.percent %>%)</p>
     </div>
-  </div>
+  <% end %>
 
-  <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>
+  <%= summary_card title: t(".year_built") do %>
+    <%= account.property.year_built || t(".unknown") %>
+  <% end %>
 
-  <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>
+  <%= summary_card title: t(".living_area") do %>
+    <%= account.property.area || t(".unknown") %>
+  <% end %>
 </div>

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

@@ -1,43 +1,27 @@
 <%# 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(".make_model") %></h4>
-    <p class="text-xl font-medium text-gray-900">
-      <%= [account.vehicle.make, account.vehicle.model].compact.join(" ").presence || t(".unknown") %>
-    </p>
-  </div>
+  <%= summary_card title: t(".make_model") do %>
+    <%= [account.vehicle.make, account.vehicle.model].compact.join(" ").presence || t(".unknown") %>
+  <% end %>
 
-  <div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
-    <h4 class="text-gray-500 text-sm"><%= t(".year") %></h4>
-    <p class="text-xl font-medium text-gray-900">
-      <%= account.vehicle.year || t(".unknown") %>
-    </p>
-  </div>
+  <%= summary_card title: t(".year") do %>
+    <%= account.vehicle.year || t(".unknown") %>
+  <% end %>
 
-  <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(".mileage") %></h4>
-    <p class="text-xl font-medium text-gray-900">
-      <%= account.vehicle.mileage || t(".unknown") %>
-    </p>
-  </div>
+  <%= summary_card title: t(".mileage") do %>
+    <%= account.vehicle.mileage || t(".unknown") %>
+  <% end %>
 
-  <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">
-      <%= format_money account.vehicle.purchase_price %>
-    </p>
-  </div>
+  <%= summary_card title: t(".purchase_price") do %>
+    <%= format_money account.vehicle.purchase_price %>
+  <% end %>
 
-  <div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
-    <h4 class="text-gray-500 text-sm"><%= t(".current_price") %></h4>
-    <p class="text-xl font-medium text-gray-900">
-      <%= format_money account.balance_money %>
-    </p>
-  </div>
+  <%= summary_card title: t(".current_price") do %>
+    <%= format_money account.balance_money %>
+  <% end %>
 
-  <div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
-    <h4 class="text-gray-500 text-sm"><%= t(".trend") %></h4>
+  <%= summary_card title: t(".trend") do %>
     <div class="flex items-center gap-1" style="color: <%= account.vehicle.trend.color %>">
       <p class="text-xl font-medium">
         <%= account.vehicle.trend.value %>
@@ -45,5 +29,5 @@
 
       <p>(<%= account.vehicle.trend.percent %>%)</p>
     </div>
-  </div>
+  <% end %>
 </div>