Gladyson/openmonetis
1
0
Fork 0
forked from git.gladyson/openmonetis
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): melhorar layouts da aba Companion e página de cartões

Browse Source 
- Criar componente CompanionTab com layout reorganizado
- Simplificar ApiTokensForm com lista de dispositivos mais compacta
- Redesenhar página de relatórios de cartões com layout horizontal
- Atualizar CardsOverview com stats em cards separados e lista compacta
- Simplificar CardUsageChart removendo seletor de período (fixo 12 meses)
- Criar CardInvoiceStatus com timeline minimalista
- Atualizar skeletons para refletir novos layouts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-01-30 02:23:32 +00:00
parent df1d149e4a
commit 11f85e4b28
15 changed files with 453 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
app/(dashboard)/relatorios/cartoes/loading.tsx
View File

@@ -3,83 +3,86 @@ import { Skeleton } from "@/components/ui/skeleton";
export default function Loading() {
return (
<main className="flex flex-col gap-4 px-6">
<div className="flex flex-col gap-1">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-4 w-96" />
<main className="flex flex-col gap-4">
{/* MonthNavigation skeleton */}
<Skeleton className="h-10 w-64" />
{/* Summary stats */}
<div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
{[1, 2, 3, 4].map((i) => (
<Card key={i}>
<CardContent className="p-4">
<Skeleton className="h-3 w-16 mb-1" />
<Skeleton className="h-6 w-24" />
</CardContent>
</Card>
))}
</div>
<Skeleton className="h-10 w-full max-w-md" />
{/* Cards grid */}
<div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
{[1, 2, 3, 4].map((i) => (
<Skeleton key={i} className="h-16 w-full rounded-lg" />
))}
</div>
<div className="grid gap-4 lg:grid-cols-3">
<div className="lg:col-span-1">
<Card>
<CardHeader className="pb-2">
<Skeleton className="h-5 w-40" />
</CardHeader>
<CardContent className="space-y-4">
<div className="grid gap-3 sm:grid-cols-3">
<Skeleton className="h-16 w-full" />
<Skeleton className="h-16 w-full" />
<Skeleton className="h-16 w-full" />
</div>
<div className="space-y-3">
{[1, 2, 3].map((i) => (
<Skeleton key={i} className="h-20 w-full" />
))}
</div>
</CardContent>
</Card>
</div>
<div className="lg:col-span-2 space-y-4">
<Skeleton className="h-8 w-48" />
<Card>
<CardHeader className="pb-2">
<Skeleton className="h-5 w-40" />
</CardHeader>
<CardContent>
<Skeleton className="h-[280px] w-full" />
</CardContent>
</Card>
<div className="grid gap-4 md:grid-cols-2">
<Card>
<CardHeader className="pb-2">
<Skeleton className="h-5 w-40" />
</CardHeader>
<CardContent className="space-y-3">
{[1, 2, 3, 4, 5].map((i) => (
<Skeleton key={i} className="h-12 w-full" />
))}
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<Skeleton className="h-5 w-40" />
</CardHeader>
<CardContent className="space-y-3">
{[1, 2, 3, 4, 5].map((i) => (
<Skeleton key={i} className="h-12 w-full" />
))}
</CardContent>
</Card>
{/* CardUsageChart */}
<Card>
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<Skeleton className="h-5 w-32" />
<div className="flex items-center gap-2">
<Skeleton className="size-6 rounded" />
<Skeleton className="h-4 w-24" />
</div>
</div>
</CardHeader>
<CardContent>
<Skeleton className="h-[280px] w-full" />
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<Skeleton className="h-5 w-40" />
</CardHeader>
<CardContent className="space-y-2">
{[1, 2, 3, 4, 5, 6].map((i) => (
<Skeleton key={i} className="h-10 w-full" />
))}
</CardContent>
</Card>
</div>
{/* CategoryBreakdown + TopExpenses */}
<div className="grid gap-4 md:grid-cols-2">
<Card className="h-full">
<CardHeader className="pb-3">
<Skeleton className="h-5 w-36" />
</CardHeader>
<CardContent className="space-y-2">
{[1, 2, 3, 4].map((i) => (
<Skeleton key={i} className="h-14 w-full" />
))}
</CardContent>
</Card>
<Card className="h-full">
<CardHeader className="pb-3">
<Skeleton className="h-5 w-36" />
</CardHeader>
<CardContent className="space-y-2">
{[1, 2, 3, 4].map((i) => (
<Skeleton key={i} className="h-14 w-full" />
))}
</CardContent>
</Card>
</div>
{/* CardInvoiceStatus - timeline minimalista */}
<Card>
<CardHeader className="pb-2">
<Skeleton className="h-5 w-24" />
</CardHeader>
<CardContent>
<div className="flex items-center gap-1">
{[1, 2, 3, 4, 5, 6].map((i) => (
<div key={i} className="flex-1 flex flex-col items-center gap-1">
<Skeleton className="w-full h-3 rounded-sm" />
<Skeleton className="h-3 w-6" />
</div>
))}
</div>
</CardContent>
</Card>
</main>
);
}

