mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-09 11:01:45 +00:00
refactor(dashboard): reorganiza widgets e remove magnet-lines
This commit is contained in:
Felipe Coutinho
73
components/dashboard/bills/bill-list-item.tsx
Normal file
73
components/dashboard/bills/bill-list-item.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import { RiCheckboxCircleFill } from "@remixicon/react";
|
||||
import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
|
||||
import MoneyValues from "@/components/shared/money-values";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { DashboardBill } from "@/lib/dashboard/bills";
|
||||
import {
|
||||
buildBillStatusLabel,
|
||||
isBillOverdue,
|
||||
} from "@/lib/dashboard/bills-helpers";
|
||||
import { cn } from "@/lib/utils/ui";
|
||||
|
||||
type BillListItemProps = {
|
||||
bill: DashboardBill;
|
||||
onPay: (billId: string) => void;
|
||||
};
|
||||
|
||||
export function BillListItem({ bill, onPay }: BillListItemProps) {
|
||||
const statusLabel = buildBillStatusLabel(bill);
|
||||
const overdue = isBillOverdue(bill);
|
||||
|
||||
return (
|
||||
<li 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">
|
||||
<EstabelecimentoLogo name={bill.name} size={37} />
|
||||
|
||||
<div className="min-w-0">
|
||||
<span className="block truncate text-sm font-medium text-foreground">
|
||||
{bill.name}
|
||||
</span>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
{statusLabel ? (
|
||||
<span
|
||||
className={cn(
|
||||
"rounded-full py-0.5",
|
||||
bill.isSettled && "text-success",
|
||||
)}
|
||||
>
|
||||
{statusLabel}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues amount={bill.amount} />
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="link"
|
||||
className="h-auto p-0 disabled:opacity-100"
|
||||
disabled={bill.isSettled}
|
||||
onClick={() => onPay(bill.id)}
|
||||
>
|
||||
{bill.isSettled ? (
|
||||
<span className="flex items-center gap-1 text-success">
|
||||
<RiCheckboxCircleFill className="size-3" /> Pago
|
||||
</span>
|
||||
) : overdue ? (
|
||||
<span className="overdue-blink">
|
||||
<span className="overdue-blink-primary text-destructive">
|
||||
Atrasado
|
||||
</span>
|
||||
<span className="overdue-blink-secondary">Pagar</span>
|
||||
</span>
|
||||
) : (
|
||||
"Pagar"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
189
components/dashboard/bills/bill-payment-dialog.tsx
Normal file
189
components/dashboard/bills/bill-payment-dialog.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import {
|
||||
RiBarcodeFill,
|
||||
RiCheckboxCircleLine,
|
||||
RiLoader4Line,
|
||||
RiMoneyDollarCircleLine,
|
||||
} from "@remixicon/react";
|
||||
import MoneyValues from "@/components/shared/money-values";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import type { DashboardBill } from "@/lib/dashboard/bills";
|
||||
import {
|
||||
type BillDialogState,
|
||||
formatBillDateLabel,
|
||||
getBillStatusBadgeVariant,
|
||||
} from "@/lib/dashboard/bills-helpers";
|
||||
|
||||
type BillPaymentDialogProps = {
|
||||
bill: DashboardBill | null;
|
||||
open: boolean;
|
||||
modalState: BillDialogState;
|
||||
isPending: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
};
|
||||
|
||||
export function BillPaymentDialog({
|
||||
bill,
|
||||
open,
|
||||
modalState,
|
||||
isPending,
|
||||
onClose,
|
||||
onConfirm,
|
||||
}: BillPaymentDialogProps) {
|
||||
const isProcessing = modalState === "processing" || isPending;
|
||||
const dueLabel = bill
|
||||
? formatBillDateLabel(bill.dueDate, "Vencimento:")
|
||||
: 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 registrado!
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-sm">
|
||||
Atualizamos o status do boleto para pago. Em instantes ele
|
||||
aparecerá como baixado no histórico.
|
||||
</DialogDescription>
|
||||
</div>
|
||||
<DialogFooter className="sm:justify-center">
|
||||
<Button type="button" onClick={onClose} className="sm:w-auto">
|
||||
Fechar
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirmar pagamento do boleto</DialogTitle>
|
||||
<DialogDescription>
|
||||
Confirme os dados para registrar o pagamento. Você poderá editar
|
||||
o lançamento depois, se necessário.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{bill ? (
|
||||
<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">
|
||||
<RiBarcodeFill className="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
Boleto
|
||||
</p>
|
||||
<p className="text-lg font-bold text-foreground">
|
||||
{bill.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{dueLabel ? (
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{dueLabel}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</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 do Boleto
|
||||
</span>
|
||||
</div>
|
||||
<MoneyValues
|
||||
amount={bill.amount}
|
||||
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={getBillStatusBadgeVariant(
|
||||
bill.isSettled ? "Pago" : "Pendente",
|
||||
)}
|
||||
>
|
||||
{bill.isSettled ? "Pago" : "Pendente"}
|
||||
</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 || !bill || bill.isSettled}
|
||||
className="relative"
|
||||
>
|
||||
{isProcessing ? (
|
||||
<>
|
||||
<RiLoader4Line className="mr-1.5 size-4 animate-spin" />
|
||||
Processando...
|
||||
</>
|
||||
) : (
|
||||
"Confirmar pagamento"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
29
components/dashboard/bills/bills-list.tsx
Normal file
29
components/dashboard/bills/bills-list.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { RiBarcodeFill } from "@remixicon/react";
|
||||
import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
|
||||
import type { DashboardBill } from "@/lib/dashboard/bills";
|
||||
import { BillListItem } from "./bill-list-item";
|
||||
|
||||
type BillsListProps = {
|
||||
bills: DashboardBill[];
|
||||
onPay: (billId: string) => void;
|
||||
};
|
||||
|
||||
export function BillsList({ bills, onPay }: BillsListProps) {
|
||||
if (bills.length === 0) {
|
||||
return (
|
||||
<WidgetEmptyState
|
||||
icon={<RiBarcodeFill className="size-6 text-muted-foreground" />}
|
||||
title="Nenhum boleto cadastrado para o período selecionado"
|
||||
description="Cadastre boletos para monitorar os pagamentos aqui."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="flex flex-col">
|
||||
{bills.map((bill) => (
|
||||
<BillListItem key={bill.id} bill={bill} onPay={onPay} />
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
43
components/dashboard/bills/bills-widget-view.tsx
Normal file
43
components/dashboard/bills/bills-widget-view.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import type { DashboardBill } from "@/lib/dashboard/bills";
|
||||
import type { BillDialogState } from "@/lib/dashboard/bills-helpers";
|
||||
import { BillPaymentDialog } from "./bill-payment-dialog";
|
||||
import { BillsList } from "./bills-list";
|
||||
|
||||
type BillsWidgetViewProps = {
|
||||
bills: DashboardBill[];
|
||||
selectedBill: DashboardBill | null;
|
||||
isModalOpen: boolean;
|
||||
modalState: BillDialogState;
|
||||
isPending: boolean;
|
||||
onOpenPaymentDialog: (billId: string) => void;
|
||||
onClosePaymentDialog: () => void;
|
||||
onConfirmPayment: () => void;
|
||||
};
|
||||
|
||||
export function BillsWidgetView({
|
||||
bills,
|
||||
selectedBill,
|
||||
isModalOpen,
|
||||
modalState,
|
||||
isPending,
|
||||
onOpenPaymentDialog,
|
||||
onClosePaymentDialog,
|
||||
onConfirmPayment,
|
||||
}: BillsWidgetViewProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-4">
|
||||
<BillsList bills={bills} onPay={onOpenPaymentDialog} />
|
||||
</div>
|
||||
|
||||
<BillPaymentDialog
|
||||
bill={selectedBill}
|
||||
open={isModalOpen}
|
||||
modalState={modalState}
|
||||
isPending={isPending}
|
||||
onClose={onClosePaymentDialog}
|
||||
onConfirm={onConfirmPayment}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user