From c185c7be42df2a83c4fcae94f7c54cee17cc2d73 Mon Sep 17 00:00:00 2001
From: Felipe Coutinho <felipi@live.com>
Date: Tue, 20 Jan 2026 15:21:39 +0000
Subject: [PATCH] =?UTF-8?q?refactor(cartoes):=20adiciona=20layout=20e=20li?=
 =?UTF-8?q?mpa=20p=C3=A1gina=20de=20relat=C3=B3rio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cria layout.tsx com PageDescription
- Remove header duplicado da página
- Passa dados do cartão para CardUsageChart
---
 app/(dashboard)/relatorios/cartoes/layout.tsx | 23 +++++++++++++++++++
 app/(dashboard)/relatorios/cartoes/page.tsx   | 23 +++++--------------
 2 files changed, 29 insertions(+), 17 deletions(-)
 create mode 100644 app/(dashboard)/relatorios/cartoes/layout.tsx

diff --git a/app/(dashboard)/relatorios/cartoes/layout.tsx b/app/(dashboard)/relatorios/cartoes/layout.tsx
new file mode 100644
index 0000000..ec5dab2
--- /dev/null
+++ b/app/(dashboard)/relatorios/cartoes/layout.tsx
@@ -0,0 +1,23 @@
+import PageDescription from "@/components/page-description";
+import { RiBankCard2Line } from "@remixicon/react";
+
+export const metadata = {
+  title: "Relatório de Cartões | Opensheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiBankCard2Line />}
+        title="Relatório de Cartões"
+        subtitle="Análise detalhada do uso dos seus cartões de crédito."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/relatorios/cartoes/page.tsx b/app/(dashboard)/relatorios/cartoes/page.tsx
index 61486e2..27b4a16 100644
--- a/app/(dashboard)/relatorios/cartoes/page.tsx
+++ b/app/(dashboard)/relatorios/cartoes/page.tsx
@@ -1,9 +1,9 @@
+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 MonthNavigation from "@/components/month-picker/month-navigation";
 import { getUser } from "@/lib/auth/server";
 import { fetchCartoesReportData } from "@/lib/relatorios/cartoes-report";
 import { parsePeriodParam } from "@/lib/utils/period";
@@ -40,16 +40,7 @@ export default async function RelatorioCartoesPage({
   );
 
   return (
-    <main className="flex flex-col gap-4 px-6">
-      <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-semibold tracking-tight">
-          Relatório de Cartões
-        </h1>
-        <p className="text-sm text-muted-foreground">
-          Análise detalhada do uso dos seus cartões de crédito.
-        </p>
-      </div>
-
+    <main className="flex flex-col gap-4">
       <MonthNavigation />
 
       <div className="grid gap-4 lg:grid-cols-3">
@@ -60,15 +51,13 @@ export default async function RelatorioCartoesPage({
         <div className="lg:col-span-2 space-y-4">
           {data.selectedCard ? (
             <>
-              <div className="flex items-center gap-2 pb-2 border-b">
-                <h2 className="text-lg font-semibold">
-                  {data.selectedCard.card.name}
-                </h2>
-              </div>
-
               <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">