From 80d08c67a6815d50d9e0d5b250c30a7f4b598f65 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Sat, 28 Oct 2023 09:49:45 +0100
Subject: [PATCH] Add Category Selector

---
 .../src/components/reports/Custom.js          | 29 +++++++++++++++++++
 .../src/components/reports/Overview.js        |  2 +-
 .../spreadsheets/default-spreadsheet.tsx      | 24 +++++++++++++++
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/desktop-client/src/components/reports/Custom.js b/packages/desktop-client/src/components/reports/Custom.js
index 03ded220026..ecfc68a52df 100644
--- a/packages/desktop-client/src/components/reports/Custom.js
+++ b/packages/desktop-client/src/components/reports/Custom.js
@@ -26,6 +26,7 @@ import { FilterButton, AppliedFilters } from '../filters/FiltersMenu';
 import { Checkbox } from '../forms';
 import PrivacyFilter from '../PrivacyFilter';
 
+import CategorySelector from './CategorySelector';
 import AreaGraph from './graphs/AreaGraph';
 import BarGraph from './graphs/BarGraph';
 import BarLineGraph from './graphs/BarLineGraph';
@@ -117,6 +118,7 @@ export default function Custom() {
     { value: 3, description: 'All', format: 'totalTotals' },
   ];
 
+  const [selectedCategories, setSelectedCategories] = useState(null);
   const [allMonths, setAllMonths] = useState(null);
   const [start, setStart] = useState(
     monthUtils.subMonths(monthUtils.currentMonth(), 5),
@@ -143,6 +145,7 @@ export default function Custom() {
       split,
       typeOptions.find(opt => opt.value === type).format,
       categories,
+      selectedCategories,
       payees,
       accounts,
       filters,
@@ -155,6 +158,7 @@ export default function Custom() {
     split,
     type,
     categories,
+    selectedCategories,
     payees,
     accounts,
     filters,
@@ -163,6 +167,12 @@ export default function Custom() {
   ]);
   const data = useReport('default', getGraphData);
 
+  useEffect(() => {
+    if (selectedCategories === null && categories.list.length !== 0) {
+      setSelectedCategories(categories.list);
+    }
+  }, [categories, selectedCategories]);
+
   useEffect(() => {
     async function run() {
       const trans = await send('get-earliest-transaction');
@@ -666,6 +676,25 @@ export default function Custom() {
               options={allMonths.map(({ name, pretty }) => [name, pretty])}
             />
           </View>
+          <View
+            style={{
+              height: 1,
+              backgroundColor: theme.altPillBorder,
+              marginTop: 10,
+              flexShrink: 0,
+            }}
+          />
+          <View
+            style={{
+              marginTop: 10,
+            }}
+          >
+            <CategorySelector
+              categoryGroups={categories.grouped}
+              selectedCategories={selectedCategories}
+              setSelectedCategories={setSelectedCategories}
+            />
+          </View>
         </View>
         <View
           style={{
diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
index be6ef57517e..08e30533104 100644
--- a/packages/desktop-client/src/components/reports/Overview.js
+++ b/packages/desktop-client/src/components/reports/Overview.js
@@ -336,7 +336,7 @@ function CustomReportsCard() {
   const split = 1;
 
   const getGraphData = useMemo(() => {
-    return defaultSpreadsheet(start, end, split, categories);
+    return defaultSpreadsheet(start, end, split, 'totalDebts', categories);
   }, [start, end, categories]);
   const data = useReport('default', getGraphData);
 
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
index 929dd729d91..7ae6ea9166c 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
+++ b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
@@ -13,12 +13,22 @@ export default function createSpreadsheet(
   split,
   typeItem,
   categories,
+  selectedCategories,
   payees,
   accounts,
   conditions = [],
   conditionsOp,
   hidden,
 ) {
+  let categoryFilter = (categories.list || []).filter(
+    category =>
+      !category.hidden &&
+      selectedCategories &&
+      selectedCategories.some(
+        selectedCategory => selectedCategory.id === category.id,
+      ),
+  );
+
   let splitItem;
   let splitList;
   let splitLabel;
@@ -87,6 +97,13 @@ export default function createSpreadsheet(
                   ],
                 },
               )
+              .filter(
+                selectedCategories && {
+                  $or: categoryFilter.map(category => ({
+                    category: category.id,
+                  })),
+                },
+              )
               .filter({
                 [splitLabel]: splt.id,
                 $and: [
@@ -115,6 +132,13 @@ export default function createSpreadsheet(
                   ],
                 },
               )
+              .filter(
+                selectedCategories && {
+                  $or: categoryFilter.map(category => ({
+                    category: category.id,
+                  })),
+                },
+              )
               .filter({
                 [splitLabel]: splt.id,
                 $and: [