mirror of
https://github.com/we-promise/sure.git
synced 2026-04-18 03:24:09 +00:00
583d91291f
- Stimulus controller on global layout (persists across all pages) - CSS blur effect on .privacy-sensitive elements (8px active, 4px on hover) - localStorage persistence survives page navigations - Toggle button on dashboard with aria-pressed for accessibility - Applied to 28+ views: accounts, budgets, transactions, reports, etc. Fixes: UTF-8 encoding, global controller mount, aria-pressed attribute
45 lines
1.9 KiB
Plaintext
45 lines
1.9 KiB
Plaintext
<%# locals: (investment_flows:) %>
|
|
<div class="space-y-4">
|
|
<p class="text-sm text-secondary">
|
|
Track money flowing into and out of your investment accounts through contributions and withdrawals.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<!-- Contributions -->
|
|
<div class="bg-container border border-primary rounded-lg p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<%= icon("trending-up", size: "sm", class: "text-green-600") %>
|
|
<h3 class="text-sm font-medium text-secondary">Contributions</h3>
|
|
</div>
|
|
<div class="text-2xl font-semibold privacy-sensitive" style="color: rgb(34 197 94);">
|
|
<%= format_money(investment_flows.contributions) %>
|
|
</div>
|
|
<p class="text-xs text-secondary mt-1">Money added to investments</p>
|
|
</div>
|
|
|
|
<!-- Withdrawals -->
|
|
<div class="bg-container border border-primary rounded-lg p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<%= icon("trending-down", size: "sm", class: "text-orange-600") %>
|
|
<h3 class="text-sm font-medium text-secondary">Withdrawals</h3>
|
|
</div>
|
|
<div class="text-2xl font-semibold privacy-sensitive" style="color: rgb(249 115 22);">
|
|
<%= format_money(investment_flows.withdrawals) %>
|
|
</div>
|
|
<p class="text-xs text-secondary mt-1">Money withdrawn from investments</p>
|
|
</div>
|
|
|
|
<!-- Net Flow -->
|
|
<div class="bg-container border border-primary rounded-lg p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<%= icon("arrow-right-left", size: "sm", class: "text-primary") %>
|
|
<h3 class="text-sm font-medium text-secondary">Net Flow</h3>
|
|
</div>
|
|
<div class="text-2xl font-semibold text-primary privacy-sensitive">
|
|
<%= format_money(investment_flows.net_flow) %>
|
|
</div>
|
|
<p class="text-xs text-secondary mt-1">Total net change</p>
|
|
</div>
|
|
</div>
|
|
</div>
|