From 5c43a9968feab55f31f59bcef18e1f91c2e5c466 Mon Sep 17 00:00:00 2001
From: Katelyn Grimes <katelyn.grimes@cru.org>
Date: Mon, 15 Jun 2026 08:53:01 -0400
Subject: [PATCH] Add settings dialog to income/expenses report

---
 .../DisplayModes/ScreenOnlyReport.tsx         | 48 +++++++++-
 .../SettingsDialog/SettingsDialog.tsx         | 88 +++++++++++--------
 .../StaffExpenseReport/StaffExpenseReport.tsx |  4 +-
 3 files changed, 96 insertions(+), 44 deletions(-)

diff --git a/src/components/Reports/MPGAIncomeExpensesReport/DisplayModes/ScreenOnlyReport.tsx b/src/components/Reports/MPGAIncomeExpensesReport/DisplayModes/ScreenOnlyReport.tsx
index 9611d11d6b..8493974712 100644
--- a/src/components/Reports/MPGAIncomeExpensesReport/DisplayModes/ScreenOnlyReport.tsx
+++ b/src/components/Reports/MPGAIncomeExpensesReport/DisplayModes/ScreenOnlyReport.tsx
@@ -1,12 +1,20 @@
-import { HourglassDisabled } from '@mui/icons-material';
+import { useState } from 'react';
+import { HourglassDisabled, Settings } from '@mui/icons-material';
 import { Box, Container, Grid } from '@mui/material';
+import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import { EmptyTable } from '../../../HrTools/Shared/EmptyTable/EmptyTable';
+import {
+  Filters,
+  SettingsDialog,
+  getFiltersWithCalculatedDates,
+} from '../../StaffExpenseReport/SettingsDialog/SettingsDialog';
+import { StyledFilterButton } from '../../StaffExpenseReport/StaffExpenseReport';
 import { CardSkeleton } from '../Card/CardSkeleton';
 import { ExpensesPieChart } from '../Charts/ExpensesPieChart';
 import { MonthlySummaryChart } from '../Charts/MonthlySummaryChart';
 import { SummaryBarChart } from '../Charts/SummaryBarChart';
-import { ReportTypeEnum } from '../Helper/MPGAReportEnum';
+import { FundTypes, ReportTypeEnum } from '../Helper/MPGAReportEnum';
 import { TableCard } from '../Tables/TableCard';
 import { AllData } from '../mockData';
 
