updated the columns for transactions

src/bin/BinSettings.tsx

@@ -424,7 +424,6 @@ export default function BinSettings(props: Props) {
   };
 
   const updateBin = () => {
-    console.log("bin settings update")
     // If initial moisture is updated, so does the timestamp
     if (form.inventory?.initialMoisture !== bin?.settings.inventory?.initialMoisture) {
       if (form.inventory) form.inventory.initialTimestamp = moment().format();
@@ -451,7 +450,6 @@ export default function BinSettings(props: Props) {
         form.lowTemp = lowTempC;
         form.autoGrainNode = autoTopNode;
         if (form.inventory) form.inventory.inventoryControl = inventoryControl;
-        console.log("bin api update")
         binAPI
           .updateBin(bin.key(), form)
           .then(response => {
@@ -839,7 +837,6 @@ export default function BinSettings(props: Props) {
               row
               value={inventoryControl}
               onChange={(_, value) => {
-                console.log(value);
                 setInventoryControl(+value);
               }}>
               <FormControlLabel

src/grain/GrainTransaction.tsx

@@ -203,7 +203,6 @@ export default function GrainTransaction(props: Props) {
 
   //create a transaction to enter into the table
   const createTransaction = (finalVal: number) => {
-    console.log("create transaction")
     let dest = selectedDestination;
     let source = selectedSource;
     let bpt = 1;
@@ -249,16 +248,13 @@ export default function GrainTransaction(props: Props) {
         grainTransaction.subtype = obj.subtype();
       }
     }
-    console.log(newTransaction)
     transactionAPI.addTransaction(newTransaction, imageIDs).then(resp => {
-      console.log(resp)
       newTransaction.key = resp.data.key;
       closeDialogs(true, newTransaction);
     });
   };
 
   const updateInventory = () => {
-    console.log("update inventory")
     //this is the amount to add to the destination
     let destinationAdd = Math.abs(
       isNaN(parseFloat(grainChangeVal)) ? 1 : parseFloat(grainChangeVal)

src/navigation/SideNavigator.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, People, Person } from "@mui/icons-material";
+import { ChevronRight, People, Person, SyncAlt } from "@mui/icons-material";
 import ChevronLeft from "@mui/icons-material/ChevronLeft";
 import { 
   darken, 
@@ -306,7 +306,19 @@ export default function SideNavigator(props: Props) {
             <ListItemIcon>
               <TasksIcon />
             </ListItemIcon>
-            {open && <ListItemText primary="Heaters" />}
+            {open && <ListItemText primary="Tasks" />}
+          </ListItemButton>
+        </Tooltip>
+        <Tooltip title="Transactions" placement="right">
+          <ListItemButton
+            id="tour-transactions"
+            onClick={() => goTo("/transactions")}
+            classes={getClasses("/transactions")}
+            >
+            <ListItemIcon>
+              <SyncAlt />
+            </ListItemIcon>
+            {open && <ListItemText primary="Transactions" />}
           </ListItemButton>
         </Tooltip>
       </List>

src/transactions/transactionViewer.tsx

@@ -39,19 +39,23 @@ export default function TransactionViewer(props: Props) {
     {
       title: "Date",
       render: row => {
-        return <Typography>{moment(row.transaction.timestamp).format("YYYY-MM-DD")}</Typography>;
+        return (
+          <Box padding={2}>
+            <Typography>{moment(row.transaction.timestamp).format("YYYY-MM-DD")}</Typography>
+          </Box>
+        );
       }
     },
     {
       title: "From",
       render: row => {
         return (
-          <React.Fragment>
+          <Box padding={2}>
             <Typography>{ObjectDescriber(row.transaction.fromObject).name}</Typography>
             <Typography>
               {objectNames ? objectNames.get(row.transaction.fromKey) : row.transaction.fromKey}
             </Typography>
-          </React.Fragment>
+          </Box>
         );
       }
     },
@@ -59,65 +63,45 @@ export default function TransactionViewer(props: Props) {
       title: "To",
       render: row => {
         return (
-          <React.Fragment>
+          <Box padding={2}>
             <Typography>{ObjectDescriber(row.transaction.toObject).name}</Typography>
             <Typography>
               {objectNames ? objectNames.get(row.transaction.toKey) : row.transaction.toKey}
             </Typography>
-          </React.Fragment>
+          </Box>
         );
       }
     },
     {
       title: "Transaction",
       render: row => {
-        return <TransactionDataDisplay transaction={row} />;
+        return (
+          <Box padding={2}> 
+            <TransactionDataDisplay transaction={row} />
+          </Box>
+        );
       }
     }
   ];
 
+  const handleChange = (event: any) => {
+    setPageSize(event.target.value);
+  };
+
   const myTable = () => {
     return (
       <ResponsiveTable<Transaction>
+        isLoading={loading}
+        title={"Inventory Transactions"}
         page={tablePage}
+        columns={columns}
         pageSize={pageSize}
         rows={displayedRows}
         total={transactions.length}
         setPage={page => setTablePage(page)}
-        handleRowsPerPageChange={() => {}}
+        handleRowsPerPageChange={handleChange}
       />
     )
-    // return (
-    //   <MaterialTable
-    //     isLoading={loading}
-    //     key="devicesList"
-    //     icons={getTableIcons()}
-    //     columns={columns}
-    //     data={transactions}
-    //     options={{
-    //       paging: true,
-    //       pageSize: 10,
-    //       pageSizeOptions: [5, 10, 20],
-    //       padding: "dense",
-    //       showTitle: true,
-    //       toolbar: true,
-    //       sorting: true,
-    //       columnsButton: true,
-    //       search: false
-    //     }}
-    //     localization={{
-    //       body: { emptyDataSourceMessage: loading ? "" : "No Transactions found" }
-    //     }}
-    //     components={{
-    //       Toolbar: props => (
-    //         <React.Fragment>
-    //           <MTableToolbar {...props} />
-    //         </React.Fragment>
-    //       )
-    //     }}
-    //     title="Inventory Transactions"
-    //   />
-    // );
   };
 
   return <Box>{myTable()}</Box>;