mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-11 11:41:45 +00:00
feat(finance): refina fluxos de transacoes e pagadores
This commit is contained in:
Felipe Coutinho
365
components/pagadores/details/pagador-header-card.tsx
Normal file
365
components/pagadores/details/pagador-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 "@/app/(dashboard)/pagadores/[pagadorId]/actions";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
|
||||
import { getAvatarSrc } from "@/lib/pagadores/utils";
|
||||
import { formatCurrency } from "@/lib/utils/currency";
|
||||
import { formatDateTime } from "@/lib/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",
|
||||
}) ?? "—"
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user