Compare commits

...

10 Commits

Author SHA1 Message Date
Felipe Coutinho
ed9196797b chore: preparar versão 2.7.12 2026-06-30 16:53:44 -03:00
Felipe Coutinho
532186fe39 fix: corrigir seleção de faturas em popovers 2026-06-30 16:50:23 -03:00
Felipe Coutinho
a2ce7f1283 chore: preparar versão 2.7.11 2026-06-28 19:48:56 -03:00
Felipe Coutinho
f3c3d98aeb feat: agrupar lançamentos por data 2026-06-28 19:48:39 -03:00
Felipe Coutinho
24709ec232 style: compactar checkboxes 2026-06-28 19:48:29 -03:00
Felipe Coutinho
2fd94118f2 fix: corrigir seleção de data nos lançamentos 2026-06-28 19:48:25 -03:00
Felipe Coutinho
01f161f011 docs: documenta fluxo completo de publicacao 2026-06-27 18:24:16 -03:00
Felipe Coutinho
4741087feb chore: prepara versao 2.7.10 2026-06-27 14:24:47 -03:00
Felipe Coutinho
32b190ab4e feat(lancamentos): oculta parcelas antecipadas por preferencia 2026-06-27 14:24:47 -03:00
Felipe Coutinho
d06bac5624 chore(deps): atualiza dependencias 2026-06-27 14:24:47 -03:00
39 changed files with 7962 additions and 1247 deletions

View File

@@ -16,7 +16,7 @@
3. **Periods** usam formato `YYYY-MM` (ex: `"2025-11"`). Utils em `src/shared/utils/period/`. 3. **Periods** usam formato `YYYY-MM` (ex: `"2025-11"`). Utils em `src/shared/utils/period/`.
4. **Moeda**: R$ com 2 decimais. DB: `numeric(12, 2)`. Utils em `src/shared/utils/currency.ts`. 4. **Moeda**: R$ com 2 decimais. DB: `numeric(12, 2)`. Utils em `src/shared/utils/currency.ts`.
5. **Revalidation**: usar `revalidateForEntity("entity")` de `src/shared/lib/actions/helpers.ts` apos mutations. 5. **Revalidation**: usar `revalidateForEntity("entity")` de `src/shared/lib/actions/helpers.ts` apos mutations.
6. **Versionamento e publicação**: registrar mudancas no `CHANGELOG.md` seguindo Keep a Changelog, também alterar o `package.json` e o badge de versão do `README.md`. Cada versão deve ter um parágrafo introdutório em linguagem humana logo abaixo do cabeçalho `## [x.y.z]`, antes das seções `### Adicionado/Alterado/Removido` — descrevendo em prosa o que a versão representa (ex: "Esta versão foca em polimento visual e reorganização interna..."). A `main` executa somente a CI; imagens Docker e GitHub Releases são publicadas exclusivamente por tags SemVer no formato `vX.Y.Z`. Antes de criar a tag, confirmar que a CI da `main` passou e que tag, `package.json`, `CHANGELOG.md` e badge do `README.md` usam a mesma versão. A tag deve apontar para o commit validado. Criar ou enviar uma tag dispara publicação externa (`X.Y.Z`, `X.Y`, `X` e `latest` no Docker Hub, seguida da GitHub Release), portanto agentes nunca devem criar ou fazer push de tags sem autorização explícita do usuário. Não voltar a publicar `latest` diretamente de pushes na `main`. 6. **Versionamento e publicação**: registrar mudancas no `CHANGELOG.md` seguindo Keep a Changelog, também alterar o `package.json` e o badge de versão do `README.md`. Cada versão deve ter um parágrafo introdutório em linguagem humana logo abaixo do cabeçalho `## [x.y.z]`, antes das seções `### Adicionado/Alterado/Removido` — descrevendo em prosa o que a versão representa (ex: "Esta versão foca em polimento visual e reorganização interna..."). A `main` executa somente a CI; imagens Docker e GitHub Releases são publicadas exclusivamente por tags SemVer no formato `vX.Y.Z`. Antes de criar a tag, confirmar que a CI da `main` passou e que tag, `package.json`, `CHANGELOG.md` e badge do `README.md` usam a mesma versão. A tag deve apontar para o commit validado. Criar ou enviar uma tag dispara publicação externa (`X.Y.Z`, `X.Y`, `X` e `latest` no Docker Hub, seguida da GitHub Release), portanto agentes nunca devem criar ou fazer push de tags sem autorização explícita do usuário. Quando o usuário pedir **"commit e push"** em uma mudança que prepara uma nova versão, isso conta como autorização explícita para executar o fluxo completo: commitar, enviar a `main`, aguardar a CI da `main` passar, criar a tag SemVer correspondente à versão preparada e enviar essa tag. Se não houver versão preparada ou se houver divergência entre `package.json`, `CHANGELOG.md`, badge do `README.md` e tag pretendida, parar e pedir confirmação. Não voltar a publicar `latest` diretamente de pushes na `main`.
7. **Comunicacao**: responder em portugues clara e direta com o time. 7. **Comunicacao**: responder em portugues clara e direta com o time.
8. **Commit messages**: agrupar por natureza. em pt-br. seguindo o padrao do sistema. 8. **Commit messages**: agrupar por natureza. em pt-br. seguindo o padrao do sistema.
9. **README.md**: sempre que fizer alteracoes significativas, atualize o README.md. 9. **README.md**: sempre que fizer alteracoes significativas, atualize o README.md.

View File

