Merge branch 'dev_environment' of gitlab.com:brandx/bxt-app into dev_environment

package-lock.json

@@ -22,6 +22,7 @@
         "axios": "^1.7.7",
         "dayjs": "^1.11.13",
         "deep-object-diff": "^1.1.9",
+        "json-2-csv": "^5.5.8",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
         "moment-timezone": "^0.5.46",
@@ -38,12 +39,12 @@
         "react-router-dom": "^6.28.0",
         "react-virtualized-auto-sizer": "^1.0.25",
         "recharts": "^2.15.1",
-        "save-svg-as-png": "^1.4.17",
         "victory": "^37.3.6"
       },
       "devDependencies": {
         "@babel/types": "^7.25.8",
         "@eslint/js": "^9.11.1",
+        "@types/jsonexport": "^3.0.5",
         "@types/lodash": "^4.17.13",
         "@types/react": "^18.3.10",
         "@types/react-color": "^3.0.13",
@@ -54,7 +55,6 @@
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.12",
         "globals": "^15.9.0",
-        "save-svg-as-png": "^1.4.17",
         "typescript": "^5.5.3",
         "typescript-eslint": "^8.7.0",
         "vite": "^6.2.0",
@@ -3544,6 +3544,16 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/jsonexport": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/jsonexport/-/jsonexport-3.0.5.tgz",
+      "integrity": "sha512-+zDVaDqNguePOU11YNEsuf/ZRS1ciHeKVYGjfvDFmgG6aCy/s4W4Wy1MiXJIbiyMJLuakGLENCndvmGZpVTV1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/lodash": {
       "version": "4.17.13",
       "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
@@ -4787,6 +4797,15 @@
       "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
       "license": "MIT"
     },
+    "node_modules/deeks": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/deeks/-/deeks-3.1.0.tgz",
+      "integrity": "sha512-e7oWH1LzIdv/prMQ7pmlDlaVoL64glqzvNgkgQNgyec9ORPHrT2jaOqMtRyqJuwWjtfb6v+2rk9pmaHj+F137A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
@@ -4878,6 +4897,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/doc-path": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/doc-path/-/doc-path-4.1.1.tgz",
+      "integrity": "sha512-h1ErTglQAVv2gCnOpD3sFS6uolDbOKHDU1BZq+Kl3npPqroU3dYL42lUgMfd5UimlwtRgp7C9dLGwqQ5D2HYgQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -6479,6 +6507,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-2-csv": {
+      "version": "5.5.8",
+      "resolved": "https://registry.npmjs.org/json-2-csv/-/json-2-csv-5.5.8.tgz",
+      "integrity": "sha512-eMQHOwV+av8Sgo+fkbEbQWOw/kwh89AZ5fNA8TYfcooG6TG1ZOL2WcPUrngIMIK8dBJitQ8QEU0zbncQ0CX4CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "deeks": "3.1.0",
+        "doc-path": "4.1.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -7867,13 +7908,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/save-svg-as-png": {
-      "version": "1.4.17",
-      "resolved": "https://registry.npmjs.org/save-svg-as-png/-/save-svg-as-png-1.4.17.tgz",
-      "integrity": "sha512-7QDaqJsVhdFPwviCxkgHiGm9omeaMBe1VKbHySWU6oFB2LtnGCcYS13eVoslUgq6VZC6Tjq/HddBd1K6p2PGpA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",

package.json

@@ -32,6 +32,7 @@
     "axios": "^1.7.7",
     "dayjs": "^1.11.13",
     "deep-object-diff": "^1.1.9",
+    "json-2-csv": "^5.5.8",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.46",
@@ -48,12 +49,12 @@
     "react-router-dom": "^6.28.0",
     "react-virtualized-auto-sizer": "^1.0.25",
     "recharts": "^2.15.1",
-    "save-svg-as-png": "^1.4.17",
     "victory": "^37.3.6"
   },
   "devDependencies": {
     "@babel/types": "^7.25.8",
     "@eslint/js": "^9.11.1",
+    "@types/jsonexport": "^3.0.5",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.3.10",
     "@types/react-color": "^3.0.13",
@@ -64,7 +65,6 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
-    "save-svg-as-png": "^1.4.17",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
     "vite": "^6.2.0",

src/common/NotificationButton.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Tooltip } from "@mui/material";
-// import { Theme } from "@material-ui/core/styles/createMuiTheme";
+// import { Theme } from "@/styles/createMuiTheme";
 // import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
 import NotificationsEnabledIcon from "@mui/icons-material/NotificationsActive";
 import NotificationsDisabledIcon from "@mui/icons-material/NotificationsOff";

src/common/SmartBreadcrumb.tsx

@@ -270,9 +270,12 @@ export default function SmartBreadcrumb(props: Props) {
     
     if (prependPaths) pathnames.unshift(...prependPaths)
 
+    //console.log(pathnames)
+
     pathnames.forEach((_value: any, index: any) => {
       
       const lastPath = index === pathnames.length - 1;
+      //console.log(lastPath)
       const to = `/${pathnames.slice(0, index + 1).join("/")}`;
 
       let label = breadcrumbMap[to];
@@ -304,10 +307,12 @@ export default function SmartBreadcrumb(props: Props) {
         variant={lastPath ? "filled" : "outlined"}
         label={
           <LinkRouter
-            color={lastPath ? "textPrimary" : "textSecondary"}
+            //color={lastPath ? "textPrimary" : "textSecondary"}
             variant="subtitle1"
             to={to}
-            sx={{ '&:hover': { color: getThemeType() === "dark" ? 'white' : "black" } }}
+            sx={{ '&:hover': { color: getThemeType() === "dark" ? 'white' : "black" }, 
+              color: lastPath ? "HighlightText" : "GrayText"
+            }}
             className={classes.textOverflow}>
             {label}
           </LinkRouter>

src/common/TagSettings.tsx

@@ -17,6 +17,7 @@ import { useState } from "react";
 import { Tag as TagUI } from "./Tag";
 import { red } from "@mui/material/colors";
 import { makeStyles, withStyles } from "@mui/styles";
+import CancelSubmit from "./CancelSubmit";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -72,12 +73,13 @@ function ConfirmDeleteTag(props: ConfirmDeleteTagProps) {
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={() => onClose()} color="primary">
+      <CancelSubmit onSubmit={onSubmit} onCancel={onClose}/>
+        {/* <Button onClick={() => onClose()} color="primary">
           Cancel
         </Button>
         <Button onClick={() => onSubmit()} color="primary">
           Submit
-        </Button>
+        </Button> */}
       </DialogActions>
     </Dialog>
   );
@@ -174,6 +176,7 @@ export default function TagSettings(props: Props) {
       </DialogTitle>
       <DialogContent className={classes.gutter}>
         <TextField
+          margin="dense"
           label="Label"
           value={tag.settings.name}
           onChange={event => {

src/component/ComponentOrder.tsx

@@ -11,10 +11,12 @@ import {
   ListItemIcon,
   ListItemText,
   ListSubheader,
-  Typography
+  Typography,
-} from "@material-ui/core";
+  Theme
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+} from "@mui/material";
-import DragIcon from "@material-ui/icons/DragHandle";
+import { makeStyles } from "@mui/styles";
+//import DragIcon from "@material-ui/icons/DragHandle";
+import { DragHandle as DragIcon } from "@mui/icons-material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { useDeviceAPI, usePrevious, useSnackbar } from "hooks";
 import { cloneDeep } from "lodash";
@@ -23,17 +25,19 @@ import { sortComponents } from "pbHelpers/Component";
 import { pond, quack } from "protobuf-ts/pond";
 import React, { useEffect, useState } from "react";
 import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
+import { useThemeType } from "../hooks/useThemeType";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) => {
-  createStyles({
+    const themeType = useThemeType()
+    return ({
     item: {
       backgroundColor: "rgba(0,0,0,0)",
       "&:hover": {
         backgroundColor:
-          theme.palette.type === "light" ? "rgba(0,0,0,0.07)" : "rgba(255,255,255,0.07)"
+          themeType === "light" ? "rgba(0,0,0,0.07)" : "rgba(255,255,255,0.07)"
       }
     }
-  })
+  })}
 );
 
 interface ItemProps {

src/component/ComponentSettings.tsx

@@ -67,6 +67,7 @@ import {
   Add as AddIcon,
 
 } from "@mui/icons-material"
+import CancelSubmit from "common/CancelSubmit";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -820,7 +821,7 @@ export default function ComponentSettings(props: Props) {
   const actions = () => {
     return (
       <DialogActions>
-        <Grid container justifyContent="space-between" direction="row">
+        <Grid container justifyContent="space-between" direction="row" width={"100%"}>
           <Grid size={{ xs: 5 }} >
             {mode === "add" ? (
               <Button disabled={activeStep === 0} onClick={stepBack} color="primary">
@@ -834,7 +835,9 @@ export default function ComponentSettings(props: Props) {
             {mode === "add" ? (
               <React.Fragment>
                 <Button onClick={close} color="primary">
-                  Cancel
+                <Typography variant="subtitle2" color="textPrimary">
+        Cancel
+      </Typography>
                 </Button>
                 {activeStep === steps.length - 1 ? (
                   <Button color="primary" onClick={addComponent} disabled={!formValid}>
@@ -848,14 +851,15 @@ export default function ComponentSettings(props: Props) {
               </React.Fragment>
             ) : (
               <React.Fragment>
-                <Button onClick={close} color="primary">
+                <CancelSubmit onSubmit={updateComponent} onCancel={close} submitDisabled={!canEdit || !formValid}/>
+                {/* <Button onClick={close} color="primary">
                   Cancel
                 </Button>
                 {canEdit && (
                   <Button onClick={updateComponent} color="primary" disabled={!formValid}>
                     Submit
                   </Button>
-                )}
+                )} */}
               </React.Fragment>
             )}
           </Grid>

src/component/ExportDataSettings.tsx

@@ -93,14 +93,11 @@ class ExportDataSettings extends React.Component<Props, State> {
   };
 
   submit = () => {
-    console.log("submit export request")
     const { device, component, newMeasurements, user } = this.props;
     const { startDate, endDate } = this.state;
     const { sampleMeasurements, listUnitMeasurements } = this.context;
 
     this.setState({ isLoading: true });
-    console.log("Device")
-    console.log(device)
     // if (newMeasurements) {
       listUnitMeasurements(
         device.id(),

src/component/GPS.tsx

@@ -1,4 +1,6 @@
-import { withStyles, Theme, WithTheme, createStyles, WithStyles } from "@material-ui/core/styles";
+//import { withStyles, Theme, WithTheme, createStyles, WithStyles } from "@material-ui/core/styles";
+import { Theme } from "@mui/material"
+import { withStyles, createStyles, WithTheme, WithStyles } from "@mui/styles";
 import React from "react";
 import { parseGPS } from "services/google/mapHelpers";
 import { geolocate } from "services/google/googleAPI";

src/component/SensorLight.tsx

@@ -1,4 +1,6 @@
-import { Box, createStyles, makeStyles, Theme } from "@material-ui/core";
+//import { Box, createStyles, makeStyles, Theme } from "@material-ui/core";
+import { Box, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 import { Component } from "models";
 import { getMeasurementSummary } from "pbHelpers/ComponentType";
 import { pond } from "protobuf-ts/pond";
@@ -14,7 +16,7 @@ interface Props {
 }
 
 const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+  ({
     "@keyframes ripple": {
       from: {
         transform: "scale(.8)",

src/device/DeviceSettings.tsx

@@ -30,6 +30,7 @@ import { quack } from "protobuf-ts/quack";
 import LinearMutationBuilder from "common/LinearMutationBuilder";
 import { makeStyles } from "@mui/styles";
 import { useNavigate } from "react-router-dom";
+import CancelSubmit from "common/CancelSubmit";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -582,17 +583,18 @@ export default function DeviceSettings(props: Props) {
 
   const actions = () => {
     return (
-      <Grid container justifyContent="space-between" direction="row">
+      <Grid container justifyContent="space-between" direction="row" width={"100%"}>
-        <Grid size={{ xs: 5 }}>
+        <Grid>
           {canRemove() && <DeleteButton onClick={confirmRemoveDevice}>Delete</DeleteButton>}
         </Grid>
-        <Grid size={{ xs: 7 }} container justifyContent="flex-end">
+        <Grid container justifyContent="flex-end">
-          <Button onClick={close} color="primary">
+          <CancelSubmit onSubmit={submitSettings} onCancel={close}/>
+          {/* <Button onClick={close} color="primary">
             Cancel
           </Button>
           <Button onClick={submitSettings} color="primary" disabled={!isFormValid() || !canEdit}>
             Submit
-          </Button>
+          </Button> */}
         </Grid>
       </Grid>
     );

src/fans/fanPicker.tsx

@@ -1,5 +1,5 @@
 import {
-  Grid,
+  Grid2 as Grid,
   Button,
   Typography,
   DialogTitle,
@@ -12,8 +12,9 @@ import {
   RadioGroup,
   Radio,
   Box
-} from "@material-ui/core";
+} from "@mui/material";
-import { blue } from "@material-ui/core/colors";
+//import { blue } from "@material-ui/core/colors";
+import { blue } from "@mui/material/colors";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import React, { useState, useEffect } from "react";
 import fans from "fans/fans_client.json";
@@ -203,13 +204,12 @@ export default function FanPicker(props: Props) {
               alignItems="center"
               container
               direction="row"
-              justify="space-between"
               key={type}
               style={{ marginTop: 20 }}>
-              <Grid item>
+              <Grid>
                 <FormControlLabel value={type} control={<Radio />} label={type} />
               </Grid>
-              <Grid item>
+              <Grid>
                 <img width={100} height={100} src={determineFanIcon(type)} alt="fanimg" />
               </Grid>
             </Grid>
@@ -245,9 +245,8 @@ export default function FanPicker(props: Props) {
         <Grid
           container
           direction="row"
-          justify="space-between"
           style={{ marginBottom: 10, marginTop: 10 }}>
-          <Grid item xs={5}>
+          <Grid size={{xs:5}}>
             <Select
               id="fantype"
               fullWidth
@@ -270,7 +269,7 @@ export default function FanPicker(props: Props) {
               ))}
             </Select>
           </Grid>
-          <Grid item xs={5}>
+          <Grid size={{xs:5}}>
             <Select
               id="horsepower"
               fullWidth
@@ -315,9 +314,9 @@ export default function FanPicker(props: Props) {
         }}
         fullWidth>
         <DialogTitle>
-          <Grid container direction="row" justify="space-between">
+          <Grid container direction="row">
-            <Grid item>Select Fan</Grid>
+            <Grid>Select Fan</Grid>
-            <Grid item>
+            <Grid>
               <FormControlLabel
                 control={
                   <Switch
@@ -363,7 +362,7 @@ export default function FanPicker(props: Props) {
       <React.Fragment>
         {selector()}
         <Grid container direction="row" alignItems="center">
-          <Grid item xs={3}>
+          <Grid size={{xs:3}}>
             <Button
               onClick={() => {
                 setOpenSelector(true);
@@ -373,7 +372,7 @@ export default function FanPicker(props: Props) {
               FanPicker
             </Button>
           </Grid>
-          <Grid item xs={9}>
+          <Grid size={{xs:9}}>
             <Typography>{displayFan}</Typography>
           </Grid>
         </Grid>
@@ -387,8 +386,8 @@ export default function FanPicker(props: Props) {
         <Box padding={2}>
           <Typography style={{ fontSize: 15 }}>Current Fan</Typography>
           <Typography style={{ fontWeight: 650, fontSize: 20 }}>{displayFan}</Typography>
-          <Grid container direction="row-reverse" justify="space-between">
+          <Grid container direction="row-reverse">
-            <Grid item>
+            <Grid>
               <FormControlLabel
                 control={
                   <Switch

src/grain/GrainInventory.tsx

@@ -14,7 +14,7 @@ import {
   Radio,
   RadioGroup,
   TextField
-} from "@material-ui/core";
+} from "@mui/material";
 import { useState } from "react";
 import { useEffect } from "react";
 import { pond } from "protobuf-ts/pond";

src/grain/GrainTransaction.tsx

@@ -10,7 +10,7 @@ import {
   RadioGroup,
   TextField,
   Typography
-} from "@material-ui/core";
+} from "@mui/material";
 import FileUploader from "common/FileUploads/FileUploader";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import SearchSelect, { Option } from "common/SearchSelect";

src/group/GroupSettings.tsx

@@ -23,6 +23,7 @@ import {
   Typography
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import CancelSubmit from "common/CancelSubmit";
 // import { darken, lighten } from "@material-ui/core/styles/colorManipulator";
 // import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import DeleteButton from "common/DeleteButton";
@@ -435,7 +436,7 @@ export default function GroupSettings(props: Props) {
 
   const actions = () => {
     return (
-      <Grid2 container justifyContent="space-between" direction="row">
+      <Grid2 container justifyContent="space-between" direction="row" width={"100%"}>
         <Grid2 size={{ xs: 5 }}>
           {mode === "add" ? (
             <Button onClick={backStep} color="primary" disabled={tabIndex === 0}>
@@ -447,7 +448,12 @@ export default function GroupSettings(props: Props) {
           )}
         </Grid2>
         <Grid2 size={{ xs: 7 }} container justifyContent="flex-end">
-          <Button onClick={close} color="primary">
+        <CancelSubmit 
+          onSubmit={(mode === "add" && tabIndex === steps.length - 1) || mode === "update" ? submit : nextStep}
+          submitText={(mode === "add" && tabIndex === steps.length - 1) || mode === "update" ? "Submit" : "Next"}
+          onCancel={close} 
+          submitDisabled={!isFormValid()}/>
+          {/* <Button onClick={close} color="primary">
             Cancel
           </Button>
           {(mode === "add" && tabIndex === steps.length - 1) || mode === "update"
@@ -460,7 +466,7 @@ export default function GroupSettings(props: Props) {
                 <Button onClick={nextStep} color="primary">
                   Next
                 </Button>
-              )}
+              )} */}
         </Grid2>
       </Grid2>
     );

src/interactions/InteractionSettings.tsx

@@ -64,6 +64,7 @@ import { green, red } from "@mui/material/colors";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import dayjs from "dayjs";
+import CancelSubmit from "common/CancelSubmit";
 
 // import { Sensor } from "ventilation/drawable/Sensor";
 
@@ -1555,14 +1556,15 @@ export default function InteractionSettings(props: Props) {
 
   const actions = () => {
     return (
-      <Grid container justifyContent="space-between" direction="row">
+      <Grid container justifyContent="space-between" direction="row" width={"100%"}>
         <Grid size={{ xs: 5 }}>
           {mode === "update" && canEdit && (
             <DeleteButton onClick={openRemoveInteraction}>Delete</DeleteButton>
           )}
         </Grid>
         <Grid size={{ xs: 7 }} container justifyContent="flex-end">
-          <Button onClick={close} color="primary">
+        <CancelSubmit onSubmit={submit} onCancel={close} submitDisabled={!canEdit || !isInteractionValid(interaction) || invalidConditionValues()}/>
+          {/* <Button onClick={close} color="primary">
             Cancel
           </Button>
           {canEdit && (
@@ -1572,7 +1574,7 @@ export default function InteractionSettings(props: Props) {
               disabled={!isInteractionValid(interaction) || invalidConditionValues()}>
               Submit
             </Button>
-          )}
+          )} */}
         </Grid>
       </Grid>
     );

src/objects/ObjectAlerts.tsx

@@ -6,7 +6,6 @@ import {
   Button,
   Card,
   Checkbox,
-  createStyles,
   DialogActions,
   DialogContent,
   DialogTitle,
@@ -14,7 +13,7 @@ import {
   FormControlLabel,
   FormHelperText,
   FormLabel,
-  Grid,
+  Grid2 as Grid,
   IconButton,
   InputAdornment,
   List,
@@ -22,15 +21,17 @@ import {
   ListItemIcon,
   ListItemText,
   ListSubheader,
-  makeStyles,
   MenuItem,
   Select,
   TextField,
   Theme,
   Tooltip,
   Typography
-} from "@material-ui/core";
+} from "@mui/material";
-import { ExpandMore } from "@material-ui/icons";
+import { ExpandMore, RemoveCircle as RemoveIcon, AddCircle as AddIcon } from "@mui/icons-material";
+//import RemoveIcon from "@material-ui/icons/RemoveCircle";
+//import { ExpandMore } from "@material-ui/icons";
+//import AddIcon from "@material-ui/icons/AddCircle";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { Option } from "common/SearchSelect";
 import classNames from "classnames";
@@ -44,13 +45,17 @@ import { quack } from "protobuf-ts/quack";
 import { useGlobalState, useInteractionsAPI, useSnackbar } from "providers";
 import { useNotificationAPI } from "providers/pond/notificationAPI";
 import React, { useEffect, useState } from "react";
-import RemoveIcon from "@material-ui/icons/RemoveCircle";
-import AddIcon from "@material-ui/icons/AddCircle";
-import { green, red } from "@material-ui/core/colors";
 import { capitalize, cloneDeep } from "lodash";
 import { timeOfDayDescriptor } from "pbHelpers/Interaction";
-import { TimePicker } from "@material-ui/pickers";
+//import { TimePicker } from "@material-ui/pickers";
-import { getThemeType } from "theme";
+import { TimePicker } from "@mui/x-date-pickers";
+//import { getThemeType } from "theme";
+import { getThemeType } from "theme/themeType";
+//import { green, red } from "@material-ui/core/colors";
+import { green, red } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
+
+
 
 interface Props {
   linkedComponents: Map<string, Component>;
@@ -65,7 +70,7 @@ interface Alert {
 }
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     borderedContainer: {
       padding: theme.spacing(1),
       marginBottom: theme.spacing(2),
@@ -327,7 +332,7 @@ export default function ObjectAlerts(props: Props) {
         <AccordionSummary expandIcon={<ExpandMore />}>
           <Grid container direction="column">
             {alert.conditions.map((condition, i) => (
-              <Grid item key={i}>
+              <Grid key={i}>
                 {readableCondition(condition)}
               </Grid>
             ))}
@@ -448,15 +453,14 @@ export default function ObjectAlerts(props: Props) {
           key={"interaction"}
           container
           direction="row"
-          justify="center"
           alignItems="center"
           spacing={2}>
           {index > 0 && (
-            <Grid item xs={12}>
+            <Grid size={12}>
               <Typography align="center">AND</Typography>
             </Grid>
           )}
-          <Grid item xs={10} sm={4}>
+          <Grid size={{ xs:10, sm:4 }}>
             <TextField
               select
               id="measurementType"
@@ -478,7 +482,7 @@ export default function ObjectAlerts(props: Props) {
               {measurementTypeMenuItems()}
             </TextField>
           </Grid>
-          <Grid item xs={10} sm={3}>
+          <Grid size={{ xs:10, sm:3 }}>
             <TextField
               select
               id="comparison"
@@ -509,7 +513,7 @@ export default function ObjectAlerts(props: Props) {
               </MenuItem>
             </TextField>
           </Grid>
-          <Grid item xs={8} sm={4}>
+          <Grid size={{xs:8, sm:4}}>
             <TextField
               select={isBoolean}
               id="value"
@@ -546,7 +550,7 @@ export default function ObjectAlerts(props: Props) {
               ]}
             </TextField>
           </Grid>
-          <Grid item xs={2} sm={1}>
+          <Grid size={{xs:2, sm:1}}>
             {index === 0 ? (
               <Tooltip title="Add another condition">
                 <IconButton
@@ -585,10 +589,9 @@ export default function ObjectAlerts(props: Props) {
             key={"nodes"}
             container
             direction="row"
-            justify="center"
             alignItems="center"
             spacing={2}>
-            <Grid item xs={10} sm={4}>
+            <Grid size={{xs:10, sm:4}}>
               <TextField
                 select
                 id="subtype"
@@ -619,7 +622,7 @@ export default function ObjectAlerts(props: Props) {
                 </MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={10} sm={4}>
+            <Grid size={{xs:10, sm:4}}>
               {(subtypeDropdown === 2 || subtypeDropdown === 3 || subtypeDropdown === 4) && (
                 <TextField
                   select
@@ -638,7 +641,7 @@ export default function ObjectAlerts(props: Props) {
                 </TextField>
               )}
             </Grid>
-            <Grid item xs={10} sm={4}>
+            <Grid size={{xs:10, sm:4}}>
               {subtypeDropdown === 3 && (
                 <TextField
                   select
@@ -750,7 +753,7 @@ export default function ObjectAlerts(props: Props) {
   const daySelector = (day: string, size: any) => {
     //const schedule = or(interaction.settings.schedule, pond.InteractionSchedule.create());
     return (
-      <Grid item container xs={size} sm={1} justify="center" alignItems="center">
+      <Grid container size={{xs: size, sm:1}} alignItems="center">
         <FormControlLabel
           control={
             <Checkbox
@@ -792,7 +795,7 @@ export default function ObjectAlerts(props: Props) {
     return (
       <FormControl component={"fieldset" as "div"} className={classes.borderedContainer} fullWidth>
         <FormLabel component={"legend" as "caption"}>Schedule</FormLabel>
-        <Grid container direction="row" spacing={0} justify="flex-start">
+        <Grid container direction="row" spacing={0}>
           {daySelector("sunday", 3)}
           {daySelector("monday", 3)}
           {daySelector("tuesday", 3)}
@@ -802,7 +805,7 @@ export default function ObjectAlerts(props: Props) {
           {daySelector("saturday", 4)}
         </Grid>
         <Grid container direction="row" spacing={2} alignItems="center">
-          <Grid item xs={12} sm={3}>
+          <Grid size={{xs:12, sm:3}}>
             <TextField
               select
               id="timeOfDayShortcut"
@@ -828,16 +831,16 @@ export default function ObjectAlerts(props: Props) {
             </TextField>
           </Grid>
           {showStart && (
-            <Grid item xs={5} sm={3}>
+            <Grid size={{xs:5, sm:3}}>
               <TimePicker
-                renderInput={props => <TextField {...props} helperText="" />}
+                //renderInput={props => <TextField {...props} helperText="" />}
                 value={start}
                 onChange={(event: any) => setScheduleTime("start", event)}
               />
             </Grid>
           )}
           {showBoth && (
-            <Grid item xs={2} sm={1}>
+            <Grid size={{xs:2,sm:1}}>
               <Typography
                 variant="subtitle1"
                 color="textSecondary"
@@ -848,9 +851,9 @@ export default function ObjectAlerts(props: Props) {
             </Grid>
           )}
           {showEnd && (
-            <Grid item xs={5} sm={3}>
+            <Grid size={{xs:5, sm:3}}>
               <TimePicker
-                renderInput={props => <TextField {...props} helperText="" />}
+                //renderInput={props => <TextField {...props} helperText="" />}
                 value={end}
                 onChange={(event: any) => setScheduleTime("end", event)}
               />

src/objects/bulkEditForms/bulkBinSettings.tsx

@@ -1,4 +1,5 @@
-import { Button, Grid, InputAdornment, TextField } from "@material-ui/core";
+//import { Button, Grid, InputAdornment, TextField } from "@material-ui/core";
+import { Button, Grid, InputAdornment, TextField } from "@mui/material";
 import SearchSelect, { Option } from "common/SearchSelect";
 import { GrainOptions } from "grain";
 import { pond } from "protobuf-ts/pond";

src/objects/bulkEditForms/bulkGrainBagSettings.tsx

@@ -1,4 +1,5 @@
-import { Button, Grid, TextField } from "@material-ui/core";
+//import { Button, Grid, TextField } from "@material-ui/core";
+import { Button, Grid2 as Grid, TextField } from "@mui/material";
 import SearchSelect, { Option } from "common/SearchSelect";
 import { GrainOptions } from "grain";
 import { GrainBag } from "models/GrainBag";
@@ -76,7 +77,7 @@ export default function BulkGrainBagSettings(props: Props) {
     <React.Fragment>
       <Grid container direction="row" spacing={2} alignContent="center" alignItems="center">
         {/* first row */}
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <TextField
             fullWidth
             label="Name"
@@ -86,7 +87,7 @@ export default function BulkGrainBagSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <TextField
             fullWidth
             label="Length"
@@ -97,7 +98,7 @@ export default function BulkGrainBagSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <TextField
             fullWidth
             label="Diameter"
@@ -108,7 +109,7 @@ export default function BulkGrainBagSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <TextField
             fullWidth
             label="Capacity"
@@ -121,7 +122,7 @@ export default function BulkGrainBagSettings(props: Props) {
         </Grid>
 
         {/* second row */}
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <SearchSelect
             label="Grain Type"
             selected={grainOption}
@@ -136,7 +137,7 @@ export default function BulkGrainBagSettings(props: Props) {
             options={GrainOptions()}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <TextField
             fullWidth
             label="Grain Variant"
@@ -147,7 +148,7 @@ export default function BulkGrainBagSettings(props: Props) {
           />
         </Grid>
 
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <TextField
             fullWidth
             label="Custom Grain"
@@ -157,7 +158,7 @@ export default function BulkGrainBagSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <TextField
             fullWidth
             label="Bushels"
@@ -170,7 +171,7 @@ export default function BulkGrainBagSettings(props: Props) {
         </Grid>
 
         {/* last row */}
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <TextField
             fullWidth
             type="date"
@@ -180,7 +181,7 @@ export default function BulkGrainBagSettings(props: Props) {
             onChange={e => setFillDate(e.target.value)}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <TextField
             fullWidth
             label="Initial Moisture"
@@ -191,7 +192,7 @@ export default function BulkGrainBagSettings(props: Props) {
             }}
           />
         </Grid>
-        <Grid item xs={gridItemWidth}>
+        <Grid size={gridItemWidth}>
           <Button
             variant="contained"
             color="primary"

src/pages/DeviceComponent.tsx

@@ -120,7 +120,7 @@ export default function DeviceComponent() {
     getDefaultInteraction()
   );
   const [pageSize, setPageSize] = useState<number>(5);
-  const [page, setPage] = useState(1)
+  const [page, setPage] = useState(0)
   const [order, setOrder] = useState("desc")
   const [rows, setRows] = useState<convertedUnitMeasurement[]>([])
   const [total, setTotal] = useState<number>(0)

src/products/ProductTabChip.tsx

@@ -1,14 +1,18 @@
-import { Avatar, ButtonBase, createStyles, makeStyles, Theme, Tooltip } from "@material-ui/core";
+//import { Avatar, ButtonBase, createStyles, makeStyles, Theme, Tooltip } from "@material-ui/core";
-import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@material-ui/icons";
+//import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@material-ui/icons";
+import { Avatar, ButtonBase, Theme, Tooltip } from "@mui/material";
+import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@mui/icons-material";
+import { makeStyles } from "@mui/styles";
+import { useThemeType } from "../hooks/useThemeType";
 import classnames from "classnames";
 import { capitalize } from "lodash";
 import React from "react";
 import { ProductTab } from "./DeviceProduct";
 
 const useStyles = makeStyles((theme: Theme) => {
-  const themeType = theme.palette.type;
+  const themeType = useThemeType();
   const activeBG = theme.palette.secondary.main;
-  return createStyles({
+  return ({
     avatar: {
       color: themeType === "light" ? theme.palette.common.black : theme.palette.common.white,
       backgroundColor: "transparent",

src/utils/download.ts

@@ -1,8 +1,7 @@
 // import * as save from "save-svg-as-png";
-// import * as jsonexport from "jsonexport";
 import { or } from "./types";
-// const jsonexport = require("jsonexport");
 // const save = require("save-svg-as-png")
+import { json2csv } from 'json-2-csv';
 
 export function saveSVG(element: string, filename: string, options: Object) {
   // save.saveSvgAsPng(document.getElementById(element), filename, options);
@@ -52,25 +51,25 @@ export function exportDataToCSV(filename: string, data: Array<any>) {
     return;
   }
 
-  // jsonexport(data, function(err: any, csv: any) {
+  let csv = json2csv(data)
-  //   if (err) return console.log(err);
+  //console.log(csv)
-  //   var blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  var blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
-  //   var link = document.createElement("a");
+    var link = document.createElement("a");
-  //   link.href = window.URL.createObjectURL(blob);
+    link.href = window.URL.createObjectURL(blob);
-  //   link.download = or(filename, "generated") + ".csv";
+    link.download = or(filename, "generated") + ".csv";
-  //   document.body.appendChild(link);
+    document.body.appendChild(link);
-  //   link.click();
+    link.click();
-  //   setTimeout(function() {
+    setTimeout(function() {
-  //     document.body.removeChild(link);
+      document.body.removeChild(link);
-  //     window.URL.revokeObjectURL(link.href);
+      window.URL.revokeObjectURL(link.href);
-  //   }, 100);
+    }, 100);
-  // });
 }
 
-export function exportJSON(filename: string, data: Array<any>) {
+//deprecated function
-  if (!data || !data.length) {
+// export function exportJSON(filename: string, data: Array<any>) {
-    return;
+//   if (!data || !data.length) {
-  }
+//     return;
+//   }
 
   // jsonexport(data, function(err: any, csv: any) {
   //   if (err) return console.log(err);
@@ -85,4 +84,4 @@ export function exportJSON(filename: string, data: Array<any>) {
   //     window.URL.revokeObjectURL(link.href);
   //   }, 100);
   // });
-}
+//}