@nerdjs/sales-kit 2.2.11 → 2.3.0

package/dist/hooks/lep/lepActionBar.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Grid, Typography, Skeleton, Chip, IconButton, Button, Box, Table, Sheet, Modal, ModalDialog, FormControl, FormLabel, Input, Tooltip, Dropdown, MenuButton, Menu, MenuItem, ListItemDecorator, Divider, Select, Option, CircularProgress, Drawer, useTheme, } from "@mui/joy";
+import { Box, Button, Chip, CircularProgress, Divider, Drawer, Dropdown, FormControl, FormLabel, Grid, IconButton, Input, ListItemDecorator, Menu, MenuButton, MenuItem, Modal, ModalDialog, Option, Select, Sheet, Skeleton, Table, Tooltip, Typography, } from "@mui/joy";
 import { NerdClickToCopy, NerdCurrencyField, NerdDatePicker, showNotification, useNerdConfirm, } from "@nerdjs/nerd-ui";
 import { DateTime } from "luxon";
-import { useEffect, useMemo, useRef, useState, } from "react";
-import salesKitI18n from "../../i18n";
+import { useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useParams } from "react-router-dom";
-import { CheckList } from "./checkList";
-import { quoteRecalculateBodySelector } from "../../redux/quote/quoteSelectors";
+import { useDispatch, useSelector } from "react-redux";
+import { Link, useNavigate } from "react-router-dom";
+import salesKitI18n from "../../i18n";
+import { getShipconsSelectors, setLoadDrawerSelectedLoadID, useDuplicateLoadV1Mutation, useGetLoadQuery, useGetShipconsQuery, useQuotesRecalculateMutation, useRecalculateQuoteMutation, useUpdateLoadV1Mutation, } from "../../redux";
 import { blockingTasksSelector } from "../../redux/lep/lepSelectors";
-import { useMediaQuery } from "@mui/system";
-import { useUpdateLoadV1Mutation, useRecalculateQuoteMutation, useGetLoadQuery, useQuotesRecalculateMutation, useDuplicateLoadV1Mutation, setLoadDrawerSelectedLoadID, useGetShipconsQuery, getShipconsSelectors, } from "../../redux";
+import { quoteRecalculateBodySelector } from "../../redux/quote/quoteSelectors";
+import { STATUS_MAP } from "../load/loadDrawer";
 import { usdFormatter } from "../quote";
 import { StatusStepper } from "../statusStepper";
