refactor(core): move app para src e padroniza estrutura

2026-05-10 03:11:46 +00:00 · 2026-03-12 19:22:50 +00:00
parent d92e70f1b9
commit b0fbb1062a
567 changed files with 8981 additions and 5014 deletions
--- a/src/features/dashboard/components/dashboard-metrics-cards.tsx
+++ b/src/features/dashboard/components/dashboard-metrics-cards.tsx
@@ -0,0 +1,127 @@
+import {
+	RiArrowDownLine,
+	RiArrowDownSFill,
+	RiArrowUpLine,
+	RiArrowUpSFill,
+	RiCashLine,
+	RiIncreaseDecreaseLine,
+	RiSubtractLine,
+} from "@remixicon/react";
+import type { DashboardCardMetrics } from "@/features/dashboard/dashboard-metrics-queries";
+import MoneyValues from "@/shared/components/money-values";
+import {
+	Card,
+	CardAction,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/shared/components/ui/card";
+import { formatPercentage } from "@/shared/utils/percentage";
+
+type DashboardMetricsCardsProps = {
+	metrics: DashboardCardMetrics;
+};
+
+type Trend = "up" | "down" | "flat";
+
+const TREND_THRESHOLD = 0.005;
+
+const CARDS = [
+	{
+		label: "Receitas",
+		key: "receitas",
+		icon: RiArrowUpLine,
+		invertTrend: false,
+	},
+	{
+		label: "Despesas",
+		key: "despesas",
+		icon: RiArrowDownLine,
+		invertTrend: true,
+	},
+	{
+		label: "Balanço",
+		key: "balanco",
+		icon: RiIncreaseDecreaseLine,
+		invertTrend: false,
+	},
+	{ label: "Previsto", key: "previsto", icon: RiCashLine, invertTrend: false },
+] as const;
+
+const TREND_ICONS = {
+	up: RiArrowUpSFill,
+	down: RiArrowDownSFill,
+	flat: RiSubtractLine,
+} as const;
+
+const getTrend = (current: number, previous: number): Trend => {
+	const diff = current - previous;
+	if (diff > TREND_THRESHOLD) return "up";
+	if (diff < -TREND_THRESHOLD) return "down";
+	return "flat";
+};
+
+const getPercentChange = (current: number, previous: number): string => {
+	const EPSILON = 0.01; // Considera valores menores que 1 centavo como zero
+
+	if (Math.abs(previous) < EPSILON) {
+		if (Math.abs(current) < EPSILON) return "0%";
+		return "—";
+	}
+
+	const change = ((current - previous) / Math.abs(previous)) * 100;
+	return Number.isFinite(change) && Math.abs(change) < 1000000
+		? formatPercentage(change, {
+				maximumFractionDigits: 1,
+				minimumFractionDigits: 1,
+				signDisplay: "always",
+			})
+		: "—";
+};
+
+const getTrendColor = (trend: Trend, invertTrend: boolean): string => {
+	if (trend === "flat") return "";
+	const isPositive = invertTrend ? trend === "down" : trend === "up";
+	return isPositive
+		? "text-success border-success"
+		: "text-destructive border-destructive";
+};
+
+export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
+	return (
+		<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+			{CARDS.map(({ label, key, icon: Icon, invertTrend }) => {
+				const metric = metrics[key];
+				const trend = getTrend(metric.current, metric.previous);
+				const TrendIcon = TREND_ICONS[trend];
+				const trendColor = getTrendColor(trend, invertTrend);
+
+				return (
+					<Card key={label} className="@container/card gap-2">
+						<CardHeader>
+							<CardTitle className="flex items-center gap-1 tracking-tighter lowercase">
+								<Icon className="size-4" />
+								{label}
+							</CardTitle>
+							<MoneyValues className="text-2xl" amount={metric.current} />
+							<CardAction>
+								<div className={`flex items-center text-xs ${trendColor}`}>
+									<TrendIcon size={16} />
+									{getPercentChange(metric.current, metric.previous)}
+								</div>
+							</CardAction>
+						</CardHeader>
+						<CardFooter className="flex-col items-start gap-2 text-sm">
+							<div className="line-clamp-1 flex gap-2 text-xs">
+								mês anterior
+							</div>
+							<div className="text-foreground">
+								<MoneyValues amount={metric.previous} />
+							</div>
+						</CardFooter>
+					</Card>
+				);
+			})}
+		</div>
+	);
+}