cloudmr-ux 1.2.2 → 1.2.3

package/dist/index.js

@@ -47,7 +47,8 @@ __export(src_exports, {
   CmrSelect: () => CmrSelect_default,
   CmrTable: () => CmrTable2,
   CmrTabs: () => CmrTabs,
-  CmrTooltip: () => Tooltip_default
+  CmrTooltip: () => Tooltip_default,
+  CmrUploadWindow: () => CmrUploadWindow
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -260,865 +261,867 @@ var CmrPanel = function(props) {
 };
 var Panel_default = CmrPanel;
 
-// src/CmrComponents/upload/Upload.tsx
-var import_react4 = __toESM(require("react"));
-var import_material7 = require("@mui/material");
-
-// src/CmrComponents/upload/UploadWindow.tsx
+// src/CmrComponents/rename/edit.tsx
 var React4 = __toESM(require("react"));
-var import_Button = __toESM(require("@mui/material/Button"));
+var import_material6 = require("@mui/material");
 var import_TextField = __toESM(require("@mui/material/TextField"));
 var import_Dialog = __toESM(require("@mui/material/Dialog"));
 var import_DialogActions = __toESM(require("@mui/material/DialogActions"));
 var import_DialogContent = __toESM(require("@mui/material/DialogContent"));
-var import_DialogContentText = __toESM(require("@mui/material/DialogContentText"));
 var import_DialogTitle = __toESM(require("@mui/material/DialogTitle"));
-var import_Typography = __toESM(require("@mui/material/Typography"));
-var import_Box = __toESM(require("@mui/material/Box"));
-var import_material6 = require("@mui/material");
-
-// src/CmrComponents/label/Label.tsx
+var import_react4 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var CmrLabel = (props) => {
-  const { children, required = false } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "cmr-label", style: { fontSize: "16px", ...props.style }, children: [
-    children,
-    required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "asterik", children: "*" })
-  ] });
-};
-var Label_default = CmrLabel;
+function CmrNameDialog(props) {
+  let { originalName, open, setOpen } = props;
+  const [helperText, setHelperText] = React4.useState("");
+  const [text, setText] = React4.useState(originalName);
+  const [error, setError] = React4.useState(false);
+  const renamingCallback = props.renamingCallback;
+  const handleClose = () => {
+    setOpen(false);
+  };
+  (0, import_react4.useEffect)(() => {
+    checkError(originalName);
+  }, [originalName]);
+  const handleConfirm = async () => {
+    if (await renamingCallback(text))
+      handleClose();
+  };
+  const handleTextFieldChange = (e) => {
+    setText(e.target.value);
+    checkError(e.target.value);
+  };
+  const checkError = (text2) => {
+    const fileNameRegex = /^[a-zA-Z0-9_\-]+\.[a-zA-Z]{1,5}$/;
+    let newExtension = text2.split(".").pop();
+    let orgExtension = originalName.indexOf(".") >= 0 ? originalName.split(".").pop() : "?";
+    if (!fileNameRegex.test(text2)) {
+      setError(true);
+      if (text2.indexOf(".") < 0) {
+        setHelperText("Invalid file name, needs a valid extension.");
+      } else {
+        setHelperText("Invalid file name, please check.");
+      }
+    } else if (newExtension !== orgExtension) {
+      setHelperText(`You are modifying your file extension from .${orgExtension} to .${newExtension}.`);
+      setError(false);
+    } else {
+      setError(false);
+      setHelperText("");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_Dialog.default,
+    {
+      open,
+      onClose: handleClose,
+      fullWidth: true,
+      maxWidth: "xs",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_DialogTitle.default, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.Typography, { children: [
+          ' Rename "',
+          originalName,
+          '" as:'
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_DialogContent.default, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_TextField.default,
+          {
+            autoFocus: true,
+            margin: "dense",
+            id: "name",
+            defaultValue: originalName,
+            onFocus: (event) => {
+              event.target.select();
+            },
+            fullWidth: true,
+            inputProps: { style: { fontSize: "16px" } },
+            variant: "standard",
+            onChange: handleTextFieldChange,
+            error,
+            helperText
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_DialogActions.default, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CmrButton_default, { variant: "outlined", onClick: handleClose, children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CmrButton_default, { variant: "contained", color: "primary", onClick: handleConfirm, children: "Confirm" })
+        ] })
+      ]
+    }
+  ) });
+}
 
