refactor(dashboard): reorganiza widgets e remove magnet-lines

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

@@ -0,0 +1,38 @@
+import { RiCheckLine, RiSlideshowLine } from "@remixicon/react";
+import type { PaymentConditionsData } from "@/lib/dashboard/payments/payment-conditions";
+import { getConditionIcon } from "@/lib/utils/icons";
+import {
+	PaymentBreakdownList,
+	type PaymentBreakdownListItemData,
+} from "./payment-breakdown-list";
+
+type PaymentConditionsWidgetProps = {
+	data: PaymentConditionsData;
+};
+
+const resolveConditionIcon = (condition: string) =>
+	getConditionIcon(condition) ?? <RiCheckLine className="size-5" aria-hidden />;
+
+export function PaymentConditionsWidget({
+	data,
+}: 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,
+		}),
+	);
+
+	return (
+		<PaymentBreakdownList
+			items={items}
+			emptyIcon={<RiSlideshowLine className="size-6 text-muted-foreground" />}
+			emptyTitle="Nenhuma despesa encontrada"
+			emptyDescription="As distribuições por condição aparecerão conforme novos lançamentos."
+		/>
+	);
+}