refactor: reorganiza componentes compartilhados e caminhos do app

components/shared/skeletons/section-cards-skeleton.tsx

@@ -0,0 +1,37 @@
+import { Card, CardFooter, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Skeleton fiel aos cards de métricas do dashboard (SectionCards)
+ * Mantém o mesmo layout de 4 colunas responsivo
+ */
+export function SectionCardsSkeleton() {
+	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">
+			{Array.from({ length: 4 }).map((_, index) => (
+				<Card key={index} className="@container/card gap-2">
+					<CardHeader>
+						<div className="space-y-3">
+							{/* Título com ícone */}
+							<div className="flex items-center gap-1">
+								<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" />
+							</div>
+
+							{/* Valor principal */}
+							<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
+
+							{/* Badge de tendência */}
+							<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+						</div>
+					</CardHeader>
+
+					<CardFooter className="flex-col items-start gap-1.5 text-sm">
+						<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+					</CardFooter>
+				</Card>
+			))}
+		</div>
+	);
+}