@dexteel/mesf-core 7.18.0 → 7.19.1

package/dist/index.esm.js

@@ -25,7 +25,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import FindInPageIcon from '@mui/icons-material/FindInPage';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
-import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Cloud, ExpandLess, ExpandMore, Square as Square$1, Timeline, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, ViewList, Build, Settings as Settings$2, Code as Code$1, FastRewind, FastForward, ZoomIn, Restore, Lock, Create, Delete, Folder, InsertChart, Search, PlaylistAdd, DragIndicator, Save, AttachFile, CloudUpload, GetApp } from '@mui/icons-material';
+import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Cloud, ExpandLess, ExpandMore, Square as Square$1, Timeline, Send, Menu as Menu$1, People, Storage, Group as Group$1, Assignment, Chat, ViewList, Build, Settings as Settings$2, Code as Code$1, FastRewind, FastForward, ZoomIn, Restore, Lock, Create, Delete, Folder, InsertChart, Search, PlaylistAdd, DragIndicator, Save, AttachFile, CloudUpload, GetApp } from '@mui/icons-material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import FormatListBulletedSharpIcon from '@mui/icons-material/FormatListBulletedSharp';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
@@ -35,9 +35,9 @@ import { DataGrid, GridOverlay } from '@mui/x-data-grid';
 import PropTypes from 'prop-types';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import moment$g from 'moment-timezone';
+import moment$h from 'moment-timezone';
 import { useParams, useNavigate, useSearchParams, Link, Navigate, Routes, Route, useLocation, BrowserRouter } from 'react-router-dom';
-import moment$f from 'moment';
+import moment$g from 'moment';
 import SkipNextIcon from '@mui/icons-material/SkipNext';
 import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
 import LockIcon from '@mui/icons-material/Lock';
@@ -45,6 +45,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import { LogLevel as LogLevel$1, PublicClientApplication } from '@azure/msal-browser';
 import { useMsal, MsalProvider } from '@azure/msal-react';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import { Group, Panel, Separator, useDefaultLayout } from 'react-resizable-panels';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import ReplayIcon from '@mui/icons-material/Replay';
 import ToggleOfIcon from '@mui/icons-material/ToggleOff';
@@ -61,7 +62,6 @@ import { DateTimePicker as DateTimePicker$1 } from '@mui/x-date-pickers/DateTime
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import axios from 'axios';
-import { Group as Group$1, Panel, Separator, useDefaultLayout } from 'react-resizable-panels';
 import { LocalizationProvider as LocalizationProvider$1 } from '@mui/x-date-pickers/LocalizationProvider';
 import InsertChartIcon from '@mui/icons-material/InsertChart';
 import ReactECharts from 'echarts-for-react';
@@ -73,6 +73,7 @@ import PersonPinCircleIcon from '@mui/icons-material/PersonPinCircle';
 import Dialog from '@mui/material/Dialog';
 import Typography from '@mui/material/Typography';
 import { format, fromZonedTime, formatInTimeZone } from 'date-fns-tz';
+import momentDurationFormatSetup from 'moment-duration-format';
 import { findIana } from 'windows-iana';
 import Code from '@mui/icons-material/Code';
 import Square from '@mui/icons-material/Square';
