Merge pull request #1065 from CruGlobal/8221-14-month-export

[MPDX-8221] Align 14 month reports with Angular
CruGlobal · Sep 16, 2024 · 2e9aee8 · 2e9aee8
2 parents 833d6e5 + 4d70ef0
commit 2e9aee8
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 38 deletions.
diff --git a/pages/api/graphql-rest.page.ts b/pages/api/graphql-rest.page.ts
@@ -5,7 +5,7 @@ import {
   Response,
 } from 'apollo-datasource-rest';
 import { ApolloServer } from 'apollo-server-micro';
-import { DateTime, Duration, Interval } from 'luxon';
+import { DateTime } from 'luxon';
 import Cors from 'micro-cors';
 import {
   ExportFormatEnum,
@@ -443,12 +443,9 @@ class MpdxRestApi extends RESTDataSource {
         currencyType === 'salary'
           ? 'salary_currency_donations'
           : 'donor_currency_donations'
-      }?filter[account_list_id]=${accountListId}${designationAccountFilter}&filter[month_range]=${Interval.before(
-        DateTime.now().endOf('month'),
-        Duration.fromObject({ months: 14 }).minus({ day: 1 }),
-      )
-        .toISODate()
-        .replace('/', '...')}`,
+      }?filter[account_list_id]=${accountListId}${designationAccountFilter}&filter[month_range]=${DateTime.now()
+        .minus({ months: 13 })
+        .toISODate()}...${DateTime.now().toISODate()}`,
     );
     return mapFourteenMonthReport(data, currencyType);
   }

diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.test.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.test.tsx
@@ -379,8 +379,8 @@ describe('FourteenMonthReportTable', () => {
     expect(contactTotal[0].innerHTML).toEqual('0');
   });
 
