diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 4dca723153a..ec9630c0f36 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';
@@ -14,6 +15,17 @@ import ReportTableHeader from './ReportTableHeader';
 import ReportTableList from './ReportTableList';
 import ReportTableTotals from './ReportTableTotals';
 
+type ChooseGraphProps = {
+  data: DataEntity;
+  mode: string;
+  graphType: string;
+  balanceType: string;
+  groupBy: string;
+  empty: boolean;
+  scrollWidth: number;
+  setScrollWidth: (value: number) => void;
+  months: Month[];
+};
 export function ChooseGraph({
   data,
   mode,
@@ -24,7 +36,7 @@ export function ChooseGraph({
   scrollWidth,
   setScrollWidth,
   months,
-}) {
+}: ChooseGraphProps) {
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
   };
@@ -53,13 +65,12 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        empty={empty}
         balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
       />
     );
   }
   if (graphType === 'BarLineGraph') {
-    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />;
+    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data} />;
   }
   if (graphType === 'DonutGraph') {
     return (
@@ -67,13 +78,12 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        empty={empty}
         balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
       />
     );
   }
   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} />;
diff --git a/packages/desktop-client/src/components/reports/ReportOptions.tsx b/packages/desktop-client/src/components/reports/ReportOptions.tsx
index 69f0ef1626c..9c4d8113731 100644
--- a/packages/desktop-client/src/components/reports/ReportOptions.tsx
+++ b/packages/desktop-client/src/components/reports/ReportOptions.tsx
@@ -108,7 +108,7 @@ type UncategorizedGroupEntity = CategoryGroupEntity & {
   categories?: UncategorizedEntity[];
 };
 
