\n * \n *
\n * )}\n * Drag 'n' drop some files here, or click to select files
\n *\n * \n *
\n * )\n * }\n * ```\n *\n * @function useDropzone\n *\n * @param {object} props\n * @param {import(\"./utils\").AcceptProp} [props.accept] Set accepted file types.\n * Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option for more information.\n * Keep in mind that mime type determination is not reliable across platforms. CSV files,\n * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n * Windows. In some cases there might not be a mime type set at all (https://github.com/react-dropzone/react-dropzone/issues/276).\n * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files\n * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window\n * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog\n * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.\n * Note that it also stops tracking the focus state.\n * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop\n * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents\n * @param {number} [props.minSize=0] Minimum file size (in bytes)\n * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)\n * @param {boolean} [props.disabled=false] Enable/disable the dropzone\n * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator\n * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection\n * @param {boolean} [props.useFsAccessApi] Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API\n * to open the file picker instead of using an `` click event.\n * @param {boolean} autoFocus Set to true to auto focus the root element.\n * @param {Function} [props.onFileDialogOpen] Cb for when opening the file dialog\n * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.\n * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs\n * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs\n * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.\n * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n *\n * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.\n * `accept` must be an object with keys as a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) and the value an array of file extensions (optional).\n * If `multiple` is set to false and additional files are dropped,\n * all files besides the first will be rejected.\n * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.\n *\n * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.\n * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.\n *\n * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:\n *\n * ```js\n * function onDrop(acceptedFiles) {\n * const req = request.post('/upload')\n * acceptedFiles.forEach(file => {\n * req.attach(file.name, file)\n * })\n * req.end(callback)\n * }\n * ```\n * @param {dropAcceptedCb} [props.onDropAccepted]\n * @param {dropRejectedCb} [props.onDropRejected]\n * @param {(error: Error) => void} [props.onError]\n *\n * @returns {DropzoneState & DropzoneMethods}\n */\n\nexport function useDropzone() {\n var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),\n accept = _defaultProps$props.accept,\n disabled = _defaultProps$props.disabled,\n getFilesFromEvent = _defaultProps$props.getFilesFromEvent,\n maxSize = _defaultProps$props.maxSize,\n minSize = _defaultProps$props.minSize,\n multiple = _defaultProps$props.multiple,\n maxFiles = _defaultProps$props.maxFiles,\n onDragEnter = _defaultProps$props.onDragEnter,\n onDragLeave = _defaultProps$props.onDragLeave,\n onDragOver = _defaultProps$props.onDragOver,\n onDrop = _defaultProps$props.onDrop,\n onDropAccepted = _defaultProps$props.onDropAccepted,\n onDropRejected = _defaultProps$props.onDropRejected,\n onFileDialogCancel = _defaultProps$props.onFileDialogCancel,\n onFileDialogOpen = _defaultProps$props.onFileDialogOpen,\n useFsAccessApi = _defaultProps$props.useFsAccessApi,\n autoFocus = _defaultProps$props.autoFocus,\n preventDropOnDocument = _defaultProps$props.preventDropOnDocument,\n noClick = _defaultProps$props.noClick,\n noKeyboard = _defaultProps$props.noKeyboard,\n noDrag = _defaultProps$props.noDrag,\n noDragEventsBubbling = _defaultProps$props.noDragEventsBubbling,\n onError = _defaultProps$props.onError,\n validator = _defaultProps$props.validator;\n\n var acceptAttr = useMemo(function () {\n return acceptPropAsAcceptAttr(accept);\n }, [accept]);\n var pickerTypes = useMemo(function () {\n return pickerOptionsFromAccept(accept);\n }, [accept]);\n var onFileDialogOpenCb = useMemo(function () {\n return typeof onFileDialogOpen === \"function\" ? onFileDialogOpen : noop;\n }, [onFileDialogOpen]);\n var onFileDialogCancelCb = useMemo(function () {\n return typeof onFileDialogCancel === \"function\" ? onFileDialogCancel : noop;\n }, [onFileDialogCancel]);\n /**\n * @constant\n * @type {React.MutableRefObjectDrag and drop some files here, or click to select files
\n *\n cloud_upload\n \n
\n );\n}\n\n\nexport default CustomDropzone;\n","import React, { useState, useEffect } from \"react\";\nimport { Link, useNavigate } from \"react-router-dom\";\n// import { connect, useDispatch } from \"react-redux\";\n// import { createStructuredSelector } from \"reselect\";\nimport axios from \"../customAxios.js\";\nimport Cookies from 'js-cookie';\nimport { getImagesUrls } from '../utils/functions';\nimport LoadingComponent from '../components/LoadingComponent';\nimport {\n AppBar,\n Box,\n Button,\n Collapse,\n CircularProgress,\n Container,\n Drawer,\n Grid,\n IconButton,\n Link as MuiLink,\n List,\n ListItem,\n ListItemIcon,\n ListItemText,\n} from \"@mui/material\";\n// import logo from \"../assets/images/logo-go-ex.svg\";\n// import delivery2Icon from \"../assets/icons/delivery2.png\";\n// import uploadOrdersIcon from \"../assets/icons/upload.png\";\n// import warehouseIcon from \"../assets/icons/warehouse.png\";\n// import homeIcon from \"../assets/icons/home.png\";\n// import controlPanelIcon from \"../assets/icons/control-panel.png\";\n\n// const s3logo = `${process.env.REACT_APP_BUCKET_URL}assets/images/logo-go-ex.svg`;\n// const s3delivery2 = `${process.env.REACT_APP_BUCKET_URL}assets/icons/delivery2.png`;\n// const s3uploadOrders = `${process.env.REACT_APP_BUCKET_URL}assets/icons/upload.png`;\n// const s3warehouse = `${process.env.REACT_APP_BUCKET_URL}assets/icons/warehouse.png`;\n// const s3home = `${process.env.REACT_APP_BUCKET_URL}assets/icons/home.png`;\n// const s3controlPanel = `${process.env.REACT_APP_BUCKET_URL}assets/icons/control-panel.png`;\n\n\n//GET URL PRESIGNED OF IMAGES\n//dict with images key routes of the page\nconst imageskeyRoutes = {\n s3logo: 'assets/images/nh.png',\n s3delivery: 'assets/icons/delivery.png',\n s3delivery2: 'assets/icons/delivery2.png',\n s3uploadOrders: 'assets/icons/upload.png',\n s3warehouse: 'assets/icons/warehouse.png',\n s3home: 'assets/icons/home.png',\n s3controlPanel: 'assets/icons/control-panel.png',\n s3dashboard: 'assets/icons/dashboard.png',\n s3deliveryNH: 'assets/icons/delivery_nh.png',\n\n};\n\nconst imageUrls = await getImagesUrls(imageskeyRoutes, \"customLayout\");\n\n// import {\n// updatePendingIncidences,\n// updatePendingCases,\n// } from \"../../stores/functions\";\n// import { headers } from \"../../constants/csrf\";\n// import {\n// isSuperAdmin,\n// isAdmin,\n// isRouter,\n// isSeller,\n// isSellerOperator,\n// } from \"../../constants/user_functions\";\n// import RequestWithdrawalDialog from \"../withdrawalAddresses/RequestWithdrawalDialog\";\n\nfunction CustomLayout(props) {\n // const dispatch = useDispatch();\n const { children } = props;\n const [mobileOpen, setMobileOpen] = useState(false);\n const [usersOpen, setUsersOpen] = useState(false);\n const [controlPanelOpen, setControlPanelOpen] = useState(false);\n const [myWarehouseOpen, setMyWarehouseOpen] = useState(false);\n const [requestsOpen, setRequestsOpen] = useState(false);\n const [configurationsOpen, setConfigurationsOpen] = useState(false);\n const [selectedIndex, setSelectedIndex] = useState(0);\n const [pendingUsers, setPendingUsers] = useState([]);\n const [loadingAddresses, setLoadingAddresses] = useState(false);\n const [withdrawalOpen, setWithdrawalOpen] = useState(false);\n const [user, setUser] = useState(JSON.parse(localStorage.getItem(\"user\")));\n const [allImagesLoaded, setAllImagesLoaded] = useState(false);\n const [timeoutReached, setTimeoutReached] = useState(false);\n let navigate = useNavigate();\n\n //USE EFFECT TO DETECT WHEN ALL IMAGES ARE LOADED\n useEffect(() => {\n const imageElements = Object.keys(imageUrls).map((key) => {\n const image = new Image();\n image.src = imageUrls[key];\n return image;\n });\n\n const checkAllImagesLoaded = () => {\n const allLoaded = imageElements.every((image) => image.complete);\n if (allLoaded) {\n setAllImagesLoaded(true);\n }\n };\n\n imageElements.forEach((image) => {\n image.addEventListener('load', checkAllImagesLoaded);\n });\n\n return () => {\n // Remove event listeners on component unmount\n imageElements.forEach((image) => {\n image.removeEventListener('load', checkAllImagesLoaded);\n });\n };\n }, []);\n\n //USE EFFECT TO DETECT WHEN TIMEOUT IS REACHED, IF IMAGES ARE NOT LOADED\n useEffect(() => {\n let timeoutId;\n\n // Set a timeout to check if images are not loaded within 10000 milliseconds (10 seconds)\n timeoutId = setTimeout(() => {\n // If images are not loaded, set timeoutReached to true\n if (!allImagesLoaded) {\n setTimeoutReached(true);\n }\n }, 5000);\n\n // Cleanup: Clear the timeout on unmount\n return () => {\n clearTimeout(timeoutId);\n };\n }, [allImagesLoaded]);\n\n\n const handleDrawerToggle = () => {\n setMobileOpen(!mobileOpen);\n };\n\n const handleClickUsers = () => {\n setUsersOpen(!usersOpen);\n };\n\n const handleClickRequests = () => {\n setRequestsOpen(!requestsOpen);\n };\n\n const handleClickControlPanel = () => {\n setControlPanelOpen(!controlPanelOpen);\n };\n\n const handleClickMyWarehouse = () => {\n setMyWarehouseOpen(!myWarehouseOpen);\n };\n\n const handleListItemClick = (_event, index) => {\n setSelectedIndex(index);\n };\n\n const getOrders = async () => {\n await axios.get(process.env.REACT_APP_URL + 'all_orders/',\n { withCredentials: true })\n .then((response) => {\n })\n .catch((e) => {\n console.log(\"error: \", e);\n });\n }\n\n useEffect(() => {\n const newUser = JSON.parse(localStorage.getItem(\"user\"))\n setUser(newUser)\n //console.log('User Dash:', newUser);\n }, [])\n\n const isOperator = user.user_type.includes(\"operator\");\n const is_staff = user.is_staff;\n const isSeller = user.user_type.includes(\"seller\");\n // next admin section steps:\n const isAdmin = user.user_type.includes(\"admin\");\n // console.log('isOperator: ',isOperator)\n // console.log('is_staff: ',is_staff)\n // console.log('isSeller: ',isSeller)\n // console.log('idAdmin: ',isAdmin)\n\n\n // const fetchWithdrawalAddresses = async () => {\n\n\n // const fetchPendingUsers = async () => {\n // await axios\n // .get(\"/api/v1/users/pending\", {}, { headers: headers })\n // .then((response) => {\n // setPendingUsers(response.data);\n // })\n // .catch((e) => {\n // flash_alert(\"Error\", \"Hubo un error al obtener los usuarios\", \"danger\");\n // });\n // };\n\n // const fetchPendingIncidences = async () => {\n // await axios\n // .get(\"/api/v1/incidences\", {}, { headers: headers })\n // .then((response) => {\n // dispatch(\n // updatePendingIncidences(\n // response.data.filter(function (incidence) {\n // return (\n // incidence.aasm_state === \"failed\" ||\n // incidence.aasm_state === \"pending\"\n // );\n // })\n // )\n // );\n // })\n // .catch((e) => {\n // console.log(\"error: \", e);\n // });\n // };\n\n // const fetchPendingCases = async () => {\n // await axios\n // .get(\"/api/v1/customer_supports\", {}, { headers: headers })\n // .then((response) => {\n // dispatch(\n // updatePendingCases(\n // response.data.filter(function (item) {\n // return item.aasm_state !== \"completed\";\n // })\n // )\n // );\n // })\n // .catch((e) => {\n // console.log(\"error: \", e);\n // });\n // };\n\n // useEffect(() => {\n // fetchPendingUsers();\n // fetchPendingIncidences();\n // fetchPendingCases();\n // }, []);\n\n function handleCloseSession(e) {\n e.preventDefault();\n axios.post(process.env.REACT_APP_URL + 'logout/', null,\n {\n headers: {\n 'X-CSRFToken': Cookies.get('csrftoken')\n },\n withCredentials: true\n }\n ).then(res => {\n localStorage.clear()\n navigate('/');\n }\n ).catch(err => {\n console.log(err)\n }\n );\n }\n\n\n const drawer = (\n Arrastra o selecciona tu archivo
\n\n
\n );\n\n const drawerWidth = 235;\n\n //if all images are loaded or timeout is reached, render the layout\n if (allImagesLoaded || timeoutReached) {\n return (\n <>\n \n ![\"Logo](\"https://static.wixstatic.com/media/d57788_abb2a20628fb49f892f533e29e46b5cd~mv2.png\")
\n
\n \n \n
\n\n {true && (\n Hola, {user ? user.full_name : \"\"}
\n{user ? user.user_type.join(\" | \") : \"\"}
\n\n \n \n \n
\n )}\n\n \n \n \n handleListItemClick(event, 0)}\n >\n \n 
\n \n {\n //getOrders();\n event.preventDefault();\n handleListItemClick(event, 1);\n navigate('dashboard');\n }}\n >\n \n 
\n \n {\n //getOrders();\n event.preventDefault();\n const index = (isAdmin || isSeller) ? 2 : 1;\n handleListItemClick(event, index);\n navigate('deliveries-resume');\n }}\n >\n \n 
\n \n {\n const index = (isAdmin || isSeller) ? 3 : 2;\n handleListItemClick(event, index);\n handleClickControlPanel();\n }}\n id=\"requests-collapse-button\"\n selected={selectedIndex === ((isAdmin || isSeller) ? 3 : 2)} // Dynamically set selected index\n >\n \n 
\n \n \n \n \n )}\n {/* { (isOperator || isSeller) && ( \n <>\n { \n handleListItemClick(event, 5);\n handleClickMyWarehouse(); \n }}\n id=\"myWarehouse-collapse-button\"\n selected={selectedIndex === 5}\n >\n \n 
\n \n \n \n {myWarehouseOpen ? (\n expand_less\n ) : (\n expand_more\n )}\n \n\n \n \n \n )} */}\n {is_staff && (\n \n {\n event.preventDefault();\n handleListItemClick(event, 14);\n navigate('mailing');\n }}\n >\n handleCloseSession(e)}\n className=\"exit-container\"\n id={\"button-close-session\"}\n >\n exit_to_app{\" \"}\n
\n - \n {/* {isOperator && !isSeller && (\n
\n
\n Mi Bodega
\n- \n { isOperator && (\n <>\n \n
Cerrar sesión
\n \n\n {/* 
*/}\n
\n \n {props.emptyDataText === undefined ? \"No hay datos\" : props.emptyDataText}\n
\n ) : (\n <>\n {\" \"}\n\n {props.emptyDataText === undefined ? \"No hay datos\" : props.emptyDataText}\n
\n ) : (\n <>\n {\" \"}\n\n props.handleClick(event, request)}\n />\n
\n \n
\n ) :\n // column.dbName === \"name\" ? assignment.name :\n column.dbName === \"ideal-stock\" ? \n 
\n
\n \n {assignment.name}\n \n
\n {assignment.ideal_stock}
:\n column.dbName === \"details\" ? \n
\n );\n}\n\nexport default LoadingComponent;\n","import React from \"react\";\nimport axios from \"../customAxios.js\";\nimport { useNavigate } from \"react-router-dom\";\nimport {\n IconButton,\n TableCell,\n TableRow,\n Tooltip,\n Switch,\n} from \"@mui/material\";\n\nimport { deliverySystemTranslate } from \"../utils/functions\";\nimport { mapStatus } from \"../utils/functions\";\nimport Cookies from 'js-cookie';\n\n\n\n\nfunction MailingRow(props) {\n\n const {\n mailing,\n columns,\n color,\n openCollapseTooltip,\n openCollapseIcon,\n fetchMailings,\n } = props;\n\n const navigate = useNavigate();\n\n const handleUpdateEnabled = async () => {\n await axios.put(process.env.REACT_APP_URL + 'mails/update_mailing_enabled/', {\n id: mailing[\"id\"],\n is_active: !mailing[\"is_active\"],\n }, {\n headers: {\n 'X-CSRFToken': Cookies.get('csrftoken')\n },\n withCredentials: true\n })\n .then((response) => {\n fetchMailings();\n })\n .catch((e) => {\n console.log(\"Error al actualizar el estado del mailing\", e);\n });\n };\n\n\n\n return (\n \n \n\n {\n navigate('/home/mailing-config', {\n state:\n {\n mailId: mailing[\"id\"],\n mailStatus: mapStatus(mailing[\"status\"]),\n translatedDeliverySystem: deliverySystemTranslate(mailing[\"delivery_system\"]),\n }\n })\n }}\n >\n {openCollapseIcon}\n \n
\n \n Configurar mail\n
\n \nCarga de Ordenes
\nVolver atrás
\n \nTipo de carga
\nCarga masiva
\n \nCarga tu orden
\n\n {\"Seleccionaste hacer una carga \"}\n {selectedFileType}\n
\n{\"Si no tienes a mano el archivo, puedes \"}
\n \n{\" descargar la plantilla\"}
\n \n\n\n {summary ? ( setInputValue(e.target.value)}\n fullWidth\n variant=\"outlined\"\n />\n
\n\n {summary && \n
\n {summary}
) : (\n <>\nInserte el Código de Barras del paquete recibido
\n\n \n {loading &&
\n \n\n )}\n \n\n {summary && \n
\n \n {!error &&\n <>\n \n \n\n {loading &&
\n }\n \n
\n - \n {Object.entries(selectedProductLocations[orderProduct.product.id].slots).map(([id, slot], index) => {\n const maxQuantity = Math.min(slot.quantity, orderProduct.quantity - selectedProductLocations[orderProduct.product.id].total_assigned + slot.assigned);\n if (slot.quantity > 0) {\n return (\n <>\n
\n \n {barCodes[id]?.[productIndex]?.verified ? (\n \n ) : (\n \n )}\n
\n Preparación de Pedidos
\n¡Órden procesada exitósamente!
\n\n Procesaste la órden con éxito, ahora puedes tomarte un café,\n procesar otra órden, o descargar la etiqueta del envío.\n
\nCarga de Órdenes
\n )}\n { mode === \"product\" && (\nCarga de Productos
\n )}\n¡Carga exitosa!
\n\n Cargaste tu archivo con éxito, ahora puedes tomarte un café,\n continuar gestionando tus envíos, o realizar una nueva carga.\n
\n )}\n { mode === \"product\" && (\n\n Cargaste tu archivo con éxito, ahora puedes tomarte un café,\n continuar gestionando tus productos, o realizar una nueva carga.\n
\n )}\nCarga de Ordenes
\nVolver atrás
\n \nTipo de carga
\nCarga masiva
\n \nCarga manual
\n \nCarga tu orden
\n\n {\"Seleccionaste hacer una carga \"}\n {selectedFileType}\n
\n{\"Si no tienes a mano el archivo, puedes \"}
\n{\" descargar la plantilla\"}
\n \n\n Selecciona el tipo de orden a cargar\n
\n\n {\"No hay bodegas con disponibilidad para los productos seleccionados, por favor \"}\n cambia los productos\n {\" o \"}\n edita las cantidades\n
\nCarga tu archivo
\n\n {\"Seleccionaste hacer una carga \"}\n {selectedFileType}\n {selectedFileType === \"Carga manual\" && (\n <>\n {\" para una orden de \"}\n {selectedOrderType.name}\n \n )}\n \n
\n{\"Si no tienes a mano el archivo, puedes \"}
\n{\" descargar la plantilla\"}
\n \n\n \n \n Actualiza el estado\n \n {\n setSelectedStatus(e.target.value);\n handleUpdateState(e.target.value);\n }}\n IconComponent={() => (\n expand_more\n )}\n >\n {withdrawalStates.map((state, index) => (\n \n {mapStatusWithdrawal(state)}\n \n ))}\n \n \n
\n Tus órdenes {isPickUp? (\"Pick Up\") : (\"Click & Collect\")}
\n\n \n \n \n {\n if (endDate < newValue) {\n let newEndDate = new Date (newValue)\n newEndDate.setDate(newEndDate.getDate() + daysOffset);\n setEndDate(newEndDate);\n }\n setStartDate(newValue);\n }}\n // disabled={ordersFiltered === undefined}\n className=\"mg-r-10\"\n\n />\n \n \n \n {\n if (newValue < startDate) {\n let newStartDate = new Date (newValue)\n newStartDate.setDate(newStartDate.getDate() - daysOffset);\n setStartDate(newStartDate);\n }\n setEndDate(newValue);\n }}\n disabled={startDate === null}\n className=\"mg-r-10 mg-l-10\"\n />\n \n\n {\n setAuxSearcher(e.target.value);\n }}\n className=\"mg-l-10\"\n disabled={false}\n />\n\n\n \n\n {isPickUp && (\n \n \n \n )}\n
\n Tus órdenes Click & Collect
\n//\n// \n// \n// \n// {\n// if (endDate < newValue) {\n// let newEndDate = new Date (newValue)\n// newEndDate.setDate(newEndDate.getDate() + daysOffset);\n// setEndDate(newEndDate);\n// }\n// setStartDate(newValue);\n// setDateRefresh(true);\n// }}\n// disabled={ordersFiltered === undefined}\n// className=\"mg-r-10\"\n\n// />\n// \n// \n// \n// {\n// if (newValue < startDate) {\n// let newStartDate = new Date (newValue)\n// newStartDate.setDate(newStartDate.getDate() - daysOffset);\n// setStartDate(newStartDate);\n// }\n// setEndDate(newValue);\n// setDateRefresh(true);\n \n// }}\n// disabled={startDate === null || ordersFiltered === undefined}\n// className=\"mg-r-10 mg-l-10\"\n// />\n// \n\n// {\n// setIdSearch(e.target.value);\n// }}\n// className=\"mg-l-10\"\n// disabled={ordersFiltered === undefined}\n// />\n\n// \n//
\n// \n\n {/* Parte Superior */}\n \n \n\n \n {/* Información principal y credenciales de Seller */}\n \n \n \n \n {socialReason} \n \n \n \n \n ID \n \n \n {sellerId} \n \n \n User \n \n \n {sellerUser} \n \n \n Password \n \n \n {sellerPass} \n \n \n RUT \n \n \n {rut} \n \n \n Plan \n \n \n {plan} \n \n \n Creación \n \n \n {createdAt} \n \n \n KAM \n \n \n {kam} \n \n \n \n \n \n\n {/* Información detallada del seller */}\n \n \n \n Bodegas: {totalWarehouses} \n \n \n \n \n
\n \n \n \n \n \n \n \n \n\n \n {/* Información de Operarios */}\n \n \n \n \n Operarios: {totalOperators} \n \n \n \n \n \n
\n \n \n \n\n \n \n \n \n \n \n \n\n \n\n
\n \n );\n\n\n}\n\n\n\n\nexport default CompanyDetail;\n\n","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getFormControlLabelUtilityClasses(slot) {\n return generateUtilityClass('MuiFormControlLabel', slot);\n}\nconst formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);\nexport default formControlLabelClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"checked\", \"className\", \"componentsProps\", \"control\", \"disabled\", \"disableTypography\", \"inputRef\", \"label\", \"labelPlacement\", \"name\", \"onChange\", \"required\", \"slotProps\", \"value\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { refType } from '@mui/utils';\nimport { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';\nimport { useFormControl } from '../FormControl';\nimport Stack from '../Stack';\nimport Typography from '../Typography';\nimport capitalize from '../utils/capitalize';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';\nimport formControlState from '../FormControl/formControlState';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n disabled,\n labelPlacement,\n error,\n required\n } = ownerState;\n const slots = {\n root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error', required && 'required'],\n label: ['label', disabled && 'disabled'],\n asterisk: ['asterisk', error && 'error']\n };\n return composeClasses(slots, getFormControlLabelUtilityClasses, classes);\n};\nexport const FormControlLabelRoot = styled('label', {\n name: 'MuiFormControlLabel',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [{\n [`& .${formControlLabelClasses.label}`]: styles.label\n }, styles.root, styles[`labelPlacement${capitalize(ownerState.labelPlacement)}`]];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n display: 'inline-flex',\n alignItems: 'center',\n cursor: 'pointer',\n // For correct alignment with the text.\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'transparent',\n marginLeft: -11,\n marginRight: 16,\n // used for row presentation of radio/checkbox\n [`&.${formControlLabelClasses.disabled}`]: {\n cursor: 'default'\n }\n}, ownerState.labelPlacement === 'start' && {\n flexDirection: 'row-reverse',\n marginLeft: 16,\n // used for row presentation of radio/checkbox\n marginRight: -11\n}, ownerState.labelPlacement === 'top' && {\n flexDirection: 'column-reverse',\n marginLeft: 16\n}, ownerState.labelPlacement === 'bottom' && {\n flexDirection: 'column',\n marginLeft: 16\n}, {\n [`& .${formControlLabelClasses.label}`]: {\n [`&.${formControlLabelClasses.disabled}`]: {\n color: (theme.vars || theme).palette.text.disabled\n }\n }\n}));\nconst AsteriskComponent = styled('span', {\n name: 'MuiFormControlLabel',\n slot: 'Asterisk',\n overridesResolver: (props, styles) => styles.asterisk\n})(({\n theme\n}) => ({\n [`&.${formControlLabelClasses.error}`]: {\n color: (theme.vars || theme).palette.error.main\n }\n}));\n\n/**\n * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.\n * Use this component if you want to display an extra label.\n */\nconst FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {\n var _ref, _slotProps$typography;\n const props = useThemeProps({\n props: inProps,\n name: 'MuiFormControlLabel'\n });\n const {\n className,\n componentsProps = {},\n control,\n disabled: disabledProp,\n disableTypography,\n label: labelProp,\n labelPlacement = 'end',\n required: requiredProp,\n slotProps = {}\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const muiFormControl = useFormControl();\n const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;\n const required = requiredProp != null ? requiredProp : control.props.required;\n const controlProps = {\n disabled,\n required\n };\n ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {\n if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {\n controlProps[key] = props[key];\n }\n });\n const fcs = formControlState({\n props,\n muiFormControl,\n states: ['error']\n });\n const ownerState = _extends({}, props, {\n disabled,\n labelPlacement,\n required,\n error: fcs.error\n });\n const classes = useUtilityClasses(ownerState);\n const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;\n let label = labelProp;\n if (label != null && label.type !== Typography && !disableTypography) {\n label = /*#__PURE__*/_jsx(Typography, _extends({\n component: \"span\"\n }, typographySlotProps, {\n className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),\n children: label\n }));\n }\n return /*#__PURE__*/_jsxs(FormControlLabelRoot, _extends({\n className: clsx(classes.root, className),\n ownerState: ownerState,\n ref: ref\n }, other, {\n children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {\n direction: \"row\",\n alignItems: \"center\",\n children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {\n ownerState: ownerState,\n \"aria-hidden\": true,\n className: classes.asterisk,\n children: [\"\\u2009\", '*']\n })]\n }) : label]\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? FormControlLabel.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * If `true`, the component appears selected.\n */\n checked: PropTypes.bool,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The props used for each slot inside.\n * @default {}\n */\n componentsProps: PropTypes.shape({\n typography: PropTypes.object\n }),\n /**\n * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.\n */\n control: PropTypes.element.isRequired,\n /**\n * If `true`, the control is disabled.\n */\n disabled: PropTypes.bool,\n /**\n * If `true`, the label is rendered as it is passed without an additional typography node.\n */\n disableTypography: PropTypes.bool,\n /**\n * Pass a ref to the `input` element.\n */\n inputRef: refType,\n /**\n * A text or an element to be used in an enclosing label element.\n */\n label: PropTypes.node,\n /**\n * The position of the label.\n * @default 'end'\n */\n labelPlacement: PropTypes.oneOf(['bottom', 'end', 'start', 'top']),\n /**\n * @ignore\n */\n name: PropTypes.string,\n /**\n * Callback fired when the state is changed.\n *\n * @param {React.SyntheticEvent} event The event source of the callback.\n * You can pull out the new checked state by accessing `event.target.checked` (boolean).\n */\n onChange: PropTypes.func,\n /**\n * If `true`, the label will indicate that the `input` is required.\n */\n required: PropTypes.bool,\n /**\n * The props used for each slot inside.\n * @default {}\n */\n slotProps: PropTypes.shape({\n typography: PropTypes.object\n }),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * The value of the component.\n */\n value: PropTypes.any\n} : void 0;\nexport default FormControlLabel;","\nimport React, { useState, useEffect, useRef } from \"react\";\nimport axios from \"../customAxios.js\";\nimport {\n FormControl,\n Grid,\n InputLabel,\n MenuItem,\n OutlinedInput,\n Select,\n Typography,\n CircularProgress,\n Box,\n Button,\n Switch,\n FormControlLabel,\n LinearProgress,\n Tooltip\n} from \"@mui/material\";\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport es from \"date-fns/locale/es\";\nimport { dateToDatabase, mapStatus } from \"../utils/functions\";\n\n\nfunction Dashboard(props) {\n\n //values to control pagination of the component table\n const [page, setPage] = useState(localStorage.getItem(\"deliveriesFilter\") ? JSON.parse(localStorage.getItem(\"deliveriesFilter\")).page : 0);\n const [rowsPerPage, setRowsPerPage] = useState(localStorage.getItem(\"deliveriesFilter\") ? JSON.parse(localStorage.getItem(\"deliveriesFilter\")).rowsPerPage : 20);\n //data that will be set on every page change and filter set\n const [loadingPageData, setLoadingPageData] = useState(true);\n\n // const [loading, setLoading] = useState(false);\n const daysOffset = props.daysOffset;\n //filter values of the table\n const [startDate, setStartDate] = useState(localStorage.getItem(\"deliveriesFilter\") ? new Date(JSON.parse(localStorage.getItem(\"deliveriesFilter\")).startDate) : new Date(new Date().setDate(new Date().getDate() - daysOffset)));\n const [endDate, setEndDate] = useState(localStorage.getItem(\"deliveriesFilter\") ? new Date(JSON.parse(localStorage.getItem(\"deliveriesFilter\")).endDate) : new Date());\n const [statusFilter, setStatusFilter] = useState(localStorage.getItem(\"deliveriesFilter\") ? JSON.parse(localStorage.getItem(\"deliveriesFilter\")).statusFilter : \"all\");\n const [search, setSearch] = useState(localStorage.getItem(\"deliveriesFilter\") ? JSON.parse(localStorage.getItem(\"deliveriesFilter\")).search : \"\");\n const [companyFilter, setCompanyFilter] = useState(localStorage.getItem(\"deliveriesFilter\") ? JSON.parse(localStorage.getItem(\"deliveriesFilter\")).companyFilter : \"all\");\n //aux values for delay on text search fields\n const [auxSearcher, setAuxSearcher] = useState(localStorage.getItem(\"deliveriesFilter\") ? JSON.parse(localStorage.getItem(\"deliveriesFilter\")).search : \"\");\n const [deliveryStatus, setDeliveryStatus] = useState([]);\n // const [dateRefresh, setDateRefresh] = useState(false);\n const [companies, setCompanies] = useState([]);\n const [errorOnRetrieveData, setErrorOnRetrieveData] = useState();\n const [isInitialRender, setIsInitialRender] = useState(true);\n //useState to catch when general data is already fetched\n const [generalParamsFetched, setGeneralParamsFetched] = useState(false);\n //useState to count the number of deliveries filtered by backend\n const [deliveriesCount, setDeliveriesCount] = useState(0);\n // status counters:\n const [counterLabels, setCounterLabels] = useState();\n const [counters, setCounters] = useState({});\n const [courierCount, setCourierCount] = useState([]);\n const [withoutTrackingNumber, setWithoutTrackingNumber] = useState(0);\n // timer\n const [currentTime, setCurrentTime] = useState({ date: '', time: '' });\n //toggle fetch delivery\n const [checked, setChecked] = useState(false); // State to track if the switch is toggled\n const [progress, setProgress] = useState(0); // State for progress bar\n const fetchIntervalRef = useRef(null); // Reference to store the interval for fetchDeliveries\n const progressIntervalRef = useRef(null); // Reference to store the interval for the progress bar\n const autoReloadTimer = 60000\n const progressTimer = 59\n // get admin \n const [user, setUser] = useState(JSON.parse(localStorage.getItem(\"user\")));\n const isAdmin = user.user_type.includes(\"admin\");\n const isSeller = user.user_type.includes(\"seller\");\n\n\n //define url to call on backend depending on user type\n let user_type_url_path = \"api/dashboard/\";\n\n useEffect(() => {\n //if localStorage \"deliveriesFilter\" does not exist, set page to 0\n if (!localStorage.getItem(\"deliveriesFilter\")) {\n setPage(0);\n }\n //if is on useEffect not on initial render, set page 0\n if (isInitialRender) {\n setIsInitialRender(false);\n } else {\n setPage(0);\n }\n }, [startDate, endDate, statusFilter, search, rowsPerPage]);\n\n useEffect(() => {\n fetchDeliveries();\n //save on localStorage the filter and page values of Deliveries\n localStorage.setItem(\"deliveriesFilter\", JSON.stringify({ startDate, endDate, statusFilter, search, page, rowsPerPage, companyFilter }));\n }, [startDate, endDate, statusFilter, search, rowsPerPage, page, companyFilter]);\n\n //useEffect to catch auxSearcher changes, and triger a function every 2 seconds that dont change\n useEffect(() => {\n // Delayed search function\n const delayedSearch = (value) => {\n // Your search logic goes here\n setSearch(value);\n };\n if (!loadingPageData) {\n setLoadingPageData(true);\n }\n // Timer variable for setTimeout\n let timer;\n\n // Set a delay of 2 seconds before executing the search\n const delay = 1500;\n\n // Clear the previous timer when auxSearcher changes\n clearTimeout(timer);\n\n // Set a new timer for delayed search\n timer = setTimeout(() => {\n delayedSearch(auxSearcher);\n }, delay);\n\n // Clean up the timer on component unmount or when auxSearcher changes\n return () => {\n clearTimeout(timer);\n };\n }, [auxSearcher]);\n\n useEffect(() => {\n fetchDeliveryFilters();\n }, []);\n\n useEffect(() => {\n }, [deliveryStatus, companies]); // This will log deliveryStatus every time it updates\n\n useEffect(() => {\n }, [courierCount]); // This will log deliveryStatus every time it updates\n\n // toggle: Clear intervals when the component unmounts to avoid memory leaks\n useEffect(() => {\n return () => stopTimers(); // Clean up on unmount\n }, []);\n\n // Update time every second\n useEffect(() => {\n const timerId = setInterval(updateTime, 1000);\n return () => clearInterval(timerId); // Clean up the timer\n }, []);\n\n useEffect(() => {\n const newUser = JSON.parse(localStorage.getItem(\"user\"))\n setUser(newUser)\n }, [])\n\n //function to fetch the page data depending on filters, and pagination params\n async function fetchDeliveries() {\n\n if (!loadingPageData) {\n setLoadingPageData(true);\n }\n\n const search_params_fetch_orders = {\n start_date: dateToDatabase(startDate),\n end_date: dateToDatabase(endDate),\n company: companyFilter,\n search: search,\n delivery_status: null, // avoid status filter in dashboard\n page: page,\n rowsPerPage: rowsPerPage\n }\n\n await axios\n .get(process.env.REACT_APP_URL + user_type_url_path,\n { params: search_params_fetch_orders },\n { withCredentials: true })\n .then(({ data }) => {\n //console.log('data es fetchDeliveries: ', data)\n setDeliveriesCount(data.total_deliveries_dashboard);\n setCounters(data.status_count_dashboard);\n setCourierCount(data.courier_count_dashboard)\n setWithoutTrackingNumber(data.without_tracking_number_dashboard)\n setErrorOnRetrieveData();\n })\n .catch(({ response }) => {\n console.log(\"error: \", response);\n setErrorOnRetrieveData('Ocurrió un error al obtener los deliveries');\n })\n .finally(() => {\n // setLoading(false);\n setLoadingPageData(false);\n });\n };\n\n //function to fetch all general parameters that do not depends on the page and rowsPerPage\n async function fetchDeliveryFilters() {\n await axios\n .get(process.env.REACT_APP_URL + 'delivery_params/' + user_type_url_path,\n { withCredentials: true })\n .then(({ data }) => {\n //console.log('PARAMS DELIVERY: ',data)\n setDeliveryStatus(data.delivery_statuses);\n setCounterLabels(data.delivery_statuses);\n // setCompanies(data.companies)\n isAdmin ? setCompanies(data.companies) : setCompanies([])\n setErrorOnRetrieveData();\n setGeneralParamsFetched(true);\n })\n .catch(({ response }) => {\n console.log(\"error: \", response);\n setErrorOnRetrieveData('Ocurrió un error al obtener los contadores y opciones de filtro');\n })\n .finally(() => {\n });\n }\n\n // Function to update the current time in Chile timezone\n const updateTime = () => {\n const now = new Date();\n const chileTime = new Date(now.toLocaleString('en-US', { timeZone: 'America/Santiago' }));\n\n // Format date (dd-mm-yyyy)\n const formattedDate = chileTime.toLocaleDateString('en-GB', {\n day: '2-digit',\n month: '2-digit',\n year: 'numeric',\n });\n\n // Format time (hh:mm:ss)\n const formattedTime = chileTime.toLocaleTimeString('en-GB', {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n });\n\n setCurrentTime({ date: formattedDate, time: formattedTime });\n };\n\n // Function to handle toggle\n const handleToggle = () => {\n setChecked(!checked);\n\n if (!checked) {\n // If turning ON, start the fetch and progress intervals\n fetchDeliveries(); // Trigger fetchDeliveries immediately\n startFetchTimer();\n startProgressBar();\n } else {\n // If turning OFF, clear both intervals and reset progress\n stopTimers();\n }\n };\n\n // Function to start fetch timer every 60 seconds\n const startFetchTimer = () => {\n fetchIntervalRef.current = setInterval(() => {\n fetchDeliveries(); // Call fetchDeliveries every 60 seconds\n }, autoReloadTimer); // 60 seconds\n };\n\n // Function to stop both fetch and progress timers\n const stopTimers = () => {\n clearInterval(fetchIntervalRef.current); // Clear fetch timer\n clearInterval(progressIntervalRef.current); // Clear progress timer\n setProgress(0); // Reset progress\n };\n\n // Function to start the progress bar (progresses over 60 seconds)\n const startProgressBar = () => {\n setProgress(progressTimer); // Start the progress at 60 seconds\n progressIntervalRef.current = setInterval(() => {\n setProgress((oldProgress) => {\n if (oldProgress <= 0) {\n return progressTimer; // Reset to 60 seconds after reaching 0\n }\n return oldProgress - 1; // Decrease by 1 second every interval\n });\n }, 1000); // Update progress every second\n };\n\n\n\n if (generalParamsFetched) {\n return (\n\n\n \n \n
\n\n Dashboard
\n\n \n \n {/* Progress Bar */}\n {checked && (\n \n }\n />\n \n
\n \n
\n )}\n {checked ? 'Auto Reload' : 'Auto Reload'}\n Mis deliveries
\nAcciones
\n\n
\n \n
\n \n \n \n \n {\n if (endDate < newValue) {\n let newEndDate = new Date(newValue)\n newEndDate.setDate(newEndDate.getDate() + daysOffset);\n setEndDate(newEndDate);\n }\n setStartDate(newValue);\n }}\n // disabled={deliveriesFilter === undefined}\n className=\"mg-r-10\"\n\n />\n \n \n \n {\n if (newValue < startDate) {\n let newStartDate = new Date(newValue)\n newStartDate.setDate(newStartDate.getDate() - daysOffset);\n setStartDate(newStartDate);\n }\n setEndDate(newValue);\n // setDateRefresh(true);\n\n }}\n // disabled={startDate === null || deliveriesFilter === undefined}\n disabled={startDate === null}\n className=\"mg-r-10 mg-l-10\"\n />\n \n \n \n \n Estado Delivery\n \n {\n setStatusFilter(e.target.value);\n }}\n input={ \n \n\n {isAdmin && (\n \n \n \n Empresa\n \n {\n setCompanyFilter(e.target.value);\n }}\n input={ \n \n )}\n\n\n\n {\n setAuxSearcher(e.target.value);\n }}\n className=\"mg-l-10\"\n disabled={false}\n />\n \n
\n \n
\n );\n } else {\n return(\n \n
\n \n 
\n
\n \n ![\"Logo](\"https://static.wixstatic.com/media/d57788_b9b38e53004a474b81cad819df75dc60~mv2.png\")
\n
\n \n \n 
\n
\n \n
\n \n
\n \n
\n \n
\n Bienvenid@ a Ninja Hubs!
\n \nConfiguración mailing
\n\n Notificaciones al cliente final\n
\nConfiguración mailing
\n\n Notificaciones al cliente final\n
\n\n
\n Estado: {mailStatus}
\nTipo de orden: {translatedDeliverySystem}
\n\n {\n Object.entries(customizationOptions).map(([key, value]) => (\n appendAttributeToSubject(key)}\n >\n {value}\n \n ))\n }\n
\n \n {\n Object.entries(customizationOptions).map(([key, value]) => (\n appendAttributeToBody(key)}\n >\n {value}\n \n ))\n }\n
\n Borrar email
\n \nMis Sellers
\n{filteredDeliveriesCount} Sellers
\n\n \n \n {\n setAuxSearcher(e.target.value);\n }}\n className=\"mg-l-10\"\n disabled={false}\n />\n \n
\n \n\n {/* Parte Superior */}\n \n \n\n \n {/* Información de Productos */}\n \n \n \n \n {order.seller.company.social_reason} \n \n \n \n\n\n {/* Información del Destinatario */}\n \n \n \n Información de Entrega \n \n \n Id Seller \n \n \n {order.seller.id} \n \n \n Id Ninjahubs \n \n \n {order.id} \n \n \n Tipo de Orden \n \n \n {get_order_type_label(order.type)} \n \n {(order.type === \"delivery\" || order.type === \"delivery_fulfillment\" || order.type === \"pick_up\" || order.type === \"pick_up_fulfillment\" || order.type === \"delivery_return\") && (\n <>\n \n Tipo de Entrega \n \n \n {order.delivery?.shipping_method ? get_order_shipping_method_label(order.delivery?.shipping_method) : \"-\"} \n \n {(isAdmin || isSeller) && (\n <>\n \n Bodega \n \n \n \n {order.warehouse ? order.warehouse.name : \"Sin bodega asociada\"}\n \n \n \n )}\n\n \n Dirección de Entrega \n \n \n {order.delivery?.shipping_address ? get_full_address(order.delivery?.shipping_address) : \"-\"} \n \n \n Notas \n \n \n {order.notes? order.notes : \"Sin notas\"} \n \n \n Proveedor de la Entrega \n \n \n {order.delivery ? get_order_provider(order.delivery) : \"-\"} \n \n \n Número de Trackeo \n \n \n {order.delivery?.courier_tracking_number ?? \"-\"} \n \n \n URL tracking \n \n \n \n {order.delivery?.url_tracking ? (\n {\n event.preventDefault();\n window.open(order.delivery.url_tracking, '_blank', 'noopener,noreferrer'); // Opens the URL in a new tab\n }}\n variant=\"contained\"\n sx={{\n backgroundColor: '#25D366', // WhatsApp green color\n color: '#FFFFFF', // White text\n textTransform: 'none', // Keeps the text as \"Tracking pedido\" without uppercase\n padding: '8px 16px', // Adjust padding for button style\n borderRadius: '4px', // Rounds the corners slightly\n boxShadow: 'none', // Removes extra shadow for a cleaner look\n '&:hover': {\n backgroundColor: '#1ebe5b', // Slightly darker green on hover\n boxShadow: 'none', // Prevents hover shadow\n },\n }}\n >\n Tracking Courier\n \n ) : (\n \"-\"\n )}\n \n \n \n Bultos \n \n \n {order.delivery?.packages && order.delivery.packages.trim() !== \"\" ? order.delivery.packages : \"1\"}\n \n \n\n \n Seguimiento \n \n \n {\n event.preventDefault();\n window.open(`/track-order/${orderId}`, '_blank', 'noopener,noreferrer'); // Opens the tracking page in a new tab\n }}\n variant=\"contained\"\n sx={{\n backgroundColor: '#25D366', // WhatsApp green color\n color: '#FFFFFF', // White text\n textTransform: 'none', // Keeps the text as \"Consultas\" without uppercase\n padding: '8px 16px', // Adjust padding for button style\n borderRadius: '4px', // Rounds the corners slightly\n boxShadow: 'none', // Removes extra shadow for a cleaner look\n '&:hover': {\n backgroundColor: '#1ebe5b', // Slightly darker green on hover\n boxShadow: 'none', // Prevents hover shadow\n },\n }}\n >\n Tracking pedido\n \n \n\n \n )\n }\n {order.type === \"click_collect\" && (\n <>\n \n Punto de Retiro \n \n \n {order.warehouse?.name ?? \"-\"} \n \n \n Dirección de Retiro \n \n \n {order.warehouse?.address ? get_full_address(order.warehouse?.address) : \"-\"} \n \n \n )\n }\n \n setOpenEditOrderInfo(true)}\n disabled={!canEditOrderInfo}\n className={!canEditOrderInfo ? 'button-disabled' : ''}>\n Editar\n \n \n \n \n \n \n\n \n {/* Información de Entrega */}\n \n \n \n \n Destinatario \n \n \n Nombre \n \n \n {order.recipient} \n \n \n Mail \n \n \n {order.contact_email} \n \n \n Teléfono \n \n \n {order.contact_phone} \n \n \n \n \n \n \n {isAdmin && (\n \n \n \n Estado entrega \n \n \n \n \n )}\n {/** ACA EDITOR */}\n {/* Timeline */}\n \n \n {filteredStatuses.map(status => (\n \n \n \n \n {strDateFormatWithTime(new Date(status.date))} \n {status.friendlyStatus} {status.friendlySubStatus == '' ? '' : ':'} {status.friendlySubStatus} \n {status.details} \n\n {/* Thumbnails Section */}\n \n {status.image_urls && status.image_urls.length > 0 && (\n status.image_urls.map((url, index) => (\n handleImageClick(url)} // Call the function with the clicked URL\n />\n ))\n )}\n\n \n \n \n ))}\n\n\n \n \n \n \n \n\n \n\n
\n\n {/* Diálogo para edición info orden*/}\n \n\n {/* Diálogo para edición info destinatario*/}\n \n\n {/* ADMIN: Diálogo para edición estado delivery*/}\n\n \n \n {order.reference_id} \n
\n\n {/* Etiquetas de Tipo y Estado */}\n \n
\n\n \n
\n \n \n
\n\n - \n {order.products.map(item => (\n
Órdenes
\n\n \n \n \n {/* {window.innerWidth > 768 ? ( */}\n {\n if (endDate < newValue) {\n let newEndDate = new Date (newValue)\n newEndDate.setDate(newEndDate.getDate() + daysOffset);\n setEndDate(newEndDate);\n }\n setStartDate(newValue);\n }}\n // disabled={ordersFiltered === undefined}\n className=\"mg-r-10\"\n\n />\n \n \n \n {\n if (newValue < startDate) {\n let newStartDate = new Date (newValue)\n newStartDate.setDate(newStartDate.getDate() - daysOffset);\n setStartDate(newStartDate);\n }\n setEndDate(newValue);\n // setDateRefresh(true);\n \n }}\n // disabled={startDate === null || ordersFiltered === undefined}\n disabled={startDate === null}\n className=\"mg-r-10 mg-l-10\"\n />\n \n \n \n \n Tipo de servicio\n \n {\n setServiceFilter(e.target.value);\n }}\n input={ \n \n\n {\n setAuxSearcher(e.target.value);\n }}\n className=\"mg-l-10\"\n disabled={false}\n />\n\n \n
\n \n
\n\n Preparación de Pedidos
\n\n \n \n \n {\n if (endDate < newValue) {\n let newEndDate = new Date (newValue)\n newEndDate.setDate(newEndDate.getDate() + daysOffset);\n setEndDate(newEndDate);\n }\n setStartDate(newValue);\n }}\n className=\"mg-r-10\"\n\n />\n \n \n \n {\n if (newValue < startDate) {\n let newStartDate = new Date (newValue)\n newStartDate.setDate(newStartDate.getDate() - daysOffset);\n setStartDate(newStartDate);\n }\n setEndDate(newValue);\n }}\n disabled={startDate === null}\n className=\"mg-r-10 mg-l-10\"\n />\n \n \n \n \n Tipo de servicio\n \n {\n setServiceFilter(e.target.value);\n }}\n input={ \n \n\n {\n setAuxSearcher(e.target.value);\n }}\n className=\"mg-l-10\"\n disabled={false}\n />\n\n \n
\n Preparación de Pedidos
\n//\n// \n// \n// \n// {\n// if (endDate < newValue) {\n// let newEndDate = new Date (newValue)\n// newEndDate.setDate(newEndDate.getDate() + daysOffset);\n// setEndDate(newEndDate);\n// }\n// setStartDate(newValue);\n// setDateRefresh(true);\n// }}\n// disabled={ordersFiltered === undefined}\n// className=\"mg-r-10\"\n\n// />\n// \n// \n// \n// {\n// if (newValue < startDate) {\n// let newStartDate = new Date (newValue)\n// newStartDate.setDate(newStartDate.getDate() - daysOffset);\n// setStartDate(newStartDate);\n// }\n// setEndDate(newValue);\n// setDateRefresh(true);\n \n// }}\n// disabled={startDate === null || ordersFiltered === undefined}\n// className=\"mg-r-10 mg-l-10\"\n// />\n// \n// \n// \n// \n// Tipo de servicio\n// \n// {\n// setServiceFilter(e.target.value);\n// setSearch(\"\");\n// }}\n// input={ \n// \n\n// {\n// setIdSearch(e.target.value);\n// }}\n// className=\"mg-l-10\"\n// disabled={ordersFiltered === undefined}\n// />\n\n// \n//
\n// \n\n {/* Parte Superior */}\n \n \n\n \n {/* Información de Productos */}\n \n \n \n \n \n {\n order.products.map(item => (\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n Destinatario \n {order.recipient} \n \n \n Dirección \n {order.delivery?.shipping_address ? get_full_address(order.delivery?.shipping_address) : \"-\"} \n \n \n Notas \n {order.notes ? order.notes : \"-\"} \n \n \n Mail contacto \n {order.contact_email} \n \n \n Teléfono contacto \n {order.contact_phone} \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n
\n\n {/* Etiquetas de Tipo y Estado */}\n \n {order.seller.company.social_reason} \n {order.reference_id} \n
\n \n \n
\n \n {\"Fecha de Ingreso: \" + strDateFormat(new Date(order.created_at))} \n
\n\n \n Productos \n
\n \n \n
\n \n \n \n
\n Detalle producto
\n\n 
\n
\n \n
\n \n {data.product.name}\n
\n \n \n
\n \n \n
\n \n CANAL\n
\n \n PRECIO\n
\n \n UBICACIÓN\n
\n \n STOCK (IDEAL)\n
\n \n STOCK (REAL)\n
\n \n CANAL\n
\n \n {warehouse.name}\n
\n \n {warehouse.total_ideal_stock}\n
\n \n {warehouse.total_real_stock}\n
\n \n 
\n
\n Inventario
\n\n \n {\n setAuxSearcher(e.target.value);\n }}\n className=\"mg-l-10\"\n />\n \n \n \n \n
\n \n { loading? (
Hubo un error al cargar el inventario
) : \nInventario
\n//\n// \n// {\n// setNameOrSkuSearch(e.target.value);\n// }}\n// className=\"mg-l-10\"\n// />\n// \n//
\n// \n// { loading? (
Hubo un error al cargar el inventario
) : \n//\n
\n );\n\n}\n\nexport default TrackOrder;\n","import React, { useState, useEffect } from \"react\";\nimport { Link, useNavigate } from \"react-router-dom\";\nimport axios from \"../customAxios.js\";\nimport * as XLSX from 'xlsx';\nimport {\n Autocomplete,\n Button,\n CircularProgress,\n FormControl,\n Grid,\n Paper,\n Chip,\n Stack,\n Alert,\n TextField,\n Snackbar\n} from \"@mui/material\";\nimport InputMask from \"react-input-mask\";\nimport { getImagesUrls } from '../utils/functions';\nimport * as EmailValidator from \"email-validator\";\nimport { regionsAndCommunes } from \"../helpers/ChileanAddressesData\";\n// import massiveUploadIcon from \"../assets/icons/massive-upload.png\";\n// import manualUploadIcon from \"../assets/icons/manual-upload.png\";\nimport ProductList from \"../components/ProductList\";\nimport Cookies from 'js-cookie';\nimport { orderTypeEnum, shippingMethodEnum } from \"../helpers/enums\";\nimport LoadingComponent from \"../components/LoadingComponent\";\nimport AlertBox from \"../components/AlertBox\";\nimport CustomDropzone from \"../components/CustomDropzone\";\nimport { set } from \"date-fns\";\n\n//GET URL PRESIGNED OF IMAGES\n//dict with images key routes of the page\nconst imageskeyRoutes = {\n s3massiveUploadIcon: 'assets/icons/massive-upload.png',\n s3manualUploadIcon: 'assets/icons/manual-upload.png'\n};\n\nconst imageUrls = await getImagesUrls(imageskeyRoutes, \"uploadRequests\");\n\nfunction UploadProducts() {\n\n const [user, setUser] = useState(JSON.parse(localStorage.getItem(\"user\")));\n const [selectedFileType, setSelectedFileType] = useState(\"\");\n const [files, setFiles] = useState([]);\n const [openFileErrorAlert, setOpenFileErrorAlert] = useState(false);\n const [validFile, setValidFile] = useState(false);\n const [loading, setLoading] = useState(false);\n const [file, setFile] = useState(null);\n\n\n // Manual form\n const [sku, setSku] = useState(\"\");\n const [name, setName] = useState(\"\");\n const [price, setPrice] = useState(null);\n const [dimensions, setDimensions] = useState(\"\");\n const [weight, setWeight] = useState(null);\n const [barcode, setBarcode] = useState(\"\");\n const [submitPressed, setSubmitPressed] = useState(false);\n const [openSuccessAlert, setOpenSuccessAlert] = useState(false);\n const [openErrorAlert, setOpenErrorAlert] = useState(false);\n const [messageAlert, setMessageAlert] = useState(\"\");\n\n //render at same time images and content\n const [allImagesLoaded, setAllImagesLoaded] = useState(false);\n const [timeoutReached, setTimeoutReached] = useState(false);\n\n //get user type\n const isOperator = user.user_type.includes(\"operator\");\n const isSeller = user.user_type.includes(\"seller\");\n\n let navigate = useNavigate();\n\n //USE EFFECT TO DETECT WHEN ALL IMAGES ARE LOADED\n useEffect(() => {\n const imageElements = Object.keys(imageUrls).map((key) => {\n const image = new Image();\n image.src = imageUrls[key];\n return image;\n });\n\n const checkAllImagesLoaded = () => {\n const allLoaded = imageElements.every((image) => image.complete);\n if (allLoaded) {\n setAllImagesLoaded(true);\n }\n };\n\n imageElements.forEach((image) => {\n image.addEventListener('load', checkAllImagesLoaded);\n });\n\n return () => {\n // Remove event listeners on component unmount\n imageElements.forEach((image) => {\n image.removeEventListener('load', checkAllImagesLoaded);\n });\n };\n }, []);\n\n //USE EFFECT TO DETECT WHEN TIMEOUT IS REACHED, IF IMAGES ARE NOT LOADED\n useEffect(() => {\n let timeoutId;\n \n // Set a timeout to check if images are not loaded within 10000 milliseconds (10 seconds)\n timeoutId = setTimeout(() => {\n // If images are not loaded, set timeoutReached to true\n if (!allImagesLoaded) {\n setTimeoutReached(true);\n }\n }, 5000);\n \n // Cleanup: Clear the timeout on unmount\n return () => {\n clearTimeout(timeoutId);\n };\n }, [allImagesLoaded]);\n\n\n useEffect(() => {\n const newUser = JSON.parse(localStorage.getItem(\"user\"))\n setUser(newUser)\n }, []);\n\n const regionsOptions = regionsAndCommunes.map(region => ({\n value: region.value,\n label: region.label\n }));\n\n const orderTypeOptions = orderTypeEnum.map(orderType => ({\n value: orderType.value,\n label: orderType.label,\n }));\n\n //FILE VALIDATION FUNCTIONS\n\n //this consider the first file on the files list, for now we are only allowing one file to be uploaded\n useEffect(() => {\n setFile(files[0]);\n }, [files]);\n\n function uploadProductsExcel() {\n const selectedFile = file;\n var formData = new FormData();\n formData.append(\"excel_file\", selectedFile);\n axios.post(process.env.REACT_APP_URL + 'products/upload_excel_products_frontend/', formData,\n {headers: {\n 'X-CSRFToken': Cookies.get('csrftoken')\n ,\n 'Content-Type': 'multipart/form-data'\n },\n withCredentials: true})\n .then(() => {\n setMessageAlert(\"Archivo cargado con éxito\");\n setOpenSuccessAlert(true);\n setFiles([]);\n setFile(null);\n }\n ).catch((e) => {\n let errorMessage = \"Error al cargar el archivo\";\n if (e.response && e.response.data && e.response.data.error) {\n errorMessage += \": \" + e.response.data.error;\n }\n setMessageAlert(errorMessage);\n setOpenErrorAlert(true);\n setFiles([]);\n setFile(null);\n }).finally(() => {\n //remove key items from localStorage which key start with \"inventory-seller-\"\n for (let key in localStorage) {\n if (key.startsWith(\"inventory-seller-\")) {\n localStorage.removeItem(key);\n }\n } \n });\n};\n \n useEffect(() => {\n if (file) {\n const reader = new FileReader();\n reader.onload = (e) => {\n const data = e.target.result;\n const workbook = XLSX.read(data, {type: 'binary'});\n const sheetName = workbook.SheetNames[0];\n const worksheet = workbook.Sheets[sheetName];\n const json = XLSX.utils.sheet_to_json(worksheet, { defval: \"\" });\n\n //get the two return values of function validateExcel\n const [isValid, message] = validateExcel(json);\n setMessageAlert(message);\n \n if (isValid) {\n console.log('File is valid');\n setValidFile(true);\n } else {\n console.error('File is invalid');\n setOpenFileErrorAlert(true);\n setValidFile(false);\n setFiles([]);\n }\n };\n reader.readAsBinaryString(file);\n }\n }, [file]); // Dependency array to re-run the effect when `file` changes\n\n\n //functions to validate excel file to load massive orders\n const validateExcel = (data) => {\n const requiredHeaders = [\n \"Name\", \"Price\", \"SKU\", \"Dimensions\",\n \"Weight\", \"Barcode\"\n ];\n \n if (data.length === 0 || !data[0]) {\n return [false, \"Archivo vacío, no se entregaron productos a cargar.\"]; \n }\n \n const headers = Object.keys(data[0]);\n const hasRequiredHeaders = requiredHeaders.every(header => headers.includes(header));\n if (!hasRequiredHeaders) {\n console.log(\"Missing at least one required header\");\n return [false, \"Missing at least one required header\"];\n }\n \n for (const row of data) {\n\n //if price exists, validate it is a number\n if (row[\"Price\"] && isNaN(row[\"Price\"])) {\n console.log(\"Attributo Price inválido\");\n return [false, `Attributo Price inválido en fila ${data.indexOf(row) + 2}`];\n }\n\n //if weight exists, validate it is a number\n if (row[\"Weight\"] && isNaN(row[\"Weight\"])) {\n console.log(\"Attributo Weight inválido\");\n return [false, `Attributo Weight inválido en fila ${data.indexOf(row) + 2}`];\n }\n\n // Validate Name exists\n if (!row[\"Name\"]) {\n console.log(\"Attributo Name inválido\");\n return [false, `Attributo Name inválido en fila ${data.indexOf(row) + 2}`];\n }\n // Vaalidate if SKU exists\n if (!row[\"SKU\"]) {\n console.log(\"Attributo SKU inválido\");\n return [false, `Attributo SKU inválido en fila ${data.indexOf(row) + 2}`];\n }\n\n // Validate if Barcode exists\n if (!row[\"Barcode\"]) {\n console.log(\"Attributo Barcode inválido\");\n return [false, `Attributo Barcode inválido en fila ${data.indexOf(row) + 2}`];\n }\n }\n return [true, \"File is valid\"];\n };\n\n const serializeProducts = (productsData) => {\n const serializedProducts = productsData.map(product => ({\n sku: product.sku,\n quantity: product.quantity,\n }));\n return serializedProducts;\n };\n\n async function handleSubmit() {\n setSubmitPressed(true);\n if (\n selectedFileType === \"Carga manual\" &&\n sku !== \"\" &&\n name !== \"\" &&\n barcode !== \"\"\n ) {\n setLoading(true);\n axios.post(process.env.REACT_APP_URL + 'products/create_product/',\n {\n sku: sku,\n name: name,\n dimensions: dimensions,\n price: price,\n weight: weight,\n barcode: barcode\n }, \n {headers: {\n 'X-CSRFToken': Cookies.get('csrftoken')\n },\n withCredentials: true}).then(res => {\n console.log(res.data)\n setLoading(false);\n setMessageAlert(\"Producto creado con éxito\");\n //delete all seller\n\n setOpenSuccessAlert(true);\n clearData();\n navigate('/home/upload-success-product');\n }).catch(err => {\n console.log(err)\n setLoading(false);\n setMessageAlert(\"Error al crear el producto\");\n setOpenErrorAlert(true);\n }\n ).finally(() => {\n //remove key items from localStorage which key start with \"inventory-seller-\"\n for (let key in localStorage) {\n if (key.startsWith(\"inventory-seller-\")) {\n localStorage.removeItem(key);\n }\n }\n });\n }\n }\n\n async function handleFileSubmit() {\n uploadProductsExcel();\n }\n\n const handleDelete = (path) => {\n setFiles(files.filter((file) => file.path !== path));\n };\n\n const clearData = () => {\n setFiles([]);\n setSku(\"\");\n setName(\"\");\n setDimensions(\"\");\n setWeight(null);\n setBarcode(\"\");\n setPrice(null);\n setSubmitPressed(false);\n };\n\n const handleFileDrop = (acceptedFiles) => {\n // Manejar los archivos aquí\n console.log(\"Archivos subidos:\", acceptedFiles);\n acceptedFiles.forEach((file) => {\n setFiles((prevFiles) => {\n return [...prevFiles, file];\n });\n }\n );\n };\n\n if (allImagesLoaded || timeoutReached) {\n return (\n \n\n
\n\n \n \n
\n\n \n \n\n
\n\n {/* Modal for Detailed Image View */}\n \n\n\n \n \n {/* Información de Productos */}\n \n \n \n\n\n {/* Información del Destinatario */}\n \n \n \n \n \n Tipo de Orden \n \n \n {get_order_type_label(order.type)} \n \n {(order.type === \"delivery\" || order.type === \"delivery_fulfillment\" || order.type === \"pick_up\" || order.type === \"pick_up_fulfillment\" || order.type === \"delivery_return\") && (\n <>\n \n Destinatario \n \n \n {order.recipient} \n \n \n Tipo de Entrega \n \n \n {order.delivery?.shipping_method ? get_order_shipping_method_label(order.delivery?.shipping_method) : \"-\"} \n \n \n Dirección de Entrega \n \n \n {order.delivery?.shipping_address ? get_full_address(order.delivery?.shipping_address) : \"-\"} \n \n \n Proveedor de la Entrega \n \n \n {order.delivery ? get_order_provider(order.delivery) : \"-\"} \n \n {/* \n Número de Trackeo \n \n \n \n copyToClipboard(order.delivery?.courier_tracking_number ?? \"-\")}>\n \n {order.delivery?.courier_tracking_number ?? \"-\"}\n \n \n \n */}\n {/* \n Tracking courier \n \n \n {urlTracking ? (\n \n Tracking courier\n \n ) : (\n Sin URL por el momento \n )}\n */}\n\n \n Bultos \n \n \n {order.delivery?.packages && order.delivery.packages.trim() !== \"\" ? order.delivery.packages : \"1\"}\n \n \n \n URL tracking \n \n \n \n {order.delivery?.url_tracking ? (\n {\n event.preventDefault();\n window.open(order.delivery.url_tracking, '_blank', 'noopener,noreferrer'); // Opens the URL in a new tab\n }}\n variant=\"contained\"\n sx={{\n backgroundColor: '#25D366', // WhatsApp green color\n color: '#FFFFFF', // White text\n textTransform: 'none', // Keeps the text as \"Tracking pedido\" without uppercase\n padding: '8px 16px', // Adjust padding for button style\n borderRadius: '4px', // Rounds the corners slightly\n boxShadow: 'none', // Removes extra shadow for a cleaner look\n '&:hover': {\n backgroundColor: '#1ebe5b', // Slightly darker green on hover\n boxShadow: 'none', // Prevents hover shadow\n },\n }}\n >\n Tracking Courier\n \n ) : (\n \"-\"\n )}\n \n \n \n Consultar por Whatsapp \n \n \n\n \n Consultar por whatsapp\n \n\n \n \n )\n }\n {order.type === \"click_collect\" && (\n <>\n \n Punto de Retiro \n \n \n {order.warehouse?.name ?? \"-\"} \n \n \n Dirección de Retiro \n \n \n {order.warehouse?.address ? get_full_address(order.warehouse?.address) : \"-\"} \n \n \n )\n }\n \n\n \n \n \n \n \n\n
\n Orden #{orderId} de {order.seller.company.social_reason}
\n {/* form antigui */}\n\n \n {/* Información de Productos */}\n \n \n \n\n\n {/* Información del Destinatario */}\n \n \n \n \n \n {filteredStatuses.map(status => (\n \n \n \n \n {strDateFormatWithTime(new Date(status.date))} \n {status.friendlyStatus} {status.friendlySubStatus == '' ? '' : ':'} {status.friendlySubStatus} \n {status.details} \n\n {/* Thumbnails Section */}\n \n {status.image_urls && status.image_urls.length > 0 && (\n status.image_urls.map((url, index) => (\n handleImageClick(url)} // Call the function with the clicked URL\n />\n ))\n )}\n \n \n \n ))}\n \n \n\n \n \n \n \n \n\n
\n Historial del pedido
\n {/* form antigui */}\nCarga de Productos
\nVolver atrás
\n \nSelecciona el tipo de carga
\nCarga masiva
\n \nCarga manual
\n \nCarga tu producto
\n\n {\"Seleccionaste hacer una carga \"}\n {selectedFileType}\n
\n{\"Si no tienes a mano el archivo, puedes \"}
\n{\" descargar la plantilla\"}
\n \nInventario
\n\n \n {\n setAuxSearcher(e.target.value);\n }}\n className=\"mg-l-10\"\n />\n \n\n \n slot ? slot.name: \"\"}\n renderInput={(params) => \n \n {/* \n \n */}\n \n option ? option.label: \"\"}\n renderInput={(params) => \n \n
\n \n\n \n {\n setNewSlot(e.target.value);\n }}\n className=\"mg-l-10\"\n />\n \n \n \n \n
\n \n
Inventario
\n//\n// \n// {\n// setSkuSearch(e.target.value);\n// }}\n// className=\"mg-l-10\"\n// />\n// \n\n// \n// slot ? slot.name: \"\"}\n// renderInput={(params) => \n// \n// {/* \n// \n// */}\n// \n// option ? option.label: \"\"}\n// renderInput={(params) => \n// \n//
\n// \n\n// \n// {\n// setNewSlot(e.target.value);\n// }}\n// className=\"mg-l-10\"\n// />\n// \n// \n// \n// \n//
\n// \n// { loading? (
Hubo un error al cargar el inventario
) : \n//Retiros
\n, and elements get a default\n // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,\n // yet they are still part of the regular tab order; in FF, they get a default\n // `tabIndex` of 0; since Chrome still puts those elements in the regular tab\n // order, consider their tab index to be 0.\n if (node.contentEditable === 'true' || (node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {\n return 0;\n }\n return node.tabIndex;\n}\nfunction isNonTabbableRadio(node) {\n if (node.tagName !== 'INPUT' || node.type !== 'radio') {\n return false;\n }\n if (!node.name) {\n return false;\n }\n const getRadio = selector => node.ownerDocument.querySelector(`input[type=\"radio\"]${selector}`);\n let roving = getRadio(`[name=\"${node.name}\"]:checked`);\n if (!roving) {\n roving = getRadio(`[name=\"${node.name}\"]`);\n }\n return roving !== node;\n}\nfunction isNodeMatchingSelectorFocusable(node) {\n if (node.disabled || node.tagName === 'INPUT' && node.type === 'hidden' || isNonTabbableRadio(node)) {\n return false;\n }\n return true;\n}\nfunction defaultGetTabbable(root) {\n const regularTabNodes = [];\n const orderedTabNodes = [];\n Array.from(root.querySelectorAll(candidatesSelector)).forEach((node, i) => {\n const nodeTabIndex = getTabIndex(node);\n if (nodeTabIndex === -1 || !isNodeMatchingSelectorFocusable(node)) {\n return;\n }\n if (nodeTabIndex === 0) {\n regularTabNodes.push(node);\n } else {\n orderedTabNodes.push({\n documentOrder: i,\n tabIndex: nodeTabIndex,\n node: node\n });\n }\n });\n return orderedTabNodes.sort((a, b) => a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex).map(a => a.node).concat(regularTabNodes);\n}\nfunction defaultIsEnabled() {\n return true;\n}\n\n/**\n * Utility component that locks focus inside the component.\n *\n * Demos:\n *\n * - [Focus Trap](https://mui.com/base-ui/react-focus-trap/)\n *\n * API:\n *\n * - [FocusTrap API](https://mui.com/base-ui/react-focus-trap/components-api/#focus-trap)\n */\nfunction FocusTrap(props) {\n const {\n children,\n disableAutoFocus = false,\n disableEnforceFocus = false,\n disableRestoreFocus = false,\n getTabbable = defaultGetTabbable,\n isEnabled = defaultIsEnabled,\n open\n } = props;\n const ignoreNextEnforceFocus = React.useRef(false);\n const sentinelStart = React.useRef(null);\n const sentinelEnd = React.useRef(null);\n const nodeToRestore = React.useRef(null);\n const reactFocusEventTarget = React.useRef(null);\n // This variable is useful when disableAutoFocus is true.\n // It waits for the active element to move into the component to activate.\n const activated = React.useRef(false);\n const rootRef = React.useRef(null);\n // @ts-expect-error TODO upstream fix\n const handleRef = useForkRef(children.ref, rootRef);\n const lastKeydown = React.useRef(null);\n React.useEffect(() => {\n // We might render an empty child.\n if (!open || !rootRef.current) {\n return;\n }\n activated.current = !disableAutoFocus;\n }, [disableAutoFocus, open]);\n React.useEffect(() => {\n // We might render an empty child.\n if (!open || !rootRef.current) {\n return;\n }\n const doc = ownerDocument(rootRef.current);\n if (!rootRef.current.contains(doc.activeElement)) {\n if (!rootRef.current.hasAttribute('tabIndex')) {\n if (process.env.NODE_ENV !== 'production') {\n console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to \"-1\".'].join('\\n'));\n }\n rootRef.current.setAttribute('tabIndex', '-1');\n }\n if (activated.current) {\n rootRef.current.focus();\n }\n }\n return () => {\n // restoreLastFocus()\n if (!disableRestoreFocus) {\n // In IE11 it is possible for document.activeElement to be null resulting\n // in nodeToRestore.current being null.\n // Not all elements in IE11 have a focus method.\n // Once IE11 support is dropped the focus() call can be unconditional.\n if (nodeToRestore.current && nodeToRestore.current.focus) {\n ignoreNextEnforceFocus.current = true;\n nodeToRestore.current.focus();\n }\n nodeToRestore.current = null;\n }\n };\n // Missing `disableRestoreFocus` which is fine.\n // We don't support changing that prop on an open FocusTrap\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n React.useEffect(() => {\n // We might render an empty child.\n if (!open || !rootRef.current) {\n return;\n }\n const doc = ownerDocument(rootRef.current);\n const loopFocus = nativeEvent => {\n lastKeydown.current = nativeEvent;\n if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {\n return;\n }\n\n // Make sure the next tab starts from the right place.\n // doc.activeElement refers to the origin.\n if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {\n // We need to ignore the next contain as\n // it will try to move the focus back to the rootRef element.\n ignoreNextEnforceFocus.current = true;\n if (sentinelEnd.current) {\n sentinelEnd.current.focus();\n }\n }\n };\n const contain = () => {\n const rootElement = rootRef.current;\n\n // Cleanup functions are executed lazily in React 17.\n // Contain can be called between the component being unmounted and its cleanup function being run.\n if (rootElement === null) {\n return;\n }\n if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {\n ignoreNextEnforceFocus.current = false;\n return;\n }\n\n // The focus is already inside\n if (rootElement.contains(doc.activeElement)) {\n return;\n }\n\n // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)\n if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {\n return;\n }\n\n // if the focus event is not coming from inside the children's react tree, reset the refs\n if (doc.activeElement !== reactFocusEventTarget.current) {\n reactFocusEventTarget.current = null;\n } else if (reactFocusEventTarget.current !== null) {\n return;\n }\n if (!activated.current) {\n return;\n }\n let tabbable = [];\n if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {\n tabbable = getTabbable(rootRef.current);\n }\n\n // one of the sentinel nodes was focused, so move the focus\n // to the first/last tabbable element inside the focus trap\n if (tabbable.length > 0) {\n var _lastKeydown$current, _lastKeydown$current2;\n const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');\n const focusNext = tabbable[0];\n const focusPrevious = tabbable[tabbable.length - 1];\n if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {\n if (isShiftTab) {\n focusPrevious.focus();\n } else {\n focusNext.focus();\n }\n }\n // no tabbable elements in the trap focus or the focus was outside of the focus trap\n } else {\n rootElement.focus();\n }\n };\n doc.addEventListener('focusin', contain);\n doc.addEventListener('keydown', loopFocus, true);\n\n // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area.\n // e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561.\n // Instead, we can look if the active element was restored on the BODY element.\n //\n // The whatwg spec defines how the browser should behave but does not explicitly mention any events:\n // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.\n const interval = setInterval(() => {\n if (doc.activeElement && doc.activeElement.tagName === 'BODY') {\n contain();\n }\n }, 50);\n return () => {\n clearInterval(interval);\n doc.removeEventListener('focusin', contain);\n doc.removeEventListener('keydown', loopFocus, true);\n };\n }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);\n const onFocus = event => {\n if (nodeToRestore.current === null) {\n nodeToRestore.current = event.relatedTarget;\n }\n activated.current = true;\n reactFocusEventTarget.current = event.target;\n const childrenPropsHandler = children.props.onFocus;\n if (childrenPropsHandler) {\n childrenPropsHandler(event);\n }\n };\n const handleFocusSentinel = event => {\n if (nodeToRestore.current === null) {\n nodeToRestore.current = event.relatedTarget;\n }\n activated.current = true;\n };\n return /*#__PURE__*/_jsxs(React.Fragment, {\n children: [/*#__PURE__*/_jsx(\"div\", {\n tabIndex: open ? 0 : -1,\n onFocus: handleFocusSentinel,\n ref: sentinelStart,\n \"data-testid\": \"sentinelStart\"\n }), /*#__PURE__*/React.cloneElement(children, {\n ref: handleRef,\n onFocus\n }), /*#__PURE__*/_jsx(\"div\", {\n tabIndex: open ? 0 : -1,\n onFocus: handleFocusSentinel,\n ref: sentinelEnd,\n \"data-testid\": \"sentinelEnd\"\n })]\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? FocusTrap.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit TypeScript types and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * A single child content element.\n */\n children: elementAcceptingRef,\n /**\n * If `true`, the focus trap will not automatically shift focus to itself when it opens, and\n * replace it to the last focused element when it closes.\n * This also works correctly with any focus trap children that have the `disableAutoFocus` prop.\n *\n * Generally this should never be set to `true` as it makes the focus trap less\n * accessible to assistive technologies, like screen readers.\n * @default false\n */\n disableAutoFocus: PropTypes.bool,\n /**\n * If `true`, the focus trap will not prevent focus from leaving the focus trap while open.\n *\n * Generally this should never be set to `true` as it makes the focus trap less\n * accessible to assistive technologies, like screen readers.\n * @default false\n */\n disableEnforceFocus: PropTypes.bool,\n /**\n * If `true`, the focus trap will not restore focus to previously focused element once\n * focus trap is hidden or unmounted.\n * @default false\n */\n disableRestoreFocus: PropTypes.bool,\n /**\n * Returns an array of ordered tabbable nodes (i.e. in tab order) within the root.\n * For instance, you can provide the \"tabbable\" npm dependency.\n * @param {HTMLElement} root\n */\n getTabbable: PropTypes.func,\n /**\n * This prop extends the `open` prop.\n * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.\n * This prop should be memoized.\n * It can be used to support multiple focus trap mounted at the same time.\n * @default function defaultIsEnabled(): boolean {\n * return true;\n * }\n */\n isEnabled: PropTypes.func,\n /**\n * If `true`, focus is locked.\n */\n open: PropTypes.bool.isRequired\n} : void 0;\nif (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n FocusTrap['propTypes' + ''] = exactProp(FocusTrap.propTypes);\n}\nexport { FocusTrap };","'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef } from '@mui/utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction getContainer(container) {\n return typeof container === 'function' ? container() : container;\n}\n\n/**\n * Portals provide a first-class way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n *\n * Demos:\n *\n * - [Portal](https://mui.com/base-ui/react-portal/)\n *\n * API:\n *\n * - [Portal API](https://mui.com/base-ui/react-portal/components-api/#portal)\n */\nconst Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {\n const {\n children,\n container,\n disablePortal = false\n } = props;\n const [mountNode, setMountNode] = React.useState(null);\n // @ts-expect-error TODO upstream fix\n const handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);\n useEnhancedEffect(() => {\n if (!disablePortal) {\n setMountNode(getContainer(container) || document.body);\n }\n }, [container, disablePortal]);\n useEnhancedEffect(() => {\n if (mountNode && !disablePortal) {\n setRef(forwardedRef, mountNode);\n return () => {\n setRef(forwardedRef, null);\n };\n }\n return undefined;\n }, [forwardedRef, mountNode, disablePortal]);\n if (disablePortal) {\n if ( /*#__PURE__*/React.isValidElement(children)) {\n const newProps = {\n ref: handleRef\n };\n return /*#__PURE__*/React.cloneElement(children, newProps);\n }\n return /*#__PURE__*/_jsx(React.Fragment, {\n children: children\n });\n }\n return /*#__PURE__*/_jsx(React.Fragment, {\n children: mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? Portal.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit TypeScript types and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The children to render into the `container`.\n */\n children: PropTypes.node,\n /**\n * An HTML element or function that returns one.\n * The `container` will have the portal children appended to it.\n *\n * By default, it uses the body of the top-level document object,\n * so it's simply `document.body` most of the time.\n */\n container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),\n /**\n * The `children` will be under the DOM hierarchy of the parent component.\n * @default false\n */\n disablePortal: PropTypes.bool\n} : void 0;\nif (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n Portal['propTypes' + ''] = exactProp(Portal.propTypes);\n}\nexport { Portal };","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport { isHostComponent } from './isHostComponent';\n\n/**\n * Type of the ownerState based on the type of an element it applies to.\n * This resolves to the provided OwnerState for React components and `undefined` for host components.\n * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.\n */\n\n/**\n * Appends the ownerState object to the props, merging with the existing one if necessary.\n *\n * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node or undefined, `ownerState` is not applied.\n * @param otherProps Props of the element.\n * @param ownerState\n */\nexport function appendOwnerState(elementType, otherProps, ownerState) {\n if (elementType === undefined || isHostComponent(elementType)) {\n return otherProps;\n }\n return _extends({}, otherProps, {\n ownerState: _extends({}, otherProps.ownerState, ownerState)\n });\n}","/**\n * Extracts event handlers from a given object.\n * A prop is considered an event handler if it is a function and its name starts with `on`.\n *\n * @param object An object to extract event handlers from.\n * @param excludeKeys An array of keys to exclude from the returned object.\n */\nexport function extractEventHandlers(object, excludeKeys = []) {\n if (object === undefined) {\n return {};\n }\n const result = {};\n Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {\n result[prop] = object[prop];\n });\n return result;\n}","/**\n * Determines if a given element is a DOM element name (i.e. not a React component).\n */\nexport function isHostComponent(element) {\n return typeof element === 'string';\n}","/**\n * If `componentProps` is a function, calls it with the provided `ownerState`.\n * Otherwise, just returns `componentProps`.\n */\nexport function resolveComponentProps(componentProps, ownerState, slotState) {\n if (typeof componentProps === 'function') {\n return componentProps(ownerState, slotState);\n }\n return componentProps;\n}","/**\n * Removes event handlers from the given object.\n * A field is considered an event handler if it is a function with a name beginning with `on`.\n *\n * @param object Object to remove event handlers from.\n * @returns Object with event handlers removed.\n */\nexport function omitEventHandlers(object) {\n if (object === undefined) {\n return {};\n }\n const result = {};\n Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {\n result[prop] = object[prop];\n });\n return result;\n}","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"elementType\", \"externalSlotProps\", \"ownerState\", \"skipResolvingSlotProps\"];\nimport { unstable_useForkRef as useForkRef } from '@mui/utils';\nimport { appendOwnerState } from './appendOwnerState';\nimport { mergeSlotProps } from './mergeSlotProps';\nimport { resolveComponentProps } from './resolveComponentProps';\n/**\n * @ignore - do not document.\n * Builds the props to be passed into the slot of an unstyled component.\n * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.\n * If the slot component is not a host component, it also merges in the `ownerState`.\n *\n * @param parameters.getSlotProps - A function that returns the props to be passed to the slot component.\n */\nexport function useSlotProps(parameters) {\n var _parameters$additiona;\n const {\n elementType,\n externalSlotProps,\n ownerState,\n skipResolvingSlotProps = false\n } = parameters,\n rest = _objectWithoutPropertiesLoose(parameters, _excluded);\n const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);\n const {\n props: mergedProps,\n internalRef\n } = mergeSlotProps(_extends({}, rest, {\n externalSlotProps: resolvedComponentsProps\n }));\n const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);\n const props = appendOwnerState(elementType, _extends({}, mergedProps, {\n ref\n }), ownerState);\n return props;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport clsx from 'clsx';\nimport { extractEventHandlers } from './extractEventHandlers';\nimport { omitEventHandlers } from './omitEventHandlers';\n/**\n * Merges the slot component internal props (usually coming from a hook)\n * with the externally provided ones.\n *\n * The merge order is (the latter overrides the former):\n * 1. The internal props (specified as a getter function to work with get*Props hook result)\n * 2. Additional props (specified internally on a Base UI component)\n * 3. External props specified on the owner component. These should only be used on a root slot.\n * 4. External props specified in the `slotProps.*` prop.\n * 5. The `className` prop - combined from all the above.\n * @param parameters\n * @returns\n */\nexport function mergeSlotProps(parameters) {\n const {\n getSlotProps,\n additionalProps,\n externalSlotProps,\n externalForwardedProps,\n className\n } = parameters;\n if (!getSlotProps) {\n // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,\n // so we can simply merge all the props without having to worry about extracting event handlers.\n const joinedClasses = clsx(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);\n const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);\n const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);\n if (joinedClasses.length > 0) {\n props.className = joinedClasses;\n }\n if (Object.keys(mergedStyle).length > 0) {\n props.style = mergedStyle;\n }\n return {\n props,\n internalRef: undefined\n };\n }\n\n // In this case, getSlotProps is responsible for calling the external event handlers.\n // We don't need to include them in the merged props because of this.\n\n const eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));\n const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);\n const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);\n const internalSlotProps = getSlotProps(eventHandlers);\n\n // The order of classes is important here.\n // Emotion (that we use in libraries consuming Base UI) depends on this order\n // to properly override style. It requires the most important classes to be last\n // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.\n const joinedClasses = clsx(internalSlotProps == null ? void 0 : internalSlotProps.className, additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);\n const mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);\n const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);\n if (joinedClasses.length > 0) {\n props.className = joinedClasses;\n }\n if (Object.keys(mergedStyle).length > 0) {\n props.style = mergedStyle;\n }\n return {\n props,\n internalRef: internalSlotProps.ref\n };\n}","\"use strict\";\n\"use client\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _createSvgIcon = _interopRequireDefault(require(\"./utils/createSvgIcon\"));\nvar _jsxRuntime = require(\"react/jsx-runtime\");\nvar _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)(\"path\", {\n d: \"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4 6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\"\n}), 'FileCopy');\nexports.default = _default;","\"use strict\";\n'use client';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function () {\n return _utils.createSvgIcon;\n }\n});\nvar _utils = require(\"@mui/material/utils\");","let warnedOnce = false;\nconst warn = () => {\n if (!warnedOnce) {\n console.warn(['MUI: The AdapterDateFns class was moved from `@mui/lab` to `@mui/x-date-pickers`', '', \"You should use `import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'`\", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\\n'));\n warnedOnce = true;\n }\n};\n\n/**\n * @deprecated The AdapterDateFns class was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.\n */\nexport default class AdapterDateFns {\n constructor() {\n warn();\n }\n}","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport * as React from 'react';\nlet warnedOnce = false;\nconst warn = () => {\n if (!warnedOnce) {\n console.warn(['MUI: The DatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`.', '', \"You should use `import { DatePicker } from '@mui/x-date-pickers'`\", \"or `import { DatePicker } from '@mui/x-date-pickers/DatePicker'`\", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\\n'));\n warnedOnce = true;\n }\n};\n/**\n * @ignore - do not document.\n */\nconst DatePicker = /*#__PURE__*/React.forwardRef(function DeprecatedDatePicker() {\n warn();\n return null;\n});\nexport default DatePicker;","import * as React from 'react';\nlet warnedOnce = false;\nconst warn = () => {\n if (!warnedOnce) {\n console.warn(['MUI: The LocalizationProvider component was moved from `@mui/lab` to `@mui/x-date-pickers`.', '', \"You should use `import { LocalizationProvider } from '@mui/x-date-pickers'`\", \"or `import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'`\", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\\n'));\n warnedOnce = true;\n }\n};\n/**\n * @deprecated The LocalizationProvider component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.\n * @ignore - do not document.\n */\nconst LocalizationProvider = /*#__PURE__*/React.forwardRef(function DeprecatedLocalizationProvider() {\n warn();\n return null;\n});\nexport default LocalizationProvider;","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport * as React from 'react';\nlet warnedOnce = false;\nconst warn = () => {\n if (!warnedOnce) {\n console.warn(['MUI: The MobileDatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`.', '', \"You should use `import { MobileDatePicker } from '@mui/x-date-pickers'`\", \"or `import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'`\", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\\n'));\n warnedOnce = true;\n }\n};\n/**\n * @deprecated The MobileDatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.\n * @ignore - do not document.\n */\nconst MobileDatePicker = /*#__PURE__*/React.forwardRef(function DeprecatedMobileDatePicker(props, ref) {\n warn();\n return null;\n});\nexport default MobileDatePicker;","import generateUtilityClass from '@mui/material/generateUtilityClass';\nimport generateUtilityClasses from '@mui/material/generateUtilityClasses';\nexport function getTimelineUtilityClass(slot) {\n return generateUtilityClass('MuiTimeline', slot);\n}\nconst timelineClasses = generateUtilityClasses('MuiTimeline', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse']);\nexport default timelineClasses;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"position\", \"className\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport { styled, useThemeProps } from '@mui/material/styles';\nimport TimelineContext from './TimelineContext';\nimport { getTimelineUtilityClass } from './timelineClasses';\nimport convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n position,\n classes\n } = ownerState;\n const slots = {\n root: ['root', position && convertTimelinePositionToClass(position)]\n };\n return composeClasses(slots, getTimelineUtilityClass, classes);\n};\nconst TimelineRoot = styled('ul', {\n name: 'MuiTimeline',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.position && styles[convertTimelinePositionToClass(ownerState.position)]];\n }\n})({\n display: 'flex',\n flexDirection: 'column',\n padding: '6px 16px',\n flexGrow: 1\n});\n\n/**\n *\n * Demos:\n *\n * - [Timeline](https://mui.com/material-ui/react-timeline/)\n *\n * API:\n *\n * - [Timeline API](https://mui.com/material-ui/api/timeline/)\n */\nconst Timeline = /*#__PURE__*/React.forwardRef(function Timeline(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTimeline'\n });\n const {\n position = 'right',\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n position\n });\n const classes = useUtilityClasses(ownerState);\n const contextValue = React.useMemo(() => ({\n position\n }), [position]);\n return /*#__PURE__*/_jsx(TimelineContext.Provider, {\n value: contextValue,\n children: /*#__PURE__*/_jsx(TimelineRoot, _extends({\n className: clsx(classes.root, className),\n ownerState: ownerState\n // @ts-expect-error TypeScript bug, need to keep unknown for DX\n ,\n ref: ref\n }, other))\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? Timeline.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit TypeScript types and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * className applied to the root element.\n */\n className: PropTypes.string,\n /**\n * The position where the TimelineContent should appear relative to the time axis.\n * @default 'right'\n */\n position: PropTypes.oneOf(['alternate-reverse', 'alternate', 'left', 'right']),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\n\n/**\n *\n * Demos:\n *\n * - [Timeline](https://mui.com/components/timeline/)\n *\n * API:\n *\n * - [Timeline API](https://mui.com/api/timeline/)\n */\nexport default Timeline;","import * as React from 'react';\n\n/**\n * @ignore - internal component.\n */\nconst TimelineContext = /*#__PURE__*/React.createContext({});\nif (process.env.NODE_ENV !== 'production') {\n TimelineContext.displayName = 'TimelineContext';\n}\nexport default TimelineContext;","import generateUtilityClass from '@mui/material/generateUtilityClass';\nimport generateUtilityClasses from '@mui/material/generateUtilityClasses';\nexport function getTimelineConnectorUtilityClass(slot) {\n return generateUtilityClass('MuiTimelineConnector', slot);\n}\nconst timelineConnectorClasses = generateUtilityClasses('MuiTimelineConnector', ['root']);\nexport default timelineConnectorClasses;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"className\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport { styled, useThemeProps } from '@mui/material/styles';\nimport { getTimelineConnectorUtilityClass } from './timelineConnectorClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes\n } = ownerState;\n const slots = {\n root: ['root']\n };\n return composeClasses(slots, getTimelineConnectorUtilityClass, classes);\n};\nconst TimelineConnectorRoot = styled('span', {\n name: 'MuiTimelineConnector',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})(({\n theme\n}) => {\n return {\n width: 2,\n backgroundColor: (theme.vars || theme).palette.grey[400],\n flexGrow: 1\n };\n});\nconst TimelineConnector = /*#__PURE__*/React.forwardRef(function TimelineConnector(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTimelineConnector'\n });\n const {\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = props;\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(TimelineConnectorRoot, _extends({\n className: clsx(classes.root, className),\n ownerState: ownerState,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TimelineConnector.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default TimelineConnector;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { styled, useThemeProps } from '@mui/material/styles';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport Typography from '@mui/material/Typography';\nimport TimelineContext from '../Timeline/TimelineContext';\nimport { getTimelineContentUtilityClass } from './timelineContentClasses';\nimport convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n position,\n classes\n } = ownerState;\n const slots = {\n root: ['root', convertTimelinePositionToClass(position)]\n };\n return composeClasses(slots, getTimelineContentUtilityClass, classes);\n};\nconst TimelineContentRoot = styled(Typography, {\n name: 'MuiTimelineContent',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];\n }\n})(({\n ownerState\n}) => _extends({\n flex: 1,\n padding: '6px 16px',\n textAlign: 'left'\n}, ownerState.position === 'left' && {\n textAlign: 'right'\n}));\nconst TimelineContent = /*#__PURE__*/React.forwardRef(function TimelineContent(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTimelineContent'\n });\n const {\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const {\n position: positionContext\n } = React.useContext(TimelineContext);\n const ownerState = _extends({}, props, {\n position: positionContext || 'right'\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(TimelineContentRoot, _extends({\n component: \"div\",\n className: clsx(classes.root, className),\n ownerState: ownerState,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TimelineContent.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default TimelineContent;","import generateUtilityClass from '@mui/material/generateUtilityClass';\nimport generateUtilityClasses from '@mui/material/generateUtilityClasses';\nexport function getTimelineContentUtilityClass(slot) {\n return generateUtilityClass('MuiTimelineContent', slot);\n}\nconst timelineContentClasses = generateUtilityClasses('MuiTimelineContent', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse']);\nexport default timelineContentClasses;","import generateUtilityClass from '@mui/material/generateUtilityClass';\nimport generateUtilityClasses from '@mui/material/generateUtilityClasses';\nexport function getTimelineDotUtilityClass(slot) {\n return generateUtilityClass('MuiTimelineDot', slot);\n}\nconst timelineDotClasses = generateUtilityClasses('MuiTimelineDot', ['root', 'filled', 'outlined', 'filledGrey', 'outlinedGrey', 'filledPrimary', 'outlinedPrimary', 'filledSecondary', 'outlinedSecondary']);\nexport default timelineDotClasses;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"color\", \"variant\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { styled, useThemeProps } from '@mui/material/styles';\nimport { capitalize } from '@mui/material/utils';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport { getTimelineDotUtilityClass } from './timelineDotClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n color,\n variant,\n classes\n } = ownerState;\n const slots = {\n root: ['root', variant, color !== 'inherit' && `${variant}${capitalize(color)}`]\n };\n return composeClasses(slots, getTimelineDotUtilityClass, classes);\n};\nconst TimelineDotRoot = styled('span', {\n name: 'MuiTimelineDot',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[ownerState.color !== 'inherit' && `${ownerState.variant}${capitalize(ownerState.color)}`], styles[ownerState.variant]];\n }\n})(({\n ownerState,\n theme\n}) => _extends({\n display: 'flex',\n alignSelf: 'baseline',\n borderStyle: 'solid',\n borderWidth: 2,\n padding: 4,\n borderRadius: '50%',\n boxShadow: (theme.vars || theme).shadows[1],\n margin: '11.5px 0'\n}, ownerState.variant === 'filled' && _extends({\n borderColor: 'transparent'\n}, ownerState.color !== 'inherit' && _extends({}, ownerState.color === 'grey' ? {\n color: (theme.vars || theme).palette.grey[50],\n backgroundColor: (theme.vars || theme).palette.grey[400]\n} : {\n color: (theme.vars || theme).palette[ownerState.color].contrastText,\n backgroundColor: (theme.vars || theme).palette[ownerState.color].main\n})), ownerState.variant === 'outlined' && _extends({\n boxShadow: 'none',\n backgroundColor: 'transparent'\n}, ownerState.color !== 'inherit' && _extends({}, ownerState.color === 'grey' ? {\n borderColor: (theme.vars || theme).palette.grey[400]\n} : {\n borderColor: (theme.vars || theme).palette[ownerState.color].main\n}))));\nconst TimelineDot = /*#__PURE__*/React.forwardRef(function TimelineDot(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTimelineDot'\n });\n const {\n className,\n color = 'grey',\n variant = 'filled'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n color,\n variant\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(TimelineDotRoot, _extends({\n className: clsx(classes.root, className),\n ownerState: ownerState,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TimelineDot.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The dot can have a different colors.\n * @default 'grey'\n */\n color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'grey', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * The dot can appear filled or outlined.\n * @default 'filled'\n */\n variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined']), PropTypes.string])\n} : void 0;\nexport default TimelineDot;","import generateUtilityClass from '@mui/material/generateUtilityClass';\nimport generateUtilityClasses from '@mui/material/generateUtilityClasses';\nexport function getTimelineOppositeContentUtilityClass(slot) {\n return generateUtilityClass('MuiTimelineOppositeContent', slot);\n}\nconst timelineOppositeContentClasses = generateUtilityClasses('MuiTimelineOppositeContent', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse']);\nexport default timelineOppositeContentClasses;","import generateUtilityClass from '@mui/material/generateUtilityClass';\nimport generateUtilityClasses from '@mui/material/generateUtilityClasses';\nexport function getTimelineItemUtilityClass(slot) {\n return generateUtilityClass('MuiTimelineItem', slot);\n}\nconst timelineItemClasses = generateUtilityClasses('MuiTimelineItem', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse', 'missingOppositeContent']);\nexport default timelineItemClasses;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"position\", \"className\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { isMuiElement } from '@mui/material/utils';\nimport { styled, useThemeProps } from '@mui/material/styles';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport { timelineContentClasses } from '../TimelineContent';\nimport { timelineOppositeContentClasses } from '../TimelineOppositeContent';\nimport TimelineContext from '../Timeline/TimelineContext';\nimport { getTimelineItemUtilityClass } from './timelineItemClasses';\nimport convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n position,\n classes,\n hasOppositeContent\n } = ownerState;\n const slots = {\n root: ['root', convertTimelinePositionToClass(position), !hasOppositeContent && 'missingOppositeContent']\n };\n return composeClasses(slots, getTimelineItemUtilityClass, classes);\n};\nconst TimelineItemRoot = styled('li', {\n name: 'MuiTimelineItem',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];\n }\n})(({\n ownerState\n}) => _extends({\n listStyle: 'none',\n display: 'flex',\n position: 'relative',\n minHeight: 70\n}, ownerState.position === 'left' && {\n flexDirection: 'row-reverse'\n}, (ownerState.position === 'alternate' || ownerState.position === 'alternate-reverse') && {\n [`&:nth-of-type(${ownerState.position === 'alternate' ? 'even' : 'odd'})`]: {\n flexDirection: 'row-reverse',\n [`& .${timelineContentClasses.root}`]: {\n textAlign: 'right'\n },\n [`& .${timelineOppositeContentClasses.root}`]: {\n textAlign: 'left'\n }\n }\n}, !ownerState.hasOppositeContent && {\n '&:before': {\n content: '\"\"',\n flex: 1,\n padding: '6px 16px'\n }\n}));\nconst TimelineItem = /*#__PURE__*/React.forwardRef(function TimelineItem(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTimelineItem'\n });\n const {\n position: positionProp,\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const {\n position: positionContext\n } = React.useContext(TimelineContext);\n let hasOppositeContent = false;\n React.Children.forEach(props.children, child => {\n if (isMuiElement(child, ['TimelineOppositeContent'])) {\n hasOppositeContent = true;\n }\n });\n const ownerState = _extends({}, props, {\n position: positionProp || positionContext || 'right',\n hasOppositeContent\n });\n const classes = useUtilityClasses(ownerState);\n const contextValue = React.useMemo(() => ({\n position: ownerState.position\n }), [ownerState.position]);\n return /*#__PURE__*/_jsx(TimelineContext.Provider, {\n value: contextValue,\n children: /*#__PURE__*/_jsx(TimelineItemRoot, _extends({\n className: clsx(classes.root, className),\n ownerState: ownerState,\n ref: ref\n }, other))\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? TimelineItem.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The position where the timeline's item should appear.\n */\n position: PropTypes.oneOf(['alternate-reverse', 'alternate', 'left', 'right']),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default TimelineItem;","import generateUtilityClass from '@mui/material/generateUtilityClass';\nimport generateUtilityClasses from '@mui/material/generateUtilityClasses';\nexport function getTimelineSeparatorUtilityClass(slot) {\n return generateUtilityClass('MuiTimelineSeparator', slot);\n}\nconst timelineSeparatorClasses = generateUtilityClasses('MuiTimelineSeparator', ['root']);\nexport default timelineSeparatorClasses;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"className\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport { styled, useThemeProps } from '@mui/material/styles';\nimport { getTimelineSeparatorUtilityClass } from './timelineSeparatorClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes\n } = ownerState;\n const slots = {\n root: ['root']\n };\n return composeClasses(slots, getTimelineSeparatorUtilityClass, classes);\n};\nconst TimelineSeparatorRoot = styled('div', {\n name: 'MuiTimelineSeparator',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n display: 'flex',\n flexDirection: 'column',\n flex: 0,\n alignItems: 'center'\n});\nconst TimelineSeparator = /*#__PURE__*/React.forwardRef(function TimelineSeparator(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTimelineSeparator'\n });\n const {\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = props;\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(TimelineSeparatorRoot, _extends({\n className: clsx(classes.root, className),\n ownerState: ownerState,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TimelineSeparator.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default TimelineSeparator;","import { capitalize } from '@mui/material/utils';\nexport default function convertTimelinePositionToClass(position) {\n return position === 'alternate-reverse' ? 'positionAlternateReverse' : `position${capitalize(position)}`;\n}","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getAlertUtilityClass(slot) {\n return generateUtilityClass('MuiAlert', slot);\n}\nconst alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);\nexport default alertClasses;","'use client';\n\nimport * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon( /*#__PURE__*/_jsx(\"path\", {\n d: \"M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z\"\n}), 'SuccessOutlined');","'use client';\n\nimport * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon( /*#__PURE__*/_jsx(\"path\", {\n d: \"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z\"\n}), 'ReportProblemOutlined');","'use client';\n\nimport * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon( /*#__PURE__*/_jsx(\"path\", {\n d: \"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"\n}), 'ErrorOutline');","'use client';\n\nimport * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon( /*#__PURE__*/_jsx(\"path\", {\n d: \"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z\"\n}), 'InfoOutlined');","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"action\", \"children\", \"className\", \"closeText\", \"color\", \"components\", \"componentsProps\", \"icon\", \"iconMapping\", \"onClose\", \"role\", \"severity\", \"slotProps\", \"slots\", \"variant\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';\nimport { darken, lighten } from '@mui/system';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport capitalize from '../utils/capitalize';\nimport Paper from '../Paper';\nimport alertClasses, { getAlertUtilityClass } from './alertClasses';\nimport IconButton from '../IconButton';\nimport SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined';\nimport ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined';\nimport ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';\nimport InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';\nimport CloseIcon from '../internal/svg-icons/Close';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n variant,\n color,\n severity,\n classes\n } = ownerState;\n const slots = {\n root: ['root', `${variant}${capitalize(color || severity)}`, `${variant}`],\n icon: ['icon'],\n message: ['message'],\n action: ['action']\n };\n return composeClasses(slots, getAlertUtilityClass, classes);\n};\nconst AlertRoot = styled(Paper, {\n name: 'MuiAlert',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`]];\n }\n})(({\n theme,\n ownerState\n}) => {\n const getColor = theme.palette.mode === 'light' ? darken : lighten;\n const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;\n const color = ownerState.color || ownerState.severity;\n return _extends({}, theme.typography.body2, {\n backgroundColor: 'transparent',\n display: 'flex',\n padding: '6px 16px'\n }, color && ownerState.variant === 'standard' && {\n color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),\n backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),\n [`& .${alertClasses.icon}`]: theme.vars ? {\n color: theme.vars.palette.Alert[`${color}IconColor`]\n } : {\n color: theme.palette[color].main\n }\n }, color && ownerState.variant === 'outlined' && {\n color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),\n border: `1px solid ${(theme.vars || theme).palette[color].light}`,\n [`& .${alertClasses.icon}`]: theme.vars ? {\n color: theme.vars.palette.Alert[`${color}IconColor`]\n } : {\n color: theme.palette[color].main\n }\n }, color && ownerState.variant === 'filled' && _extends({\n fontWeight: theme.typography.fontWeightMedium\n }, theme.vars ? {\n color: theme.vars.palette.Alert[`${color}FilledColor`],\n backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]\n } : {\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,\n color: theme.palette.getContrastText(theme.palette[color].main)\n }));\n});\nconst AlertIcon = styled('div', {\n name: 'MuiAlert',\n slot: 'Icon',\n overridesResolver: (props, styles) => styles.icon\n})({\n marginRight: 12,\n padding: '7px 0',\n display: 'flex',\n fontSize: 22,\n opacity: 0.9\n});\nconst AlertMessage = styled('div', {\n name: 'MuiAlert',\n slot: 'Message',\n overridesResolver: (props, styles) => styles.message\n})({\n padding: '8px 0',\n minWidth: 0,\n overflow: 'auto'\n});\nconst AlertAction = styled('div', {\n name: 'MuiAlert',\n slot: 'Action',\n overridesResolver: (props, styles) => styles.action\n})({\n display: 'flex',\n alignItems: 'flex-start',\n padding: '4px 0 0 16px',\n marginLeft: 'auto',\n marginRight: -8\n});\nconst defaultIconMapping = {\n success: /*#__PURE__*/_jsx(SuccessOutlinedIcon, {\n fontSize: \"inherit\"\n }),\n warning: /*#__PURE__*/_jsx(ReportProblemOutlinedIcon, {\n fontSize: \"inherit\"\n }),\n error: /*#__PURE__*/_jsx(ErrorOutlineIcon, {\n fontSize: \"inherit\"\n }),\n info: /*#__PURE__*/_jsx(InfoOutlinedIcon, {\n fontSize: \"inherit\"\n })\n};\nconst Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {\n var _ref, _slots$closeButton, _ref2, _slots$closeIcon, _slotProps$closeButto, _slotProps$closeIcon;\n const props = useThemeProps({\n props: inProps,\n name: 'MuiAlert'\n });\n const {\n action,\n children,\n className,\n closeText = 'Close',\n color,\n components = {},\n componentsProps = {},\n icon,\n iconMapping = defaultIconMapping,\n onClose,\n role = 'alert',\n severity = 'success',\n slotProps = {},\n slots = {},\n variant = 'standard'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n color,\n severity,\n variant\n });\n const classes = useUtilityClasses(ownerState);\n const AlertCloseButton = (_ref = (_slots$closeButton = slots.closeButton) != null ? _slots$closeButton : components.CloseButton) != null ? _ref : IconButton;\n const AlertCloseIcon = (_ref2 = (_slots$closeIcon = slots.closeIcon) != null ? _slots$closeIcon : components.CloseIcon) != null ? _ref2 : CloseIcon;\n const closeButtonProps = (_slotProps$closeButto = slotProps.closeButton) != null ? _slotProps$closeButto : componentsProps.closeButton;\n const closeIconProps = (_slotProps$closeIcon = slotProps.closeIcon) != null ? _slotProps$closeIcon : componentsProps.closeIcon;\n return /*#__PURE__*/_jsxs(AlertRoot, _extends({\n role: role,\n elevation: 0,\n ownerState: ownerState,\n className: clsx(classes.root, className),\n ref: ref\n }, other, {\n children: [icon !== false ? /*#__PURE__*/_jsx(AlertIcon, {\n ownerState: ownerState,\n className: classes.icon,\n children: icon || iconMapping[severity] || defaultIconMapping[severity]\n }) : null, /*#__PURE__*/_jsx(AlertMessage, {\n ownerState: ownerState,\n className: classes.message,\n children: children\n }), action != null ? /*#__PURE__*/_jsx(AlertAction, {\n ownerState: ownerState,\n className: classes.action,\n children: action\n }) : null, action == null && onClose ? /*#__PURE__*/_jsx(AlertAction, {\n ownerState: ownerState,\n className: classes.action,\n children: /*#__PURE__*/_jsx(AlertCloseButton, _extends({\n size: \"small\",\n \"aria-label\": closeText,\n title: closeText,\n color: \"inherit\",\n onClick: onClose\n }, closeButtonProps, {\n children: /*#__PURE__*/_jsx(AlertCloseIcon, _extends({\n fontSize: \"small\"\n }, closeIconProps))\n }))\n }) : null]\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Alert.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The action to display. It renders after the message, at the end of the alert.\n */\n action: PropTypes.node,\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * Override the default label for the *close popup* icon button.\n *\n * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).\n * @default 'Close'\n */\n closeText: PropTypes.string,\n /**\n * The color of the component. Unless provided, the value is taken from the `severity` prop.\n * It supports both default and custom theme colors, which can be added as shown in the\n * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).\n */\n color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),\n /**\n * The components used for each slot inside.\n *\n * This prop is an alias for the `slots` prop.\n * It's recommended to use the `slots` prop instead.\n *\n * @default {}\n */\n components: PropTypes.shape({\n CloseButton: PropTypes.elementType,\n CloseIcon: PropTypes.elementType\n }),\n /**\n * The extra props for the slot components.\n * You can override the existing props or add new ones.\n *\n * This prop is an alias for the `slotProps` prop.\n * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.\n *\n * @default {}\n */\n componentsProps: PropTypes.shape({\n closeButton: PropTypes.object,\n closeIcon: PropTypes.object\n }),\n /**\n * Override the icon displayed before the children.\n * Unless provided, the icon is mapped to the value of the `severity` prop.\n * Set to `false` to remove the `icon`.\n */\n icon: PropTypes.node,\n /**\n * The component maps the `severity` prop to a range of different icons,\n * for instance success to `