chore: apply pending dashboard and UI updates

This commit is contained in:
Felipe Coutinho
2026-02-28 15:34:54 +00:00
parent 125e0dfb4e
commit 4a88309709
16 changed files with 609 additions and 197 deletions

View File

@@ -1,3 +1,4 @@
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
export default function CategoriasLoading() {
@@ -21,32 +22,40 @@ export default function CategoriasLoading() {
))}
</div>
{/* Grid de cards de categorias */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4">
{/* Ícone + Nome */}
<div className="flex items-center gap-3">
<Skeleton className="size-12 rounded-2xl bg-foreground/10" />
<div className="flex-1 space-y-2">
<Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
{/* Tabela de categorias */}
<Card className="py-2">
<CardContent className="px-2 py-4 sm:px-4">
<div className="space-y-0">
{/* Header da tabela */}
<div className="flex items-center gap-4 border-b px-2 pb-3">
<Skeleton className="size-5 rounded bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded bg-foreground/10" />
<div className="flex-1" />
<Skeleton className="h-4 w-14 rounded bg-foreground/10" />
</div>
{/* Linhas da tabela */}
{Array.from({ length: 8 }).map((_, i) => (
<div
key={i}
className="flex items-center gap-4 border-b border-dashed px-2 py-3 last:border-b-0"
>
<Skeleton className="size-8 rounded-lg bg-foreground/10" />
<Skeleton
className="h-4 rounded bg-foreground/10"
style={{ width: `${100 + (i % 4) * 30}px` }}
/>
<div className="flex-1" />
<div className="flex items-center gap-3">
<Skeleton className="h-4 w-14 rounded bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded bg-foreground/10" />
</div>
</div>
</div>
{/* Descrição */}
{i % 3 === 0 && (
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
)}
{/* Botões de ação */}
<div className="flex gap-2 pt-2 border-t">
<Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
</div>
))}
</div>
))}
</div>
</CardContent>
</Card>
</div>
</div>
</main>