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">
-        {data.map((category, index) => {
-          const IconComponent = category.icon
-            ? getIconComponent(category.icon)
-            : null;
-          const color = COLORS[index % COLORS.length];
 
-          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 }}
-                    />
-                  ) : (
+      <CardContent className="pt-0">
+        <div className="flex flex-col">
+          {data.map((category, index) => {
+            const IconComponent = category.icon
+              ? getIconComponent(category.icon)
+              : null;
+            const color = getCategoryColor(index);
+            const bgColor = getCategoryBgColor(index);
+            const initials = buildCategoryInitials(category.name);
+
+            return (
+              <div
+                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="size-4 rounded-sm"
-                      style={{ backgroundColor: color }}
+                      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>
+                      )}
+                    </div>
+
+                    {/* Name and percentage */}
+                    <div className="min-w-0 flex-1">
+                      <span className="text-sm font-medium truncate block">
+                        {category.name}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        {category.percent.toFixed(0)}% do total
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Value */}
+                  <div className="flex shrink-0 flex-col items-end">
+                    <MoneyValues
+                      className="text-foreground"
+                      amount={category.amount}
                     />
-                  )}
-                  <span className="text-sm font-medium truncate max-w-[150px]">
-                    {category.name}
-                  </span>
+                  </div>
                 </div>
-                <span className="text-sm text-muted-foreground">
-                  {formatCurrency(category.amount)}
-                </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,
-                    }}
-                  />
+
+                {/* Progress bar */}
+                <div className="ml-12 mt-1.5">
+                  <Progress className="h-1.5" value={category.percent} />
                 </div>
-                <span className="text-xs text-muted-foreground w-10 text-right">
-                  {category.percent.toFixed(0)}%
-                </span>
               </div>
-            </div>
-          );
-        })}
+            );
+          })}
+        </div>
       </CardContent>
     </Card>
   );