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:
@@ -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>
|
||||||
|
|||||||
@@ -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,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user