@nerdjs/sales-kit 2.1.9 → 2.2.1

package/dist/hooks/lep/lepShipcons.js

@@ -0,0 +1,1353 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Autocomplete, AutocompleteOption, Button, Checkbox, CircularProgress, FormControl, FormLabel, Grid, Input, ListItemContent, Modal, ModalDialog, Option, Select, Skeleton, Switch, Textarea, Typography, Box, Tooltip, Sheet, } from "@mui/joy";
+import { Popper } from "@mui/base";
+import { ListItemIcon, Menu, MenuItem } from "@mui/material";
+import { CopyInputDecorator, NerdDatePicker, NerdTimePicker, showNotification, } from "@nerdjs/nerd-ui";
+import { DateTime } from "luxon";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { LepDateInputCell } from "./lepDateInputCell";
+import { LepTimeInputCell } from "./lepTimeInputCell";
+import { VirtualizedAutocompleteList } from "./virtualizedAutocompleteList";
+import { addShipconsTask, setShipconsTasks, } from "../../redux/shipconsTasksSlice/shipconsTasksSlice";
+import { nanoid } from "@reduxjs/toolkit";
+import { GridActionsCellItem, useGridApiRef, } from "@mui/x-data-grid-premium";
+import { LepStyledDataGrid } from "./lepStyledDataGrid";
+import { NerdEmailValidator, useGetCurrentUserQuery, } from "@nerdjs/account-kit";
+import { quoteRecalculateBodySelector } from "../../redux/quote/quoteSelectors";
+import { setRecalculateBody } from "../../redux/quote";
+import { addLoadInfoTask } from "../../redux/loadInfoTasksSlice/loadInfoTasksSlice";
+import { getCSRS } from "./helpers";
+import { locationEntityTypeGuard, Person, } from "../../entities";
+import { useGetShipconsQuery, useGetLoadQuery, useGetPeopleQuery, useGetCustomerPeopleQuery, useUpdateShipconV1Mutation, useDeleteShipconV1Mutation, useReorderShipconsMutation, getShipconsSelectors, useShipconCreateUserNoteMutation, useEmailArcherFileMutation, useGetLoadFilesQuery, useGetShipconQuery, useCreateShipconV1Mutation, useGetAppointmentNotesQuery, getAppointmentNotesSelectors, useGetAppointmentNoteTypesQuery, useGetLocationV1Query, useUpdateLocationV1Mutation, useCreateAppointmentIssueMutation, useGetAppointmentIssueCategoryFilteredByRoleQuery, useLazyGetAppointmentIssueSubcategoriesQuery, getAppointmentIssueSubcategoriesSelectors, useGetCarrierNamesLiteQuery, useGetNodeNamesQuery, getNodeNamesSelectors, useGetDriverNamesQuery, getDriverNamesSelectors, getPeopleSelectors, useUpdateLoadV1Mutation, } from "../../redux";
+import { LocationFormSales } from "../locationsForm";
+import { LocationInputCell, LocationCell, LocationInput } from "../quote";
+const KEYS_MAP = {
+    stopNumber: "stop_number",
+    shipConsType: "ship_cons_type",
+    dropStop: "drop_stop",
+    standbyAppointment: "standby_appointment",
+    stopDate: "stop_date",
+    timeFrom: "time_from",
+    timeTo: "time_to",
+    locationID: "location_id",
+    referenceNumber: "reference_number",
+    confirmationNumber: "confirmation_number",
+};
+/**
+ * LepShipcons
+ *
+ * @returns {null} LepShipcons
+ */
+export function LepShipcons({ quoteRoute }) {
+    const { id } = useParams();
+    const params = {
+        filters: JSON.stringify([
+            { name: "ship_cons.load_id", comparison: "eq", value: id },
+        ]),
+        sorter: JSON.stringify([{ name: "ship_cons.stop_number", asc: true }]),
+    };
+    const { isLoading } = useGetShipconsQuery(params, {
+        skip: Number.isNaN(Number(id)),
+    });
+    const { data: load, isLoading: isLoadingLoad } = useGetLoadQuery(Number(id), {
+        skip: Number.isNaN(Number(id)),
+    });
+    const params2 = {
+        filters: JSON.stringify([
+            { name: "people.company_id", comparison: "eq", value: 1 },
+            { name: "people.active", comparison: "eq", value: true },
+        ]),
+    };
+    const { isFetching } = useGetPeopleQuery(params2);
+    const { isFetching: isFetchingContacts } = useGetCustomerPeopleQuery(load?.customerID || 0, {
+        skip: !load?.customerID,
+    });
+    if (isLoading || isFetchingContacts || isFetching || isLoadingLoad) {
+        return (_jsxs(Box, { height: "100%", children: [_jsx(Box, { display: "flex", sx: {
+                        mb: 1,
+                    }, children: _jsx(Box, { ml: { xs: "0", lg: "auto" }, children: _jsxs(Grid, { container: true, spacing: 1, alignItems: "center", children: [_jsx(Grid, { xs: 12, md: "auto", children: _jsx(Skeleton, { variant: "rectangular", width: 160, height: 35 }) }), _jsx(Grid, { xs: 12, md: "auto", children: _jsx(Skeleton, { variant: "rectangular", width: 160, height: 35 }) }), _jsx(Grid, { xs: 12, md: "auto", children: _jsx(Skeleton, { variant: "rectangular", width: 100, height: 35 }) })] }) }) }), _jsx(Skeleton, { variant: "rectangular", width: "100%", height: 80 }), _jsx(Box, { display: "flex", sx: {
+                        mt: 2,
+                        mb: 1,
+                    }, children: _jsx(Skeleton, { variant: "rectangular", width: 92, height: 28 }) })] }));
+    }
+    else
+        return _jsx(Content, { quoteRoute: quoteRoute });
+}
+/**
+ * LepShipcons
+ *
+ * @returns {null} LepShipcons
+ */
+function Content({ quoteRoute }) {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const [updateShipcon] = useUpdateShipconV1Mutation();
+    const [deleteShipcon] = useDeleteShipconV1Mutation();
+    const [reorderShipcons] = useReorderShipconsMutation();
+    const { id } = useParams();
+    const params = {
+        filters: JSON.stringify([
+            { name: "ship_cons.load_id", comparison: "eq", value: id },
+        ]),
+        sorter: JSON.stringify([{ name: "ship_cons.stop_number", asc: true }]),
+    };
+    const { isFetching } = useGetShipconsQuery(params, {
+        skip: Number.isNaN(Number(id)),
+    });
+    const selectAllShipcons = useMemo(() => getShipconsSelectors(params).selectAll, [params]);
+    const shipcons = useSelector(selectAllShipcons);
+    const apiRef = useGridApiRef();
+    const [aptNotesShipConID, setAptNotesShipConID] = useState(null);
+    const [contactLocationID, setContactLocationID] = useState(null);
+    const [notesLocationID, setNotesLocationID] = useState(null);
+    const [issueShipconID, setIssueShipconID] = useState();
+    const [showIssuesShipconID, setShowIssuesShipconID] = useState(null);
+    const [stagedShipcon, setStagedShipcon] = useState(null);
+    const [scheduleEmailStagedShipcon, setScheduleEmailStagedShipcon] = useState(null);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [createNote] = useShipconCreateUserNoteMutation();
+    const openSchedulingMenu = Boolean(anchorEl);
+    const handleClose = () => {
+        setAnchorEl(null);
+        setStagedShipcon(null);
+    };
+    const [locationFormOpen, setLocationFormOpen] = useState({
+        open: false,
+        place: undefined,
+    });
+    const onRowUpdate = (newRow, oldRow) => {
+        const body = {};
+        Object.keys(newRow).forEach((key) => {
+            const k = key;
+            if (oldRow[k] !== newRow[k])
+                body[KEYS_MAP[k] || k] = newRow[k];
+        });
+        if (Object.entries(body).length > 0 && newRow.id) {
+            return updateShipcon({
+                id: newRow.id,
+                body: { shipcon: body },
+            })
+                .unwrap()
+                .then(() => {
+                dispatch(addShipconsTask(test(newRow)));
+                return newRow;
+            })
+                .catch(() => {
+                return oldRow;
+            });
+        }
+        return oldRow;
+    };
+    const test = (s) => {
+        const task = {
+            label: "",
+            status: "warning",
+            uuid: nanoid(),
+            order: 2,
+        };
+        if (s.quoteCity?.toLowerCase() != s.city?.toLowerCase() ||
+            s.quoteState != s.state ||
+            s.quoteZip != s.zip) {
+            const label = `Stop #${s.stopNumber} city, state, or zip differs from the quote. Recalculate the quote.`;
+            task.label = label;
+            task.step = {
+                content: label,
+                selector: ".ShipconsTaskItem-recalculate",
+            };
+            task.status = "danger";
+        }
+        else if (!s.locationID || !s.address?.verified) {
+            const label = `Stop #${s.stopNumber} location is not verified.`;
+            task.label = label;
+            task.step = {
+                content: label,
+                selector: `.ShipconsTaskItem-${s.id}-location`,
+            };
+            task.status = "danger";
+        }
+        else if (!s.referenceNumber) {
+            const label = `Stop #${s.stopNumber} has no reference number (If no reference please note 'No PO')`;
+            task.label = label;
+            task.step = {
+                content: label,
+                selector: `.ShipconsTaskItem-${s.id}-referenceNumber`,
+            };
+            task.status = "danger";
+        }
+        else if (!s.stopDate) {
+            const label = `Stop #${s.stopNumber} has no scheduled date.`;
+            task.label = label;
+            task.step = {
+                content: label,
+                selector: `.ShipconsTaskItem-${s.id}-date`,
+            };
+        }
+        else if ((s.shipConsType == "shipper" && !s.timeTo) || !s.timeFrom) {
+            const label = `Stop #${s.stopNumber} has no scheduled time.`;
+            task.label = label;
+            task.step = {
+                content: label,
+                selector: s.shipConsType === "shipper"
+                    ? ".LepPanelRoot"
+                    : `.ShipconsTaskItem-${s.id}-startTime`,
+                highlightedSelectors: s.shipConsType === "shipper"
+                    ? [
+                        `.ShipconsTaskItem-${s.id}-startTime`,
+                        `.ShipconsTaskItem-${s.id}-endTime`,
+                    ]
+                    : [],
+            };
+        }
+        else {
+            task.label = `Stop #${s.stopNumber} is valid.`;
+            task.status = "success";
+        }
+        if (task.step)
+            task.tabIndex = 0;
+        return {
+            shipconID: s.id,
+            task,
+        };
+    };
+    useEffect(() => {
+        if (shipcons) {
+            let tasks = {};
+            shipcons.forEach((s) => {
+                const item = test(s);
+                tasks = { ...tasks, [item.shipconID]: item.task };
+            });
+            dispatch(setShipconsTasks(tasks));
+            setTimeout(() => apiRef.current?.autosizeColumns({
+                includeHeaders: true,
+                includeOutliers: true,
+            }), 200);
+        }
+    }, [shipcons]);
+    const handleDeleteShipcon = (id) => {
+        deleteShipcon(id);
+    };
+    const handleRowOrderChange = useCallback((params) => {
+        const rowsClone = [...shipcons];
+        const row = rowsClone.splice(params.oldIndex, 1)[0];
+        rowsClone.splice(params.targetIndex, 0, row);
+        reorderShipcons(rowsClone.map((r) => r.id));
+    }, [shipcons]);
+    const columns = useMemo(() => [
+        {
+            field: "stopNumber",
+            headerName: "Stop #",
+            editable: true,
+            sortable: false,
+        },
+        {
+            field: "shipConsType",
+            headerName: "Kind",
+            type: "singleSelect",
+            editable: true,
+            valueOptions: [
+                { value: "shipper", label: "Shipper" },
+                { value: "consignee", label: "Consignee" },
+            ],
+            sortable: false,
+        },
+        {
+            field: "dropStop",
+            headerName: "Drop Stop",
+            type: "boolean",
+            renderCell(params) {
+                return params.value ? (_jsx("i", { className: "fa-solid fa-check" })) : (_jsx("i", { className: "fa-solid fa-xmark" }));
+            },
+            editable: true,
+            sortable: false,
+        },
+        {
+            field: "standbyAppointment",
+            headerName: "Standby apt",
+            type: "boolean",
+            renderCell(params) {
+                return params.value ? (_jsx("i", { className: "fa-solid fa-check" })) : (_jsx("i", { className: "fa-solid fa-xmark" }));
+            },
+            editable: true,
+            sortable: false,
+        },
+        {
+            field: "stopDate",
+            headerName: "Date",
+            minWidth: 162,
+            editable: true,
+            renderCell: (p) => p.row.stopDate
+                ? DateTime.fromISO(p.row.stopDate).toUTC().toFormat("LL/dd/yyyy")
+                : "",
+            renderEditCell(params) {
+                return _jsx(LepDateInputCell, { ...params });
+            },
+            cellClassName: (p) => `ShipconsTaskItem-${p.id}-date`,
+            sortable: false,
+        },
+        {
+            field: "timeFrom",
+            headerName: "From",
+            editable: true,
+            minWidth: 102,
+            renderCell: (p) => p.row.timeFrom
+                ? DateTime.fromISO(p.row.timeFrom).toUTC().toFormat("HH:mm")
+                : "",
+            renderEditCell(params) {
+                return _jsx(LepTimeInputCell, { ...params });
+            },
+            cellClassName: (p) => `ShipconsTaskItem-${p.id}-startTime`,
+            sortable: false,
+        },
+        {
+            field: "timeTo",
+            headerName: "To",
+            editable: true,
+            minWidth: 102,
+            renderCell: (p) => p.row.timeTo
+                ? DateTime.fromISO(p.row.timeTo).toUTC().toFormat("HH:mm")
+                : "",
+            renderEditCell(params) {
+                return _jsx(LepTimeInputCell, { ...params });
+            },
+            cellClassName: (p) => p.row.shipConsType === "shipper"
+                ? `ShipconsTaskItem-${p.id}-endTime`
+                : "",
+            sortable: false,
+        },
+        {
+            field: "locationID",
+            headerName: "Location",
+            renderEditCell: (p) => (_jsx(Box, { display: "flex", width: "100%", id: `location${p.row.id}${p.row.stopNumber}`, children: _jsx(LocationInputCell, { customerPortal: false, ...p, onEditLocationClick: (location, id, field) => {
+                        setLocationFormOpen({
+                            open: true,
+                            place: location,
+                            id,
+                            field,
+                        });
+                    } }) })),
+            renderCell: (p) => (_jsx(LocationCell, { ...p, onEditLocationClick: (location, id, field) => {
+                    setLocationFormOpen({
+                        open: true,
+                        place: location,
+                        id,
+                        field,
+                    });
+                } })),
+            valueSetter(params) {
+                if (params.value && typeof params.value != "string")
+                    if (typeof params.value != "number")
+                        return {
+                            ...params.row,
+                            locationID: params.value.id,
+                        };
+                    else
+                        return {
+                            ...params.row,
+                            locationID: params.value,
+                        };
+                else
+                    return { ...params.row, locationID: 0 };
+            },
+            editable: true,
+            minWidth: 250,
+            cellClassName: (p) => `ShipconsTaskItem-${p.id}-location`,
+            sortable: false,
+        },
+        {
+            field: "line1",
+            headerName: "Address",
+            minWidth: 150,
+            valueGetter(params) {
+                return params.row.address?.line1;
+            },
+            sortable: false,
+        },
+        {
+            field: "zip",
+            headerName: "Zipcode",
+            type: "string",
+            editable: true,
+            sortable: false,
+        },
+        {
+            field: "city",
+            headerName: "City",
+            type: "string",
+            editable: false,
+            sortable: false,
+        },
+        {
+            field: "state",
+            headerName: "State",
+            type: "string",
+            editable: false,
+            sortable: false,
+        },
+        {
+            field: "referenceNumber",
+            headerName: "References",
+            type: "string",
+            editable: true,
+            cellClassName: (p) => `ShipconsTaskItem-${p.id}-referenceNumber`,
+            sortable: false,
+        },
+        {
+            field: "confirmationNumber",
+            headerName: "Confirmation",
+            type: "string",
+            editable: true,
+            sortable: false,
+        },
+        {
+            field: "actions",
+            type: "actions",
+            headerName: "Actions",
+            width: 100,
+            cellClassName: "actions",
+            getActions: ({ row }) => [
+                _jsx(GridActionsCellItem, { showInMenu: true, icon: _jsx("i", { className: "fa-duotone fa-notes" }), label: "Show Appointment Notes", onClick: () => {
+                        if (row.id)
+                            setAptNotesShipConID(row.id);
+                    }, color: "inherit" }, "showAptNotes"),
+                _jsx(GridActionsCellItem, { showInMenu: true, icon: _jsx("i", { className: "fa-duotone fa-address-book" }), label: "Show Contact", disabled: !row.locationID, onClick: () => {
+                        if (row.locationID)
+                            setContactLocationID(row.locationID);
+                    }, color: "inherit" }, "showContact"),
+                _jsx(GridActionsCellItem, { showInMenu: true, icon: _jsx("i", { className: "fa-duotone fa-note" }), label: "Show Notes", disabled: !row.locationID, onClick: () => {
+                        if (row.locationID)
+                            setNotesLocationID(row.locationID);
+                    }, color: "inherit" }, "showNotes"),
+                _jsx(GridActionsCellItem, { showInMenu: true, icon: _jsx("i", { className: "fa-duotone fa-brake-warning" }), label: "Add Issue", onClick: () => {
+                        if (row.id)
+                            setIssueShipconID(row.id);
+                    }, color: "inherit" }, "add issue"),
+                _jsx(GridActionsCellItem, { showInMenu: true, icon: _jsx("i", { className: "fa-duotone fa-trash" }), label: "Delete Stop", onClick: () => {
+                        if (row.id) {
+                            handleDeleteShipcon(row.id);
+                        }
+                    }, color: "inherit" }, "delete shipcon"),
+                _jsx(GridActionsCellItem, { onClick: (e) => {
+                        setAnchorEl(e.currentTarget);
+                        setStagedShipcon(row || null);
+                    }, label: "Scheduling shortcuts", icon: _jsx(Tooltip, { title: "Scheduling shortcuts", size: "sm", children: _jsx("i", { className: "fa-duotone fa-calendar-days" }) }) }, "scheduling note"),
+            ],
+        },
+        {
+            field: "appointmentIssues",
+            headerName: "Issues",
+            width: 60,
+            cellClassName: "actions",
+            renderCell(params) {
+                const [anchorEl, setAnchorEl] = useState(null);
+                const handlePopoverOpen = (event) => {
+                    setAnchorEl(event.currentTarget);
+                };
+                const handlePopoverClose = () => {
+                    setAnchorEl(null);
+                };
+                const open = Boolean(anchorEl);
+                return params.value ? (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "danger", "aria-owns": open ? "mouse-over-popover" : undefined, "aria-haspopup": "true", onMouseEnter: handlePopoverOpen, onMouseLeave: handlePopoverClose, children: _jsx("i", { className: "fa-solid fa-circle-exclamation", style: {
+                                    fontSize: "inherit",
+                                } }) }), _jsx(Popper, { style: {
+                                pointerEvents: "none",
+                            }, open: open, anchorEl: anchorEl, children: _jsx(Sheet, { sx: (theme) => ({
+                                    boxShadow: theme.shadow.lg,
+                                }), children: _jsx(Box, { sx: {
+                                        p: 1,
+                                        maxWidth: 300,
+                                    }, children: params.value.map((issue) => (_jsxs(Typography, { level: "body-xs", sx: {
+                                            wordBreak: "break-word",
+                                        }, children: [_jsxs(Typography, { fontWeight: "bold", children: [issue.appointment_issue_category_name, " -", " ", _jsx("b", { children: issue.appointment_issue_subcategory_name }), " "] }), issue.notes ? `: ${issue.notes}` : ""] }, issue.id))) }) }) })] })) : (_jsx(Typography, { color: "success", children: _jsx("i", { className: "fa-solid fa-circle-check" }) }));
+            },
+        },
+    ], []);
+    return (_jsxs(Box, { sx: { display: "grid", width: "100%" }, children: [_jsx(Box, { display: "flex", sx: {
+                    mb: 1,
+                }, children: _jsx(ActionBar, { quoteRoute: quoteRoute }) }), _jsx(LepStyledDataGrid, { loading: isFetching, rows: shipcons, autoHeight: true, rowReordering: true, onRowOrderChange: handleRowOrderChange, hideFooter: true, apiRef: apiRef, editMode: "row", onCellClick: (e) => {
+                    if (apiRef.current.isCellEditable(e) &&
+                        apiRef.current.getRowMode(e.id) === "view")
+                        apiRef.current?.startRowEditMode({ id: e.id });
+                }, processRowUpdate: onRowUpdate, density: "compact", initialState: {
+                    pinnedColumns: {
+                        right: ["actions", "appointmentIssues"],
+                    },
+                }, columns: columns, getRowClassName: (params) => {
+                    if (params.row.quoteCity?.toLowerCase() !=
+                        params.row.city?.toLowerCase() ||
+                        params.row.quoteState != params.row.state ||
+                        params.row.quoteZip != params.row.zip)
+                        return "grid-row-red";
+                    else if (!params.row.locationID ||
+                        !params.row.stopDate ||
+                        (params.row.shipConsType == "shipper" && !params.row.timeTo) ||
+                        !params.row.timeFrom ||
+                        !params.row.referenceNumber) {
+                        return "grid-row-yellow";
+                    }
+                    else if (!params.row.address?.verified)
+                        return "grid-row-green";
+                    else
+                        return "";
+                } }), _jsx(LocationFormSales, { onCreateLocation: (value) => {
+                    if (locationFormOpen.id && locationFormOpen.field) {
+                        apiRef.current.startRowEditMode({
+                            fieldToFocus: locationFormOpen.field,
+                            id: locationFormOpen.id,
+                        });
+                        setTimeout(() => {
+                            if (locationFormOpen.id && locationFormOpen.field)
+                                apiRef.current.setEditCellValue({
+                                    field: locationFormOpen.field,
+                                    id: locationFormOpen.id,
+                                    value: value.id,
+                                });
+                        }, 100);
+                    }
+                }, open: locationFormOpen.open, place: locationFormOpen.place, onClose: () => setLocationFormOpen({ open: false }) }), _jsx(AptNotes, { close: () => setAptNotesShipConID(null), shipConID: aptNotesShipConID }), _jsx(LocationContact, { locationID: contactLocationID, close: () => setContactLocationID(null) }), _jsx(LocationNotes, { locationID: notesLocationID, close: () => setNotesLocationID(null) }), _jsx(AppointmentIssueForm, { shipconID: issueShipconID, loadID: Number.isNaN(Number(id)) ? undefined : Number(id), close: () => setIssueShipconID(undefined) }), _jsx(AppointmentIssues, { shipconID: showIssuesShipconID, close: () => setShowIssuesShipconID(null) }), _jsx(ScheduleEmail, { shipcon: scheduleEmailStagedShipcon, close: () => setScheduleEmailStagedShipcon(null), shipcons: shipcons }), _jsxs(Menu, { anchorEl: anchorEl, open: openSchedulingMenu, onClose: handleClose, slotProps: {
+                    paper: {
+                        elevation: 1,
+                    },
+                }, children: [_jsxs(MenuItem, { onClick: () => {
+                            if (stagedShipcon?.id)
+                                createNote({
+                                    note: `Emailed ${stagedShipcon?.name}`,
+                                    shipconID: stagedShipcon.id,
+                                });
+                            handleClose();
+                        }, children: [_jsx(ListItemIcon, { children: _jsx("i", { className: "fa-duotone fa-envelope" }) }), t("components:lepShipcons.email_note")] }), _jsxs(MenuItem, { onClick: () => {
+                            if (stagedShipcon?.id)
+                                createNote({
+                                    note: `Called ${stagedShipcon.name}`,
+                                    shipconID: stagedShipcon.id,
+                                });
+                            handleClose();
+                        }, children: [_jsx(ListItemIcon, { children: _jsx("i", { className: "fa-duotone fa-phone" }) }), t("components:lepShipcons.call_note")] }), _jsxs(MenuItem, { onClick: () => {
+                            if (stagedShipcon?.id)
+                                createNote({
+                                    note: `Requested appt. on portal for ${stagedShipcon?.name}`,
+                                    shipconID: stagedShipcon.id,
+                                });
+                            handleClose();
+                        }, children: [_jsx(ListItemIcon, { children: _jsx("i", { className: "fa-duotone fa-desktop" }) }), t("components:lepShipcons.portal_note")] }), _jsxs(MenuItem, { onClick: () => {
+                            if (stagedShipcon?.id)
+                                createNote({
+                                    note: `Customer will request appt. for ${stagedShipcon?.name}`,
+                                    shipconID: stagedShipcon.id,
+                                });
+                            handleClose();
+                        }, children: [_jsx(ListItemIcon, { children: _jsx("i", { className: "fa-duotone fa-user-headset" }) }), t("components:lepShipcons.customer_note")] }), _jsxs(MenuItem, { onClick: () => {
+                            setScheduleEmailStagedShipcon(stagedShipcon);
+                            handleClose();
+                        }, children: [_jsx(ListItemIcon, { children: _jsx("i", { className: "fa-duotone fa-paper-plane-top" }) }), t("components:lepShipcons.schedule_email")] }), _jsxs(MenuItem, { onClick: () => {
+                            handleClose();
+                            setShowIssuesShipconID(stagedShipcon?.id || null);
+                        }, children: [_jsx(ListItemIcon, { children: _jsx("i", { className: "fa-duotone fa-circle-exclamation" }) }), t("components:lepShipcons.view_appointment_issues")] })] })] }));
+}
+const ScheduleEmail = ({ shipcon, shipcons, close, }) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const [sendEmail, { isLoading }] = useEmailArcherFileMutation();
+    const { data: currentUser } = useGetCurrentUserQuery();
+    const { data: load } = useGetLoadQuery(Number(shipcon?.loadID), {
+        skip: Number.isNaN(Number(shipcon?.loadID)),
+    });
+    const { data: files } = useGetLoadFilesQuery(shipcon?.loadID || 0, {
+        skip: !shipcon?.loadID,
+    });
+    const [email, setEmail] = useState(shipcon?.address?.email || "");
+    const [isEmailValid, setIsEmailValid] = useState(true);
+    const [subject, setSubject] = useState(`${shipcon?.shipConsType == "shipper" ? "Pickup" : "Del"} Appt Req ${shipcon?.loadID || ""} - PO# ${shipcon?.referenceNumber || ""} (Del: ${shipcon?.finalDestination || ""})`);
+    const [fromEmail, setFromEmail] = useState(currentUser?.email || "");
+    const [isFromEmailValid, setIsFromEmailValid] = useState(true);
+    const [message, setMessage] = useState("");
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const getDefaultMessage = () => {
+        let message = `Requested ${shipcon?.shipConsType == "shipper" ? "pickup" : "delivery"} date ${shipcon?.stopDate
+            ? DateTime.fromISO(shipcon.stopDate).toUTC().toFormat("LL/dd")
+            : ""}\n\n`;
+        const firstShipper = (shipcons ? [...shipcons] : [])
+            ?.sort((a, b) => a.tripOrder && b.tripOrder ? a.tripOrder - b.tripOrder : 0)
+            .find((s) => s.shipConsType === "shipper");
+        const delivery = shipcons?.find((s) => s.shipConsType == "consignee");
+        const delAddress = delivery
+            ? `${delivery.name} (${delivery.address?.line1} ${delivery.city} ${delivery.state}, ${delivery.zip})`
+            : "";
+        message += `PO#: ${shipcon?.referenceNumber || ""}\n`;
+        message += `Pallets: ${shipcon?.pallets || ""}\n`;
+        message += `Weight: ${shipcon?.weight || ""}\n`;
+        if (shipcon?.pieces && shipcon.pieces > 0)
+            message += `Pieces: ${shipcon.pieces}\n`;
+        message += `Shipper: ${shipcons
+            ?.filter((s) => s.shipConsType === "shipper")
+            .map((s) => s.name)
+            .join(", ") || ""}\n${`${firstShipper?.city}, ${firstShipper?.state}` || ""}`;
+        message += `\n\nOur current records show the delivery as ${delAddress}, `;
+        message += `please advise if there are any discrepancies with location address, dock restrictions, pallet jack or liftgate needed.`;
+        return message;
+    };
+    useEffect(() => {
+        setMessage(getDefaultMessage());
+        setEmail(shipcon?.address?.email || "");
+        setSubject(`${shipcon?.shipConsType == "shipper" ? "Pickup" : "Del"} Appt Req ${shipcon?.loadID || ""} - PO# ${shipcon?.referenceNumber || ""} (Del: ${shipcon?.finalDestination || ""})`);
+        setIsEmailValid(true);
+        setIsFromEmailValid(true);
+        setSelectedFiles([]);
+        setFromEmail(currentUser?.email || "");
+    }, [shipcon?.id, shipcons, load]);
+    return (_jsx(Modal, { open: Boolean(shipcon), onClose: close, children: _jsxs(ModalDialog, { layout: "center", sx: (theme) => ({
+                [theme.breakpoints.only("xs")]: {
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    border: 0,
+                    borderRadius: 0,
+                    transform: "initial",
+                    maxWidth: "initial",
+                    maxHeight: "initial",
+                },
+            }), "aria-labelledby": "modal-title", children: [_jsx(Typography, { id: "modal-title", level: "h2", children: t("components:lepShipcons.schedule_email") }), _jsxs(Grid, { container: true, spacing: 1, overflow: "auto", children: [_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { error: !isEmailValid, children: [_jsx(FormLabel, { children: t("components:lepShipcons.email") }), _jsx(Input, { value: email, onChange: async (e) => {
+                                            setEmail(e.target.value);
+                                            const isValid = await NerdEmailValidator(e.target.value);
+                                            setIsEmailValid(isValid);
+                                        } })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.subject") }), _jsx(Input, { value: subject, onChange: (e) => setSubject(e.target.value) })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { error: !isFromEmailValid, children: [_jsx(FormLabel, { children: t("components:lepShipcons.from_email") }), _jsx(Input, { value: fromEmail, onChange: async (e) => {
+                                            setFromEmail(e.target.value);
+                                            const isValid = await NerdEmailValidator(e.target.value);
+                                            setIsFromEmailValid(isValid);
+                                        } })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.file") }), _jsx(Autocomplete, { value: selectedFiles, onChange: (_e, v) => setSelectedFiles(v), multiple: true, options: files?.filter((f) => ["PickUp Document", "Location Form"].includes(f.description)) || [], getOptionLabel: (o) => o.name, renderOption: (props, option) => (_createElement(AutocompleteOption, { ...props, key: option.id },
+                                            _jsxs(ListItemContent, { sx: { fontSize: "sm" }, children: [_jsx("b", { children: option.description }), _jsxs(Typography, { level: "body-xs", children: ["(", option.name, ")"] })] }))) })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.message") }), _jsx(Textarea, { value: message, onChange: (e) => setMessage(e.target.value), minRows: 8 })] }) })] }), _jsxs(Box, { sx: {
+                        display: "flex",
+                        gap: 1,
+                        justifyContent: "flex-end",
+                        alignItems: "end",
+                        pt: 2,
+                    }, children: [_jsx(Button, { onClick: close, color: "neutral", variant: "soft", children: t("global.cancel") }), _jsx(Button, { loading: isLoading, onClick: () => {
+                                sendEmail({
+                                    cc: `scheduling@whitearrow.com, ${currentUser?.email || ""}`,
+                                    email,
+                                    file_ids: selectedFiles.map((f) => f.id).toString(),
+                                    from: fromEmail,
+                                    message,
+                                    model_id: "0",
+                                    model_name: "",
+                                    subject,
+                                })
+                                    .unwrap()
+                                    .then(() => {
+                                    dispatch(showNotification({
+                                        autohide: true,
+                                        title: "Success",
+                                        body: "Your email was sent.",
+                                        severity: "success",
+                                        variant: "non-intrusive",
+                                    }));
+                                    close();
+                                })
+                                    .catch(() => {
+                                    return;
+                                });
+                            }, startDecorator: _jsx("i", { className: "fa-solid fa-paper-plane-top" }), children: t("common:global.send") })] })] }) }));
+};
+const AppointmentIssues = ({ shipconID, close, }) => {
+    const { t } = useTranslation();
+    const { data: shipcon, isFetching } = useGetShipconQuery(shipconID || 0, {
+        skip: !shipconID,
+    });
+    const columns = [
+        {
+            field: "id",
+            headerName: "ID",
+            flex: 1,
+        },
+        {
+            field: "created_at",
+            headerName: "Date",
+            valueFormatter(params) {
+                return params.value
+                    ? DateTime.fromISO(params.value).toUTC().toFormat("L/dd/yyyy HH:mm")
+                    : "";
+            },
+            flex: 1,
+        },
+        {
+            field: "appointment_issue_category_name",
+            headerName: "Category",
+            flex: 1,
+        },
+        {
+            field: "appointment_issue_subcategory_name",
+            headerName: "Sub Category",
+            flex: 1,
+        },
+        {
+            field: "notes",
+            headerName: "Notes",
+            flex: 1,
+        },
+    ];
+    return (_jsx(Modal, { open: Boolean(shipconID), onClose: close, children: _jsx(ModalDialog, { layout: "center", sx: (theme) => ({
+                [theme.breakpoints.only("xs")]: {
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    border: 0,
+                    borderRadius: 0,
+                    transform: "initial",
+                    maxWidth: "initial",
+                    maxHeight: "initial",
+                },
+            }), "aria-labelledby": "modal-title", children: isFetching ? (_jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    height: "100%",
+                }, children: _jsx(CircularProgress, {}) })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { id: "modal-title", level: "h2", children: "Appointment Issues" }), _jsx(Box, { sx: {
+                            display: "grid",
+                            width: { xs: "100%", sm: 800 },
+                            height: { xs: "100%", sm: 450 },
+                        }, children: _jsx(LepStyledDataGrid, { rows: shipcon?.appointmentIssues || [], columns: columns, hideFooter: true }) }), _jsx(Box, { sx: {
+                            display: "flex",
+                            gap: 1,
+                            justifyContent: "flex-end",
+                            alignItems: "end",
+                            pt: 2,
+                        }, children: _jsx(Button, { onClick: close, color: "neutral", variant: "soft", children: t("global.cancel") }) })] })) }) }));
+};
+const AddStop = ({ open, close }) => {
+    const { id } = useParams();
+    const params = {
+        filters: JSON.stringify([
+            { name: "ship_cons.load_id", comparison: "eq", value: id },
+        ]),
+        sorter: JSON.stringify([{ name: "ship_cons.stop_number", asc: true }]),
+    };
+    const { data: load } = useGetLoadQuery(Number(id), { skip: !id || !open });
+    const { t } = useTranslation();
+    const [zip, setZip] = useState("");
+    const [locationID, setLocationID] = useState();
+    const [type, setType] = useState("shipper");
+    const [dropStop, setDropStop] = useState(false);
+    const [createShipcon, { isLoading }] = useCreateShipconV1Mutation();
+    useGetShipconsQuery(params);
+    const selectAllShipcons = useMemo(() => getShipconsSelectors(params).selectAll, [params]);
+    const shipcons = useSelector(selectAllShipcons);
+    const handleClose = () => {
+        close();
+        setDropStop(false);
+        setType("shipper");
+        setZip("");
+        setLocationID(undefined);
+    };
+    const handleCreate = () => {
+        const stopNumber = shipcons?.reduce((prev, current) => {
+            if (prev?.stopNumber && current?.stopNumber) {
+                return prev?.stopNumber > current?.stopNumber ? prev : current;
+            }
+            else if (!prev?.stopNumber && !current?.stopNumber) {
+                return current;
+            }
+            else if (!prev?.stopNumber) {
+                return current;
+            }
+            else
+                return prev;
+        }, null)?.stopNumber || 0;
+        createShipcon({
+            shipcon: {
+                ship_cons_type: type || undefined,
+                quote_zip: zip,
+                location_id: locationID,
+                drop_stop: dropStop,
+                load_id: load?.id,
+                quote_id: load?.quoteID,
+                stop_number: stopNumber + 1,
+            },
+        })
+            .unwrap()
+            .then(() => {
+            handleClose();
+        })
+            .catch(() => {
+            handleClose();
+        });
+    };
+    return (_jsx(_Fragment, { children: _jsx(Modal, { open: open, onClose: handleClose, children: _jsxs(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",
+                    },
+                }), children: [_jsx(Typography, { id: "modal-dialog-title", level: "h2", children: t("components:lepShipcons.add_stop") }), _jsxs(Grid, { container: true, spacing: 1, overflow: "auto", height: "100%", children: [_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("entities:load.attributes.type") }), _jsxs(Select, { value: type, onChange: (_e, v) => setType(v), children: [_jsx(Option, { value: "shipper", children: t("components:lepShipcons.shipper") }), _jsx(Option, { value: "consignee", children: t("components:lepShipcons.consignee") })] })] }) }), _jsx(Grid, { xs: 12, mt: 1, mb: 1, children: _jsx(FormControl, { children: _jsx(Checkbox, { label: t("components:lepShipcons.drop_stop"), checked: dropStop, onChange: (e) => setDropStop(e.target.checked) }) }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("entities:company.others.zip_code") }), _jsx(Input, { type: "number", value: zip, onChange: (e) => setZip(e.target.value) })] }) }), _jsx(Grid, { xs: 12, children: _jsx(LocationInput, { zip: zip, locationID: locationID, onChange: (l) => {
+                                        if (l) {
+                                            setLocationID(l.id);
+                                            if (locationEntityTypeGuard(l)) {
+                                                setZip(l.address.zip);
+                                            }
+                                            else if (l.zip) {
+                                                setZip(l.zip);
+                                            }
+                                        }
+                                        else
+                                            setLocationID(undefined);
+                                    }, customerPortal: false, autoCompleteProps: {
+                                        size: "md",
+                                    } }) })] }), _jsxs(Box, { sx: {
+                            display: "flex",
+                            gap: 1,
+                            justifyContent: "flex-end",
+                            alignItems: "end",
+                            pt: 2,
+                            height: "100%",
+                        }, children: [_jsx(Button, { onClick: handleClose, color: "neutral", variant: "soft", children: t("global.cancel") }), _jsx(Button, { loading: isLoading, onClick: handleCreate, children: t("global.create") })] })] }) }) }));
+};
+const AptNotes = ({ shipConID, close, }) => {
+    const params = {
+        filter: JSON.stringify([
+            { property: "{LIKE}noteable_type", value: "ShipCon" },
+            { property: "noteable_id", value: shipConID },
+        ]),
+    };
+    const { isFetching } = useGetAppointmentNotesQuery(params);
+    const selectAllAptNotes = useMemo(() => getAppointmentNotesSelectors(params).selectAll, [params]);
+    const rows = useSelector(selectAllAptNotes);
+    const { data: aptNoteTypes } = useGetAppointmentNoteTypesQuery();
+    const { t } = useTranslation();
+    return (_jsx(Modal, { open: Boolean(shipConID), onClose: close, children: _jsxs(ModalDialog, { layout: "center", sx: (theme) => ({
+                width: "40vw",
+                height: 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",
+                    height: "initial",
+                },
+            }), "aria-labelledby": "modal-dialog-title", children: [_jsx(Typography, { id: "modal-dialog-title", level: "h2", children: "Appointment Notes" }), _jsx(Box, { sx: { display: "grid", width: "100%", height: "100%" }, children: _jsx(LepStyledDataGrid, { loading: isFetching, columns: [
+                            { field: "person_id", headerName: "Person" },
+                            {
+                                field: "appointment_note_type_id",
+                                headerName: "Type",
+                                valueFormatter(params) {
+                                    return (aptNoteTypes?.entities[params.value]?.name || params.value);
+                                },
+                            },
+                            {
+                                field: "created_at",
+                                headerName: "Date",
+                                flex: 1,
+                                valueFormatter(params) {
+                                    return DateTime.fromISO(params.value).toUTC().toFormat("ff");
+                                },
+                            },
+                            { field: "note", headerName: "Note", flex: 2 },
+                        ], rows: rows, hideFooter: true }) }), _jsx(Box, { sx: {
+                        display: "flex",
+                        gap: 1,
+                        justifyContent: "flex-end",
+                        pt: 2,
+                    }, children: _jsx(Button, { onClick: close, color: "neutral", variant: "soft", children: t("global.close") }) })] }) }));
+};
+const LocationNotes = ({ locationID, close, }) => {
+    const { t } = useTranslation();
+    const { data: location, isFetching } = useGetLocationV1Query(locationID || 0, {
+        skip: !locationID,
+    });
+    const [updateLocation] = useUpdateLocationV1Mutation();
+    const [locationNotes, setLocationNotes] = useState(location?.notes);
+    const [schedulingNotes, setSchedulingNotes] = useState(location?.scheduling_notes);
+    useEffect(() => {
+        setLocationNotes(location?.notes);
+        setSchedulingNotes(location?.scheduling_notes);
+    }, [location]);
+    const handleSave = () => {
+        if (locationID) {
+            updateLocation({
+                id: locationID,
+                body: {
+                    location: { notes: locationNotes, scheduling_notes: schedulingNotes },
+                },
+            });
+        }
+        handleClose();
+    };
+    const handleClose = () => {
+        setLocationNotes(location?.notes);
+        setSchedulingNotes(location?.scheduling_notes);
+        close();
+    };
+    return (_jsx(Modal, { open: Boolean(locationID), onClose: handleClose, children: _jsx(ModalDialog, { layout: "center", sx: (theme) => ({
+                [theme.breakpoints.only("xs")]: {
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    border: 0,
+                    borderRadius: 0,
+                    transform: "initial",
+                    maxWidth: "initial",
+                    maxHeight: "initial",
+                },
+            }), "aria-labelledby": "modal-dialog-title", children: isFetching ? (_jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    height: "100%",
+                }, children: _jsx(CircularProgress, {}) })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { id: "modal-dialog-title", level: "h2", children: "Notes" }), _jsx(Box, { height: "100%", children: _jsxs(Grid, { container: true, spacing: 1, overflow: "auto", children: [_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.location_notes") }), _jsx(Textarea, { value: locationNotes || "", onChange: (e) => setLocationNotes(e.target.value) })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.scheduling_notes") }), _jsx(Textarea, { value: schedulingNotes || "", onChange: (e) => setSchedulingNotes(e.target.value) })] }) })] }) }), _jsxs(Box, { sx: {
+                            display: "flex",
+                            gap: 1,
+                            justifyContent: "flex-end",
+                            pt: 2,
+                        }, children: [_jsx(Button, { onClick: handleClose, color: "neutral", variant: "soft", children: t("global.cancel") }), _jsx(Button, { onClick: handleSave, children: t("global.save") })] })] })) }) }));
+};
+const LocationContact = ({ locationID, close, }) => {
+    const { t } = useTranslation();
+    const { data: location, isFetching } = useGetLocationV1Query(locationID || 0, {
+        skip: !locationID,
+    });
+    const contactRef = useRef(null);
+    const phoneRef = useRef(null);
+    return (_jsx(Modal, { open: Boolean(locationID), onClose: close, children: _jsx(ModalDialog, { layout: "center", sx: (theme) => ({
+                [theme.breakpoints.only("xs")]: {
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    border: 0,
+                    borderRadius: 0,
+                    transform: "initial",
+                    maxWidth: "initial",
+                    maxHeight: "initial",
+                },
+            }), "aria-labelledby": "modal-dialog-title", children: isFetching ? (_jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    height: "100%",
+                }, children: _jsx(CircularProgress, {}) })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { id: "modal-dialog-title", level: "h2", children: "Contact" }), _jsx(Box, { height: "100%", children: _jsxs(Grid, { container: true, spacing: 1, overflow: "auto", children: [_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.contact") }), _jsx(Input, { readOnly: true, value: location?.contact || "", slotProps: {
+                                                    input: {
+                                                        ref: contactRef,
+                                                    },
+                                                }, endDecorator: _jsx(CopyInputDecorator, { inputRef: contactRef }) })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.phone") }), _jsx(Input, { readOnly: true, slotProps: {
+                                                    input: {
+                                                        ref: phoneRef,
+                                                    },
+                                                }, value: location?.phone || "", endDecorator: _jsx(CopyInputDecorator, { inputRef: phoneRef }) })] }) })] }) }), _jsx(Box, { sx: {
+                            display: "flex",
+                            gap: 1,
+                            justifyContent: "flex-end",
+                            pt: 2,
+                        }, children: _jsx(Button, { onClick: close, color: "neutral", variant: "soft", children: t("global.close") }) })] })) }) }));
+};
+export const AppointmentIssueForm = ({ loadID, shipconID, close, }) => {
+    const { t } = useTranslation();
+    const [createIssue] = useCreateAppointmentIssueMutation();
+    const { data: _categories, isFetching } = useGetAppointmentIssueCategoryFilteredByRoleQuery({
+        start: 0,
+        limit: 25,
+    }, {
+        skip: !open,
+    });
+    const categories = useMemo(() => _categories
+        ? [..._categories].sort((a, b) => a.name && b.name ? a.name.localeCompare(b.name) : 0)
+        : [], [_categories]);
+    const [issueDate, setIssueDate] = useState(DateTime.now());
+    const [category, setCategory] = useState(null);
+    const [subcategory, setSubcategory] = useState(null);
+    const [faultingPerson, setFaultingPerson] = useState(null);
+    const [node, setNode] = useState(null);
+    const [carrier, setCarrier] = useState(null);
+    const [driver, setDriver] = useState(null);
+    const [notes, setNotes] = useState();
+    const [modifyTime, setModifyTime] = useState(false);
+    const [startTime, setStartTime] = useState(null);
+    const [endTime, setEndTime] = useState(null);
+    const [modifyDate, setModifyDate] = useState(false);
+    const [rescheduleDate, setRescheduleDate] = useState(null);
+    const carrierRef = useRef(null);
+    const driverRef = useRef(null);
+    const personRef = useRef(null);
+    const nodeRef = useRef(null);
+    const [getSubcategories, { data: subcategoriesMap, isFetching: fetchingSubcategories },] = useLazyGetAppointmentIssueSubcategoriesQuery();
+    const params = useMemo(() => ({
+        filter: JSON.stringify([
+            {
+                property: "appointment_issue_category_id",
+                value: category?.id,
+            },
+        ]),
+    }), [category]);
+    const selectAllSubcategories = useMemo(() => getAppointmentIssueSubcategoriesSelectors(params).selectAll, [params]);
+    const subcategories = useSelector(selectAllSubcategories);
+    const { isFetching: fetchingCarriers, data: carriers } = useGetCarrierNamesLiteQuery(undefined, { skip: !shipconID });
+    const { isFetching: fetchingNodes } = useGetNodeNamesQuery(undefined, {
+        skip: !shipconID,
+    });
+    const selectAllNodes = useMemo(() => getNodeNamesSelectors().selectAll, []);
+    const nodes = useSelector(selectAllNodes);
+    const { isFetching: fetchingDrivers } = useGetDriverNamesQuery(undefined, {
+        skip: !shipconID,
+    });
+    const selectAllDrivers = useMemo(() => getDriverNamesSelectors().selectAll, []);
+    const drivers = useSelector(selectAllDrivers);
+    const params2 = {
+        filters: JSON.stringify([
+            { name: "people.company_id", comparison: "eq", value: 1 },
+            { name: "people.active", comparison: "eq", value: true },
+        ]),
+    };
+    const { isFetching: fecthingPersonNames } = useGetPeopleQuery(params2, {
+        skip: !shipconID,
+    });
+    const selectAllPersonNames = useMemo(() => getPeopleSelectors(params2).selectAll, [params2]);
+    const personNames = useSelector(selectAllPersonNames);
+    const handleSave = () => {
+        if (shipconID && loadID)
+            createIssue({
+                appointmentissue: {
+                    appointment_issue_category_id: category?.id,
+                    appointment_issue_subcategory_id: subcategory?.id,
+                    faulting_person_id: faultingPerson?.id || 0,
+                    node_id: node?.id || 0,
+                    driver_id: driver?.id || 0,
+                    carrier_id: carrier?.id || 0,
+                    notes,
+                    modify_time: modifyTime,
+                    new_start_time: startTime || undefined,
+                    new_end_time: endTime || undefined,
+                    new_date: rescheduleDate?.toISO() || undefined,
+                    issue_date: issueDate?.toISO() || undefined,
+                    load_id: loadID,
+                    ship_con_id: shipconID,
+                    reschedule: modifyDate,
+                },
+            });
+        handleClose();
+    };
+    const handleClose = () => {
+        close();
+        setCarrier(null);
+        setCategory(null);
+        setDriver(null);
+        setEndTime(null);
+        setFaultingPerson(null);
+        setIssueDate(DateTime.now());
+        setModifyDate(false);
+        setModifyTime(false);
+        setNode(null);
+        setNotes(undefined);
+        setRescheduleDate(null);
+        setStartTime(null);
+        setSubcategory(null);
+    };
+    return (_jsx(Modal, { open: Boolean(shipconID), onClose: handleClose, children: _jsx(ModalDialog, { layout: "center", sx: (theme) => ({
+                [theme.breakpoints.only("xs")]: {
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    border: 0,
+                    borderRadius: 0,
+                    transform: "initial",
+                    maxWidth: "initial",
+                    maxHeight: "initial",
+                },
+            }), "aria-labelledby": "modal-dialog-title", children: isFetching ? (_jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    height: "100%",
+                }, children: _jsx(CircularProgress, {}) })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { id: "modal-dialog-title", level: "h2", children: "Create Issue" }), _jsxs(Grid, { container: true, spacing: 1, width: { sx: 200, lg: 600 }, overflow: "auto", alignItems: "end", children: [_jsx(Grid, { xs: 12, children: _jsx(NerdDatePicker, { label: t("components:lepShipcons.issue_date"), value: issueDate, onChange: (newDate) => {
+                                        setIssueDate(newDate);
+                                    } }) }), _jsx(Grid, { xs: 12, mt: 2, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.category") }), _jsx(Autocomplete, { value: category, getOptionLabel: (option) => option.name || "", options: categories, onChange: (_e, v) => {
+                                                setCategory(v);
+                                                if (v)
+                                                    getSubcategories({
+                                                        filter: JSON.stringify([
+                                                            {
+                                                                property: "appointment_issue_category_id",
+                                                                value: v.id,
+                                                            },
+                                                        ]),
+                                                    });
+                                                else
+                                                    setSubcategory(null);
+                                            } })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { disabled: !category?.id, children: [_jsx(FormLabel, { children: t("components:lepShipcons.subcategory") }), _jsx(Autocomplete, { loading: fetchingSubcategories, onChange: (_e, v) => setSubcategory(v), value: subcategory, options: subcategories || [], getOptionLabel: (option) => option.name || "" })] }) }), subcategory?.id && subcategoriesMap ? (_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.subcategory_definition") }), _jsx(Textarea, { readOnly: true, value: subcategoriesMap.entities[subcategory.id]?.notes || "" })] }) })) : null, category?.name &&
+                                [
+                                    "Accounting",
+                                    "Brokerage",
+                                    "CSR",
+                                    "Dispatch/Operations",
+                                    "Scheduling",
+                                    "Warehouse",
+                                ].includes(category?.name) ? (_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.faulting_user") }), _jsx(Autocomplete, { loading: fecthingPersonNames, options: personNames || [], slotProps: {
+                                                input: {
+                                                    ref: personRef,
+                                                },
+                                                listbox: {
+                                                    renderRow: renderComplexRow,
+                                                },
+                                            }, slots: {
+                                                listbox: VirtualizedAutocompleteList,
+                                            }, getOptionLabel: (option) => {
+                                                const person = new Person(option);
+                                                return `${person.name()} (${person.email})`;
+                                            }, onChange: (_e, v) => setFaultingPerson(v), renderOption: (props, option) => [props, option] })] }) })) : null, category?.name === "Driver" ? (_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.driver") }), _jsx(Autocomplete, { loading: fetchingDrivers, options: drivers || [], slotProps: {
+                                                input: {
+                                                    ref: driverRef,
+                                                },
+                                                listbox: {
+                                                    renderRow: renderComplexRow,
+                                                },
+                                            }, slots: {
+                                                listbox: VirtualizedAutocompleteList,
+                                            }, getOptionLabel: (option) => {
+                                                return `${option.name} (${option.email})`;
+                                            }, onChange: (_e, v) => setDriver(v), renderOption: (props, option) => [props, option] })] }) })) : null, category?.name === "Equipment" ||
+                                category?.name === "Warehouse" ? (_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.node") }), _jsx(Autocomplete, { options: nodes || [], slotProps: {
+                                                input: {
+                                                    ref: nodeRef,
+                                                },
+                                                listbox: {
+                                                    renderRow: renderSimpleRow,
+                                                },
+                                            }, slots: {
+                                                listbox: VirtualizedAutocompleteList,
+                                            }, loading: fetchingNodes, getOptionLabel: (option) => option.name || "", onChange: (_e, v) => setNode(v), renderOption: (props, option) => [props, option] })] }) })) : null, category?.name === "Outside Carrier" ||
+                                category?.name === "Railroads" ? (_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.carrier") }), _jsx(Autocomplete, { slotProps: {
+                                                input: {
+                                                    ref: carrierRef,
+                                                },
+                                                listbox: {
+                                                    renderRow: renderSimpleRow,
+                                                },
+                                            }, slots: {
+                                                listbox: VirtualizedAutocompleteList,
+                                            }, loading: fetchingCarriers, options: carriers || [], getOptionLabel: (option) => option.name || "", onChange: (_e, v) => setCarrier(v), renderOption: (props, option) => [props, option] })] }) })) : null, _jsx(Grid, { xs: 12, lg: 6, mt: 2, children: _jsx(FormControl, { children: _jsx(Typography, { component: "label", endDecorator: _jsx(Switch, { sx: { ml: 1 }, onChange: (e) => {
+                                                if (!e.target.checked)
+                                                    setRescheduleDate(null);
+                                                setModifyDate(e.target.checked);
+                                            } }), children: t("components:lepShipcons.reschedule_date") }) }) }), _jsx(Grid, { lg: 6, mt: { lg: 2 }, children: _jsx(NerdDatePicker, { label: t("components:lepShipcons.reschedule_date"), value: rescheduleDate, onChange: (newDate) => setRescheduleDate(newDate), formControlProps: { disabled: !modifyDate }, inputProps: {
+                                        placeholder: "Date",
+                                    } }) }), _jsx(Grid, { xs: 12, lg: 4, children: _jsx(FormControl, { children: _jsx(Typography, { component: "label", endDecorator: _jsx(Switch, { sx: { ml: 1 }, onChange: (e) => {
+                                                if (!e.target.checked) {
+                                                    setStartTime(null);
+                                                    setEndTime(null);
+                                                }
+                                                setModifyTime(e.target.checked);
+                                            } }), children: t("components:lepShipcons.modify_time") }) }) }), _jsx(Grid, { xs: "auto", ml: { xs: 0, lg: "auto" }, children: _jsx(NerdTimePicker, { label: t("components:lepShipcons.new_start_time"), onChange: (time) => setStartTime(time.value), value: startTime, formControlProps: {
+                                        disabled: !modifyTime,
+                                    }, inputProps: {
+                                        sx: {
+                                            width: 160,
+                                        },
+                                        placeholder: t("components:lepShipcons.start_time"),
+                                    } }) }), _jsx(Grid, { xs: "auto", children: _jsx(NerdTimePicker, { label: t("components:lepShipcons.new_end_time"), onChange: (time) => setEndTime(time.value), value: endTime, formControlProps: {
+                                        disabled: !modifyTime || !startTime,
+                                    }, inputProps: {
+                                        sx: {
+                                            width: 160,
+                                        },
+                                        placeholder: t("components:lepShipcons.end_time"),
+                                    } }) }), _jsx(Grid, { xs: 12, mt: 2, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.note") }), _jsx(Textarea, { onChange: (e) => setNotes(e.target.value) })] }) })] }), _jsxs(Box, { sx: {
+                            display: "flex",
+                            gap: 1,
+                            justifyContent: "flex-end",
+                            pt: 2,
+                        }, children: [_jsx(Button, { onClick: handleClose, color: "neutral", variant: "soft", children: t("global.cancel") }), _jsx(Button, { onClick: handleSave, children: t("global.save") })] })] })) }) }));
+};
+const renderSimpleRow = (props) => {
+    const { data, index, style } = props;
+    const dataSet = data[index];
+    const inlineStyle = {
+        ...style,
+        top: style.top + 6,
+    };
+    return (_createElement(AutocompleteOption, { ...dataSet[0], style: inlineStyle, key: typeof dataSet === "string" ? dataSet : dataSet[1].id }, typeof dataSet === "string" ? dataSet : dataSet[1].name));
+};
+const renderComplexRow = (props) => {
+    const { data, index, style } = props;
+    const dataSet = data[index];
+    const inlineStyle = {
+        ...style,
+        top: style.top + 6,
+    };
+    return (_createElement(AutocompleteOption, { ...dataSet[0], style: inlineStyle, key: typeof dataSet === "string" ? dataSet : dataSet[1].id }, typeof dataSet[1] === "string" ? (dataSet) : (_jsxs(ListItemContent, { sx: {
+            fontSize: "sm",
+            color: (t) => t.getCssVar("palette-text-primary"),
+        }, children: [dataSet[1].name || new Person(dataSet[1]).name(), _jsx(Typography, { level: "body-xs", children: dataSet[1].email })] }))));
+};
+const ActionBar = ({ quoteRoute }) => {
+    const { t } = useTranslation();
+    const { id } = useParams();
+    const dispatch = useDispatch();
+    const recalculateBody = useSelector(quoteRecalculateBodySelector);
+    const { data: load } = useGetLoadQuery(Number(id), {
+        skip: Number.isNaN(Number(id)),
+    });
+    const params = {
+        filters: JSON.stringify([
+            { name: "ship_cons.load_id", comparison: "eq", value: id },
+        ]),
+        sorter: JSON.stringify([{ name: "ship_cons.stop_number", asc: true }]),
+    };
+    useGetShipconsQuery(params, {
+        skip: Number.isNaN(Number(id)),
+    });
+    const selectAllShipcons = useMemo(() => getShipconsSelectors(params).selectAll, [params]);
+    const shipcons = useSelector(selectAllShipcons);
+    const params2 = {
+        filters: JSON.stringify([
+            { name: "people.company_id", comparison: "eq", value: 1 },
+            { name: "people.active", comparison: "eq", value: true },
+        ]),
+    };
+    const { isFetching } = useGetPeopleQuery(params2);
+    const selectAllPeople = useMemo(() => getPeopleSelectors(params2).selectAll, [params2]);
+    const people = useSelector(selectAllPeople);
+    const csrs = useMemo(() => getCSRS(people), [people]);
+    const { data: customerPeople, isFetching: isFetchingContacts } = useGetCustomerPeopleQuery(load?.customerID || 0, {
+        skip: !load?.customerID,
+    });
+    const [_updateLoad] = useUpdateLoadV1Mutation();
+    const [open, setOpen] = useState(false);
+    const lastStopDate = useMemo(() => shipcons.find((s) => s.stopDate !== undefined)?.stopDate, [shipcons]);
+    const updateLoad = useCallback((fieldV1, fieldV3, value) => {
+        if (load?.id)
+            _updateLoad({
+                id: load.id,
+                body: {
+                    load: {
+                        [fieldV1]: value,
+                    },
+                },
+            })
+                .unwrap()
+                .catch(() => {
+                dispatch(setRecalculateBody({
+                    ...recalculateBody,
+                    [fieldV1]: load[fieldV3],
+                }));
+                return;
+            });
+    }, [load, recalculateBody]);
+    const checkContacts = useCallback(() => {
+        if (recalculateBody.person_ids && recalculateBody.person_ids.length > 0)
+            dispatch(addLoadInfoTask({
+                task: {
+                    order: 1,
+                    label: "Customer contacts selected",
+                    status: "success",
+                    uuid: nanoid(),
+                },
+                field: "contacts",
+            }));
+        else {
+            dispatch(addLoadInfoTask({
+                task: {
+                    order: 1,
+                    label: "Please select at least one customer contact",
+                    status: "danger",
+                    uuid: nanoid(),
+                    step: {
+                        content: "Please select at least one customer contact",
+                        selector: ".LoadInfoTaskItem-contacts",
+                    },
+                    tabIndex: 0,
+                },
+                field: "contacts",
+            }));
+        }
+    }, [recalculateBody]);
+    const checkCSR = useCallback(() => {
+        if (recalculateBody.booked_by_id) {
+            dispatch(addLoadInfoTask({
+                task: {
+                    order: 0,
+                    label: "CSR selected",
+                    status: "success",
+                    uuid: nanoid(),
+                },
+                field: "bookedBy",
+            }));
+        }
+        else {
+            dispatch(addLoadInfoTask({
+                task: {
+                    order: 0,
+                    label: "Please select a CSR",
+                    status: "danger",
+                    uuid: nanoid(),
+                    step: {
+                        content: "Please select a CSR",
+                        selector: ".LoadInfoTaskItem-bookedBy",
+                    },
+                    tabIndex: 0,
+                },
+                field: "bookedBy",
+            }));
+        }
+    }, [recalculateBody]);
+    useEffect(() => {
+        checkCSR();
+        checkContacts();
+    }, [recalculateBody.booked_by_id, recalculateBody.person_ids]);
+    return (_jsxs(_Fragment, { children: [_jsx(AddStop, { open: open, close: () => setOpen(false) }), _jsxs(Grid, { container: true, spacing: 1, width: "100%", sx: {
+                    alignItems: "start",
+                }, children: [_jsx(Grid, { children: _jsxs(Button, { size: "sm", variant: "soft", color: "neutral", onClick: () => setOpen(true), children: [_jsx("i", { className: "fa-solid fa-location-dot pright" }), t("components:lepShipcons.add_stop")] }) }), _jsxs(Grid, { xs: 12, md: "auto", ml: { xs: undefined, lg: "auto" }, container: true, alignItems: "center", children: [_jsx(Grid, { xs: 12, md: "auto", children: _jsx(FormLabel, { children: t("components:lepShipcons.booked_by") }) }), _jsx(Grid, { xs: 12, md: "auto", children: _jsx(Autocomplete, { className: "LoadInfoTaskItem-bookedBy", error: !recalculateBody.booked_by_id, sx: {
+                                        maxWidth: 300,
+                                    }, loading: isFetching, options: csrs || [], getOptionLabel: (p) => {
+                                        return p ? new Person(p).name() : "";
+                                    }, size: "sm", value: csrs.find((c) => c.id === recalculateBody.booked_by_id) || null, onChange: (_e, v) => {
+                                        dispatch(setRecalculateBody({
+                                            ...recalculateBody,
+                                            booked_by_id: v?.id || undefined,
+                                        }));
+                                        updateLoad("booked_by_id", "bookedByID", v?.id || null);
+                                    } }) })] }), _jsxs(Grid, { xs: 12, md: "auto", container: true, alignItems: "center", children: [_jsx(Grid, { xs: 12, md: "auto", children: _jsx(FormLabel, { children: t("components:lepShipcons.contacts") }) }), _jsx(Grid, { xs: 12, md: "auto", children: _jsx(Autocomplete, { disableCloseOnSelect: true, className: "LoadInfoTaskItem-contacts", sx: {
+                                        "& .MuiChip-label": {
+                                            maxWidth: 160,
+                                        },
+                                    }, error: !recalculateBody.person_ids ||
+                                        recalculateBody.person_ids.length === 0, loading: isFetchingContacts, options: customerPeople?.map((c) => c.id) || [], getOptionLabel: (id) => customerPeople?.find((c) => c.id === id)?.name || "", getOptionDisabled: (option) => !customerPeople?.find((p) => p.id === option)?.active
+                                        ? true
+                                        : false, renderOption: (props, option) => {
+                                        const person = customerPeople?.find((c) => c.id === option);
+                                        return (_createElement(AutocompleteOption, { ...props, key: person?.id },
+                                            _jsxs(ListItemContent, { sx: { fontSize: "sm", fontWeight: "md" }, children: [person?.name, _jsx(Typography, { level: "body-xs", sx: {
+                                                            color: props["aria-disabled"] ? "inherit" : undefined,
+                                                        }, children: person?.email })] })));
+                                    }, size: "sm", limitTags: 1, value: recalculateBody.person_ids || [], multiple: true, onChange: (_e, v) => {
+                                        dispatch(setRecalculateBody({
+                                            ...recalculateBody,
+                                            person_ids: v,
+                                        }));
+                                    }, onBlur: () => {
+                                        updateLoad("person_ids", "person_ids", recalculateBody.person_ids);
+                                    } }) })] }), quoteRoute ? (_jsx(Grid, { xs: 12, md: "auto", children: _jsx(Button, { startDecorator: _jsx("i", { className: "fa-solid fa-arrow-up-right-from-square" }), size: "sm", component: "a", variant: "soft", href: `${quoteRoute}/${load?.quoteID}?date=${lastStopDate
+                                ? DateTime.fromISO(lastStopDate).toUTC().toMillis()
+                                : "null"}&serviceLevel=${load?.serviceLevel}`, target: "_blank", rel: "noopener noreferrer", sx: {
+                                "&:hover": {
+                                    textDecoration: "none",
+                                },
+                            }, children: t("components:lepShipcons.open_quote") }) })) : null] })] }));
+};
+//# sourceMappingURL=lepShipcons.js.map