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] 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;