feat: adicionar ícone e link para análise de parcelas no sidebar

Adiciona um novo item "Análise de Parcelas" no menu lateral com o ícone
RiCalculatorLine, direcionando para a página de análise de parcelas.
This commit is contained in:
Felipe Coutinho
2025-11-16 13:42:05 -03:00
parent f6bbb0d5e0
commit c29319049c
2 changed files with 32 additions and 13 deletions

View File

@@ -50,7 +50,7 @@ export function InstallmentGroupCard({
return ( return (
<Card className={cn(isFullySelected && "border-primary/50")}> <Card className={cn(isFullySelected && "border-primary/50")}>
<CardContent className="flex flex-col gap-2 py-3"> <CardContent className="flex flex-col gap-2 py-1">
{/* Header do card */} {/* Header do card */}
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Checkbox <Checkbox
@@ -63,7 +63,7 @@ export function InstallmentGroupCard({
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-medium">{group.name}</p> <p className="text-sm font-bold">{group.name}</p>
<div className="mt-0.5 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground"> <div className="mt-0.5 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
{group.cartaoName && ( {group.cartaoName && (
<> <>
@@ -154,34 +154,47 @@ export function InstallmentGroupCard({
className={cn( className={cn(
"flex items-center gap-3 rounded-md border p-2 transition-colors", "flex items-center gap-3 rounded-md border p-2 transition-colors",
isSelected && !isPaid && "border-primary/50 bg-primary/5", isSelected && !isPaid && "border-primary/50 bg-primary/5",
isPaid && "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30" isPaid &&
"border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30"
)} )}
> >
<Checkbox <Checkbox
checked={isPaid ? false : isSelected} checked={isPaid ? false : isSelected}
disabled={isPaid} disabled={isPaid}
onCheckedChange={() => !isPaid && onToggleInstallment(installment.id)} onCheckedChange={() =>
!isPaid && onToggleInstallment(installment.id)
}
aria-label={`Selecionar parcela ${installment.currentInstallment} de ${group.totalInstallments}`} aria-label={`Selecionar parcela ${installment.currentInstallment} de ${group.totalInstallments}`}
/> />
<div className="flex min-w-0 flex-1 items-center justify-between gap-3"> <div className="flex min-w-0 flex-1 items-center justify-between gap-3">
<div className="min-w-0"> <div className="min-w-0">
<p className={cn( <p
"text-sm font-medium", className={cn(
isPaid && "text-green-700 dark:text-green-400 line-through decoration-green-600/50" "text-sm font-medium",
)}> isPaid &&
"text-green-700 dark:text-green-400 line-through decoration-green-600/50"
)}
>
Parcela {installment.currentInstallment}/ Parcela {installment.currentInstallment}/
{group.totalInstallments} {group.totalInstallments}
{isPaid && ( {isPaid && (
<Badge variant="outline" className="ml-2 text-xs border-green-500 text-green-700 dark:text-green-400"> <Badge
variant="outline"
className="ml-2 text-xs border-green-700 text-green-700 dark:text-green-400"
>
Paga Paga
</Badge> </Badge>
)} )}
</p> </p>
<p className={cn( <p
"text-xs", className={cn(
isPaid ? "text-green-600 dark:text-green-500" : "text-muted-foreground" "text-xs",
)}> isPaid
? "text-green-700 dark:text-green-500"
: "text-muted-foreground"
)}
>
Vencimento: {dueDate} Vencimento: {dueDate}
</p> </p>
</div> </div>

View File

@@ -2,6 +2,7 @@ import {
RiArrowLeftRightLine, RiArrowLeftRightLine,
RiBankCardLine, RiBankCardLine,
RiBankLine, RiBankLine,
RiCalculatorLine,
RiCalendarEventLine, RiCalendarEventLine,
RiDashboardLine, RiDashboardLine,
RiFileListLine, RiFileListLine,
@@ -136,6 +137,11 @@ export function createSidebarNavData(pagadores: PagadorLike[]): SidebarNavData {
url: "/insights", url: "/insights",
icon: RiSparklingLine, icon: RiSparklingLine,
}, },
{
title: "Análise de Parcelas",
url: "/dashboard/analise-parcelas",
icon: RiCalculatorLine,
},
], ],
}, },
], ],