mirror of
https://github.com/we-promise/sure.git
synced 2026-04-07 22:34:47 +00:00
f5469ea774
* Replace text-tertiary with text-subdued in views Replace usages of the text-tertiary utility with text-subdued across several view partials to standardize subdued text styling because text-tertiary does not exist in the design system (reports, doorkeeper auth, simplefin items). Also adjust the net worth empty-liabilities markup to use a grid layout for consistent spacing, and update the related controller test selector to match the new CSS class. * Standardize empty net worth message markup Replace inconsistent markup and classes for empty asset/liability sections in the net worth partial. Swap text-secondary/p-2/text-center for text-subdued with unified padding (py-3 px-4 lg:px-6), and simplify the liabilities block from a grid/div to a single paragraph for consistent styling and spacing.
133 lines
4.4 KiB
Plaintext
133 lines
4.4 KiB
Plaintext
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<%# Total Income Card %>
|
|
<div class="bg-container rounded-xl shadow-border-xs p-6">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<%= icon("trending-up", size: "sm") %>
|
|
<h3 class="text-sm font-medium text-secondary">
|
|
<%= t("reports.summary.total_income") %>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<p class="text-2xl font-semibold text-primary">
|
|
<%= metrics[:current_income].format %>
|
|
</p>
|
|
|
|
<% if metrics[:income_change] %>
|
|
<div class="flex items-center gap-1.5">
|
|
<% if metrics[:income_change] >= 0 %>
|
|
<%= icon("arrow-up", size: "sm") %>
|
|
<span class="text-sm font-medium text-success">
|
|
+<%= metrics[:income_change] %>%
|
|
</span>
|
|
<% else %>
|
|
<%= icon("arrow-down", size: "sm") %>
|
|
<span class="text-sm font-medium text-destructive">
|
|
<%= metrics[:income_change] %>%
|
|
</span>
|
|
<% end %>
|
|
<span class="text-sm text-subdued">
|
|
<%= t("reports.summary.vs_previous") %>
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Total Expenses Card %>
|
|
<div class="bg-container rounded-xl shadow-border-xs p-6">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<%= icon("trending-down", class: "w-5 h-5") %>
|
|
<h3 class="text-sm font-medium text-secondary">
|
|
<%= t("reports.summary.total_expenses") %>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<p class="text-2xl font-semibold text-primary">
|
|
<%= metrics[:current_expenses].format %>
|
|
</p>
|
|
|
|
<% if metrics[:expense_change] %>
|
|
<div class="flex items-center gap-1.5">
|
|
<% if metrics[:expense_change] >= 0 %>
|
|
<%= icon("arrow-up", class: "w-4 h-4 text-destructive") %>
|
|
<span class="text-sm font-medium text-destructive">
|
|
+<%= metrics[:expense_change] %>%
|
|
</span>
|
|
<% else %>
|
|
<%= icon("arrow-down", class: "w-4 h-4 text-success") %>
|
|
<span class="text-sm font-medium text-success">
|
|
<%= metrics[:expense_change] %>%
|
|
</span>
|
|
<% end %>
|
|
<span class="text-sm text-subdued">
|
|
<%= t("reports.summary.vs_previous") %>
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Net Savings Card %>
|
|
<div class="bg-container rounded-xl shadow-border-xs p-6">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<%= icon("piggy-bank", class: "w-5 h-5") %>
|
|
<h3 class="text-sm font-medium text-secondary">
|
|
<%= t("reports.summary.net_savings") %>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<p class="text-2xl font-semibold <%= metrics[:net_savings] >= 0 ? "text-success" : "text-destructive" %>">
|
|
<%= metrics[:net_savings].format %>
|
|
</p>
|
|
|
|
<p class="text-sm text-subdued">
|
|
<%= t("reports.summary.income_minus_expenses") %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Budget Performance Card %>
|
|
<div class="bg-container rounded-xl shadow-border-xs p-6">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<%= icon("gauge", class: "w-5 h-5") %>
|
|
<h3 class="text-sm font-medium text-secondary">
|
|
<%= t("reports.summary.budget_performance") %>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<% if metrics[:budget_percent] %>
|
|
<p class="text-2xl font-semibold text-primary">
|
|
<%= metrics[:budget_percent] %>%
|
|
</p>
|
|
|
|
<div class="space-y-1.5">
|
|
<div class="h-2 bg-surface-inset rounded-full overflow-hidden">
|
|
<div class="h-full <%= metrics[:budget_percent] >= 100 ? "bg-destructive" : metrics[:budget_percent] >= 80 ? "bg-warning" : "bg-success" %> rounded-full transition-all"
|
|
style="width: <%= [metrics[:budget_percent], 100].min %>%"></div>
|
|
</div>
|
|
|
|
<p class="text-sm text-subdued">
|
|
<%= t("reports.summary.of_budget_used") %>
|
|
</p>
|
|
</div>
|
|
<% else %>
|
|
<p class="text-base text-subdued">
|
|
<%= t("reports.summary.no_budget_data") %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|