forked from git.gladyson/openmonetis
feat(relatorios): reorganizar páginas e criar componente CategoryIconBadge
- Renomear /relatorios/categorias para /relatorios/tendencias - Renomear /relatorios/cartoes para /relatorios/uso-cartoes - Criar componente CategoryIconBadge unificado com cores dinâmicas - Atualizar cards de categorias com novo layout (ações no footer) - Atualizar cards de orçamentos com CategoryIconBadge - Adicionar tooltip detalhado nas células de tendências (valor anterior e diferença) - Adicionar dot colorido (verde/vermelho) para indicar tipo de categoria Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
23
app/(dashboard)/relatorios/uso-cartoes/layout.tsx
Normal file
23
app/(dashboard)/relatorios/uso-cartoes/layout.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { RiBankCard2Line } from "@remixicon/react";
|
||||
import PageDescription from "@/components/page-description";
|
||||
|
||||
export const metadata = {
|
||||
title: "Uso de Cartões | Opensheets",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 px-6">
|
||||
<PageDescription
|
||||
icon={<RiBankCard2Line />}
|
||||
title="Uso de Cartões"
|
||||
subtitle="Análise detalhada do uso dos seus cartões de crédito."
|
||||
/>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
88
app/(dashboard)/relatorios/uso-cartoes/loading.tsx
Normal file
88
app/(dashboard)/relatorios/uso-cartoes/loading.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<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>
|
||||
|
||||
{/* 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">
|
||||
<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 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>
|
||||
);
|
||||
}
|
||||
80
app/(dashboard)/relatorios/uso-cartoes/page.tsx
Normal file
80
app/(dashboard)/relatorios/uso-cartoes/page.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { RiBankCard2Line } from "@remixicon/react";
|
||||
import MonthNavigation from "@/components/month-picker/month-navigation";
|
||||
import { CardCategoryBreakdown } from "@/components/relatorios/cartoes/card-category-breakdown";
|
||||
import { CardInvoiceStatus } from "@/components/relatorios/cartoes/card-invoice-status";
|
||||
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";
|
||||
|
||||
type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
|
||||
|
||||
type PageProps = {
|
||||
searchParams?: PageSearchParams;
|
||||
};
|
||||
|
||||
const getSingleParam = (
|
||||
params: Record<string, string | string[] | undefined> | undefined,
|
||||
key: string,
|
||||
) => {
|
||||
const value = params?.[key];
|
||||
if (!value) return null;
|
||||
return Array.isArray(value) ? (value[0] ?? null) : value;
|
||||
};
|
||||
|
||||
export default async function RelatorioCartoesPage({
|
||||
searchParams,
|
||||
}: PageProps) {
|
||||
const user = await getUser();
|
||||
const resolvedSearchParams = searchParams ? await searchParams : undefined;
|
||||
const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
|
||||
const cartaoParam = getSingleParam(resolvedSearchParams, "cartao");
|
||||
const { period: selectedPeriod } = parsePeriodParam(periodoParam);
|
||||
|
||||
const data = await fetchCartoesReportData(
|
||||
user.id,
|
||||
selectedPeriod,
|
||||
cartaoParam,
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="flex flex-col gap-4">
|
||||
<MonthNavigation />
|
||||
|
||||
<CardsOverview data={data} />
|
||||
|
||||
{data.selectedCard ? (
|
||||
<>
|
||||
<CardUsageChart
|
||||
data={data.selectedCard.monthlyUsage}
|
||||
limit={data.selectedCard.card.limit}
|
||||
card={{
|
||||
name: data.selectedCard.card.name,
|
||||
logo: data.selectedCard.card.logo,
|
||||
}}
|
||||
/>
|
||||
|
||||
<CardInvoiceStatus data={data.selectedCard.invoiceStatus} />
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user