fix the error by adding colors to the report side (#42)

* [refactor] Migrate Schedules Table to typescript (actualbudget#1691)

* 🔧  removing unnecessary manual module resolution (actualbudget#1707)

* 🐛 (mobile) scrolling in lists with pull-to-refresh (actualbudget#1706)

* 💄 (mobile) updating apple home-screen icon (actualbudget#1705)

* Enhance Y-Axis Scaling on Net Worth Graph (actualbudget#1709)

* fix report budget, by adding in the goal coloring

---------

Co-authored-by: Mohamed Muhsin <[email protected]>
Co-authored-by: Matiss Janis Aboltins <[email protected]>
Co-authored-by: Crazypkr1099 <[email protected]>

package.json

@@ -57,9 +57,6 @@
     "source-map-support": "^0.5.21",
     "typescript": "^5.0.2"
   },
-  "resolutions": {
-    "react-error-overlay": "6.0.9"
-  },
   "engines": {
     "node": ">=18.0.0"
   },

packages/desktop-client/src/components/accounts/MobileAccountDetails.js

@@ -1,6 +1,5 @@
 import React, { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import { useActions } from '../../hooks/useActions';
 import Add from '../../icons/v1/Add';
@@ -12,6 +11,7 @@ import InputWithContent from '../common/InputWithContent';
 import Label from '../common/Label';
 import Text from '../common/Text';
 import View from '../common/View';
+import PullToRefresh from '../responsive/PullToRefresh';
 import CellValue from '../spreadsheet/CellValue';
 import { TransactionList } from '../transactions/MobileTransaction';
 

packages/desktop-client/src/components/accounts/MobileAccounts.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import * as queries from 'loot-core/src/client/queries';
 
@@ -14,6 +13,7 @@ import Text from '../common/Text';
 import TextOneLine from '../common/TextOneLine';
 import View from '../common/View';
 import { Page } from '../Page';
+import PullToRefresh from '../responsive/PullToRefresh';
 import CellValue from '../spreadsheet/CellValue';
 
 function AccountHeader({ name, amount, style = {} }) {

packages/desktop-client/src/components/budget/report/components.tsx

@@ -368,6 +368,8 @@ export const CategoryMonth = memo(function CategoryMonth({
               disabled={category.is_income}
               carryover={reportBudget.catCarryover(category.id)}
               balance={reportBudget.catBalance(category.id)}
+              goal={reportBudget.catGoal(category.id)}
+              budgeted={reportBudget.catBudgeted(category.id)}
             />
           </span>
           {balanceTooltip.isOpen && (

packages/desktop-client/src/components/common/Menu.tsx

@@ -37,7 +37,7 @@ type MenuProps = {
   header?: ReactNode;
   footer?: ReactNode;
   items: Array<MenuItem | typeof Menu.line>;
-  onMenuSelect;
+  onMenuSelect: (itemName: MenuItem['name']) => void;
 };
 
 export default function Menu({

packages/desktop-client/src/components/reports/NetWorth.js

@@ -43,7 +43,6 @@ export default function NetWorth() {
     [start, end, accounts, filters, conditionsOp],
   );
   const data = useReport('net_worth', params);
-
   useEffect(() => {
     async function run() {
       const trans = await send('get-earliest-transaction');
@@ -133,6 +132,9 @@ export default function NetWorth() {
           start={start}
           end={end}
           graphData={data.graphData}
+          domain={{
+            y: [data.lowestNetWorth * 0.99, data.highestNetWorth * 1.01],
+          }}
         />
 
         <View style={{ marginTop: 30 }}>

packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx

@@ -21,8 +21,16 @@ type NetWorthGraphProps = {
   style?: CSSProperties;
   graphData;
   compact: boolean;
+  domain?: {
+    y?: [number, number];
+  };
 };
-function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
+function NetWorthGraph({
+  style,
+  graphData,
+  compact,
+  domain,
+}: NetWorthGraphProps) {
   const Chart = compact ? VictoryGroup : VictoryChart;
 
   return (
@@ -38,6 +46,7 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
             scale={{ x: 'time', y: 'linear' }}
             theme={chartTheme}
             domainPadding={{ x: 0, y: 10 }}
+            domain={domain}
             width={width}
             height={height}
             containerComponent={

packages/desktop-client/src/components/reports/graphs/net-worth-spreadsheet.tsx

@@ -93,6 +93,8 @@ function recalculate(data, start, end) {
   let hasNegative = false;
   let startNetWorth = 0;
   let endNetWorth = 0;
+  let lowestNetWorth = null;
+  let highestNetWorth = null;
 
   const graphData = months.reduce((arr, month, idx) => {
     let debt = 0;
@@ -140,6 +142,15 @@ function recalculate(data, start, end) {
     endNetWorth = total;
 
     arr.push({ x, y: integerToAmount(total), premadeLabel: label });
+
+    arr.forEach(item => {
+      if (item.y < lowestNetWorth || lowestNetWorth === null) {
+        lowestNetWorth = item.y;
+      }
+      if (item.y > highestNetWorth || highestNetWorth === null) {
+        highestNetWorth = item.y;
+      }
+    });
     return arr;
   }, []);
 
@@ -152,5 +163,7 @@ function recalculate(data, start, end) {
     },
     netWorth: endNetWorth,
     totalChange: endNetWorth - startNetWorth,
+    lowestNetWorth,
+    highestNetWorth,
   };
 }

packages/desktop-client/src/components/responsive/PullToRefresh.tsx

@@ -0,0 +1,28 @@
+import React, { type ComponentProps } from 'react';
+import BasePullToRefresh from 'react-simple-pull-to-refresh';
+
+import { css } from 'glamor';
+
+type PullToRefreshProps = ComponentProps<typeof BasePullToRefresh>;
+
+export default function PullToRefresh(props: PullToRefreshProps) {
+  return (
+    <div style={{ overflow: 'auto' }}>
+      <BasePullToRefresh
+        pullDownThreshold={80}
+        resistance={2}
+        className={String(
+          css({
+            '& .ptr__pull-down': {
+              textAlign: 'center',
+            },
+            '& .ptr__children': {
+              overflow: 'hidden auto',
+            },
+          }),
+        )}
+        {...props}
+      />
+    </div>
+  );
+}