mirror of
https://github.com/we-promise/sure.git
synced 2026-04-08 14:54:49 +00:00
17baece5b5
* Replace text-danger with text-destructive in reports views Updated multiple report partials to use the 'text-destructive' class instead of 'text-danger' as this does not exist. This affects budget performance, summary dashboard, transactions breakdown, and trends insights views. * Replace bg-danger with bg-destructive in report views
133 lines
4.5 KiB
Plaintext
133 lines
4.5 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", class: "w-5 h-5 text-success") %>
|
|
<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", class: "w-4 h-4 text-success") %>
|
|
<span class="text-sm font-medium text-success">
|
|
+<%= metrics[:income_change] %>%
|
|
</span>
|
|
<% else %>
|
|
<%= icon("arrow-down", class: "w-4 h-4 text-destructive") %>
|
|
<span class="text-sm font-medium text-destructive">
|
|
<%= metrics[:income_change] %>%
|
|
</span>
|
|
<% end %>
|
|
<span class="text-sm text-tertiary">
|
|
<%= 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 text-destructive") %>
|
|
<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-tertiary">
|
|
<%= 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 text-primary") %>
|
|
<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-tertiary">
|
|
<%= 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 text-primary") %>
|
|
<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-tertiary">
|
|
<%= t("reports.summary.of_budget_used") %>
|
|
</p>
|
|
</div>
|
|
<% else %>
|
|
<p class="text-base text-tertiary">
|
|
<%= t("reports.summary.no_budget_data") %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|