git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-05-10 03:11:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(core): move app para src e padroniza estrutura

Browse Source
This commit is contained in:
Felipe Coutinho
2026-03-12 19:22:50 +00:00
parent d92e70f1b9
commit b0fbb1062a
567 changed files with 8981 additions and 5014 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/features/dashboard/components/invoices/invoice-payment-dialog.tsx Normal file
View File

@@ -0,0 +1,206 @@
import {
RiCheckboxCircleLine,
RiLoader4Line,
RiMoneyDollarCircleLine,
} from "@remixicon/react";
import {
formatInvoicePaymentDate,
getInvoiceStatusBadgeVariant,
type InvoiceDialogState,
parseInvoiceDueDate,
} from "@/features/dashboard/invoices-helpers";
import type { DashboardInvoice } from "@/features/dashboard/invoices-queries";
import MoneyValues from "@/shared/components/money-values";
import { Badge } from "@/shared/components/ui/badge";
import { Button } from "@/shared/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/shared/components/ui/dialog";
import {
INVOICE_PAYMENT_STATUS,
INVOICE_STATUS_LABEL,
} from "@/shared/lib/invoices";
import { InvoiceLogo } from "./invoice-logo";
type InvoicePaymentDialogProps = {
invoice: DashboardInvoice | null;
open: boolean;
modalState: InvoiceDialogState;
isPending: boolean;
onClose: () => void;
onConfirm: () => void;
};
export function InvoicePaymentDialog({
invoice,
open,
modalState,
isPending,
onClose,
onConfirm,
}: InvoicePaymentDialogProps) {
const isProcessing = modalState === "processing" || isPending;
const paymentInfo = invoice ? formatInvoicePaymentDate(invoice.paidAt) : null;
return (
<Dialog
open={open}
onOpenChange={(nextOpen) => {
if (nextOpen || isProcessing) {
return;
}
onClose();
}}
>
<DialogContent
className="max-w-[calc(100%-2rem)] sm:max-w-md"
onEscapeKeyDown={(event) => {
if (isProcessing) {
event.preventDefault();
}
}}
onPointerDownOutside={(event) => {
if (isProcessing) {
event.preventDefault();
}
}}
>
{modalState === "success" ? (
<div className="flex flex-col items-center gap-4 py-6 text-center">
<div className="flex size-16 items-center justify-center rounded-full bg-success/10 text-success">
<RiCheckboxCircleLine className="size-8" />
</div>
<div className="space-y-2">
<DialogTitle className="text-base">
Pagamento confirmado!
</DialogTitle>
<DialogDescription className="text-sm">
Atualizamos o status da fatura. O lançamento do pagamento
aparecerá no extrato em instantes.
</DialogDescription>
</div>
<DialogFooter className="sm:justify-center">
<Button type="button" onClick={onClose} className="sm:w-auto">
Fechar
</Button>
</DialogFooter>
</div>
) : (
<>
<DialogHeader>
<DialogTitle>Confirmar pagamento</DialogTitle>
<DialogDescription>
Revise os dados antes de confirmar. Vamos registrar a fatura
como paga.
</DialogDescription>
</DialogHeader>
{invoice ? (
<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">
<InvoiceLogo
cardName={invoice.cardName}
logo={invoice.logo}
size={40}
tone="accent"
containerClassName="size-10"
fallbackClassName="text-xs"
/>
<div>
<p className="text-sm font-medium text-muted-foreground">
Cartão
</p>
<p className="text-lg font-bold text-foreground">
{invoice.cardName}
</p>
</div>
</div>
<div className="text-right">
{invoice.paymentStatus !== INVOICE_PAYMENT_STATUS.PAID ? (
<p className="text-sm text-muted-foreground">
{
parseInvoiceDueDate(invoice.period, invoice.dueDay)
.label
}
</p>
) : null}
{invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID &&
paymentInfo ? (
<p className="text-sm text-success">
{paymentInfo.label}
</p>
) : null}
</div>
</div>
</div>
<div className="grid gap-3 sm:grid-cols-2">
<div className="rounded-lg border p-3">
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
<RiMoneyDollarCircleLine className="size-4" />
<span className="text-xs font-semibold uppercase">
Valor da Fatura
</span>
</div>
<MoneyValues
amount={Math.abs(invoice.totalAmount)}
className="text-lg font-bold"
/>
</div>
<div className="rounded-lg border p-3">
<div className="mb-2 flex items-center gap-2 text-muted-foreground">
<RiCheckboxCircleLine className="size-4" />
<span className="text-xs font-semibold uppercase">
Status
</span>
</div>
<Badge
variant={getInvoiceStatusBadgeVariant(
INVOICE_STATUS_LABEL[invoice.paymentStatus],
)}
>
{INVOICE_STATUS_LABEL[invoice.paymentStatus]}
</Badge>
</div>
</div>
</div>
) : null}
<DialogFooter className="sm:justify-end">
<Button
type="button"
variant="outline"
onClick={onClose}
disabled={isProcessing}
>
Cancelar
</Button>
<Button
type="button"
onClick={onConfirm}
disabled={isProcessing || !invoice}
className="relative"
>
{isProcessing ? (
<>
<RiLoader4Line className="mr-1.5 size-4 animate-spin" />
Processando...
</>
) : (
"Confirmar pagamento"
)}
</Button>
</DialogFooter>
</>
)}
</DialogContent>
</Dialog>
);
}