#1182 - add adminToolTable, move form into page

Author: RChandler234

src/frontend/src/pages/AdminToolsPage/AdminToolTable.tsx

@@ -0,0 +1,33 @@
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead } from '@mui/material';
+
+interface AdminToolTableProps {
+  columns: {
+    name: string;
+    width?: string;
+  }[];
+  rows: JSX.Element[];
+}
+
+const AdminToolTable = ({ columns, rows }: AdminToolTableProps) => {
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          {columns.map((column, idx) => (
+            <TableCell
+              key={`${column.name}-${idx}`}
+              align="left"
+              sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }}
+              width={column.width}
+            >
+              {column.name}
+            </TableCell>
+          ))}
+        </TableHead>
+        <TableBody>{rows}</TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default AdminToolTable;

src/frontend/src/pages/AdminToolsPage/CreateTeamModal.tsx

@@ -1,4 +1,4 @@
-import { TableRow, TableCell, Paper, Table, TableBody, TableContainer, TableHead, Typography, Box } from '@mui/material';
+import { TableRow, TableCell, Typography, Box } from '@mui/material';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import { useGetAllExpenseTypes } from '../../../hooks/finance.hooks';
 import ErrorPage from '../../ErrorPage';
@@ -7,6 +7,7 @@ import { useState } from 'react';
 import { ExpenseType } from 'shared';
 import CreateAccountCodeModal from './CreateAccountCodeModal';
 import EditAccountCodeModal from './EditAccountCodeModal';
+import AdminToolTable from '../AdminToolTable';
 
 const AccountCodesTable = () => {
   const {
@@ -59,37 +60,14 @@ const AccountCodesTable = () => {
       <Typography variant="subtitle1" textAlign="left">
         Account Codes
       </Typography>
-      <TableContainer component={Paper}>
-        <Table>
-          <TableHead>
-            <TableCell
-              align="left"
-              sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }}
-              itemType="date"
-              width="50%"
-            >
-              Account Name
-            </TableCell>
-            <TableCell
-              align="left"
-              sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }}
-              itemType="date"
-              width="30%"
-            >
-              Account Code
-            </TableCell>
-            <TableCell
-              align="center"
-              sx={{ fontSize: '16px', fontWeight: 600, border: '2px solid black' }}
-              itemType="date"
-              width="20%"
-            >
-              Allowed
-            </TableCell>
-          </TableHead>
-          <TableBody>{accountCodesTableRows}</TableBody>
-        </Table>
-      </TableContainer>
+      <AdminToolTable
+        columns={[
+          { name: 'Account Name', width: '50%' },
+          { name: 'Account Code', width: '30%' },
+          { name: 'Allowed', width: '20%' }
+        ]}
+        rows={accountCodesTableRows}
+      />
       <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
         <NERButton
           variant="contained"

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

@@ -1,11 +1,12 @@
-import { TableRow, TableCell, Paper, Table, TableBody, TableContainer, TableHead, Typography, Box } from '@mui/material';
+import { TableRow, TableCell, Typography, Box } from '@mui/material';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import { useGetAllVendors } from '../../../hooks/finance.hooks';
 import { datePipe } from '../../../utils/pipes';
 import ErrorPage from '../../ErrorPage';
 import { NERButton } from '../../../components/NERButton';
 import { useState } from 'react';
 import CreateVendorModal from './CreateVendorModal';
+import AdminToolTable from '../AdminToolTable';
 
 const VendorsTable = () => {
   const { data: vendors, isLoading: vendorIsLoading, isError: vendorIsError, error: vendorError } = useGetAllVendors();
@@ -20,7 +21,7 @@ const VendorsTable = () => {
 
   const vendorTableRows = vendors.map((vendor) => (
     <TableRow>
-      <TableCell align="center" sx={{ border: '2px solid black' }}>
+      <TableCell align="left" sx={{ border: '2px solid black' }}>
         {datePipe(vendor.dateCreated)}
       </TableCell>
       <TableCell sx={{ border: '2px solid black' }}>{vendor.name}</TableCell>
@@ -31,30 +32,7 @@ const VendorsTable = () => {
     <Box>
       <CreateVendorModal showModal={createModalShow} handleClose={() => setCreateModalShow(false)} />
       <Typography variant="subtitle1">Registered Vendors</Typography>
-      <TableContainer component={Paper}>
-        <Table sx={{ border: '2px solid black' }}>
-          <TableHead>
-            <TableRow>
-              <TableCell
-                align="center"
-                sx={{
-                  fontSize: '16px',
-                  fontWeight: 600,
-                  width: '25%',
-                  border: '2px solid black'
-                }}
-                itemType="date"
-              >
-                Date Registered
-              </TableCell>
-              <TableCell align="left" sx={{ fontSize: '16px', fontWeight: 600 }}>
-                Vendor Name
-              </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>{vendorTableRows}</TableBody>
-        </Table>
-      </TableContainer>
+      <AdminToolTable columns={[{ name: 'Date Registered' }, { name: 'Vendor Name' }]} rows={vendorTableRows} />
       <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
         <NERButton
           variant="contained"