git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-05-09 11:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: atualiza loadings e skeletons do dashboard

Browse Source
This commit is contained in:
Felipe Coutinho
2026-03-15 23:23:53 +00:00
parent e84becd1cd
commit 1823b6be56
23 changed files with 292 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(dashboard)/accounts/[accountId]/statement/loading.tsx
View File

@@ -13,7 +13,7 @@ export default function ExtratoLoading() {
return ( return (
<main className="flex flex-col gap-6"> <main className="flex flex-col gap-6">
{/* Month Picker placeholder */} {/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" /> <div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
{/* Account Statement Card */} {/* Account Statement Card */}
<AccountStatementCardSkeleton /> <AccountStatementCardSkeleton />
@@ -23,7 +23,7 @@ export default function ExtratoLoading() {
<div className="space-y-6 pt-4"> <div className="space-y-6 pt-4">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
</div> </div>
{/* Filtros */} {/* Filtros */}

18
src/app/(dashboard)/accounts/loading.tsx
View File

@@ -6,23 +6,23 @@ export default function ContasLoading() {
<div className="space-y-6 pt-4"> <div className="space-y-6 pt-4">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div> </div>
{/* Grid de contas */} {/* Grid de contas */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4"> <div key={i} className="rounded-md border p-6 space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Skeleton className="size-10 rounded-2xl bg-foreground/10" /> <Skeleton className="size-10 rounded-md bg-foreground/10" />
<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-16 rounded-md bg-foreground/10" />
</div> </div>
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
<div className="flex gap-2"> <div className="flex gap-2">
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
))} ))}

30
src/app/(dashboard)/budgets/loading.tsx
View File

@@ -8,53 +8,53 @@ export default function OrcamentosLoading() {
return ( return (
<main className="flex flex-col gap-6"> <main className="flex flex-col gap-6">
{/* Month Picker placeholder */} {/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" /> <div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
<div className="space-y-6 pt-4"> <div className="space-y-6 pt-4">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-64 rounded-md bg-foreground/10" />
</div> </div>
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div> </div>
{/* Grid de cards de orçamentos */} {/* Grid de cards de orçamentos */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4"> <div key={i} className="rounded-md border p-6 space-y-4">
{/* Category com ícone */} {/* Category com ícone */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Skeleton className="size-10 rounded-2xl bg-foreground/10" /> <Skeleton className="size-10 rounded-md bg-foreground/10" />
<div className="flex-1 space-y-2"> <div className="flex-1 space-y-2">
<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
{/* Valor orçado */} {/* Valor orçado */}
<div className="space-y-2 pt-4 border-t"> <div className="space-y-2 pt-4 border-t">
<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
<Skeleton className="h-7 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-7 w-32 rounded-md bg-foreground/10" />
</div> </div>
{/* Valor gasto */} {/* Valor gasto */}
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
<Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-28 rounded-md bg-foreground/10" />
</div> </div>
{/* Barra de progresso */} {/* Barra de progresso */}
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-2 w-full rounded-full bg-foreground/10" /> <Skeleton className="h-2 w-full rounded-full bg-foreground/10" />
<Skeleton className="h-3 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-3 w-16 rounded-md bg-foreground/10" />
</div> </div>
{/* Botões de ação */} {/* Botões de ação */}
<div className="flex gap-2 pt-2"> <div className="flex gap-2 pt-2">
<Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" /> <Skeleton className="h-9 flex-1 rounded-md bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" /> <Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
))} ))}

16
src/app/(dashboard)/calendar/loading.tsx
View File

@@ -8,15 +8,15 @@ export default function CalendarioLoading() {
return ( return (
<main className="flex flex-col gap-3"> <main className="flex flex-col gap-3">
{/* Month Picker placeholder */} {/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" /> <div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
{/* Calendar Container */} {/* Calendar Container */}
<div className="rounded-2xl border p-4 space-y-4"> <div className="rounded-md border p-4 space-y-4">
{/* Cabeçalho com dias da semana */} {/* Cabeçalho com dias da semana */}
<div className="grid grid-cols-7 gap-2 mb-4"> <div className="grid grid-cols-7 gap-2 mb-4">
{["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"].map((day) => ( {["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"].map((day) => (
<div key={day} className="text-center"> <div key={day} className="text-center">
<Skeleton className="h-4 w-12 mx-auto rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-12 mx-auto rounded-md bg-foreground/10" />
</div> </div>
))} ))}
</div> </div>
@@ -26,17 +26,17 @@ export default function CalendarioLoading() {
{Array.from({ length: 42 }).map((_, i) => ( {Array.from({ length: 42 }).map((_, i) => (
<div <div
key={i} key={i}
className="min-h-[100px] rounded-2xl border p-2 space-y-2" className="min-h-[100px] rounded-md border p-2 space-y-2"
> >
{/* Número do dia */} {/* Número do dia */}
<Skeleton className="h-5 w-6 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-6 rounded-md bg-foreground/10" />
{/* Indicadores de eventos (aleatório entre 0-3) */} {/* Indicadores de eventos (aleatório entre 0-3) */}
{i % 3 === 0 && ( {i % 3 === 0 && (
<div className="space-y-1"> <div className="space-y-1">
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
{i % 5 === 0 && ( {i % 5 === 0 && (
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
)} )}
</div> </div>
)} )}
@@ -49,7 +49,7 @@ export default function CalendarioLoading() {
{Array.from({ length: 4 }).map((_, i) => ( {Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="flex items-center gap-2"> <div key={i} className="flex items-center gap-2">
<Skeleton className="size-3 rounded-full bg-foreground/10" /> <Skeleton className="size-3 rounded-full bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</div> </div>
))} ))}
</div> </div>

6
src/app/(dashboard)/cards/[cardId]/invoice/loading.tsx
View File

@@ -13,7 +13,7 @@ export default function FaturaLoading() {
return ( return (
<main className="flex flex-col gap-6"> <main className="flex flex-col gap-6">
{/* Month Picker placeholder */} {/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" /> <div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
{/* Invoice Summary Card */} {/* Invoice Summary Card */}
<section className="flex flex-col gap-4"> <section className="flex flex-col gap-4">
@@ -25,8 +25,8 @@ export default function FaturaLoading() {
<div className="space-y-6 pt-4"> <div className="space-y-6 pt-4">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div> </div>
{/* Filtros */} {/* Filtros */}

16
src/app/(dashboard)/cards/loading.tsx
View File

@@ -6,21 +6,21 @@ export default function CartoesLoading() {
<div className="space-y-6 pt-4"> <div className="space-y-6 pt-4">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div> </div>
{/* Grid de cartões */} {/* Grid de cartões */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4"> <div key={i} className="rounded-md border p-6 space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Skeleton className="size-10 rounded-2xl bg-foreground/10" /> <Skeleton className="size-10 rounded-md bg-foreground/10" />
<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-16 rounded-md bg-foreground/10" />
</div> </div>
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
</div> </div>
))} ))}
</div> </div>

2
src/app/(dashboard)/categories/history/loading.tsx
View File

@@ -25,7 +25,7 @@ export default function Loading() {
</div> </div>
{/* Chart */} {/* Chart */}
<Skeleton className="h-[450px] w-full rounded-lg" /> <Skeleton className="h-[450px] w-full rounded-md" />
</CardContent> </CardContent>
</Card> </Card>
</main> </main>

8
src/app/(dashboard)/categories/loading.tsx
View File

@@ -7,8 +7,8 @@ export default function CategoriasLoading() {
<div className="w-full space-y-6"> <div className="w-full space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div> </div>
{/* Tabs */} {/* Tabs */}
@@ -17,7 +17,7 @@ export default function CategoriasLoading() {
{Array.from({ length: 3 }).map((_, i) => ( {Array.from({ length: 3 }).map((_, i) => (
<Skeleton <Skeleton
key={i} key={i}
className="h-10 w-32 rounded-t-2xl bg-foreground/10" className="h-10 w-32 rounded-t-md bg-foreground/10"
/> />
))} ))}
</div> </div>
@@ -40,7 +40,7 @@ export default function CategoriasLoading() {
key={i} key={i}
className="flex items-center gap-4 border-b border-dashed px-2 py-3 last:border-b-0" 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="size-8 rounded-md bg-foreground/10" />
<Skeleton <Skeleton
className="h-4 rounded bg-foreground/10" className="h-4 rounded bg-foreground/10"
style={{ width: `${100 + (i % 4) * 30}px` }} style={{ width: `${100 + (i % 4) * 30}px` }}

25
src/app/(dashboard)/dashboard/loading.tsx
View File

@@ -1,18 +1,29 @@
import { DashboardGridSkeleton } from "@/shared/components/skeletons"; import {
DashboardGridSkeleton,
DashboardMetricsCardsSkeleton,
} from "@/shared/components/skeletons";
import { Skeleton } from "@/shared/components/ui/skeleton"; import { Skeleton } from "@/shared/components/ui/skeleton";
export default function DashboardLoading() { export default function DashboardLoading() {
return ( return (
<main className="flex flex-col gap-4"> <main className="flex flex-col gap-4">
<div className="space-y-2 px-1 py-2"> <div className="space-y-2 p-2">
<Skeleton className="h-8 w-72 rounded-xl bg-foreground/10" /> <Skeleton className="h-7 w-56 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-56 rounded-xl bg-foreground/10" /> <Skeleton className="h-4 w-48 rounded-md bg-foreground/10" />
</div> </div>
{/* Month Picker skeleton */} <div className="h-[60px] rounded-md border bg-card/60 p-4">
<Skeleton className="h-[56px] w-full rounded-xl bg-foreground/10" /> <div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Skeleton className="size-8 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-36 rounded-md bg-foreground/10" />
<Skeleton className="size-8 rounded-md bg-foreground/10" />
</div>
<Skeleton className="hidden h-8 w-24 rounded-md bg-foreground/10 sm:block" />
</div>
</div>
{/* Dashboard content skeleton (Section Cards + Widget Grid) */} <DashboardMetricsCardsSkeleton />
<DashboardGridSkeleton /> <DashboardGridSkeleton />
</main> </main>
); );

18
src/app/(dashboard)/insights/loading.tsx
View File

@@ -9,26 +9,26 @@ export default function InsightsLoading() {
<div className="space-y-6 pt-4"> <div className="space-y-6 pt-4">
{/* Header */} {/* Header */}
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-10 w-64 rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-64 rounded-md bg-foreground/10" />
<Skeleton className="h-6 w-96 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-96 rounded-md bg-foreground/10" />
</div> </div>
{/* Grid de insights */} {/* Grid de insights */}
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2"> <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
{Array.from({ length: 4 }).map((_, i) => ( {Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4"> <div key={i} className="rounded-md border p-6 space-y-4">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="space-y-2 flex-1"> <div className="space-y-2 flex-1">
<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-3/4 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-3/4 rounded-md bg-foreground/10" />
</div> </div>
<Skeleton className="size-8 rounded-full bg-foreground/10" /> <Skeleton className="size-8 rounded-full bg-foreground/10" />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-3 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-3 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-3 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-3 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-3 w-2/3 rounded-2xl bg-foreground/10" /> <Skeleton className="h-3 w-2/3 rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
))} ))}

22
src/app/(dashboard)/notes/loading.tsx
View File

@@ -10,33 +10,33 @@ export default function AnotacoesLoading() {
<div className="w-full space-y-6"> <div className="w-full space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div> </div>
{/* Grid de cards de notas */} {/* Grid de cards de notas */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-4 space-y-3"> <div key={i} className="rounded-md border p-4 space-y-3">
{/* Título */} {/* Título */}
<Skeleton className="h-6 w-3/4 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-3/4 rounded-md bg-foreground/10" />
{/* Conteúdo (3-4 linhas) */} {/* Conteúdo (3-4 linhas) */}
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-2/3 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-2/3 rounded-md bg-foreground/10" />
{i % 2 === 0 && ( {i % 2 === 0 && (
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
)} )}
</div> </div>
{/* Footer com data e ações */} {/* Footer com data e ações */}
<div className="flex items-center justify-between pt-2 border-t"> <div className="flex items-center justify-between pt-2 border-t">
<Skeleton className="h-3 w-24 rounded-2xl bg-foreground/10" /> <Skeleton className="h-3 w-24 rounded-md bg-foreground/10" />
<div className="flex gap-1"> <div className="flex gap-1">
<Skeleton className="size-8 rounded-2xl bg-foreground/10" /> <Skeleton className="size-8 rounded-md bg-foreground/10" />
<Skeleton className="size-8 rounded-2xl bg-foreground/10" /> <Skeleton className="size-8 rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
</div> </div>

42
src/app/(dashboard)/payers/[payerId]/loading.tsx
View File

@@ -7,63 +7,63 @@ import { Skeleton } from "@/shared/components/ui/skeleton";
export default function PagadorDetailsLoading() { export default function PagadorDetailsLoading() {
return ( return (
<main className="flex flex-col gap-6"> <main className="flex flex-col gap-6">
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" /> <div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
<div className="space-y-6 pt-4"> <div className="space-y-6 pt-4">
<div className="flex gap-2 border-b"> <div className="flex gap-2 border-b">
<Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" /> <Skeleton className="h-10 w-32 rounded-t-md bg-foreground/10" />
<Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" /> <Skeleton className="h-10 w-32 rounded-t-md bg-foreground/10" />
<Skeleton className="h-10 w-36 rounded-t-2xl bg-foreground/10" /> <Skeleton className="h-10 w-36 rounded-t-md bg-foreground/10" />
</div> </div>
<div className="rounded-2xl border p-6 space-y-4"> <div className="rounded-md border p-6 space-y-4">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<Skeleton className="size-20 rounded-full bg-foreground/10" /> <Skeleton className="size-20 rounded-full bg-foreground/10" />
<div className="flex-1 space-y-3"> <div className="flex-1 space-y-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Skeleton className="h-7 w-48 rounded-2xl bg-foreground/10" /> <Skeleton className="h-7 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
</div> </div>
<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-64 rounded-md bg-foreground/10" />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="size-2 rounded-full bg-foreground/10" /> <Skeleton className="size-2 rounded-full bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" /> <Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" /> <Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div className="rounded-2xl border p-6 space-y-4 lg:col-span-2"> <div className="rounded-md border p-6 space-y-4 lg:col-span-2">
<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-48 rounded-md bg-foreground/10" />
<div className="grid grid-cols-3 gap-4 pt-4"> <div className="grid grid-cols-3 gap-4 pt-4">
{Array.from({ length: 3 }).map((_, i) => ( {Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="space-y-2"> <div key={i} className="space-y-2">
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
<Skeleton className="h-7 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-7 w-full rounded-md bg-foreground/10" />
</div> </div>
))} ))}
</div> </div>
</div> </div>
{Array.from({ length: 4 }).map((_, i) => ( {Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4"> <div key={i} className="rounded-md border p-6 space-y-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="size-5 rounded-2xl bg-foreground/10" /> <Skeleton className="size-5 rounded-md bg-foreground/10" />
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
</div> </div>
<div className="space-y-3 pt-4"> <div className="space-y-3 pt-4">
<Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-3/4 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-3/4 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-1/2 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-1/2 rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
))} ))}

26
src/app/(dashboard)/payers/loading.tsx
View File

@@ -9,44 +9,44 @@ export default function PagadoresLoading() {
<main className="flex flex-col items-start gap-6"> <main className="flex flex-col items-start gap-6">
<div className="w-full space-y-6"> <div className="w-full space-y-6">
{/* Input de código de compartilhamento */} {/* Input de código de compartilhamento */}
<div className="rounded-2xl border p-4 space-y-3"> <div className="rounded-md border p-4 space-y-3">
<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-64 rounded-md bg-foreground/10" />
<div className="flex gap-2"> <div className="flex gap-2">
<Skeleton className="h-10 flex-1 rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 flex-1 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-32 rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
{/* Grid de cards de pagadores */} {/* Grid de cards de pagadores */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="rounded-2xl border p-6 space-y-4"> <div key={i} className="rounded-md border p-6 space-y-4">
{/* Avatar + Nome + Badge */} {/* Avatar + Nome + Badge */}
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<Skeleton className="size-16 rounded-full bg-foreground/10" /> <Skeleton className="size-16 rounded-full bg-foreground/10" />
<div className="flex-1 space-y-2"> <div className="flex-1 space-y-2">
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-20 rounded-md bg-foreground/10" />
</div> </div>
{i === 0 && ( {i === 0 && (
<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-16 rounded-md bg-foreground/10" />
)} )}
</div> </div>
{/* Email */} {/* Email */}
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
{/* Status */} {/* Status */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="size-2 rounded-full bg-foreground/10" /> <Skeleton className="size-2 rounded-full bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
</div> </div>
{/* Botões de ação */} {/* Botões de ação */}
<div className="flex gap-2 pt-2 border-t"> <div className="flex gap-2 pt-2 border-t">
<Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" /> <Skeleton className="h-9 flex-1 rounded-md bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" /> <Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" /> <Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
))} ))}

2
src/app/(dashboard)/reports/card-usage/loading.tsx
View File

@@ -22,7 +22,7 @@ export default function Loading() {
{/* Cards grid */} {/* Cards grid */}
<div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-6"> <div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
{[1, 2, 3, 4].map((i) => ( {[1, 2, 3, 4].map((i) => (
<Skeleton key={i} className="h-16 w-full rounded-lg" /> <Skeleton key={i} className="h-16 w-full rounded-md" />
))} ))}
</div> </div>

6
src/app/(dashboard)/transactions/loading.tsx
View File

@@ -12,13 +12,13 @@ export default function LancamentosLoading() {
return ( return (
<main className="flex flex-col gap-6"> <main className="flex flex-col gap-6">
{/* Month Picker placeholder */} {/* Month Picker placeholder */}
<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" /> <div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
<div className="space-y-6 pt-4"> <div className="space-y-6 pt-4">
{/* Header com título e botão */} {/* Header com título e botão */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
</div> </div>
{/* Filtros */} {/* Filtros */}

61
src/shared/components/skeletons/account-statement-card-skeleton.tsx
View File

@@ -1,43 +1,44 @@
import { Skeleton } from "@/shared/components/ui/skeleton"; import { Skeleton } from "@/shared/components/ui/skeleton";
/**
* Skeleton para o card de resumo da conta (AccountStatementCard)
* Reflete fielmente o layout: logo + nome + tipo + badge + métricas
*/
export function AccountStatementCardSkeleton() { export function AccountStatementCardSkeleton() {
return ( return (
<div className="rounded-2xl border p-6 space-y-6"> <div className="rounded-xl border px-4 py-4 sm:px-5 sm:py-5">
{/* Header com logo, nome, tipo e badge */} <div className="flex flex-col gap-4">
<div className="flex items-start justify-between"> {/* Linha 1 — identidade */}
<div className="flex items-start gap-4"> <div className="flex items-center justify-between gap-3">
{/* Logo */} <div className="flex items-center gap-3">
<Skeleton className="size-12 rounded-2xl bg-foreground/10" /> <Skeleton className="size-12 shrink-0 rounded-full bg-foreground/10" />
<div className="space-y-1.5">
<Skeleton className="h-4 w-36 rounded bg-foreground/10" />
<Skeleton className="h-3 w-28 rounded bg-foreground/10" />
</div>
</div>
<Skeleton className="size-7 rounded bg-foreground/10" />
</div>
<div className="space-y-2"> {/* Linha 2 — saldo hero */}
{/* Nome da conta */} <div className="space-y-2">
<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" /> <Skeleton className="h-3 w-40 rounded bg-foreground/10" />
{/* Tipo de conta */} <Skeleton className="h-9 w-44 rounded bg-foreground/10" />
<Skeleton className="h-4 w-32 rounded-2xl bg-foreground/10" /> <div className="flex gap-2">
<Skeleton className="h-5 w-12 rounded-full bg-foreground/10" />
<Skeleton className="h-5 w-20 rounded bg-foreground/10" />
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> {/* Linha 3 — breakdown */}
{/* Badge de status */} <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" /> {Array.from({ length: 4 }).map((_, i) => (
{/* Botão de editar */} <div
<Skeleton className="size-8 rounded-2xl bg-foreground/10" /> key={i}
className="rounded-md border border-border/60 px-3 py-2 space-y-1.5"
>
<Skeleton className="h-3 w-16 rounded bg-foreground/10" />
<Skeleton className="h-5 w-24 rounded bg-foreground/10" />
</div>
))}
</div> </div>
</div> </div>
{/* Métricas em grid */}
<div className="grid grid-cols-2 gap-4 pt-4 border-t md:grid-cols-4">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="space-y-2">
<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
</div>
))}
</div>
</div> </div>
); );
} }

54
src/shared/components/skeletons/category-report-skeleton.tsx
View File

@@ -23,16 +23,16 @@ export function CategoryReportSkeleton() {
<div className="flex flex-wrap items-center justify-between gap-2"> <div className="flex flex-wrap items-center justify-between gap-2">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
{/* Category MultiSelect */} {/* Category MultiSelect */}
<Skeleton className="h-10 w-[200px] rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-[200px] rounded-md bg-foreground/10" />
{/* Start Period */} {/* Start Period */}
<Skeleton className="h-10 w-[150px] rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-[150px] rounded-md bg-foreground/10" />
{/* End Period */} {/* End Period */}
<Skeleton className="h-10 w-[150px] rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-[150px] rounded-md bg-foreground/10" />
{/* Clear Button */} {/* Clear Button */}
<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-16 rounded-md bg-foreground/10" />
</div> </div>
{/* Export Button */} {/* Export Button */}
<Skeleton className="h-10 w-[120px] rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-[120px] rounded-md bg-foreground/10" />
</div> </div>
</div> </div>
@@ -40,8 +40,8 @@ export function CategoryReportSkeleton() {
<Tabs value="table" className="w-full"> <Tabs value="table" className="w-full">
<TabsList> <TabsList>
<div className="flex gap-1"> <div className="flex gap-1">
<Skeleton className="h-10 w-[100px] rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-[100px] rounded-md bg-foreground/10" />
<Skeleton className="h-10 w-[100px] rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-[100px] rounded-md bg-foreground/10" />
</div> </div>
</TabsList> </TabsList>
@@ -58,11 +58,11 @@ export function CategoryReportSkeleton() {
<div className="space-y-3"> <div className="space-y-3">
{/* Category name with icon */} {/* Category name with icon */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="size-4 rounded-2xl bg-foreground/10" /> <Skeleton className="size-4 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-32 rounded-md bg-foreground/10" />
</div> </div>
{/* Type badge */} {/* Type badge */}
<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
{/* Values */} {/* Values */}
<div className="space-y-2"> <div className="space-y-2">
{Array.from({ length: 3 }).map((_, j) => ( {Array.from({ length: 3 }).map((_, j) => (
@@ -70,8 +70,8 @@ export function CategoryReportSkeleton() {
key={j} key={j}
className="flex items-center justify-between" className="flex items-center justify-between"
> >
<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</div> </div>
))} ))}
</div> </div>
@@ -87,17 +87,17 @@ export function CategoryReportSkeleton() {
<div className="space-y-4"> <div className="space-y-4">
{/* Chart title area */} {/* Chart title area */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
</div> </div>
{/* Chart area */} {/* Chart area */}
<Skeleton className="h-[400px] w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-[400px] w-full rounded-md bg-foreground/10" />
{/* Legend */} {/* Legend */}
<div className="flex flex-wrap gap-4 justify-center"> <div className="flex flex-wrap gap-4 justify-center">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="flex items-center gap-2"> <div key={i} className="flex items-center gap-2">
<Skeleton className="size-3 rounded-full bg-foreground/10" /> <Skeleton className="size-3 rounded-full bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</div> </div>
))} ))}
</div> </div>
@@ -124,17 +124,17 @@ function CategoryReportTableSkeleton() {
<TableRow> <TableRow>
{/* Category */} {/* Category */}
<TableHead className="w-[280px] min-w-[280px]"> <TableHead className="w-[280px] min-w-[280px]">
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</TableHead> </TableHead>
{/* Period columns */} {/* Period columns */}
{Array.from({ length: periodColumns }).map((_, i) => ( {Array.from({ length: periodColumns }).map((_, i) => (
<TableHead key={i} className="text-right min-w-[120px]"> <TableHead key={i} className="text-right min-w-[120px]">
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10 ml-auto" /> <Skeleton className="h-4 w-16 rounded-md bg-foreground/10 ml-auto" />
</TableHead> </TableHead>
))} ))}
{/* Total */} {/* Total */}
<TableHead className="text-right min-w-[120px]"> <TableHead className="text-right min-w-[120px]">
<Skeleton className="h-4 w-10 rounded-2xl bg-foreground/10 ml-auto" /> <Skeleton className="h-4 w-10 rounded-md bg-foreground/10 ml-auto" />
</TableHead> </TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
@@ -146,24 +146,24 @@ function CategoryReportTableSkeleton() {
<TableCell> <TableCell>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="size-2 rounded-full bg-foreground/10" /> <Skeleton className="size-2 rounded-full bg-foreground/10" />
<Skeleton className="size-4 rounded-2xl bg-foreground/10" /> <Skeleton className="size-4 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-32 rounded-md bg-foreground/10" />
</div> </div>
</TableCell> </TableCell>
{/* Period values */} {/* Period values */}
{Array.from({ length: periodColumns }).map((_, colIndex) => ( {Array.from({ length: periodColumns }).map((_, colIndex) => (
<TableCell key={colIndex} className="text-right"> <TableCell key={colIndex} className="text-right">
<div className="flex flex-col items-end gap-1"> <div className="flex flex-col items-end gap-1">
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
{colIndex > 0 && ( {colIndex > 0 && (
<Skeleton className="h-3 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-3 w-16 rounded-md bg-foreground/10" />
)} )}
</div> </div>
</TableCell> </TableCell>
))} ))}
{/* Total */} {/* Total */}
<TableCell className="text-right"> <TableCell className="text-right">
<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
@@ -173,17 +173,17 @@ function CategoryReportTableSkeleton() {
<TableRow> <TableRow>
{/* Total label */} {/* Total label */}
<TableCell className="font-bold"> <TableCell className="font-bold">
<Skeleton className="h-5 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-16 rounded-md bg-foreground/10" />
</TableCell> </TableCell>
{/* Period totals */} {/* Period totals */}
{Array.from({ length: periodColumns }).map((_, i) => ( {Array.from({ length: periodColumns }).map((_, i) => (
<TableCell key={i} className="text-right"> <TableCell key={i} className="text-right">
<Skeleton className="h-5 w-24 rounded-2xl bg-foreground/10 ml-auto" /> <Skeleton className="h-5 w-24 rounded-md bg-foreground/10 ml-auto" />
</TableCell> </TableCell>
))} ))}
{/* Grand total */} {/* Grand total */}
<TableCell className="text-right"> <TableCell className="text-right">
<Skeleton className="h-5 w-28 rounded-2xl bg-foreground/10 ml-auto" /> <Skeleton className="h-5 w-28 rounded-md bg-foreground/10 ml-auto" />
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableFooter> </TableFooter>

20
src/shared/components/skeletons/dashboard-grid-skeleton.tsx
View File

@@ -1,17 +1,21 @@
import { DashboardMetricsCardsSkeleton } from "./dashboard-metrics-cards-skeleton"; import { Skeleton } from "@/shared/components/ui/skeleton";
import { WidgetSkeleton } from "./widget-skeleton"; import { WidgetSkeleton } from "./widget-skeleton";
/**
* Skeleton completo para o dashboard grid
* Mantém a mesma estrutura de layout do dashboard real
*/
export function DashboardGridSkeleton() { export function DashboardGridSkeleton() {
return ( return (
<div className="@container/main space-y-4"> <div className="@container/main space-y-4">
{/* Cards de métricas no topo */} <div className="flex flex-wrap items-center justify-between gap-2">
<DashboardMetricsCardsSkeleton /> <div className="grid w-full grid-cols-3 gap-1 sm:flex sm:w-auto sm:items-center sm:gap-2">
<Skeleton className="h-12 rounded-md bg-foreground/10 sm:h-8 sm:w-28" />
<Skeleton className="h-12 rounded-md bg-foreground/10 sm:h-8 sm:w-30" />
<Skeleton className="h-12 rounded-md bg-foreground/10 sm:h-8 sm:w-28" />
</div>
<div className="flex w-full gap-2 sm:w-auto">
<Skeleton className="h-10 flex-1 rounded-md bg-foreground/10 sm:h-8 sm:w-34 sm:flex-none" />
<Skeleton className="h-10 flex-1 rounded-md bg-foreground/10 sm:h-8 sm:w-24 sm:flex-none" />
</div>
</div>
{/* Grid de widgets - mesmos breakpoints do dashboard real */}
<div className="grid grid-cols-1 gap-3 @4xl/main:grid-cols-2 @6xl/main:grid-cols-3"> <div className="grid grid-cols-1 gap-3 @4xl/main:grid-cols-2 @6xl/main:grid-cols-3">
{Array.from({ length: 9 }).map((_, i) => ( {Array.from({ length: 9 }).map((_, i) => (
<WidgetSkeleton key={i} /> <WidgetSkeleton key={i} />

45
src/shared/components/skeletons/dashboard-metrics-cards-skeleton.tsx
View File

@@ -1,34 +1,35 @@
import { Card, CardFooter, CardHeader } from "@/shared/components/ui/card"; import {
Card,
CardFooter,
CardHeader,
CardTitle,
} from "@/shared/components/ui/card";
import { Skeleton } from "@/shared/components/ui/skeleton"; import { Skeleton } from "@/shared/components/ui/skeleton";
/**
* Skeleton fiel aos cards de métricas do dashboard (DashboardMetricsCards)
* Mantém o mesmo layout de 4 colunas responsivo
*/
export function DashboardMetricsCardsSkeleton() { export function DashboardMetricsCardsSkeleton() {
return ( 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"> <div className="grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
{Array.from({ length: 4 }).map((_, index) => ( {Array.from({ length: 4 }).map((_, index) => (
<Card key={index} className="@container/card gap-2"> <Card
key={index}
className="@container/card flex flex-col justify-between min-h-32"
>
<CardHeader> <CardHeader>
<div className="space-y-3"> <CardTitle className="flex items-center gap-1">
{/* Título com ícone */} <Skeleton className="size-4 rounded-md bg-foreground/10" />
<div className="flex items-center gap-1"> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
<Skeleton className="size-4 rounded-2xl bg-foreground/10" /> </CardTitle>
<Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" /> <div className="flex items-baseline gap-2 mt-auto pt-4">
</div> <Skeleton className="h-9 w-32 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-12 rounded-md bg-foreground/10" />
{/* 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> </div>
</CardHeader> </CardHeader>
<CardFooter className="flex-col items-start gap-1.5 text-sm"> <CardFooter className="text-sm">
<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" /> <div className="flex items-center gap-1.5">
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-3 w-20 rounded-md bg-foreground/10" />
<Skeleton className="h-3 w-16 rounded-md bg-foreground/10" />
</div>
</CardFooter> </CardFooter>
</Card> </Card>
))} ))}

6
src/shared/components/skeletons/filter-skeleton.tsx
View File

@@ -10,11 +10,11 @@ export function FilterSkeleton() {
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<Skeleton <Skeleton
key={i} key={i}
className="h-10 w-[130px] rounded-2xl bg-foreground/10" className="h-10 w-[130px] rounded-md bg-foreground/10"
/> />
))} ))}
<Skeleton className="h-10 w-[150px] rounded-2xl bg-foreground/10" /> <Skeleton className="h-10 w-[150px] rounded-md bg-foreground/10" />
<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-8 w-16 rounded-md bg-foreground/10" />
</div> </div>
); );
} }

84
src/shared/components/skeletons/invoice-summary-card-skeleton.tsx
View File

@@ -6,58 +6,54 @@ import { Skeleton } from "@/shared/components/ui/skeleton";
*/ */
export function InvoiceSummaryCardSkeleton() { export function InvoiceSummaryCardSkeleton() {
return ( return (
<div className="rounded-2xl border p-6 space-y-6"> <div className="rounded-md border p-4 space-y-4 sm:p-5">
{/* Header com logo, nome, bandeira e badges */} <div className="flex items-center justify-between gap-3">
<div className="flex items-start justify-between"> <div className="flex min-w-0 items-center gap-3">
<div className="flex items-start gap-4"> <Skeleton className="size-12 rounded-full bg-foreground/10" />
{/* Logo do cartão */} <div className="min-w-0 space-y-2">
<Skeleton className="size-12 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-40 rounded-md bg-foreground/10" />
<Skeleton className="h-3 w-28 rounded-md bg-foreground/10" />
<div className="space-y-2">
{/* Nome do cartão */}
<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
<div className="flex items-center gap-2">
{/* Bandeira */}
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
{/* Badge de status */}
<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
</div>
</div> </div>
</div> </div>
<Skeleton className="size-8 rounded-md bg-foreground/10" />
{/* Botão de editar */}
<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
</div> </div>
{/* Informações da fatura */} <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
<div className="space-y-4 pt-4 border-t">
{/* Período e status */}
<div className="flex items-center justify-between">
<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-24 rounded-2xl bg-foreground/10" />
</div>
{/* Total da fatura */}
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-28 rounded-2xl bg-foreground/10" /> <Skeleton className="h-3 w-24 rounded-md bg-foreground/10" />
<Skeleton className="h-8 w-40 rounded-2xl bg-foreground/10" /> <Skeleton className="h-9 w-44 rounded-md bg-foreground/10" />
</div> <div className="flex items-center gap-2">
<Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
{/* Limite e utilização */} <Skeleton className="h-4 w-28 rounded-md bg-foreground/10" />
<div className="grid grid-cols-2 gap-4 pt-4">
<div className="space-y-2">
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
</div>
<div className="space-y-2">
<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
<Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
</div> </div>
</div> </div>
{/* Botão de ação */} <div className="grid grid-cols-2 gap-2">
<Skeleton className="h-10 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-14 w-full rounded-md bg-foreground/10" />
<Skeleton className="h-14 w-full rounded-md bg-foreground/10" />
</div>
</div>
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
{Array.from({ length: 4 }).map((_, i) => (
<Skeleton
key={i}
className="h-14 w-full rounded-md bg-foreground/10"
/>
))}
</div>
<div className="rounded-md border border-dashed p-3">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="space-y-2">
<Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
<Skeleton className="h-3 w-40 rounded-md bg-foreground/10" />
</div>
<div className="flex items-center gap-2">
<Skeleton className="h-9 w-32 rounded-md bg-foreground/10" />
<Skeleton className="size-8 rounded-md bg-foreground/10" />
</div>
</div>
</div> </div>
</div> </div>
); );

32
src/shared/components/skeletons/transactions-table-skeleton.tsx
View File

@@ -14,7 +14,7 @@ import {
*/ */
export function TransactionsTableSkeleton() { export function TransactionsTableSkeleton() {
return ( return (
<div className="rounded-2xl border"> <div className="rounded-md border">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -24,8 +24,8 @@ export function TransactionsTableSkeleton() {
<TableHead className="w-[120px]">Valor</TableHead> <TableHead className="w-[120px]">Valor</TableHead>
<TableHead className="w-[120px]">Condição</TableHead> <TableHead className="w-[120px]">Condição</TableHead>
<TableHead className="w-[120px]">Pagamento</TableHead> <TableHead className="w-[120px]">Pagamento</TableHead>
<TableHead className="w-[140px]">Payer</TableHead> <TableHead className="w-[140px]">Pagador</TableHead>
<TableHead className="w-[140px]">Category</TableHead> <TableHead className="w-[140px]">Categoria</TableHead>
<TableHead className="w-[140px]">Conta/Cartão</TableHead> <TableHead className="w-[140px]">Conta/Cartão</TableHead>
<TableHead className="w-[80px]">Ações</TableHead> <TableHead className="w-[80px]">Ações</TableHead>
</TableRow> </TableRow>
@@ -34,45 +34,45 @@ export function TransactionsTableSkeleton() {
{Array.from({ length: 8 }).map((_, i) => ( {Array.from({ length: 8 }).map((_, i) => (
<TableRow key={i}> <TableRow key={i}>
<TableCell> <TableCell>
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
</TableCell> </TableCell>
<TableCell> <TableCell>
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
</TableCell> </TableCell>
<TableCell> <TableCell>
<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
</TableCell> </TableCell>
<TableCell> <TableCell>
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</TableCell> </TableCell>
<TableCell> <TableCell>
<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-16 rounded-md bg-foreground/10" />
</TableCell> </TableCell>
<TableCell> <TableCell>
<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="size-6 rounded-full bg-foreground/10" /> <Skeleton className="size-6 rounded-full bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="size-4 rounded-2xl bg-foreground/10" /> <Skeleton className="size-4 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="size-6 rounded-2xl bg-foreground/10" /> <Skeleton className="size-6 rounded-md bg-foreground/10" />
<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="flex gap-1"> <div className="flex gap-1">
<Skeleton className="size-8 rounded-2xl bg-foreground/10" /> <Skeleton className="size-8 rounded-md bg-foreground/10" />
<Skeleton className="size-8 rounded-2xl bg-foreground/10" /> <Skeleton className="size-8 rounded-md bg-foreground/10" />
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>

28
src/shared/components/skeletons/widget-skeleton.tsx
View File

@@ -1,40 +1,40 @@
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"; import { Card, CardContent, CardHeader } from "@/shared/components/ui/card";
import { Skeleton } from "@/shared/components/ui/skeleton"; import { Skeleton } from "@/shared/components/ui/skeleton";
/** const LINE_WIDTHS = ["w-full", "w-5/6", "w-4/5", "w-full", "w-3/4"] as const;
* Skeleton fiel ao WidgetCard const SUBLABEL_WIDTHS = ["w-24", "w-16", "w-20", "w-28", "w-16"] as const;
* Usado enquanto widgets do dashboard estão carregando
*/
export function WidgetSkeleton() { export function WidgetSkeleton() {
return ( return (
<Card className="relative h-auto gap-0 py-0 md:h-custom-height-card md:overflow-hidden"> <Card className="relative h-auto gap-0 py-0 md:h-custom-height-card md:overflow-hidden">
<CardHeader className="border-b px-6 py-4"> <CardHeader className="border-b px-6 py-4">
<div className="flex w-full items-start justify-between"> <div className="flex w-full items-start justify-between">
<div className="min-w-0 space-y-1.5"> <div className="min-w-0 space-y-1.5">
{/* Title com ícone */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="size-4 rounded-2xl bg-foreground/10" /> <Skeleton className="size-4 rounded-md bg-foreground/10" />
<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" /> <Skeleton className="h-5 w-32 rounded-md bg-foreground/10" />
</div> </div>
{/* Subtitle */} <Skeleton className="h-3 w-48 rounded-md bg-foreground/10" />
<Skeleton className="h-3 w-48 rounded-2xl bg-foreground/10" />
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="min-h-0 flex-1 overflow-hidden px-6 py-4"> <CardContent className="min-h-0 flex-1 overflow-hidden px-6 py-4">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
{/* Simula 5 linhas de conteúdo */}
{Array.from({ length: 5 }).map((_, i) => ( {Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="flex items-center justify-between gap-3"> <div key={i} className="flex items-center justify-between gap-3">
<div className="flex flex-1 items-center gap-3"> <div className="flex flex-1 items-center gap-3">
<Skeleton className="size-10 rounded-2xl bg-foreground/10" /> <Skeleton className="size-10 rounded-md bg-foreground/10" />
<div className="flex-1 space-y-2"> <div className="flex-1 space-y-2">
<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" /> <Skeleton
<Skeleton className="h-3 w-24 rounded-2xl bg-foreground/10" /> className={`h-4 ${LINE_WIDTHS[i % LINE_WIDTHS.length]} rounded-md bg-foreground/10`}
/>
<Skeleton
className={`h-3 ${SUBLABEL_WIDTHS[i % SUBLABEL_WIDTHS.length]} rounded-md bg-foreground/10`}
/>
</div> </div>
</div> </div>
<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" /> <Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
</div> </div>
))} ))}
</div> </div>