-// src/CmrComponents/upload/UploadWindow.tsx
+// src/CmrComponents/dialogue/Confirmation.tsx
+var React5 = __toESM(require("react"));
+var import_Dialog2 = __toESM(require("@mui/material/Dialog"));
+var import_DialogActions2 = __toESM(require("@mui/material/DialogActions"));
+var import_DialogContent2 = __toESM(require("@mui/material/DialogContent"));
+var import_DialogContentText = __toESM(require("@mui/material/DialogContentText"));
+var import_DialogTitle2 = __toESM(require("@mui/material/DialogTitle"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function UploadWindow({
-  upload,
+function CmrConfirmation({
+  name,
+  message,
+  cancelText = "Cancel",
+  color,
   open,
   setOpen,
-  fileExtension,
-  template = { showFileName: true, showDatabase: true, showFileSize: true }
-  // default values
+  confirmCallback = () => {
+  },
+  confirmText = "Confirm",
+  cancellable = false,
+  cancelCallback = () => {
+  },
+  width
 }) {
-  const [fileOriginalName, setFileOriginalName] = React4.useState("");
-  const [fileAlias, setFileAlias] = React4.useState("/");
-  const [fileSize, setFileSize] = React4.useState("0 MB");
-  const [warningText, setWarningText] = React4.useState("Unknown Status");
-  const [infoOpen, setInfoOpen] = React4.useState(false);
-  const [locationSelection, setLocationSelection] = React4.useState("s3");
-  const [infoStyle, setInfoStyle] = React4.useState("info");
-  const [uploadedFiles, setUploaded] = React4.useState([]);
-  const [UpBtnDisabled, setUpBtnDisabled] = React4.useState(false);
-  const [UpBtnText, setUpBtnText] = React4.useState("Upload");
-  const [uploadBoxWarning, setUploadBoxWarning] = React4.useState(void 0);
+  const [text, setText] = React5.useState("");
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleConfirm = () => {
+    confirmCallback();
+    handleClose();
+  };
+  const handleCancel = () => {
+    cancelCallback();
+    handleClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_Dialog2.default, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_DialogTitle2.default, { children: name ? name : "Confirmation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogContent2.default, { sx: { width }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_DialogContentText.default, { alignContent: "center", children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogActions2.default, { className: "mt-4", children: [
+        cancellable && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CmrButton_default, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: cancelText }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: confirmText })
+      ] })
+    ] })
+  ] });
+}
+
+// src/CmrComponents/dialogue/DeletionDialog.tsx
+var React6 = __toESM(require("react"));
+var import_TextField2 = __toESM(require("@mui/material/TextField"));
+var import_Dialog3 = __toESM(require("@mui/material/Dialog"));
+var import_DialogActions3 = __toESM(require("@mui/material/DialogActions"));
+var import_DialogContent3 = __toESM(require("@mui/material/DialogContent"));
+var import_DialogContentText2 = __toESM(require("@mui/material/DialogContentText"));
+var import_DialogTitle3 = __toESM(require("@mui/material/DialogTitle"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function CmrDeletionDialog(props) {
+  const [open, setOpen] = React6.useState(true);
+  const [text, setText] = React6.useState("");
   const handleClickOpen = () => {
     setOpen(true);
   };
   const handleClose = () => {
     setOpen(false);
   };
-  const getExtension = (fileName) => {
-    if (fileName == void 0)
-      return;
-    return fileName.split(".").pop();
-  };
   const handleConfirm = () => {
-    if (uploadedFiles.length === 0) {
-      setInfoOpen(true);
-      setInfoStyle("error");
-      setWarningText("Must select files to upload!");
-      setTimeout(() => setInfoOpen(false), 2500);
-      return;
-    }
-    if (fileAlias.length === 0) {
-      setInfoOpen(true);
-      setInfoStyle("error");
-      setWarningText("File name can't be empty");
-      setTimeout(() => setInfoOpen(false), 2500);
-      return;
+    if (text === props.name) {
+      props.deletionCallback();
+      setOpen(false);
     }
-    setOpen(false);
-    upload(uploadedFiles[0], fileAlias, locationSelection).then((response) => {
-      console.log(response);
-      if (response > 0) {
-        setInfoOpen(true);
-        if (response === 200) {
-          setInfoStyle("success");
-          setWarningText("Upload successful");
-          setTimeout(() => {
-            setInfoOpen(false);
-            setOpen(false);
-          }, 1e3);
-          setUpBtnDisabled(false);
-          setUpBtnText("Upload");
-        } else if (response === 413) {
-          setInfoStyle("error");
-          setWarningText("File size limit exceeded");
-          setTimeout(() => {
-            setInfoOpen(false);
-            setUpBtnDisabled(false);
-            setUpBtnText("Upload");
-          }, 2e3);
-        } else if (response === 500) {
-          setInfoStyle("error");
-          setWarningText("Internal server error");
-          setTimeout(() => {
-            setInfoOpen(false);
-            setUpBtnDisabled(false);
-            setUpBtnText("Upload");
-          }, 1500);
-          setOpen(true);
-        } else if (response === 400) {
-          setInfoStyle("warning");
-          setWarningText("File upload cancelled");
-          setTimeout(() => {
-            setInfoOpen(false);
-            setUpBtnDisabled(false);
-            setUpBtnText("Upload");
-          }, 1e3);
-          setOpen(true);
-        } else {
-          setInfoStyle("warning");
-          setWarningText("Unknown status");
-          setTimeout(() => {
-            setInfoOpen(false);
-            setUpBtnDisabled(false);
-            setUpBtnText("Upload");
-          }, 2e3);
-          setOpen(true);
-        }
-      }
-    }).catch((error) => {
-      setUpBtnDisabled(false);
-      setUpBtnText("Upload");
-      setInfoOpen(true);
-      setInfoStyle("error");
-      setWarningText("Upload unsuccessful: " + error.message);
-      setTimeout(() => setInfoOpen(false), 2500);
-      console.error("Error:", error);
-    });
-    setUpBtnDisabled(true);
-    setUpBtnText("Uploading");
   };
-  const changeFileName = (e) => {
-    setFileAlias(e.target.value);
+  const handleTextFieldChange = (e) => {
+    setText(e.target.value);
   };
-  function loadFiles(files) {
-    if (files.length == 0) {
-      setInfoOpen(true);
-      setInfoStyle("warning");
-      setWarningText("No file selected");
-      setTimeout(() => setInfoOpen(false), 2500);
-      return;
-    }
-    if (files.length > 1) {
-      setInfoOpen(true);
-      setInfoStyle("warning");
-      setWarningText("Only accepts one file at a time");
-      setTimeout(() => setInfoOpen(false), 2500);
-      return;
-    }
-    let file = files[0];
-    setUploaded([file]);
-    function readFile(file2) {
-      setFileOriginalName(file2.name);
-      setFileAlias(file2.name);
-      const units = [
-        "B",
-        "KB",
-        "MB",
-        "GB",
-        "TB",
-        "PB",
-        "EB",
-        "ZB",
-        "YB"
-      ];
-      let numberOfBytes = file2.size;
-      const exponent = Math.min(
-        Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
-        units.length - 1
-      );
-      const approx = numberOfBytes / 1024 ** exponent;
-      const output = exponent === 0 ? `${numberOfBytes} bytes` : `${approx.toFixed(3)} ${units[exponent]}`;
-      setFileSize(output);
-    }
-    readFile(file);
-  }
-  let initialized = false;
-  let fileInput = (inputRef) => {
-    if (initialized)
-      return;
-    inputRef.addEventListener("dragover", function(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      if (e.dataTransfer.files) {
-        let draggedFiles = e.dataTransfer.files;
-        if (draggedFiles.length > 1) {
-          setUploadBoxWarning("Only one file can be uploaded at a time");
-        } else if (fileExtension != void 0 && draggedFiles.length != 0 && getExtension(draggedFiles[0].name) != fileExtension) {
-          setUploadBoxWarning(`Only accepting files with extension ${fileExtension}`);
-        }
-      }
-      e.dataTransfer.dropEffect = "copy";
-    });
-    inputRef.addEventListener("drop", function(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      setUploadBoxWarning(void 0);
-      let files = e.dataTransfer.files;
-      if (files.length > 1) {
-        setInfoOpen(true);
-        setInfoStyle("warning");
-        setWarningText("Only one file can be uploaded at a time");
-        setTimeout(() => setInfoOpen(false), 2500);
-        return;
-      } else if (fileExtension != void 0 && `.${getExtension(files[0].name)}` != fileExtension) {
-        setInfoOpen(true);
-        setInfoStyle("warning");
-        setWarningText(`Only accepting files with extension ${fileExtension}`);
-        setTimeout(() => setInfoOpen(false), 2500);
-        return;
-      }
-      loadFiles(files);
-    });
-    inputRef.addEventListener("dragleave", () => {
-      setUploadBoxWarning(void 0);
-    });
-    initialized = true;
-  };
-  const fileInputClick = (e) => {
-    const fileElem = document.getElementById("file-window");
-    e.preventDefault();
-    if (fileElem) {
-      fileElem.click();
-    }
-  };
-  const loadSelectedFiles = (e) => {
-    e.preventDefault();
-    const fileElem = document.getElementById("file-window");
-    loadFiles(fileElem.files);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_Dialog.default, { open, onClose: handleClose, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_DialogTitle.default, { children: "File Upload" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogContent.default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_DialogContentText.default, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogContent.default, { dividers: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_Box.default,
-          {
-            width: 500,
-            height: 250,
-            style: {
-              borderStyle: "dashed",
-              borderRadius: "5pt",
-              borderColor: uploadBoxWarning == void 0 ? "lightGray" : "#BA3C3C"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Typography.default, { component: "div", style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-              import_Box.default,
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  height: "100%"
-                },
-                onClick: fileInputClick,
-                ref: fileInput,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_Typography.default, { variant: "body1", align: "center", style: { marginTop: "auto" }, children: [
-                    "Drag & Drop or Click to Upload Your File Here ",
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("sup", { children: "*" })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Typography.default, { variant: "body2", align: "center", style: { marginTop: "auto", fontSize: "0.8rem", fontStyle: "italic" }, children: "* Warning: The file you are uploading may contain sensitive information protected under privacy laws. Please ensure all PHI is anonymized before proceeding.Before proceeding. The user is the sole responsible for data anonymization." })
-                ]
-              }
-            ) })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "input",
-          {
-            type: "file",
-            id: "file-window",
-            multiple: true,
-            accept: fileExtension == void 0 ? "*" : fileExtension,
-            style: { display: "none" },
-            onChange: loadSelectedFiles
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_Box.default, { component: "form", sx: { "& .MuiTextField-root": { m: 2, width: "25ch", mb: 0 } }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-            template.showFileName && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              import_TextField.default,
-              {
-                required: true,
-                style: { marginTop: "30px" },
-                label: `File Alias:`,
-                value: fileAlias,
-                variant: "standard",
-                onChange: changeFileName
-              }
-            ),
-            fileOriginalName != "" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label_default, { style: { marginLeft: "16px", fontSize: "9pt", color: "#267833" }, children: fileOriginalName }),
-            template.showDatabase && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              import_TextField.default,
-              {
-                select: true,
-                label: "Database:",
-                defaultValue: "s3",
-                helperText: "Upstream Storage Location",
-                variant: "standard",
-                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.MenuItem, { value: option.value, children: option.label }, option.value))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-            template.showFileSize && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              import_TextField.default,
-              {
-                label: "File Size:",
-                value: fileSize,
-                InputProps: {
-                  readOnly: true
-                },
-                variant: "standard"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Collapse, { in: infoOpen, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Alert, { severity: infoStyle, sx: { m: 1 }, children: warningText }) })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogActions.default, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_Button.default,
-          {
-            color: "inherit",
-            sx: { color: "#333" },
-            disabled: UpBtnDisabled,
-            onClick: handleClose,
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_Button.default,
-          {
-            variant: "contained",
-            disabled: UpBtnDisabled,
-            onClick: handleConfirm,
-            children: UpBtnText
-          }
-        )
-      ] })
-    ] })
-  ] }) });
-}
-
-// src/CmrComponents/upload/Upload.tsx
-var import_axios = __toESM(require("axios"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var CmrUpload = (props) => {
-  let [open, setOpen] = (0, import_react4.useState)(false);
-  let [uploading, setUploading] = (0, import_react4.useState)(false);
-  let [progress, setProgress] = (0, import_react4.useState)(0);
-  let [uploadedFile, setUploadedFile] = (0, import_react4.useState)(void 0);
-  const upload = async (file, fileAlias, fileDatabase) => {
-    setUploading(true);
-    const onProgress = (progress2) => {
-      let percentage = progress2 * 99;
-      props.uploadProgressed && props.uploadProgressed(+percentage.toFixed(2));
-      setProgress(+percentage.toFixed(2));
-    };
-    if (props.uploadStarted)
-      props.uploadStarted();
-    let status = 0;
-    if (props.beforeUpload != void 0 && !await props.beforeUpload(file)) {
-      if (props.uploadEnded)
-        props.uploadEnded();
-      setUploading(false);
-      return 200;
-    }
-    if (props.preprocess) {
-      let processed = await props.preprocess(file);
-      if (processed == void 0)
-        return failUpload();
-      if (typeof processed == "number") {
-        setUploading(false);
-        return processed;
-      }
-      file = processed;
-    }
-    if (props.uploadHandler != void 0) {
-      status = await props.uploadHandler(file, fileAlias, fileDatabase, onProgress, props.onUploaded);
-      setUploadedFile(props.reusable ? void 0 : file.name);
-    } else if (props.createPayload) {
-      let payload = await props.createPayload(file, fileAlias, fileDatabase);
-      if (payload == void 0) {
-        return failUpload();
-      }
-      payload.config.onUploadProgress = (progressEvent) => {
-        if (progressEvent.total == void 0)
-          return;
-        onProgress(progressEvent.loaded / progressEvent.total);
-      };
-      const res = await import_axios.default.post(payload.destination, payload.lambdaFile, payload.config);
-      status = res.status;
-      if (status === 200) {
-        console.log(res.data);
-        await import_axios.default.put(res.data.upload_url, payload.file, {
-          headers: {
-            "Content-Type": payload.file.type
-          }
-        });
-        await props.onUploaded(res, payload.file);
-        setUploadedFile(props.reusable ? void 0 : payload.file.name);
-      }
-    } else {
-      return failUpload();
-    }
-    if (props.uploadEnded)
-      props.uploadEnded();
-    setUploading(false);
-    setProgress(0);
-    return status;
-  };
-  function failUpload() {
-    setUploading(false);
-    setProgress(0);
-    if (props.uploadFailed)
-      return props.uploadFailed();
-    return 0;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react4.default.Fragment, { children: [
-    !uploading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      import_material7.Button,
-      {
-        fullWidth: props.fullWidth,
-        style: props.style,
-        variant: uploadedFile == void 0 ? "contained" : "outlined",
-        onClick: () => {
-          setOpen(true);
-        },
-        color: props.color || "primary",
-        sx: props.sx,
-        children: [
-          props.changeNameAfterUpload ? uploadedFile === void 0 ? props.uploadButtonName ? props.uploadButtonName : "Upload" : uploadedFile : props.uploadButtonName ? props.uploadButtonName : "Upload",
-          "                "
-        ]
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material7.Button, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
-      "Uploading ",
-      progress,
-      "%"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      UploadWindow,
-      {
-        open,
-        setOpen,
-        upload,
-        fileExtension: props.fileExtension,
-        template: { showFileName: true, showFileSize: true }
-      }
-    )
-  ] });
-};
-CmrUpload.defaultProps = {
-  changeNameAfterUpload: true
-};
-var Upload_default = CmrUpload;
-
-// src/CmrComponents/rename/edit.tsx
-var React6 = __toESM(require("react"));
-var import_material8 = require("@mui/material");
-var import_TextField2 = __toESM(require("@mui/material/TextField"));
-var import_Dialog2 = __toESM(require("@mui/material/Dialog"));
-var import_DialogActions2 = __toESM(require("@mui/material/DialogActions"));
-var import_DialogContent2 = __toESM(require("@mui/material/DialogContent"));
-var import_DialogTitle2 = __toESM(require("@mui/material/DialogTitle"));
-var import_react5 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function CmrNameDialog(props) {
-  let { originalName, open, setOpen } = props;
-  const [helperText, setHelperText] = React6.useState("");
-  const [text, setText] = React6.useState(originalName);
-  const [error, setError] = React6.useState(false);
-  const renamingCallback = props.renamingCallback;
-  const handleClose = () => {
-    setOpen(false);
-  };
-  (0, import_react5.useEffect)(() => {
-    checkError(originalName);
-  }, [originalName]);
-  const handleConfirm = async () => {
-    if (await renamingCallback(text))
-      handleClose();
-  };
-  const handleTextFieldChange = (e) => {
-    setText(e.target.value);
-    checkError(e.target.value);
-  };
-  const checkError = (text2) => {
-    const fileNameRegex = /^[a-zA-Z0-9_\-]+\.[a-zA-Z]{1,5}$/;
-    let newExtension = text2.split(".").pop();
-    let orgExtension = originalName.indexOf(".") >= 0 ? originalName.split(".").pop() : "?";
-    if (!fileNameRegex.test(text2)) {
-      setError(true);
-      if (text2.indexOf(".") < 0) {
-        setHelperText("Invalid file name, needs a valid extension.");
-      } else {
-        setHelperText("Invalid file name, please check.");
-      }
-    } else if (newExtension !== orgExtension) {
-      setHelperText(`You are modifying your file extension from .${orgExtension} to .${newExtension}.`);
-      setError(false);
-    } else {
-      setError(false);
-      setHelperText("");
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    import_Dialog2.default,
-    {
-      open,
-      onClose: handleClose,
-      fullWidth: true,
-      maxWidth: "xs",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogTitle2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material8.Typography, { children: [
-          ' Rename "',
-          originalName,
-          '" as:'
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogContent2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_TextField2.default,
-          {
-            autoFocus: true,
-            margin: "dense",
-            id: "name",
-            defaultValue: originalName,
-            onFocus: (event) => {
-              event.target.select();
-            },
-            fullWidth: true,
-            inputProps: { style: { fontSize: "16px" } },
-            variant: "standard",
-            onChange: handleTextFieldChange,
-            error,
-            helperText
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_DialogActions2.default, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CmrButton_default, { variant: "outlined", onClick: handleClose, children: "Cancel" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CmrButton_default, { variant: "contained", color: "primary", onClick: handleConfirm, children: "Confirm" })
-        ] })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_Dialog3.default, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_DialogTitle3.default, { children: "Confirmation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_DialogContent3.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_DialogContentText2.default, { children: "To delete the files, please type your full name below and confirm." }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_TextField2.default,
+        {
+          autoFocus: true,
+          margin: "dense",
+          id: "name",
+          type: "email",
+          placeholder: props.name,
+          fullWidth: true,
+          inputProps: { style: { fontSize: "16pt" } },
+          variant: "standard",
+          onChange: handleTextFieldChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_DialogActions3.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "btn btn-secondary", onClick: handleClose, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "btn btn-danger", onClick: handleConfirm, children: "Confirm" })
+    ] })
+  ] }) });
 }
 