@@ -5,6 +5,42 @@ Todas as mudanças notáveis deste projeto serão documentadas neste arquivo.
O formato é baseado em [Keep a Changelog](https://keepachangelog.com/pt-BR/1.1.0/), O formato é baseado em [Keep a Changelog](https://keepachangelog.com/pt-BR/1.1.0/),
e este projeto adere ao [Versionamento Semântico](https://semver.org/lang/pt-BR/). e este projeto adere ao [Versionamento Semântico](https://semver.org/lang/pt-BR/).
## [2.7.12] - 2026-06-30
Esta versão corrige a seleção de faturas e períodos em popovers usados dentro de diálogos, alinhando esses componentes ao mesmo comportamento seguro aplicado recentemente aos seletores de data.
### Corrigido
- Lançamentos: o seletor inline de fatura volta a aceitar cliques no mês em diálogos de criação/edição e no modal de múltiplos lançamentos.
- Períodos: botões internos do seletor mensal agora são explicitamente `type="button"`, evitando submits acidentais quando o componente aparece dentro de formulários.
- Interface: popovers de período e escolha de logo de estabelecimento passam a usar modo modal quando podem aparecer sobre diálogos, preservando foco e clique.
## [2.7.11] - 2026-06-28
Esta atualização melhora a leitura diária dos lançamentos e deixa a nova visualização opcional, mantendo a possibilidade de voltar ao formato anterior quando a lista agrupada não for a melhor escolha para o usuário.
### Adicionado
- Preferências: nova opção `Agrupar por data` em Ajustes > Preferências > Lançamentos para alternar entre a lista agrupada por data e a visualização anterior.
- Lançamentos: a lista agora pode exibir uma barra de data por grupo no formato `TER, 26 JUN 2026`, reunindo os lançamentos daquele dia.
### Alterado
- Lançamentos: quando o agrupamento por data está ativo, os cards e linhas deixam de repetir a data em cada item, reduzindo ruído visual e mantendo vencimentos de boleto como informação do lançamento.
- Lançamentos: a preferência de agrupamento por data é aplicada nas listagens principais, extratos de conta, faturas de cartão, detalhes de pessoa e detalhes de categoria.
- Interface: checkboxes passam a usar um visual mais compacto.
- Documentação: o README agora cita o agrupamento por data entre as opções de personalização.
### Corrigido
- Lançamentos: o seletor de data em modais de criação e edição volta a aceitar a data selecionada no calendário.
## [2.7.10] - 2026-06-27
Esta versão ajusta a experiência de leitura dos lançamentos parcelados após antecipações, permitindo esconder parcelas já liquidadas por antecipação sem perder o histórico quando ele ainda for necessário.
### Adicionado
- Ajustes: nova preferência `Ocultar parcelas antecipadas` para remover da tabela lançamentos marcados como parcela antecipada.
### Alterado
- Lançamentos: a preferência passa a ser aplicada nas listagens principais, extratos de conta, faturas de cartão, detalhes de pessoa, detalhes de categoria e exportação de lançamentos, preservando paginação e contagens visíveis.
## [2.7.9] - 2026-06-21 ## [2.7.9] - 2026-06-21
Esta versão torna a publicação mais previsível ao separar a validação contínua da entrega de versões oficiais. Pull requests e a branch principal continuam sendo verificadas, enquanto imagens Docker e releases passam a ser produzidas somente a partir de uma tag SemVer validada. Esta versão torna a publicação mais previsível ao separar a validação contínua da entrega de versões oficiais. Pull requests e a branch principal continuam sendo verificadas, enquanto imagens Docker e releases passam a ser produzidas somente a partir de uma tag SemVer validada.

View File

@@ -16,7 +16,7 @@
3. **Periods** usam formato `YYYY-MM` (ex: `"2025-11"`). Utils em `src/shared/utils/period/`. 3. **Periods** usam formato `YYYY-MM` (ex: `"2025-11"`). Utils em `src/shared/utils/period/`.
4. **Moeda**: R$ com 2 decimais. DB: `numeric(12, 2)`. Utils em `src/shared/utils/currency.ts`. 4. **Moeda**: R$ com 2 decimais. DB: `numeric(12, 2)`. Utils em `src/shared/utils/currency.ts`.
5. **Revalidation**: usar `revalidateForEntity("entity")` de `src/shared/lib/actions/helpers.ts` apos mutations. 5. **Revalidation**: usar `revalidateForEntity("entity")` de `src/shared/lib/actions/helpers.ts` apos mutations.
6. **Versionamento**: registrar mudancas no `CHANGELOG.md` seguindo Keep a Changelog, também altere o `package.json` e `readme.md` (Badges do README.md). Cada versão deve ter um parágrafo introdutório em linguagem humana logo abaixo do cabeçalho `## [x.y.z]`, antes das seções `### Adicionado/Alterado/Removido` — descrevendo em prosa o que a versão representa (ex: "Esta versão foca em polimento visual e reorganização interna..."). 6. **Versionamento e publicação**: registrar mudancas no `CHANGELOG.md` seguindo Keep a Changelog, também alterar o `package.json` e o badge de versão do `README.md`. Cada versão deve ter um parágrafo introdutório em linguagem humana logo abaixo do cabeçalho `## [x.y.z]`, antes das seções `### Adicionado/Alterado/Removido` — descrevendo em prosa o que a versão representa (ex: "Esta versão foca em polimento visual e reorganização interna..."). A `main` executa somente a CI; imagens Docker e GitHub Releases são publicadas exclusivamente por tags SemVer no formato `vX.Y.Z`. Antes de criar a tag, confirmar que a CI da `main` passou e que tag, `package.json`, `CHANGELOG.md` e badge do `README.md` usam a mesma versão. A tag deve apontar para o commit validado. Criar ou enviar uma tag dispara publicação externa (`X.Y.Z`, `X.Y`, `X` e `latest` no Docker Hub, seguida da GitHub Release), portanto agentes nunca devem criar ou fazer push de tags sem autorização explícita do usuário. Quando o usuário pedir **"commit e push"** em uma mudança que prepara uma nova versão, isso conta como autorização explícita para executar o fluxo completo: commitar, enviar a `main`, aguardar a CI da `main` passar, criar a tag SemVer correspondente à versão preparada e enviar essa tag. Se não houver versão preparada ou se houver divergência entre `package.json`, `CHANGELOG.md`, badge do `README.md` e tag pretendida, parar e pedir confirmação. Não voltar a publicar `latest` diretamente de pushes na `main`.
7. **Comunicacao**: responder em portugues clara e direta com o time. 7. **Comunicacao**: responder em portugues clara e direta com o time.
8. **Commit messages**: agrupar por natureza. em pt-br. seguindo o padrao do sistema. 8. **Commit messages**: agrupar por natureza. em pt-br. seguindo o padrao do sistema.
9. **README.md**: sempre que fizer alteracoes significativas, atualize o README.md. 9. **README.md**: sempre que fizer alteracoes significativas, atualize o README.md.

View File

@@ -10,7 +10,7 @@
> **Não há versão online hospedada.** Você precisa clonar o repositório e rodar localmente ou no seu próprio servidor. > **Não há versão online hospedada.** Você precisa clonar o repositório e rodar localmente ou no seu próprio servidor.
[![Version](https://img.shields.io/badge/version-2.7.9-blue?style=flat-square)](CHANGELOG.md) [![Version](https://img.shields.io/badge/version-2.7.12-blue?style=flat-square)](CHANGELOG.md)
[![Next.js](https://img.shields.io/badge/Next.js-black?style=flat-square&logo=next.js)](https://nextjs.org/) [![Next.js](https://img.shields.io/badge/Next.js-black?style=flat-square&logo=next.js)](https://nextjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
[![PostgreSQL](https://img.shields.io/badge/PostgreSQL-blue?style=flat-square&logo=postgresql)](https://www.postgresql.org/) [![PostgreSQL](https://img.shields.io/badge/PostgreSQL-blue?style=flat-square&logo=postgresql)](https://www.postgresql.org/)
@@ -89,7 +89,7 @@ A ideia é simples: ter um lugar onde consigo ver todas as minhas contas, cartõ
<img src="./public/images/companion-preview-light.webp" alt="OpenMonetis Companion" width="300" height="600" /> <img src="./public/images/companion-preview-light.webp" alt="OpenMonetis Companion" width="300" height="600" />
</p> </p>
⚙️ **Personalização** — Tema dark/light, modo privacidade, ordem das colunas, exibição de anotações, tamanho máximo de anexos, resumo opcional no modal de lançamento e changelog visual para acompanhar as novidades do app. ⚙️ **Personalização** — Tema dark/light, modo privacidade, ordem das colunas, agrupamento por data em lançamentos, exibição de anotações, tamanho máximo de anexos, resumo opcional no modal de lançamento e changelog visual para acompanhar as novidades do app.
### Stack técnica ### Stack técnica
@@ -628,8 +628,8 @@ Antes de começar, leia o [`CLAUDE.md`](CLAUDE.md) — ele documenta a arquitetu
As validações rodam em pull requests e em cada push na `main`. A publicação só começa quando uma tag SemVer aponta para um commit validado e a versão da tag corresponde ao `package.json` e ao `CHANGELOG.md`. As validações rodam em pull requests e em cada push na `main`. A publicação só começa quando uma tag SemVer aponta para um commit validado e a versão da tag corresponde ao `package.json` e ao `CHANGELOG.md`.
```bash ```bash
git tag -a v2.7.9 -m "v2.7.9" git tag -a v2.7.12 -m "v2.7.12"
git push origin v2.7.9 git push origin v2.7.12
``` ```
O workflow da tag valida o código, publica as imagens Docker versionadas e `latest` e, somente depois, cria a GitHub Release com as notas do changelog. O workflow da tag valida o código, publica as imagens Docker versionadas e `latest` e, somente depois, cria a GitHub Release com as notas do changelog.

View File

@@ -0,0 +1 @@
ALTER TABLE "preferencias_usuario" ADD COLUMN "ocultar_parcelas_antecipadas" boolean DEFAULT false NOT NULL;

View File

@@ -0,0 +1 @@
ALTER TABLE "preferencias_usuario" ADD COLUMN "agrupar_lancamentos_por_data" boolean DEFAULT true NOT NULL;

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -218,6 +218,20 @@
"when": 1782051007412, "when": 1782051007412,
"tag": "0031_lame_cerise", "tag": "0031_lame_cerise",
"breakpoints": true "breakpoints": true
},
{
"idx": 32,
"version": "7",
"when": 1782569103402,
"tag": "0032_bumpy_spencer_smythe",
"breakpoints": true
},
{
"idx": 33,
"version": "7",
"when": 1782685465530,
"tag": "0033_demonic_supreme_intelligence",
"breakpoints": true
} }
] ]
} }

View File

@@ -1,6 +1,6 @@
{ {
"name": "openmonetis", "name": "openmonetis",
"version": "2.7.9", "version": "2.7.12",
"private": true, "private": true,
"packageManager": "pnpm@11.1.3", "packageManager": "pnpm@11.1.3",
"scripts": { "scripts": {
@@ -31,32 +31,32 @@
"mockup": "tsx scripts/mock-data.ts" "mockup": "tsx scripts/mock-data.ts"
}, },
"dependencies": { "dependencies": {
"@ai-sdk/anthropic": "^3.0.81", "@ai-sdk/anthropic": "^3.0.88",
"@ai-sdk/google": "^3.0.80", "@ai-sdk/google": "^3.0.85",
"@ai-sdk/openai": "^3.0.67", "@ai-sdk/openai": "^3.0.76",
"@ai-sdk/openai-compatible": "^2.0.48", "@ai-sdk/openai-compatible": "^2.0.53",
"@aws-sdk/client-s3": "^3.1059.0", "@aws-sdk/client-s3": "^3.1075.0",
"@aws-sdk/s3-request-presigner": "^3.1059.0", "@aws-sdk/s3-request-presigner": "^3.1075.0",
"@better-auth/passkey": "^1.6.14", "@better-auth/passkey": "^1.6.22",
"@dnd-kit/core": "^6.3.1", "@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0", "@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2", "@dnd-kit/utilities": "^3.2.2",
"@openrouter/ai-sdk-provider": "^2.9.0", "@openrouter/ai-sdk-provider": "^2.10.0",
"@radix-ui/react-alert-dialog": "1.1.15", "@radix-ui/react-alert-dialog": "1.1.15",
"@radix-ui/react-avatar": "1.1.11", "@radix-ui/react-avatar": "1.1.11",
"@radix-ui/react-checkbox": "1.3.3", "@radix-ui/react-checkbox": "1.3.3",
"@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-collapsible": "1.1.12",
"@radix-ui/react-dialog": "1.1.15", "@radix-ui/react-dialog": "1.1.15",
"@radix-ui/react-dropdown-menu": "2.1.16", "@radix-ui/react-dropdown-menu": "2.1.16",
"@radix-ui/react-hover-card": "^1.1.15", "@radix-ui/react-hover-card": "^1.1.17",
"@radix-ui/react-label": "2.1.8", "@radix-ui/react-label": "2.1.8",
"@radix-ui/react-navigation-menu": "^1.2.14", "@radix-ui/react-navigation-menu": "^1.2.16",
"@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-popover": "^1.1.17",
"@radix-ui/react-progress": "1.1.8", "@radix-ui/react-progress": "1.1.8",
"@radix-ui/react-radio-group": "^1.3.8", "@radix-ui/react-radio-group": "^1.4.1",
"@radix-ui/react-select": "2.2.6", "@radix-ui/react-select": "2.2.6",
"@radix-ui/react-separator": "1.1.8", "@radix-ui/react-separator": "1.1.8",
"@radix-ui/react-slider": "^1.3.6", "@radix-ui/react-slider": "^1.4.1",
"@radix-ui/react-slot": "1.2.4", "@radix-ui/react-slot": "1.2.4",
"@radix-ui/react-switch": "1.2.6", "@radix-ui/react-switch": "1.2.6",
"@radix-ui/react-tabs": "1.1.13", "@radix-ui/react-tabs": "1.1.13",
@@ -64,11 +64,11 @@
"@radix-ui/react-toggle-group": "1.1.11", "@radix-ui/react-toggle-group": "1.1.11",
"@radix-ui/react-tooltip": "1.2.8", "@radix-ui/react-tooltip": "1.2.8",
"@remixicon/react": "4.9.0", "@remixicon/react": "4.9.0",
"@tanstack/react-query": "^5.101.0", "@tanstack/react-query": "^5.101.1",
"@tanstack/react-table": "8.21.3", "@tanstack/react-table": "8.21.3",
"@tanstack/react-virtual": "^3.14.2", "@tanstack/react-virtual": "^3.14.4",
"ai": "^6.0.195", "ai": "^6.0.213",
"better-auth": "1.6.14", "better-auth": "1.6.22",
"canvas-confetti": "^1.9.4", "canvas-confetti": "^1.9.4",
"class-variance-authority": "0.7.1", "class-variance-authority": "0.7.1",
"clsx": "2.1.1", "clsx": "2.1.1",
@@ -86,7 +86,7 @@
"react-day-picker": "^10.0.1", "react-day-picker": "^10.0.1",
"react-dom": "19.2.7", "react-dom": "19.2.7",
"recharts": "3.8.1", "recharts": "3.8.1",
"resend": "^6.12.4", "resend": "^6.16.0",
"sonner": "2.0.7", "sonner": "2.0.7",
"tailwind-merge": "3.6.0", "tailwind-merge": "3.6.0",
"tw-animate-css": "^1.4.0", "tw-animate-css": "^1.4.0",
@@ -105,7 +105,7 @@
"babel-plugin-react-compiler": "^1.0.0", "babel-plugin-react-compiler": "^1.0.0",
"dotenv": "^17.4.2", "dotenv": "^17.4.2",
"drizzle-kit": "0.31.10", "drizzle-kit": "0.31.10",
"knip": "^6.15.0", "knip": "^6.22.0",
"tailwindcss": "4.3.0", "tailwindcss": "4.3.0",
"tsx": "4.22.4", "tsx": "4.22.4",
"typescript": "6.0.3" "typescript": "6.0.3"

2673
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -109,6 +109,8 @@ export default async function Page({ params, searchParams }: PageProps) {
filters: searchFilters, filters: searchFilters,
slugMaps, slugMaps,
accountId: account.id, accountId: account.id,
hideAnticipatedInstallments:
userPreferences?.hideAnticipatedInstallments ?? false,
}); });
const transactionsPage = await fetchAccountTransactionsPage( const transactionsPage = await fetchAccountTransactionsPage(
@@ -233,6 +235,9 @@ export default async function Page({ params, searchParams }: PageProps) {
)} )}
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false} noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
columnOrder={userPreferences?.transactionsColumnOrder ?? null} columnOrder={userPreferences?.transactionsColumnOrder ?? null}
groupTransactionsByDate={
userPreferences?.groupTransactionsByDate ?? true
}
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50} attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
/> />
</section> </section>

