From 97bbd4149266ce1b2968f323c166ba8c632d1662 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Tue, 8 Apr 2025 11:43:39 -0600
Subject: [PATCH 1/3] adding the transaction page

---
 src/bin/BinSettings.tsx                     |  30 ++--
 src/grain/GrainTransaction.tsx              |   4 +
 src/models/Transaction.ts                   |  19 +++
 src/navigation/Router.tsx                   |   2 +
 src/pages/Transactions.tsx                  | 165 ++++++++++++++++++++
 src/transactions/transactionDataDisplay.tsx |  42 +++++
 src/transactions/transactionViewer.tsx      | 124 +++++++++++++++
 7 files changed, 371 insertions(+), 15 deletions(-)
 create mode 100644 src/models/Transaction.ts
 create mode 100644 src/pages/Transactions.tsx
 create mode 100644 src/transactions/transactionDataDisplay.tsx
 create mode 100644 src/transactions/transactionViewer.tsx

diff --git a/src/bin/BinSettings.tsx b/src/bin/BinSettings.tsx
index 345812e..8816314 100644
--- a/src/bin/BinSettings.tsx
+++ b/src/bin/BinSettings.tsx
@@ -50,7 +50,7 @@ import {
 // import FanPicker from "fans/fanPicker";
 import { GrainOptions, ToGrainOption } from "grain";
 import GrainDescriber from "grain/GrainDescriber";
-// import GrainTransaction from "grain/GrainTransaction";
+import GrainTransaction from "grain/GrainTransaction";
 import { GetGrainUseOptions, ToGrainUseOption } from "grain/GrainUse";
 import { useMobile, useSnackbar } from "hooks";
 import { clone, cloneDeep } from "lodash";
@@ -424,6 +424,7 @@ 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();
@@ -450,7 +451,7 @@ 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 => {
@@ -473,19 +474,18 @@ export default function BinSettings(props: Props) {
         newBin.settings.inventory.grainBushels = bin.settings.inventory?.grainBushels ?? 0; //but also need to use the old inventory amount so the diff is applied correctly
       }
       return (
-        // <GrainTransaction
-        //   open={grainUpdate}
-        //   mainObject={newBin}
-        //   grainAdjustment={grainDiff}
-        //   close={() => {
-        //     setGrainUpdate(false);
-        //     setGrainDiff(0);
-        //   }}
-        //   callback={() => {
-        //     close(true);
-        //   }}
-        // />
-        null
+        <GrainTransaction
+          open={grainUpdate}
+          mainObject={newBin}
+          grainAdjustment={grainDiff}
+          close={() => {
+            setGrainUpdate(false);
+            setGrainDiff(0);
+          }}
+          callback={() => {
+            close(true);
+          }}
+        />
       );
     }
   };
diff --git a/src/grain/GrainTransaction.tsx b/src/grain/GrainTransaction.tsx
index 469cbc7..562e5b2 100644
--- a/src/grain/GrainTransaction.tsx
+++ b/src/grain/GrainTransaction.tsx
@@ -203,6 +203,7 @@ 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;
@@ -248,13 +249,16 @@ 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)
diff --git a/src/models/Transaction.ts b/src/models/Transaction.ts
new file mode 100644
index 0000000..b5d3804
--- /dev/null
+++ b/src/models/Transaction.ts
@@ -0,0 +1,19 @@
+import { cloneDeep } from "lodash";
+import { pond } from "protobuf-ts/pond";
+import { or } from "utils/types";
+
+export class Transaction {
+  public transaction: pond.Transaction = pond.Transaction.create();
+
+  public static create(pb?: pond.Transaction): Transaction {
+    let my = new Transaction();
+    if (pb) {
+      my.transaction = pond.Transaction.fromObject(cloneDeep(or(pb, {})));
+    }
+    return my;
+  }
+
+  public static any(data: any): Transaction {
+    return Transaction.create(pond.Transaction.fromObject(cloneDeep(data)));
+  }
+}
\ No newline at end of file
diff --git a/src/navigation/Router.tsx b/src/navigation/Router.tsx
index a281c13..5d1e931 100644
--- a/src/navigation/Router.tsx
+++ b/src/navigation/Router.tsx
@@ -18,6 +18,7 @@ import Site from "pages/Site";
 import Heaters from "pages/Heaters";
 import Heater from "pages/Heater";
 import Tasks from "pages/Tasks";
