fix(cartoes): ordena faturas do mais recente para mais antigo

- Inverte ordem de exibição das faturas
- Adiciona ícone e title_font no header
This commit is contained in:
Felipe Coutinho
2026-01-20 15:21:27 +00:00
parent 8b8257e095
commit 0e8f9dd955

View File

@@ -1,8 +1,10 @@
"use client"; "use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { CardDetailData } from "@/lib/relatorios/cartoes-report"; import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
import { title_font } from "@/public/fonts/font_index";
import { RiBankCard2Fill } from "@remixicon/react";
type CardInvoiceStatusProps = { type CardInvoiceStatusProps = {
data: CardDetailData["invoiceStatus"]; data: CardDetailData["invoiceStatus"];
@@ -37,19 +39,28 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
switch (status) { switch (status) {
case "pago": case "pago":
return ( return (
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-400 dark:border-green-900"> <Badge
variant="outline"
className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-400 dark:border-green-900"
>
Pago Pago
</Badge> </Badge>
); );
case "pendente": case "pendente":
return ( return (
<Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-400 dark:border-yellow-900"> <Badge
variant="outline"
className="bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-400 dark:border-yellow-900"
>
Pendente Pendente
</Badge> </Badge>
); );
case "atrasado": case "atrasado":
return ( return (
<Badge variant="outline" className="bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-400 dark:border-red-900"> <Badge
variant="outline"
className="bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-400 dark:border-red-900"
>
Atrasado Atrasado
</Badge> </Badge>
); );
@@ -70,13 +81,16 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
return ( return (
<Card> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-base font-medium"> <CardTitle
className={`${title_font.className} flex items-center gap-1.5 text-base`}
>
<RiBankCard2Fill className="size-4 text-primary" />
Status das Faturas Status das Faturas
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-2"> <div className="space-y-2">
{data.map((invoice) => ( {[...data].reverse().map((invoice) => (
<div <div
key={invoice.period} key={invoice.period}
className="flex items-center justify-between py-2 border-b last:border-b-0" className="flex items-center justify-between py-2 border-b last:border-b-0"
@@ -87,7 +101,7 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
</span> </span>
{getStatusBadge(invoice.status)} {getStatusBadge(invoice.status)}
</div> </div>
<span className="text-sm text-muted-foreground"> <span className="text-sm font-bold">
{formatCurrency(invoice.amount)} {formatCurrency(invoice.amount)}
</span> </span>
</div> </div>