Merge pull request #2092 from Northeastern-Electric-Racing/2082-finance-fixes-add-ability-to-generate-cash-vs-budget-receipts

#2082 add ability to generate cash vs budget receipts

Author: RChandler234

src/frontend/src/hooks/finance.hooks.ts

@@ -56,6 +56,13 @@ export interface EditReimbursementRequestPayload extends CreateReimbursementRequ
   receiptPictures: ReimbursementReceiptCreateArgs[];
 }
 
+export interface DownloadReceiptsFormInput {
+  fileIds: string[];
+  startDate: Date;
+  endDate: Date;
+  refundSource: string;
+}
+
 export interface ExpenseTypePayload {
   code: number;
   name: string;
@@ -265,7 +272,6 @@ export const useSingleReimbursementRequest = (id: string) => {
 
 /**
  * Custom react hook to delete a single reimbursement request
- *
  * @param id id of the reimbursement request to delete
  * @returns the deleted reimbursement request
  */
@@ -334,13 +340,19 @@ export const useDenyReimbursementRequest = (id: string) => {
  *
  * @param fileIds The google file ids to fetch the images for
  */
-export const useDownloadPDFOfImages = (startDate: Date, endDate: Date) => {
-  return useMutation(['reimbursement-requests'], async (formData: { fileIds: string[] }) => {
+export const useDownloadPDFOfImages = () => {
+  return useMutation(['reimbursement-requests'], async (formData: DownloadReceiptsFormInput) => {
     const promises = formData.fileIds.map((fileId) => {
       return downloadGoogleImage(fileId);
     });
+
     const blobs = await Promise.all(promises);
-    await downloadBlobsToPdf(blobs, `receipts-${startDate.toLocaleDateString()}-${endDate.toLocaleDateString()}.pdf`);
+    const pdfName = `${formData.startDate.toLocaleDateString()}-${formData.endDate.toLocaleDateString()}.pdf`;
+
+    const pdfFileName =
+      formData.refundSource !== 'BOTH' ? `receipts-${formData.refundSource}-${pdfName}` : `receipts-${pdfName}`;
+
+    await downloadBlobsToPdf(blobs, pdfFileName);
   });
 };
 

src/frontend/src/pages/FinancePage/FinanceComponents/GenerateReceiptsModal.tsx

@@ -1,64 +1,67 @@
-import { FormControl, FormLabel, TextField } from '@mui/material';
+import { FormControl, FormLabel, MenuItem, Select, TextField } from '@mui/material';
 import NERFormModal from '../../../components/NERFormModal';
 import { Controller, useForm } from 'react-hook-form';
 import { DatePicker } from '@mui/x-date-pickers';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
 import { useDownloadPDFOfImages } from '../../../hooks/finance.hooks';
-import { useState } from 'react';
 import { useToast } from '../../../hooks/toasts.hooks';
 import { ReimbursementRequest } from 'shared';
+import { useState } from 'react';
 
 const schema = yup.object().shape({
   startDate: yup.date().required('Start Date is required'),
-  endDate: yup.date().min(yup.ref('startDate'), `end date can't be before start date`).required('End Date is required')
+  endDate: yup.date().min(yup.ref('startDate'), `end date can't be before start date`).required('End Date is required'),
+  refundSource: yup.string().required()
 });
 
 interface GenerateReceiptsFormInput {
   startDate: Date;
   endDate: Date;
+  refundSource: string;
 }
 
 interface GenerateReceiptsModalProps {
   open: boolean;
   setOpen: (val: boolean) => void;
   allReimbursementRequests?: ReimbursementRequest[];
-  startDate: Date;
-  endDate: Date;
-  setStartDate: (val: Date) => void;
-  setEndDate: (val: Date) => void;
 }
 
-const GenerateReceiptsModal = ({
-  open,
-  setOpen,
-  allReimbursementRequests,
-  startDate,
-  setStartDate,
-  endDate,
-  setEndDate
-}: GenerateReceiptsModalProps) => {
+const GenerateReceiptsModal = ({ open, setOpen, allReimbursementRequests }: GenerateReceiptsModalProps) => {
   const toast = useToast();
-  const [startDatePickerOpen, setStartDatePickerOpen] = useState(false);
+
   const [endDatePickerOpen, setEndDatePickerOpen] = useState(false);
+  const [startDatePickerOpen, setStartDatePickerOpen] = useState(false);
+
+  const { mutateAsync, isLoading } = useDownloadPDFOfImages();
 
-  const { mutateAsync, isLoading } = useDownloadPDFOfImages(startDate, endDate);
+  const refundSourceOptions = ['BUDGET', 'CASH', 'BOTH'];
 
   const onGenerateReceiptsSubmit = async (data: GenerateReceiptsFormInput) => {
     if (!allReimbursementRequests) return;
+
     const filteredRequests = allReimbursementRequests
       .filter(
         (val: ReimbursementRequest) => new Date(val.dateCreated.toDateString()) >= new Date(data.startDate.toDateString())
       )
       .filter(
         (val: ReimbursementRequest) => new Date(val.dateCreated.toDateString()) <= new Date(data.endDate.toDateString())
       )
-      .filter((val: ReimbursementRequest) => !val.dateDeleted);
+      .filter((val: ReimbursementRequest) => !val.dateDeleted)
+      .filter(
+        (val: ReimbursementRequest) =>
+          !val.dateDeleted && (data.refundSource === 'BOTH' || val.account === data.refundSource)
+      );
+
     const receipts = filteredRequests?.flatMap((request: ReimbursementRequest) => request.receiptPictures);
+
     try {
       await mutateAsync({
-        fileIds: receipts.map((receipt) => receipt.googleFileId)
+        fileIds: receipts.map((receipt) => receipt.googleFileId),
+        startDate: data.startDate,
+        endDate: data.endDate,
+        refundSource: data.refundSource
       });
     } catch (error: unknown) {
       if (error instanceof Error) {
@@ -74,7 +77,12 @@ const GenerateReceiptsModal = ({
     reset,
     formState: { errors, isValid }
   } = useForm({
-    resolver: yupResolver(schema)
+    resolver: yupResolver(schema),
+    defaultValues: {
+      startDate: new Date(),
+      endDate: new Date(),
+      refundSource: refundSourceOptions[2]
+    }
   });
 
   return (
@@ -104,9 +112,7 @@ const GenerateReceiptsModal = ({
                   onClose={() => setStartDatePickerOpen(false)}
                   onOpen={() => setStartDatePickerOpen(true)}
                   onChange={(newValue) => {
-                    const newDate = newValue ?? new Date();
-                    setStartDate(newDate);
-                    onChange(newDate);
+                    onChange(newValue ?? new Date());
                   }}
                   PopperProps={{
                     placement: 'right'
@@ -136,9 +142,7 @@ const GenerateReceiptsModal = ({
                   onClose={() => setEndDatePickerOpen(false)}
                   onOpen={() => setEndDatePickerOpen(true)}
                   onChange={(newValue) => {
-                    const newDate = newValue ?? new Date();
-                    setEndDate(newDate);
-                    onChange(newDate);
+                    onChange(newValue ?? new Date());
                   }}
                   PopperProps={{
                     placement: 'right'
@@ -156,6 +160,22 @@ const GenerateReceiptsModal = ({
               )}
             />
           </FormControl>
+          <FormControl fullWidth>
+            <FormLabel>Receipt Type</FormLabel>
+            <Controller
+              name="refundSource"
+              control={control}
+              render={({ field: { onChange, value } }) => (
+                <Select value={value} onChange={(event) => onChange(event.target.value)}>
+                  {refundSourceOptions.map((status) => (
+                    <MenuItem key={status} value={status}>
+                      {status}
+                    </MenuItem>
+                  ))}
+                </Select>
+              )}
+            />
+          </FormControl>
         </>
       )}
     </NERFormModal>

src/frontend/src/pages/FinancePage/FinancePage.tsx

@@ -62,9 +62,6 @@ const FinancePage = () => {
   const [accountCreditModalShow, setAccountCreditModalShow] = useState<boolean>(false);
   const [showTotalAmountSpent, setShowTotalAmountSpent] = useState(false);
 
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(new Date());
-
   if (isFinance && allReimbursementRequestsIsError) return <ErrorPage message={allReimbursementRequestsError?.message} />;
   if (userReimbursementRequestIsError) return <ErrorPage message={userReimbursementRequestError?.message} />;
   if (isFinance && allPendingAdvisorListIsError) return <ErrorPage message={allPendingAdvisorListError?.message} />;
@@ -164,10 +161,6 @@ const FinancePage = () => {
         open={showGenerateReceipts}
         setOpen={setShowGenerateReceipts}
         allReimbursementRequests={allReimbursementRequests}
-        startDate={startDate}
-        endDate={endDate}
-        setStartDate={setStartDate}
-        setEndDate={setEndDate}
       />
       <Grid container>
         <Grid item xs={12} sm={12} md={4}>