Gladyson/openmonetis
1
0
Fork 0
forked from git.gladyson/openmonetis
Code Issues Pull Requests Actions 1 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

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>
);
}