Refactor/code style and optimizations

pages/_app.tsx

@@ -5,20 +5,21 @@ import React, { useEffect } from 'react';
 import { CookiesProvider } from 'react-cookie';
 import { Provider } from 'react-redux';
 import ErrorBoundary from '@/components/Error/ErrorBoundary';
+import { CURRENT_ENVIRONMENT } from '@/config/endpoints';
+import { siteRoutes } from '@/config/routes';
+import { AuthContextProvider } from '@/core/context/AuthContext';
+import { CookiesProviderTracking } from '@/core/context/CookiesContext';
+import { FeatureFlagsProvider } from '@/core/context/FeatureFlagsProvider';
+import { ThemeProvider } from '@/core/context/ThemeContext';
+import { store } from '@/core/store/store';
+import { getAuthFromStorage } from '@/core/utils/authStorage';
+import { parseCookie } from '@/core/utils/cookieHelpers';
+import * as gtag from '@/core/utils/gtag';
+import type { CookiesInterface } from '@/core/utils/typesHelpers';
+import { ContainerNotification } from '@/stories/components/Notification/Notification';
+import { SEOHead } from '@/stories/components/SEOHead/SEOHead';
+import AppLayout from '@/stories/containers/AppLayout/AppLayout';
 import { featureFlags } from '../feature-flags/feature-flags';
-import { CURRENT_ENVIRONMENT } from '../src/config/endpoints';
-import { AuthContextProvider } from '../src/core/context/AuthContext';
-import { CookiesProviderTracking } from '../src/core/context/CookiesContext';
-import { FeatureFlagsProvider } from '../src/core/context/FeatureFlagsProvider';
-import { ThemeProvider } from '../src/core/context/ThemeContext';
-import { store } from '../src/core/store/store';
-import { getAuthFromStorage } from '../src/core/utils/authStorage';
-import { parseCookie } from '../src/core/utils/cookieHelpers';
-import * as gtag from '../src/core/utils/gtag';
-import { ContainerNotification } from '../src/stories/components/Notification/Notification';
-import { SEOHead } from '../src/stories/components/SEOHead/SEOHead';
-import AppLayout from '../src/stories/containers/AppLayout/AppLayout';
-import type { CookiesInterface } from '../src/core/utils/typesHelpers';
 import type { EmotionCache } from '@emotion/react';
 import type { NextPage, NextPageContext } from 'next';
 import type { AppProps } from 'next/app';
