Moving component NavReportsList to shared folder and adding new Preferences types

pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx

@@ -3,13 +3,16 @@ import Head from 'next/head';
 import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { DesignationAccountsReport } from 'src/components/Reports/DesignationAccountsReport/DesignationAccountsReport';
-import Loading from 'src/components/Loading';
-import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
 import { suggestArticles } from 'src/lib/helpScout';
+import Loading from 'src/components/Loading';
+import { DesignationAccountsReport } from 'src/components/Reports/DesignationAccountsReport/DesignationAccountsReport';
+import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 
 const DesignationAccountsReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -42,12 +45,13 @@ const DesignationAccountsReportPage: React.FC = () => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="designationAccounts"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx

@@ -4,16 +4,19 @@ import { useRouter } from 'next/router';
 import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { DonationsReport } from 'src/components/Reports/DonationsReport/DonationsReport';
-import Loading from 'src/components/Loading';
-import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
 import { getQueryParam } from 'src/utils/queryParam';
-import { ContactsPage } from '../../contacts/ContactsPage';
-import { ContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/ContactsRightPanel';
 import { suggestArticles } from 'src/lib/helpScout';
+import { DonationsReport } from 'src/components/Reports/DonationsReport/DonationsReport';
+import Loading from 'src/components/Loading';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
+import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
+import { ContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/ContactsRightPanel';
+import { ContactsPage } from '../../contacts/ContactsPage';
 
 const DonationsReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -55,12 +58,13 @@ const DonationsReportPage: React.FC = () => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="donations"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

pages/accountLists/[accountListId]/reports/expectedMonthlyTotal.page.tsx

@@ -3,14 +3,17 @@ import Head from 'next/head';
 import { useTranslation } from 'react-i18next';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { ExpectedMonthlyTotalReportHeader } from '../../../../src/components/Reports/ExpectedMonthlyTotalReport/Header/ExpectedMonthlyTotalReportHeader';
-import Loading from '../../../../src/components/Loading';
-import { useAccountListId } from '../../../../src/hooks/useAccountListId';
+import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { ExpectedMonthlyTotalReport } from '../../../../src/components/Reports/ExpectedMonthlyTotalReport/ExpectedMonthlyTotalReport';
 import { suggestArticles } from 'src/lib/helpScout';
+import Loading from 'src/components/Loading';
+import { ExpectedMonthlyTotalReportHeader } from 'src/components/Reports/ExpectedMonthlyTotalReport/Header/ExpectedMonthlyTotalReportHeader';
+import { ExpectedMonthlyTotalReport } from 'src/components/Reports/ExpectedMonthlyTotalReport/ExpectedMonthlyTotalReport';
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 
 const ExpectedMonthlyTotalReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -43,12 +46,13 @@ const ExpectedMonthlyTotalReportPage = (): ReactElement => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="expectedMonthlyTotal"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx

@@ -6,13 +6,16 @@ import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { FourteenMonthReportCurrencyType } from '../../../../../graphql/types.generated';
 import { FourteenMonthReport } from 'src/components/Reports/FourteenMonthReports/FourteenMonthReport';
+import { suggestArticles } from 'src/lib/helpScout';
+import { getQueryParam } from 'src/utils/queryParam';
 import Loading from 'src/components/Loading';
-import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
-import { suggestArticles } from 'src/lib/helpScout';
-import { getQueryParam } from 'src/utils/queryParam';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
+import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { ContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/ContactsRightPanel';
 import { ContactsPage } from '../../contacts/ContactsPage';
 
@@ -55,12 +58,13 @@ const PartnerCurrencyReportPage: React.FC = () => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="partnerCurrency"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx

@@ -8,8 +8,11 @@ import Loading from 'src/components/Loading';
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
 import { suggestArticles } from 'src/lib/helpScout';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 
 const ResponsibilityCentersReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -42,12 +45,13 @@ const ResponsibilityCentersReportPage: React.FC = () => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="responsibilityCenters"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx

@@ -10,7 +10,10 @@ import Loading from 'src/components/Loading';
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { ContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/ContactsRightPanel';
@@ -55,12 +58,13 @@ const SalaryCurrencyReportPage: React.FC = () => {
           <SidePanelsLayout
             isScrollBox={false}
             leftPanel={
-              <NavReportsList
+              <MultiPageMenu
                 isOpen={isNavListOpen}
                 selectedId="salaryCurrency"
                 onClose={handleNavListToggle}
                 designationAccounts={designationAccounts}
                 setDesignationAccounts={setDesignationAccounts}
+                navType={NavTypeEnum.Reports}
               />
             }
             leftOpen={isNavListOpen}

src/components/Layouts/Primary/NavBar/NavBar.tsx

@@ -5,10 +5,8 @@ import { makeStyles } from 'tss-react/mui';
 import { useRouter } from 'next/router';
 import NextLink, { LinkProps } from 'next/link';
 import { useTranslation } from 'react-i18next';
-import {
-  filteredReportNavItems,
-  toolsRedirectLinks,
-} from '../TopBar/Items/NavMenu/NavMenu';
+import { toolsRedirectLinks } from '../TopBar/Items/NavMenu/NavMenu';
+import { reportNavItems } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems';
 import { NavItem } from './NavItem/NavItem';
 import { NavTools } from './NavTools/NavTools';
 import { ToolsList } from 'src/components/Tool/Home/ToolList';
@@ -133,7 +131,7 @@ export const NavBar: FC<NavBarProps> = ({ onMobileClose, openMobile }) => {
     },
     {
       title: t('Reports'),
-      items: filteredReportNavItems.map((item) => ({
+      items: reportNavItems.map((item) => ({
         ...item,
         title: item.title,
         href: `/accountLists/${accountListId}/reports/${item.id}`,

src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx

@@ -18,7 +18,7 @@ import NextLink from 'next/link';
 import { useTranslation } from 'react-i18next';
 import Icon from '@mdi/react';
 import { useRouter } from 'next/router';
-import { ReportNavItems } from '../../../../../Reports/NavReportsList/ReportNavItems';
+import { reportNavItems } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems';
 import { ToolsList } from '../../../../../Tool/Home/ToolList';
 import { useCurrentToolId } from '../../../../../../hooks/useCurrentToolId';
 import theme from '../../../../../../theme';
@@ -27,8 +27,6 @@ import { useGetToolNotificationsQuery } from './GetToolNotifcations.generated';
 import HandoffLink from 'src/components/HandoffLink';
 import { ReportLink } from './ReportLink';
 
-export const filteredReportNavItems = ReportNavItems;
-
 const useStyles = makeStyles()(() => ({
   navListItem: {
     order: 2,
@@ -252,7 +250,7 @@ const NavMenu: React.FC = () => {
               <Paper>
                 <ClickAwayListener onClickAway={handleReportsMenuClose}>
                   <MenuList autoFocusItem={reportsMenuOpen} id="menu-list-grow">
-                    {filteredReportNavItems.map(({ id, title }) => (
+                    {reportNavItems.map(({ id, title }) => (
                       <ReportLink
                         key={id}
                         id={id}

src/components/Reports/DesignationAccountsReport/DesignationAccountsReport.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ThemeProvider } from '@mui/material/styles';
 import {
   DesignationAccountsDocument,
@@ -154,4 +155,26 @@ describe('DesignationAccountsReport', () => {
     expect(getByText(title)).toBeInTheDocument();
     expect(queryByTestId('EmptyReport')).toBeInTheDocument();
   });
+
+  it('renders nav list icon and onclick triggers onNavListToggle', async () => {
+    onNavListToggle.mockClear();
+    const { getByTestId } = render(
+      <ThemeProvider theme={theme}>
+        <GqlMockedProvider<{ DesignationAccounts: DesignationAccountsQuery }>
+          mocks={mocks}
+        >
+          <DesignationAccountsReport
+            accountListId={accountListId}
+            isNavListOpen={true}
+            title={title}
+            onNavListToggle={onNavListToggle}
+          />
+        </GqlMockedProvider>
+      </ThemeProvider>,
+    );
+
+    expect(getByTestId('ReportsFilterIcon')).toBeInTheDocument();
+    userEvent.click(getByTestId('ReportsFilterIcon'));
+    await waitFor(() => expect(onNavListToggle).toHaveBeenCalled());
+  });
 });

src/components/Reports/DesignationAccountsReport/DesignationAccountsReport.tsx

@@ -2,15 +2,18 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box, CircularProgress, Divider, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { AccountsList as List } from '../AccountsListLayout/List/List';
-import { AccountsListHeader as Header } from '../AccountsListLayout/Header/Header';
-import type { Account } from '../AccountsListLayout/List/ListItem/ListItem';
+import { currencyFormat } from 'src/lib/intlFormat';
+import { useLocale } from 'src/hooks/useLocale';
 import { useDesignationAccountsQuery } from './GetDesignationAccounts.generated';
 import { useSetActiveDesignationAccountMutation } from './SetActiveDesignationAccount.generated';
+import {
+  MultiPageHeader,
+  HeaderTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageHeader';
 import { Notification } from 'src/components/Notification/Notification';
 import { EmptyReport } from 'src/components/Reports/EmptyReport/EmptyReport';
-import { currencyFormat } from 'src/lib/intlFormat';
-import { useLocale } from 'src/hooks/useLocale';
+import type { Account } from '../AccountsListLayout/List/ListItem/ListItem';
+import { AccountsList as List } from '../AccountsListLayout/List/List';
 
 interface Props {
   accountListId: string;
@@ -85,11 +88,12 @@ export const DesignationAccountsReport: React.FC<Props> = ({
 
   return (
     <Box>
-      <Header
+      <MultiPageHeader
         isNavListOpen={isNavListOpen}
         onNavListToggle={onNavListToggle}
         title={title}
         rightExtra={balanceNode}
+        headerType={HeaderTypeEnum.Report}
       />
       {loading ? (
         <Box