mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-07-09 03:16:01 +00:00
Compare commits
10 Commits
be6fa6dcfc
...
v2.7.12
| Author | SHA1 | Date | |
|---|---|---|---|
|
ed9196797b | ||
|
|
532186fe39 | ||
|
|
a2ce7f1283 | ||
|
|
f3c3d98aeb | ||
|
|
24709ec232 | ||
|
|
2fd94118f2 | ||
|
|
01f161f011 | ||
|
|
4741087feb | ||
|
|
32b190ab4e | ||
|
|
d06bac5624 |
@@ -16,7 +16,7 @@
|
||||
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`.
|
||||
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.
|
||||
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.
|
||||
|
||||
36
CHANGELOG.md
36
CHANGELOG.md
@@ -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/),
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
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`.
|
||||
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.
|
||||
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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
[](CHANGELOG.md)
|
||||
[](CHANGELOG.md)
|
||||
[](https://nextjs.org/)
|
||||
[](https://www.typescriptlang.org/)
|
||||
[](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" />
|
||||
</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
|
||||
|
||||
@@ -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`.
|
||||
|
||||
```bash
|
||||
git tag -a v2.7.9 -m "v2.7.9"
|
||||
git push origin v2.7.9
|
||||
git tag -a v2.7.12 -m "v2.7.12"
|
||||
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.
|
||||
|
||||
1
drizzle/0032_bumpy_spencer_smythe.sql
Normal file
1
drizzle/0032_bumpy_spencer_smythe.sql
Normal file
@@ -0,0 +1 @@
|
||||
ALTER TABLE "preferencias_usuario" ADD COLUMN "ocultar_parcelas_antecipadas" boolean DEFAULT false NOT NULL;
|
||||
1
drizzle/0033_demonic_supreme_intelligence.sql
Normal file
1
drizzle/0033_demonic_supreme_intelligence.sql
Normal file
@@ -0,0 +1 @@
|
||||
ALTER TABLE "preferencias_usuario" ADD COLUMN "agrupar_lancamentos_por_data" boolean DEFAULT true NOT NULL;
|
||||
2995
drizzle/meta/0032_snapshot.json
Normal file
2995
drizzle/meta/0032_snapshot.json
Normal file
File diff suppressed because it is too large
Load Diff
3002
drizzle/meta/0033_snapshot.json
Normal file
3002
drizzle/meta/0033_snapshot.json
Normal file
File diff suppressed because it is too large
Load Diff
@@ -218,6 +218,20 @@
|
||||
"when": 1782051007412,
|
||||
"tag": "0031_lame_cerise",
|
||||
"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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
40
package.json
40
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "openmonetis",
|
||||
"version": "2.7.9",
|
||||
"version": "2.7.12",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@11.1.3",
|
||||
"scripts": {
|
||||
@@ -31,32 +31,32 @@
|
||||
"mockup": "tsx scripts/mock-data.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ai-sdk/anthropic": "^3.0.81",
|
||||
"@ai-sdk/google": "^3.0.80",
|
||||
"@ai-sdk/openai": "^3.0.67",
|
||||
"@ai-sdk/openai-compatible": "^2.0.48",
|
||||
"@aws-sdk/client-s3": "^3.1059.0",
|
||||
"@aws-sdk/s3-request-presigner": "^3.1059.0",
|
||||
"@better-auth/passkey": "^1.6.14",
|
||||
"@ai-sdk/anthropic": "^3.0.88",
|
||||
"@ai-sdk/google": "^3.0.85",
|
||||
"@ai-sdk/openai": "^3.0.76",
|
||||
"@ai-sdk/openai-compatible": "^2.0.53",
|
||||
"@aws-sdk/client-s3": "^3.1075.0",
|
||||
"@aws-sdk/s3-request-presigner": "^3.1075.0",
|
||||
"@better-auth/passkey": "^1.6.22",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@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-avatar": "1.1.11",
|
||||
"@radix-ui/react-checkbox": "1.3.3",
|
||||
"@radix-ui/react-collapsible": "1.1.12",
|
||||
"@radix-ui/react-dialog": "1.1.15",
|
||||
"@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-navigation-menu": "^1.2.14",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.16",
|
||||
"@radix-ui/react-popover": "^1.1.17",
|
||||
"@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-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-switch": "1.2.6",
|
||||
"@radix-ui/react-tabs": "1.1.13",
|
||||
@@ -64,11 +64,11 @@
|
||||
"@radix-ui/react-toggle-group": "1.1.11",
|
||||
"@radix-ui/react-tooltip": "1.2.8",
|
||||
"@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-virtual": "^3.14.2",
|
||||
"ai": "^6.0.195",
|
||||
"better-auth": "1.6.14",
|
||||
"@tanstack/react-virtual": "^3.14.4",
|
||||
"ai": "^6.0.213",
|
||||
"better-auth": "1.6.22",
|
||||
"canvas-confetti": "^1.9.4",
|
||||
"class-variance-authority": "0.7.1",
|
||||
"clsx": "2.1.1",
|
||||
@@ -86,7 +86,7 @@
|
||||
"react-day-picker": "^10.0.1",
|
||||
"react-dom": "19.2.7",
|
||||
"recharts": "3.8.1",
|
||||
"resend": "^6.12.4",
|
||||
"resend": "^6.16.0",
|
||||
"sonner": "2.0.7",
|
||||
"tailwind-merge": "3.6.0",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
@@ -105,7 +105,7 @@
|
||||
"babel-plugin-react-compiler": "^1.0.0",
|
||||
"dotenv": "^17.4.2",
|
||||
"drizzle-kit": "0.31.10",
|
||||
"knip": "^6.15.0",
|
||||
"knip": "^6.22.0",
|
||||
"tailwindcss": "4.3.0",
|
||||
"tsx": "4.22.4",
|
||||
"typescript": "6.0.3"
|
||||
|
||||
2673
pnpm-lock.yaml
generated
2673
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -109,6 +109,8 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
filters: searchFilters,
|
||||
slugMaps,
|
||||
accountId: account.id,
|
||||
hideAnticipatedInstallments:
|
||||
userPreferences?.hideAnticipatedInstallments ?? false,
|
||||
});
|
||||
|
||||
const transactionsPage = await fetchAccountTransactionsPage(
|
||||
@@ -233,6 +235,9 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
)}
|
||||
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
|
||||
columnOrder={userPreferences?.transactionsColumnOrder ?? null}
|
||||
groupTransactionsByDate={
|
||||
userPreferences?.groupTransactionsByDate ?? true
|
||||
}
|
||||
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
|
||||
/>
|
||||
</section>
|
||||
|
||||
@@ -82,6 +82,8 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
filters: searchFilters,
|
||||
slugMaps,
|
||||
cardId: card.id,
|
||||
hideAnticipatedInstallments:
|
||||
userPreferences?.hideAnticipatedInstallments ?? false,
|
||||
});
|
||||
|
||||
const transactionRows = await fetchCardTransactions(filters);
|
||||
@@ -210,6 +212,9 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
allowCreate
|
||||
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
|
||||
columnOrder={userPreferences?.transactionsColumnOrder ?? null}
|
||||
groupTransactionsByDate={
|
||||
userPreferences?.groupTransactionsByDate ?? true
|
||||
}
|
||||
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
|
||||
defaultCardId={card.id}
|
||||
defaultPaymentMethod="Cartão de crédito"
|
||||
|
||||
@@ -41,13 +41,17 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
|
||||
const { period: selectedPeriod } = parsePeriodParam(periodoParam);
|
||||
|
||||
const [detail, filterSources, estabelecimentos, userPreferences] =
|
||||
await Promise.all([
|
||||
fetchCategoryDetails(userId, categoryId, selectedPeriod),
|
||||
fetchTransactionFilterSources(userId),
|
||||
fetchRecentEstablishments(userId),
|
||||
fetchUserPreferences(userId),
|
||||
]);
|
||||
const [filterSources, estabelecimentos, userPreferences] = await Promise.all([
|
||||
fetchTransactionFilterSources(userId),
|
||||
fetchRecentEstablishments(userId),
|
||||
fetchUserPreferences(userId),
|
||||
]);
|
||||
const detail = await fetchCategoryDetails(
|
||||
userId,
|
||||
categoryId,
|
||||
selectedPeriod,
|
||||
userPreferences?.hideAnticipatedInstallments ?? false,
|
||||
);
|
||||
|
||||
if (!detail) {
|
||||
notFound();
|
||||
@@ -101,6 +105,9 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
allowCreate={true}
|
||||
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
|
||||
columnOrder={userPreferences?.transactionsColumnOrder ?? null}
|
||||
groupTransactionsByDate={
|
||||
userPreferences?.groupTransactionsByDate ?? true
|
||||
}
|
||||
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
|
||||
/>
|
||||
</main>
|
||||
|
||||
@@ -131,6 +131,7 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
...EMPTY_FILTERS,
|
||||
searchFilter: allSearchFilters.searchFilter, // Permitir busca mesmo em modo read-only
|
||||
};
|
||||
const userPreferences = await fetchUserPreferences(userId);
|
||||
|
||||
let filterSources: Awaited<
|
||||
ReturnType<typeof fetchTransactionFilterSources>
|
||||
@@ -163,6 +164,8 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
filters: searchFilters,
|
||||
slugMaps,
|
||||
payerId: pagador.id,
|
||||
hideAnticipatedInstallments:
|
||||
userPreferences?.hideAnticipatedInstallments ?? false,
|
||||
});
|
||||
|
||||
const sharesPromise = canEdit
|
||||
@@ -184,7 +187,6 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
shareRows,
|
||||
currentUserShare,
|
||||
estabelecimentos,
|
||||
userPreferences,
|
||||
] = await Promise.all([
|
||||
fetchPayerTransactions(filters),
|
||||
fetchPayerMonthlyBreakdown({
|
||||
@@ -220,7 +222,6 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
sharesPromise,
|
||||
currentUserSharePromise,
|
||||
fetchRecentEstablishments(userId),
|
||||
fetchUserPreferences(userId),
|
||||
]);
|
||||
|
||||
const mappedTransactions = mapTransactionsData(transactionRows);
|
||||
@@ -407,6 +408,9 @@ export default async function Page({ params, searchParams }: PageProps) {
|
||||
allowCreate={canEdit}
|
||||
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
|
||||
columnOrder={userPreferences?.transactionsColumnOrder ?? null}
|
||||
groupTransactionsByDate={
|
||||
userPreferences?.groupTransactionsByDate ?? true
|
||||
}
|
||||
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
|
||||
importPayerOptions={loggedUserOptionSets?.payerOptions}
|
||||
importSplitPayerOptions={
|
||||
|
||||
@@ -85,6 +85,12 @@ export default async function Page() {
|
||||
showTransactionSummary={
|
||||
userPreferences?.showTransactionSummary ?? true
|
||||
}
|
||||
groupTransactionsByDate={
|
||||
userPreferences?.groupTransactionsByDate ?? true
|
||||
}
|
||||
hideAnticipatedInstallments={
|
||||
userPreferences?.hideAnticipatedInstallments ?? false
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -53,6 +53,8 @@ export default async function Page({ searchParams }: PageProps) {
|
||||
period: selectedPeriod,
|
||||
filters: searchFilters,
|
||||
slugMaps,
|
||||
hideAnticipatedInstallments:
|
||||
userPreferences?.hideAnticipatedInstallments ?? false,
|
||||
});
|
||||
|
||||
const [transactionsPage, estabelecimentos] = await Promise.all([
|
||||
@@ -112,6 +114,9 @@ export default async function Page({ searchParams }: PageProps) {
|
||||
}}
|
||||
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
|
||||
columnOrder={userPreferences?.transactionsColumnOrder ?? null}
|
||||
groupTransactionsByDate={
|
||||
userPreferences?.groupTransactionsByDate ?? true
|
||||
}
|
||||
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
|
||||
/>
|
||||
</LogoPrefetchProvider>
|
||||
|
||||
@@ -157,6 +157,12 @@ export const userPreferences = pgTable("preferencias_usuario", {
|
||||
showTransactionSummary: boolean("mostrar_resumo_lancamento")
|
||||
.notNull()
|
||||
.default(true),
|
||||
groupTransactionsByDate: boolean("agrupar_lancamentos_por_data")
|
||||
.notNull()
|
||||
.default(true),
|
||||
hideAnticipatedInstallments: boolean("ocultar_parcelas_antecipadas")
|
||||
.notNull()
|
||||
.default(false),
|
||||
dashboardWidgets: jsonb("dashboard_widgets").$type<{
|
||||
order: string[];
|
||||
hidden: string[];
|
||||
|
||||
@@ -36,6 +36,7 @@ export async function fetchCategoryDetails(
|
||||
userId: string,
|
||||
categoryId: string,
|
||||
period: string,
|
||||
hideAnticipatedInstallments = false,
|
||||
): Promise<CategoryDetailData | null> {
|
||||
const category = await db.query.categories.findFirst({
|
||||
where: and(eq(categories.userId, userId), eq(categories.id, categoryId)),
|
||||
@@ -63,6 +64,14 @@ export async function fetchCategoryDetails(
|
||||
eq(transactions.transactionType, transactionType),
|
||||
eq(transactions.period, period),
|
||||
eq(transactions.payerId, adminPayerId),
|
||||
...(hideAnticipatedInstallments
|
||||
? [
|
||||
or(
|
||||
isNull(transactions.isAnticipated),
|
||||
eq(transactions.isAnticipated, false),
|
||||
),
|
||||
]
|
||||
: []),
|
||||
...(isInvoiceCategory ? [] : [sanitizedNote]),
|
||||
),
|
||||
with: {
|
||||
|
||||
@@ -228,6 +228,7 @@ export function CategoryReportFilters({
|
||||
<Popover open={startMonthOpen} onOpenChange={setStartMonthOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-[calc(50%-0.25rem)] md:w-[150px] justify-start text-sm border-dashed"
|
||||
disabled={isLoading}
|
||||
@@ -248,6 +249,7 @@ export function CategoryReportFilters({
|
||||
<Popover open={endMonthOpen} onOpenChange={setEndMonthOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-[calc(50%-0.25rem)] md:w-[150px] justify-start text-sm border-dashed"
|
||||
disabled={isLoading}
|
||||
|
||||
@@ -69,6 +69,8 @@ const updatePreferencesSchema = z.object({
|
||||
transactionsColumnOrder: z.array(z.string()).nullable(),
|
||||
attachmentMaxSizeMb: z.number().int().min(1).max(100),
|
||||
showTransactionSummary: z.boolean(),
|
||||
groupTransactionsByDate: z.boolean(),
|
||||
hideAnticipatedInstallments: z.boolean(),
|
||||
});
|
||||
|
||||
type ResettableUser = {
|
||||
@@ -584,6 +586,8 @@ export async function updatePreferencesAction(
|
||||
transactionsColumnOrder: validated.transactionsColumnOrder,
|
||||
attachmentMaxSizeMb: validated.attachmentMaxSizeMb,
|
||||
showTransactionSummary: validated.showTransactionSummary,
|
||||
groupTransactionsByDate: validated.groupTransactionsByDate,
|
||||
hideAnticipatedInstallments: validated.hideAnticipatedInstallments,
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.where(eq(schema.userPreferences.userId, session.user.id));
|
||||
@@ -595,6 +599,8 @@ export async function updatePreferencesAction(
|
||||
transactionsColumnOrder: validated.transactionsColumnOrder,
|
||||
attachmentMaxSizeMb: validated.attachmentMaxSizeMb,
|
||||
showTransactionSummary: validated.showTransactionSummary,
|
||||
groupTransactionsByDate: validated.groupTransactionsByDate,
|
||||
hideAnticipatedInstallments: validated.hideAnticipatedInstallments,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -43,6 +43,8 @@ interface PreferencesFormProps {
|
||||
transactionsColumnOrder: string[] | null;
|
||||
attachmentMaxSizeMb: number;
|
||||
showTransactionSummary: boolean;
|
||||
groupTransactionsByDate: boolean;
|
||||
hideAnticipatedInstallments: boolean;
|
||||
}
|
||||
|
||||
function SortableColumnItem({ id }: { id: string }) {
|
||||
@@ -87,6 +89,8 @@ export function PreferencesForm({
|
||||
transactionsColumnOrder: initialColumnOrder,
|
||||
attachmentMaxSizeMb: initialAttachmentMaxSizeMb,
|
||||
showTransactionSummary: initialShowTransactionSummary,
|
||||
groupTransactionsByDate: initialGroupTransactionsByDate,
|
||||
hideAnticipatedInstallments: initialHideAnticipatedInstallments,
|
||||
}: PreferencesFormProps) {
|
||||
const router = useRouter();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
@@ -109,6 +113,11 @@ export function PreferencesForm({
|
||||
const [showTransactionSummary, setShowTransactionSummary] = useState(
|
||||
initialShowTransactionSummary,
|
||||
);
|
||||
const [groupTransactionsByDate, setGroupTransactionsByDate] = useState(
|
||||
initialGroupTransactionsByDate,
|
||||
);
|
||||
const [hideAnticipatedInstallments, setHideAnticipatedInstallments] =
|
||||
useState(initialHideAnticipatedInstallments);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
|
||||
@@ -135,6 +144,8 @@ export function PreferencesForm({
|
||||
transactionsColumnOrder: columnOrder,
|
||||
attachmentMaxSizeMb,
|
||||
showTransactionSummary,
|
||||
groupTransactionsByDate,
|
||||
hideAnticipatedInstallments,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
@@ -198,6 +209,46 @@ export function PreferencesForm({
|
||||
|
||||
<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 já 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">
|
||||
<Label className="text-sm">Ordem das colunas</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
|
||||
@@ -7,6 +7,8 @@ interface UserPreferences {
|
||||
transactionsColumnOrder: string[] | null;
|
||||
attachmentMaxSizeMb: number;
|
||||
showTransactionSummary: boolean;
|
||||
groupTransactionsByDate: boolean;
|
||||
hideAnticipatedInstallments: boolean;
|
||||
}
|
||||
|
||||
interface ApiToken {
|
||||
@@ -36,6 +38,9 @@ export async function fetchUserPreferences(
|
||||
transactionsColumnOrder: schema.userPreferences.transactionsColumnOrder,
|
||||
attachmentMaxSizeMb: schema.userPreferences.attachmentMaxSizeMb,
|
||||
showTransactionSummary: schema.userPreferences.showTransactionSummary,
|
||||
groupTransactionsByDate: schema.userPreferences.groupTransactionsByDate,
|
||||
hideAnticipatedInstallments:
|
||||
schema.userPreferences.hideAnticipatedInstallments,
|
||||
})
|
||||
.from(schema.userPreferences)
|
||||
.where(eq(schema.userPreferences.userId, userId))
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { z } from "zod";
|
||||
import { fetchAccountTransactions } from "@/features/accounts/statement-queries";
|
||||
import { fetchUserPreferences } from "@/features/settings/queries";
|
||||
import type { TransactionsExportContext } from "@/features/transactions/lib/export-types";
|
||||
import {
|
||||
buildSluggedFilters,
|
||||
@@ -60,7 +61,10 @@ export async function exportTransactionsDataAction(
|
||||
try {
|
||||
const userId = await getUserId();
|
||||
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 slugMaps = buildSlugMaps(sluggedFilters);
|
||||
|
||||
@@ -72,6 +76,8 @@ export async function exportTransactionsDataAction(
|
||||
accountId: validated.accountId ?? undefined,
|
||||
cardId: validated.cardId ?? undefined,
|
||||
payerId: validated.payerId ?? undefined,
|
||||
hideAnticipatedInstallments:
|
||||
userPreferences?.hideAnticipatedInstallments ?? false,
|
||||
});
|
||||
|
||||
const rows =
|
||||
|
||||
@@ -72,7 +72,7 @@ function InlinePeriodPicker({
|
||||
return (
|
||||
<div className="-mt-1">
|
||||
<span className="text-xs text-muted-foreground">Fatura de </span>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<Popover modal open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -45,7 +45,7 @@ function InlinePeriodPicker({
|
||||
return (
|
||||
<div className="ml-1">
|
||||
<span className="text-xs text-muted-foreground">Fatura de </span>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<Popover modal open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -82,6 +82,7 @@ interface TransactionsPageProps {
|
||||
allowCreate?: boolean;
|
||||
noteAsColumn?: boolean;
|
||||
columnOrder?: string[] | null;
|
||||
groupTransactionsByDate?: boolean;
|
||||
defaultCardId?: string | null;
|
||||
defaultPaymentMethod?: string | null;
|
||||
lockCardSelection?: boolean;
|
||||
@@ -119,6 +120,7 @@ export function TransactionsPage({
|
||||
allowCreate = true,
|
||||
noteAsColumn = false,
|
||||
columnOrder = null,
|
||||
groupTransactionsByDate = true,
|
||||
defaultCardId,
|
||||
defaultPaymentMethod,
|
||||
lockCardSelection,
|
||||
@@ -745,6 +747,7 @@ export function TransactionsPage({
|
||||
currentUserId={currentUserId}
|
||||
noteAsColumn={noteAsColumn}
|
||||
columnOrder={columnOrder}
|
||||
groupTransactionsByDate={groupTransactionsByDate}
|
||||
payerFilterOptions={payerFilterOptions}
|
||||
categoryFilterOptions={categoryFilterOptions}
|
||||
accountCardFilterOptions={accountCardFilterOptions}
|
||||
|
||||
@@ -51,6 +51,7 @@ type BuildColumnsArgs = {
|
||||
onConvertToRecurring?: (item: TransactionItem) => void;
|
||||
isSettlementLoading: (id: string) => boolean;
|
||||
showActions: boolean;
|
||||
showDateGroups: boolean;
|
||||
columnOrder?: string[] | null;
|
||||
};
|
||||
|
||||
@@ -115,6 +116,7 @@ function buildColumns({
|
||||
onConvertToRecurring,
|
||||
isSettlementLoading,
|
||||
showActions,
|
||||
showDateGroups,
|
||||
}: BuildColumnsArgs): ColumnDef<TransactionItem>[] {
|
||||
const noop = () => undefined;
|
||||
const handleEdit = onEdit ?? noop;
|
||||
@@ -194,12 +196,14 @@ function buildColumns({
|
||||
<span className="flex items-center gap-2">
|
||||
<EstablishmentLogo name={name} size={32} />
|
||||
<span className="flex flex-col py-0.5">
|
||||
<span className="text-xs text-muted-foreground flex items-center gap-2">
|
||||
{formatDate(purchaseDate)}
|
||||
{dueDateLabel ? (
|
||||
<span className="text-primary">{dueDateLabel}</span>
|
||||
) : null}
|
||||
</span>
|
||||
{showDateGroups ? null : (
|
||||
<span className="text-xs text-muted-foreground flex items-center gap-2">
|
||||
{formatDate(purchaseDate)}
|
||||
{dueDateLabel ? (
|
||||
<span className="text-primary">{dueDateLabel}</span>
|
||||
) : null}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
@@ -254,6 +258,15 @@ function buildColumns({
|
||||
</Badge>
|
||||
) : null}
|
||||
|
||||
{showDateGroups && dueDateLabel ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="px-2 text-xs text-primary"
|
||||
>
|
||||
{dueDateLabel}
|
||||
</Badge>
|
||||
) : null}
|
||||
|
||||
{isAnticipated && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
|
||||
@@ -20,7 +20,7 @@ import {
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} 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 { cn } from "@/shared/utils/ui";
|
||||
import type { TransactionItem } from "../types";
|
||||
@@ -43,6 +43,7 @@ type TransactionsMobileListProps = {
|
||||
onConvertToRecurring?: (item: TransactionItem) => void;
|
||||
isSettlementLoading: (id: string) => boolean;
|
||||
showActions?: boolean;
|
||||
showDateGroups?: boolean;
|
||||
};
|
||||
|
||||
export function TransactionsMobileList({
|
||||
@@ -61,28 +62,87 @@ export function TransactionsMobileList({
|
||||
onConvertToRecurring,
|
||||
isSettlementLoading,
|
||||
showActions = true,
|
||||
showDateGroups = true,
|
||||
}: 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 (
|
||||
<div className="space-y-3 md:hidden">
|
||||
{data.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}
|
||||
showDate
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3 md:hidden">
|
||||
{data.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 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>
|
||||
);
|
||||
@@ -90,6 +150,7 @@ export function TransactionsMobileList({
|
||||
|
||||
type TransactionMobileCardProps = Omit<TransactionsMobileListProps, "data"> & {
|
||||
item: TransactionItem;
|
||||
showDate?: boolean;
|
||||
};
|
||||
|
||||
function TransactionMobileCard({
|
||||
@@ -108,6 +169,7 @@ function TransactionMobileCard({
|
||||
onConvertToRecurring,
|
||||
isSettlementLoading,
|
||||
showActions = true,
|
||||
showDate = false,
|
||||
}: TransactionMobileCardProps) {
|
||||
const installmentBadge =
|
||||
item.currentInstallment && item.installmentCount
|
||||
@@ -156,10 +218,12 @@ function TransactionMobileCard({
|
||||
{item.name}
|
||||
</h3>
|
||||
<div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<RiCalendarEventLine className="size-3.5" aria-hidden />
|
||||
{formatDate(item.purchaseDate)}
|
||||
</span>
|
||||
{showDate ? (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<RiCalendarEventLine className="size-3.5" aria-hidden />
|
||||
{formatDate(item.purchaseDate)}
|
||||
</span>
|
||||
) : null}
|
||||
{dueDateLabel ? (
|
||||
<span className="font-medium text-primary">
|
||||
{dueDateLabel}
|
||||
|
||||
@@ -9,13 +9,14 @@ import {
|
||||
getCoreRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
type Row,
|
||||
type RowSelectionState,
|
||||
type SortingState,
|
||||
useReactTable,
|
||||
type VisibilityState,
|
||||
} from "@tanstack/react-table";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { type ReactNode, useMemo, useState } from "react";
|
||||
import { Fragment, type ReactNode, useMemo, useState } from "react";
|
||||
import type {
|
||||
TransactionsExportContext,
|
||||
TransactionsPaginationState,
|
||||
@@ -37,6 +38,7 @@ import {
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/shared/components/ui/tooltip";
|
||||
import { formatDateGroupLabel } from "@/shared/utils/date";
|
||||
import { cn } from "@/shared/utils/ui";
|
||||
import { TransactionsExport } from "../transactions-export";
|
||||
import type {
|
||||
@@ -79,6 +81,7 @@ type TransactionsTableProps = {
|
||||
isSettlementLoading?: (id: string) => boolean;
|
||||
showActions?: boolean;
|
||||
showFilters?: boolean;
|
||||
groupTransactionsByDate?: boolean;
|
||||
};
|
||||
|
||||
export function TransactionsTable({
|
||||
@@ -110,6 +113,7 @@ export function TransactionsTable({
|
||||
isSettlementLoading,
|
||||
showActions = true,
|
||||
showFilters = true,
|
||||
groupTransactionsByDate = true,
|
||||
}: TransactionsTableProps) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
@@ -145,12 +149,14 @@ export function TransactionsTable({
|
||||
onViewAnticipationHistory,
|
||||
isSettlementLoading: isSettlementLoading ?? (() => false),
|
||||
showActions,
|
||||
showDateGroups: groupTransactionsByDate,
|
||||
columnOrder: columnOrderPreference,
|
||||
}),
|
||||
[
|
||||
currentUserId,
|
||||
noteAsColumn,
|
||||
columnOrderPreference,
|
||||
groupTransactionsByDate,
|
||||
onEdit,
|
||||
onCopy,
|
||||
onImport,
|
||||
@@ -191,6 +197,24 @@ export function TransactionsTable({
|
||||
|
||||
const rowModel = table.getRowModel();
|
||||
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
|
||||
? (serverPagination?.totalItems ?? 0)
|
||||
: table.getCoreRowModel().rows.length;
|
||||
@@ -275,6 +299,25 @@ export function TransactionsTable({
|
||||
|
||||
const showTopControls =
|
||||
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 (
|
||||
<TooltipProvider>
|
||||
@@ -366,7 +409,7 @@ export function TransactionsTable({
|
||||
) : null}
|
||||
|
||||
<Card className="py-2">
|
||||
<CardContent className="px-2 py-4 sm:px-4">
|
||||
<CardContent className="px-2 sm:px-4">
|
||||
{hasRows ? (
|
||||
<>
|
||||
<TransactionsMobileList
|
||||
@@ -383,6 +426,7 @@ export function TransactionsTable({
|
||||
onViewAnticipationHistory={onViewAnticipationHistory}
|
||||
isSettlementLoading={isSettlementLoading ?? (() => false)}
|
||||
showActions={showActions}
|
||||
showDateGroups={groupTransactionsByDate}
|
||||
/>
|
||||
|
||||
<div className="hidden overflow-x-auto md:block">
|
||||
@@ -407,28 +451,23 @@ export function TransactionsTable({
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rowModel.rows.map((row) => (
|
||||
<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>
|
||||
))}
|
||||
{groupTransactionsByDate
|
||||
? groupedRows.map((group, groupIndex) => (
|
||||
<Fragment
|
||||
key={`${group.date || group.label}-${groupIndex}`}
|
||||
>
|
||||
<TableRow className="border-y bg-muted/40 hover:bg-muted/60">
|
||||
<TableCell
|
||||
colSpan={visibleColumnCount}
|
||||
className="h-9 px-3 py-2 text-xs font-semibold text-muted-foreground"
|
||||
>
|
||||
{group.label}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{group.rows.map(renderTransactionRow)}
|
||||
</Fragment>
|
||||
))
|
||||
: rowModel.rows.map(renderTransactionRow)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
ilike,
|
||||
inArray,
|
||||
isNotNull,
|
||||
isNull,
|
||||
lte,
|
||||
or,
|
||||
sql,
|
||||
@@ -384,6 +385,7 @@ export const buildTransactionWhere = ({
|
||||
cardId,
|
||||
accountId,
|
||||
payerId,
|
||||
hideAnticipatedInstallments = false,
|
||||
}: {
|
||||
userId: string;
|
||||
period: string;
|
||||
@@ -392,6 +394,7 @@ export const buildTransactionWhere = ({
|
||||
cardId?: string;
|
||||
accountId?: string;
|
||||
payerId?: string;
|
||||
hideAnticipatedInstallments?: boolean;
|
||||
}): SQL[] => {
|
||||
const where: SQL[] = [eq(transactions.userId, userId)];
|
||||
|
||||
@@ -421,6 +424,15 @@ export const buildTransactionWhere = ({
|
||||
where.push(eq(transactions.payerId, payerId));
|
||||
}
|
||||
|
||||
if (hideAnticipatedInstallments) {
|
||||
where.push(
|
||||
or(
|
||||
isNull(transactions.isAnticipated),
|
||||
eq(transactions.isAnticipated, false),
|
||||
) as SQL,
|
||||
);
|
||||
}
|
||||
|
||||
if (cardId) {
|
||||
where.push(eq(transactions.cardId, cardId));
|
||||
}
|
||||
|
||||
@@ -102,7 +102,7 @@ export function EstablishmentLogoPicker({
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={onOpenChange}>
|
||||
<Popover modal open={open} onOpenChange={onOpenChange}>
|
||||
<PopoverTrigger asChild>{children}</PopoverTrigger>
|
||||
<PopoverContent className="w-80 p-3" align="start" side="bottom">
|
||||
<p className="mb-2 text-muted-foreground text-xs">
|
||||
|
||||
@@ -93,6 +93,7 @@ export default function MonthNavigation() {
|
||||
<Popover open={isPickerOpen} onOpenChange={setIsPickerOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={isPending}
|
||||
|
||||
@@ -44,9 +44,10 @@ export function PeriodPicker({
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<Popover modal open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant={variant}
|
||||
size={size}
|
||||
disabled={disabled}
|
||||
|
||||
@@ -197,6 +197,7 @@ function CalendarDayButton({
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
data-day={day.date.toLocaleDateString()}
|
||||
|
||||
@@ -13,7 +13,7 @@ function Checkbox({
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
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,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -148,7 +148,7 @@ export function DatePicker({
|
||||
required={required}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<Popover modal open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
|
||||
@@ -128,6 +128,7 @@ function MonthCal({
|
||||
</div>
|
||||
<div className="space-x-1 flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setMenuYear(menuYear - 1);
|
||||
if (onYearBackward) onYearBackward();
|
||||
@@ -140,6 +141,7 @@ function MonthCal({
|
||||
<RiArrowLeftSFill className="opacity-50 size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setMenuYear(menuYear + 1);
|
||||
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"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setMonth(m.number);
|
||||
setYear(menuYear);
|
||||
|
||||
@@ -331,6 +331,45 @@ export function formatDate(value: string | Date | null | undefined): string {
|
||||
.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
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user