-import { useDispatch, useSelector } from "react-redux";
-import { STATUS_MAP } from "../load/loadDrawer";
+import { CheckList } from "./checkList";
+import { LoadIDContext } from "./loadEditPanel";
 /**
  *
  * @param {PropsWithChildren} props props
@@ -22,7 +22,7 @@ import { STATUS_MAP } from "../load/loadDrawer";
  * @returns {ReactElement} LepActionBar
  */
 export function LepActionBar({ children, onDuplicateLoad, backTo, }) {
-    const { id } = useParams();
+    const id = useContext(LoadIDContext);
     const { t } = useTranslation("common", { i18n: salesKitI18n });
     const dispatch = useDispatch();
     const confirm = useNerdConfirm();
@@ -31,7 +31,7 @@ export function LepActionBar({ children, onDuplicateLoad, backTo, }) {
     const { data: load, isLoading: loadingLoad } = useGetLoadQuery(Number(id), {
         skip: !id,
     });
-    const recalculateBody = useSelector(quoteRecalculateBodySelector);
+    const recalculateBody = useSelector(quoteRecalculateBodySelector(Number(id)));
     const [quoteTONU, { isLoading: tonuLoading }] = useQuotesRecalculateMutation();
     const [updateLoad, { isLoading: updateLoadLoading }] = useUpdateLoadV1Mutation();
     const [duplicateLoad, { isLoading: duplicateLoading }] = useDuplicateLoadV1Mutation();
@@ -41,9 +41,8 @@ export function LepActionBar({ children, onDuplicateLoad, backTo, }) {
     const [pickupDate, setPickupDate] = useState(null);
     const refNumberRef = useRef(null);
     const [totalRate, setTotalRate] = useState();
-    const blockingTasks = useSelector(blockingTasksSelector);
-    const theme = useTheme();
-    const downLg = useMediaQuery(theme.breakpoints.down("lg"));
+    const blockingTasks = useSelector((s) => blockingTasksSelector(s, Number(id)));
+    const navigate = useNavigate();
     const handleClick = () => {
         setOpen(true);
     };
@@ -51,7 +50,7 @@ export function LepActionBar({ children, onDuplicateLoad, backTo, }) {
         setOpen(false);
     };
     const handleRecalculate = () => {
-        if (load?.quoteID && load.id && recalculateBody.customer_id)
+        if (load?.quoteID && load.id && recalculateBody?.customer_id)
             recalculateQuote({
                 quoteID: load?.quoteID,
                 body: {
@@ -158,61 +157,49 @@ export function LepActionBar({ children, onDuplicateLoad, backTo, }) {
         }
         setTotalRate(load?.totalRate);
     }, [load]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, alignItems: "center", columnGap: 0.5, children: [_jsx(Grid, { xs: 6, md: backTo ? true : 2, lg: true, order: 1, children: !loadingLoad ? (_jsxs(Box, { display: "flex", gap: 0.5, children: [backTo ? (_jsx(Box, { mr: 0.5, mt: 0.5, display: { xs: "none", md: "block" }, children: _jsx(Button, { size: "sm", variant: "soft", color: "neutral", startDecorator: _jsx("i", { className: "fa-solid fa-arrow-left" }), component: Link, to: backTo, sx: {
-                                            textDecoration: "none !important",
-                                        }, children: t("global.back") }) })) : null, downLg ? (_jsx(IconButton, { variant: "plain", color: "neutral", size: "sm", onClick: handleClick, children: _jsx("i", { style: {
-                                            fontSize: 18,
-                                        }, className: "fa-regular fa-circle-info" }) })) : null, _jsxs(Box, { display: "flex", flexWrap: "wrap", children: [_jsxs(Typography, { level: "title-lg", display: "inline", children: ["#", _jsx(NerdClickToCopy, { typographyProps: {
-                                                        level: "title-lg",
-                                                        display: "inline",
-                                                    }, children: _jsx(Skeleton, { loading: loadingLoad, children: `${load?.id}` }) })] }), _jsx(NerdClickToCopy, { typographyProps: {
-                                                sx: {
-                                                    width: "fit-content",
-                                                    display: "inline",
-                                                },
-                                                level: "body-xs",
-                                            }, children: _jsx(Skeleton, { loading: loadingLoad, children: load?.referenceNumber
-                                                    ? `(${load?.referenceNumber})`
-                                                    : "(Not Set)" }) }), load?.status ? (_jsx(Box, { children: _jsx(Chip, { color: load?.status === "Cancelled"
-                                                    ? "danger"
-                                                    : load?.status === "Pending"
-                                                        ? "neutral"
-                                                        : "primary", size: "sm", children: load?.status }) })) : null, load?.customerDoNotContact ? (_jsx(Tooltip, { size: "sm", title: "Do not contact", children: _jsx(Chip, { color: "danger", children: _jsx("i", { className: "fa-solid fa-phone-slash" }) }) })) : null] }), !downLg ? (_jsxs(Box, { display: "flex", ml: "auto", mr: "auto", gap: 1, children: [_jsxs(Typography, { level: "body-sm", children: [_jsx(Typography, { level: "body-sm", fontWeight: "xl", children: "Quote #:" }), _jsx(NerdClickToCopy, { children: load?.quoteID })] }), _jsxs(Typography, { level: "body-sm", children: [_jsx(Typography, { level: "body-sm", fontWeight: "xl", children: "CSR:" }), _jsx(NerdClickToCopy, { children: load?.csrName })] }), _jsxs(Typography, { level: "body-sm", children: [_jsx(Typography, { level: "body-sm", fontWeight: "xl", children: "Customer:" }), _jsx(NerdClickToCopy, { children: load?.customer })] }), _jsxs(Typography, { level: "body-sm", children: [_jsxs(Typography, { level: "body-sm", fontWeight: "xl", children: ["Base Rate:", " "] }), load?.baserate ? usdFormatter.format(load?.baserate) : "-"] }), _jsxs(Typography, { level: "body-sm", children: [_jsxs(Typography, { level: "body-sm", fontWeight: "xl", children: ["Fuel Rate:", " "] }), load?.fuelCost ? usdFormatter.format(load?.fuelCost) : "-"] }), _jsxs(Typography, { level: "body-sm", children: [_jsxs(Typography, { level: "body-sm", fontWeight: "xl", children: ["Total Rate:", " "] }), load?.totalRate
-                                                    ? usdFormatter.format(load?.totalRate)
-                                                    : "-"] }), _jsxs(Typography, { level: "body-sm", color: load?.margin && load.margin < 0 ? "danger" : undefined, children: [_jsxs(Typography, { level: "body-sm", fontWeight: "xl", children: ["Margin:", " "] }), load?.margin ? usdFormatter.format(load?.margin) : "-"] }), " ", _jsxs(Typography, { level: "body-sm", children: [_jsxs(Typography, { level: "body-sm", fontWeight: "xl", children: ["Invoice Date:", " "] }), load?.invoiceDate
-                                                    ? DateTime.fromISO(load.invoiceDate)
-                                                        .toUTC()
-                                                        // eslint-disable-next-line i18next/no-literal-string
-                                                        .toFormat("LL/dd/yyyy")
-                                                    : "-"] })] })) : null] })) : null }), _jsx(Grid, { container: true, xs: 12, md: backTo ? 12 : true, lg: 12, justifyContent: "center", order: {
-                            xs: 3,
-                            md: backTo ? 3 : 2,
-                            lg: 3,
-                        }, children: _jsx(Grid, { children: children }) }), _jsxs(Grid, { container: true, spacing: 1, justifyContent: { xs: "start", md: "end" }, alignItems: "center", xs: "auto", ml: { xs: "auto", lg: 0 }, order: {
-                            xs: 2,
-                            md: backTo ? 2 : 3,
-                            lg: 2,
-                        }, children: [_jsx(Grid, { children: _jsx(CheckList, { loading: loadingLoad }) }), _jsx(Grid, { children: _jsxs(Dropdown, { children: [_jsx(MenuButton, { slots: { root: IconButton }, slotProps: {
-                                                root: {
-                                                    variant: "outlined",
-                                                    color: "neutral",
-                                                    size: "sm",
-                                                    className: "ShipconsTaskItem-recalculate",
-                                                },
-                                            }, loading: recalculateLoading || tonuLoading || updateLoadLoading, children: recalculateLoading ||
-                                                tonuLoading ||
-                                                updateLoadLoading ? null : (_jsx("i", { className: "fa-solid fa-bars" })) }), _jsxs(Menu, { placement: "bottom-end", sx: {
-                                                zIndex: (theme) => theme.zIndex.modal,
-                                            }, children: [_jsxs(MenuItem, { onClick: () => setOpenDownload(true), children: [_jsx(ListItemDecorator, { sx: { color: "inherit" }, children: _jsx("i", { className: "fa-solid fa-download pright" }) }), t("entities:load.others.download_document")] }), load?.cancelled ? (_jsxs(MenuItem, { onClick: handleActivateLoad, children: [_jsx(ListItemDecorator, { sx: { color: "inherit" }, children: _jsx("i", { className: "fa-solid fa-check-circle pright" }) }), t("entities:load.others.activate_load")] })) : (_jsxs(MenuItem, { onClick: handleCancel, variant: "soft", color: "danger", children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-ban pright" }) }), t("entities:load.others.cancel_load")] })), load?.truckOrderNotUsed ? (_jsxs(MenuItem, { onClick: () => handleTONU(!load?.truckOrderNotUsed), children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-person-dolly pright" }) }), t("entities:load.others.undo_tonu")] })) : (_jsxs(MenuItem, { onClick: () => handleTONU(!load?.truckOrderNotUsed), children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-person-dolly-empty pright" }) }), t("entities:load.others.tonu")] })), _jsxs(MenuItem, { onClick: () => setOpenDuplicate(true), children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-clone pright" }) }), t("global.duplicate")] }), _jsx(Tooltip, { title: !recalculateBody.customer_id
-                                                        ? "The load has no customer selected"
-                                                        : "", children: _jsx("span", { children: _jsxs(MenuItem, { onClick: handleRecalculate, disabled: !recalculateBody.customer_id, children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-arrows-rotate pright" }) }), t("components:lepShipcons.recalculate")] }) }) }), !load?.cancelled ? (_jsx(Tooltip, { title: load?.active
-                                                        ? "The load is already active"
-                                                        : blockingTasks.length > 0
-                                                            ? "The load is not complete, check the Tasks List for more details"
-                                                            : "", children: _jsx("span", { children: _jsxs(MenuItem, { onClick: handleValidate, disabled: load?.active || blockingTasks.length > 0, children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-truck-fast pright" }) }), t("components:lepShipcons.validate")] }) }) })) : null] })] }) }), _jsx(Grid, { children: _jsx(Tooltip, { title: "Open Load Quick View", children: _jsx(IconButton, { size: "sm", variant: "soft", color: "primary", onClick: () => {
-                                            if (load)
-                                                dispatch(setLoadDrawerSelectedLoadID(load.id));
-                                        }, children: _jsx("i", { className: "fa-solid fa-magnifying-glass" }) }) }) })] })] }), _jsx(Drawer, { open: open, anchor: "left", onClose: handleClose, sx: {
+    return (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, sx: { gap: 0.5, alignItems: "center" }, children: [_jsxs(Grid, { order: 1, display: "flex", children: [backTo ? (_jsx(Box, { mr: 0.5, mt: 0.5, display: { xs: "none", md: "block" }, children: _jsx(Button, { size: "sm", variant: "soft", color: "neutral", startDecorator: _jsx("i", { className: "fa-solid fa-arrow-left" }), component: Link, to: backTo, sx: {
+                                        textDecoration: "none !important",
+                                    }, children: t("global.back") }) })) : null, _jsx(IconButton, { variant: "plain", color: "neutral", size: "sm", onClick: handleClick, sx: {
+                                    display: {
+                                        xs: "flex",
+                                        sm: "none",
+                                    },
+                                }, children: _jsx("i", { style: {
+                                        fontSize: 18,
+                                    }, className: "fa-regular fa-circle-info" }) }), _jsxs(Typography, { level: "title-lg", display: "inline", children: ["#", _jsx(NerdClickToCopy, { typographyProps: {
+                                            level: "title-lg",
+                                            display: "inline",
+                                        }, children: _jsx(Skeleton, { loading: loadingLoad, children: `${load?.id}` }) })] }), _jsx(NerdClickToCopy, { typographyProps: {
+                                    sx: {
+                                        width: "fit-content",
+                                        display: "inline",
+                                    },
+                                    level: "body-xs",
+                                }, children: _jsx(Skeleton, { loading: loadingLoad, children: load?.referenceNumber
+                                        ? `(${load?.referenceNumber})`
+                                        : "(Not Set)" }) }), load?.status ? (_jsx(Box, { children: _jsx(Chip, { color: load?.status === "Cancelled"
+                                        ? "danger"
+                                        : load?.status === "Pending"
+                                            ? "neutral"
+                                            : "primary", size: "sm", children: load?.status }) })) : null, load?.customerDoNotContact ? (_jsx(Tooltip, { size: "sm", title: "Do not contact", children: _jsx(Chip, { color: "danger", children: _jsx("i", { className: "fa-solid fa-phone-slash" }) }) })) : null] }), _jsx(Grid, { xs: 12, md: true, order: { xs: 3, md: 2 }, children: _jsx(Box, { sx: { flexGrow: 1, display: "flex", justifyContent: "center" }, children: children }) }), _jsxs(Grid, { display: "flex", gap: 0.5, order: { xs: 2, md: 3 }, ml: { xs: 0, sm: "auto" }, children: [_jsx(CheckList, { loading: loadingLoad }), _jsxs(Dropdown, { children: [_jsx(MenuButton, { slots: { root: IconButton }, slotProps: {
+                                            root: {
+                                                variant: "outlined",
+                                                color: "neutral",
+                                                size: "sm",
+                                                className: "ShipconsTaskItem-recalculate",
+                                            },
+                                        }, loading: recalculateLoading || tonuLoading || updateLoadLoading, children: recalculateLoading || tonuLoading || updateLoadLoading ? null : (_jsx("i", { className: "fa-solid fa-bars" })) }), _jsxs(Menu, { placement: "bottom-end", sx: {
+                                            zIndex: (theme) => theme.zIndex.modal,
+                                        }, children: [_jsxs(MenuItem, { onClick: () => setOpenDownload(true), children: [_jsx(ListItemDecorator, { sx: { color: "inherit" }, children: _jsx("i", { className: "fa-solid fa-download pright" }) }), t("entities:load.others.download_document")] }), load?.cancelled ? (_jsxs(MenuItem, { onClick: handleActivateLoad, children: [_jsx(ListItemDecorator, { sx: { color: "inherit" }, children: _jsx("i", { className: "fa-solid fa-check-circle pright" }) }), t("entities:load.others.activate_load")] })) : (_jsxs(MenuItem, { onClick: handleCancel, variant: "soft", color: "danger", children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-ban pright" }) }), t("entities:load.others.cancel_load")] })), load?.truckOrderNotUsed ? (_jsxs(MenuItem, { onClick: () => handleTONU(!load?.truckOrderNotUsed), children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-person-dolly pright" }) }), t("entities:load.others.undo_tonu")] })) : (_jsxs(MenuItem, { onClick: () => handleTONU(!load?.truckOrderNotUsed), children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-person-dolly-empty pright" }) }), t("entities:load.others.tonu")] })), _jsxs(MenuItem, { onClick: () => setOpenDuplicate(true), children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-clone pright" }) }), t("global.duplicate")] }), _jsx(Tooltip, { title: !recalculateBody?.customer_id
+                                                    ? "The load has no customer selected"
+                                                    : "", children: _jsx("span", { children: _jsxs(MenuItem, { onClick: handleRecalculate, disabled: !recalculateBody?.customer_id, children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-arrows-rotate pright" }) }), t("components:lepShipcons.recalculate")] }) }) }), _jsx("span", { children: _jsxs(MenuItem, { onClick: () => navigate(`/compare?ids=${id}`), children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-rectangle-vertical-history" }) }), t("components:lepShipcons.compareWith")] }) }), !load?.cancelled ? (_jsx(Tooltip, { title: load?.active
+                                                    ? "The load is already active"
+                                                    : blockingTasks.length > 0
+                                                        ? "The load is not complete, check the Tasks List for more details"
+                                                        : "", children: _jsx("span", { children: _jsxs(MenuItem, { onClick: handleValidate, disabled: load?.active || blockingTasks.length > 0, children: [_jsx(ListItemDecorator, { children: _jsx("i", { className: "fa-solid fa-truck-fast pright" }) }), t("components:lepShipcons.validate")] }) }) })) : null] })] }), _jsx(Tooltip, { title: "Open Load Quick View", children: _jsx(IconButton, { size: "sm", variant: "soft", color: "primary", onClick: () => {
+                                        if (load)
+                                            dispatch(setLoadDrawerSelectedLoadID(load.id));
+                                    }, children: _jsx("i", { className: "fa-solid fa-magnifying-glass" }) }) })] })] }), _jsx(Drawer, { open: open, anchor: "left", onClose: handleClose, sx: {
                     zIndex: 1200,
                 }, slotProps: {
                     content: {
@@ -233,7 +220,9 @@ export function LepActionBar({ children, onDuplicateLoad, backTo, }) {
                                                             display: "inline",
                                                         }, children: load?.quoteID }) })] }), _jsxs("tr", { children: [_jsx("th", { scope: "row", children: t("entities:load.others.csr_name") }), _jsx("td", { children: load?.csrName })] }), _jsxs("tr", { children: [_jsx("th", { scope: "row", children: t("entities:load.others.customer") }), _jsx("td", { children: load?.customer })] }), _jsxs("tr", { children: [_jsx("th", { scope: "row", children: t("entities:load.others.base_rate") }), _jsx("td", { children: load?.baserate ? usdFormatter.format(load?.baserate) : "-" })] }), _jsxs("tr", { children: [_jsx("th", { scope: "row", children: t("entities:load.others.fuel_rate") }), _jsx("td", { children: load?.fuelCost ? usdFormatter.format(load?.fuelCost) : "-" })] }), _jsxs("tr", { children: [_jsx("th", { scope: "row", children: t("entities:load.others.total") }), _jsx("td", { children: load?.totalRate
                                                         ? usdFormatter.format(load?.totalRate)
-                                                        : "-" })] }), _jsxs("tr", { children: [_jsx("th", { scope: "row", children: t("entities:load.others.margin") }), _jsx("td", { children: load?.margin ? usdFormatter.format(load?.margin) : "-" })] }), _jsxs("tr", { children: [_jsx("th", { scope: "row", children: t("entities:load.others.invoice_date") }), _jsx("td", { children: load?.invoiceDate
+                                                        : "-" })] }), _jsxs("tr", { children: [_jsx("th", { scope: "row", children: t("entities:load.others.margin") }), _jsx("td", { style: {
+                                                        color: load?.margin && load?.margin < 0 ? "red" : undefined,
+                                                    }, children: load?.margin ? usdFormatter.format(load?.margin) : "-" })] }), _jsxs("tr", { children: [_jsx("th", { scope: "row", children: t("entities:load.others.invoice_date") }), _jsx("td", { children: load?.invoiceDate
                                                         ? DateTime.fromISO(load.invoiceDate)
                                                             .toUTC()
                                                             // eslint-disable-next-line i18next/no-literal-string
@@ -264,9 +253,549 @@ export function LepActionBar({ children, onDuplicateLoad, backTo, }) {
                                 pt: 2,
                                 height: "100%",
                             }, children: [_jsx(Button, { onClick: handleCloseDuplicate, color: "neutral", variant: "soft", children: t("global.Cancel") }), _jsx(Button, { loading: duplicateLoading, onClick: handleDuplicate, children: t("global.duplicate") })] })] }) }), _jsx(DownloadDocumentModal, { open: openDownload, onClose: () => setOpenDownload(false) }), _jsx(Divider, { sx: { height: 1 } })] }));
