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

src/features/budgets/components/budget-card.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import {
+	RiDeleteBin5Line,
+	RiFileList2Line,
+	RiPencilLine,
+} from "@remixicon/react";
+import Link from "next/link";
+import { CategoryIconBadge } from "@/features/categories/components/category-icon-badge";
+import MoneyValues from "@/shared/components/money-values";
+import { Card, CardContent, CardFooter } from "@/shared/components/ui/card";
+import { Progress } from "@/shared/components/ui/progress";
+import { cn } from "@/shared/utils/ui";
+import type { Budget } from "./types";
+
+interface BudgetCardProps {
+	budget: Budget;
+	colorIndex: number;
+	periodLabel: string;
+	onEdit: (budget: Budget) => void;
+	onRemove: (budget: Budget) => void;
+}
+
+const buildUsagePercent = (spent: number, limit: number) => {
+	if (limit <= 0) {
+		return spent > 0 ? 100 : 0;
+	}
+	const percent = (spent / limit) * 100;
+	return Math.min(Math.max(percent, 0), 100);
+};
+
+const formatCategoryName = (budget: Budget) =>
+	budget.category?.name ?? "Categoria removida";
+
+export function BudgetCard({
+	budget,
+	colorIndex,
+	periodLabel,
+	onEdit,
+	onRemove,
+}: BudgetCardProps) {
+	const { amount: limit, spent } = budget;
+	const exceeded = spent > limit && limit >= 0;
+	const difference = Math.abs(spent - limit);
+	const usagePercent = buildUsagePercent(spent, limit);
+
+	return (
+		<Card className="flex h-full flex-col">
+			<CardContent className="flex h-full flex-col gap-4">
+				<div className="flex items-start gap-3">
+					<CategoryIconBadge
+						icon={budget.category?.icon ?? undefined}
+						name={formatCategoryName(budget)}
+						colorIndex={colorIndex}
+						size="lg"
+					/>
+					<div className="space-y-1">
+						<h3 className="text-base font-semibold leading-tight">
+							{formatCategoryName(budget)}
+						</h3>
+						<p className="text-xs text-muted-foreground">
+							Orçamento de {periodLabel}
+						</p>
+					</div>
+				</div>
+
+				<div className="flex flex-1 flex-col gap-2">
+					<div className="flex items-baseline justify-between text-sm">
+						<span className="text-muted-foreground">Gasto até agora</span>
+						<MoneyValues
+							amount={spent}
+							className={cn(exceeded && "text-destructive")}
+						/>
+					</div>
+					<Progress
+						value={usagePercent}
+						className={cn("h-2", exceeded && "bg-destructive/20!")}
+					/>
+					<div className="flex flex-wrap items-baseline justify-between gap-1 text-sm">
+						<span className="text-muted-foreground">Limite</span>
+						<MoneyValues amount={limit} className="text-foreground" />
+					</div>
+
+					<div>
+						{exceeded ? (
+							<div className="text-xs text-destructive">
+								Excedeu em <MoneyValues amount={difference} />
+							</div>
+						) : (
+							<div className="text-xs text-success">
+								Restam <MoneyValues amount={Math.max(limit - spent, 0)} />{" "}
+								disponíveis.
+							</div>
+						)}
+					</div>
+				</div>
+			</CardContent>
+			<CardFooter className="flex flex-wrap gap-3 px-5 text-sm">
+				<button
+					type="button"
+					onClick={() => onEdit(budget)}
+					className="flex items-center gap-1 text-primary font-medium transition-opacity hover:opacity-80"
+				>
+					<RiPencilLine className="size-4" aria-hidden /> editar
+				</button>
+				{budget.category && (
+					<Link
+						href={`/categories/${budget.category.id}`}
+						className="flex items-center gap-1 text-primary font-medium transition-opacity hover:opacity-80"
+					>
+						<RiFileList2Line className="size-4" aria-hidden /> detalhes
+					</Link>
+				)}
+				<button
+					type="button"
+					onClick={() => onRemove(budget)}
+					className="flex items-center gap-1 text-destructive font-medium transition-opacity hover:opacity-80"
+				>
+					<RiDeleteBin5Line className="size-4" aria-hidden /> remover
+				</button>
+			</CardFooter>
+		</Card>
+	);
+}