@@ -22,6 +30,21 @@ export const ScreenOnlyReport: React.FC<ScreenOnlyReportProps> = ({
   currency,
 }) => {
   const { t } = useTranslation();
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+  const startDate = DateTime.now().minus({ months: 11 }).startOf('month');
+  const endDate = DateTime.now().endOf('month');
+
+  const handleSettingsClick = () => {
+    setIsSettingsOpen(true);
+  };
+
+  const selectedFilters: Filters = getFiltersWithCalculatedDates({
+    selectedDateRange: null,
+    startDate: startDate,
+    endDate: endDate,
+    categories: null,
+  });
 
   return (
     <Box mt={2}>
@@ -43,7 +66,17 @@ export const ScreenOnlyReport: React.FC<ScreenOnlyReportProps> = ({
             </Grid>
           </Grid>
         </Box>
-        <Box>
+        <Box display="flex" justifyContent="flex-end" mb={2}>
+          <StyledFilterButton
+            variant="outlined"
+            startIcon={<Settings />}
+            size="small"
+            onClick={handleSettingsClick}
+          >
+            {t('Report Settings')}
+          </StyledFilterButton>
+        </Box>
+        <Box mt={2}>
           <TableCard
             type={ReportTypeEnum.Income}
             data={data.income ?? []}
@@ -89,6 +122,15 @@ export const ScreenOnlyReport: React.FC<ScreenOnlyReportProps> = ({
           </CardSkeleton>
         </Box>
       </Container>
+      {isSettingsOpen && (
+        <SettingsDialog
+          selectedFilters={selectedFilters}
+          selectedFundType={FundTypes.Primary}
+          isOpen={isSettingsOpen}
+          onClose={() => setIsSettingsOpen(false)}
+          isMpgaReport
+        />
+      )}
     </Box>
   );
 };
diff --git a/src/components/Reports/StaffExpenseReport/SettingsDialog/SettingsDialog.tsx b/src/components/Reports/StaffExpenseReport/SettingsDialog/SettingsDialog.tsx
index 215e8da30c..5c528edaa1 100644
--- a/src/components/Reports/StaffExpenseReport/SettingsDialog/SettingsDialog.tsx
+++ b/src/components/Reports/StaffExpenseReport/SettingsDialog/SettingsDialog.tsx
@@ -34,6 +34,7 @@ export interface SettingsDialogProps {
   selectedFundType: string | null;
   onClose: (filters?: Filters) => void;
   time?: DateTime;
+  isMpgaReport?: boolean;
 }
 
 export interface Filters {
@@ -111,7 +112,7 @@ const calculateDateRange = (
   }
 };
 
-const getFiltersWithCalculatedDates = (values: Filters): Filters => {
+export const getFiltersWithCalculatedDates = (values: Filters): Filters => {
   const finalValues = { ...values };
   if (values.selectedDateRange !== null) {
     const { startDate, endDate } = calculateDateRange(values.selectedDateRange);
@@ -127,6 +128,7 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
   selectedFilters,
   selectedFundType,
   time,
+  isMpgaReport,
 }) => {
   const { t } = useTranslation();
   const [previewFilters, setPreviewFilters] = useState<Filters | null>(null);
@@ -230,46 +232,54 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
           return (
             <Form>
               <DialogContent>
-                <TextField
-                  select
-                  label={t('Select Date Range')}
-                  fullWidth
-                  value={values.selectedDateRange ?? ''}
-                  onChange={(e) => {
-                    const value = e.target.value === '' ? null : e.target.value;
-                    setFieldValue('selectedDateRange', value);
-                    if (value !== null) {
-                      setFieldValue('startDate', null);
-                      setFieldValue('endDate', null);
+                {!isMpgaReport && (
+                  <>
+                    <TextField
+                      select
+                      label={t('Select Date Range')}
+                      fullWidth
+                      value={values.selectedDateRange ?? ''}
+                      onChange={(e) => {
+                        const value =
+                          e.target.value === '' ? null : e.target.value;
+                        setFieldValue('selectedDateRange', value);
+                        if (value !== null) {
+                          setFieldValue('startDate', null);
+                          setFieldValue('endDate', null);
 
-                      setTouched({
-                        ...touched,
-                        startDate: false,
-                        endDate: false,
-                      });
-                    }
-                    validateAndRefetch(validateForm, {
-                      ...values,
-                      selectedDateRange: value as DateRange | null,
-                      ...(value !== null && { startDate: null, endDate: null }),
-                    });
-                  }}
-                >
-                  <MenuItem value="">{t('None')}</MenuItem>
-                  <MenuItem value={DateRange.WeekToDate}>
-                    {t('Week to Date')}
-                  </MenuItem>
-                  <MenuItem value={DateRange.MonthToDate}>
-                    {t('Month to Date')}
-                  </MenuItem>
-                  <MenuItem value={DateRange.YearToDate}>
-                    {t('Year to Date')}
-                  </MenuItem>
-                </TextField>
+                          setTouched({
+                            ...touched,
+                            startDate: false,
+                            endDate: false,
+                          });
+                        }
+                        validateAndRefetch(validateForm, {
+                          ...values,
+                          selectedDateRange: value as DateRange | null,
+                          ...(value !== null && {
+                            startDate: null,
+                            endDate: null,
+                          }),
+                        });
+                      }}
+                    >
+                      <MenuItem value="">{t('None')}</MenuItem>
+                      <MenuItem value={DateRange.WeekToDate}>
+                        {t('Week to Date')}
+                      </MenuItem>
+                      <MenuItem value={DateRange.MonthToDate}>
+                        {t('Month to Date')}
+                      </MenuItem>
+                      <MenuItem value={DateRange.YearToDate}>
+                        {t('Year to Date')}
+                      </MenuItem>
+                    </TextField>
 
-                <Typography variant="body2" sx={{ mt: 2, mb: 2 }}>
-                  {t('Or enter a custom date range:')}
-                </Typography>
+                    <Typography variant="body2" sx={{ mt: 2, mb: 2 }}>
+                      {t('Or enter a custom date range:')}
+                    </Typography>
+                  </>
+                )}
 
                 <Box display="flex" gap={2}>
                   <CustomDateField
diff --git a/src/components/Reports/StaffExpenseReport/StaffExpenseReport.tsx b/src/components/Reports/StaffExpenseReport/StaffExpenseReport.tsx
index bfdfec386d..11d79318c8 100644
--- a/src/components/Reports/StaffExpenseReport/StaffExpenseReport.tsx
+++ b/src/components/Reports/StaffExpenseReport/StaffExpenseReport.tsx
@@ -63,7 +63,7 @@ const StyledTimeNavBox = styled(Box)({
   gap: theme.spacing(2),
 });
 
-const StyledFilterButton = styled(Button)({
+export const StyledFilterButton = styled(Button)({
   color: theme.palette.mpdxGrayDark.main,
   borderColor: theme.palette.mpdxGrayDark.main,
   '&:hover': {
@@ -404,7 +404,7 @@ export const StaffExpenseReport: React.FC<StaffExpenseReportProps> = ({
               size="small"
               onClick={handleSettingsClick}
             >
-              {t('Filter Settings')}
+              {t('Report Settings')}
             </StyledFilterButton>
           </Box>
         </Container>