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

refactor(core): centraliza hooks, providers e base compartilhada

Browse Source
This commit is contained in:
Felipe Coutinho
2026-03-09 17:11:55 +00:00
parent 2de5101058
commit 3e06a1d056
76 changed files with 3271 additions and 709 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { SectionCardsSkeleton } from "./section-cards-skeleton";
import { DashboardMetricsCardsSkeleton } from "./dashboard-metrics-cards-skeleton";
import { WidgetSkeleton } from "./widget-skeleton";
/**
@@ -8,8 +8,8 @@ import { WidgetSkeleton } from "./widget-skeleton";
export function DashboardGridSkeleton() {
return (
<div className="@container/main space-y-4">
{/* Section Cards no topo */}
<SectionCardsSkeleton />
{/* Cards de métricas no topo */}
<DashboardMetricsCardsSkeleton />
{/* 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">

37
components/shared/skeletons/dashboard-metrics-cards-skeleton.tsx Normal file
View File

@@ -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 (DashboardMetricsCards)
* Mantém o mesmo layout de 4 colunas responsivo
*/
export function DashboardMetricsCardsSkeleton() {
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>
);
}

2
components/shared/skeletons/index.ts
View File

@@ -5,8 +5,8 @@
export { AccountStatementCardSkeleton } from "./account-statement-card-skeleton";
export { CategoryReportSkeleton } from "./category-report-skeleton";
export { DashboardGridSkeleton } from "./dashboard-grid-skeleton";
export { DashboardMetricsCardsSkeleton } from "./dashboard-metrics-cards-skeleton";
export { FilterSkeleton } from "./filter-skeleton";
export { InvoiceSummaryCardSkeleton } from "./invoice-summary-card-skeleton";
export { SectionCardsSkeleton } from "./section-cards-skeleton";
export { TransactionsTableSkeleton } from "./transactions-table-skeleton";
export { WidgetSkeleton } from "./widget-skeleton";

14
components/shared/skeletons/widget-skeleton.tsx
View File

@@ -7,23 +7,23 @@ import { Skeleton } from "@/components/ui/skeleton";
*/
export function WidgetSkeleton() {
return (
<Card className="relative h-auto md:h-custom-height-1 md:overflow-hidden">
<CardHeader className="border-b [.border-b]:pb-2">
<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">
<div className="flex w-full items-start justify-between">
<div className="space-y-2">
<div className="min-w-0 space-y-1.5">
{/* Title com ícone */}
<div className="flex items-center gap-1">
<div className="flex items-center gap-2">
<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
</div>
{/* Subtitle */}
<Skeleton className="h-4 w-48 rounded-2xl bg-foreground/10" />
<Skeleton className="h-3 w-48 rounded-2xl bg-foreground/10" />
</div>
</div>
</CardHeader>
<CardContent className="max-h-[calc(var(--spacing-custom-height-1)-5rem)] overflow-hidden md:max-h-[calc(100%-5rem)]">
<div className="flex flex-col gap-3 py-4">
<CardContent className="min-h-0 flex-1 overflow-hidden px-6 py-4">
<div className="flex flex-col gap-3">
{/* Simula 5 linhas de conteúdo */}
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="flex items-center justify-between gap-3">