mirror of
https://github.com/we-promise/sure.git
synced 2026-04-10 15:54:48 +00:00
d9f8d064af
* First reporting version * Fixes for all tabs * Transactions table * Budget section re-design * FIX exports Fix transactions table aggregation * Add support for google sheets Remove pdf and xlsx for now * Multiple fixes - Trends & Insights now follows top filter - Transactions Breakdown removed filters, implemented sort by amount. - The entire section follows top filters. - Export to CSV adds per month breakdown * Linter and tests * Fix amounts - Correctly handle amounts across the views and controller. - Pass proper values to do calculation on, and not loose precision * Update Gemfile.lock * Add support for api-key on reports Also fix custom date filter * Review fixes * Move budget status calculations out of the view. * fix ensures that quarterly reports end at the quarter boundary * Fix bugdet days remaining Fix raw css style * Fix test * Implement google sheets properly with hotwire * Improve UX on period comparison * FIX csv export for non API key auth
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-danger") %>
|
|
<span class="text-sm font-medium text-danger">
|
|
<%= 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-danger") %>
|
|
<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-danger") %>
|
|
<span class="text-sm font-medium text-danger">
|
|
+<%= 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-danger" %>">
|
|
<%= 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-danger" : 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>
|