From 42faccf1cb65786a3b6b1e76db7b12a120a14ff5 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Thu, 7 Dec 2023 11:06:07 +0000
Subject: [PATCH 1/7] work

---
 .../src/components/common/Block.tsx           |   3 +
 .../components/reports/CategorySelector.tsx   |  17 +-
 .../src/components/reports/ChooseGraph.tsx    | 106 ++++++--
 .../src/components/reports/ColumnPrimary.tsx  |  67 +++++
 .../components/reports/ColumnScrollbar.tsx    |  56 ++++
 .../src/components/reports/ModeButton.tsx     |  39 +++
 .../src/components/reports/ReportLegend.tsx   |  71 +++++
 .../src/components/reports/ReportSidebar.js   | 213 +++++++--------
 .../src/components/reports/ReportSummary.js   | 197 --------------
 .../src/components/reports/ReportSummary.tsx  | 140 ++++++++++
 .../src/components/reports/ReportTable.tsx    | 131 +++++++++-
 .../components/reports/ReportTableHeader.tsx  |  52 ++--
 .../components/reports/ReportTableInner.tsx   | 108 ++++++++
 .../components/reports/ReportTableList.tsx    | 243 ------------------
 .../src/components/reports/ReportTableRow.tsx | 123 +++++++++
 .../components/reports/ReportTableTotals.tsx  |  81 ++++--
 .../src/components/reports/TableRowIndex.tsx  |  41 +++
 .../src/components/reports/entities.d.ts      |  41 +++
 .../components/reports/graphs/DonutGraph.tsx  |   9 +-
 .../reports/reports/CustomReport.js           | 102 ++++----
 20 files changed, 1164 insertions(+), 676 deletions(-)
 create mode 100644 packages/desktop-client/src/components/reports/ColumnPrimary.tsx
 create mode 100644 packages/desktop-client/src/components/reports/ColumnScrollbar.tsx
 create mode 100644 packages/desktop-client/src/components/reports/ModeButton.tsx
 create mode 100644 packages/desktop-client/src/components/reports/ReportLegend.tsx
 delete mode 100644 packages/desktop-client/src/components/reports/ReportSummary.js
 create mode 100644 packages/desktop-client/src/components/reports/ReportSummary.tsx
 create mode 100644 packages/desktop-client/src/components/reports/ReportTableInner.tsx
 delete mode 100644 packages/desktop-client/src/components/reports/ReportTableList.tsx
 create mode 100644 packages/desktop-client/src/components/reports/ReportTableRow.tsx
 create mode 100644 packages/desktop-client/src/components/reports/TableRowIndex.tsx
 create mode 100644 packages/desktop-client/src/components/reports/entities.d.ts

diff --git a/packages/desktop-client/src/components/common/Block.tsx b/packages/desktop-client/src/components/common/Block.tsx
index 4a4db9b9686..38b99615043 100644
--- a/packages/desktop-client/src/components/common/Block.tsx
+++ b/packages/desktop-client/src/components/common/Block.tsx
@@ -2,8 +2,11 @@ import { type HTMLProps, type Ref } from 'react';
 
 import { css } from 'glamor';
 
+import { type CSSProperties } from '../../style';
+
 type BlockProps = HTMLProps<HTMLDivElement> & {
   innerRef?: Ref<HTMLDivElement>;
+  style?: CSSProperties;
 };
 
 export default function Block(props: BlockProps) {
diff --git a/packages/desktop-client/src/components/reports/CategorySelector.tsx b/packages/desktop-client/src/components/reports/CategorySelector.tsx
index 6c75ba288a5..c098715798b 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',
         }}
@@ -215,6 +225,7 @@ export default function CategorySelector({
             );
           })}
       </ul>
+      <View />
     </View>
   );
 }
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 4dca723153a..a3f55184973 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 
 import View from '../common/View';
 
+import { type DataEntity, type Month } from './entities';
 import AreaGraph from './graphs/AreaGraph';
 import BarGraph from './graphs/BarGraph';
 import BarLineGraph from './graphs/BarLineGraph';
@@ -11,20 +12,49 @@ import StackedBarGraph from './graphs/StackedBarGraph';
 import { ReportOptions } from './ReportOptions';
 import ReportTable from './ReportTable';
 import ReportTableHeader from './ReportTableHeader';
-import ReportTableList from './ReportTableList';
 import ReportTableTotals from './ReportTableTotals';
 
