mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-09 11:01:45 +00:00
refactor(core): move app para src e padroniza estrutura
This commit is contained in:
Felipe Coutinho
367
src/features/payers/actions.ts
Normal file
367
src/features/payers/actions.ts
Normal file
@@ -0,0 +1,367 @@
|
||||
"use server";
|
||||
|
||||
import { randomBytes } from "node:crypto";
|
||||
import { and, eq } from "drizzle-orm";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { z } from "zod";
|
||||
import { compartilhamentosPagador, pagadores, user } from "@/db/schema";
|
||||
import {
|
||||
handleActionError,
|
||||
revalidateForEntity,
|
||||
} from "@/shared/lib/actions/helpers";
|
||||
import { getUser } from "@/shared/lib/auth/server";
|
||||
import { db } from "@/shared/lib/db";
|
||||
import {
|
||||
DEFAULT_PAGADOR_AVATAR,
|
||||
PAGADOR_ROLE_ADMIN,
|
||||
PAGADOR_ROLE_TERCEIRO,
|
||||
PAGADOR_STATUS_OPTIONS,
|
||||
} from "@/shared/lib/payers/constants";
|
||||
import { normalizeAvatarPath } from "@/shared/lib/payers/utils";
|
||||
import { noteSchema, uuidSchema } from "@/shared/lib/schemas/common";
|
||||
import type { ActionResult } from "@/shared/lib/types/actions";
|
||||
import { normalizeOptionalString } from "@/shared/utils/string";
|
||||
|
||||
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 currentUser = await getUser();
|
||||
const data = updateSchema.parse(input);
|
||||
|
||||
const existing = await db.query.pagadores.findFirst({
|
||||
where: and(
|
||||
eq(pagadores.id, data.id),
|
||||
eq(pagadores.userId, currentUser.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, currentUser.id)),
|
||||
);
|
||||
|
||||
// Se o pagador é admin, sincronizar nome com o usuário
|
||||
if (existing.role === PAGADOR_ROLE_ADMIN) {
|
||||
await db
|
||||
.update(user)
|
||||
.set({ name: data.name })
|
||||
.where(eq(user.id, currentUser.id));
|
||||
|
||||
revalidatePath("/", "layout");
|
||||
}
|
||||
|
||||
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.compartilhamentosPagador.findFirst({
|
||||
where: and(
|
||||
eq(compartilhamentosPagador.pagadorId, pagadorRow.id),
|
||||
eq(compartilhamentosPagador.sharedWithUserId, user.id),
|
||||
),
|
||||
});
|
||||
|
||||
if (existingShare) {
|
||||
return {
|
||||
success: false,
|
||||
error: "Você já possui acesso a este pagador.",
|
||||
};
|
||||
}
|
||||
|
||||
await db.insert(compartilhamentosPagador).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.compartilhamentosPagador.findFirst({
|
||||
columns: {
|
||||
id: true,
|
||||
pagadorId: true,
|
||||
sharedWithUserId: true,
|
||||
},
|
||||
where: eq(compartilhamentosPagador.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(compartilhamentosPagador)
|
||||
.where(eq(compartilhamentosPagador.id, data.shareId));
|
||||
|
||||
revalidate();
|
||||
revalidatePath(`/payers/${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(`/payers/${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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { RiBankCard2Line } from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import MoneyValues from "@/shared/components/money-values";
|
||||
import { CardContent } from "@/shared/components/ui/card";
|
||||
import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
|
||||
import { resolveLogoSrc } from "@/shared/lib/logo";
|
||||
import type { PagadorCardUsageItem } from "@/shared/lib/payers/details";
|
||||
|
||||
const buildInitials = (value: string) => {
|
||||
const parts = value.trim().split(/\s+/).filter(Boolean);
|
||||
if (parts.length === 0) return "CC";
|
||||
if (parts.length === 1) {
|
||||
const firstPart = parts[0];
|
||||
return firstPart ? firstPart.slice(0, 2).toUpperCase() : "CC";
|
||||
}
|
||||
const firstChar = parts[0]?.[0] ?? "";
|
||||
const secondChar = parts[1]?.[0] ?? "";
|
||||
return `${firstChar}${secondChar}`.toUpperCase() || "CC";
|
||||
};
|
||||
|
||||
type PagadorCardUsageCardProps = {
|
||||
items: PagadorCardUsageItem[];
|
||||
};
|
||||
|
||||
export function PagadorCardUsageCard({ items }: PagadorCardUsageCardProps) {
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<CardContent className="px-0">
|
||||
<WidgetEmptyState
|
||||
icon={<RiBankCard2Line className="size-6 text-muted-foreground" />}
|
||||
title="Nenhum lançamento com cartão de crédito"
|
||||
description="Quando houver despesas registradas com cartão, elas aparecerão aqui."
|
||||
/>
|
||||
</CardContent>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CardContent className="flex flex-col gap-4 px-0">
|
||||
<ul className="flex flex-col">
|
||||
{items.map((item) => {
|
||||
const logoPath = resolveLogoSrc(item.logo);
|
||||
const initials = buildInitials(item.name);
|
||||
return (
|
||||
<li
|
||||
key={item.id}
|
||||
className="flex items-center justify-between border-b border-dashed last:border-b-0 last:pb-0"
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 py-2">
|
||||
<div className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full">
|
||||
{logoPath ? (
|
||||
<Image
|
||||
src={logoPath}
|
||||
alt={`Logo do cartão ${item.name}`}
|
||||
width={36}
|
||||
height={36}
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-sm font-semibold uppercase text-muted-foreground">
|
||||
{initials}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<span className="block truncate text-sm font-medium text-foreground">
|
||||
{item.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Despesas no mês
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<MoneyValues amount={item.amount} />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</CardContent>
|
||||
);
|
||||
}
|
||||
365
src/features/payers/components/details/payer-header-card.tsx
Normal file
365
src/features/payers/components/details/payer-header-card.tsx
Normal file
@@ -0,0 +1,365 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
RiBankCard2Line,
|
||||
RiBillLine,
|
||||
RiExchangeDollarLine,
|
||||
RiMailLine,
|
||||
RiMailSendLine,
|
||||
RiVerifiedBadgeFill,
|
||||
} from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { sendPagadorSummaryAction } from "@/features/payers/detail-actions";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/components/ui/dialog";
|
||||
import { PAGADOR_ROLE_ADMIN } from "@/shared/lib/payers/constants";
|
||||
import { getAvatarSrc } from "@/shared/lib/payers/utils";
|
||||
import { formatCurrency } from "@/shared/utils/currency";
|
||||
import { formatDateTime } from "@/shared/utils/date";
|
||||
import type { PagadorInfo, PagadorSummaryPreview } from "./types";
|
||||
|
||||
type PagadorHeaderCardProps = {
|
||||
pagador: PagadorInfo;
|
||||
selectedPeriod: string;
|
||||
summary: PagadorSummaryPreview;
|
||||
};
|
||||
|
||||
export function PagadorHeaderCard({
|
||||
pagador,
|
||||
selectedPeriod,
|
||||
summary,
|
||||
}: PagadorHeaderCardProps) {
|
||||
const router = useRouter();
|
||||
const [isSending, startTransition] = useTransition();
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
|
||||
const avatarSrc = getAvatarSrc(pagador.avatarUrl);
|
||||
const createdAtLabel = formatDate(pagador.createdAt);
|
||||
const isAdmin = pagador.role === PAGADOR_ROLE_ADMIN;
|
||||
|
||||
const lastMailLabel =
|
||||
formatDateTime(pagador.lastMailAt, {
|
||||
dateStyle: "short",
|
||||
timeStyle: "short",
|
||||
}) ?? "Nunca enviado";
|
||||
|
||||
const disableSend = isSending || !pagador.email || !pagador.canEdit;
|
||||
|
||||
const openConfirmDialog = () => {
|
||||
if (!pagador.email) {
|
||||
toast.error("Cadastre um e-mail para este pagador antes de enviar.");
|
||||
return;
|
||||
}
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const handleSendSummary = () => {
|
||||
if (!pagador.email) {
|
||||
toast.error("Cadastre um e-mail para este pagador antes de enviar.");
|
||||
return;
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await sendPagadorSummaryAction({
|
||||
pagadorId: pagador.id,
|
||||
period: selectedPeriod,
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(result.message);
|
||||
setConfirmOpen(false);
|
||||
router.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusBadgeVariant = (status: string): "success" | "outline" => {
|
||||
const normalizedStatus = status.toLowerCase();
|
||||
if (normalizedStatus === "ativo") {
|
||||
return "success";
|
||||
}
|
||||
return "outline";
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="mb-2 border gap-4">
|
||||
<CardHeader className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="flex flex-1 items-start gap-4">
|
||||
<div className="relative flex size-16 shrink-0 items-center justify-center overflow-hidden">
|
||||
<Image
|
||||
src={avatarSrc}
|
||||
alt={`Avatar de ${pagador.name}`}
|
||||
width={64}
|
||||
height={64}
|
||||
className="h-full w-full rounded-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<CardTitle className="text-xl font-semibold text-foreground">
|
||||
{pagador.name}
|
||||
</CardTitle>
|
||||
{isAdmin ? (
|
||||
<RiVerifiedBadgeFill
|
||||
className="size-4 text-sky-500"
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
<Badge
|
||||
variant={getStatusBadgeVariant(pagador.status)}
|
||||
className="text-xs"
|
||||
>
|
||||
{pagador.status}
|
||||
</Badge>
|
||||
{pagador.isAutoSend ? (
|
||||
<Badge variant="info" className="gap-1 text-xs">
|
||||
<RiMailSendLine className="size-3.5" aria-hidden />
|
||||
Envio automático
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<CardDescription className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
|
||||
<span>Criado em {createdAtLabel}</span>
|
||||
<span className="hidden text-border/80 sm:inline">•</span>
|
||||
{pagador.email ? (
|
||||
<Link
|
||||
prefetch
|
||||
href={`mailto:${pagador.email}`}
|
||||
className="inline-flex items-center gap-1.5 text-primary"
|
||||
>
|
||||
<RiMailLine className="size-4" aria-hidden />
|
||||
{pagador.email}
|
||||
</Link>
|
||||
) : (
|
||||
<span>Sem e-mail cadastrado</span>
|
||||
)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col items-stretch gap-2 lg:w-auto lg:items-end">
|
||||
{pagador.canEdit ? (
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={openConfirmDialog}
|
||||
disabled={disableSend}
|
||||
className="w-full min-w-[180px] lg:w-auto"
|
||||
>
|
||||
{isSending ? "Enviando..." : "Enviar resumo"}
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Último envio: {lastMailLabel}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<Badge variant="outline" className="justify-center text-xs">
|
||||
Acesso somente leitura
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{pagador.canEdit ? (
|
||||
<Dialog
|
||||
open={confirmOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (isSending) return;
|
||||
setConfirmOpen(open);
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirmar envio do resumo</DialogTitle>
|
||||
<DialogDescription>
|
||||
Resumo de{" "}
|
||||
<span className="font-semibold text-foreground">
|
||||
{summary.periodLabel}
|
||||
</span>{" "}
|
||||
para{" "}
|
||||
<span className="font-medium text-foreground">
|
||||
{pagador.email}
|
||||
</span>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-full bg-primary/10">
|
||||
<RiExchangeDollarLine className="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
Total de Despesas
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-foreground">
|
||||
{formatCurrency(summary.totalExpenses)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{summary.lancamentoCount} lançamentos
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-lg border p-3">
|
||||
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
|
||||
<RiBankCard2Line className="size-4" />
|
||||
<span className="text-xs font-semibold uppercase">
|
||||
Cartões
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-lg font-bold text-foreground">
|
||||
{formatCurrency(summary.paymentSplits.card)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border p-3">
|
||||
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
|
||||
<RiBillLine className="size-4" />
|
||||
<span className="text-xs font-semibold uppercase">
|
||||
Boletos
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-lg font-bold text-foreground">
|
||||
{formatCurrency(summary.paymentSplits.boleto)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border p-3">
|
||||
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
|
||||
<RiExchangeDollarLine className="size-4" />
|
||||
<span className="text-xs font-semibold uppercase">
|
||||
Pix/Débito
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-lg font-bold text-foreground">
|
||||
{formatCurrency(summary.paymentSplits.instant)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{summary.cardUsage.length > 0 && (
|
||||
<div className="rounded-lg border p-3">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<RiBankCard2Line className="size-4 text-muted-foreground" />
|
||||
<span className="text-xs font-semibold uppercase text-muted-foreground">
|
||||
Cartões Utilizados
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{summary.cardUsage.map((card, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between text-sm"
|
||||
>
|
||||
<span className="text-foreground">{card.name}</span>
|
||||
<span className="font-medium text-foreground">
|
||||
{formatCurrency(card.amount)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(summary.boletoStats.paidCount > 0 ||
|
||||
summary.boletoStats.pendingCount > 0) && (
|
||||
<div className="rounded-lg border p-3">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<RiBillLine className="size-4 text-muted-foreground" />
|
||||
<span className="text-xs font-semibold uppercase text-muted-foreground">
|
||||
Status de Boletos
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Pagos</p>
|
||||
<p className="text-sm font-semibold text-success">
|
||||
{formatCurrency(summary.boletoStats.paidAmount)}{" "}
|
||||
<span className="text-xs font-normal">
|
||||
({summary.boletoStats.paidCount})
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Pendentes
|
||||
</p>
|
||||
<p className="text-sm font-semibold text-warning">
|
||||
{formatCurrency(summary.boletoStats.pendingAmount)}{" "}
|
||||
<span className="text-xs font-normal">
|
||||
({summary.boletoStats.pendingCount})
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={isSending}
|
||||
onClick={() => setConfirmOpen(false)}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSendSummary}
|
||||
disabled={disableSend}
|
||||
>
|
||||
{isSending ? "Enviando..." : "Confirmar envio"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
) : null}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const formatDate = (value: string) => {
|
||||
return (
|
||||
formatDateTime(value, {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}) ?? "—"
|
||||
);
|
||||
};
|
||||
112
src/features/payers/components/details/payer-history-card.tsx
Normal file
112
src/features/payers/components/details/payer-history-card.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import { RiBarChartLine } from "@remixicon/react";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
LabelList,
|
||||
type LabelProps,
|
||||
XAxis,
|
||||
} from "recharts";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/shared/components/ui/chart";
|
||||
import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
|
||||
import type { PagadorHistoryPoint } from "@/shared/lib/payers/details";
|
||||
import { currencyFormatter } from "@/shared/utils/currency";
|
||||
|
||||
const chartConfig = {
|
||||
despesas: {
|
||||
label: "Despesas",
|
||||
color: "hsl(356, 72%, 50%)",
|
||||
},
|
||||
};
|
||||
|
||||
type PagadorHistoryCardProps = {
|
||||
data: PagadorHistoryPoint[];
|
||||
};
|
||||
|
||||
const ValueLabel = (props: LabelProps) => {
|
||||
const { x, y, value, width } = props;
|
||||
if (typeof x !== "number" || typeof y !== "number" || width === undefined) {
|
||||
return null;
|
||||
}
|
||||
const labelX = x + (Number(width) ?? 0) / 2;
|
||||
const amount =
|
||||
typeof value === "number" ? currencyFormatter.format(value) : value;
|
||||
const labelY = Math.max(y - 6, 12);
|
||||
return (
|
||||
<text
|
||||
x={labelX}
|
||||
y={labelY}
|
||||
fill="currentColor"
|
||||
textAnchor="middle"
|
||||
className="text-[11px] font-semibold text-muted-foreground"
|
||||
>
|
||||
{amount}
|
||||
</text>
|
||||
);
|
||||
};
|
||||
|
||||
export function PagadorHistoryCard({ data }: PagadorHistoryCardProps) {
|
||||
const hasData = data.length > 0;
|
||||
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardHeader className="gap-1.5 pb-3">
|
||||
<CardTitle className="text-lg font-semibold">
|
||||
Evolução (últimos 6 meses)
|
||||
</CardTitle>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Despesas registradas para este pagador ao longo do tempo.
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="pt-0">
|
||||
{hasData ? (
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="mx-auto flex h-[210px] w-full max-w-[520px] items-center justify-center aspect-auto"
|
||||
>
|
||||
<BarChart
|
||||
data={data}
|
||||
barCategoryGap={16}
|
||||
margin={{ top: 28, right: 8, left: 8, bottom: 0 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
/>
|
||||
<ChartTooltip content={<ChartTooltipContent />} />
|
||||
<Bar
|
||||
dataKey="despesas"
|
||||
fill="var(--color-despesas)"
|
||||
radius={[6, 6, 0, 0]}
|
||||
>
|
||||
<LabelList dataKey="despesas" content={<ValueLabel />} />
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
) : (
|
||||
<WidgetEmptyState
|
||||
icon={<RiBarChartLine className="size-6 text-muted-foreground" />}
|
||||
title="Sem dados para exibir"
|
||||
description="Ainda não há movimentações suficientes para gerar este gráfico."
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
127
src/features/payers/components/details/payer-info-card.tsx
Normal file
127
src/features/payers/components/details/payer-info-card.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { RiUser3Line } from "@remixicon/react";
|
||||
import type { ReactNode } from "react";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
import { PAGADOR_ROLE_ADMIN } from "@/shared/lib/payers/constants";
|
||||
import { formatDateTime } from "@/shared/utils/date";
|
||||
import { cn } from "@/shared/utils/ui";
|
||||
import type { PagadorInfo } from "./types";
|
||||
|
||||
type PagadorInfoCardProps = {
|
||||
pagador: PagadorInfo;
|
||||
};
|
||||
|
||||
export function PagadorInfoCard({ pagador }: PagadorInfoCardProps) {
|
||||
const showSensitiveDetails = pagador.canEdit;
|
||||
|
||||
const getStatusBadgeVariant = (status: string): "success" | "outline" => {
|
||||
const normalizedStatus = status.toLowerCase();
|
||||
if (normalizedStatus === "ativo") {
|
||||
return "success";
|
||||
}
|
||||
return "outline";
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="border gap-4">
|
||||
<CardHeader className="gap-1.5">
|
||||
<CardTitle className="text-lg font-semibold">
|
||||
Detalhes do pagador
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{showSensitiveDetails
|
||||
? "Informações cadastrais e preferências de envio."
|
||||
: "Informações cadastrais visíveis para este compartilhamento."}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="grid gap-4 border-t border-dashed border-border/60 pt-6 text-sm sm:grid-cols-2">
|
||||
<InfoItem
|
||||
label="Status"
|
||||
value={
|
||||
<Badge
|
||||
variant={getStatusBadgeVariant(pagador.status)}
|
||||
className="text-xs"
|
||||
>
|
||||
{pagador.status}
|
||||
</Badge>
|
||||
}
|
||||
/>
|
||||
|
||||
<InfoItem
|
||||
label="Papel"
|
||||
value={
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<RiUser3Line className="size-4 text-muted-foreground" />
|
||||
{resolveRoleLabel(pagador.role)}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
{showSensitiveDetails ? (
|
||||
<InfoItem
|
||||
label="Envio automático"
|
||||
value={pagador.isAutoSend ? "Ativado" : "Desativado"}
|
||||
/>
|
||||
) : null}
|
||||
{showSensitiveDetails ? (
|
||||
<InfoItem
|
||||
label="Último envio"
|
||||
value={formatDateTime(pagador.lastMailAt) ?? "Nunca enviado"}
|
||||
/>
|
||||
) : null}
|
||||
{showSensitiveDetails && !pagador.email ? (
|
||||
<InfoItem
|
||||
label="Aviso"
|
||||
value={
|
||||
<span className="text-[13px] text-warning">
|
||||
Cadastre um e-mail para permitir o envio automático.
|
||||
</span>
|
||||
}
|
||||
className="sm:col-span-2"
|
||||
/>
|
||||
) : null}
|
||||
{showSensitiveDetails ? (
|
||||
<InfoItem
|
||||
label="Observações"
|
||||
value={
|
||||
pagador.note ? (
|
||||
<span className="text-muted-foreground">{pagador.note}</span>
|
||||
) : (
|
||||
"Sem observações"
|
||||
)
|
||||
}
|
||||
className="sm:col-span-2"
|
||||
/>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const resolveRoleLabel = (role: string | null) => {
|
||||
if (role === PAGADOR_ROLE_ADMIN) return "Administrador";
|
||||
return "Pagador";
|
||||
};
|
||||
|
||||
type InfoItemProps = {
|
||||
label: string;
|
||||
value: ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function InfoItem({ label, value, className }: InfoItemProps) {
|
||||
return (
|
||||
<div className={cn("space-y-1", className)}>
|
||||
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground/80">
|
||||
{label}
|
||||
</span>
|
||||
<div className="text-base text-foreground">{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
"use client";
|
||||
|
||||
import { RiLogoutBoxLine } from "@remixicon/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { deletePagadorShareAction } from "@/features/payers/actions";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
import { formatDateTime } from "@/shared/utils/date";
|
||||
|
||||
interface PagadorLeaveShareCardProps {
|
||||
shareId: string;
|
||||
pagadorName: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export function PagadorLeaveShareCard({
|
||||
shareId,
|
||||
pagadorName,
|
||||
createdAt,
|
||||
}: PagadorLeaveShareCardProps) {
|
||||
const router = useRouter();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
|
||||
const handleLeave = () => {
|
||||
startTransition(async () => {
|
||||
const result = await deletePagadorShareAction({ shareId });
|
||||
|
||||
if (!result.success) {
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success("Você saiu do compartilhamento.");
|
||||
router.push("/payers");
|
||||
});
|
||||
};
|
||||
|
||||
const formattedDate =
|
||||
formatDateTime(createdAt, {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}) ?? "—";
|
||||
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-semibold">
|
||||
Acesso Compartilhado
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Você tem acesso somente leitura aos dados de{" "}
|
||||
<strong>{pagadorName}</strong>.
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-col gap-2 rounded-lg border border-dashed p-4 text-sm">
|
||||
<span className="text-xs font-semibold uppercase text-muted-foreground/80">
|
||||
Informações do compartilhamento
|
||||
</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-sm">
|
||||
<span className="text-muted-foreground">Acesso desde:</span>{" "}
|
||||
<strong>{formattedDate}</strong>
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Você pode visualizar os lançamentos, mas não pode criar ou editar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!showConfirm ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setShowConfirm(true)}
|
||||
className="w-full"
|
||||
>
|
||||
<RiLogoutBoxLine className="size-4" />
|
||||
Sair do compartilhamento
|
||||
</Button>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-destructive">
|
||||
Tem certeza que deseja sair? Você perderá o acesso aos dados de{" "}
|
||||
{pagadorName}.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setShowConfirm(false)}
|
||||
disabled={isPending}
|
||||
className="flex-1"
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={handleLeave}
|
||||
disabled={isPending}
|
||||
className="flex-1"
|
||||
>
|
||||
{isPending ? "Saindo..." : "Confirmar saída"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import type { CSSProperties } from "react";
|
||||
import MoneyValues from "@/shared/components/money-values";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
import type { PagadorMonthlyBreakdown } from "@/shared/lib/payers/details";
|
||||
import { cn } from "@/shared/utils/ui";
|
||||
|
||||
const segmentConfig = {
|
||||
card: {
|
||||
label: "Cartões",
|
||||
color: "bg-violet-500",
|
||||
},
|
||||
boleto: {
|
||||
label: "Boletos",
|
||||
color: "bg-amber-500",
|
||||
},
|
||||
instant: {
|
||||
label: "Pix/Débito/Dinheiro",
|
||||
color: "bg-emerald-500",
|
||||
},
|
||||
} as const;
|
||||
|
||||
type PagadorMonthlySummaryCardProps = {
|
||||
periodLabel: string;
|
||||
breakdown: PagadorMonthlyBreakdown;
|
||||
};
|
||||
|
||||
export function PagadorMonthlySummaryCard({
|
||||
periodLabel,
|
||||
breakdown,
|
||||
}: PagadorMonthlySummaryCardProps) {
|
||||
const splittableEntries = (
|
||||
Object.keys(segmentConfig) as Array<keyof typeof segmentConfig>
|
||||
).map((key) => ({
|
||||
key,
|
||||
...segmentConfig[key],
|
||||
value: breakdown.paymentSplits[key],
|
||||
}));
|
||||
|
||||
const totalBase = splittableEntries.reduce(
|
||||
(sum, entry) => sum + entry.value,
|
||||
0,
|
||||
);
|
||||
|
||||
let offset = 0;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-1.5">
|
||||
<CardTitle className="text-lg font-semibold">Totais do mês</CardTitle>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{periodLabel} - Despesas por forma de pagamento
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4 pt-0">
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<span className="text-xs tracking-wide text-muted-foreground">
|
||||
Total
|
||||
</span>
|
||||
<MoneyValues
|
||||
amount={breakdown.totalExpenses}
|
||||
className="block text-2xl font-semibold text-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted">
|
||||
{splittableEntries.map((entry) => {
|
||||
const percent =
|
||||
totalBase > 0
|
||||
? Math.max((entry.value / totalBase) * 100, 0)
|
||||
: 0;
|
||||
const style: CSSProperties = {
|
||||
width: `${percent}%`,
|
||||
left: `${offset}%`,
|
||||
};
|
||||
offset += percent;
|
||||
return (
|
||||
<span
|
||||
key={entry.key}
|
||||
className={cn(
|
||||
"absolute inset-y-0 rounded-full transition-all",
|
||||
entry.color,
|
||||
)}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
{splittableEntries.map((entry) => {
|
||||
const percent =
|
||||
totalBase > 0 ? Math.round((entry.value / totalBase) * 100) : 0;
|
||||
return (
|
||||
<div key={entry.key} className="space-y-1 rounded-lg border p-3">
|
||||
<span className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/70">
|
||||
<span
|
||||
className={cn("size-2 rounded-full", entry.color)}
|
||||
aria-hidden
|
||||
/>
|
||||
{entry.label}
|
||||
</span>
|
||||
<MoneyValues
|
||||
amount={entry.value}
|
||||
className="block text-lg font-semibold text-foreground"
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{percent}% das despesas
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import {
|
||||
RiBarcodeLine,
|
||||
RiCheckboxCircleLine,
|
||||
RiHourglass2Line,
|
||||
RiWallet3Line,
|
||||
} from "@remixicon/react";
|
||||
import { buildBillStatusLabel } from "@/features/dashboard/bills-helpers";
|
||||
import { EstabelecimentoLogo } from "@/features/transactions/components/shared/establishment-logo";
|
||||
import MoneyValues from "@/shared/components/money-values";
|
||||
import { CardContent } from "@/shared/components/ui/card";
|
||||
import { Progress } from "@/shared/components/ui/progress";
|
||||
import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
|
||||
import type {
|
||||
PagadorBoletoItem,
|
||||
PagadorPaymentStatusData,
|
||||
} from "@/shared/lib/payers/details";
|
||||
import { cn } from "@/shared/utils/ui";
|
||||
|
||||
// --- PagadorBoletoCard ---
|
||||
|
||||
type PagadorBoletoCardProps = {
|
||||
items: PagadorBoletoItem[];
|
||||
};
|
||||
|
||||
export function PagadorBoletoCard({ items }: PagadorBoletoCardProps) {
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<CardContent className="px-0">
|
||||
<WidgetEmptyState
|
||||
icon={<RiBarcodeLine className="size-6 text-muted-foreground" />}
|
||||
title="Nenhum boleto cadastrado para o período"
|
||||
description="Quando houver despesas registradas com boleto, elas aparecerão aqui."
|
||||
/>
|
||||
</CardContent>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CardContent className="flex flex-col gap-4 px-0">
|
||||
<ul className="flex flex-col">
|
||||
{items.map((item) => {
|
||||
const statusLabel = buildBillStatusLabel(item);
|
||||
return (
|
||||
<li
|
||||
key={item.id}
|
||||
className="flex items-center justify-between border-b border-dashed last:border-b-0 last:pb-0"
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-3 py-2">
|
||||
<EstabelecimentoLogo name={item.name} size={36} />
|
||||
<div className="min-w-0">
|
||||
<span className="block truncate text-sm font-medium text-foreground">
|
||||
{item.name}
|
||||
</span>
|
||||
{statusLabel ? (
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs text-muted-foreground",
|
||||
item.isSettled && "text-success",
|
||||
)}
|
||||
>
|
||||
{statusLabel}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<MoneyValues amount={item.amount} />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</CardContent>
|
||||
);
|
||||
}
|
||||
|
||||
// --- PagadorPaymentStatusCard ---
|
||||
|
||||
type PagadorPaymentStatusCardProps = {
|
||||
data: PagadorPaymentStatusData;
|
||||
};
|
||||
|
||||
export function PagadorPaymentStatusCard({
|
||||
data,
|
||||
}: PagadorPaymentStatusCardProps) {
|
||||
const { paidAmount, paidCount, pendingAmount, pendingCount, totalAmount } =
|
||||
data;
|
||||
|
||||
if (totalAmount === 0) {
|
||||
return (
|
||||
<CardContent className="px-0">
|
||||
<WidgetEmptyState
|
||||
icon={<RiWallet3Line className="size-6 text-muted-foreground" />}
|
||||
title="Nenhuma despesa no período"
|
||||
description="Registre lançamentos para visualizar o status de pagamento."
|
||||
/>
|
||||
</CardContent>
|
||||
);
|
||||
}
|
||||
|
||||
const paidPercentage = (paidAmount / totalAmount) * 100;
|
||||
|
||||
return (
|
||||
<CardContent className="space-y-6 px-0">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-foreground">Pago</span>
|
||||
<MoneyValues amount={paidAmount} />
|
||||
</div>
|
||||
<Progress value={paidPercentage} className="h-2" />
|
||||
<div className="flex items-center justify-between gap-4 text-sm">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<RiCheckboxCircleLine className="size-3 text-success" />
|
||||
<MoneyValues amount={paidAmount} />
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({paidCount} registro{paidCount !== 1 ? "s" : ""})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-dashed" />
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-foreground">Pendente</span>
|
||||
<MoneyValues amount={pendingAmount} />
|
||||
</div>
|
||||
<Progress value={100 - paidPercentage} className="h-2" />
|
||||
<div className="flex items-center justify-between gap-4 text-sm">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<RiHourglass2Line className="size-3 text-warning" />
|
||||
<MoneyValues amount={pendingAmount} />
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({pendingCount} registro{pendingCount !== 1 ? "s" : ""})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
);
|
||||
}
|
||||
165
src/features/payers/components/details/payer-sharing-card.tsx
Normal file
165
src/features/payers/components/details/payer-sharing-card.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
"use client";
|
||||
|
||||
import { RiDeleteBin5Line } from "@remixicon/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
deletePagadorShareAction,
|
||||
regeneratePagadorShareCodeAction,
|
||||
} from "@/features/payers/actions";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
|
||||
type PagadorShare = {
|
||||
id: string;
|
||||
userId: string;
|
||||
name: string;
|
||||
email: string;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
interface PagadorSharingCardProps {
|
||||
pagadorId: string;
|
||||
shareCode: string;
|
||||
shares: PagadorShare[];
|
||||
}
|
||||
|
||||
export function PagadorSharingCard({
|
||||
pagadorId,
|
||||
shareCode,
|
||||
shares,
|
||||
}: PagadorSharingCardProps) {
|
||||
const router = useRouter();
|
||||
const [currentCode, setCurrentCode] = useState(shareCode);
|
||||
const [regeneratePending, startRegenerate] = useTransition();
|
||||
const [removePendingId, setRemovePendingId] = useState<string | null>(null);
|
||||
|
||||
const handleCopyCode = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(currentCode);
|
||||
toast.success("Código copiado para a área de transferência.");
|
||||
} catch {
|
||||
toast.error("Não foi possível copiar o código.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegenerate = () => {
|
||||
startRegenerate(async () => {
|
||||
const result = await regeneratePagadorShareCodeAction({ pagadorId });
|
||||
|
||||
if (!result.success) {
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentCode(result.code);
|
||||
toast.success("Novo código gerado com sucesso.");
|
||||
router.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemove = (shareId: string) => {
|
||||
setRemovePendingId(shareId);
|
||||
startRegenerate(async () => {
|
||||
const result = await deletePagadorShareAction({ shareId });
|
||||
|
||||
if (!result.success) {
|
||||
toast.error(result.error);
|
||||
setRemovePendingId(null);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(result.message);
|
||||
setRemovePendingId(null);
|
||||
router.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-semibold">
|
||||
Compartilhamentos
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Compartilhe o código abaixo com outra pessoa. Ela poderá adicioná-lo
|
||||
na página de pagadores usando a opção Adicionar por código para ter
|
||||
acesso somente leitura.
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-col gap-2 rounded-lg border border-dashed p-4 text-sm">
|
||||
<span className="text-xs font-semibold uppercase text-muted-foreground/80">
|
||||
Código de compartilhamento
|
||||
</span>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<code className="rounded bg-muted px-2 py-1 text-xs font-mono">
|
||||
{currentCode}
|
||||
</code>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleCopyCode}
|
||||
>
|
||||
Copiar
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={handleRegenerate}
|
||||
disabled={regeneratePending}
|
||||
>
|
||||
{regeneratePending ? "Gerando..." : "Gerar novo código"}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Gerar um novo código não remove acessos existentes, apenas impede
|
||||
que novos convites usem o código anterior.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{shares.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhum usuário com acesso de leitura.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{shares.map((share) => (
|
||||
<li
|
||||
key={share.id}
|
||||
className="flex items-center justify-between rounded-lg border border-dashed p-4 text-sm"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium text-foreground">
|
||||
{share.name}
|
||||
</span>
|
||||
<span className="text-muted-foreground">{share.email}</span>
|
||||
<span className="text-xs text-muted-foreground/80">
|
||||
ID: ****{share.userId.slice(-4)}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => handleRemove(share.id)}
|
||||
disabled={removePendingId === share.id}
|
||||
>
|
||||
<RiDeleteBin5Line className="size-4" />
|
||||
<span className="sr-only">Remover acesso</span>
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
33
src/features/payers/components/details/types.ts
Normal file
33
src/features/payers/components/details/types.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
export type PagadorInfo = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string | null;
|
||||
avatarUrl: string | null;
|
||||
status: string;
|
||||
note: string | null;
|
||||
role: string | null;
|
||||
isAutoSend: boolean;
|
||||
createdAt: string;
|
||||
lastMailAt: string | null;
|
||||
shareCode: string | null;
|
||||
canEdit: boolean;
|
||||
};
|
||||
|
||||
export type PagadorSummaryPreview = {
|
||||
periodLabel: string;
|
||||
totalExpenses: number;
|
||||
paymentSplits: {
|
||||
card: number;
|
||||
boleto: number;
|
||||
instant: number;
|
||||
};
|
||||
cardUsage: { name: string; amount: number }[];
|
||||
boletoStats: {
|
||||
totalAmount: number;
|
||||
paidAmount: number;
|
||||
pendingAmount: number;
|
||||
paidCount: number;
|
||||
pendingCount: number;
|
||||
};
|
||||
lancamentoCount: number;
|
||||
};
|
||||
116
src/features/payers/components/payer-card.tsx
Normal file
116
src/features/payers/components/payer-card.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
RiDeleteBin5Line,
|
||||
RiFileList2Line,
|
||||
RiMailSendLine,
|
||||
RiPencilLine,
|
||||
RiVerifiedBadgeFill,
|
||||
} from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { Card } from "@/shared/components/ui/card";
|
||||
import { PAGADOR_ROLE_ADMIN } from "@/shared/lib/payers/constants";
|
||||
import { getAvatarSrc } from "@/shared/lib/payers/utils";
|
||||
import type { Pagador } from "./types";
|
||||
|
||||
interface PagadorCardProps {
|
||||
pagador: Pagador;
|
||||
onEdit?: () => void;
|
||||
onRemove?: () => void;
|
||||
}
|
||||
|
||||
export function PagadorCard({ pagador, onEdit, onRemove }: PagadorCardProps) {
|
||||
const avatarSrc = getAvatarSrc(pagador.avatarUrl);
|
||||
const isAdmin = pagador.role === PAGADOR_ROLE_ADMIN;
|
||||
const isReadOnly = !pagador.canEdit;
|
||||
|
||||
return (
|
||||
<Card className=" overflow-hidden px-6">
|
||||
{/* Avatar posicionado sobre o header */}
|
||||
<div className="relative flex flex-col items-start">
|
||||
<div className="relative mb-3 flex size-16 items-center justify-center overflow-hidden rounded-full border-background bg-background shadow-lg">
|
||||
<Image
|
||||
src={avatarSrc}
|
||||
alt={`Avatar de ${pagador.name}`}
|
||||
width={80}
|
||||
height={80}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Nome e badges */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<h3 className="text-base font-semibold text-foreground">
|
||||
{pagador.name}
|
||||
</h3>
|
||||
{isAdmin ? (
|
||||
<RiVerifiedBadgeFill className="size-4 text-blue-500" aria-hidden />
|
||||
) : null}
|
||||
{pagador.isAutoSend ? (
|
||||
<RiMailSendLine className="size-4 text-primary" aria-hidden />
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
{pagador.email ? (
|
||||
<p className="mt-1 text-xs text-muted-foreground">{pagador.email}</p>
|
||||
) : (
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
Sem email cadastrado
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Status badges */}
|
||||
<div className="mt-2 flex flex-wrap items-center justify-center gap-1.5">
|
||||
<Badge
|
||||
variant={pagador.status === "Ativo" ? "success" : "outline"}
|
||||
className="text-xs"
|
||||
>
|
||||
{pagador.status}
|
||||
</Badge>
|
||||
|
||||
{isReadOnly ? (
|
||||
<Badge variant="outline" className="text-xs text-warning">
|
||||
Somente leitura
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer com links */}
|
||||
<div className="flex flex-wrap items-start justify-start gap-3 text-sm font-medium">
|
||||
{!isReadOnly && onEdit ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onEdit}
|
||||
className={`text-primary flex items-center gap-1 font-medium transition-opacity hover:opacity-80`}
|
||||
>
|
||||
<RiPencilLine className="size-4" aria-hidden />
|
||||
editar
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
<Link
|
||||
href={`/payers/${pagador.id}`}
|
||||
className={`text-primary flex items-center gap-1 font-medium transition-opacity hover:opacity-80`}
|
||||
>
|
||||
<RiFileList2Line className="size-4" aria-hidden />
|
||||
detalhes
|
||||
</Link>
|
||||
|
||||
{!isAdmin && !isReadOnly && onRemove ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
className={`text-destructive flex items-center gap-1 font-medium transition-opacity hover:opacity-80`}
|
||||
>
|
||||
<RiDeleteBin5Line className="size-4" aria-hidden />
|
||||
remover
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
331
src/features/payers/components/payer-dialog.tsx
Normal file
331
src/features/payers/components/payer-dialog.tsx
Normal file
@@ -0,0 +1,331 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import { useEffect, useMemo, useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
createPagadorAction,
|
||||
updatePagadorAction,
|
||||
} from "@/features/payers/actions";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Checkbox } from "@/shared/components/ui/checkbox";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/components/ui/dialog";
|
||||
import { Input } from "@/shared/components/ui/input";
|
||||
import { Label } from "@/shared/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/components/ui/select";
|
||||
import { useControlledState } from "@/shared/hooks/use-controlled-state";
|
||||
import { useFormState } from "@/shared/hooks/use-form-state";
|
||||
import {
|
||||
DEFAULT_PAGADOR_AVATAR,
|
||||
PAGADOR_STATUS_OPTIONS,
|
||||
type PagadorStatus,
|
||||
} from "@/shared/lib/payers/constants";
|
||||
import { getAvatarSrc } from "@/shared/lib/payers/utils";
|
||||
import { StatusSelectContent } from "./payer-select-items";
|
||||
import type { Pagador, PagadorFormValues } from "./types";
|
||||
|
||||
interface PagadorDialogProps {
|
||||
mode: "create" | "update";
|
||||
trigger?: React.ReactNode;
|
||||
pagador?: Pagador;
|
||||
avatarOptions: string[];
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const buildInitialValues = ({
|
||||
pagador,
|
||||
avatarOptions,
|
||||
}: {
|
||||
pagador?: Pagador;
|
||||
avatarOptions: string[];
|
||||
}): PagadorFormValues => {
|
||||
const defaultAvatar = avatarOptions[0] ?? DEFAULT_PAGADOR_AVATAR;
|
||||
|
||||
return {
|
||||
name: pagador?.name ?? "",
|
||||
email: pagador?.email ?? "",
|
||||
status: (pagador?.status as PagadorStatus) ?? PAGADOR_STATUS_OPTIONS[0],
|
||||
avatarUrl: pagador?.avatarUrl ?? defaultAvatar,
|
||||
note: pagador?.note ?? "",
|
||||
isAutoSend: pagador?.isAutoSend ?? false,
|
||||
};
|
||||
};
|
||||
|
||||
export function PagadorDialog({
|
||||
mode,
|
||||
trigger,
|
||||
pagador,
|
||||
avatarOptions,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: PagadorDialogProps) {
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
// Use controlled state hook for dialog open state
|
||||
const [dialogOpen, setDialogOpen] = useControlledState(
|
||||
open,
|
||||
false,
|
||||
onOpenChange,
|
||||
);
|
||||
|
||||
const initialState = useMemo(
|
||||
() => buildInitialValues({ pagador, avatarOptions }),
|
||||
[pagador, avatarOptions],
|
||||
);
|
||||
|
||||
// Use form state hook for form management
|
||||
const { formState, resetForm, updateField } =
|
||||
useFormState<PagadorFormValues>(initialState);
|
||||
|
||||
const availableAvatars = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
avatarOptions.forEach((avatar) => set.add(avatar));
|
||||
set.add(initialState.avatarUrl);
|
||||
set.add(DEFAULT_PAGADOR_AVATAR);
|
||||
return Array.from(set).sort((a, b) =>
|
||||
a.localeCompare(b, "pt-BR", { sensitivity: "base" }),
|
||||
);
|
||||
}, [avatarOptions, initialState.avatarUrl]);
|
||||
|
||||
// Reset form when dialog opens
|
||||
useEffect(() => {
|
||||
if (dialogOpen) {
|
||||
resetForm(initialState);
|
||||
setErrorMessage(null);
|
||||
}
|
||||
}, [dialogOpen, initialState, resetForm]);
|
||||
|
||||
type PagadorCreatePayload = Parameters<typeof createPagadorAction>[0];
|
||||
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setErrorMessage(null);
|
||||
const pagadorId = pagador?.id;
|
||||
|
||||
if (mode === "update" && !pagadorId) {
|
||||
const message = "Pagador inválido.";
|
||||
setErrorMessage(message);
|
||||
toast.error(message);
|
||||
return;
|
||||
}
|
||||
|
||||
const emailValue = formState.email.trim();
|
||||
const payload: PagadorCreatePayload = {
|
||||
name: formState.name.trim(),
|
||||
status: formState.status,
|
||||
avatarUrl: formState.avatarUrl,
|
||||
email: emailValue || null,
|
||||
note: formState.note.trim() || null,
|
||||
isAutoSend: formState.isAutoSend,
|
||||
};
|
||||
|
||||
startTransition(async () => {
|
||||
if (mode === "create") {
|
||||
const result = await createPagadorAction(payload);
|
||||
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
setDialogOpen(false);
|
||||
resetForm(initialState);
|
||||
return;
|
||||
}
|
||||
|
||||
setErrorMessage(result.error);
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!pagadorId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await updatePagadorAction({
|
||||
id: pagadorId,
|
||||
...payload,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
setDialogOpen(false);
|
||||
resetForm(initialState);
|
||||
return;
|
||||
}
|
||||
|
||||
setErrorMessage(result.error);
|
||||
toast.error(result.error);
|
||||
});
|
||||
};
|
||||
|
||||
const title = mode === "create" ? "Novo pagador" : "Editar pagador";
|
||||
const description =
|
||||
mode === "create"
|
||||
? "Selecione um avatar e informe os detalhes para criar um novo pagador."
|
||||
: "Atualize os detalhes do pagador selecionado.";
|
||||
const submitLabel =
|
||||
mode === "create" ? "Salvar pagador" : "Atualizar pagador";
|
||||
|
||||
return (
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
{trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
|
||||
<DialogContent className="max-w-2xl px-6 py-5 sm:px-8 sm:py-6">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form className="flex flex-col gap-6" onSubmit={handleSubmit}>
|
||||
<fieldset className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex w-full gap-2">
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<Label htmlFor="pagador-name">Nome</Label>
|
||||
<Input
|
||||
id="pagador-name"
|
||||
value={formState.name}
|
||||
onChange={(event) =>
|
||||
updateField("name", event.target.value)
|
||||
}
|
||||
placeholder="Ex.: Felipe Coutinho"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<Label htmlFor="pagador-email">E-mail</Label>
|
||||
<Input
|
||||
id="pagador-email"
|
||||
type="email"
|
||||
value={formState.email}
|
||||
onChange={(event) =>
|
||||
updateField("email", event.target.value)
|
||||
}
|
||||
placeholder="Ex.: felipe@email.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="pagador-status">Status</Label>
|
||||
<Select
|
||||
value={formState.status}
|
||||
onValueChange={(value: PagadorStatus) =>
|
||||
updateField("status", value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="pagador-status" className="w-full">
|
||||
<SelectValue placeholder="Selecione o status">
|
||||
{formState.status && (
|
||||
<StatusSelectContent label={formState.status} />
|
||||
)}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PAGADOR_STATUS_OPTIONS.map((status) => (
|
||||
<SelectItem key={status} value={status}>
|
||||
<StatusSelectContent label={status} />
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<fieldset className="flex flex-col gap-3">
|
||||
<div className="flex items-start gap-3 rounded-lg border border-border/60 bg-muted/10 p-3">
|
||||
<Checkbox
|
||||
id="pagador-auto-send"
|
||||
checked={formState.isAutoSend}
|
||||
onCheckedChange={(checked) =>
|
||||
updateField("isAutoSend", Boolean(checked))
|
||||
}
|
||||
aria-label="Ativar envio automático"
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
<Label
|
||||
htmlFor="pagador-auto-send"
|
||||
className="text-sm font-medium text-foreground"
|
||||
>
|
||||
Enviar automaticamente
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Dispare cobranças e lembretes sem intervenção manual.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset className="flex flex-col gap-2">
|
||||
<Label>Avatar</Label>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{availableAvatars.map((avatar) => {
|
||||
const isSelected = avatar === formState.avatarUrl;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={avatar}
|
||||
onClick={() => updateField("avatarUrl", avatar)}
|
||||
className="group relative flex items-center justify-center rounded-full p-0.5 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 data-[selected=true]:ring-2 data-[selected=true]:ring-primary"
|
||||
data-selected={isSelected}
|
||||
aria-pressed={isSelected}
|
||||
>
|
||||
<Image
|
||||
src={getAvatarSrc(avatar)}
|
||||
alt={`Avatar ${avatar}`}
|
||||
width={40}
|
||||
height={40}
|
||||
className="size-12 rounded-full object-cove hover:scale-110 transition-transform duration-200"
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="pagador-note">Anotações</Label>
|
||||
<Input
|
||||
id="pagador-note"
|
||||
value={formState.note}
|
||||
onChange={(event) => updateField("note", event.target.value)}
|
||||
placeholder="Observações sobre este pagador"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-destructive">{errorMessage}</p>
|
||||
) : null}
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setDialogOpen(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={isPending}>
|
||||
{isPending ? "Salvando..." : submitLabel}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
16
src/features/payers/components/payer-select-items.tsx
Normal file
16
src/features/payers/components/payer-select-items.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import StatusDot from "@/shared/components/status-dot";
|
||||
|
||||
export function StatusSelectContent({ label }: { label: string }) {
|
||||
const isActive = label === "Ativo";
|
||||
|
||||
return (
|
||||
<span className="flex items-center gap-2">
|
||||
<StatusDot
|
||||
color={isActive ? "bg-success" : "bg-slate-400 dark:bg-slate-500"}
|
||||
/>
|
||||
<span>{label}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
199
src/features/payers/components/payers-page.tsx
Normal file
199
src/features/payers/components/payers-page.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
"use client";
|
||||
|
||||
import { RiAddCircleLine } from "@remixicon/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMemo, useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
deletePagadorAction,
|
||||
joinPagadorByShareCodeAction,
|
||||
} from "@/features/payers/actions";
|
||||
import { PagadorCard } from "@/features/payers/components/payer-card";
|
||||
import { PagadorDialog } from "@/features/payers/components/payer-dialog";
|
||||
import { ConfirmActionDialog } from "@/shared/components/confirm-action-dialog";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Input } from "@/shared/components/ui/input";
|
||||
import { PAGADOR_ROLE_ADMIN } from "@/shared/lib/payers/constants";
|
||||
import type { Pagador } from "./types";
|
||||
|
||||
interface PagadoresPageProps {
|
||||
pagadores: Pagador[];
|
||||
avatarOptions: string[];
|
||||
}
|
||||
|
||||
export function PagadoresPage({
|
||||
pagadores,
|
||||
avatarOptions,
|
||||
}: PagadoresPageProps) {
|
||||
const router = useRouter();
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [selectedPagador, setSelectedPagador] = useState<Pagador | null>(null);
|
||||
const [removeOpen, setRemoveOpen] = useState(false);
|
||||
const [pagadorToRemove, setPagadorToRemove] = useState<Pagador | null>(null);
|
||||
const [shareCodeInput, setShareCodeInput] = useState("");
|
||||
const [joinPending, startJoin] = useTransition();
|
||||
|
||||
const orderedPagadores = useMemo(
|
||||
() =>
|
||||
[...pagadores].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 têm o mesmo tipo de role, ordena por nome
|
||||
return a.name.localeCompare(b.name, "pt-BR", { sensitivity: "base" });
|
||||
}),
|
||||
[pagadores],
|
||||
);
|
||||
|
||||
const handleEdit = (pagador: Pagador) => {
|
||||
setSelectedPagador(pagador);
|
||||
setEditOpen(true);
|
||||
};
|
||||
|
||||
const handleEditOpenChange = (open: boolean) => {
|
||||
setEditOpen(open);
|
||||
if (!open) {
|
||||
setSelectedPagador(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveRequest = (pagador: Pagador) => {
|
||||
if (pagador.role === PAGADOR_ROLE_ADMIN) {
|
||||
toast.error("Pagadores administradores não podem ser removidos.");
|
||||
return;
|
||||
}
|
||||
setPagadorToRemove(pagador);
|
||||
setRemoveOpen(true);
|
||||
};
|
||||
|
||||
const handleRemoveOpenChange = (open: boolean) => {
|
||||
setRemoveOpen(open);
|
||||
if (!open) {
|
||||
setPagadorToRemove(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveConfirm = async () => {
|
||||
if (!pagadorToRemove) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await deletePagadorAction({ id: pagadorToRemove.id });
|
||||
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error(result.error);
|
||||
throw new Error(result.error);
|
||||
};
|
||||
|
||||
const removeTitle = pagadorToRemove
|
||||
? `Remover pagador "${pagadorToRemove.name}"?`
|
||||
: "Remover pagador?";
|
||||
|
||||
const handleJoinByCode = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (!shareCodeInput.trim()) {
|
||||
toast.error("Informe um código válido.");
|
||||
return;
|
||||
}
|
||||
|
||||
startJoin(async () => {
|
||||
const result = await joinPagadorByShareCodeAction({
|
||||
code: shareCodeInput.trim(),
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(result.message);
|
||||
setShareCodeInput("");
|
||||
router.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-6 w-full">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<PagadorDialog
|
||||
mode="create"
|
||||
avatarOptions={avatarOptions}
|
||||
trigger={
|
||||
<Button className="w-full sm:w-auto">
|
||||
<RiAddCircleLine className="size-4" />
|
||||
Novo pagador
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<form
|
||||
onSubmit={handleJoinByCode}
|
||||
className="flex w-full flex-row items-center justify-center gap-2 sm:w-auto"
|
||||
>
|
||||
<Input
|
||||
placeholder="Código de Compartilhamento"
|
||||
value={shareCodeInput}
|
||||
onChange={(event) => setShareCodeInput(event.target.value)}
|
||||
disabled={joinPending}
|
||||
className="w-full sm:w-56 border-dashed"
|
||||
/>
|
||||
<Button type="submit" disabled={joinPending}>
|
||||
{joinPending ? "Adicionando..." : "Adicionar por código"}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{orderedPagadores.length === 0 ? (
|
||||
<div className="flex min-h-[320px] items-center justify-center rounded-lg border border-dashed bg-muted/30">
|
||||
<div className="max-w-sm text-center text-sm text-muted-foreground">
|
||||
Cadastre seu primeiro pagador para organizar cobranças e
|
||||
pagamentos recorrentes.
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
|
||||
{orderedPagadores.map((pagador) => (
|
||||
<PagadorCard
|
||||
key={pagador.id}
|
||||
pagador={pagador}
|
||||
onEdit={pagador.canEdit ? () => handleEdit(pagador) : undefined}
|
||||
onRemove={
|
||||
pagador.canEdit && pagador.role !== PAGADOR_ROLE_ADMIN
|
||||
? () => handleRemoveRequest(pagador)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PagadorDialog
|
||||
mode="update"
|
||||
pagador={selectedPagador ?? undefined}
|
||||
avatarOptions={avatarOptions}
|
||||
open={editOpen && !!selectedPagador}
|
||||
onOpenChange={handleEditOpenChange}
|
||||
/>
|
||||
|
||||
<ConfirmActionDialog
|
||||
open={removeOpen && !!pagadorToRemove}
|
||||
onOpenChange={handleRemoveOpenChange}
|
||||
title={removeTitle}
|
||||
description="Ao remover este pagador, os registros relacionados a ele deixarão de ser associados automaticamente."
|
||||
confirmLabel="Remover pagador"
|
||||
pendingLabel="Removendo..."
|
||||
confirmVariant="destructive"
|
||||
onConfirm={handleRemoveConfirm}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
27
src/features/payers/components/types.ts
Normal file
27
src/features/payers/components/types.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import type { PagadorStatus } from "@/shared/lib/payers/constants";
|
||||
|
||||
export type Pagador = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string | null;
|
||||
avatarUrl: string | null;
|
||||
status: PagadorStatus;
|
||||
note: string | null;
|
||||
role: string | null;
|
||||
isAutoSend: boolean;
|
||||
createdAt: string;
|
||||
canEdit: boolean;
|
||||
sharedByName?: string | null;
|
||||
sharedByEmail?: string | null;
|
||||
shareId?: string | null;
|
||||
shareCode?: string | null;
|
||||
};
|
||||
|
||||
export type PagadorFormValues = {
|
||||
name: string;
|
||||
email: string;
|
||||
status: PagadorStatus;
|
||||
avatarUrl: string;
|
||||
note: string;
|
||||
isAutoSend: boolean;
|
||||
};
|
||||
620
src/features/payers/detail-actions.ts
Normal file
620
src/features/payers/detail-actions.ts
Normal file
@@ -0,0 +1,620 @@
|
||||
"use server";
|
||||
|
||||
import { and, desc, eq } from "drizzle-orm";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { Resend } from "resend";
|
||||
import { z } from "zod";
|
||||
import { lancamentos, pagadores } from "@/db/schema";
|
||||
import { getUser } from "@/shared/lib/auth/server";
|
||||
import { db } from "@/shared/lib/db";
|
||||
import { getResendFromEmail } from "@/shared/lib/email/resend";
|
||||
import {
|
||||
fetchPagadorBoletoStats,
|
||||
fetchPagadorCardUsage,
|
||||
fetchPagadorHistory,
|
||||
fetchPagadorMonthlyBreakdown,
|
||||
} from "@/shared/lib/payers/details";
|
||||
import { formatCurrency } from "@/shared/utils/currency";
|
||||
import { formatDateTime } from "@/shared/utils/date";
|
||||
import { displayPeriod } from "@/shared/utils/period";
|
||||
|
||||
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 formatDate = (value: Date | null | undefined) => {
|
||||
return (
|
||||
formatDateTime(value, {
|
||||
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>OpenMonetis</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 = getResendFromEmail();
|
||||
|
||||
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 as Array<{
|
||||
name: string | null;
|
||||
amount: unknown;
|
||||
dueDate: Date | null;
|
||||
}>
|
||||
).map((row) => ({
|
||||
name: row.name ?? "Sem descrição",
|
||||
amount: Math.abs(Number(row.amount ?? 0)),
|
||||
dueDate: row.dueDate,
|
||||
}));
|
||||
|
||||
const normalizedLancamentos: LancamentoRow[] = (
|
||||
lancamentoRows as Array<{
|
||||
id: string;
|
||||
name: string | null;
|
||||
paymentMethod: string | null;
|
||||
condition: string | null;
|
||||
transactionType: string | null;
|
||||
purchaseDate: Date | null;
|
||||
amount: unknown;
|
||||
}>
|
||||
).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 as Array<{
|
||||
name: string | null;
|
||||
amount: unknown;
|
||||
installmentCount: number | null;
|
||||
currentInstallment: number | null;
|
||||
purchaseDate: Date | null;
|
||||
}>
|
||||
).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: displayPeriod(period),
|
||||
monthlyBreakdown,
|
||||
historyData,
|
||||
cardUsage,
|
||||
boletoStats,
|
||||
boletos: normalizedBoletos,
|
||||
lancamentos: normalizedLancamentos,
|
||||
parcelados: normalizedParcelados,
|
||||
});
|
||||
|
||||
await resend.emails.send({
|
||||
from: resendFrom,
|
||||
to: pagadorRow.email,
|
||||
subject: `Resumo Financeiro | ${displayPeriod(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(`/payers/${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.",
|
||||
};
|
||||
}
|
||||
}
|
||||
98
src/features/payers/detail-queries.ts
Normal file
98
src/features/payers/detail-queries.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
import { and, desc, eq, type SQL } from "drizzle-orm";
|
||||
import {
|
||||
cartoes,
|
||||
categorias,
|
||||
compartilhamentosPagador,
|
||||
contas,
|
||||
lancamentos,
|
||||
pagadores,
|
||||
user as usersTable,
|
||||
} from "@/db/schema";
|
||||
import { db } from "@/shared/lib/db";
|
||||
|
||||
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: compartilhamentosPagador.id,
|
||||
sharedWithUserId: compartilhamentosPagador.sharedWithUserId,
|
||||
createdAt: compartilhamentosPagador.createdAt,
|
||||
userName: usersTable.name,
|
||||
userEmail: usersTable.email,
|
||||
})
|
||||
.from(compartilhamentosPagador)
|
||||
.innerJoin(
|
||||
usersTable,
|
||||
eq(compartilhamentosPagador.sharedWithUserId, usersTable.id),
|
||||
)
|
||||
.where(eq(compartilhamentosPagador.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 fetchCurrentUserShare(
|
||||
pagadorId: string,
|
||||
userId: string,
|
||||
): Promise<{ id: string; createdAt: string } | null> {
|
||||
const shareRow = await db.query.compartilhamentosPagador.findFirst({
|
||||
columns: {
|
||||
id: true,
|
||||
createdAt: true,
|
||||
},
|
||||
where: and(
|
||||
eq(compartilhamentosPagador.pagadorId, pagadorId),
|
||||
eq(compartilhamentosPagador.sharedWithUserId, userId),
|
||||
),
|
||||
});
|
||||
|
||||
if (!shareRow) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
id: shareRow.id,
|
||||
createdAt: shareRow.createdAt?.toISOString() ?? new Date().toISOString(),
|
||||
};
|
||||
}
|
||||
|
||||
export async function fetchPagadorLancamentos(filters: SQL[]) {
|
||||
const lancamentoRows = await db
|
||||
.select({
|
||||
lancamento: lancamentos,
|
||||
pagador: pagadores,
|
||||
conta: contas,
|
||||
cartao: cartoes,
|
||||
categoria: categorias,
|
||||
})
|
||||
.from(lancamentos)
|
||||
.leftJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
|
||||
.leftJoin(contas, eq(lancamentos.contaId, contas.id))
|
||||
.leftJoin(cartoes, eq(lancamentos.cartaoId, cartoes.id))
|
||||
.leftJoin(categorias, eq(lancamentos.categoriaId, categorias.id))
|
||||
.where(and(...filters))
|
||||
.orderBy(desc(lancamentos.purchaseDate), desc(lancamentos.createdAt));
|
||||
|
||||
// Transformar resultado para o formato esperado
|
||||
return lancamentoRows.map((row: Record<string, unknown>) => ({
|
||||
...row.lancamento,
|
||||
pagador: row.pagador,
|
||||
conta: row.conta,
|
||||
cartao: row.cartao,
|
||||
categoria: row.categoria,
|
||||
}));
|
||||
}
|
||||
30
src/features/payers/lib/avatar-options.ts
Normal file
30
src/features/payers/lib/avatar-options.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { readdir } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { DEFAULT_PAGADOR_AVATAR } from "@/shared/lib/payers/constants";
|
||||
|
||||
const AVATAR_DIRECTORY = path.join(process.cwd(), "public", "avatars");
|
||||
const AVATAR_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".svg", ".webp"]);
|
||||
|
||||
/**
|
||||
* Loads available avatar files from the public/avatars directory
|
||||
* @returns Array of unique avatar filenames sorted alphabetically
|
||||
*/
|
||||
export 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];
|
||||
}
|
||||
}
|
||||
97
src/features/payers/lib/build-readonly-option-sets.ts
Normal file
97
src/features/payers/lib/build-readonly-option-sets.ts
Normal file
@@ -0,0 +1,97 @@
|
||||
import type { pagadores } from "@/db/schema";
|
||||
import type {
|
||||
ContaCartaoFilterOption,
|
||||
LancamentoFilterOption,
|
||||
LancamentoItem,
|
||||
SelectOption,
|
||||
} from "@/features/transactions/components/types";
|
||||
import type { buildOptionSets } from "@/features/transactions/page-helpers";
|
||||
|
||||
type OptionSet = ReturnType<typeof buildOptionSets>;
|
||||
|
||||
const normalizeOptionLabel = (
|
||||
value: string | null | undefined,
|
||||
fallback: string,
|
||||
) => (value?.trim().length ? value.trim() : fallback);
|
||||
|
||||
export 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,
|
||||
};
|
||||
}
|
||||
80
src/features/payers/queries.ts
Normal file
80
src/features/payers/queries.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
import { eq } from "drizzle-orm";
|
||||
import { user } from "@/db/schema";
|
||||
import { loadAvatarOptions } from "@/features/payers/lib/avatar-options";
|
||||
import { db } from "@/shared/lib/db";
|
||||
import { fetchPagadoresWithAccess } from "@/shared/lib/payers/access";
|
||||
import type { PagadorStatus } from "@/shared/lib/payers/constants";
|
||||
import {
|
||||
PAGADOR_ROLE_ADMIN,
|
||||
PAGADOR_STATUS_OPTIONS,
|
||||
} from "@/shared/lib/payers/constants";
|
||||
|
||||
export type PagadorData = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string | null;
|
||||
avatarUrl: string | null;
|
||||
status: PagadorStatus;
|
||||
note: string | null;
|
||||
role: string;
|
||||
isAutoSend: boolean;
|
||||
createdAt: string;
|
||||
canEdit: boolean;
|
||||
sharedByName: string | null;
|
||||
sharedByEmail: string | null;
|
||||
shareId: string | null;
|
||||
shareCode: string | null;
|
||||
};
|
||||
|
||||
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 async function fetchPagadoresForUser(
|
||||
userId: string,
|
||||
): Promise<{ pagadores: PagadorData[]; avatarOptions: string[] }> {
|
||||
const [pagadorRows, localAvatarOptions, userData] = await Promise.all([
|
||||
fetchPagadoresWithAccess(userId),
|
||||
loadAvatarOptions(),
|
||||
db.query.user.findFirst({
|
||||
columns: { image: true },
|
||||
where: eq(user.id, userId),
|
||||
}),
|
||||
]);
|
||||
|
||||
const userImage = userData?.image;
|
||||
const avatarOptions = userImage
|
||||
? [userImage, ...localAvatarOptions]
|
||||
: localAvatarOptions;
|
||||
|
||||
const pagadores = 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) => {
|
||||
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;
|
||||
return 0;
|
||||
});
|
||||
|
||||
return { pagadores, avatarOptions };
|
||||
}
|
||||
Reference in New Issue
Block a user