From 4d62abfc6b6b045255671ec4f4e704a700f0d249 Mon Sep 17 00:00:00 2001
From: Felipe Coutinho <felipi@live.com>
Date: Sun, 21 Jun 2026 11:54:19 -0300
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20vincula=20tend=C3=AAncias=20?=
 =?UTF-8?q?=C3=A0s=20categorias?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/widgets/category-trends-widget.tsx    | 12 +++++++++++-
 .../dashboard/widget-registry/widget-config.tsx      |  3 ++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/features/dashboard/components/widgets/category-trends-widget.tsx b/src/features/dashboard/components/widgets/category-trends-widget.tsx
index 515aded..a293218 100644
--- a/src/features/dashboard/components/widgets/category-trends-widget.tsx
+++ b/src/features/dashboard/components/widgets/category-trends-widget.tsx
@@ -6,6 +6,7 @@ import {
 	RiHistoryLine,
 	RiLineChartLine,
 } from "@remixicon/react";
+import Link from "next/link";
 import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
 import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
@@ -13,14 +14,18 @@ import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { formatPercentage } from "@/shared/utils/percentage";
+import { formatPeriodForUrl } from "@/shared/utils/period";
 
 type CategoryTrendsWidgetProps = {
 	categories: DashboardCategoryBreakdownItem[];
+	period: string;
 };
 
 export function CategoryTrendsWidget({
 	categories,
+	period,
 }: CategoryTrendsWidgetProps) {
+	const periodParam = formatPeriodForUrl(period);
 	const trending = categories
 		.filter((c) => c.percentageChange !== null && c.previousAmount > 0)
 		.sort(
@@ -53,7 +58,12 @@ export function CategoryTrendsWidget({
 								size="md"
 							/>
 							<div className={styles.textStack}>
-								<p className={styles.title}>{category.categoryName}</p>
+								<Link
+									href={`/categories/${category.categoryId}?periodo=${periodParam}`}
+									className={styles.titleLink}
+								>
+									<span className="truncate">{category.categoryName}</span>
+								</Link>
 								<p className={styles.meta}>
 									<span
 										className="inline-flex items-center gap-1"
diff --git a/src/features/dashboard/widget-registry/widget-config.tsx b/src/features/dashboard/widget-registry/widget-config.tsx
index a169fdf..652c7b0 100644
--- a/src/features/dashboard/widget-registry/widget-config.tsx
+++ b/src/features/dashboard/widget-registry/widget-config.tsx
@@ -174,9 +174,10 @@ export const widgetsConfig: WidgetConfig[] = [
 		title: "Tendências de categorias",
 		subtitle: "Top 10 maiores variações vs. mês anterior",
 		icon: <RiLineChartLine className="size-4" />,
-		component: ({ data }) => (
+		component: ({ data, period }) => (
 			<CategoryTrendsWidget
 				categories={data.expensesByCategoryData.categories}
+				period={period}
 			/>
 		),
 	},