refactor(cartoes): atualiza widgets para seguir padrão visual

- Refatora CardTopExpenses com rank, badges e barras de progresso
- Refatora CardCategoryBreakdown com cores e ícones de categoria
- Adiciona ícone e title_font no CardsOverview
- Usa WidgetEmptyState e MoneyValues nos componentes

components/relatorios/cartoes/card-category-breakdown.tsx

@@ -1,109 +1,120 @@
 "use client";
 
+import MoneyValues from "@/components/money-values";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { WidgetEmptyState } from "@/components/widget-empty-state";
 import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
+import {
+  buildCategoryInitials,
+  getCategoryBgColor,
+  getCategoryColor,
+} from "@/lib/utils/category-colors";
 import { getIconComponent } from "@/lib/utils/icons";
+import { title_font } from "@/public/fonts/font_index";
 import { RiPieChartLine } from "@remixicon/react";
 
 type CardCategoryBreakdownProps = {
   data: CardDetailData["categoryBreakdown"];
 };
 
-const COLORS = [
-  "#ef4444",
-  "#3b82f6",
-  "#10b981",
-  "#f59e0b",
-  "#8b5cf6",
-  "#ec4899",
-  "#14b8a6",
-  "#f97316",
-  "#6366f1",
-  "#84cc16",
-];
-
 export function CardCategoryBreakdown({ data }: CardCategoryBreakdownProps) {
-  const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat("pt-BR", {
-      style: "currency",
-      currency: "BRL",
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }).format(value);
-  };
-
   if (data.length === 0) {
     return (
-      <Card>
-        <CardHeader className="pb-2">
-          <CardTitle className="text-base font-medium">
+      <Card className="h-full">
+        <CardHeader className="pb-3">
+          <CardTitle
+            className={`${title_font.className} flex items-center gap-1.5 text-base`}
+          >
+            <RiPieChartLine className="size-4 text-primary" />
             Gastos por Categoria
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
-            <RiPieChartLine className="size-8 mb-2" />
-            <p className="text-sm">Nenhum gasto neste período</p>
-          </div>
+          <WidgetEmptyState
+            icon={<RiPieChartLine className="size-6 text-muted-foreground" />}
+            title="Nenhuma categoria encontrada"
+            description="Quando houver despesas categorizadas, elas aparecerão aqui."
+          />
         </CardContent>
       </Card>
     );
   }
 
+  const totalAmount = data.reduce((acc, c) => acc + c.amount, 0);
+
   return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle className="text-base font-medium">
+    <Card className="h-full">
+      <CardHeader className="pb-3">
+        <CardTitle
+          className={`${title_font.className} flex items-center gap-1.5 text-base`}
+        >
+          <RiPieChartLine className="size-4 text-primary" />
           Gastos por Categoria
         </CardTitle>
       </CardHeader>
