admin/WealthySmart
1
0
Fork 0
mirror of https://github.com/escalante29/WealthySmart.git synced 2026-05-19 14:28:47 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add privacy mode toggle to blur sensitive financial amounts
All checks were successful
Deploy to VPS / deploy (push) Successful in 14s
Details

Browse Source 
Eye/EyeOff icon next to theme toggle. Persists in localStorage.
Applies CSS blur to all elements marked with data-sensitive attribute
across Dashboard, Budget, Pensions, Salarios, and Transactions pages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Carlos Escalante
2026-04-01 10:43:50 -06:00
parent aedf3aa3b0
commit 45166f9d20
15 changed files with 100 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/pages/Pensions.tsx
View File

@@ -229,7 +229,7 @@ function ChartTooltipContent({
/>
<span className="text-muted-foreground">{entry.name}</span>
</span>
<span className="font-mono font-medium text-foreground">{formatCRC(entry.value)}</span>
<span data-sensitive className="font-mono font-medium text-foreground">{formatCRC(entry.value)}</span>
</div>
))}
</div>
@@ -440,7 +440,7 @@ export default function Pensions() {
<p className="text-xs text-muted-foreground uppercase tracking-wider font-medium">
Balance actual
</p>
<p className="text-xl font-bold font-mono mt-0.5 leading-tight">
<p data-sensitive className="text-xl font-bold font-mono mt-0.5 leading-tight">
{formatCRC(fund.startBalance)}
</p>
{snap && (
@@ -456,19 +456,19 @@ export default function Pensions() {
<div className="space-y-1.5 text-xs">
<div className="flex justify-between">
<span className="text-muted-foreground">Aportes</span>
<span className="font-mono font-medium">
<span data-sensitive className="font-mono font-medium">
{formatCRC(snap.aportes)}
</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Rendimientos</span>
<span className="font-mono font-medium text-emerald-500">
<span data-sensitive className="font-mono font-medium text-emerald-500">
{formatCRC(snap.rendimientos)}
</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Comisión</span>
<span className="font-mono font-medium text-destructive">
<span data-sensitive className="font-mono font-medium text-destructive">
{formatCRC(snap.comision)}
</span>
</div>
@@ -477,7 +477,7 @@ export default function Pensions() {
<div className="space-y-1.5 text-xs">
<div className="flex justify-between">
<span className="text-muted-foreground">Aporte mensual</span>
<span className="font-mono font-medium">
<span data-sensitive className="font-mono font-medium">
{formatCRC(fund.monthlyContribution)}
</span>
</div>
@@ -606,7 +606,7 @@ export default function Pensions() {
{fund.isDividend ? `Dividendos ${fund.annualRate}%` : `${fund.annualRate}% anual`}
</p>
)}
<p className="text-lg font-bold font-mono" style={{ color: fund.color }}>
<p data-sensitive className="text-lg font-bold font-mono" style={{ color: fund.color }}>
{earned >= 0 ? '+' : ''}{formatCRC(earned)}
</p>
<p className="text-xs text-muted-foreground">en rendimientos</p>
@@ -686,6 +686,7 @@ export default function Pensions() {
Valor en {years} {years === 1 ? 'año' : 'años'}
</p>
<p
data-sensitive
className="text-lg font-bold font-mono leading-tight"
style={{ color: fund.color }}
>
@@ -855,7 +856,7 @@ export default function Pensions() {
{' — '}
{new Date(snap.period_end).toLocaleDateString('es-CR', { month: 'short', year: '2-digit' })}
</span>
<span className="font-mono font-medium">{formatCRC(snap.saldo_final)}</span>
<span data-sensitive className="font-mono font-medium">{formatCRC(snap.saldo_final)}</span>
</div>
))}
</div>