admin/WealthySmart
1
0
Fork 0
mirror of https://github.com/escalante29/WealthySmart.git synced 2026-07-17 15: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

2
frontend/src/components/DashboardSection.tsx
View File

@@ -58,7 +58,7 @@ export default function DashboardSection({
{settings.label}
</span>
{total != null && totalCurrency && (
<span className="text-sm font-bold font-mono text-foreground">
<span data-sensitive className="text-sm font-bold font-mono text-foreground">
{formatAmount(total, totalCurrency)}
</span>
)}

7
frontend/src/components/Layout.tsx
View File

@@ -10,10 +10,13 @@ import {
Menu,
Sun,
Moon,
Eye,
EyeOff,
} from 'lucide-react';
import { useEffect, useState } from 'react';
import { useAuth } from '../AuthContext';
import { useTheme } from '../ThemeContext';
import { usePrivacy } from '../PrivacyContext';
import { subscribeToPush } from '../pushNotifications';
import { Button } from '@/components/ui/button';
import {
@@ -37,6 +40,7 @@ const navItems = [
export default function Layout() {
const { logout } = useAuth();
const { theme, toggleTheme } = useTheme();
const { privacyMode, togglePrivacy } = usePrivacy();
const navigate = useNavigate();
const [mobileOpen, setMobileOpen] = useState(false);
@@ -86,6 +90,9 @@ export default function Layout() {
</nav>
<div className="flex items-center gap-1">
<Button variant="ghost" size="icon" onClick={togglePrivacy} title="Toggle privacy mode" aria-label="Toggle privacy mode">
{privacyMode ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</Button>
<Button variant="ghost" size="icon" onClick={toggleTheme} title="Toggle theme" aria-label="Toggle theme">
{theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
</Button>

1
frontend/src/components/TransactionList.tsx
View File

@@ -128,6 +128,7 @@ export default function TransactionList({
</p>
</div>
<span
data-sensitive
className={cn(
'font-mono text-sm font-medium shrink-0',
tx.transaction_type === 'DEVOLUCION' && 'text-primary'

23
frontend/src/components/budget/MonthlyDetail.tsx
View File

@@ -62,7 +62,7 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
{detail.income_items.map((item) => (
<div key={item.id} className="flex items-center justify-between text-sm">
<span className="truncate mr-2">{item.name}</span>
<span className="font-mono text-primary whitespace-nowrap">
<span data-sensitive className="font-mono text-primary whitespace-nowrap">
{formatAmount(item.amount, 'CRC')}
</span>
</div>
@@ -70,7 +70,7 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
<Separator />
<div className="flex items-center justify-between font-semibold text-sm">
<span>Total</span>
<span className="font-mono text-primary">
<span data-sensitive className="font-mono text-primary">
{formatAmount(detail.total_projected_income, 'CRC')}
</span>
</div>
@@ -96,7 +96,7 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
</Badge>
)}
</div>
<div className="text-right whitespace-nowrap">
<div data-sensitive className="text-right whitespace-nowrap">
<span className="font-mono">{formatAmount(item.amount, 'CRC')}</span>
{item.used_actual && item.projected_amount != null && (
<span className="block text-[10px] text-muted-foreground font-mono line-through">
@@ -112,7 +112,7 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
<Separator />
<div className="flex items-center justify-between font-semibold text-sm">
<span>Total Fijos</span>
<span className="font-mono">
<span data-sensitive className="font-mono">
{formatAmount(detail.total_projected_expenses, 'CRC')}
</span>
</div>
@@ -139,7 +139,7 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
<span>{meta.label}</span>
<span className="text-xs text-muted-foreground">({src.count})</span>
</div>
<span className="font-mono whitespace-nowrap">
<span data-sensitive className="font-mono whitespace-nowrap">
{formatAmount(src.net, 'CRC')}
</span>
</div>
@@ -153,7 +153,7 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
<Info className="w-3 h-3 text-muted-foreground" />
<span className="text-muted-foreground">No cubierto por fijos</span>
</div>
<span className="font-mono">{formatAmount(detail.uncovered_actual, 'CRC')}</span>
<span data-sensitive className="font-mono">{formatAmount(detail.uncovered_actual, 'CRC')}</span>
</div>
</>
)}
@@ -176,13 +176,13 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
{detail.savings_items.map((item) => (
<div key={item.id} className="flex items-center justify-between text-sm">
<span>{item.name}</span>
<span className="font-mono">{formatAmount(item.amount, 'CRC')}</span>
<span data-sensitive className="font-mono">{formatAmount(item.amount, 'CRC')}</span>
</div>
))}
<Separator />
<div className="flex items-center justify-between font-semibold text-sm">
<span>Total Ahorro</span>
<span className="font-mono">
<span data-sensitive className="font-mono">
{formatAmount(detail.total_projected_savings, 'CRC')}
</span>
</div>
@@ -198,19 +198,19 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
<CardContent className="pt-6 space-y-3">
<div className="flex items-center justify-between text-sm">
<span>Total Ingresos</span>
<span className="font-mono font-medium text-primary">
<span data-sensitive className="font-mono font-medium text-primary">
+{formatAmount(detail.total_projected_income, 'CRC')}
</span>
</div>
<div className="flex items-center justify-between text-sm">
<span>Gran Total Egresos</span>
<span className="font-mono font-medium">
<span data-sensitive className="font-mono font-medium">
-{formatAmount(detail.gran_total_egresos, 'CRC')}
</span>
</div>
<div className="flex items-center justify-between text-sm">
<span>Ahorro</span>
<span className="font-mono font-medium">
<span data-sensitive className="font-mono font-medium">
-{formatAmount(detail.total_projected_savings, 'CRC')}
</span>
</div>
@@ -218,6 +218,7 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
<div className="flex items-center justify-between">
<span className="font-semibold">Balance Neto</span>
<span
data-sensitive
className={cn(
'font-mono font-bold text-lg',
detail.net_balance >= 0 ? 'text-primary' : 'text-destructive',

2
frontend/src/components/budget/RecurringItemsManager.tsx
View File

@@ -106,7 +106,7 @@ export default function RecurringItemsManager({
<DataTableColumnHeader column={column} title="Monto" className="justify-end" />
),
cell: ({ row }) => (
<span className="font-mono text-sm">
<span data-sensitive className="font-mono text-sm">
{formatAmount(row.original.amount, row.original.currency)}
</span>
),

21
frontend/src/components/budget/YearlyOverview.tsx
View File

@@ -120,19 +120,19 @@ export default function YearlyOverview({
<span className="ml-1.5 inline-block w-1.5 h-1.5 rounded-full bg-primary" />
)}
</TableCell>
<TableCell className="text-right font-mono text-sm text-primary">
<TableCell data-sensitive className="text-right font-mono text-sm text-primary">
{formatAmount(m.projected_income, 'CRC')}
</TableCell>
<TableCell className="text-right font-mono text-sm">
<TableCell data-sensitive className="text-right font-mono text-sm">
{formatAmount(m.projected_fixed_expenses, 'CRC')}
</TableCell>
<TableCell className="text-right font-mono text-sm text-muted-foreground">
<TableCell data-sensitive className="text-right font-mono text-sm text-muted-foreground">
{formatAmount(m.uncovered_actual, 'CRC')}
</TableCell>
<TableCell className="text-right font-mono text-sm font-medium">
<TableCell data-sensitive className="text-right font-mono text-sm font-medium">
{formatAmount(m.gran_total_egresos, 'CRC')}
</TableCell>
<TableCell className="text-right font-mono text-sm text-muted-foreground">
<TableCell data-sensitive className="text-right font-mono text-sm text-muted-foreground">
{formatAmount(m.projected_savings, 'CRC')}
</TableCell>
<TableCell
@@ -145,13 +145,14 @@ export default function YearlyOverview({
>
{isBeforeFreshStart
? '—'
: <>
: <span data-sensitive>
{m.carryover_balance >= 0 ? '+' : ''}
{formatAmount(m.carryover_balance, 'CRC')}
</>
</span>
}
</TableCell>
<TableCell
data-sensitive
className={cn(
'text-right font-mono text-sm font-semibold',
m.net_balance >= 0 ? 'text-primary' : 'text-destructive',
@@ -193,8 +194,10 @@ export default function YearlyOverview({
{m.balance_overridden && (
<Pencil className="w-3 h-3 text-amber-500 shrink-0" />
)}
{m.cumulative_balance >= 0 ? '+' : ''}
{formatAmount(m.cumulative_balance, 'CRC')}
<span data-sensitive>
{m.cumulative_balance >= 0 ? '+' : ''}
{formatAmount(m.cumulative_balance, 'CRC')}
</span>
</span>
)}
</TableCell>

1
frontend/src/components/transactions/transaction-columns.tsx
View File

@@ -88,6 +88,7 @@ export function getTransactionColumns({
const tx = row.original;
return (
<span
data-sensitive
className={cn(
'font-mono font-medium',
tx.transaction_type !== 'COMPRA' && 'text-primary',