cloudmr-ux 1.2.1 → 1.2.3

package/dist/index.mjs

@@ -213,865 +213,867 @@ var CmrPanel = function(props) {
 };
 var Panel_default = CmrPanel;
 
-// src/CmrComponents/upload/Upload.tsx
-import React5, { useState as useState4 } from "react";
-import { Button as Button3 } from "@mui/material";
-
-// src/CmrComponents/upload/UploadWindow.tsx
+// src/CmrComponents/rename/edit.tsx
 import * as React4 from "react";
-import Button2 from "@mui/material/Button";
+import { Typography } from "@mui/material";
 import TextField from "@mui/material/TextField";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import { Alert, Collapse, MenuItem as MenuItem2 } from "@mui/material";
-
-// src/CmrComponents/label/Label.tsx
+import { useEffect } from "react";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var CmrLabel = (props) => {
-  const { children, required = false } = props;
-  return /* @__PURE__ */ jsxs4("label", { className: "cmr-label", style: { fontSize: "16px", ...props.style }, children: [
-    children,
-    required && /* @__PURE__ */ jsx8("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);
+  };
+  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__ */ jsx8("div", { children: /* @__PURE__ */ jsxs4(
+    Dialog,
+    {
+      open,
+      onClose: handleClose,
+      fullWidth: true,
+      maxWidth: "xs",
+      children: [
+        /* @__PURE__ */ jsx8(DialogTitle, { children: /* @__PURE__ */ jsxs4(Typography, { children: [
+          ' Rename "',
+          originalName,
+          '" as:'
+        ] }) }),
+        /* @__PURE__ */ jsx8(DialogContent, { children: /* @__PURE__ */ jsx8(
+          TextField,
+          {
+            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__ */ jsxs4(DialogActions, { children: [
+          /* @__PURE__ */ jsx8(CmrButton_default, { variant: "outlined", onClick: handleClose, children: "Cancel" }),
+          /* @__PURE__ */ jsx8(CmrButton_default, { variant: "contained", color: "primary", onClick: handleConfirm, children: "Confirm" })
+        ] })
+      ]
+    }
+  ) });
+}
 
-// src/CmrComponents/upload/UploadWindow.tsx
+// src/CmrComponents/dialogue/Confirmation.tsx
+import * as React5 from "react";
+import Dialog2 from "@mui/material/Dialog";
+import DialogActions2 from "@mui/material/DialogActions";
+import DialogContent2 from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle2 from "@mui/material/DialogTitle";
 import { jsx as jsx9, jsxs as jsxs5 } from "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__ */ jsxs5(Dialog2, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ jsx9(DialogTitle2, { children: name ? name : "Confirmation" }),
+    /* @__PURE__ */ jsxs5(DialogContent2, { sx: { width }, children: [
+      /* @__PURE__ */ jsx9(DialogContentText, { alignContent: "center", children: message }),
+      /* @__PURE__ */ jsxs5(DialogActions2, { className: "mt-4", children: [
+        cancellable && /* @__PURE__ */ jsx9(CmrButton_default, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: cancelText }),
+        /* @__PURE__ */ jsx9(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: confirmText })
+      ] })
+    ] })
+  ] });
+}
+
+// src/CmrComponents/dialogue/DeletionDialog.tsx
+import * as React6 from "react";
+import TextField2 from "@mui/material/TextField";
+import Dialog3 from "@mui/material/Dialog";
+import DialogActions3 from "@mui/material/DialogActions";
+import DialogContent3 from "@mui/material/DialogContent";
+import DialogContentText2 from "@mui/material/DialogContentText";
+import DialogTitle3 from "@mui/material/DialogTitle";
+import { jsx as jsx10, jsxs as jsxs6 } from "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__ */ jsx9("div", { children: /* @__PURE__ */ jsxs5(Dialog, { open, onClose: handleClose, children: [
-    /* @__PURE__ */ jsx9(DialogTitle, { children: "File Upload" }),
-    /* @__PURE__ */ jsxs5(DialogContent, { children: [
-      /* @__PURE__ */ jsx9(DialogContentText, {}),
-      /* @__PURE__ */ jsxs5(DialogContent, { dividers: true, children: [
-        /* @__PURE__ */ jsx9(
-          Box,
-          {
-            width: 500,
-            height: 250,
-            style: {
-              borderStyle: "dashed",
-              borderRadius: "5pt",
-              borderColor: uploadBoxWarning == void 0 ? "lightGray" : "#BA3C3C"
-            },
-            children: /* @__PURE__ */ jsx9(Typography, { component: "div", style: { height: "100%" }, children: /* @__PURE__ */ jsxs5(
-              Box,
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  height: "100%"
-                },
-                onClick: fileInputClick,
-                ref: fileInput,
-                children: [
-                  /* @__PURE__ */ jsxs5(Typography, { variant: "body1", align: "center", style: { marginTop: "auto" }, children: [
-                    "Drag & Drop or Click to Upload Your File Here ",
-                    /* @__PURE__ */ jsx9("sup", { children: "*" })
-                  ] }),
-                  /* @__PURE__ */ jsx9(Typography, { 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__ */ jsx9(
-          "input",
-          {
-            type: "file",
-            id: "file-window",
-            multiple: true,
-            accept: fileExtension == void 0 ? "*" : fileExtension,
-            style: { display: "none" },
-            onChange: loadSelectedFiles
-          }
-        ),
-        /* @__PURE__ */ jsxs5(Box, { component: "form", sx: { "& .MuiTextField-root": { m: 2, width: "25ch", mb: 0 } }, children: [
-          /* @__PURE__ */ jsxs5("div", { children: [
-            template.showFileName && /* @__PURE__ */ jsx9(
-              TextField,
-              {
-                required: true,
-                style: { marginTop: "30px" },
-                label: `File Alias:`,
-                value: fileAlias,
-                variant: "standard",
-                onChange: changeFileName
-              }
-            ),
-            fileOriginalName != "" && /* @__PURE__ */ jsx9(Label_default, { style: { marginLeft: "16px", fontSize: "9pt", color: "#267833" }, children: fileOriginalName }),
-            template.showDatabase && /* @__PURE__ */ jsx9(
-              TextField,
-              {
-                select: true,
-                label: "Database:",
-                defaultValue: "s3",
-                helperText: "Upstream Storage Location",
-                variant: "standard",
-                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ jsx9(MenuItem2, { value: option.value, children: option.label }, option.value))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs5("div", { children: [
-            template.showFileSize && /* @__PURE__ */ jsx9(
-              TextField,
-              {
-                label: "File Size:",
-                value: fileSize,
-                InputProps: {
-                  readOnly: true
-                },
-                variant: "standard"
-              }
-            ),
-            /* @__PURE__ */ jsx9(Collapse, { in: infoOpen, children: /* @__PURE__ */ jsx9(Alert, { severity: infoStyle, sx: { m: 1 }, children: warningText }) })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs5(DialogActions, { children: [
-        /* @__PURE__ */ jsx9(
-          Button2,
-          {
-            color: "inherit",
-            sx: { color: "#333" },
-            disabled: UpBtnDisabled,
-            onClick: handleClose,
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ jsx9(
-          Button2,
-          {
-            variant: "contained",
-            disabled: UpBtnDisabled,
-            onClick: handleConfirm,
-            children: UpBtnText
-          }
-        )
-      ] })
-    ] })
-  ] }) });
-}
-
-// src/CmrComponents/upload/Upload.tsx
-import axios from "axios";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var CmrUpload = (props) => {
-  let [open, setOpen] = useState4(false);
-  let [uploading, setUploading] = useState4(false);
-  let [progress, setProgress] = useState4(0);
-  let [uploadedFile, setUploadedFile] = useState4(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 axios.post(payload.destination, payload.lambdaFile, payload.config);
-      status = res.status;
-      if (status === 200) {
-        console.log(res.data);
-        await axios.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__ */ jsxs6(React5.Fragment, { children: [
-    !uploading ? /* @__PURE__ */ jsxs6(
-      Button3,
-      {
-        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__ */ jsxs6(Button3, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
-      "Uploading ",
-      progress,
-      "%"
-    ] }),
-    /* @__PURE__ */ jsx10(
-      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
-import * as React6 from "react";
-import { Typography as Typography2 } from "@mui/material";
-import TextField2 from "@mui/material/TextField";
-import Dialog2 from "@mui/material/Dialog";
-import DialogActions2 from "@mui/material/DialogActions";
-import DialogContent2 from "@mui/material/DialogContent";
-import DialogTitle2 from "@mui/material/DialogTitle";
-import { useEffect } from "react";
-import { jsx as jsx11, jsxs as jsxs7 } from "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);
-  };
-  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__ */ jsx11("div", { children: /* @__PURE__ */ jsxs7(
-    Dialog2,
-    {
-      open,
-      onClose: handleClose,
-      fullWidth: true,
-      maxWidth: "xs",
-      children: [
-        /* @__PURE__ */ jsx11(DialogTitle2, { children: /* @__PURE__ */ jsxs7(Typography2, { children: [
-          " Rename the File ",
-          originalName,
-          " as:"
-        ] }) }),
-        /* @__PURE__ */ jsx11(DialogContent2, { children: /* @__PURE__ */ jsx11(
-          TextField2,
-          {
-            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__ */ jsxs7(DialogActions2, { children: [
-          /* @__PURE__ */ jsx11(CmrButton_default, { variant: "outlined", onClick: handleClose, children: "Cancel" }),
-          /* @__PURE__ */ jsx11(CmrButton_default, { variant: "contained", color: "primary", onClick: handleConfirm, children: "Confirm" })
-        ] })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsxs6(Dialog3, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ jsx10(DialogTitle3, { children: "Confirmation" }),
+    /* @__PURE__ */ jsxs6(DialogContent3, { children: [
+      /* @__PURE__ */ jsx10(DialogContentText2, { children: "To delete the files, please type your full name below and confirm." }),
+      /* @__PURE__ */ jsx10(
+        TextField2,
+        {
+          autoFocus: true,
+          margin: "dense",
+          id: "name",
+          type: "email",
+          placeholder: props.name,
+          fullWidth: true,
+          inputProps: { style: { fontSize: "16pt" } },
+          variant: "standard",
+          onChange: handleTextFieldChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6(DialogActions3, { children: [
+      /* @__PURE__ */ jsx10("button", { className: "btn btn-secondary", onClick: handleClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx10("button", { className: "btn btn-danger", onClick: handleConfirm, children: "Confirm" })
+    ] })
+  ] }) });
 }
 
-// src/CmrComponents/dialogue/Confirmation.tsx
+// src/CmrComponents/dialogue/EditConfirmation.tsx
 import * as React7 from "react";
-import Dialog3 from "@mui/material/Dialog";
-import DialogActions3 from "@mui/material/DialogActions";
-import DialogContent3 from "@mui/material/DialogContent";
-import DialogContentText2 from "@mui/material/DialogContentText";
-import DialogTitle3 from "@mui/material/DialogTitle";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-function CmrConfirmation({
+import TextField3 from "@mui/material/TextField";
+import Dialog4 from "@mui/material/Dialog";
+import DialogActions4 from "@mui/material/DialogActions";
+import DialogContent4 from "@mui/material/DialogContent";
+import DialogContentText3 from "@mui/material/DialogContentText";
+import DialogTitle4 from "@mui/material/DialogTitle";
+import { InputAdornment } from "@mui/material";
+import { useEffect as useEffect2 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "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);
+  useEffect2(() => {
+    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__ */ jsxs8(Dialog3, { open, onClose: handleClose, children: [
-    /* @__PURE__ */ jsx12(DialogTitle3, { children: name ? name : "Confirmation" }),
-    /* @__PURE__ */ jsxs8(DialogContent3, { sx: { width }, children: [
-      /* @__PURE__ */ jsx12(DialogContentText2, { alignContent: "center", children: message }),
-      /* @__PURE__ */ jsxs8(DialogActions3, { className: "mt-4", children: [
-        cancellable && /* @__PURE__ */ jsx12(CmrButton_default, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: cancelText }),
-        /* @__PURE__ */ jsx12(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: confirmText })
+  return /* @__PURE__ */ jsxs7(Dialog4, { maxWidth: "xs", fullWidth: true, open, onClose: handleCancel, children: [
+    /* @__PURE__ */ jsx11(DialogTitle4, { children: name ? name : "Confirmation" }),
+    /* @__PURE__ */ jsxs7(DialogContent4, { children: [
+      /* @__PURE__ */ jsx11(DialogContentText3, { alignContent: "center", children: message }),
+      /* @__PURE__ */ jsx11(DialogActions4, { children: /* @__PURE__ */ jsx11(
+        TextField3,
+        {
+          fullWidth: true,
+          variant: "standard",
+          InputProps: {
+            endAdornment: /* @__PURE__ */ jsx11(InputAdornment, { position: "end", sx: { whiteSpace: "nowrap" }, children: suffix })
+          },
+          defaultValue: text,
+          onChange: (e) => setText(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ jsxs7(DialogActions4, { children: [
+        cancellable && /* @__PURE__ */ jsx11(CmrButton_default, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: "Cancel" }),
+        /* @__PURE__ */ jsx11(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: "Confirm" })
       ] })
     ] })
   ] });
 }
 
-// src/CmrComponents/dialogue/DeletionDialog.tsx
+// src/CmrTabs/CmrTabs.tsx
 import * as React8 from "react";
-import TextField3 from "@mui/material/TextField";
-import Dialog4 from "@mui/material/Dialog";
-import DialogActions4 from "@mui/material/DialogActions";
-import DialogContent4 from "@mui/material/DialogContent";
-import DialogContentText3 from "@mui/material/DialogContentText";
-import DialogTitle4 from "@mui/material/DialogTitle";
-import { jsx as jsx13, jsxs as jsxs9 } from "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);
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Container from "@mui/material/Container";
+import Typography2 from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { cloneElement as cloneElement2 } from "react";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function CustomTabPanel(props) {
+  const { children, value, index, ...other } = props;
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: value !== index,
+      id: `simple-tabpanel-${index}`,
+      "aria-labelledby": `simple-tab-${index}`,
+      ...other,
+      children: /* @__PURE__ */ jsx12(Box, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ jsx12(Typography2, { 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__ */ jsx13("div", { children: /* @__PURE__ */ jsxs9(Dialog4, { open, onClose: handleClose, children: [
-    /* @__PURE__ */ jsx13(DialogTitle4, { children: "Confirmation" }),
-    /* @__PURE__ */ jsxs9(DialogContent4, { children: [
-      /* @__PURE__ */ jsx13(DialogContentText3, { children: "To delete the files, please type your full name below and confirm." }),
-      /* @__PURE__ */ jsx13(
-        TextField3,
-        {
-          autoFocus: true,
-          margin: "dense",
-          id: "name",
-          type: "email",
-          placeholder: props.name,
-          fullWidth: true,
-          inputProps: { style: { fontSize: "16pt" } },
-          variant: "standard",
-          onChange: handleTextFieldChange
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs9(DialogActions4, { children: [
-      /* @__PURE__ */ jsx13("button", { className: "btn btn-secondary", onClick: handleClose, children: "Cancel" }),
-      /* @__PURE__ */ jsx13("button", { className: "btn btn-danger", onClick: handleConfirm, children: "Confirm" })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsxs8(
+    Container,
+    {
+      maxWidth: "lg",
+      sx: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        mt: 4
+      },
+      children: [
+        /* @__PURE__ */ jsx12(Box, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ jsx12(
+          Tabs,
+          {
+            value,
+            onChange: handleChange,
+            "aria-label": "basic tabs example",
+            textColor: "inherit",
+            TabIndicatorProps: {
+              style: {
+                backgroundColor: "#580F8B"
+              }
+            },
+            children: props.tabList.map((tab, index) => /* @__PURE__ */ jsx12(Tab, { 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__ */ jsx12(CustomTabPanel, { value, index, children: cloneElement2(tab.children, {
+            visible: value == index
+          }) })
+        )
+      ]
+    }
+  );
 }
 
-// src/CmrComponents/dialogue/EditConfirmation.tsx
+// src/CmrComponents/checkbox/Checkbox.tsx
+import { Checkbox as Checkbox2 } from "@mui/material";
+
+// src/CmrComponents/label/Label.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var CmrLabel = (props) => {
+  const { children, required = false } = props;
+  return /* @__PURE__ */ jsxs9("label", { className: "cmr-label", style: { fontSize: "16px", ...props.style }, children: [
+    children,
+    required && /* @__PURE__ */ jsx13("span", { className: "asterik", children: "*" })
+  ] });
+};
+var Label_default = CmrLabel;
+
+// src/CmrComponents/checkbox/Checkbox.tsx
+import { FormControlLabel as FormControlLabel3 } from "@mui/material";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var CmrCheckbox = (props) => {
+  const { defaultChecked, onChange, children, ...rest } = props;
+  return /* @__PURE__ */ jsx14(
+    FormControlLabel3,
+    {
+      disabled: props.disabled,
+      style: props.style,
+      className: props.className,
+      control: /* @__PURE__ */ jsx14(Checkbox2, { style: props.style, checked: props.checked, defaultChecked, onChange }),
+      label: /* @__PURE__ */ jsx14(Label_default, { children: props.children }),
+      sx: props.sx,
+      labelPlacement: "end"
+    }
+  );
+};
+var Checkbox_default = CmrCheckbox;
+
+// src/CmrComponents/input-number/InputNumber.tsx
+import { InputNumber } from "antd";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var CmrInputNumber = (props) => {
+  const { defaultValue, style, max, min, value, onChange, children, ...rest } = props;
+  return /* @__PURE__ */ jsx15(InputNumber, { defaultValue, max, style, min, value, onChange, ...rest, children });
+};
+var InputNumber_default = CmrInputNumber;
+
+// src/CmrComponents/tooltip/Tooltip.tsx
+import { Tooltip } from "antd";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var CmrTooltip = (props) => {
+  const {
+    arrowPointAtCenter,
+    autoAdjustOverflow,
+    color,
+    defaultVisible,
+    mouseEnterDelay,
+    mouseLeaveDelay,
+    overlayClassName,
+    placement,
+    visible,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx16(
+    Tooltip,
+    {
+      arrowPointAtCenter,
+      autoAdjustOverflow,
+      color,
+      defaultVisible,
+      mouseEnterDelay,
+      mouseLeaveDelay,
+      overlayClassName,
+      placement,
+      visible,
+      ...rest
+    }
+  );
+};
+var Tooltip_default = CmrTooltip;
+
+// src/CmrComponents/select-upload/SelectUpload.tsx
+import React11, { Fragment } from "react";
+
+// src/CmrComponents/upload/Upload.tsx
+import React10, { useState as useState9 } from "react";
+import { Button as Button3 } from "@mui/material";
+
+// src/CmrComponents/upload/UploadWindow.tsx
 import * as React9 from "react";
+import Button2 from "@mui/material/Button";
 import TextField4 from "@mui/material/TextField";
 import Dialog5 from "@mui/material/Dialog";
 import DialogActions5 from "@mui/material/DialogActions";
 import DialogContent5 from "@mui/material/DialogContent";
-import DialogContentText4 from "@mui/material/DialogContentText";
-import DialogTitle5 from "@mui/material/DialogTitle";
-import { InputAdornment } from "@mui/material";
-import { useEffect as useEffect2 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
-function CmrEditConfirmation({
-  name,
-  message,
-  defaultText = "",
-  color,
+import DialogContentText4 from "@mui/material/DialogContentText";
+import DialogTitle5 from "@mui/material/DialogTitle";
+import Typography3 from "@mui/material/Typography";
+import Box2 from "@mui/material/Box";
+import { Alert, Collapse, MenuItem as MenuItem2 } from "@mui/material";
+import { jsx as jsx17, jsxs as jsxs10 } from "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);
-  useEffect2(() => {
-    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__ */ jsxs10(Dialog5, { maxWidth: "xs", fullWidth: true, open, onClose: handleCancel, children: [
-    /* @__PURE__ */ jsx14(DialogTitle5, { children: name ? name : "Confirmation" }),
-    /* @__PURE__ */ jsxs10(DialogContent5, { children: [
-      /* @__PURE__ */ jsx14(DialogContentText4, { alignContent: "center", children: message }),
-      /* @__PURE__ */ jsx14(DialogActions5, { children: /* @__PURE__ */ jsx14(
-        TextField4,
-        {
-          fullWidth: true,
-          variant: "standard",
-          InputProps: {
-            endAdornment: /* @__PURE__ */ jsx14(InputAdornment, { position: "end", sx: { whiteSpace: "nowrap" }, children: suffix })
-          },
-          defaultValue: text,
-          onChange: (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__ */ jsx17("div", { children: /* @__PURE__ */ jsxs10(Dialog5, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ jsx17(DialogTitle5, { children: "File Upload" }),
+    /* @__PURE__ */ jsxs10(DialogContent5, { children: [
+      /* @__PURE__ */ jsx17(DialogContentText4, {}),
+      /* @__PURE__ */ jsxs10(DialogContent5, { dividers: true, children: [
+        /* @__PURE__ */ jsx17(
+          Box2,
+          {
+            width: 500,
+            height: 250,
+            style: {
+              borderStyle: "dashed",
+              borderRadius: "5pt",
+              borderColor: uploadBoxWarning == void 0 ? "lightGray" : "#BA3C3C"
+            },
+            children: /* @__PURE__ */ jsx17(Typography3, { component: "div", style: { height: "100%" }, children: /* @__PURE__ */ jsxs10(
+              Box2,
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%"
+                },
+                onClick: fileInputClick,
+                ref: fileInput,
+                children: [
+                  /* @__PURE__ */ jsxs10(Typography3, { variant: "body1", align: "center", style: { marginTop: "auto" }, children: [
+                    "Drag & Drop or Click to Upload Your File Here ",
+                    /* @__PURE__ */ jsx17("sup", { children: "*" })
+                  ] }),
+                  /* @__PURE__ */ jsx17(Typography3, { 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__ */ jsx17(
+          "input",
+          {
+            type: "file",
+            id: "file-window",
+            multiple: true,
+            accept: fileExtension == void 0 ? "*" : fileExtension,
+            style: { display: "none" },
+            onChange: loadSelectedFiles
+          }
+        ),
+        /* @__PURE__ */ jsxs10(Box2, { component: "form", sx: { "& .MuiTextField-root": { m: 2, width: "25ch", mb: 0 } }, children: [
+          /* @__PURE__ */ jsxs10("div", { children: [
+            template.showFileName && /* @__PURE__ */ jsx17(
+              TextField4,
+              {
+                required: true,
+                style: { marginTop: "30px" },
+                label: `File Alias:`,
+                value: fileAlias,
+                variant: "standard",
+                onChange: changeFileName
+              }
+            ),
+            fileOriginalName != "" && /* @__PURE__ */ jsx17(Label_default, { style: { marginLeft: "16px", fontSize: "9pt", color: "#267833" }, children: fileOriginalName }),
+            template.showDatabase && /* @__PURE__ */ jsx17(
+              TextField4,
+              {
+                select: true,
+                label: "Database:",
+                defaultValue: "s3",
+                helperText: "Upstream Storage Location",
+                variant: "standard",
+                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ jsx17(MenuItem2, { value: option.value, children: option.label }, option.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs10("div", { children: [
+            template.showFileSize && /* @__PURE__ */ jsx17(
+              TextField4,
+              {
+                label: "File Size:",
+                value: fileSize,
+                InputProps: {
+                  readOnly: true
+                },
+                variant: "standard"
+              }
+            ),
+            /* @__PURE__ */ jsx17(Collapse, { in: infoOpen, children: /* @__PURE__ */ jsx17(Alert, { severity: infoStyle, sx: { m: 1 }, children: warningText }) })
+          ] })
+        ] })
+      ] }),
       /* @__PURE__ */ jsxs10(DialogActions5, { children: [
-        cancellable && /* @__PURE__ */ jsx14(CmrButton_default, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: "Cancel" }),
-        /* @__PURE__ */ jsx14(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: "Confirm" })
+        /* @__PURE__ */ jsx17(
+          Button2,
+          {
+            color: "inherit",
+            sx: { color: "#333" },
+            disabled: UpBtnDisabled,
+            onClick: handleClose,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx17(
+          Button2,
+          {
+            variant: "contained",
+            disabled: UpBtnDisabled,
+            onClick: handleConfirm,
+            children: UpBtnText
+          }
+        )
       ] })
     ] })
-  ] });
+  ] }) });
 }
 
-// src/CmrTabs/CmrTabs.tsx
-import * as React10 from "react";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
-import Container from "@mui/material/Container";
-import Typography3 from "@mui/material/Typography";
-import Box3 from "@mui/material/Box";
-import { cloneElement as cloneElement2 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-function CustomTabPanel(props) {
-  const { children, value, index, ...other } = props;
-  return /* @__PURE__ */ jsx15(
-    "div",
-    {
-      role: "tabpanel",
-      hidden: value !== index,
-      id: `simple-tabpanel-${index}`,
-      "aria-labelledby": `simple-tab-${index}`,
-      ...other,
-      children: /* @__PURE__ */ jsx15(Box3, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ jsx15(Typography3, { children }) })
+// src/CmrComponents/upload/Upload.tsx
+import axios from "axios";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var CmrUpload = (props) => {
+  let [open, setOpen] = useState9(false);
+  let [uploading, setUploading] = useState9(false);
+  let [progress, setProgress] = useState9(0);
+  let [uploadedFile, setUploadedFile] = useState9(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;
     }
-  );
-}
-function a11yProps(index) {
-  return {
-    id: `simple-tab-${index}`,
-    "aria-controls": `simple-tabpanel-${index}`
-  };
-}
-function CmrTabs(props) {
-  const [value, setValue] = React10.useState(0);
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-    if (props.onTabSelected)
-      props.onTabSelected(newValue);
-  };
-  return /* @__PURE__ */ jsxs11(
-    Container,
-    {
-      maxWidth: "lg",
-      sx: {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        mt: 4
-      },
-      children: [
-        /* @__PURE__ */ jsx15(Box3, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ jsx15(
-          Tabs,
-          {
-            value,
-            onChange: handleChange,
-            "aria-label": "basic tabs example",
-            textColor: "inherit",
-            TabIndicatorProps: {
-              style: {
-                backgroundColor: "#580F8B"
-              }
-            },
-            children: props.tabList.map((tab, index) => /* @__PURE__ */ jsx15(Tab, { 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__ */ jsx15(CustomTabPanel, { value, index, children: cloneElement2(tab.children, {
-            visible: value == index
-          }) })
-        )
-      ]
+    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;
     }
-  );
-}
-
-// src/CmrComponents/checkbox/Checkbox.tsx
-import { Checkbox as Checkbox2 } from "@mui/material";
-import { FormControlLabel as FormControlLabel3 } from "@mui/material";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var CmrCheckbox = (props) => {
-  const { defaultChecked, onChange, children, ...rest } = props;
-  return /* @__PURE__ */ jsx16(
-    FormControlLabel3,
-    {
-      disabled: props.disabled,
-      style: props.style,
-      className: props.className,
-      control: /* @__PURE__ */ jsx16(Checkbox2, { style: props.style, checked: props.checked, defaultChecked, onChange }),
-      label: /* @__PURE__ */ jsx16(Label_default, { children: props.children }),
-      sx: props.sx,
-      labelPlacement: "end"
+    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 axios.post(payload.destination, payload.lambdaFile, payload.config);
+      status = res.status;
+      if (status === 200) {
+        console.log(res.data);
+        await axios.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();
     }
-  );
-};
-var Checkbox_default = CmrCheckbox;
-
-// src/CmrComponents/input-number/InputNumber.tsx
-import { InputNumber } from "antd";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var CmrInputNumber = (props) => {
-  const { defaultValue, style, max, min, value, onChange, children, ...rest } = props;
-  return /* @__PURE__ */ jsx17(InputNumber, { defaultValue, max, style, min, value, onChange, ...rest, children });
+    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__ */ jsxs11(React10.Fragment, { children: [
+    !uploading ? /* @__PURE__ */ jsxs11(
+      Button3,
+      {
+        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__ */ jsxs11(Button3, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
+      "Uploading ",
+      progress,
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx18(
+      CmrUploadWindow,
+      {
+        open,
+        setOpen,
+        upload,
+        fileExtension: props.fileExtension,
+        template: { showFileName: true, showFileSize: true }
+      }
+    )
+  ] });
 };
-var InputNumber_default = CmrInputNumber;
-
-// src/CmrComponents/tooltip/Tooltip.tsx
-import { Tooltip } from "antd";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var CmrTooltip = (props) => {
-  const {
-    arrowPointAtCenter,
-    autoAdjustOverflow,
-    color,
-    defaultVisible,
-    mouseEnterDelay,
-    mouseLeaveDelay,
-    overlayClassName,
-    placement,
-    visible,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsx18(
-    Tooltip,
-    {
-      arrowPointAtCenter,
-      autoAdjustOverflow,
-      color,
-      defaultVisible,
-      mouseEnterDelay,
-      mouseLeaveDelay,
-      overlayClassName,
-      placement,
-      visible,
-      ...rest
-    }
-  );
+CmrUpload.defaultProps = {
+  changeNameAfterUpload: true
 };
-var Tooltip_default = CmrTooltip;
+var Upload_default = CmrUpload;
 
 // src/CmrComponents/select-upload/SelectUpload.tsx
-import React11, { Fragment } from "react";
 import { Button as Button4, MenuItem as MenuItem3 } from "@mui/material";
 import Select2 from "@mui/material/Select";
 import Dialog6 from "@mui/material/Dialog";
@@ -1118,7 +1120,7 @@ var CMRSelectUpload = (props) => {
         }
       ) }),
       /* @__PURE__ */ jsxs12(Box4, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [
-        /* @__PURE__ */ jsx19(Button4, { fullWidth: true, variant: "outlined", color: "inherit", sx: { marginRight: "8px" }, onClick: handleClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx19(Button4, { fullWidth: true, variant: "outlined", sx: { marginRight: "8px" }, onClick: handleClose, children: "Cancel" }),
         fileIndex !== -1 && !uploading && /* @__PURE__ */ jsx19(Button4, { fullWidth: true, sx: { marginLeft: "8px" }, variant: "contained", onClick: onSet, children: "OK" }),
         fileIndex == -1 && /* @__PURE__ */ jsx19(
           Upload_default,
@@ -1226,5 +1228,6 @@ export {
   CmrSelect_default as CmrSelect,
   CmrTable2 as CmrTable,
   CmrTabs,
-  Tooltip_default as CmrTooltip
+  Tooltip_default as CmrTooltip,
+  CmrUploadWindow
 };