@@ -794,7 +795,7 @@ class MESApiService {
             data.dataBaseName = database;
             data.parameters = formattedParameters;
             Date.prototype.toJSON = function () {
-                return moment$f(this).format("YYYY-MM-DDTHH:mm:ss");
+                return moment$g(this).format("YYYY-MM-DDTHH:mm:ss");
             }; // eslint-disable-line
             let isError = { ok: true };
             return fetch(this.config.API_PROCEDURE_URL + "/Execute", {
@@ -848,7 +849,7 @@ class MESApiService {
             data.method = procedure;
             data.parameters = formattedParameters;
             Date.prototype.toJSON = function () {
-                return moment$f(this).format("YYYY-MM-DDTHH:mm:ss");
+                return moment$g(this).format("YYYY-MM-DDTHH:mm:ss");
             }; // eslint-disable-line
             const curatedMethod = procedure.replace(/[\[\]]/g, ""); // remove brackets from method name
             try {
@@ -892,7 +893,7 @@ class MESApiService {
             data.dataBaseName = database;
             data.parameters = formattedParameters;
             Date.prototype.toJSON = function () {
-                return moment$f(this).format("YYYY-MM-DDTHH:mm:ss");
+                return moment$g(this).format("YYYY-MM-DDTHH:mm:ss");
             }; // eslint-disable-line
             let isError = { ok: true };
             return fetch(this.config.API_PROCEDURE_URL + "/ExecuteJSON", {
@@ -944,7 +945,7 @@ class MESApiService {
                 formattedParameters.push(formattedParameter);
             });
             Date.prototype.toJSON = function () {
-                return moment$f(this).format("YYYY-MM-DDTHH:mm:ss");
+                return moment$g(this).format("YYYY-MM-DDTHH:mm:ss");
             }; // eslint-disable-line
             let isError = { ok: true };
             files.forEach((element) => {
@@ -1006,7 +1007,7 @@ class MESApiService {
             data.parameters = formattedParameters;
             data.fileName = fileName || "Default.xlsx";
             Date.prototype.toJSON = function () {
-                return moment$f(this).format("YYYY-MM-DDTHH:mm:ss");
+                return moment$g(this).format("YYYY-MM-DDTHH:mm:ss");
             }; // eslint-disable-line
             let isError = { ok: true };
             return fetch(this.config.API_PROCEDURE_URL + "/Export", {
@@ -1080,7 +1081,7 @@ class MESApiService {
             data.parameters = formattedParameters;
             data.fileName = fileName || "Default.xlsx";
             Date.prototype.toJSON = function () {
-                return moment$f(this).format("YYYY-MM-DDTHH:mm:ss");
+                return moment$g(this).format("YYYY-MM-DDTHH:mm:ss");
             }; // eslint-disable-line
             let isError = { ok: true };
             return fetch(this.config.API_PROCEDURE_URL + "/ExportExcel", {
@@ -1471,6 +1472,7 @@ const useAssetActions = ({ asset, selectedNodes, setSelectedNodes, isCtrlPressin
     return { handleDrop, handleCtrlClick, handleDragEnd, handleDragStart };
 };
 
+momentDurationFormatSetup(moment$h);
 class TimeService {
     constructor() {
         this.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -1489,7 +1491,7 @@ class TimeService {
         else {
             this.timeZone = timeZone;
         }
-        moment$g.tz.setDefault(this.timeZone);
+        moment$h.tz.setDefault(this.timeZone);
     }
     toUTC(datetime, format$1) {
         try {
@@ -1527,7 +1529,7 @@ class TimeService {
         return this.timeZone;
     }
 }
-const getMomentTz = () => moment$g;
+const getMomentTz = () => moment$h;
 const dxtServerTimeZone = () => TimeService.getInstance().getServerTimeZone;
 const dxtToUTC = TimeService.getInstance().toUTC;
 const dxtToLocalServerTime = TimeService.getInstance().toLocalServerTime;
@@ -5630,11 +5632,11 @@ const useShiftNavigatorManager = () => {
                 assetId,
             });
             if (resp.ok) {
-                const shift = Object.assign(Object.assign({}, resp.data), { CurrentProductionDate: moment$f
+                const shift = Object.assign(Object.assign({}, resp.data), { CurrentProductionDate: moment$g
                         .utc(resp.data.CurrentProductionDate)
-                        .toDate(), CurrentStart: moment$f.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$f.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$f
+                        .toDate(), CurrentStart: moment$g.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$g.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$g
                         .utc(resp.data.PreviousProductionDate)
-                        .toDate(), PreviousStart: moment$f.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$f.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$f.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$f.utc(resp.data.LastStart).toDate(), LastEnd: moment$f.utc(resp.data.LastEnd).toDate() });
+                        .toDate(), PreviousStart: moment$g.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$g.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$g.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$g.utc(resp.data.LastStart).toDate(), LastEnd: moment$g.utc(resp.data.LastEnd).toDate() });
                 setShiftInfo(shift);
                 return shift;
             }
@@ -5649,11 +5651,11 @@ const useShiftNavigatorManager = () => {
                 assetId,
             });
             if (resp.ok) {
-                const shift = Object.assign(Object.assign({}, resp.data), { CurrentProductionDate: moment$f
+                const shift = Object.assign(Object.assign({}, resp.data), { CurrentProductionDate: moment$g
                         .utc(resp.data.CurrentProductionDate)
-                        .toDate(), CurrentStart: moment$f.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$f.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$f
+                        .toDate(), CurrentStart: moment$g.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$g.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$g
                         .utc(resp.data.PreviousProductionDate)
-                        .toDate(), PreviousStart: moment$f.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$f.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$f.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$f.utc(resp.data.LastStart).toDate(), LastEnd: moment$f.utc(resp.data.LastEnd).toDate() });
+                        .toDate(), PreviousStart: moment$g.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$g.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$g.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$g.utc(resp.data.LastStart).toDate(), LastEnd: moment$g.utc(resp.data.LastEnd).toDate() });
                 setShiftInfo(shift);
                 return shift;
             }
@@ -5670,11 +5672,11 @@ const useShiftNavigatorManager = () => {
             assetId,
         });
         if (resp.ok) {
-            const shift = Object.assign(Object.assign({}, resp.data), { CurrentProductionDate: moment$f
+            const shift = Object.assign(Object.assign({}, resp.data), { CurrentProductionDate: moment$g
                     .utc(resp.data.CurrentProductionDate)
-                    .toDate(), CurrentStart: moment$f.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$f.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$f
+                    .toDate(), CurrentStart: moment$g.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$g.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$g
                     .utc(resp.data.PreviousProductionDate)
-                    .toDate(), PreviousStart: moment$f.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$f.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$f.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$f.utc(resp.data.LastStart).toDate(), LastEnd: moment$f.utc(resp.data.LastEnd).toDate() });
+                    .toDate(), PreviousStart: moment$g.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$g.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$g.utc(resp.data.LastProductionDate).toDate(), LastStart: moment$g.utc(resp.data.LastStart).toDate(), LastEnd: moment$g.utc(resp.data.LastEnd).toDate() });
             setShiftInfo(shift);
             return shift;
         }
@@ -5754,13 +5756,13 @@ const ShiftDayNavigatorControl = (_a) => {
                         shiftId: shiftInfo.CurrentShiftId,
                     });
                     if (resp.ok) {
-                        const shift = Object.assign(Object.assign({}, resp.data), { CurrentProductionDate: moment$g
+                        const shift = Object.assign(Object.assign({}, resp.data), { CurrentProductionDate: moment$h
                                 .utc(resp.data.CurrentProductionDate)
-                                .toDate(), CurrentStart: moment$g.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$g.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$g
+                                .toDate(), CurrentStart: moment$h.utc(resp.data.CurrentStart).toDate(), CurrentEnd: moment$h.utc(resp.data.CurrentEnd).toDate(), PreviousProductionDate: moment$h
                                 .utc(resp.data.PreviousProductionDate)
-                                .toDate(), PreviousStart: moment$g.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$g.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$g
+                                .toDate(), PreviousStart: moment$h.utc(resp.data.PreviousStart).toDate(), PreviousEnd: moment$h.utc(resp.data.PreviousEnd).toDate(), LastProductionDate: moment$h
                                 .utc(resp.data.LastProductionDate)
-                                .toDate(), LastStart: moment$g.utc(resp.data.LastStart).toDate(), LastEnd: moment$g.utc(resp.data.LastEnd).toDate() });
+                                .toDate(), LastStart: moment$h.utc(resp.data.LastStart).toDate(), LastEnd: moment$h.utc(resp.data.LastEnd).toDate() });
                         setShiftInfoCopy(shift);
                     }
                 }
@@ -5801,7 +5803,7 @@ const ShiftDayNavigatorControl = (_a) => {
                     }, size: "small" },
                     React__default.createElement(ArrowBackRounded, null)))),
         React__default.createElement(Grid2, { size: "auto" },
-            React__default.createElement(DatePicker, { label: "Current Date", timezone: "UTC", format: "MM/DD/YYYY", maxDate: moment$g(), closeOnSelect: true, formatDensity: "dense", value: moment$g(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentProductionDate), onChange: (date) => {
+            React__default.createElement(DatePicker, { label: "Current Date", timezone: "UTC", format: "MM/DD/YYYY", maxDate: moment$h(), closeOnSelect: true, formatDensity: "dense", value: moment$h(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentProductionDate), onChange: (date) => {
                     if (date) {
                         getShiftDataFromAPI(date.toDate(), 0, assetId).then(() => { });
                     }
@@ -5867,8 +5869,8 @@ const getShiftsRangeByParameters = (period_1, ...args_1) => __awaiter(void 0, [p
     if (resp.ok) {
         const data = resp.data;
         data.tables[0].rows.map((shift) => {
-            shift.Start = moment$g.utc(shift["Start"]).toDate();
-            shift.End = moment$g.utc(shift["End"]).toDate();
+            shift.Start = moment$h.utc(shift["Start"]).toDate();
+            shift.End = moment$h.utc(shift["End"]).toDate();
         });
         return {
             ok: true,
@@ -5908,10 +5910,10 @@ const ShiftPeriodNavigatorControl = ({ value, actualPeriod, onChange, showShiftA
             return;
         try {
             if (direction === "prev" && (startShift === null || startShift === void 0 ? void 0 : startShift.Start)) {
-                yield searchShiftsRangeByParameters(period, moment$g(startShift.Start).toDate(), null, false, "prev");
+                yield searchShiftsRangeByParameters(period, moment$h(startShift.Start).toDate(), null, false, "prev");
             }
             else if (direction === "next" && (endShift === null || endShift === void 0 ? void 0 : endShift.End)) {
-                yield searchShiftsRangeByParameters(period, null, moment$g(endShift.End).toDate(), false, "next");
+                yield searchShiftsRangeByParameters(period, null, moment$h(endShift.End).toDate(), false, "next");
             }
         }
         catch (error) {
@@ -6011,8 +6013,8 @@ const ShiftPeriodNavigatorControl = ({ value, actualPeriod, onChange, showShiftA
         const newPeriod = event.target.value;
         setPeriod(newPeriod);
         if (newPeriod === "Custom") {
-            const today = moment$g();
-            const yesterday = moment$g().subtract(1, "day");
+            const today = moment$h();
+            const yesterday = moment$h().subtract(1, "day");
             setCustomStartDate(yesterday);
             setCustomEndDate(today);
             yield searchShiftsRangeByParameters("Custom", yesterday.toDate(), today.toDate(), false);
@@ -6020,7 +6022,7 @@ const ShiftPeriodNavigatorControl = ({ value, actualPeriod, onChange, showShiftA
         else {
             setCustomStartDate(null);
             setCustomEndDate(null);
-            yield searchShiftsRangeByParameters(newPeriod, null, (endShift === null || endShift === void 0 ? void 0 : endShift.Start) ? moment$g(endShift.Start).toDate() : null, false);
+            yield searchShiftsRangeByParameters(newPeriod, null, (endShift === null || endShift === void 0 ? void 0 : endShift.Start) ? moment$h(endShift.Start).toDate() : null, false);
         }
     });
     useEffect(() => {
@@ -6079,8 +6081,8 @@ const ShiftPeriodNavigatorControl = ({ value, actualPeriod, onChange, showShiftA
                 },
             } },
             React__default.createElement(DatePicker$1, { label: "Start", format: dateFormat, value: isCustomMode
-                    ? customStartDate || moment$g().subtract(1, "day")
-                    : moment$g((startShift === null || startShift === void 0 ? void 0 : startShift.Start) || moment$g().subtract(1, "day")), onChange: (value) => handleDateChange(value ? moment$g(value) : null, "start"), disabled: loadingShiftPeriodList, maxDate: isCustomMode ? moment$g() : undefined, enableAccessibleFieldDOMStructure: false, slots: {
+                    ? customStartDate || moment$h().subtract(1, "day")
+                    : moment$h((startShift === null || startShift === void 0 ? void 0 : startShift.Start) || moment$h().subtract(1, "day")), onChange: (value) => handleDateChange(value ? moment$h(value) : null, "start"), disabled: loadingShiftPeriodList, maxDate: isCustomMode ? moment$h() : undefined, enableAccessibleFieldDOMStructure: false, slots: {
                     textField: (props) => (React__default.createElement(TextField, Object.assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: Object.assign(Object.assign({}, props.InputProps), { style: { paddingTop: "2px" } }) }))),
                     openPickerIcon: () => (React__default.createElement("div", { style: {
                             display: "flex",
@@ -6122,8 +6124,8 @@ const ShiftPeriodNavigatorControl = ({ value, actualPeriod, onChange, showShiftA
                 },
             } },
             React__default.createElement(DatePicker$1, { label: "End", format: dateFormat, value: isCustomMode
-                    ? customEndDate || moment$g()
-                    : moment$g((endShift === null || endShift === void 0 ? void 0 : endShift.End) || (endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment$g()), onChange: (value) => handleDateChange(value ? moment$g(value) : null, "end"), disabled: loadingShiftPeriodList, minDate: isCustomMode && customStartDate ? customStartDate : undefined, maxDate: isCustomMode ? moment$g() : undefined, enableAccessibleFieldDOMStructure: false, slots: {
+                    ? customEndDate || moment$h()
+                    : moment$h((endShift === null || endShift === void 0 ? void 0 : endShift.End) || (endShift === null || endShift === void 0 ? void 0 : endShift.Start) || moment$h()), onChange: (value) => handleDateChange(value ? moment$h(value) : null, "end"), disabled: loadingShiftPeriodList, minDate: isCustomMode && customStartDate ? customStartDate : undefined, maxDate: isCustomMode ? moment$h() : undefined, enableAccessibleFieldDOMStructure: false, slots: {
                     textField: (props) => (React__default.createElement(TextField, Object.assign({}, props, { size: "small", variant: "outlined", fullWidth: true, style: { width: "100%" }, InputProps: Object.assign(Object.assign({}, props.InputProps), { style: { paddingTop: "2px" } }) }))),
                     openPickerIcon: () => (React__default.createElement("div", { style: {
                             display: "flex",
@@ -6149,7 +6151,7 @@ const ShiftPeriodNavigatorControl = ({ value, actualPeriod, onChange, showShiftA
                 React__default.createElement(SkipNextIcon, null)))));
 };
 
-const moment$e = getMomentTz();
+const moment$f = getMomentTz();
 const getShifts = (params, signal) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
     const apiService = new MESApiService();
@@ -6163,26 +6165,26 @@ const getShifts = (params, signal) => __awaiter(void 0, void 0, void 0, function
     if (resp.ok) {
         let rows = get(resp, "data.tables[0].rows", []);
         rows = rows.map((row) => {
-            (row.CurrentProductionDate = moment$e
+            (row.CurrentProductionDate = moment$f
                 .utc(row["CurrentProductionDate"])
                 .toDate()),
-                (row.CurrentStart = moment$e.utc(row["CurrentStart"]).toDate()),
-                (row.CurrentEnd = moment$e.utc(row["CurrentEnd"]).toDate()),
-                (row.PreviousProductionDate = moment$e
+                (row.CurrentStart = moment$f.utc(row["CurrentStart"]).toDate()),
+                (row.CurrentEnd = moment$f.utc(row["CurrentEnd"]).toDate()),
+                (row.PreviousProductionDate = moment$f
                     .utc(row["PreviousProductionDate"])
                     .toDate()),
-                (row.PreviousStart = moment$e.utc(row["PreviousStart"]).toDate()),
-                (row.PreviousEnd = moment$e.utc(row["PreviousEnd"]).toDate()),
-                (row.NextProductionDate = moment$e
+                (row.PreviousStart = moment$f.utc(row["PreviousStart"]).toDate()),
+                (row.PreviousEnd = moment$f.utc(row["PreviousEnd"]).toDate()),
+                (row.NextProductionDate = moment$f
                     .utc(row["NextProductionDate"])
                     .toDate()),
-                (row.NextStart = moment$e.utc(row["NextStart"]).toDate()),
-                (row.NextEnd = moment$e.utc(row["NextEnd"]).toDate()),
-                (row.LastProductionDate = moment$e
+                (row.NextStart = moment$f.utc(row["NextStart"]).toDate()),
+                (row.NextEnd = moment$f.utc(row["NextEnd"]).toDate()),
+                (row.LastProductionDate = moment$f
                     .utc(row["LastProductionDate"])
                     .toDate()),
-                (row.LastStart = moment$e.utc(row["LastStart"]).toDate()),
-                (row.LastEnd = moment$e.utc(row["LastEnd"]).toDate());
+                (row.LastStart = moment$f.utc(row["LastStart"]).toDate()),
+                (row.LastEnd = moment$f.utc(row["LastEnd"]).toDate());
             return row;
         });
         return rows;
@@ -6206,7 +6208,7 @@ const getShiftsByRange = (_a) => __awaiter(void 0, [_a], void 0, function* ({ sh
     const resp = yield apiService.callV2("[MES].[GetShiftsByRange]", parameters);
     if (resp.ok) {
         let rows = get(resp, "data.tables[0].rows", []);
-        rows = rows.map((row) => (Object.assign(Object.assign({}, row), { Start: moment$e.utc(row.Start).toDate(), End: moment$e.utc(row.End).toDate() })));
+        rows = rows.map((row) => (Object.assign(Object.assign({}, row), { Start: moment$f.utc(row.Start).toDate(), End: moment$f.utc(row.End).toDate() })));
         return rows;
     }
     else {
@@ -6224,7 +6226,7 @@ const getShiftsAroundCurrent = (_a) => __awaiter(void 0, [_a], void 0, function*
     const resp = yield apiService.callV2("[MES].[GetShiftsAroundCurrent]", parameters);
     if (resp.ok) {
         let rows = get(resp, "data.tables[0].rows", []);
-        rows = rows.map((row) => (Object.assign(Object.assign({}, row), { Start: moment$e.utc(row.Start).toDate(), End: moment$e.utc(row.End).toDate() })));
+        rows = rows.map((row) => (Object.assign(Object.assign({}, row), { Start: moment$f.utc(row.Start).toDate(), End: moment$f.utc(row.End).toDate() })));
         return rows;
     }
     else {
@@ -6232,7 +6234,7 @@ const getShiftsAroundCurrent = (_a) => __awaiter(void 0, [_a], void 0, function*
     }
 });
 
-const moment$d = getMomentTz();
+const moment$e = getMomentTz();
 const useShiftsAroundCurrent = ({ currentShiftId, shiftsRange, enabled = true, }) => {
     return useQuery({
         queryKey: ["shiftsAroundCurrent", currentShiftId, shiftsRange],
@@ -6279,7 +6281,7 @@ const ShiftAutocomplete = ({ currentShiftId, value, onShiftSelected, disabled, s
         React__default.createElement(Grid2, { container: true },
             React__default.createElement(Grid2, { size: { xs: 12 } },
                 React__default.createElement(Autocomplete, { loading: isLoading, options: rows || [], getOptionLabel: (option) => {
-                        return `${moment$d
+                        return `${moment$e
                             .utc(option.ProductionDate)
                             .format("MM/DD/YYYY")} - ${option.Shift} - ${option.Crew}`;
                     }, value: selectedShift, onChange: (event, newValue) => {
@@ -7107,15 +7109,15 @@ const getJobs = (signal) => __awaiter(void 0, void 0, void 0, function* () {
     if (resp.ok) {
         let rows = get(resp, "data.tables[0].rows", []);
         rows = rows.map((job) => (Object.assign(Object.assign({}, job), { LastStarted: job.LastStarted
-                ? moment$f.utc(job["LastStarted"]).toDate()
+                ? moment$g.utc(job["LastStarted"]).toDate()
                 : null, LastContact: job.LastContact
-                ? moment$f.utc(job["LastContact"]).toDate()
+                ? moment$g.utc(job["LastContact"]).toDate()
                 : null, LastCounter: job.LastCounter
-                ? moment$f.utc(job["LastCounter"]).toDate()
-                : null, StartTime: job.StartTime ? moment$f.utc(job["StartTime"]).toDate() : null, NextExecutionTime: job.NextExecutionTime
-                ? moment$f.utc(job["NextExecutionTime"]).toDate()
+                ? moment$g.utc(job["LastCounter"]).toDate()
+                : null, StartTime: job.StartTime ? moment$g.utc(job["StartTime"]).toDate() : null, NextExecutionTime: job.NextExecutionTime
+                ? moment$g.utc(job["NextExecutionTime"]).toDate()
                 : null, LastExecutionTime: job.LastExecutionTime
-                ? moment$f.utc(job["LastExecutionTime"]).toDate()
+                ? moment$g.utc(job["LastExecutionTime"]).toDate()
                 : null })));
         return rows;
     }
@@ -7309,7 +7311,7 @@ const JobDetails = ({ job, modal, onHide, suffixTitle }) => {
                         } })),
                 React__default.createElement(Grid2, { size: { xs: 12, md: 6 } },
                     React__default.createElement(Controller, { name: "StartTime", control: control, render: ({ field, fieldState: { error } }) => (React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement(DateTimePicker, { label: "Start Time", value: field.value ? moment$g(field.value) : null, onChange: field.onChange, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), slotProps: {
+                            React__default.createElement(DateTimePicker, { label: "Start Time", value: field.value ? moment$h(field.value) : null, onChange: field.onChange, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), slotProps: {
                                     textField: {
                                         size: "small",
                                         margin: "none",
@@ -7323,7 +7325,7 @@ const JobDetails = ({ job, modal, onHide, suffixTitle }) => {
                             return (React__default.createElement(TextField, { label: "Last Status", value: (_a = field.value) !== null && _a !== void 0 ? _a : "", variant: "outlined", size: "small", fullWidth: true, disabled: true }));
                         } })),
                 React__default.createElement(Grid2, { size: { xs: 12, md: 6 } },
-                    React__default.createElement(Controller, { name: "LastExecutionTime", control: control, render: ({ field }) => (React__default.createElement(DateTimePicker, { label: "Last Execution Time", value: field.value ? moment$g(field.value) : null, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), disabled: true, slotProps: {
+                    React__default.createElement(Controller, { name: "LastExecutionTime", control: control, render: ({ field }) => (React__default.createElement(DateTimePicker, { label: "Last Execution Time", value: field.value ? moment$h(field.value) : null, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), disabled: true, slotProps: {
                                 textField: {
                                     size: "small",
                                     margin: "none",
@@ -7331,7 +7333,7 @@ const JobDetails = ({ job, modal, onHide, suffixTitle }) => {
                                 },
                             } })) })),
                 React__default.createElement(Grid2, { size: { xs: 12, md: 6 } },
-                    React__default.createElement(Controller, { name: "NextExecutionTime", control: control, render: ({ field }) => (React__default.createElement(DateTimePicker, { label: "Next Execution Time", value: field.value ? moment$g(field.value) : null, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), disabled: true, slotProps: {
+                    React__default.createElement(Controller, { name: "NextExecutionTime", control: control, render: ({ field }) => (React__default.createElement(DateTimePicker, { label: "Next Execution Time", value: field.value ? moment$h(field.value) : null, format: "MM/DD/YYYY HH:mm:ss", views: ["year", "month", "day", "hours", "minutes"], ampm: false, timezone: TimeService.getInstance().getServerTimeZone(), disabled: true, slotProps: {
                                 textField: {
                                     size: "small",
                                     margin: "none",
@@ -7417,6 +7419,7 @@ const useJobsOptionsFunctions = ({ setShowModal, setJobSelected, }) => {
     };
 };
 
+const moment$d = getMomentTz();
 const useJobsTableData = ({ setShowModal, setJobSelected, showContextMenu, }) => {
     const renderButtonMenu = (params) => {
         return (React__default.createElement(IconButton$1, { style: {}, onClick: (e) => showContextMenu(e, params.data, "jobsContext"), size: "small" },
@@ -7436,19 +7439,20 @@ const useJobsTableData = ({ setShowModal, setJobSelected, showContextMenu, }) =>
             field: "PeriodTime",
             headerName: "Period Time",
             flex: 2,
-            valueFormatter: ({ value }) => {
-                if (value === null || value === undefined)
-                    return "";
-                const horas = Math.floor(value / 3600);
-                const minutos = Math.floor((value % 3600) / 60);
-                const segundos = value % 60;
-                return `${horas}h ${minutos}min ${segundos}s`;
-            },
+            valueGetter: (params) => moment$d
+                .duration(params.data.PeriodTime, "seconds")
+                .format("h[h] m[m] s[s]"),
+        },
+        {
+            field: "LastExecutionTime",
+            headerName: "Last Execution",
+            valueGetter: (params) => dxtToLocalServerTime(params.data.LastExecutionTime, "MM/dd HH:mm"),
+            flex: 2,
         },
         {
             field: "NextExecutionTime",
             headerName: "Next Execution",
-            valueFormatter: ({ value }) => value === null ? "" : moment$f(value).format("DD/MM/YY HH:mm"),
+            valueGetter: (params) => dxtToLocalServerTime(params.data.NextExecutionTime, "MM/dd HH:mm"),
             flex: 2,
         },
         {
@@ -7476,6 +7480,7 @@ const useJobsTableData = ({ setShowModal, setJobSelected, showContextMenu, }) =>
     return { columnDefs };
 };
 
+const jobStorageKey = "job-table-panel-sizes";
 const useSearchJobs = () => {
     return useQuery({
         queryKey: ["jobs"],
@@ -7486,6 +7491,8 @@ const CustomStatusPanel$1 = ({ handleNew }) => (React.createElement(IconButton$1
     React.createElement(PlaylistAddIcon, { style: { width: 30, height: 30 } })));
 const TableJobs = () => {
     const queryClient = useQueryClient();
+    const groupRef = useRef(null);
+    const [hover, setHover] = useState(false);
     const [jobSelected, setJobSelected] = useState(null);
     const [gridApi, setGridApi] = useState(null);
     const [errorMessage, setErrorMessage] = useState("");
@@ -7581,6 +7588,44 @@ const TableJobs = () => {
             }
         }
     };
+    const getSavedPanelLayout = () => {
+        try {
+            const saved = localStorage.getItem(jobStorageKey);
+            if (saved) {
+                const layout = JSON.parse(saved);
+                if (layout && typeof layout === "object") {
+                    return layout;
+                }
+            }
+        }
+        catch (e) {
+            console.error("Error loading panel layout:", e);
+        }
+        return { table: 50, details: 50 };
+    };
+    const handlePanelResize = (layout) => {
+        try {
+            localStorage.setItem(jobStorageKey, JSON.stringify(layout));
+        }
+        catch (e) {
+            console.error("Error saving panel layout:", e);
+        }
+    };
+    const resetPanelLayout = () => {
+        if (groupRef.current) {
+            const defaultLayout = { table: 50, details: 50 };
+            groupRef.current.setLayout(defaultLayout);
+            try {
+                localStorage.setItem(jobStorageKey, JSON.stringify(defaultLayout));
+            }
+            catch (e) {
+                console.error("Error saving default layout:", e);
+            }
+        }
+    };
+    const handleSeparatorDoubleClick = () => {
+        resetPanelLayout();
+    };
     useEffect(() => {
         if (e && isError) {
             setErrorMessage(e.message);
@@ -7596,36 +7641,47 @@ const TableJobs = () => {
         React.createElement(Grid2, { container: true, justifyContent: "flex-start", p: 1, spacing: 1 },
             React.createElement(Grid2, { size: { md: 12, xs: 12 } },
                 React.createElement(Typography$1, { variant: "h5", fontWeight: 600 }, "System Jobs")),
-            React.createElement(Grid2, { container: true, justifyContent: "flex-start", alignItems: "center", sx: {
-                    width: "100%",
-                    "& .MuiDataGrid-row": {
-                        cursor: "pointer",
-                    },
-                    "& .MuiDataGrid-columnHeaderTitle, & .MuiTablePagination-caption": {
-                        fontWeight: "bold",
-                        fontColor: "black",
-                    },
-                }, spacing: 2 },
-                React.createElement(Grid2, { size: { md: 6, xs: 12 } },
-                    React.createElement(Paper, { elevation: 2, style: { height: "70vh", width: "100%" } },
-                        React.createElement(AgGridReact, { loading: isLoading, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, getContextMenuItems: getContextMenuItems, loadingOverlayComponent: CenteredLazyLoading, rowHeight: 34, headerHeight: 34, animateRows: true, rowSelection: "single", onGridReady: (params) => setGridApi(params.api), getRowId: (params) => `${params.data.JobId}`, onRowClicked: onRowClicked, onCellKeyDown: onCellKeyDown, gridOptions: {
-                                theme: themeDXT,
-                                statusBar: {
-                                    statusPanels: [
-                                        {
-                                            statusPanel: (params) => (React.createElement(CustomStatusPanel$1, { handleNew: handleNewJob })),
-                                            align: "left",
-                                        },
-                                        {
-                                            statusPanel: "agTotalRowCountComponent",
-                                            align: "right",
-                                        },
-                                    ],
-                                },
-                            } }))),
-                React.createElement(Grid2, { size: { md: 6, xs: 12 } },
-                    React.createElement(Paper, { elevation: 2, style: { height: "70vh", width: "100%" }, className: `ag-theme-material` },
-                        React.createElement(JobDetails, { job: jobSelected, modal: showModal, onHide: onDetailsHide, suffixTitle: "System Jobs" }))))),
+            React.createElement(Grid2, { sx: { width: "100%" } },
+                React.createElement(Group, { orientation: "horizontal", defaultLayout: getSavedPanelLayout(), onLayoutChange: handlePanelResize, groupRef: groupRef, style: { height: "100%" } },
+                    React.createElement(Panel, { id: "table", minSize: 20 },
+                        React.createElement(Paper, { elevation: 2, style: { height: "70vh", width: "100%" } },
+                            React.createElement(AgGridReact, { loading: isLoading, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, getContextMenuItems: getContextMenuItems, loadingOverlayComponent: CenteredLazyLoading, rowHeight: 34, headerHeight: 34, animateRows: true, rowSelection: "single", onGridReady: (params) => setGridApi(params.api), getRowId: (params) => `${params.data.JobId}`, onRowClicked: onRowClicked, onCellKeyDown: onCellKeyDown, gridOptions: {
+                                    theme: themeDXT,
+                                    statusBar: {
+                                        statusPanels: [
+                                            {
+                                                statusPanel: (params) => (React.createElement(CustomStatusPanel$1, { handleNew: handleNewJob })),
+                                                align: "left",
+                                            },
+                                            {
+                                                statusPanel: "agTotalRowCountComponent",
+                                                align: "right",
+                                            },
+                                        ],
+                                    },
+                                } }))),
+                    React.createElement(Separator, { onDoubleClick: handleSeparatorDoubleClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: {
+                            width: hover ? "10px" : "8px",
+                            background: hover ? "#bdbdbd" : "#e0e0e0",
+                            position: "relative",
+                            cursor: "col-resize",
+                            marginLeft: 5,
+                            marginRight: 5,
+                            borderRadius: 10,
+                        } },
+                        React.createElement("div", { style: {
+                                position: "absolute",
+                                top: "50%",
+                                left: "50%",
+                                transform: "translate(-50%, -50%)",
+                                width: "3px",
+                                height: "40px",
+                                background: hover ? "#616161" : "#9e9e9e",
+                                borderRadius: "2px",
+                            } })),
+                    React.createElement(Panel, { id: "details", minSize: 20 },
+                        React.createElement(Paper, { elevation: 2, style: { height: "70vh", width: "100%" } },
+                            React.createElement(JobDetails, { job: jobSelected, modal: showModal, onHide: onDetailsHide, suffixTitle: "System Jobs" })))))),
         React.createElement(ResetJob, { show: showModal === "reset", onHide: (shouldUpdate) => __awaiter(void 0, void 0, void 0, function* () {
                 setShowModal("");
                 setJobSelected(null);
@@ -7980,7 +8036,7 @@ const CodeFilter = ({ LogTypeCode, setLogTypeCodeFilter }) => {
 
 const DateFilter = ({ date, setDate, label = "Date", minDate, maxDate, }) => {
     return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
-        React__default.createElement(DatePicker$1, { format: "MM/DD/YYYY", minDate: minDate ? moment$f(minDate) : undefined, maxDate: maxDate ? moment$f(maxDate) : undefined, sx: {
+        React__default.createElement(DatePicker$1, { format: "MM/DD/YYYY", minDate: minDate ? moment$g(minDate) : undefined, maxDate: maxDate ? moment$g(maxDate) : undefined, sx: {
                 minWidth: "100%",
                 borderTopLeftRadius: 3,
                 borderTopRightRadius: 3,
@@ -7990,7 +8046,7 @@ const DateFilter = ({ date, setDate, label = "Date", minDate, maxDate, }) => {
                     size: "small",
                     fullWidth: true,
                 },
-            }, label: label, value: date ? moment$f(date) : null, onChange: (newDate) => setDate(newDate ? newDate.toDate() : null) })));
+            }, label: label, value: date ? moment$g(date) : null, onChange: (newDate) => setDate(newDate ? newDate.toDate() : null) })));
 };
 
 const SearchFilter = ({ search, setSearch }) => {
@@ -8095,7 +8151,7 @@ const getLogs = (params, signal) => __awaiter(void 0, void 0, void 0, function*
     const resp = yield apiService.callV2("[MES].[GetLogs]", parameters);
     if (resp.ok) {
         let rows = get(resp, "data.tables[0].rows", []);
-        rows = rows.map((log) => (Object.assign(Object.assign({}, log), { Timestamp: log.Timestamp ? moment$f.utc(log["Timestamp"]).toDate() : null })));
+        rows = rows.map((log) => (Object.assign(Object.assign({}, log), { Timestamp: log.Timestamp ? moment$g.utc(log["Timestamp"]).toDate() : null })));
         return rows;
     }
     else {
@@ -8225,8 +8281,8 @@ const getLogTypeByCodeId = (logTypeCodeId) => {
     return get(LOG_TYPE_CODES, `${logTypeCodeId}.description`, " -");
 };
 const TableLogs = () => {
-    const [startDate, setStartDate] = useState(moment$f().add(-5, "days").hour(0).minute(0).second(0).toDate());
-    const [endDate, setEndDate] = useState(moment$f().hour(23).minute(59).second(59).toDate());
+    const [startDate, setStartDate] = useState(moment$g().add(-5, "days").hour(0).minute(0).second(0).toDate());
+    const [endDate, setEndDate] = useState(moment$g().hour(23).minute(59).second(59).toDate());
     const [timezone, setTimezone] = useState("UTC");
     const [search, setSearch] = useState("");
     const [logTypeCode, setLogTypeCode] = useState(["I", "W", "E"]);
@@ -8249,7 +8305,7 @@ const TableLogs = () => {
     const formattedRows = rows === null || rows === void 0 ? void 0 : rows.map(({ LogId, Timestamp, Source, Message, LogTypeCode, User }) => ({
         id: LogId,
         Timestamp: timezone === "UTC"
-            ? moment$f(Timestamp).utc().format("YYYY-MM-DD HH:mm:ss z")
+            ? moment$g(Timestamp).utc().format("YYYY-MM-DD HH:mm:ss z")
             : dxtToLocalServerTime(Timestamp, "yyyy-MM-dd HH:mm:ss z"),
         Source,
         Message: isNil(Message) ? "" : Message.replaceAll("Added", " Added"),
@@ -8273,8 +8329,8 @@ const TableLogs = () => {
     }, []);
     const { showContextMenu, registerConfig } = useContextMenuMESF();
     const handleResetButtonClick = () => {
-        setStartDate(moment$f().add(-5, "days").hour(0).minute(0).second(0).toDate());
-        setEndDate(moment$f().hour(23).minute(59).second(59).toDate());
+        setStartDate(moment$g().add(-5, "days").hour(0).minute(0).second(0).toDate());
+        setEndDate(moment$g().hour(23).minute(59).second(59).toDate());
         setSearch("");
         gridAPI === null || gridAPI === void 0 ? void 0 : gridAPI.setGridOption("quickFilterText", "");
         setLogTypeCode(["I", "W", "E"]);
@@ -8364,7 +8420,7 @@ const TableLogs = () => {
                                                 setEndDate(null);
                                             }
                                             else {
-                                                setEndDate(moment$f().hour(23).minute(59).second(59).toDate());
+                                                setEndDate(moment$g().hour(23).minute(59).second(59).toDate());
                                             }
                                             setAutoRefresh(checked);
                                         } })),
@@ -9062,14 +9118,14 @@ const CreateShift = ({ shiftSelected, show, onHide, suffixTitle, assetId, assetN
                                             minWidth: "100%",
                                             borderTopLeftRadius: 3,
                                             borderTopRightRadius: 3,
-                                        }, label: "Start", value: value ? moment$f(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
+                                        }, label: "Start", value: value ? moment$g(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
                                             textField: {
                                                 fullWidth: true,
                                                 variant: "standard",
                                             },
                                         } })),
                                 React.createElement(Grid2, { size: { md: 6, xs: 12 } },
-                                    React.createElement(DatePicker$1, { label: "Time", value: value ? moment$f(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
+                                    React.createElement(DatePicker$1, { label: "Time", value: value ? moment$g(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
                                             textField: {
                                                 fullWidth: true,
                                                 variant: "standard",
@@ -9259,7 +9315,7 @@ const DeleteShift = ({ shiftSelected, show, onHide, suffixTitle, assetId, assetN
                                             minWidth: "100%",
                                             borderTopLeftRadius: 3,
                                             borderTopRightRadius: 3,
-                                        }, label: "Start", value: value ? moment$f(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
+                                        }, label: "Start", value: value ? moment$g(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
                                             textField: {
                                                 fullWidth: true,
                                                 variant: "standard",
@@ -9267,7 +9323,7 @@ const DeleteShift = ({ shiftSelected, show, onHide, suffixTitle, assetId, assetN
                                             },
                                         } })),
                                 React.createElement(Grid2, { size: { md: 6, xs: 12 } },
-                                    React.createElement(DatePicker$1, { label: "Time", value: value ? moment$f(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
+                                    React.createElement(DatePicker$1, { label: "Time", value: value ? moment$g(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
                                             textField: {
                                                 fullWidth: true,
                                                 variant: "standard",
@@ -9392,14 +9448,14 @@ const EditShift = ({ shiftSelected, show, onHide, suffixTitle, assetId, assetNam
                                             minWidth: "100%",
                                             borderTopLeftRadius: 3,
                                             borderTopRightRadius: 3,
-                                        }, label: "Start", value: value ? moment$f(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
+                                        }, label: "Start", value: value ? moment$g(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
                                             textField: {
                                                 fullWidth: true,
                                                 variant: "standard",
                                             },
                                         } })),
                                 React.createElement(Grid2, { size: { md: 6, xs: 12 } },
-                                    React.createElement(DatePicker$1, { label: "Time", value: value ? moment$f(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
+                                    React.createElement(DatePicker$1, { label: "Time", value: value ? moment$g(value) : value, onChange: (evt) => onChange(evt === null || evt === void 0 ? void 0 : evt.toDate()), slotProps: {
                                             textField: {
                                                 fullWidth: true,
                                                 variant: "standard",
@@ -9571,7 +9627,7 @@ const useTableData$4 = ({ setShiftSelected, setOpenModalEditShift, setOpenModalD
         {
             field: "PatternStart",
             headerName: "Pattern Start",
-            valueFormatter: ({ value }) => `${moment$f(value).format("L")}, ${moment$f(value).format("LTS")}`,
+            valueFormatter: ({ value }) => `${moment$g(value).format("L")}, ${moment$g(value).format("LTS")}`,
             minWidth: 180,
             flex: 4,
             cellStyle: {
@@ -10506,7 +10562,7 @@ const renderInput = (param, onChange, disabled) => {
         return (React__default.createElement(TextField, { type: "number", label: param.parameterName, value: param.value, onChange: (e) => onChange(e.target.value === "" ? "" : Number(e.target.value)), disabled: disabled, fullWidth: true, size: "small", inputProps: { step: "any" } }));
     }
     if (["datetime", "datetime2", "date", "smalldatetime"].includes(type)) {
-        return (React__default.createElement(DateTimePicker$1, { label: param.parameterName, value: param.value ? moment$f(param.value) : null, onChange: (newValue) => onChange((newValue === null || newValue === void 0 ? void 0 : newValue.toDate()) || null), disabled: disabled, slotProps: {
+        return (React__default.createElement(DateTimePicker$1, { label: param.parameterName, value: param.value ? moment$g(param.value) : null, onChange: (newValue) => onChange((newValue === null || newValue === void 0 ? void 0 : newValue.toDate()) || null), disabled: disabled, slotProps: {
                 textField: {
                     fullWidth: true,
                     size: "small",
@@ -10972,7 +11028,7 @@ const Configuration = () => {
                 } }, "Security") },
             React__default.createElement(ListItemButton, { selected: option === "users", component: Link, to: "/configuration/users" },
                 React__default.createElement(ListItemIcon, null,
-                    React__default.createElement(Group, null)),
+                    React__default.createElement(Group$1, null)),
                 React__default.createElement(ListItemText, { primary: "Users" })),
             React__default.createElement(ListItemButton, { selected: option === "profiles", component: Link, to: "/configuration/profiles" },
                 React__default.createElement(ListItemIcon, null,
@@ -11773,21 +11829,21 @@ const dateNavigator = (startDate, endDate, scope, operator, current = false) =>
         }
         else {
             const [quantity, duration] = scope.split(" ");
-            newStartDate = moment$f(newEndDate)
+            newStartDate = moment$g(newEndDate)
                 .subtract(quantity, duration[0])
                 .toDate();
         }
     }
     else {
         if (scope === "custom") {
-            const durationInMs = moment$f(endDate).diff(moment$f(startDate));
-            newStartDate = moment$f(startDate)[operator](durationInMs).toDate();
+            const durationInMs = moment$g(endDate).diff(moment$g(startDate));
+            newStartDate = moment$g(startDate)[operator](durationInMs).toDate();
         }
         else {
             const [quantity, duration] = scope.split(" ");
-            newStartDate = moment$f(startDate)[operator](quantity, duration[0])
+            newStartDate = moment$g(startDate)[operator](quantity, duration[0])
                 .toDate();
-            newEndDate = moment$f(endDate)[operator](quantity, duration[0])
+            newEndDate = moment$g(endDate)[operator](quantity, duration[0])
                 .toDate();
         }
     }
@@ -11823,11 +11879,11 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
     };
     const handlePartialDateNavigator = (operator) => {
         // Calculate 20% of the current period
-        const durationInMs = moment$f(timeScopeEnd).diff(moment$f(timeScopeStart));
+        const durationInMs = moment$g(timeScopeEnd).diff(moment$g(timeScopeStart));
         const partialDuration = Math.round(durationInMs * 0.2);
-        const newStartDate = moment$f(timeScopeStart)[operator](partialDuration, "milliseconds")
+        const newStartDate = moment$g(timeScopeStart)[operator](partialDuration, "milliseconds")
             .toDate();
-        const newEndDate = moment$f(timeScopeEnd)[operator](partialDuration, "milliseconds")
+        const newEndDate = moment$g(timeScopeEnd)[operator](partialDuration, "milliseconds")
             .toDate();
         setTotalScope({
             start: newStartDate,
@@ -11836,7 +11892,7 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
         });
     };
     const handleDateChange = (newValue, key) => {
-        const newDate = moment$f(newValue).toDate();
+        const newDate = moment$g(newValue).toDate();
         // If scope is "custom", just update the changed date
         if (scope === "custom") {
             setTotalScope({ [key]: newDate });
@@ -11943,7 +11999,7 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                 React__default.createElement(FastRewind, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, { size: { md: 3.5 } },
                         React__default.createElement(LocalizationProvider$1, { dateAdapter: AdapterMoment },
-                            React__default.createElement(DateTimePicker, { label: "Start", format: "MM/DD/YYYY HH:mm:ss", value: moment$f(timeScopeStart), onChange: (newValue) => {
+                            React__default.createElement(DateTimePicker, { label: "Start", format: "MM/DD/YYYY HH:mm:ss", value: moment$g(timeScopeStart), onChange: (newValue) => {
                                     if (newValue) {
                                         handleDateChange(newValue.toDate(), "start");
                                     }
@@ -11966,7 +12022,7 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                 React__default.createElement(MenuItem, { value: "custom" }, "Custom")))),
                     React__default.createElement(Grid2, { size: { md: 3.5 } },
                         React__default.createElement(LocalizationProvider$1, { dateAdapter: AdapterMoment },
-                            React__default.createElement(DateTimePicker, { label: "End", format: "MM/DD/YYYY HH:mm:ss", value: autoRefresh ? null : moment$f(timeScopeEnd), onChange: (newValue) => {
+                            React__default.createElement(DateTimePicker, { label: "End", format: "MM/DD/YYYY HH:mm:ss", value: autoRefresh ? null : moment$g(timeScopeEnd), onChange: (newValue) => {
                                     if (newValue) {
                                         handleDateChange(newValue.toDate(), "end");
                                     }
@@ -15757,7 +15813,7 @@ const TrendingsPageV2 = () => {
                     display: "flex",
                     width: "100%",
                 } },
-                React__default.createElement(Group$1, { orientation: "vertical", style: { width: "100%", height: "100%" } },
+                React__default.createElement(Group, { orientation: "vertical", style: { width: "100%", height: "100%" } },
                     React__default.createElement(Panel, { defaultSize: 80, minSize: 20 },
                         React__default.createElement("div", { style: { height: "100%", width: "100%" } },
                             React__default.createElement(TrendingChartV2, { customOptions: chartOptions, series: filteredSeries, isLoading: seriesLoading && seriesFetching, onChartReady: setChartInstance, dataLoadedTrigger: dataLoadedTrigger }))),
@@ -15855,7 +15911,7 @@ const ProvidersLoader = ({ children, }) => {
 };
 
 const timezone = TimeService.getInstance().getServerTimeZone();
-moment$g.tz.setDefault(timezone);
+moment$h.tz.setDefault(timezone);
 const base = document.getElementsByTagName("base")[0].getAttribute("href") || "/";
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -15881,7 +15937,7 @@ function MESFMain({ authentication, routes, navbar, navbarTitle = "MESF", config
                     React__default.createElement(HelmetDexteelProvider, { navbarTitle: navbarTitle },
                         React__default.createElement(QueryClientProvider, { client: queryClient },
                             React__default.createElement(AuthProvider, { authConfig: authentication },
-                                React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$g },
+                                React__default.createElement(LocalizationProvider, { dateAdapter: AdapterMoment, dateLibInstance: moment$h },
                                     React__default.createElement(UserProvider, null,
                                         React__default.createElement(UTLSettingsProvider, null,
                                             React__default.createElement(ProvidersLoader, null,
@@ -17370,7 +17426,7 @@ const Logbook$3 = () => {
                     fontWeight: 600,
                     userSelect: "none",
                 } }, "LOGBOOK")),
-        React__default.createElement(Group$1, { id: "logbook-entry-group", orientation: "horizontal", defaultLayout: resolvedLayout, onLayoutChange: onLayoutChange, style: { flex: 1, width: "100%" } },
+        React__default.createElement(Group, { id: "logbook-entry-group", orientation: "horizontal", defaultLayout: resolvedLayout, onLayoutChange: onLayoutChange, style: { flex: 1, width: "100%" } },
             React__default.createElement(Panel, { id: "left", defaultSize: 42, minSize: 25, style: { paddingBottom: 5 } },
                 React__default.createElement(Box, { sx: {
                         display: "flex",
@@ -17981,7 +18037,7 @@ const Logbook$2 = () => {
                     fontWeight: 600,
                     userSelect: "none",
                 } }, "LOGBOOK REPORT")),
-        React__default.createElement(Group$1, { id: "logbook-report-group", orientation: "horizontal", defaultLayout: resolvedLayout, onLayoutChange: onLayoutChange, style: { flex: 1, width: "100%" } },
+        React__default.createElement(Group, { id: "logbook-report-group", orientation: "horizontal", defaultLayout: resolvedLayout, onLayoutChange: onLayoutChange, style: { flex: 1, width: "100%" } },
             React__default.createElement(Panel, { id: "left", defaultSize: 42, minSize: 25, style: { paddingBottom: 5 } },
                 React__default.createElement(Box, { sx: {
                         display: "flex",
@@ -19713,7 +19769,7 @@ const Logbook$1 = () => {
                     fontWeight: 600,
                     userSelect: "none",
                 } }, "LOGBOOK")),
-        React__default.createElement(Group$1, { id: "section-logbook-entry-group", orientation: "horizontal", defaultLayout: resolvedLayout, onLayoutChange: onLayoutChange, style: { flex: 1, width: "100%" } },
+        React__default.createElement(Group, { id: "section-logbook-entry-group", orientation: "horizontal", defaultLayout: resolvedLayout, onLayoutChange: onLayoutChange, style: { flex: 1, width: "100%" } },
             React__default.createElement(Panel, { id: "left", defaultSize: 42, minSize: 25, style: { paddingBottom: 5 } },
                 React__default.createElement(Box, { sx: {
                         display: "flex",
@@ -20292,7 +20348,7 @@ const Logbook = () => {
                     fontWeight: 600,
                     userSelect: "none",
                 } }, "LOGBOOK REPORT")),
-        React__default.createElement(Group$1, { id: "section-logbook-report-group", orientation: "horizontal", defaultLayout: resolvedLayout, onLayoutChange: onLayoutChange, style: { flex: 1, width: "100%" } },
+        React__default.createElement(Group, { id: "section-logbook-report-group", orientation: "horizontal", defaultLayout: resolvedLayout, onLayoutChange: onLayoutChange, style: { flex: 1, width: "100%" } },
             React__default.createElement(Panel, { id: "left", defaultSize: 42, minSize: 25, style: { paddingBottom: 5 } },
                 React__default.createElement(Box, { sx: {
                         display: "flex",
@@ -20531,7 +20587,16 @@ const AreaSelector = () => {
                                     borderRadius: "2px",
                                     overflowY: "auto",
                                 } },
-                                React__default.createElement(List, { dense: true, style: { padding: 0 } }, areasList === null || areasList === void 0 ? void 0 : areasList.map((area) => (React__default.createElement(ListItemButton, { key: `Area-${area === null || area === void 0 ? void 0 : area.AssetId}`, onClick: () => handleChangeAreaId(area === null || area === void 0 ? void 0 : area.AssetId, area === null || area === void 0 ? void 0 : area.AssetName), style: { cursor: "pointer", width: "100%" } },
+                                React__default.createElement(List, { dense: true, style: { padding: 0 } }, areasList === null || areasList === void 0 ? void 0 : areasList.map((area) => (React__default.createElement(ListItemButton, { key: `Area-${area === null || area === void 0 ? void 0 : area.AssetId}`, onClick: () => handleChangeAreaId(area === null || area === void 0 ? void 0 : area.AssetId, area === null || area === void 0 ? void 0 : area.AssetName), selected: (area === null || area === void 0 ? void 0 : area.AssetId) === defaultAreaIdToChange, sx: {
+                                        "&.Mui-selected": {
+                                            backgroundColor: (theme) => alpha(theme.palette.info.main, 0.2),
+                                            "&:hover": {
+                                                backgroundColor: (theme) => alpha(theme.palette.info.main, 0.4),
+                                            },
+                                        },
+                                        cursor: "pointer",
+                                        width: "100%",
+                                    } },
                                     React__default.createElement(ListItemText, { primary: area === null || area === void 0 ? void 0 : area.AssetName })))))))))),
             React__default.createElement(DialogActions$1, null,
                 React__default.createElement(Button, { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),