From 37b5bd6e032450ea123caa75360edae4490af01f Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Fri, 15 Dec 2023 23:05:06 +0000
Subject: [PATCH] Custom Reports date paused (#2080)

* work

* fixes

* updates

* update table layout

* revert changes

* notes

* updae names and improve flow
---
 .../components/reports/CategorySelector.tsx   |  16 +-
 .../src/components/reports/ReportSidebar.js   | 144 +++++++++++-------
 .../reports/reports/CustomReport.js           |   4 +
 .../spreadsheets/default-spreadsheet.tsx      |   4 +-
 .../spreadsheets/grouped-spreadsheet.ts       |   4 +-
 upcoming-release-notes/2080.md                |   6 +
 6 files changed, 112 insertions(+), 66 deletions(-)
 create mode 100644 upcoming-release-notes/2080.md

diff --git a/packages/desktop-client/src/components/reports/CategorySelector.tsx b/packages/desktop-client/src/components/reports/CategorySelector.tsx
index 6c75ba288a5..d83825eedb4 100644
--- a/packages/desktop-client/src/components/reports/CategorySelector.tsx
+++ b/packages/desktop-client/src/components/reports/CategorySelector.tsx
@@ -50,8 +50,19 @@ export default function CategorySelector({
 
   return (
     <View>
-      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-        <Button type="bare" onClick={() => setUncheckedHidden(state => !state)}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: 5,
+          flexShrink: 0,
+        }}
+      >
+        <Button
+          type="bare"
+          onClick={() => setUncheckedHidden(state => !state)}
+          style={{ padding: 8 }}
+        >
           <View>
             {uncheckedHidden ? (
               <View style={{ flexDirection: 'row', alignItems: 'center' }}>
@@ -97,7 +108,6 @@ export default function CategorySelector({
           marginLeft: 0,
           paddingLeft: 0,
           paddingRight: 10,
-          height: 320,
           flexGrow: 1,
           overflowY: 'auto',
         }}
diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.js b/packages/desktop-client/src/components/reports/ReportSidebar.js
index 2c182b1abb9..347f3184f61 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.js
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.js
@@ -38,6 +38,8 @@ export function ReportSidebar({
   setBalanceType,
   mode,
   setMode,
+  isDateStatic,
+  setIsDateStatic,
   showEmpty,
   setShowEmpty,
   showOffBudgetHidden,
@@ -49,6 +51,7 @@ export function ReportSidebar({
   setSelectedCategories,
 }) {
   const onSelectRange = cond => {
+    setDateRange(cond);
     switch (cond) {
       case 'All time':
         onChangeDates(...getFullRange(allMonths));
@@ -325,67 +328,90 @@ export function ReportSidebar({
           <Text>
             <strong>Date filters</strong>
           </Text>
-        </View>
-        <View
-          style={{
-            flexDirection: 'row',
-            padding: 5,
-            alignItems: 'center',
-          }}
-        >
-          <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
-            Range:
-          </Text>
-          <Select
-            value={dateRange}
-            onChange={e => {
-              setDateRange(e);
-              onSelectRange(e);
+          <View style={{ flex: 1 }} />
+          <ModeButton
+            selected={!isDateStatic}
+            onSelect={() => {
+              setIsDateStatic(false);
+              onSelectRange(dateRange);
             }}
-            options={ReportOptions.dateRange.map(option => [
-              option.description,
-              option.description,
-            ])}
-            line={dateRangeLine}
-          />
-        </View>
-        <View
-          style={{
-            flexDirection: 'row',
-            padding: 5,
-            alignItems: 'center',
-          }}
-        >
-          <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
-            From:
-          </Text>
-          <Select
-            onChange={newValue =>
-              onChangeDates(...validateStart(allMonths, newValue, endDate))
-            }
-            value={startDate}
-            defaultLabel={monthUtils.format(startDate, 'MMMM, yyyy')}
-            options={allMonths.map(({ name, pretty }) => [name, pretty])}
-          />
-        </View>
-        <View
-          style={{
-            flexDirection: 'row',
-            padding: 5,
-            alignItems: 'center',
-          }}
-        >
-          <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
-            To:
-          </Text>
-          <Select
-            onChange={newValue =>
-              onChangeDates(...validateEnd(allMonths, startDate, newValue))
-            }
-            value={endDate}
-            options={allMonths.map(({ name, pretty }) => [name, pretty])}
-          />
+          >
+            Live
+          </ModeButton>
+          <ModeButton
+            selected={isDateStatic}
+            onSelect={() => {
+              setIsDateStatic(true);
+              onChangeDates(startDate, endDate);
+            }}
+          >
+            Static
+          </ModeButton>
         </View>
+        {!isDateStatic ? (
+          <View
+            style={{
+              flexDirection: 'row',
+              padding: 5,
+              alignItems: 'center',
+            }}
+          >
+            <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
+              Range:
+            </Text>
+            <Select
+              value={dateRange}
+              onChange={e => {
+                onSelectRange(e);
+              }}
+              options={ReportOptions.dateRange.map(option => [
+                option.description,
+                option.description,
+              ])}
+              line={dateRangeLine}
+            />
+          </View>
+        ) : (
+          <>
+            <View
+              style={{
+                flexDirection: 'row',
+                padding: 5,
+                alignItems: 'center',
+              }}
+            >
+              <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
+                From:
+              </Text>
+              <Select
+                onChange={newValue =>
+                  onChangeDates(...validateStart(allMonths, newValue, endDate))
+                }
+                value={startDate}
+                defaultLabel={monthUtils.format(startDate, 'MMMM, yyyy')}
+                options={allMonths.map(({ name, pretty }) => [name, pretty])}
+              />
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                padding: 5,
+                alignItems: 'center',
+              }}
+            >
+              <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
+                To:
+              </Text>
+              <Select
+                onChange={newValue =>
+                  onChangeDates(...validateEnd(allMonths, startDate, newValue))
+                }
+                value={endDate}
+                options={allMonths.map(({ name, pretty }) => [name, pretty])}
+              />
+            </View>
+          </>
+        )}
         <View
           style={{
             height: 1,
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js
index 12b7f07052a..01103a48532 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.js
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js
@@ -51,6 +51,7 @@ export default function CustomReport() {
   const [endDate, setEndDate] = useState(monthUtils.currentMonth());
 
   const [mode, setMode] = useState('total');
+  const [isDateStatic, setIsDateStatic] = useState(false);
   const [groupBy, setGroupBy] = useState('Category');
   const [balanceType, setBalanceType] = useState('Payment');
   const [showEmpty, setShowEmpty] = useState(false);
@@ -126,6 +127,7 @@ export default function CustomReport() {
     selectedCategories,
     filters,
     conditionsOp,
+    showEmpty,
     showOffBudgetHidden,
     showUncategorized,
   ]);
@@ -210,6 +212,8 @@ export default function CustomReport() {
           setBalanceType={setBalanceType}
           mode={mode}
           setMode={setMode}
+          isDateStatic={isDateStatic}
+          setIsDateStatic={setIsDateStatic}
           showEmpty={showEmpty}
           setShowEmpty={setShowEmpty}
           showOffBudgetHidden={showOffBudgetHidden}
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 4d17270d4c5..23fcf52c931 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
+++ b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
@@ -170,9 +170,7 @@ export default function createSpreadsheet({
 
     setData({
       data: calcData.filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)),
-      monthData: monthData.filter(i =>
-        !showEmpty ? i[balanceTypeOp] !== 0 : true,
-      ),
+      monthData,
       startDate,
       endDate,
       totalDebts: integerToAmount(totalDebts),
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
index c0199b5a79c..49e7bd82e53 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
@@ -134,7 +134,9 @@ function createGroupedSpreadsheet({
           totalDebts: integerToAmount(totalDebts),
           totalTotals: integerToAmount(totalAssets + totalDebts),
           monthData,
-          categories: stackedCategories,
+          categories: stackedCategories.filter(i =>
+            !showEmpty ? i[balanceTypeOp] !== 0 : true,
+          ),
         };
       },
       [startDate, endDate],
diff --git a/upcoming-release-notes/2080.md b/upcoming-release-notes/2080.md
new file mode 100644
index 00000000000..c43aa923abc
--- /dev/null
+++ b/upcoming-release-notes/2080.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Add live/static choice for date filters.