Refactor BudgetVsActualPage to filter out deleted categories and improve category handling

MatissJanis · MatissJanis · commit 45273cd8c0fd · 2026-01-05T21:04:42.000Z
- Updated the BudgetVsActualPage component to filter out deleted categories and groups, ensuring they are not displayed in the UI.
- Enhanced the logic for grouping and sorting categories, maintaining only active categories and special cases.
- Modified related tests to verify the correct filtering behavior and ensure that deleted categories do not appear in the selection options.
- Improved data transformation logic to prevent the inclusion of non-existent categories in budget calculations.
diff --git a/src/components/pages/BudgetVsActualPage.test.tsx b/src/components/pages/BudgetVsActualPage.test.tsx
@@ -293,7 +293,7 @@ describe('BudgetVsActualPage', () => {
     expect(incomeIndex).toBeGreaterThan(groceriesIndex);
   });
 
-  it('sorts deleted categories last within their group', () => {
+  it('filters out deleted categories', () => {
     const mockData = createMockWrappedData({
       budgetComparison: createMockBudgetComparison({
         categoryBudgets: [
@@ -338,12 +338,14 @@ describe('BudgetVsActualPage', () => {
     const anotherActiveIndex = options.findIndex(opt => opt.text === 'Another Active');
     const deletedIndex = options.findIndex(opt => opt.text === 'Deleted: Old Category');
 
-    // Deleted category should appear last
-    expect(deletedIndex).toBeGreaterThan(activeIndex);
-    expect(deletedIndex).toBeGreaterThan(anotherActiveIndex);
+    // Active categories should be present
+    expect(activeIndex).toBeGreaterThan(-1);
+    expect(anotherActiveIndex).toBeGreaterThan(-1);
+    // Deleted category should be filtered out
+    expect(deletedIndex).toBe(-1);
   });
 
-  it('sorts deleted groups last in the group list', () => {
+  it('filters out deleted categories even in deleted groups', () => {
     const mockData = createMockWrappedData({
       budgetComparison: createMockBudgetComparison({
         categoryBudgets: [
@@ -357,6 +359,16 @@ describe('BudgetVsActualPage', () => {
             totalVariance: -200,
             totalVariancePercentage: -20,
           },
+          {
+            categoryId: 'cat1b',
+            categoryName: 'Another Category in Active Group',
+            categoryGroup: 'Active Group',
+            monthlyBudgets: [],
+            totalBudgeted: 800,
+            totalActual: 700,
+            totalVariance: -100,
+            totalVariancePercentage: -12.5,
+          },
           {
             categoryId: 'cat2',
             categoryName: 'Deleted: Category in Deleted Group',
@@ -381,22 +393,21 @@ describe('BudgetVsActualPage', () => {
 
     // Find the optgroups
     const activeGroupOption = options.find(opt => opt.text === 'Category in Active Group');
+    const anotherActiveOption = options.find(
+      opt => opt.text === 'Another Category in Active Group',
+    );
     const deletedGroupOption = options.find(
       opt => opt.text === 'Deleted: Category in Deleted Group',
     );
 
-    // Both should exist
+    // Active categories should exist
     expect(activeGroupOption).toBeDefined();
-    expect(deletedGroupOption).toBeDefined();
-
-    // The deleted group category should appear after the active group category
-    // (since groups are sorted and deleted groups go last)
-    const activeIndex = options.findIndex(opt => opt === activeGroupOption);
-    const deletedIndex = options.findIndex(opt => opt === deletedGroupOption);
-    expect(deletedIndex).toBeGreaterThan(activeIndex);
+    expect(anotherActiveOption).toBeDefined();
+    // Deleted category should be filtered out
+    expect(deletedGroupOption).toBeUndefined();
   });
 
-  it('handles groups with all deleted categories as deleted groups', () => {
+  it('filters out groups with all deleted categories', () => {
     const mockData = createMockWrappedData({
       budgetComparison: createMockBudgetComparison({
         categoryBudgets: [
@@ -412,8 +423,8 @@ describe('BudgetVsActualPage', () => {
           },
           {
             categoryId: 'cat2',
-            categoryName: 'Deleted: Category 1',
-            categoryGroup: 'All Deleted Group',
+            categoryName: 'Another Active',
+            categoryGroup: 'Active Group',
             monthlyBudgets: [],
             totalBudgeted: 500,
             totalActual: 400,
@@ -422,14 +433,24 @@ describe('BudgetVsActualPage', () => {
           },
           {
             categoryId: 'cat3',
-            categoryName: 'Deleted: Category 2',
+            categoryName: 'Deleted: Category 1',
             categoryGroup: 'All Deleted Group',
             monthlyBudgets: [],
             totalBudgeted: 300,
             totalActual: 250,
             totalVariance: -50,
             totalVariancePercentage: -16.67,
           },
+          {
+            categoryId: 'cat4',
+            categoryName: 'Deleted: Category 2',
+            categoryGroup: 'All Deleted Group',
+            monthlyBudgets: [],
+            totalBudgeted: 200,
+            totalActual: 150,
+            totalVariance: -50,
+            totalVariancePercentage: -25,
+          },
         ],
         groupSortOrder: new Map([
           ['Active Group', 1],
@@ -443,11 +464,15 @@ describe('BudgetVsActualPage', () => {
     const options = Array.from(select.options);
 
     const activeIndex = options.findIndex(opt => opt.text === 'Active Category');
+    const anotherActiveIndex = options.findIndex(opt => opt.text === 'Another Active');
     const deleted1Index = options.findIndex(opt => opt.text === 'Deleted: Category 1');
     const deleted2Index = options.findIndex(opt => opt.text === 'Deleted: Category 2');
 
-    // All deleted group should appear after active group
-    expect(deleted1Index).toBeGreaterThan(activeIndex);
-    expect(deleted2Index).toBeGreaterThan(activeIndex);
+    // Active categories should be present
+    expect(activeIndex).toBeGreaterThan(-1);
+    expect(anotherActiveIndex).toBeGreaterThan(-1);
+    // Deleted categories should be filtered out
+    expect(deleted1Index).toBe(-1);
+    expect(deleted2Index).toBe(-1);
   });
 });
diff --git a/src/components/pages/BudgetVsActualPage.tsx b/src/components/pages/BudgetVsActualPage.tsx
@@ -76,28 +76,44 @@ export function BudgetVsActualPage({ data }: BudgetVsActualPageProps) {
   const groupedCategories = useMemo(() => {
     const groups = new Map<string, typeof budgetComparison.categoryBudgets>();
 
+    // Filter out:
+    // 1. Deleted categories (categories with names starting with "deleted: ")
+    // 2. Categories that cannot be matched (deleted entirely from DB - category name is just the UUID)
+    const activeCategories = budgetComparison.categoryBudgets.filter(cat => {
+      // Filter out deleted categories
+      if (cat.categoryName.toLowerCase().startsWith('deleted: ')) {
+        return false;
+      }
+      // Filter out categories that cannot be matched (category name is just the UUID)
+      // Special categories (uncategorized, off-budget, transfers) are always valid
+      if (
+        cat.categoryId === 'uncategorized' ||
+        cat.categoryId === 'off-budget' ||
+        cat.categoryId.startsWith('transfer:')
+      ) {
+        return true;
+      }
+      // If category name matches the category ID (UUID format), it means the category doesn't exist in DB
+      // UUIDs are typically long strings with hyphens (e.g., "123e4567-e89b-12d3-a456-426614174000")
+      return cat.categoryName !== cat.categoryId;
+    });
+
     // Group all categories by their group (undefined group goes to "Other")
-    budgetComparison.categoryBudgets.forEach(cat => {
+    activeCategories.forEach(cat => {
       const groupName = cat.categoryGroup || 'Other';
       if (!groups.has(groupName)) {
         groups.set(groupName, []);
       }
       groups.get(groupName)!.push(cat);
     });
 
-    // Sort categories alphabetically within each group, but put deleted and income categories last
+    // Sort categories alphabetically within each group, but put income categories last
     groups.forEach(categories => {
       categories.sort((a, b) => {
-        const aIsDeleted = a.categoryName.toLowerCase().startsWith('deleted: ');
-        const bIsDeleted = b.categoryName.toLowerCase().startsWith('deleted: ');
         const aIsIncome = a.categoryName.toLowerCase().includes('income');
         const bIsIncome = b.categoryName.toLowerCase().includes('income');
 
-        // Deleted categories go last
-        if (aIsDeleted && !bIsDeleted) return 1;
-        if (!aIsDeleted && bIsDeleted) return -1;
-
-        // Income categories go last (but before deleted)
+        // Income categories go last
         if (aIsIncome && !bIsIncome) return 1;
         if (!aIsIncome && bIsIncome) return -1;
 
@@ -110,18 +126,12 @@ export function BudgetVsActualPage({ data }: BudgetVsActualPageProps) {
     const groupSortOrder = budgetComparison.groupSortOrder || new Map<string, number>();
     const groupTombstones = budgetComparison.groupTombstones || new Map<string, boolean>();
     return Array.from(groups.entries()).sort((a, b) => {
-      const [groupA, categoriesA] = [a[0], a[1]];
-      const [groupB, categoriesB] = [b[0], b[1]];
-
-      // Check if groups are deleted (either from tombstone map or if all categories are deleted)
-      const aIsDeleted =
-        groupTombstones.get(groupA) === true ||
-        (categoriesA.length > 0 &&
-          categoriesA.every(cat => cat.categoryName.toLowerCase().startsWith('deleted: ')));
-      const bIsDeleted =
-        groupTombstones.get(groupB) === true ||
-        (categoriesB.length > 0 &&
-          categoriesB.every(cat => cat.categoryName.toLowerCase().startsWith('deleted: ')));
+      const [groupA] = [a[0]];
+      const [groupB] = [b[0]];
+
+      // Check if groups are deleted (from tombstone map)
+      const aIsDeleted = groupTombstones.get(groupA) === true;
+      const bIsDeleted = groupTombstones.get(groupB) === true;
 
       const aIsIncome = groupA.toLowerCase().includes('income');
       const bIsIncome = groupB.toLowerCase().includes('income');
diff --git a/src/utils/dataTransform.ts b/src/utils/dataTransform.ts
@@ -171,71 +171,85 @@ function calculateBudgetComparison(
   actualSpendingMap.forEach((_, categoryId) => allCategoryIds.add(categoryId));
 
   // Build category budgets
-  const categoryBudgets: CategoryBudget[] = Array.from(allCategoryIds).map(categoryId => {
-    let baseCategoryName: string;
-    if (categoryId === 'uncategorized') {
-      baseCategoryName = 'Uncategorized';
-    } else if (categoryId === 'off-budget') {
-      baseCategoryName = 'Off Budget';
-    } else {
-      baseCategoryName = categoryIdToName.get(categoryId) || categoryId;
-    }
+  // Filter out categories that don't exist in the database (unless they're special categories)
+  const categoryBudgets: CategoryBudget[] = Array.from(allCategoryIds)
+    .filter(categoryId => {
+      // Keep special categories (uncategorized, off-budget, transfers)
+      if (
+        categoryId === 'uncategorized' ||
+        categoryId === 'off-budget' ||
+        categoryId.startsWith('transfer:')
+      ) {
+        return true;
+      }
+      // Filter out categories that don't exist in the database
+      return categoryIdToName.has(categoryId);
+    })
+    .map(categoryId => {
+      let baseCategoryName: string;
+      if (categoryId === 'uncategorized') {
+        baseCategoryName = 'Uncategorized';
+      } else if (categoryId === 'off-budget') {
+        baseCategoryName = 'Off Budget';
+      } else {
+        baseCategoryName = categoryIdToName.get(categoryId) || categoryId;
+      }
 
-    // Check if category is deleted and prefix with "Deleted: "
-    const isDeleted = categoryIdToTombstone.get(categoryId) || false;
-    const categoryName = isDeleted ? `Deleted: ${baseCategoryName}` : baseCategoryName;
+      // Check if category is deleted and prefix with "Deleted: "
+      const isDeleted = categoryIdToTombstone.get(categoryId) || false;
+      const categoryName = isDeleted ? `Deleted: ${baseCategoryName}` : baseCategoryName;
 
-    const categoryGroup = categoryIdToGroup.get(categoryId);
+      const categoryGroup = categoryIdToGroup.get(categoryId);
 
-    const budgetMapForCategory = budgetMap.get(categoryId) || new Map();
-    const actualMapForCategory = actualSpendingMap.get(categoryId) || new Map();
+      const budgetMapForCategory = budgetMap.get(categoryId) || new Map();
+      const actualMapForCategory = actualSpendingMap.get(categoryId) || new Map();
 
-    // Calculate monthly budgets with carry forward logic
-    let carryForwardFromPrevious = 0; // Carry forward from previous month
-    const monthlyBudgets = MONTHS.map(monthName => {
-      const budgetedAmount = budgetMapForCategory.get(monthName) || 0;
-      const actualAmount = actualMapForCategory.get(monthName) || 0;
-      const carryForward = carryForwardFromPrevious;
-      const effectiveBudget = budgetedAmount + carryForward; // Available to spend this month
-      const remaining = effectiveBudget - actualAmount; // What's left after spending
-      const variance = actualAmount - effectiveBudget; // Variance against effective budget
-      const variancePercentage = effectiveBudget !== 0 ? (variance / effectiveBudget) * 100 : 0;
+      // Calculate monthly budgets with carry forward logic
+      let carryForwardFromPrevious = 0; // Carry forward from previous month
+      const monthlyBudgets = MONTHS.map(monthName => {
+        const budgetedAmount = budgetMapForCategory.get(monthName) || 0;
+        const actualAmount = actualMapForCategory.get(monthName) || 0;
+        const carryForward = carryForwardFromPrevious;
+        const effectiveBudget = budgetedAmount + carryForward; // Available to spend this month
+        const remaining = effectiveBudget - actualAmount; // What's left after spending
+        const variance = actualAmount - effectiveBudget; // Variance against effective budget
+        const variancePercentage = effectiveBudget !== 0 ? (variance / effectiveBudget) * 100 : 0;
 
-      // Update carry forward for next month (only positive remaining amounts carry forward)
-      carryForwardFromPrevious = remaining > 0 ? remaining : 0;
+        // Update carry forward for next month (only positive remaining amounts carry forward)
+        carryForwardFromPrevious = remaining > 0 ? remaining : 0;
+
+        return {
+          month: monthName,
+          budgetedAmount,
+          actualAmount,
+          carryForward,
+          effectiveBudget,
+          remaining,
+          variance,
+          variancePercentage,
+        };
+      });
+
+      const totalBudgeted = monthlyBudgets.reduce((sum, m) => sum + m.budgetedAmount, 0);
+      const totalActual = monthlyBudgets.reduce((sum, m) => sum + m.actualAmount, 0);
+      // Total variance should use effective budgets (which include carry forward)
+      const totalEffectiveBudget = monthlyBudgets.reduce((sum, m) => sum + m.effectiveBudget, 0);
+      const totalVariance = totalActual - totalEffectiveBudget;
+      const totalVariancePercentage =
+        totalEffectiveBudget !== 0 ? (totalVariance / totalEffectiveBudget) * 100 : 0;
 
       return {
-        month: monthName,
-        budgetedAmount,
-        actualAmount,
-        carryForward,
-        effectiveBudget,
-        remaining,
-        variance,
-        variancePercentage,
+        categoryId,
+        categoryName,
+        categoryGroup,
+        monthlyBudgets,
+        totalBudgeted,
+        totalActual,
+        totalVariance,
+        totalVariancePercentage,
       };
     });
 
-    const totalBudgeted = monthlyBudgets.reduce((sum, m) => sum + m.budgetedAmount, 0);
-    const totalActual = monthlyBudgets.reduce((sum, m) => sum + m.actualAmount, 0);
-    // Total variance should use effective budgets (which include carry forward)
-    const totalEffectiveBudget = monthlyBudgets.reduce((sum, m) => sum + m.effectiveBudget, 0);
-    const totalVariance = totalActual - totalEffectiveBudget;
-    const totalVariancePercentage =
-      totalEffectiveBudget !== 0 ? (totalVariance / totalEffectiveBudget) * 100 : 0;
-
-    return {
-      categoryId,
-      categoryName,
-      categoryGroup,
-      monthlyBudgets,
-      totalBudgeted,
-      totalActual,
-      totalVariance,
-      totalVariancePercentage,
-    };
-  });
-
   // Calculate monthly totals (using effective budgets which include carry forward)
   const monthlyTotals = MONTHS.map(monthName => {
     let totalBudgeted = 0;
