fix: sort level-4 categories under their parent in budget vs actual table

Rework the child row sorting in getBudgetVsActualData to preserve
parent-child grouping: sub-groups (depth-1 parent + depth-2 children)
now stay together instead of being sorted flat alphabetically.

Also reduce pie chart size (height 280->200, radii reduced), show legend
labels only on hover, and change dashboard grid from 1:1 to 1:2 ratio
to give more space to the budget vs actual table.

Ref #23

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CHANGELOG.fr.md

@@ -6,11 +6,11 @@
 - Tableau de budget : colonne du total de l'année précédente affichée comme première colonne de données pour servir de référence (#16)
 
 ### Corrigé
-- Tableau de bord : les catégories de niveau 4 apparaissent maintenant sous leur parent dans le tableau réel vs budget (#23)
+- Tableau de bord : les catégories de niveau 4 apparaissent maintenant directement sous leur parent dans le tableau budget vs réel au lieu d'en bas de la section (#23)
 
 ### Modifié
-- Tableau de bord : taille du graphique circulaire réduite et plus d'espace pour le tableau réel vs budget (#23)
-- Tableau de bord : la légende du graphique circulaire est maintenant repliable (repliée par défaut) pour économiser de l'espace (#23)
+- Tableau de bord : graphique circulaire réduit en taille et étiquettes de la légende affichées seulement au survol pour donner plus d'espace au tableau budget vs réel (#23)
+- Tableau de bord : disposition du graphique circulaire et du tableau budget passée d'un ratio 1:1 à 1:2 pour une meilleure lisibilité du tableau (#23)
 
 ## [0.6.3]
 

CHANGELOG.md

@@ -6,11 +6,11 @@
 - Budget table: previous year total column displayed as first data column for baseline reference (#16)
 
 ### Fixed
-- Dashboard: level 4 categories now appear under their parent in the budget vs actual table (#23)
+- Dashboard: level-4 categories now appear directly under their parent in the budget vs actual table instead of at the bottom of the section (#23)
 
 ### Changed
-- Dashboard: reduced pie chart size and gave more space to the budget vs actual table (#23)
-- Dashboard: pie chart legend is now collapsible (collapsed by default) to save space (#23)
+- Dashboard: pie chart reduced in size and legend labels only shown on hover to give more space to the budget vs actual table (#23)
+- Dashboard: pie chart and budget table layout changed from equal 1:1 to 1:2 ratio for better table readability (#23)
 
 ## [0.6.3]
 

src/components/dashboard/CategoryPieChart.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
-import { Eye, ChevronDown, ChevronUp } from "lucide-react";
+import { Eye } from "lucide-react";
 import type { CategoryBreakdownItem } from "../../shared/types";
 import { ChartPatternDefs, getPatternFill, PatternSwatch } from "../../utils/chartPatterns";
 import ChartContextMenu from "../shared/ChartContextMenu";
@@ -24,7 +24,7 @@ export default function CategoryPieChart({
   const { t } = useTranslation();
   const hoveredRef = useRef<CategoryBreakdownItem | null>(null);
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; item: CategoryBreakdownItem } | null>(null);
-  const [legendExpanded, setLegendExpanded] = useState(false);
+  const [showLegend, setShowLegend] = useState(false);
 
   const visibleData = data.filter((d) => !hiddenCategories.has(d.category_name));
   const total = visibleData.reduce((sum, d) => sum + d.total, 0);
@@ -67,8 +67,12 @@ export default function CategoryPieChart({
         </div>
       )}
 
-      <div onContextMenu={handleContextMenu}>
-        <ResponsiveContainer width="100%" height={220}>
+      <div
+        onContextMenu={handleContextMenu}
+        onMouseEnter={() => setShowLegend(true)}
+        onMouseLeave={() => setShowLegend(false)}
+      >
+        <ResponsiveContainer width="100%" height={200}>
           <PieChart>
             <ChartPatternDefs
               prefix="cat-pie"
@@ -80,8 +84,8 @@ export default function CategoryPieChart({
               nameKey="category_name"
               cx="50%"
               cy="50%"
-              innerRadius={40}
-              outerRadius={85}
+              innerRadius={35}
+              outerRadius={75}
               paddingAngle={2}
             >
               {visibleData.map((item, index) => (
@@ -111,38 +115,31 @@ export default function CategoryPieChart({
         </ResponsiveContainer>
       </div>
 
-      <div className="mt-2">
-        <button
-          onClick={() => setLegendExpanded((prev) => !prev)}
-          className="flex items-center gap-1 text-xs text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors mb-1"
-        >
-          {legendExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
-          {t("charts.legend")}
-        </button>
-        {legendExpanded && (
-          <div className="flex flex-wrap gap-x-4 gap-y-1">
-            {data.map((item, index) => {
-              const isHidden = hiddenCategories.has(item.category_name);
-              return (
-                <button
-                  key={index}
-                  className={`flex items-center gap-1.5 text-sm ${isHidden ? "opacity-40" : ""}`}
-                  onContextMenu={(e) => {
-                    e.preventDefault();
-                    setContextMenu({ x: e.clientX, y: e.clientY, item });
-                  }}
-                  onClick={() => isHidden ? onToggleHidden(item.category_name) : undefined}
-                  title={isHidden ? t("charts.clickToShow") : undefined}
-                >
-                  <PatternSwatch index={index} color={item.category_color} prefix="cat-pie" />
-                  <span className="text-[var(--muted-foreground)]">
-                    {item.category_name} {total > 0 && !isHidden ? `${Math.round((item.total / total) * 100)}%` : ""}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        )}
+      <div
+        className={`flex flex-wrap gap-x-4 gap-y-1 mt-2 transition-all duration-200 overflow-hidden ${
+          showLegend ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        {data.map((item, index) => {
+          const isHidden = hiddenCategories.has(item.category_name);
+          return (
+            <button
+              key={index}
+              className={`flex items-center gap-1.5 text-sm ${isHidden ? "opacity-40" : ""}`}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                setContextMenu({ x: e.clientX, y: e.clientY, item });
+              }}
+              onClick={() => isHidden ? onToggleHidden(item.category_name) : undefined}
+              title={isHidden ? t("charts.clickToShow") : undefined}
+            >
+              <PatternSwatch index={index} color={item.category_color} prefix="cat-pie" />
+              <span className="text-[var(--muted-foreground)]">
+                {item.category_name} {total > 0 && !isHidden ? `${Math.round((item.total / total) * 100)}%` : ""}
+              </span>
+            </button>
+          );
+        })}
       </div>
 
       {contextMenu && (

src/i18n/locales/en.json

@@ -508,8 +508,7 @@
     "showAll": "Show all",
     "total": "Total",
     "transactions": "transactions",
-    "clickToShow": "Click to show",
-    "legend": "Legend"
+    "clickToShow": "Click to show"
   },
   "months": {
     "jan": "Jan",

src/i18n/locales/fr.json

@@ -508,8 +508,7 @@
     "showAll": "Tout afficher",
     "total": "Total",
     "transactions": "transactions",
-    "clickToShow": "Cliquer pour afficher",
-    "legend": "Légende"
+    "clickToShow": "Cliquer pour afficher"
   },
   "months": {
     "jan": "Jan",

src/pages/DashboardPage.tsx

@@ -126,8 +126,8 @@ export default function DashboardPage() {
         ))}
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 mb-6">
-        <div className="lg:col-span-2">
+      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] gap-4 mb-6">
+        <div>
           <h2 className="text-lg font-semibold mb-3">{t("dashboard.expensesByCategory")}</h2>
           <CategoryPieChart
             data={categoryBreakdown}
@@ -137,7 +137,7 @@ export default function DashboardPage() {
             onViewDetails={viewDetails}
           />
         </div>
-        <div className="lg:col-span-3">
+        <div>
           <h2 className="text-lg font-semibold mb-3">{t("dashboard.budgetVsActual")}</h2>
           <BudgetVsActualTable data={budgetVsActual} />
         </div>

src/services/budgetService.ts

@@ -404,66 +404,50 @@ export async function getBudgetVsActualData(
 
       rows.push(parent);
 
-      // Sort: "(direct)" first, then keep level-2 groups (subtotal + children) together,
-      // sorted alphabetically by the subtotal name, with leaves sorted alphabetically too.
-      // Separate depth-1 leaves from depth-1 subtotal groups
+      // Sort preserving parent-child grouping:
+      // 1. "(direct)" first
+      // 2. Sub-groups (depth-1 parent + its depth-2 children) stay together, sorted by parent name
+      // 3. Standalone depth-1 leaves sorted alphabetically
       const directRow = allChildRows.find((r) => r.category_id === cat.id && !r.is_parent);
-      const level2Groups: { subtotal: BudgetVsActualRow; children: BudgetVsActualRow[] }[] = [];
-      const level1Leaves: BudgetVsActualRow[] = [];
+      const subGroups: { parent: BudgetVsActualRow; children: BudgetVsActualRow[] }[] = [];
+      const standaloneLeaves: BudgetVsActualRow[] = [];
 
-      for (const r of allChildRows) {
-        if (r.category_id === cat.id && !r.is_parent) continue; // skip "(direct)" — handled separately
-        if (r.is_parent && (r.depth ?? 0) === 1) {
-          // This is an intermediate parent subtotal — start a new group
-          level2Groups.push({ subtotal: r, children: [] });
-        } else if ((r.depth ?? 0) === 2) {
-          // Find which group this belongs to (by parent_id)
-          const group = level2Groups.find((g) => g.subtotal.category_id === r.parent_id);
-          if (group) {
-            group.children.push(r);
+      for (const row of allChildRows) {
+        if (row.category_id === cat.id && !row.is_parent) continue; // skip direct row
+        if (row.is_parent && row.depth === 1) {
+          subGroups.push({ parent: row, children: [] });
+        } else if (row.depth === 2 && subGroups.length > 0) {
+          // Find the matching sub-group for this child
+          const matchingGroup = subGroups.find((g) => g.parent.category_id === row.parent_id);
+          if (matchingGroup) {
+            matchingGroup.children.push(row);
           } else {
-            level1Leaves.push(r);
+            standaloneLeaves.push(row);
           }
         } else {
-          level1Leaves.push(r);
+          standaloneLeaves.push(row);
         }
       }
 
-      // Sort level-1 leaves alphabetically
-      level1Leaves.sort((a, b) => a.category_name.localeCompare(b.category_name));
-      // Sort level-2 groups by subtotal name
-      level2Groups.sort((a, b) => a.subtotal.category_name.localeCompare(b.subtotal.category_name));
-      // Sort children within each group
-      for (const g of level2Groups) {
-        g.children.sort((a, b) => {
-          // "(direct)" row first
-          if (a.category_id === g.subtotal.category_id) return -1;
-          if (b.category_id === g.subtotal.category_id) return 1;
+      // Sort sub-groups by parent name, children within each group alphabetically
+      subGroups.sort((a, b) => a.parent.category_name.localeCompare(b.parent.category_name));
+      for (const group of subGroups) {
+        group.children.sort((a, b) => {
+          // "(direct)" entries first within group
+          if (a.category_id === group.parent.category_id) return -1;
+          if (b.category_id === group.parent.category_id) return 1;
           return a.category_name.localeCompare(b.category_name);
         });
       }
+      standaloneLeaves.sort((a, b) => a.category_name.localeCompare(b.category_name));
 
-      // Reassemble: (direct) first, then interleave level-1 leaves and level-2 groups alphabetically
-      const sorted: BudgetVsActualRow[] = [];
-      if (directRow) sorted.push(directRow);
-
-      // Merge level1Leaves and level2Groups by name
-      let li = 0;
-      let gi = 0;
-      while (li < level1Leaves.length || gi < level2Groups.length) {
-        const leafName = li < level1Leaves.length ? level1Leaves[li].category_name : null;
-        const groupName = gi < level2Groups.length ? level2Groups[gi].subtotal.category_name : null;
-        if (leafName !== null && (groupName === null || leafName.localeCompare(groupName) <= 0)) {
-          sorted.push(level1Leaves[li]);
-          li++;
-        } else {
-          const g = level2Groups[gi];
-          sorted.push(g.subtotal, ...g.children);
-          gi++;
-        }
+      const sortedChildren: BudgetVsActualRow[] = [];
+      if (directRow) sortedChildren.push(directRow);
+      for (const group of subGroups) {
+        sortedChildren.push(group.parent, ...group.children);
       }
-
-      rows.push(...sorted);
+      sortedChildren.push(...standaloneLeaves);
+      rows.push(...sortedChildren);
     }
   }