feat(finance): refina fluxos de transacoes e pagadores

components/categorias/categories-page.tsx

@@ -7,10 +7,10 @@ import {
 	RiPencilLine,
 } from "@remixicon/react";
 import Link from "next/link";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { toast } from "sonner";
 import { deleteCategoryAction } from "@/app/(dashboard)/categorias/actions";
-import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
+import { ConfirmActionDialog } from "@/components/shared/confirm-action-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
@@ -69,31 +69,31 @@ export function CategoriesPage({ categories }: CategoriesPageProps) {
 		return base;
 	}, [categories]);
 
-	const handleEdit = useCallback((category: Category) => {
+	const handleEdit = (category: Category) => {
 		setSelectedCategory(category);
 		setEditOpen(true);
-	}, []);
+	};
 
-	const handleEditOpenChange = useCallback((open: boolean) => {
+	const handleEditOpenChange = (open: boolean) => {
 		setEditOpen(open);
 		if (!open) {
 			setSelectedCategory(null);
 		}
-	}, []);
+	};
 
-	const handleRemoveRequest = useCallback((category: Category) => {
+	const handleRemoveRequest = (category: Category) => {
 		setCategoryToRemove(category);
 		setRemoveOpen(true);
-	}, []);
+	};
 
-	const handleRemoveOpenChange = useCallback((open: boolean) => {
+	const handleRemoveOpenChange = (open: boolean) => {
 		setRemoveOpen(open);
 		if (!open) {
 			setCategoryToRemove(null);
 		}
-	}, []);
+	};
 
-	const handleRemoveConfirm = useCallback(async () => {
+	const handleRemoveConfirm = async () => {
 		if (!categoryToRemove) {
 			return;
 		}
@@ -107,7 +107,7 @@ export function CategoriesPage({ categories }: CategoriesPageProps) {
 
 		toast.error(result.error);
 		throw new Error(result.error);
-	}, [categoryToRemove]);
+	};
 
 	const removeTitle = categoryToRemove
 		? `Remover categoria "${categoryToRemove.name}"?`

components/categorias/category-detail-header.tsx

@@ -1,8 +1,9 @@
 import { RiArrowDownSFill, RiArrowUpSFill } from "@remixicon/react";
+import { TypeBadge } from "@/components/shared/type-badge";
 import type { CategoryType } from "@/lib/categorias/constants";
 import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";
+import { formatPercentage } from "@/lib/utils/percentage";
 import { cn } from "@/lib/utils/ui";
-import { TypeBadge } from "../type-badge";
 import { Card } from "../ui/card";
 import { CategoryIconBadge } from "./category-icon-badge";
 
@@ -61,9 +62,12 @@ export function CategoryDetailHeader({
 
 	const variationLabel =
 		typeof percentageChange === "number"
-			? `${percentageChange > 0 ? "+" : ""}${Math.abs(percentageChange).toFixed(
-					1,
-				)}%`
+			? formatPercentage(percentageChange, {
+					minimumFractionDigits: 1,
+					maximumFractionDigits: 1,
+					absolute: true,
+					signDisplay: percentageChange === 0 ? "auto" : "always",
+				})
 			: "—";
 
 	return (

components/categorias/category-select-items.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import DotIcon from "@/components/dot-icon";
+import StatusDot from "@/components/shared/status-dot";
 
 export function TypeSelectContent({ label }: { label: string }) {
 	const isReceita = label === "Receita";
 
 	return (
 		<span className="flex items-center gap-2">
-			<DotIcon color={isReceita ? "bg-success" : "bg-destructive"} />
+			<StatusDot color={isReceita ? "bg-success" : "bg-destructive"} />
 			<span>{label}</span>
 		</span>
 	);

components/categorias/types.ts

@@ -1,3 +1,5 @@
+import type { CategoryType } from "@/lib/categorias/constants";
+
 export type { CategoryType } from "@/lib/categorias/constants";
 export {
 	CATEGORY_TYPE_LABEL,