View File

@@ -82,6 +82,8 @@ export default async function Page({ params, searchParams }: PageProps) {
filters: searchFilters, filters: searchFilters,
slugMaps, slugMaps,
cardId: card.id, cardId: card.id,
hideAnticipatedInstallments:
userPreferences?.hideAnticipatedInstallments ?? false,
}); });
const transactionRows = await fetchCardTransactions(filters); const transactionRows = await fetchCardTransactions(filters);
@@ -210,6 +212,9 @@ export default async function Page({ params, searchParams }: PageProps) {
allowCreate allowCreate
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false} noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
columnOrder={userPreferences?.transactionsColumnOrder ?? null} columnOrder={userPreferences?.transactionsColumnOrder ?? null}
groupTransactionsByDate={
userPreferences?.groupTransactionsByDate ?? true
}
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50} attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
defaultCardId={card.id} defaultCardId={card.id}
defaultPaymentMethod="Cartão de crédito" defaultPaymentMethod="Cartão de crédito"

View File

@@ -41,13 +41,17 @@ export default async function Page({ params, searchParams }: PageProps) {
const periodoParam = getSingleParam(resolvedSearchParams, "periodo"); const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
const { period: selectedPeriod } = parsePeriodParam(periodoParam); const { period: selectedPeriod } = parsePeriodParam(periodoParam);
const [detail, filterSources, estabelecimentos, userPreferences] = const [filterSources, estabelecimentos, userPreferences] = await Promise.all([
await Promise.all([
fetchCategoryDetails(userId, categoryId, selectedPeriod),
fetchTransactionFilterSources(userId), fetchTransactionFilterSources(userId),
fetchRecentEstablishments(userId), fetchRecentEstablishments(userId),
fetchUserPreferences(userId), fetchUserPreferences(userId),
]); ]);
const detail = await fetchCategoryDetails(
userId,
categoryId,
selectedPeriod,
userPreferences?.hideAnticipatedInstallments ?? false,
);
if (!detail) { if (!detail) {
notFound(); notFound();
@@ -101,6 +105,9 @@ export default async function Page({ params, searchParams }: PageProps) {
allowCreate={true} allowCreate={true}
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false} noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
columnOrder={userPreferences?.transactionsColumnOrder ?? null} columnOrder={userPreferences?.transactionsColumnOrder ?? null}
groupTransactionsByDate={
userPreferences?.groupTransactionsByDate ?? true
}
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50} attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
/> />
</main> </main>

View File

@@ -131,6 +131,7 @@ export default async function Page({ params, searchParams }: PageProps) {
...EMPTY_FILTERS, ...EMPTY_FILTERS,
searchFilter: allSearchFilters.searchFilter, // Permitir busca mesmo em modo read-only searchFilter: allSearchFilters.searchFilter, // Permitir busca mesmo em modo read-only
}; };
const userPreferences = await fetchUserPreferences(userId);
let filterSources: Awaited< let filterSources: Awaited<
ReturnType<typeof fetchTransactionFilterSources> ReturnType<typeof fetchTransactionFilterSources>
@@ -163,6 +164,8 @@ export default async function Page({ params, searchParams }: PageProps) {
filters: searchFilters, filters: searchFilters,
slugMaps, slugMaps,
payerId: pagador.id, payerId: pagador.id,
hideAnticipatedInstallments:
userPreferences?.hideAnticipatedInstallments ?? false,
}); });
const sharesPromise = canEdit const sharesPromise = canEdit
@@ -184,7 +187,6 @@ export default async function Page({ params, searchParams }: PageProps) {
shareRows, shareRows,
currentUserShare, currentUserShare,
estabelecimentos, estabelecimentos,
userPreferences,
] = await Promise.all([ ] = await Promise.all([
fetchPayerTransactions(filters), fetchPayerTransactions(filters),
fetchPayerMonthlyBreakdown({ fetchPayerMonthlyBreakdown({
@@ -220,7 +222,6 @@ export default async function Page({ params, searchParams }: PageProps) {
sharesPromise, sharesPromise,
currentUserSharePromise, currentUserSharePromise,
fetchRecentEstablishments(userId), fetchRecentEstablishments(userId),
fetchUserPreferences(userId),
]); ]);
const mappedTransactions = mapTransactionsData(transactionRows); const mappedTransactions = mapTransactionsData(transactionRows);
@@ -407,6 +408,9 @@ export default async function Page({ params, searchParams }: PageProps) {
allowCreate={canEdit} allowCreate={canEdit}
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false} noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
columnOrder={userPreferences?.transactionsColumnOrder ?? null} columnOrder={userPreferences?.transactionsColumnOrder ?? null}
groupTransactionsByDate={
userPreferences?.groupTransactionsByDate ?? true
}
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50} attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
importPayerOptions={loggedUserOptionSets?.payerOptions} importPayerOptions={loggedUserOptionSets?.payerOptions}
importSplitPayerOptions={ importSplitPayerOptions={

View File

@@ -85,6 +85,12 @@ export default async function Page() {
showTransactionSummary={ showTransactionSummary={
userPreferences?.showTransactionSummary ?? true userPreferences?.showTransactionSummary ?? true
} }
groupTransactionsByDate={
userPreferences?.groupTransactionsByDate ?? true
}
hideAnticipatedInstallments={
userPreferences?.hideAnticipatedInstallments ?? false
}
/> />
</div> </div>
</Card> </Card>

View File

@@ -53,6 +53,8 @@ export default async function Page({ searchParams }: PageProps) {
period: selectedPeriod, period: selectedPeriod,
filters: searchFilters, filters: searchFilters,
slugMaps, slugMaps,
hideAnticipatedInstallments:
userPreferences?.hideAnticipatedInstallments ?? false,
}); });
const [transactionsPage, estabelecimentos] = await Promise.all([ const [transactionsPage, estabelecimentos] = await Promise.all([
@@ -112,6 +114,9 @@ export default async function Page({ searchParams }: PageProps) {
}} }}
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false} noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
columnOrder={userPreferences?.transactionsColumnOrder ?? null} columnOrder={userPreferences?.transactionsColumnOrder ?? null}
groupTransactionsByDate={
userPreferences?.groupTransactionsByDate ?? true
}
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50} attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
/> />
</LogoPrefetchProvider> </LogoPrefetchProvider>

View File

@@ -157,6 +157,12 @@ export const userPreferences = pgTable("preferencias_usuario", {
showTransactionSummary: boolean("mostrar_resumo_lancamento") showTransactionSummary: boolean("mostrar_resumo_lancamento")
.notNull() .notNull()
.default(true), .default(true),
groupTransactionsByDate: boolean("agrupar_lancamentos_por_data")
.notNull()
.default(true),
hideAnticipatedInstallments: boolean("ocultar_parcelas_antecipadas")
.notNull()
.default(false),
dashboardWidgets: jsonb("dashboard_widgets").$type<{ dashboardWidgets: jsonb("dashboard_widgets").$type<{
order: string[]; order: string[];
hidden: string[]; hidden: string[];

View File

@@ -36,6 +36,7 @@ export async function fetchCategoryDetails(
userId: string, userId: string,
categoryId: string, categoryId: string,
period: string, period: string,
hideAnticipatedInstallments = false,
): Promise<CategoryDetailData | null> { ): Promise<CategoryDetailData | null> {
const category = await db.query.categories.findFirst({ const category = await db.query.categories.findFirst({
where: and(eq(categories.userId, userId), eq(categories.id, categoryId)), where: and(eq(categories.userId, userId), eq(categories.id, categoryId)),
@@ -63,6 +64,14 @@ export async function fetchCategoryDetails(
eq(transactions.transactionType, transactionType), eq(transactions.transactionType, transactionType),
eq(transactions.period, period), eq(transactions.period, period),
eq(transactions.payerId, adminPayerId), eq(transactions.payerId, adminPayerId),
...(hideAnticipatedInstallments
? [
or(
isNull(transactions.isAnticipated),
eq(transactions.isAnticipated, false),
),
]
: []),
...(isInvoiceCategory ? [] : [sanitizedNote]), ...(isInvoiceCategory ? [] : [sanitizedNote]),
), ),
with: { with: {

View File

@@ -228,6 +228,7 @@ export function CategoryReportFilters({
<Popover open={startMonthOpen} onOpenChange={setStartMonthOpen}> <Popover open={startMonthOpen} onOpenChange={setStartMonthOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
type="button"
variant="outline" variant="outline"
className="w-[calc(50%-0.25rem)] md:w-[150px] justify-start text-sm border-dashed" className="w-[calc(50%-0.25rem)] md:w-[150px] justify-start text-sm border-dashed"
disabled={isLoading} disabled={isLoading}
@@ -248,6 +249,7 @@ export function CategoryReportFilters({
<Popover open={endMonthOpen} onOpenChange={setEndMonthOpen}> <Popover open={endMonthOpen} onOpenChange={setEndMonthOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
type="button"
variant="outline" variant="outline"
className="w-[calc(50%-0.25rem)] md:w-[150px] justify-start text-sm border-dashed" className="w-[calc(50%-0.25rem)] md:w-[150px] justify-start text-sm border-dashed"
disabled={isLoading} disabled={isLoading}

View File

@@ -69,6 +69,8 @@ const updatePreferencesSchema = z.object({
transactionsColumnOrder: z.array(z.string()).nullable(), transactionsColumnOrder: z.array(z.string()).nullable(),
attachmentMaxSizeMb: z.number().int().min(1).max(100), attachmentMaxSizeMb: z.number().int().min(1).max(100),
showTransactionSummary: z.boolean(), showTransactionSummary: z.boolean(),
groupTransactionsByDate: z.boolean(),
hideAnticipatedInstallments: z.boolean(),
}); });
type ResettableUser = { type ResettableUser = {
@@ -584,6 +586,8 @@ export async function updatePreferencesAction(
transactionsColumnOrder: validated.transactionsColumnOrder, transactionsColumnOrder: validated.transactionsColumnOrder,
attachmentMaxSizeMb: validated.attachmentMaxSizeMb, attachmentMaxSizeMb: validated.attachmentMaxSizeMb,
showTransactionSummary: validated.showTransactionSummary, showTransactionSummary: validated.showTransactionSummary,
groupTransactionsByDate: validated.groupTransactionsByDate,
hideAnticipatedInstallments: validated.hideAnticipatedInstallments,
updatedAt: new Date(), updatedAt: new Date(),
}) })
.where(eq(schema.userPreferences.userId, session.user.id)); .where(eq(schema.userPreferences.userId, session.user.id));
@@ -595,6 +599,8 @@ export async function updatePreferencesAction(
transactionsColumnOrder: validated.transactionsColumnOrder, transactionsColumnOrder: validated.transactionsColumnOrder,
attachmentMaxSizeMb: validated.attachmentMaxSizeMb, attachmentMaxSizeMb: validated.attachmentMaxSizeMb,
showTransactionSummary: validated.showTransactionSummary, showTransactionSummary: validated.showTransactionSummary,
groupTransactionsByDate: validated.groupTransactionsByDate,
hideAnticipatedInstallments: validated.hideAnticipatedInstallments,
}); });
} }

View File

@@ -43,6 +43,8 @@ interface PreferencesFormProps {
transactionsColumnOrder: string[] | null; transactionsColumnOrder: string[] | null;
attachmentMaxSizeMb: number; attachmentMaxSizeMb: number;
showTransactionSummary: boolean; showTransactionSummary: boolean;
groupTransactionsByDate: boolean;
hideAnticipatedInstallments: boolean;
} }
function SortableColumnItem({ id }: { id: string }) { function SortableColumnItem({ id }: { id: string }) {
@@ -87,6 +89,8 @@ export function PreferencesForm({
transactionsColumnOrder: initialColumnOrder, transactionsColumnOrder: initialColumnOrder,
attachmentMaxSizeMb: initialAttachmentMaxSizeMb, attachmentMaxSizeMb: initialAttachmentMaxSizeMb,
showTransactionSummary: initialShowTransactionSummary, showTransactionSummary: initialShowTransactionSummary,
groupTransactionsByDate: initialGroupTransactionsByDate,
hideAnticipatedInstallments: initialHideAnticipatedInstallments,
}: PreferencesFormProps) { }: PreferencesFormProps) {
const router = useRouter(); const router = useRouter();
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
@@ -109,6 +113,11 @@ export function PreferencesForm({
const [showTransactionSummary, setShowTransactionSummary] = useState( const [showTransactionSummary, setShowTransactionSummary] = useState(
initialShowTransactionSummary, initialShowTransactionSummary,
); );
const [groupTransactionsByDate, setGroupTransactionsByDate] = useState(
initialGroupTransactionsByDate,
);
const [hideAnticipatedInstallments, setHideAnticipatedInstallments] =
useState(initialHideAnticipatedInstallments);
const sensors = useSensors( const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
@@ -135,6 +144,8 @@ export function PreferencesForm({
transactionsColumnOrder: columnOrder, transactionsColumnOrder: columnOrder,
attachmentMaxSizeMb, attachmentMaxSizeMb,
showTransactionSummary, showTransactionSummary,
groupTransactionsByDate,
hideAnticipatedInstallments,
}); });
if (result.success) { if (result.success) {
@@ -198,6 +209,46 @@ export function PreferencesForm({
<Separator /> <Separator />
<section className="flex items-center justify-between max-w-md gap-4">
<div className="space-y-2">
<Label htmlFor="group-transactions-by-date" className="text-sm">
Agrupar por data
</Label>
<p className="text-sm text-muted-foreground">
Mostra uma barra de data acima dos lançamentos daquele dia. Quando
desativado, a data volta a aparecer em cada lançamento.
</p>
</div>
<Switch
id="group-transactions-by-date"
checked={groupTransactionsByDate}
onCheckedChange={setGroupTransactionsByDate}
disabled={isPending}
/>
</section>
<Separator />
<section className="flex items-center justify-between max-w-md gap-4">
<div className="space-y-2">
<Label htmlFor="hide-anticipated-installments" className="text-sm">
Ocultar parcelas antecipadas
</Label>
<p className="text-sm text-muted-foreground">
Quando ativo, parcelas antecipadas não aparecem na tabela de
lançamentos.
</p>
</div>
<Switch
id="hide-anticipated-installments"
checked={hideAnticipatedInstallments}
onCheckedChange={setHideAnticipatedInstallments}
disabled={isPending}
/>
</section>
<Separator />
<section className="space-y-2 max-w-md"> <section className="space-y-2 max-w-md">
<Label className="text-sm">Ordem das colunas</Label> <Label className="text-sm">Ordem das colunas</Label>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">

View File

@@ -7,6 +7,8 @@ interface UserPreferences {
transactionsColumnOrder: string[] | null; transactionsColumnOrder: string[] | null;
attachmentMaxSizeMb: number; attachmentMaxSizeMb: number;
showTransactionSummary: boolean; showTransactionSummary: boolean;
groupTransactionsByDate: boolean;
hideAnticipatedInstallments: boolean;
} }
interface ApiToken { interface ApiToken {
@@ -36,6 +38,9 @@ export async function fetchUserPreferences(
transactionsColumnOrder: schema.userPreferences.transactionsColumnOrder, transactionsColumnOrder: schema.userPreferences.transactionsColumnOrder,
attachmentMaxSizeMb: schema.userPreferences.attachmentMaxSizeMb, attachmentMaxSizeMb: schema.userPreferences.attachmentMaxSizeMb,
showTransactionSummary: schema.userPreferences.showTransactionSummary, showTransactionSummary: schema.userPreferences.showTransactionSummary,
groupTransactionsByDate: schema.userPreferences.groupTransactionsByDate,
hideAnticipatedInstallments:
schema.userPreferences.hideAnticipatedInstallments,
}) })
.from(schema.userPreferences) .from(schema.userPreferences)
.where(eq(schema.userPreferences.userId, userId)) .where(eq(schema.userPreferences.userId, userId))

View File

@@ -2,6 +2,7 @@
import { z } from "zod"; import { z } from "zod";
import { fetchAccountTransactions } from "@/features/accounts/statement-queries"; import { fetchAccountTransactions } from "@/features/accounts/statement-queries";
import { fetchUserPreferences } from "@/features/settings/queries";
import type { TransactionsExportContext } from "@/features/transactions/lib/export-types"; import type { TransactionsExportContext } from "@/features/transactions/lib/export-types";
import { import {
buildSluggedFilters, buildSluggedFilters,
@@ -60,7 +61,10 @@ export async function exportTransactionsDataAction(
try { try {
const userId = await getUserId(); const userId = await getUserId();
const validated = exportTransactionsSchema.parse(input); const validated = exportTransactionsSchema.parse(input);
const filterSources = await fetchTransactionFilterSources(userId); const [filterSources, userPreferences] = await Promise.all([
fetchTransactionFilterSources(userId),
fetchUserPreferences(userId),
]);
const sluggedFilters = buildSluggedFilters(filterSources); const sluggedFilters = buildSluggedFilters(filterSources);
const slugMaps = buildSlugMaps(sluggedFilters); const slugMaps = buildSlugMaps(sluggedFilters);
@@ -72,6 +76,8 @@ export async function exportTransactionsDataAction(
accountId: validated.accountId ?? undefined, accountId: validated.accountId ?? undefined,
cardId: validated.cardId ?? undefined, cardId: validated.cardId ?? undefined,
payerId: validated.payerId ?? undefined, payerId: validated.payerId ?? undefined,
hideAnticipatedInstallments:
userPreferences?.hideAnticipatedInstallments ?? false,
}); });
const rows = const rows =

View File

@@ -72,7 +72,7 @@ function InlinePeriodPicker({
return ( return (
<div className="-mt-1"> <div className="-mt-1">
<span className="text-xs text-muted-foreground">Fatura de </span> <span className="text-xs text-muted-foreground">Fatura de </span>
<Popover open={open} onOpenChange={setOpen}> <Popover modal open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <button
type="button" type="button"

View File

@@ -45,7 +45,7 @@ function InlinePeriodPicker({
return ( return (
<div className="ml-1"> <div className="ml-1">
<span className="text-xs text-muted-foreground">Fatura de </span> <span className="text-xs text-muted-foreground">Fatura de </span>
<Popover open={open} onOpenChange={setOpen}> <Popover modal open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <button
type="button" type="button"

View File

@@ -82,6 +82,7 @@ interface TransactionsPageProps {
allowCreate?: boolean; allowCreate?: boolean;
noteAsColumn?: boolean; noteAsColumn?: boolean;
columnOrder?: string[] | null; columnOrder?: string[] | null;
groupTransactionsByDate?: boolean;
defaultCardId?: string | null; defaultCardId?: string | null;
defaultPaymentMethod?: string | null; defaultPaymentMethod?: string | null;
lockCardSelection?: boolean; lockCardSelection?: boolean;
@@ -119,6 +120,7 @@ export function TransactionsPage({
allowCreate = true, allowCreate = true,
noteAsColumn = false, noteAsColumn = false,
columnOrder = null, columnOrder = null,
groupTransactionsByDate = true,
defaultCardId, defaultCardId,
defaultPaymentMethod, defaultPaymentMethod,
lockCardSelection, lockCardSelection,
@@ -745,6 +747,7 @@ export function TransactionsPage({
currentUserId={currentUserId} currentUserId={currentUserId}
noteAsColumn={noteAsColumn} noteAsColumn={noteAsColumn}
columnOrder={columnOrder} columnOrder={columnOrder}
groupTransactionsByDate={groupTransactionsByDate}
payerFilterOptions={payerFilterOptions} payerFilterOptions={payerFilterOptions}
categoryFilterOptions={categoryFilterOptions} categoryFilterOptions={categoryFilterOptions}
accountCardFilterOptions={accountCardFilterOptions} accountCardFilterOptions={accountCardFilterOptions}

View File

@@ -51,6 +51,7 @@ type BuildColumnsArgs = {
onConvertToRecurring?: (item: TransactionItem) => void; onConvertToRecurring?: (item: TransactionItem) => void;
isSettlementLoading: (id: string) => boolean; isSettlementLoading: (id: string) => boolean;
showActions: boolean; showActions: boolean;
showDateGroups: boolean;
columnOrder?: string[] | null; columnOrder?: string[] | null;
}; };
@@ -115,6 +116,7 @@ function buildColumns({
onConvertToRecurring, onConvertToRecurring,
isSettlementLoading, isSettlementLoading,
showActions, showActions,
showDateGroups,
}: BuildColumnsArgs): ColumnDef<TransactionItem>[] { }: BuildColumnsArgs): ColumnDef<TransactionItem>[] {
const noop = () => undefined; const noop = () => undefined;
const handleEdit = onEdit ?? noop; const handleEdit = onEdit ?? noop;
@@ -194,12 +196,14 @@ function buildColumns({
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<EstablishmentLogo name={name} size={32} /> <EstablishmentLogo name={name} size={32} />
<span className="flex flex-col py-0.5"> <span className="flex flex-col py-0.5">
{showDateGroups ? null : (
<span className="text-xs text-muted-foreground flex items-center gap-2"> <span className="text-xs text-muted-foreground flex items-center gap-2">
{formatDate(purchaseDate)} {formatDate(purchaseDate)}
{dueDateLabel ? ( {dueDateLabel ? (
<span className="text-primary">{dueDateLabel}</span> <span className="text-primary">{dueDateLabel}</span>
) : null} ) : null}
</span> </span>
)}
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@@ -254,6 +258,15 @@ function buildColumns({
</Badge> </Badge>
) : null} ) : null}
{showDateGroups && dueDateLabel ? (
<Badge
variant="outline"
className="px-2 text-xs text-primary"
>
{dueDateLabel}
</Badge>
) : null}
{isAnticipated && ( {isAnticipated && (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>

View File

@@ -20,7 +20,7 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/shared/components/ui/tooltip"; } from "@/shared/components/ui/tooltip";
import { formatDate } from "@/shared/utils/date"; import { formatDate, formatDateGroupLabel } from "@/shared/utils/date";
import { getConditionIcon, getPaymentMethodIcon } from "@/shared/utils/icons"; import { getConditionIcon, getPaymentMethodIcon } from "@/shared/utils/icons";
import { cn } from "@/shared/utils/ui"; import { cn } from "@/shared/utils/ui";
import type { TransactionItem } from "../types"; import type { TransactionItem } from "../types";
@@ -43,6 +43,7 @@ type TransactionsMobileListProps = {
onConvertToRecurring?: (item: TransactionItem) => void; onConvertToRecurring?: (item: TransactionItem) => void;
isSettlementLoading: (id: string) => boolean; isSettlementLoading: (id: string) => boolean;
showActions?: boolean; showActions?: boolean;
showDateGroups?: boolean;
}; };
export function TransactionsMobileList({ export function TransactionsMobileList({
@@ -61,7 +62,27 @@ export function TransactionsMobileList({
onConvertToRecurring, onConvertToRecurring,
isSettlementLoading, isSettlementLoading,
showActions = true, showActions = true,
showDateGroups = true,
}: TransactionsMobileListProps) { }: TransactionsMobileListProps) {
const groups = data.reduce<
Array<{ date: string; label: string; items: TransactionItem[] }>
>((acc, item) => {
const date = item.purchaseDate?.slice(0, 10) ?? "";
const existingGroup = acc.find((group) => group.date === date);
if (existingGroup) {
existingGroup.items.push(item);
return acc;
}
acc.push({
date,
label: formatDateGroupLabel(item.purchaseDate),
items: [item],
});
return acc;
}, []);
if (!showDateGroups) {
return ( return (
<div className="space-y-3 md:hidden"> <div className="space-y-3 md:hidden">
{data.map((item) => ( {data.map((item) => (
@@ -82,14 +103,54 @@ export function TransactionsMobileList({
onConvertToRecurring={onConvertToRecurring} onConvertToRecurring={onConvertToRecurring}
isSettlementLoading={isSettlementLoading} isSettlementLoading={isSettlementLoading}
showActions={showActions} showActions={showActions}
showDate
/> />
))} ))}
</div> </div>
); );
}
return (
<div className="space-y-4 md:hidden">
{groups.map((group, groupIndex) => (
<section
key={`${group.date || group.label}-${groupIndex}`}
className="space-y-2"
>
<div className="rounded-md border bg-muted/60 px-3 py-1.5 text-xs font-semibold tracking-wide text-muted-foreground">
{group.label}
</div>
<div className="space-y-3">
{group.items.map((item) => (
<TransactionMobileCard
key={item.id}
item={item}
currentUserId={currentUserId}
onEdit={onEdit}
onCopy={onCopy}
onImport={onImport}
onConfirmDelete={onConfirmDelete}
onViewDetails={onViewDetails}
onRefund={onRefund}
onToggleSettlement={onToggleSettlement}
onAnticipate={onAnticipate}
onViewAnticipationHistory={onViewAnticipationHistory}
onConvertToInstallment={onConvertToInstallment}
onConvertToRecurring={onConvertToRecurring}
isSettlementLoading={isSettlementLoading}
showActions={showActions}
/>
))}
</div>
</section>
))}
</div>
);
} }
type TransactionMobileCardProps = Omit<TransactionsMobileListProps, "data"> & { type TransactionMobileCardProps = Omit<TransactionsMobileListProps, "data"> & {
item: TransactionItem; item: TransactionItem;
showDate?: boolean;
}; };
function TransactionMobileCard({ function TransactionMobileCard({
@@ -108,6 +169,7 @@ function TransactionMobileCard({
onConvertToRecurring, onConvertToRecurring,
isSettlementLoading, isSettlementLoading,
showActions = true, showActions = true,
showDate = false,
}: TransactionMobileCardProps) { }: TransactionMobileCardProps) {
const installmentBadge = const installmentBadge =
item.currentInstallment && item.installmentCount item.currentInstallment && item.installmentCount
@@ -156,10 +218,12 @@ function TransactionMobileCard({
{item.name} {item.name}
</h3> </h3>
<div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground"> <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
{showDate ? (
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<RiCalendarEventLine className="size-3.5" aria-hidden /> <RiCalendarEventLine className="size-3.5" aria-hidden />
{formatDate(item.purchaseDate)} {formatDate(item.purchaseDate)}
</span> </span>
) : null}
{dueDateLabel ? ( {dueDateLabel ? (
<span className="font-medium text-primary"> <span className="font-medium text-primary">
{dueDateLabel} {dueDateLabel}

View File

@@ -9,13 +9,14 @@ import {
getCoreRowModel, getCoreRowModel,
getPaginationRowModel, getPaginationRowModel,
getSortedRowModel, getSortedRowModel,
type Row,
type RowSelectionState, type RowSelectionState,
type SortingState, type SortingState,
useReactTable, useReactTable,
type VisibilityState, type VisibilityState,
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { type ReactNode, useMemo, useState } from "react"; import { Fragment, type ReactNode, useMemo, useState } from "react";
import type { import type {
TransactionsExportContext, TransactionsExportContext,
TransactionsPaginationState, TransactionsPaginationState,
@@ -37,6 +38,7 @@ import {
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/shared/components/ui/tooltip"; } from "@/shared/components/ui/tooltip";
import { formatDateGroupLabel } from "@/shared/utils/date";
import { cn } from "@/shared/utils/ui"; import { cn } from "@/shared/utils/ui";
import { TransactionsExport } from "../transactions-export"; import { TransactionsExport } from "../transactions-export";
import type { import type {
@@ -79,6 +81,7 @@ type TransactionsTableProps = {
isSettlementLoading?: (id: string) => boolean; isSettlementLoading?: (id: string) => boolean;
showActions?: boolean; showActions?: boolean;
showFilters?: boolean; showFilters?: boolean;
groupTransactionsByDate?: boolean;
}; };
export function TransactionsTable({ export function TransactionsTable({
@@ -110,6 +113,7 @@ export function TransactionsTable({
isSettlementLoading, isSettlementLoading,
showActions = true, showActions = true,
showFilters = true, showFilters = true,
groupTransactionsByDate = true,
}: TransactionsTableProps) { }: TransactionsTableProps) {
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
@@ -145,12 +149,14 @@ export function TransactionsTable({
onViewAnticipationHistory, onViewAnticipationHistory,
isSettlementLoading: isSettlementLoading ?? (() => false), isSettlementLoading: isSettlementLoading ?? (() => false),
showActions, showActions,
showDateGroups: groupTransactionsByDate,
columnOrder: columnOrderPreference, columnOrder: columnOrderPreference,
}), }),
[ [
currentUserId, currentUserId,
noteAsColumn, noteAsColumn,
columnOrderPreference, columnOrderPreference,
groupTransactionsByDate,
onEdit, onEdit,
onCopy, onCopy,
onImport, onImport,
@@ -191,6 +197,24 @@ export function TransactionsTable({
const rowModel = table.getRowModel(); const rowModel = table.getRowModel();
const hasRows = rowModel.rows.length > 0; const hasRows = rowModel.rows.length > 0;
const groupedRows = rowModel.rows.reduce<
Array<{ date: string; label: string; rows: Row<TransactionItem>[] }>
>((acc, row) => {
const date = row.original.purchaseDate?.slice(0, 10) ?? "";
const existingGroup = acc.find((group) => group.date === date);
if (existingGroup) {
existingGroup.rows.push(row);
return acc;
}
acc.push({
date,
label: formatDateGroupLabel(row.original.purchaseDate),
rows: [row],
});
return acc;
}, []);
const visibleColumnCount = table.getVisibleLeafColumns().length;
const totalRows = isServerPaginated const totalRows = isServerPaginated
? (serverPagination?.totalItems ?? 0) ? (serverPagination?.totalItems ?? 0)
: table.getCoreRowModel().rows.length; : table.getCoreRowModel().rows.length;
@@ -275,6 +299,25 @@ export function TransactionsTable({
const showTopControls = const showTopControls =
Boolean(createSlot) || Boolean(onMassAdd) || showFilters; Boolean(createSlot) || Boolean(onMassAdd) || showFilters;
const renderTransactionRow = (row: Row<TransactionItem>) => (
<TableRow
key={row.id}
className={cn(
row.original.paymentMethod === "Boleto" &&
row.original.dueDate &&
!row.original.isSettled &&
new Date(row.original.dueDate) < new Date()
? "bg-destructive/3 hover:bg-destructive/5"
: undefined,
)}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
);
return ( return (
<TooltipProvider> <TooltipProvider>
@@ -366,7 +409,7 @@ export function TransactionsTable({
) : null} ) : null}
<Card className="py-2"> <Card className="py-2">
<CardContent className="px-2 py-4 sm:px-4"> <CardContent className="px-2 sm:px-4">
{hasRows ? ( {hasRows ? (
<> <>
<TransactionsMobileList <TransactionsMobileList
@@ -383,6 +426,7 @@ export function TransactionsTable({
onViewAnticipationHistory={onViewAnticipationHistory} onViewAnticipationHistory={onViewAnticipationHistory}
isSettlementLoading={isSettlementLoading ?? (() => false)} isSettlementLoading={isSettlementLoading ?? (() => false)}
showActions={showActions} showActions={showActions}
showDateGroups={groupTransactionsByDate}
/> />
<div className="hidden overflow-x-auto md:block"> <div className="hidden overflow-x-auto md:block">
@@ -407,28 +451,23 @@ export function TransactionsTable({
))} ))}
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{rowModel.rows.map((row) => ( {groupTransactionsByDate
<TableRow ? groupedRows.map((group, groupIndex) => (
key={row.id} <Fragment
className={cn( key={`${group.date || group.label}-${groupIndex}`}
row.original.paymentMethod === "Boleto" &&
row.original.dueDate &&
!row.original.isSettled &&
new Date(row.original.dueDate) < new Date()
? "bg-destructive/3 hover:bg-destructive/5"
: undefined,
)}
> >
{row.getVisibleCells().map((cell) => ( <TableRow className="border-y bg-muted/40 hover:bg-muted/60">
<TableCell key={cell.id}> <TableCell
{flexRender( colSpan={visibleColumnCount}
cell.column.columnDef.cell, className="h-9 px-3 py-2 text-xs font-semibold text-muted-foreground"
cell.getContext(), >
)} {group.label}
</TableCell> </TableCell>
))}
</TableRow> </TableRow>
))} {group.rows.map(renderTransactionRow)}
</Fragment>
))
: rowModel.rows.map(renderTransactionRow)}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>

View File

@@ -6,6 +6,7 @@ import {
ilike, ilike,
inArray, inArray,
isNotNull, isNotNull,
isNull,
lte, lte,
or, or,
sql, sql,
@@ -384,6 +385,7 @@ export const buildTransactionWhere = ({
cardId, cardId,
accountId, accountId,
payerId, payerId,
hideAnticipatedInstallments = false,
}: { }: {
userId: string; userId: string;
period: string; period: string;
@@ -392,6 +394,7 @@ export const buildTransactionWhere = ({
cardId?: string; cardId?: string;
accountId?: string; accountId?: string;
payerId?: string; payerId?: string;
hideAnticipatedInstallments?: boolean;
}): SQL[] => { }): SQL[] => {
const where: SQL[] = [eq(transactions.userId, userId)]; const where: SQL[] = [eq(transactions.userId, userId)];
@@ -421,6 +424,15 @@ export const buildTransactionWhere = ({
where.push(eq(transactions.payerId, payerId)); where.push(eq(transactions.payerId, payerId));
} }
if (hideAnticipatedInstallments) {
where.push(
or(
isNull(transactions.isAnticipated),
eq(transactions.isAnticipated, false),
) as SQL,
);
}
if (cardId) { if (cardId) {
where.push(eq(transactions.cardId, cardId)); where.push(eq(transactions.cardId, cardId));
} }

View File

@@ -102,7 +102,7 @@ export function EstablishmentLogoPicker({
} }
return ( return (
<Popover open={open} onOpenChange={onOpenChange}> <Popover modal open={open} onOpenChange={onOpenChange}>
<PopoverTrigger asChild>{children}</PopoverTrigger> <PopoverTrigger asChild>{children}</PopoverTrigger>
<PopoverContent className="w-80 p-3" align="start" side="bottom"> <PopoverContent className="w-80 p-3" align="start" side="bottom">
<p className="mb-2 text-muted-foreground text-xs"> <p className="mb-2 text-muted-foreground text-xs">

View File

@@ -93,6 +93,7 @@ export default function MonthNavigation() {
<Popover open={isPickerOpen} onOpenChange={setIsPickerOpen}> <Popover open={isPickerOpen} onOpenChange={setIsPickerOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
type="button"
variant="ghost" variant="ghost"
size="sm" size="sm"
disabled={isPending} disabled={isPending}

View File

@@ -44,9 +44,10 @@ export function PeriodPicker({
}; };
return ( return (
<Popover open={open} onOpenChange={setOpen}> <Popover modal open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
type="button"
variant={variant} variant={variant}
size={size} size={size}
disabled={disabled} disabled={disabled}

View File

@@ -197,6 +197,7 @@ function CalendarDayButton({
return ( return (
<Button <Button
ref={ref} ref={ref}
type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
data-day={day.date.toLocaleDateString()} data-day={day.date.toLocaleDateString()}

View File

@@ -13,7 +13,7 @@ function Checkbox({
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
data-slot="checkbox" data-slot="checkbox"
className={cn( className={cn(
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-lg border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", "peer border-input dark:bg-input/40 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-3.5 shrink-0 rounded border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className, className,
)} )}
{...props} {...props}

View File

@@ -148,7 +148,7 @@ export function DatePicker({
required={required} required={required}
disabled={disabled} disabled={disabled}
/> />
<Popover open={open} onOpenChange={setOpen}> <Popover modal open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
type="button" type="button"

View File

@@ -128,6 +128,7 @@ function MonthCal({
</div> </div>
<div className="space-x-1 flex items-center"> <div className="space-x-1 flex items-center">
<button <button
type="button"
onClick={() => { onClick={() => {
setMenuYear(menuYear - 1); setMenuYear(menuYear - 1);
if (onYearBackward) onYearBackward(); if (onYearBackward) onYearBackward();
@@ -140,6 +141,7 @@ function MonthCal({
<RiArrowLeftSFill className="opacity-50 size-4" /> <RiArrowLeftSFill className="opacity-50 size-4" />
</button> </button>
<button <button
type="button"
onClick={() => { onClick={() => {
setMenuYear(menuYear + 1); setMenuYear(menuYear + 1);
if (onYearForward) onYearForward(); if (onYearForward) onYearForward();
@@ -165,6 +167,7 @@ function MonthCal({
className="h-10 w-1/4 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20" className="h-10 w-1/4 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20"
> >
<button <button
type="button"
onClick={() => { onClick={() => {
setMonth(m.number); setMonth(m.number);
setYear(menuYear); setYear(menuYear);

View File

@@ -331,6 +331,45 @@ export function formatDate(value: string | Date | null | undefined): string {
.replace(" de", ""); .replace(" de", "");
} }
/**
* Formats a date-only value as a compact group label.
* @example
* formatDateGroupLabel("2026-06-26") // "SEX, 26 JUN 2026"
*/
export function formatDateGroupLabel(
value: string | Date | null | undefined,
): string {
const dateString = toDateOnlyString(value);
if (!dateString) {
return "—";
}
const parsed = parseUtcDateString(dateString);
if (!parsed) {
return "—";
}
const parts = new Intl.DateTimeFormat("pt-BR", {
weekday: "short",
day: "2-digit",
month: "short",
year: "numeric",
timeZone: "UTC",
}).formatToParts(parsed);
const weekday = parts.find((part) => part.type === "weekday")?.value;
const day = parts.find((part) => part.type === "day")?.value;
const month = parts.find((part) => part.type === "month")?.value;
const year = parts.find((part) => part.type === "year")?.value;
if (!weekday || !day || !month || !year) {
return "—";
}
return `${weekday.replace(".", "").toUpperCase()}, ${day} ${month
.replace(".", "")
.toUpperCase()} ${year}`;
}
/** /**
* Formats a date-only value (YYYY-MM-DD) using UTC to preserve the civil day * Formats a date-only value (YYYY-MM-DD) using UTC to preserve the civil day
*/ */