Custom Reports - split out hidden categories from offbudget (#2302)

* Add Toggles * budget table * testing * updates * updates * fixes * updates * fix Menu * lint fixes * fix keybindings * revert budget menu changes * notes * remove default exports * fixes * disabled fix * add style option * lint fix * remove css * lint fixes * color updates * merge menu with togglemenu * host * menu fixes * fix regression * remove host * adjustments * work * fix hidden filters * merge fixes * adjustments * updates * fix uncat table values * fixes * notes * title change * Adjust showHide selector
actualbudget · Feb 2, 2024 · c8d326d · c8d326d
1 parent d8639a2
commit c8d326d
Show file tree

Hide file tree

Showing 14 changed files with 250 additions and 142 deletions.
diff --git a/packages/desktop-client/src/components/reports/CategorySelector.tsx b/packages/desktop-client/src/components/reports/CategorySelector.tsx
@@ -22,36 +22,41 @@ import { GraphButton } from './GraphButton';
 
 type CategorySelectorProps = {
   categoryGroups: Array<CategoryGroupEntity>;
-  categories: Array<CategoryEntity>;
   selectedCategories: CategoryListProps['items'];
   setSelectedCategories: (selectedCategories: CategoryEntity[]) => null;
+  showHiddenCategories?: boolean;
 };
 
 export function CategorySelector({
   categoryGroups,
-  categories,
   selectedCategories,
   setSelectedCategories,
+  showHiddenCategories = true,
 }: CategorySelectorProps) {
   const [uncheckedHidden, setUncheckedHidden] = useState(false);
+  const filteredGroup = (categoryGroup: CategoryGroupEntity) => {
+    return categoryGroup.categories.filter(f => {
+      return showHiddenCategories || !f.hidden ? true : false;
+    });
+  };
+
+  const selectAll: CategoryEntity[] = [];
+  categoryGroups.map(categoryGroup =>
+    filteredGroup(categoryGroup).map(category => selectAll.push(category)),
+  );
 
   const selectedCategoryMap = useMemo(
     () => selectedCategories.map(selected => selected.id),
     [selectedCategories],
   );
-  const allCategoriesSelected = categories.every(category =>
+  const allCategoriesSelected = selectAll.every(category =>
     selectedCategoryMap.includes(category.id),
   );
 
-  const allCategoriesUnselected = !categories.some(category =>
+  const allCategoriesUnselected = !selectAll.some(category =>
     selectedCategoryMap.includes(category.id),
   );
 
-  const selectAll: CategoryEntity[] = [];
-  categoryGroups.map(categoryGroup =>
-    categoryGroup.categories.map(category => selectAll.push(category)),
-  );
-
   return (
     <View>
       <View
@@ -126,13 +131,14 @@ export function CategorySelector({
       >
         {categoryGroups &&
           categoryGroups.map(categoryGroup => {
-            const allCategoriesInGroupSelected = categoryGroup.categories.every(
-              category =>
-                selectedCategories.some(
-                  selectedCategory => selectedCategory.id === category.id,
-                ),
+            const allCategoriesInGroupSelected = filteredGroup(
+              categoryGroup,
+            ).every(category =>
+              selectedCategories.some(
+                selectedCategory => selectedCategory.id === category.id,
+              ),
             );
-            const noCategorySelected = categoryGroup.categories.every(
+            const noCategorySelected = filteredGroup(categoryGroup).every(
               category =>
                 !selectedCategories.some(
                   selectedCategory => selectedCategory.id === category.id,
@@ -155,7 +161,7 @@ export function CategorySelector({
                       const selectedCategoriesExcludingGroupCategories =
                         selectedCategories.filter(
                           selectedCategory =>
-                            !categoryGroup.categories.some(
+                            !filteredGroup(categoryGroup).some(
                               groupCategory =>
                                 groupCategory.id === selectedCategory.id,
                             ),
@@ -167,7 +173,7 @@ export function CategorySelector({
                       } else {
                         setSelectedCategories(
                           selectedCategoriesExcludingGroupCategories.concat(
-                            categoryGroup.categories,
+                            filteredGroup(categoryGroup),
                           ),
                         );
                       }
@@ -189,7 +195,7 @@ export function CategorySelector({
                       paddingLeft: 10,
                     }}
                   >
-                    {categoryGroup.categories.map(category => {
+                    {filteredGroup(categoryGroup).map(category => {
                       const isChecked = selectedCategories.some(
                         selectedCategory => selectedCategory.id === category.id,
                       );

diff --git a/packages/desktop-client/src/components/reports/ReportOptions.ts b/packages/desktop-client/src/components/reports/ReportOptions.ts
@@ -16,7 +16,8 @@ export const defaultState: CustomReportEntity = {
   groupBy: 'Category',
   balanceType: 'Payment',
   showEmpty: false,
-  showOffBudgetHidden: false,
+  showOffBudget: false,
+  showHiddenCategories: false,
   showUncategorized: false,
   graphType: 'BarGraph',
   startDate,
@@ -77,18 +78,17 @@ const intervalOptions = [
 export type QueryDataEntity = {
   date: string;
   category: string;
+  categoryHidden: boolean;
   categoryGroup: string;
+  categoryGroupHidden: boolean;
   account: string;
   accountOffBudget: boolean;
   payee: string;
   transferAccount: string;
   amount: number;
 };
 
-export type UncategorizedEntity = Pick<
-  CategoryEntity,
-  'name' | 'id' | 'hidden'
-> & {
+export type UncategorizedEntity = Pick<CategoryEntity, 'name' | 'hidden'> & {
   /*
     When looking at uncategorized and hidden transactions we
     need a way to group them. To do this we give them a unique
@@ -104,7 +104,6 @@ export type UncategorizedEntity = Pick<
 
 const uncategorizedCategory: UncategorizedEntity = {
   name: 'Uncategorized',
-  id: undefined,
   uncategorized_id: '1',
   hidden: false,
   is_off_budget: false,
@@ -113,7 +112,6 @@ const uncategorizedCategory: UncategorizedEntity = {
 };
 const transferCategory: UncategorizedEntity = {
   name: 'Transfers',
-  id: undefined,
   uncategorized_id: '2',
   hidden: false,
   is_off_budget: false,
@@ -122,7 +120,6 @@ const transferCategory: UncategorizedEntity = {
 };
 const offBudgetCategory: UncategorizedEntity = {
   name: 'Off Budget',
-  id: undefined,
   uncategorized_id: '3',
   hidden: false,
   is_off_budget: true,
@@ -144,26 +141,19 @@ const uncategorizedGroup: UncategorizedGroupEntity = {
   categories: [uncategorizedCategory, transferCategory, offBudgetCategory],
 };
 
-export const categoryLists = (
-  showOffBudgetHidden: boolean,
-  showUncategorized: boolean,
-  categories: { list: CategoryEntity[]; grouped: CategoryGroupEntity[] },
-) => {
-  const categoryList = showUncategorized
-    ? [
-        ...categories.list.filter(f => showOffBudgetHidden || !f.hidden),
-        uncategorizedCategory,
-        transferCategory,
-        offBudgetCategory,
-      ]
-    : categories.list;
-  const categoryGroup = showUncategorized
-    ? [
-        ...categories.grouped.filter(f => showOffBudgetHidden || !f.hidden),
-        uncategorizedGroup,
-      ]
-    : categories.grouped;
-  return [categoryList, categoryGroup] as const;
+export const categoryLists = (categories: {
+  list: CategoryEntity[];
+  grouped: CategoryGroupEntity[];
+}) => {
+  const categoryList = [
+    ...categories.list,
+    uncategorizedCategory,
+    offBudgetCategory,
+    transferCategory,
+  ];
+
+  const categoryGroup = [...categories.grouped, uncategorizedGroup];
+  return [categoryList, categoryGroup.filter(group => group !== null)] as const;
 };
 
 export const groupBySelections = (

diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.jsx b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
@@ -35,7 +35,8 @@ export function ReportSidebar({
   setMode,
   setIsDateStatic,
   setShowEmpty,
-  setShowOffBudgetHidden,
+  setShowOffBudget,
+  setShowHiddenCategories,
   setShowUncategorized,
   setSelectedCategories,
   onChangeDates,
@@ -266,10 +267,12 @@ export function ReportSidebar({
                 <Menu
                   onMenuSelect={type => {
                     if (type === 'show-hidden-categories') {
-                      setShowOffBudgetHidden(
-                        !customReportItems.showOffBudgetHidden,
+                      setShowHiddenCategories(
+                        !customReportItems.showHiddenCategories,
                       );
-                    } else if (type === 'show-empty-rows') {
+                    } else if (type === 'show-off-budget') {
+                      setShowOffBudget(!customReportItems.showOffBudget);
+                    } else if (type === 'show-empty-items') {
                       setShowEmpty(!customReportItems.showEmpty);
                     } else if (type === 'show-uncategorized') {
                       setShowUncategorized(
@@ -279,20 +282,26 @@ export function ReportSidebar({
                   }}
                   items={[
                     {
-                      name: 'show-empty-rows',
-                      text: 'Show Empty Rows',
+                      name: 'show-hidden-categories',
+                      text: 'Show hidden categories',
+                      tooltip: 'Show hidden categories',
+                      toggle: customReportItems.showHiddenCategories,
+                    },
+                    {
+                      name: 'show-empty-items',
+                      text: 'Show empty rows',
                       tooltip: 'Show rows that are zero or blank',
                       toggle: customReportItems.showEmpty,
                     },
                     {
-                      name: 'show-hidden-categories',
-                      text: 'Show Off Budget',
-                      tooltip: 'Show off budget accounts and hidden categories',
-                      toggle: customReportItems.showOffBudgetHidden,
+                      name: 'show-off-budget',
+                      text: 'Show off budget',
+                      tooltip: 'Show off budget accounts',
+                      toggle: customReportItems.showOffBudget,
                     },
                     {
                       name: 'show-uncategorized',
-                      text: 'Show Uncategorized',
+                      text: 'Show uncategorized',
                       tooltip: 'Show uncategorized transactions',
                       toggle: customReportItems.showUncategorized,
                     },
@@ -440,10 +449,14 @@ export function ReportSidebar({
           }}
         >
           <CategorySelector
-            categoryGroups={categories.grouped}
-            categories={categories.list}
+            categoryGroups={categories.grouped.filter(f => {
+              return customReportItems.showHiddenCategories || !f.hidden
+                ? true
+                : false;
+            })}
             selectedCategories={customReportItems.selectedCategories}
             setSelectedCategories={setSelectedCategories}
+            showHiddenCategories={customReportItems.showHiddenCategories}
           />
         </View>
       )}

diff --git a/packages/desktop-client/src/components/reports/reports/CategorySpending.jsx b/packages/desktop-client/src/components/reports/reports/CategorySpending.jsx
@@ -144,7 +144,6 @@ export function CategorySpending() {
       >
         <View style={{ width: 200 }}>
           <CategorySelector
-            categories={categories.list}
             categoryGroups={categories.grouped.filter(
               categoryGroup => !categoryGroup.is_income,
             )}

diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
@@ -69,8 +69,9 @@ export function CustomReport() {
   const [groupBy, setGroupBy] = useState(loadReport.groupBy);
   const [balanceType, setBalanceType] = useState(loadReport.balanceType);
   const [showEmpty, setShowEmpty] = useState(loadReport.showEmpty);
-  const [showOffBudgetHidden, setShowOffBudgetHidden] = useState(
-    loadReport.showOffBudgetHidden,
+  const [showOffBudget, setShowOffBudget] = useState(loadReport.showOffBudget);
+  const [showHiddenCategories, setShowHiddenCategories] = useState(
+    loadReport.showHiddenCategories,
   );
   const [showUncategorized, setShowUncategorized] = useState(
     loadReport.showUncategorized,
@@ -131,7 +132,8 @@ export function CustomReport() {
       conditions: filters,
       conditionsOp,
       showEmpty,
-      showOffBudgetHidden,
+      showOffBudget,
+      showHiddenCategories,
       showUncategorized,
       balanceTypeOp,
     });
@@ -147,7 +149,8 @@ export function CustomReport() {
     filters,
     conditionsOp,
     showEmpty,
-    showOffBudgetHidden,
+    showOffBudget,
+    showHiddenCategories,
     showUncategorized,
     graphType,
   ]);
@@ -162,7 +165,8 @@ export function CustomReport() {
       conditions: filters,
       conditionsOp,
       showEmpty,
-      showOffBudgetHidden,
+      showOffBudget,
+      showHiddenCategories,
       showUncategorized,
       groupBy,
       balanceTypeOp,
@@ -183,7 +187,8 @@ export function CustomReport() {
     filters,
     conditionsOp,
     showEmpty,
-    showOffBudgetHidden,
+    showOffBudget,
+    showHiddenCategories,
     showUncategorized,
     graphType,
   ]);
@@ -198,7 +203,8 @@ export function CustomReport() {
     groupBy,
     balanceType,
     showEmpty,
-    showOffBudgetHidden,
+    showOffBudget,
+    showHiddenCategories,
     showUncategorized,
     graphType,
     startDate,
@@ -259,7 +265,8 @@ export function CustomReport() {
           setMode={setMode}
           setIsDateStatic={setIsDateStatic}
           setShowEmpty={setShowEmpty}
-          setShowOffBudgetHidden={setShowOffBudgetHidden}
+          setShowOffBudget={setShowOffBudget}
+          setShowHiddenCategories={setShowHiddenCategories}
           setShowUncategorized={setShowUncategorized}
           setSelectedCategories={setSelectedCategories}
           onChangeDates={onChangeDates}

diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportCard.jsx b/packages/desktop-client/src/components/reports/reports/CustomReportCard.jsx
@@ -27,6 +27,10 @@ export function CustomReportCard(reports) {
       groupBy,
       balanceTypeOp: 'totalDebts',
       categories,
+      showEmpty: false,
+      showOffBudget: false,
+      showHiddenCategories: false,
+      showUncategorized: false,
     });
   }, [startDate, endDate, categories]);
   const data = useReport('default', getGraphData);