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

2
components/top-estabelecimentos/establishments-list.tsx
View File

@@ -105,7 +105,7 @@ export function EstablishmentsList({
{/* Value and stats */}
<div className="flex shrink-0 flex-col items-end gap-0.5">
<MoneyValues
className="text-red-600 dark:text-red-500"
className="text-foreground"
amount={establishment.totalAmount}
/>
<span className="text-xs text-muted-foreground">

16
components/top-estabelecimentos/highlights-cards.tsx
View File

@@ -11,17 +11,17 @@ type HighlightsCardsProps = {
export function HighlightsCards({ summary }: HighlightsCardsProps) {
return (
<div className="grid gap-3 sm:grid-cols-2">
<Card className="bg-linear-to-br from-amber-50 to-orange-50/50 dark:from-amber-950/20 dark:to-orange-950/10 border-amber-200/50 dark:border-amber-800/30">
<Card className="bg-linear-to-br from-violet-50 to-violet-50/50 dark:from-violet-950/20 dark:to-violet-950/10">
<CardContent className="p-4">
<div className="flex items-center gap-3">
<div className="flex items-center justify-center size-10 rounded-xl bg-amber-100 dark:bg-amber-900/40 shadow-sm">
<RiTrophyLine className="size-5 text-amber-600 dark:text-amber-400" />
<div className="flex items-center justify-center size-10 rounded-xl bg-violet-100 dark:bg-violet-900/40">
<RiTrophyLine className="size-5 text-violet-600 dark:text-violet-400" />
</div>
<div className="min-w-0 flex-1">
<p className="text-xs text-amber-700/80 dark:text-amber-400/80 font-medium">
<p className="text-xs text-violet-700/80 dark:text-violet-400/80 font-medium">
Mais Frequente
</p>
<p className="font-semibold text-amber-900 dark:text-amber-100 truncate">
<p className="font-bold text-xl text-violet-900 dark:text-violet-100 truncate">
{summary.mostFrequent || "—"}
</p>
</div>
@@ -29,17 +29,17 @@ export function HighlightsCards({ summary }: HighlightsCardsProps) {
</CardContent>
</Card>
<Card className="bg-linear-to-br from-red-50 to-rose-50/50 dark:from-red-950/20 dark:to-rose-950/10 border-red-200/50 dark:border-red-800/30">
<Card className="bg-linear-to-br from-red-50 to-rose-50/50 dark:from-red-950/20 dark:to-rose-950/10">
<CardContent className="p-4">
<div className="flex items-center gap-3">
<div className="flex items-center justify-center size-10 rounded-xl bg-red-100 dark:bg-red-900/40 shadow-sm">
<div className="flex items-center justify-center size-10 rounded-xl bg-red-100 dark:bg-red-900/40">
<RiFireLine className="size-5 text-red-600 dark:text-red-400" />
</div>
<div className="min-w-0 flex-1">
<p className="text-xs text-red-700/80 dark:text-red-400/80 font-medium">
Maior Gasto Total
</p>
<p className="font-semibold text-red-900 dark:text-red-100 truncate">
<p className="font-bold text-xl text-red-900 dark:text-red-100 truncate">
{summary.highestSpending || "—"}
</p>
</div>

6
components/top-estabelecimentos/summary-cards.tsx
View File

@@ -50,7 +50,7 @@ export function SummaryCards({ summary }: SummaryCardsProps) {
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
{cards.map((card) => (
<Card key={card.title}>
<CardContent className="p-4">
<CardContent className="px-4 py-2">
<div className="flex items-start justify-between gap-3">
<div className="space-y-1">
<p className="text-xs font-medium text-muted-foreground">
@@ -58,11 +58,11 @@ export function SummaryCards({ summary }: SummaryCardsProps) {
</p>
{card.isMoney ? (
<MoneyValues
className="text-xl font-semibold"
className="text-2xl font-semibold"
amount={card.value}
/>
) : (
<p className="text-xl font-semibold">{card.value}</p>
<p className="text-2xl font-semibold">{card.value}</p>
)}
<p className="text-xs text-muted-foreground">
{card.description}