Working new admin tools tables

src/backend/src/transformers/reimbursement-requests.transformer.ts

@@ -38,11 +38,7 @@ import { ReimbursementProductOtherReasonQueryArgs } from '../prisma-query-args/r
 import { ReimbursementRequestCommentQueryArgs } from '../prisma-query-args/reimbursement-comment.query-args';
 
 export const receiptTransformer = (receipt: Prisma.ReceiptGetPayload<ReceiptQueryArgs>): Receipt => {
-  return {
-    receiptId: receipt.receiptId,
-    googleFileId: receipt.googleFileId,
-    name: receipt.name
-  };
+  return { receiptId: receipt.receiptId, googleFileId: receipt.googleFileId, name: receipt.name };
 };
 
 export const reimbursementRequestTransformer = (
@@ -100,15 +96,13 @@ const reimbursementProductReasonTransformer = (
         userCreated: userTransformer(reason.otherReason!.userCreated),
         dateCreated: reason.otherReason!.dateCreated,
         budget: reason.otherReason!.budget,
-        indexCode: indexCodeTransformer(reason.otherReason!.indexCode)
+        indexCode: indexCodeTransformer(reason.otherReason!.indexCode),
+        accountCodes: reason.otherReason!.accountCodes.map(accountCodeTransformer)
       };
 };
 
 export const accountCodeTransformer = (accountCode: Prisma.Account_CodeGetPayload<AccountCodeQueryArgs>): AccountCode => {
-  return {
-    ...accountCode,
-    indexCodes: accountCode.indexCodes.map(indexCodeTransformer)
-  };
+  return { ...accountCode, indexCodes: accountCode.indexCodes.map(indexCodeTransformer) };
 };
 
 export const vendorTransformer = (vendor: Prisma.VendorGetPayload<VendorQueryArgs>): Vendor => {
@@ -137,10 +131,7 @@ export const reimbursementTransformer = (
 };
 
 export const indexCodeTransformer = (indexCode: Prisma.Index_CodeGetPayload<IndexCodeQueryArgs>): IndexCode => {
-  return {
-    ...indexCode,
-    userCreated: userTransformer(indexCode.userCreated)
-  };
+  return { ...indexCode, userCreated: userTransformer(indexCode.userCreated) };
 };
 
 export const otherProductReasonTransformer = (
@@ -152,15 +143,13 @@ export const otherProductReasonTransformer = (
     userCreated: userTransformer(otherProductReason.userCreated),
     dateCreated: otherProductReason.dateCreated,
     budget: otherProductReason.budget,
-    indexCode: indexCodeTransformer(otherProductReason.indexCode)
+    indexCode: indexCodeTransformer(otherProductReason.indexCode),
+    accountCodes: otherProductReason.accountCodes.map(accountCodeTransformer)
   };
 };
 
 export const reimbursementRequestCommentTransformer = (
   reimbursementRequestComment: Prisma.Reimbursement_Request_CommentGetPayload<ReimbursementRequestCommentQueryArgs>
 ): ReimbursementRequestComment => {
-  return {
-    ...reimbursementRequestComment,
-    userCreated: userTransformer(reimbursementRequestComment.userCreated)
-  };
+  return { ...reimbursementRequestComment, userCreated: userTransformer(reimbursementRequestComment.userCreated) };
 };

src/frontend/src/pages/AdminToolsPage/AdminToolsFinanceConfig.tsx

@@ -1,18 +1,21 @@
-import { Box, Typography } from '@mui/material';
-import VendorsTable from './FinanceConfig/VendorsTable';
-import AccountCodesTable from './FinanceConfig/AccountCodesTable';
+import { Box, Grid, Typography } from '@mui/material';
+import AccountManagerTable from './FinanceConfig/AccountManagerTable';
+import CategoriesTable from './FinanceConfig/CategoriesTable';
 
 const AdminToolsFinanceConfig: React.FC = () => {
   return (
-    <Box>
+    <Box padding="5px">
       <Typography variant="h5" gutterBottom borderBottom={1} color="#ef4345" borderColor={'white'}>
-        Account Manager
+        Finance Config
       </Typography>
-      <VendorsTable />
-      <Typography variant="h5" gutterBottom borderBottom={1} color="#ef4345" borderColor={'white'}>
-        Categories
-      </Typography>
-      <AccountCodesTable />
+      <Grid container spacing="3%">
+        <Grid item direction="column" xs={12} md={6}>
+          <AccountManagerTable />
+        </Grid>
+        <Grid item direction="column" alignSelf="right" xs={12} md={6}>
+          <CategoriesTable />
+        </Grid>
+      </Grid>
     </Box>
   );
 };

src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodeFormModal.tsx

@@ -2,7 +2,7 @@ import { IndexCode, AccountCode } from 'shared';
 import { AccountCodePayload, useGetAllIndexCodes } from '../../../hooks/finance.hooks';
 import { Controller, useForm } from 'react-hook-form';
 import NERFormModal from '../../../components/NERFormModal';
-import { Checkbox, FormControl, FormLabel, FormHelperText, Select, MenuItem, OutlinedInput } from '@mui/material';
+import { Checkbox, FormControl, FormLabel, FormHelperText, Select, MenuItem, OutlinedInput, Box } from '@mui/material';
 import ReactHookTextField from '../../../components/ReactHookTextField';
 import { useToast } from '../../../hooks/toasts.hooks';
 import * as yup from 'yup';
@@ -73,20 +73,15 @@ const AccountCodeFormModal = ({ showModal, handleClose, defaultValues, onSubmit
     <NERFormModal
       open={showModal}
       onHide={handleClose}
-      title={!!defaultValues ? 'Edit Account Code' : 'Create Account Code'}
+      title={!!defaultValues ? 'Edit Account Code' : 'Add Account Code'}
       reset={() => reset({ name: '', code: undefined, allowed: false, indexCodeIds: [] })}
       handleUseFormSubmit={handleSubmit}
       onFormSubmit={onFormSubmit}
       formId={!!defaultValues ? 'edit-account-code-form' : 'create-account-code-form'}
       showCloseButton
     >
       <FormControl fullWidth>
-        <FormLabel>Account Name</FormLabel>
-        <ReactHookTextField name="name" control={control} fullWidth />
-        <FormHelperText error>{errors.name?.message}</FormHelperText>
-      </FormControl>
-      <FormControl fullWidth>
-        <FormLabel>Allowed Refund Source</FormLabel>
+        <FormLabel>Index Code(s)</FormLabel>
         <Controller
           name="indexCodeIds"
           control={control}
@@ -111,22 +106,23 @@ const AccountCodeFormModal = ({ showModal, handleClose, defaultValues, onSubmit
         <ReactHookTextField name="code" control={control} fullWidth />
         <FormHelperText error>{errors.code?.message}</FormHelperText>
       </FormControl>
+      <FormControl fullWidth>
+        <FormLabel>Description</FormLabel>
+        <ReactHookTextField name="name" control={control} fullWidth />
+        <FormHelperText error>{errors.name?.message}</FormHelperText>
+      </FormControl>
       <FormControl>
-        <FormLabel
-          sx={{
-            '&.Mui-focused': { color: theme.palette.text.secondary }
-          }}
-        >
-          Allowed?
-        </FormLabel>
-        <Controller
-          name="allowed"
-          control={control}
-          rules={{ required: true }}
-          render={({ field: { onChange, value } }) => {
-            return <Checkbox onChange={onChange} checked={value} />;
-          }}
-        />
+        <Box flexDirection={'row'}>
+          <FormLabel sx={{ '&.Mui-focused': { color: theme.palette.text.secondary } }}>Allowed?</FormLabel>
+          <Controller
+            name="allowed"
+            control={control}
+            rules={{ required: true }}
+            render={({ field: { onChange, value } }) => {
+              return <Checkbox onChange={onChange} checked={value} />;
+            }}
+          />
+        </Box>
       </FormControl>
     </NERFormModal>
   );

src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountManagerTable.tsx

@@ -0,0 +1,116 @@
+import { TableRow, TableCell, Typography, Box, TableHead, Table, TableBody, Checkbox } from '@mui/material';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import { useGetAllAccountCodes } from '../../../hooks/finance.hooks';
+import ErrorPage from '../../ErrorPage';
+import React, { useState } from 'react';
+import { AccountCode } from 'shared';
+import CreateAccountCodeModal from './CreateAccountCodeModal';
+import EditAccountCodeModal from './EditAccountCodeModal';
+import { NERButton } from '../../../components/NERButton';
+
+const AccountManagerTable = () => {
+  const {
+    data: accountCodes,
+    isLoading: accountCodesIsLoading,
+    isError: accountCodesIsError,
+    error: accountCodesError
+  } = useGetAllAccountCodes();
+  const [showCreateModal, setShowCreateModal] = useState<boolean>(false);
+  const [showEditModal, setShowEditModal] = useState<boolean>(false);
+  const [clickedAccountCode, setClickedAccountCode] = useState<AccountCode>();
+
+  if (!accountCodes || accountCodesIsLoading) {
+    return <LoadingIndicator />;
+  }
+
+  if (accountCodesIsError) {
+    return <ErrorPage message={accountCodesError.message} />;
+  }
+
+  const uniqueIndexCodeNames = (accountCode: AccountCode) => {
+    const uniqueNames = new Set();
+
+    accountCode.indexCodes.forEach((indexCode) => uniqueNames.add(indexCode.name));
+    return Array.from(uniqueNames).join(', ');
+  };
+
+  const accountManagerTableRows = accountCodes.map((accountCode, index) => (
+    <TableRow
+      onClick={() => {
+        setClickedAccountCode(accountCode);
+        setShowEditModal(true);
+      }}
+      key={`account-code-${index}`}
+      sx={{ cursor: 'pointer' }}
+    >
+      <TableCell>
+        <Typography>{uniqueIndexCodeNames(accountCode)}</Typography>
+      </TableCell>
+      <TableCell>
+        <Typography>{accountCode.code}</Typography>
+      </TableCell>
+      <TableCell>
+        <Typography>{accountCode.name}</Typography>
+      </TableCell>
+      <TableCell>
+        <Checkbox checked={accountCode.allowed} />
+      </TableCell>
+    </TableRow>
+  ));
+
+  const columns = ['Index Code', 'Account Code', 'Description', 'Allowed'];
+
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', justifyContent: 'left', marginTop: '20px', paddingBottom: '20px' }}>
+        <Typography variant="h5" gutterBottom color="white" paddingRight={'20px'}>
+          Account Manager
+        </Typography>
+        <NERButton
+          style={{ color: 'white' }}
+          variant="contained"
+          onClick={() => {
+            setShowCreateModal(true);
+          }}
+        >
+          Add Account
+        </NERButton>
+      </Box>
+      <CreateAccountCodeModal showModal={showCreateModal} handleClose={() => setShowCreateModal(false)} />
+      {clickedAccountCode && (
+        <EditAccountCodeModal
+          showModal={showEditModal}
+          handleClose={() => {
+            setShowEditModal(false);
+            setClickedAccountCode(undefined);
+          }}
+          accountCode={clickedAccountCode}
+        />
+      )}
+      <Table>
+        <TableHead>
+          <TableRow>
+            {columns.map((column, index) => (
+              <TableCell
+                key={`account-code-column-${index}`}
+                sx={{
+                  borderBottom: '2px solid white',
+                  fontWeight: 'bold',
+                  fontSize: '1em',
+                  backgroundColor: '#ef4345',
+                  color: 'white',
+                  borderRadius: index === 0 ? '10px 0px 0px 0px' : index === columns.length - 1 ? '0px 10px 0px 0px' : '0px'
+                }}
+              >
+                {column}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>{accountManagerTableRows} </TableBody>
+      </Table>
+    </Box>
+  );
+};
+
+export default AccountManagerTable;