fix: corrige tipagem compartilhada e compatibilidade do typecheck

src/shared/components/ui/chart.tsx

@@ -1,6 +1,13 @@
 "use client";
 
 import * as React from "react";
+import type {
+	LegendPayload as RechartsLegendPayload,
+	LegendProps as RechartsLegendProps,
+	TooltipContentProps as RechartsTooltipContentProps,
+	TooltipPayloadEntry,
+	TooltipValueType,
+} from "recharts";
 import * as RechartsPrimitive from "recharts";
 
 import { cn } from "@/shared/utils/ui";
@@ -134,7 +141,7 @@ function ChartTooltipContent({
 	color,
 	nameKey,
 	labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+}: Partial<RechartsTooltipContentProps<TooltipValueType, string | number>> &
 	React.ComponentProps<"div"> & {
 		hideLabel?: boolean;
 		hideIndicator?: boolean;
@@ -197,21 +204,21 @@ function ChartTooltipContent({
 			<div className="grid gap-1.5">
 				{payload
 					.filter((item) => item.type !== "none")
-					.map((item, index) => {
+					.map((item: TooltipPayloadEntry, index) => {
 						const key = `${nameKey || item.name || item.dataKey || "value"}`;
 						const itemConfig = getPayloadConfigFromPayload(config, item, key);
 						const indicatorColor = color || item.payload.fill || item.color;
 
 						return (
 							<div
-								key={item.dataKey}
+								key={String(item.dataKey ?? item.name ?? index)}
 								className={cn(
 									"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
 									indicator === "dot" && "items-center",
 								)}
 							>
 								{formatter && item?.value !== undefined && item.name ? (
-									formatter(item.value, item.name, item, index, item.payload)
+									formatter(item.value, item.name, item, index, payload)
 								) : (
 									<>
 										{itemConfig?.icon ? (
@@ -250,7 +257,7 @@ function ChartTooltipContent({
 													{itemConfig?.label || item.name}
 												</span>
 											</div>
-											{item.value && (
+											{item.value !== undefined && item.value !== null && (
 												<span className="text-foreground font-mono font-medium tabular-nums">
 													{item.value.toLocaleString()}
 												</span>
@@ -274,12 +281,14 @@ function ChartLegendContent({
 	payload,
 	verticalAlign = "bottom",
 	nameKey,
-}: React.ComponentProps<"div"> &
-	Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-		hideIcon?: boolean;
-		nameKey?: string;
-	}) {
+}: React.ComponentProps<"div"> & {
+	payload?: ReadonlyArray<RechartsLegendPayload>;
+	verticalAlign?: RechartsLegendProps["verticalAlign"];
+	hideIcon?: boolean;
+	nameKey?: string;
+}) {
 	const { config } = useChart();
+	type LegendPayloadEntry = RechartsLegendPayload;
 
 	if (!payload?.length) {
 		return null;
@@ -294,14 +303,14 @@ function ChartLegendContent({
 			)}
 		>
 			{payload
-				.filter((item) => item.type !== "none")
-				.map((item) => {
+				.filter((item: LegendPayloadEntry) => item.type !== "none")
+				.map((item: LegendPayloadEntry) => {
 					const key = `${nameKey || item.dataKey || "value"}`;
 					const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
 					return (
 						<div
-							key={item.value}
+							key={String(item.dataKey ?? item.value)}
 							className={cn(
 								"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
 							)}

src/shared/components/ui/currency-input.tsx

@@ -63,6 +63,7 @@ export interface CurrencyInputProps
 	> {
 	value: string;
 	onValueChange: (value: string) => void;
+	onChange?: React.ComponentProps<typeof Input>["onChange"];
 }
 
 export const CurrencyInput = React.forwardRef<

src/shared/components/ui/spinner.tsx

@@ -1,7 +1,10 @@
 import { RiLoader4Line } from "@remixicon/react";
 import { cn } from "@/shared/utils/ui";
 
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+function Spinner({
+	className,
+	...props
+}: React.ComponentProps<typeof RiLoader4Line>) {
 	return (
 		<RiLoader4Line
 			role="status"

src/shared/lib/installments/anticipation-types.ts

@@ -26,7 +26,7 @@ export type EligibleInstallment = {
  * Antecipação com dados completos
  */
 export type InstallmentAnticipationWithRelations = InstallmentAnticipation & {
-	transaction: Transaction;
+	transaction: Transaction | null;
 	payer: Payer | null;
 	category: Category | null;
 };