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

components/dashboard/payment-status/payment-status-category-section.tsx

@@ -0,0 +1,50 @@
+import MoneyValues from "@/components/shared/money-values";
+import StatusDot from "@/components/shared/status-dot";
+import { Progress } from "@/components/ui/progress";
+
+type PaymentStatusCategorySectionProps = {
+	title: string;
+	total: number;
+	confirmed: number;
+	pending: number;
+};
+
+export function PaymentStatusCategorySection({
+	title,
+	total,
+	confirmed,
+	pending,
+}: PaymentStatusCategorySectionProps) {
+	const absTotal = Math.abs(total);
+	const absConfirmed = Math.abs(confirmed);
+	const confirmedPercentage =
+		absTotal > 0 ? (absConfirmed / absTotal) * 100 : 0;
+
+	return (
+		<div className="mt-4 space-y-3">
+			<div className="flex items-center justify-between">
+				<span className="text-sm font-medium text-foreground">{title}</span>
+				<MoneyValues
+					amount={total}
+					className="text-sm font-medium tabular-nums"
+				/>
+			</div>
+
+			<Progress value={confirmedPercentage} className="h-2" />
+
+			<div className="flex flex-col gap-1 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+				<div className="flex items-center gap-1.5">
+					<StatusDot color="bg-primary" />
+					<MoneyValues amount={confirmed} className="tabular-nums" />
+					<span className="text-xs text-muted-foreground">confirmados</span>
+				</div>
+
+				<div className="flex items-center gap-1.5">
+					<StatusDot color="bg-warning/40" />
+					<MoneyValues amount={pending} className="tabular-nums" />
+					<span className="text-xs text-muted-foreground">pendentes</span>
+				</div>
+			</div>
+		</div>
+	);
+}

components/dashboard/payment-status/payment-status-widget-view.tsx

@@ -0,0 +1,47 @@
+import { RiWallet3Line } from "@remixicon/react";
+import { CardContent } from "@/components/ui/card";
+import { WidgetEmptyState } from "@/components/shared/widget-empty-state";
+import type { PaymentStatusData } from "@/lib/dashboard/payments/payment-status";
+import { PaymentStatusCategorySection } from "./payment-status-category-section";
+
+type PaymentStatusWidgetViewProps = {
+	data: PaymentStatusData;
+};
+
+export function PaymentStatusWidgetView({
+	data,
+}: PaymentStatusWidgetViewProps) {
+	const isEmpty = data.income.total === 0 && data.expenses.total === 0;
+
+	if (isEmpty) {
+		return (
+			<CardContent className="px-0">
+				<WidgetEmptyState
+					icon={<RiWallet3Line className="size-6 text-muted-foreground" />}
+					title="Nenhum valor a receber ou pagar no período"
+					description="Registre lançamentos para visualizar os valores confirmados e pendentes."
+				/>
+			</CardContent>
+		);
+	}
+
+	return (
+		<CardContent className="space-y-6 px-0">
+			<PaymentStatusCategorySection
+				title="A Receber"
+				total={data.income.total}
+				confirmed={data.income.confirmed}
+				pending={data.income.pending}
+			/>
+
+			<div className="border-t border-dashed" />
+
+			<PaymentStatusCategorySection
+				title="A Pagar"
+				total={data.expenses.total}
+				confirmed={data.expenses.confirmed}
+				pending={data.expenses.pending}
+			/>
+		</CardContent>
+	);
+}