mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-09 19:01:47 +00:00
fix(lançamentos): reforçar validações e revisar formulário
This commit is contained in:
@@ -16,6 +16,7 @@ import {
|
||||
} from "@/shared/lib/payers/notifications";
|
||||
import type { ActionResult } from "@/shared/lib/types/actions";
|
||||
import { addMonthsToDate, parseLocalDateString } from "@/shared/utils/date";
|
||||
import { addMonthsToPeriod, parsePeriod } from "@/shared/utils/period";
|
||||
import {
|
||||
centsToDecimalString,
|
||||
type DeleteBulkInput,
|
||||
@@ -26,6 +27,8 @@ import {
|
||||
fetchOwnedCardIds,
|
||||
fetchOwnedCategoryIds,
|
||||
fetchOwnedPayerIds,
|
||||
formatPaidInvoicePeriods,
|
||||
getPaidInvoicePeriods,
|
||||
type MassAddInput,
|
||||
massAddSchema,
|
||||
resolvePeriod,
|
||||
@@ -37,6 +40,12 @@ import {
|
||||
validateAllOwnership,
|
||||
} from "./core";
|
||||
|
||||
const getPeriodOffset = (basePeriod: string, targetPeriod: string) => {
|
||||
const base = parsePeriod(basePeriod);
|
||||
const target = parsePeriod(targetPeriod);
|
||||
return (target.year - base.year) * 12 + (target.month - base.month);
|
||||
};
|
||||
|
||||
export async function deleteTransactionBulkAction(
|
||||
input: DeleteBulkInput,
|
||||
): Promise<ActionResult> {
|
||||
@@ -164,8 +173,10 @@ export async function updateTransactionBulkAction(
|
||||
period: true,
|
||||
condition: true,
|
||||
transactionType: true,
|
||||
paymentMethod: true,
|
||||
purchaseDate: true,
|
||||
payerId: true,
|
||||
cardId: true,
|
||||
},
|
||||
where: and(
|
||||
eq(transactions.id, data.id),
|
||||
@@ -204,6 +215,8 @@ export async function updateTransactionBulkAction(
|
||||
|
||||
const hasDueDateUpdate = data.dueDate !== undefined;
|
||||
const hasBoletoPaymentDateUpdate = data.boletoPaymentDate !== undefined;
|
||||
const hasPurchaseDateUpdate = data.purchaseDate !== undefined;
|
||||
const hasPeriodUpdate = data.period !== undefined;
|
||||
|
||||
const baseDueDate =
|
||||
hasDueDateUpdate && data.dueDate
|
||||
@@ -218,8 +231,13 @@ export async function updateTransactionBulkAction(
|
||||
: hasBoletoPaymentDateUpdate
|
||||
? null
|
||||
: undefined;
|
||||
|
||||
const basePurchaseDate = existing.purchaseDate ?? null;
|
||||
const referencePurchaseDate = existing.purchaseDate ?? null;
|
||||
const basePurchaseDate =
|
||||
hasPurchaseDateUpdate && data.purchaseDate
|
||||
? parseLocalDateString(data.purchaseDate)
|
||||
: undefined;
|
||||
const basePeriod = hasPeriodUpdate ? data.period : undefined;
|
||||
const targetCardId = data.cardId ?? existing.cardId ?? null;
|
||||
|
||||
const buildDueDateForRecord = (recordPurchaseDate: Date | null) => {
|
||||
if (!hasDueDateUpdate) {
|
||||
@@ -230,18 +248,48 @@ export async function updateTransactionBulkAction(
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!basePurchaseDate || !recordPurchaseDate) {
|
||||
if (!referencePurchaseDate || !recordPurchaseDate) {
|
||||
return baseDueDate;
|
||||
}
|
||||
|
||||
const monthDiff =
|
||||
(recordPurchaseDate.getFullYear() - basePurchaseDate.getFullYear()) *
|
||||
(recordPurchaseDate.getFullYear() -
|
||||
referencePurchaseDate.getFullYear()) *
|
||||
12 +
|
||||
(recordPurchaseDate.getMonth() - basePurchaseDate.getMonth());
|
||||
(recordPurchaseDate.getMonth() - referencePurchaseDate.getMonth());
|
||||
|
||||
return addMonthsToDate(baseDueDate, monthDiff);
|
||||
};
|
||||
|
||||
const buildPurchaseDateForRecord = (record: {
|
||||
purchaseDate: Date | null;
|
||||
period: string;
|
||||
}) => {
|
||||
if (!basePurchaseDate) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (existing.condition === "Recorrente" && existing.period) {
|
||||
const offset = getPeriodOffset(existing.period, record.period);
|
||||
return addMonthsToDate(basePurchaseDate, offset);
|
||||
}
|
||||
|
||||
return basePurchaseDate;
|
||||
};
|
||||
|
||||
const buildPeriodForRecord = (record: { period: string }) => {
|
||||
if (!basePeriod) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (existing.period) {
|
||||
const offset = getPeriodOffset(existing.period, record.period);
|
||||
return addMonthsToPeriod(basePeriod, offset);
|
||||
}
|
||||
|
||||
return basePeriod;
|
||||
};
|
||||
|
||||
const serializeDateKey = (value: Date | null | undefined) => {
|
||||
if (value === undefined) {
|
||||
return "undefined";
|
||||
@@ -252,8 +300,51 @@ export async function updateTransactionBulkAction(
|
||||
return String(value.getTime());
|
||||
};
|
||||
|
||||
const ensureTargetInvoicesAreOpen = async (
|
||||
records: Array<{ period: string }>,
|
||||
) => {
|
||||
if (
|
||||
existing.paymentMethod !== "Cartão de crédito" ||
|
||||
!targetCardId ||
|
||||
(!hasPurchaseDateUpdate &&
|
||||
!hasPeriodUpdate &&
|
||||
data.cardId === undefined)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const movedPeriods = new Set<string>();
|
||||
|
||||
for (const record of records) {
|
||||
const targetPeriodForRecord =
|
||||
buildPeriodForRecord(record) ?? record.period;
|
||||
const cardChanged = targetCardId !== existing.cardId;
|
||||
const periodChanged = targetPeriodForRecord !== record.period;
|
||||
|
||||
if (cardChanged || periodChanged) {
|
||||
movedPeriods.add(targetPeriodForRecord);
|
||||
}
|
||||
}
|
||||
|
||||
if (movedPeriods.size === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const paidPeriods = await getPaidInvoicePeriods(user.id, targetCardId, [
|
||||
...movedPeriods,
|
||||
]);
|
||||
|
||||
if (paidPeriods.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return `As faturas dos meses ${formatPaidInvoicePeriods(
|
||||
paidPeriods,
|
||||
)} já estão pagas. Desfaça o pagamento antes de mover este lançamento.`;
|
||||
};
|
||||
|
||||
const applyUpdates = async (
|
||||
records: Array<{ id: string; purchaseDate: Date | null }>,
|
||||
records: Array<{ id: string; purchaseDate: Date | null; period: string }>,
|
||||
) => {
|
||||
if (records.length === 0) {
|
||||
return;
|
||||
@@ -269,10 +360,20 @@ export async function updateTransactionBulkAction(
|
||||
|
||||
for (const record of records) {
|
||||
const dueDateForRecord = buildDueDateForRecord(record.purchaseDate);
|
||||
const purchaseDateForRecord = buildPurchaseDateForRecord(record);
|
||||
const periodForRecord = buildPeriodForRecord(record);
|
||||
const perRecordPayload: Record<string, unknown> = {
|
||||
...baseUpdatePayload,
|
||||
};
|
||||
|
||||
if (purchaseDateForRecord !== undefined) {
|
||||
perRecordPayload.purchaseDate = purchaseDateForRecord;
|
||||
}
|
||||
|
||||
if (periodForRecord !== undefined) {
|
||||
perRecordPayload.period = periodForRecord;
|
||||
}
|
||||
|
||||
if (dueDateForRecord !== undefined) {
|
||||
perRecordPayload.dueDate = dueDateForRecord;
|
||||
}
|
||||
@@ -282,6 +383,8 @@ export async function updateTransactionBulkAction(
|
||||
}
|
||||
|
||||
const groupKey = [
|
||||
serializeDateKey(purchaseDateForRecord),
|
||||
periodForRecord ?? "undefined",
|
||||
serializeDateKey(dueDateForRecord),
|
||||
serializeDateKey(
|
||||
hasBoletoPaymentDateUpdate
|
||||
@@ -318,12 +421,19 @@ export async function updateTransactionBulkAction(
|
||||
};
|
||||
|
||||
if (data.scope === "current") {
|
||||
await applyUpdates([
|
||||
const currentRecords = [
|
||||
{
|
||||
id: data.id,
|
||||
purchaseDate: existing.purchaseDate ?? null,
|
||||
period: existing.period,
|
||||
},
|
||||
]);
|
||||
];
|
||||
const invoiceError = await ensureTargetInvoicesAreOpen(currentRecords);
|
||||
if (invoiceError) {
|
||||
return { success: false, error: invoiceError };
|
||||
}
|
||||
|
||||
await applyUpdates(currentRecords);
|
||||
|
||||
revalidate(user.id);
|
||||
return { success: true, message: "Lançamento atualizado com sucesso." };
|
||||
@@ -338,7 +448,7 @@ export async function updateTransactionBulkAction(
|
||||
}
|
||||
|
||||
const periodLancamentos = await db.query.transactions.findMany({
|
||||
columns: { id: true, purchaseDate: true },
|
||||
columns: { id: true, purchaseDate: true, period: true },
|
||||
where: and(
|
||||
eq(transactions.seriesId, existing.seriesId),
|
||||
eq(transactions.userId, user.id),
|
||||
@@ -347,10 +457,16 @@ export async function updateTransactionBulkAction(
|
||||
orderBy: asc(transactions.purchaseDate),
|
||||
});
|
||||
|
||||
const invoiceError = await ensureTargetInvoicesAreOpen(periodLancamentos);
|
||||
if (invoiceError) {
|
||||
return { success: false, error: invoiceError };
|
||||
}
|
||||
|
||||
await applyUpdates(
|
||||
periodLancamentos.map((item: (typeof periodLancamentos)[number]) => ({
|
||||
id: item.id,
|
||||
purchaseDate: item.purchaseDate ?? null,
|
||||
period: item.period,
|
||||
})),
|
||||
);
|
||||
|
||||
@@ -370,6 +486,7 @@ export async function updateTransactionBulkAction(
|
||||
columns: {
|
||||
id: true,
|
||||
purchaseDate: true,
|
||||
period: true,
|
||||
},
|
||||
where: and(
|
||||
eq(transactions.seriesId, existing.seriesId),
|
||||
@@ -380,10 +497,16 @@ export async function updateTransactionBulkAction(
|
||||
orderBy: asc(transactions.purchaseDate),
|
||||
});
|
||||
|
||||
const invoiceError = await ensureTargetInvoicesAreOpen(futureLancamentos);
|
||||
if (invoiceError) {
|
||||
return { success: false, error: invoiceError };
|
||||
}
|
||||
|
||||
await applyUpdates(
|
||||
futureLancamentos.map((item: (typeof futureLancamentos)[number]) => ({
|
||||
id: item.id,
|
||||
purchaseDate: item.purchaseDate ?? null,
|
||||
period: item.period,
|
||||
})),
|
||||
);
|
||||
|
||||
@@ -399,6 +522,7 @@ export async function updateTransactionBulkAction(
|
||||
columns: {
|
||||
id: true,
|
||||
purchaseDate: true,
|
||||
period: true,
|
||||
},
|
||||
where: and(
|
||||
eq(transactions.seriesId, existing.seriesId),
|
||||
@@ -408,10 +532,16 @@ export async function updateTransactionBulkAction(
|
||||
orderBy: asc(transactions.purchaseDate),
|
||||
});
|
||||
|
||||
const invoiceError = await ensureTargetInvoicesAreOpen(allLancamentos);
|
||||
if (invoiceError) {
|
||||
return { success: false, error: invoiceError };
|
||||
}
|
||||
|
||||
await applyUpdates(
|
||||
allLancamentos.map((item: (typeof allLancamentos)[number]) => ({
|
||||
id: item.id,
|
||||
purchaseDate: item.purchaseDate ?? null,
|
||||
period: item.period,
|
||||
})),
|
||||
);
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
cards,
|
||||
categories,
|
||||
financialAccounts,
|
||||
invoices,
|
||||
payers,
|
||||
type transactions,
|
||||
} from "@/db/schema";
|
||||
@@ -20,9 +21,10 @@ import {
|
||||
} from "@/shared/lib/accounts/constants";
|
||||
import { revalidateForEntity } from "@/shared/lib/actions/helpers";
|
||||
import { db } from "@/shared/lib/db";
|
||||
import { INVOICE_PAYMENT_STATUS } from "@/shared/lib/invoices";
|
||||
import { noteSchema, uuidSchema } from "@/shared/lib/schemas/common";
|
||||
import { addMonthsToDate, parseLocalDateString } from "@/shared/utils/date";
|
||||
import { addMonthsToPeriod } from "@/shared/utils/period";
|
||||
import { addMonthsToPeriod, MONTH_NAMES } from "@/shared/utils/period";
|
||||
|
||||
// ============================================================================
|
||||
// Authorization Validation Functions
|
||||
@@ -662,6 +664,43 @@ export const buildLancamentoRecords = ({
|
||||
return records;
|
||||
};
|
||||
|
||||
export const formatPaidInvoicePeriods = (periods: string[]) =>
|
||||
periods
|
||||
.map((period) => {
|
||||
const [year, month] = period.split("-");
|
||||
const monthName = MONTH_NAMES[Number(month) - 1] ?? month;
|
||||
return `${monthName}/${year}`;
|
||||
})
|
||||
.join(", ");
|
||||
|
||||
export async function getPaidInvoicePeriods(
|
||||
userId: string,
|
||||
cardId: string,
|
||||
periods: string[],
|
||||
) {
|
||||
if (periods.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const rows = await db.query.invoices.findMany({
|
||||
columns: { period: true },
|
||||
where: and(
|
||||
eq(invoices.userId, userId),
|
||||
eq(invoices.cardId, cardId),
|
||||
eq(invoices.paymentStatus, INVOICE_PAYMENT_STATUS.PAID),
|
||||
inArray(invoices.period, periods),
|
||||
),
|
||||
});
|
||||
|
||||
return [
|
||||
...new Set(
|
||||
rows
|
||||
.map((row) => row.period)
|
||||
.filter((period): period is string => Boolean(period)),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
export const deleteBulkSchema = z.object({
|
||||
id: uuidSchema("Lançamento"),
|
||||
scope: z.enum(["current", "period", "future", "all"], {
|
||||
@@ -676,6 +715,20 @@ export const updateBulkSchema = z.object({
|
||||
scope: z.enum(["current", "period", "future", "all"], {
|
||||
message: "Escopo de ação inválido.",
|
||||
}),
|
||||
purchaseDate: z
|
||||
.string()
|
||||
.trim()
|
||||
.refine((value) => !value || isValidDateInput(value), {
|
||||
message: "Data da transação inválida.",
|
||||
})
|
||||
.optional(),
|
||||
period: z
|
||||
.string()
|
||||
.trim()
|
||||
.regex(/^(\d{4})-(\d{2})$/, {
|
||||
message: "Selecione um período válido.",
|
||||
})
|
||||
.optional(),
|
||||
name: z
|
||||
.string({ message: "Informe o estabelecimento." })
|
||||
.trim()
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
"use server";
|
||||
|
||||
import { randomUUID } from "node:crypto";
|
||||
import { and, eq, inArray } from "drizzle-orm";
|
||||
import { and, eq } from "drizzle-orm";
|
||||
import {
|
||||
attachments,
|
||||
financialAccounts,
|
||||
invoices,
|
||||
transactionAttachments,
|
||||
transactions,
|
||||
} from "@/db/schema";
|
||||
import { handleActionError } from "@/shared/lib/actions/helpers";
|
||||
import { getUser } from "@/shared/lib/auth/server";
|
||||
import { db } from "@/shared/lib/db";
|
||||
import { INVOICE_PAYMENT_STATUS } from "@/shared/lib/invoices";
|
||||
import {
|
||||
buildEntriesByPayer,
|
||||
sendPayerAutoEmails,
|
||||
@@ -23,7 +21,6 @@ import {
|
||||
getBusinessTodayDate,
|
||||
parseLocalDateString,
|
||||
} from "@/shared/utils/date";
|
||||
import { MONTH_NAMES } from "@/shared/utils/period";
|
||||
import { cleanupAttachmentsAfterTransactionDelete } from "./attachments";
|
||||
import {
|
||||
buildLancamentoRecords,
|
||||
@@ -33,6 +30,8 @@ import {
|
||||
createSchema,
|
||||
type DeleteInput,
|
||||
deleteSchema,
|
||||
formatPaidInvoicePeriods,
|
||||
getPaidInvoicePeriods,
|
||||
isInitialBalanceLancamento,
|
||||
resolvePeriod,
|
||||
resolveUserLabel,
|
||||
@@ -118,27 +117,18 @@ export async function createTransactionAction(
|
||||
),
|
||||
];
|
||||
|
||||
const paidInvoices = await db.query.invoices.findMany({
|
||||
columns: { period: true },
|
||||
where: and(
|
||||
eq(invoices.userId, user.id),
|
||||
eq(invoices.cardId, data.cardId),
|
||||
eq(invoices.paymentStatus, INVOICE_PAYMENT_STATUS.PAID),
|
||||
inArray(invoices.period, uniquePeriods),
|
||||
),
|
||||
});
|
||||
const paidPeriods = await getPaidInvoicePeriods(
|
||||
user.id,
|
||||
data.cardId,
|
||||
uniquePeriods,
|
||||
);
|
||||
|
||||
if (paidInvoices.length > 0) {
|
||||
const labels = paidInvoices
|
||||
.map((inv) => {
|
||||
const [year, month] = (inv.period ?? "").split("-");
|
||||
const monthName = MONTH_NAMES[Number(month) - 1] ?? month;
|
||||
return `${monthName}/${year}`;
|
||||
})
|
||||
.join(", ");
|
||||
if (paidPeriods.length > 0) {
|
||||
return {
|
||||
success: false,
|
||||
error: `As faturas dos meses ${labels} já estão pagas. Desfaça o pagamento antes de adicionar este lançamento.`,
|
||||
error: `As faturas dos meses ${formatPaidInvoicePeriods(
|
||||
paidPeriods,
|
||||
)} já estão pagas. Desfaça o pagamento antes de adicionar este lançamento.`,
|
||||
} as ActionResult<{ ids: string[] }>;
|
||||
}
|
||||
}
|
||||
@@ -204,10 +194,12 @@ export async function updateTransactionAction(
|
||||
columns: {
|
||||
id: true,
|
||||
note: true,
|
||||
period: true,
|
||||
transactionType: true,
|
||||
condition: true,
|
||||
paymentMethod: true,
|
||||
accountId: true,
|
||||
cardId: true,
|
||||
categoryId: true,
|
||||
},
|
||||
where: and(
|
||||
@@ -225,10 +217,12 @@ export async function updateTransactionAction(
|
||||
| {
|
||||
id: string;
|
||||
note: string | null;
|
||||
period: string;
|
||||
transactionType: string;
|
||||
condition: string;
|
||||
paymentMethod: string;
|
||||
accountId: string | null;
|
||||
cardId: string | null;
|
||||
categoryId: string | null;
|
||||
category: { name: string } | null;
|
||||
}
|
||||
@@ -264,6 +258,25 @@ export async function updateTransactionAction(
|
||||
? parseLocalDateString(data.boletoPaymentDate)
|
||||
: getBusinessTodayDate()
|
||||
: null;
|
||||
const targetCardId = data.cardId ?? existing.cardId;
|
||||
const movedInvoice =
|
||||
data.paymentMethod === "Cartão de crédito" &&
|
||||
targetCardId &&
|
||||
(targetCardId !== existing.cardId || period !== existing.period);
|
||||
|
||||
if (movedInvoice) {
|
||||
const paidPeriods = await getPaidInvoicePeriods(user.id, targetCardId, [
|
||||
period,
|
||||
]);
|
||||
if (paidPeriods.length > 0) {
|
||||
return {
|
||||
success: false,
|
||||
error: `As faturas dos meses ${formatPaidInvoicePeriods(
|
||||
paidPeriods,
|
||||
)} já estão pagas. Desfaça o pagamento antes de mover este lançamento.`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
await db
|
||||
.update(transactions)
|
||||
|
||||
@@ -10,14 +10,16 @@ import {
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
|
||||
interface AttachmentFilePickerProps {
|
||||
file: File | null;
|
||||
onChange: (file: File | null) => void;
|
||||
files: File[];
|
||||
onAdd: (file: File) => void;
|
||||
onRemove: (file: File) => void;
|
||||
maxSizeMb?: number;
|
||||
}
|
||||
|
||||
export function AttachmentFilePicker({
|
||||
file,
|
||||
onChange,
|
||||
files,
|
||||
onAdd,
|
||||
onRemove,
|
||||
maxSizeMb = DEFAULT_MAX_FILE_SIZE_MB,
|
||||
}: AttachmentFilePickerProps) {
|
||||
const maxFileSizeBytes = maxSizeMb * 1024 * 1024;
|
||||
@@ -45,12 +47,12 @@ export function AttachmentFilePicker({
|
||||
return;
|
||||
}
|
||||
|
||||
onChange(selected);
|
||||
onAdd(selected);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-xs">Anexo</p>
|
||||
<p className="text-xs font-medium">Anexos</p>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
@@ -59,37 +61,44 @@ export function AttachmentFilePicker({
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
|
||||
{file ? (
|
||||
<div className="flex min-w-0 items-center gap-2 overflow-hidden rounded-md border px-3 py-2 text-sm">
|
||||
<RiAttachment2 className="size-4 shrink-0 text-muted-foreground" />
|
||||
<span className="min-w-0 flex-1 truncate" title={file.name}>
|
||||
{file.name}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-6 shrink-0"
|
||||
onClick={() => onChange(null)}
|
||||
>
|
||||
<RiCloseLine className="size-4" />
|
||||
</Button>
|
||||
{files.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
{files.map((file) => (
|
||||
<div
|
||||
key={`${file.name}-${file.size}-${file.lastModified}`}
|
||||
className="flex min-w-0 items-center gap-2 overflow-hidden rounded-md border px-3 py-2 text-sm"
|
||||
>
|
||||
<RiAttachment2 className="size-4 shrink-0 text-muted-foreground" />
|
||||
<span className="min-w-0 flex-1 truncate" title={file.name}>
|
||||
{file.name}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-6 shrink-0"
|
||||
onClick={() => onRemove(file)}
|
||||
>
|
||||
<RiCloseLine className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed py-4 text-sm text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground"
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<RiAttachment2 className="size-4" />
|
||||
Adicionar anexo
|
||||
</span>
|
||||
<span className="text-xs">
|
||||
PDF, JPEG, PNG ou WebP · máx. {maxSizeMb} MB
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed py-4 text-sm text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground"
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<RiAttachment2 className="size-4" />
|
||||
Adicionar anexo
|
||||
</span>
|
||||
<span className="text-xs">
|
||||
PDF, JPEG, PNG ou WebP · máx. {maxSizeMb} MB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -67,7 +67,7 @@ export function CategorySection({
|
||||
>
|
||||
<Label htmlFor="categoria">Categoria</Label>
|
||||
<Select
|
||||
value={formState.categoryId}
|
||||
value={formState.categoryId ?? ""}
|
||||
onValueChange={(value) => onFieldChange("categoryId", value)}
|
||||
>
|
||||
<SelectTrigger id="categoria" className="w-full">
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
||||
import { RiSliceFill } from "@remixicon/react";
|
||||
import { CurrencyInput } from "@/shared/components/ui/currency-input";
|
||||
import { Label } from "@/shared/components/ui/label";
|
||||
import {
|
||||
@@ -9,6 +11,7 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/components/ui/select";
|
||||
import { cn } from "@/shared/utils/ui";
|
||||
import { PayerSelectContent } from "../../select-items";
|
||||
import type { PayerSectionProps } from "./transaction-dialog-types";
|
||||
|
||||
@@ -34,75 +37,59 @@ export function PayerSection({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-2 md:flex-row">
|
||||
<div className="w-full space-y-1">
|
||||
<Label htmlFor="payer">Pagador</Label>
|
||||
<div className="flex gap-2">
|
||||
<Select
|
||||
value={formState.payerId}
|
||||
onValueChange={(value) => onFieldChange("payerId", value)}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="payer"
|
||||
className={formState.isSplit ? "min-w-0 flex-1" : "w-full"}
|
||||
>
|
||||
<SelectValue placeholder="Selecione">
|
||||
{formState.payerId &&
|
||||
(() => {
|
||||
const selectedOption = payerOptions.find(
|
||||
(opt) => opt.value === formState.payerId,
|
||||
);
|
||||
return selectedOption ? (
|
||||
<PayerSelectContent
|
||||
label={selectedOption.label}
|
||||
avatarUrl={selectedOption.avatarUrl}
|
||||
/>
|
||||
) : null;
|
||||
})()}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{payerOptions.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
<PayerSelectContent
|
||||
label={option.label}
|
||||
avatarUrl={option.avatarUrl}
|
||||
/>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{formState.isSplit && (
|
||||
<CurrencyInput
|
||||
value={formState.primarySplitAmount}
|
||||
onValueChange={handlePrimaryAmountChange}
|
||||
placeholder="R$ 0,00"
|
||||
className="h-9 w-[45%] text-sm"
|
||||
/>
|
||||
)}
|
||||
<div className="space-y-3">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-between rounded-lg border px-3 py-2.5 transition-colors",
|
||||
formState.isSplit
|
||||
? "border-primary/20 bg-primary/5"
|
||||
: "border-border bg-transparent",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<p className="text-sm text-foreground">Dividir lançamento</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Atribuir parte do valor a outro pagador.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<CheckboxPrimitive.Root
|
||||
checked={formState.isSplit}
|
||||
onCheckedChange={(checked) =>
|
||||
onFieldChange("isSplit", Boolean(checked))
|
||||
}
|
||||
aria-label="Dividir lançamento"
|
||||
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
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "border-input dark:bg-input/30",
|
||||
)}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator className="grid place-content-center text-current transition-none">
|
||||
<RiSliceFill className="size-3" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
</div>
|
||||
|
||||
{formState.isSplit ? (
|
||||
<div className="w-full space-y-1 mb-1">
|
||||
<Label htmlFor="secondaryPayer">Dividir com</Label>
|
||||
<div className="flex w-full flex-col gap-2 md:flex-row">
|
||||
<div className="w-full space-y-1">
|
||||
<Label htmlFor="payer">Pagador</Label>
|
||||
<div className="flex gap-2">
|
||||
<Select
|
||||
value={formState.secondaryPayerId}
|
||||
onValueChange={(value) =>
|
||||
onFieldChange("secondaryPayerId", value)
|
||||
}
|
||||
value={formState.payerId ?? ""}
|
||||
onValueChange={(value) => onFieldChange("payerId", value)}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="secondaryPayer"
|
||||
disabled={secondaryPayerOptions.length === 0}
|
||||
className="w-[55%]"
|
||||
id="payer"
|
||||
className={formState.isSplit ? "min-w-0 flex-1" : "w-full"}
|
||||
>
|
||||
<SelectValue placeholder="Selecione">
|
||||
{formState.secondaryPayerId &&
|
||||
{formState.payerId &&
|
||||
(() => {
|
||||
const selectedOption = secondaryPayerOptions.find(
|
||||
(opt) => opt.value === formState.secondaryPayerId,
|
||||
const selectedOption = payerOptions.find(
|
||||
(opt) => opt.value === formState.payerId,
|
||||
);
|
||||
return selectedOption ? (
|
||||
<PayerSelectContent
|
||||
@@ -114,7 +101,7 @@ export function PayerSection({
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{secondaryPayerOptions.map((option) => (
|
||||
{payerOptions.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
<PayerSelectContent
|
||||
label={option.label}
|
||||
@@ -124,15 +111,68 @@ export function PayerSection({
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<CurrencyInput
|
||||
value={formState.secondarySplitAmount}
|
||||
onValueChange={handleSecondaryAmountChange}
|
||||
placeholder="R$ 0,00"
|
||||
className="h-9 w-[45%] text-sm"
|
||||
/>
|
||||
{formState.isSplit && (
|
||||
<CurrencyInput
|
||||
value={formState.primarySplitAmount}
|
||||
onValueChange={handlePrimaryAmountChange}
|
||||
placeholder="R$ 0,00"
|
||||
className="h-9 w-[45%] text-sm"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{formState.isSplit ? (
|
||||
<div className="w-full space-y-1 mb-1">
|
||||
<Label htmlFor="secondaryPayer">Dividir com</Label>
|
||||
<div className="flex gap-2">
|
||||
<Select
|
||||
value={formState.secondaryPayerId ?? ""}
|
||||
onValueChange={(value) =>
|
||||
onFieldChange("secondaryPayerId", value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="secondaryPayer"
|
||||
disabled={secondaryPayerOptions.length === 0}
|
||||
className="w-[55%]"
|
||||
>
|
||||
<SelectValue placeholder="Selecione">
|
||||
{formState.secondaryPayerId &&
|
||||
(() => {
|
||||
const selectedOption = secondaryPayerOptions.find(
|
||||
(opt) => opt.value === formState.secondaryPayerId,
|
||||
);
|
||||
return selectedOption ? (
|
||||
<PayerSelectContent
|
||||
label={selectedOption.label}
|
||||
avatarUrl={selectedOption.avatarUrl}
|
||||
/>
|
||||
) : null;
|
||||
})()}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{secondaryPayerOptions.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
<PayerSelectContent
|
||||
label={option.label}
|
||||
avatarUrl={option.avatarUrl}
|
||||
/>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<CurrencyInput
|
||||
value={formState.secondarySplitAmount}
|
||||
onValueChange={handleSecondaryAmountChange}
|
||||
placeholder="R$ 0,00"
|
||||
className="h-9 w-[45%] text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
RiCheckboxBlankCircleLine,
|
||||
RiCheckboxCircleFill,
|
||||
} from "@remixicon/react";
|
||||
import { useState } from "react";
|
||||
import { PAYMENT_METHODS } from "@/features/transactions/constants";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Label } from "@/shared/components/ui/label";
|
||||
import { MonthPicker } from "@/shared/components/ui/month-picker";
|
||||
import {
|
||||
@@ -71,6 +76,7 @@ export function PaymentMethodSection({
|
||||
isUpdateMode,
|
||||
disablePaymentMethod,
|
||||
disableCardSelect,
|
||||
showSettledToggle,
|
||||
}: PaymentMethodSectionProps) {
|
||||
const isCartaoSelected = formState.paymentMethod === "Cartão de crédito";
|
||||
const showContaSelect = [
|
||||
@@ -92,154 +98,200 @@ export function PaymentMethodSection({
|
||||
const hasSecondaryColumn = isCartaoSelected || showContaSelect;
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-2 md:flex-row">
|
||||
{!isUpdateMode ? (
|
||||
<div
|
||||
className={cn(
|
||||
"w-full space-y-1",
|
||||
hasSecondaryColumn ? "md:w-1/2" : "md:w-full",
|
||||
)}
|
||||
>
|
||||
<Label htmlFor="paymentMethod">Forma de pagamento</Label>
|
||||
<Select
|
||||
value={formState.paymentMethod}
|
||||
onValueChange={(value) => onFieldChange("paymentMethod", value)}
|
||||
disabled={disablePaymentMethod}
|
||||
<div className="space-y-3">
|
||||
<div className="flex w-full flex-col gap-2 md:flex-row">
|
||||
{!isUpdateMode ? (
|
||||
<div
|
||||
className={cn(
|
||||
"w-full space-y-1",
|
||||
hasSecondaryColumn ? "md:w-1/2" : "md:w-full",
|
||||
)}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="paymentMethod"
|
||||
className="w-full"
|
||||
<Label htmlFor="paymentMethod">Forma de pagamento</Label>
|
||||
<Select
|
||||
value={formState.paymentMethod}
|
||||
onValueChange={(value) => onFieldChange("paymentMethod", value)}
|
||||
disabled={disablePaymentMethod}
|
||||
>
|
||||
<SelectValue placeholder="Selecione" className="w-full">
|
||||
{formState.paymentMethod && (
|
||||
<PaymentMethodSelectContent label={formState.paymentMethod} />
|
||||
)}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PAYMENT_METHODS.map((method) => (
|
||||
<SelectItem key={method} value={method}>
|
||||
<PaymentMethodSelectContent label={method} />
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
) : null}
|
||||
<SelectTrigger
|
||||
id="paymentMethod"
|
||||
className="w-full"
|
||||
disabled={disablePaymentMethod}
|
||||
>
|
||||
<SelectValue placeholder="Selecione" className="w-full">
|
||||
{formState.paymentMethod && (
|
||||
<PaymentMethodSelectContent
|
||||
label={formState.paymentMethod}
|
||||
/>
|
||||
)}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PAYMENT_METHODS.map((method) => (
|
||||
<SelectItem key={method} value={method}>
|
||||
<PaymentMethodSelectContent label={method} />
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isCartaoSelected ? (
|
||||
<div
|
||||
className={cn(
|
||||
"w-full space-y-1",
|
||||
!isUpdateMode ? "md:w-1/2" : "md:w-full",
|
||||
)}
|
||||
>
|
||||
<Label htmlFor="cartao">Cartão</Label>
|
||||
<Select
|
||||
value={formState.cardId}
|
||||
onValueChange={(value) => onFieldChange("cardId", value)}
|
||||
disabled={disableCardSelect}
|
||||
{isCartaoSelected ? (
|
||||
<div
|
||||
className={cn(
|
||||
"w-full space-y-1",
|
||||
!isUpdateMode ? "md:w-1/2" : "md:w-full",
|
||||
)}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="cartao"
|
||||
className="w-full"
|
||||
<Label htmlFor="cartao">Cartão</Label>
|
||||
<Select
|
||||
value={formState.cardId ?? ""}
|
||||
onValueChange={(value) => onFieldChange("cardId", value)}
|
||||
disabled={disableCardSelect}
|
||||
>
|
||||
<SelectValue placeholder="Selecione">
|
||||
{formState.cardId &&
|
||||
(() => {
|
||||
const selectedOption = cardOptions.find(
|
||||
(opt) => opt.value === formState.cardId,
|
||||
);
|
||||
return selectedOption ? (
|
||||
<SelectTrigger
|
||||
id="cartao"
|
||||
className="w-full"
|
||||
disabled={disableCardSelect}
|
||||
>
|
||||
<SelectValue placeholder="Selecione">
|
||||
{formState.cardId &&
|
||||
(() => {
|
||||
const selectedOption = cardOptions.find(
|
||||
(opt) => opt.value === formState.cardId,
|
||||
);
|
||||
return selectedOption ? (
|
||||
<AccountCardSelectContent
|
||||
label={selectedOption.label}
|
||||
logo={selectedOption.logo}
|
||||
isCartao={true}
|
||||
/>
|
||||
) : null;
|
||||
})()}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{cardOptions.length === 0 ? (
|
||||
<div className="px-2 py-6 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhum cartão cadastrado
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
cardOptions.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
<AccountCardSelectContent
|
||||
label={selectedOption.label}
|
||||
logo={selectedOption.logo}
|
||||
label={option.label}
|
||||
logo={option.logo}
|
||||
isCartao={true}
|
||||
/>
|
||||
) : null;
|
||||
})()}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{cardOptions.length === 0 ? (
|
||||
<div className="px-2 py-6 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhum cartão cadastrado
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
cardOptions.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
<AccountCardSelectContent
|
||||
label={option.label}
|
||||
logo={option.logo}
|
||||
isCartao={true}
|
||||
/>
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{formState.cardId ? (
|
||||
<InlinePeriodPicker
|
||||
period={formState.period}
|
||||
onPeriodChange={(value) => onFieldChange("period", value)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{formState.cardId ? (
|
||||
<InlinePeriodPicker
|
||||
period={formState.period}
|
||||
onPeriodChange={(value) => onFieldChange("period", value)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!isCartaoSelected && showContaSelect ? (
|
||||
<div
|
||||
className={cn(
|
||||
"w-full space-y-1",
|
||||
!isUpdateMode ? "md:w-1/2" : "md:w-full",
|
||||
)}
|
||||
>
|
||||
<Label htmlFor="conta">Conta</Label>
|
||||
<Select
|
||||
value={formState.accountId}
|
||||
onValueChange={(value) => onFieldChange("accountId", value)}
|
||||
{!isCartaoSelected && showContaSelect ? (
|
||||
<div
|
||||
className={cn(
|
||||
"w-full space-y-1",
|
||||
!isUpdateMode ? "md:w-1/2" : "md:w-full",
|
||||
)}
|
||||
>
|
||||
<SelectTrigger id="conta" className="w-full">
|
||||
<SelectValue placeholder="Selecione">
|
||||
{formState.accountId &&
|
||||
(() => {
|
||||
const selectedOption = filteredContaOptions.find(
|
||||
(opt) => opt.value === formState.accountId,
|
||||
);
|
||||
return selectedOption ? (
|
||||
<Label htmlFor="conta">Conta</Label>
|
||||
<Select
|
||||
value={formState.accountId ?? ""}
|
||||
onValueChange={(value) => onFieldChange("accountId", value)}
|
||||
>
|
||||
<SelectTrigger id="conta" className="w-full">
|
||||
<SelectValue placeholder="Selecione">
|
||||
{formState.accountId &&
|
||||
(() => {
|
||||
const selectedOption = filteredContaOptions.find(
|
||||
(opt) => opt.value === formState.accountId,
|
||||
);
|
||||
return selectedOption ? (
|
||||
<AccountCardSelectContent
|
||||
label={selectedOption.label}
|
||||
logo={selectedOption.logo}
|
||||
isCartao={false}
|
||||
/>
|
||||
) : null;
|
||||
})()}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{filteredContaOptions.length === 0 ? (
|
||||
<div className="px-2 py-6 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhuma conta cadastrada
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredContaOptions.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
<AccountCardSelectContent
|
||||
label={selectedOption.label}
|
||||
logo={selectedOption.logo}
|
||||
label={option.label}
|
||||
logo={option.logo}
|
||||
isCartao={false}
|
||||
/>
|
||||
) : null;
|
||||
})()}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{filteredContaOptions.length === 0 ? (
|
||||
<div className="px-2 py-6 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhuma conta cadastrada
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredContaOptions.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
<AccountCardSelectContent
|
||||
label={option.label}
|
||||
logo={option.logo}
|
||||
isCartao={false}
|
||||
/>
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{showSettledToggle ? (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-between rounded-lg border px-3 py-2.5 transition-colors",
|
||||
formState.isSettled
|
||||
? "border-success/20 bg-success/5"
|
||||
: "border-border bg-transparent",
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm text-foreground text-left">
|
||||
Marcar como pago
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground text-left">
|
||||
Indica que o valor já foi pago.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => onFieldChange("isSettled", !formState.isSettled)}
|
||||
aria-label={
|
||||
formState.isSettled ? "Desfazer pagamento" : "Marcar como pago"
|
||||
}
|
||||
aria-pressed={Boolean(formState.isSettled)}
|
||||
className={cn(
|
||||
"transition-colors",
|
||||
formState.isSettled
|
||||
? "bg-success/10 text-success hover:bg-success/20 hover:text-success"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{formState.isSettled ? (
|
||||
<RiCheckboxCircleFill className="size-4" />
|
||||
) : (
|
||||
<RiCheckboxBlankCircleLine className="size-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Checkbox } from "@/shared/components/ui/checkbox";
|
||||
import { cn } from "@/shared/utils/ui";
|
||||
import type { SplitAndSettlementSectionProps } from "./transaction-dialog-types";
|
||||
|
||||
export function SplitAndSettlementSection({
|
||||
formState,
|
||||
onFieldChange,
|
||||
showSettledToggle,
|
||||
}: SplitAndSettlementSectionProps) {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-2 md:flex-row">
|
||||
<div
|
||||
className={cn(
|
||||
"space-y-1",
|
||||
showSettledToggle ? "md:w-1/2 md:pr-2" : "md:w-full",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-foreground">Dividir lançamento</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Atribuir parte do valor a outro pagador.
|
||||
</p>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={formState.isSplit}
|
||||
onCheckedChange={(checked) =>
|
||||
onFieldChange("isSplit", Boolean(checked))
|
||||
}
|
||||
aria-label="Dividir lançamento"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showSettledToggle ? (
|
||||
<div className="space-y-1 md:w-1/2 md:pr-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-foreground">Marcar como pago</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Indica que o valor já foi pago.
|
||||
</p>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={Boolean(formState.isSettled)}
|
||||
onCheckedChange={(checked) =>
|
||||
onFieldChange("isSettled", Boolean(checked))
|
||||
}
|
||||
aria-label="Marcar como concluído"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -34,6 +34,8 @@ export interface TransactionDialogProps {
|
||||
maxSizeMb?: number;
|
||||
onBulkEditRequest?: (data: {
|
||||
id: string;
|
||||
purchaseDate: string;
|
||||
period: string;
|
||||
name: string;
|
||||
categoryId: string | undefined;
|
||||
note: string;
|
||||
@@ -71,10 +73,6 @@ export interface CategorySectionProps extends BaseFieldSectionProps {
|
||||
hideTransactionType?: boolean;
|
||||
}
|
||||
|
||||
export interface SplitAndSettlementSectionProps extends BaseFieldSectionProps {
|
||||
showSettledToggle: boolean;
|
||||
}
|
||||
|
||||
export interface PayerSectionProps extends BaseFieldSectionProps {
|
||||
payerOptions: SelectOption[];
|
||||
secondaryPayerOptions: SelectOption[];
|
||||
@@ -87,6 +85,7 @@ export interface PaymentMethodSectionProps extends BaseFieldSectionProps {
|
||||
isUpdateMode: boolean;
|
||||
disablePaymentMethod: boolean;
|
||||
disableCardSelect: boolean;
|
||||
showSettledToggle: boolean;
|
||||
}
|
||||
|
||||
export interface BoletoFieldsSectionProps extends BaseFieldSectionProps {
|
||||
|
||||
@@ -46,7 +46,6 @@ import { ConditionSection } from "./condition-section";
|
||||
import { NoteSection } from "./note-section";
|
||||
import { PayerSection } from "./payer-section";
|
||||
import { PaymentMethodSection } from "./payment-method-section";
|
||||
import { SplitAndSettlementSection } from "./split-settlement-section";
|
||||
import type {
|
||||
FormState,
|
||||
TransactionDialogProps,
|
||||
@@ -99,7 +98,7 @@ export function TransactionDialog({
|
||||
);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [pendingFile, setPendingFile] = useState<File | null>(null);
|
||||
const [pendingFiles, setPendingFiles] = useState<File[]>([]);
|
||||
const [pendingDetachIds, setPendingDetachIds] = useState<string[]>([]);
|
||||
const [pendingUploadFiles, setPendingUploadFiles] = useState<File[]>([]);
|
||||
|
||||
@@ -139,7 +138,7 @@ export function TransactionDialog({
|
||||
|
||||
setFormState(initial);
|
||||
setErrorMessage(null);
|
||||
setPendingFile(null);
|
||||
setPendingFiles([]);
|
||||
setPendingDetachIds([]);
|
||||
setPendingUploadFiles([]);
|
||||
}
|
||||
@@ -330,27 +329,29 @@ export function TransactionDialog({
|
||||
const result = await createTransactionAction(payload);
|
||||
|
||||
if (result.success) {
|
||||
if (pendingFile && result.data?.ids?.length) {
|
||||
if (pendingFiles.length > 0 && result.data?.ids?.length) {
|
||||
const firstId = result.data.ids[0];
|
||||
const isNewSeries =
|
||||
formState.condition === "Parcelado" ||
|
||||
formState.condition === "Recorrente";
|
||||
const presign = await getPresignedUploadUrlAction({
|
||||
fileName: pendingFile.name,
|
||||
mimeType: pendingFile.type,
|
||||
fileSize: pendingFile.size,
|
||||
transactionId: firstId,
|
||||
});
|
||||
if (presign.success) {
|
||||
await fetch(presign.presignedUrl, {
|
||||
method: "PUT",
|
||||
body: pendingFile,
|
||||
headers: { "Content-Type": pendingFile.type },
|
||||
});
|
||||
await confirmAttachmentUploadAction({
|
||||
uploadToken: presign.uploadToken,
|
||||
scope: isNewSeries ? "all" : "current",
|
||||
for (const file of pendingFiles) {
|
||||
const presign = await getPresignedUploadUrlAction({
|
||||
fileName: file.name,
|
||||
mimeType: file.type,
|
||||
fileSize: file.size,
|
||||
transactionId: firstId,
|
||||
});
|
||||
if (presign.success) {
|
||||
await fetch(presign.presignedUrl, {
|
||||
method: "PUT",
|
||||
body: file,
|
||||
headers: { "Content-Type": file.type },
|
||||
});
|
||||
await confirmAttachmentUploadAction({
|
||||
uploadToken: presign.uploadToken,
|
||||
scope: isNewSeries ? "all" : "current",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
toast.success(result.message);
|
||||
@@ -371,6 +372,8 @@ export function TransactionDialog({
|
||||
// o upload após o escopo ser escolhido (sem upload antecipado ao S3)
|
||||
onBulkEditRequest({
|
||||
id: transaction?.id ?? "",
|
||||
purchaseDate: formState.purchaseDate,
|
||||
period: formState.period,
|
||||
name: formState.name.trim(),
|
||||
categoryId: formState.categoryId,
|
||||
note: formState.note.trim() || "",
|
||||
@@ -493,30 +496,30 @@ export function TransactionDialog({
|
||||
onSubmit={handleSubmit}
|
||||
noValidate
|
||||
>
|
||||
<div className="min-w-0 space-y-3 -mx-6 max-h-[90vh] overflow-x-hidden overflow-y-auto px-6 pb-1">
|
||||
<BasicFieldsSection
|
||||
formState={formState}
|
||||
onFieldChange={handleFieldChange}
|
||||
estabelecimentos={estabelecimentos}
|
||||
/>
|
||||
<div className="min-w-0 -mx-6 max-h-[90vh] overflow-x-hidden overflow-y-auto px-6 pb-1">
|
||||
{/* Detalhes */}
|
||||
<div className="space-y-3">
|
||||
<BasicFieldsSection
|
||||
formState={formState}
|
||||
onFieldChange={handleFieldChange}
|
||||
estabelecimentos={estabelecimentos}
|
||||
/>
|
||||
|
||||
<CategorySection
|
||||
formState={formState}
|
||||
onFieldChange={handleFieldChange}
|
||||
categoryOptions={categoryOptions}
|
||||
categoryGroups={categoryGroups}
|
||||
isUpdateMode={isUpdateMode}
|
||||
hideTransactionType={
|
||||
Boolean(isNewWithType) && !forceShowTransactionType
|
||||
}
|
||||
/>
|
||||
<CategorySection
|
||||
formState={formState}
|
||||
onFieldChange={handleFieldChange}
|
||||
categoryOptions={categoryOptions}
|
||||
categoryGroups={categoryGroups}
|
||||
isUpdateMode={isUpdateMode}
|
||||
hideTransactionType={
|
||||
Boolean(isNewWithType) && !forceShowTransactionType
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SplitAndSettlementSection
|
||||
formState={formState}
|
||||
onFieldChange={handleFieldChange}
|
||||
showSettledToggle={showSettledToggle}
|
||||
/>
|
||||
<div className="border-t border-border/40 my-3" />
|
||||
|
||||
{/* Pagador */}
|
||||
<PayerSection
|
||||
formState={formState}
|
||||
onFieldChange={handleFieldChange}
|
||||
@@ -525,56 +528,66 @@ export function TransactionDialog({
|
||||
totalAmount={totalAmount}
|
||||
/>
|
||||
|
||||
<PaymentMethodSection
|
||||
formState={formState}
|
||||
onFieldChange={handleFieldChange}
|
||||
accountOptions={accountOptions}
|
||||
cardOptions={cardOptions}
|
||||
isUpdateMode={isUpdateMode}
|
||||
disablePaymentMethod={disablePaymentMethod}
|
||||
disableCardSelect={disableCardSelect}
|
||||
/>
|
||||
<div className="border-t border-border/40 my-3" />
|
||||
|
||||
{showDueDate ? (
|
||||
<BoletoFieldsSection
|
||||
{/* Pagamento */}
|
||||
<div className="space-y-3">
|
||||
<PaymentMethodSection
|
||||
formState={formState}
|
||||
onFieldChange={handleFieldChange}
|
||||
showPaymentDate={showPaymentDate}
|
||||
accountOptions={accountOptions}
|
||||
cardOptions={cardOptions}
|
||||
isUpdateMode={isUpdateMode}
|
||||
disablePaymentMethod={disablePaymentMethod}
|
||||
disableCardSelect={disableCardSelect}
|
||||
showSettledToggle={showSettledToggle}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{isUpdateMode ? (
|
||||
<>
|
||||
<NoteSection
|
||||
{showDueDate ? (
|
||||
<BoletoFieldsSection
|
||||
formState={formState}
|
||||
onFieldChange={handleFieldChange}
|
||||
showPaymentDate={showPaymentDate}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium leading-none">
|
||||
Anexos
|
||||
</Label>
|
||||
<AttachmentSection
|
||||
transactionId={transaction?.id ?? ""}
|
||||
maxSizeMb={maxSizeMb}
|
||||
pendingDetachIds={pendingDetachIds}
|
||||
onPendingDetach={(id) =>
|
||||
setPendingDetachIds((prev) => [...prev, id])
|
||||
}
|
||||
onUndoPendingDetach={(id) =>
|
||||
setPendingDetachIds((prev) =>
|
||||
prev.filter((x) => x !== id),
|
||||
)
|
||||
}
|
||||
pendingUploadFiles={pendingUploadFiles}
|
||||
onPendingUpload={(file) =>
|
||||
setPendingUploadFiles((prev) => [...prev, file])
|
||||
}
|
||||
onCancelPendingUpload={(file) =>
|
||||
setPendingUploadFiles((prev) =>
|
||||
prev.filter((f) => f !== file),
|
||||
)
|
||||
}
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Extras */}
|
||||
{isUpdateMode ? (
|
||||
<>
|
||||
<div className="border-t border-border/40 my-3" />
|
||||
<div className="space-y-3">
|
||||
<NoteSection
|
||||
formState={formState}
|
||||
onFieldChange={handleFieldChange}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium leading-none">
|
||||
Anexos
|
||||
</Label>
|
||||
<AttachmentSection
|
||||
transactionId={transaction?.id ?? ""}
|
||||
maxSizeMb={maxSizeMb}
|
||||
pendingDetachIds={pendingDetachIds}
|
||||
onPendingDetach={(id) =>
|
||||
setPendingDetachIds((prev) => [...prev, id])
|
||||
}
|
||||
onUndoPendingDetach={(id) =>
|
||||
setPendingDetachIds((prev) =>
|
||||
prev.filter((x) => x !== id),
|
||||
)
|
||||
}
|
||||
pendingUploadFiles={pendingUploadFiles}
|
||||
onPendingUpload={(file) =>
|
||||
setPendingUploadFiles((prev) => [...prev, file])
|
||||
}
|
||||
onCancelPendingUpload={(file) =>
|
||||
setPendingUploadFiles((prev) =>
|
||||
prev.filter((f) => f !== file),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
@@ -598,8 +611,11 @@ export function TransactionDialog({
|
||||
onFieldChange={handleFieldChange}
|
||||
/>
|
||||
<AttachmentFilePicker
|
||||
file={pendingFile}
|
||||
onChange={setPendingFile}
|
||||
files={pendingFiles}
|
||||
onAdd={(file) => setPendingFiles((prev) => [...prev, file])}
|
||||
onRemove={(file) =>
|
||||
setPendingFiles((prev) => prev.filter((f) => f !== file))
|
||||
}
|
||||
maxSizeMb={maxSizeMb}
|
||||
/>
|
||||
</CollapsibleContent>
|
||||
|
||||
@@ -127,6 +127,8 @@ export function TransactionsPage({
|
||||
const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
|
||||
const [pendingEditData, setPendingEditData] = useState<{
|
||||
id: string;
|
||||
purchaseDate: string;
|
||||
period: string;
|
||||
name: string;
|
||||
categoryId: string | undefined;
|
||||
note: string;
|
||||
@@ -245,6 +247,8 @@ export function TransactionsPage({
|
||||
|
||||
const handleBulkEditRequest = (data: {
|
||||
id: string;
|
||||
purchaseDate: string;
|
||||
period: string;
|
||||
name: string;
|
||||
categoryId: string | undefined;
|
||||
note: string;
|
||||
@@ -278,6 +282,8 @@ export function TransactionsPage({
|
||||
const result = await updateTransactionBulkAction({
|
||||
id: pendingEditData.id,
|
||||
scope,
|
||||
purchaseDate: pendingEditData.purchaseDate,
|
||||
period: pendingEditData.period,
|
||||
name: pendingEditData.name,
|
||||
categoryId: pendingEditData.categoryId,
|
||||
note: pendingEditData.note,
|
||||
|
||||
@@ -60,11 +60,6 @@ export function deriveCreditCardPeriod(
|
||||
return period;
|
||||
}
|
||||
|
||||
/**
|
||||
* Split type for dividing transactions between payers
|
||||
*/
|
||||
export type SplitType = "equal" | "60-40" | "70-30" | "80-20" | "custom";
|
||||
|
||||
/**
|
||||
* Form state type for lancamento dialog
|
||||
*/
|
||||
@@ -79,7 +74,6 @@ export type TransactionFormState = {
|
||||
payerId: string | undefined;
|
||||
secondaryPayerId: string | undefined;
|
||||
isSplit: boolean;
|
||||
splitType: SplitType;
|
||||
primarySplitAmount: string;
|
||||
secondarySplitAmount: string;
|
||||
accountId: string | undefined;
|
||||
@@ -117,7 +111,7 @@ export function buildTransactionInitialState(
|
||||
): TransactionFormState {
|
||||
const purchaseDate = transaction?.purchaseDate
|
||||
? transaction.purchaseDate.slice(0, 10)
|
||||
: (overrides?.defaultPurchaseDate ?? "");
|
||||
: (overrides?.defaultPurchaseDate ?? getTodayDateString());
|
||||
|
||||
const paymentMethod =
|
||||
transaction?.paymentMethod ??
|
||||
@@ -176,7 +170,7 @@ export function buildTransactionInitialState(
|
||||
payerId: fallbackPayerId ?? undefined,
|
||||
secondaryPayerId: undefined,
|
||||
isSplit: false,
|
||||
splitType: "equal",
|
||||
|
||||
primarySplitAmount: "",
|
||||
secondarySplitAmount: "",
|
||||
accountId:
|
||||
@@ -210,39 +204,6 @@ export function buildTransactionInitialState(
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Split presets with their percentages
|
||||
*/
|
||||
const SPLIT_PRESETS: Record<SplitType, { primary: number; secondary: number }> =
|
||||
{
|
||||
equal: { primary: 50, secondary: 50 },
|
||||
"60-40": { primary: 60, secondary: 40 },
|
||||
"70-30": { primary: 70, secondary: 30 },
|
||||
"80-20": { primary: 80, secondary: 20 },
|
||||
custom: { primary: 50, secondary: 50 },
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates split amounts based on total and split type
|
||||
*/
|
||||
export function calculateSplitAmounts(
|
||||
totalAmount: number,
|
||||
splitType: SplitType,
|
||||
): { primary: string; secondary: string } {
|
||||
if (totalAmount <= 0) {
|
||||
return { primary: "", secondary: "" };
|
||||
}
|
||||
|
||||
const preset = SPLIT_PRESETS[splitType];
|
||||
const primaryAmount = (totalAmount * preset.primary) / 100;
|
||||
const secondaryAmount = totalAmount - primaryAmount;
|
||||
|
||||
return {
|
||||
primary: primaryAmount.toFixed(2),
|
||||
secondary: secondaryAmount.toFixed(2),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Applies field dependencies when form state changes
|
||||
* This function encapsulates the business logic for field interdependencies
|
||||
@@ -348,7 +309,6 @@ export function applyFieldDependencies(
|
||||
// When split is disabled, clear secondary pagador and split fields
|
||||
if (key === "isSplit" && value === false) {
|
||||
updates.secondaryPayerId = undefined;
|
||||
updates.splitType = "equal";
|
||||
updates.primarySplitAmount = "";
|
||||
updates.secondarySplitAmount = "";
|
||||
}
|
||||
@@ -367,12 +327,9 @@ export function applyFieldDependencies(
|
||||
if (key === "amount" && typeof value === "string" && currentState.isSplit) {
|
||||
const totalAmount = Number.parseFloat(value) || 0;
|
||||
if (totalAmount > 0) {
|
||||
const splitAmounts = calculateSplitAmounts(
|
||||
totalAmount,
|
||||
currentState.splitType,
|
||||
);
|
||||
updates.primarySplitAmount = splitAmounts.primary;
|
||||
updates.secondarySplitAmount = splitAmounts.secondary;
|
||||
const half = (totalAmount / 2).toFixed(2);
|
||||
updates.primarySplitAmount = half;
|
||||
updates.secondarySplitAmount = half;
|
||||
} else {
|
||||
updates.primarySplitAmount = "";
|
||||
updates.secondarySplitAmount = "";
|
||||
|
||||
Reference in New Issue
Block a user