From 0e8f9dd955de535027b8f8f392f6534cd0a2fbb7 Mon Sep 17 00:00:00 2001
From: Felipe Coutinho <felipi@live.com>
Date: Tue, 20 Jan 2026 15:21:27 +0000
Subject: [PATCH] fix(cartoes): ordena faturas do mais recente para mais antigo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Inverte ordem de exibição das faturas
- Adiciona ícone e title_font no header
---
 .../cartoes/card-invoice-status.tsx           | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/components/relatorios/cartoes/card-invoice-status.tsx b/components/relatorios/cartoes/card-invoice-status.tsx
index e0c853e..f293d27 100644
--- a/components/relatorios/cartoes/card-invoice-status.tsx
+++ b/components/relatorios/cartoes/card-invoice-status.tsx
@@ -1,8 +1,10 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
+import { title_font } from "@/public/fonts/font_index";
+import { RiBankCard2Fill } from "@remixicon/react";
 
 type CardInvoiceStatusProps = {
   data: CardDetailData["invoiceStatus"];
@@ -37,19 +39,28 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
     switch (status) {
       case "pago":
         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
           </Badge>
         );
       case "pendente":
         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
           </Badge>
         );
       case "atrasado":
         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
           </Badge>
         );
@@ -70,13 +81,16 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
   return (
     <Card>
       <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
         </CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-2">
-          {data.map((invoice) => (
+          {[...data].reverse().map((invoice) => (
             <div
               key={invoice.period}
               className="flex items-center justify-between py-2 border-b last:border-b-0"
@@ -87,7 +101,7 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
                 </span>
                 {getStatusBadge(invoice.status)}
               </div>
-              <span className="text-sm text-muted-foreground">
+              <span className="text-sm font-bold">
                 {formatCurrency(invoice.amount)}
               </span>
             </div>