From 1186faca3c7ba5071661dc9fbd411abab1e3f37d Mon Sep 17 00:00:00 2001 From: marcoitaloesp-ai Date: Tue, 16 Dec 2025 10:12:47 +0000 Subject: [PATCH] =?UTF-8?q?v1.42.0=20-=20Mobile=20UX:=20Navega=C3=A7=C3=A3?= =?UTF-8?q?o=20entre=20semanas=20no=20calend=C3=A1rio=20+=20Widgets=20cola?= =?UTF-8?q?ps=C3=A1veis=20consistentes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DIRETRIZES_DESENVOLVIMENTO_v4 | 259 ------------------ .../.DIRETRIZES_DESENVOLVIMENTO_v5 | 0 CHANGELOG.md | 65 +++++ VERSION | 2 +- .../components/dashboard/CalendarWidget.jsx | 160 +++++++++-- .../components/dashboard/OverdueWidget.jsx | 58 +++- .../components/dashboard/UpcomingWidget.jsx | 118 ++++++-- frontend/src/i18n/locales/en.json | 1 + frontend/src/i18n/locales/es.json | 1 + frontend/src/i18n/locales/pt-BR.json | 1 + frontend/src/index.css | 56 ++-- 11 files changed, 382 insertions(+), 339 deletions(-) delete mode 100644 .DIRETRIZES_DESENVOLVIMENTO_v4 rename .DIRETRIZES_DESENVOLVIMENTO_v5 => .github/.DIRETRIZES_DESENVOLVIMENTO_v5 (100%) diff --git a/.DIRETRIZES_DESENVOLVIMENTO_v4 b/.DIRETRIZES_DESENVOLVIMENTO_v4 deleted file mode 100644 index 9825ee9..0000000 --- a/.DIRETRIZES_DESENVOLVIMENTO_v4 +++ /dev/null @@ -1,259 +0,0 @@ -╔═══════════════════════════════════════════════════════════════════════════════╗ -║ DIRETRIZES DE DESENVOLVIMENTO - v4.0 ║ -║ ║ -║ ⚠️ ESTE ARQUIVO NÃO DEVE SER EDITADO APÓS QUALQUER COMMIT/PUSH ║ -║ ⚠️ Representa o contrato de desenvolvimento desde a versão 1.27.2 ║ -║ ⚠️ Substitui .DIRETRIZES_DESENVOLVIMENTO_v3 (v3.0) ║ -║ ║ -╚═══════════════════════════════════════════════════════════════════════════════╝ - -DATA DE CRIAÇÃO: 13 de Dezembro de 2025 -VERSÃO INICIAL: 1.27.2 -VERSÃO DAS DIRETRIZES: 4.0 -STATUS: ATIVO E IMUTÁVEL -AMBIENTE: Windows (PowerShell) - -═══════════════════════════════════════════════════════════════════════════════ - REGRAS DE DESENVOLVIMENTO -═══════════════════════════════════════════════════════════════════════════════ - -─────────────────────────────────────────────────────────────────────────────── -REGRA #1: CONTROLE DE VERSÃO SEMÂNTICO -─────────────────────────────────────────────────────────────────────────────── - -✓ Formato: MAJOR.MINOR.PATCH (exemplo: 1.27.2) -✓ Incrementar versão em CADA commit/push -✓ Manter sincronizado em: VERSION, CHANGELOG.md - -Regra de Incremento: - - MAJOR (X.0.0): Mudanças incompatíveis, redesign completo - - MINOR (0.X.0): Novas funcionalidades - - PATCH (0.0.X): Correções de bugs, ajustes menores - -─────────────────────────────────────────────────────────────────────────────── -REGRA #2: VALIDAÇÃO OBRIGATÓRIA EM PRODUÇÃO -─────────────────────────────────────────────────────────────────────────────── - -✓ TODAS as mudanças devem ser testadas em https://webmoney.cnxifly.com -✓ Workflow obrigatório: - 1. Editar código - 2. Deploy para servidor (.\deploy.ps1) - 3. Testar no domínio - 4. Commit/push apenas após validação - 5. Só então editar novamente - -✗ PROIBIDO commit sem teste em produção - -─────────────────────────────────────────────────────────────────────────────── -REGRA #3: DOCUMENTAÇÃO ESSENCIAL -─────────────────────────────────────────────────────────────────────────────── - -Arquivos de documentação mantidos (apenas estes): - -| Arquivo | Propósito | Atualizar quando | -|---------|-----------|------------------| -| VERSION | Número da versão | Cada commit | -| CHANGELOG.md | Histórico de mudanças | Cada commit | -| README.md | Visão geral do projeto | Mudanças significativas | -| ESTRUTURA_PROJETO.md | Estrutura técnica | Novos arquivos/endpoints | -| CREDENCIAIS_SERVIDOR.md | Acessos | Mudança de credenciais | -| .DIRETRIZES_DESENVOLVIMENTO_v4 | Este arquivo | NUNCA (criar nova versão) | - -Arquivos de referência (não atualizar frequentemente): -- ESPECIFICACIONES_WEBMONEY.md (especificação original) -- APRENDIZADOS_TECNICOS.md (soluções de problemas) -- ROTEIRO_INSTALACAO_SERVIDOR.md (guia de instalação) -- DKIM_DNS_RECORD.txt (configuração DNS) - -─────────────────────────────────────────────────────────────────────────────── -REGRA #4: SCRIPTS DE DEPLOY (WINDOWS) -─────────────────────────────────────────────────────────────────────────────── - -✓ SEMPRE usar os scripts PowerShell de deploy: - - Frontend: cd frontend; .\deploy.ps1 - Backend: cd backend; .\deploy.ps1 - -✗ NUNCA enviar arquivos manualmente para diretórios errados -✓ Os scripts garantem o caminho correto: - - Frontend → /var/www/webmoney/frontend/dist - - Backend → /var/www/webmoney/backend - -Requisitos Windows: - - PuTTY instalado (plink.exe, pscp.exe no PATH) - - Node.js e npm instalados - - PowerShell 5.1 ou superior - -Deploy manual (se necessário): - # Frontend - Build e enviar - cd frontend - npm run build - plink -batch -pw Master9354 root@213.165.93.60 "rm -rf /var/www/webmoney/frontend/dist/*" - pscp -r -batch -pw Master9354 dist\* root@213.165.93.60:/var/www/webmoney/frontend/dist/ - - # Backend - Enviar e atualizar - cd backend - pscp -r -batch -pw Master9354 app root@213.165.93.60:/var/www/webmoney/backend/ - plink -batch -pw Master9354 root@213.165.93.60 "cd /var/www/webmoney/backend && php artisan migrate --force" - -─────────────────────────────────────────────────────────────────────────────── -REGRA #5: CHECKLIST DE COMMIT -─────────────────────────────────────────────────────────────────────────────── - -Antes de CADA commit: - ☑ VERSION atualizado - ☑ CHANGELOG.md atualizado - ☑ Deploy executado (.\deploy.ps1) - ☑ Testado em webmoney.cnxifly.com - ☑ Sem erros no console do navegador - ☑ Mensagem de commit descritiva - -─────────────────────────────────────────────────────────────────────────────── -REGRA #6: PROIBIÇÕES EXPLÍCITAS -─────────────────────────────────────────────────────────────────────────────── - -✗ NÃO editar arquivos sem commit anterior -✗ NÃO criar documentação específica de versão (ex: DEPLOY_v1.9.0.md) -✗ NÃO duplicar informação em múltiplos arquivos -✗ NÃO fazer deploy manual (usar scripts) -✗ NÃO commitar sem testar em produção - -═══════════════════════════════════════════════════════════════════════════════ - INFRAESTRUTURA -═══════════════════════════════════════════════════════════════════════════════ - -─────────────────────────────────────────────────────────────────────────────── -SERVIDOR DE PRODUÇÃO -─────────────────────────────────────────────────────────────────────────────── - -IP: 213.165.93.60 -Porta SSH: 22 -Usuário: root -Senha: Master9354 - -Acesso Windows (PowerShell): - plink -batch -pw Master9354 root@213.165.93.60 "comando" - -Estrutura: - /var/www/webmoney/ - ├── backend/ # Laravel API - └── frontend/ - └── dist/ # React build (Nginx root) - -─────────────────────────────────────────────────────────────────────────────── -DOMÍNIOS -─────────────────────────────────────────────────────────────────────────────── - -| Subdomínio | Função | -|------------|--------| -| webmoney.cnxifly.com | Aplicação principal | -| phpmyadmin.cnxifly.com | Banco de dados | -| webmail.cnxifly.com | Email | -| mail.cnxifly.com | PostfixAdmin | - -─────────────────────────────────────────────────────────────────────────────── -STACK TECNOLÓGICA -─────────────────────────────────────────────────────────────────────────────── - -| Camada | Tecnologia | -|--------|------------| -| Backend | Laravel 12 + PHP 8.4-FPM | -| Frontend | React 18 + Vite 7 + Bootstrap 5 | -| Banco | MariaDB 11.4 | -| Cache | Redis | -| Servidor | Nginx + SSL (Let's Encrypt) | -| Auth | Laravel Sanctum (Bearer Tokens) | - -─────────────────────────────────────────────────────────────────────────────── -AMBIENTE DE DESENVOLVIMENTO (WINDOWS) -─────────────────────────────────────────────────────────────────────────────── - -Requisitos: - - Windows 10/11 - - PowerShell 5.1+ - - Node.js 20+ - - PuTTY (plink.exe, pscp.exe) - - VS Code - -Ferramentas de conexão: - | Comando Linux | Equivalente Windows | - |---------------|---------------------| - | ssh user@host | plink -batch -pw SENHA user@host | - | scp file user@host:path | pscp -batch -pw SENHA file user@host:path | - | scp -r dir user@host:path | pscp -r -batch -pw SENHA dir user@host:path | - -Flags importantes: - -batch : Não solicita interação (senhas, confirmações) - -pw : Fornece senha diretamente - -═══════════════════════════════════════════════════════════════════════════════ - SEGURANÇA -═══════════════════════════════════════════════════════════════════════════════ - -Implementado em v1.19.0: - -| Recurso | Configuração | -|---------|--------------| -| Rate Limiting | Login: 5/min, Register: 10/hour | -| CORS | Restrito a webmoney.cnxifly.com | -| Token Expiration | 7 dias | -| Cookies | HttpOnly, Secure, SameSite=lax, Encrypt=true | -| Headers | X-XSS-Protection, X-Content-Type-Options, X-Frame-Options, CSP | -| Cookie Consent | Banner LGPD/GDPR | - -═══════════════════════════════════════════════════════════════════════════════ - ESTADO ATUAL -═══════════════════════════════════════════════════════════════════════════════ - -Versão: 1.27.2 -Data: 13 de Dezembro de 2025 -Status: Produção estável - -Funcionalidades: - ✅ Autenticação (login, registro, logout) - ✅ Dashboard (gráficos, análises, widget overdue) - ✅ Contas bancárias (CRUD, multi-moeda) - ✅ Transações (agrupamento por semana, filtros, categorização em lote com seleção) - ✅ Categorias (175 pré-configuradas, auto-classificação, keywords) - ✅ Centros de custo - ✅ Importação de extratos (XLSX, CSV, OFX, PDF) - ✅ Detecção de duplicatas (auto-delete) - ✅ Detecção de transferências - ✅ Contas passivo (financiamentos) - ✅ Transações recorrentes (templates, instâncias, conciliação) - ✅ Multi-idioma (ES, PT-BR, EN) com detecção por país - ✅ Tema dark - ✅ Cookie consent (LGPD/GDPR) - ✅ Segurança hardening - -═══════════════════════════════════════════════════════════════════════════════ - HISTÓRICO DE DIRETRIZES -═══════════════════════════════════════════════════════════════════════════════ - -| Versão | Data | Mudanças | -|--------|------|----------| -| v1.0 | 2025-12-07 | Criação inicial | -| v2.0 | 2025-12-08 | Adicionada REGRA #8 (ESTRUTURA_PROJETO) | -| v3.0 | 2025-12-10 | Simplificação, remoção de redundâncias | -| v4.0 | 2025-12-13 | Migração para Windows (PowerShell, PuTTY) | - -Arquivos de diretrizes: - - .DIRETRIZES_DESENVOLVIMENTO (v1.0 - EXCLUÍDO) - - .DIRETRIZES_DESENVOLVIMENTO_v2 (v2.0 - arquivado) - - .DIRETRIZES_DESENVOLVIMENTO_v3 (v3.0 - arquivado) - - .DIRETRIZES_DESENVOLVIMENTO_v4 (v4.0 - ATIVO) - -═══════════════════════════════════════════════════════════════════════════════ - ⚠️ LEMBRETE FINAL -═══════════════════════════════════════════════════════════════════════════════ - -ANTES de editar qualquer arquivo: - 1. ✓ Último commit foi feito? - 2. ✓ VERSION será incrementado? - 3. ✓ CHANGELOG será atualizado? - 4. ✓ Deploy será feito via script (.\deploy.ps1)? - 5. ✓ Teste em produção será realizado? - -Este documento é IMUTÁVEL. Qualquer mudança requer criar v5.0. - -═══════════════════════════════════════════════════════════════════════════════ diff --git a/.DIRETRIZES_DESENVOLVIMENTO_v5 b/.github/.DIRETRIZES_DESENVOLVIMENTO_v5 similarity index 100% rename from .DIRETRIZES_DESENVOLVIMENTO_v5 rename to .github/.DIRETRIZES_DESENVOLVIMENTO_v5 diff --git a/CHANGELOG.md b/CHANGELOG.md index d615734..8166d4a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,71 @@ O formato segue [Keep a Changelog](https://keepachangelog.com/pt-BR/). Este projeto adota [Versionamento Semântico](https://semver.org/pt-BR/). +## [1.42.0] - 2025-12-16 + +### Added +- **Navegação entre semanas no Calendário Mobile** - Implementada paginação completa + - Botões chevron esquerda/direita para navegar entre semanas + - Título dinâmico: "Esta Semana", "+1 semana", "-2 semanas", etc. + - Botão "Hoje" reseta para semana atual (weekOffset = 0) + - Calendário carrega dados automaticamente da semana selecionada + - Offset de semanas persistente durante navegação + +### Fixed +- **Calendário não exibia em Mobile** - Corrigida lógica de renderização + - Problema: condição `day.isCurrentMonth` escondia dias em mobile + - Solução: `(isMobile || day.isCurrentMonth)` permite mostrar semana completa + - Adicionado grid CSS: `.calendar-grid` e `.calendar-grid-week` (7 colunas) + - Botão toggle (chevron) implementado no header mobile + - Badge mostra quantidade de transações do dia selecionado + - Tamanhos específicos: mobile (11px, 50px min-height) vs desktop (12px, 32px) + - Destaque visual do dia atual com border primary + +### Changed +- **Widget Transações em Atraso - Comportamento Mobile** - Consistência com outros widgets + - Inicia colapsado em mobile (apenas header visível) + - Auto-expansão quando há transações vencidas + - Botão toggle chevron up/down no header + - Badge mostra total de itens vencidos + - Altura dinâmica: `height: auto` em mobile + - Body com `display: none` quando colapsado + +### Improved +- **Consistência Mobile** - Todos os widgets do Dashboard seguem mesmo padrão: + - ✅ Calendário: colapso + navegação entre semanas + - ✅ Próximos 7 Dias: colapso + auto-expansão com dados + - ✅ Transações em Atraso: colapso + auto-expansão com dados + - UX unificada e previsível em dispositivos móveis + +## [1.41.1] - 2025-12-16 + +### Fixed +- **Sincronização de altura em Desktop** - Widget "Próximos 7 Dias" agora sincroniza perfeitamente com o card central de transações + - Corrigido seletor para buscar `.col-lg-8 .col-lg-7 .card` (lista de transações do dia) + - Aumentado timeout de 100ms para 200ms para garantir renderização completa + - Altura idêntica entre os 3 widgets em desktop: calendário, transações do dia e próximos 7 dias + +### Validated +- ✅ Mobile: Widgets colapsam corretamente, expandem apenas com dados +- ✅ Desktop: Altura sincronizada perfeitamente entre todos os widgets + +## [1.41.0] - 2025-12-16 + +### Changed +- **WIDGETS COLAPSÁVEIS EM MOBILE** - Otimização do Dashboard para telas pequenas + - Calendário e Próximos 7 Dias iniciam colapsados em mobile (<768px) + - Expansão automática quando houver dados para exibir + - Botão toggle (chevron up/down) no header para expandir/colapsar manualmente + - Badge com contagem de itens no header quando há dados + - CalendarWidget: mostra quantidade de transações do dia selecionado + - UpcomingWidget: mostra quantidade total de transações pendentes + - Comportamento desktop mantido: sempre expandido + +### Improved +- **UX Mobile** - Menos scroll necessário, informação visível apenas quando relevante +- **Performance** - Reduz altura inicial da página em mobile +- **Feedback visual** - Badges indicam quantidade de dados sem necessidade de expandir + ## [1.40.0] - 2025-12-16 ### Changed diff --git a/VERSION b/VERSION index 32b7211..a50908c 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.40.0 +1.42.0 diff --git a/frontend/src/components/dashboard/CalendarWidget.jsx b/frontend/src/components/dashboard/CalendarWidget.jsx index 1c75249..c9875da 100644 --- a/frontend/src/components/dashboard/CalendarWidget.jsx +++ b/frontend/src/components/dashboard/CalendarWidget.jsx @@ -20,6 +20,26 @@ const CalendarWidget = () => { const [dayLoading, setDayLoading] = useState(false); const [actionLoading, setActionLoading] = useState(null); const [calendarHeight, setCalendarHeight] = useState(null); + + // Detectar mobile para visualização semanal + const [isMobile, setIsMobile] = useState(window.innerWidth < 768); + const [isExpanded, setIsExpanded] = useState(false); + const [weekOffset, setWeekOffset] = useState(0); // Offset de semanas em mobile (0 = semana atual) + + useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth < 768); + }; + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + // Auto-expandir quando houver dados em mobile + useEffect(() => { + if (isMobile && dayData?.items?.length > 0 && !isExpanded) { + setIsExpanded(true); + } + }, [isMobile, dayData, isExpanded]); // Estado do modal de conciliação const [showReconcileModal, setShowReconcileModal] = useState(false); @@ -109,6 +129,18 @@ const CalendarWidget = () => { const today = new Date(); setCurrentDate(new Date(today.getFullYear(), today.getMonth(), 1)); setSelectedDate(today.toISOString().split('T')[0]); + setWeekOffset(0); // Voltar para semana atual em mobile + }; + + // Navegação de semanas em mobile + const prevWeek = () => { + setWeekOffset(weekOffset - 1); + setSelectedDate(null); + }; + + const nextWeek = () => { + setWeekOffset(weekOffset + 1); + setSelectedDate(null); }; // Obter dados de uma data específica @@ -122,6 +154,30 @@ const CalendarWidget = () => { const year = currentDate.getFullYear(); const month = currentDate.getMonth(); + // MOBILE: Visualização semanal + if (isMobile) { + const today = new Date(); + const startOfWeek = new Date(today); + startOfWeek.setDate(today.getDate() - today.getDay() + (weekOffset * 7)); // Domingo + offset + + const days = []; + for (let i = 0; i < 7; i++) { + const date = new Date(startOfWeek); + date.setDate(startOfWeek.getDate() + i); + + const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`; + const todayStr = today.toISOString().split('T')[0]; + days.push({ + day: date.getDate(), + isCurrentMonth: date.getMonth() === today.getMonth(), + date: dateStr, + data: getDateData(dateStr), + isToday: dateStr === todayStr, + }); + } + return days; + } + const firstDay = new Date(year, month, 1); const lastDay = new Date(year, month + 1, 0); @@ -273,34 +329,76 @@ const CalendarWidget = () => {
{t('dashboard.calendar')} + {isMobile && dayData?.items?.length > 0 && ( + + {dayData.items.length} + + )}
- - -
- {/* Navegação do mês */} -
- - - {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()} - - +
+ {isMobile && ( + + )} + {!isMobile && ( + + )}
+
+
+ {/* Navegação do mês/semana */} + {!isMobile && ( +
+ + + {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()} + + +
+ )} + {isMobile && ( +
+ + + {weekOffset === 0 ? (t('dashboard.thisWeek') || 'Esta Semana') : + weekOffset > 0 ? `+${weekOffset} ${weekOffset === 1 ? 'semana' : 'semanas'}` : + `${weekOffset} ${weekOffset === -1 ? 'semana' : 'semanas'}`} + + +
+ )} {loading ? (
@@ -320,19 +418,21 @@ const CalendarWidget = () => {
{/* Dias */} -
+
{days.map((day, index) => (
- {day.isCurrentMonth ? ( + {(isMobile || day.isCurrentMonth) ? ( +
+ {isMobile && ( + + )} + +
-
+
{loading ? (
diff --git a/frontend/src/components/dashboard/UpcomingWidget.jsx b/frontend/src/components/dashboard/UpcomingWidget.jsx index 0d0ba70..8f7e88d 100644 --- a/frontend/src/components/dashboard/UpcomingWidget.jsx +++ b/frontend/src/components/dashboard/UpcomingWidget.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect, useCallback, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { dashboardService } from '../../services/api'; import useFormatters from '../../hooks/useFormatters'; @@ -6,9 +6,67 @@ import useFormatters from '../../hooks/useFormatters'; const UpcomingWidget = () => { const { t } = useTranslation(); const { currency } = useFormatters(); + const cardRef = useRef(null); const [data, setData] = useState(null); const [loading, setLoading] = useState(true); + const [isMobile, setIsMobile] = useState(window.innerWidth < 768); + const [isExpanded, setIsExpanded] = useState(false); + const [calendarHeight, setCalendarHeight] = useState(null); + + // Detectar mudanças de tamanho da tela + useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth < 768); + }; + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + // Auto-expandir quando houver dados em mobile + useEffect(() => { + const hasItems = data?.by_date?.some(day => day.items?.length > 0); + if (isMobile && hasItems && !isExpanded) { + setIsExpanded(true); + } + }, [isMobile, data, isExpanded]); + + // Sincronizar altura com CalendarWidget em desktop + useEffect(() => { + if (isMobile) { + setCalendarHeight(null); + return; + } + + const updateHeight = () => { + const row = cardRef.current?.closest('.row.g-4.mb-4'); + if (row) { + // Buscar o card da lista de transações (col-lg-7) dentro do CalendarWidget + const transactionsCard = row.querySelector('.col-lg-8 .col-lg-7 .card'); + if (transactionsCard) { + setCalendarHeight(transactionsCard.offsetHeight); + } + } + }; + + const timer = setTimeout(updateHeight, 200); + window.addEventListener('resize', updateHeight); + + const observer = new ResizeObserver(updateHeight); + const row = cardRef.current?.closest('.row.g-4.mb-4'); + if (row) { + const transactionsCard = row.querySelector('.col-lg-8 .col-lg-7 .card'); + if (transactionsCard) { + observer.observe(transactionsCard); + } + } + + return () => { + clearTimeout(timer); + window.removeEventListener('resize', updateHeight); + observer.disconnect(); + }; + }, [isMobile, loading, data]); const loadData = useCallback(async () => { setLoading(true); @@ -33,12 +91,8 @@ const UpcomingWidget = () => { }; const getTypeIcon = (item) => { - if (item.type === 'recurring') { - return 'bi-arrow-repeat'; - } - if (item.is_transfer) { - return 'bi-arrow-left-right'; - } + if (item.type === 'recurring') return 'bi-arrow-repeat'; + if (item.is_transfer) return 'bi-arrow-left-right'; return item.transaction_type === 'credit' ? 'bi-arrow-down-circle' : 'bi-arrow-up-circle'; }; @@ -49,23 +103,49 @@ const UpcomingWidget = () => { }; return ( -
+
{t('dashboard.upcomingTransactions')} + {isMobile && data?.by_date?.some(day => day.items?.length > 0) && ( + + {data.by_date.reduce((sum, day) => sum + day.items.length, 0)} + + )}
- +
+ {isMobile && ( + + )} + +
-
+
{loading ? (
@@ -81,7 +161,6 @@ const UpcomingWidget = () => { <> {data.by_date.map((day) => (
- {/* Header do dia */}
{
- {/* Items do dia */} {day.items.map((item) => (
{ borderLeft: `3px solid ${getTypeColor(item)}`, }} > - {/* Ícone */}
{
- {/* Info */}
{item.description} @@ -137,7 +213,6 @@ const UpcomingWidget = () => {
- {/* Valor */}
@@ -152,7 +227,6 @@ const UpcomingWidget = () => { )}
- {/* Footer com resumo */} {data?.summary && !loading && data.by_date?.length > 0 && (
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json index 95c5f58..c0dd397 100644 --- a/frontend/src/i18n/locales/en.json +++ b/frontend/src/i18n/locales/en.json @@ -130,6 +130,7 @@ "upcomingTransactions": "Next 7 Days", "noUpcomingTransactions": "No pending transactions", "today": "Today", + "thisWeek": "This Week", "tomorrow": "Tomorrow", "daysAhead": "days", "pendingRecurring": "Pending Recurring", diff --git a/frontend/src/i18n/locales/es.json b/frontend/src/i18n/locales/es.json index 579fd75..7858464 100644 --- a/frontend/src/i18n/locales/es.json +++ b/frontend/src/i18n/locales/es.json @@ -130,6 +130,7 @@ "upcomingTransactions": "Próximos 7 Días", "noUpcomingTransactions": "No hay transacciones pendientes", "today": "Hoy", + "thisWeek": "Esta Semana", "tomorrow": "Mañana", "daysAhead": "días", "pendingRecurring": "Recurrentes Pendientes", diff --git a/frontend/src/i18n/locales/pt-BR.json b/frontend/src/i18n/locales/pt-BR.json index 4879480..ebc6f23 100644 --- a/frontend/src/i18n/locales/pt-BR.json +++ b/frontend/src/i18n/locales/pt-BR.json @@ -131,6 +131,7 @@ "upcomingTransactions": "Próximos 7 Dias", "noUpcomingTransactions": "Nenhuma transação pendente", "today": "Hoje", + "thisWeek": "Esta Semana", "tomorrow": "Amanhã", "daysAhead": "dias", "pendingRecurring": "Recorrentes Pendentes", diff --git a/frontend/src/index.css b/frontend/src/index.css index 6a51551..caa68f3 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -2511,25 +2511,25 @@ input[type="color"]::-webkit-color-swatch { 🍎 iOS / iPhone Specific Optimizations ============================================== */ -/* Touch targets mínimos de 44x44px (Apple HIG) */ -.btn, -.btn-sm, -.btn-lg, -button, -a.btn, -.form-check-input, -.form-switch .form-check-input, -.dropdown-toggle, -.nav-link, -.sidebar-link, -.sidebar-group-toggle { - min-height: 44px !important; - min-width: 44px !important; - touch-action: manipulation; /* Desabilita zoom duplo-toque */ -} - /* Cards e containers em telas pequenas */ @media (max-width: 576px) { + /* Touch targets mínimos de 44x44px (Apple HIG) - APENAS EM MOBILE */ + .btn, + .btn-sm, + .btn-lg, + button, + a.btn, + .form-check-input, + .form-switch .form-check-input, + .dropdown-toggle, + .nav-link, + .sidebar-link, + .sidebar-group-toggle { + min-height: 44px !important; + min-width: 44px !important; + touch-action: manipulation; /* Desabilita zoom duplo-toque */ + } + .card { margin-bottom: 0.75rem !important; border-radius: 0.75rem !important; @@ -2800,3 +2800,25 @@ a, } } +/* Calendário Grid */ +.calendar-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 4px; +} + +.calendar-grid-week { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 4px; +} + +.calendar-day { + min-height: 32px; +} + +@media (max-width: 768px) { + .calendar-day { + min-height: 50px; + } +}