+    // return (
+    //   <>
+    //     <Grid container alignItems={"center"} columnGap={0.5}>
+    //       <Grid xs={6} md={backTo ? true : 2} lg order={1}>
+    //         {!loadingLoad ? (
+    //           <Box display={"flex"} gap={0.5}>
+    //             {backTo ? (
+    //               <Box mr={0.5} mt={0.5} display={{ xs: "none", md: "block" }}>
+    //                 <Button
+    //                   size="sm"
+    //                   variant="soft"
+    //                   color="neutral"
+    //                   startDecorator={<i className="fa-solid fa-arrow-left" />}
+    //                   component={Link}
+    //                   to={backTo}
+    //                   sx={{
+    //                     textDecoration: "none !important",
+    //                   }}
+    //                 >
+    //                   {t("global.back")}
+    //                 </Button>
+    //               </Box>
+    //             ) : null}
+    //             {downLg ? (
+    //               <IconButton
+    //                 variant="plain"
+    //                 color="neutral"
+    //                 size="sm"
+    //                 onClick={handleClick}
+    //               >
+    //                 <i
+    //                   style={{
+    //                     fontSize: 18,
+    //                   }}
+    //                   className="fa-regular fa-circle-info"
+    //                 ></i>
+    //               </IconButton>
+    //             ) : null}
+    //             <Box display={"flex"} flexWrap="wrap">
+    //               <Typography level="title-lg" display={"inline"}>
+    //                 #
+    //                 <NerdClickToCopy
+    //                   typographyProps={{
+    //                     level: "title-lg",
+    //                     display: "inline",
+    //                   }}
+    //                 >
+    //                   <Skeleton loading={loadingLoad}>{`${load?.id}`}</Skeleton>
+    //                 </NerdClickToCopy>
+    //               </Typography>
+    //               <NerdClickToCopy
+    //                 typographyProps={{
+    //                   sx: {
+    //                     width: "fit-content",
+    //                     display: "inline",
+    //                   },
+    //                   level: "body-xs",
+    //                 }}
+    //               >
+    //                 <Skeleton loading={loadingLoad}>
+    //                   {load?.referenceNumber
+    //                     ? `(${load?.referenceNumber})`
+    //                     : "(Not Set)"}
+    //                 </Skeleton>
+    //               </NerdClickToCopy>
+    //               {load?.status ? (
+    //                 <Box>
+    //                   <Chip
+    //                     color={
+    //                       load?.status === "Cancelled"
+    //                         ? "danger"
+    //                         : load?.status === "Pending"
+    //                         ? "neutral"
+    //                         : "primary"
+    //                     }
+    //                     size="sm"
+    //                   >
+    //                     {load?.status}
+    //                   </Chip>
+    //                 </Box>
+    //               ) : null}
+    //               {load?.customerDoNotContact ? (
+    //                 <Tooltip size="sm" title="Do not contact">
+    //                   <Chip color="danger">
+    //                     <i className="fa-solid fa-phone-slash"></i>
+    //                   </Chip>
+    //                 </Tooltip>
+    //               ) : null}
+    //             </Box>
+    //             {/* {!downLg ? (
+    //               <Box display={"flex"} ml="auto" mr="auto" gap={1}>
+    //                 <Typography level="body-sm">
+    //                   <Typography level="body-sm" fontWeight="xl">
+    //                     Quote #:
+    //                   </Typography>
+    //                   <NerdClickToCopy>{load?.quoteID}</NerdClickToCopy>
+    //                 </Typography>
+    //                 <Typography level="body-sm">
+    //                   <Typography level="body-sm" fontWeight="xl">
+    //                     CSR:
+    //                   </Typography>
+    //                   <NerdClickToCopy>{load?.csrName}</NerdClickToCopy>
+    //                 </Typography>
+    //                 <Typography level="body-sm">
+    //                   <Typography level="body-sm" fontWeight="xl">
+    //                     Customer:
+    //                   </Typography>
+    //                   <NerdClickToCopy>{load?.customer}</NerdClickToCopy>
+    //                 </Typography>
+    //                 <Typography level="body-sm">
+    //                   <Typography level="body-sm" fontWeight="xl">
+    //                     Base Rate:{" "}
+    //                   </Typography>
+    //                   {load?.baserate ? usdFormatter.format(load?.baserate) : "-"}
+    //                 </Typography>
+    //                 <Typography level="body-sm">
+    //                   <Typography level="body-sm" fontWeight="xl">
+    //                     Fuel Rate:{" "}
+    //                   </Typography>
+    //                   {load?.fuelCost ? usdFormatter.format(load?.fuelCost) : "-"}
+    //                 </Typography>
+    //                 <Typography level="body-sm">
+    //                   <Typography level="body-sm" fontWeight="xl">
+    //                     Total Rate:{" "}
+    //                   </Typography>
+    //                   {load?.totalRate
+    //                     ? usdFormatter.format(load?.totalRate)
+    //                     : "-"}
+    //                 </Typography>
+    //                 <Typography level="body-sm">
+    //                   <Typography level="body-sm" fontWeight="xl">
+    //                     Margin:{" "}
+    //                   </Typography>
+    //                   {load?.margin ? usdFormatter.format(load?.margin) : "-"}
+    //                 </Typography>{" "}
+    //                 <Typography level="body-sm">
+    //                   <Typography level="body-sm" fontWeight="xl">
+    //                     Invoice Date:{" "}
+    //                   </Typography>
+    //                   {load?.invoiceDate
+    //                     ? DateTime.fromISO(load.invoiceDate)
+    //                         .toUTC()
+    //                         // eslint-disable-next-line i18next/no-literal-string
+    //                         .toFormat("LL/dd/yyyy")
+    //                     : "-"}
+    //                 </Typography>
+    //               </Box>
+    //             ) : null} */}
+    //           </Box>
+    //         ) : null}
+    //       </Grid>
+    //       <Grid
+    //         container
+    //         xs={12}
+    //         md={backTo ? 12 : true}
+    //         lg={12}
+    //         justifyContent={"center"}
+    //         order={{
+    //           xs: 3,
+    //           md: 3,
+    //           lg: 3,
+    //         }}
+    //       >
+    //         <Grid>{children}</Grid>
+    //       </Grid>
+    //       <Grid
+    //         container
+    //         spacing={1}
+    //         justifyContent={{ xs: "start", md: "end" }}
+    //         alignItems={"center"}
+    //         xs={"auto"}
+    //         ml={{ xs: "auto", lg: 0 }}
+    //         order={{
+    //           xs: 2,
+    //           md: backTo ? 2 : 3,
+    //           lg: 2,
+    //         }}
+    //       >
+    //         <Grid>
+    //           <CheckList loading={loadingLoad} />
+    //         </Grid>
+    //         <Grid>
+    //           <Dropdown>
+    //             <MenuButton
+    //               slots={{ root: IconButton }}
+    //               slotProps={{
+    //                 root: {
+    //                   variant: "outlined",
+    //                   color: "neutral",
+    //                   size: "sm",
+    //                   className: "ShipconsTaskItem-recalculate",
+    //                 },
+    //               }}
+    //               loading={recalculateLoading || tonuLoading || updateLoadLoading}
+    //             >
+    //               {recalculateLoading ||
+    //               tonuLoading ||
+    //               updateLoadLoading ? null : (
+    //                 <i className="fa-solid fa-bars"></i>
+    //               )}
+    //             </MenuButton>
+    //             <Menu
+    //               placement="bottom-end"
+    //               sx={{
+    //                 zIndex: (theme) => theme.zIndex.modal,
+    //               }}
+    //             >
+    //               <MenuItem onClick={() => setOpenDownload(true)}>
+    //                 <ListItemDecorator sx={{ color: "inherit" }}>
+    //                   <i className="fa-solid fa-download pright"></i>
+    //                 </ListItemDecorator>
+    //                 {t("entities:load.others.download_document")}
+    //               </MenuItem>
+    //               {load?.cancelled ? (
+    //                 <MenuItem onClick={handleActivateLoad}>
+    //                   <ListItemDecorator sx={{ color: "inherit" }}>
+    //                     <i className="fa-solid fa-check-circle pright"></i>
+    //                   </ListItemDecorator>
+    //                   {t("entities:load.others.activate_load")}
+    //                 </MenuItem>
+    //               ) : (
+    //                 <MenuItem
+    //                   onClick={handleCancel}
+    //                   variant="soft"
+    //                   color="danger"
+    //                 >
+    //                   <ListItemDecorator>
+    //                     <i className="fa-solid fa-ban pright"></i>
+    //                   </ListItemDecorator>
+    //                   {t("entities:load.others.cancel_load")}
+    //                 </MenuItem>
+    //               )}
+    //               {load?.truckOrderNotUsed ? (
+    //                 <MenuItem
+    //                   onClick={() => handleTONU(!load?.truckOrderNotUsed)}
+    //                 >
+    //                   <ListItemDecorator>
+    //                     <i className="fa-solid fa-person-dolly pright"></i>
+    //                   </ListItemDecorator>
+    //                   {t("entities:load.others.undo_tonu")}
+    //                 </MenuItem>
+    //               ) : (
+    //                 <MenuItem
+    //                   onClick={() => handleTONU(!load?.truckOrderNotUsed)}
+    //                 >
+    //                   <ListItemDecorator>
+    //                     <i className="fa-solid fa-person-dolly-empty pright"></i>
+    //                   </ListItemDecorator>
+    //                   {t("entities:load.others.tonu")}
+    //                 </MenuItem>
+    //               )}
+    //               <MenuItem onClick={() => setOpenDuplicate(true)}>
+    //                 <ListItemDecorator>
+    //                   <i className="fa-solid fa-clone pright"></i>
+    //                 </ListItemDecorator>
+    //                 {t("global.duplicate")}
+    //               </MenuItem>
+    //               <Tooltip
+    //                 title={
+    //                   !recalculateBody.customer_id
+    //                     ? "The load has no customer selected"
+    //                     : ""
+    //                 }
+    //               >
+    //                 <span>
+    //                   <MenuItem
+    //                     onClick={handleRecalculate}
+    //                     disabled={!recalculateBody.customer_id}
+    //                   >
+    //                     <ListItemDecorator>
+    //                       <i className="fa-solid fa-arrows-rotate pright"></i>
+    //                     </ListItemDecorator>
+    //                     {t("components:lepShipcons.recalculate")}
+    //                   </MenuItem>
+    //                 </span>
+    //               </Tooltip>
+    //               {!load?.cancelled ? (
+    //                 <Tooltip
+    //                   title={
+    //                     load?.active
+    //                       ? "The load is already active"
+    //                       : blockingTasks.length > 0
+    //                       ? "The load is not complete, check the Tasks List for more details"
+    //                       : ""
+    //                   }
+    //                 >
+    //                   <span>
+    //                     <MenuItem
+    //                       onClick={handleValidate}
+    //                       disabled={load?.active || blockingTasks.length > 0}
+    //                     >
+    //                       <ListItemDecorator>
+    //                         <i className="fa-solid fa-truck-fast pright"></i>
+    //                       </ListItemDecorator>
+    //                       {t("components:lepShipcons.validate")}
+    //                     </MenuItem>
+    //                   </span>
+    //                 </Tooltip>
+    //               ) : null}
+    //             </Menu>
+    //           </Dropdown>
+    //         </Grid>
+    //         <Grid>
+    //           <Tooltip title="Open Load Quick View">
+    //             <IconButton
+    //               size="sm"
+    //               variant="soft"
+    //               color="primary"
+    //               onClick={() => {
+    //                 if (load) dispatch(setLoadDrawerSelectedLoadID(load.id));
+    //               }}
+    //             >
+    //               <i className="fa-solid fa-magnifying-glass" />
+    //             </IconButton>
+    //           </Tooltip>
+    //         </Grid>
+    //       </Grid>
+    //     </Grid>
+    //     <Drawer
+    //       open={open}
+    //       anchor={"left"}
+    //       onClose={handleClose}
+    //       sx={{
+    //         zIndex: 1200,
+    //       }}
+    //       slotProps={{
+    //         content: {
+    //           sx: {
+    //             width: "fit-content",
+    //           },
+    //         },
+    //       }}
+    //     >
+    //       <Box mt={{ xs: "138px", sm: "98px" }} p={2} maxWidth={300}>
+    //         <Grid container spacing={0} columnGap={1}>
+    //           <Grid>
+    //             <Box display={"flex"} alignItems={"center"}>
+    //               <Typography level={"h4"}>#</Typography>
+    //               <NerdClickToCopy typographyProps={{ level: "h4" }}>
+    //                 {`${load?.id}`}
+    //               </NerdClickToCopy>
+    //             </Box>
+    //           </Grid>
+    //           {load?.customerDoNotContact ? (
+    //             <Grid>
+    //               <Tooltip size="sm" title="Do not contact">
+    //                 <Chip color="danger">
+    //                   <i className="fa-solid fa-phone-slash"></i>
+    //                 </Chip>
+    //               </Tooltip>
+    //             </Grid>
+    //           ) : null}
+    //           <Grid xs={12}>
+    //             <Box display={"flex"}>
+    //               {load?.referenceNumber ? (
+    //                 <NerdClickToCopy typographyProps={{ level: "body-sm" }}>
+    //                   {`(${load?.referenceNumber})`}
+    //                 </NerdClickToCopy>
+    //               ) : (
+    //                 "(Not Set)"
+    //               )}
+    //             </Box>
+    //           </Grid>
+    //           {load?.status ? (
+    //             <Grid>
+    //               <StatusStepper
+    //                 currentStep={STATUS_MAP[load?.status]}
+    //                 stepsLength={6}
+    //                 disableAnimation
+    //               />
+    //             </Grid>
+    //           ) : null}
+    //         </Grid>
+    //         <Sheet
+    //           variant="outlined"
+    //           sx={{
+    //             borderRadius: 5,
+    //             p: 1,
+    //             mt: 2,
+    //           }}
+    //         >
+    //           <Table
+    //             color="neutral"
+    //             sx={{
+    //               "& th": {
+    //                 whiteSpace: "normal",
+    //                 wordBreak: "break-word",
+    //               },
+    //             }}
+    //           >
+    //             <tbody>
+    //               <tr>
+    //                 <th scope="row">{t("entities:quote.entity")} #</th>
+    //                 <td>
+    //                   <NerdClickToCopy
+    //                     typographyProps={{
+    //                       display: "inline",
+    //                     }}
+    //                   >
+    //                     {load?.quoteID}
+    //                   </NerdClickToCopy>
+    //                 </td>
+    //               </tr>
+    //               <tr>
+    //                 <th scope="row">{t("entities:load.others.csr_name")}</th>
+    //                 <td>{load?.csrName}</td>
+    //               </tr>
+    //               <tr>
+    //                 <th scope="row">{t("entities:load.others.customer")}</th>
+    //                 <td>{load?.customer}</td>
+    //               </tr>
+    //               <tr>
+    //                 <th scope="row">{t("entities:load.others.base_rate")}</th>
+    //                 <td>
+    //                   {load?.baserate ? usdFormatter.format(load?.baserate) : "-"}
+    //                 </td>
+    //               </tr>
+    //               <tr>
+    //                 <th scope="row">{t("entities:load.others.fuel_rate")}</th>
+    //                 <td>
+    //                   {load?.fuelCost ? usdFormatter.format(load?.fuelCost) : "-"}
+    //                 </td>
+    //               </tr>
+    //               <tr>
+    //                 <th scope="row">{t("entities:load.others.total")}</th>
+    //                 <td>
+    //                   {load?.totalRate
+    //                     ? usdFormatter.format(load?.totalRate)
+    //                     : "-"}
+    //                 </td>
+    //               </tr>
+    //               <tr>
+    //                 <th scope="row">{t("entities:load.others.margin")}</th>
+    //                 <td>
+    //                   {load?.margin ? usdFormatter.format(load?.margin) : "-"}
+    //                 </td>
+    //               </tr>
+    //               <tr>
+    //                 <th scope="row">{t("entities:load.others.invoice_date")}</th>
+    //                 <td>
+    //                   {load?.invoiceDate
+    //                     ? DateTime.fromISO(load.invoiceDate)
+    //                         .toUTC()
+    //                         // eslint-disable-next-line i18next/no-literal-string
+    //                         .toFormat("LL/dd/yyyy")
+    //                     : "-"}
+    //                 </td>
+    //               </tr>
+    //             </tbody>
+    //           </Table>
+    //         </Sheet>
+    //       </Box>
+    //     </Drawer>
+    //     <Modal open={openDuplicate} onClose={handleCloseDuplicate}>
+    //       <ModalDialog
+    //         aria-labelledby="modal-dialog-title"
+    //         layout="center"
+    //         sx={(theme) => ({
+    //           width: 500,
+    //           [theme.breakpoints.only("xs")]: {
+    //             top: 0,
+    //             left: 0,
+    //             right: 0,
+    //             bottom: 0,
+    //             border: 0,
+    //             borderRadius: 0,
+    //             transform: "initial",
+    //             maxWidth: "initial",
+    //             maxHeight: "initial",
+    //             width: "initial",
+    //           },
+    //         })}
+    //       >
+    //         <Typography id="modal-dialog-title" level="h2">
+    //           {t("entities:load.others.duplicate_load")}
+    //         </Typography>
+    //         <Grid container spacing={1} overflow={"auto"}>
+    //           <Grid xs={12}>
+    //             <FormControl>
+    //               <FormLabel>
+    //                 {t("entities:invoice.attributes.referenceNumber")}
+    //               </FormLabel>
+    //               <Input
+    //                 slotProps={{
+    //                   input: {
+    //                     ref: refNumberRef,
+    //                   },
+    //                 }}
+    //               />
+    //             </FormControl>
+    //           </Grid>
+    //           <Grid xs={12}>
+    //             <NerdDatePicker
+    //               value={pickupDate}
+    //               onChange={(newVal) => setPickupDate(newVal)}
+    //               label={t("entities:load.others.pickup_date")}
+    //             />
+    //           </Grid>
+    //           <Grid xs={12}>
+    //             <FormControl>
+    //               <FormLabel>{t("entities:load.others.total_rate")}</FormLabel>
+    //               <NerdCurrencyField
+    //                 value={totalRate}
+    //                 onChange={(v) => setTotalRate(v)}
+    //                 maxDigitAfterDecimal={4}
+    //                 signed
+    //               />
+    //             </FormControl>
+    //           </Grid>
+    //         </Grid>
+    //         <Box
+    //           sx={{
+    //             display: "flex",
+    //             gap: 1,
+    //             justifyContent: "flex-end",
+    //             alignItems: "end",
+    //             pt: 2,
+    //             height: "100%",
+    //           }}
+    //         >
+    //           <Button
+    //             onClick={handleCloseDuplicate}
+    //             color="neutral"
+    //             variant="soft"
+    //           >
+    //             {t("global.Cancel")}
+    //           </Button>
+    //           <Button loading={duplicateLoading} onClick={handleDuplicate}>
+    //             {t("global.duplicate")}
+    //           </Button>
+    //         </Box>
+    //       </ModalDialog>
+    //     </Modal>
+    //     <DownloadDocumentModal
+    //       open={openDownload}
+    //       onClose={() => setOpenDownload(false)}
+    //     />
+    //     <Divider sx={{ height: 1 }} />
+    //   </>
+    // );
 }
 const DownloadDocumentModal = ({ open, onClose, }) => {
-    const { id } = useParams();
+    const id = useContext(LoadIDContext);
     const { t } = useTranslation("common", { i18n: salesKitI18n });
     const [type, setType] = useState("load_sheet");
     const params = {