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

20
app/(dashboard)/ajustes/page.tsx
View File

@@ -1,7 +1,7 @@
import { headers } from "next/headers"; import { headers } from "next/headers";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { ApiTokensForm } from "@/components/ajustes/api-tokens-form"; import { CompanionTab } from "@/components/ajustes/companion-tab";
import { DeleteAccountForm } from "@/components/ajustes/delete-account-form"; import { DeleteAccountForm } from "@/components/ajustes/delete-account-form";
import { PreferencesForm } from "@/components/ajustes/preferences-form"; import { PreferencesForm } from "@/components/ajustes/preferences-form";
import { UpdateEmailForm } from "@/components/ajustes/update-email-form"; import { UpdateEmailForm } from "@/components/ajustes/update-email-form";
@@ -33,7 +33,7 @@ export default async function Page() {
<Tabs defaultValue="preferencias" className="w-full"> <Tabs defaultValue="preferencias" className="w-full">
<TabsList> <TabsList>
<TabsTrigger value="preferencias">Preferências</TabsTrigger> <TabsTrigger value="preferencias">Preferências</TabsTrigger>
<TabsTrigger value="dispositivos">Dispositivos</TabsTrigger> <TabsTrigger value="companion">Companion</TabsTrigger>
<TabsTrigger value="nome">Alterar nome</TabsTrigger> <TabsTrigger value="nome">Alterar nome</TabsTrigger>
<TabsTrigger value="senha">Alterar senha</TabsTrigger> <TabsTrigger value="senha">Alterar senha</TabsTrigger>
<TabsTrigger value="email">Alterar e-mail</TabsTrigger> <TabsTrigger value="email">Alterar e-mail</TabsTrigger>
@@ -61,20 +61,8 @@ export default async function Page() {
</Card> </Card>
</TabsContent> </TabsContent>
<TabsContent value="dispositivos" className="mt-4"> <TabsContent value="companion" className="mt-4">
<Card className="p-6"> <CompanionTab tokens={userApiTokens} />
<div className="space-y-4">
<div>
<h2 className="text-lg font-bold mb-1">OpenSheets Companion</h2>
<p className="text-sm text-muted-foreground mb-4">
Conecte o app Android OpenSheets Companion para capturar
automaticamente notificações de transações financeiras e
enviá-las para sua caixa de entrada.
</p>
</div>
<ApiTokensForm tokens={userApiTokens} />
</div>
</Card>
</TabsContent> </TabsContent>
<TabsContent value="nome" className="mt-4"> <TabsContent value="nome" className="mt-4">

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

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

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

6
app/(dashboard)/top-estabelecimentos/page.tsx
View File

@@ -54,7 +54,7 @@ export default async function TopEstabelecimentosPage({
<main className="flex flex-col gap-4"> <main className="flex flex-col gap-4">
<Card className="p-3 flex-row justify-between items-center"> <Card className="p-3 flex-row justify-between items-center">
<span className="text-sm text-muted-foreground"> <span className="text-sm text-muted-foreground">
Selecione o período Selecione o intervalo de meses
</span> </span>
<PeriodFilterButtons currentFilter={periodFilter} /> <PeriodFilterButtons currentFilter={periodFilter} />
</Card> </Card>
@@ -63,8 +63,8 @@ export default async function TopEstabelecimentosPage({
<HighlightsCards summary={data.summary} /> <HighlightsCards summary={data.summary} />
<div className="grid gap-4 @3xl/main:grid-cols-3"> <div className="grid grid-cols-2 gap-4">
<div className="@3xl/main:col-span-2"> <div>
<EstablishmentsList establishments={data.establishments} /> <EstablishmentsList establishments={data.establishments} />
</div> </div>
<div> <div>

4
app/globals.css
View File

@@ -28,7 +28,7 @@
--muted-foreground: oklch(45% 0.015 60); --muted-foreground: oklch(45% 0.015 60);
/* Accent - complementary warm tone */ /* Accent - complementary warm tone */
--accent: oklch(93.996% 0.01787 64.782); --accent: oklch(96.563% 0.00504 67.275);
--accent-foreground: oklch(22% 0.025 45); --accent-foreground: oklch(22% 0.025 45);
/* Destructive - accessible red */ /* Destructive - accessible red */
@@ -59,7 +59,7 @@
--sidebar-ring: oklch(69.18% 0.18855 38.353); --sidebar-ring: oklch(69.18% 0.18855 38.353);
/* Layout */ /* Layout */
--radius: 0.8rem; --radius: 1rem;
/* Shadows - warm tinted for cohesion */ /* Shadows - warm tinted for cohesion */
--shadow-2xs: 0 1px 2px 0px oklch(35% 0.02 45 / 0.04); --shadow-2xs: 0 1px 2px 0px oklch(35% 0.02 45 / 0.04);

61
components/ajustes/api-tokens-form.tsx
View File

@@ -27,7 +27,6 @@ import {
} from "@/components/ui/alert-dialog"; } from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -253,69 +252,57 @@ export function ApiTokensForm({ tokens }: ApiTokensFormProps) {
</div> </div>
{activeTokens.length === 0 ? ( {activeTokens.length === 0 ? (
<Card> <div className="flex items-center gap-3 py-4 text-muted-foreground">
<CardContent className="flex flex-col items-center justify-center py-8 text-center">
<RiSmartphoneLine className="h-10 w-10 text-muted-foreground mb-3" />
<p className="text-sm text-muted-foreground">
Nenhum dispositivo conectado.
</p>
<p className="text-sm text-muted-foreground">
Crie um token para conectar o app OpenSheets Companion.
</p>
</CardContent>
</Card>
) : (
<div className="space-y-3">
{activeTokens.map((token) => (
<Card key={token.id}>
<CardContent className="p-4">
<div className="flex items-start justify-between">
<div className="flex items-start gap-3">
<div className="rounded-full bg-muted p-2">
<RiSmartphoneLine className="h-5 w-5" /> <RiSmartphoneLine className="h-5 w-5" />
<p className="text-sm">
Nenhum dispositivo conectado. Crie um token para começar.
</p>
</div>
) : (
<div className="divide-y py-2">
{activeTokens.map((token) => (
<div
key={token.id}
className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
>
<div className="flex items-center gap-3">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted">
<RiSmartphoneLine className="h-4 w-4" />
</div> </div>
<div> <div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-medium">{token.name}</span> <span className="text-sm font-bold">{token.name}</span>
<Badge variant="outline" className="text-xs"> <Badge variant="outline" className="text-xs font-mono">
{token.tokenPrefix}... {token.tokenPrefix}...
</Badge> </Badge>
</div> </div>
<div className="text-sm text-muted-foreground mt-1"> <p className="text-xs text-muted-foreground py-1">
{token.lastUsedAt ? ( {token.lastUsedAt ? (
<span> <>
Usado{" "} Usado{" "}
{formatDistanceToNow(token.lastUsedAt, { {formatDistanceToNow(token.lastUsedAt, {
addSuffix: true, addSuffix: true,
locale: ptBR, locale: ptBR,
})} })}
{token.lastUsedIp && ( </>
<span className="text-xs ml-1">
({token.lastUsedIp})
</span>
)}
</span>
) : ( ) : (
<span>Nunca usado</span> "Nunca usado"
)} )}
</div> {" · "}
<div className="text-xs text-muted-foreground mt-0.5">
Criado em{" "} Criado em{" "}
{new Date(token.createdAt).toLocaleDateString("pt-BR")} {new Date(token.createdAt).toLocaleDateString("pt-BR")}
</div> </p>
</div> </div>
</div> </div>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="text-destructive hover:text-destructive hover:bg-destructive/10" className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
onClick={() => setRevokeId(token.id)} onClick={() => setRevokeId(token.id)}
> >
<RiDeleteBinLine className="h-4 w-4" /> <RiDeleteBinLine className="h-4 w-4" />
</Button> </Button>
</div> </div>
</CardContent>
</Card>
))} ))}
</div> </div>
)} )}

98
components/ajustes/companion-tab.tsx Normal file
View File

@@ -0,0 +1,98 @@
"use client";
import {
RiAndroidLine,
RiDownload2Line,
RiNotification3Line,
RiQrCodeLine,
RiShieldCheckLine,
} from "@remixicon/react";
import { Card } from "@/components/ui/card";
import { ApiTokensForm } from "./api-tokens-form";
interface ApiToken {
id: string;
name: string;
tokenPrefix: string;
lastUsedAt: Date | null;
lastUsedIp: string | null;
createdAt: Date;
expiresAt: Date | null;
revokedAt: Date | null;
}
interface CompanionTabProps {
tokens: ApiToken[];
}
const steps = [
{
icon: RiDownload2Line,
title: "Instale o app",
description: "Instale o APK.",
},
{
icon: RiQrCodeLine,
title: "Gere um token",
description: "Crie um token abaixo para autenticar.",
},
{
icon: RiNotification3Line,
title: "Configure permissões",
description: "Conceda acesso às notificações.",
},
{
icon: RiShieldCheckLine,
title: "Pronto!",
description: "Notificações serão enviadas ao OpenSheets.",
},
];
export function CompanionTab({ tokens }: CompanionTabProps) {
return (
<Card className="p-6">
<div className="space-y-6">
{/* Header */}
<div>
<div className="flex items-center gap-2 mb-1">
<h2 className="text-lg font-bold">OpenSheets Companion</h2>
<span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
<RiAndroidLine className="h-3 w-3" />
Android
</span>
</div>
<p className="text-sm text-muted-foreground">
Capture notificações de transações dos seus apps de banco (Nubank,
Itaú, Bradesco, Inter, C6 e outros) e envie para sua caixa de
entrada.
</p>
</div>
{/* Steps */}
<div className="grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-4">
{steps.map((step, index) => (
<div key={step.title} className="flex items-start gap-2">
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
<step.icon className="h-4 w-4" />
</div>
<div className="min-w-0">
<p className="text-sm font-medium leading-tight">
{index + 1}. {step.title}
</p>
<p className="text-xs text-muted-foreground">
{step.description}
</p>
</div>
</div>
))}
</div>
{/* Divider */}
<div className="border-t" />
{/* Devices */}
<ApiTokensForm tokens={tokens} />
</div>
</Card>
);
}

2
components/pre-lancamentos/inbox-page.tsx
View File

@@ -147,7 +147,7 @@ export function InboxPage({
<EmptyState <EmptyState
media={<RiInboxLine className="size-6 text-primary" />} media={<RiInboxLine className="size-6 text-primary" />}
title="Nenhum pré-lançamento" title="Nenhum pré-lançamento"
description="As notificações capturadas pelo app OpenSheets Companion aparecerão aqui para você processar." description="As notificações capturadas pelo app OpenSheets Companion aparecerão aqui para você processar. Saiba mais sobre o app em Ajustes > Companion."
/> />
</Card> </Card>
) : ( ) : (

101
components/relatorios/cartoes/card-invoice-status.tsx
View File

@@ -1,9 +1,15 @@
"use client"; "use client";
import { RiBankCard2Fill } from "@remixicon/react"; import { RiCalendarCheckLine } from "@remixicon/react";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import type { CardDetailData } from "@/lib/relatorios/cartoes-report"; import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
import { cn } from "@/lib/utils";
import { title_font } from "@/public/fonts/font_index"; import { title_font } from "@/public/fonts/font_index";
type CardInvoiceStatusProps = { type CardInvoiceStatusProps = {
@@ -35,47 +41,35 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
}).format(value); }).format(value);
}; };
const getStatusBadge = (status: string | null) => { const getStatusColor = (status: string | null) => {
switch (status) { switch (status) {
case "pago": case "pago":
return ( return "bg-green-500";
<Badge
variant="outline"
className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-400 dark:border-green-900"
>
Pago
</Badge>
);
case "pendente": case "pendente":
return ( return "bg-yellow-500";
<Badge
variant="outline"
className="bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-400 dark:border-yellow-900"
>
Pendente
</Badge>
);
case "atrasado": case "atrasado":
return ( return "bg-red-500";
<Badge
variant="outline"
className="bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-400 dark:border-red-900"
>
Atrasado
</Badge>
);
default: default:
return ( return "bg-muted";
<Badge variant="outline" className="text-muted-foreground">
—
</Badge>
);
} }
}; };
const formatPeriod = (period: string) => { const getStatusLabel = (status: string | null) => {
const [year, month] = period.split("-"); switch (status) {
return `${monthLabels[parseInt(month, 10) - 1]}/${year.slice(2)}`; case "pago":
return "Pago";
case "pendente":
return "Pendente";
case "atrasado":
return "Atrasado";
default:
return "—";
}
};
const formatPeriodShort = (period: string) => {
const [, month] = period.split("-");
return monthLabels[parseInt(month, 10) - 1];
}; };
return ( return (
@@ -84,29 +78,38 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
<CardTitle <CardTitle
className={`${title_font.className} flex items-center gap-1.5 text-base`} className={`${title_font.className} flex items-center gap-1.5 text-base`}
> >
<RiBankCard2Fill className="size-4 text-primary" /> <RiCalendarCheckLine className="size-4 text-primary" />
Status das Faturas Faturas
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-2"> <TooltipProvider>
{[...data].reverse().map((invoice) => ( <div className="flex items-center gap-1">
{data.map((invoice) => (
<Tooltip key={invoice.period}>
<TooltipTrigger asChild>
<div className="flex-1 flex flex-col items-center gap-2 cursor-default">
<div <div
key={invoice.period} className={cn(
className="flex items-center justify-between py-2 border-b last:border-b-0" "w-full h-2.5 rounded",
> getStatusColor(invoice.status),
<div className="flex items-center gap-3"> )}
<span className="text-sm font-medium w-16"> />
{formatPeriod(invoice.period)} <span className="text-xs text-muted-foreground">
{formatPeriodShort(invoice.period)}
</span> </span>
{getStatusBadge(invoice.status)}
</div> </div>
<span className="text-sm font-bold"> </TooltipTrigger>
<TooltipContent side="top">
<p className="font-medium">
{formatCurrency(invoice.amount)} {formatCurrency(invoice.amount)}
</span> </p>
</div> <p className="text-xs ">{getStatusLabel(invoice.status)}</p>
</TooltipContent>
</Tooltip>
))} ))}
</div> </div>
</TooltipProvider>
</CardContent> </CardContent>
</Card> </Card>
); );

2
components/relatorios/cartoes/card-top-expenses.tsx
View File

@@ -90,7 +90,7 @@ export function CardTopExpenses({ data }: CardTopExpensesProps) {
{/* Value */} {/* Value */}
<div className="flex shrink-0 flex-col items-end"> <div className="flex shrink-0 flex-col items-end">
<MoneyValues <MoneyValues
className="text-red-600 dark:text-red-500" className="text-foreground"
amount={expense.amount} amount={expense.amount}
/> />
</div> </div>

65
components/relatorios/cartoes/card-usage-chart.tsx
View File

@@ -1,8 +1,7 @@
"use client"; "use client";
import { RiBankCard2Line } from "@remixicon/react"; import { RiBankCard2Line, RiBarChartBoxLine } from "@remixicon/react";
import Image from "next/image"; import Image from "next/image";
import { useState } from "react";
import { import {
Bar, Bar,
BarChart, BarChart,
@@ -11,15 +10,14 @@ import {
XAxis, XAxis,
YAxis, YAxis,
} from "recharts"; } from "recharts";
import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { import {
type ChartConfig, type ChartConfig,
ChartContainer, ChartContainer,
ChartTooltip, ChartTooltip,
} from "@/components/ui/chart"; } from "@/components/ui/chart";
import type { CardDetailData } from "@/lib/relatorios/cartoes-report"; import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
import { cn } from "@/lib/utils"; import { title_font } from "@/public/fonts/font_index";
type CardUsageChartProps = { type CardUsageChartProps = {
data: CardDetailData["monthlyUsage"]; data: CardDetailData["monthlyUsage"];
@@ -37,14 +35,6 @@ const chartConfig = {
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
type PeriodFilter = "3" | "6" | "12";
const filterOptions: { value: PeriodFilter; label: string }[] = [
{ value: "3", label: "3 meses" },
{ value: "6", label: "6 meses" },
{ value: "12", label: "12 meses" },
];
const resolveLogoPath = (logo: string | null) => { const resolveLogoPath = (logo: string | null) => {
if (!logo) return null; if (!logo) return null;
if ( if (
@@ -58,8 +48,6 @@ const resolveLogoPath = (logo: string | null) => {
}; };
export function CardUsageChart({ data, limit, card }: CardUsageChartProps) { export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
const [period, setPeriod] = useState<PeriodFilter>("6");
const formatCurrency = (value: number) => { const formatCurrency = (value: number) => {
return new Intl.NumberFormat("pt-BR", { return new Intl.NumberFormat("pt-BR", {
style: "currency", style: "currency",
@@ -82,10 +70,8 @@ export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
return formatCurrency(value); return formatCurrency(value);
}; };
// Filter data based on selected period // Always show last 12 months
const filteredData = data.slice(-Number(period)); const chartData = data.slice(-12).map((item) => ({
const chartData = filteredData.map((item) => ({
month: item.periodLabel, month: item.periodLabel,
amount: item.amount, amount: item.amount,
})); }));
@@ -96,42 +82,29 @@ export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
<Card> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* Card logo and name on the left */} <CardTitle
className={`${title_font.className} flex items-center gap-1.5 text-base`}
>
<RiBarChartBoxLine className="size-4 text-primary" />
Histórico de Uso
</CardTitle>
{/* Card logo and name */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{logoPath ? ( {logoPath ? (
<div className="flex size-10 shrink-0 items-center justify-center">
<Image <Image
src={logoPath} src={logoPath}
alt={`Logo ${card.name}`} alt={card.name}
width={32} width={24}
height={32} height={24}
className="rounded object-contain" className="rounded object-contain"
/> />
</div>
) : ( ) : (
<div className="flex size-10 shrink-0 items-center justify-center">
<RiBankCard2Line className="size-5 text-muted-foreground" /> <RiBankCard2Line className="size-5 text-muted-foreground" />
</div>
)} )}
<span className="text-base font-semibold">{card.name}</span> <span className="text-sm font-medium text-muted-foreground">
</div> {card.name}
</span>
{/* Filters on the right */}
<div className="flex items-center gap-1">
{filterOptions.map((option) => (
<Button
key={option.value}
variant={period === option.value ? "default" : "outline"}
size="sm"
onClick={() => setPeriod(option.value)}
className={cn(
"h-7 text-xs",
period === option.value && "pointer-events-none",
)}
>
{option.label}
</Button>
))}
</div> </div>
</div> </div>
</CardHeader> </CardHeader>

179
components/relatorios/cartoes/cards-overview.tsx
View File

@@ -1,18 +1,14 @@
"use client"; "use client";
import { import { RiBankCard2Line } from "@remixicon/react";
RiArrowDownLine,
RiArrowUpLine,
RiBankCard2Line,
} from "@remixicon/react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import MoneyValues from "@/components/money-values";
import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress"; import { Progress } from "@/components/ui/progress";
import type { CartoesReportData } from "@/lib/relatorios/cartoes-report"; import type { CartoesReportData } from "@/lib/relatorios/cartoes-report";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { title_font } from "@/public/fonts/font_index";
type CardsOverviewProps = { type CardsOverviewProps = {
data: CartoesReportData; data: CartoesReportData;
@@ -53,14 +49,13 @@ export function CardsOverview({ data }: CardsOverviewProps) {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const periodoParam = searchParams.get("periodo"); const periodoParam = searchParams.get("periodo");
const formatCurrency = (value: number) => { const formatCurrency = (value: number) =>
return new Intl.NumberFormat("pt-BR", { new Intl.NumberFormat("pt-BR", {
style: "currency", style: "currency",
currency: "BRL", currency: "BRL",
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
}).format(value); }).format(value);
};
const getUsageColor = (percent: number) => { const getUsageColor = (percent: number) => {
if (percent < 50) return "bg-green-500"; if (percent < 50) return "bg-green-500";
@@ -75,155 +70,119 @@ export function CardsOverview({ data }: CardsOverviewProps) {
return `/relatorios/cartoes?${params.toString()}`; return `/relatorios/cartoes?${params.toString()}`;
}; };
const summaryCards = [
{ title: "Limite", value: data.totalLimit, isMoney: true },
{ title: "Usado", value: data.totalUsage, isMoney: true },
{
title: "Disponível",
value: data.totalLimit - data.totalUsage,
isMoney: true,
},
{ title: "Utilização", value: data.totalUsagePercent, isMoney: false },
];
if (data.cards.length === 0) { if (data.cards.length === 0) {
return ( return (
<Card> <Card>
<CardHeader className="pb-2"> <CardContent className="flex flex-col items-center justify-center py-10 text-muted-foreground">
<CardTitle className="text-base font-bold flex items-center gap-2">
<RiBankCard2Line className="size-4" />
Resumo dos Cartões
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
<RiBankCard2Line className="size-8 mb-2" /> <RiBankCard2Line className="size-8 mb-2" />
<p className="text-sm">Nenhum cartão ativo encontrado</p> <p className="text-sm">Nenhum cartão encontrado</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
); );
} }
return ( return (
<Card> <div className="space-y-3">
<CardHeader className="pb-2"> {/* Summary stats */}
<CardTitle <div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
className={`${title_font.className} flex items-center gap-1.5 text-base`} {summaryCards.map((card) => (
> <Card key={card.title}>
<RiBankCard2Line className="size-4 text-primary" /> <CardContent className="px-4 py-2">
Resumo dos Cartões <p className="text-xs text-muted-foreground mb-1">{card.title}</p>
</CardTitle> {card.isMoney ? (
</CardHeader> <MoneyValues
<CardContent className="space-y-4"> className="text-2xl font-semibold"
<div className="grid gap-3 sm:grid-cols-3"> amount={card.value}
<div className="p-3 rounded-lg border bg-muted/30"> />
<p className="text-xs text-muted-foreground">Limite Total</p> ) : (
<p className="text-lg font-semibold"> <p className="text-2xl font-semibold">
{formatCurrency(data.totalLimit)} {card.value.toFixed(0)}%
</p> </p>
</div> )}
<div className="p-3 rounded-lg border bg-muted/30"> </CardContent>
<p className="text-xs text-muted-foreground">Uso Total</p> </Card>
<p className="text-lg font-semibold"> ))}
{formatCurrency(data.totalUsage)}
</p>
</div>
<div className="p-3 rounded-lg border bg-muted/30">
<p className="text-xs text-muted-foreground">Utilização</p>
<p className="text-lg font-semibold">
{data.totalUsagePercent.toFixed(0)}%
</p>
</div>
</div> </div>
<div className="flex flex-col"> <p className="text-base font-bold ml-2">Meus cartões</p>
{/* Cards list */}
<div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
{data.cards.map((card) => { {data.cards.map((card) => {
const logoPath = resolveLogoPath(card.logo); const logoPath = resolveLogoPath(card.logo);
const brandAsset = resolveBrandAsset(card.brand); const brandAsset = resolveBrandAsset(card.brand);
const isSelected = data.selectedCard?.card.id === card.id;
return ( return (
<Link <Card
key={card.id} key={card.id}
href={buildUrl(card.id)} className={cn("px-1 py-4", isSelected && "ring-1 ring-primary")}
className={cn(
"flex flex-col py-2 border-b border-dashed last:border-0 transition-colors hover:bg-muted/50",
data.selectedCard?.card.id === card.id && "bg-muted/30",
)}
> >
<div className="flex items-center justify-between gap-3"> <Link
<div className="flex min-w-0 flex-1 items-center gap-2"> href={buildUrl(card.id)}
{/* Logo container - size-10 like expenses-by-category */} className={cn("flex items-center gap-3 p-3")}
<div className="flex size-10 shrink-0 items-center justify-center"> >
<div className="flex size-9 shrink-0 items-center justify-center">
{logoPath ? ( {logoPath ? (
<Image <Image
src={logoPath} src={logoPath}
alt={`Logo ${card.name}`} alt={card.name}
width={28} width={32}
height={28} height={32}
className="rounded object-contain" className="rounded object-contain"
/> />
) : ( ) : (
<RiBankCard2Line className="size-4 text-muted-foreground" /> <RiBankCard2Line className="size-5 text-muted-foreground" />
)} )}
</div> </div>
<div className="min-w-0 flex-1 space-y-1">
{/* Name and brand */}
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm font-medium truncate"> <span className="text-base font-bold truncate">
{card.name} {card.name}
</span> </span>
{brandAsset && ( {brandAsset && (
<Image <Image
src={brandAsset} src={brandAsset}
alt={`Bandeira ${card.brand}`} alt={card.brand || ""}
width={24} width={18}
height={16} height={12}
className="h-2.5 w-auto shrink-0" className="h-2.5 w-auto shrink-0 opacity-70"
/> />
)} )}
</div> </div>
<div className="flex items-center gap-2 text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground tabular-nums">
<span>
{formatCurrency(card.currentUsage)} /{" "} {formatCurrency(card.currentUsage)} /{" "}
{formatCurrency(card.limit)} {formatCurrency(card.limit)}
</span> </p>
</div> <div className="flex items-center gap-2">
</div>
</div>
{/* Trend and percentage */}
<div className="flex shrink-0 flex-col items-end gap-0.5">
<span className="text-sm font-medium">
{card.usagePercent.toFixed(0)}%
</span>
<div className="flex items-center gap-1">
{card.trend === "up" && (
<RiArrowUpLine className="size-3 text-red-500" />
)}
{card.trend === "down" && (
<RiArrowDownLine className="size-3 text-green-500" />
)}
<span
className={cn(
"text-xs",
card.trend === "up" && "text-red-500",
card.trend === "down" && "text-green-500",
card.trend === "stable" && "text-muted-foreground",
)}
>
{card.changePercent > 0 ? "+" : ""}
{card.changePercent.toFixed(0)}%
</span>
</div>
</div>
</div>
{/* Progress bar - aligned with content */}
<div className="ml-12 mt-1.5">
<Progress <Progress
value={Math.min(card.usagePercent, 100)} value={Math.min(card.usagePercent, 100)}
className={cn( className={cn(
"h-1.5", "h-2 flex-1",
`[&>div]:${getUsageColor(card.usagePercent)}`, `[&>div]:${getUsageColor(card.usagePercent)}`,
)} )}
/> />
<span className="text-xs font-medium tabular-nums">
{card.usagePercent.toFixed(0)}%
</span>
</div>
</div> </div>
</Link> </Link>
</Card>
); );
})} })}
</div> </div>
</CardContent> </div>
</Card>
); );
} }

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

@@ -105,7 +105,7 @@ export function EstablishmentsList({
{/* Value and stats */} {/* Value and stats */}
<div className="flex shrink-0 flex-col items-end gap-0.5"> <div className="flex shrink-0 flex-col items-end gap-0.5">
<MoneyValues <MoneyValues
className="text-red-600 dark:text-red-500" className="text-foreground"
amount={establishment.totalAmount} amount={establishment.totalAmount}
/> />
<span className="text-xs text-muted-foreground"> <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) { export function HighlightsCards({ summary }: HighlightsCardsProps) {
return ( return (
<div className="grid gap-3 sm:grid-cols-2"> <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"> <CardContent className="p-4">
<div className="flex items-center gap-3"> <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"> <div className="flex items-center justify-center size-10 rounded-xl bg-violet-100 dark:bg-violet-900/40">
<RiTrophyLine className="size-5 text-amber-600 dark:text-amber-400" /> <RiTrophyLine className="size-5 text-violet-600 dark:text-violet-400" />
</div> </div>
<div className="min-w-0 flex-1"> <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 Mais Frequente
</p> </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 || "—"} {summary.mostFrequent || "—"}
</p> </p>
</div> </div>
@@ -29,17 +29,17 @@ export function HighlightsCards({ summary }: HighlightsCardsProps) {
</CardContent> </CardContent>
</Card> </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"> <CardContent className="p-4">
<div className="flex items-center gap-3"> <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" /> <RiFireLine className="size-5 text-red-600 dark:text-red-400" />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-xs text-red-700/80 dark:text-red-400/80 font-medium"> <p className="text-xs text-red-700/80 dark:text-red-400/80 font-medium">
Maior Gasto Total Maior Gasto Total
</p> </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 || "—"} {summary.highestSpending || "—"}
</p> </p>
</div> </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"> <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
{cards.map((card) => ( {cards.map((card) => (
<Card key={card.title}> <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="flex items-start justify-between gap-3">
<div className="space-y-1"> <div className="space-y-1">
<p className="text-xs font-medium text-muted-foreground"> <p className="text-xs font-medium text-muted-foreground">
@@ -58,11 +58,11 @@ export function SummaryCards({ summary }: SummaryCardsProps) {
</p> </p>
{card.isMoney ? ( {card.isMoney ? (
<MoneyValues <MoneyValues
className="text-xl font-semibold" className="text-2xl font-semibold"
amount={card.value} 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"> <p className="text-xs text-muted-foreground">
{card.description} {card.description}