[MPDX-9992] Split the MPGA salary row by person

pages/accountLists/[accountListId]/reports/mpgaIncomeExpenses/index.page.test.tsx

@@ -16,19 +16,22 @@ import MPGAReportPage, { getServerSideProps } from './index.page';
 
 const mutationSpy = jest.fn();
 const id = '1000000001';
+const personNumber = '000000111';
 
 interface ComponentProps {
   userType?: UserTypeEnum;
   staffAccountId?: string | null;
   supervisesStaff?: boolean;
   viewedStaffAccountId?: string;
+  viewedPersonNumber?: string;
 }
 
 const Components = ({
   userType = UserTypeEnum.UsStaff,
   staffAccountId = '12345',
   supervisesStaff = false,
   viewedStaffAccountId,
+  viewedPersonNumber,
 }: ComponentProps) => (
   <ThemeProvider theme={theme}>
     <TestRouter
@@ -38,6 +41,7 @@ const Components = ({
           ...(viewedStaffAccountId && {
             staffAccountId: viewedStaffAccountId,
           }),
+          ...(viewedPersonNumber && { personNumber: viewedPersonNumber }),
         },
       }}
     >
@@ -158,5 +162,19 @@ describe('MPGA Report Page', () => {
         }),
       );
     });
+
+    it('passes the person number from the url into the household query', async () => {
+      render(
+        <Components
+          supervisesStaff
+          viewedStaffAccountId={id}
+          viewedPersonNumber={personNumber}
+        />,
+      );
+
+      await waitFor(() =>
+        expect(mutationSpy).toHaveGraphqlOperation('Hcm', { personNumber }),
+      );
+    });
   });
 });

pages/accountLists/[accountListId]/reports/mpgaIncomeExpenses/index.page.tsx