-export function ChooseGraph({
+type ChooseGraphProps = {
+  data: DataEntity;
+  mode: string;
+  graphType: string;
+  balanceType: string;
+  groupBy: string;
+  showEmpty: boolean;
+  scrollWidth: number;
+  setScrollWidth: (value: number) => void;
+  months: Month[];
+};
+
+function ChooseGraph({
   data,
   mode,
   graphType,
   balanceType,
   groupBy,
-  empty,
+  showEmpty,
   scrollWidth,
   setScrollWidth,
   months,
-}) {
+}: ChooseGraphProps) {
+  const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
+  const groupByData =
+    groupBy === 'Category'
+      ? 'groupedData'
+      : ['Month', 'Year'].includes(groupBy)
+      ? 'monthData'
+      : 'data';
+
+  const filteredData =
+    data[groupByData] &&
+    data[groupByData].filter(i =>
+      !showEmpty
+        ? balanceTypeOp === 'totalTotals'
+          ? i.totalAssets !== 0 || i.totalDebts !== 0 || i.totalTotals !== 0
+          : i[balanceTypeOp] !== 0
+        : true,
+    );
+
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
   };
@@ -32,10 +62,31 @@ export function ChooseGraph({
   const headerScrollRef = useRef<HTMLDivElement>(null);
   const listScrollRef = useRef<HTMLDivElement>(null);
   const totalScrollRef = useRef<HTMLDivElement>(null);
+  const indexScrollRef = useRef<HTMLDivElement>(null);
+  const scrollScrollRef = useRef<HTMLDivElement>(null);
 
-  const handleScrollTotals = scroll => {
-    headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-    listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+  const handleScroll = scroll => {
+    if (scroll.target.id === 'total') {
+      headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+      listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+    }
+    if (scroll.target.id === 'header') {
+      totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+      listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+    }
+    if (scroll.target.id === 'list') {
+      if (headerScrollRef.current.scrollLeft !== scroll.target.scrollLeft) {
+        headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+        totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+      } else {
+        indexScrollRef.current.scrollTop = scroll.target.scrollTop;
+        scrollScrollRef.current.scrollTop = scroll.target.scrollTop;
+      }
+    }
+    if (scroll.target.id === 'index') {
+      listScrollRef.current.scrollTop = scroll.target.scrollTop;
+      scrollScrollRef.current.scrollTop = scroll.target.scrollTop;
+    }
   };
 
   if (graphType === 'AreaGraph') {
@@ -43,7 +94,7 @@ export function ChooseGraph({
       <AreaGraph
         style={{ flexGrow: 1 }}
         data={data}
-        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+        balanceTypeOp={balanceTypeOp}
       />
     );
   }
@@ -53,13 +104,13 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        empty={empty}
-        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+        showEmpty={showEmpty}
+        balanceTypeOp={balanceTypeOp}
       />
     );
   }
   if (graphType === 'BarLineGraph') {
-    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />;
+    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data} />;
   }
   if (graphType === 'DonutGraph') {
     return (
@@ -67,13 +118,13 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        empty={empty}
-        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+        showEmpty={showEmpty}
+        balanceTypeOp={balanceTypeOp}
       />
     );
   }
   if (graphType === 'LineGraph') {
-    return <LineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />;
+    return <LineGraph style={{ flexGrow: 1 }} graphData={data} />;
   }
   if (graphType === 'StackedBarGraph') {
     return <StackedBarGraph style={{ flexGrow: 1 }} data={data} />;
@@ -83,6 +134,7 @@ export function ChooseGraph({
       <View>
         <ReportTableHeader
           headerScrollRef={headerScrollRef}
+          handleScroll={handleScroll}
           interval={mode === 'time' && months}
           scrollWidth={scrollWidth}
           groupBy={groupBy}
@@ -91,26 +143,28 @@ export function ChooseGraph({
         <ReportTable
           saveScrollWidth={saveScrollWidth}
           listScrollRef={listScrollRef}
-        >
-          <ReportTableList
-            data={data}
-            empty={empty}
-            monthsCount={months.length}
-            balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
-            mode={mode}
-            groupBy={groupBy}
-          />
-        </ReportTable>
+          indexScrollRef={indexScrollRef}
+          scrollScrollRef={scrollScrollRef}
+          handleScroll={handleScroll}
+          balanceTypeOp={balanceTypeOp}
+          groupBy={groupBy}
+          data={filteredData}
+          showEmpty={showEmpty}
+          mode={mode}
+          monthsCount={months.length}
+        />
         <ReportTableTotals
           totalScrollRef={totalScrollRef}
-          handleScrollTotals={handleScrollTotals}
+          handleScroll={handleScroll}
           scrollWidth={scrollWidth}
           data={data}
           mode={mode}
-          balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+          balanceTypeOp={balanceTypeOp}
           monthsCount={months.length}
         />
       </View>
     );
   }
 }
+
+export default ChooseGraph;
diff --git a/packages/desktop-client/src/components/reports/ColumnPrimary.tsx b/packages/desktop-client/src/components/reports/ColumnPrimary.tsx
new file mode 100644
index 00000000000..5d79a3aed11
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ColumnPrimary.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { theme } from '../../style';
+import View from '../common/View';
+import { Row } from '../table';
+
+import { type GroupedEntity } from './entities';
+import TableRowIndex from './TableRowIndex';
+
+type ColumnPrimaryProps = {
+  item: GroupedEntity;
+  balanceTypeOp?: string | null;
+  groupByItem: string;
+  showEmpty: boolean;
+};
+
+function ColumnPrimary({
+  item,
+  balanceTypeOp,
+  groupByItem,
+  showEmpty,
+}: ColumnPrimaryProps) {
+  return (
+    <>
+      <TableRowIndex
+        key={item.id}
+        item={item}
+        groupByItem={groupByItem}
+        style={
+          item.categories && {
+            color: theme.tableRowHeaderText,
+            backgroundColor: theme.tableRowHeaderBackground,
+            fontWeight: 600,
+          }
+        }
+      />
+      {item.categories && (
+        <>
+          <View>
+            {item.categories
+              .filter(i =>
+                !showEmpty
+                  ? balanceTypeOp === 'totalTotals'
+                    ? i.totalAssets !== 0 ||
+                      i.totalDebts !== 0 ||
+                      i.totalTotals !== 0
+                    : i[balanceTypeOp] !== 0
+                  : true,
+              )
+              .map(cat => {
+                return (
+                  <TableRowIndex
+                    key={cat.id}
+                    item={cat}
+                    groupByItem={groupByItem}
+                  />
+                );
+              })}
+          </View>
+          <Row height={20} />
+        </>
+      )}
+    </>
+  );
+}
+
+export default ColumnPrimary;
diff --git a/packages/desktop-client/src/components/reports/ColumnScrollbar.tsx b/packages/desktop-client/src/components/reports/ColumnScrollbar.tsx
new file mode 100644
index 00000000000..b5b867b3d18
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ColumnScrollbar.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { theme } from '../../style';
+import View from '../common/View';
+import { Row } from '../table';
+
+import { type GroupedEntity } from './entities';
+import TableRowIndex from './TableRowIndex';
+
+type ColumnScrollbarProps = {
+  item: GroupedEntity;
+  balanceTypeOp: string;
+  showEmpty: boolean;
+};
+
+function ColumnScrollbar({
+  item,
+  balanceTypeOp,
+  showEmpty,
+}: ColumnScrollbarProps) {
+  return (
+    <>
+      <TableRowIndex
+        style={
+          item.categories && {
+            color: theme.tableRowHeaderText,
+            backgroundColor: theme.tableRowHeaderBackground,
+            fontWeight: 600,
+          }
+        }
+      />
+      {item.categories && (
+        <>
+          <View>
+            {item.categories
+              .filter(i =>
+                !showEmpty
+                  ? balanceTypeOp === 'totalTotals'
+                    ? i.totalAssets !== 0 ||
+                      i.totalDebts !== 0 ||
+                      i.totalTotals !== 0
+                    : i[balanceTypeOp] !== 0
+                  : true,
+              )
+              .map(cat => {
+                return <TableRowIndex key={cat.id} />;
+              })}
+          </View>
+          <Row height={20} />
+        </>
+      )}
+    </>
+  );
+}
+
+export default ColumnScrollbar;
diff --git a/packages/desktop-client/src/components/reports/ModeButton.tsx b/packages/desktop-client/src/components/reports/ModeButton.tsx
new file mode 100644
index 00000000000..e0f216d84fa
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ModeButton.tsx
@@ -0,0 +1,39 @@
+import React, { type MouseEventHandler, type ReactNode } from 'react';
+
+import { type CSSProperties, theme } from '../../style';
+import Button from '../common/Button';
+
+type ModeButtonProps = {
+  selected: boolean;
+  children: ReactNode;
+  style: CSSProperties;
+  onSelect: MouseEventHandler<HTMLButtonElement>;
+};
+
+function ModeButton({ selected, children, style, onSelect }: ModeButtonProps) {
+  return (
+    <Button
+      type="bare"
+      style={{
+        padding: '5px 10px',
+        backgroundColor: theme.menuBackground,
+        marginRight: 5,
+        fontSize: 'inherit',
+        ...(selected && {
+          backgroundColor: theme.buttonPrimaryBackground,
+          color: theme.buttonPrimaryText,
+          ':hover': {
+            backgroundColor: theme.buttonPrimaryBackgroundHover,
+            color: theme.buttonPrimaryTextHover,
+          },
+        }),
+        ...style,
+      }}
+      onClick={onSelect}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export default ModeButton;
diff --git a/packages/desktop-client/src/components/reports/ReportLegend.tsx b/packages/desktop-client/src/components/reports/ReportLegend.tsx
new file mode 100644
index 00000000000..7db528cfe63
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportLegend.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { theme, styles } from '../../style';
+import Text from '../common/Text';
+import View from '../common/View';
+
+type ReportLegendProps = {
+  data?;
+  legend;
+  groupBy: string;
+};
+
+function ReportLegend({ data, legend, groupBy }: ReportLegendProps) {
+  return (
+    <View
+      style={{
+        backgroundColor: theme.pageBackground,
+        alignItems: 'center',
+        flex: 1,
+        overflowY: 'auto',
+      }}
+    >
+      <Text
+        style={{
+          ...styles.largeText,
+          alignItems: 'center',
+          marginBottom: 2,
+          fontWeight: 400,
+          paddingTop: 10,
+        }}
+      >
+        {groupBy}
+      </Text>
+      <View>
+        {legend.map(item => {
+          return (
+            <View
+              key={item.name}
+              style={{
+                padding: 10,
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+            >
+              <View
+                style={{
+                  marginRight: 5,
+                  borderRadius: 1000,
+                  width: 14,
+                  height: 14,
+                  backgroundColor: item.color,
+                }}
+              />
+              <Text
+                style={{
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis',
+                  flexShrink: 0,
+                }}
+              >
+                {item.name}
+              </Text>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+export default ReportLegend;
diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.js b/packages/desktop-client/src/components/reports/ReportSidebar.js
index 5f22d0a13c7..65f147b9f4c 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.js
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.js
@@ -3,7 +3,6 @@ import React from 'react';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import { theme } from '../../style';
-import Button from '../common/Button';
 import Select from '../common/Select';
 import Text from '../common/Text';
 import View from '../common/View';
@@ -17,37 +16,12 @@ import {
   getFullRange,
   validateRange,
 } from './Header';
+import ModeButton from './ModeButton';
 import { ReportOptions } from './ReportOptions';
 
-function ModeButton({ selected, children, style, onSelect }) {
-  return (
-    <Button
-      type="bare"
-      style={{
-        padding: '5px 10px',
-        backgroundColor: theme.menuBackground,
-        marginRight: 5,
-        fontSize: 'inherit',
-        ...(selected && {
-          backgroundColor: theme.buttonPrimaryBackground,
-          color: theme.buttonPrimaryText,
-          ':hover': {
-            backgroundColor: theme.buttonPrimaryBackgroundHover,
-            color: theme.buttonPrimaryTextHover,
-          },
-        }),
-        ...style,
-      }}
-      onClick={onSelect}
-    >
-      {children}
-    </Button>
-  );
-}
-
 export function ReportSidebar({
-  start,
-  end,
+  startDate,
+  endDate,
   onChangeDates,
   dateRange,
   setDateRange,
@@ -64,12 +38,14 @@ export function ReportSidebar({
   setBalanceType,
   mode,
   setMode,
-  empty,
-  setEmpty,
-  hidden,
-  setHidden,
-  uncat,
-  setUncat,
+  datePaused,
+  setDatePaused,
+  showEmpty,
+  setShowEmpty,
+  showOffBudgetHidden,
+  setShowOffBudgetHidden,
+  showUncategorized,
+  setShowUncategorized,
   categories,
   selectedCategories,
   setSelectedCategories,
@@ -106,6 +82,15 @@ export function ReportSidebar({
     }
   };
 
+  const onChangeDatePaused = cond => {
+    setDatePaused(cond);
+    if (cond === 'live') {
+      onSelectRange(dateRange);
+    } else {
+      onChangeDates(startDate, endDate);
+    }
+  };
+
   const onChangeMode = cond => {
     setMode(cond);
     if (cond === 'time') {
@@ -114,7 +99,7 @@ export function ReportSidebar({
       } else {
         setTypeDisabled(['Net']);
         if (['Net'].includes(balanceType)) {
-          setBalanceType('Expense');
+          setBalanceType('Payment');
         }
       }
       if (graphType === 'BarGraph') {
@@ -144,7 +129,7 @@ export function ReportSidebar({
       }
     }
     if (['Net'].includes(balanceType) && graphType !== 'TableGraph') {
-      setBalanceType('Expense');
+      setBalanceType('Payment');
     }
   };
 
@@ -274,9 +259,9 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-empty-columns"
-            checked={empty}
-            value={empty}
-            onChange={() => setEmpty(!empty)}
+            checked={showEmpty}
+            value={showEmpty}
+            onChange={() => setShowEmpty(!showEmpty)}
           />
           <label
             htmlFor="show-empty-columns"
@@ -297,9 +282,9 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-hidden-columns"
-            checked={hidden}
-            value={hidden}
-            onChange={() => setHidden(!hidden)}
+            checked={showOffBudgetHidden}
+            value={showOffBudgetHidden}
+            onChange={() => setShowOffBudgetHidden(!showOffBudgetHidden)}
           />
           <label
             htmlFor="show-hidden-columns"
@@ -320,9 +305,9 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-uncategorized"
-            checked={uncat}
-            value={uncat}
-            onChange={() => setUncat(!uncat)}
+            checked={showUncategorized}
+            value={showUncategorized}
+            onChange={() => setShowUncategorized(!showUncategorized)}
           />
           <label
             htmlFor="show-uncategorized"
@@ -351,67 +336,85 @@ export function ReportSidebar({
           <Text>
             <strong>Date filters</strong>
           </Text>
+          <View style={{ flex: 1 }} />
+          <ModeButton
+            selected={datePaused === 'live'}
+            onSelect={() => onChangeDatePaused('live')}
+          >
+            Live
+          </ModeButton>
+          <ModeButton
+            selected={datePaused === 'static'}
+            onSelect={() => onChangeDatePaused('static')}
+          >
+            Static
+          </ModeButton>
         </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);
+        {datePaused === 'live' ? (
+          <View
+            style={{
+              flexDirection: 'row',
+              padding: 5,
+              alignItems: 'center',
             }}
-            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, end))
-            }
-            value={start}
-            defaultLabel={monthUtils.format(start, '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, start, newValue))
-            }
-            value={end}
-            options={allMonths.map(({ name, pretty }) => [name, pretty])}
-          />
-        </View>
+          >
+            <Text style={{ width: 40, textAlign: 'right', marginRight: 5 }}>
+              Range:
+            </Text>
+            <Select
+              value={dateRange}
+              onChange={e => {
+                setDateRange(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/ReportSummary.js b/packages/desktop-client/src/components/reports/ReportSummary.js
deleted file mode 100644
index cfe2e5b7090..00000000000
--- a/packages/desktop-client/src/components/reports/ReportSummary.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import React from 'react';
-
-import * as monthUtils from 'loot-core/src/shared/months';
-import {
-  amountToCurrency,
-  integerToCurrency,
-  amountToInteger,
-} from 'loot-core/src/shared/util';
-
-import { theme, styles } from '../../style';
-import Text from '../common/Text';
-import View from '../common/View';
-import PrivacyFilter from '../PrivacyFilter';
-
-export function ReportSummary({
-  start,
-  end,
-  data,
-  balanceTypeOp,
-  monthsCount,
-}) {
-  const net = data.totalDebts > data.totalAssets ? 'EXPENSE' : 'INCOME';
-  const average = amountToInteger(data[balanceTypeOp]) / monthsCount;
-  return (
-    <View
-      style={{
-        flexDirection: 'column',
-        marginBottom: 10,
-      }}
-    >
-      <View
-        style={{
-          backgroundColor: theme.pageBackground,
-          padding: 15,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Text
-          style={[
-            styles.largeText,
-            {
-              alignItems: 'center',
-              marginBottom: 2,
-              fontWeight: 600,
-            },
-          ]}
-        >
-          {monthUtils.format(start, 'MMM yyyy')} -{' '}
-          {monthUtils.format(end, 'MMM yyyy')}
-        </Text>
-      </View>
-      <View
-        style={{
-          backgroundColor: theme.pageBackground,
-          padding: 15,
-          justifyContent: 'center',
-          alignItems: 'center',
-          marginTop: 10,
-        }}
-      >
-        <Text
-          style={[
-            styles.mediumText,
-            {
-              alignItems: 'center',
-              marginBottom: 2,
-              fontWeight: 400,
-            },
-          ]}
-        >
-          {balanceTypeOp === 'totalDebts'
-            ? 'TOTAL SPENDING'
-            : balanceTypeOp === 'totalAssets'
-            ? 'TOTAL INCOME'
-            : 'NET ' + net}
-        </Text>
-        <Text
-          style={[
-            styles.veryLargeText,
-            {
-              alignItems: 'center',
-              marginBottom: 2,
-              fontWeight: 800,
-            },
-          ]}
-        >
-          <PrivacyFilter blurIntensity={7}>
-            {amountToCurrency(data[balanceTypeOp])}
-          </PrivacyFilter>
-        </Text>
-        <Text style={{ fontWeight: 600 }}>For this time period</Text>
-      </View>
-      <View
-        style={{
-          backgroundColor: theme.pageBackground,
-          padding: 15,
-          justifyContent: 'center',
-          alignItems: 'center',
-          marginTop: 10,
-        }}
-      >
-        <Text
-          style={[
-            styles.mediumText,
-            {
-              alignItems: 'center',
-              marginBottom: 2,
-              fontWeight: 400,
-            },
-          ]}
-        >
-          {balanceTypeOp === 'totalDebts'
-            ? 'AVERAGE SPENDING'
-            : balanceTypeOp === 'totalAssets'
-            ? 'AVERAGE INCOME'
-            : 'AVERAGE NET'}
-        </Text>
-        <Text
-          style={[
-            styles.veryLargeText,
-            {
-              alignItems: 'center',
-              marginBottom: 2,
-              fontWeight: 800,
-            },
-          ]}
-        >
-          <PrivacyFilter blurIntensity={7}>
-            {integerToCurrency(Math.round(average))}
-          </PrivacyFilter>
-        </Text>
-        <Text style={{ fontWeight: 600 }}>Per month</Text>
-      </View>
-    </View>
-  );
-}
-
-export function ReportLegend({ data, legend, groupBy }) {
-  return (
-    <View
-      style={{
-        backgroundColor: theme.pageBackground,
-        alignItems: 'center',
-        flex: 1,
-        overflowY: 'auto',
-      }}
-    >
-      <Text
-        style={[
-          styles.largeText,
-          {
-            alignItems: 'center',
-            marginBottom: 2,
-            fontWeight: 400,
-            paddingTop: 10,
-          },
-        ]}
-      >
-        {groupBy}
-      </Text>
-      <View>
-        {legend.map(item => {
-          return (
-            <View
-              key={item.name}
-              style={{
-                padding: 10,
-                flexDirection: 'row',
-                alignItems: 'center',
-              }}
-            >
-              <View
-                style={{
-                  marginRight: 5,
-                  borderRadius: 1000,
-                  width: 14,
-                  height: 14,
-                  backgroundColor: item.color,
-                }}
-              />
-              <Text
-                style={{
-                  whiteSpace: 'nowrap',
-                  textOverflow: 'ellipsis',
-                  flexShrink: 0,
-                }}
-              >
-                {item.name}
-              </Text>
-            </View>
-          );
-        })}
-      </View>
-    </View>
-  );
-}
diff --git a/packages/desktop-client/src/components/reports/ReportSummary.tsx b/packages/desktop-client/src/components/reports/ReportSummary.tsx
new file mode 100644
index 00000000000..f8680f2deb9
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportSummary.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+
+import * as monthUtils from 'loot-core/src/shared/months';
+import {
+  amountToCurrency,
+  integerToCurrency,
+  amountToInteger,
+} from 'loot-core/src/shared/util';
+
+import { theme, styles } from '../../style';
+import Text from '../common/Text';
+import View from '../common/View';
+import PrivacyFilter from '../PrivacyFilter';
+
+type ReportSummaryProps = {
+  startDate: string;
+  endDate: string;
+  data;
+  balanceTypeOp: string;
+  monthsCount: number;
+};
+
+function ReportSummary({
+  startDate,
+  endDate,
+  data,
+  balanceTypeOp,
+  monthsCount,
+}: ReportSummaryProps) {
+  const net =
+    Math.abs(data.totalDebts) > Math.abs(data.totalAssets)
+      ? 'PAYMENT'
+      : 'DEPOSIT';
+  const average = amountToInteger(data[balanceTypeOp]) / monthsCount;
+  return (
+    <View
+      style={{
+        flexDirection: 'column',
+        marginBottom: 10,
+      }}
+    >
+      <View
+        style={{
+          backgroundColor: theme.pageBackground,
+          padding: 15,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text
+          style={{
+            ...styles.largeText,
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 600,
+          }}
+        >
+          {monthUtils.format(startDate, 'MMM yyyy')} -{' '}
+          {monthUtils.format(endDate, 'MMM yyyy')}
+        </Text>
+      </View>
+      <View
+        style={{
+          backgroundColor: theme.pageBackground,
+          padding: 15,
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginTop: 10,
+        }}
+      >
+        <Text
+          style={{
+            ...styles.mediumText,
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 400,
+          }}
+        >
+          {balanceTypeOp === 'totalDebts'
+            ? 'TOTAL SPENDING'
+            : balanceTypeOp === 'totalAssets'
+            ? 'TOTAL DEPOSITS'
+            : 'NET ' + net}
+        </Text>
+        <Text
+          style={{
+            ...styles.veryLargeText,
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 800,
+          }}
+        >
+          <PrivacyFilter blurIntensity={7}>
+            {amountToCurrency(data[balanceTypeOp])}
+          </PrivacyFilter>
+        </Text>
+        <Text style={{ fontWeight: 600 }}>For this time period</Text>
+      </View>
+      <View
+        style={{
+          backgroundColor: theme.pageBackground,
+          padding: 15,
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginTop: 10,
+        }}
+      >
+        <Text
+          style={{
+            ...styles.mediumText,
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 400,
+          }}
+        >
+          {balanceTypeOp === 'totalDebts'
+            ? 'AVERAGE SPENDING'
+            : balanceTypeOp === 'totalAssets'
+            ? 'AVERAGE DEPOSIT'
+            : 'AVERAGE NET'}
+        </Text>
+        <Text
+          style={{
+            ...styles.veryLargeText,
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 800,
+          }}
+        >
+          <PrivacyFilter blurIntensity={7}>
+            {integerToCurrency(Math.round(average))}
+          </PrivacyFilter>
+        </Text>
+        <Text style={{ fontWeight: 600 }}>Per month</Text>
+      </View>
+    </View>
+  );
+}
+
+export default ReportSummary;
diff --git a/packages/desktop-client/src/components/reports/ReportTable.tsx b/packages/desktop-client/src/components/reports/ReportTable.tsx
index a16f47c4cd9..725b82383db 100644
--- a/packages/desktop-client/src/components/reports/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTable.tsx
@@ -1,30 +1,76 @@
-import React, { useLayoutEffect, useRef, type ReactNode } from 'react';
+import React, {
+  useCallback,
+  useLayoutEffect,
+  type UIEventHandler,
+} from 'react';
 import { type RefProp } from 'react-spring';
 
 import { type CSSProperties } from '../../style';
+import Block from '../common/Block';
 import View from '../common/View';
 
+import ColumnPrimary from './ColumnPrimary';
+import ColumnScrollbar from './ColumnScrollbar';
+import { type GroupedEntity } from './entities';
+import ReportTableInner from './ReportTableInner';
+import ReportTableRow from './ReportTableRow';
+
 type ReportTableProps = {
-  saveScrollWidth?: (value: number) => void;
-  listScrollRef?: RefProp<HTMLDivElement>;
+  saveScrollWidth: (value: number) => void;
+  listScrollRef: RefProp<HTMLDivElement>;
+  indexScrollRef: RefProp<HTMLDivElement>;
+  scrollScrollRef: RefProp<HTMLDivElement>;
+  handleScroll: UIEventHandler<HTMLDivElement>;
   style?: CSSProperties;
-  children?: ReactNode;
+  groupBy: string;
+  balanceTypeOp: string;
+  showEmpty: boolean;
+  data: GroupedEntity[];
+  mode: string;
+  monthsCount: number;
 };
 
 export default function ReportTable({
   saveScrollWidth,
   listScrollRef,
+  indexScrollRef,
+  scrollScrollRef,
+  handleScroll,
   style,
-  children,
+  groupBy,
+  balanceTypeOp,
+  showEmpty,
+  data,
+  mode,
+  monthsCount,
 }: ReportTableProps) {
-  const contentRef = useRef<HTMLDivElement>(null);
+  const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
 
   useLayoutEffect(() => {
-    if (contentRef.current && saveScrollWidth) {
-      saveScrollWidth(contentRef.current ? contentRef.current.offsetWidth : 0);
+    if (scrollScrollRef.current && saveScrollWidth) {
+      saveScrollWidth(
+        scrollScrollRef.current ? scrollScrollRef.current.offsetWidth : 0,
+      );
     }
   });
 
+  const renderItem = useCallback(
+    ({ item, groupByItem, mode, monthsCount, style, key }) => {
+      return (
+        <ReportTableRow
+          key={key}
+          item={item}
+          balanceTypeOp={balanceTypeOp}
+          groupByItem={groupByItem}
+          mode={mode}
+          monthsCount={monthsCount}
+          style={style}
+        />
+      );
+    },
+    [],
+  );
+
   return (
     <View
       innerRef={listScrollRef}
@@ -33,6 +79,7 @@ export default function ReportTable({
         scrollbarWidth: 'none',
         '::-webkit-scrollbar': { display: 'none' },
         flex: 1,
+        flexDirection: 'row',
         outline: 'none',
         '& .animated .animated-row': { transition: '.25s transform' },
         ...style,
@@ -40,9 +87,71 @@ export default function ReportTable({
       tabIndex={1}
       data-testid="table"
     >
-      <View>
-        <div ref={contentRef}>{children}</div>
-      </View>
+      <Block
+        innerRef={indexScrollRef}
+        onScroll={handleScroll}
+        id={'index'}
+        style={{
+          width: 150,
+          flexShrink: 0,
+          overflowY: 'auto',
+          scrollbarWidth: 'none',
+          //'::-webkit-scrollbar': { display: 'none' },
+          justifyContent: 'center',
+        }}
+      >
+        {data.map(item => {
+          return (
+            <ColumnPrimary
+              key={item.id}
+              item={item}
+              balanceTypeOp={balanceTypeOp}
+              groupByItem={groupByItem}
+              showEmpty={showEmpty}
+            />
+          );
+        })}
+      </Block>
+      <Block
+        style={{
+          overflowY: 'auto',
+          flex: 1,
+          scrollbarWidth: 'none',
+          //'::-webkit-scrollbar': { display: 'none' },
+        }}
+        id={'list'}
+        innerRef={listScrollRef}
+        onScroll={handleScroll}
+      >
+        <ReportTableInner
+          data={data}
+          showEmpty={showEmpty}
+          monthsCount={monthsCount}
+          balanceTypeOp={balanceTypeOp}
+          mode={mode}
+          groupBy={groupBy}
+          renderItem={renderItem}
+        />
+      </Block>
+      <Block
+        id={'scroll'}
+        innerRef={scrollScrollRef}
+        onScroll={handleScroll}
+        style={{
+          overflowY: 'auto',
+        }}
+      >
+        {data.map(item => {
+          return (
+            <ColumnScrollbar
+              key={item.id}
+              item={item}
+              balanceTypeOp={balanceTypeOp}
+              showEmpty={showEmpty}
+            />
+          );
+        })}
+      </Block>
     </View>
   );
 }
diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
index a2aaee9f506..3c74305c07a 100644
--- a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
@@ -1,4 +1,5 @@
-import React, { type Ref } from 'react';
+import React, { type UIEventHandler } from 'react';
+import { type RefProp } from 'react-spring';
 
 import * as d from 'date-fns';
 
@@ -6,20 +7,24 @@ import { styles, theme } from '../../style';
 import View from '../common/View';
 import { Row, Cell } from '../table';
 
+import { type Month } from './entities';
+
 type ReportTableHeaderProps = {
   scrollWidth?: number;
   groupBy: string;
-  interval?: Array<string>;
+  interval?: Month[];
   balanceType: string;
-  headerScrollRef?: Ref<HTMLDivElement>;
+  headerScrollRef: RefProp<HTMLDivElement>;
+  handleScroll: UIEventHandler<HTMLDivElement>;
 };
 
-export default function ReportTableHeader({
+function ReportTableHeader({
   scrollWidth,
   groupBy,
   interval,
   balanceType,
   headerScrollRef,
+  handleScroll,
 }: ReportTableHeaderProps) {
   return (
     <View
@@ -36,28 +41,33 @@ export default function ReportTableHeader({
       <Row
         collapsed={true}
         style={{
-          color: theme.tableHeaderText,
-          backgroundColor: theme.tableHeaderBackground,
-          fontWeight: 600,
+          width: 150,
+          flexShrink: 0,
+          ...styles.tnum,
+        }}
+        value={groupBy}
+      />
+      <View
+        innerRef={headerScrollRef}
+        onScroll={handleScroll}
+        id={'header'}
+        style={{
+          overflowX: 'auto',
+          scrollbarWidth: 'none',
+          '::-webkit-scrollbar': { display: 'none' },
+          flexDirection: 'row',
+          flex: 1,
         }}
       >
-        <Cell
-          style={{
-            minWidth: 125,
-            ...styles.tnum,
-          }}
-          value={groupBy}
-          width="flex"
-        />
         {interval
-          ? interval.map(header => {
+          ? interval.map((header, index) => {
               return (
                 <Cell
                   style={{
                     minWidth: 85,
                     ...styles.tnum,
                   }}
-                  key={header}
+                  key={index}
                   // eslint-disable-next-line rulesdir/typography
                   value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
                   width="flex"
@@ -71,7 +81,7 @@ export default function ReportTableHeader({
                     minWidth: 85,
                     ...styles.tnum,
                   }}
-                  value={'Assets'}
+                  value={'Deposits'}
                   width="flex"
                 />
                 <Cell
@@ -79,7 +89,7 @@ export default function ReportTableHeader({
                     minWidth: 85,
                     ...styles.tnum,
                   }}
-                  value={'Debts'}
+                  value={'Payments'}
                   width="flex"
                 />
               </>
@@ -101,7 +111,9 @@ export default function ReportTableHeader({
           width="flex"
         />
         {scrollWidth > 0 && <Cell width={scrollWidth} />}
-      </Row>
+      </View>
     </View>
   );
 }
+
+export default ReportTableHeader;
diff --git a/packages/desktop-client/src/components/reports/ReportTableInner.tsx b/packages/desktop-client/src/components/reports/ReportTableInner.tsx
new file mode 100644
index 00000000000..4297e2a15ca
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportTableInner.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { type CSSProperties, theme } from '../../style';
+import View from '../common/View';
+import { Row } from '../table';
+
+import { type GroupedEntity } from './entities';
+
+type ReportTableInnerProps = {
+  data: GroupedEntity[];
+  balanceTypeOp?: string;
+  mode: string;
+  monthsCount: number;
+  showEmpty: boolean;
+  groupBy: string;
+  renderItem;
+};
+
+function ReportTableInner({
+  data,
+  showEmpty,
+  monthsCount,
+  balanceTypeOp,
+  mode,
+  groupBy,
+  renderItem,
+}: ReportTableInnerProps) {
+  const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
+
+  type RenderRowProps = {
+    key: string;
+    row;
+    index: number;
+    parent_index?: number;
+    style?: CSSProperties;
+  };
+  function RenderRow({ row, index, parent_index, style, key }: RenderRowProps) {
+    let item;
+    if (row.categories) {
+      item = data[index];
+    } else {
+      item = data[parent_index].categories[index];
+    }
+
+    const rendered_row = renderItem({
+      item,
+      groupByItem,
+      mode,
+      monthsCount,
+      style,
+      key,
+    });
+
+    return rendered_row;
+  }
+
+  return (
+    <View>
+      {data.map((item, index) => {
+        return (
+          <>
+            <RenderRow
+              key={item.id}
+              row={item}
+              index={index}
+              style={
+                item.categories && {
+                  color: theme.tableRowHeaderText,
+                  backgroundColor: theme.tableRowHeaderBackground,
+                  fontWeight: 600,
+                }
+              }
+            />
+            {item.categories && (
+              <>
+                <View>
+                  {item.categories
+                    .filter(i =>
+                      !showEmpty
+                        ? balanceTypeOp === 'totalTotals'
+                          ? i.totalAssets !== 0 ||
+                            i.totalDebts !== 0 ||
+                            i.totalTotals !== 0
+                          : i[balanceTypeOp] !== 0
+                        : true,
+                    )
+                    .map((category, i) => {
+                      return (
+                        <RenderRow
+                          key={category.id}
+                          row={category}
+                          index={i}
+                          parent_index={index}
+                        />
+                      );
+                    })}
+                </View>
+                <Row height={20} />
+              </>
+            )}
+          </>
+        );
+      })}
+    </View>
+  );
+}
+
+export default ReportTableInner;
diff --git a/packages/desktop-client/src/components/reports/ReportTableList.tsx b/packages/desktop-client/src/components/reports/ReportTableList.tsx
deleted file mode 100644
index ddfdeca2c40..00000000000
--- a/packages/desktop-client/src/components/reports/ReportTableList.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import React, { memo } from 'react';
-
-import {
-  amountToCurrency,
-  amountToInteger,
-  integerToCurrency,
-} from 'loot-core/src/shared/util';
-
-import { type CSSProperties, styles, theme } from '../../style';
-import View from '../common/View';
-import { Row, Cell } from '../table';
-
-type TableRowProps = {
-  item: {
-    date: string;
-    name: string;
-    monthData: [];
-    totalAssets: number;
-    totalDebts: number;
-  };
-  balanceTypeOp?: string;
-  groupByItem: string;
-  mode: string;
-  monthsCount: number;
-  style?: CSSProperties;
-};
-
-const TableRow = memo(
-  ({
-    item,
-    balanceTypeOp,
-    groupByItem,
-    mode,
-    monthsCount,
-    style,
-  }: TableRowProps) => {
-    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
-    return (
-      <Row
-        key={item[groupByItem]}
-        collapsed={true}
-        style={{
-          color: theme.tableText,
-          backgroundColor: theme.tableBackground,
-          ...style,
-        }}
-      >
-        <Cell
-          value={item[groupByItem]}
-          width="flex"
-          title={item[groupByItem].length > 12 && item[groupByItem]}
-          style={{
-            minWidth: 125,
-            ...styles.tnum,
-          }}
-        />
-        {item.monthData && mode === 'time'
-          ? item.monthData.map(month => {
-              return (
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  key={amountToCurrency(month[balanceTypeOp])}
-                  value={amountToCurrency(month[balanceTypeOp])}
-                  title={
-                    Math.abs(month[balanceTypeOp]) > 100000 &&
-                    amountToCurrency(month[balanceTypeOp])
-                  }
-                  width="flex"
-                  privacyFilter
-                />
-              );
-            })
-          : balanceTypeOp === 'totalTotals' && (
-              <>
-                <Cell
-                  value={amountToCurrency(item.totalAssets)}
-                  title={
-                    Math.abs(item.totalAssets) > 100000 &&
-                    amountToCurrency(item.totalAssets)
-                  }
-                  width="flex"
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                />
-                <Cell
-                  value={amountToCurrency(item.totalDebts)}
-                  title={
-                    Math.abs(item.totalDebts) > 100000 &&
-                    amountToCurrency(item.totalDebts)
-                  }
-                  width="flex"
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                />
-              </>
-            )}
-        <Cell
-          value={amountToCurrency(item[balanceTypeOp])}
-          title={
-            Math.abs(item[balanceTypeOp]) > 100000 &&
-            amountToCurrency(item[balanceTypeOp])
-          }
-          style={{
-            fontWeight: 600,
-            minWidth: 85,
-            ...styles.tnum,
-          }}
-          width="flex"
-          privacyFilter
-        />
-        <Cell
-          value={integerToCurrency(Math.round(average))}
-          title={
-            Math.abs(Math.round(average / 100)) > 100000 &&
-            integerToCurrency(Math.round(average))
-          }
-          style={{
-            fontWeight: 600,
-            minWidth: 85,
-            ...styles.tnum,
-          }}
-          width="flex"
-          privacyFilter
-        />
-      </Row>
-    );
-  },
-);
-
-function GroupedTableRow({
-  item,
-  balanceTypeOp,
-  groupByItem,
-  mode,
-  monthsCount,
-  empty,
-}) {
-  return (
-    <>
-      <TableRow
-        key={item.id}
-        item={item}
-        balanceTypeOp={balanceTypeOp}
-        groupByItem={groupByItem}
-        mode={mode}
-        monthsCount={monthsCount}
-        style={{
-          color: theme.tableRowHeaderText,
-          backgroundColor: theme.tableRowHeaderBackground,
-          fontWeight: 600,
-        }}
-      />
-      <View>
-        {item.categories
-          .filter(i =>
-            !empty
-              ? balanceTypeOp === 'totalTotals'
-                ? i.totalAssets !== 0 ||
-                  i.totalDebts !== 0 ||
-                  i.totalTotals !== 0
-                : i[balanceTypeOp] !== 0
-              : true,
-          )
-          .map(cat => {
-            return (
-              <TableRow
-                key={cat.id}
-                item={cat}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-              />
-            );
-          })}
-      </View>
-      <Row height={20} />
-    </>
-  );
-}
-
-export default function ReportTableList({
-  data,
-  empty,
-  monthsCount,
-  balanceTypeOp,
-  mode,
-  groupBy,
-}) {
-  const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
-  const groupByData =
-    groupBy === 'Category'
-      ? 'groupedData'
-      : ['Month', 'Year'].includes(groupBy)
-      ? 'monthData'
-      : 'data';
-
-  return (
-    <View>
-      {data[groupByData]
-        .filter(i =>
-          !empty
-            ? balanceTypeOp === 'totalTotals'
-              ? i.totalAssets !== 0 || i.totalDebts !== 0 || i.totalTotals !== 0
-              : i[balanceTypeOp] !== 0
-            : true,
-        )
-        .map(item => {
-          if (groupBy === 'Category') {
-            return (
-              <GroupedTableRow
-                key={item.id}
-                item={item}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-                empty={empty}
-              />
-            );
-          } else {
-            return (
-              <TableRow
-                key={item.id}
-                item={item}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-              />
-            );
-          }
-        })}
-    </View>
-  );
-}
diff --git a/packages/desktop-client/src/components/reports/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/ReportTableRow.tsx
new file mode 100644
index 00000000000..ba91ee2775b
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportTableRow.tsx
@@ -0,0 +1,123 @@
+import React, { memo } from 'react';
+
+import {
+  amountToCurrency,
+  amountToInteger,
+  integerToCurrency,
+} from 'loot-core/src/shared/util';
+
+import { styles, theme } from '../../style';
+import { Row, Cell } from '../table';
+
+import { type GroupedEntity } from './entities';
+
+type ReportTableRowProps = {
+  item: GroupedEntity;
+  balanceTypeOp?: string;
+  groupByItem: string;
+  mode: string;
+  monthsCount: number;
+  style?: object;
+};
+
+const ReportTableRow = memo(
+  ({
+    item,
+    balanceTypeOp,
+    groupByItem,
+    mode,
+    monthsCount,
+    style,
+  }: ReportTableRowProps) => {
+    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
+    return (
+      <Row
+        key={item[groupByItem]}
+        collapsed={true}
+        style={{
+          color: theme.tableText,
+          backgroundColor: theme.tableBackground,
+          ...style,
+        }}
+      >
+        {item.monthData && mode === 'time'
+          ? item.monthData.map(month => {
+              return (
+                <Cell
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                  key={amountToCurrency(month[balanceTypeOp])}
+                  value={amountToCurrency(month[balanceTypeOp])}
+                  title={
+                    Math.abs(month[balanceTypeOp]) > 100000 &&
+                    amountToCurrency(month[balanceTypeOp])
+                  }
+                  width="flex"
+                  privacyFilter
+                />
+              );
+            })
+          : balanceTypeOp === 'totalTotals' && (
+              <>
+                <Cell
+                  value={amountToCurrency(item.totalAssets)}
+                  title={
+                    Math.abs(item.totalAssets) > 100000 &&
+                    amountToCurrency(item.totalAssets)
+                  }
+                  width="flex"
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                />
+                <Cell
+                  value={amountToCurrency(item.totalDebts)}
+                  title={
+                    Math.abs(item.totalDebts) > 100000 &&
+                    amountToCurrency(item.totalDebts)
+                  }
+                  width="flex"
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                />
+              </>
+            )}
+        <Cell
+          value={amountToCurrency(item[balanceTypeOp])}
+          title={
+            Math.abs(item[balanceTypeOp]) > 100000 &&
+            amountToCurrency(item[balanceTypeOp])
+          }
+          style={{
+            fontWeight: 600,
+            minWidth: 85,
+            ...styles.tnum,
+          }}
+          width="flex"
+          privacyFilter
+        />
+        <Cell
+          value={integerToCurrency(Math.round(average))}
+          title={
+            Math.abs(Math.round(average / 100)) > 100000 &&
+            integerToCurrency(Math.round(average))
+          }
+          style={{
+            fontWeight: 600,
+            minWidth: 85,
+            ...styles.tnum,
+          }}
+          width="flex"
+          privacyFilter
+        />
+      </Row>
+    );
+  },
+);
+
+export default ReportTableRow;
diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
index f60a91b5ab5..a40780abe62 100644
--- a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { type UIEventHandler, useLayoutEffect, useState } from 'react';
+import { type RefProp } from 'react-spring';
 
 import {
   amountToCurrency,
@@ -10,20 +11,46 @@ import { styles, theme } from '../../style';
 import View from '../common/View';
 import { Row, Cell } from '../table';
 
-export default function ReportTableTotals({
+import { type DataEntity } from './entities';
+
+type ReportTableTotalsProps = {
+  data: DataEntity;
+  scrollWidth?: number;
+  balanceTypeOp: string;
+  mode: string;
+  monthsCount: number;
+  totalScrollRef: RefProp<HTMLDivElement>;
+  handleScroll: UIEventHandler<HTMLDivElement>;
+};
+
+function ReportTableTotals({
   data,
   scrollWidth,
   balanceTypeOp,
   mode,
   monthsCount,
   totalScrollRef,
-  handleScrollTotals,
-}) {
+  handleScroll,
+}: ReportTableTotalsProps) {
+  const [scrollWidthTotals, setScrollWidthTotals] = useState(0);
+
+  useLayoutEffect(() => {
+    if (totalScrollRef.current) {
+      const [parent, child] = [
+        totalScrollRef.current.offsetParent
+          ? totalScrollRef.current.parentElement.scrollHeight
+          : 0,
+        totalScrollRef.current ? totalScrollRef.current.scrollHeight : 0,
+      ];
+      setScrollWidthTotals(parent > 0 && child > 0 && parent - child);
+    }
+  });
+
   const average = amountToInteger(data[balanceTypeOp]) / monthsCount;
   return (
-    <View
-      innerRef={totalScrollRef}
-      onScroll={handleScrollTotals}
+    <Row
+      collapsed={true}
+      height={32 + scrollWidthTotals}
       style={{
         overflowX: 'auto',
         borderTopWidth: 1,
@@ -31,22 +58,40 @@ export default function ReportTableTotals({
         justifyContent: 'center',
       }}
     >
-      <Row
-        collapsed={true}
+      <View
         style={{
-          color: theme.tableHeaderText,
-          backgroundColor: theme.tableHeaderBackground,
-          fontWeight: 600,
+          width: 150,
+          flexShrink: 0,
+          ...styles.tnum,
         }}
       >
         <Cell
           style={{
-            minWidth: 125,
-            ...styles.tnum,
+            height: 32,
           }}
           value={'Totals'}
-          width="flex"
         />
+        {scrollWidthTotals > 0 && (
+          <Cell
+            style={{
+              height: scrollWidthTotals,
+              color: theme.tableText,
+              backgroundColor: theme.tableBackground,
+              border: 'none',
+            }}
+          />
+        )}
+      </View>
+      <View
+        innerRef={totalScrollRef}
+        onScroll={handleScroll}
+        id={'total'}
+        style={{
+          overflowX: 'auto',
+          flexDirection: 'row',
+          flex: 1,
+        }}
+      >
         {mode === 'time'
           ? data.monthData.map(item => {
               return (
@@ -122,7 +167,9 @@ export default function ReportTableTotals({
         />
 
         {scrollWidth > 0 && <Cell width={scrollWidth} />}
-      </Row>
-    </View>
+      </View>
+    </Row>
   );
 }
+
+export default ReportTableTotals;
diff --git a/packages/desktop-client/src/components/reports/TableRowIndex.tsx b/packages/desktop-client/src/components/reports/TableRowIndex.tsx
new file mode 100644
index 00000000000..333f5ed36cb
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/TableRowIndex.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { type CSSProperties, styles, theme } from '../../style';
+import { Row, Cell } from '../table';
+
+import { type GroupedEntity } from './entities';
+
+type TableRowIndexProps = {
+  item?: GroupedEntity;
+  groupByItem?: string;
+  style?: CSSProperties;
+};
+
+const TableRowIndex = ({ item, groupByItem, style }: TableRowIndexProps) => {
+  return (
+    <Row
+      collapsed={true}
+      style={{
+        color: theme.tableText,
+        backgroundColor: theme.tableBackground,
+        ...style,
+      }}
+    >
+      {item ? (
+        <Cell
+          value={item[groupByItem]}
+          width="flex"
+          title={item[groupByItem].length > 12 && item[groupByItem]}
+          style={{
+            minWidth: 125,
+            ...styles.tnum,
+          }}
+        />
+      ) : (
+        <Cell />
+      )}
+    </Row>
+  );
+};
+
+export default TableRowIndex;
diff --git a/packages/desktop-client/src/components/reports/entities.d.ts b/packages/desktop-client/src/components/reports/entities.d.ts
new file mode 100644
index 00000000000..997ff195c25
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/entities.d.ts
@@ -0,0 +1,41 @@
+export type DataEntity = {
+  data: Array<ItemEntity>;
+  monthData: Array<MonthData>;
+  groupedData: Array<GroupedEntity>;
+  startDate: string;
+  endDate: string;
+  totalDebts: number;
+  totalAssets: number;
+  totalTotals: number;
+};
+
+type ItemEntity = {
+  id: string;
+  name: string;
+  monthData: MonthData[];
+  totalAssets: number;
+  totalDebts: number;
+  totalTotals: number;
+};
+
+type MonthData = {
+  date: string;
+  totalAssets: number;
+  totalDebts: number;
+  totalTotals: number;
+};
+
+export type GroupedEntity = {
+  id: string;
+  name: string;
+  date?: string;
+  monthData: Array<MonthData>;
+  categories?: Array<ItemEntity>;
+  totalAssets: number;
+  totalDebts: number;
+  totalTotals: number;
+};
+
+export type Month = {
+  month: string;
+};
diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
index a8ad506a00e..fa560ec6cde 100644
--- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -18,6 +18,7 @@ import Text from '../../common/Text';
 import PrivacyFilter from '../../PrivacyFilter';
 import { getColorScale } from '../chart-theme';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import numberFormatterTooltip from '../numberFormatter';
 
 type PayloadItem = {
@@ -94,10 +95,10 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
 
 type DonutGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   groupBy: string;
   balanceTypeOp: string;
-  empty: boolean;
+  showEmpty: boolean;
   compact?: boolean;
 };
 
@@ -105,7 +106,7 @@ function DonutGraph({
   style,
   data,
   groupBy,
-  empty,
+  showEmpty,
   balanceTypeOp,
   compact,
 }: DonutGraphProps) {
@@ -147,7 +148,7 @@ function DonutGraph({
                   nameKey={yAxis}
                   isAnimationActive={false}
                   data={data[splitData].filter(i =>
-                    !empty ? i[balanceTypeOp] !== 0 : true,
+                    !showEmpty ? i[balanceTypeOp] !== 0 : true,
                   )}
                   innerRadius={Math.min(width, height) * 0.2}
                   fill="#8884d8"
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js
index a8d1f3a42cf..28be3d08657 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.js
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js
@@ -17,12 +17,13 @@ import Text from '../../common/Text';
 import View from '../../common/View';
 import { AppliedFilters } from '../../filters/FiltersMenu';
 import PrivacyFilter from '../../PrivacyFilter';
-import { ChooseGraph } from '../ChooseGraph';
+import ChooseGraph from '../ChooseGraph';
 import Header from '../Header';
 import LoadingIndicator from '../LoadingIndicator';
+import ReportLegend from '../ReportLegend';
 import { ReportOptions } from '../ReportOptions';
 import { ReportSidebar } from '../ReportSidebar';
-import { ReportLegend, ReportSummary } from '../ReportSummary';
+import ReportSummary from '../ReportSummary';
 import { ReportTopbar } from '../ReportTopbar';
 import defaultSpreadsheet from '../spreadsheets/default-spreadsheet';
 import groupedSpreadsheet from '../spreadsheets/grouped-spreadsheet';
@@ -44,18 +45,19 @@ export default function CustomReport() {
   const [selectedCategories, setSelectedCategories] = useState(null);
   const [allMonths, setAllMonths] = useState(null);
   const [typeDisabled, setTypeDisabled] = useState(['Net']);
-  const [start, setStart] = useState(
+  const [startDate, setStartDate] = useState(
     monthUtils.subMonths(monthUtils.currentMonth(), 5),
   );
-  const [end, setEnd] = useState(monthUtils.currentMonth());
+  const [endDate, setEndDate] = useState(monthUtils.currentMonth());
 
   const [mode, setMode] = useState('total');
+  const [datePaused, setDatePaused] = useState('live');
   const [groupBy, setGroupBy] = useState('Category');
-  const [balanceType, setBalanceType] = useState('Expense');
-  const [empty, setEmpty] = useState(false);
-  const [hidden, setHidden] = useState(false);
-  const [uncat, setUncat] = useState(false);
-  const [dateRange, setDateRange] = useState('6 months');
+  const [balanceType, setBalanceType] = useState('Payment');
+  const [showEmpty, setShowEmpty] = useState(false);
+  const [showOffBudgetHidden, setShowOffBudgetHidden] = useState(false);
+  const [showUncategorized, setShowUncategorized] = useState(false);
+  const [dateRange, setDateRange] = useState('Last 6 months');
   const [dataCheck, setDataCheck] = useState(false);
 
   const [graphType, setGraphType] = useState('BarGraph');
@@ -65,7 +67,7 @@ export default function CustomReport() {
   //const [legend, setLegend] = useState([]);
   const legend = [];
   const dateRangeLine = ReportOptions.dateRange.length - 3;
-  const months = monthUtils.rangeInclusive(start, end);
+  const months = monthUtils.rangeInclusive(startDate, endDate);
 
   useEffect(() => {
     if (selectedCategories === null && categories.list.length !== 0) {
@@ -106,47 +108,47 @@ export default function CustomReport() {
   const accounts = useCachedAccounts();
 
   const getGroupData = useMemo(() => {
-    return groupedSpreadsheet({
-      start,
-      end,
+    return groupedSpreadsheet(
+      startDate,
+      endDate,
       categories,
       selectedCategories,
       filters,
       conditionsOp,
-      hidden,
-      uncat,
-    });
+      showOffBudgetHidden,
+      showUncategorized,
+    );
   }, [
-    start,
-    end,
+    startDate,
+    endDate,
     categories,
     selectedCategories,
     filters,
     conditionsOp,
-    hidden,
-    uncat,
+    showOffBudgetHidden,
+    showUncategorized,
   ]);
 
   const getGraphData = useMemo(() => {
     setDataCheck(false);
-    return defaultSpreadsheet({
-      start,
-      end,
-      categories,
-      selectedCategories,
-      filters,
-      conditionsOp,
-      hidden,
-      uncat,
+    return defaultSpreadsheet(
+      startDate,
+      endDate,
       groupBy,
       balanceTypeOp,
+      categories,
+      selectedCategories,
       payees,
       accounts,
+      filters,
+      conditionsOp,
+      showOffBudgetHidden,
+      showUncategorized,
       setDataCheck,
-    });
+    );
   }, [
-    start,
-    end,
+    startDate,
+    endDate,
     groupBy,
     balanceType,
     categories,
@@ -155,8 +157,8 @@ export default function CustomReport() {
     accounts,
     filters,
     conditionsOp,
-    hidden,
-    uncat,
+    showOffBudgetHidden,
+    showUncategorized,
   ]);
   const graphData = useReport('default', getGraphData);
   const groupedData = useReport('grouped', getGroupData);
@@ -169,9 +171,9 @@ export default function CustomReport() {
     return null;
   }
 
-  const onChangeDates = (start, end) => {
-    setStart(start);
-    setEnd(end);
+  const onChangeDates = (startDate, endDate) => {
+    setStartDate(startDate);
+    setEndDate(endDate);
   };
 
   return (
@@ -187,8 +189,8 @@ export default function CustomReport() {
         }}
       >
         <ReportSidebar
-          start={start}
-          end={end}
+          startDate={startDate}
+          endDate={endDate}
           onChangeDates={onChangeDates}
           dateRange={dateRange}
           setDateRange={setDateRange}
@@ -205,12 +207,14 @@ export default function CustomReport() {
           setBalanceType={setBalanceType}
           mode={mode}
           setMode={setMode}
-          empty={empty}
-          setEmpty={setEmpty}
-          hidden={hidden}
-          setHidden={setHidden}
-          uncat={uncat}
-          setUncat={setUncat}
+          datePaused={datePaused}
+          setDatePaused={setDatePaused}
+          showEmpty={showEmpty}
+          setShowEmpty={setShowEmpty}
+          showOffBudgetHidden={showOffBudgetHidden}
+          setShowOffBudgetHidden={setShowOffBudgetHidden}
+          showUncategorized={showUncategorized}
+          setShowUncategorized={setShowUncategorized}
           categories={categories}
           selectedCategories={selectedCategories}
           setSelectedCategories={setSelectedCategories}
@@ -304,14 +308,12 @@ export default function CustomReport() {
 
                 {dataCheck ? (
                   <ChooseGraph
-                    start={start}
-                    end={end}
                     data={data}
                     mode={mode}
                     graphType={graphType}
                     balanceType={balanceType}
                     groupBy={groupBy}
-                    empty={empty}
+                    showEmpty={showEmpty}
                     scrollWidth={scrollWidth}
                     setScrollWidth={setScrollWidth}
                     months={months}
@@ -333,8 +335,8 @@ export default function CustomReport() {
                 >
                   {viewSummary && (
                     <ReportSummary
-                      start={start}
-                      end={end}
+                      startDate={startDate}
+                      endDate={endDate}
                       balanceTypeOp={balanceTypeOp}
                       data={data}
                       monthsCount={months.length}

From 1802d473851fc830ce8eac1b31370dd571138b63 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Tue, 12 Dec 2023 20:56:34 +0000
Subject: [PATCH 2/7] fixes

---
 .../src/components/reports/ChooseGraph.tsx    | 22 +------------------
 .../components/reports/ReportTableTotals.tsx  |  1 -
 .../src/components/reports/entities.d.ts      | 10 ++++-----
 .../reports/reports/CustomReport.js           |  8 +------
 4 files changed, 7 insertions(+), 34 deletions(-)

diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index c6e337ebe9c..12401ff91df 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -45,16 +45,6 @@ function ChooseGraph({
       ? 'monthData'
       : 'data';
 
-  const filteredData =
-    data[groupByData] &&
-    data[groupByData].filter(i =>
-      !showEmpty
-        ? balanceTypeOp === 'totalTotals'
-          ? i.totalAssets !== 0 || i.totalDebts !== 0 || i.totalTotals !== 0
-          : i[balanceTypeOp] !== 0
-        : true,
-    );
-
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
   };
@@ -146,21 +136,11 @@ function ChooseGraph({
           handleScroll={handleScroll}
           balanceTypeOp={balanceTypeOp}
           groupBy={groupBy}
-          data={filteredData}
+          data={data[groupByData]}
           showEmpty={showEmpty}
           mode={mode}
           monthsCount={months.length}
         />
-        >
-          <ReportTableList
-            data={data}
-            empty={showEmpty}
-            monthsCount={months.length}
-            balanceTypeOp={balanceTypeOp}
-            mode={mode}
-            groupBy={groupBy}
-          />
-        </ReportTable>
         <ReportTableTotals
           totalScrollRef={totalScrollRef}
           handleScroll={handleScroll}
diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
index f3b086564ce..a40780abe62 100644
--- a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
@@ -1,4 +1,3 @@
-
 import React, { type UIEventHandler, useLayoutEffect, useState } from 'react';
 import { type RefProp } from 'react-spring';
 
diff --git a/packages/desktop-client/src/components/reports/entities.d.ts b/packages/desktop-client/src/components/reports/entities.d.ts
index 997ff195c25..d7b54236bd7 100644
--- a/packages/desktop-client/src/components/reports/entities.d.ts
+++ b/packages/desktop-client/src/components/reports/entities.d.ts
@@ -1,7 +1,7 @@
 export type DataEntity = {
-  data: Array<ItemEntity>;
-  monthData: Array<MonthData>;
-  groupedData: Array<GroupedEntity>;
+  data: GroupedEntity[];
+  monthData: GroupedEntity[];
+  groupedData: GroupedEntity[];
   startDate: string;
   endDate: string;
   totalDebts: number;
@@ -29,8 +29,8 @@ export type GroupedEntity = {
   id: string;
   name: string;
   date?: string;
-  monthData: Array<MonthData>;
-  categories?: Array<ItemEntity>;
+  monthData: MonthData[];
+  categories?: ItemEntity[];
   totalAssets: number;
   totalDebts: number;
   totalTotals: number;
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js
index b5e942c463d..0f6c555fc6c 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.js
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js
@@ -146,16 +146,10 @@ export default function CustomReport() {
       showUncategorized,
       groupBy,
       balanceTypeOp,
-      categories,
-      selectedCategories,
       payees,
       accounts,
-      filters,
-      conditionsOp,
-      showOffBudgetHidden,
-      showUncategorized,
       setDataCheck,
-    );
+    });
   }, [
     startDate,
     endDate,

From 81c116e2b86f981a5fa31733c8fd717c3068c2a0 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Tue, 12 Dec 2023 23:08:29 +0000
Subject: [PATCH 3/7] updates

---
 .../desktop-client/src/components/reports/ReportTable.tsx | 4 ++--
 .../src/components/reports/ReportTableHeader.tsx          | 8 ++++----
 .../src/components/reports/ReportTableTotals.tsx          | 1 -
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/desktop-client/src/components/reports/ReportTable.tsx b/packages/desktop-client/src/components/reports/ReportTable.tsx
index 725b82383db..29df35c0343 100644
--- a/packages/desktop-client/src/components/reports/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTable.tsx
@@ -96,7 +96,7 @@ export default function ReportTable({
           flexShrink: 0,
           overflowY: 'auto',
           scrollbarWidth: 'none',
-          //'::-webkit-scrollbar': { display: 'none' },
+          '::-webkit-scrollbar': { display: 'none' },
           justifyContent: 'center',
         }}
       >
@@ -117,7 +117,7 @@ export default function ReportTable({
           overflowY: 'auto',
           flex: 1,
           scrollbarWidth: 'none',
-          //'::-webkit-scrollbar': { display: 'none' },
+          '::-webkit-scrollbar': { display: 'none' },
         }}
         id={'list'}
         innerRef={listScrollRef}
diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
index 3c74305c07a..cf5377f0c90 100644
--- a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
@@ -27,7 +27,8 @@ function ReportTableHeader({
   handleScroll,
 }: ReportTableHeaderProps) {
   return (
-    <View
+    <Row
+      collapsed={true}
       innerRef={headerScrollRef}
       style={{
         overflowX: 'auto',
@@ -38,8 +39,7 @@ function ReportTableHeader({
         borderColor: theme.tableBorder,
       }}
     >
-      <Row
-        collapsed={true}
+      <Cell
         style={{
           width: 150,
           flexShrink: 0,
@@ -112,7 +112,7 @@ function ReportTableHeader({
         />
         {scrollWidth > 0 && <Cell width={scrollWidth} />}
       </View>
-    </View>
+    </Row>
   );
 }
 
diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
index a40780abe62..e82cccfbfac 100644
--- a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
@@ -52,7 +52,6 @@ function ReportTableTotals({
       collapsed={true}
       height={32 + scrollWidthTotals}
       style={{
-        overflowX: 'auto',
         borderTopWidth: 1,
         borderColor: theme.tableBorder,
         justifyContent: 'center',

From 4cff28833ac8a7ee3da7b5374a87010d4229c2c5 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Wed, 13 Dec 2023 14:16:00 +0000
Subject: [PATCH 4/7] update table layout

---
 .../src/components/reports/ChooseGraph.tsx    |  18 +-
 .../src/components/reports/ColumnPrimary.tsx  |  67 -------
 .../components/reports/ColumnScrollbar.tsx    |  56 ------
 .../src/components/reports/ReportTable.tsx    |  73 ++++---
 .../reports/ReportTableColumTotals.tsx        | 102 ++++++++++
 .../reports/ReportTableColumnIndex.tsx        |  81 ++++++++
 .../components/reports/ReportTableHeader.tsx  | 108 +++++------
 .../components/reports/ReportTableInner.tsx   |  89 ++++-----
 .../src/components/reports/ReportTableRow.tsx | 112 +++--------
 .../components/reports/ReportTableTotals.tsx  | 179 ++++++++++--------
 .../src/components/reports/TableRowIndex.tsx  |  41 ----
 .../spreadsheets/default-spreadsheet.tsx      |   4 +-
 .../spreadsheets/grouped-spreadsheet.ts       |   4 +-
 13 files changed, 459 insertions(+), 475 deletions(-)
 delete mode 100644 packages/desktop-client/src/components/reports/ColumnPrimary.tsx
 delete mode 100644 packages/desktop-client/src/components/reports/ColumnScrollbar.tsx
 create mode 100644 packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx
 create mode 100644 packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx
 delete mode 100644 packages/desktop-client/src/components/reports/TableRowIndex.tsx

diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 12401ff91df..dcbc2c2cd48 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -65,18 +65,26 @@ function ChooseGraph({
       listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
     }
     if (scroll.target.id === 'list') {
-      if (headerScrollRef.current.scrollLeft !== scroll.target.scrollLeft) {
-        headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-        totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-      } else {
+      if (indexScrollRef.current.scrollTop !== scroll.target.scrollTop) {
         indexScrollRef.current.scrollTop = scroll.target.scrollTop;
         scrollScrollRef.current.scrollTop = scroll.target.scrollTop;
+      } else {
+        if (headerScrollRef.current) {
+          headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+        }
+        if (totalScrollRef.current) {
+          totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+        }
       }
     }
     if (scroll.target.id === 'index') {
       listScrollRef.current.scrollTop = scroll.target.scrollTop;
       scrollScrollRef.current.scrollTop = scroll.target.scrollTop;
     }
+    if (scroll.target.id === 'scroll') {
+      listScrollRef.current.scrollTop = scroll.target.scrollTop;
+      indexScrollRef.current.scrollTop = scroll.target.scrollTop;
+    }
   };
 
   if (graphType === 'AreaGraph') {
@@ -123,7 +131,7 @@ function ChooseGraph({
         <ReportTableHeader
           headerScrollRef={headerScrollRef}
           handleScroll={handleScroll}
-          interval={mode === 'time' && months}
+          interval={mode === 'time' && data.monthData}
           scrollWidth={scrollWidth}
           groupBy={groupBy}
           balanceType={balanceType}
diff --git a/packages/desktop-client/src/components/reports/ColumnPrimary.tsx b/packages/desktop-client/src/components/reports/ColumnPrimary.tsx
deleted file mode 100644
index 5d79a3aed11..00000000000
--- a/packages/desktop-client/src/components/reports/ColumnPrimary.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-
-import { theme } from '../../style';
-import View from '../common/View';
-import { Row } from '../table';
-
-import { type GroupedEntity } from './entities';
-import TableRowIndex from './TableRowIndex';
-
-type ColumnPrimaryProps = {
-  item: GroupedEntity;
-  balanceTypeOp?: string | null;
-  groupByItem: string;
-  showEmpty: boolean;
-};
-
-function ColumnPrimary({
-  item,
-  balanceTypeOp,
-  groupByItem,
-  showEmpty,
-}: ColumnPrimaryProps) {
-  return (
-    <>
-      <TableRowIndex
-        key={item.id}
-        item={item}
-        groupByItem={groupByItem}
-        style={
-          item.categories && {
-            color: theme.tableRowHeaderText,
-            backgroundColor: theme.tableRowHeaderBackground,
-            fontWeight: 600,
-          }
-        }
-      />
-      {item.categories && (
-        <>
-          <View>
-            {item.categories
-              .filter(i =>
-                !showEmpty
-                  ? balanceTypeOp === 'totalTotals'
-                    ? i.totalAssets !== 0 ||
-                      i.totalDebts !== 0 ||
-                      i.totalTotals !== 0
-                    : i[balanceTypeOp] !== 0
-                  : true,
-              )
-              .map(cat => {
-                return (
-                  <TableRowIndex
-                    key={cat.id}
-                    item={cat}
-                    groupByItem={groupByItem}
-                  />
-                );
-              })}
-          </View>
-          <Row height={20} />
-        </>
-      )}
-    </>
-  );
-}
-
-export default ColumnPrimary;
diff --git a/packages/desktop-client/src/components/reports/ColumnScrollbar.tsx b/packages/desktop-client/src/components/reports/ColumnScrollbar.tsx
deleted file mode 100644
index b5b867b3d18..00000000000
--- a/packages/desktop-client/src/components/reports/ColumnScrollbar.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-
-import { theme } from '../../style';
-import View from '../common/View';
-import { Row } from '../table';
-
-import { type GroupedEntity } from './entities';
-import TableRowIndex from './TableRowIndex';
-
-type ColumnScrollbarProps = {
-  item: GroupedEntity;
-  balanceTypeOp: string;
-  showEmpty: boolean;
-};
-
-function ColumnScrollbar({
-  item,
-  balanceTypeOp,
-  showEmpty,
-}: ColumnScrollbarProps) {
-  return (
-    <>
-      <TableRowIndex
-        style={
-          item.categories && {
-            color: theme.tableRowHeaderText,
-            backgroundColor: theme.tableRowHeaderBackground,
-            fontWeight: 600,
-          }
-        }
-      />
-      {item.categories && (
-        <>
-          <View>
-            {item.categories
-              .filter(i =>
-                !showEmpty
-                  ? balanceTypeOp === 'totalTotals'
-                    ? i.totalAssets !== 0 ||
-                      i.totalDebts !== 0 ||
-                      i.totalTotals !== 0
-                    : i[balanceTypeOp] !== 0
-                  : true,
-              )
-              .map(cat => {
-                return <TableRowIndex key={cat.id} />;
-              })}
-          </View>
-          <Row height={20} />
-        </>
-      )}
-    </>
-  );
-}
-
-export default ColumnScrollbar;
diff --git a/packages/desktop-client/src/components/reports/ReportTable.tsx b/packages/desktop-client/src/components/reports/ReportTable.tsx
index 29df35c0343..76ec40cb690 100644
--- a/packages/desktop-client/src/components/reports/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTable.tsx
@@ -5,13 +5,13 @@ import React, {
 } from 'react';
 import { type RefProp } from 'react-spring';
 
-import { type CSSProperties } from '../../style';
+import { theme, type CSSProperties } from '../../style';
 import Block from '../common/Block';
 import View from '../common/View';
 
-import ColumnPrimary from './ColumnPrimary';
-import ColumnScrollbar from './ColumnScrollbar';
 import { type GroupedEntity } from './entities';
+import ReportTableColumnIndex from './ReportTableColumnIndex';
+import ReportTableColumnTotals from './ReportTableColumTotals';
 import ReportTableInner from './ReportTableInner';
 import ReportTableRow from './ReportTableRow';
 
@@ -48,22 +48,25 @@ export default function ReportTable({
 
   useLayoutEffect(() => {
     if (scrollScrollRef.current && saveScrollWidth) {
-      saveScrollWidth(
-        scrollScrollRef.current ? scrollScrollRef.current.offsetWidth : 0,
-      );
+      const [parent, child] = [
+        scrollScrollRef.current.offsetWidth,
+        scrollScrollRef.current.clientWidth,
+      ];
+
+      saveScrollWidth(parent > 0 && child > 0 && parent - child);
     }
   });
 
-  const renderItem = useCallback(
-    ({ item, groupByItem, mode, monthsCount, style, key }) => {
+  const renderItemTotal = useCallback(
+    ({ item, groupByItem, monthsCount, style, key }) => {
       return (
-        <ReportTableRow
+        <ReportTableColumnTotals
           key={key}
           item={item}
           balanceTypeOp={balanceTypeOp}
+          monthsCount={monthsCount}
           groupByItem={groupByItem}
           mode={mode}
-          monthsCount={monthsCount}
           style={style}
         />
       );
@@ -71,13 +74,22 @@ export default function ReportTable({
     [],
   );
 
+  const renderItem = useCallback(({ item, groupByItem, mode, style, key }) => {
+    return (
+      <ReportTableRow
+        key={key}
+        item={item}
+        balanceTypeOp={balanceTypeOp}
+        groupByItem={groupByItem}
+        mode={mode}
+        style={style}
+      />
+    );
+  }, []);
+
   return (
     <View
-      innerRef={listScrollRef}
       style={{
-        overflowY: 'auto',
-        scrollbarWidth: 'none',
-        '::-webkit-scrollbar': { display: 'none' },
         flex: 1,
         flexDirection: 'row',
         outline: 'none',
@@ -102,19 +114,24 @@ export default function ReportTable({
       >
         {data.map(item => {
           return (
-            <ColumnPrimary
+            <ReportTableColumnIndex
               key={item.id}
               item={item}
-              balanceTypeOp={balanceTypeOp}
               groupByItem={groupByItem}
-              showEmpty={showEmpty}
+              headerStyle={
+                item.categories && {
+                  color: theme.tableRowHeaderText,
+                  backgroundColor: theme.tableRowHeaderBackground,
+                  fontWeight: 600,
+                }
+              }
             />
           );
         })}
       </Block>
       <Block
         style={{
-          overflowY: 'auto',
+          overflow: 'auto',
           flex: 1,
           scrollbarWidth: 'none',
           '::-webkit-scrollbar': { display: 'none' },
@@ -125,9 +142,7 @@ export default function ReportTable({
       >
         <ReportTableInner
           data={data}
-          showEmpty={showEmpty}
           monthsCount={monthsCount}
-          balanceTypeOp={balanceTypeOp}
           mode={mode}
           groupBy={groupBy}
           renderItem={renderItem}
@@ -139,18 +154,16 @@ export default function ReportTable({
         onScroll={handleScroll}
         style={{
           overflowY: 'auto',
+          flexShrink: 0,
         }}
       >
-        {data.map(item => {
-          return (
-            <ColumnScrollbar
-              key={item.id}
-              item={item}
-              balanceTypeOp={balanceTypeOp}
-              showEmpty={showEmpty}
-            />
-          );
-        })}
+        <ReportTableInner
+          data={data}
+          monthsCount={monthsCount}
+          mode={mode}
+          groupBy={groupBy}
+          renderItem={renderItemTotal}
+        />
       </Block>
     </View>
   );
diff --git a/packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx
new file mode 100644
index 00000000000..bb1e108833a
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx
@@ -0,0 +1,102 @@
+import React, { memo } from 'react';
+
+import {
+  amountToCurrency,
+  amountToInteger,
+  integerToCurrency,
+} from 'loot-core/src/shared/util';
+
+import { styles, theme } from '../../style';
+import { Row, Cell } from '../table';
+
+import { type GroupedEntity } from './entities';
+
+type ReportTableColumnTotalsProps = {
+  item: GroupedEntity;
+  balanceTypeOp?: string;
+  groupByItem: string;
+  monthsCount: number;
+  mode: string;
+  style?: object;
+};
+
+const ReportTableColumnTotals = memo(
+  ({
+    item,
+    balanceTypeOp,
+    groupByItem,
+    monthsCount,
+    mode,
+    style,
+  }: ReportTableColumnTotalsProps) => {
+    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
+    return (
+      <Row
+        key={item[groupByItem]}
+        collapsed={true}
+        style={{
+          color: theme.tableText,
+          backgroundColor: theme.tableBackground,
+          ...style,
+        }}
+      >
+        {balanceTypeOp === 'totalTotals' && (
+          <>
+            <Cell
+              value={amountToCurrency(item.totalAssets)}
+              title={
+                Math.abs(item.totalAssets) > 100000 &&
+                amountToCurrency(item.totalAssets)
+              }
+              width="flex"
+              style={{
+                width: 85,
+                ...styles.tnum,
+              }}
+            />
+            <Cell
+              value={amountToCurrency(item.totalDebts)}
+              title={
+                Math.abs(item.totalDebts) > 100000 &&
+                amountToCurrency(item.totalDebts)
+              }
+              width="flex"
+              style={{
+                width: 85,
+                ...styles.tnum,
+              }}
+            />
+          </>
+        )}
+        <Cell
+          value={amountToCurrency(item[balanceTypeOp])}
+          title={
+            Math.abs(item[balanceTypeOp]) > 100000 &&
+            amountToCurrency(item[balanceTypeOp])
+          }
+          style={{
+            fontWeight: 600,
+            width: 85,
+            ...styles.tnum,
+          }}
+          privacyFilter
+        />
+        <Cell
+          value={integerToCurrency(Math.round(average))}
+          title={
+            Math.abs(Math.round(average / 100)) > 100000 &&
+            integerToCurrency(Math.round(average))
+          }
+          style={{
+            fontWeight: 600,
+            width: 85,
+            ...styles.tnum,
+          }}
+          privacyFilter
+        />
+      </Row>
+    );
+  },
+);
+
+export default ReportTableColumnTotals;
diff --git a/packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx b/packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx
new file mode 100644
index 00000000000..be1e32d6c8f
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { type CSSProperties, styles, theme } from '../../style';
+import View from '../common/View';
+import { Row, Cell } from '../table';
+
+import { type GroupedEntity } from './entities';
+
+type ReportTableColumnIndexProps = {
+  item?: GroupedEntity;
+  groupByItem?: string;
+  headerStyle?: CSSProperties;
+};
+
+function ReportTableColumnIndex({
+  item,
+  groupByItem,
+  headerStyle,
+}: ReportTableColumnIndexProps) {
+  return (
+    <>
+      <Row
+        collapsed={true}
+        style={{
+          color: theme.tableText,
+          backgroundColor: theme.tableBackground,
+          ...headerStyle,
+        }}
+      >
+        {item ? (
+          <Cell
+            value={item[groupByItem]}
+            width="flex"
+            title={item[groupByItem].length > 12 && item[groupByItem]}
+            style={{
+              minWidth: 125,
+              ...styles.tnum,
+            }}
+          />
+        ) : (
+          <Cell />
+        )}
+      </Row>
+      {item.categories && (
+        <>
+          <View>
+            {item.categories.map(cat => {
+              return (
+                <Row
+                  key={cat.id}
+                  collapsed={true}
+                  style={{
+                    color: theme.tableText,
+                    backgroundColor: theme.tableBackground,
+                  }}
+                >
+                  {cat ? (
+                    <Cell
+                      value={cat[groupByItem]}
+                      width="flex"
+                      title={cat[groupByItem].length > 12 && cat[groupByItem]}
+                      style={{
+                        minWidth: 125,
+                        ...styles.tnum,
+                      }}
+                    />
+                  ) : (
+                    <Cell />
+                  )}
+                </Row>
+              );
+            })}
+          </View>
+          <Row height={20} />
+        </>
+      )}
+    </>
+  );
+}
+
+export default ReportTableColumnIndex;
diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
index cf5377f0c90..20503097de4 100644
--- a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
@@ -1,18 +1,16 @@
 import React, { type UIEventHandler } from 'react';
 import { type RefProp } from 'react-spring';
 
-import * as d from 'date-fns';
-
 import { styles, theme } from '../../style';
 import View from '../common/View';
 import { Row, Cell } from '../table';
 
-import { type Month } from './entities';
+import { type GroupedEntity } from './entities';
 
 type ReportTableHeaderProps = {
   scrollWidth?: number;
   groupBy: string;
-  interval?: Month[];
+  interval?: GroupedEntity[];
   balanceType: string;
   headerScrollRef: RefProp<HTMLDivElement>;
   handleScroll: UIEventHandler<HTMLDivElement>;
@@ -29,11 +27,7 @@ function ReportTableHeader({
   return (
     <Row
       collapsed={true}
-      innerRef={headerScrollRef}
       style={{
-        overflowX: 'auto',
-        scrollbarWidth: 'none',
-        '::-webkit-scrollbar': { display: 'none' },
         justifyContent: 'center',
         borderTopWidth: 1,
         borderColor: theme.tableBorder,
@@ -47,68 +41,74 @@ function ReportTableHeader({
         }}
         value={groupBy}
       />
+      {interval ? (
+        <View
+          innerRef={headerScrollRef}
+          onScroll={handleScroll}
+          id={'header'}
+          style={{
+            overflowX: 'auto',
+            scrollbarWidth: 'none',
+            '::-webkit-scrollbar': { display: 'none' },
+            flexDirection: 'row',
+            flex: 1,
+            flexShrink: 1,
+          }}
+        >
+          {interval.map((header, index) => {
+            return (
+              <Cell
+                style={{
+                  minWidth: 85,
+                  ...styles.tnum,
+                }}
+                key={index}
+                value={header.date}
+                width="flex"
+              />
+            );
+          })}
+        </View>
+      ) : (
+        <Cell width="flex" />
+      )}
       <View
-        innerRef={headerScrollRef}
-        onScroll={handleScroll}
-        id={'header'}
         style={{
-          overflowX: 'auto',
-          scrollbarWidth: 'none',
-          '::-webkit-scrollbar': { display: 'none' },
           flexDirection: 'row',
-          flex: 1,
+          flexShrink: 0,
         }}
       >
-        {interval
-          ? interval.map((header, index) => {
-              return (
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  key={index}
-                  // eslint-disable-next-line rulesdir/typography
-                  value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
-                  width="flex"
-                />
-              );
-            })
-          : balanceType === 'Net' && (
-              <>
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  value={'Deposits'}
-                  width="flex"
-                />
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  value={'Payments'}
-                  width="flex"
-                />
-              </>
-            )}
+        {balanceType === 'Net' && (
+          <>
+            <Cell
+              style={{
+                width: 85,
+                ...styles.tnum,
+              }}
+              value={'Deposits'}
+            />
+            <Cell
+              style={{
+                width: 85,
+                ...styles.tnum,
+              }}
+              value={'Payments'}
+            />
+          </>
+        )}
         <Cell
           style={{
-            minWidth: 85,
+            width: 85,
             ...styles.tnum,
           }}
           value={'Totals'}
-          width="flex"
         />
         <Cell
           style={{
-            minWidth: 85,
+            width: 85,
             ...styles.tnum,
           }}
           value={'Average'}
-          width="flex"
         />
         {scrollWidth > 0 && <Cell width={scrollWidth} />}
       </View>
diff --git a/packages/desktop-client/src/components/reports/ReportTableInner.tsx b/packages/desktop-client/src/components/reports/ReportTableInner.tsx
index 4297e2a15ca..fb2454e53ca 100644
--- a/packages/desktop-client/src/components/reports/ReportTableInner.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableInner.tsx
@@ -2,25 +2,21 @@ import React from 'react';
 
 import { type CSSProperties, theme } from '../../style';
 import View from '../common/View';
-import { Row } from '../table';
+import { Cell, Row } from '../table';
 
 import { type GroupedEntity } from './entities';
 
 type ReportTableInnerProps = {
   data: GroupedEntity[];
-  balanceTypeOp?: string;
-  mode: string;
-  monthsCount: number;
-  showEmpty: boolean;
+  mode?: string;
+  monthsCount?: number;
   groupBy: string;
   renderItem;
 };
 
 function ReportTableInner({
   data,
-  showEmpty,
   monthsCount,
-  balanceTypeOp,
   mode,
   groupBy,
   renderItem,
@@ -29,17 +25,16 @@ function ReportTableInner({
 
   type RenderRowProps = {
     key: string;
-    row;
     index: number;
     parent_index?: number;
     style?: CSSProperties;
   };
-  function RenderRow({ row, index, parent_index, style, key }: RenderRowProps) {
+  function RenderRow({ index, parent_index, style, key }: RenderRowProps) {
     let item;
-    if (row.categories) {
-      item = data[index];
-    } else {
+    if (parent_index != null) {
       item = data[parent_index].categories[index];
+    } else {
+      item = data[index];
     }
 
     const rendered_row = renderItem({
@@ -58,47 +53,41 @@ function ReportTableInner({
     <View>
       {data.map((item, index) => {
         return (
-          <>
-            <RenderRow
-              key={item.id}
-              row={item}
-              index={index}
-              style={
-                item.categories && {
-                  color: theme.tableRowHeaderText,
-                  backgroundColor: theme.tableRowHeaderBackground,
-                  fontWeight: 600,
-                }
-              }
-            />
-            {item.categories && (
+          <View>
+            {data ? (
               <>
-                <View>
-                  {item.categories
-                    .filter(i =>
-                      !showEmpty
-                        ? balanceTypeOp === 'totalTotals'
-                          ? i.totalAssets !== 0 ||
-                            i.totalDebts !== 0 ||
-                            i.totalTotals !== 0
-                          : i[balanceTypeOp] !== 0
-                        : true,
-                    )
-                    .map((category, i) => {
-                      return (
-                        <RenderRow
-                          key={category.id}
-                          row={category}
-                          index={i}
-                          parent_index={index}
-                        />
-                      );
-                    })}
-                </View>
-                <Row height={20} />
+                <RenderRow
+                  key={item.id}
+                  index={index}
+                  style={
+                    item.categories && {
+                      color: theme.tableRowHeaderText,
+                      backgroundColor: theme.tableRowHeaderBackground,
+                      fontWeight: 600,
+                    }
+                  }
+                />
+                {item.categories && (
+                  <>
+                    <View>
+                      {item.categories.map((category, i) => {
+                        return (
+                          <RenderRow
+                            key={category.id}
+                            index={i}
+                            parent_index={index}
+                          />
+                        );
+                      })}
+                    </View>
+                    <Row height={20} />
+                  </>
+                )}
               </>
+            ) : (
+              <Cell width="flex" />
             )}
-          </>
+          </View>
         );
       })}
     </View>
diff --git a/packages/desktop-client/src/components/reports/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/ReportTableRow.tsx
index ba91ee2775b..942a92db25f 100644
--- a/packages/desktop-client/src/components/reports/ReportTableRow.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableRow.tsx
@@ -1,10 +1,6 @@
 import React, { memo } from 'react';
 
-import {
-  amountToCurrency,
-  amountToInteger,
-  integerToCurrency,
-} from 'loot-core/src/shared/util';
+import { amountToCurrency } from 'loot-core/src/shared/util';
 
 import { styles, theme } from '../../style';
 import { Row, Cell } from '../table';
@@ -16,20 +12,11 @@ type ReportTableRowProps = {
   balanceTypeOp?: string;
   groupByItem: string;
   mode: string;
-  monthsCount: number;
   style?: object;
 };
 
 const ReportTableRow = memo(
-  ({
-    item,
-    balanceTypeOp,
-    groupByItem,
-    mode,
-    monthsCount,
-    style,
-  }: ReportTableRowProps) => {
-    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
+  ({ item, balanceTypeOp, groupByItem, mode, style }: ReportTableRowProps) => {
     return (
       <Row
         key={item[groupByItem]}
@@ -40,81 +27,26 @@ const ReportTableRow = memo(
           ...style,
         }}
       >
-        {item.monthData && mode === 'time'
-          ? item.monthData.map(month => {
-              return (
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  key={amountToCurrency(month[balanceTypeOp])}
-                  value={amountToCurrency(month[balanceTypeOp])}
-                  title={
-                    Math.abs(month[balanceTypeOp]) > 100000 &&
-                    amountToCurrency(month[balanceTypeOp])
-                  }
-                  width="flex"
-                  privacyFilter
-                />
-              );
-            })
-          : balanceTypeOp === 'totalTotals' && (
-              <>
-                <Cell
-                  value={amountToCurrency(item.totalAssets)}
-                  title={
-                    Math.abs(item.totalAssets) > 100000 &&
-                    amountToCurrency(item.totalAssets)
-                  }
-                  width="flex"
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                />
-                <Cell
-                  value={amountToCurrency(item.totalDebts)}
-                  title={
-                    Math.abs(item.totalDebts) > 100000 &&
-                    amountToCurrency(item.totalDebts)
-                  }
-                  width="flex"
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                />
-              </>
-            )}
-        <Cell
-          value={amountToCurrency(item[balanceTypeOp])}
-          title={
-            Math.abs(item[balanceTypeOp]) > 100000 &&
-            amountToCurrency(item[balanceTypeOp])
-          }
-          style={{
-            fontWeight: 600,
-            minWidth: 85,
-            ...styles.tnum,
-          }}
-          width="flex"
-          privacyFilter
-        />
-        <Cell
-          value={integerToCurrency(Math.round(average))}
-          title={
-            Math.abs(Math.round(average / 100)) > 100000 &&
-            integerToCurrency(Math.round(average))
-          }
-          style={{
-            fontWeight: 600,
-            minWidth: 85,
-            ...styles.tnum,
-          }}
-          width="flex"
-          privacyFilter
-        />
+        {item.monthData &&
+          mode === 'time' &&
+          item.monthData.map(month => {
+            return (
+              <Cell
+                style={{
+                  minWidth: 85,
+                  ...styles.tnum,
+                }}
+                key={amountToCurrency(month[balanceTypeOp])}
+                value={amountToCurrency(month[balanceTypeOp])}
+                title={
+                  Math.abs(month[balanceTypeOp]) > 100000 &&
+                  amountToCurrency(month[balanceTypeOp])
+                }
+                width="flex"
+                privacyFilter
+              />
+            );
+          })}
       </Row>
     );
   },
diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
index e82cccfbfac..cac42a1b3da 100644
--- a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
@@ -81,91 +81,114 @@ function ReportTableTotals({
           />
         )}
       </View>
+      {mode === 'time' ? (
+        <View
+          innerRef={totalScrollRef}
+          onScroll={handleScroll}
+          id={'total'}
+          style={{
+            overflowX: 'auto',
+            flexDirection: 'row',
+            flex: 1,
+          }}
+        >
+          {data.monthData.map(item => {
+            return (
+              <Cell
+                style={{
+                  minWidth: 85,
+                  ...styles.tnum,
+                }}
+                key={amountToCurrency(item[balanceTypeOp])}
+                value={amountToCurrency(item[balanceTypeOp])}
+                title={
+                  Math.abs(item[balanceTypeOp]) > 100000 &&
+                  amountToCurrency(item[balanceTypeOp])
+                }
+                width="flex"
+                privacyFilter
+              />
+            );
+          })}
+        </View>
+      ) : (
+        <Cell width="flex" />
+      )}
       <View
-        innerRef={totalScrollRef}
-        onScroll={handleScroll}
-        id={'total'}
         style={{
-          overflowX: 'auto',
-          flexDirection: 'row',
-          flex: 1,
+          flexShrink: 0,
+          ...styles.tnum,
         }}
       >
-        {mode === 'time'
-          ? data.monthData.map(item => {
-              return (
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  key={amountToCurrency(item[balanceTypeOp])}
-                  value={amountToCurrency(item[balanceTypeOp])}
-                  title={
-                    Math.abs(item[balanceTypeOp]) > 100000 &&
-                    amountToCurrency(item[balanceTypeOp])
-                  }
-                  width="flex"
-                  privacyFilter
-                />
-              );
-            })
-          : balanceTypeOp === 'totalTotals' && (
-              <>
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  value={amountToCurrency(data.totalAssets)}
-                  title={
-                    Math.abs(data.totalAssets) > 100000 &&
-                    amountToCurrency(data.totalAssets)
-                  }
-                  width="flex"
-                />
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  value={amountToCurrency(data.totalDebts)}
-                  title={
-                    Math.abs(data.totalDebts) > 100000 &&
-                    amountToCurrency(data.totalDebts)
-                  }
-                  width="flex"
-                />
-              </>
-            )}
-        <Cell
+        <View
           style={{
-            minWidth: 85,
-            ...styles.tnum,
-          }}
-          value={amountToCurrency(data[balanceTypeOp])}
-          title={
-            Math.abs(data[balanceTypeOp]) > 100000 &&
-            amountToCurrency(data[balanceTypeOp])
-          }
-          width="flex"
-          privacyFilter
-        />
-        <Cell
-          style={{
-            minWidth: 85,
-            ...styles.tnum,
+            flexDirection: 'row',
+            height: 32,
           }}
-          value={integerToCurrency(Math.round(average))}
-          title={
-            Math.abs(Math.round(average / 100)) > 100000 &&
-            integerToCurrency(Math.round(average))
-          }
-          width="flex"
-          privacyFilter
-        />
+        >
+          {balanceTypeOp === 'totalTotals' && (
+            <>
+              <Cell
+                style={{
+                  width: 85,
+                  ...styles.tnum,
+                }}
+                value={amountToCurrency(data.totalAssets)}
+                title={
+                  Math.abs(data.totalAssets) > 100000 &&
+                  amountToCurrency(data.totalAssets)
+                }
+              />
+              <Cell
+                style={{
+                  width: 85,
+                  ...styles.tnum,
+                }}
+                value={amountToCurrency(data.totalDebts)}
+                title={
+                  Math.abs(data.totalDebts) > 100000 &&
+                  amountToCurrency(data.totalDebts)
+                }
+              />
+            </>
+          )}
+          <Cell
+            style={{
+              width: 85,
+              ...styles.tnum,
+            }}
+            value={amountToCurrency(data[balanceTypeOp])}
+            title={
+              Math.abs(data[balanceTypeOp]) > 100000 &&
+              amountToCurrency(data[balanceTypeOp])
+            }
+            privacyFilter
+          />
+          <Cell
+            style={{
+              width: 85,
+              ...styles.tnum,
+            }}
+            value={integerToCurrency(Math.round(average))}
+            title={
+              Math.abs(Math.round(average / 100)) > 100000 &&
+              integerToCurrency(Math.round(average))
+            }
+            privacyFilter
+          />
 
-        {scrollWidth > 0 && <Cell width={scrollWidth} />}
+          {scrollWidth > 0 && <Cell width={scrollWidth} />}
+        </View>
+        {scrollWidthTotals > 0 && (
+          <Cell
+            style={{
+              height: scrollWidthTotals,
+              color: theme.tableText,
+              backgroundColor: theme.tableBackground,
+              border: 'none',
+            }}
+          />
+        )}
       </View>
     </Row>
   );
diff --git a/packages/desktop-client/src/components/reports/TableRowIndex.tsx b/packages/desktop-client/src/components/reports/TableRowIndex.tsx
deleted file mode 100644
index 333f5ed36cb..00000000000
--- a/packages/desktop-client/src/components/reports/TableRowIndex.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { type CSSProperties, styles, theme } from '../../style';
-import { Row, Cell } from '../table';
-
-import { type GroupedEntity } from './entities';
-
-type TableRowIndexProps = {
-  item?: GroupedEntity;
-  groupByItem?: string;
-  style?: CSSProperties;
-};
-
-const TableRowIndex = ({ item, groupByItem, style }: TableRowIndexProps) => {
-  return (
-    <Row
-      collapsed={true}
-      style={{
-        color: theme.tableText,
-        backgroundColor: theme.tableBackground,
-        ...style,
-      }}
-    >
-      {item ? (
-        <Cell
-          value={item[groupByItem]}
-          width="flex"
-          title={item[groupByItem].length > 12 && item[groupByItem]}
-          style={{
-            minWidth: 125,
-            ...styles.tnum,
-          }}
-        />
-      ) : (
-        <Cell />
-      )}
-    </Row>
-  );
-};
-
-export default TableRowIndex;
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],

From 130ad0f0fad00ddbecd6ce8998495e60b31b56b6 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Wed, 13 Dec 2023 17:51:53 +0000
Subject: [PATCH 5/7] revert changes

---
 .../src/components/common/Block.tsx           |   3 -
 .../components/reports/CategorySelector.tsx   |   1 -
 .../src/components/reports/ChooseGraph.tsx    |  67 ++---
 .../src/components/reports/ReportTable.tsx    | 154 ++---------
 .../reports/ReportTableColumTotals.tsx        | 102 --------
 .../reports/ReportTableColumnIndex.tsx        |  81 ------
 .../components/reports/ReportTableHeader.tsx  | 140 +++++-----
 .../components/reports/ReportTableInner.tsx   |  97 -------
 .../components/reports/ReportTableList.tsx    | 243 ++++++++++++++++++
 .../src/components/reports/ReportTableRow.tsx |  55 ----
 .../components/reports/ReportTableTotals.tsx  | 232 +++++++----------
 .../src/components/reports/entities.d.ts      |  13 +-
 12 files changed, 436 insertions(+), 752 deletions(-)
 delete mode 100644 packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx
 delete mode 100644 packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx
 delete mode 100644 packages/desktop-client/src/components/reports/ReportTableInner.tsx
 create mode 100644 packages/desktop-client/src/components/reports/ReportTableList.tsx
 delete mode 100644 packages/desktop-client/src/components/reports/ReportTableRow.tsx

diff --git a/packages/desktop-client/src/components/common/Block.tsx b/packages/desktop-client/src/components/common/Block.tsx
index 38b99615043..4a4db9b9686 100644
--- a/packages/desktop-client/src/components/common/Block.tsx
+++ b/packages/desktop-client/src/components/common/Block.tsx
@@ -2,11 +2,8 @@ import { type HTMLProps, type Ref } from 'react';
 
 import { css } from 'glamor';
 
-import { type CSSProperties } from '../../style';
-
 type BlockProps = HTMLProps<HTMLDivElement> & {
   innerRef?: Ref<HTMLDivElement>;
-  style?: CSSProperties;
 };
 
 export default function Block(props: BlockProps) {
diff --git a/packages/desktop-client/src/components/reports/CategorySelector.tsx b/packages/desktop-client/src/components/reports/CategorySelector.tsx
index c098715798b..d83825eedb4 100644
--- a/packages/desktop-client/src/components/reports/CategorySelector.tsx
+++ b/packages/desktop-client/src/components/reports/CategorySelector.tsx
@@ -225,7 +225,6 @@ export default function CategorySelector({
             );
           })}
       </ul>
-      <View />
     </View>
   );
 }
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index dcbc2c2cd48..0c8825046ca 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -12,6 +12,7 @@ import StackedBarGraph from './graphs/StackedBarGraph';
 import { ReportOptions } from './ReportOptions';
 import ReportTable from './ReportTable';
 import ReportTableHeader from './ReportTableHeader';
+import ReportTableList from './ReportTableList';
 import ReportTableTotals from './ReportTableTotals';
 
 type ChooseGraphProps = {
@@ -38,12 +39,6 @@ function ChooseGraph({
   months,
 }: ChooseGraphProps) {
   const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
-  const groupByData =
-    groupBy === 'Category'
-      ? 'groupedData'
-      : ['Month', 'Year'].includes(groupBy)
-      ? 'monthData'
-      : 'data';
 
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
@@ -52,39 +47,10 @@ function ChooseGraph({
   const headerScrollRef = useRef<HTMLDivElement>(null);
   const listScrollRef = useRef<HTMLDivElement>(null);
   const totalScrollRef = useRef<HTMLDivElement>(null);
-  const indexScrollRef = useRef<HTMLDivElement>(null);
-  const scrollScrollRef = useRef<HTMLDivElement>(null);
 
-  const handleScroll = scroll => {
-    if (scroll.target.id === 'total') {
-      headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-      listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-    }
-    if (scroll.target.id === 'header') {
-      totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-      listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-    }
-    if (scroll.target.id === 'list') {
-      if (indexScrollRef.current.scrollTop !== scroll.target.scrollTop) {
-        indexScrollRef.current.scrollTop = scroll.target.scrollTop;
-        scrollScrollRef.current.scrollTop = scroll.target.scrollTop;
-      } else {
-        if (headerScrollRef.current) {
-          headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-        }
-        if (totalScrollRef.current) {
-          totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-        }
-      }
-    }
-    if (scroll.target.id === 'index') {
-      listScrollRef.current.scrollTop = scroll.target.scrollTop;
-      scrollScrollRef.current.scrollTop = scroll.target.scrollTop;
-    }
-    if (scroll.target.id === 'scroll') {
-      listScrollRef.current.scrollTop = scroll.target.scrollTop;
-      indexScrollRef.current.scrollTop = scroll.target.scrollTop;
-    }
+  const handleScrollTotals = scroll => {
+    headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+    listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
   };
 
   if (graphType === 'AreaGraph') {
@@ -130,8 +96,7 @@ function ChooseGraph({
       <View>
         <ReportTableHeader
           headerScrollRef={headerScrollRef}
-          handleScroll={handleScroll}
-          interval={mode === 'time' && data.monthData}
+          interval={mode === 'time' && months}
           scrollWidth={scrollWidth}
           groupBy={groupBy}
           balanceType={balanceType}
@@ -139,19 +104,19 @@ function ChooseGraph({
         <ReportTable
           saveScrollWidth={saveScrollWidth}
           listScrollRef={listScrollRef}
-          indexScrollRef={indexScrollRef}
-          scrollScrollRef={scrollScrollRef}
-          handleScroll={handleScroll}
-          balanceTypeOp={balanceTypeOp}
-          groupBy={groupBy}
-          data={data[groupByData]}
-          showEmpty={showEmpty}
-          mode={mode}
-          monthsCount={months.length}
-        />
+        >
+          <ReportTableList
+            data={data}
+            empty={showEmpty}
+            monthsCount={months.length}
+            balanceTypeOp={balanceTypeOp}
+            mode={mode}
+            groupBy={groupBy}
+          />
+        </ReportTable>
         <ReportTableTotals
           totalScrollRef={totalScrollRef}
-          handleScroll={handleScroll}
+          handleScrollTotals={handleScrollTotals}
           scrollWidth={scrollWidth}
           data={data}
           mode={mode}
diff --git a/packages/desktop-client/src/components/reports/ReportTable.tsx b/packages/desktop-client/src/components/reports/ReportTable.tsx
index 76ec40cb690..a16f47c4cd9 100644
--- a/packages/desktop-client/src/components/reports/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTable.tsx
@@ -1,97 +1,38 @@
-import React, {
-  useCallback,
-  useLayoutEffect,
-  type UIEventHandler,
-} from 'react';
+import React, { useLayoutEffect, useRef, type ReactNode } from 'react';
 import { type RefProp } from 'react-spring';
 
-import { theme, type CSSProperties } from '../../style';
-import Block from '../common/Block';
+import { type CSSProperties } from '../../style';
 import View from '../common/View';
 
-import { type GroupedEntity } from './entities';
-import ReportTableColumnIndex from './ReportTableColumnIndex';
-import ReportTableColumnTotals from './ReportTableColumTotals';
-import ReportTableInner from './ReportTableInner';
-import ReportTableRow from './ReportTableRow';
-
 type ReportTableProps = {
-  saveScrollWidth: (value: number) => void;
-  listScrollRef: RefProp<HTMLDivElement>;
-  indexScrollRef: RefProp<HTMLDivElement>;
-  scrollScrollRef: RefProp<HTMLDivElement>;
-  handleScroll: UIEventHandler<HTMLDivElement>;
+  saveScrollWidth?: (value: number) => void;
+  listScrollRef?: RefProp<HTMLDivElement>;
   style?: CSSProperties;
-  groupBy: string;
-  balanceTypeOp: string;
-  showEmpty: boolean;
-  data: GroupedEntity[];
-  mode: string;
-  monthsCount: number;
+  children?: ReactNode;
 };
 
 export default function ReportTable({
   saveScrollWidth,
   listScrollRef,
-  indexScrollRef,
-  scrollScrollRef,
-  handleScroll,
   style,
-  groupBy,
-  balanceTypeOp,
-  showEmpty,
-  data,
-  mode,
-  monthsCount,
+  children,
 }: ReportTableProps) {
-  const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
+  const contentRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    if (scrollScrollRef.current && saveScrollWidth) {
-      const [parent, child] = [
-        scrollScrollRef.current.offsetWidth,
-        scrollScrollRef.current.clientWidth,
-      ];
-
-      saveScrollWidth(parent > 0 && child > 0 && parent - child);
+    if (contentRef.current && saveScrollWidth) {
+      saveScrollWidth(contentRef.current ? contentRef.current.offsetWidth : 0);
     }
   });
 
-  const renderItemTotal = useCallback(
-    ({ item, groupByItem, monthsCount, style, key }) => {
-      return (
-        <ReportTableColumnTotals
-          key={key}
-          item={item}
-          balanceTypeOp={balanceTypeOp}
-          monthsCount={monthsCount}
-          groupByItem={groupByItem}
-          mode={mode}
-          style={style}
-        />
-      );
-    },
-    [],
-  );
-
-  const renderItem = useCallback(({ item, groupByItem, mode, style, key }) => {
-    return (
-      <ReportTableRow
-        key={key}
-        item={item}
-        balanceTypeOp={balanceTypeOp}
-        groupByItem={groupByItem}
-        mode={mode}
-        style={style}
-      />
-    );
-  }, []);
-
   return (
     <View
+      innerRef={listScrollRef}
       style={{
+        overflowY: 'auto',
+        scrollbarWidth: 'none',
+        '::-webkit-scrollbar': { display: 'none' },
         flex: 1,
-        flexDirection: 'row',
         outline: 'none',
         '& .animated .animated-row': { transition: '.25s transform' },
         ...style,
@@ -99,72 +40,9 @@ export default function ReportTable({
       tabIndex={1}
       data-testid="table"
     >
-      <Block
-        innerRef={indexScrollRef}
-        onScroll={handleScroll}
-        id={'index'}
-        style={{
-          width: 150,
-          flexShrink: 0,
-          overflowY: 'auto',
-          scrollbarWidth: 'none',
-          '::-webkit-scrollbar': { display: 'none' },
-          justifyContent: 'center',
-        }}
-      >
-        {data.map(item => {
-          return (
-            <ReportTableColumnIndex
-              key={item.id}
-              item={item}
-              groupByItem={groupByItem}
-              headerStyle={
-                item.categories && {
-                  color: theme.tableRowHeaderText,
-                  backgroundColor: theme.tableRowHeaderBackground,
-                  fontWeight: 600,
-                }
-              }
-            />
-          );
-        })}
-      </Block>
-      <Block
-        style={{
-          overflow: 'auto',
-          flex: 1,
-          scrollbarWidth: 'none',
-          '::-webkit-scrollbar': { display: 'none' },
-        }}
-        id={'list'}
-        innerRef={listScrollRef}
-        onScroll={handleScroll}
-      >
-        <ReportTableInner
-          data={data}
-          monthsCount={monthsCount}
-          mode={mode}
-          groupBy={groupBy}
-          renderItem={renderItem}
-        />
-      </Block>
-      <Block
-        id={'scroll'}
-        innerRef={scrollScrollRef}
-        onScroll={handleScroll}
-        style={{
-          overflowY: 'auto',
-          flexShrink: 0,
-        }}
-      >
-        <ReportTableInner
-          data={data}
-          monthsCount={monthsCount}
-          mode={mode}
-          groupBy={groupBy}
-          renderItem={renderItemTotal}
-        />
-      </Block>
+      <View>
+        <div ref={contentRef}>{children}</div>
+      </View>
     </View>
   );
 }
diff --git a/packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx
deleted file mode 100644
index bb1e108833a..00000000000
--- a/packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { memo } from 'react';
-
-import {
-  amountToCurrency,
-  amountToInteger,
-  integerToCurrency,
-} from 'loot-core/src/shared/util';
-
-import { styles, theme } from '../../style';
-import { Row, Cell } from '../table';
-
-import { type GroupedEntity } from './entities';
-
-type ReportTableColumnTotalsProps = {
-  item: GroupedEntity;
-  balanceTypeOp?: string;
-  groupByItem: string;
-  monthsCount: number;
-  mode: string;
-  style?: object;
-};
-
-const ReportTableColumnTotals = memo(
-  ({
-    item,
-    balanceTypeOp,
-    groupByItem,
-    monthsCount,
-    mode,
-    style,
-  }: ReportTableColumnTotalsProps) => {
-    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
-    return (
-      <Row
-        key={item[groupByItem]}
-        collapsed={true}
-        style={{
-          color: theme.tableText,
-          backgroundColor: theme.tableBackground,
-          ...style,
-        }}
-      >
-        {balanceTypeOp === 'totalTotals' && (
-          <>
-            <Cell
-              value={amountToCurrency(item.totalAssets)}
-              title={
-                Math.abs(item.totalAssets) > 100000 &&
-                amountToCurrency(item.totalAssets)
-              }
-              width="flex"
-              style={{
-                width: 85,
-                ...styles.tnum,
-              }}
-            />
-            <Cell
-              value={amountToCurrency(item.totalDebts)}
-              title={
-                Math.abs(item.totalDebts) > 100000 &&
-                amountToCurrency(item.totalDebts)
-              }
-              width="flex"
-              style={{
-                width: 85,
-                ...styles.tnum,
-              }}
-            />
-          </>
-        )}
-        <Cell
-          value={amountToCurrency(item[balanceTypeOp])}
-          title={
-            Math.abs(item[balanceTypeOp]) > 100000 &&
-            amountToCurrency(item[balanceTypeOp])
-          }
-          style={{
-            fontWeight: 600,
-            width: 85,
-            ...styles.tnum,
-          }}
-          privacyFilter
-        />
-        <Cell
-          value={integerToCurrency(Math.round(average))}
-          title={
-            Math.abs(Math.round(average / 100)) > 100000 &&
-            integerToCurrency(Math.round(average))
-          }
-          style={{
-            fontWeight: 600,
-            width: 85,
-            ...styles.tnum,
-          }}
-          privacyFilter
-        />
-      </Row>
-    );
-  },
-);
-
-export default ReportTableColumnTotals;
diff --git a/packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx b/packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx
deleted file mode 100644
index be1e32d6c8f..00000000000
--- a/packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-
-import { type CSSProperties, styles, theme } from '../../style';
-import View from '../common/View';
-import { Row, Cell } from '../table';
-
-import { type GroupedEntity } from './entities';
-
-type ReportTableColumnIndexProps = {
-  item?: GroupedEntity;
-  groupByItem?: string;
-  headerStyle?: CSSProperties;
-};
-
-function ReportTableColumnIndex({
-  item,
-  groupByItem,
-  headerStyle,
-}: ReportTableColumnIndexProps) {
-  return (
-    <>
-      <Row
-        collapsed={true}
-        style={{
-          color: theme.tableText,
-          backgroundColor: theme.tableBackground,
-          ...headerStyle,
-        }}
-      >
-        {item ? (
-          <Cell
-            value={item[groupByItem]}
-            width="flex"
-            title={item[groupByItem].length > 12 && item[groupByItem]}
-            style={{
-              minWidth: 125,
-              ...styles.tnum,
-            }}
-          />
-        ) : (
-          <Cell />
-        )}
-      </Row>
-      {item.categories && (
-        <>
-          <View>
-            {item.categories.map(cat => {
-              return (
-                <Row
-                  key={cat.id}
-                  collapsed={true}
-                  style={{
-                    color: theme.tableText,
-                    backgroundColor: theme.tableBackground,
-                  }}
-                >
-                  {cat ? (
-                    <Cell
-                      value={cat[groupByItem]}
-                      width="flex"
-                      title={cat[groupByItem].length > 12 && cat[groupByItem]}
-                      style={{
-                        minWidth: 125,
-                        ...styles.tnum,
-                      }}
-                    />
-                  ) : (
-                    <Cell />
-                  )}
-                </Row>
-              );
-            })}
-          </View>
-          <Row height={20} />
-        </>
-      )}
-    </>
-  );
-}
-
-export default ReportTableColumnIndex;
diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
index 20503097de4..983495d7370 100644
--- a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
@@ -1,119 +1,109 @@
-import React, { type UIEventHandler } from 'react';
-import { type RefProp } from 'react-spring';
+import React, { type Ref } from 'react';
+
+import * as d from 'date-fns';
 
 import { styles, theme } from '../../style';
 import View from '../common/View';
 import { Row, Cell } from '../table';
 
-import { type GroupedEntity } from './entities';
+import { type Month } from './entities';
 
 type ReportTableHeaderProps = {
   scrollWidth?: number;
   groupBy: string;
-  interval?: GroupedEntity[];
+  interval?: Month[];
   balanceType: string;
-  headerScrollRef: RefProp<HTMLDivElement>;
-  handleScroll: UIEventHandler<HTMLDivElement>;
+  headerScrollRef?: Ref<HTMLDivElement>;
 };
 
-function ReportTableHeader({
+export default function ReportTableHeader({
   scrollWidth,
   groupBy,
   interval,
   balanceType,
   headerScrollRef,
-  handleScroll,
 }: ReportTableHeaderProps) {
   return (
-    <Row
-      collapsed={true}
+    <View
+      innerRef={headerScrollRef}
       style={{
+        overflowX: 'auto',
+        scrollbarWidth: 'none',
+        '::-webkit-scrollbar': { display: 'none' },
         justifyContent: 'center',
         borderTopWidth: 1,
         borderColor: theme.tableBorder,
       }}
     >
-      <Cell
+      <Row
+        collapsed={true}
         style={{
-          width: 150,
-          flexShrink: 0,
-          ...styles.tnum,
+          color: theme.tableHeaderText,
+          backgroundColor: theme.tableHeaderBackground,
+          fontWeight: 600,
         }}
-        value={groupBy}
-      />
-      {interval ? (
-        <View
-          innerRef={headerScrollRef}
-          onScroll={handleScroll}
-          id={'header'}
+      >
+        <Cell
           style={{
-            overflowX: 'auto',
-            scrollbarWidth: 'none',
-            '::-webkit-scrollbar': { display: 'none' },
-            flexDirection: 'row',
-            flex: 1,
-            flexShrink: 1,
+            minWidth: 125,
+            ...styles.tnum,
           }}
-        >
-          {interval.map((header, index) => {
-            return (
-              <Cell
-                style={{
-                  minWidth: 85,
-                  ...styles.tnum,
-                }}
-                key={index}
-                value={header.date}
-                width="flex"
-              />
-            );
-          })}
-        </View>
-      ) : (
-        <Cell width="flex" />
-      )}
-      <View
-        style={{
-          flexDirection: 'row',
-          flexShrink: 0,
-        }}
-      >
-        {balanceType === 'Net' && (
-          <>
-            <Cell
-              style={{
-                width: 85,
-                ...styles.tnum,
-              }}
-              value={'Deposits'}
-            />
-            <Cell
-              style={{
-                width: 85,
-                ...styles.tnum,
-              }}
-              value={'Payments'}
-            />
-          </>
-        )}
+          value={groupBy}
+          width="flex"
+        />
+        {interval
+          ? interval.map((header, index) => {
+              return (
+                <Cell
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                  key={index}
+                  // eslint-disable-next-line rulesdir/typography
+                  value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
+                  width="flex"
+                />
+              );
+            })
+          : balanceType === 'Net' && (
+              <>
+                <Cell
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                  value={'Deposits'}
+                  width="flex"
+                />
+                <Cell
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                  value={'Payments'}
+                  width="flex"
+                />
+              </>
+            )}
         <Cell
           style={{
-            width: 85,
+            minWidth: 85,
             ...styles.tnum,
           }}
           value={'Totals'}
+          width="flex"
         />
         <Cell
           style={{
-            width: 85,
+            minWidth: 85,
             ...styles.tnum,
           }}
           value={'Average'}
+          width="flex"
         />
         {scrollWidth > 0 && <Cell width={scrollWidth} />}
-      </View>
-    </Row>
+      </Row>
+    </View>
   );
 }
-
-export default ReportTableHeader;
diff --git a/packages/desktop-client/src/components/reports/ReportTableInner.tsx b/packages/desktop-client/src/components/reports/ReportTableInner.tsx
deleted file mode 100644
index fb2454e53ca..00000000000
--- a/packages/desktop-client/src/components/reports/ReportTableInner.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-
-import { type CSSProperties, theme } from '../../style';
-import View from '../common/View';
-import { Cell, Row } from '../table';
-
-import { type GroupedEntity } from './entities';
-
-type ReportTableInnerProps = {
-  data: GroupedEntity[];
-  mode?: string;
-  monthsCount?: number;
-  groupBy: string;
-  renderItem;
-};
-
-function ReportTableInner({
-  data,
-  monthsCount,
-  mode,
-  groupBy,
-  renderItem,
-}: ReportTableInnerProps) {
-  const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
-
-  type RenderRowProps = {
-    key: string;
-    index: number;
-    parent_index?: number;
-    style?: CSSProperties;
-  };
-  function RenderRow({ index, parent_index, style, key }: RenderRowProps) {
-    let item;
-    if (parent_index != null) {
-      item = data[parent_index].categories[index];
-    } else {
-      item = data[index];
-    }
-
-    const rendered_row = renderItem({
-      item,
-      groupByItem,
-      mode,
-      monthsCount,
-      style,
-      key,
-    });
-
-    return rendered_row;
-  }
-
-  return (
-    <View>
-      {data.map((item, index) => {
-        return (
-          <View>
-            {data ? (
-              <>
-                <RenderRow
-                  key={item.id}
-                  index={index}
-                  style={
-                    item.categories && {
-                      color: theme.tableRowHeaderText,
-                      backgroundColor: theme.tableRowHeaderBackground,
-                      fontWeight: 600,
-                    }
-                  }
-                />
-                {item.categories && (
-                  <>
-                    <View>
-                      {item.categories.map((category, i) => {
-                        return (
-                          <RenderRow
-                            key={category.id}
-                            index={i}
-                            parent_index={index}
-                          />
-                        );
-                      })}
-                    </View>
-                    <Row height={20} />
-                  </>
-                )}
-              </>
-            ) : (
-              <Cell width="flex" />
-            )}
-          </View>
-        );
-      })}
-    </View>
-  );
-}
-
-export default ReportTableInner;
diff --git a/packages/desktop-client/src/components/reports/ReportTableList.tsx b/packages/desktop-client/src/components/reports/ReportTableList.tsx
new file mode 100644
index 00000000000..ddfdeca2c40
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportTableList.tsx
@@ -0,0 +1,243 @@
+import React, { memo } from 'react';
+
+import {
+  amountToCurrency,
+  amountToInteger,
+  integerToCurrency,
+} from 'loot-core/src/shared/util';
+
+import { type CSSProperties, styles, theme } from '../../style';
+import View from '../common/View';
+import { Row, Cell } from '../table';
+
+type TableRowProps = {
+  item: {
+    date: string;
+    name: string;
+    monthData: [];
+    totalAssets: number;
+    totalDebts: number;
+  };
+  balanceTypeOp?: string;
+  groupByItem: string;
+  mode: string;
+  monthsCount: number;
+  style?: CSSProperties;
+};
+
+const TableRow = memo(
+  ({
+    item,
+    balanceTypeOp,
+    groupByItem,
+    mode,
+    monthsCount,
+    style,
+  }: TableRowProps) => {
+    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
+    return (
+      <Row
+        key={item[groupByItem]}
+        collapsed={true}
+        style={{
+          color: theme.tableText,
+          backgroundColor: theme.tableBackground,
+          ...style,
+        }}
+      >
+        <Cell
+          value={item[groupByItem]}
+          width="flex"
+          title={item[groupByItem].length > 12 && item[groupByItem]}
+          style={{
+            minWidth: 125,
+            ...styles.tnum,
+          }}
+        />
+        {item.monthData && mode === 'time'
+          ? item.monthData.map(month => {
+              return (
+                <Cell
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                  key={amountToCurrency(month[balanceTypeOp])}
+                  value={amountToCurrency(month[balanceTypeOp])}
+                  title={
+                    Math.abs(month[balanceTypeOp]) > 100000 &&
+                    amountToCurrency(month[balanceTypeOp])
+                  }
+                  width="flex"
+                  privacyFilter
+                />
+              );
+            })
+          : balanceTypeOp === 'totalTotals' && (
+              <>
+                <Cell
+                  value={amountToCurrency(item.totalAssets)}
+                  title={
+                    Math.abs(item.totalAssets) > 100000 &&
+                    amountToCurrency(item.totalAssets)
+                  }
+                  width="flex"
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                />
+                <Cell
+                  value={amountToCurrency(item.totalDebts)}
+                  title={
+                    Math.abs(item.totalDebts) > 100000 &&
+                    amountToCurrency(item.totalDebts)
+                  }
+                  width="flex"
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                />
+              </>
+            )}
+        <Cell
+          value={amountToCurrency(item[balanceTypeOp])}
+          title={
+            Math.abs(item[balanceTypeOp]) > 100000 &&
+            amountToCurrency(item[balanceTypeOp])
+          }
+          style={{
+            fontWeight: 600,
+            minWidth: 85,
+            ...styles.tnum,
+          }}
+          width="flex"
+          privacyFilter
+        />
+        <Cell
+          value={integerToCurrency(Math.round(average))}
+          title={
+            Math.abs(Math.round(average / 100)) > 100000 &&
+            integerToCurrency(Math.round(average))
+          }
+          style={{
+            fontWeight: 600,
+            minWidth: 85,
+            ...styles.tnum,
+          }}
+          width="flex"
+          privacyFilter
+        />
+      </Row>
+    );
+  },
+);
+
+function GroupedTableRow({
+  item,
+  balanceTypeOp,
+  groupByItem,
+  mode,
+  monthsCount,
+  empty,
+}) {
+  return (
+    <>
+      <TableRow
+        key={item.id}
+        item={item}
+        balanceTypeOp={balanceTypeOp}
+        groupByItem={groupByItem}
+        mode={mode}
+        monthsCount={monthsCount}
+        style={{
+          color: theme.tableRowHeaderText,
+          backgroundColor: theme.tableRowHeaderBackground,
+          fontWeight: 600,
+        }}
+      />
+      <View>
+        {item.categories
+          .filter(i =>
+            !empty
+              ? balanceTypeOp === 'totalTotals'
+                ? i.totalAssets !== 0 ||
+                  i.totalDebts !== 0 ||
+                  i.totalTotals !== 0
+                : i[balanceTypeOp] !== 0
+              : true,
+          )
+          .map(cat => {
+            return (
+              <TableRow
+                key={cat.id}
+                item={cat}
+                balanceTypeOp={balanceTypeOp}
+                groupByItem={groupByItem}
+                mode={mode}
+                monthsCount={monthsCount}
+              />
+            );
+          })}
+      </View>
+      <Row height={20} />
+    </>
+  );
+}
+
+export default function ReportTableList({
+  data,
+  empty,
+  monthsCount,
+  balanceTypeOp,
+  mode,
+  groupBy,
+}) {
+  const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
+  const groupByData =
+    groupBy === 'Category'
+      ? 'groupedData'
+      : ['Month', 'Year'].includes(groupBy)
+      ? 'monthData'
+      : 'data';
+
+  return (
+    <View>
+      {data[groupByData]
+        .filter(i =>
+          !empty
+            ? balanceTypeOp === 'totalTotals'
+              ? i.totalAssets !== 0 || i.totalDebts !== 0 || i.totalTotals !== 0
+              : i[balanceTypeOp] !== 0
+            : true,
+        )
+        .map(item => {
+          if (groupBy === 'Category') {
+            return (
+              <GroupedTableRow
+                key={item.id}
+                item={item}
+                balanceTypeOp={balanceTypeOp}
+                groupByItem={groupByItem}
+                mode={mode}
+                monthsCount={monthsCount}
+                empty={empty}
+              />
+            );
+          } else {
+            return (
+              <TableRow
+                key={item.id}
+                item={item}
+                balanceTypeOp={balanceTypeOp}
+                groupByItem={groupByItem}
+                mode={mode}
+                monthsCount={monthsCount}
+              />
+            );
+          }
+        })}
+    </View>
+  );
+}
diff --git a/packages/desktop-client/src/components/reports/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/ReportTableRow.tsx
deleted file mode 100644
index 942a92db25f..00000000000
--- a/packages/desktop-client/src/components/reports/ReportTableRow.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { memo } from 'react';
-
-import { amountToCurrency } from 'loot-core/src/shared/util';
-
-import { styles, theme } from '../../style';
-import { Row, Cell } from '../table';
-
-import { type GroupedEntity } from './entities';
-
-type ReportTableRowProps = {
-  item: GroupedEntity;
-  balanceTypeOp?: string;
-  groupByItem: string;
-  mode: string;
-  style?: object;
-};
-
-const ReportTableRow = memo(
-  ({ item, balanceTypeOp, groupByItem, mode, style }: ReportTableRowProps) => {
-    return (
-      <Row
-        key={item[groupByItem]}
-        collapsed={true}
-        style={{
-          color: theme.tableText,
-          backgroundColor: theme.tableBackground,
-          ...style,
-        }}
-      >
-        {item.monthData &&
-          mode === 'time' &&
-          item.monthData.map(month => {
-            return (
-              <Cell
-                style={{
-                  minWidth: 85,
-                  ...styles.tnum,
-                }}
-                key={amountToCurrency(month[balanceTypeOp])}
-                value={amountToCurrency(month[balanceTypeOp])}
-                title={
-                  Math.abs(month[balanceTypeOp]) > 100000 &&
-                  amountToCurrency(month[balanceTypeOp])
-                }
-                width="flex"
-                privacyFilter
-              />
-            );
-          })}
-      </Row>
-    );
-  },
-);
-
-export default ReportTableRow;
diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
index cac42a1b3da..daf758ac335 100644
--- a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
@@ -1,4 +1,4 @@
-import React, { type UIEventHandler, useLayoutEffect, useState } from 'react';
+import React, { type UIEventHandler } from 'react';
 import { type RefProp } from 'react-spring';
 
 import {
@@ -20,178 +20,122 @@ type ReportTableTotalsProps = {
   mode: string;
   monthsCount: number;
   totalScrollRef: RefProp<HTMLDivElement>;
-  handleScroll: UIEventHandler<HTMLDivElement>;
+  handleScrollTotals: UIEventHandler<HTMLDivElement>;
 };
 
-function ReportTableTotals({
+export default function ReportTableTotals({
   data,
   scrollWidth,
   balanceTypeOp,
   mode,
   monthsCount,
   totalScrollRef,
-  handleScroll,
+  handleScrollTotals,
 }: ReportTableTotalsProps) {
-  const [scrollWidthTotals, setScrollWidthTotals] = useState(0);
-
-  useLayoutEffect(() => {
-    if (totalScrollRef.current) {
-      const [parent, child] = [
-        totalScrollRef.current.offsetParent
-          ? totalScrollRef.current.parentElement.scrollHeight
-          : 0,
-        totalScrollRef.current ? totalScrollRef.current.scrollHeight : 0,
-      ];
-      setScrollWidthTotals(parent > 0 && child > 0 && parent - child);
-    }
-  });
-
   const average = amountToInteger(data[balanceTypeOp]) / monthsCount;
   return (
-    <Row
-      collapsed={true}
-      height={32 + scrollWidthTotals}
+    <View
+      innerRef={totalScrollRef}
+      onScroll={handleScrollTotals}
       style={{
+        overflowX: 'auto',
         borderTopWidth: 1,
         borderColor: theme.tableBorder,
         justifyContent: 'center',
       }}
     >
-      <View
+      <Row
+        collapsed={true}
         style={{
-          width: 150,
-          flexShrink: 0,
-          ...styles.tnum,
+          color: theme.tableHeaderText,
+          backgroundColor: theme.tableHeaderBackground,
+          fontWeight: 600,
         }}
       >
         <Cell
           style={{
-            height: 32,
+            minWidth: 125,
+            ...styles.tnum,
           }}
           value={'Totals'}
+          width="flex"
         />
-        {scrollWidthTotals > 0 && (
-          <Cell
-            style={{
-              height: scrollWidthTotals,
-              color: theme.tableText,
-              backgroundColor: theme.tableBackground,
-              border: 'none',
-            }}
-          />
-        )}
-      </View>
-      {mode === 'time' ? (
-        <View
-          innerRef={totalScrollRef}
-          onScroll={handleScroll}
-          id={'total'}
+        {mode === 'time'
+          ? data.monthData.map(item => {
+              return (
+                <Cell
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                  key={amountToCurrency(item[balanceTypeOp])}
+                  value={amountToCurrency(item[balanceTypeOp])}
+                  title={
+                    Math.abs(item[balanceTypeOp]) > 100000 &&
+                    amountToCurrency(item[balanceTypeOp])
+                  }
+                  width="flex"
+                  privacyFilter
+                />
+              );
+            })
+          : balanceTypeOp === 'totalTotals' && (
+              <>
+                <Cell
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                  value={amountToCurrency(data.totalAssets)}
+                  title={
+                    Math.abs(data.totalAssets) > 100000 &&
+                    amountToCurrency(data.totalAssets)
+                  }
+                  width="flex"
+                />
+                <Cell
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                  value={amountToCurrency(data.totalDebts)}
+                  title={
+                    Math.abs(data.totalDebts) > 100000 &&
+                    amountToCurrency(data.totalDebts)
+                  }
+                  width="flex"
+                />
+              </>
+            )}
+        <Cell
           style={{
-            overflowX: 'auto',
-            flexDirection: 'row',
-            flex: 1,
+            minWidth: 85,
+            ...styles.tnum,
           }}
-        >
-          {data.monthData.map(item => {
-            return (
-              <Cell
-                style={{
-                  minWidth: 85,
-                  ...styles.tnum,
-                }}
-                key={amountToCurrency(item[balanceTypeOp])}
-                value={amountToCurrency(item[balanceTypeOp])}
-                title={
-                  Math.abs(item[balanceTypeOp]) > 100000 &&
-                  amountToCurrency(item[balanceTypeOp])
-                }
-                width="flex"
-                privacyFilter
-              />
-            );
-          })}
-        </View>
-      ) : (
-        <Cell width="flex" />
-      )}
-      <View
-        style={{
-          flexShrink: 0,
-          ...styles.tnum,
-        }}
-      >
-        <View
+          value={amountToCurrency(data[balanceTypeOp])}
+          title={
+            Math.abs(data[balanceTypeOp]) > 100000 &&
+            amountToCurrency(data[balanceTypeOp])
+          }
+          width="flex"
+          privacyFilter
+        />
+        <Cell
           style={{
-            flexDirection: 'row',
-            height: 32,
+            minWidth: 85,
+            ...styles.tnum,
           }}
-        >
-          {balanceTypeOp === 'totalTotals' && (
-            <>
-              <Cell
-                style={{
-                  width: 85,
-                  ...styles.tnum,
-                }}
-                value={amountToCurrency(data.totalAssets)}
-                title={
-                  Math.abs(data.totalAssets) > 100000 &&
-                  amountToCurrency(data.totalAssets)
-                }
-              />
-              <Cell
-                style={{
-                  width: 85,
-                  ...styles.tnum,
-                }}
-                value={amountToCurrency(data.totalDebts)}
-                title={
-                  Math.abs(data.totalDebts) > 100000 &&
-                  amountToCurrency(data.totalDebts)
-                }
-              />
-            </>
-          )}
-          <Cell
-            style={{
-              width: 85,
-              ...styles.tnum,
-            }}
-            value={amountToCurrency(data[balanceTypeOp])}
-            title={
-              Math.abs(data[balanceTypeOp]) > 100000 &&
-              amountToCurrency(data[balanceTypeOp])
-            }
-            privacyFilter
-          />
-          <Cell
-            style={{
-              width: 85,
-              ...styles.tnum,
-            }}
-            value={integerToCurrency(Math.round(average))}
-            title={
-              Math.abs(Math.round(average / 100)) > 100000 &&
-              integerToCurrency(Math.round(average))
-            }
-            privacyFilter
-          />
+          value={integerToCurrency(Math.round(average))}
+          title={
+            Math.abs(Math.round(average / 100)) > 100000 &&
+            integerToCurrency(Math.round(average))
+          }
+          width="flex"
+          privacyFilter
+        />
 
-          {scrollWidth > 0 && <Cell width={scrollWidth} />}
-        </View>
-        {scrollWidthTotals > 0 && (
-          <Cell
-            style={{
-              height: scrollWidthTotals,
-              color: theme.tableText,
-              backgroundColor: theme.tableBackground,
-              border: 'none',
-            }}
-          />
-        )}
-      </View>
-    </Row>
+        {scrollWidth > 0 && <Cell width={scrollWidth} />}
+      </Row>
+    </View>
   );
 }
-
-export default ReportTableTotals;
diff --git a/packages/desktop-client/src/components/reports/entities.d.ts b/packages/desktop-client/src/components/reports/entities.d.ts
index d7b54236bd7..cbd01affb52 100644
--- a/packages/desktop-client/src/components/reports/entities.d.ts
+++ b/packages/desktop-client/src/components/reports/entities.d.ts
@@ -1,7 +1,7 @@
 export type DataEntity = {
-  data: GroupedEntity[];
-  monthData: GroupedEntity[];
-  groupedData: GroupedEntity[];
+  data: Array<ItemEntity>;
+  monthData: Array<MonthData>;
+  groupedData: Array<GroupedEntity>;
   startDate: string;
   endDate: string;
   totalDebts: number;
@@ -25,16 +25,19 @@ type MonthData = {
   totalTotals: number;
 };
 
+/* this will be used in a future PR
+
 export type GroupedEntity = {
   id: string;
   name: string;
   date?: string;
-  monthData: MonthData[];
-  categories?: ItemEntity[];
+  monthData: Array<MonthData>;
+  categories?: Array<ItemEntity>;
   totalAssets: number;
   totalDebts: number;
   totalTotals: number;
 };
+*/
 
 export type Month = {
   month: string;

From 8179f85b4574153f09453d9675448fc5d1d86b17 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Wed, 13 Dec 2023 17:55:50 +0000
Subject: [PATCH 6/7] notes

---
 upcoming-release-notes/2080.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 upcoming-release-notes/2080.md

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.

From 14472c85bbae720c9b452186416d9a9d65156d6d Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Fri, 15 Dec 2023 10:26:27 +0000
Subject: [PATCH 7/7] updae names and improve flow

---
 .../src/components/reports/ReportSidebar.js   | 31 +++++++++----------
 .../reports/reports/CustomReport.js           |  6 ++--
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.js b/packages/desktop-client/src/components/reports/ReportSidebar.js
index 65f147b9f4c..347f3184f61 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.js
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.js
@@ -38,8 +38,8 @@ export function ReportSidebar({
   setBalanceType,
   mode,
   setMode,
-  datePaused,
-  setDatePaused,
+  isDateStatic,
+  setIsDateStatic,
   showEmpty,
   setShowEmpty,
   showOffBudgetHidden,
@@ -51,6 +51,7 @@ export function ReportSidebar({
   setSelectedCategories,
 }) {
   const onSelectRange = cond => {
+    setDateRange(cond);
     switch (cond) {
       case 'All time':
         onChangeDates(...getFullRange(allMonths));
@@ -82,15 +83,6 @@ export function ReportSidebar({
     }
   };
 
-  const onChangeDatePaused = cond => {
-    setDatePaused(cond);
-    if (cond === 'live') {
-      onSelectRange(dateRange);
-    } else {
-      onChangeDates(startDate, endDate);
-    }
-  };
-
   const onChangeMode = cond => {
     setMode(cond);
     if (cond === 'time') {
@@ -338,19 +330,25 @@ export function ReportSidebar({
           </Text>
           <View style={{ flex: 1 }} />
           <ModeButton
-            selected={datePaused === 'live'}
-            onSelect={() => onChangeDatePaused('live')}
+            selected={!isDateStatic}
+            onSelect={() => {
+              setIsDateStatic(false);
+              onSelectRange(dateRange);
+            }}
           >
             Live
           </ModeButton>
           <ModeButton
-            selected={datePaused === 'static'}
-            onSelect={() => onChangeDatePaused('static')}
+            selected={isDateStatic}
+            onSelect={() => {
+              setIsDateStatic(true);
+              onChangeDates(startDate, endDate);
+            }}
           >
             Static
           </ModeButton>
         </View>
-        {datePaused === 'live' ? (
+        {!isDateStatic ? (
           <View
             style={{
               flexDirection: 'row',
@@ -364,7 +362,6 @@ export function ReportSidebar({
             <Select
               value={dateRange}
               onChange={e => {
-                setDateRange(e);
                 onSelectRange(e);
               }}
               options={ReportOptions.dateRange.map(option => [
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js
index 0f6c555fc6c..01103a48532 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.js
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js
@@ -51,7 +51,7 @@ export default function CustomReport() {
   const [endDate, setEndDate] = useState(monthUtils.currentMonth());
 
   const [mode, setMode] = useState('total');
-  const [datePaused, setDatePaused] = useState('live');
+  const [isDateStatic, setIsDateStatic] = useState(false);
   const [groupBy, setGroupBy] = useState('Category');
   const [balanceType, setBalanceType] = useState('Payment');
   const [showEmpty, setShowEmpty] = useState(false);
@@ -212,8 +212,8 @@ export default function CustomReport() {
           setBalanceType={setBalanceType}
           mode={mode}
           setMode={setMode}
-          datePaused={datePaused}
-          setDatePaused={setDatePaused}
+          isDateStatic={isDateStatic}
+          setIsDateStatic={setIsDateStatic}
           showEmpty={showEmpty}
           setShowEmpty={setShowEmpty}
           showOffBudgetHidden={showOffBudgetHidden}