New Design System + Codebase Refresh (#1823)

Since the very first 0.1.0-alpha.1 release, we've been moving quickly to add new features to the Maybe app. In doing so, some parts of the codebase have become outdated, unnecessary, or overly-complex as a natural result of this feature prioritization.

Now that "core" Maybe is complete, we're moving into a second phase of development where we'll be working hard to improve the accuracy of existing features and build additional features on top of "core". This PR is a quick overhaul of the existing codebase aimed to:

- Establish the brand new and simplified dashboard view (pictured above)
- Establish and move towards the conventions introduced in Cursor rules and project design overview #1788
- Consolidate layouts and improve the performance of layout queries
- Organize the core models of the Maybe domain (i.e. Account::Entry, Account::Transaction, etc.) and break out specific traits of each model into dedicated concerns for better readability
- Remove stale / dead code from codebase
- Remove overly complex code paths in favor of simpler ones

app/views/budget_categories/_budget_category.html.erb

@@ -32,7 +32,7 @@
         <% end %>
       <% else %>
         <p class="text-sm text-secondary font-medium">
-          <%= format_money(budget_category.category.avg_monthly_total_money, precision: 0) %> avg
+          <%= budget_category.median_monthly_expense_money.format %> avg
         </p>
       <% end %>
     </div>

app/views/budget_categories/_budget_category_form.html.erb

@@ -2,13 +2,13 @@
 
 <% currency = Money::Currency.new(budget_category.budget.currency) %>
 
-<div id=<%= dom_id(budget_category, :form) %> class="w-full flex gap-3">
+<div id="<%= dom_id(budget_category, :form) %>" class="w-full flex gap-3">
   <div class="w-1 h-3 rounded-xl mt-1" style="background-color: <%= budget_category.category.color %>"></div>
 
   <div class="text-sm mr-3">
     <p class="text-primary font-medium mb-0.5"><%= budget_category.category.name %></p>
 
-    <p class="text-secondary"><%= format_money(budget_category.category.avg_monthly_total_money, precision: 0) %>/m average</p>
+    <p class="text-secondary"><%= budget_category.median_monthly_expense_money.format(precision: 0) %>/m avg</p>
   </div>
 
   <div class="ml-auto">

app/views/budget_categories/_confirm_button.html.erb

@@ -8,4 +8,4 @@
       Confirm
     </span>
   <% end %>
-</div>
+</div>

app/views/budget_categories/_uncategorized_budget_category_form.html.erb

@@ -7,7 +7,7 @@
 
   <div class="text-sm mr-3">
     <p class="text-primary font-medium mb-0.5"><%= budget_category.category.name %></p>
-    <p class="text-secondary"><%= format_money(Money.new(budget_category.category.avg_monthly_total, budget_category.category.family.currency), precision: 0) %>/m average</p>
+    <p class="text-secondary"><%= budget_category.avg_monthly_expense_money.format(precision: 0) %>/m avg</p>
   </div>
 
   <div class="ml-auto">

app/views/budget_categories/index.html.erb

@@ -16,7 +16,7 @@
 
     <div class="mx-auto max-w-lg">
       <% if @budget.family.categories.empty? %>
-        <div class="bg-white shadow-xs border border-gray-200 rounded-lg p-4">
+        <div class="bg-white shadow-border-xs rounded-lg p-4">
           <%= render "budget_categories/no_categories" %>
         </div>
       <% else %>

app/views/budget_categories/show.html.erb

@@ -4,7 +4,7 @@
       <div>
         <p class="text-sm text-secondary">Category</p>
         <h3 class="text-2xl font-medium text-primary">
-          <%= @budget_category.category.name %>
+          <%= @budget_category.name %>
         </h3>
 
         <% if @budget_category.budget.initialized? %>
@@ -80,14 +80,14 @@
           <div class="flex items-center justify-between text-sm">
             <dt class="text-secondary">Monthly average spending</dt>
             <dd class="text-primary font-medium">
-              <%= format_money @budget_category.category.avg_monthly_total_money, precision: 0 %>
+              <%= @budget_category.avg_monthly_expense_money.format %>
             </dd>
           </div>
 
           <div class="flex items-center justify-between text-sm">
             <dt class="text-secondary">Monthly median spending</dt>
             <dd class="text-primary font-medium">
-              <%= format_money @budget_category.category.median_monthly_total_money, precision: 0 %>
+              <%= @budget_category.median_monthly_expense_money.format %>
             </dd>
           </div>
         </dl>
@@ -106,7 +106,7 @@
         <div class="px-3 py-4 space-y-2">
           <% if @recent_transactions.any? %>
             <ul class="space-y-2 mb-4">
-              <% @recent_transactions.each_with_index do |entry, index| %>
+              <% @recent_transactions.each_with_index do |transaction, index| %>
                 <li class="flex gap-4 text-sm space-y-1">
                   <div class="flex flex-col items-center gap-1.5 pt-2">
                     <div class="rounded-full h-1.5 w-1.5 bg-gray-300"></div>
@@ -118,12 +118,15 @@
                   <div class="flex justify-between w-full">
                     <div>
                       <p class="text-secondary text-xs uppercase">
-                        <%= entry.date.strftime("%b %d") %>
+                        <%= transaction.entry.date.strftime("%b %d") %>
                       </p>
-                      <p class="text-primary"><%= entry.name %></p>
+                      <%= link_to transaction.entry.name,
+                                  transactions_path(focused_record_id: transaction.id),
+                                  class: "text-primary hover:underline",
+                                  data: { turbo_frame: :_top } %>
                     </div>
                     <p class="text-primary font-medium">
-                      <%= format_money entry.amount_money %>
+                      <%= format_money transaction.entry.amount_money %>
                     </p>
                   </div>
                 </li>
@@ -132,7 +135,7 @@
 
             <%= link_to "View all category transactions",
                   transactions_path(q: {
-                    categories: [@budget_category.category.name],
+                    categories: [@budget_category.name],
                     start_date: @budget.start_date,
                     end_date: @budget.end_date
                   }),

app/views/budget_categories/update.turbo_stream.erb

@@ -4,16 +4,15 @@
 
 <%= turbo_stream.replace dom_id(@budget, :confirm_button), partial: "budget_categories/confirm_button", locals: { budget: @budget } %>
 
-
 <% if @budget_category.subcategory? %>
   <%# Update sibling subcategories when a subcategory changes %>
   <% @budget_category.siblings.each do |sibling| %>
     <%= turbo_stream.update dom_id(sibling, :form), partial: "budget_categories/budget_category_form", locals: { budget_category: sibling } %>
   <% end %>
-  
+
 <% else %>
   <%# Update all subcategories when a parent category changes %>
   <% @budget_category.subcategories.each do |subcategory| %>
     <%= turbo_stream.update dom_id(subcategory, :form), partial: "budget_categories/budget_category_form", locals: { budget_category: subcategory } %>
   <% end %>
-<% end %>
+<% end %>