-// src/CmrComponents/dialogue/Confirmation.tsx
+// src/CmrComponents/dialogue/EditConfirmation.tsx
 var React7 = __toESM(require("react"));
-var import_Dialog3 = __toESM(require("@mui/material/Dialog"));
-var import_DialogActions3 = __toESM(require("@mui/material/DialogActions"));
-var import_DialogContent3 = __toESM(require("@mui/material/DialogContent"));
-var import_DialogContentText2 = __toESM(require("@mui/material/DialogContentText"));
-var import_DialogTitle3 = __toESM(require("@mui/material/DialogTitle"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function CmrConfirmation({
+var import_TextField3 = __toESM(require("@mui/material/TextField"));
+var import_Dialog4 = __toESM(require("@mui/material/Dialog"));
+var import_DialogActions4 = __toESM(require("@mui/material/DialogActions"));
+var import_DialogContent4 = __toESM(require("@mui/material/DialogContent"));
+var import_DialogContentText3 = __toESM(require("@mui/material/DialogContentText"));
+var import_DialogTitle4 = __toESM(require("@mui/material/DialogTitle"));
+var import_material7 = require("@mui/material");
+var import_react5 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function CmrEditConfirmation({
   name,
   message,
-  cancelText = "Cancel",
+  defaultText = "",
   color,
   open,
   setOpen,
   confirmCallback = () => {
   },
-  confirmText = "Confirm",
   cancellable = false,
   cancelCallback = () => {
   },
-  width
+  suffix = ""
 }) {
-  const [text, setText] = React7.useState("");
+  const [text, setText] = React7.useState(defaultText);
+  (0, import_react5.useEffect)(() => {
+    if (open)
+      setText(defaultText);
+  }, [open]);
   const handleClose = () => {
     setOpen(false);
   };
   const handleConfirm = () => {
-    confirmCallback();
+    confirmCallback(text + suffix);
     handleClose();
   };
   const handleCancel = () => {
-    cancelCallback();
+    cancelCallback(text + suffix);
     handleClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Dialog3.default, { open, onClose: handleClose, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_DialogTitle3.default, { children: name ? name : "Confirmation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_DialogContent3.default, { sx: { width }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_DialogContentText2.default, { alignContent: "center", children: message }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_DialogActions3.default, { className: "mt-4", children: [
-        cancellable && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CmrButton_default, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: cancelText }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: confirmText })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Dialog4.default, { maxWidth: "xs", fullWidth: true, open, onClose: handleCancel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogTitle4.default, { children: name ? name : "Confirmation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_DialogContent4.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogContentText3.default, { alignContent: "center", children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogActions4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_TextField3.default,
+        {
+          fullWidth: true,
+          variant: "standard",
+          InputProps: {
+            endAdornment: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material7.InputAdornment, { position: "end", sx: { whiteSpace: "nowrap" }, children: suffix })
+          },
+          defaultValue: text,
+          onChange: (e) => setText(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_DialogActions4.default, { children: [
+        cancellable && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CmrButton_default, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: "Confirm" })
       ] })
     ] })
   ] });
 }
 
