Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-08 15:05:22 +02:00
Code Issues Releases Activity Actions

New Design System + Codebase Refresh (#1823)

Browse source 
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
This commit is contained in:
Zach Gollwitzer 2025-02-21 11:57:59 -05:00 • committed by GitHub
parent 8539ac7dec
commit d75be2282b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
278 changed files with 3428 additions and 4354 deletions
Download patch file Download diff file Expand all files Collapse all files

103
app/views/pages/dashboard/_balance_sheet.html.erb Normal file
View file

@ -0,0 +1,103 @@
<%# locals: (balance_sheet:) %>
<div class="space-y-4">
<% balance_sheet.classification_groups.each do |classification_group| %>
<div class="bg-white shadow-border-xs rounded-xl space-y-4 p-4">
<h2 class="text-lg font-medium"><%= classification_group.display_name %></h2>
<% if classification_group.account_groups.any? %>
<div class="space-y-4">
<div class="flex gap-1">
<% classification_group.account_groups.each do |account_group| %>
<div class="h-1.5 rounded-sm" style="width: <%= account_group.weight %>%; background-color: <%= account_group.color %>;"></div>
<% end %>
</div>
<div class="flex gap-4">
<% classification_group.account_groups.each do |account_group| %>
<div class="flex items-center gap-2 text-sm">
<div class="h-2.5 w-2.5 rounded-full" style="background-color: <%= account_group.color %>;"></div>
<p class="text-secondary"><%= account_group.name %></p>
<p class="text-black"><%= number_to_percentage(account_group.weight, precision: 0) %></p>
</div>
<% end %>
</div>
</div>
<div class="bg-surface rounded-xl p-1 space-y-1">
<div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-secondary">
<div>Name</div>
<div class="ml-auto text-right flex items-center gap-6">
<div class="w-24">
<p>Weight</p>
</div>
<div class="w-40">
<p>Value</p>
</div>
</div>
</div>
<div class="shadow-border-xs rounded-lg bg-white">
<% classification_group.account_groups.each do |account_group| %>
<details class="group rounded-lg open:bg-surface font-medium text-sm">
<summary class="cursor-pointer p-4 group-open:bg-surface bg-white rounded-lg flex items-center justify-between">
<div class="flex items-center gap-4">
<%= lucide_icon("chevron-right", class: "group-open:rotate-90 text-secondary w-5 h-5") %>
<p><%= account_group.name %></p>
</div>
<div class="ml-auto flex items-center text-right gap-6">
<div class="w-24 flex items-center justify-end gap-2">
<%= render partial: "shared/progress_circle", locals: { progress: account_group.weight, color: account_group.color } %>
<p><%= number_to_percentage(account_group.weight, precision: 0) %></p>
</div>
<div class="w-40">
<p><%= format_money(account_group.total_money) %></p>
</div>
</div>
</summary>
<div>
<% account_group.accounts.each_with_index do |account, idx| %>
<div class="pl-12 pr-4 py-3 flex items-center justify-between text-sm font-medium">
<div class="flex items-center gap-3">
<%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
<%= link_to account.name, account_path(account) %>
</div>
<div class="ml-auto flex items-center text-right gap-6">
<div class="w-24 flex items-center justify-end gap-2">
<%= render partial: "shared/progress_circle", locals: { progress: account.weight, color: account_group.color } %>
<p><%= number_to_percentage(account.weight, precision: 0) %></p>
</div>
<div class="w-40">
<p><%= format_money(account.balance_money) %></p>
</div>
</div>
</div>
<% if idx < account_group.accounts.size - 1 %>
<div class="pl-[84px] pr-40">
<div class="w-full border-subdued border-b"></div>
</div>
<% end %>
<% end %>
</div>
</details>
<% end %>
</div>
</div>
<% else %>
<div class="py-20 flex flex-col items-center">
<%= lucide_icon classification_group.icon, class: "w-6 h-6 shrink-0 text-secondary" %>
<p class="text-primary text-sm font-medium mb-1 mt-4">No <%= classification_group.display_name %></p>
<p class="text-secondary text-sm max-w-xs text-center"><%= "You have no #{classification_group.display_name}" %></p>
</div>
<% end %>
</div>
<% end %>
</div>