@@ -59,7 +60,7 @@ function MyApp(props: MyAppProps) {
   useEffect(() => {
     const authData = getAuthFromStorage();
     if (props.pageProps?.protected && (isEmpty(authData) || !authData?.authToken)) {
-      router.push('/login');
+      router.push(siteRoutes.login);
     }
   }, [props.pageProps?.protected, router]);
 

src/components/AdvancedInnerTable/AdvancedInnerTable.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material';
 import React, { useId } from 'react';
-import { OpenModalTransparency } from '@/views/CoreUnitBudgetStatement/BudgetStatementtUtils';
+import { OpenModalTransparency } from '@/views/CoreUnitBudgetStatement/BudgetStatementUtils';
 import { TransparencyEmptyTable } from '@/views/CoreUnitBudgetStatement/components/Placeholders/TransparencyEmptyTable';
 import { NumberCell } from './NumberCell/NumberCell';
 import { TextCell } from './TextCell/TextCell';

src/components/AdvancedInnerTable/BasicModal/useModalCategory.ts

@@ -1,4 +1,5 @@
-import _ from 'lodash';
+import has from 'lodash/has';
+import some from 'lodash/some';
 import { useCallback, useMemo, useState } from 'react';
 import type { ExpenseCategory, ParsedExpenseCategoryWithExpanded } from '@ses/core/models/dto/expenseCategoriesDTO';
 
@@ -50,9 +51,9 @@ export const useModalCategory = (expenseCategories: ExpenseCategory[] = []) => {
     if (category) {
       setAllCategory(category);
     }
-    const hasExpandedElement = _.some(
+    const hasExpandedElement = some(
       allCategory,
-      (element) => _.has(element, 'isExpanded') && element.isExpanded === true
+      (element) => has(element, 'isExpanded') && element.isExpanded === true
     );
 
     if (hasExpandedElement) {

src/components/BudgetStatement/BudgetStatementActuals/BreakdownActualsSection/BreakdownActualsSection.stories.tsx

@@ -1,6 +1,6 @@
 import { DateTime } from 'luxon';
 import { createThemeModeVariants } from '@/core/utils/storybook/factories';
-import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementtUtils';
+import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementUtils';
 import BreakdownSection from './BreakdownActualsSection';
 import type { Meta } from '@storybook/react';
 

src/components/BudgetStatement/BudgetStatementActuals/TotalActualSection/TotalActualSection.stories.tsx

@@ -3,7 +3,7 @@ import type { InnerTableColumn, InnerTableRow } from '@/components/AdvancedInner
 import { InnerTableColumnBuilder } from '@/core/businessLogic/tableBuilderColumns';
 import { InnerTableRowBuilder } from '@/core/businessLogic/tableBuilderRow';
 import { createThemeModeVariants } from '@/core/utils/storybook/factories';
-import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementtUtils';
+import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementUtils';
 import TotalWalletSections from './TotalActualSection';
 import type { Meta } from '@storybook/react';
 const mainTableColumns = [

src/components/BudgetStatement/BudgetStatementActuals/useBudgetStatementActuals.ts

@@ -1,12 +1,12 @@
 import { useCategoriesModalContext } from '@ses/core/context/CategoryModalContext';
 import { API_MONTH_TO_FORMAT } from '@ses/core/utils/date';
 import { capitalizeSentence, getWalletWidthForWallets, toKebabCase } from '@ses/core/utils/string';
-import _ from 'lodash';
+import sortBy from 'lodash/sortBy';
+import sumBy from 'lodash/sumBy';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { InnerTableColumn, InnerTableRow } from '@/components/AdvancedInnerTable/types';
-
-import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementtUtils';
+import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementUtils';
 import {
   getActualsBreakdownColumns,
   getActualsBreakdownItemsForWallet,
@@ -54,7 +54,7 @@ export const useBudgetStatementActuals = (
       }
     });
 
-    return _.sortBy(Object.values(dict), 'id');
+    return sortBy(Object.values(dict), 'id');
   }, [propsCurrentMonth, budgetStatements]);
 
   const currentBudgetStatement = useMemo(
@@ -66,8 +66,8 @@ export const useBudgetStatementActuals = (
 
   const budgetTotalMonthlyBudget = useMemo(
     () =>
-      _.sumBy(currentBudgetStatement?.budgetStatementWallet, (wallet) =>
-        _.sumBy(
+      sumBy(currentBudgetStatement?.budgetStatementWallet, (wallet) =>
+        sumBy(
           wallet.budgetStatementLineItem.filter((item) => item.month === currentMonth),
           (item) => item?.budgetCap ?? 0
         )
@@ -77,8 +77,8 @@ export const useBudgetStatementActuals = (
 
   const budgetTotalForecast = useMemo(
     () =>
-      _.sumBy(currentBudgetStatement?.budgetStatementWallet, (wallet) =>
-        _.sumBy(
+      sumBy(currentBudgetStatement?.budgetStatementWallet, (wallet) =>
+        sumBy(
           wallet.budgetStatementLineItem.filter((item) => item.month === currentMonth),
           (item) => item?.forecast ?? 0
         )
@@ -88,8 +88,8 @@ export const useBudgetStatementActuals = (
 
   const budgetTotalActual = useMemo(
     () =>
-      _.sumBy(currentBudgetStatement?.budgetStatementWallet, (wallet) =>
-        _.sumBy(
+      sumBy(currentBudgetStatement?.budgetStatementWallet, (wallet) =>
+        sumBy(
           wallet.budgetStatementLineItem.filter((item) => item.month === currentMonth),
           (item) => item?.actual ?? 0
         )
@@ -99,8 +99,8 @@ export const useBudgetStatementActuals = (
 
   const budgetTotalPayment = useMemo(
     () =>
-      _.sumBy(currentBudgetStatement?.budgetStatementWallet, (wallet) =>
-        _.sumBy(
+      sumBy(currentBudgetStatement?.budgetStatementWallet, (wallet) =>
+        sumBy(
           wallet.budgetStatementLineItem.filter((item) => item.month === currentMonth),
           (item) => item?.payment ?? 0
         )

src/components/BudgetStatement/BudgetStatementForecast/ForecastBreakdownSection/ForecastBreakdownSection.stories.tsx

@@ -1,7 +1,7 @@
 import { DateTime } from 'luxon';
 import { createThemeModeVariants } from '@/core/utils/storybook/factories';
-import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementtUtils';
-import ProgressiveIndicator from '../ProgresiveIndicator';
+import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementUtils';
+import ProgressiveIndicator from '../ProgressiveIndicator';
 import ForecastBreakdownSection from './ForecastBreakdownSection';
 import type { Meta } from '@storybook/react';
 

src/components/BudgetStatement/BudgetStatementForecast/TotalForecastSection/TotalForecastSection.stories.tsx

@@ -4,9 +4,9 @@ import type { InnerTableColumn, InnerTableRow } from '@/components/AdvancedInner
 import { InnerTableRowBuilder } from '@/core/businessLogic/tableBuilderRow';
 import { createThemeModeVariants } from '@/core/utils/storybook/factories';
 
-import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementtUtils';
+import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementUtils';
 import HeaderWithIcon from '../HeaderWithIcon/HeaderWithIcon';
-import ProgressiveIndicator from '../ProgresiveIndicator';
+import ProgressiveIndicator from '../ProgressiveIndicator';
 import TotalForecastSection from './TotalForecastSection';
 import type { Meta } from '@storybook/react';
 

src/components/BudgetStatement/BudgetStatementForecast/useBudgetStatementForecast.tsx

@@ -1,14 +1,13 @@
 import { styled } from '@mui/material';
 import { API_MONTH_TO_FORMAT } from '@ses/core/utils/date';
 import { capitalizeSentence, getWalletWidthForWallets, toKebabCase } from '@ses/core/utils/string';
-
-import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import sortBy from 'lodash/sortBy';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { InnerTableColumn, InnerTableRow } from '@/components/AdvancedInnerTable/types';
-
 import HeaderWithIcon from '@/components/BudgetStatement/BudgetStatementForecast/HeaderWithIcon/HeaderWithIcon';
-import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementtUtils';
+import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementUtils';
 import {
   getBudgetCapForMonthOnBudgetStatement,
   getBudgetCapForMonthOnWalletOnBudgetStatement,
@@ -31,8 +30,7 @@ import {
   getForecastBreakdownColumns,
 } from '@/views/CoreUnitBudgetStatement/utils/forecastTableHelpers';
 import replacePaymentTopup from '@/views/CoreUnitBudgetStatement/utils/helpers';
-import ProgressiveIndicator from './ProgresiveIndicator';
-
+import ProgressiveIndicator from './ProgressiveIndicator';
 import type { BudgetStatement } from '@ses/core/models/interfaces/budgetStatement';
 import type { BudgetStatementWallet } from '@ses/core/models/interfaces/budgetStatementWallet';
 import type { DateTime } from 'luxon';
@@ -59,7 +57,7 @@ export const useBudgetStatementForecast = (currentMonth: DateTime, budgetStateme
       }
     });
 
-    return _.sortBy(Object.values(dict), 'id');
+    return sortBy(Object.values(dict), 'id');
   }, [currentMonth, budgetStatements]);
 
   const breakdownTabs = useMemo(() => {
@@ -79,7 +77,7 @@ export const useBudgetStatementForecast = (currentMonth: DateTime, budgetStateme
   const breakdownTitleRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (selectedBreakdown && !_.isEmpty(headerIds)) {
+    if (selectedBreakdown && !isEmpty(headerIds)) {
       setThirdIndex(Math.max(headerIds.indexOf(selectedBreakdown), 0));
     }
   }, [selectedBreakdown, headerIds]);

src/components/BudgetStatement/BudgetStatementMkrVesting/useBudgetStatementMkrVesting.tsx

@@ -1,5 +1,7 @@
 import { API_MONTH_TO_FORMAT } from '@ses/core/utils/date';
-import _ from 'lodash';
+import first from 'lodash/first';
+import orderBy from 'lodash/orderBy';
+import sumBy from 'lodash/sumBy';
 import { useMemo } from 'react';
 import type { InnerTableColumn, InnerTableRow } from '@/components/AdvancedInnerTable/types';
 import ToolTipMkrVesting from './ToolTipMkrVesting';
@@ -24,19 +26,19 @@ export const useTransparencyMkrVesting = (currentMonth: DateTime, budgetStatemen
       return [];
     }
 
-    return _.sumBy(currentBudgetStatement?.budgetStatementMKRVest ?? [], (mkr) => mkr.mkrAmount);
+    return sumBy(currentBudgetStatement?.budgetStatementMKRVest ?? [], (mkr) => mkr.mkrAmount);
   }, [currentMonth, budgetStatements, currentBudgetStatement?.budgetStatementMKRVest]);
 
   const totalOldAmount = useMemo(() => {
     if (!currentMonth || !budgetStatements || !budgetStatements.length) {
       return [];
     }
 
-    return _.sumBy(currentBudgetStatement?.budgetStatementMKRVest ?? [], (mkr) => mkr.mkrAmountOld);
+    return sumBy(currentBudgetStatement?.budgetStatementMKRVest ?? [], (mkr) => mkr.mkrAmountOld);
   }, [currentMonth, budgetStatements, currentBudgetStatement?.budgetStatementMKRVest]);
 
   const fTEs = useMemo(
-    () => _.first(currentBudgetStatement?.budgetStatementFTEs)?.ftes ?? 'N/A',
+    () => first(currentBudgetStatement?.budgetStatementFTEs)?.ftes ?? 'N/A',
     [currentBudgetStatement?.budgetStatementFTEs]
   );
 
@@ -76,7 +78,7 @@ export const useTransparencyMkrVesting = (currentMonth: DateTime, budgetStatemen
   const mainTableItems: InnerTableRow[] = useMemo(() => {
     const result: InnerTableRow[] = [];
 
-    const mkrVestingsOrdered = _.orderBy(mkrVestings, 'vestingDate', 'asc');
+    const mkrVestingsOrdered = orderBy(mkrVestings, 'vestingDate', 'asc');
 
     mkrVestingsOrdered.forEach((mkrVesting) => {
       result.push({

src/components/BudgetStatement/BudgetStatementTransferRequest/components/TransferRequestSection/TransferRequestSection.stories.tsx

@@ -1,7 +1,7 @@
 import { DateTime } from 'luxon';
 import type { InnerTableColumn, InnerTableRow } from '@/components/AdvancedInnerTable/types';
 import { createThemeModeVariants } from '@/core/utils/storybook/factories';
-import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementtUtils';
+import { renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementUtils';
 import { TargetValueThreeMonths } from '../TargetValueThreeMonths/TargetValueThreeMonths';
 import TransferRequestSection from './TransferRequestSection';
 import type { Meta } from '@storybook/react';

src/components/BudgetStatement/BudgetStatementTransferRequest/useBudgetStatementTransferRequest.tsx

@@ -3,7 +3,7 @@ import { formatNumber } from '@ses/core/utils/string';
 import { DateTime } from 'luxon';
 import { useCallback, useMemo } from 'react';
 import type { InnerTableColumn, InnerTableRow } from '@/components/AdvancedInnerTable/types';
-import { TotalTargetBalance, renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementtUtils';
+import { TotalTargetBalance, renderWallet } from '@/views/CoreUnitBudgetStatement/BudgetStatementUtils';
 import { useBudgetStatementForecast } from '../BudgetStatementForecast/useBudgetStatementForecast';
 
 import { TargetValueThreeMonths } from './components/TargetValueThreeMonths/TargetValueThreeMonths';

src/core/businessLogic/coreUnits.ts

@@ -1,4 +1,6 @@
-import _ from 'lodash';
+import orderBy from 'lodash/orderBy';
+import sortBy from 'lodash/sortBy';
+import sum from 'lodash/sum';
 import { DateTime, Interval } from 'luxon';
 import { LinkTypeEnum } from '../enums/linkTypeEnum';
 import { BudgetStatus } from '../models/dto/coreUnitDTO';
@@ -126,7 +128,7 @@ const getLatestBudgetStatementWithFTE = (budgetStatements: BudgetStatement[]): B
     });
   });
 
-  const orderBudget = _.orderBy(arrayItemsFts, 'month');
+  const orderBudget = orderBy(arrayItemsFts, 'month');
   return orderBudget.length > 0 ? orderBudget[orderBudget.length - 1] : null;
 };
 
@@ -227,7 +229,7 @@ export const getExpenditureAmountFromCoreUnit = (cu: CoreUnit) => {
 
 export const getPercentFromCoreUnit = (cu: CoreUnit) => {
   const value = getExpenditureValueFromCoreUnit(cu);
-  const budgetCap = _.sum(getBudgetCapsFromCoreUnit(cu));
+  const budgetCap = sum(getBudgetCapsFromCoreUnit(cu));
 
   if (value === 0) return 0;
   if (budgetCap === 0) return 0;
@@ -255,7 +257,7 @@ export const getLast3ExpenditureValuesFromCoreUnit = (cu: CoreUnit) => {
 export const getCurrentOrLastMonthWithData = (budgetStatements: BudgetStatement[]) => {
   const currentMonth = DateTime.now().startOf('month');
 
-  const orderedStatements = _.sortBy(budgetStatements, (bs) => bs.month).reverse();
+  const orderedStatements = sortBy(budgetStatements, (bs) => bs.month).reverse();
 
   for (const bs of orderedStatements) {
     for (const wallet of bs.budgetStatementWallet) {
@@ -278,8 +280,8 @@ export const getLastMonthWithActualOrForecast = (budgetStatements: BudgetStateme
   // The budget statements should be provided in a descending date order but
   // it's better to order it client side to avoid future issues
   const orderedStatements = ascending
-    ? _.sortBy(budgetStatements, (bs) => bs.month)
-    : _.sortBy(budgetStatements, (bs) => bs.month).reverse();
+    ? sortBy(budgetStatements, (bs) => bs.month)
+    : sortBy(budgetStatements, (bs) => bs.month).reverse();
 
   for (const bs of orderedStatements) {
     for (const wallet of bs.budgetStatementWallet) {
@@ -309,15 +311,15 @@ export const getLastUpdateForBudgetStatement = (element: WithActivityFeed, budge
 
   if (!activityFeed?.length) return undefined;
 
-  _.sortBy(activityFeed, (af) => af.created_at).reverse();
+  sortBy(activityFeed, (af) => af.created_at).reverse();
 
   return DateTime.fromISO(activityFeed[0].created_at);
 };
 
 export const getLast3MonthsWithData = (budgetStatements: BudgetStatement[]) => {
   // The budget statements should be provided in a descending date order but
   // it's better to order it client side to avoid future issues
-  const orderedStatements = _.sortBy(budgetStatements, (bs) => bs.month).reverse();
+  const orderedStatements = sortBy(budgetStatements, (bs) => bs.month).reverse();
 
   for (const bs of orderedStatements) {
     for (const wallet of bs.budgetStatementWallet) {