From be7bed5c99d26e067731b33f2e948a1f8d4d90d3 Mon Sep 17 00:00:00 2001 From: marcoitaloesp-ai Date: Tue, 16 Dec 2025 11:43:59 +0000 Subject: [PATCH] v1.43.2 - Mobile: Contas Passivo otimizadas --- CHANGELOG.md | 14 ++ VERSION | 2 +- frontend/src/pages/Accounts.jsx | 414 +++++++++++++++++++++++--------- 3 files changed, 315 insertions(+), 115 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d1c2126..cf7a2f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,20 @@ O formato segue [Keep a Changelog](https://keepachangelog.com/pt-BR/). Este projeto adota [Versionamento Semântico](https://semver.org/pt-BR/). +## [1.43.2] - 2025-12-16 + +### Improved +- **Página Accounts - Contas Passivo Mobile** - Layout em cards para mobile + - Seção "Passivos" convertida para cards em dispositivos mobile + - Cards mostram: ícone + nome + status + número contrato + credor + - Valores principal e saldo devedor lado a lado + - Barra de progresso com percentagem visual + - Fontes otimizadas: 0.65-0.85rem para legibilidade mobile + - Padding compacto: p-3, background escuro (#0f172a) + - Mantém onClick para navegar para /liabilities + - Desktop mantém layout de tabela completo + + ## [1.43.1] - 2025-12-16 ### Fixed diff --git a/VERSION b/VERSION index 3987c47..6426a65 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.43.1 +1.43.2 diff --git a/frontend/src/pages/Accounts.jsx b/frontend/src/pages/Accounts.jsx index d3c28a9..39d2152 100644 --- a/frontend/src/pages/Accounts.jsx +++ b/frontend/src/pages/Accounts.jsx @@ -26,6 +26,7 @@ const Accounts = () => { const [saving, setSaving] = useState(false); const [recalculating, setRecalculating] = useState(false); const [filter, setFilter] = useState({ type: '', is_active: '' }); + const [isMobile, setIsMobile] = useState(window.innerWidth < 768); const [formData, setFormData] = useState({ name: '', @@ -45,6 +46,12 @@ const Accounts = () => { const accountTypes = accountService.types; const accountIcons = accountService.icons; + useEffect(() => { + const handleResize = () => setIsMobile(window.innerWidth < 768); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + useEffect(() => { loadAccounts(); }, [filter]); @@ -293,53 +300,55 @@ const Accounts = () => { {/* Header */}
-

+

{t('nav.accounts')}

-

{t('accounts.title')}

+ {!isMobile &&

{t('accounts.title')}

}
- - + )} +
{/* Summary Cards */} -
+
{/* Total por Moeda */}
-
-
+
+
-
- +
+
-

{t('dashboard.totalBalance')}

+

{t('dashboard.totalBalance')}

