1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-05 05:25:24 +02:00

Add placeholders for dashboard features (#642)

* Add placeholders for new dashboard

* Fix tests and lint errors
This commit is contained in:
Zach Gollwitzer 2024-04-18 10:32:36 -04:00 committed by GitHub
parent 4708e85da3
commit f5f624881f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 196 additions and 109 deletions

View file

@ -1,23 +0,0 @@
<%# locals: (label:, period:, balance:, trend:, size: "lg")%>
<div class="space-y-2">
<p class="text-sm text-gray-500"><%= label %></p>
<p class="text-gray-900 -space-x-0.5">
<span class="text-gray-500"><%= balance.currency.symbol %></span>
<span class="<%= size == "lg" ? "text-xl" : "text-lg" %> font-medium"><%= format_money_without_symbol balance, precision: 0 %></span>
<%- if balance.currency.default_precision.positive? -%>
<span class="text-gray-500">
<%= balance.currency.separator %><%= balance.cents_str %>
</span>
<% end %>
</p>
<% if trend.nil? %>
<p class="text-sm text-gray-500">Data not available for the selected period</p>
<% elsif trend.direction == "flat" %>
<p class="text-sm text-gray-500">No change vs. prior period</p>
<% else %>
<div class="flex items-center gap-2">
<%= render partial: "shared/trend_change", locals: { trend: trend } %>
<span class="text-sm text-gray-500"><%= period_label(period) %></span>
</div>
<% end %>
</div>

View file

@ -1,6 +1,6 @@
<%# locals: (content:) -%>
<%= turbo_frame_tag "modal" do %>
<dialog class="bg-white border border-alpha-black-25 rounded-2xl max-h-[648px] max-w-[580px] w-full shadow-xs h-full" data-controller="modal" data-action="click->modal#clickOutside">
<dialog class="bg-white border border-alpha-black-25 rounded-2xl max-h-[648px] max-w-[580px] w-full shadow-xs h-fit" data-controller="modal" data-action="click->modal#clickOutside">
<div class="flex flex-col h-full">
<%= content %>
</div>

View file

@ -1,10 +1,10 @@
<%# locals: (trend:) %>
<%# locals: { trend: } %>
<% styles = trend_styles(trend) %>
<p class="text-sm <%= styles[:text_class] %>">
<% if trend.direction == "flat" %>
<span>No change</span>
<% else %>
<span><%= styles[:symbol] %><%= format_money trend.value.abs %></span>
<span><%= styles[:symbol] %><%= trend.value.is_a?(Money) ? format_money(trend.value.abs) : trend.value.abs %></span>
<span>(<%= lucide_icon(styles[:icon], class: "w-4 h-4 align-text-bottom inline") %><%= trend.percent %>%)</span>
<% end %>
</p>

View file

@ -0,0 +1,27 @@
<%# locals: (label:, period:, value:, trend:, size: "lg", is_percentage: false)%>
<div class="space-y-2">
<p class="text-sm text-gray-500 font-medium"><%= label %></p>
<p class="text-gray-900 -space-x-0.5">
<% if value.is_a?(Money) %>
<span class="text-gray-500"><%= value.currency.symbol %></span>
<span class="<%= size == "lg" ? "text-xl" : "text-lg" %> font-medium"><%= format_money_without_symbol value, precision: 0 %></span>
<%- if value.currency.default_precision.positive? -%>
<span class="text-gray-500">
<%= value.currency.separator %><%= value.cents_str %>
</span>
<% end %>
<% else %>
<span class="<%= size == "lg" ? "text-xl" : "text-lg" %> font-medium"><%= is_percentage ? number_to_percentage(value, precision: 2) : value %></span>
<% end %>
</p>
<% if trend.nil? %>
<p class="text-sm text-gray-500">Data not available for the selected period</p>
<% elsif trend.direction == "flat" %>
<p class="text-sm text-gray-500">No change vs. prior period</p>
<% else %>
<div class="flex items-center gap-2">
<%= render partial: "shared/trend_change", locals: { trend: trend } %>
<span class="text-sm text-gray-500"><%= period_label(period) %></span>
</div>
<% end %>
</div>