63
app/(dashboard)/relatorios/cartoes/page.tsx
View File

@@ -5,6 +5,7 @@ import { CardInvoiceStatus } from "@/components/relatorios/cartoes/card-invoice-
import { CardTopExpenses } from "@/components/relatorios/cartoes/card-top-expenses";
import { CardUsageChart } from "@/components/relatorios/cartoes/card-usage-chart";
import { CardsOverview } from "@/components/relatorios/cartoes/cards-overview";
import { Card } from "@/components/ui/card";
import { getUser } from "@/lib/auth/server";
import { fetchCartoesReportData } from "@/lib/relatorios/cartoes-report";
import { parsePeriodParam } from "@/lib/utils/period";
@@ -43,43 +44,37 @@ export default async function RelatorioCartoesPage({
<main className="flex flex-col gap-4">
<MonthNavigation />
<div className="grid gap-4 lg:grid-cols-3">
<div className="lg:col-span-1">
<CardsOverview data={data} />
</div>
<CardsOverview data={data} />
<div className="lg:col-span-2 space-y-4">
{data.selectedCard ? (
<>
<CardUsageChart
data={data.selectedCard.monthlyUsage}
limit={data.selectedCard.card.limit}
card={{
name: data.selectedCard.card.name,
logo: data.selectedCard.card.logo,
}}
/>
{data.selectedCard ? (
<>
<CardUsageChart
data={data.selectedCard.monthlyUsage}
limit={data.selectedCard.card.limit}
card={{
name: data.selectedCard.card.name,
logo: data.selectedCard.card.logo,
}}
/>
<div className="grid gap-4 md:grid-cols-2">
<CardCategoryBreakdown
data={data.selectedCard.categoryBreakdown}
/>
<CardTopExpenses data={data.selectedCard.topExpenses} />
</div>
<CardInvoiceStatus data={data.selectedCard.invoiceStatus} />
<CardInvoiceStatus data={data.selectedCard.invoiceStatus} />
</>
) : (
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
<RiBankCard2Line className="size-12 mb-4" />
<p className="text-lg font-medium">Nenhum cartão selecionado</p>
<p className="text-sm">
Selecione um cartão na lista ao lado para ver detalhes.
</p>
</div>
)}
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
<CardCategoryBreakdown data={data.selectedCard.categoryBreakdown} />
<CardTopExpenses data={data.selectedCard.topExpenses} />
</div>
</>
) : (
<Card className="flex flex-col items-center justify-center py-16 text-center">
<div className="flex size-14 items-center justify-center rounded-full bg-muted mb-4">
<RiBankCard2Line className="size-7 text-muted-foreground" />
</div>
<p className="text-base font-medium">Nenhum cartão selecionado</p>
<p className="text-sm text-muted-foreground mt-1">
Selecione um cartão para ver os detalhes de uso.
</p>
</Card>
)}
</main>
);
}