{Object.keys(getTotalsByCurrency()).length > 0 ? ( -
+
{Object.entries(getTotalsByCurrency()).map(([currency, total]) => (
-

= 0 ? 'text-success' : 'text-danger'}`}> +

= 0 ? 'text-success' : 'text-danger'} ${isMobile ? 'fs-6' : ''}`} style={isMobile ? { fontSize: '1rem' } : undefined}> {formatCurrency(total, currency)}

- {currency} + {currency}
))}
@@ -353,16 +362,16 @@ const Accounts = () => {
{/* Contas Ativas e Total */} -
-
-
-
-
- +
+
+
+
+
+
-

{t('common.active')}

-

+

{t('common.active')}

+

{getTotalActiveAccounts()}

@@ -370,16 +379,16 @@ const Accounts = () => {
-
-
-
-
-
- +
+
+
+
+
+
-

{t('common.total')}

-

{getTotalAccounts()}

+

{t('common.total')}

+

{getTotalAccounts()}

@@ -422,7 +431,7 @@ const Accounts = () => { {/* Accounts List */}
-
+
{loading ? (
@@ -438,7 +447,88 @@ const Accounts = () => { {t('accounts.newAccount')}
+ ) : isMobile ? ( + /* Mobile: Cards Layout */ +
+ {accounts.map((account) => ( +
+
+
+
+ +
+
+
{account.name}
+ {account.account_number && ( + Nº {account.account_number} + )} +
+
+
+ + + +
+
+
+
+ + {accountTypes[account.type] || account.type} + + {account.is_active ? ( + {t('common.active')} + ) : ( + {t('common.inactive')} + )} +
+
= 0 ? 'text-success' : 'text-danger'}`} style={{ fontSize: '0.95rem' }}> + {formatCurrency(account.current_balance, account.currency)} +
+
+ {account.bank_name && ( +
+ + {account.bank_name} + +
+ )} +
+ ))} +
) : ( + /* Desktop: Table Layout */
@@ -525,8 +615,8 @@ const Accounts = () => { {/* Liability Accounts Section */} {liabilityAccounts.length > 0 && (filter.type === '' || filter.type === 'liability') && (
-
-
+
+
{t('liabilities.title')}
@@ -538,78 +628,174 @@ const Accounts = () => { {t('common.details')}
-
-
-
- - - - - - - - - - - - {liabilityAccounts.map((liability) => ( - navigate('/liabilities')} - > - - - - - - + + + + ))} + + ) : ( + // Desktop: Table Layout +
+
{t('liabilities.contractName')}{t('liabilities.creditor')}{t('liabilities.principal')}{t('liabilities.remaining')}{t('liabilities.progress')}{t('common.status')}
-
+
+ {isMobile ? ( + // Mobile: Cards Layout +
+ {liabilityAccounts.map((liability) => ( +
navigate('/liabilities')} + > +
+ {/* Header with Icon and Name */} +
+
+ +
+
+
+ {liability.name} +
+ {liability.contract_number && ( +
+ Nº {liability.contract_number} +
+ )} +
+
+ {liability.status === 'active' ? ( + + {t('common.active')} + + ) : liability.status === 'paid_off' ? ( + + {t('liabilities.paid')} + + ) : ( + + {liability.status} + + )} +
+
+ + {/* Creditor */} + {liability.creditor && ( +
+ + {liability.creditor} +
+ )} + + {/* Amounts */} +
+
+
Principal
+
+ {formatCurrency(liability.principal_amount, liability.currency)} +
+
+
+
Saldo Devedor
+
+ -{formatCurrency(liability.remaining_balance, liability.currency)} +
+
+
+ + {/* Progress Bar */} +
+
+ Progresso + + {liability.progress_percentage || 0}% + +
+
- -
-
-
{liability.name}
- {liability.contract_number && ( - Nº {liability.contract_number} - )} -
+ className="progress-bar bg-success" + style={{ width: `${liability.progress_percentage || 0}%` }} + >
-
{liability.creditor || '-'} - {formatCurrency(liability.principal_amount, liability.currency)} - - -{formatCurrency(liability.remaining_balance, liability.currency)} - -
-
-
-
- {liability.progress_percentage || 0}% -
- 		- {liability.status === 'active' ? ( - {t('common.active')} - ) : liability.status === 'paid_off' ? ( - {t('liabilities.paid')} - ) : ( - {liability.status} - )} -
+ + + + + + + + - ))} - -
{t('liabilities.contractName')}{t('liabilities.creditor')}{t('liabilities.principal')}{t('liabilities.remaining')}{t('liabilities.progress')}{t('common.status')}
-
+ + + {liabilityAccounts.map((liability) => ( + navigate('/liabilities')} + > + +
+
+ +
+
+
{liability.name}
+ {liability.contract_number && ( + Nº {liability.contract_number} + )} +
+
+ + {liability.creditor || '-'} + + {formatCurrency(liability.principal_amount, liability.currency)} + + + -{formatCurrency(liability.remaining_balance, liability.currency)} + + +
+
+
+
+ {liability.progress_percentage || 0}% +
+ + + {liability.status === 'active' ? ( + {t('common.active')} + ) : liability.status === 'paid_off' ? ( + {t('liabilities.paid')} + ) : ( + {liability.status} + )} + + + ))} + + +
+ )}
)}