Add CSV Download Button

Author: Peyton-McKee

src/frontend/src/apis/finance.api.ts

@@ -17,7 +17,7 @@ import {
 } from './transformers/reimbursement-requests.transformer';
 import { saveAs } from 'file-saver';
 import { PDFDocument, PDFImage } from 'pdf-lib';
-import { ExpenseType } from 'shared';
+import { ExpenseType, ReimbursementRequest } from 'shared';
 
 enum AllowedFileType {
   JPEG = 'image/jpeg',
@@ -136,7 +136,7 @@ export const getCurrentUserReimbursementRequests = () => {
  * Gets all the reimbursement requests
  */
 export const getAllReimbursementRequests = () => {
-  return axios.get(apiUrls.financeEndpoints(), {
+  return axios.get<ReimbursementRequest[]>(apiUrls.financeEndpoints(), {
     transformResponse: (data) => JSON.parse(data).map(reimbursementRequestTransformer)
   });
 };

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

@@ -39,8 +39,10 @@ import {
   Vendor,
   ReimbursementStatus,
   OtherReimbursementProductCreateArgs,
-  WbsReimbursementProductCreateArgs
+  WbsReimbursementProductCreateArgs,
+  ReimbursementStatusType
 } from 'shared';
+import { fullNamePipe } from '../utils/pipes';
 
 export interface CreateReimbursementRequestPayload {
   vendorId: string;
@@ -356,6 +358,31 @@ export const useDownloadPDFOfImages = () => {
   });
 };
 
+export const useDownloadCSVFileOfReimbursementRequests = () => {
+  return useMutation(['reimbursement-requests'], async () => {
+    const { data } = await getAllReimbursementRequests();
+    const csvContent =
+      'data:text/csv;charset=utf-8,' +
+      'SABO ID,Recipient,Total Cost,Status,Account,Date Created,Date Delivered,Date Submitted,Vendor\n' +
+      data
+        .map(
+          (rr) =>
+            `${rr.saboId},${fullNamePipe(rr.recipient)},${rr.totalCost},${
+              rr.reimbursementStatuses[rr.reimbursementStatuses.length - 1].type
+            },${rr.account},${rr.dateCreated},${rr.dateDelivered ?? ''},${
+              rr.reimbursementStatuses.find((rs) => rs.type === ReimbursementStatusType.SABO_SUBMITTED)?.dateCreated ?? ''
+            },${rr.vendor.name}`
+        )
+        .join('\n');
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement('a');
+    link.setAttribute('href', encodedUri);
+    link.setAttribute('download', 'reimbursement-requests.csv');
+    document.body.appendChild(link);
+    link.click();
+  });
+};
+
 /**
  * Custom react hook to get the list of Reimbursement Requests that are pending Advisor Approval
  *

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

@@ -16,6 +16,7 @@ import ReimbursementRequestTable from './ReimbursementRequestsSection';
 import {
   useAllReimbursementRequests,
   useCurrentUserReimbursementRequests,
+  useDownloadCSVFileOfReimbursementRequests,
   useGetPendingAdvisorList
 } from '../../hooks/finance.hooks';
 import ErrorPage from '../ErrorPage';
@@ -26,9 +27,10 @@ import { routes } from '../../utils/routes';
 import ReportRefundModal from './FinanceComponents/ReportRefundModal';
 import GenerateReceiptsModal from './FinanceComponents/GenerateReceiptsModal';
 import PendingAdvisorModal from './FinanceComponents/PendingAdvisorListModal';
-import { isGuest } from 'shared';
+import { isAdmin, isGuest } from 'shared';
 import WorkIcon from '@mui/icons-material/Work';
 import TotalAmountSpentModal from './FinanceComponents/TotalAmountSpentModal';
+import { useToast } from '../../hooks/toasts.hooks';
 
 const FinancePage = () => {
   const user = useCurrentUser();
@@ -53,6 +55,8 @@ const FinancePage = () => {
     isError: allPendingAdvisorListIsError,
     error: allPendingAdvisorListError
   } = useGetPendingAdvisorList();
+  const { mutateAsync: downloadCSVFileOfReimbursementRequests } = useDownloadCSVFileOfReimbursementRequests();
+  const toast = useToast();
 
   const { isFinance } = user;
 
@@ -83,6 +87,16 @@ const FinancePage = () => {
     setAnchorEl(null);
   };
 
+  const downloadReimbursementRequests = async () => {
+    try {
+      await downloadCSVFileOfReimbursementRequests();
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
   const financeActionsDropdown = (
     <>
       <NERButton
@@ -136,6 +150,12 @@ const FinancePage = () => {
           </ListItemIcon>
           Total Amount Spent
         </MenuItem>
+        <MenuItem onClick={async () => await downloadReimbursementRequests()} disabled={!isFinance && !isAdmin(user.role)}>
+          <ListItemIcon>
+            <WorkIcon fontSize="small" />
+          </ListItemIcon>
+          Download Reimbursement Requests To CSV
+        </MenuItem>
       </Menu>
     </>
   );