-  it('should calulate the correct monthly totals', async () => {
-    const { queryByTestId, getAllByTestId } = render(
+  it('should calculate the correct monthly totals', async () => {
+    const { queryByTestId, getByTestId, getAllByTestId } = render(
       <ThemeProvider theme={theme}>
         <GqlMockedProvider>
           <FourteenMonthReportTable
@@ -416,5 +416,8 @@ describe('FourteenMonthReportTable', () => {
     expect(contactTotal[3].innerHTML).toEqual('1,836');
 
     expect(getAllByTestId('overallTotal')[0].innerHTML).toEqual('6,996');
+
+    expect(getByTestId('averageTotal')).toHaveTextContent('516');
+    expect(getByTestId('minimumTotal')).toHaveTextContent('510');
   });
 });
diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx
@@ -68,6 +68,12 @@ const StyledInfoIcon = styled(InfoIcon)(({}) => ({
   },
 }));
 
+const StyledTotalsRow = styled(TableRow)({
+  '.MuiTableCell-root': {
+    fontWeight: 'bold',
+  },
+});
+
 export const FourteenMonthReportTable: React.FC<
   FourteenMonthReportTableProps
 > = ({
@@ -84,6 +90,27 @@ export const FourteenMonthReportTable: React.FC<
   const locale = useLocale();
   const apiConstants = useApiConstants();
 
+  const totalAverage = useMemo(
+    () =>
+      Math.round(
+        orderedContacts?.reduce(
+          (totalAverage, contact) => totalAverage + contact.average,
+          0,
+        ) ?? 0,
+      ),
+    [orderedContacts],
+  );
+  const totalMinimum = useMemo(
+    () =>
+      Math.round(
+        orderedContacts?.reduce(
+          (totalMinimum, contact) => totalMinimum + contact.minimum,
+          0,
+        ) ?? 0,
+      ),
+    [orderedContacts],
+  );
+
   return (
     <PrintableContainer className="fourteen-month-report">
       <StickyTable
@@ -138,7 +165,7 @@ export const FourteenMonthReportTable: React.FC<
                   </Box>
                 </StyledTableCell>
                 {isExpanded && (
-                  <React.Fragment>
+                  <>
                     <StyledTableCell>{contact.status}</StyledTableCell>
                     <StyledTableCell data-testid="pledgeAmount">
                       {contact.pledgeAmount &&
@@ -157,7 +184,7 @@ export const FourteenMonthReportTable: React.FC<
                     <StyledTableCell>
                       {numberFormat(Math.round(contact.minimum), locale)}
                     </StyledTableCell>
-                  </React.Fragment>
+                  </>
                 )}
                 {contact.months?.map((month: Month) => (
                   <StyledTableCell key={month?.month} align="center">
@@ -176,28 +203,38 @@ export const FourteenMonthReportTable: React.FC<
               </TableRow>
             );
           })}
-          <TableRow>
-            <StyledTableCell>
-              <strong>{t('Totals')}</strong>
-            </StyledTableCell>
+          <StyledTotalsRow>
+            <StyledTableCell>{t('Totals')}</StyledTableCell>
+            {isExpanded && (
+              <>
+                <StyledTableCell />
+                <StyledTableCell />
+                <StyledTableCell data-testid="averageTotal">
+                  {numberFormat(totalAverage, locale)}
+                </StyledTableCell>
+                <StyledTableCell data-testid="minimumTotal">
+                  {numberFormat(totalMinimum, locale)}
+                </StyledTableCell>
+              </>
+            )}
             {totals?.map((month) => (
-              <StyledTableCell key={month.month} align="center">
-                <strong data-testid="monthlyTotals">
-                  {numberFormat(Math.round(month.total), locale)}
-                </strong>
+              <StyledTableCell
+                key={month.month}
+                align="center"
+                data-testid="monthlyTotals"
+              >
+                {numberFormat(Math.round(month.total), locale)}
               </StyledTableCell>
             ))}
-            <StyledTableCell align="right">
-              <strong data-testid="overallTotal">
-                {numberFormat(
-                  Math.round(
-                    totals?.reduce((sum, month) => sum + month.total, 0) ?? 0,
-                  ),
-                  locale,
-                )}
-              </strong>
+            <StyledTableCell align="right" data-testid="overallTotal">
+              {numberFormat(
+                Math.round(
+                  totals?.reduce((sum, month) => sum + month.total, 0) ?? 0,
+                ),
+                locale,
+              )}
             </StyledTableCell>
-          </TableRow>
+          </StyledTotalsRow>
         </TableBody>
       </StickyTable>
     </PrintableContainer>

diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHead.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHead.tsx
@@ -4,7 +4,6 @@ import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import { useLocale } from 'src/hooks/useLocale';
-// eslint-disable-next-line import/extensions
 import { Totals } from '../../../FourteenMonthReport';
 import { FourteenMonthReportQuery } from '../../../GetFourteenMonthReport.generated';
 import { StyledTableCell } from '../StyledComponents';
@@ -76,6 +75,14 @@ export const FourteenMonthReportTableHead: FC<
         <StyledTableCell>
           <Typography variant="h6">{salaryCurrency}</Typography>
         </StyledTableCell>
+        {isExpanded && (
+          <>
+            <YearTableCell />
+            <YearTableCell />
+            <YearTableCell />
+            <YearTableCell />
+          </>
+        )}
         {monthCount &&
           monthCount.map((year) => (
             <YearTableCell
@@ -99,7 +106,7 @@ export const FourteenMonthReportTableHead: FC<
           {t('Partner')}
         </TableHeadCell>
         {isExpanded && (
-          <React.Fragment>
+          <>
             <TableHeadCell
               isActive={orderBy === 'status'}
               sortDirection={orderBy === 'status' ? order : false}
@@ -132,16 +139,16 @@ export const FourteenMonthReportTableHead: FC<
             >
               {t('Min')}
             </TableHeadCell>
-          </React.Fragment>
+          </>
         )}
-        {totals?.map((month, i: number) => (
+        {totals?.map((month, index) => (
           <TableHeadCell
-            key={i}
-            isActive={orderBy === i}
+            key={index}
+            isActive={orderBy === index}
             align="center"
-            sortDirection={orderBy === i ? order : false}
-            direction={orderBy === i ? order : 'asc'}
-            onClick={createSortHandler(i)}
+            sortDirection={orderBy === index ? order : false}
+            direction={orderBy === index ? order : 'asc'}
+            onClick={createSortHandler(index)}
           >
             {DateTime.fromISO(month.month)
               .toJSDate()