-      <CardContent className="space-y-3">
+
+      <CardContent className="pt-0">
+        <div className="flex flex-col">
           {data.map((category, index) => {
             const IconComponent = category.icon
               ? getIconComponent(category.icon)
               : null;
-          const color = COLORS[index % COLORS.length];
+            const color = getCategoryColor(index);
+            const bgColor = getCategoryBgColor(index);
+            const initials = buildCategoryInitials(category.name);
 
             return (
-            <div key={category.id} className="space-y-1.5">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  {IconComponent ? (
-                    <IconComponent
-                      className="size-4"
-                      style={{ color }}
-                    />
-                  ) : (
               <div
-                      className="size-4 rounded-sm"
-                      style={{ backgroundColor: color }}
-                    />
+                key={category.id}
+                className="flex flex-col py-2 border-b border-dashed last:border-0"
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex min-w-0 flex-1 items-center gap-2">
+                    <div
+                      className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg"
+                      style={{ backgroundColor: bgColor }}
+                    >
+                      {IconComponent ? (
+                        <IconComponent className="size-4" style={{ color }} />
+                      ) : (
+                        <span
+                          className="text-xs font-semibold uppercase"
+                          style={{ color }}
+                        >
+                          {initials}
+                        </span>
                       )}
-                  <span className="text-sm font-medium truncate max-w-[150px]">
+                    </div>
+
+                    {/* Name and percentage */}
+                    <div className="min-w-0 flex-1">
+                      <span className="text-sm font-medium truncate block">
                         {category.name}
                       </span>
-                </div>
-                <span className="text-sm text-muted-foreground">
-                  {formatCurrency(category.amount)}
+                      <span className="text-xs text-muted-foreground">
+                        {category.percent.toFixed(0)}% do total
                       </span>
                     </div>
-              <div className="flex items-center gap-2">
-                <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
-                  <div
-                    className="h-full rounded-full transition-all"
-                    style={{
-                      width: `${category.percent}%`,
-                      backgroundColor: color,
-                    }}
+                  </div>
+
+                  {/* Value */}
+                  <div className="flex shrink-0 flex-col items-end">
+                    <MoneyValues
+                      className="text-foreground"
+                      amount={category.amount}
                     />
                   </div>
-                <span className="text-xs text-muted-foreground w-10 text-right">
-                  {category.percent.toFixed(0)}%
-                </span>
+                </div>
+
+                {/* Progress bar */}
+                <div className="ml-12 mt-1.5">
+                  <Progress className="h-1.5" value={category.percent} />
                 </div>
               </div>
             );
           })}
+        </div>
       </CardContent>
     </Card>
   );

components/relatorios/cartoes/card-top-expenses.tsx

@@ -1,7 +1,12 @@
 "use client";
 
+import MoneyValues from "@/components/money-values";
+import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { WidgetEmptyState } from "@/components/widget-empty-state";
 import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
+import { title_font } from "@/public/fonts/font_index";
 import { RiShoppingBag3Line } from "@remixicon/react";
 
 type CardTopExpensesProps = {
@@ -9,71 +14,95 @@ type CardTopExpensesProps = {
 };
 
 export function CardTopExpenses({ data }: CardTopExpensesProps) {
-  const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat("pt-BR", {
-      style: "currency",
-      currency: "BRL",
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }).format(value);
-  };
-
   if (data.length === 0) {
     return (
-      <Card>
-        <CardHeader className="pb-2">
-          <CardTitle className="text-base font-medium">
-            Maiores Gastos
+      <Card className="h-full">
+        <CardHeader className="pb-3">
+          <CardTitle
+            className={`${title_font.className} flex items-center gap-1.5 text-base`}
+          >
+            <RiShoppingBag3Line className="size-4 text-primary" />
+            Top 10 Gastos do Mês
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
-            <RiShoppingBag3Line className="size-8 mb-2" />
-            <p className="text-sm">Nenhum gasto neste período</p>
-          </div>
+          <WidgetEmptyState
+            icon={
+              <RiShoppingBag3Line className="size-6 text-muted-foreground" />
+            }
+            title="Nenhum gasto encontrado"
+            description="Quando houver gastos registrados, eles aparecerão aqui."
+          />
         </CardContent>
       </Card>
     );
   }
 
+  const maxAmount = Math.max(...data.map((e) => e.amount));
+
   return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle className="text-base font-medium">
+    <Card className="h-full">
+      <CardHeader className="pb-3">
+        <CardTitle
+          className={`${title_font.className} flex items-center gap-1.5 text-base`}
+        >
+          <RiShoppingBag3Line className="size-4 text-primary" />
           Top 10 Gastos do Mês
         </CardTitle>
       </CardHeader>
-      <CardContent>
-        <div className="space-y-2">
+      <CardContent className="pt-0">
+        <div className="flex flex-col">
           {data.map((expense, index) => (
             <div
               key={expense.id}
-              className="flex items-center justify-between py-2 border-b last:border-b-0"
+              className="flex flex-col py-2 border-b border-dashed last:border-0"
             >
-              <div className="flex items-center gap-3 min-w-0">
-                <span className="text-xs text-muted-foreground w-5">
-                  {index + 1}.
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex min-w-0 flex-1 items-center gap-2">
+                  {/* Rank number */}
+                  <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
+                    <span className="text-sm font-semibold text-muted-foreground">
+                      {index + 1}
                     </span>
-                <div className="min-w-0">
-                  <p className="text-sm font-medium truncate max-w-[200px]">
+                  </div>
+
+                  {/* Name and details */}
+                  <div className="min-w-0 flex-1">
+                    <span className="text-sm font-medium truncate block">
                       {expense.name}
-                  </p>
-                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                    <span>{expense.date}</span>
-                    {expense.category && (
-                      <>
-                        <span>•</span>
-                        <span className="truncate max-w-[100px]">
-                          {expense.category}
                     </span>
-                      </>
+                    <div className="flex items-center gap-1 mt-0.5 flex-wrap">
+                      <span className="text-xs text-muted-foreground">
+                        {expense.date}
+                      </span>
+                      {expense.category && (
+                        <Badge
+                          variant="secondary"
+                          className="text-xs px-1.5 py-0 h-5"
+                        >
+                          {expense.category}
+                        </Badge>
                       )}
                     </div>
                   </div>
                 </div>
-              <span className="text-sm font-medium text-red-500 shrink-0">
-                {formatCurrency(expense.amount)}
-              </span>
+
+                {/* Value */}
+                <div className="flex shrink-0 flex-col items-end">
+                  <MoneyValues
+                    className="text-red-600 dark:text-red-500"
+                    amount={expense.amount}
+                  />
+                </div>
+              </div>
+
+              {/* Progress bar */}
+              <div className="ml-12 mt-1.5">
+                <Progress
+                  className="h-1.5"
+                  value={(expense.amount / maxAmount) * 100}
+                />
+              </div>
             </div>
           ))}
         </div>

components/relatorios/cartoes/cards-overview.tsx

@@ -3,14 +3,15 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import type { CartoesReportData } from "@/lib/relatorios/cartoes-report";
-import {
-  RiBankCard2Line,
-  RiArrowUpLine,
-  RiArrowDownLine,
-} from "@remixicon/react";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
+import { title_font } from "@/public/fonts/font_index";
+import {
+  RiArrowDownLine,
+  RiArrowUpLine,
+  RiBankCard2Line,
+} from "@remixicon/react";
 import Image from "next/image";
+import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 
 type CardsOverviewProps = {
@@ -78,7 +79,8 @@ export function CardsOverview({ data }: CardsOverviewProps) {
     return (
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle className="text-base font-medium">
+          <CardTitle className="text-base font-bold flex items-center gap-2">
+            <RiBankCard2Line className="size-4" />
             Resumo dos Cartões
           </CardTitle>
         </CardHeader>
@@ -95,7 +97,10 @@ export function CardsOverview({ data }: CardsOverviewProps) {
   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`}
+        >
+          <RiBankCard2Line className="size-4 text-primary" />
           Resumo dos Cartões
         </CardTitle>
       </CardHeader>