can provision devices

src/pages/Devices.tsx

@@ -0,0 +1,42 @@
+import { DeveloperBoard as ProvisionIcon } from "@mui/icons-material";
+import { IconButton, Theme, Tooltip } from "@mui/material";
+import { blue } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
+import ProvisionDevice from "device/ProvisionDevice";
+import { useState } from "react";
+
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
+    provisionIcon: {
+      color: blue["700"]
+    }
+  });
+});
+
+export default function Devices() {
+  const classes = useStyles();
+  const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState<boolean>(false);
+
+  const openProvisionDialog = () => {
+    setIsProvisionDialogOpen(true);
+  };
+
+  const closeProvisionDialog = () => {
+    setIsProvisionDialogOpen(false);
+  };
+
+  return(
+    <>
+    <Tooltip title="Provision Device">
+      <IconButton onClick={openProvisionDialog} aria-label="Provision Device">
+        <ProvisionIcon className={classes.provisionIcon} />
+      </IconButton>
+    </Tooltip>
+    <ProvisionDevice
+      isOpen={isProvisionDialogOpen}
+      refreshCallback={/*load*/()=>{}}
+      closeDialogCallback={closeProvisionDialog}
+    />
+    </>
+  )
+}