Budgeting V1 (#1609)

* Budgeting V1

* Basic UI template

* Fully scaffolded budgeting v1

* Basic working budget

* Finalize donut chart for budgets

* Allow categorization of loan payments for budget

* Include loan payments in incomes_and_expenses scope

* Add budget allocations progress

* Empty states

* Clean up budget methods

* Category aggregation queries

* Handle overage scenarios in form

* Finalize budget donut chart controller

* Passing tests

* Fix allocation naming

* Add income category migration

* Native support for uncategorized budget category

* Formatting

* Fix subcategory sort order, padding

* Fix calculation for category rollups in budget

app/views/categories/_badge.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (category:) %>
-<% category ||= null_category %>
+<% category ||= Category.uncategorized %>
 
 <div>
   <span class="flex items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border truncate"
@@ -7,6 +7,9 @@
           background-color: color-mix(in srgb, <%= category.color %> 5%, white);
           border-color: color-mix(in srgb, <%= category.color %> 30%, white);
           color: <%= category.color %>;">
+    <% if category.lucide_icon.present? %>
+      <%= lucide_icon category.lucide_icon, class: "w-4 h-4 shrink-0" %>
+    <% end %>
     <%= category.name %>
   </span>
 

app/views/categories/_category_list_group.html.erb

@@ -0,0 +1,25 @@
+<%# locals: (title:, categories:) %>
+
+<div class="rounded-xl bg-gray-25 space-y-1 p-1">
+  <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-gray-500 uppercase">
+    <p><%= title %></p>
+    <span class="text-gray-400">&middot;</span>
+    <p><%= categories.count %></p>
+  </div>
+
+  <div class="border border-alpha-black-25 rounded-md bg-white shadow-xs">
+    <div class="overflow-hidden rounded-md">
+      <% Category::Group.for(categories).each_with_index do |group, idx| %>
+        <%= render group.category %>
+
+        <% group.subcategories.each do |subcategory| %>
+          <%= render subcategory %>
+        <% end %>
+
+        <% unless idx == Category::Group.for(categories).count - 1 %>
+          <%= render "categories/ruler" %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/categories/_form.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (category:, categories:) %>
 
 <div data-controller="color-avatar">
-  <%= styled_form_with model: category, class: "space-y-4", data: { turbo_frame: :_top } do |f| %>
+  <%= styled_form_with model: category, class: "space-y-4" do |f| %>
     <section class="space-y-4">
       <div class="w-fit m-auto">
         <%= render partial: "shared/color_avatar", locals: { name: category.name, color: category.color } %>
@@ -20,7 +20,19 @@
         <%= render "shared/form_errors", model: category %>
       <% end %>
 
+      <div class="flex flex-wrap gap-2 justify-center mb-4">
+        <% Category.icon_codes.each do |icon| %>
+          <label class="relative">
+            <%= f.radio_button :lucide_icon, icon, class: "sr-only peer" %>
+            <div class="p-1 rounded cursor-pointer hover:bg-gray-100 peer-checked:bg-gray-100 border-1 border-transparent peer-checked:border-gray-500">
+              <%= lucide_icon icon, class: "w-5 h-5" %>
+            </div>
+          </label>
+        <% end %>
+      </div>
+
       <div class="space-y-2">
+        <%= f.select :classification, [["Income", "income"], ["Expense", "expense"]], { label: "Classification" }, required: true %>
         <%= f.text_field :name, placeholder: t(".placeholder"), required: true, autofocus: true, label: "Name", data: { color_avatar_target: "name" } %>
         <%= f.select :parent_id, categories.pluck(:name, :id), { include_blank: "(unassigned)", label: "Parent category (optional)" } %>
       </div>

app/views/categories/index.html.erb

@@ -14,28 +14,14 @@
 
   <div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4">
     <% if @categories.any? %>
-      <div class="rounded-xl bg-gray-25 space-y-1 p-1">
-        <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-gray-500 uppercase">
-          <p><%= t(".categories") %></p>
-          <span class="text-gray-400">&middot;</span>
-          <p><%= @categories.count %></p>
-        </div>
+      <div class="space-y-4">
+        <% if @categories.incomes.any? %>
+          <%= render "categories/category_list_group", title: t(".categories_incomes"), categories: @categories.incomes %>
+        <% end %>
 
-        <div class="border border-alpha-black-25 rounded-md bg-white shadow-xs">
-          <div class="overflow-hidden rounded-md">
-            <% Category::Group.for(@categories).each_with_index do |group, idx| %>
-              <%= render group.category %>
-
-              <% group.subcategories.each do |subcategory| %>
-                <%= render subcategory %>
-              <% end %>
-
-              <% unless idx == Category::Group.for(@categories).count - 1 %>
-                <%= render "categories/ruler" %>
-              <% end %>
-            <% end %>
-          </div>
-        </div>
+        <% if @categories.expenses.any? %>
+          <%= render "categories/category_list_group", title: t(".categories_expenses"), categories: @categories.expenses %>
+        <% end %>
       </div>
     <% else %>
       <div class="flex justify-center items-center py-20">