@@ -28,8 +28,9 @@ const MPGAReportPage: React.FC = () => {
   const { t } = useTranslation();
   const { query } = useRouter();
   // A blank param is a request for somebody else, which the API denies.
-  // Only a missing one falls back to your own account.
+  // Only a missing one falls back to your own account and HCM record.
   const staffAccountId = getQueryParam(query, 'staffAccountId') || undefined;
+  const personNumber = getQueryParam(query, 'personNumber') || undefined;
 
   const [isNavListOpen, setIsNavListOpen] = useState<boolean>(false);
 
@@ -64,7 +65,10 @@ const MPGAReportPage: React.FC = () => {
             leftOpen={isNavListOpen}
             leftWidth="290px"
             mainContent={
-              <MPGAIncomeExpensesReportProvider staffAccountId={staffAccountId}>
+              <MPGAIncomeExpensesReportProvider
+                staffAccountId={staffAccountId}
+                personNumber={personNumber}
+              >
                 <MPGAIncomeExpensesReport
                   isNavListOpen={isNavListOpen}
                   onNavListToggle={handleNavListToggle}

src/components/HrTools/MpdSupervisorReport/StaffDetailsTabs/MPGA/MPGA.test.tsx

@@ -6,25 +6,29 @@ import theme from 'src/theme';
 import { StaffTabMPGA } from './MPGA';
 
 const staffAccountId = '1000000001';
+const personNumber = '000000111';
 const accountListId = 'account-list-1';
 const router = { query: { accountListId }, isReady: true };
 
 const renderMPGA = (staffAccountId: string) =>
   render(
     <ThemeProvider theme={theme}>
       <TestRouter router={router}>
-        <StaffTabMPGA staffAccountId={staffAccountId} />
+        <StaffTabMPGA
+          staffAccountId={staffAccountId}
+          personNumber={personNumber}
+        />
       </TestRouter>
     </ThemeProvider>,
   );
 
 describe('StaffTabMPGA', () => {
-  it('links to the staff member MPGA report', () => {
+  it('links to the staff member MPGA report with their person number', () => {
     const { getByRole } = renderMPGA(staffAccountId);
 
     expect(getByRole('link', { name: 'View MPGA Report' })).toHaveAttribute(
       'href',
-      `/accountLists/${accountListId}/reports/mpgaIncomeExpenses?staffAccountId=1000000001`,
+      `/accountLists/${accountListId}/reports/mpgaIncomeExpenses?staffAccountId=${staffAccountId}&personNumber=${personNumber}`,
     );
   });
 });

src/components/HrTools/MpdSupervisorReport/StaffDetailsTabs/MPGA/MPGA.tsx

@@ -4,10 +4,12 @@ import { ViewReportLink } from '../ViewReportLink/ViewReportLink';
 
 interface StaffTabMPGAProps {
   staffAccountId: string;
+  personNumber: string;
 }
 
 export const StaffTabMPGA: React.FC<StaffTabMPGAProps> = ({
   staffAccountId,
+  personNumber,
 }) => {
   const { t } = useTranslation();
 
@@ -16,6 +18,7 @@ export const StaffTabMPGA: React.FC<StaffTabMPGAProps> = ({
       staffAccountId={staffAccountId}
       reportLink="mpgaIncomeExpenses"
       reportName={t('MPGA')}
+      personNumber={personNumber}
     />
   );
 };

src/components/HrTools/MpdSupervisorReport/StaffMemberDrawer/StaffMemberDrawer.tsx

@@ -260,7 +260,10 @@
           <DynamicPayroll staffAccountId={staffAccountId} />
         </TabPanel>
         <TabPanel value={StaffDetailTabEnum.MPGAReport}>
-          <DynamicMPGA staffAccountId={staffAccountId} />
+          <DynamicMPGA
+            staffAccountId={staffAccountId}
+            personNumber={personNumber}
+          />
         </TabPanel>
         <TabPanel value={StaffDetailTabEnum.StaffExpenseReport}>
           <StaffTabStaffExpenseReport

src/components/Reports/MPGAIncomeExpensesReport/BreakdownModal/BreakdownModal.test.tsx

@@ -62,4 +62,27 @@ describe('BreakdownModal', () => {
     expect(getByRole('dialog')).toBeInTheDocument();
     expect(queryByText('Donation - Non Cash')).not.toBeInTheDocument();
   });
+
+  it('names the person whose row is being broken down', () => {
+    const { getByText } = render(
+      <TestComponent
+        {...defaultProps}
+        category={StaffExpenseCategoryEnum.Salary}
+        person="Alex"
+      />,
+    );
+
+    expect(getByText('Salary (Alex) Breakdown')).toBeInTheDocument();
+    expect(getByText('Total Salary (Alex) Income')).toBeInTheDocument();
+  });
+
+  it('ignores a person on any category other than salary', () => {
+    const { getByText, queryByText } = render(
+      <TestComponent {...defaultProps} person="Alex" />,
+    );
+
+    expect(getByText('Donation Breakdown')).toBeInTheDocument();
+    expect(getByText('Total Donation Income')).toBeInTheDocument();
+    expect(queryByText(/Alex/)).not.toBeInTheDocument();
+  });
 });

src/components/Reports/MPGAIncomeExpensesReport/BreakdownModal/BreakdownModal.tsx

@@ -10,7 +10,10 @@
   Typography,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { StaffExpensesSubCategoryEnum } from 'src/graphql/types.generated';
+import {
+  StaffExpenseCategoryEnum,
+  StaffExpensesSubCategoryEnum,
+} from 'src/graphql/types.generated';
 import { useLocale } from 'src/hooks/useLocale';
 import { currencyFormat, monthYearFormat } from 'src/lib/intlFormat';
 import theme from 'src/theme';
@@ -29,125 +32,130 @@
   open,
   onClose,
   category,
+  person,
   transactions,
 }) => {
   const { t } = useTranslation();
   const locale = useLocale();
   const currency = 'USD';
   const { startDate, endDate } = useMPGAIncomeExpenses();
 
+  // Salary is the only category split one row per person. Its breakdown is named the way the row
+  // is, so two people's modals cannot be mistaken for each other; no other category names anyone.
+  const categoryName =
+    person && category === StaffExpenseCategoryEnum.Salary
+      ? t('{{bucket}} ({{person}})', {
+          bucket: getLocalizedCategory(category, t),
+          person,
+        })
+      : getLocalizedCategory(category, t);
+
   const subcategoryBreakdown = useMemo(() => {
     const grouped = new Map<
       StaffExpensesSubCategoryEnum,
       TransactionBreakdown[]
     >();
 
     transactions.forEach((transaction) => {
       const existing = grouped.get(transaction.subCategory);
       if (existing) {
         existing.push(transaction);
       } else {
         grouped.set(transaction.subCategory, [transaction]);
       }
     });
 
     return Array.from(grouped, ([subCategory, subCategoryTransactions]) => ({
       category,
       subCategory,
       transactions: subCategoryTransactions,
       total: subCategoryTransactions.reduce(
         (sum, { amount }) => sum + amount,
         0,
       ),
     }));
   }, [transactions, category]);
 
   const overallTotal = useMemo(
     () => subcategoryBreakdown.reduce((sum, { total }) => sum + total, 0),
     [subcategoryBreakdown],
   );
 
   return (
-    <DialogSkeleton
-      categoryName={getLocalizedCategory(category, t)}
-      open={open}
-      onClose={onClose}
-    >
+    <DialogSkeleton categoryName={categoryName} open={open} onClose={onClose}>
       <TableContainer
         sx={{
           borderBottom: `1px solid ${theme.palette.divider}`,
         }}
       >
         <Table>
           <TableHead>
             <TableRow
               sx={{
                 backgroundColor: theme.palette.mpdxGrayLight.main,
                 position: 'sticky',
                 top: 0,
                 zIndex: 1,
               }}
             >
               <TableCell>{t('Category')}</TableCell>
               <TableCell sx={{ textAlign: 'right' }}>
                 {`${monthYearFormat(
                   startDate.month,
                   startDate.year,
                   locale,
                   true,
                   true,
                 )} - ${monthYearFormat(
                   endDate.month,
                   endDate.year,
                   locale,
                   true,
                   true,
                 )}`}
               </TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
             {subcategoryBreakdown.map(
               ({
                 subCategory,
                 transactions: subCategoryTransactions,
                 total,
               }) => (
                 <TableRow key={subCategory}>
                   <TableCell colSpan={2} sx={{ padding: 0, border: 0 }}>
                     <BreakdownAccordion
                       category={category}
                       subCategory={subCategory}
                       transactions={subCategoryTransactions}
                       total={total}
                     />
                   </TableCell>
                 </TableRow>
               ),
             )}
           </TableBody>
           <TableFooter
             sx={{
               '& .MuiTableCell-footer': {
                 position: 'sticky',
                 bottom: 0,
                 backgroundColor: 'background.paper',
                 borderBottom: 0,
               },
             }}
           >
             <TableRow>
               <TableCell>
                 <Typography
                   color={theme.palette.text.primary}
                   fontWeight="bold"
                 >
                   {overallTotal >= 0
-                    ? t('Total {{category}} Income', {
-                        category: getLocalizedCategory(category, t),
-                      })
+                    ? t('Total {{category}} Income', { category: categoryName })
                     : t('Total {{category}} Expense', {
-                        category: getLocalizedCategory(category, t),
+                        category: categoryName,
                       })}
                 </Typography>
               </TableCell>

src/components/Reports/MPGAIncomeExpensesReport/ExportCsvButton/ExportCsvButton.test.tsx

@@ -4,8 +4,13 @@ import userEvent from '@testing-library/user-event';
 import { StaffExpenseCategoryEnum } from 'src/graphql/types.generated';
 import { exportToCsv } from '../CustomExport/CustomExport';
 import { ReportTypeEnum } from '../Helper/MPGAReportEnum';
+import {
+  ContextType,
+  MPGAIncomeExpensesContext,
+} from '../MPGAIncomeExpensesContext/MPGAIncomeExpensesContext';
 import { MPGAIncomeExpensesReportTestWrapper } from '../MPGAIncomeExpensesReportTestWrapper';
 import { MpgaTransactionsQuery } from '../MPGATransactions.generated';
+import { mockData, months } from '../mockData';
 import { ExportCsvButton } from './ExportCsvButton';
 
 const mutationSpy = jest.fn();
@@ -173,11 +178,47 @@ describe('ExportCsvButton', () => {
     expect(exportToCsv).not.toHaveBeenCalled();
   });
 
+  it('disables all exports while the report is still loading', async () => {
+    // Rows can exist before the household has answered, and an export taken then would show a
+    // couple's salary as one row. Only the finished report is exportable.
+    const loadingContext = {
+      allData: mockData,
+      dataLoading: true,
+      monthLabels: months,
+      startBalance: null,
+    } as unknown as ContextType;
+
+    const { getByRole, findByRole } = render(
+      <MPGAIncomeExpensesContext.Provider value={loadingContext}>
+        <ExportCsvButton />
+      </MPGAIncomeExpensesContext.Provider>,
+    );
+
+    userEvent.click(getByRole('button', { name: 'Export CSV' }));
+
+    expect(
+      await findByRole('menuitem', { name: 'Income Report' }),
+    ).toHaveAttribute('aria-disabled', 'true');
+    expect(getByRole('menuitem', { name: 'Expenses Report' })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    expect(getByRole('menuitem', { name: 'Balance Report' })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+  });
+
   it('closes the menu after an export is selected', async () => {
     const { findByRole, queryByRole } = render(<TestComponent />);
 
     userEvent.click(await findByRole('button', { name: 'Export CSV' }));
-    userEvent.click(await findByRole('menuitem', { name: 'Income Report' }));
+
+    const income = await findByRole('menuitem', { name: 'Income Report' });
+    await waitFor(() =>
+      expect(income).not.toHaveAttribute('aria-disabled', 'true'),
+    );
+    userEvent.click(income);
 
     await waitFor(() =>
       expect(

src/components/Reports/MPGAIncomeExpensesReport/ExportCsvButton/ExportCsvButton.tsx

@@ -11,7 +11,7 @@ export const ExportCsvButton: React.FC = () => {
   const { t } = useTranslation();
   const locale = useLocale();
 
-  const { allData: data, monthLabels } = useMPGAIncomeExpenses();
+  const { allData: data, dataLoading, monthLabels } = useMPGAIncomeExpenses();
   const balanceData = useBalanceTableData();
 
   return (
@@ -31,7 +31,8 @@ export const ExportCsvButton: React.FC = () => {
         },
         {
           label: t('Income Report'),
-          disabled: !data.income.length,
+          // Rows can exist before the household answers, so only the finished report is exportable.
+          disabled: dataLoading || !data.income.length,
           onClick: () =>
             exportToCsv(
               data.income,
@@ -42,7 +43,7 @@ export const ExportCsvButton: React.FC = () => {
         },
         {
           label: t('Expenses Report'),
-          disabled: !data.expenses.length,
+          disabled: dataLoading || !data.expenses.length,
           onClick: () =>
             exportToCsv(
               data.expenses,

src/components/Reports/MPGAIncomeExpensesReport/Helper/MPGAReportEnum.tsx

@@ -17,6 +17,8 @@ interface Transaction {
   transactedAt: string;
   description?: string | null;
   amount: number;
+  /** Null when SAA has no employee for the transaction's EMPLID. */
+  personNumber?: string | null;
 }
 
 interface BreakdownByMonth {

src/components/Reports/MPGAIncomeExpensesReport/Helper/createRows.tsx

@@ -12,7 +12,7 @@ export const populateCardTableRows = (
   openBreakdownModal: (breakdown: BreakdownTarget) => void,
 ) => {
   const description: RenderCell = ({ row }) => {
-    const { category, transactions } = row;
+    const { category, person, transactions } = row;
     return (
       <Box display="flex" alignItems="center" width="100%">
         <Tooltip title={row.description}>
@@ -26,7 +26,9 @@ export const populateCardTableRows = (
               size="small"
               sx={{ ml: 'auto', flexShrink: 0 }}
               aria-label={t('View breakdown')}
-              onClick={() => openBreakdownModal({ category, transactions })}
+              onClick={() =>
+                openBreakdownModal({ category, person, transactions })
+              }
             >
               <InfoOutlined fontSize="small" />
             </IconButton>