feat(v1.4.0): design system semântico, correções de revalidação e melhorias de UX

- Adicionar tokens semânticos de estado (success, warning, info) no globals.css
- Migrar ~60+ componentes de cores hardcoded do Tailwind para tokens semânticos
- Unificar 3 arrays duplicados de cores de categorias em importação única
- Corrigir widgets de boleto/fatura que não atualizavam após pagamento
  (actions de fatura e antecipação não invalidavam cache do dashboard)
- Corrigir scroll em listas Popover+Command (modal prop)
- Adicionar link "detalhes" no card de orçamento para página da categoria
- Adicionar indicadores de tendência coloridos nos cards de métricas
- Estender cores de chart de 6 para 10
- Normalizar dark mode e remover tokens não utilizados

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

components/relatorios/cartoes/card-invoice-status.tsx

@@ -43,11 +43,11 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
 	const getStatusColor = (status: string | null) => {
 		switch (status) {
 			case "pago":
-				return "bg-green-500";
+				return "bg-success";
 			case "pendente":
-				return "bg-yellow-500";
+				return "bg-warning";
 			case "atrasado":
-				return "bg-red-500";
+				return "bg-destructive";
 			default:
 				return "bg-muted";
 		}

components/relatorios/cartoes/card-usage-chart.tsx

@@ -134,7 +134,7 @@ export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
 								label={{
 									value: "Limite",
 									position: "right",
-									className: "text-xs fill-red-500",
+									className: "text-xs fill-destructive",
 								}}
 							/>
 						)}

components/relatorios/cartoes/cards-overview.tsx

@@ -58,9 +58,9 @@ export function CardsOverview({ data }: CardsOverviewProps) {
 		}).format(value);
 
 	const getUsageColor = (percent: number) => {
-		if (percent < 50) return "bg-green-500";
-		if (percent < 80) return "bg-yellow-500";
-		return "bg-red-500";
+		if (percent < 50) return "bg-success";
+		if (percent < 80) return "bg-warning";
+		return "bg-destructive";
 	};
 
 	const buildUrl = (cardId: string) => {

components/relatorios/category-cell.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";
+import { RiArrowDownSFill, RiArrowUpSFill } from "@remixicon/react";
 import {
 	Tooltip,
 	TooltipContent,
@@ -41,12 +41,12 @@ export function CategoryCell({
 						<div
 							className={cn(
 								"flex items-center gap-0.5 text-xs",
-								isIncrease && "text-red-600 dark:text-red-400",
-								isDecrease && "text-green-600 dark:text-green-400",
+								isIncrease && "text-destructive",
+								isDecrease && "text-success",
 							)}
 						>
-							{isIncrease && <RiArrowUpLine className="h-3 w-3" />}
-							{isDecrease && <RiArrowDownLine className="h-3 w-3" />}
+							{isIncrease && <RiArrowUpSFill className="h-3 w-3" />}
+							{isDecrease && <RiArrowDownSFill className="h-3 w-3" />}
 							<span>{formatPercentageChange(percentageChange)}</span>
 						</div>
 					)}
@@ -63,8 +63,8 @@ export function CategoryCell({
 							<div
 								className={cn(
 									"font-medium",
-									isIncrease && "text-red-500",
-									isDecrease && "text-green-500",
+									isIncrease && "text-destructive",
+									isDecrease && "text-success",
 								)}
 							>
 								Diferença:{" "}

components/relatorios/category-report-chart.tsx

@@ -15,23 +15,13 @@ import { EmptyState } from "@/components/empty-state";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";
 import type { CategoryChartData } from "@/lib/relatorios/fetch-category-chart-data";
+import { CATEGORY_COLORS } from "@/lib/utils/category-colors";
 
 interface CategoryReportChartProps {
 	data: CategoryChartData;
 }
 
-const CHART_COLORS = [
-	"#ef4444", // red-500
-	"#3b82f6", // blue-500
-	"#10b981", // emerald-500
-	"#f59e0b", // amber-500
-	"#8b5cf6", // violet-500
-	"#ec4899", // pink-500
-	"#14b8a6", // teal-500
-	"#f97316", // orange-500
-	"#06b6d4", // cyan-500
-	"#84cc16", // lime-500
-];
+const CHART_COLORS = CATEGORY_COLORS;
 
 const MAX_CATEGORIES_IN_CHART = 15;
 

components/relatorios/category-report-filters.tsx

@@ -165,7 +165,7 @@ export function CategoryReportFilters({
 			<div className="flex flex-wrap items-center justify-between gap-2">
 				<div className="flex flex-wrap items-center gap-2">
 					{/* Category Multi-Select */}
-					<Popover open={open} onOpenChange={setOpen}>
+					<Popover open={open} onOpenChange={setOpen} modal>
 						<PopoverTrigger asChild>
 							<Button
 								variant="outline"

components/relatorios/category-table.tsx

@@ -87,8 +87,8 @@ export function CategoryTable({
 										<DotIcon
 											color={
 												category.type === "receita"
-													? "bg-green-600"
-													: "bg-red-600"
+													? "bg-success"
+													: "bg-destructive"
 											}
 										/>