mirror of
https://github.com/escalante29/WealthySmart.git
synced 2026-07-17 12:08:47 +02:00
Polish: aria-pressed toggles, deferred row styling, override hint
Fund visibility toggles and the header privacy/theme buttons expose aria-pressed (FE-16); deferred transactions render struck-through and muted so the state is visible at a glance (UX-05); the balance-override input documents its keyboard contract (UX-21). The Budget CSV button rides in the transactions tab header. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -189,6 +189,8 @@ export default function YearlyOverview({
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onBlur={handleSave}
|
||||
onKeyDown={handleKeyDown}
|
||||
title="Enter para guardar · vacío para quitar el ajuste · Esc para cancelar"
|
||||
aria-description="Enter guarda; vacío quita el ajuste"
|
||||
className="h-7 w-36 text-right font-mono text-sm ml-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
|
||||
@@ -107,6 +107,7 @@ export function getTransactionColumns({
|
||||
className={cn(
|
||||
'font-mono font-medium',
|
||||
tx.transaction_type !== 'COMPRA' && 'text-primary',
|
||||
tx.deferred_to_next_cycle && 'opacity-50 line-through decoration-muted-foreground/60',
|
||||
)}
|
||||
>
|
||||
{tx.transaction_type === 'COMPRA' ? '-' : '+'}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import { ChevronLeft, ChevronRight, Calculator } from 'lucide-react';
|
||||
import { ChevronLeft, ChevronRight, Calculator, Download } from 'lucide-react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
@@ -171,15 +171,26 @@ export default function Budget() {
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="transactions" className="space-y-3 mt-4">
|
||||
<Tabs
|
||||
value={txSource}
|
||||
onValueChange={(v) => setTxSource(v as typeof txSource)}
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="CREDIT_CARD">Tarjeta</TabsTrigger>
|
||||
<TabsTrigger value="CASH_AND_TRANSFER">Efectivo y Transferencias</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Tabs
|
||||
value={txSource}
|
||||
onValueChange={(v) => setTxSource(v as typeof txSource)}
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="CREDIT_CARD">Tarjeta</TabsTrigger>
|
||||
<TabsTrigger value="CASH_AND_TRANSFER">Efectivo y Transferencias</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => window.open('/api/v1/transactions/export', '_blank')}
|
||||
title="Descargar todas las transacciones como CSV"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
CSV
|
||||
</Button>
|
||||
</div>
|
||||
{txQuery.isError ? (
|
||||
<ErrorState
|
||||
message="No se pudieron cargar las transacciones"
|
||||
|
||||
@@ -523,6 +523,7 @@ export default function Pensions() {
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => toggleFund(key)}
|
||||
aria-pressed={active}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all border cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
style={{
|
||||
borderColor: fund.color,
|
||||
|
||||
Reference in New Issue
Block a user