-const uncategouncatGrouprizedGroup: UncategorizedGroupEntity = {
+const uncategorizedGroup: UncategorizedGroupEntity = {
   name: 'Uncategorized & Off Budget',
   id: null,
   hidden: false,
@@ -122,7 +122,7 @@ export const categoryLists = (
 ) => {
   const categoryList = showUncategorized
     ? [
-        ...categories.list,
+        ...categories.list.filter(f => showOffBudgetHidden || !f.hidden),
         uncategorizedCategory,
         transferCategory,
         offBudgetCategory,
@@ -131,7 +131,7 @@ export const categoryLists = (
   const categoryGroup = showUncategorized
     ? [
         ...categories.grouped.filter(f => showOffBudgetHidden || !f.hidden),
-        uncategouncatGrouprizedGroup,
+        uncategorizedGroup,
       ]
     : categories.grouped;
   return [categoryList, categoryGroup] as const;
diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
index a2aaee9f506..a19554aad4d 100644
--- a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
@@ -6,10 +6,12 @@ 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>;
 };
@@ -50,14 +52,14 @@ export default function ReportTableHeader({
           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"
diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
index f60a91b5ab5..daf758ac335 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 } from 'react';
+import { type RefProp } from 'react-spring';
 
 import {
   amountToCurrency,
@@ -10,6 +11,18 @@ import { styles, theme } from '../../style';
 import View from '../common/View';
 import { Row, Cell } from '../table';
 
+import { type DataEntity } from './entities';
+
+type ReportTableTotalsProps = {
+  data: DataEntity;
+  scrollWidth?: number;
+  balanceTypeOp: string;
+  mode: string;
+  monthsCount: number;
+  totalScrollRef: RefProp<HTMLDivElement>;
+  handleScrollTotals: UIEventHandler<HTMLDivElement>;
+};
+
 export default function ReportTableTotals({
   data,
   scrollWidth,
@@ -18,7 +31,7 @@ export default function ReportTableTotals({
   monthsCount,
   totalScrollRef,
   handleScrollTotals,
-}) {
+}: ReportTableTotalsProps) {
   const average = amountToInteger(data[balanceTypeOp]) / monthsCount;
   return (
     <View
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..cbd01affb52
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/entities.d.ts
@@ -0,0 +1,44 @@
+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;
+};
+
+/* this will be used in a future PR
+
+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/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
index 50022af9df1..59950f15b6e 100644
--- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -19,6 +19,7 @@ import { type CSSProperties } from '../../../style';
 import AlignedText from '../../common/AlignedText';
 import PrivacyFilter from '../../PrivacyFilter';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import numberFormatterTooltip from '../numberFormatter';
 
 type PayloadItem = {
@@ -92,7 +93,7 @@ const CustomTooltip = ({
 
 type AreaGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   balanceTypeOp: string;
   compact?: boolean;
 };
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index dd8b5558e83..2e9f992f84b 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -23,6 +23,7 @@ import AlignedText from '../../common/AlignedText';
 import PrivacyFilter from '../../PrivacyFilter';
 import { getColorScale } from '../chart-theme';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import getCustomTick from '../getCustomTick';
 import numberFormatterTooltip from '../numberFormatter';
 
@@ -129,10 +130,9 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
 
 type BarGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   groupBy: string;
   balanceTypeOp;
-  empty: boolean;
   compact?: boolean;
 };
 
@@ -140,7 +140,6 @@ function BarGraph({
   style,
   data,
   groupBy,
-  empty,
   balanceTypeOp,
   compact,
 }: BarGraphProps) {
@@ -178,9 +177,7 @@ function BarGraph({
                 width={width}
                 height={height}
                 stackOffset="sign"
-                data={data[splitData].filter(i =>
-                  !empty ? i[balanceTypeOp] !== 0 : true,
-                )}
+                data={data[splitData]}
                 margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
               >
                 {
@@ -218,33 +215,29 @@ function BarGraph({
                   <ReferenceLine y={0} stroke={theme.pageTextLight} />
                 )}
                 <Bar dataKey={val => getVal(val)} stackId="a">
-                  {data[splitData]
-                    .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true))
-                    .map((entry, index) => (
+                  {data[splitData].map((entry, index) => (
+                    <Cell
+                      key={`cell-${index}`}
+                      fill={
+                        yAxis === 'date'
+                          ? balanceTypeOp === 'totalDebts'
+                            ? theme.reportsRed
+                            : theme.reportsBlue
+                          : colorScale[index % colorScale.length]
+                      }
+                      name={entry[yAxis]}
+                    />
+                  ))}
+                </Bar>
+                {yAxis === 'date' && balanceTypeOp === 'totalTotals' && (
+                  <Bar dataKey={'totalDebts'} stackId="a">
+                    {data[splitData].map((entry, index) => (
                       <Cell
                         key={`cell-${index}`}
-                        fill={
-                          yAxis === 'date'
-                            ? balanceTypeOp === 'totalDebts'
-                              ? theme.reportsRed
-                              : theme.reportsBlue
-                            : colorScale[index % colorScale.length]
-                        }
-                        name={entry[yAxis]}
+                        fill={theme.reportsRed}
+                        name={entry.name}
                       />
                     ))}
-                </Bar>
-                {yAxis === 'date' && balanceTypeOp === 'totalTotals' && (
-                  <Bar dataKey={'totalDebts'} stackId="a">
-                    {data[splitData]
-                      .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true))
-                      .map((entry, index) => (
-                        <Cell
-                          key={`cell-${index}`}
-                          fill={theme.reportsRed}
-                          name={entry.name}
-                        />
-                      ))}
                   </Bar>
                 )}
               </BarChart>
diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
index a8ad506a00e..1fee824db3e 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,9 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
 
 type DonutGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   groupBy: string;
   balanceTypeOp: string;
-  empty: boolean;
   compact?: boolean;
 };
 
@@ -105,7 +105,6 @@ function DonutGraph({
   style,
   data,
   groupBy,
-  empty,
   balanceTypeOp,
   compact,
 }: DonutGraphProps) {
@@ -146,9 +145,7 @@ function DonutGraph({
                   dataKey={val => getVal(val)}
                   nameKey={yAxis}
                   isAnimationActive={false}
-                  data={data[splitData].filter(i =>
-                    !empty ? i[balanceTypeOp] !== 0 : true,
-                  )}
+                  data={data[splitData]}
                   innerRadius={Math.min(width, height) * 0.2}
                   fill="#8884d8"
                 >
diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
index 37e2b3ea41c..9839b26145c 100644
--- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -21,6 +21,7 @@ import AlignedText from '../../common/AlignedText';
 import PrivacyFilter from '../../PrivacyFilter';
 import { getColorScale } from '../chart-theme';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import getCustomTick from '../getCustomTick';
 import numberFormatterTooltip from '../numberFormatter';
 
@@ -115,7 +116,7 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
 
 type StackedBarGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   compact?: boolean;
 };
 
@@ -164,7 +165,7 @@ function StackedBarGraph({ style, data, compact }: StackedBarGraphProps) {
                 )}
                 {data.data.reverse().map((c, index) => (
                   <Bar
-                    key={c.date}
+                    key={c.name}
                     dataKey={c.name}
                     stackId="a"
                     fill={colorScale[index % colorScale.length]}
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js
index a8d1f3a42cf..900b181799e 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.js
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js
@@ -113,8 +113,10 @@ export default function CustomReport() {
       selectedCategories,
       filters,
       conditionsOp,
+      empty,
       hidden,
       uncat,
+      balanceTypeOp,
     });
   }, [
     start,
@@ -136,6 +138,7 @@ export default function CustomReport() {
       selectedCategories,
       filters,
       conditionsOp,
+      empty,
       hidden,
       uncat,
       groupBy,
@@ -155,6 +158,7 @@ export default function CustomReport() {
     accounts,
     filters,
     conditionsOp,
+    empty,
     hidden,
     uncat,
   ]);
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 47c1cf8cdb1..5d63b02e660 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
+++ b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
@@ -25,6 +25,7 @@ export type createSpreadsheetProps = {
   selectedCategories: CategoryEntity[];
   conditions: RuleConditionEntity[];
   conditionsOp: string;
+  empty: boolean;
   hidden: boolean;
   uncat: boolean;
   groupBy?: string;
@@ -41,6 +42,7 @@ export default function createSpreadsheet({
   selectedCategories,
   conditions = [],
   conditionsOp,
+  empty,
   hidden,
   uncat,
   groupBy,
@@ -163,8 +165,10 @@ export default function createSpreadsheet({
     });
 
     setData({
-      data: calcData,
-      monthData,
+      data: calcData.filter(i => (!empty ? i[balanceTypeOp] !== 0 : true)),
+      monthData: monthData.filter(i =>
+        !empty ? i[balanceTypeOp] !== 0 : true,
+      ),
       start,
       end,
       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 90d679c046e..445f60a92e5 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
@@ -17,8 +17,10 @@ function createGroupedSpreadsheet({
   selectedCategories,
   conditions = [],
   conditionsOp,
+  empty,
   hidden,
   uncat,
+  balanceTypeOp,
 }: createSpreadsheetProps) {
   const [catList, catGroup] = categoryLists(hidden, uncat, categories);
 
@@ -134,7 +136,7 @@ function createGroupedSpreadsheet({
       [start, end],
     );
 
-    setData(groupedData);
+    setData(groupedData.filter(i => (!empty ? i[balanceTypeOp] !== 0 : true)));
   };
 }
 
diff --git a/upcoming-release-notes/2067.md b/upcoming-release-notes/2067.md
new file mode 100644
index 00000000000..72b9a7d05f0
--- /dev/null
+++ b/upcoming-release-notes/2067.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Adding types for future typescript changes.