From d5790a08e9fc1bec4c42e3039b65e06f950a5a3a Mon Sep 17 00:00:00 2001
From: medic-bot <medic-bot@lacompagniemaximus.com>
Date: Sun, 8 Mar 2026 12:04:35 -0400
Subject: [PATCH] Remove internal title from CategoryPieChart for dashboard
 consistency (#17)

Move the pie chart title to DashboardPage as an external h2,
matching the pattern used by BudgetVsActual and ExpensesOverTime sections.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/dashboard/CategoryPieChart.tsx |  3 ---
 src/pages/DashboardPage.tsx                   | 17 ++++++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/dashboard/CategoryPieChart.tsx b/src/components/dashboard/CategoryPieChart.tsx
index 40cde0a..2fe8195 100644
--- a/src/components/dashboard/CategoryPieChart.tsx
+++ b/src/components/dashboard/CategoryPieChart.tsx
@@ -37,7 +37,6 @@ export default function CategoryPieChart({
   if (data.length === 0) {
     return (
       <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
-        <h2 className="text-lg font-semibold mb-4">{t("dashboard.expensesByCategory")}</h2>
         <p className="text-center text-[var(--muted-foreground)] py-8">{t("dashboard.noData")}</p>
       </div>
     );
@@ -45,8 +44,6 @@ export default function CategoryPieChart({
 
   return (
     <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
-      <h2 className="text-lg font-semibold mb-4">{t("dashboard.expensesByCategory")}</h2>
-
       {hiddenCategories.size > 0 && (
         <div className="flex flex-wrap items-center gap-2 mb-3">
           <span className="text-xs text-[var(--muted-foreground)]">{t("charts.hiddenCategories")}:</span>
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index fa80d92..d484fbf 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -127,13 +127,16 @@ export default function DashboardPage() {
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
-        <CategoryPieChart
-          data={categoryBreakdown}
-          hiddenCategories={hiddenCategories}
-          onToggleHidden={toggleHidden}
-          onShowAll={showAll}
-          onViewDetails={viewDetails}
-        />
+        <div>
+          <h2 className="text-lg font-semibold mb-3">{t("dashboard.expensesByCategory")}</h2>
+          <CategoryPieChart
+            data={categoryBreakdown}
+            hiddenCategories={hiddenCategories}
+            onToggleHidden={toggleHidden}
+            onShowAll={showAll}
+            onViewDetails={viewDetails}
+          />
+        </div>
         <div>
           <h2 className="text-lg font-semibold mb-3">{t("dashboard.budgetVsActual")}</h2>
           <BudgetVsActualTable data={budgetVsActual} />
-- 
2.45.2