#1583 everything except the form

Author: walker-sean

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

@@ -426,14 +426,13 @@ export const useReportRefund = () => {
   );
 };
 
-export const useEditRefund = (reimbursementId: string) => {
+export const useEditRefund = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<Reimbursement, Error, { refundAmount: number; dateReceived: string }>(
-    ['reimbursement', 'edit', reimbursementId],
-    async (formData: { refundAmount: number; dateReceived: string }) => {
-      const { data } = await editRefund(reimbursementId, formData.refundAmount, formData.dateReceived);
-      queryClient.invalidateQueries(['reimbursement', reimbursementId]);
+  return useMutation<Reimbursement, Error, { refundId: string; refundAmount: number; dateReceived: string }>(
+    ['reimbursement', 'edit'],
+    async (formData: { refundId: string; refundAmount: number; dateReceived: string }) => {
+      const { data } = await editRefund(formData.refundId, formData.refundAmount, formData.dateReceived);
       return data;
     },
     {

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

@@ -33,7 +33,7 @@ export interface ReportRefundInputs {
   newAccountCreditAmount: number;
 }
 
-const ReportRefundModal: React.FC<ReportRefundProps> = ({ modalShow, handleClose }: ReportRefundProps) => {
+const RefundModal: React.FC<ReportRefundProps> = ({ modalShow, handleClose }: ReportRefundProps) => {
   const toast = useToast();
   const { isLoading, mutateAsync } = useReportRefund();
 
@@ -110,4 +110,4 @@ const ReportRefundModal: React.FC<ReportRefundProps> = ({ modalShow, handleClose
   );
 };
 
-export default ReportRefundModal;
+export default RefundModal;

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

@@ -24,7 +24,7 @@ import LoadingIndicator from '../../components/LoadingIndicator';
 import PageLayout from '../../components/PageLayout';
 import { useHistory } from 'react-router-dom';
 import { routes } from '../../utils/routes';
-import ReportRefundModal from './FinanceComponents/ReportRefundModal';
+import RefundModal from './FinanceComponents/ReportRefundModal';
 import GenerateReceiptsModal from './FinanceComponents/GenerateReceiptsModal';
 import PendingAdvisorModal from './FinanceComponents/PendingAdvisorListModal';
 import { isAdmin, isGuest } from 'shared';
@@ -176,7 +176,7 @@ const FinancePage = () => {
           onHide={() => setShowTotalAmountSpent(false)}
         />
       )}
-      <ReportRefundModal modalShow={accountCreditModalShow} handleClose={() => setAccountCreditModalShow(false)} />
+      <RefundModal modalShow={accountCreditModalShow} handleClose={() => setAccountCreditModalShow(false)} />
       <GenerateReceiptsModal
         open={showGenerateReceipts}
         setOpen={setShowGenerateReceipts}

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

@@ -13,7 +13,7 @@ import {
   useTheme
 } from '@mui/material';
 import { useState } from 'react';
-import { useAllReimbursements, useCurrentUserReimbursements } from '../../hooks/finance.hooks';
+import { useAllReimbursements, useCurrentUserReimbursements, useEditRefund } from '../../hooks/finance.hooks';
 import ErrorPage from '../ErrorPage';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import { Reimbursement, ReimbursementRequest, isAdmin } from 'shared';
@@ -24,7 +24,7 @@ import FinanceTabs from './FinanceComponents/FinanceTabs';
 import { getRefundRowData } from '../../utils/reimbursement-request.utils';
 
 type Order = 'asc' | 'desc'; // ascending or descending
-type OrderBy = keyof { date: Date; amount: number };
+type OrderBy = 'amount' | 'date';
 
 const RefundHeader = ({ header, data }: { header: string; data: string }) => {
   return (
@@ -107,6 +107,14 @@ const Refunds = ({ userReimbursementRequests, allReimbursementRequests }: Refund
   } = useAllReimbursements();
   const theme = useTheme();
 
+  const { mutateAsync } = useEditRefund();
+
+  const onClick = (refundId: string) => {
+    mutateAsync({ refundId, refundAmount: 0, dateReceived: new Date().toISOString() });
+  };
+
+  const editModalRefundId = useState<string | null>();
+
   const canViewAllReimbursementRequests = user.isFinance || isAdmin(user.role);
   if (canViewAllReimbursementRequests && allReimbursementsIsError)
     return <ErrorPage message={allReimbursementsError?.message} />;
@@ -202,7 +210,7 @@ const Refunds = ({ userReimbursementRequests, allReimbursementRequests }: Refund
                   key={`${row.date}-$${row.amount}-${index}`}
                   sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                 >
-                  <TableCell align="center">{datePipe(row.date)}</TableCell>
+                  <TableCell onClick={() => onClick(row.id)}>{datePipe(row.date)}</TableCell>
                   <TableCell align="center">{centsToDollar(row.amount)}</TableCell>
                   {tabValue === 1 && <TableCell align="center">{fullNamePipe(row.recipient)}</TableCell>}
                 </TableRow>

src/frontend/src/utils/reimbursement-request.utils.ts

@@ -166,7 +166,7 @@ export const imageFileUrl = (googleFileId: string) => `https://drive.google.com/
 export const imageDownloadUrl = (googleFileId: string) => `https://drive.google.com/uc?export=download&id=${googleFileId}`;
 
 export const getRefundRowData = (refund: Reimbursement) => {
-  return { date: refund.dateCreated, amount: refund.amount, recipient: refund.userSubmitted };
+  return { date: refund.dateCreated, amount: refund.amount, recipient: refund.userSubmitted, id: refund.reimbursementId };
 };
 
 export const createReimbursementRequestRowData = (reimbursementRequest: ReimbursementRequest): ReimbursementRequestRow => {