mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-10 19:21:46 +00:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0bb664884a | ||
|
|
f02958df1d | ||
|
|
c4c52c02ab | ||
|
|
c9239c4f3c | ||
|
|
7128cc0ae7 | ||
|
|
467f71493d | ||
|
|
0cec10ede3 |
27
CHANGELOG.md
27
CHANGELOG.md
@@ -5,6 +5,33 @@ 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.5.6] - 2026-05-07
|
||||||
|
|
||||||
|
Esta versão entrega um conjunto de melhorias em torno do fluxo de lançamentos: filtros mais úteis, divisão por porcentagem, indicador de orçamento dentro do modal e correção de um bug em totais por pessoa que considerava contas excluídas do saldo. Também inclui ajustes de robustez no display da calculadora (sem mais overflow do modal com valores longos) e o fix do cache de RSC nos filtros multi-seleção.
|
||||||
|
|
||||||
|
### Adicionado
|
||||||
|
- Lançamentos: filtro por faixa de valor (mín/máx) com debounce e persistência via query string (`amountMin`/`amountMax`).
|
||||||
|
- Lançamentos: botão "Limpar" discreto ao lado do botão "Filtros", visível apenas quando há filtros ativos.
|
||||||
|
- Modal de lançamento: toggle compacto R$/% no card "Dividir lançamento", permitindo distribuir o valor por porcentagem entre as pessoas. Cada input em modo % exibe o valor convertido em R$ logo abaixo, no mesmo padrão visual do `InlinePeriodPicker`.
|
||||||
|
- Modal de lançamento: indicador de orçamento ao lado do nome da categoria selecionada, mostrando `R$ gasto de R$ orçado (%)` com cores semânticas (verde / âmbar / vermelho) conforme o consumo. Suprimido quando o input divide a linha com o tipo de transação (caso pré-lançamentos). Implementado via `getCategoryBudgetSummaryAction` e `fetchCategoryBudgetSummary` em `features/budgets`.
|
||||||
|
|
||||||
|
### Alterado
|
||||||
|
- Calculadora: display com tamanho de fonte adaptativo (de `text-3xl` a `text-sm`) conforme o comprimento da expressão, mais `truncate` funcional via `min-w-0` nos containers flex. Resolve o overflow do modal com valores muito longos (ex: `9.999.999.999 × 9.999.999.999`).
|
||||||
|
|
||||||
|
### Corrigido
|
||||||
|
- Pessoas: "Totais do mês" em `/payers/[id]` deixa de somar lançamentos vinculados a contas marcadas como `excludeFromBalance` (ex: "Ajuste de saldo"). Adicionado `excludeTransactionsFromExcludedAccounts()` em 6 queries de `src/shared/lib/payers/details.ts`.
|
||||||
|
- Orçamentos: `fetchBudgetsForUser` e `fetchCategoryBudgetSummary` agora respeitam o filtro de contas excluídas do saldo, alinhando o gasto exibido na tela de Orçamentos com o badge de orçamento dentro do modal de lançamento.
|
||||||
|
- Lançamentos: tabela de resultados agora reflete corretamente a remoção de um valor em filtros multi-seleção (Pessoa, Conta/Cartão, Categoria, Condição, Forma de Pagamento). Adicionado `router.refresh()` em `handleMultiFilterChange` para invalidar o cache de segmento do router (issue #54).
|
||||||
|
|
||||||
|
### Dependências
|
||||||
|
- Stack core: `next` 16.2.4 → 16.2.6, `react`/`react-dom` 19.2.5 → 19.2.6.
|
||||||
|
- UI: `react-day-picker` 9 → 10 (major), `tailwindcss` / `@tailwindcss/postcss` 4.2.4 → 4.3.0, `tailwind-merge` 3.5.0 → 3.6.0.
|
||||||
|
- Auth: `better-auth` 1.6.9 → 1.6.10 e `@better-auth/passkey` 1.6.9 → 1.6.10.
|
||||||
|
- AI SDKs: `@ai-sdk/anthropic` 3.0.74 → 3.0.76, `@ai-sdk/google` 3.0.67 → 3.0.71, `@ai-sdk/openai` 3.0.60 → 3.0.63, `ai` 6.0.175 → 6.0.177.
|
||||||
|
- AWS: `@aws-sdk/client-s3` e `@aws-sdk/s3-request-presigner` 3.1042.0 → 3.1045.0.
|
||||||
|
- E-mail: `resend` 6.12.2 → 6.12.3.
|
||||||
|
- Dev tooling: `@biomejs/biome` 2.4.14 → 2.4.15, `knip` 6.11.0 → 6.12.2, `@types/node` 25.6.0 → 25.6.2.
|
||||||
|
|
||||||
## [2.5.5] - 2026-05-06
|
## [2.5.5] - 2026-05-06
|
||||||
|
|
||||||
Esta versão melhora a navegação por históricos e lançamentos. O changelog ganhou uma linha do tempo mais leve, colapsável e fácil de escanear; os filtros de lançamentos passam a aceitar múltiplas pessoas, categorias, formas de pagamento, condições e contas/cartões na mesma busca; e os diálogos adotam as animações compartilhadas do design system. Também há pequenos polimentos de texto e layout para deixar a interface mais consistente.
|
Esta versão melhora a navegação por históricos e lançamentos. O changelog ganhou uma linha do tempo mais leve, colapsável e fácil de escanear; os filtros de lançamentos passam a aceitar múltiplas pessoas, categorias, formas de pagamento, condições e contas/cartões na mesma busca; e os diálogos adotam as animações compartilhadas do design system. Também há pequenos polimentos de texto e layout para deixar a interface mais consistente.
|
||||||
|
|||||||
@@ -8,7 +8,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.
|
||||||
|
|
||||||
[](CHANGELOG.md)
|
[](CHANGELOG.md)
|
||||||
[](https://nextjs.org/)
|
[](https://nextjs.org/)
|
||||||
[](https://www.typescriptlang.org/)
|
[](https://www.typescriptlang.org/)
|
||||||
[](https://www.postgresql.org/)
|
[](https://www.postgresql.org/)
|
||||||
|
|||||||
40
package.json
40
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "openmonetis",
|
"name": "openmonetis",
|
||||||
"version": "2.5.5",
|
"version": "2.5.6",
|
||||||
"private": true,
|
"private": true,
|
||||||
"packageManager": "pnpm@10.33.0",
|
"packageManager": "pnpm@10.33.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -31,12 +31,12 @@
|
|||||||
"mockup": "tsx scripts/mock-data.ts"
|
"mockup": "tsx scripts/mock-data.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ai-sdk/anthropic": "^3.0.74",
|
"@ai-sdk/anthropic": "^3.0.76",
|
||||||
"@ai-sdk/google": "^3.0.67",
|
"@ai-sdk/google": "^3.0.71",
|
||||||
"@ai-sdk/openai": "^3.0.60",
|
"@ai-sdk/openai": "^3.0.63",
|
||||||
"@aws-sdk/client-s3": "^3.1042.0",
|
"@aws-sdk/client-s3": "^3.1045.0",
|
||||||
"@aws-sdk/s3-request-presigner": "^3.1042.0",
|
"@aws-sdk/s3-request-presigner": "^3.1045.0",
|
||||||
"@better-auth/passkey": "^1.6.9",
|
"@better-auth/passkey": "^1.6.10",
|
||||||
"@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",
|
||||||
@@ -66,8 +66,8 @@
|
|||||||
"@tanstack/react-query": "^5.100.9",
|
"@tanstack/react-query": "^5.100.9",
|
||||||
"@tanstack/react-table": "8.21.3",
|
"@tanstack/react-table": "8.21.3",
|
||||||
"@tanstack/react-virtual": "^3.13.24",
|
"@tanstack/react-virtual": "^3.13.24",
|
||||||
"ai": "^6.0.175",
|
"ai": "^6.0.177",
|
||||||
"better-auth": "1.6.9",
|
"better-auth": "1.6.10",
|
||||||
"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",
|
||||||
@@ -77,17 +77,17 @@
|
|||||||
"exceljs": "^4.4.0",
|
"exceljs": "^4.4.0",
|
||||||
"jspdf": "^4.2.1",
|
"jspdf": "^4.2.1",
|
||||||
"jspdf-autotable": "^5.0.7",
|
"jspdf-autotable": "^5.0.7",
|
||||||
"next": "16.2.4",
|
"next": "16.2.6",
|
||||||
"next-themes": "0.4.6",
|
"next-themes": "0.4.6",
|
||||||
"pdfjs-dist": "^5.7.284",
|
"pdfjs-dist": "^5.7.284",
|
||||||
"pg": "8.20.0",
|
"pg": "8.20.0",
|
||||||
"react": "19.2.5",
|
"react": "19.2.6",
|
||||||
"react-day-picker": "^9.14.0",
|
"react-day-picker": "^10.0.0",
|
||||||
"react-dom": "19.2.5",
|
"react-dom": "19.2.6",
|
||||||
"recharts": "3.8.1",
|
"recharts": "3.8.1",
|
||||||
"resend": "^6.12.2",
|
"resend": "^6.12.3",
|
||||||
"sonner": "2.0.7",
|
"sonner": "2.0.7",
|
||||||
"tailwind-merge": "3.5.0",
|
"tailwind-merge": "3.6.0",
|
||||||
"tw-animate-css": "^1.4.0",
|
"tw-animate-css": "^1.4.0",
|
||||||
"vaul": "1.1.2",
|
"vaul": "1.1.2",
|
||||||
"zod": "4.4.3"
|
"zod": "4.4.3"
|
||||||
@@ -98,17 +98,17 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@biomejs/biome": "2.4.14",
|
"@biomejs/biome": "2.4.15",
|
||||||
"@tailwindcss/postcss": "4.2.4",
|
"@tailwindcss/postcss": "4.3.0",
|
||||||
"@types/canvas-confetti": "^1.9.0",
|
"@types/canvas-confetti": "^1.9.0",
|
||||||
"@types/node": "25.6.0",
|
"@types/node": "25.6.2",
|
||||||
"@types/pg": "^8.20.0",
|
"@types/pg": "^8.20.0",
|
||||||
"@types/react": "19.2.14",
|
"@types/react": "19.2.14",
|
||||||
"@types/react-dom": "19.2.3",
|
"@types/react-dom": "19.2.3",
|
||||||
"dotenv": "^17.4.2",
|
"dotenv": "^17.4.2",
|
||||||
"drizzle-kit": "0.31.10",
|
"drizzle-kit": "0.31.10",
|
||||||
"knip": "^6.11.0",
|
"knip": "^6.12.2",
|
||||||
"tailwindcss": "4.2.4",
|
"tailwindcss": "4.3.0",
|
||||||
"tsx": "4.21.0",
|
"tsx": "4.21.0",
|
||||||
"typescript": "6.0.3"
|
"typescript": "6.0.3"
|
||||||
}
|
}
|
||||||
|
|||||||
1576
pnpm-lock.yaml
generated
1576
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -85,6 +85,8 @@ const EMPTY_FILTERS: TransactionSearchFilters = {
|
|||||||
settledFilter: null,
|
settledFilter: null,
|
||||||
attachmentFilter: null,
|
attachmentFilter: null,
|
||||||
dividedFilter: null,
|
dividedFilter: null,
|
||||||
|
amountMinFilter: null,
|
||||||
|
amountMaxFilter: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
const createEmptySlugMaps = (): SlugMaps => ({
|
const createEmptySlugMaps = (): SlugMaps => ({
|
||||||
|
|||||||
@@ -3,6 +3,10 @@
|
|||||||
import { and, eq } from "drizzle-orm";
|
import { and, eq } from "drizzle-orm";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { budgets, categories } from "@/db/schema";
|
import { budgets, categories } from "@/db/schema";
|
||||||
|
import {
|
||||||
|
type CategoryBudgetSummary,
|
||||||
|
fetchCategoryBudgetSummary,
|
||||||
|
} from "@/features/budgets/queries";
|
||||||
import {
|
import {
|
||||||
handleActionError,
|
handleActionError,
|
||||||
revalidateForEntity,
|
revalidateForEntity,
|
||||||
@@ -204,6 +208,34 @@ export async function deleteBudgetAction(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getCategoryBudgetSummarySchema = z.object({
|
||||||
|
categoryId: uuidSchema("Category"),
|
||||||
|
period: periodSchema,
|
||||||
|
});
|
||||||
|
|
||||||
|
type GetCategoryBudgetSummaryInput = z.input<
|
||||||
|
typeof getCategoryBudgetSummarySchema
|
||||||
|
>;
|
||||||
|
|
||||||
|
export async function getCategoryBudgetSummaryAction(
|
||||||
|
input: GetCategoryBudgetSummaryInput,
|
||||||
|
): Promise<ActionResult<CategoryBudgetSummary | null>> {
|
||||||
|
try {
|
||||||
|
const user = await getUser();
|
||||||
|
const data = getCategoryBudgetSummarySchema.parse(input);
|
||||||
|
const summary = await fetchCategoryBudgetSummary(
|
||||||
|
user.id,
|
||||||
|
data.categoryId,
|
||||||
|
data.period,
|
||||||
|
);
|
||||||
|
return { success: true, message: "ok", data: summary };
|
||||||
|
} catch (error) {
|
||||||
|
return handleActionError(
|
||||||
|
error,
|
||||||
|
) as ActionResult<CategoryBudgetSummary | null>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const duplicatePreviousMonthSchema = z.object({
|
const duplicatePreviousMonthSchema = z.object({
|
||||||
period: periodSchema,
|
period: periodSchema,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,6 +1,12 @@
|
|||||||
import { and, asc, eq, inArray, isNull, or, sql, sum } from "drizzle-orm";
|
import { and, asc, eq, inArray, isNull, or, sql, sum } from "drizzle-orm";
|
||||||
import { budgets, categories, transactions } from "@/db/schema";
|
import {
|
||||||
|
budgets,
|
||||||
|
categories,
|
||||||
|
financialAccounts,
|
||||||
|
transactions,
|
||||||
|
} from "@/db/schema";
|
||||||
import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/shared/lib/accounts/constants";
|
import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/shared/lib/accounts/constants";
|
||||||
|
import { excludeTransactionsFromExcludedAccounts } from "@/shared/lib/accounts/query-filters";
|
||||||
import { db } from "@/shared/lib/db";
|
import { db } from "@/shared/lib/db";
|
||||||
import { getAdminPayerId } from "@/shared/lib/payers/get-admin-id";
|
import { getAdminPayerId } from "@/shared/lib/payers/get-admin-id";
|
||||||
|
|
||||||
@@ -75,6 +81,10 @@ export async function fetchBudgetsForUser(
|
|||||||
totalAmount: sum(transactions.amount).as("totalAmount"),
|
totalAmount: sum(transactions.amount).as("totalAmount"),
|
||||||
})
|
})
|
||||||
.from(transactions)
|
.from(transactions)
|
||||||
|
.leftJoin(
|
||||||
|
financialAccounts,
|
||||||
|
eq(transactions.accountId, financialAccounts.id),
|
||||||
|
)
|
||||||
.where(
|
.where(
|
||||||
and(
|
and(
|
||||||
eq(transactions.userId, userId),
|
eq(transactions.userId, userId),
|
||||||
@@ -86,6 +96,7 @@ export async function fetchBudgetsForUser(
|
|||||||
isNull(transactions.note),
|
isNull(transactions.note),
|
||||||
sql`${transactions.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`,
|
sql`${transactions.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`,
|
||||||
),
|
),
|
||||||
|
excludeTransactionsFromExcludedAccounts(),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.groupBy(transactions.categoryId);
|
.groupBy(transactions.categoryId);
|
||||||
@@ -127,3 +138,57 @@ export async function fetchBudgetsForUser(
|
|||||||
|
|
||||||
return { budgets: budgetList, categoriesOptions };
|
return { budgets: budgetList, categoriesOptions };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type CategoryBudgetSummary = {
|
||||||
|
amount: number;
|
||||||
|
spent: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function fetchCategoryBudgetSummary(
|
||||||
|
userId: string,
|
||||||
|
categoryId: string,
|
||||||
|
period: string,
|
||||||
|
): Promise<CategoryBudgetSummary | null> {
|
||||||
|
const [adminPayerId, budget] = await Promise.all([
|
||||||
|
getAdminPayerId(userId),
|
||||||
|
db.query.budgets.findFirst({
|
||||||
|
columns: { amount: true },
|
||||||
|
where: and(
|
||||||
|
eq(budgets.userId, userId),
|
||||||
|
eq(budgets.categoryId, categoryId),
|
||||||
|
eq(budgets.period, period),
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (!adminPayerId || !budget) return null;
|
||||||
|
|
||||||
|
const totals = await db
|
||||||
|
.select({
|
||||||
|
totalAmount: sum(transactions.amount).as("totalAmount"),
|
||||||
|
})
|
||||||
|
.from(transactions)
|
||||||
|
.leftJoin(
|
||||||
|
financialAccounts,
|
||||||
|
eq(transactions.accountId, financialAccounts.id),
|
||||||
|
)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(transactions.userId, userId),
|
||||||
|
eq(transactions.period, period),
|
||||||
|
eq(transactions.transactionType, "Despesa"),
|
||||||
|
eq(transactions.payerId, adminPayerId),
|
||||||
|
eq(transactions.categoryId, categoryId),
|
||||||
|
or(
|
||||||
|
isNull(transactions.note),
|
||||||
|
sql`${transactions.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`,
|
||||||
|
),
|
||||||
|
excludeTransactionsFromExcludedAccounts(),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
amount: toNumber(budget.amount),
|
||||||
|
spent: Math.abs(toNumber(totals[0]?.totalAmount ?? 0)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|||||||
@@ -124,8 +124,10 @@ function TimelineItem({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 pb-6 space-y-3 min-w-0">
|
<div className="flex-1 pb-6 space-y-3 min-w-0">
|
||||||
<div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
|
<div className="flex flex-wrap items-baseline gap-x-2">
|
||||||
<h3 className="font-semibold font-mono">v{version.version}</h3>
|
<h3 className="font-semibold font-mono text-lg">
|
||||||
|
v{version.version}
|
||||||
|
</h3>
|
||||||
{isLatest ? (
|
{isLatest ? (
|
||||||
<Badge variant="default" className="text-xs">
|
<Badge variant="default" className="text-xs">
|
||||||
Atual
|
Atual
|
||||||
@@ -142,7 +144,7 @@ function TimelineItem({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{version.summary ? (
|
{version.summary ? (
|
||||||
<Card className="p-4">
|
<Card className="p-6">
|
||||||
<blockquote className="pl-2 text-sm text-muted-foreground leading-relaxed italic">
|
<blockquote className="pl-2 text-sm text-muted-foreground leading-relaxed italic">
|
||||||
{version.summary}
|
{version.summary}
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|||||||
@@ -34,6 +34,8 @@ const exportTransactionsSchema: z.ZodType<TransactionsExportContext> = z.object(
|
|||||||
settledFilter: z.string().nullable(),
|
settledFilter: z.string().nullable(),
|
||||||
attachmentFilter: z.string().nullable(),
|
attachmentFilter: z.string().nullable(),
|
||||||
dividedFilter: z.string().nullable(),
|
dividedFilter: z.string().nullable(),
|
||||||
|
amountMinFilter: z.number().nullable(),
|
||||||
|
amountMaxFilter: z.number().nullable(),
|
||||||
}),
|
}),
|
||||||
accountId: z.string().min(1).nullable().optional(),
|
accountId: z.string().min(1).nullable().optional(),
|
||||||
cardId: z.string().min(1).nullable().optional(),
|
cardId: z.string().min(1).nullable().optional(),
|
||||||
|
|||||||
@@ -70,6 +70,23 @@ export function BulkActionDialog({
|
|||||||
return "Este e os próximos lançamentos";
|
return "Este e os próximos lançamentos";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getPeriodLabel = () => {
|
||||||
|
if (seriesType === "installment" && currentNumber && totalCount) {
|
||||||
|
return `Todas as pessoas desta parcela (${currentNumber}/${totalCount})`;
|
||||||
|
}
|
||||||
|
if (seriesType === "installment") {
|
||||||
|
return "Todas as pessoas desta parcela";
|
||||||
|
}
|
||||||
|
return "Todas as pessoas deste lançamento";
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPeriodDescription = () => {
|
||||||
|
if (seriesType === "installment") {
|
||||||
|
return "Aplica a alteração para todas as pessoas que dividem esta parcela";
|
||||||
|
}
|
||||||
|
return "Aplica a alteração para todas as pessoas que dividem este lançamento";
|
||||||
|
};
|
||||||
|
|
||||||
const getAllLabel = () => {
|
const getAllLabel = () => {
|
||||||
if (seriesType === "installment" && totalCount) {
|
if (seriesType === "installment" && totalCount) {
|
||||||
return `Todas as parcelas (${totalCount} ${
|
return `Todas as parcelas (${totalCount} ${
|
||||||
@@ -116,10 +133,10 @@ export function BulkActionDialog({
|
|||||||
htmlFor="period"
|
htmlFor="period"
|
||||||
className="text-sm cursor-pointer font-medium"
|
className="text-sm cursor-pointer font-medium"
|
||||||
>
|
>
|
||||||
{`Todas as pessoas desta parcela (${currentNumber}/${totalCount})`}
|
{getPeriodLabel()}
|
||||||
</Label>
|
</Label>
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
Aplica a alteração para todas as pessoas que dividem esta parcela
|
{getPeriodDescription()}
|
||||||
</p>
|
</p>
|
||||||
{scope === "period" && actionType === "edit" && (
|
{scope === "period" && actionType === "edit" && (
|
||||||
<div className="mt-1.5 flex items-start gap-1.5 rounded-md bg-amber-50 px-2 py-1.5 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300">
|
<div className="mt-1.5 flex items-start gap-1.5 rounded-md bg-amber-50 px-2 py-1.5 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300">
|
||||||
|
|||||||
@@ -1,5 +1,8 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { getCategoryBudgetSummaryAction } from "@/features/budgets/actions";
|
||||||
|
import type { CategoryBudgetSummary } from "@/features/budgets/queries";
|
||||||
import { TRANSACTION_TYPES } from "@/features/transactions/lib/constants";
|
import { TRANSACTION_TYPES } from "@/features/transactions/lib/constants";
|
||||||
import { Label } from "@/shared/components/ui/label";
|
import { Label } from "@/shared/components/ui/label";
|
||||||
import {
|
import {
|
||||||
@@ -11,6 +14,7 @@ import {
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/shared/components/ui/select";
|
} from "@/shared/components/ui/select";
|
||||||
|
import { formatCurrency } from "@/shared/utils/currency";
|
||||||
import { cn } from "@/shared/utils/ui";
|
import { cn } from "@/shared/utils/ui";
|
||||||
import {
|
import {
|
||||||
CategorySelectContent,
|
CategorySelectContent,
|
||||||
@@ -18,6 +22,22 @@ import {
|
|||||||
} from "../../select-items";
|
} from "../../select-items";
|
||||||
import type { CategorySectionProps } from "./transaction-dialog-types";
|
import type { CategorySectionProps } from "./transaction-dialog-types";
|
||||||
|
|
||||||
|
const BUDGET_DANGER_RATIO = 1;
|
||||||
|
const BUDGET_WARNING_RATIO = 0.8;
|
||||||
|
|
||||||
|
const getBudgetTone = (ratio: number) => {
|
||||||
|
if (ratio >= BUDGET_DANGER_RATIO) return "text-red-600 dark:text-red-400";
|
||||||
|
if (ratio >= BUDGET_WARNING_RATIO)
|
||||||
|
return "text-amber-600 dark:text-amber-400";
|
||||||
|
return "text-emerald-600 dark:text-emerald-400";
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatCompactCurrency = (value: number) =>
|
||||||
|
formatCurrency(value, {
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: 0,
|
||||||
|
});
|
||||||
|
|
||||||
export function CategorySection({
|
export function CategorySection({
|
||||||
formState,
|
formState,
|
||||||
onFieldChange,
|
onFieldChange,
|
||||||
@@ -28,6 +48,62 @@ export function CategorySection({
|
|||||||
}: CategorySectionProps) {
|
}: CategorySectionProps) {
|
||||||
const showTransactionTypeField = !isUpdateMode && !hideTransactionType;
|
const showTransactionTypeField = !isUpdateMode && !hideTransactionType;
|
||||||
|
|
||||||
|
const [budgetSummary, setBudgetSummary] =
|
||||||
|
useState<CategoryBudgetSummary | null>(null);
|
||||||
|
const cacheRef = useRef<Map<string, CategoryBudgetSummary | null>>(new Map());
|
||||||
|
|
||||||
|
const { categoryId, period, transactionType } = formState;
|
||||||
|
const shouldFetchBudget =
|
||||||
|
Boolean(categoryId) && Boolean(period) && transactionType === "Despesa";
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!shouldFetchBudget || !categoryId || !period) {
|
||||||
|
setBudgetSummary(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const key = `${categoryId}::${period}`;
|
||||||
|
const cached = cacheRef.current.get(key);
|
||||||
|
if (cached !== undefined) {
|
||||||
|
setBudgetSummary((prev) => (prev === cached ? prev : cached));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let cancelled = false;
|
||||||
|
getCategoryBudgetSummaryAction({ categoryId, period }).then((result) => {
|
||||||
|
if (cancelled) return;
|
||||||
|
const data = result.success ? (result.data ?? null) : null;
|
||||||
|
cacheRef.current.set(key, data);
|
||||||
|
setBudgetSummary(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [shouldFetchBudget, categoryId, period]);
|
||||||
|
|
||||||
|
const renderBudgetBadge = () => {
|
||||||
|
if (showTransactionTypeField) return null;
|
||||||
|
if (!shouldFetchBudget || !budgetSummary) return null;
|
||||||
|
|
||||||
|
const { amount, spent } = budgetSummary;
|
||||||
|
const ratio = amount > 0 ? spent / amount : 0;
|
||||||
|
const percent = amount > 0 ? Math.round(ratio * 100) : 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
title={`${formatCurrency(spent)} de ${formatCurrency(amount)} (${percent}%)`}
|
||||||
|
className={cn(
|
||||||
|
"shrink-0 text-xs font-semibold leading-none whitespace-nowrap font-mono",
|
||||||
|
getBudgetTone(ratio),
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{formatCompactCurrency(spent)} de {formatCompactCurrency(amount)}
|
||||||
|
<span className="ml-1 opacity-70">({percent}%)</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex w-full flex-col gap-2 md:flex-row">
|
<div className="flex w-full flex-col gap-2 md:flex-row">
|
||||||
{showTransactionTypeField ? (
|
{showTransactionTypeField ? (
|
||||||
@@ -77,12 +153,16 @@ export function CategorySection({
|
|||||||
const selectedOption = categoryOptions.find(
|
const selectedOption = categoryOptions.find(
|
||||||
(opt) => opt.value === formState.categoryId,
|
(opt) => opt.value === formState.categoryId,
|
||||||
);
|
);
|
||||||
return selectedOption ? (
|
if (!selectedOption) return null;
|
||||||
<CategorySelectContent
|
return (
|
||||||
label={selectedOption.label}
|
<span className="flex items-center gap-2">
|
||||||
icon={selectedOption.icon}
|
<CategorySelectContent
|
||||||
/>
|
label={selectedOption.label}
|
||||||
) : null;
|
icon={selectedOption.icon}
|
||||||
|
/>
|
||||||
|
{renderBudgetBadge()}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
})()}
|
})()}
|
||||||
</SelectValue>
|
</SelectValue>
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
|
|
||||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
||||||
import { RiSliceFill } from "@remixicon/react";
|
import { RiSliceFill } from "@remixicon/react";
|
||||||
|
import { useState } from "react";
|
||||||
import { CurrencyInput } from "@/shared/components/ui/currency-input";
|
import { CurrencyInput } from "@/shared/components/ui/currency-input";
|
||||||
|
import { Input } from "@/shared/components/ui/input";
|
||||||
import { Label } from "@/shared/components/ui/label";
|
import { Label } from "@/shared/components/ui/label";
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
@@ -11,10 +13,124 @@ import {
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/shared/components/ui/select";
|
} from "@/shared/components/ui/select";
|
||||||
|
import {
|
||||||
|
ToggleGroup,
|
||||||
|
ToggleGroupItem,
|
||||||
|
} from "@/shared/components/ui/toggle-group";
|
||||||
|
import {
|
||||||
|
formatCurrency,
|
||||||
|
formatDecimalForDbRequired,
|
||||||
|
normalizeDecimalInput,
|
||||||
|
} from "@/shared/utils/currency";
|
||||||
|
import { safeToNumber } from "@/shared/utils/number";
|
||||||
import { cn } from "@/shared/utils/ui";
|
import { cn } from "@/shared/utils/ui";
|
||||||
import { PayerSelectContent } from "../../select-items";
|
import { PayerSelectContent } from "../../select-items";
|
||||||
import type { PayerSectionProps } from "./transaction-dialog-types";
|
import type { PayerSectionProps } from "./transaction-dialog-types";
|
||||||
|
|
||||||
|
type SplitInputMode = "currency" | "percentage";
|
||||||
|
|
||||||
|
const SPLIT_MODE_OPTIONS = [
|
||||||
|
{ value: "currency", label: "R$" },
|
||||||
|
{ value: "percentage", label: "%" },
|
||||||
|
] as const satisfies ReadonlyArray<{ value: SplitInputMode; label: string }>;
|
||||||
|
|
||||||
|
const amountToPercent = (amount: string, total: number): string => {
|
||||||
|
if (total <= 0) return "";
|
||||||
|
const numeric = safeToNumber(normalizeDecimalInput(amount), Number.NaN);
|
||||||
|
if (!Number.isFinite(numeric)) return "";
|
||||||
|
const pct = (numeric / total) * 100;
|
||||||
|
return (Math.round(pct * 10) / 10).toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
const percentToAmount = (percent: string, total: number): string => {
|
||||||
|
const pct = safeToNumber(normalizeDecimalInput(percent), Number.NaN);
|
||||||
|
if (!Number.isFinite(pct) || total <= 0) return "0.00";
|
||||||
|
const clamped = Math.min(100, Math.max(0, pct));
|
||||||
|
return formatDecimalForDbRequired((total * clamped) / 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
function SplitModeToggle({
|
||||||
|
mode,
|
||||||
|
onModeChange,
|
||||||
|
}: {
|
||||||
|
mode: SplitInputMode;
|
||||||
|
onModeChange: (mode: SplitInputMode) => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ToggleGroup
|
||||||
|
type="single"
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
value={mode}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
if (value) onModeChange(value as SplitInputMode);
|
||||||
|
}}
|
||||||
|
aria-label="Modo de entrada do split"
|
||||||
|
className="h-7 text-xs"
|
||||||
|
>
|
||||||
|
{SPLIT_MODE_OPTIONS.map((option) => (
|
||||||
|
<ToggleGroupItem
|
||||||
|
key={option.value}
|
||||||
|
value={option.value}
|
||||||
|
className="px-2 py-0 h-7 text-xs"
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
</ToggleGroupItem>
|
||||||
|
))}
|
||||||
|
</ToggleGroup>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SplitAmountField({
|
||||||
|
mode,
|
||||||
|
value,
|
||||||
|
totalAmount,
|
||||||
|
onAmountChange,
|
||||||
|
ariaLabel,
|
||||||
|
}: {
|
||||||
|
mode: SplitInputMode;
|
||||||
|
value: string;
|
||||||
|
totalAmount: number;
|
||||||
|
onAmountChange: (amount: string) => void;
|
||||||
|
ariaLabel: string;
|
||||||
|
}) {
|
||||||
|
if (mode === "currency") {
|
||||||
|
return (
|
||||||
|
<CurrencyInput
|
||||||
|
value={value}
|
||||||
|
onValueChange={onAmountChange}
|
||||||
|
placeholder="R$ 0,00"
|
||||||
|
className="h-9 w-[45%] text-sm"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-[45%] space-y-1">
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
inputMode="decimal"
|
||||||
|
value={amountToPercent(value, totalAmount)}
|
||||||
|
onChange={(event) => {
|
||||||
|
const sanitized = event.target.value.replace(/[^\d.,]/g, "");
|
||||||
|
onAmountChange(percentToAmount(sanitized, totalAmount));
|
||||||
|
}}
|
||||||
|
placeholder="0"
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
className="h-9 w-full pr-7 text-sm"
|
||||||
|
/>
|
||||||
|
<span className="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-xs text-muted-foreground">
|
||||||
|
%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="ml-1 text-xs text-muted-foreground">
|
||||||
|
{formatCurrency(safeToNumber(value))}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function PayerSection({
|
export function PayerSection({
|
||||||
formState,
|
formState,
|
||||||
onFieldChange,
|
onFieldChange,
|
||||||
@@ -22,17 +138,17 @@ export function PayerSection({
|
|||||||
secondaryPayerOptions,
|
secondaryPayerOptions,
|
||||||
totalAmount,
|
totalAmount,
|
||||||
}: PayerSectionProps) {
|
}: PayerSectionProps) {
|
||||||
|
const [splitMode, setSplitMode] = useState<SplitInputMode>("currency");
|
||||||
|
|
||||||
const handlePrimaryAmountChange = (value: string) => {
|
const handlePrimaryAmountChange = (value: string) => {
|
||||||
onFieldChange("primarySplitAmount", value);
|
onFieldChange("primarySplitAmount", value);
|
||||||
const numericValue = Number.parseFloat(value) || 0;
|
const remaining = Math.max(0, totalAmount - safeToNumber(value));
|
||||||
const remaining = Math.max(0, totalAmount - numericValue);
|
|
||||||
onFieldChange("secondarySplitAmount", remaining.toFixed(2));
|
onFieldChange("secondarySplitAmount", remaining.toFixed(2));
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSecondaryAmountChange = (value: string) => {
|
const handleSecondaryAmountChange = (value: string) => {
|
||||||
onFieldChange("secondarySplitAmount", value);
|
onFieldChange("secondarySplitAmount", value);
|
||||||
const numericValue = Number.parseFloat(value) || 0;
|
const remaining = Math.max(0, totalAmount - safeToNumber(value));
|
||||||
const remaining = Math.max(0, totalAmount - numericValue);
|
|
||||||
onFieldChange("primarySplitAmount", remaining.toFixed(2));
|
onFieldChange("primarySplitAmount", remaining.toFixed(2));
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -54,23 +170,28 @@ export function PayerSection({
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<CheckboxPrimitive.Root
|
<div className="flex items-center gap-2">
|
||||||
checked={formState.isSplit}
|
{formState.isSplit ? (
|
||||||
onCheckedChange={(checked) =>
|
<SplitModeToggle mode={splitMode} onModeChange={setSplitMode} />
|
||||||
onFieldChange("isSplit", Boolean(checked))
|
) : null}
|
||||||
}
|
<CheckboxPrimitive.Root
|
||||||
aria-label="Dividir lançamento"
|
checked={formState.isSplit}
|
||||||
className={cn(
|
onCheckedChange={(checked) =>
|
||||||
"peer size-4 shrink-0 rounded-lg border shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
onFieldChange("isSplit", Boolean(checked))
|
||||||
formState.isSplit
|
}
|
||||||
? "border-primary bg-primary text-primary-foreground"
|
aria-label="Dividir lançamento"
|
||||||
: "border-input dark:bg-input/30",
|
className={cn(
|
||||||
)}
|
"peer size-4 shrink-0 rounded-lg border shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
>
|
formState.isSplit
|
||||||
<CheckboxPrimitive.Indicator className="grid place-content-center text-current transition-none">
|
? "border-primary bg-primary text-primary-foreground"
|
||||||
<RiSliceFill className="size-3" />
|
: "border-input dark:bg-input/30",
|
||||||
</CheckboxPrimitive.Indicator>
|
)}
|
||||||
</CheckboxPrimitive.Root>
|
>
|
||||||
|
<CheckboxPrimitive.Indicator className="grid place-content-center text-current transition-none">
|
||||||
|
<RiSliceFill className="size-3" />
|
||||||
|
</CheckboxPrimitive.Indicator>
|
||||||
|
</CheckboxPrimitive.Root>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex w-full flex-col gap-2 md:flex-row">
|
<div className="flex w-full flex-col gap-2 md:flex-row">
|
||||||
@@ -111,14 +232,15 @@ export function PayerSection({
|
|||||||
))}
|
))}
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
{formState.isSplit && (
|
{formState.isSplit ? (
|
||||||
<CurrencyInput
|
<SplitAmountField
|
||||||
|
mode={splitMode}
|
||||||
value={formState.primarySplitAmount}
|
value={formState.primarySplitAmount}
|
||||||
onValueChange={handlePrimaryAmountChange}
|
totalAmount={totalAmount}
|
||||||
placeholder="R$ 0,00"
|
onAmountChange={handlePrimaryAmountChange}
|
||||||
className="h-9 w-[45%] text-sm"
|
ariaLabel="Porcentagem da pessoa"
|
||||||
/>
|
/>
|
||||||
)}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -163,11 +285,12 @@ export function PayerSection({
|
|||||||
))}
|
))}
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
<CurrencyInput
|
<SplitAmountField
|
||||||
|
mode={splitMode}
|
||||||
value={formState.secondarySplitAmount}
|
value={formState.secondarySplitAmount}
|
||||||
onValueChange={handleSecondaryAmountChange}
|
totalAmount={totalAmount}
|
||||||
placeholder="R$ 0,00"
|
onAmountChange={handleSecondaryAmountChange}
|
||||||
className="h-9 w-[45%] text-sm"
|
ariaLabel="Porcentagem do segundo pagador"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,9 +4,14 @@ import {
|
|||||||
RiCheckLine,
|
RiCheckLine,
|
||||||
RiCloseLine,
|
RiCloseLine,
|
||||||
RiExpandUpDownLine,
|
RiExpandUpDownLine,
|
||||||
RiFilter3Line,
|
RiFilterLine,
|
||||||
} from "@remixicon/react";
|
} from "@remixicon/react";
|
||||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
import {
|
||||||
|
type ReadonlyURLSearchParams,
|
||||||
|
usePathname,
|
||||||
|
useRouter,
|
||||||
|
useSearchParams,
|
||||||
|
} from "next/navigation";
|
||||||
import {
|
import {
|
||||||
type ReactNode,
|
type ReactNode,
|
||||||
useCallback,
|
useCallback,
|
||||||
@@ -16,11 +21,14 @@ import {
|
|||||||
useTransition,
|
useTransition,
|
||||||
} from "react";
|
} from "react";
|
||||||
import {
|
import {
|
||||||
|
AMOUNT_MAX_PARAM,
|
||||||
|
AMOUNT_MIN_PARAM,
|
||||||
PAYMENT_METHODS,
|
PAYMENT_METHODS,
|
||||||
SETTLED_FILTER_VALUES,
|
SETTLED_FILTER_VALUES,
|
||||||
TRANSACTION_CONDITIONS,
|
TRANSACTION_CONDITIONS,
|
||||||
TRANSACTION_TYPES,
|
TRANSACTION_TYPES,
|
||||||
} from "@/features/transactions/lib/constants";
|
} from "@/features/transactions/lib/constants";
|
||||||
|
import { parsePositiveAmount } from "@/features/transactions/lib/page-helpers";
|
||||||
import { Button } from "@/shared/components/ui/button";
|
import { Button } from "@/shared/components/ui/button";
|
||||||
import { Checkbox } from "@/shared/components/ui/checkbox";
|
import { Checkbox } from "@/shared/components/ui/checkbox";
|
||||||
import {
|
import {
|
||||||
@@ -70,6 +78,36 @@ import type {
|
|||||||
|
|
||||||
const FILTER_EMPTY_VALUE = "__all";
|
const FILTER_EMPTY_VALUE = "__all";
|
||||||
|
|
||||||
|
const normalizeAmountParam = (raw: string): string | null => {
|
||||||
|
const parsed = parsePositiveAmount(raw.trim());
|
||||||
|
return parsed === null ? null : parsed.toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
function useDebouncedAmountFilter(
|
||||||
|
param: string,
|
||||||
|
searchParams: URLSearchParams | ReadonlyURLSearchParams,
|
||||||
|
onChange: (key: string, value: string | null) => void,
|
||||||
|
): [string, (value: string) => void] {
|
||||||
|
const current = searchParams.get(param) ?? "";
|
||||||
|
const [value, setValue] = useState(current);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setValue(current);
|
||||||
|
}, [current]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (value === current) return;
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
const normalized = normalizeAmountParam(value);
|
||||||
|
if ((normalized ?? "") === current) return;
|
||||||
|
onChange(param, normalized);
|
||||||
|
}, 400);
|
||||||
|
return () => clearTimeout(timeout);
|
||||||
|
}, [value, current, param, onChange]);
|
||||||
|
|
||||||
|
return [value, setValue];
|
||||||
|
}
|
||||||
|
|
||||||
interface FilterSelectProps {
|
interface FilterSelectProps {
|
||||||
param: string;
|
param: string;
|
||||||
placeholder: string;
|
placeholder: string;
|
||||||
@@ -348,6 +386,7 @@ export function TransactionsFilters({
|
|||||||
? `${pathname}?${nextParams.toString()}`
|
? `${pathname}?${nextParams.toString()}`
|
||||||
: pathname;
|
: pathname;
|
||||||
router.replace(target, { scroll: false });
|
router.replace(target, { scroll: false });
|
||||||
|
router.refresh();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[searchParams, pathname, router],
|
[searchParams, pathname, router],
|
||||||
@@ -373,6 +412,17 @@ export function TransactionsFilters({
|
|||||||
return () => clearTimeout(timeout);
|
return () => clearTimeout(timeout);
|
||||||
}, [searchValue, currentSearchParam, handleFilterChange]);
|
}, [searchValue, currentSearchParam, handleFilterChange]);
|
||||||
|
|
||||||
|
const [valorMinValue, setValorMinValue] = useDebouncedAmountFilter(
|
||||||
|
AMOUNT_MIN_PARAM,
|
||||||
|
searchParams,
|
||||||
|
handleFilterChange,
|
||||||
|
);
|
||||||
|
const [valorMaxValue, setValorMaxValue] = useDebouncedAmountFilter(
|
||||||
|
AMOUNT_MAX_PARAM,
|
||||||
|
searchParams,
|
||||||
|
handleFilterChange,
|
||||||
|
);
|
||||||
|
|
||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
const periodValue = searchParams.get("periodo");
|
const periodValue = searchParams.get("periodo");
|
||||||
const pageSizeValue = searchParams.get("pageSize");
|
const pageSizeValue = searchParams.get("pageSize");
|
||||||
@@ -384,6 +434,8 @@ export function TransactionsFilters({
|
|||||||
nextParams.set("pageSize", pageSizeValue);
|
nextParams.set("pageSize", pageSizeValue);
|
||||||
}
|
}
|
||||||
setSearchValue("");
|
setSearchValue("");
|
||||||
|
setValorMinValue("");
|
||||||
|
setValorMaxValue("");
|
||||||
startTransition(() => {
|
startTransition(() => {
|
||||||
const target = nextParams.toString()
|
const target = nextParams.toString()
|
||||||
? `${pathname}?${nextParams.toString()}`
|
? `${pathname}?${nextParams.toString()}`
|
||||||
@@ -467,7 +519,9 @@ export function TransactionsFilters({
|
|||||||
searchParams.getAll("accountCard").length > 0 ||
|
searchParams.getAll("accountCard").length > 0 ||
|
||||||
searchParams.get("settled") ||
|
searchParams.get("settled") ||
|
||||||
searchParams.get("hasAttachment") ||
|
searchParams.get("hasAttachment") ||
|
||||||
searchParams.get("isDivided");
|
searchParams.get("isDivided") ||
|
||||||
|
searchParams.get(AMOUNT_MIN_PARAM) ||
|
||||||
|
searchParams.get(AMOUNT_MAX_PARAM);
|
||||||
|
|
||||||
const handleResetFilters = () => {
|
const handleResetFilters = () => {
|
||||||
handleReset();
|
handleReset();
|
||||||
@@ -523,13 +577,27 @@ export function TransactionsFilters({
|
|||||||
className="flex-1 md:flex-none text-sm border-dashed relative bg-transparent"
|
className="flex-1 md:flex-none text-sm border-dashed relative bg-transparent"
|
||||||
aria-label="Abrir filtros"
|
aria-label="Abrir filtros"
|
||||||
>
|
>
|
||||||
<RiFilter3Line className="size-4" />
|
<RiFilterLine className="size-4" />
|
||||||
Filtros
|
Filtros
|
||||||
{hasActiveFilters && (
|
{hasActiveFilters && (
|
||||||
<span className="absolute -top-1 -right-1 size-3 rounded-full bg-primary" />
|
<span className="absolute -top-1 -right-1 size-3 rounded-full bg-primary" />
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</DrawerTrigger>
|
</DrawerTrigger>
|
||||||
|
{hasActiveFilters && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleReset}
|
||||||
|
disabled={isPending}
|
||||||
|
aria-label="Limpar filtros"
|
||||||
|
className="text-xs text-muted-foreground hover:text-foreground h-9 px-2"
|
||||||
|
>
|
||||||
|
<RiCloseLine className="size-3.5" />
|
||||||
|
Limpar
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
<DrawerContent>
|
<DrawerContent>
|
||||||
<DrawerHeader>
|
<DrawerHeader>
|
||||||
<DrawerTitle>Filtros</DrawerTitle>
|
<DrawerTitle>Filtros</DrawerTitle>
|
||||||
@@ -636,6 +704,37 @@ export function TransactionsFilters({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Faixa de valor</label>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
inputMode="decimal"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
placeholder="Mínimo"
|
||||||
|
aria-label="Valor mínimo"
|
||||||
|
value={valorMinValue}
|
||||||
|
onChange={(event) => setValorMinValue(event.target.value)}
|
||||||
|
disabled={isPending}
|
||||||
|
className="text-sm border-dashed"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-muted-foreground">até</span>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
inputMode="decimal"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
placeholder="Máximo"
|
||||||
|
aria-label="Valor máximo"
|
||||||
|
value={valorMaxValue}
|
||||||
|
onChange={(event) => setValorMaxValue(event.target.value)}
|
||||||
|
disabled={isPending}
|
||||||
|
className="text-sm border-dashed"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<p className="text-sm font-medium">Status</p>
|
<p className="text-sm font-medium">Status</p>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
|
|||||||
@@ -30,3 +30,6 @@ export const SETTLED_FILTER_VALUES = {
|
|||||||
PAID: "pago",
|
PAID: "pago",
|
||||||
UNPAID: "nao-pago",
|
UNPAID: "nao-pago",
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
|
export const AMOUNT_MIN_PARAM = "valorMin";
|
||||||
|
export const AMOUNT_MAX_PARAM = "valorMax";
|
||||||
|
|||||||
@@ -9,6 +9,8 @@ type TransactionExportFilters = {
|
|||||||
settledFilter: string | null;
|
settledFilter: string | null;
|
||||||
attachmentFilter: string | null;
|
attachmentFilter: string | null;
|
||||||
dividedFilter: string | null;
|
dividedFilter: string | null;
|
||||||
|
amountMinFilter: number | null;
|
||||||
|
amountMaxFilter: number | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type TransactionsExportContext = {
|
export type TransactionsExportContext = {
|
||||||
|
|||||||
@@ -1,5 +1,15 @@
|
|||||||
import type { SQL } from "drizzle-orm";
|
import type { SQL } from "drizzle-orm";
|
||||||
import { and, eq, ilike, inArray, isNotNull, or, sql } from "drizzle-orm";
|
import {
|
||||||
|
and,
|
||||||
|
eq,
|
||||||
|
gte,
|
||||||
|
ilike,
|
||||||
|
inArray,
|
||||||
|
isNotNull,
|
||||||
|
lte,
|
||||||
|
or,
|
||||||
|
sql,
|
||||||
|
} from "drizzle-orm";
|
||||||
import {
|
import {
|
||||||
cards,
|
cards,
|
||||||
type categories,
|
type categories,
|
||||||
@@ -10,6 +20,8 @@ import {
|
|||||||
} from "@/db/schema";
|
} from "@/db/schema";
|
||||||
import type { SelectOption } from "@/features/transactions/components/types";
|
import type { SelectOption } from "@/features/transactions/components/types";
|
||||||
import {
|
import {
|
||||||
|
AMOUNT_MAX_PARAM,
|
||||||
|
AMOUNT_MIN_PARAM,
|
||||||
PAYMENT_METHODS,
|
PAYMENT_METHODS,
|
||||||
SETTLED_FILTER_VALUES,
|
SETTLED_FILTER_VALUES,
|
||||||
TRANSACTION_CONDITIONS,
|
TRANSACTION_CONDITIONS,
|
||||||
@@ -46,6 +58,8 @@ export type TransactionSearchFilters = {
|
|||||||
settledFilter: string | null;
|
settledFilter: string | null;
|
||||||
attachmentFilter: string | null;
|
attachmentFilter: string | null;
|
||||||
dividedFilter: string | null;
|
dividedFilter: string | null;
|
||||||
|
amountMinFilter: number | null;
|
||||||
|
amountMaxFilter: number | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
type BaseSluggedOption = {
|
type BaseSluggedOption = {
|
||||||
@@ -135,6 +149,13 @@ export const getMultiParam = (
|
|||||||
return list.filter((item): item is string => Boolean(item));
|
return list.filter((item): item is string => Boolean(item));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const parsePositiveAmount = (value: string | null): number | null => {
|
||||||
|
if (!value) return null;
|
||||||
|
const normalized = Number.parseFloat(value.replace(",", "."));
|
||||||
|
if (!Number.isFinite(normalized) || normalized < 0) return null;
|
||||||
|
return Math.round(normalized * 100) / 100;
|
||||||
|
};
|
||||||
|
|
||||||
export const extractTransactionSearchFilters = (
|
export const extractTransactionSearchFilters = (
|
||||||
params: ResolvedSearchParams,
|
params: ResolvedSearchParams,
|
||||||
): TransactionSearchFilters => ({
|
): TransactionSearchFilters => ({
|
||||||
@@ -148,6 +169,12 @@ export const extractTransactionSearchFilters = (
|
|||||||
settledFilter: getSingleParam(params, "settled"),
|
settledFilter: getSingleParam(params, "settled"),
|
||||||
attachmentFilter: getSingleParam(params, "hasAttachment"),
|
attachmentFilter: getSingleParam(params, "hasAttachment"),
|
||||||
dividedFilter: getSingleParam(params, "isDivided"),
|
dividedFilter: getSingleParam(params, "isDivided"),
|
||||||
|
amountMinFilter: parsePositiveAmount(
|
||||||
|
getSingleParam(params, AMOUNT_MIN_PARAM),
|
||||||
|
),
|
||||||
|
amountMaxFilter: parsePositiveAmount(
|
||||||
|
getSingleParam(params, AMOUNT_MAX_PARAM),
|
||||||
|
),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const resolveTransactionPagination = (
|
export const resolveTransactionPagination = (
|
||||||
@@ -442,6 +469,18 @@ export const buildTransactionWhere = ({
|
|||||||
where.push(eq(transactions.isDivided, true));
|
where.push(eq(transactions.isDivided, true));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (filters.amountMinFilter !== null) {
|
||||||
|
where.push(
|
||||||
|
gte(sql`abs(${transactions.amount})`, filters.amountMinFilter.toFixed(2)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (filters.amountMaxFilter !== null) {
|
||||||
|
where.push(
|
||||||
|
lte(sql`abs(${transactions.amount})`, filters.amountMaxFilter.toFixed(2)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const searchPattern = buildSearchPattern(filters.searchFilter);
|
const searchPattern = buildSearchPattern(filters.searchFilter);
|
||||||
if (searchPattern) {
|
if (searchPattern) {
|
||||||
where.push(
|
where.push(
|
||||||
|
|||||||
@@ -11,6 +11,20 @@ type CalculatorDisplayProps = {
|
|||||||
isResultView: boolean;
|
isResultView: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getExpressionSizeClass = (length: number, compact: boolean) => {
|
||||||
|
if (compact) {
|
||||||
|
if (length <= 14) return "text-2xl";
|
||||||
|
if (length <= 20) return "text-xl";
|
||||||
|
if (length <= 28) return "text-base";
|
||||||
|
return "text-sm";
|
||||||
|
}
|
||||||
|
if (length <= 12) return "text-3xl";
|
||||||
|
if (length <= 18) return "text-2xl";
|
||||||
|
if (length <= 24) return "text-xl";
|
||||||
|
if (length <= 32) return "text-base";
|
||||||
|
return "text-sm";
|
||||||
|
};
|
||||||
|
|
||||||
export function CalculatorDisplay({
|
export function CalculatorDisplay({
|
||||||
history,
|
history,
|
||||||
expression,
|
expression,
|
||||||
@@ -19,8 +33,10 @@ export function CalculatorDisplay({
|
|||||||
onCopy,
|
onCopy,
|
||||||
isResultView,
|
isResultView,
|
||||||
}: CalculatorDisplayProps) {
|
}: CalculatorDisplayProps) {
|
||||||
|
const sizeClass = getExpressionSizeClass(expression.length, isResultView);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-24 flex-col rounded-xl border bg-muted px-4 py-4 text-right">
|
<div className="flex h-24 min-w-0 flex-col rounded-xl border bg-muted px-4 py-4 text-right">
|
||||||
<div className="min-h-5 truncate text-sm text-muted-foreground">
|
<div className="min-h-5 truncate text-sm text-muted-foreground">
|
||||||
{history ?? (
|
{history ?? (
|
||||||
<span
|
<span
|
||||||
@@ -31,11 +47,11 @@ export function CalculatorDisplay({
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-auto flex items-end justify-end gap-2">
|
<div className="mt-auto flex min-w-0 items-end justify-end gap-2">
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"truncate text-right font-semibold transition-all",
|
"min-w-0 flex-1 truncate text-right font-semibold transition-all",
|
||||||
isResultView ? "text-2xl" : "text-3xl",
|
sizeClass,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{expression}
|
{expression}
|
||||||
|
|||||||
@@ -11,8 +11,9 @@ import {
|
|||||||
sql,
|
sql,
|
||||||
sum,
|
sum,
|
||||||
} from "drizzle-orm";
|
} from "drizzle-orm";
|
||||||
import { cards, transactions } from "@/db/schema";
|
import { cards, financialAccounts, transactions } from "@/db/schema";
|
||||||
import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/shared/lib/accounts/constants";
|
import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/shared/lib/accounts/constants";
|
||||||
|
import { excludeTransactionsFromExcludedAccounts } from "@/shared/lib/accounts/query-filters";
|
||||||
import { db } from "@/shared/lib/db";
|
import { db } from "@/shared/lib/db";
|
||||||
import { toDateOnlyString } from "@/shared/utils/date";
|
import { toDateOnlyString } from "@/shared/utils/date";
|
||||||
import { safeToNumber as toNumber } from "@/shared/utils/number";
|
import { safeToNumber as toNumber } from "@/shared/utils/number";
|
||||||
@@ -96,12 +97,17 @@ export async function fetchPayerMonthlyBreakdown({
|
|||||||
totalAmount: sum(transactions.amount).as("total"),
|
totalAmount: sum(transactions.amount).as("total"),
|
||||||
})
|
})
|
||||||
.from(transactions)
|
.from(transactions)
|
||||||
|
.leftJoin(
|
||||||
|
financialAccounts,
|
||||||
|
eq(transactions.accountId, financialAccounts.id),
|
||||||
|
)
|
||||||
.where(
|
.where(
|
||||||
and(
|
and(
|
||||||
eq(transactions.userId, userId),
|
eq(transactions.userId, userId),
|
||||||
eq(transactions.payerId, payerId),
|
eq(transactions.payerId, payerId),
|
||||||
eq(transactions.period, period),
|
eq(transactions.period, period),
|
||||||
excludeAutoInvoiceEntries(),
|
excludeAutoInvoiceEntries(),
|
||||||
|
excludeTransactionsFromExcludedAccounts(),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.groupBy(transactions.paymentMethod, transactions.transactionType);
|
.groupBy(transactions.paymentMethod, transactions.transactionType);
|
||||||
@@ -155,6 +161,10 @@ export async function fetchPayerHistory({
|
|||||||
totalAmount: sum(transactions.amount).as("total"),
|
totalAmount: sum(transactions.amount).as("total"),
|
||||||
})
|
})
|
||||||
.from(transactions)
|
.from(transactions)
|
||||||
|
.leftJoin(
|
||||||
|
financialAccounts,
|
||||||
|
eq(transactions.accountId, financialAccounts.id),
|
||||||
|
)
|
||||||
.where(
|
.where(
|
||||||
and(
|
and(
|
||||||
eq(transactions.userId, userId),
|
eq(transactions.userId, userId),
|
||||||
@@ -162,6 +172,7 @@ export async function fetchPayerHistory({
|
|||||||
gte(transactions.period, start),
|
gte(transactions.period, start),
|
||||||
lte(transactions.period, end),
|
lte(transactions.period, end),
|
||||||
excludeAutoInvoiceEntries(),
|
excludeAutoInvoiceEntries(),
|
||||||
|
excludeTransactionsFromExcludedAccounts(),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.groupBy(transactions.period, transactions.transactionType);
|
.groupBy(transactions.period, transactions.transactionType);
|
||||||
@@ -210,6 +221,10 @@ export async function fetchPayerCardUsage({
|
|||||||
})
|
})
|
||||||
.from(transactions)
|
.from(transactions)
|
||||||
.innerJoin(cards, eq(transactions.cardId, cards.id))
|
.innerJoin(cards, eq(transactions.cardId, cards.id))
|
||||||
|
.leftJoin(
|
||||||
|
financialAccounts,
|
||||||
|
eq(transactions.accountId, financialAccounts.id),
|
||||||
|
)
|
||||||
.where(
|
.where(
|
||||||
and(
|
and(
|
||||||
eq(transactions.userId, userId),
|
eq(transactions.userId, userId),
|
||||||
@@ -217,6 +232,7 @@ export async function fetchPayerCardUsage({
|
|||||||
eq(transactions.period, period),
|
eq(transactions.period, period),
|
||||||
eq(transactions.paymentMethod, PAYMENT_METHOD_CARD),
|
eq(transactions.paymentMethod, PAYMENT_METHOD_CARD),
|
||||||
excludeAutoInvoiceEntries(),
|
excludeAutoInvoiceEntries(),
|
||||||
|
excludeTransactionsFromExcludedAccounts(),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.groupBy(transactions.cardId, cards.name, cards.logo);
|
.groupBy(transactions.cardId, cards.name, cards.logo);
|
||||||
@@ -251,6 +267,10 @@ export async function fetchPayerBoletoStats({
|
|||||||
totalCount: sql<number>`count(${transactions.id})`.as("count"),
|
totalCount: sql<number>`count(${transactions.id})`.as("count"),
|
||||||
})
|
})
|
||||||
.from(transactions)
|
.from(transactions)
|
||||||
|
.leftJoin(
|
||||||
|
financialAccounts,
|
||||||
|
eq(transactions.accountId, financialAccounts.id),
|
||||||
|
)
|
||||||
.where(
|
.where(
|
||||||
and(
|
and(
|
||||||
eq(transactions.userId, userId),
|
eq(transactions.userId, userId),
|
||||||
@@ -258,6 +278,7 @@ export async function fetchPayerBoletoStats({
|
|||||||
eq(transactions.period, period),
|
eq(transactions.period, period),
|
||||||
eq(transactions.paymentMethod, PAYMENT_METHOD_BOLETO),
|
eq(transactions.paymentMethod, PAYMENT_METHOD_BOLETO),
|
||||||
excludeAutoInvoiceEntries(),
|
excludeAutoInvoiceEntries(),
|
||||||
|
excludeTransactionsFromExcludedAccounts(),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.groupBy(transactions.isSettled);
|
.groupBy(transactions.isSettled);
|
||||||
@@ -303,6 +324,10 @@ export async function fetchPayerBoletoItems({
|
|||||||
isSettled: transactions.isSettled,
|
isSettled: transactions.isSettled,
|
||||||
})
|
})
|
||||||
.from(transactions)
|
.from(transactions)
|
||||||
|
.leftJoin(
|
||||||
|
financialAccounts,
|
||||||
|
eq(transactions.accountId, financialAccounts.id),
|
||||||
|
)
|
||||||
.where(
|
.where(
|
||||||
and(
|
and(
|
||||||
eq(transactions.userId, userId),
|
eq(transactions.userId, userId),
|
||||||
@@ -310,6 +335,7 @@ export async function fetchPayerBoletoItems({
|
|||||||
eq(transactions.period, period),
|
eq(transactions.period, period),
|
||||||
eq(transactions.paymentMethod, PAYMENT_METHOD_BOLETO),
|
eq(transactions.paymentMethod, PAYMENT_METHOD_BOLETO),
|
||||||
excludeAutoInvoiceEntries(),
|
excludeAutoInvoiceEntries(),
|
||||||
|
excludeTransactionsFromExcludedAccounts(),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.orderBy(asc(transactions.dueDate));
|
.orderBy(asc(transactions.dueDate));
|
||||||
@@ -343,6 +369,10 @@ export async function fetchPayerPaymentStatus({
|
|||||||
pendingCount: sql<number>`sum(case when (${transactions.isSettled} = false or ${transactions.isSettled} is null) then 1 else 0 end)`,
|
pendingCount: sql<number>`sum(case when (${transactions.isSettled} = false or ${transactions.isSettled} is null) then 1 else 0 end)`,
|
||||||
})
|
})
|
||||||
.from(transactions)
|
.from(transactions)
|
||||||
|
.leftJoin(
|
||||||
|
financialAccounts,
|
||||||
|
eq(transactions.accountId, financialAccounts.id),
|
||||||
|
)
|
||||||
.where(
|
.where(
|
||||||
and(
|
and(
|
||||||
eq(transactions.userId, userId),
|
eq(transactions.userId, userId),
|
||||||
@@ -350,6 +380,7 @@ export async function fetchPayerPaymentStatus({
|
|||||||
eq(transactions.period, period),
|
eq(transactions.period, period),
|
||||||
eq(transactions.transactionType, DESPESA),
|
eq(transactions.transactionType, DESPESA),
|
||||||
excludeAutoInvoiceEntries(),
|
excludeAutoInvoiceEntries(),
|
||||||
|
excludeTransactionsFromExcludedAccounts(),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user