+import Transactions from "pages/Transactions";
 //import Site from "pages/Site";
 
 const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
@@ -301,6 +302,7 @@ export default function Router(props: Props) {
           {/* <Route index element={<Typography>Hello!</Typography>} /> */}
           <Route path="users" element={<Users/>} />
           <Route path="tasks" element={<Tasks />} />
+          <Route path="transactions" element={<Transactions />} />
           
           {/* Map pages */}
           <Route path="visualFarm" element={<FieldMap />} />
diff --git a/src/pages/Transactions.tsx b/src/pages/Transactions.tsx
new file mode 100644
index 0000000..1f2a747
--- /dev/null
+++ b/src/pages/Transactions.tsx
@@ -0,0 +1,165 @@
+import { useEffect, useState } from "react";
+import PageContainer from "./PageContainer";
+import { Box, Grid2 as Grid, TextField, Typography } from "@mui/material";
+import { Moment } from "moment";
+import { pond } from "protobuf-ts/pond";
+import SearchSelect, { Option } from "common/SearchSelect";
+import TransactionViewer from "transactions/transactionViewer";
+import { TransactionOptions } from "objects/ObjectDescriber";
+import { GetDefaultDateRange } from "common/time/DateRange";
+import TimeBar from "common/time/TimeBar";
+import { useTransactionAPI } from "providers";
+import { Transaction } from "models/Transaction";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles(() => {
+  return ({
+    page: {
+      padding: 10
+    }
+  });
+});
+
+//this page will have the dropdown selectors to set the variables for query
+export default function Transactions() {
+  const classes = useStyles();
+  const defaultDateRange = GetDefaultDateRange();
+  const [startDate, setStartDate] = useState<Moment>(defaultDateRange.start);
+  const [endDate, setEndDate] = useState<Moment>(defaultDateRange.end);
+  //these two variables are the object type
+  const [fromObject, setFromObject] = useState<pond.ObjectType | undefined>(undefined);
+  const [toObject, setToObject] = useState<pond.ObjectType | undefined>(undefined);
+  //these are simply for controlling what is shown in the select boxes
+  const [selectedFromObject, setSelectedFromObject] = useState<Option | null>();
+  const [selectedToObject, setSelectedToObject] = useState<Option | null>();
+  const transactionOptions = TransactionOptions();
+  const transactionAPI = useTransactionAPI();
+  const [isLoading, setIsLoading] = useState(false);
+  const [totalTransactions, setTotalTransactions] = useState<Transaction[]>([]);
+  const [filteredTransactions, setFilteredTransactions] = useState<Transaction[]>([]);
+  const [objectNames, setObjectNames] = useState<Map<string, string>>(new Map());
+  const [fromName, setFromName] = useState("");
+  const [toName, setToName] = useState("");
+
+  const updateDateRange = (newStartDate: any, newEndDate: any) => {
+    let range = GetDefaultDateRange();
+    range.start = newStartDate;
+    range.end = newEndDate;
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  //useEffect to filter the transactions to show based on the dropdown for object and text boxes for name entry
+  useEffect(() => {
+    let temp: Transaction[] = [];
+    totalTransactions.forEach(trans => {
+      if (
+        (!fromObject || trans.transaction.fromObject === fromObject) &&
+        (!toObject || trans.transaction.toObject === toObject) &&
+        (fromName === "" ||
+          objectNames
+            .get(trans.transaction.fromKey)
+            ?.toLowerCase()
+            .includes(fromName.toLowerCase())) &&
+        (toName === "" ||
+          objectNames
+            .get(trans.transaction.toKey)
+            ?.toLowerCase()
+            .includes(toName.toLowerCase()))
+      ) {
+        temp.push(trans);
+      }
+    });
+    setFilteredTransactions(temp);
+  }, [fromObject, toObject, totalTransactions, fromName, toName, objectNames]);
+
+  //useEffect to get the transactions when the timeframe changes
+  useEffect(() => {
+    if (!isLoading) {
+      setIsLoading(true);
+      transactionAPI
+        .transactionPageData(startDate.toISOString(), endDate.toISOString())
+        .then(resp => {
+          setTotalTransactions(
+            resp.data.transactions.map((t: pond.Transaction) => Transaction.create(t))
+          );
+          let tempMap: Map<string, string> = new Map();
+          Object.keys(resp.data.nameMap).forEach(key => {
+            tempMap.set(key, resp.data.nameMap[key]);
+          });
+          setObjectNames(tempMap);
+        })
+        .catch(err => {
+          console.log("There was a problem loading your inventory transactions");
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }, [transactionAPI, startDate, endDate]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <PageContainer>
+      <Box className={classes.page}>
+        <TimeBar startDate={startDate} endDate={endDate} updateDateRange={updateDateRange} />
+        <Typography>Type</Typography>
+        <Grid container direction="row" spacing={2} style={{ margin: 10 }}>
+          <Grid>
+            <SearchSelect
+              style={{ width: 175 }}
+              label="From"
+              selected={selectedFromObject}
+              options={transactionOptions}
+              changeSelection={op => {
+                setSelectedFromObject(op);
+                setFromObject(op?.value);
+              }}
+            />
+          </Grid>
+          <Grid>
+            <SearchSelect
+              style={{ width: 175 }}
+              label="To"
+              selected={selectedToObject}
+              options={transactionOptions}
+              changeSelection={op => {
+                setSelectedToObject(op);
+                setToObject(op?.value);
+              }}
+            />
+          </Grid>
+        </Grid>
+        <Typography>Name</Typography>
+        <Grid container direction="row" spacing={2} style={{ margin: 10 }}>
+          <Grid>
+            <TextField
+              label="From"
+              variant="outlined"
+              style={{ width: 175 }}
+              value={fromName}
+              onChange={e => {
+                setFromName(e.target.value);
+              }}
+            />
+          </Grid>
+          <Grid>
+            <TextField
+              label="To"
+              variant="outlined"
+              style={{ width: 175 }}
+              value={toName}
+              onChange={e => {
+                setToName(e.target.value);
+              }}
+            />
+          </Grid>
+        </Grid>
+        <TransactionViewer
+          transactions={filteredTransactions}
+          loading={isLoading}
+          objectNames={objectNames}
+        />
+      </Box>
+    </PageContainer>
+  );
+}
diff --git a/src/transactions/transactionDataDisplay.tsx b/src/transactions/transactionDataDisplay.tsx
new file mode 100644
index 0000000..93eb45c
--- /dev/null
+++ b/src/transactions/transactionDataDisplay.tsx
@@ -0,0 +1,42 @@
+import { Box, Typography } from "@mui/material";
+import GrainDescriber from "grain/GrainDescriber";
+import { Transaction } from "models/Transaction";
+import { pond } from "protobuf-ts/pond";
+import React from "react";
+import { getGrainUnit } from "utils";
+
+interface Props {
+  transaction: Transaction;
+}
+
+export default function TransactionDataDisplay(props: Props) {
+  const { transaction } = props;
+
+  const display = () => {
+    let transactionData = transaction.transaction.transaction;
+    if (transactionData) {
+      if (transactionData.grainTransaction) {
+        let gt = transactionData.grainTransaction;
+        return (
+          <Box>
+            <Typography>
+              Grain:{" "}
+              {gt.grainType === pond.Grain.GRAIN_CUSTOM
+                ? gt.customGrain
+                : GrainDescriber(gt.grainType).name}
+            </Typography>
+            <Typography>Variant: {gt.subtype}</Typography>
+            <Typography>
+              {getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_WEIGHT && gt.bushelsPerTonne > 1
+                ? "Weight: " + gt.bushels / gt.bushelsPerTonne + " mT"
+                : "Bushels: " + gt.bushels}
+            </Typography>
+            <Typography>Message: {gt.message}</Typography>
+          </Box>
+        );
+      }
+    }
+  };
+
+  return <React.Fragment>{display()}</React.Fragment>;
+}
diff --git a/src/transactions/transactionViewer.tsx b/src/transactions/transactionViewer.tsx
new file mode 100644
index 0000000..2d7fcf1
--- /dev/null
+++ b/src/transactions/transactionViewer.tsx
@@ -0,0 +1,124 @@
+import { Box, Typography } from "@mui/material";
+import ResponsiveTable, { Column } from "common/ResponsiveTable";
+import { cloneDeep } from "lodash";
+//import { getTableIcons } from "common/ResponsiveTable";
+//import MaterialTable, { Column, MTableToolbar } from "material-table";
+import { Transaction } from "models/Transaction";
+import moment from "moment";
+import ObjectDescriber from "objects/ObjectDescriber";
+import React, { useEffect, useState } from "react";
+import TransactionDataDisplay from "./transactionDataDisplay";
+
+interface Props {
+  transactions: Transaction[];
+  loading?: boolean;
+  objectNames?: Map<string, string>;
+}
+
+export default function TransactionViewer(props: Props) {
+  const { transactions, loading, objectNames } = props;
+  const [displayedRows, setDisplayedRows] = useState<Transaction[]>([])
+  const [tablePage, setTablePage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+
+  useEffect(()=>{
+    // let rows: Transaction[] = []
+    // transactions.forEach((transaction, index) => {
+    //   if (index >= tablePage * pageSize && index < (tablePage + 1) * pageSize){
+    //     rows.push(transaction)
+    //   }
+    // })
+    let clone: Transaction[] = cloneDeep(transactions)
+    let rows = clone.splice(tablePage * pageSize, pageSize)
+    console.log(transactions)
+    console.log(rows)
+    setDisplayedRows(rows)
+  },[transactions, tablePage, pageSize])
+
+  const columns: Column<Transaction>[] = [
+    {
+      title: "Date",
+      render: row => {
+        return <Typography>{moment(row.transaction.timestamp).format("YYYY-MM-DD")}</Typography>;
+      }
+    },
+    {
+      title: "From",
+      render: row => {
+        return (
+          <React.Fragment>
+            <Typography>{ObjectDescriber(row.transaction.fromObject).name}</Typography>
+            <Typography>
+              {objectNames ? objectNames.get(row.transaction.fromKey) : row.transaction.fromKey}
+            </Typography>
+          </React.Fragment>
+        );
+      }
+    },
+    {
+      title: "To",
+      render: row => {
+        return (
+          <React.Fragment>
+            <Typography>{ObjectDescriber(row.transaction.toObject).name}</Typography>
+            <Typography>
+              {objectNames ? objectNames.get(row.transaction.toKey) : row.transaction.toKey}
+            </Typography>
+          </React.Fragment>
+        );
+      }
+    },
+    {
+      title: "Transaction",
+      render: row => {
+        return <TransactionDataDisplay transaction={row} />;
+      }
+    }
+  ];
+
+  const myTable = () => {
+    return (
+      <ResponsiveTable<Transaction>
+        page={tablePage}
+        pageSize={pageSize}
+        rows={displayedRows}
+        total={transactions.length}
+        setPage={page => setTablePage(page)}
+        handleRowsPerPageChange={() => {}}
+      />
+    )
+    // 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>;
+}

From d3431f55599d59e3cf76f61b4fe091d61c6d45f1 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Tue, 8 Apr 2025 14:39:24 -0600
Subject: [PATCH 2/3] updated the columns for transactions

---
 src/bin/BinSettings.tsx                |  3 --
 src/grain/GrainTransaction.tsx         |  4 --
 src/navigation/SideNavigator.tsx       | 16 ++++++-
 src/transactions/transactionViewer.tsx | 60 ++++++++++----------------
 4 files changed, 36 insertions(+), 47 deletions(-)

diff --git a/src/bin/BinSettings.tsx b/src/bin/BinSettings.tsx
index 8816314..c574c96 100644
--- a/src/bin/BinSettings.tsx
+++ b/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
diff --git a/src/grain/GrainTransaction.tsx b/src/grain/GrainTransaction.tsx
index 562e5b2..469cbc7 100644
--- a/src/grain/GrainTransaction.tsx
+++ b/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)
diff --git a/src/navigation/SideNavigator.tsx b/src/navigation/SideNavigator.tsx
index d1868d2..f4003c8 100644
--- a/src/navigation/SideNavigator.tsx
+++ b/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>
diff --git a/src/transactions/transactionViewer.tsx b/src/transactions/transactionViewer.tsx
index 2d7fcf1..ef154c7 100644
--- a/src/transactions/transactionViewer.tsx
+++ b/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>;

From 9074120f741e6c7dde9aa17377f0391ad8eedd48 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Tue, 8 Apr 2025 15:27:02 -0600
Subject: [PATCH 3/3] added the fan picker stuff back in to the binSettings and
 componentForm

---
 src/bin/BinSettings.tsx         | 27 +++++++++++++--------------
 src/component/ComponentForm.tsx | 10 ++++++----
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/bin/BinSettings.tsx b/src/bin/BinSettings.tsx
index c574c96..e540b20 100644
--- a/src/bin/BinSettings.tsx
+++ b/src/bin/BinSettings.tsx
@@ -47,7 +47,7 @@ import {
   RadiansToDegrees,
   TriangleOppositeLength
 } from "common/TrigFunctions";
-// import FanPicker from "fans/fanPicker";
+import FanPicker from "fans/fanPicker";
 import { GrainOptions, ToGrainOption } from "grain";
 import GrainDescriber from "grain/GrainDescriber";
 import GrainTransaction from "grain/GrainTransaction";
@@ -1109,19 +1109,18 @@ export default function BinSettings(props: Props) {
 
   const fanPicker = () => {
     return (
-      // <FanPicker
-      //   updateFan={(fanId: number) => {
-      //     if (fanId !== undefined) {
-      //       //set the fan id in the bin settings form
-      //       form.fanId = fanId;
-      //       //remove the old fan from the bin
-      //       form.fan = null;
-      //     }
-      //   }}
-      //   fanID={form.fanId}
-      //   useCardView
-      // />
-      null
+      <FanPicker
+        updateFan={(fanId: number) => {
+          if (fanId !== undefined) {
+            //set the fan id in the bin settings form
+            form.fanId = fanId;
+            //remove the old fan from the bin
+            form.fan = null;
+          }
+        }}
+        fanID={form.fanId}
+        useCardView
+      />
     );
   };
 
diff --git a/src/component/ComponentForm.tsx b/src/component/ComponentForm.tsx
index 0f477b6..7b7b406 100644
--- a/src/component/ComponentForm.tsx
+++ b/src/component/ComponentForm.tsx
@@ -30,6 +30,7 @@ import {
   extension,
   getMeasurements,
   hasDimensions,
+  hasFan,
   isController,
   isMultiSensor,
   primaryMeasurement
@@ -45,6 +46,7 @@ import { makeStyles } from "@mui/styles";
 import { getDistanceUnit } from "utils";
 import { GrainOptions } from "grain";
 import CompModes from "component/ComponentMode.json";
+import FanPicker from "fans/fanPicker";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -874,8 +876,8 @@ export default function ComponentForm(props: Props) {
           disabled={!canEdit}
         />
         {/* TODO-CS: Change this to have a parameter in the extensions that gets checked rather then checking for the component type */}
-        {/*hasFan(component.type()) && (*/}
-          {/*<FanPicker
+        {hasFan(component.type()) && (
+          <FanPicker
              fanID={component.settings.fanId}
              updateFan={(fanID: number) => {
                component.settings.fanId = fanID;
@@ -890,8 +892,8 @@ export default function ComponentForm(props: Props) {
                  );
                }
              }}
-           /> */}
-        {/* )} */}
+           />
+        )}
         {component.settings.type === quack.ComponentType.COMPONENT_TYPE_GRAIN_CABLE &&
           grainSelect()}
         {component.settings.type === quack.ComponentType.COMPONENT_TYPE_GRAIN_CABLE && (