style(ui): padronizar tipografia — font-medium para font-semibold

Padronização de peso tipográfico em títulos, rótulos de seção,
nomes de entidades e valores monetários em toda a interface.

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

src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx

@@ -1,3 +1,5 @@
+import { RiExternalLinkLine } from "@remixicon/react";
+import Link from "next/link";
 import type { ReactNode } from "react";
 import {
 	formatPaymentBreakdownPercentage,
@@ -17,6 +19,7 @@ export type PaymentBreakdownListItemData = {
 	amount: number;
 	transactions: number;
 	percentage: number;
+	href?: string;
 };
 
 type PaymentBreakdownListItemProps = {
@@ -40,8 +43,21 @@ export function PaymentBreakdownListItem({
 
 			<div className="min-w-0 flex-1">
 				<div className="flex items-center justify-between">
-					<p className="text-sm font-medium text-foreground">{item.title}</p>
-					<MoneyValues amount={item.amount} />
+					{item.href ? (
+						<Link
+							href={item.href}
+							className="inline-flex items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
+						>
+							<span className="truncate">{item.title}</span>
+							<RiExternalLinkLine
+								className="size-3 shrink-0 text-muted-foreground"
+								aria-hidden
+							/>
+						</Link>
+					) : (
+						<p className="text-sm font-medium text-foreground">{item.title}</p>
+					)}
+					<MoneyValues className="font-medium" amount={item.amount} />
 				</div>
 
 				<div className="flex items-center justify-between text-xs text-muted-foreground">

src/features/dashboard/components/payment-overview/payment-conditions-widget.tsx

@@ -1,6 +1,8 @@
 import { RiCheckLine, RiSlideshowLine } from "@remixicon/react";
 import type { PaymentConditionsData } from "@/features/dashboard/payments/payment-conditions-queries";
 import { getConditionIcon } from "@/shared/utils/icons";
+import { formatPeriodForUrl } from "@/shared/utils/period";
+import { slugify } from "@/shared/utils/string";
 import {
 	PaymentBreakdownList,
 	type PaymentBreakdownListItemData,
@@ -8,6 +10,8 @@ import {
 
 type PaymentConditionsWidgetProps = {
 	data: PaymentConditionsData;
+	period: string;
+	adminPayerSlug: string | null;
 };
 
 const resolveConditionIcon = (condition: string) =>
@@ -15,16 +19,27 @@ const resolveConditionIcon = (condition: string) =>
 
 export function PaymentConditionsWidget({
 	data,
+	period,
+	adminPayerSlug,
 }: PaymentConditionsWidgetProps) {
 	const items: PaymentBreakdownListItemData[] = data.conditions.map(
-		(condition) => ({
-			id: condition.condition,
-			title: condition.condition,
-			icon: resolveConditionIcon(condition.condition),
-			amount: condition.amount,
-			transactions: condition.transactions,
-			percentage: condition.percentage,
-		}),
+		(condition) => {
+			const params = new URLSearchParams({
+				type: slugify("Despesa"),
+				condition: slugify(condition.condition),
+				periodo: formatPeriodForUrl(period),
+			});
+			if (adminPayerSlug) params.set("payer", adminPayerSlug);
+			return {
+				id: condition.condition,
+				title: condition.condition,
+				icon: resolveConditionIcon(condition.condition),
+				amount: condition.amount,
+				transactions: condition.transactions,
+				percentage: condition.percentage,
+				href: `/transactions?${params.toString()}`,
+			};
+		},
 	);
 
 	return (

src/features/dashboard/components/payment-overview/payment-methods-widget.tsx

@@ -1,6 +1,8 @@
 import { RiBankCard2Line, RiMoneyDollarCircleLine } from "@remixicon/react";
 import type { PaymentMethodsData } from "@/features/dashboard/payments/payment-methods-queries";
 import { getPaymentMethodIcon } from "@/shared/utils/icons";
+import { formatPeriodForUrl } from "@/shared/utils/period";
+import { slugify } from "@/shared/utils/string";
 import {
 	PaymentBreakdownList,
 	type PaymentBreakdownListItemData,
@@ -8,6 +10,8 @@ import {
 
 type PaymentMethodsWidgetProps = {
 	data: PaymentMethodsData;
+	period: string;
+	adminPayerSlug: string | null;
 };
 
 const resolvePaymentMethodIcon = (paymentMethod: string) =>
@@ -15,15 +19,28 @@ const resolvePaymentMethodIcon = (paymentMethod: string) =>
 		<RiBankCard2Line className="size-5" aria-hidden />
 	);
 
-export function PaymentMethodsWidget({ data }: PaymentMethodsWidgetProps) {
-	const items: PaymentBreakdownListItemData[] = data.methods.map((method) => ({
-		id: method.paymentMethod,
-		title: method.paymentMethod,
-		icon: resolvePaymentMethodIcon(method.paymentMethod),
-		amount: method.amount,
-		transactions: method.transactions,
-		percentage: method.percentage,
-	}));
+export function PaymentMethodsWidget({
+	data,
+	period,
+	adminPayerSlug,
+}: PaymentMethodsWidgetProps) {
+	const items: PaymentBreakdownListItemData[] = data.methods.map((method) => {
+		const params = new URLSearchParams({
+			type: slugify("Despesa"),
+			payment: slugify(method.paymentMethod),
+			periodo: formatPeriodForUrl(period),
+		});
+		if (adminPayerSlug) params.set("payer", adminPayerSlug);
+		return {
+			id: method.paymentMethod,
+			title: method.paymentMethod,
+			icon: resolvePaymentMethodIcon(method.paymentMethod),
+			amount: method.amount,
+			transactions: method.transactions,
+			percentage: method.percentage,
+			href: `/transactions?${params.toString()}`,
+		};
+	});
 
 	return (
 		<PaymentBreakdownList

src/features/dashboard/components/payment-overview/payment-overview-widget-view.tsx

@@ -16,6 +16,8 @@ type PaymentOverviewWidgetViewProps = {
 	paymentConditionsData: PaymentConditionsData;
 	paymentMethodsData: PaymentMethodsData;
 	onTabChange: (value: string) => void;
+	period: string;
+	adminPayerSlug: string | null;
 };
 
 export function PaymentOverviewWidgetView({
@@ -23,6 +25,8 @@ export function PaymentOverviewWidgetView({
 	paymentConditionsData,
 	paymentMethodsData,
 	onTabChange,
+	period,
+	adminPayerSlug,
 }: PaymentOverviewWidgetViewProps) {
 	return (
 		<Tabs value={activeTab} onValueChange={onTabChange} className="w-full">
@@ -38,11 +42,19 @@ export function PaymentOverviewWidgetView({
 			</TabsList>
 
 			<TabsContent value="conditions" className="mt-2">
-				<PaymentConditionsWidget data={paymentConditionsData} />
+				<PaymentConditionsWidget
+					data={paymentConditionsData}
+					period={period}
+					adminPayerSlug={adminPayerSlug}
+				/>
 			</TabsContent>
 
 			<TabsContent value="methods" className="mt-2">
-				<PaymentMethodsWidget data={paymentMethodsData} />
+				<PaymentMethodsWidget
+					data={paymentMethodsData}
+					period={period}
+					adminPayerSlug={adminPayerSlug}
+				/>
 			</TabsContent>
 		</Tabs>
 	);