-// src/CmrComponents/dialogue/DeletionDialog.tsx
+// src/CmrTabs/CmrTabs.tsx
 var React8 = __toESM(require("react"));
-var import_TextField3 = __toESM(require("@mui/material/TextField"));
-var import_Dialog4 = __toESM(require("@mui/material/Dialog"));
-var import_DialogActions4 = __toESM(require("@mui/material/DialogActions"));
-var import_DialogContent4 = __toESM(require("@mui/material/DialogContent"));
-var import_DialogContentText3 = __toESM(require("@mui/material/DialogContentText"));
-var import_DialogTitle4 = __toESM(require("@mui/material/DialogTitle"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function CmrDeletionDialog(props) {
-  const [open, setOpen] = React8.useState(true);
-  const [text, setText] = React8.useState("");
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
-  const handleConfirm = () => {
-    if (text === props.name) {
-      props.deletionCallback();
-      setOpen(false);
+var import_Tabs = __toESM(require("@mui/material/Tabs"));
+var import_Tab = __toESM(require("@mui/material/Tab"));
+var import_Container = __toESM(require("@mui/material/Container"));
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_react6 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function CustomTabPanel(props) {
+  const { children, value, index, ...other } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: value !== index,
+      id: `simple-tabpanel-${index}`,
+      "aria-labelledby": `simple-tab-${index}`,
+      ...other,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Box.default, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Typography.default, { children }) })
     }
+  );
+}
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`
   };
-  const handleTextFieldChange = (e) => {
-    setText(e.target.value);
+}
+function CmrTabs(props) {
+  const [value, setValue] = React8.useState(0);
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+    if (props.onTabSelected)
+      props.onTabSelected(newValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Dialog4.default, { open, onClose: handleClose, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_DialogTitle4.default, { children: "Confirmation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_DialogContent4.default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_DialogContentText3.default, { children: "To delete the files, please type your full name below and confirm." }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_TextField3.default,
-        {
-          autoFocus: true,
-          margin: "dense",
-          id: "name",
-          type: "email",
-          placeholder: props.name,
-          fullWidth: true,
-          inputProps: { style: { fontSize: "16pt" } },
-          variant: "standard",
-          onChange: handleTextFieldChange
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_DialogActions4.default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "btn btn-secondary", onClick: handleClose, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "btn btn-danger", onClick: handleConfirm, children: "Confirm" })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_Container.default,
+    {
+      maxWidth: "lg",
+      sx: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        mt: 4
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Box.default, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_Tabs.default,
+          {
+            value,
+            onChange: handleChange,
+            "aria-label": "basic tabs example",
+            textColor: "inherit",
+            TabIndicatorProps: {
+              style: {
+                backgroundColor: "#580F8B"
+              }
+            },
+            children: props.tabList.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Tab.default, { sx: { color: value == index ? "#580F8B" : void 0 }, style: { fontSize: "14px", textTransform: "uppercase", fontWeight: 400 }, label: tab.text, ...a11yProps(index) }))
+          }
+        ) }),
+        props.tabList.map(
+          (tab, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CustomTabPanel, { value, index, children: (0, import_react6.cloneElement)(tab.children, {
+            visible: value == index
+          }) })
+        )
+      ]
+    }
+  );
 }
 
-// src/CmrComponents/dialogue/EditConfirmation.tsx
-var React9 = __toESM(require("react"));
-var import_TextField4 = __toESM(require("@mui/material/TextField"));
-var import_Dialog5 = __toESM(require("@mui/material/Dialog"));
-var import_DialogActions5 = __toESM(require("@mui/material/DialogActions"));
-var import_DialogContent5 = __toESM(require("@mui/material/DialogContent"));
-var import_DialogContentText4 = __toESM(require("@mui/material/DialogContentText"));
-var import_DialogTitle5 = __toESM(require("@mui/material/DialogTitle"));
+// src/CmrComponents/checkbox/Checkbox.tsx
+var import_material8 = require("@mui/material");
+
+// src/CmrComponents/label/Label.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var CmrLabel = (props) => {
+  const { children, required = false } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "cmr-label", style: { fontSize: "16px", ...props.style }, children: [
+    children,
+    required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "asterik", children: "*" })
+  ] });
+};
+var Label_default = CmrLabel;
+
+// src/CmrComponents/checkbox/Checkbox.tsx
 var import_material9 = require("@mui/material");
-var import_react6 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function CmrEditConfirmation({
-  name,
-  message,
-  defaultText = "",
-  color,
+var CmrCheckbox = (props) => {
+  const { defaultChecked, onChange, children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_material9.FormControlLabel,
+    {
+      disabled: props.disabled,
+      style: props.style,
+      className: props.className,
+      control: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material8.Checkbox, { style: props.style, checked: props.checked, defaultChecked, onChange }),
+      label: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Label_default, { children: props.children }),
+      sx: props.sx,
+      labelPlacement: "end"
+    }
+  );
+};
+var Checkbox_default = CmrCheckbox;
+
+// src/CmrComponents/input-number/InputNumber.tsx
+var import_antd2 = require("antd");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var CmrInputNumber = (props) => {
+  const { defaultValue, style, max, min, value, onChange, children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_antd2.InputNumber, { defaultValue, max, style, min, value, onChange, ...rest, children });
+};
+var InputNumber_default = CmrInputNumber;
+
+// src/CmrComponents/tooltip/Tooltip.tsx
+var import_antd3 = require("antd");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var CmrTooltip = (props) => {
+  const {
+    arrowPointAtCenter,
+    autoAdjustOverflow,
+    color,
+    defaultVisible,
+    mouseEnterDelay,
+    mouseLeaveDelay,
+    overlayClassName,
+    placement,
+    visible,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_antd3.Tooltip,
+    {
+      arrowPointAtCenter,
+      autoAdjustOverflow,
+      color,
+      defaultVisible,
+      mouseEnterDelay,
+      mouseLeaveDelay,
+      overlayClassName,
+      placement,
+      visible,
+      ...rest
+    }
+  );
+};
+var Tooltip_default = CmrTooltip;
+
+// src/CmrComponents/select-upload/SelectUpload.tsx
+var import_react8 = __toESM(require("react"));
+
+// src/CmrComponents/upload/Upload.tsx
+var import_react7 = __toESM(require("react"));
+var import_material11 = require("@mui/material");
+
+// src/CmrComponents/upload/UploadWindow.tsx
+var React9 = __toESM(require("react"));
+var import_Button = __toESM(require("@mui/material/Button"));
+var import_TextField4 = __toESM(require("@mui/material/TextField"));
+var import_Dialog5 = __toESM(require("@mui/material/Dialog"));
+var import_DialogActions5 = __toESM(require("@mui/material/DialogActions"));
+var import_DialogContent5 = __toESM(require("@mui/material/DialogContent"));
+var import_DialogContentText4 = __toESM(require("@mui/material/DialogContentText"));
+var import_DialogTitle5 = __toESM(require("@mui/material/DialogTitle"));
+var import_Typography2 = __toESM(require("@mui/material/Typography"));
+var import_Box2 = __toESM(require("@mui/material/Box"));
+var import_material10 = require("@mui/material");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function CmrUploadWindow({
+  upload,
   open,
   setOpen,
-  confirmCallback = () => {
-  },
-  cancellable = false,
-  cancelCallback = () => {
-  },
-  suffix = ""
+  fileExtension,
+  template = { showFileName: true, showDatabase: true, showFileSize: true }
+  // default values
 }) {
-  const [text, setText] = React9.useState(defaultText);
-  (0, import_react6.useEffect)(() => {
-    if (open)
-      setText(defaultText);
-  }, [open]);
+  const [fileOriginalName, setFileOriginalName] = React9.useState("");
+  const [fileAlias, setFileAlias] = React9.useState("/");
+  const [fileSize, setFileSize] = React9.useState("0 MB");
+  const [warningText, setWarningText] = React9.useState("Unknown Status");
+  const [infoOpen, setInfoOpen] = React9.useState(false);
+  const [locationSelection, setLocationSelection] = React9.useState("s3");
+  const [infoStyle, setInfoStyle] = React9.useState("info");
+  const [uploadedFiles, setUploaded] = React9.useState([]);
+  const [UpBtnDisabled, setUpBtnDisabled] = React9.useState(false);
+  const [UpBtnText, setUpBtnText] = React9.useState("Upload");
+  const [uploadBoxWarning, setUploadBoxWarning] = React9.useState(void 0);
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
   const handleClose = () => {
     setOpen(false);
   };
+  const getExtension = (fileName) => {
+    if (fileName == void 0)
+      return;
+    return fileName.split(".").pop();
+  };
   const handleConfirm = () => {
-    confirmCallback(text + suffix);
-    handleClose();
+    if (uploadedFiles.length === 0) {
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("Must select files to upload!");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    if (fileAlias.length === 0) {
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("File name can't be empty");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    setOpen(false);
+    upload(uploadedFiles[0], fileAlias, locationSelection).then((response) => {
+      console.log(response);
+      if (response > 0) {
+        setInfoOpen(true);
+        if (response === 200) {
+          setInfoStyle("success");
+          setWarningText("Upload successful");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setOpen(false);
+          }, 1e3);
+          setUpBtnDisabled(false);
+          setUpBtnText("Upload");
+        } else if (response === 413) {
+          setInfoStyle("error");
+          setWarningText("File size limit exceeded");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 2e3);
+        } else if (response === 500) {
+          setInfoStyle("error");
+          setWarningText("Internal server error");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 1500);
+          setOpen(true);
+        } else if (response === 400) {
+          setInfoStyle("warning");
+          setWarningText("File upload cancelled");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 1e3);
+          setOpen(true);
+        } else {
+          setInfoStyle("warning");
+          setWarningText("Unknown status");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 2e3);
+          setOpen(true);
+        }
+      }
+    }).catch((error) => {
+      setUpBtnDisabled(false);
+      setUpBtnText("Upload");
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("Upload unsuccessful: " + error.message);
+      setTimeout(() => setInfoOpen(false), 2500);
+      console.error("Error:", error);
+    });
+    setUpBtnDisabled(true);
+    setUpBtnText("Uploading");
   };
-  const handleCancel = () => {
-    cancelCallback(text + suffix);
-    handleClose();
+  const changeFileName = (e) => {
+    setFileAlias(e.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_Dialog5.default, { maxWidth: "xs", fullWidth: true, open, onClose: handleCancel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_DialogTitle5.default, { children: name ? name : "Confirmation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_DialogContent5.default, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_DialogContentText4.default, { alignContent: "center", children: message }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_DialogActions5.default, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_TextField4.default,
-        {
-          fullWidth: true,
-          variant: "standard",
-          InputProps: {
-            endAdornment: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material9.InputAdornment, { position: "end", sx: { whiteSpace: "nowrap" }, children: suffix })
-          },
-          defaultValue: text,
-          onChange: (e) => setText(e.target.value)
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_DialogActions5.default, { children: [
-        cancellable && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CmrButton_default, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: "Confirm" })
-      ] })
-    ] })
-  ] });
-}
-
-// src/CmrTabs/CmrTabs.tsx
-var React10 = __toESM(require("react"));
-var import_Tabs = __toESM(require("@mui/material/Tabs"));
-var import_Tab = __toESM(require("@mui/material/Tab"));
-var import_Container = __toESM(require("@mui/material/Container"));
-var import_Typography2 = __toESM(require("@mui/material/Typography"));
-var import_Box2 = __toESM(require("@mui/material/Box"));
-var import_react7 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function CustomTabPanel(props) {
-  const { children, value, index, ...other } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    "div",
-    {
-      role: "tabpanel",
-      hidden: value !== index,
-      id: `simple-tabpanel-${index}`,
-      "aria-labelledby": `simple-tab-${index}`,
-      ...other,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box2.default, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography2.default, { children }) })
+  function loadFiles(files) {
+    if (files.length == 0) {
+      setInfoOpen(true);
+      setInfoStyle("warning");
+      setWarningText("No file selected");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
     }
-  );
-}
-function a11yProps(index) {
-  return {
-    id: `simple-tab-${index}`,
-    "aria-controls": `simple-tabpanel-${index}`
+    if (files.length > 1) {
+      setInfoOpen(true);
+      setInfoStyle("warning");
+      setWarningText("Only accepts one file at a time");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    let file = files[0];
+    setUploaded([file]);
+    function readFile(file2) {
+      setFileOriginalName(file2.name);
+      setFileAlias(file2.name);
+      const units = [
+        "B",
+        "KB",
+        "MB",
+        "GB",
+        "TB",
+        "PB",
+        "EB",
+        "ZB",
+        "YB"
+      ];
+      let numberOfBytes = file2.size;
+      const exponent = Math.min(
+        Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
+        units.length - 1
+      );
+      const approx = numberOfBytes / 1024 ** exponent;
+      const output = exponent === 0 ? `${numberOfBytes} bytes` : `${approx.toFixed(3)} ${units[exponent]}`;
+      setFileSize(output);
+    }
+    readFile(file);
+  }
+  let initialized = false;
+  let fileInput = (inputRef) => {
+    if (initialized)
+      return;
+    inputRef.addEventListener("dragover", function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (e.dataTransfer.files) {
+        let draggedFiles = e.dataTransfer.files;
+        if (draggedFiles.length > 1) {
+          setUploadBoxWarning("Only one file can be uploaded at a time");
+        } else if (fileExtension != void 0 && draggedFiles.length != 0 && getExtension(draggedFiles[0].name) != fileExtension) {
+          setUploadBoxWarning(`Only accepting files with extension ${fileExtension}`);
+        }
+      }
+      e.dataTransfer.dropEffect = "copy";
+    });
+    inputRef.addEventListener("drop", function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setUploadBoxWarning(void 0);
+      let files = e.dataTransfer.files;
+      if (files.length > 1) {
+        setInfoOpen(true);
+        setInfoStyle("warning");
+        setWarningText("Only one file can be uploaded at a time");
+        setTimeout(() => setInfoOpen(false), 2500);
+        return;
+      } else if (fileExtension != void 0 && `.${getExtension(files[0].name)}` != fileExtension) {
+        setInfoOpen(true);
+        setInfoStyle("warning");
+        setWarningText(`Only accepting files with extension ${fileExtension}`);
+        setTimeout(() => setInfoOpen(false), 2500);
+        return;
+      }
+      loadFiles(files);
+    });
+    inputRef.addEventListener("dragleave", () => {
+      setUploadBoxWarning(void 0);
+    });
+    initialized = true;
   };
-}
-function CmrTabs(props) {
-  const [value, setValue] = React10.useState(0);
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-    if (props.onTabSelected)
-      props.onTabSelected(newValue);
+  const fileInputClick = (e) => {
+    const fileElem = document.getElementById("file-window");
+    e.preventDefault();
+    if (fileElem) {
+      fileElem.click();
+    }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    import_Container.default,
-    {
-      maxWidth: "lg",
-      sx: {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        mt: 4
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box2.default, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_Tabs.default,
+  const loadSelectedFiles = (e) => {
+    e.preventDefault();
+    const fileElem = document.getElementById("file-window");
+    loadFiles(fileElem.files);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Dialog5.default, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_DialogTitle5.default, { children: "File Upload" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_DialogContent5.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_DialogContentText4.default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_DialogContent5.default, { dividers: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_Box2.default,
           {
-            value,
-            onChange: handleChange,
-            "aria-label": "basic tabs example",
-            textColor: "inherit",
-            TabIndicatorProps: {
-              style: {
-                backgroundColor: "#580F8B"
-              }
+            width: 500,
+            height: 250,
+            style: {
+              borderStyle: "dashed",
+              borderRadius: "5pt",
+              borderColor: uploadBoxWarning == void 0 ? "lightGray" : "#BA3C3C"
             },
-            children: props.tabList.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Tab.default, { sx: { color: value == index ? "#580F8B" : void 0 }, style: { fontSize: "14px", textTransform: "uppercase", fontWeight: 400 }, label: tab.text, ...a11yProps(index) }))
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography2.default, { component: "div", style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              import_Box2.default,
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%"
+                },
+                onClick: fileInputClick,
+                ref: fileInput,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Typography2.default, { variant: "body1", align: "center", style: { marginTop: "auto" }, children: [
+                    "Drag & Drop or Click to Upload Your File Here ",
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("sup", { children: "*" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography2.default, { variant: "body2", align: "center", style: { marginTop: "auto", fontSize: "0.8rem", fontStyle: "italic" }, children: "* Warning: The file you are uploading may contain sensitive information protected under privacy laws. Please ensure all PHI is anonymized before proceeding.Before proceeding. The user is the sole responsible for data anonymization." })
+                ]
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "input",
+          {
+            type: "file",
+            id: "file-window",
+            multiple: true,
+            accept: fileExtension == void 0 ? "*" : fileExtension,
+            style: { display: "none" },
+            onChange: loadSelectedFiles
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box2.default, { component: "form", sx: { "& .MuiTextField-root": { m: 2, width: "25ch", mb: 0 } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+            template.showFileName && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_TextField4.default,
+              {
+                required: true,
+                style: { marginTop: "30px" },
+                label: `File Alias:`,
+                value: fileAlias,
+                variant: "standard",
+                onChange: changeFileName
+              }
+            ),
+            fileOriginalName != "" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label_default, { style: { marginLeft: "16px", fontSize: "9pt", color: "#267833" }, children: fileOriginalName }),
+            template.showDatabase && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_TextField4.default,
+              {
+                select: true,
+                label: "Database:",
+                defaultValue: "s3",
+                helperText: "Upstream Storage Location",
+                variant: "standard",
+                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material10.MenuItem, { value: option.value, children: option.label }, option.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+            template.showFileSize && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_TextField4.default,
+              {
+                label: "File Size:",
+                value: fileSize,
+                InputProps: {
+                  readOnly: true
+                },
+                variant: "standard"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material10.Collapse, { in: infoOpen, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material10.Alert, { severity: infoStyle, sx: { m: 1 }, children: warningText }) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_DialogActions5.default, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_Button.default,
+          {
+            color: "inherit",
+            sx: { color: "#333" },
+            disabled: UpBtnDisabled,
+            onClick: handleClose,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_Button.default,
+          {
+            variant: "contained",
+            disabled: UpBtnDisabled,
+            onClick: handleConfirm,
+            children: UpBtnText
           }
-        ) }),
-        props.tabList.map(
-          (tab, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CustomTabPanel, { value, index, children: (0, import_react7.cloneElement)(tab.children, {
-            visible: value == index
-          }) })
         )
-      ]
-    }
-  );
+      ] })
+    ] })
+  ] }) });
 }
 
-// src/CmrComponents/checkbox/Checkbox.tsx
-var import_material10 = require("@mui/material");
-var import_material11 = require("@mui/material");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var CmrCheckbox = (props) => {
-  const { defaultChecked, onChange, children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_material11.FormControlLabel,
-    {
-      disabled: props.disabled,
-      style: props.style,
-      className: props.className,
-      control: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material10.Checkbox, { style: props.style, checked: props.checked, defaultChecked, onChange }),
-      label: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { children: props.children }),
-      sx: props.sx,
-      labelPlacement: "end"
-    }
-  );
-};
-var Checkbox_default = CmrCheckbox;
-
-// src/CmrComponents/input-number/InputNumber.tsx
-var import_antd2 = require("antd");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var CmrInputNumber = (props) => {
-  const { defaultValue, style, max, min, value, onChange, children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_antd2.InputNumber, { defaultValue, max, style, min, value, onChange, ...rest, children });
-};
-var InputNumber_default = CmrInputNumber;
-
-// src/CmrComponents/tooltip/Tooltip.tsx
-var import_antd3 = require("antd");
+// src/CmrComponents/upload/Upload.tsx
+var import_axios = __toESM(require("axios"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var CmrTooltip = (props) => {
-  const {
-    arrowPointAtCenter,
-    autoAdjustOverflow,
-    color,
-    defaultVisible,
-    mouseEnterDelay,
-    mouseLeaveDelay,
-    overlayClassName,
-    placement,
-    visible,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_antd3.Tooltip,
-    {
-      arrowPointAtCenter,
-      autoAdjustOverflow,
-      color,
-      defaultVisible,
-      mouseEnterDelay,
-      mouseLeaveDelay,
-      overlayClassName,
-      placement,
-      visible,
-      ...rest
+var CmrUpload = (props) => {
+  let [open, setOpen] = (0, import_react7.useState)(false);
+  let [uploading, setUploading] = (0, import_react7.useState)(false);
+  let [progress, setProgress] = (0, import_react7.useState)(0);
+  let [uploadedFile, setUploadedFile] = (0, import_react7.useState)(void 0);
+  const upload = async (file, fileAlias, fileDatabase) => {
+    setUploading(true);
+    const onProgress = (progress2) => {
+      let percentage = progress2 * 99;
+      props.uploadProgressed && props.uploadProgressed(+percentage.toFixed(2));
+      setProgress(+percentage.toFixed(2));
+    };
+    if (props.uploadStarted)
+      props.uploadStarted();
+    let status = 0;
+    if (props.beforeUpload != void 0 && !await props.beforeUpload(file)) {
+      if (props.uploadEnded)
+        props.uploadEnded();
+      setUploading(false);
+      return 200;
     }
-  );
+    if (props.preprocess) {
+      let processed = await props.preprocess(file);
+      if (processed == void 0)
+        return failUpload();
+      if (typeof processed == "number") {
+        setUploading(false);
+        return processed;
+      }
+      file = processed;
+    }
+    if (props.uploadHandler != void 0) {
+      status = await props.uploadHandler(file, fileAlias, fileDatabase, onProgress, props.onUploaded);
+      setUploadedFile(props.reusable ? void 0 : file.name);
+    } else if (props.createPayload) {
+      let payload = await props.createPayload(file, fileAlias, fileDatabase);
+      if (payload == void 0) {
+        return failUpload();
+      }
+      payload.config.onUploadProgress = (progressEvent) => {
+        if (progressEvent.total == void 0)
+          return;
+        onProgress(progressEvent.loaded / progressEvent.total);
+      };
+      const res = await import_axios.default.post(payload.destination, payload.lambdaFile, payload.config);
+      status = res.status;
+      if (status === 200) {
+        console.log(res.data);
+        await import_axios.default.put(res.data.upload_url, payload.file, {
+          headers: {
+            "Content-Type": payload.file.type
+          }
+        });
+        await props.onUploaded(res, payload.file);
+        setUploadedFile(props.reusable ? void 0 : payload.file.name);
+      }
+    } else {
+      return failUpload();
+    }
+    if (props.uploadEnded)
+      props.uploadEnded();
+    setUploading(false);
+    setProgress(0);
+    return status;
+  };
+  function failUpload() {
+    setUploading(false);
+    setProgress(0);
+    if (props.uploadFailed)
+      return props.uploadFailed();
+    return 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react7.default.Fragment, { children: [
+    !uploading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      import_material11.Button,
+      {
+        fullWidth: props.fullWidth,
+        style: props.style,
+        variant: uploadedFile == void 0 ? "contained" : "outlined",
+        onClick: () => {
+          setOpen(true);
+        },
+        color: props.color || "primary",
+        sx: props.sx,
+        children: [
+          props.changeNameAfterUpload ? uploadedFile === void 0 ? props.uploadButtonName ? props.uploadButtonName : "Upload" : uploadedFile : props.uploadButtonName ? props.uploadButtonName : "Upload",
+          "                "
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material11.Button, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
+      "Uploading ",
+      progress,
+      "%"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      CmrUploadWindow,
+      {
+        open,
+        setOpen,
+        upload,
+        fileExtension: props.fileExtension,
+        template: { showFileName: true, showFileSize: true }
+      }
+    )
+  ] });
 };
-var Tooltip_default = CmrTooltip;
+CmrUpload.defaultProps = {
+  changeNameAfterUpload: true
+};
+var Upload_default = CmrUpload;
 
 // src/CmrComponents/select-upload/SelectUpload.tsx
-var import_react8 = __toESM(require("react"));
 var import_material12 = require("@mui/material");
 var import_Select = __toESM(require("@mui/material/Select"));
 var import_Dialog6 = __toESM(require("@mui/material/Dialog"));
@@ -1274,5 +1277,6 @@ var CmrTable2 = CmrTable_default;
   CmrSelect,
   CmrTable,
   CmrTabs,
-  CmrTooltip
+  CmrTooltip,
+  CmrUploadWindow
 });