From 3691124b5a8856ee92e701b8bd00c4f6bfe4252c Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 13 Mar 2026 14:17:15 -0400 Subject: [PATCH 1/2] Adding the new menu items to the menu --- src/hooks/useNavPages.tsx | 22 +++++++++++++++++++ src/hooks/useReportNavItems.ts | 32 ++++++++++++++++++---------- src/hooks/useRequestFormsNavItems.ts | 24 +++++++++++++++++++++ 3 files changed, 67 insertions(+), 11 deletions(-) create mode 100644 src/hooks/useRequestFormsNavItems.ts diff --git a/src/hooks/useNavPages.tsx b/src/hooks/useNavPages.tsx index 7f266b19fb..be13be6630 100644 --- a/src/hooks/useNavPages.tsx +++ b/src/hooks/useNavPages.tsx @@ -4,6 +4,7 @@ import CompassIcon from '@mui/icons-material/Explore'; import { useTranslation } from 'react-i18next'; import { useAccountListId } from 'src/hooks/useAccountListId'; import { useReportNavItems } from './useReportNavItems'; +import { useRequestFormsNavItems } from './useRequestFormsNavItems'; import { useSettingsNavItems } from './useSettingsNavItems'; import { useToolsNavItems } from './useToolsNavItems'; @@ -48,6 +49,7 @@ export function useNavPages(coachingAccountCount: boolean, isSearch = false) { const accountListId = useAccountListId(); const { t } = useTranslation(); const reportItems = useReportNavItems(); + const requestFormsItems = useRequestFormsNavItems(); const toolsItems = useToolsNavItems(); const settingsItems = useSettingsNavItems(); @@ -113,6 +115,19 @@ export function useNavPages(coachingAccountCount: boolean, isSearch = false) { showInNav: true, showInSearchDialog: true, }, + { + id: 'request-forms-page', + title: t('Request Forms'), + pathname: '/accountLists/[accountListId]/reports', + items: requestFormsItems.map((item) => ({ + ...item, + href: `/accountLists/${accountListId}/reports/${item.id}`, + searchIcon: , + searchName: t(`Request Forms - {{ title }}`, { title: item.title }), + showInSearchDialog: true, + })), + showInNav: true, + }, { id: 'settings-page', title: t('Preferences'), @@ -193,6 +208,13 @@ export function useNavPages(coachingAccountCount: boolean, isSearch = false) { } } + // get request forms sub items + if (page.id === 'request-forms-page' && page.items) { + page.items.forEach((item) => { + pages.push({ ...item, title: item.searchName ?? item.title }); + }); + } + // get settings sub items without granted access if (page.id === 'settings-page' && page.items) { page.items diff --git a/src/hooks/useReportNavItems.ts b/src/hooks/useReportNavItems.ts index 06148f0b9f..9a34e75839 100644 --- a/src/hooks/useReportNavItems.ts +++ b/src/hooks/useReportNavItems.ts @@ -45,17 +45,27 @@ export function useReportNavItems(): NavItems[] { id: 'coaching', title: t('Coaching'), }, - // Goal Calculator - // { - // id: 'goalCalculator', - // title: t('Goal Calculator'), - // subTitle: t('Reports - Goal Calculation'), - // }, - // { - // id: 'mpgaIncomeExpenses', - // title: t('MPGA Monthly Report'), - // subTitle: t('Income & Expenses'), - // }, + { + id: 'mpgaIncomeExpenses', + title: t('MPGA Monthly Report'), + subTitle: t('Income & Expenses'), + }, + { + id: 'staffSavingFund', + title: t('Staff Saving Fund'), + }, + { + id: 'staffExpense', + title: t('Staff Expense'), + }, + { + id: 'goalCalculator', + title: t('Goal Calculator'), + }, + { + id: 'mpReminders', + title: t('Ministry Partner Reminders'), + }, ]; return useMemo(() => reportNavItems, [t]); diff --git a/src/hooks/useRequestFormsNavItems.ts b/src/hooks/useRequestFormsNavItems.ts new file mode 100644 index 0000000000..695f5a46fc --- /dev/null +++ b/src/hooks/useRequestFormsNavItems.ts @@ -0,0 +1,24 @@ +import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { NavItems } from './useReportNavItems'; + +export function useRequestFormsNavItems(): NavItems[] { + const { t } = useTranslation(); + + const requestFormsNavItems: NavItems[] = [ + { + id: 'additionalSalaryRequest', + title: t('Additional Salary Request'), + }, + { + id: 'housingAllowance', + title: t('Housing Allowance'), + }, + { + id: 'salaryCalculator', + title: t('Salary Calculator'), + }, + ]; + + return useMemo(() => requestFormsNavItems, [t]); +} From 01d3ff0f061b1d3804455a0cda15299fa51fcae5 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 13 Mar 2026 14:18:02 -0400 Subject: [PATCH 2/2] Refactoring the menu opening and closing options to make it cleaner and adding the new Request forms menu item --- .../Primary/TopBar/Items/NavMenu/NavMenu.tsx | 49 +++++++++++-------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx index 16e94d354a..f1f05a8cf3 100644 --- a/src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx @@ -129,25 +129,20 @@ const NavMenu: React.FC = () => { : 0; }, [loading]); - const [reportsMenuOpen, setReportsMenuOpen] = useState(false); - const [toolsMenuOpen, setToolsMenuOpen] = useState(false); + enum MenuId { + Reports = 'reports', + Tools = 'tools', + RequestForms = 'requestForms', + } - const handleReportsMenuToggle = () => { - setReportsMenuOpen((prevOpen) => !prevOpen); - handleToolsMenuClose(); - }; - - const handleReportsMenuClose = () => { - setReportsMenuOpen(false); - }; + const [openMenu, setOpenMenu] = useState(null); - const handleToolsMenuToggle = () => { - setToolsMenuOpen((prevOpen) => !prevOpen); - handleReportsMenuClose(); + const handleMenuToggle = (menu: MenuId) => { + setOpenMenu((prev) => (prev === menu ? null : menu)); }; - const handleToolsMenuClose = () => { - setToolsMenuOpen(false); + const handleMenuClose = () => { + setOpenMenu(null); }; const { pathname } = useRouter(); @@ -178,9 +173,9 @@ const NavMenu: React.FC = () => { handleMenuToggle(MenuId.Reports)} + handleMenuClose={handleMenuClose} testId="ReportMenuToggle" sum={sum} toolData={toolData} @@ -189,9 +184,9 @@ const NavMenu: React.FC = () => { /> handleMenuToggle(MenuId.Tools)} + handleMenuClose={handleMenuClose} testId="ToolsMenuToggle" sum={sum} toolData={toolData} @@ -199,6 +194,18 @@ const NavMenu: React.FC = () => { isTool={true} /> + handleMenuToggle(MenuId.RequestForms)} + handleMenuClose={handleMenuClose} + testId="RequestFormsMenuToggle" + sum={sum} + toolData={toolData} + loading={loading} + isTool={false} + /> + {isCoaching && (