forked from git.gladyson/openmonetis
feat: adição de novos ícones SVG e configuração do ambiente
- Adicionados ícones SVG para ChatGPT, Claude, Gemini e OpenRouter - Implementados ícones para modos claro e escuro do ChatGPT - Criado script de inicialização para PostgreSQL com extensão pgcrypto - Adicionado script de configuração de ambiente que faz backup do .env - Configurado tsconfig.json para TypeScript com opções de compilação
This commit is contained in:
Felipe Coutinho
612
app/(dashboard)/pagadores/[pagadorId]/actions.ts
Normal file
612
app/(dashboard)/pagadores/[pagadorId]/actions.ts
Normal file
@@ -0,0 +1,612 @@
|
||||
"use server";
|
||||
|
||||
import { lancamentos, pagadores } from "@/db/schema";
|
||||
import { db } from "@/lib/db";
|
||||
import { getUser } from "@/lib/auth/server";
|
||||
import {
|
||||
fetchPagadorBoletoStats,
|
||||
fetchPagadorCardUsage,
|
||||
fetchPagadorHistory,
|
||||
fetchPagadorMonthlyBreakdown,
|
||||
} from "@/lib/pagadores/details";
|
||||
import { and, desc, eq } from "drizzle-orm";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { Resend } from "resend";
|
||||
import { z } from "zod";
|
||||
|
||||
const inputSchema = z.object({
|
||||
pagadorId: z.string().uuid("Pagador inválido."),
|
||||
period: z
|
||||
.string()
|
||||
.regex(/^\d{4}-\d{2}$/, "Período inválido. Informe no formato AAAA-MM."),
|
||||
});
|
||||
|
||||
type ActionResult =
|
||||
| { success: true; message: string }
|
||||
| { success: false; error: string };
|
||||
|
||||
const formatCurrency = (value: number) =>
|
||||
value.toLocaleString("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
|
||||
const formatPeriodLabel = (period: string) => {
|
||||
const [yearStr, monthStr] = period.split("-");
|
||||
const year = Number.parseInt(yearStr, 10);
|
||||
const month = Number.parseInt(monthStr, 10) - 1;
|
||||
const date = new Date(year, month, 1);
|
||||
return date.toLocaleDateString("pt-BR", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const formatDate = (value: Date | null | undefined) => {
|
||||
if (!value) return "—";
|
||||
return value.toLocaleDateString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
// Escapa HTML para prevenir XSS
|
||||
const escapeHtml = (text: string | null | undefined): string => {
|
||||
if (!text) return "";
|
||||
return text
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
};
|
||||
|
||||
type LancamentoRow = {
|
||||
id: string;
|
||||
name: string | null;
|
||||
paymentMethod: string | null;
|
||||
condition: string | null;
|
||||
amount: number;
|
||||
transactionType: string | null;
|
||||
purchaseDate: Date | null;
|
||||
};
|
||||
|
||||
type BoletoItem = {
|
||||
name: string;
|
||||
amount: number;
|
||||
dueDate: Date | null;
|
||||
};
|
||||
|
||||
type ParceladoItem = {
|
||||
name: string;
|
||||
totalAmount: number;
|
||||
installmentCount: number;
|
||||
currentInstallment: number;
|
||||
installmentAmount: number;
|
||||
purchaseDate: Date | null;
|
||||
};
|
||||
|
||||
type SummaryPayload = {
|
||||
pagadorName: string;
|
||||
periodLabel: string;
|
||||
monthlyBreakdown: Awaited<ReturnType<typeof fetchPagadorMonthlyBreakdown>>;
|
||||
historyData: Awaited<ReturnType<typeof fetchPagadorHistory>>;
|
||||
cardUsage: Awaited<ReturnType<typeof fetchPagadorCardUsage>>;
|
||||
boletoStats: Awaited<ReturnType<typeof fetchPagadorBoletoStats>>;
|
||||
boletos: BoletoItem[];
|
||||
lancamentos: LancamentoRow[];
|
||||
parcelados: ParceladoItem[];
|
||||
};
|
||||
|
||||
const buildSectionHeading = (label: string) =>
|
||||
`<h3 style="font-size:16px;margin:24px 0 8px 0;color:#0f172a;">${label}</h3>`;
|
||||
|
||||
const buildSummaryHtml = ({
|
||||
pagadorName,
|
||||
periodLabel,
|
||||
monthlyBreakdown,
|
||||
historyData,
|
||||
cardUsage,
|
||||
boletoStats,
|
||||
boletos,
|
||||
lancamentos,
|
||||
parcelados,
|
||||
}: SummaryPayload) => {
|
||||
// Calcular máximo de despesas para barras de progresso
|
||||
const maxDespesas = Math.max(...historyData.map((p) => p.despesas), 1);
|
||||
|
||||
const historyRows =
|
||||
historyData.length > 0
|
||||
? historyData
|
||||
.map((point) => {
|
||||
const percentage = (point.despesas / maxDespesas) * 100;
|
||||
const barColor =
|
||||
point.despesas > maxDespesas * 0.8
|
||||
? "#ef4444"
|
||||
: point.despesas > maxDespesas * 0.5
|
||||
? "#f59e0b"
|
||||
: "#10b981";
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;font-weight:500;">${escapeHtml(
|
||||
point.label
|
||||
)}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<div style="flex:1;background:#f1f5f9;border-radius:6px;height:24px;overflow:hidden;">
|
||||
<div style="background:${barColor};height:100%;width:${percentage}%;transition:width 0.3s;"></div>
|
||||
</div>
|
||||
<span style="font-weight:600;min-width:100px;text-align:right;">${formatCurrency(
|
||||
point.despesas
|
||||
)}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>`;
|
||||
})
|
||||
.join("")
|
||||
: `<tr><td colspan="2" style="padding:16px;text-align:center;color:#94a3b8;">Sem histórico suficiente.</td></tr>`;
|
||||
|
||||
const cardUsageRows =
|
||||
cardUsage.length > 0
|
||||
? cardUsage
|
||||
.map(
|
||||
(item) => `
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;font-weight:500;">${escapeHtml(
|
||||
item.name
|
||||
)}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:right;font-weight:600;">${formatCurrency(
|
||||
item.amount
|
||||
)}</td>
|
||||
</tr>`
|
||||
)
|
||||
.join("")
|
||||
: `<tr><td colspan="2" style="padding:16px;text-align:center;color:#94a3b8;">Sem gastos com cartão neste período.</td></tr>`;
|
||||
|
||||
const boletoRows =
|
||||
boletos.length > 0
|
||||
? boletos
|
||||
.map(
|
||||
(item) => `
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;font-weight:500;">${escapeHtml(
|
||||
item.name
|
||||
)}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">${
|
||||
item.dueDate ? formatDate(item.dueDate) : "—"
|
||||
}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:right;font-weight:600;">${formatCurrency(
|
||||
item.amount
|
||||
)}</td>
|
||||
</tr>`
|
||||
)
|
||||
.join("")
|
||||
: `<tr><td colspan="3" style="padding:16px;text-align:center;color:#94a3b8;">Sem boletos neste período.</td></tr>`;
|
||||
|
||||
const lancamentoRows =
|
||||
lancamentos.length > 0
|
||||
? lancamentos
|
||||
.map(
|
||||
(item) => `
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;white-space:nowrap;">${formatDate(
|
||||
item.purchaseDate
|
||||
)}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">${
|
||||
escapeHtml(item.name) || "Sem descrição"
|
||||
}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">${
|
||||
escapeHtml(item.condition) || "—"
|
||||
}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">${
|
||||
escapeHtml(item.paymentMethod) || "—"
|
||||
}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:right;font-weight:600;">${formatCurrency(
|
||||
item.amount
|
||||
)}</td>
|
||||
</tr>`
|
||||
)
|
||||
.join("")
|
||||
: `<tr><td colspan="5" style="padding:16px;text-align:center;color:#94a3b8;">Nenhum lançamento registrado no período.</td></tr>`;
|
||||
|
||||
const parceladoRows =
|
||||
parcelados.length > 0
|
||||
? parcelados
|
||||
.map(
|
||||
(item) => `
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;white-space:nowrap;">${formatDate(
|
||||
item.purchaseDate
|
||||
)}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">${
|
||||
escapeHtml(item.name) || "Sem descrição"
|
||||
}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:center;">${
|
||||
item.currentInstallment
|
||||
}/${item.installmentCount}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:right;font-weight:600;">${formatCurrency(
|
||||
item.installmentAmount
|
||||
)}</td>
|
||||
<td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:right;color:#64748b;">${formatCurrency(
|
||||
item.totalAmount
|
||||
)}</td>
|
||||
</tr>`
|
||||
)
|
||||
.join("")
|
||||
: `<tr><td colspan="5" style="padding:16px;text-align:center;color:#94a3b8;">Nenhum lançamento parcelado neste período.</td></tr>`;
|
||||
|
||||
return `
|
||||
<div style="margin:0 auto;max-width:800px;background:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',Arial,sans-serif;color:#0f172a;line-height:1.6;">
|
||||
<!-- Preheader invisível (melhora a prévia no cliente de e-mail) -->
|
||||
<span style="display:none;visibility:hidden;opacity:0;color:transparent;height:0;width:0;overflow:hidden;">Resumo mensal e detalhes de gastos por cartão, boletos e lançamentos.</span>
|
||||
|
||||
<!-- Cabeçalho -->
|
||||
<div style="background:linear-gradient(90deg,#dc5a3a,#ea744e);padding:28px 24px;border-radius:12px 12px 0 0;">
|
||||
<h1 style="margin:0 0 6px 0;font-size:26px;font-weight:800;letter-spacing:-0.3px;color:#ffffff;">Resumo Financeiro</h1>
|
||||
<p style="margin:0;font-size:15px;color:#ffece6;">${escapeHtml(
|
||||
periodLabel
|
||||
)}</p>
|
||||
</div>
|
||||
|
||||
<!-- Cartão principal -->
|
||||
<div style="background:#ffffff;padding:28px 24px;border-radius:0 0 12px 12px;border:1px solid #e2e8f0;border-top:none;">
|
||||
<!-- Saudação -->
|
||||
<p style="margin:0 0 24px 0;font-size:15px;color:#334155;">
|
||||
Olá <strong>${escapeHtml(
|
||||
pagadorName
|
||||
)}</strong>, segue o consolidado do mês:
|
||||
</p>
|
||||
|
||||
<!-- Totais do mês -->
|
||||
${buildSectionHeading("💰 Totais do mês")}
|
||||
<table role="presentation" style="width:100%;border-collapse:collapse;margin:0 0 28px 0;border:1px solid #f1f5f9;border-radius:10px;overflow:hidden;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding:16px 18px;background:#fff7f5;border-bottom:1px solid #f1f5f9;font-size:15px;color:#475569;">Total gasto</td>
|
||||
<td style="padding:16px 18px;background:#fff7f5;border-bottom:1px solid #f1f5f9;text-align:right;">
|
||||
<strong style="font-size:22px;color:#0f172a;">${formatCurrency(
|
||||
monthlyBreakdown.totalExpenses
|
||||
)}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:12px 18px;font-size:14px;color:#64748b;">💳 Cartões</td>
|
||||
<td style="padding:12px 18px;text-align:right;"><strong style="font-size:15px;color:#0f172a;">${formatCurrency(
|
||||
monthlyBreakdown.paymentSplits.card
|
||||
)}</strong></td>
|
||||
</tr>
|
||||
<tr style="background:#fcfcfd;">
|
||||
<td style="padding:12px 18px;font-size:14px;color:#64748b;">📄 Boletos</td>
|
||||
<td style="padding:12px 18px;text-align:right;"><strong style="font-size:15px;color:#0f172a;">${formatCurrency(
|
||||
monthlyBreakdown.paymentSplits.boleto
|
||||
)}</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:12px 18px;font-size:14px;color:#64748b;">⚡ Pix/Débito/Dinheiro</td>
|
||||
<td style="padding:12px 18px;text-align:right;"><strong style="font-size:15px;color:#0f172a;">${formatCurrency(
|
||||
monthlyBreakdown.paymentSplits.instant
|
||||
)}</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Evolução 6 meses -->
|
||||
${buildSectionHeading("📊 Evolução das Despesas (6 meses)")}
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;margin:0 0 28px 0;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
|
||||
<thead>
|
||||
<tr style="background:#f8fafc;">
|
||||
<th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Período</th>
|
||||
<th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Valor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${historyRows}</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Gastos por cartão -->
|
||||
${buildSectionHeading("💳 Gastos com Cartões")}
|
||||
<table role="presentation" style="width:100%;border-collapse:collapse;margin:0 0 8px 0;">
|
||||
<tr>
|
||||
<td style="padding:10px 0;border-bottom:2px solid #e2e8f0;">
|
||||
<table role="presentation" style="width:100%;border-collapse:collapse;">
|
||||
<tr>
|
||||
<td style="color:#475569;font-weight:700;font-size:15px;">Total</td>
|
||||
<td style="text-align:right;">
|
||||
<strong style="font-size:18px;color:#0f172a;">${formatCurrency(
|
||||
monthlyBreakdown.paymentSplits.card
|
||||
)}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;margin:0 0 28px 0;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
|
||||
<thead>
|
||||
<tr style="background:#f8fafc;">
|
||||
<th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Cartão</th>
|
||||
<th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Valor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${cardUsageRows}</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Boletos -->
|
||||
${buildSectionHeading("📄 Boletos")}
|
||||
<table role="presentation" style="width:100%;border-collapse:collapse;margin:0 0 8px 0;">
|
||||
<tr>
|
||||
<td style="padding:10px 0;border-bottom:2px solid #e2e8f0;">
|
||||
<table role="presentation" style="width:100%;border-collapse:collapse;">
|
||||
<tr>
|
||||
<td style="color:#475569;font-weight:700;font-size:15px;">Total</td>
|
||||
<td style="text-align:right;">
|
||||
<strong style="font-size:18px;color:#0f172a;">${formatCurrency(
|
||||
boletoStats.totalAmount
|
||||
)}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;margin:0 0 28px 0;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
|
||||
<thead>
|
||||
<tr style="background:#f8fafc;">
|
||||
<th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Descrição</th>
|
||||
<th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Vencimento</th>
|
||||
<th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Valor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${boletoRows}</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Lançamentos -->
|
||||
${buildSectionHeading("📝 Lançamentos do Mês")}
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
|
||||
<thead>
|
||||
<tr style="background:#f8fafc;">
|
||||
<th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Data</th>
|
||||
<th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Descrição</th>
|
||||
<th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Condição</th>
|
||||
<th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Pagamento</th>
|
||||
<th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Valor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${lancamentoRows}</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Lançamentos Parcelados -->
|
||||
${buildSectionHeading("💳 Lançamentos Parcelados")}
|
||||
<table style="width:100%;border-collapse:collapse;font-size:14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
|
||||
<thead>
|
||||
<tr style="background:#f8fafc;">
|
||||
<th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Data</th>
|
||||
<th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Descrição</th>
|
||||
<th style="text-align:center;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Parcela</th>
|
||||
<th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Valor Parcela</th>
|
||||
<th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${parceladoRows}</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Divisor suave -->
|
||||
<div style="height:1px;background:#e2e8f0;margin:28px 0;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Rodapé externo -->
|
||||
<p style="margin:16px 0 0 0;font-size:12.5px;color:#94a3b8;text-align:center;">
|
||||
Este e-mail foi enviado automaticamente pelo <strong>OpenSheets</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
`;
|
||||
};
|
||||
|
||||
export async function sendPagadorSummaryAction(
|
||||
input: z.infer<typeof inputSchema>
|
||||
): Promise<ActionResult> {
|
||||
try {
|
||||
const { pagadorId, period } = inputSchema.parse(input);
|
||||
const user = await getUser();
|
||||
|
||||
const pagadorRow = await db.query.pagadores.findFirst({
|
||||
where: and(eq(pagadores.id, pagadorId), eq(pagadores.userId, user.id)),
|
||||
});
|
||||
|
||||
if (!pagadorRow) {
|
||||
return { success: false, error: "Pagador não encontrado." };
|
||||
}
|
||||
|
||||
if (!pagadorRow.email) {
|
||||
return {
|
||||
success: false,
|
||||
error: "Cadastre um e-mail para conseguir enviar o resumo.",
|
||||
};
|
||||
}
|
||||
|
||||
const resendApiKey = process.env.RESEND_API_KEY;
|
||||
const resendFrom =
|
||||
process.env.RESEND_FROM_EMAIL ?? "OpenSheets <onboarding@resend.dev>";
|
||||
|
||||
if (!resendApiKey) {
|
||||
return {
|
||||
success: false,
|
||||
error: "Serviço de e-mail não configurado (RESEND_API_KEY ausente).",
|
||||
};
|
||||
}
|
||||
|
||||
const resend = new Resend(resendApiKey);
|
||||
|
||||
const [
|
||||
monthlyBreakdown,
|
||||
historyData,
|
||||
cardUsage,
|
||||
boletoStats,
|
||||
boletoRows,
|
||||
lancamentoRows,
|
||||
parceladoRows,
|
||||
] = await Promise.all([
|
||||
fetchPagadorMonthlyBreakdown({
|
||||
userId: user.id,
|
||||
pagadorId,
|
||||
period,
|
||||
}),
|
||||
fetchPagadorHistory({
|
||||
userId: user.id,
|
||||
pagadorId,
|
||||
period,
|
||||
}),
|
||||
fetchPagadorCardUsage({
|
||||
userId: user.id,
|
||||
pagadorId,
|
||||
period,
|
||||
}),
|
||||
fetchPagadorBoletoStats({
|
||||
userId: user.id,
|
||||
pagadorId,
|
||||
period,
|
||||
}),
|
||||
db
|
||||
.select({
|
||||
name: lancamentos.name,
|
||||
amount: lancamentos.amount,
|
||||
dueDate: lancamentos.dueDate,
|
||||
})
|
||||
.from(lancamentos)
|
||||
.where(
|
||||
and(
|
||||
eq(lancamentos.userId, user.id),
|
||||
eq(lancamentos.pagadorId, pagadorId),
|
||||
eq(lancamentos.period, period),
|
||||
eq(lancamentos.paymentMethod, "Boleto")
|
||||
)
|
||||
)
|
||||
.orderBy(desc(lancamentos.dueDate)),
|
||||
db
|
||||
.select({
|
||||
id: lancamentos.id,
|
||||
name: lancamentos.name,
|
||||
paymentMethod: lancamentos.paymentMethod,
|
||||
condition: lancamentos.condition,
|
||||
amount: lancamentos.amount,
|
||||
transactionType: lancamentos.transactionType,
|
||||
purchaseDate: lancamentos.purchaseDate,
|
||||
})
|
||||
.from(lancamentos)
|
||||
.where(
|
||||
and(
|
||||
eq(lancamentos.userId, user.id),
|
||||
eq(lancamentos.pagadorId, pagadorId),
|
||||
eq(lancamentos.period, period)
|
||||
)
|
||||
)
|
||||
.orderBy(desc(lancamentos.purchaseDate)),
|
||||
db
|
||||
.select({
|
||||
name: lancamentos.name,
|
||||
amount: lancamentos.amount,
|
||||
installmentCount: lancamentos.installmentCount,
|
||||
currentInstallment: lancamentos.currentInstallment,
|
||||
purchaseDate: lancamentos.purchaseDate,
|
||||
})
|
||||
.from(lancamentos)
|
||||
.where(
|
||||
and(
|
||||
eq(lancamentos.userId, user.id),
|
||||
eq(lancamentos.pagadorId, pagadorId),
|
||||
eq(lancamentos.period, period),
|
||||
eq(lancamentos.condition, "Parcelado"),
|
||||
eq(lancamentos.isAnticipated, false)
|
||||
)
|
||||
)
|
||||
.orderBy(desc(lancamentos.purchaseDate)),
|
||||
]);
|
||||
|
||||
const normalizedBoletos: BoletoItem[] = boletoRows.map((row) => ({
|
||||
name: row.name ?? "Sem descrição",
|
||||
amount: Math.abs(Number(row.amount ?? 0)),
|
||||
dueDate: row.dueDate,
|
||||
}));
|
||||
|
||||
const normalizedLancamentos: LancamentoRow[] = lancamentoRows.map(
|
||||
(row) => ({
|
||||
id: row.id,
|
||||
name: row.name,
|
||||
paymentMethod: row.paymentMethod,
|
||||
condition: row.condition,
|
||||
transactionType: row.transactionType,
|
||||
purchaseDate: row.purchaseDate,
|
||||
amount: Number(row.amount ?? 0),
|
||||
})
|
||||
);
|
||||
|
||||
const normalizedParcelados: ParceladoItem[] = parceladoRows.map((row) => {
|
||||
const installmentAmount = Math.abs(Number(row.amount ?? 0));
|
||||
const installmentCount = row.installmentCount ?? 1;
|
||||
const totalAmount = installmentAmount * installmentCount;
|
||||
|
||||
return {
|
||||
name: row.name ?? "Sem descrição",
|
||||
installmentAmount,
|
||||
installmentCount,
|
||||
currentInstallment: row.currentInstallment ?? 1,
|
||||
totalAmount,
|
||||
purchaseDate: row.purchaseDate,
|
||||
};
|
||||
});
|
||||
|
||||
const html = buildSummaryHtml({
|
||||
pagadorName: pagadorRow.name,
|
||||
periodLabel: formatPeriodLabel(period),
|
||||
monthlyBreakdown,
|
||||
historyData,
|
||||
cardUsage,
|
||||
boletoStats,
|
||||
boletos: normalizedBoletos,
|
||||
lancamentos: normalizedLancamentos,
|
||||
parcelados: normalizedParcelados,
|
||||
});
|
||||
|
||||
await resend.emails.send({
|
||||
from: resendFrom,
|
||||
to: pagadorRow.email,
|
||||
subject: `Resumo Financeiro | ${formatPeriodLabel(period)}`,
|
||||
html,
|
||||
});
|
||||
|
||||
const now = new Date();
|
||||
|
||||
await db
|
||||
.update(pagadores)
|
||||
.set({ lastMailAt: now })
|
||||
.where(
|
||||
and(eq(pagadores.id, pagadorRow.id), eq(pagadores.userId, user.id))
|
||||
);
|
||||
|
||||
revalidatePath(`/pagadores/${pagadorRow.id}`);
|
||||
|
||||
return { success: true, message: "Resumo enviado com sucesso." };
|
||||
} catch (error) {
|
||||
// Log estruturado em desenvolvimento
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.error("[sendPagadorSummaryAction]", error);
|
||||
}
|
||||
|
||||
// Tratar erros de validação separadamente
|
||||
if (error instanceof z.ZodError) {
|
||||
return {
|
||||
success: false,
|
||||
error: error.issues[0]?.message ?? "Dados inválidos.",
|
||||
};
|
||||
}
|
||||
|
||||
// Não expor detalhes do erro para o usuário
|
||||
return {
|
||||
success: false,
|
||||
error: "Não foi possível enviar o resumo. Tente novamente mais tarde.",
|
||||
};
|
||||
}
|
||||
}
|
||||
53
app/(dashboard)/pagadores/[pagadorId]/data.ts
Normal file
53
app/(dashboard)/pagadores/[pagadorId]/data.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { lancamentos, pagadorShares, user as usersTable } from "@/db/schema";
|
||||
import { db } from "@/lib/db";
|
||||
import { and, desc, eq, type SQL } from "drizzle-orm";
|
||||
|
||||
export type ShareData = {
|
||||
id: string;
|
||||
userId: string;
|
||||
name: string;
|
||||
email: string;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
export async function fetchPagadorShares(
|
||||
pagadorId: string
|
||||
): Promise<ShareData[]> {
|
||||
const shareRows = await db
|
||||
.select({
|
||||
id: pagadorShares.id,
|
||||
sharedWithUserId: pagadorShares.sharedWithUserId,
|
||||
createdAt: pagadorShares.createdAt,
|
||||
userName: usersTable.name,
|
||||
userEmail: usersTable.email,
|
||||
})
|
||||
.from(pagadorShares)
|
||||
.innerJoin(
|
||||
usersTable,
|
||||
eq(pagadorShares.sharedWithUserId, usersTable.id)
|
||||
)
|
||||
.where(eq(pagadorShares.pagadorId, pagadorId));
|
||||
|
||||
return shareRows.map((share) => ({
|
||||
id: share.id,
|
||||
userId: share.sharedWithUserId,
|
||||
name: share.userName ?? "Usuário",
|
||||
email: share.userEmail ?? "email não informado",
|
||||
createdAt: share.createdAt?.toISOString() ?? new Date().toISOString(),
|
||||
}));
|
||||
}
|
||||
|
||||
export async function fetchPagadorLancamentos(filters: SQL[]) {
|
||||
const lancamentoRows = await db.query.lancamentos.findMany({
|
||||
where: and(...filters),
|
||||
with: {
|
||||
pagador: true,
|
||||
conta: true,
|
||||
cartao: true,
|
||||
categoria: true,
|
||||
},
|
||||
orderBy: desc(lancamentos.purchaseDate),
|
||||
});
|
||||
|
||||
return lancamentoRows;
|
||||
}
|
||||
84
app/(dashboard)/pagadores/[pagadorId]/loading.tsx
Normal file
84
app/(dashboard)/pagadores/[pagadorId]/loading.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
/**
|
||||
* Loading state para a página de detalhes do pagador
|
||||
* Layout: MonthPicker + Info do pagador + Tabs (Visão Geral / Lançamentos)
|
||||
*/
|
||||
export default function PagadorDetailsLoading() {
|
||||
return (
|
||||
<main className="flex flex-col gap-6">
|
||||
{/* Month Picker placeholder */}
|
||||
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
|
||||
|
||||
{/* Info do Pagador (sempre visível) */}
|
||||
<div className="rounded-2xl border p-6 space-y-4">
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Avatar */}
|
||||
<Skeleton className="size-20 rounded-full bg-foreground/10" />
|
||||
|
||||
<div className="flex-1 space-y-3">
|
||||
{/* Nome + Badge */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-7 w-48 rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
|
||||
|
||||
{/* Status */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="size-2 rounded-full bg-foreground/10" />
|
||||
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Botões de ação */}
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex gap-2 border-b">
|
||||
<Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" />
|
||||
</div>
|
||||
|
||||
{/* Conteúdo da aba Visão Geral (grid de cards) */}
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Card de resumo mensal */}
|
||||
<div className="rounded-2xl border p-6 space-y-4 lg:col-span-2">
|
||||
<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
|
||||
<div className="grid grid-cols-3 gap-4 pt-4">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-7 w-full rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Outros cards */}
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl border p-6 space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="size-5 rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
<div className="space-y-3 pt-4">
|
||||
<Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-5 w-3/4 rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-5 w-1/2 rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
384
app/(dashboard)/pagadores/[pagadorId]/page.tsx
Normal file
384
app/(dashboard)/pagadores/[pagadorId]/page.tsx
Normal file
@@ -0,0 +1,384 @@
|
||||
import { PagadorCardUsageCard } from "@/components/pagadores/details/pagador-card-usage-card";
|
||||
import { PagadorHistoryCard } from "@/components/pagadores/details/pagador-history-card";
|
||||
import { PagadorInfoCard } from "@/components/pagadores/details/pagador-info-card";
|
||||
import { PagadorMonthlySummaryCard } from "@/components/pagadores/details/pagador-monthly-summary-card";
|
||||
import { PagadorBoletoCard } from "@/components/pagadores/details/pagador-payment-method-cards";
|
||||
import { PagadorSharingCard } from "@/components/pagadores/details/pagador-sharing-card";
|
||||
import { LancamentosPage as LancamentosSection } from "@/components/lancamentos/page/lancamentos-page";
|
||||
import type {
|
||||
ContaCartaoFilterOption,
|
||||
LancamentoFilterOption,
|
||||
LancamentoItem,
|
||||
SelectOption,
|
||||
} from "@/components/lancamentos/types";
|
||||
import MonthPicker from "@/components/month-picker/month-picker";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { pagadores } from "@/db/schema";
|
||||
import { getUserId } from "@/lib/auth/server";
|
||||
import {
|
||||
buildLancamentoWhere,
|
||||
buildOptionSets,
|
||||
buildSluggedFilters,
|
||||
buildSlugMaps,
|
||||
extractLancamentoSearchFilters,
|
||||
fetchLancamentoFilterSources,
|
||||
getSingleParam,
|
||||
mapLancamentosData,
|
||||
type LancamentoSearchFilters,
|
||||
type ResolvedSearchParams,
|
||||
type SlugMaps,
|
||||
type SluggedFilters,
|
||||
} from "@/lib/lancamentos/page-helpers";
|
||||
import { parsePeriodParam } from "@/lib/utils/period";
|
||||
import { getPagadorAccess } from "@/lib/pagadores/access";
|
||||
import {
|
||||
fetchPagadorBoletoStats,
|
||||
fetchPagadorCardUsage,
|
||||
fetchPagadorHistory,
|
||||
fetchPagadorMonthlyBreakdown,
|
||||
} from "@/lib/pagadores/details";
|
||||
import { notFound } from "next/navigation";
|
||||
import { fetchPagadorLancamentos, fetchPagadorShares } from "./data";
|
||||
|
||||
type PageSearchParams = Promise<ResolvedSearchParams>;
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{ pagadorId: string }>;
|
||||
searchParams?: PageSearchParams;
|
||||
};
|
||||
|
||||
const capitalize = (value: string) =>
|
||||
value.length ? value.charAt(0).toUpperCase().concat(value.slice(1)) : value;
|
||||
|
||||
const EMPTY_FILTERS: LancamentoSearchFilters = {
|
||||
transactionFilter: null,
|
||||
conditionFilter: null,
|
||||
paymentFilter: null,
|
||||
pagadorFilter: null,
|
||||
categoriaFilter: null,
|
||||
contaCartaoFilter: null,
|
||||
searchFilter: null,
|
||||
};
|
||||
|
||||
const createEmptySlugMaps = (): SlugMaps => ({
|
||||
pagador: new Map(),
|
||||
categoria: new Map(),
|
||||
conta: new Map(),
|
||||
cartao: new Map(),
|
||||
});
|
||||
|
||||
type OptionSet = ReturnType<typeof buildOptionSets>;
|
||||
|
||||
export default async function Page({ params, searchParams }: PageProps) {
|
||||
const { pagadorId } = await params;
|
||||
const userId = await getUserId();
|
||||
const resolvedSearchParams = searchParams ? await searchParams : undefined;
|
||||
|
||||
const access = await getPagadorAccess(userId, pagadorId);
|
||||
|
||||
if (!access) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const { pagador, canEdit } = access;
|
||||
const dataOwnerId = pagador.userId;
|
||||
|
||||
const periodoParamRaw = getSingleParam(resolvedSearchParams, "periodo");
|
||||
const {
|
||||
period: selectedPeriod,
|
||||
monthName,
|
||||
year,
|
||||
} = parsePeriodParam(periodoParamRaw);
|
||||
const periodLabel = `${capitalize(monthName)} de ${year}`;
|
||||
|
||||
const searchFilters = canEdit
|
||||
? extractLancamentoSearchFilters(resolvedSearchParams)
|
||||
: EMPTY_FILTERS;
|
||||
|
||||
let filterSources: Awaited<
|
||||
ReturnType<typeof fetchLancamentoFilterSources>
|
||||
> | null = null;
|
||||
let sluggedFilters: SluggedFilters;
|
||||
let slugMaps: SlugMaps;
|
||||
|
||||
if (canEdit) {
|
||||
filterSources = await fetchLancamentoFilterSources(dataOwnerId);
|
||||
sluggedFilters = buildSluggedFilters(filterSources);
|
||||
slugMaps = buildSlugMaps(sluggedFilters);
|
||||
} else {
|
||||
sluggedFilters = {
|
||||
pagadorFiltersRaw: [],
|
||||
categoriaFiltersRaw: [],
|
||||
contaFiltersRaw: [],
|
||||
cartaoFiltersRaw: [],
|
||||
};
|
||||
slugMaps = createEmptySlugMaps();
|
||||
}
|
||||
|
||||
const filters = buildLancamentoWhere({
|
||||
userId: dataOwnerId,
|
||||
period: selectedPeriod,
|
||||
filters: searchFilters,
|
||||
slugMaps,
|
||||
pagadorId: pagador.id,
|
||||
});
|
||||
|
||||
const sharesPromise = canEdit
|
||||
? fetchPagadorShares(pagador.id)
|
||||
: Promise.resolve([]);
|
||||
|
||||
const [
|
||||
lancamentoRows,
|
||||
monthlyBreakdown,
|
||||
historyData,
|
||||
cardUsage,
|
||||
boletoStats,
|
||||
shareRows,
|
||||
] = await Promise.all([
|
||||
fetchPagadorLancamentos(filters),
|
||||
fetchPagadorMonthlyBreakdown({
|
||||
userId: dataOwnerId,
|
||||
pagadorId: pagador.id,
|
||||
period: selectedPeriod,
|
||||
}),
|
||||
fetchPagadorHistory({
|
||||
userId: dataOwnerId,
|
||||
pagadorId: pagador.id,
|
||||
period: selectedPeriod,
|
||||
}),
|
||||
fetchPagadorCardUsage({
|
||||
userId: dataOwnerId,
|
||||
pagadorId: pagador.id,
|
||||
period: selectedPeriod,
|
||||
}),
|
||||
fetchPagadorBoletoStats({
|
||||
userId: dataOwnerId,
|
||||
pagadorId: pagador.id,
|
||||
period: selectedPeriod,
|
||||
}),
|
||||
sharesPromise,
|
||||
]);
|
||||
|
||||
const mappedLancamentos = mapLancamentosData(lancamentoRows);
|
||||
const lancamentosData = canEdit
|
||||
? mappedLancamentos
|
||||
: mappedLancamentos.map((item) => ({ ...item, readonly: true }));
|
||||
|
||||
const pagadorSharesData = shareRows;
|
||||
|
||||
let optionSets: OptionSet;
|
||||
let effectiveSluggedFilters = sluggedFilters;
|
||||
|
||||
if (canEdit && filterSources) {
|
||||
optionSets = buildOptionSets({
|
||||
...sluggedFilters,
|
||||
pagadorRows: filterSources.pagadorRows,
|
||||
});
|
||||
} else {
|
||||
effectiveSluggedFilters = {
|
||||
pagadorFiltersRaw: [
|
||||
{ id: pagador.id, label: pagador.name, slug: pagador.id, role: pagador.role },
|
||||
],
|
||||
categoriaFiltersRaw: [],
|
||||
contaFiltersRaw: [],
|
||||
cartaoFiltersRaw: [],
|
||||
};
|
||||
optionSets = buildReadOnlyOptionSets(lancamentosData, pagador);
|
||||
}
|
||||
|
||||
const pagadorSlug =
|
||||
effectiveSluggedFilters.pagadorFiltersRaw.find(
|
||||
(item) => item.id === pagador.id
|
||||
)?.slug ?? null;
|
||||
|
||||
const pagadorFilterOptions = pagadorSlug
|
||||
? optionSets.pagadorFilterOptions.filter(
|
||||
(option) => option.slug === pagadorSlug
|
||||
)
|
||||
: optionSets.pagadorFilterOptions;
|
||||
|
||||
const pagadorData = {
|
||||
id: pagador.id,
|
||||
name: pagador.name,
|
||||
email: pagador.email ?? null,
|
||||
avatarUrl: pagador.avatarUrl ?? null,
|
||||
status: pagador.status,
|
||||
note: pagador.note ?? null,
|
||||
role: pagador.role ?? null,
|
||||
isAutoSend: pagador.isAutoSend ?? false,
|
||||
createdAt: pagador.createdAt
|
||||
? pagador.createdAt.toISOString()
|
||||
: new Date().toISOString(),
|
||||
lastMailAt: pagador.lastMailAt ? pagador.lastMailAt.toISOString() : null,
|
||||
shareCode: canEdit ? pagador.shareCode : null,
|
||||
canEdit,
|
||||
};
|
||||
|
||||
const summaryPreview = {
|
||||
periodLabel,
|
||||
totalExpenses: monthlyBreakdown.totalExpenses,
|
||||
paymentSplits: monthlyBreakdown.paymentSplits,
|
||||
cardUsage: cardUsage.slice(0, 3).map((item) => ({
|
||||
name: item.name,
|
||||
amount: item.amount,
|
||||
})),
|
||||
boletoStats: {
|
||||
totalAmount: boletoStats.totalAmount,
|
||||
paidAmount: boletoStats.paidAmount,
|
||||
pendingAmount: boletoStats.pendingAmount,
|
||||
paidCount: boletoStats.paidCount,
|
||||
pendingCount: boletoStats.pendingCount,
|
||||
},
|
||||
lancamentoCount: lancamentosData.length,
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="flex flex-col gap-6">
|
||||
<MonthPicker />
|
||||
|
||||
<Tabs defaultValue="profile" className="w-full">
|
||||
<TabsList className="mb-2">
|
||||
<TabsTrigger value="profile">Perfil</TabsTrigger>
|
||||
<TabsTrigger value="painel">Painel</TabsTrigger>
|
||||
<TabsTrigger value="lancamentos">Lançamentos</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="profile" className="space-y-4">
|
||||
<section>
|
||||
<PagadorInfoCard
|
||||
pagador={pagadorData}
|
||||
selectedPeriod={selectedPeriod}
|
||||
summary={summaryPreview}
|
||||
/>
|
||||
</section>
|
||||
{canEdit && pagadorData.shareCode ? (
|
||||
<PagadorSharingCard
|
||||
pagadorId={pagador.id}
|
||||
shareCode={pagadorData.shareCode}
|
||||
shares={pagadorSharesData}
|
||||
/>
|
||||
) : null}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="painel" className="space-y-4">
|
||||
<section className="grid gap-4 lg:grid-cols-2">
|
||||
<PagadorMonthlySummaryCard
|
||||
periodLabel={periodLabel}
|
||||
breakdown={monthlyBreakdown}
|
||||
/>
|
||||
<PagadorHistoryCard data={historyData} />
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 lg:grid-cols-2">
|
||||
<PagadorCardUsageCard items={cardUsage} />
|
||||
<PagadorBoletoCard stats={boletoStats} />
|
||||
</section>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="lancamentos">
|
||||
<section className="flex flex-col gap-4">
|
||||
<LancamentosSection
|
||||
lancamentos={lancamentosData}
|
||||
pagadorOptions={optionSets.pagadorOptions}
|
||||
splitPagadorOptions={optionSets.splitPagadorOptions}
|
||||
defaultPagadorId={pagador.id}
|
||||
contaOptions={optionSets.contaOptions}
|
||||
cartaoOptions={optionSets.cartaoOptions}
|
||||
categoriaOptions={optionSets.categoriaOptions}
|
||||
pagadorFilterOptions={pagadorFilterOptions}
|
||||
categoriaFilterOptions={optionSets.categoriaFilterOptions}
|
||||
contaCartaoFilterOptions={optionSets.contaCartaoFilterOptions}
|
||||
selectedPeriod={selectedPeriod}
|
||||
allowCreate={canEdit}
|
||||
/>
|
||||
</section>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const normalizeOptionLabel = (value: string | null | undefined, fallback: string) =>
|
||||
value?.trim().length ? value.trim() : fallback;
|
||||
|
||||
function buildReadOnlyOptionSets(
|
||||
items: LancamentoItem[],
|
||||
pagador: typeof pagadores.$inferSelect
|
||||
): OptionSet {
|
||||
const pagadorLabel = normalizeOptionLabel(pagador.name, "Pagador");
|
||||
const pagadorOptions: SelectOption[] = [
|
||||
{
|
||||
value: pagador.id,
|
||||
label: pagadorLabel,
|
||||
slug: pagador.id,
|
||||
},
|
||||
];
|
||||
|
||||
const contaOptionsMap = new Map<string, SelectOption>();
|
||||
const cartaoOptionsMap = new Map<string, SelectOption>();
|
||||
const categoriaOptionsMap = new Map<string, SelectOption>();
|
||||
|
||||
items.forEach((item) => {
|
||||
if (item.contaId && !contaOptionsMap.has(item.contaId)) {
|
||||
contaOptionsMap.set(item.contaId, {
|
||||
value: item.contaId,
|
||||
label: normalizeOptionLabel(item.contaName, "Conta sem nome"),
|
||||
slug: item.contaId,
|
||||
});
|
||||
}
|
||||
if (item.cartaoId && !cartaoOptionsMap.has(item.cartaoId)) {
|
||||
cartaoOptionsMap.set(item.cartaoId, {
|
||||
value: item.cartaoId,
|
||||
label: normalizeOptionLabel(item.cartaoName, "Cartão sem nome"),
|
||||
slug: item.cartaoId,
|
||||
});
|
||||
}
|
||||
if (item.categoriaId && !categoriaOptionsMap.has(item.categoriaId)) {
|
||||
categoriaOptionsMap.set(item.categoriaId, {
|
||||
value: item.categoriaId,
|
||||
label: normalizeOptionLabel(item.categoriaName, "Categoria"),
|
||||
slug: item.categoriaId,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const contaOptions = Array.from(contaOptionsMap.values());
|
||||
const cartaoOptions = Array.from(cartaoOptionsMap.values());
|
||||
const categoriaOptions = Array.from(categoriaOptionsMap.values());
|
||||
|
||||
const pagadorFilterOptions: LancamentoFilterOption[] = [
|
||||
{ slug: pagador.id, label: pagadorLabel },
|
||||
];
|
||||
|
||||
const categoriaFilterOptions: LancamentoFilterOption[] = categoriaOptions.map(
|
||||
(option) => ({
|
||||
slug: option.value,
|
||||
label: option.label,
|
||||
})
|
||||
);
|
||||
|
||||
const contaCartaoFilterOptions: ContaCartaoFilterOption[] = [
|
||||
...contaOptions.map((option) => ({
|
||||
slug: option.value,
|
||||
label: option.label,
|
||||
kind: "conta" as const,
|
||||
})),
|
||||
...cartaoOptions.map((option) => ({
|
||||
slug: option.value,
|
||||
label: option.label,
|
||||
kind: "cartao" as const,
|
||||
})),
|
||||
];
|
||||
|
||||
return {
|
||||
pagadorOptions,
|
||||
splitPagadorOptions: [],
|
||||
defaultPagadorId: pagador.id,
|
||||
contaOptions,
|
||||
cartaoOptions,
|
||||
categoriaOptions,
|
||||
pagadorFilterOptions,
|
||||
categoriaFilterOptions,
|
||||
contaCartaoFilterOptions,
|
||||
};
|
||||
}
|
||||
337
app/(dashboard)/pagadores/actions.ts
Normal file
337
app/(dashboard)/pagadores/actions.ts
Normal file
@@ -0,0 +1,337 @@
|
||||
"use server";
|
||||
|
||||
import { pagadores, pagadorShares } from "@/db/schema";
|
||||
import { handleActionError, revalidateForEntity } from "@/lib/actions/helpers";
|
||||
import type { ActionResult } from "@/lib/actions/types";
|
||||
import { db } from "@/lib/db";
|
||||
import { getUser } from "@/lib/auth/server";
|
||||
import {
|
||||
DEFAULT_PAGADOR_AVATAR,
|
||||
PAGADOR_ROLE_ADMIN,
|
||||
PAGADOR_ROLE_TERCEIRO,
|
||||
PAGADOR_STATUS_OPTIONS,
|
||||
} from "@/lib/pagadores/constants";
|
||||
import { normalizeAvatarPath } from "@/lib/pagadores/utils";
|
||||
import { noteSchema, uuidSchema } from "@/lib/schemas/common";
|
||||
import { normalizeOptionalString } from "@/lib/utils/string";
|
||||
import { and, eq } from "drizzle-orm";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { randomBytes } from "node:crypto";
|
||||
import { z } from "zod";
|
||||
|
||||
const statusEnum = z.enum(PAGADOR_STATUS_OPTIONS as [string, ...string[]], {
|
||||
errorMap: () => ({
|
||||
message: "Selecione um status válido.",
|
||||
}),
|
||||
});
|
||||
|
||||
const baseSchema = z.object({
|
||||
name: z
|
||||
.string({ message: "Informe o nome do pagador." })
|
||||
.trim()
|
||||
.min(1, "Informe o nome do pagador."),
|
||||
email: z
|
||||
.string()
|
||||
.trim()
|
||||
.email("Informe um e-mail válido.")
|
||||
.optional()
|
||||
.transform((value) => normalizeOptionalString(value)),
|
||||
status: statusEnum,
|
||||
note: noteSchema,
|
||||
avatarUrl: z.string().trim().optional(),
|
||||
isAutoSend: z.boolean().optional().default(false),
|
||||
});
|
||||
|
||||
const createSchema = baseSchema;
|
||||
|
||||
const updateSchema = baseSchema.extend({
|
||||
id: uuidSchema("Pagador"),
|
||||
});
|
||||
|
||||
const deleteSchema = z.object({
|
||||
id: uuidSchema("Pagador"),
|
||||
});
|
||||
|
||||
const shareDeleteSchema = z.object({
|
||||
shareId: uuidSchema("Compartilhamento"),
|
||||
});
|
||||
|
||||
const shareCodeJoinSchema = z.object({
|
||||
code: z
|
||||
.string({ message: "Informe o código." })
|
||||
.trim()
|
||||
.min(8, "Código inválido."),
|
||||
});
|
||||
|
||||
const shareCodeRegenerateSchema = z.object({
|
||||
pagadorId: uuidSchema("Pagador"),
|
||||
});
|
||||
|
||||
type CreateInput = z.infer<typeof createSchema>;
|
||||
type UpdateInput = z.infer<typeof updateSchema>;
|
||||
type DeleteInput = z.infer<typeof deleteSchema>;
|
||||
type ShareDeleteInput = z.infer<typeof shareDeleteSchema>;
|
||||
type ShareCodeJoinInput = z.infer<typeof shareCodeJoinSchema>;
|
||||
type ShareCodeRegenerateInput = z.infer<typeof shareCodeRegenerateSchema>;
|
||||
|
||||
const revalidate = () => revalidateForEntity("pagadores");
|
||||
|
||||
const generateShareCode = () => {
|
||||
// base64url já retorna apenas [a-zA-Z0-9_-]
|
||||
// 18 bytes = 24 caracteres em base64
|
||||
return randomBytes(18).toString("base64url").slice(0, 24);
|
||||
};
|
||||
|
||||
export async function createPagadorAction(
|
||||
input: CreateInput
|
||||
): Promise<ActionResult> {
|
||||
try {
|
||||
const user = await getUser();
|
||||
const data = createSchema.parse(input);
|
||||
|
||||
await db.insert(pagadores).values({
|
||||
name: data.name,
|
||||
email: data.email,
|
||||
status: data.status,
|
||||
note: data.note,
|
||||
avatarUrl: normalizeAvatarPath(data.avatarUrl) ?? DEFAULT_PAGADOR_AVATAR,
|
||||
isAutoSend: data.isAutoSend ?? false,
|
||||
role: PAGADOR_ROLE_TERCEIRO,
|
||||
shareCode: generateShareCode(),
|
||||
userId: user.id,
|
||||
});
|
||||
|
||||
revalidate();
|
||||
|
||||
return { success: true, message: "Pagador criado com sucesso." };
|
||||
} catch (error) {
|
||||
return handleActionError(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function updatePagadorAction(
|
||||
input: UpdateInput
|
||||
): Promise<ActionResult> {
|
||||
try {
|
||||
const user = await getUser();
|
||||
const data = updateSchema.parse(input);
|
||||
|
||||
const existing = await db.query.pagadores.findFirst({
|
||||
where: and(eq(pagadores.id, data.id), eq(pagadores.userId, user.id)),
|
||||
});
|
||||
|
||||
if (!existing) {
|
||||
return {
|
||||
success: false,
|
||||
error: "Pagador não encontrado.",
|
||||
};
|
||||
}
|
||||
|
||||
await db
|
||||
.update(pagadores)
|
||||
.set({
|
||||
name: data.name,
|
||||
email: data.email,
|
||||
status: data.status,
|
||||
note: data.note,
|
||||
avatarUrl:
|
||||
normalizeAvatarPath(data.avatarUrl) ?? existing.avatarUrl ?? null,
|
||||
isAutoSend: data.isAutoSend ?? false,
|
||||
role: existing.role ?? PAGADOR_ROLE_TERCEIRO,
|
||||
})
|
||||
.where(and(eq(pagadores.id, data.id), eq(pagadores.userId, user.id)));
|
||||
|
||||
revalidate();
|
||||
|
||||
return { success: true, message: "Pagador atualizado com sucesso." };
|
||||
} catch (error) {
|
||||
return handleActionError(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function deletePagadorAction(
|
||||
input: DeleteInput
|
||||
): Promise<ActionResult> {
|
||||
try {
|
||||
const user = await getUser();
|
||||
const data = deleteSchema.parse(input);
|
||||
|
||||
const existing = await db.query.pagadores.findFirst({
|
||||
where: and(eq(pagadores.id, data.id), eq(pagadores.userId, user.id)),
|
||||
});
|
||||
|
||||
if (!existing) {
|
||||
return {
|
||||
success: false,
|
||||
error: "Pagador não encontrado.",
|
||||
};
|
||||
}
|
||||
|
||||
if (existing.role === PAGADOR_ROLE_ADMIN) {
|
||||
return {
|
||||
success: false,
|
||||
error: "Pagadores administradores não podem ser removidos.",
|
||||
};
|
||||
}
|
||||
|
||||
await db
|
||||
.delete(pagadores)
|
||||
.where(and(eq(pagadores.id, data.id), eq(pagadores.userId, user.id)));
|
||||
|
||||
revalidate();
|
||||
|
||||
return { success: true, message: "Pagador removido com sucesso." };
|
||||
} catch (error) {
|
||||
return handleActionError(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function joinPagadorByShareCodeAction(
|
||||
input: ShareCodeJoinInput
|
||||
): Promise<ActionResult> {
|
||||
try {
|
||||
const user = await getUser();
|
||||
const data = shareCodeJoinSchema.parse(input);
|
||||
|
||||
const pagadorRow = await db.query.pagadores.findFirst({
|
||||
where: eq(pagadores.shareCode, data.code),
|
||||
});
|
||||
|
||||
if (!pagadorRow) {
|
||||
return { success: false, error: "Código inválido ou expirado." };
|
||||
}
|
||||
|
||||
if (pagadorRow.userId === user.id) {
|
||||
return {
|
||||
success: false,
|
||||
error: "Você já é o proprietário deste pagador.",
|
||||
};
|
||||
}
|
||||
|
||||
const existingShare = await db.query.pagadorShares.findFirst({
|
||||
where: and(
|
||||
eq(pagadorShares.pagadorId, pagadorRow.id),
|
||||
eq(pagadorShares.sharedWithUserId, user.id)
|
||||
),
|
||||
});
|
||||
|
||||
if (existingShare) {
|
||||
return {
|
||||
success: false,
|
||||
error: "Você já possui acesso a este pagador.",
|
||||
};
|
||||
}
|
||||
|
||||
await db.insert(pagadorShares).values({
|
||||
pagadorId: pagadorRow.id,
|
||||
sharedWithUserId: user.id,
|
||||
permission: "read",
|
||||
createdByUserId: pagadorRow.userId,
|
||||
});
|
||||
|
||||
revalidate();
|
||||
|
||||
return { success: true, message: "Pagador adicionado à sua lista." };
|
||||
} catch (error) {
|
||||
return handleActionError(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function deletePagadorShareAction(
|
||||
input: ShareDeleteInput
|
||||
): Promise<ActionResult> {
|
||||
try {
|
||||
const user = await getUser();
|
||||
const data = shareDeleteSchema.parse(input);
|
||||
|
||||
const existing = await db.query.pagadorShares.findFirst({
|
||||
columns: {
|
||||
id: true,
|
||||
pagadorId: true,
|
||||
sharedWithUserId: true,
|
||||
},
|
||||
where: eq(pagadorShares.id, data.shareId),
|
||||
with: {
|
||||
pagador: {
|
||||
columns: {
|
||||
userId: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Permitir que o owner OU o próprio usuário compartilhado remova o share
|
||||
if (!existing || (existing.pagador.userId !== user.id && existing.sharedWithUserId !== user.id)) {
|
||||
return {
|
||||
success: false,
|
||||
error: "Compartilhamento não encontrado.",
|
||||
};
|
||||
}
|
||||
|
||||
await db
|
||||
.delete(pagadorShares)
|
||||
.where(eq(pagadorShares.id, data.shareId));
|
||||
|
||||
revalidate();
|
||||
revalidatePath(`/pagadores/${existing.pagadorId}`);
|
||||
|
||||
return { success: true, message: "Compartilhamento removido." };
|
||||
} catch (error) {
|
||||
return handleActionError(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function regeneratePagadorShareCodeAction(
|
||||
input: ShareCodeRegenerateInput
|
||||
): Promise<{ success: true; message: string; code: string } | ActionResult> {
|
||||
try {
|
||||
const user = await getUser();
|
||||
const data = shareCodeRegenerateSchema.parse(input);
|
||||
|
||||
const existing = await db.query.pagadores.findFirst({
|
||||
columns: { id: true, userId: true },
|
||||
where: and(eq(pagadores.id, data.pagadorId), eq(pagadores.userId, user.id)),
|
||||
});
|
||||
|
||||
if (!existing) {
|
||||
return { success: false, error: "Pagador não encontrado." };
|
||||
}
|
||||
|
||||
let attempts = 0;
|
||||
while (attempts < 5) {
|
||||
const newCode = generateShareCode();
|
||||
try {
|
||||
await db
|
||||
.update(pagadores)
|
||||
.set({ shareCode: newCode })
|
||||
.where(and(eq(pagadores.id, data.pagadorId), eq(pagadores.userId, user.id)));
|
||||
|
||||
revalidate();
|
||||
revalidatePath(`/pagadores/${data.pagadorId}`);
|
||||
return {
|
||||
success: true,
|
||||
message: "Código atualizado com sucesso.",
|
||||
code: newCode,
|
||||
};
|
||||
} catch (error) {
|
||||
if (
|
||||
error instanceof Error &&
|
||||
"constraint" in error &&
|
||||
// @ts-expect-error constraint is present in postgres errors
|
||||
error.constraint === "pagadores_share_code_key"
|
||||
) {
|
||||
attempts += 1;
|
||||
continue;
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: false,
|
||||
error: "Não foi possível gerar um código único. Tente novamente.",
|
||||
};
|
||||
} catch (error) {
|
||||
return handleActionError(error);
|
||||
}
|
||||
}
|
||||
23
app/(dashboard)/pagadores/layout.tsx
Normal file
23
app/(dashboard)/pagadores/layout.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import PageDescription from "@/components/page-description";
|
||||
import { RiGroupLine } from "@remixicon/react";
|
||||
|
||||
export const metadata = {
|
||||
title: "Pagadores | OpenSheets",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 px-6">
|
||||
<PageDescription
|
||||
icon={<RiGroupLine />}
|
||||
title="Pagadores"
|
||||
subtitle="Gerencie as pessoas ou entidades responsáveis pelos pagamentos."
|
||||
/>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
57
app/(dashboard)/pagadores/loading.tsx
Normal file
57
app/(dashboard)/pagadores/loading.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
/**
|
||||
* Loading state para a página de pagadores
|
||||
* Layout: Header + Input de compartilhamento + Grid de cards
|
||||
*/
|
||||
export default function PagadoresLoading() {
|
||||
return (
|
||||
<main className="flex flex-col items-start gap-6">
|
||||
<div className="w-full space-y-6">
|
||||
{/* Input de código de compartilhamento */}
|
||||
<div className="rounded-2xl border p-4 space-y-3">
|
||||
<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-10 flex-1 rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-10 w-32 rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid de cards de pagadores */}
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl border p-6 space-y-4">
|
||||
{/* Avatar + Nome + Badge */}
|
||||
<div className="flex items-start gap-4">
|
||||
<Skeleton className="size-16 rounded-full bg-foreground/10" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
{i === 0 && (
|
||||
<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
|
||||
|
||||
{/* Status */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="size-2 rounded-full bg-foreground/10" />
|
||||
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
|
||||
{/* Botões de ação */}
|
||||
<div className="flex gap-2 pt-2 border-t">
|
||||
<Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
|
||||
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
86
app/(dashboard)/pagadores/page.tsx
Normal file
86
app/(dashboard)/pagadores/page.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import { PagadoresPage } from "@/components/pagadores/pagadores-page";
|
||||
import type { PagadorStatus } from "@/lib/pagadores/constants";
|
||||
import {
|
||||
PAGADOR_STATUS_OPTIONS,
|
||||
DEFAULT_PAGADOR_AVATAR,
|
||||
PAGADOR_ROLE_ADMIN,
|
||||
} from "@/lib/pagadores/constants";
|
||||
import { getUserId } from "@/lib/auth/server";
|
||||
import { fetchPagadoresWithAccess } from "@/lib/pagadores/access";
|
||||
import { readdir } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
|
||||
const AVATAR_DIRECTORY = path.join(process.cwd(), "public", "avatares");
|
||||
const AVATAR_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".svg", ".webp"]);
|
||||
|
||||
async function loadAvatarOptions() {
|
||||
try {
|
||||
const files = await readdir(AVATAR_DIRECTORY, { withFileTypes: true });
|
||||
|
||||
const items = files
|
||||
.filter((file) => file.isFile())
|
||||
.map((file) => file.name)
|
||||
.filter((file) => AVATAR_EXTENSIONS.has(path.extname(file).toLowerCase()))
|
||||
.sort((a, b) => a.localeCompare(b, "pt-BR", { sensitivity: "base" }));
|
||||
|
||||
if (items.length === 0) {
|
||||
items.push(DEFAULT_PAGADOR_AVATAR);
|
||||
}
|
||||
|
||||
return Array.from(new Set(items));
|
||||
} catch {
|
||||
return [DEFAULT_PAGADOR_AVATAR];
|
||||
}
|
||||
}
|
||||
|
||||
const resolveStatus = (status: string | null): PagadorStatus => {
|
||||
const normalized = status?.trim() ?? "";
|
||||
const found = PAGADOR_STATUS_OPTIONS.find(
|
||||
(option) => option.toLowerCase() === normalized.toLowerCase()
|
||||
);
|
||||
return found ?? PAGADOR_STATUS_OPTIONS[0];
|
||||
};
|
||||
|
||||
export default async function Page() {
|
||||
const userId = await getUserId();
|
||||
|
||||
const [pagadorRows, avatarOptions] = await Promise.all([
|
||||
fetchPagadoresWithAccess(userId),
|
||||
loadAvatarOptions(),
|
||||
]);
|
||||
|
||||
const pagadoresData = pagadorRows
|
||||
.map((pagador) => ({
|
||||
id: pagador.id,
|
||||
name: pagador.name,
|
||||
email: pagador.email,
|
||||
avatarUrl: pagador.avatarUrl,
|
||||
status: resolveStatus(pagador.status),
|
||||
note: pagador.note,
|
||||
role: pagador.role,
|
||||
isAutoSend: pagador.isAutoSend ?? false,
|
||||
createdAt: pagador.createdAt?.toISOString() ?? new Date().toISOString(),
|
||||
canEdit: pagador.canEdit,
|
||||
sharedByName: pagador.sharedByName ?? null,
|
||||
sharedByEmail: pagador.sharedByEmail ?? null,
|
||||
shareId: pagador.shareId ?? null,
|
||||
shareCode: pagador.canEdit ? pagador.shareCode ?? null : null,
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
// Admin sempre primeiro
|
||||
if (a.role === PAGADOR_ROLE_ADMIN && b.role !== PAGADOR_ROLE_ADMIN) {
|
||||
return -1;
|
||||
}
|
||||
if (a.role !== PAGADOR_ROLE_ADMIN && b.role === PAGADOR_ROLE_ADMIN) {
|
||||
return 1;
|
||||
}
|
||||
// Se ambos são admin ou ambos não são, mantém ordem original
|
||||
return 0;
|
||||
});
|
||||
|
||||
return (
|
||||
<main className="flex flex-col items-start gap-6">
|
||||
<PagadoresPage pagadores={pagadoresData} avatarOptions={avatarOptions} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user