refactor(ui): melhorar layouts da aba Companion e página de cartões
- 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
@@ -1,7 +1,7 @@
|
||||
import { headers } from "next/headers";
|
||||
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 { PreferencesForm } from "@/components/ajustes/preferences-form";
|
||||
import { UpdateEmailForm } from "@/components/ajustes/update-email-form";
|
||||
@@ -33,7 +33,7 @@ export default async function Page() {
|
||||
<Tabs defaultValue="preferencias" className="w-full">
|
||||
<TabsList>
|
||||
<TabsTrigger value="preferencias">Preferências</TabsTrigger>
|
||||
<TabsTrigger value="dispositivos">Dispositivos</TabsTrigger>
|
||||
<TabsTrigger value="companion">Companion</TabsTrigger>
|
||||
<TabsTrigger value="nome">Alterar nome</TabsTrigger>
|
||||
<TabsTrigger value="senha">Alterar senha</TabsTrigger>
|
||||
<TabsTrigger value="email">Alterar e-mail</TabsTrigger>
|
||||
@@ -61,20 +61,8 @@ export default async function Page() {
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="dispositivos" className="mt-4">
|
||||
<Card className="p-6">
|
||||
<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 value="companion" className="mt-4">
|
||||
<CompanionTab tokens={userApiTokens} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="nome" className="mt-4">
|
||||
|
||||
@@ -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" />
|
||||
</div>
|
||||
<main className="flex flex-col gap-4">
|
||||
{/* MonthNavigation skeleton */}
|
||||
<Skeleton className="h-10 w-64" />
|
||||
|
||||
<Skeleton className="h-10 w-full max-w-md" />
|
||||
|
||||
<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>
|
||||
{/* 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>
|
||||
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
{/* 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>
|
||||
|
||||
{/* CardUsageChart */}
|
||||
<Card>
|
||||
<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>
|
||||
<CardContent>
|
||||
<Skeleton className="h-[280px] w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* CategoryBreakdown + TopExpenses */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<Skeleton className="h-5 w-36" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<Skeleton key={i} className="h-10 w-full" />
|
||||
{[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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,12 +44,8 @@ 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>
|
||||
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
{data.selectedCard ? (
|
||||
<>
|
||||
<CardUsageChart
|
||||
@@ -60,26 +57,24 @@ export default async function RelatorioCartoesPage({
|
||||
}}
|
||||
/>
|
||||
|
||||
<CardInvoiceStatus data={data.selectedCard.invoiceStatus} />
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<CardCategoryBreakdown
|
||||
data={data.selectedCard.categoryBreakdown}
|
||||
/>
|
||||
<CardCategoryBreakdown data={data.selectedCard.categoryBreakdown} />
|
||||
<CardTopExpenses data={data.selectedCard.topExpenses} />
|
||||
</div>
|
||||
|
||||
<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.
|
||||
<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>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@ export default async function TopEstabelecimentosPage({
|
||||
<main className="flex flex-col gap-4">
|
||||
<Card className="p-3 flex-row justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Selecione o período
|
||||
Selecione o intervalo de meses
|
||||
</span>
|
||||
<PeriodFilterButtons currentFilter={periodFilter} />
|
||||
</Card>
|
||||
@@ -63,8 +63,8 @@ export default async function TopEstabelecimentosPage({
|
||||
|
||||
<HighlightsCards summary={data.summary} />
|
||||
|
||||
<div className="grid gap-4 @3xl/main:grid-cols-3">
|
||||
<div className="@3xl/main:col-span-2">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<EstablishmentsList establishments={data.establishments} />
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
--muted-foreground: oklch(45% 0.015 60);
|
||||
|
||||
/* 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);
|
||||
|
||||
/* Destructive - accessible red */
|
||||
@@ -59,7 +59,7 @@
|
||||
--sidebar-ring: oklch(69.18% 0.18855 38.353);
|
||||
|
||||
/* Layout */
|
||||
--radius: 0.8rem;
|
||||
--radius: 1rem;
|
||||
|
||||
/* Shadows - warm tinted for cohesion */
|
||||
--shadow-2xs: 0 1px 2px 0px oklch(35% 0.02 45 / 0.04);
|
||||
|
||||
@@ -27,7 +27,6 @@ import {
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -253,69 +252,57 @@ export function ApiTokensForm({ tokens }: ApiTokensFormProps) {
|
||||
</div>
|
||||
|
||||
{activeTokens.length === 0 ? (
|
||||
<Card>
|
||||
<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">
|
||||
<div className="flex items-center gap-3 py-4 text-muted-foreground">
|
||||
<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 className="flex items-center gap-2">
|
||||
<span className="font-medium">{token.name}</span>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<span className="text-sm font-bold">{token.name}</span>
|
||||
<Badge variant="outline" className="text-xs font-mono">
|
||||
{token.tokenPrefix}...
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground mt-1">
|
||||
<p className="text-xs text-muted-foreground py-1">
|
||||
{token.lastUsedAt ? (
|
||||
<span>
|
||||
<>
|
||||
Usado{" "}
|
||||
{formatDistanceToNow(token.lastUsedAt, {
|
||||
addSuffix: true,
|
||||
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{" "}
|
||||
{new Date(token.createdAt).toLocaleDateString("pt-BR")}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
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)}
|
||||
>
|
||||
<RiDeleteBinLine className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
98
components/ajustes/companion-tab.tsx
Normal file
98
components/ajustes/companion-tab.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -147,7 +147,7 @@ export function InboxPage({
|
||||
<EmptyState
|
||||
media={<RiInboxLine className="size-6 text-primary" />}
|
||||
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>
|
||||
) : (
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { RiBankCard2Fill } from "@remixicon/react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { RiCalendarCheckLine } from "@remixicon/react";
|
||||
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 { cn } from "@/lib/utils";
|
||||
import { title_font } from "@/public/fonts/font_index";
|
||||
|
||||
type CardInvoiceStatusProps = {
|
||||
@@ -35,47 +41,35 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string | null) => {
|
||||
const getStatusColor = (status: string | null) => {
|
||||
switch (status) {
|
||||
case "pago":
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
return "bg-green-500";
|
||||
case "pendente":
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
return "bg-yellow-500";
|
||||
case "atrasado":
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
return "bg-red-500";
|
||||
default:
|
||||
return (
|
||||
<Badge variant="outline" className="text-muted-foreground">
|
||||
—
|
||||
</Badge>
|
||||
);
|
||||
return "bg-muted";
|
||||
}
|
||||
};
|
||||
|
||||
const formatPeriod = (period: string) => {
|
||||
const [year, month] = period.split("-");
|
||||
return `${monthLabels[parseInt(month, 10) - 1]}/${year.slice(2)}`;
|
||||
const getStatusLabel = (status: string | null) => {
|
||||
switch (status) {
|
||||
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 (
|
||||
@@ -84,29 +78,38 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
|
||||
<CardTitle
|
||||
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||
>
|
||||
<RiBankCard2Fill className="size-4 text-primary" />
|
||||
Status das Faturas
|
||||
<RiCalendarCheckLine className="size-4 text-primary" />
|
||||
Faturas
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{[...data].reverse().map((invoice) => (
|
||||
<TooltipProvider>
|
||||
<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
|
||||
key={invoice.period}
|
||||
className="flex items-center justify-between py-2 border-b last:border-b-0"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium w-16">
|
||||
{formatPeriod(invoice.period)}
|
||||
className={cn(
|
||||
"w-full h-2.5 rounded",
|
||||
getStatusColor(invoice.status),
|
||||
)}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatPeriodShort(invoice.period)}
|
||||
</span>
|
||||
{getStatusBadge(invoice.status)}
|
||||
</div>
|
||||
<span className="text-sm font-bold">
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
<p className="font-medium">
|
||||
{formatCurrency(invoice.amount)}
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
<p className="text-xs ">{getStatusLabel(invoice.status)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -90,7 +90,7 @@ export function CardTopExpenses({ data }: CardTopExpensesProps) {
|
||||
{/* Value */}
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues
|
||||
className="text-red-600 dark:text-red-500"
|
||||
className="text-foreground"
|
||||
amount={expense.amount}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { RiBankCard2Line } from "@remixicon/react";
|
||||
import { RiBankCard2Line, RiBarChartBoxLine } from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
@@ -11,15 +10,14 @@ import {
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
type ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
} from "@/components/ui/chart";
|
||||
import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { title_font } from "@/public/fonts/font_index";
|
||||
|
||||
type CardUsageChartProps = {
|
||||
data: CardDetailData["monthlyUsage"];
|
||||
@@ -37,14 +35,6 @@ const 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) => {
|
||||
if (!logo) return null;
|
||||
if (
|
||||
@@ -58,8 +48,6 @@ const resolveLogoPath = (logo: string | null) => {
|
||||
};
|
||||
|
||||
export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
|
||||
const [period, setPeriod] = useState<PeriodFilter>("6");
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
@@ -82,10 +70,8 @@ export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
|
||||
return formatCurrency(value);
|
||||
};
|
||||
|
||||
// Filter data based on selected period
|
||||
const filteredData = data.slice(-Number(period));
|
||||
|
||||
const chartData = filteredData.map((item) => ({
|
||||
// Always show last 12 months
|
||||
const chartData = data.slice(-12).map((item) => ({
|
||||
month: item.periodLabel,
|
||||
amount: item.amount,
|
||||
}));
|
||||
@@ -96,42 +82,29 @@ export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<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">
|
||||
{logoPath ? (
|
||||
<div className="flex size-10 shrink-0 items-center justify-center">
|
||||
<Image
|
||||
src={logoPath}
|
||||
alt={`Logo ${card.name}`}
|
||||
width={32}
|
||||
height={32}
|
||||
alt={card.name}
|
||||
width={24}
|
||||
height={24}
|
||||
className="rounded object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex size-10 shrink-0 items-center justify-center">
|
||||
<RiBankCard2Line className="size-5 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<span className="text-base font-semibold">{card.name}</span>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
))}
|
||||
<span className="text-sm font-medium text-muted-foreground">
|
||||
{card.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
@@ -1,18 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
RiArrowDownLine,
|
||||
RiArrowUpLine,
|
||||
RiBankCard2Line,
|
||||
} from "@remixicon/react";
|
||||
import { RiBankCard2Line } from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
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 type { CartoesReportData } from "@/lib/relatorios/cartoes-report";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { title_font } from "@/public/fonts/font_index";
|
||||
|
||||
type CardsOverviewProps = {
|
||||
data: CartoesReportData;
|
||||
@@ -53,14 +49,13 @@ export function CardsOverview({ data }: CardsOverviewProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const periodoParam = searchParams.get("periodo");
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("pt-BR", {
|
||||
const formatCurrency = (value: number) =>
|
||||
new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const getUsageColor = (percent: number) => {
|
||||
if (percent < 50) return "bg-green-500";
|
||||
@@ -75,155 +70,119 @@ export function CardsOverview({ data }: CardsOverviewProps) {
|
||||
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) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<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">
|
||||
<CardContent className="flex flex-col items-center justify-center py-10 text-muted-foreground">
|
||||
<RiBankCard2Line className="size-8 mb-2" />
|
||||
<p className="text-sm">Nenhum cartão ativo encontrado</p>
|
||||
</div>
|
||||
<p className="text-sm">Nenhum cartão encontrado</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle
|
||||
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||
>
|
||||
<RiBankCard2Line className="size-4 text-primary" />
|
||||
Resumo dos Cartões
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<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">
|
||||
{formatCurrency(data.totalLimit)}
|
||||
<div className="space-y-3">
|
||||
{/* Summary stats */}
|
||||
<div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
|
||||
{summaryCards.map((card) => (
|
||||
<Card key={card.title}>
|
||||
<CardContent className="px-4 py-2">
|
||||
<p className="text-xs text-muted-foreground mb-1">{card.title}</p>
|
||||
{card.isMoney ? (
|
||||
<MoneyValues
|
||||
className="text-2xl font-semibold"
|
||||
amount={card.value}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-2xl font-semibold">
|
||||
{card.value.toFixed(0)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg border bg-muted/30">
|
||||
<p className="text-xs text-muted-foreground">Uso Total</p>
|
||||
<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>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</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) => {
|
||||
const logoPath = resolveLogoPath(card.logo);
|
||||
const brandAsset = resolveBrandAsset(card.brand);
|
||||
const isSelected = data.selectedCard?.card.id === card.id;
|
||||
|
||||
return (
|
||||
<Link
|
||||
<Card
|
||||
key={card.id}
|
||||
href={buildUrl(card.id)}
|
||||
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",
|
||||
)}
|
||||
className={cn("px-1 py-4", isSelected && "ring-1 ring-primary")}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
{/* Logo container - size-10 like expenses-by-category */}
|
||||
<div className="flex size-10 shrink-0 items-center justify-center">
|
||||
<Link
|
||||
href={buildUrl(card.id)}
|
||||
className={cn("flex items-center gap-3 p-3")}
|
||||
>
|
||||
<div className="flex size-9 shrink-0 items-center justify-center">
|
||||
{logoPath ? (
|
||||
<Image
|
||||
src={logoPath}
|
||||
alt={`Logo ${card.name}`}
|
||||
width={28}
|
||||
height={28}
|
||||
alt={card.name}
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded object-contain"
|
||||
/>
|
||||
) : (
|
||||
<RiBankCard2Line className="size-4 text-muted-foreground" />
|
||||
<RiBankCard2Line className="size-5 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Name and brand */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium truncate">
|
||||
<span className="text-base font-bold truncate">
|
||||
{card.name}
|
||||
</span>
|
||||
{brandAsset && (
|
||||
<Image
|
||||
src={brandAsset}
|
||||
alt={`Bandeira ${card.brand}`}
|
||||
width={24}
|
||||
height={16}
|
||||
className="h-2.5 w-auto shrink-0"
|
||||
alt={card.brand || ""}
|
||||
width={18}
|
||||
height={12}
|
||||
className="h-2.5 w-auto shrink-0 opacity-70"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>
|
||||
<p className="text-xs text-muted-foreground tabular-nums">
|
||||
{formatCurrency(card.currentUsage)} /{" "}
|
||||
{formatCurrency(card.limit)}
|
||||
</span>
|
||||
</div>
|
||||
</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">
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress
|
||||
value={Math.min(card.usagePercent, 100)}
|
||||
className={cn(
|
||||
"h-1.5",
|
||||
"h-2 flex-1",
|
||||
`[&>div]:${getUsageColor(card.usagePercent)}`,
|
||||
)}
|
||||
/>
|
||||
<span className="text-xs font-medium tabular-nums">
|
||||
{card.usagePercent.toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user