@dexteel/mesf-core 7.17.2 → 7.19.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 export * from '@microsoft/signalr';
 export { LicenseManager } from 'ag-grid-enterprise';
-import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, Box, MenuItem, ListItemIcon, createTheme, TextField, Alert as Alert$2, useTheme, InputAdornment, Popover, MenuList, ListItemText, alpha, Dialog as Dialog$1, Paper, List, ListItem, Chip, SvgIcon, Typography as Typography$1, Checkbox, IconButton as IconButton$1, CircularProgress, FormControl, FormHelperText, FormControlLabel, Snackbar, DialogContentText, Badge, InputLabel, Select, Input, Divider, Card, CardContent, CardActions, Collapse, Tooltip, CssBaseline, AppBar, Toolbar, Container, Menu, Switch, Autocomplete, useMediaQuery, Drawer, Grid, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, ListSubheader, ListItemButton, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
+import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, Box, MenuItem, ListItemIcon, createTheme, TextField, Alert as Alert$2, useTheme, InputAdornment, Popover, MenuList, ListItemText, alpha, Dialog as Dialog$1, Paper, List, ListItem, Chip, SvgIcon, Typography as Typography$1, Checkbox, IconButton as IconButton$1, CircularProgress, FormControl, FormHelperText, FormControlLabel, Snackbar, DialogContentText, Badge, InputLabel, Select, Input, Divider, Card, CardContent, CardActions, Collapse, Tooltip, CssBaseline, AppBar, Toolbar, Container, Menu, Switch, Autocomplete as Autocomplete$1, useMediaQuery, Drawer, Grid, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, ListSubheader, ListItemButton, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
 import { useMutation, useQuery, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';
 import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, Component, lazy, Suspense } from 'react';
@@ -11,7 +11,7 @@ import { createPart, themeMaterial, provideGlobalGridOptions } from 'ag-grid-com
 import { values, get, isEmpty, isNil } from 'lodash-es';
 import { useForm, Controller } from 'react-hook-form';
 import { isAncestor, Tree, DndProvider as DndProvider$1 } from '@minoru/react-dnd-treeview';
-import { Alert as Alert$4, AlertTitle, Autocomplete as Autocomplete$1 } from '@mui/lab';
+import { Alert as Alert$4, Autocomplete, AlertTitle } from '@mui/lab';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import AccountTree from '@mui/icons-material/AccountTree';
 import Settings$1 from '@mui/icons-material/Settings';
@@ -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,10 +45,12 @@ 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';
 import ToggleOnIcon from '@mui/icons-material/ToggleOn';
+import 'moment-duration-format';
 import { useComplexState } from 'use-complex-state';
 import { createSlice } from '@reduxjs/toolkit';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
@@ -61,7 +63,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';
@@ -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", {
@@ -1489,7 +1490,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 +1528,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;
@@ -5568,7 +5569,7 @@ const LongFilterPanel = (props) => {
 };
 
 const getShiftByParameters = (parameters) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a;
+    var _a, _b;
     const utcString = (_a = parameters.productionDate) === null || _a === void 0 ? void 0 : _a.toISOString();
     try {
         const sqlParameters = [];
@@ -5580,6 +5581,10 @@ const getShiftByParameters = (parameters) => __awaiter(void 0, void 0, void 0, f
             name: "@ProductionDate",
             value: utcString,
         });
+        sqlParameters.push({
+            name: "@AssetId",
+            value: (_b = parameters.assetId) !== null && _b !== void 0 ? _b : null,
+        });
         const apiService = new MESApiService();
         const resp = yield apiService.callV2("[MES].[GetShiftByParameters]", sqlParameters);
         if (resp.ok) {
@@ -5604,7 +5609,7 @@ const useShiftNavigatorManager = () => {
     const [shiftInfo, setShiftInfo] = useState(null);
     const [isShiftInfoLoading, setIsShiftInfoLoading] = useState(false);
     const [error, setError] = useState("");
-    const moveShift = (direction) => __awaiter(void 0, void 0, void 0, function* () {
+    const moveShift = (direction, assetId) => __awaiter(void 0, void 0, void 0, function* () {
         if (isNil(shiftInfo)) {
             return;
         }
@@ -5623,31 +5628,33 @@ const useShiftNavigatorManager = () => {
             const resp = yield getShiftByParameters({
                 productionDate: null,
                 shiftId: shiftId,
+                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;
             }
         }
     });
-    const getShiftDataFromAPI = (productionDate, shiftId) => __awaiter(void 0, void 0, void 0, function* () {
+    const getShiftDataFromAPI = (productionDate, shiftId, assetId) => __awaiter(void 0, void 0, void 0, function* () {
         setIsShiftInfoLoading(true);
         try {
             const resp = yield getShiftByParameters({
                 productionDate: productionDate,
                 shiftId: shiftId,
+                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;
             }
@@ -5657,17 +5664,18 @@ const useShiftNavigatorManager = () => {
         }
         setIsShiftInfoLoading(false);
     });
-    const initShiftNavigator = () => __awaiter(void 0, void 0, void 0, function* () {
+    const initShiftNavigator = (assetId) => __awaiter(void 0, void 0, void 0, function* () {
         const resp = yield getShiftByParameters({
             productionDate: new Date(),
             shiftId: 0,
+            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;
         }
@@ -5723,7 +5731,7 @@ const ShiftNavigatorProvider = ({ children }) => {
 
 const ShiftDayNavigatorControl = (_a) => {
     var _b;
-    var { useRouter, onShiftChange, preventInit, withPaper = true, margin = "1rem 1rem 1rem 1rem" } = _a, props = __rest(_a, ["useRouter", "onShiftChange", "preventInit", "withPaper", "margin"]);
+    var { useRouter, onShiftChange, preventInit, withPaper = true, margin = "1rem 1rem 1rem 1rem", assetId } = _a, props = __rest(_a, ["useRouter", "onShiftChange", "preventInit", "withPaper", "margin", "assetId"]);
     const { shiftInfo, initShiftNavigator, moveShift, getShiftDataFromAPI } = useShiftNavigator();
     const [shiftInfoCopy, setShiftInfoCopy] = useState(shiftInfo);
     const [error, setError] = useState("");
@@ -5747,13 +5755,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);
                     }
                 }
@@ -5775,12 +5783,12 @@ const ShiftDayNavigatorControl = (_a) => {
                 return;
             }
             if (useRouter && shiftId) {
-                getShiftDataFromAPI(null, Number(shiftId)).then(() => {
+                getShiftDataFromAPI(null, Number(shiftId), assetId).then(() => {
                     onShiftChange && onShiftChange(Number(shiftId));
                 });
             }
             else {
-                initShiftNavigator().then(() => {
+                initShiftNavigator(assetId).then(() => {
                     onShiftChange && onShiftChange(Number(shiftId));
                 });
             }
@@ -5790,13 +5798,13 @@ const ShiftDayNavigatorControl = (_a) => {
         React__default.createElement(Grid2, { size: "auto" },
             React__default.createElement(Tooltip, { title: "Previous Shift" },
                 React__default.createElement(IconButton$1, { "aria-label": "Previous Shift", color: "primary", disabled: !(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.PreviousShiftId), onClick: () => {
-                        moveShift("Previous").then(() => { });
+                        moveShift("Previous", assetId).then(() => { });
                     }, 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).then(() => { });
+                        getShiftDataFromAPI(date.toDate(), 0, assetId).then(() => { });
                     }
                 }, slots: {
                     textField: TextField,
@@ -5817,13 +5825,13 @@ const ShiftDayNavigatorControl = (_a) => {
         React__default.createElement(Grid2, { size: "auto" },
             React__default.createElement(Tooltip, { title: "Next Shift" },
                 React__default.createElement(IconButton$1, { "aria-label": "next", color: "primary", disabled: !(shiftInfoCopy === null || shiftInfoCopy === void 0 ? void 0 : shiftInfoCopy.NextShiftId), onClick: () => {
-                        moveShift("Next").then(() => { });
+                        moveShift("Next", assetId).then(() => { });
                     }, size: "small" },
                     React__default.createElement(ArrowForwardRounded, null)))),
         React__default.createElement(Grid2, null,
             React__default.createElement(Tooltip, { title: "Last Shift" },
                 React__default.createElement(IconButton$1, { "aria-label": "delete", color: "primary", disabled: !(shiftInfoCopy === null || shiftInfoCopy === void 0 ? void 0 : shiftInfoCopy.LastShiftId) || !(shiftInfoCopy === null || shiftInfoCopy === void 0 ? void 0 : shiftInfoCopy.NextShiftId), onClick: () => {
-                        moveShift("Last").then(() => { });
+                        moveShift("Last", assetId).then(() => { });
                     }, size: "small" },
                     React__default.createElement(SkipNext, null))))));
     return withPaper !== false ? React__default.createElement(Paper, null, gridContent) : gridContent;
@@ -5860,8 +5868,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,
@@ -5901,10 +5909,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) {
@@ -6004,8 +6012,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);
@@ -6013,7 +6021,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(() => {
@@ -6072,8 +6080,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",
@@ -6115,8 +6123,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",
@@ -6142,6 +6150,170 @@ const ShiftPeriodNavigatorControl = ({ value, actualPeriod, onChange, showShiftA
                 React__default.createElement(SkipNextIcon, null)))));
 };
 
+const moment$f = getMomentTz();
+const getShifts = (params, signal) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const apiService = new MESApiService();
+    const parameters = [
+        {
+            name: "ShiftId",
+            value: (_a = params.shiftId) !== null && _a !== void 0 ? _a : null,
+        },
+    ];
+    const resp = yield apiService.callV2(`[MES].[GetShiftByParameters]`, parameters, signal);
+    if (resp.ok) {
+        let rows = get(resp, "data.tables[0].rows", []);
+        rows = rows.map((row) => {
+            (row.CurrentProductionDate = moment$f
+                .utc(row["CurrentProductionDate"])
+                .toDate()),
+                (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$f.utc(row["PreviousStart"]).toDate()),
+                (row.PreviousEnd = moment$f.utc(row["PreviousEnd"]).toDate()),
+                (row.NextProductionDate = moment$f
+                    .utc(row["NextProductionDate"])
+                    .toDate()),
+                (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$f.utc(row["LastStart"]).toDate()),
+                (row.LastEnd = moment$f.utc(row["LastEnd"]).toDate());
+            return row;
+        });
+        return rows;
+    }
+    else {
+        throw new Error(resp.message || "Error fetching shifts");
+    }
+});
+const getShiftsByRange = (_a) => __awaiter(void 0, [_a], void 0, function* ({ shiftId, assetId, shiftsBefore, shiftsAfter, }) {
+    const apiService = new MESApiService();
+    const parameters = [
+        { name: "ShiftId", value: shiftId !== null && shiftId !== void 0 ? shiftId : null },
+        { name: "AssetId", value: assetId !== null && assetId !== void 0 ? assetId : null },
+    ];
+    if (shiftsBefore !== undefined) {
+        parameters.push({ name: "ShiftsBefore", value: shiftsBefore });
+    }
+    if (shiftsAfter !== undefined) {
+        parameters.push({ name: "ShiftsAfter", value: shiftsAfter });
+    }
+    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$f.utc(row.Start).toDate(), End: moment$f.utc(row.End).toDate() })));
+        return rows;
+    }
+    else {
+        throw new Error(resp.message || "Error fetching shifts by range");
+    }
+});
+const getShiftsAroundCurrent = (_a) => __awaiter(void 0, [_a], void 0, function* ({ currentShiftId, shiftsRange, }) {
+    const apiService = new MESApiService();
+    const parameters = [
+        { name: "CurrentShiftId", value: currentShiftId || null },
+    ];
+    if (shiftsRange) {
+        parameters.push({ name: "ShiftsRange", value: shiftsRange });
+    }
+    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$f.utc(row.Start).toDate(), End: moment$f.utc(row.End).toDate() })));
+        return rows;
+    }
+    else {
+        throw new Error(resp.message || "Error fetching shifts");
+    }
+});
+
+const moment$e = getMomentTz();
+const useShiftsAroundCurrent = ({ currentShiftId, shiftsRange, enabled = true, }) => {
+    return useQuery({
+        queryKey: ["shiftsAroundCurrent", currentShiftId, shiftsRange],
+        queryFn: ({ signal }) => getShiftsAroundCurrent({ currentShiftId, shiftsRange }),
+        enabled,
+    });
+};
+const useShiftsByRange = ({ shiftId, assetId, shiftsBefore, shiftsAfter, enabled = true, }) => {
+    return useQuery({
+        queryKey: ["shiftsByRange", shiftId, assetId, shiftsBefore, shiftsAfter],
+        queryFn: () => getShiftsByRange({ shiftId, assetId, shiftsBefore, shiftsAfter }),
+        enabled,
+    });
+};
+const ShiftAutocomplete = ({ currentShiftId, value, onShiftSelected, disabled, shiftsRange, assetId, shiftsAfter, }) => {
+    const [error, setError] = useState("");
+    const useNewPath = assetId !== undefined;
+    // Legacy path (existing consumers)
+    const { data: legacyRows, isLoading: legacyLoading, error: legacyError, isError: legacyIsError, } = useShiftsAroundCurrent({
+        currentShiftId,
+        shiftsRange,
+        enabled: !useNewPath,
+    });
+    // New path (asset-filtered, count-based)
+    const { data: rangeRows, isLoading: rangeLoading, error: rangeError, isError: rangeIsError, } = useShiftsByRange({
+        shiftId: currentShiftId,
+        assetId,
+        shiftsBefore: shiftsRange !== null && shiftsRange !== void 0 ? shiftsRange : 10,
+        shiftsAfter: shiftsAfter !== null && shiftsAfter !== void 0 ? shiftsAfter : 0,
+        enabled: useNewPath,
+    });
+    // Unified variables
+    const rows = useNewPath ? rangeRows : legacyRows;
+    const isLoading = useNewPath ? rangeLoading : legacyLoading;
+    const e = useNewPath ? rangeError : legacyError;
+    const isError = useNewPath ? rangeIsError : legacyIsError;
+    const selectedShift = (rows === null || rows === void 0 ? void 0 : rows.find((type) => type.ShiftId === value)) || null;
+    useEffect(() => {
+        if (e && isError) {
+            setError(e.message);
+        }
+    }, [e, isError]);
+    return (React__default.createElement(React__default.Fragment, null,
+        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$e
+                            .utc(option.ProductionDate)
+                            .format("MM/DD/YYYY")} - ${option.Shift} - ${option.Crew}`;
+                    }, value: selectedShift, onChange: (event, newValue) => {
+                        if (newValue) {
+                            onShiftSelected(newValue);
+                        }
+                    }, disabled: disabled, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Shift", variant: "outlined", size: "small", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 20 })) : null)) }) }))) }))),
+        React__default.createElement(ErrorModal, { error: error, onHide: () => setError("") })));
+};
+
+const useShifts = (shiftId) => {
+    return useQuery({
+        queryKey: ["shifts", shiftId],
+        queryFn: ({ signal }) => getShifts({ shiftId }, signal),
+    });
+};
+const ShiftSelector = ({ label = "Shift - Crew", value, onChange = () => { }, fieldError, disabled = false, }) => {
+    const [error, setError] = useState("");
+    const { data: shifts, isLoading, isError, error: e } = useShifts(value);
+    const selectedShift = (shifts === null || shifts === void 0 ? void 0 : shifts.find((s) => s.CurrentShiftId === value)) || null;
+    useEffect(() => {
+        if (isError) {
+            setError(e.message);
+        }
+    }, [isError, e]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Autocomplete, { id: "clear-on-escape", clearOnEscape: true, options: shifts || [], getOptionLabel: (option) => `${option.CurrentShift} - ${option.CurrentCrew}`, disabled: disabled, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: label, variant: "outlined", fullWidth: true, size: "small", error: !!fieldError, helperText: fieldError === null || fieldError === void 0 ? void 0 : fieldError.message, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 20 })) : (React__default.createElement(React__default.Fragment, null, params.InputProps.endAdornment)))) }) }))), value: selectedShift, onChange: (event, newValue) => {
+                var _a;
+                onChange((_a = newValue === null || newValue === void 0 ? void 0 : newValue.CurrentShiftId) !== null && _a !== void 0 ? _a : null);
+            } }),
+        React__default.createElement(ErrorModal, { error: error, onHide: () => setError(""), title: "Error loading shifts" })));
+};
+
 function ChangePassword(props) {
     const { onClose, userId, open } = props;
     //states
@@ -6936,15 +7108,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;
     }
@@ -7138,7 +7310,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",
@@ -7152,7 +7324,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",
@@ -7160,7 +7332,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",
@@ -7246,6 +7418,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" },
@@ -7265,19 +7438,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,
         },
         {
@@ -7305,6 +7479,7 @@ const useJobsTableData = ({ setShowModal, setJobSelected, showContextMenu, }) =>
     return { columnDefs };
 };
 
+const jobStorageKey = "job-table-panel-sizes";
 const useSearchJobs = () => {
     return useQuery({
         queryKey: ["jobs"],
@@ -7315,6 +7490,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("");
@@ -7410,6 +7587,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);
@@ -7425,36 +7640,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);
@@ -7739,14 +7965,14 @@ const TagFilter = ({ tagFilters, setTagFilters, filterContext, }) => {
                         } },
                         React__default.createElement(Typography$1, { variant: "subtitle2" }, selectedTag ? "Edit Tag Filter" : "Add Tag Filter"),
                         React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { size: "small", checked: showOnlyWithData, onChange: (e) => setShowOnlyWithData(e.target.checked) }), label: React__default.createElement(Typography$1, { variant: "caption" }, "Only with data"), sx: { mr: 0 } })),
-                    React__default.createElement(Autocomplete, { size: "small", options: availableTagsForSelection, getOptionLabel: (option) => option.TagName, value: selectedTag, onChange: (_, newValue) => {
+                    React__default.createElement(Autocomplete$1, { size: "small", options: availableTagsForSelection, getOptionLabel: (option) => option.TagName, value: selectedTag, onChange: (_, newValue) => {
                             setSelectedTag(newValue);
                             setSelectedValues([]);
                         }, renderOption: (props, option) => (React__default.createElement("li", Object.assign({}, props, { style: {
                                 opacity: option.HasData ? 1 : 0.8,
                             } }), option.TagName)), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Tag Name", variant: "outlined" }))) }),
                     selectedTag && (React__default.createElement(React__default.Fragment, null, isLoadingValues ? (React__default.createElement(Box, { sx: { display: "flex", justifyContent: "center", py: 2 } },
-                        React__default.createElement(CircularProgress, { size: 24 }))) : (React__default.createElement(Autocomplete, { multiple: true, size: "small", options: availableTagValues, getOptionLabel: (option) => option.Value, value: selectedValues, onChange: (_, newValue) => setSelectedValues(newValue), isOptionEqualToValue: (option, value) => option.Value === value.Value, disableCloseOnSelect: true, renderOption: (props, option, { selected }) => (React__default.createElement("li", Object.assign({}, props, { style: {
+                        React__default.createElement(CircularProgress, { size: 24 }))) : (React__default.createElement(Autocomplete$1, { multiple: true, size: "small", options: availableTagValues, getOptionLabel: (option) => option.Value, value: selectedValues, onChange: (_, newValue) => setSelectedValues(newValue), isOptionEqualToValue: (option, value) => option.Value === value.Value, disableCloseOnSelect: true, renderOption: (props, option, { selected }) => (React__default.createElement("li", Object.assign({}, props, { style: {
                                 opacity: option.HasData ? 1 : 0.8,
                             } }),
                             React__default.createElement(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected, size: "small" }),
@@ -7809,7 +8035,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,
@@ -7819,7 +8045,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 }) => {
@@ -7924,7 +8150,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 {
@@ -8054,8 +8280,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"]);
@@ -8078,7 +8304,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"),
@@ -8102,8 +8328,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"]);
@@ -8193,7 +8419,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);
                                         } })),
@@ -8233,69 +8459,179 @@ const ProfilesPage = (props) => {
     return React.createElement(Profiles, null);
 };
 
-const getShiftParameters = (signal) => __awaiter(void 0, void 0, void 0, function* () {
-    const apiService = new MESApiService();
-    const resp = yield apiService.callV2("[MES].[GetShiftParameters]", [], signal);
-    if (resp.ok) {
-        return get(resp, "data.tables[0].rows", []);
-    }
-    else {
-        throw new Error(resp.message || "Error fetching shifts");
-    }
-});
-const upsertShiftParameters = (_a, ...args_1) => __awaiter(void 0, [_a, ...args_1], void 0, function* ({ PatternStart, ShiftCodes, Crews, CrewRotation, Comments }, isUpdate = false) {
-    const apiService = new MESApiService();
-    const parameters = [
-        { name: "AssetId", value: null },
-        { name: "PatternStart", value: PatternStart },
-        { name: "ShiftCodes", value: ShiftCodes },
-        { name: "Crews", value: Crews },
-        { name: "CrewRotation", value: CrewRotation },
-        { name: "Comments", value: Comments },
-        { name: "IsUpdate", value: isUpdate },
-    ];
-    const resp = yield apiService.callV2("[MES].[UpsertShiftParameters]", parameters);
-    if (!resp.ok) {
-        throw new Error(resp.message || "Error when upsert shift");
-    }
-});
-const deleteShiftParameters = (PatternStart) => __awaiter(void 0, void 0, void 0, function* () {
-    const apiService = new MESApiService();
-    const parameters = [];
-    parameters.push({ name: "AssetId", value: null });
-    parameters.push({ name: "PatternStart", value: PatternStart });
-    const resp = yield apiService.callV2("[MES].[DeleteShiftParameters]", parameters);
-    if (!resp.ok) {
-        throw new Error(resp.message || "Error when delete shift");
-    }
-});
+const useSettingsOptionsFunctions = ({ setSettingId, setShowDeleteModal, setShowCreateModal, setShowEditModal, }) => {
+    const getMenuOptions = (data) => {
+        let options = [];
+        if (!data) {
+            options = options.concat([
+                {
+                    name: "New Setting",
+                    key: "new_setting",
+                    onClick: () => {
+                        setShowCreateModal(true);
+                    },
+                    icon: React__default.createElement(PlaylistAddIcon, null),
+                },
+            ]);
+        }
+        else {
+            options = options.concat([
+                {
+                    name: "New Setting",
+                    key: "new_setting",
+                    onClick: () => {
+                        setShowCreateModal(true);
+                    },
+                    icon: React__default.createElement(PlaylistAddIcon, null),
+                },
+                {
+                    name: "Edit Setting",
+                    key: "edit_setting",
+                    onClick: () => {
+                        setSettingId(data);
+                        setShowEditModal(true);
+                    },
+                    icon: React__default.createElement(EditIcon, null),
+                },
+                {
+                    name: "Delete Setting",
+                    key: "delete_setting",
+                    onClick: () => {
+                        setSettingId(data);
+                        setShowDeleteModal(true);
+                    },
+                    icon: React__default.createElement(DeleteIcon, null),
+                },
+            ]);
+        }
+        return options;
+    };
+    return {
+        getMenuOptions,
+    };
+};
 
-const INITIAL_VALUES$1 = {
-    PatternStart: new Date(),
-    ShiftCodes: "",
-    Crews: "",
-    User: "",
-    PatternDays: 5,
-    CrewRotation: "",
-    Comments: "",
-    CanEdit: false,
-    ShiftsPerDay: 1,
-    NumberOfCrews: 1,
+const useTableData$5 = ({ setOpenModalEditSetting, setOpenModalDeleteSetting, showContextMenu, setSettingSelected, }) => {
+    const columnDefs = [
+        {
+            field: "SettingName",
+            headerName: "Name",
+            minWidth: 180,
+            flex: 4,
+        },
+        {
+            field: "Value",
+            headerName: "Value",
+            minWidth: 180,
+            flex: 2,
+        },
+        {
+            field: "Description",
+            headerName: "Description",
+            minWidth: 150,
+            flex: 4,
+        },
+        {
+            cellRenderer: (params) => {
+                return (React__default.createElement(Grid2, { container: true, sx: {
+                        height: "100%",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        opacity: 0,
+                        transition: "opacity 0.1s ease-in-out",
+                        ".ag-row-hover &": {
+                            opacity: 1,
+                        },
+                        ".ag-row-focus &": {
+                            opacity: 1,
+                        },
+                        ".ag-row-selected &": {
+                            opacity: 1,
+                        },
+                    } },
+                    React__default.createElement(Grid2, { size: { xs: 12, md: 12 }, style: {
+                            display: "flex",
+                            justifyContent: "space-evenly",
+                            alignItems: "center",
+                        } },
+                        React__default.createElement(IconButton$1, { size: "small", onClick: () => {
+                                setSettingSelected(params === null || params === void 0 ? void 0 : params.data);
+                                setOpenModalEditSetting(true);
+                            } },
+                            React__default.createElement(EditIcon, { color: "primary" })),
+                        React__default.createElement(IconButton$1, { size: "small", onClick: () => {
+                                setSettingSelected(params === null || params === void 0 ? void 0 : params.data);
+                                setOpenModalDeleteSetting(true);
+                            } },
+                            React__default.createElement(DeleteIcon, { color: "secondary" })),
+                        React__default.createElement(IconButton$1, { size: "small", onClick: (e) => showContextMenu(e, params.data, "TableSettings") },
+                            React__default.createElement(FormatListBulletedSharpIcon, { color: "action" })))));
+            },
+            field: "",
+            flex: 1,
+            minWidth: 240,
+            editable: false,
+            autoHeight: false,
+            suppressNavigable: true,
+        },
+    ];
+    const defaultColDef = useMemo(() => {
+        return {
+            sortable: true,
+            wrapText: true,
+            autoHeight: true,
+            wrapHeaderText: true,
+            suppressHeaderMenuButton: true,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            },
+        };
+    }, []);
+    return { columnDefs, defaultColDef };
 };
 
-const CreateShift = ({ shiftSelected, show, onHide, suffixTitle, }) => {
-    var _a, _b;
-    const theme = useTheme();
+const INITIAL_VALUES$1 = {
+    SettingName: "",
+    Value: "",
+    Description: "",
+};
+
+const upsertSettings = (_a) => __awaiter(void 0, [_a], void 0, function* ({ oldName, newName, description, value, }) {
+    const apiService = new MESApiService();
+    const parameters = [
+        { name: "OldName", value: oldName },
+        { name: "NewName", value: newName },
+        { name: "Description", value: description },
+        { name: "Value", value: value },
+    ];
+    const resp = yield apiService.callV2("[UTL].[SetSetting]", parameters);
+    if (!resp.ok) {
+        throw new Error(resp.message || "Error when upsert setting");
+    }
+});
+const deleteSetting = (settingName) => __awaiter(void 0, void 0, void 0, function* () {
+    const apiService = new MESApiService();
+    const parameters = [
+        { name: "SettingName", value: settingName },
+    ];
+    const resp = yield apiService.callV2("[UTL].[DeleteSetting]", parameters);
+    if (!resp.ok) {
+        throw new Error(resp.message || "Error when delete setting");
+    }
+});
+
+const CreateSetting = ({ settingSelected, show, onHide, suffixTitle, }) => {
     const [open, setOpen] = useState(false);
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
     const [error, setError] = useState("");
-    const { control, handleSubmit, reset, watch, setValue, formState: { errors }, } = useForm({
-        defaultValues: shiftSelected ? shiftSelected : INITIAL_VALUES$1,
+    const { control, handleSubmit, reset } = useForm({
+        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES$1,
     });
-    // Progress bar
-    const calculatePercentage = () => ((crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) / maxCrewRotationLength) * 100;
-    const createShift = useMutation({
-        mutationFn: upsertShiftParameters,
+    const updateSetting = useMutation({
+        mutationFn: upsertSettings,
         onSuccess: () => {
             setOpen(true);
             onHide(true);
@@ -8309,7 +8645,12 @@ const CreateShift = ({ shiftSelected, show, onHide, suffixTitle, }) => {
     });
     const onSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
         setIsSubmitLoading(true);
-        yield createShift.mutate(data);
+        yield updateSetting.mutate({
+            oldName: "",
+            newName: data.SettingName,
+            description: data.Description,
+            value: data.Value,
+        });
     });
     const handleClose = (event, reason) => {
         if (reason === "clickaway") {
@@ -8317,175 +8658,50 @@ const CreateShift = ({ shiftSelected, show, onHide, suffixTitle, }) => {
         }
         setOpen(false);
     };
-    // const patternStart = watch('PatternStart');
-    const shiftsPerDay = watch("ShiftsPerDay");
-    const shiftCodes = watch("ShiftCodes");
-    const numberOfCrews = watch("NumberOfCrews");
-    const crewsCodes = watch("Crews");
-    const rotationPattern = watch("PatternDays");
-    const crewRotation = watch("CrewRotation");
-    const comments = watch("Comments");
-    const maxCrewRotationLength = shiftsPerDay * rotationPattern;
     useEffect(() => {
         if (show) {
             reset();
-            setValue("PatternStart", new Date());
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
-        show && (React.createElement(HelmetDexteel, { title: `New Shift/Crew${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
-        React.createElement(MesfModal, { title: "NEW SHIFT/CREW", open: show, handleClose: () => onHide(false), id: "create-shift-modal", maxWidth: "md" },
-            React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
-                React.createElement(MesfModal.Content, null,
-                    React.createElement(Grid2, { container: true, spacing: 2, p: 1 },
-                        React.createElement(Controller, { name: "PatternStart", control: control, render: ({ field: { value, onChange } }) => (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
-                                React.createElement(Grid2, { size: { md: 6, xs: 12 } },
-                                    React.createElement(DatePicker$1, { format: "MM/DD/YYYY", sx: {
-                                            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: {
-                                            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: {
-                                            textField: {
-                                                fullWidth: true,
-                                                variant: "standard",
-                                            },
-                                        } })))) }),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "ShiftsPerDay", control: control, rules: {
-                                    min: 1,
-                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: `# ${shiftsPerDay > 1 ? "Shifts" : "Shift"}  per day`, variant: "outlined", error: !!errors.ShiftsPerDay, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", value: value, onChange: (evt) => parseInt(evt.target.value) >= 1 &&
-                                        parseInt(evt.target.value) <= 10 &&
-                                        onChange(evt) })) }),
-                            ((_a = errors.ShiftsPerDay) === null || _a === void 0 ? void 0 : _a.type) === "min" && (React.createElement(ErrorLabel, { text: "Shift per day is required" }))),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "ShiftCodes", control: control, rules: {
-                                    validate: (value) => value.length == shiftsPerDay,
-                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: "Shifts Ids", variant: "outlined", error: !!errors.ShiftCodes, fullWidth: true, margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
-                                        // TODO: aquí podriamos hacer que no pueda haber dos valores iguales, para prevenir errores. Ej. dos DNN
-                                        if (evt.target.value.length <= shiftsPerDay)
-                                            onChange(evt.target.value.toString().toUpperCase());
-                                    } })) }),
-                            !!errors.ShiftCodes && (React.createElement("span", { style: {
-                                    fontSize: 12,
-                                } },
-                                "Please put ",
-                                shiftsPerDay,
-                                " shifts")),
-                            shiftCodes.length < shiftsPerDay &&
-                                !!errors.ShiftCodes === false && (React.createElement("span", { style: {
-                                    fontSize: 12,
-                                    color: theme.palette.info.main,
-                                } }, `Insert: ${shiftsPerDay} ${shiftsPerDay == 1 ? "Id" : "Ids"}. ${shiftsPerDay > 1 ? "The Ids must be differents" : ""}`))),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "NumberOfCrews", control: control, rules: {
-                                    min: 1,
-                                    max: 9,
-                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: `# ${numberOfCrews > 1 ? "Crews" : "Crew"}`, variant: "outlined", error: !!errors.NumberOfCrews, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", onChange: (evt) => {
-                                        // max. crew 15
-                                        if (parseInt(evt.target.value) >= 1 &&
-                                            parseInt(evt.target.value) <= 15)
-                                            onChange(evt);
-                                    }, value: value })) }),
-                            ((_b = errors.NumberOfCrews) === null || _b === void 0 ? void 0 : _b.type) === "min" && (React.createElement(ErrorLabel, { text: "# Crews days is required" }))),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "Crews", control: control, rules: {
-                                    validate: (value) => value.length == numberOfCrews,
-                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: "Crews Ids", variant: "outlined", error: !!errors.Crews, fullWidth: true, margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
-                                        if (evt.target.value.length <= numberOfCrews)
-                                            onChange(evt.target.value.toString().toUpperCase());
-                                    } })) }),
-                            !!errors.Crews && (React.createElement("span", { style: {
-                                    fontSize: 12,
-                                } },
-                                "Please put ",
-                                numberOfCrews,
-                                " crews")),
-                            crewsCodes.length < numberOfCrews &&
-                                !!errors.Crews === false && (React.createElement("span", { style: {
-                                    fontSize: 12,
-                                    color: theme.palette.info.main,
-                                } }, `Insert: ${numberOfCrews} ${numberOfCrews == 1 ? "Crew" : "Crews"}. ${numberOfCrews > 1 ? "The Crews must be differents" : ""}`))),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "PatternDays", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { label: "Rotation Pattern", variant: "outlined", error: !!errors.PatternDays, fullWidth: true, type: "number", margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
-                                        if (parseInt(evt.target.value) >= 5 &&
-                                            parseInt(evt.target.value) <= 60)
-                                            onChange(evt);
-                                    } })) })),
-                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                            React.createElement(Controller, { name: "CrewRotation", control: control, rules: {
-                                    validate: (value) => value.length == maxCrewRotationLength,
-                                }, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { value: value, onChange: (evt) => {
-                                        if (evt.target.value.length <= maxCrewRotationLength)
-                                            onChange(evt.target.value.toString().toUpperCase());
-                                    }, label: "Crew rotation", variant: "outlined", fullWidth: true, error: !!errors.CrewRotation, margin: "dense", autoComplete: "off" })) }),
-                            React.createElement(Grid2, { container: true, height: 2 },
-                                React.createElement(Grid2, { style: {
-                                        height: 2,
-                                        width: `${calculatePercentage()}% `,
-                                        backgroundColor: `${crewRotation.length == maxCrewRotationLength
-                                            ? "#4CAF50"
-                                            : "#F44336"}`,
-                                        transition: " 0.2s ease",
-                                        margin: "0 5px",
-                                    } })),
-                            React.createElement(Grid2, { container: true, style: { margin: "4px 0 0" } },
-                                React.createElement(Grid2, null, (crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) >= 1 &&
-                                    (crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) !==
-                                        maxCrewRotationLength && (React.createElement("span", { style: {
-                                        fontSize: 12,
-                                        color: theme.palette.info.main,
-                                        marginLeft: 5,
-                                    } }, `${crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length}/${maxCrewRotationLength}`)))),
-                            !!errors.CrewRotation && (React.createElement(ErrorLabel, { text: `Please put ${maxCrewRotationLength} crews` })),
-                            numberOfCrews > 0 &&
-                                Number.isInteger(maxCrewRotationLength / numberOfCrews) ===
-                                    false && (React.createElement(Grid2, { container: true, style: { padding: "0", marginLeft: 5 } },
-                                React.createElement(ErrorLabel, { text: `Rotation # not a multiple of Shifts (${maxCrewRotationLength}) / Crews (${numberOfCrews})` })))),
-                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                            React.createElement(Controller, { name: "Comments", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Comments", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: (evt) => {
-                                        if (evt.target.value.length <= 200)
-                                            onChange(evt);
-                                    } })) }),
-                            React.createElement(Grid2, { container: true, style: { marginBottom: 18 } },
-                                React.createElement(Grid2, null,
-                                    (comments === null || comments === void 0 ? void 0 : comments.length) >= 1 &&
-                                        (comments === null || comments === void 0 ? void 0 : comments.length) !== 200 && (React.createElement("span", { style: {
-                                            fontSize: 12,
-                                            color: theme.palette.info.main,
-                                            marginLeft: 5,
-                                        } }, `${comments === null || comments === void 0 ? void 0 : comments.length}/200 max.`)),
-                                    (comments === null || comments === void 0 ? void 0 : comments.length) == 200 && (React.createElement("span", { style: {
-                                            fontSize: 12,
-                                            color: theme.palette.info.main,
-                                            marginLeft: 5,
-                                        } }, "Max. 200"))))))),
-                React.createElement(MesfModal.Actions, null,
-                    React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
-                        React.createElement(Grid2, { size: { md: 3, xs: 12 } },
-                            React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
-                        React.createElement(Grid2, { size: { md: 3, xs: 12 } },
-                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))),
-        React.createElement(ErrorModal, { error: error, onHide: () => setError(""), title: "Error Creating Shift" }),
+        show && (React.createElement(HelmetDexteel, { title: `New Setting${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
+        React.createElement(Grid2, { container: true },
+            React.createElement(Grid2, null,
+                React.createElement(MesfModal, { title: "NEW SETTING", open: show, handleClose: () => onHide(false), id: "create-setting-modal", maxWidth: "md" },
+                    React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                        React.createElement(MesfModal.Content, null,
+                            React.createElement(Grid2, { container: true, spacing: 2 },
+                                React.createElement(Grid2, { size: { xs: 12, md: 6 } },
+                                    React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({}, field, { label: "Name", error: !!error, helperText: error ? error.message : null, autoComplete: "off" }))) })),
+                                React.createElement(Grid2, { size: { xs: 12, md: 6 } },
+                                    React.createElement(Controller, { name: "Value", control: control, rules: {
+                                            required: "Value is required",
+                                        }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({}, field, { label: "Value", error: !!error, helperText: error ? error.message : null, autoComplete: "off" }))) })),
+                                React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                                    React.createElement(Controller, { name: "Description", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { size: "medium", maxRows: 5, label: "Description", multiline: true, autoComplete: "off", value: value, onChange: (evt) => {
+                                                if (evt.target.value.length <= 200)
+                                                    onChange(evt);
+                                            } })) })))),
+                        React.createElement(MesfModal.Actions, null,
+                            React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
+                                React.createElement(Grid2, { size: { md: 3, xs: 12 } },
+                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
+                                React.createElement(Grid2, { size: { md: 3, xs: 12 } },
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
+        React.createElement(ErrorModal, { error: error, onHide: () => setError(""), title: "Error Creating Setting" }),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-            React.createElement(Alert$1, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
+            React.createElement(Alert$1, { severity: "success", onClose: handleClose }, "The setting was created successfully"))));
 };
 
-const DeleteShift = ({ shiftSelected, show, onHide, suffixTitle, }) => {
-    var _a;
+const DeleteSetting = ({ settingSelected, show, onHide, suffixTitle, }) => {
     const [open, setOpen] = useState(false);
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const [deleteAlert, setDeleteAlert] = useState(false);
     const [error, setError] = useState("");
-    const { control, setValue, reset, watch, formState: { errors }, } = useForm({ defaultValues: INITIAL_VALUES$1 });
-    const deleteShift = useMutation({
-        mutationFn: deleteShiftParameters,
+    const { control, handleSubmit, reset, setValue } = useForm({
+        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES$1,
+    });
+    const removeSetting = useMutation({
+        mutationFn: deleteSetting,
         onSuccess: () => {
             setOpen(true);
             onHide(true);
@@ -8495,122 +8711,65 @@ const DeleteShift = ({ shiftSelected, show, onHide, suffixTitle, }) => {
         },
         onSettled: () => {
             setIsSubmitLoading(false);
-            setDeleteAlert(false);
         },
     });
-    const onDelete = (data) => __awaiter(void 0, void 0, void 0, function* () {
+    const onSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
         setIsSubmitLoading(true);
-        yield deleteShift.mutate(data);
+        yield removeSetting.mutate(data.SettingName);
     });
     const handleClose = (event, reason) => {
         if (reason === "clickaway") {
             return;
         }
         setOpen(false);
-        setDeleteAlert(false);
     };
-    const patternStart = watch("PatternStart");
-    const shiftsPerDay = watch("ShiftsPerDay");
-    const crewRotation = watch("CrewRotation");
-    const numberOfCrews = watch("NumberOfCrews");
-    const crewsCodes = watch("Crews");
-    const rotationPattern = watch("PatternDays");
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
         if (show) {
             reset();
-            setValue("PatternStart", (_a = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.PatternStart) !== null && _a !== void 0 ? _a : new Date());
-            setValue("ShiftCodes", (_b = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.ShiftCodes) !== null && _b !== void 0 ? _b : "");
-            setValue("Crews", (_c = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.Crews) !== null && _c !== void 0 ? _c : "");
-            setValue("PatternDays", (_d = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.PatternDays) !== null && _d !== void 0 ? _d : 0);
-            setValue("CrewRotation", (_e = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.CrewRotation) !== null && _e !== void 0 ? _e : "");
-            setValue("Comments", (_f = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.Comments) !== null && _f !== void 0 ? _f : "");
+            if (settingSelected) {
+                setValue("SettingName", settingSelected.SettingName);
+                setValue("Value", settingSelected.Value);
+                setValue("Description", settingSelected.Description);
+            }
         }
     }, [show]);
     return (React.createElement(React.Fragment, null,
-        show && (React.createElement(HelmetDexteel, { title: `Delete Shift${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
-        React.createElement(MesfModal, { title: "DELETE SHIFT", open: show, handleClose: () => onHide(false), id: "delete-shift-MesfModal", maxWidth: "md" },
-            React.createElement("form", null,
-                React.createElement(MesfModal.Content, null,
-                    React.createElement(Grid2, { container: true, spacing: 2, p: 1 },
-                        React.createElement(Controller, { name: "PatternStart", control: control, render: ({ field: { value, onChange } }) => (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
-                                React.createElement(Grid2, { size: { md: 6, xs: 12 } },
-                                    React.createElement(DatePicker$1, { format: "MM/DD/YYYY", sx: {
-                                            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: {
-                                            textField: {
-                                                fullWidth: true,
-                                                variant: "standard",
-                                                disabled: true,
-                                            },
-                                        } })),
-                                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: {
-                                            textField: {
-                                                fullWidth: true,
-                                                variant: "standard",
-                                                disabled: true,
-                                            },
-                                        } })))) }),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "ShiftsPerDay", control: control, rules: {
-                                    min: 1,
-                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: `# ${shiftsPerDay > 1 ? "Shifts" : "Shift"}  per day`, variant: "outlined", error: !!errors.ShiftsPerDay, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", value: crewRotation.length / rotationPattern, disabled: !!shiftSelected })) }),
-                            ((_a = errors.ShiftsPerDay) === null || _a === void 0 ? void 0 : _a.type) === "min" && (React.createElement(ErrorLabel, { text: "Shift per day is required" }))),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 }, style: { paddingBottom: "0" } },
-                            React.createElement(Controller, { name: "ShiftCodes", control: control, render: ({ field: { value } }) => (React.createElement(TextField, { label: "Shifts Ids", variant: "outlined", error: !!errors.ShiftCodes, fullWidth: true, margin: "dense", autoComplete: "off", value: value, disabled: !!shiftSelected })) })),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "NumberOfCrews", control: control, rules: {
-                                    min: 1,
-                                    max: 9,
-                                }, render: ({ field: { value } }) => (React.createElement(TextField, { label: `# ${numberOfCrews > 1 ? "Crews" : "Crew"}`, variant: "outlined", error: !!errors.NumberOfCrews, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", value: crewsCodes.length, disabled: !!shiftSelected })) })),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 }, style: { paddingBottom: "0" } },
-                            React.createElement(Controller, { name: "Crews", control: control, render: ({ field: { value } }) => (React.createElement(TextField, { label: "Crews Ids", variant: "outlined", error: !!errors.Crews, fullWidth: true, margin: "dense", autoComplete: "off", value: value, disabled: !!shiftSelected })) })),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "PatternDays", control: control, render: ({ field: { value } }) => (React.createElement(TextField, { label: "Rotation Pattern", variant: "outlined", error: !!errors.PatternDays, fullWidth: true, type: "number", margin: "dense", autoComplete: "off", value: value, disabled: !!shiftSelected })) })),
-                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                            React.createElement(Controller, { name: "CrewRotation", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { label: "Crew rotation", variant: "outlined", fullWidth: true, margin: "dense", autoComplete: "off", value: value, disabled: !!shiftSelected })) })),
-                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                            React.createElement(Controller, { name: "Comments", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Comments", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, disabled: !!shiftSelected })) })))),
-                React.createElement(MesfModal.Actions, null,
-                    React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
-                        React.createElement(Grid2, { size: { md: 3, xs: 12 }, style: { margin: 0 } },
-                            React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
-                        React.createElement(Grid2, { size: { md: 3, xs: 12 }, style: { margin: 0 } },
-                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading
-                                    ? isSubmitLoading
-                                    : shiftSelected
-                                        ? new Date(shiftSelected.PatternStart) < new Date() &&
-                                            true
-                                        : false, variant: "contained", color: "secondary", onClick: () => setDeleteAlert(true) }, "Delete"),
-                            shiftSelected &&
-                                new Date(shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.PatternStart) < new Date() && (React.createElement(Grid2, null,
-                                React.createElement(ErrorLabel, { text: "Can not delete before the current date" })))))),
-                React.createElement(Dialog$1, { open: deleteAlert, onClose: () => handleClose(), "aria-labelledby": "responsive-dialog-title" },
-                    React.createElement(DialogTitle$1, { id: "responsive-dialog-title" }, "WARNING"),
-                    React.createElement(DialogContent$1, null,
-                        React.createElement(DialogContentText, { style: { padding: 0, margin: 0 } }, "Be careful, once deleted you will not be able to recover this shift, are you sure you want to delete it?")),
-                    React.createElement(DialogActions$1, { style: { padding: "16px 24px" } },
-                        React.createElement(Button, { onClick: () => setDeleteAlert(false), autoFocus: true, color: "inherit" }, "CANCEL"),
-                        React.createElement(Button, { startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), autoFocus: true, color: "secondary", onClick: () => onDelete(patternStart) }, "Delete"))))),
-        React.createElement(ErrorModal, { error: error, onHide: () => setError("") }),
+        show && (React.createElement(HelmetDexteel, { title: `Delete Setting${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
+        React.createElement(Grid2, { container: true },
+            React.createElement(Grid2, null,
+                React.createElement(MesfModal, { title: "DELETE SETTING", open: show, handleClose: () => onHide(false), id: "delete-setting-modal", maxWidth: "md" },
+                    React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                        React.createElement(MesfModal.Content, null,
+                            React.createElement(Grid2, { container: true, spacing: 2 },
+                                React.createElement(Grid2, { size: { xs: 12, md: 6 } },
+                                    React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({ disabled: true }, field, { label: "Name", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" }))) })),
+                                React.createElement(Grid2, { size: { xs: 12, md: 6 } },
+                                    React.createElement(Controller, { name: "Value", control: control, rules: { required: "Value is required" }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({ disabled: true }, field, { label: "Value", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" }))) })),
+                                React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                                    React.createElement(Controller, { name: "Description", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { disabled: true, size: "medium", maxRows: 5, label: "Description", multiline: true, autoComplete: "off", value: value, onChange: (evt) => {
+                                                if (evt.target.value.length <= 200)
+                                                    onChange(evt);
+                                            } })) })))),
+                        React.createElement(MesfModal.Actions, null,
+                            React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
+                                React.createElement(Grid2, { size: { md: 3, xs: 12 } },
+                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
+                                React.createElement(Grid2, { size: { md: 3, xs: 12 } },
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "secondary", type: "submit" }, "Delete")))))))),
+        React.createElement(ErrorModal, { error: error, onHide: () => setError(""), title: "Error deleting Setting" }),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-            React.createElement(Alert$1, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
+            React.createElement(Alert$1, { severity: "success", onClose: handleClose }, "The setting was deleted successfully"))));
 };
 
-const EditShift = ({ shiftSelected, show, onHide, suffixTitle, }) => {
-    const theme = useTheme();
+const EditSetting = ({ settingSelected, show, onHide, suffixTitle, }) => {
     const [open, setOpen] = useState(false);
-    const [error, setError] = useState("");
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const [initialShiftPerDayAndCrewsNumber, setInitialShiftPerDayAndCrewsNumber,] = useState(false);
-    const { control, setValue, handleSubmit, reset, watch, formState: { errors }, } = useForm({ defaultValues: INITIAL_VALUES$1 });
-    // Progress bar
-    const calculatePercentage = () => ((crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) / maxCrewRotationLength) * 100;
-    const createShift = useMutation({
-        mutationFn: ({ shiftData, isUpdate, }) => upsertShiftParameters(shiftData, isUpdate),
+    const [error, setError] = useState("");
+    const { control, handleSubmit, reset, setValue } = useForm({
+        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES$1,
+    });
+    const updateSetting = useMutation({
+        mutationFn: upsertSettings,
         onSuccess: () => {
             setOpen(true);
             onHide(true);
@@ -8623,8 +8782,14 @@ const EditShift = ({ shiftSelected, show, onHide, suffixTitle, }) => {
         },
     });
     const onSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         setIsSubmitLoading(true);
-        yield createShift.mutate({ shiftData: data, isUpdate: true });
+        yield updateSetting.mutate({
+            oldName: (_a = settingSelected === null || settingSelected === void 0 ? void 0 : settingSelected.SettingName) !== null && _a !== void 0 ? _a : null,
+            newName: data.SettingName,
+            description: data.Description,
+            value: data.Value,
+        });
     });
     const handleClose = (event, reason) => {
         if (reason === "clickaway") {
@@ -8632,377 +8797,84 @@ const EditShift = ({ shiftSelected, show, onHide, suffixTitle, }) => {
         }
         setOpen(false);
     };
-    // const patternStart = watch('PatternStart');
-    const shiftsPerDay = watch("ShiftsPerDay");
-    const shiftCodes = watch("ShiftCodes");
-    const numberOfCrews = watch("NumberOfCrews");
-    const crewsCodes = watch("Crews");
-    const rotationPattern = watch("PatternDays");
-    const comments = watch("Comments");
-    const crewRotation = watch("CrewRotation");
-    const maxCrewRotationLength = shiftsPerDay * rotationPattern;
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
         if (show) {
             reset();
-            setValue("PatternStart", (_a = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.PatternStart) !== null && _a !== void 0 ? _a : new Date());
-            setValue("ShiftCodes", (_b = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.ShiftCodes) !== null && _b !== void 0 ? _b : "");
-            setValue("Crews", (_c = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.Crews) !== null && _c !== void 0 ? _c : "");
-            setValue("PatternDays", (_d = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.PatternDays) !== null && _d !== void 0 ? _d : 0);
-            setValue("CrewRotation", (_e = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.CrewRotation) !== null && _e !== void 0 ? _e : "");
-            setValue("Comments", (_f = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.Comments) !== null && _f !== void 0 ? _f : "");
-            setInitialShiftPerDayAndCrewsNumber(!initialShiftPerDayAndCrewsNumber);
+            if (settingSelected) {
+                setValue("SettingName", settingSelected.SettingName);
+                setValue("Value", settingSelected.Value);
+                setValue("Description", settingSelected.Description);
+            }
         }
     }, [show]);
-    useEffect(() => {
-        setValue("ShiftsPerDay", crewRotation.length / rotationPattern);
-        setValue("NumberOfCrews", crewsCodes.length);
-    }, [initialShiftPerDayAndCrewsNumber]);
     return (React.createElement(React.Fragment, null,
-        show && (React.createElement(HelmetDexteel, { title: `Edit Shift${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
-        React.createElement(MesfModal, { title: "EDIT SHIFT", open: show, handleClose: () => onHide(false), id: "edit-shift-modal", maxWidth: "md" },
+        show && (React.createElement(HelmetDexteel, { title: `Edit Setting${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
+        React.createElement(MesfModal, { title: "EDIT SETTING", open: show, handleClose: () => onHide(false), id: "edit-setting-modal", maxWidth: "md" },
             React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                 React.createElement(MesfModal.Content, null,
-                    React.createElement(Grid2, { container: true, spacing: 2, p: 1 },
-                        React.createElement(Controller, { name: "PatternStart", control: control, render: ({ field: { value, onChange } }) => (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
-                                React.createElement(Grid2, { size: { md: 6, xs: 12 } },
-                                    React.createElement(DatePicker$1, { format: "MM/DD/YYYY", sx: {
-                                            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: {
-                                            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: {
-                                            textField: {
-                                                fullWidth: true,
-                                                variant: "standard",
-                                            },
-                                        } })))) }),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "ShiftsPerDay", control: control, rules: {
-                                    min: 1,
-                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: `# ${shiftsPerDay > 1 ? "Shifts" : "Shift"}  per day`, variant: "outlined", error: !!errors.ShiftsPerDay, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", value: value, onChange: 
-                                    // FIXME: límite de 10?
-                                    (evt) => parseInt(evt.target.value) >= 1 &&
-                                        parseInt(evt.target.value) <= 10 &&
-                                        onChange(evt) })) })),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "ShiftCodes", control: control, rules: {
-                                    required: `Please put ${shiftsPerDay} shifts`,
-                                    validate: (value) => value.length == shiftsPerDay,
-                                }, render: ({ field: { onChange, value }, fieldState: { error }, }) => (React.createElement(TextField, { label: "Shifts Ids", variant: "outlined", error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, fullWidth: true, margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
-                                        // TODO: aquí deberíamos prevenir, que no pueda haber dos valores iguales, . Ej. dos DNN
-                                        if (evt.target.value.length <= shiftsPerDay)
-                                            onChange(evt.target.value.toString().toUpperCase());
-                                    } })) }),
-                            shiftCodes.length < shiftsPerDay &&
-                                !!errors.ShiftCodes === false && (React.createElement(ErrorLabel, { text: `Insert: ${shiftsPerDay} ${shiftsPerDay == 1 ? "Id" : "Ids"}. ${shiftsPerDay > 1 ? "The Ids must be differents" : ""}` }))),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "NumberOfCrews", control: control, rules: {
-                                    required: "# Crews day is required",
-                                    min: 1,
-                                    max: 9,
-                                }, render: ({ field: { onChange, value }, fieldState: { error }, }) => (React.createElement(TextField, { label: `# ${numberOfCrews > 1 ? "Crews" : "Crew"}`, variant: "outlined", error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", value: value, onChange: (evt) => {
-                                        if (parseInt(evt.target.value) >= 1 &&
-                                            parseInt(evt.target.value) <= 9)
-                                            onChange(evt);
-                                    } })) })),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "Crews", control: control, rules: {
-                                    required: `Please put ${numberOfCrews} crews`,
-                                    validate: (value) => value.length == numberOfCrews,
-                                }, render: ({ field: { onChange, value }, fieldState: { error }, }) => (React.createElement(TextField, { label: "Crews Ids", variant: "outlined", error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, disabled: numberOfCrews <= 0, fullWidth: true, margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
-                                        if (evt.target.value.length <= numberOfCrews)
-                                            onChange(evt.target.value.toString().toUpperCase());
-                                    } })) }),
-                            crewsCodes.length < numberOfCrews &&
-                                !!errors.Crews === false && (React.createElement(ErrorLabel, { text: `Insert: ${numberOfCrews} ${numberOfCrews == 1 ? "Crew" : "Crews"}. ${numberOfCrews > 1 ? "The Crews must be differents" : ""}` }))),
-                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
-                            React.createElement(Controller, { name: "PatternDays", control: control, 
-                                // rules={{
-                                //     required: true
-                                // }}
-                                render: ({ field: { value, onChange } }) => (React.createElement(TextField, { label: "Rotation Pattern", variant: "outlined", error: !!errors.PatternDays, fullWidth: true, type: "number", margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
-                                        // FIXME: consultar si estos valores están bien, son los limites del sP
-                                        if (parseInt(evt.target.value) >= 5 &&
-                                            parseInt(evt.target.value) <= 60)
-                                            onChange(evt);
-                                    } })) })),
-                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                            React.createElement(Controller, { name: "CrewRotation", control: control, rules: {
-                                    validate: (value) => value.length == maxCrewRotationLength,
-                                }, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { value: value, onChange: (evt) => {
-                                        if (evt.target.value.length <= maxCrewRotationLength)
-                                            onChange(evt.target.value.toString().toUpperCase());
-                                    }, error: !!errors.CrewRotation, label: "Crew rotation", variant: "outlined", fullWidth: true, margin: "dense", autoComplete: "off" })) }),
-                            React.createElement(Grid2, { container: true, height: 2 },
-                                React.createElement(Grid2, { style: {
-                                        height: 2,
-                                        width: `${calculatePercentage()}% `,
-                                        backgroundColor: `${crewRotation.length == maxCrewRotationLength
-                                            ? "#4CAF50"
-                                            : "#F44336"}`,
-                                        transition: " 0.2s ease",
-                                        margin: "0 5px",
-                                    } })),
-                            React.createElement(Grid2, { container: true },
-                                React.createElement(Grid2, null, (crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) >= 1 &&
-                                    (crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) !==
-                                        maxCrewRotationLength && (React.createElement("span", { style: {
-                                        fontSize: 12,
-                                        color: theme.palette.info.main,
-                                        marginLeft: 5,
-                                    } }, `${crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length}/${maxCrewRotationLength}`)))),
-                            !!errors.CrewRotation && (React.createElement(ErrorLabel, { text: `Please put ${maxCrewRotationLength} crews` })),
-                            numberOfCrews > 0 &&
-                                Number.isInteger(maxCrewRotationLength / numberOfCrews) ===
-                                    false && (React.createElement(Grid2, { container: true, style: { padding: "0", marginLeft: 5 } },
-                                React.createElement(ErrorLabel, { text: `Rotation # not a multiple of Shifts (${maxCrewRotationLength}) / Crews (${numberOfCrews})` })))),
+                    React.createElement(Grid2, { container: true, spacing: 2 },
+                        React.createElement(Grid2, { size: { xs: 12, md: 6 } },
+                            React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({}, field, { label: "Name", error: !!error, helperText: error ? error.message : null, autoComplete: "off" }))) })),
+                        React.createElement(Grid2, { size: { xs: 12, md: 6 } },
+                            React.createElement(Controller, { name: "Value", control: control, rules: {
+                                    required: "Value is required",
+                                }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({}, field, { label: "Value", error: !!error, helperText: error ? error.message : null, autoComplete: "off" }))) })),
                         React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                            React.createElement(Controller, { name: "Comments", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Comments", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: (evt) => {
+                            React.createElement(Controller, { name: "Description", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { size: "medium", maxRows: 5, label: "Description", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: (evt) => {
                                         if (evt.target.value.length <= 200)
                                             onChange(evt);
-                                    } })) }),
-                            React.createElement(Grid2, { container: true, style: { marginBottom: 18 } },
-                                React.createElement(Grid2, null,
-                                    (comments === null || comments === void 0 ? void 0 : comments.length) >= 1 &&
-                                        (comments === null || comments === void 0 ? void 0 : comments.length) !== 200 && (React.createElement("span", { style: {
-                                            fontSize: 12,
-                                            color: theme.palette.info.main,
-                                            marginLeft: 5,
-                                        } }, `${comments === null || comments === void 0 ? void 0 : comments.length}/200`)),
-                                    (comments === null || comments === void 0 ? void 0 : comments.length) == 200 && (React.createElement("span", { style: {
-                                            fontSize: 12,
-                                            color: theme.palette.info.main,
-                                            marginLeft: 5,
-                                        } }, "Max. 200"))))))),
+                                    } })) })))),
                 React.createElement(MesfModal.Actions, null,
                     React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
-                        React.createElement(Grid2, { size: { md: 3, xs: 12 }, style: { margin: 0 } },
+                        React.createElement(Grid2, { size: { md: 3, xs: 12 } },
                             React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
-                        React.createElement(Grid2, { size: { md: 3, xs: 12 }, style: { margin: 0 } },
+                        React.createElement(Grid2, { size: { md: 3, xs: 12 } },
                             React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))),
-        React.createElement(ErrorModal, { error: error, onHide: () => setError("") }),
+        React.createElement(ErrorModal, { error: error, onHide: () => setError(""), title: "Error updating Setting" }),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-            React.createElement(Alert$1, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
-};
-
-const useShiftsOptionsFunctions = ({ setShiftId, setShowDeleteModal, setShowCreateModal, setShowEditModal, }) => {
-    const getMenuOptions = (data) => {
-        let options = [];
-        if (!data) {
-            options = options.concat([
-                {
-                    name: "New Shift",
-                    key: "new_shift",
-                    onClick: () => {
-                        setShowCreateModal(true);
-                    },
-                    icon: React__default.createElement(PlaylistAddIcon, null),
-                },
-            ]);
-        }
-        else {
-            options = options.concat([
-                {
-                    name: "New Shift",
-                    key: "new_shift",
-                    onClick: () => {
-                        setShowCreateModal(true);
-                    },
-                    icon: React__default.createElement(PlaylistAddIcon, null),
-                },
-                {
-                    name: "Edit Shift",
-                    key: "edit_shift",
-                    onClick: () => {
-                        setShiftId(data);
-                        setShowEditModal(true);
-                    },
-                    icon: React__default.createElement(EditIcon, null),
-                },
-                {
-                    name: "Delete Shift",
-                    key: "delete_shift",
-                    onClick: () => {
-                        setShiftId(data);
-                        setShowDeleteModal(true);
-                    },
-                    icon: React__default.createElement(DeleteIcon, null),
-                },
-            ]);
-        }
-        return options;
-    };
-    return {
-        getMenuOptions,
-    };
-};
-
-const useTableData$5 = ({ setShiftSelected, setOpenModalEditShift, setOpenModalDeleteShift, showContextMenu, }) => {
-    const columnDefs = [
-        {
-            field: "PatternStart",
-            headerName: "Pattern Start",
-            valueFormatter: ({ value }) => `${moment$f(value).format("L")}, ${moment$f(value).format("LTS")}`,
-            minWidth: 180,
-            flex: 4,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            },
-        },
-        {
-            field: "ShiftCodes",
-            headerName: "Shift Codes",
-            minWidth: 150,
-            flex: 2,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            },
-        },
-        {
-            field: "Crews",
-            headerName: "Crews",
-            minWidth: 150,
-            flex: 2,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            },
-        },
-        {
-            sortable: false,
-            field: "PatternDays",
-            headerName: "Shifts",
-            minWidth: 130,
-            flex: 1,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            },
-        },
-        {
-            cellRenderer: (params) => {
-                return (React__default.createElement(Grid2, { container: true, style: {
-                        height: "100%",
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                    }, sx: {
-                        opacity: 0,
-                        transition: "opacity 0.1s ease-in-out",
-                        ".ag-row-hover &": {
-                            opacity: 1,
-                        },
-                        ".ag-row-focus &": {
-                            opacity: 1,
-                        },
-                        ".ag-row-selected &": {
-                            opacity: 1,
-                        },
-                    } },
-                    React__default.createElement(Grid2, { size: { xs: 12, md: 12 }, style: {
-                            display: "flex",
-                            justifyContent: "center",
-                            alignItems: "center",
-                        } },
-                        React__default.createElement(Button, { style: {}, onClick: () => {
-                                setShiftSelected(params === null || params === void 0 ? void 0 : params.data);
-                                setOpenModalEditShift(true);
-                            } },
-                            React__default.createElement(EditIcon, { color: "primary" })),
-                        React__default.createElement(Button, { style: {}, onClick: () => {
-                                setShiftSelected(params === null || params === void 0 ? void 0 : params.data);
-                                setOpenModalDeleteShift(true);
-                            } },
-                            React__default.createElement(DeleteIcon, { color: "secondary" })),
-                        React__default.createElement(Button, { style: {}, onClick: (e) => showContextMenu(e, params.data, "TableShifts") },
-                            React__default.createElement(FormatListBulletedSharpIcon, { color: "action" })))));
-            },
-            field: "",
-            flex: 3,
-            minWidth: 240,
-            editable: false,
-            autoHeight: false,
-            suppressNavigable: true,
-        },
-    ];
-    return { columnDefs };
+            React.createElement(Alert$1, { severity: "success", onClose: handleClose }, "The setting was edited successfully"))));
 };
 
-const useSearchShifts = () => {
+const useSearchSettings = () => {
     return useQuery({
-        queryKey: ["shifts"],
-        queryFn: ({ signal }) => getShiftParameters(signal),
+        queryKey: ["settings"],
+        queryFn: ({ signal }) => getUTLSettings(signal),
     });
 };
-const TableShiftsCrews = () => {
-    const gridRef = useRef(null);
-    const [error, setError] = useState("");
-    const [openModalNew, setOpenModalNew] = useState(false);
-    const [openModalEditShift, setOpenModalEditShift] = useState(false);
-    const [openModalDeleteShift, setOpenModalDeleteShift] = useState(false);
-    const [shiftSelected, setShiftSelected] = useState(null);
-    const { data: rows, isLoading, isError, error: e, refetch, } = useSearchShifts();
-    const formattedRows = rows === null || rows === void 0 ? void 0 : rows.map(({ PatternStart, ShiftCodes, Crews, PatternDays, CrewRotation, Comments, CanEdit, }) => ({
-        id: ShiftCodes,
-        PatternStart,
-        ShiftCodes,
-        Crews,
-        PatternDays,
-        CrewRotation,
-        Comments,
-        CanEdit,
-    }));
-    const defaultColDef = useMemo(() => {
-        return {
-            sortable: true,
-            wrapText: true,
-            autoHeight: true,
-            wrapHeaderText: true,
-            suppressHeaderMenuButton: true,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            },
-        };
-    }, []);
-    const { getMenuOptions } = useShiftsOptionsFunctions({
-        setShiftId: setShiftSelected,
+const TableSettings = () => {
+    const queryClient = useQueryClient();
+    const { showContextMenu, registerConfig } = useContextMenuMESF();
+    const [error, setError] = useState("");
+    const [gridApi, setGridApi] = useState(null);
+    const [filterValue, setFilterValue] = useState("");
+    const [settingSelected, setSettingSelected] = useState(null);
+    const [openModalNew, setOpenModalNew] = useState(false);
+    const [openModalEditSetting, setOpenModalEditSetting] = useState(false);
+    const [openModalDeleteSetting, setOpenModalDeleteSetting] = useState(false);
+    const { data: rows, isLoading, isError, error: e } = useSearchSettings();
+    const { getMenuOptions } = useSettingsOptionsFunctions({
+        setSettingId: setSettingSelected,
+        setShowDeleteModal: setOpenModalDeleteSetting,
         setShowCreateModal: setOpenModalNew,
-        setShowDeleteModal: setOpenModalDeleteShift,
-        setShowEditModal: setOpenModalEditShift,
+        setShowEditModal: setOpenModalEditSetting,
     });
-    const { showContextMenu, registerConfig } = useContextMenuMESF();
-    const { columnDefs } = useTableData$5({
-        setShiftSelected,
-        setOpenModalEditShift,
-        setOpenModalDeleteShift,
+    const { columnDefs, defaultColDef } = useTableData$5({
+        setOpenModalEditSetting,
+        setOpenModalDeleteSetting,
         showContextMenu,
+        setSettingSelected,
     });
     const getContextMenuItems = (params) => {
         var _a, _b;
         const data = (_a = params.node) === null || _a === void 0 ? void 0 : _a.data;
         params.api.deselectAll();
         (_b = params.node) === null || _b === void 0 ? void 0 : _b.setSelected(true);
-        showContextMenu(event, data, "TableShifts");
+        showContextMenu(event, data, "TableSettings");
         return [];
     };
     useEffect(() => {
         registerConfig({
-            id: "TableShifts",
+            id: "TableSettings",
             getOptions: getMenuOptions,
         });
     }, []);
@@ -9011,225 +8883,700 @@ const TableShiftsCrews = () => {
             setError(e.message);
         }
     }, [e, isError]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Grid2, { container: true, justifyContent: "center", alignItems: "center", p: 1, spacing: 1 },
-            React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                React.createElement(Typography$1, { variant: "h5", fontWeight: 600 }, "Shifts / Crew")),
-            React.createElement(Grid2, { container: true, justifyContent: "center", alignItems: "center" },
-                React.createElement(Grid2, { container: true, size: { md: 12, xs: 12 } },
-                    React.createElement(Grid2, { component: Paper, size: { md: 12, xs: 12 }, style: {
-                            height: "70vh",
-                        } },
-                        React.createElement(AgGridReact, { loading: isLoading, gridOptions: {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Grid2, { container: true, justifyContent: "center", p: 1, spacing: 1 },
+            React__default.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                React__default.createElement(Typography$1, { variant: "h5", fontWeight: 600 }, "Settings")),
+            React__default.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                React__default.createElement(TextField, { fullWidth: true, label: "Search", variant: "outlined", size: "small", margin: "dense", value: filterValue, onChange: (event) => {
+                        setFilterValue(event.target.value);
+                        gridApi === null || gridApi === void 0 ? void 0 : gridApi.setGridOption("quickFilterText", event.target.value);
+                    }, slotProps: {
+                        input: {
+                            startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
+                                React__default.createElement(IconButton$1, { edge: "start", type: "submit" },
+                                    React__default.createElement(SearchIcon, null)))),
+                        },
+                    } })),
+            React__default.createElement(Grid2, { container: true, size: { md: 12, xs: 12 } },
+                React__default.createElement(Grid2, { size: { md: 12, xs: 12 }, style: {
+                        height: "70vh",
+                    } },
+                    React__default.createElement(Paper, { style: { height: "100%", width: "100%" } },
+                        React__default.createElement(AgGridReact, { loading: isLoading, gridOptions: {
                                 theme: themeDXT,
-                            }, ref: gridRef, rowData: formattedRows || [], columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: CenteredLazyLoading, getContextMenuItems: (e) => getContextMenuItems(e), rowSelection: "single", onRowDoubleClicked: (event) => {
-                                setShiftSelected(event.data);
-                                setOpenModalEditShift(true);
-                            } })),
-                    React.createElement(Grid2, { container: true, justifyContent: "flex-end" },
-                        React.createElement(Grid2, { size: { md: 2, xs: 12 } },
-                            React.createElement(Button, { variant: "contained", color: "primary", onClick: () => setOpenModalNew(!openModalNew), fullWidth: true }, "NEW SHIFT")))))),
-        React.createElement(CreateShift, { shiftSelected: shiftSelected, show: openModalNew, onHide: (shouldUpdate) => {
+                            }, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: CenteredLazyLoading, getContextMenuItems: (e) => getContextMenuItems(e), rowSelection: "single", onRowDoubleClicked: (event) => {
+                                setSettingSelected(event.data);
+                                setOpenModalEditSetting(true);
+                            }, onGridReady: (params) => setGridApi(params.api) }))),
+                React__default.createElement(Grid2, { container: true, justifyContent: "flex-end" },
+                    React__default.createElement(Grid2, { size: { md: 2, xs: 12 } },
+                        React__default.createElement(Button, { variant: "contained", color: "primary", onClick: () => setOpenModalNew(!openModalNew), fullWidth: true }, "NEW SETTING"))))),
+        React__default.createElement(CreateSetting, { settingSelected: settingSelected, show: openModalNew, onHide: (shouldUpdate) => __awaiter(void 0, void 0, void 0, function* () {
                 setOpenModalNew(false);
                 if (shouldUpdate)
-                    refetch();
-            }, suffixTitle: "Shifts / Crew" }),
-        React.createElement(EditShift, { shiftSelected: shiftSelected, show: openModalEditShift, onHide: (shouldUpdate) => {
-                setOpenModalEditShift(false);
+                    yield queryClient.invalidateQueries({ queryKey: ["settings"] });
+            }), suffixTitle: "Settings" }),
+        React__default.createElement(EditSetting, { settingSelected: settingSelected, show: openModalEditSetting, onHide: (shouldUpdate) => __awaiter(void 0, void 0, void 0, function* () {
+                setOpenModalEditSetting(false);
                 if (shouldUpdate)
-                    refetch();
-            }, suffixTitle: "Shifts / Crew" }),
-        React.createElement(DeleteShift, { shiftSelected: shiftSelected, show: openModalDeleteShift, onHide: (shouldUpdate) => {
-                setOpenModalDeleteShift(false);
+                    yield queryClient.invalidateQueries({ queryKey: ["settings"] });
+            }), suffixTitle: "Settings" }),
+        React__default.createElement(DeleteSetting, { settingSelected: settingSelected, show: openModalDeleteSetting, onHide: (shouldUpdate) => __awaiter(void 0, void 0, void 0, function* () {
+                setOpenModalDeleteSetting(false);
                 if (shouldUpdate)
-                    refetch();
-            }, suffixTitle: "Shifts / Crew" })));
-};
-
-const ShiftsCrews = () => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HelmetDexteel, { title: "Shifts and Crews" }),
-        React.createElement(TableShiftsCrews, null)));
-};
-
-const ShiftsCrewsPage = (props) => {
-    return React.createElement(ShiftsCrews, null);
-};
-
-const AssetPage = () => {
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(DndProvider, { backend: HTML5Backend },
-            React__default.createElement(TreeAsset, null))));
-};
-
-const Asset = (props) => {
-    return React.createElement(AssetPage, null);
-};
-
-const UsersPage = (props) => {
-    return React.createElement(Users, null);
+                    yield queryClient.invalidateQueries({ queryKey: ["settings"] });
+            }), suffixTitle: "Settings" }),
+        React__default.createElement(ErrorModal, { error: error, onHide: () => setError("") })));
 };
 
-const CurrencyFormatter = new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-});
-const NumberFormatter = new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-});
-const IntegerFormatter = new Intl.NumberFormat("en-US", {});
-const DateTimeFormatter = new Intl.DateTimeFormat("en-US-u-hc-h23", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-    hour12: false,
-    //  timeZone: 'America/Los_Angeles'
-});
-const DateFormatter = new Intl.DateTimeFormat("en-US", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    // timeZone: 'America/Los_Angeles'
-});
-const TimeFormatter = new Intl.DateTimeFormat("en-US-u-hc-h23", {
-    hour: "2-digit",
-    minute: "numeric",
-    second: "numeric",
-    hour12: false,
-    // timeZone: 'America/Los_Angeles'
-});
-
-const getShiftStyle = (shift) => {
-    if (shift === "D") {
-        return { color: "#52a8b7" };
-    }
-    else if (shift === "N") {
-        return { color: "#A5A5A5" };
-    }
-    else {
-        return {};
-    }
-};
-const getCrewStyle = (crew) => {
-    if (crew === "A") {
-        return { color: "#0070C0" };
-    }
-    else if (crew === "B") {
-        return { color: "#FFD24A" };
-    }
-    else if (crew === "C") {
-        return { color: "#FD8359" };
-    }
-    else if (crew === "D") {
-        return { color: "#00B050" };
-    }
-    else {
-        return {};
-    }
-};
-const GetShiftColor = (props) => {
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Square$1, { sx: Object.assign({ mr: 1 }, getShiftStyle(props.value)), fontSize: "small" })));
+const searchSettings = () => {
+    return useQuery({
+        queryKey: ["settings"],
+        queryFn: ({ signal }) => getUTLSettings(signal),
+    });
 };
-const GetCrewColor = (props) => {
+const SettingsPage = () => {
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Square$1, { sx: Object.assign({ mr: 1 }, getCrewStyle(props.value)), fontSize: "small" })));
+        React__default.createElement(HelmetDexteel, { title: "Settings" }),
+        React__default.createElement(TableSettings, null)));
 };
 
-const AssetInitialState = {
-    areasList: [],
-    allAssets: [],
-    plantAssetId: 1,
+const UTLSettingsInitialState = {
+    serverTimeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    settings: {},
 };
-const AssetReducer = createSlice({
+const UTLSettingsReducer = createSlice({
     name: "__",
-    initialState: AssetInitialState,
+    initialState: UTLSettingsInitialState,
     reducers: {
-        setAreasList(state, { payload }) {
-            state.areasList = payload;
+        setServerTimeZone(state, { payload }) {
+            state.serverTimeZone = payload;
         },
-        setAllAssets(state, { payload }) {
-            state.allAssets = payload;
+        setSetting(state, { payload }) {
+            state.settings[payload.key] = payload.value;
         },
-        setPlantAssetId(state, { payload }) {
-            state.plantAssetId = payload;
+        initSettings(state, { payload }) {
+            state.settings = payload.reduce((acc, cur) => {
+                if (cur.SettingName.trim().toLowerCase() === "timezone") {
+                    const timeService = TimeService.getInstance();
+                    timeService.setTimeZone(cur.Value);
+                }
+                acc[cur.SettingName.trim()] = cur.Value;
+                return acc;
+            }, {});
         },
     },
 });
 
-const AssetContext = createContext({
-    state: AssetReducer.getInitialState(),
-    actions: AssetReducer.actions,
+const UTLSettingsContext = createContext({
+    state: UTLSettingsReducer.getInitialState(),
+    actions: UTLSettingsReducer.actions,
+    isLoading: true,
 });
-const useAssetContext = () => useContext(AssetContext);
-const AssetProvider = ({ children, plantAssetId = 1, }) => {
+const useUTLSettingsContext = () => useContext(UTLSettingsContext);
+const UTLSettingsProvider = ({ children }) => {
     const [state, actions] = useComplexState({
-        initialState: {
-            areasList: [],
-            allAssets: [],
-            plantAssetId,
+        initialState: UTLSettingsReducer.getInitialState(),
+        reducers: UTLSettingsReducer.caseReducers,
+    });
+    const { data: rows, isLoading, isError, error: e, isSuccess, refetch, } = searchSettings();
+    useEffect(() => {
+        if (isSuccess) {
+            const settings = rows;
+            const settingsTrimmed = settings.map((setting) => (Object.assign(Object.assign({}, setting), { SettingName: setting.SettingName.trim() })));
+            actions.initSettings(settingsTrimmed);
+        }
+    }, [isSuccess]);
+    useEffect(() => {
+        if (e && isError) {
+            console.error(e.message);
+        }
+    }, [e, isError]);
+    useMesfRealtime({
+        onReceiveMessage: (author, message) => {
+            if (message === "UTL.GetSettings") {
+                refetch();
+            }
         },
-        reducers: AssetReducer.caseReducers,
     });
-    return (React__default.createElement(AssetContext.Provider, { value: { state, actions } }, children));
+    return (React__default.createElement(UTLSettingsContext.Provider, { value: { state, actions, isLoading } }, children));
 };
 
-const LogbookSettingsInitialState = {
-    entry: {
-        withAssetFilter: undefined,
-        filterAssets: undefined,
-        canEditAsset: false,
-        allowAttachments: false,
-        canEditShift: false,
-        showShiftCrew: false,
-        exportToExcel: false,
-        shiftsRange: 7,
-        presetAssetId: undefined,
-    },
-    report: {
-        withAssetFilter: undefined,
-        filterAssets: undefined,
-        showAttachments: false,
-        showAsset: false,
-        showShiftCrew: false,
-        exportToExcel: false,
-    },
-    section: {
-        schema: undefined,
-        withAssetFilter: undefined,
-        filterAssets: undefined,
-        canEditAsset: false,
-        allowAttachments: false,
-        showShiftCrew: false,
-        exportToExcel: false,
-        topSectionsCount: 5,
-    },
+const getShiftParameters = (assetId, signal) => __awaiter(void 0, void 0, void 0, function* () {
+    const apiService = new MESApiService();
+    const parameters = [{ name: "AssetId", value: assetId }];
+    const resp = yield apiService.callV2("[MES].[GetShiftParameters]", parameters, signal);
+    if (resp.ok) {
+        return get(resp, "data.tables[0].rows", []);
+    }
+    else {
+        throw new Error(resp.message || "Error fetching shifts");
+    }
+});
+const upsertShiftParameters = (_a, assetId_1, ...args_1) => __awaiter(void 0, [_a, assetId_1, ...args_1], void 0, function* ({ PatternStart, ShiftCodes, Crews, CrewRotation, Comments }, assetId, isUpdate = false) {
+    const apiService = new MESApiService();
+    const parameters = [
+        { name: "AssetId", value: assetId },
+        { name: "PatternStart", value: PatternStart },
+        { name: "ShiftCodes", value: ShiftCodes },
+        { name: "Crews", value: Crews },
+        { name: "CrewRotation", value: CrewRotation },
+        { name: "Comments", value: Comments },
+        { name: "IsUpdate", value: isUpdate },
+    ];
+    const resp = yield apiService.callV2("[MES].[UpsertShiftParameters]", parameters);
+    if (!resp.ok) {
+        throw new Error(resp.message || "Error when upsert shift");
+    }
+});
+const deleteShiftParameters = (assetId, PatternStart) => __awaiter(void 0, void 0, void 0, function* () {
+    const apiService = new MESApiService();
+    const parameters = [];
+    parameters.push({ name: "AssetId", value: assetId });
+    parameters.push({ name: "PatternStart", value: PatternStart });
+    const resp = yield apiService.callV2("[MES].[DeleteShiftParameters]", parameters);
+    if (!resp.ok) {
+        throw new Error(resp.message || "Error when delete shift");
+    }
+});
+
+const INITIAL_VALUES = {
+    PatternStart: new Date(),
+    ShiftCodes: "",
+    Crews: "",
+    User: "",
+    PatternDays: 5,
+    CrewRotation: "",
+    Comments: "",
+    CanEdit: false,
+    ShiftsPerDay: 1,
+    NumberOfCrews: 1,
+};
+
+const CreateShift = ({ shiftSelected, show, onHide, suffixTitle, assetId, assetName, }) => {
+    var _a, _b;
+    const theme = useTheme();
+    const [open, setOpen] = useState(false);
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const [error, setError] = useState("");
+    const { control, handleSubmit, reset, watch, setValue, formState: { errors }, } = useForm({
+        defaultValues: shiftSelected ? shiftSelected : INITIAL_VALUES,
+    });
+    // Progress bar
+    const calculatePercentage = () => ((crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) / maxCrewRotationLength) * 100;
+    const createShift = useMutation({
+        mutationFn: (data) => upsertShiftParameters(data, assetId),
+        onSuccess: () => {
+            setOpen(true);
+            onHide(true);
+        },
+        onError: (error) => {
+            setError(error.message);
+        },
+        onSettled: () => {
+            setIsSubmitLoading(false);
+        },
+    });
+    const onSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        setIsSubmitLoading(true);
+        yield createShift.mutate(data);
+    });
+    const handleClose = (event, reason) => {
+        if (reason === "clickaway") {
+            return;
+        }
+        setOpen(false);
+    };
+    // const patternStart = watch('PatternStart');
+    const shiftsPerDay = watch("ShiftsPerDay");
+    const shiftCodes = watch("ShiftCodes");
+    const numberOfCrews = watch("NumberOfCrews");
+    const crewsCodes = watch("Crews");
+    const rotationPattern = watch("PatternDays");
+    const crewRotation = watch("CrewRotation");
+    const comments = watch("Comments");
+    const maxCrewRotationLength = shiftsPerDay * rotationPattern;
+    useEffect(() => {
+        if (show) {
+            reset();
+            setValue("PatternStart", new Date());
+        }
+    }, [show]);
+    return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: `New Shift/Crew${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
+        React.createElement(MesfModal, { title: "NEW SHIFT/CREW", open: show, handleClose: () => onHide(false), id: "create-shift-modal", maxWidth: "md" },
+            React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                React.createElement(MesfModal.Content, null,
+                    React.createElement(Grid2, { container: true, spacing: 2, p: 1 },
+                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                            React.createElement(TextField, { label: "Asset", value: assetName, disabled: true, fullWidth: true, variant: "outlined", margin: "dense" })),
+                        React.createElement(Controller, { name: "PatternStart", control: control, render: ({ field: { value, onChange } }) => (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
+                                React.createElement(Grid2, { size: { md: 6, xs: 12 } },
+                                    React.createElement(DatePicker$1, { format: "MM/DD/YYYY", sx: {
+                                            minWidth: "100%",
+                                            borderTopLeftRadius: 3,
+                                            borderTopRightRadius: 3,
+                                        }, 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$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: 6 } },
+                            React.createElement(Controller, { name: "ShiftsPerDay", control: control, rules: {
+                                    min: 1,
+                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: `# ${shiftsPerDay > 1 ? "Shifts" : "Shift"}  per day`, variant: "outlined", error: !!errors.ShiftsPerDay, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", value: value, onChange: (evt) => parseInt(evt.target.value) >= 1 &&
+                                        parseInt(evt.target.value) <= 10 &&
+                                        onChange(evt) })) }),
+                            ((_a = errors.ShiftsPerDay) === null || _a === void 0 ? void 0 : _a.type) === "min" && (React.createElement(ErrorLabel, { text: "Shift per day is required" }))),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "ShiftCodes", control: control, rules: {
+                                    validate: (value) => value.length == shiftsPerDay,
+                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: "Shifts Ids", variant: "outlined", error: !!errors.ShiftCodes, fullWidth: true, margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
+                                        // TODO: aquí podriamos hacer que no pueda haber dos valores iguales, para prevenir errores. Ej. dos DNN
+                                        if (evt.target.value.length <= shiftsPerDay)
+                                            onChange(evt.target.value.toString().toUpperCase());
+                                    } })) }),
+                            !!errors.ShiftCodes && (React.createElement("span", { style: {
+                                    fontSize: 12,
+                                } },
+                                "Please put ",
+                                shiftsPerDay,
+                                " shifts")),
+                            shiftCodes.length < shiftsPerDay &&
+                                !!errors.ShiftCodes === false && (React.createElement("span", { style: {
+                                    fontSize: 12,
+                                    color: theme.palette.info.main,
+                                } }, `Insert: ${shiftsPerDay} ${shiftsPerDay == 1 ? "Id" : "Ids"}. ${shiftsPerDay > 1 ? "The Ids must be differents" : ""}`))),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "NumberOfCrews", control: control, rules: {
+                                    min: 1,
+                                    max: 9,
+                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: `# ${numberOfCrews > 1 ? "Crews" : "Crew"}`, variant: "outlined", error: !!errors.NumberOfCrews, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", onChange: (evt) => {
+                                        // max. crew 15
+                                        if (parseInt(evt.target.value) >= 1 &&
+                                            parseInt(evt.target.value) <= 15)
+                                            onChange(evt);
+                                    }, value: value })) }),
+                            ((_b = errors.NumberOfCrews) === null || _b === void 0 ? void 0 : _b.type) === "min" && (React.createElement(ErrorLabel, { text: "# Crews days is required" }))),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "Crews", control: control, rules: {
+                                    validate: (value) => value.length == numberOfCrews,
+                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: "Crews Ids", variant: "outlined", error: !!errors.Crews, fullWidth: true, margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
+                                        if (evt.target.value.length <= numberOfCrews)
+                                            onChange(evt.target.value.toString().toUpperCase());
+                                    } })) }),
+                            !!errors.Crews && (React.createElement("span", { style: {
+                                    fontSize: 12,
+                                } },
+                                "Please put ",
+                                numberOfCrews,
+                                " crews")),
+                            crewsCodes.length < numberOfCrews &&
+                                !!errors.Crews === false && (React.createElement("span", { style: {
+                                    fontSize: 12,
+                                    color: theme.palette.info.main,
+                                } }, `Insert: ${numberOfCrews} ${numberOfCrews == 1 ? "Crew" : "Crews"}. ${numberOfCrews > 1 ? "The Crews must be differents" : ""}`))),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "PatternDays", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { label: "Rotation Pattern", variant: "outlined", error: !!errors.PatternDays, fullWidth: true, type: "number", margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
+                                        if (parseInt(evt.target.value) >= 5 &&
+                                            parseInt(evt.target.value) <= 60)
+                                            onChange(evt);
+                                    } })) })),
+                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                            React.createElement(Controller, { name: "CrewRotation", control: control, rules: {
+                                    validate: (value) => value.length == maxCrewRotationLength,
+                                }, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { value: value, onChange: (evt) => {
+                                        if (evt.target.value.length <= maxCrewRotationLength)
+                                            onChange(evt.target.value.toString().toUpperCase());
+                                    }, label: "Crew rotation", variant: "outlined", fullWidth: true, error: !!errors.CrewRotation, margin: "dense", autoComplete: "off" })) }),
+                            React.createElement(Grid2, { container: true, height: 2 },
+                                React.createElement(Grid2, { style: {
+                                        height: 2,
+                                        width: `${calculatePercentage()}% `,
+                                        backgroundColor: `${crewRotation.length == maxCrewRotationLength
+                                            ? "#4CAF50"
+                                            : "#F44336"}`,
+                                        transition: " 0.2s ease",
+                                        margin: "0 5px",
+                                    } })),
+                            React.createElement(Grid2, { container: true, style: { margin: "4px 0 0" } },
+                                React.createElement(Grid2, null, (crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) >= 1 &&
+                                    (crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) !==
+                                        maxCrewRotationLength && (React.createElement("span", { style: {
+                                        fontSize: 12,
+                                        color: theme.palette.info.main,
+                                        marginLeft: 5,
+                                    } }, `${crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length}/${maxCrewRotationLength}`)))),
+                            !!errors.CrewRotation && (React.createElement(ErrorLabel, { text: `Please put ${maxCrewRotationLength} crews` })),
+                            numberOfCrews > 0 &&
+                                Number.isInteger(maxCrewRotationLength / numberOfCrews) ===
+                                    false && (React.createElement(Grid2, { container: true, style: { padding: "0", marginLeft: 5 } },
+                                React.createElement(ErrorLabel, { text: `Rotation # not a multiple of Shifts (${maxCrewRotationLength}) / Crews (${numberOfCrews})` })))),
+                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                            React.createElement(Controller, { name: "Comments", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Comments", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: (evt) => {
+                                        if (evt.target.value.length <= 200)
+                                            onChange(evt);
+                                    } })) }),
+                            React.createElement(Grid2, { container: true, style: { marginBottom: 18 } },
+                                React.createElement(Grid2, null,
+                                    (comments === null || comments === void 0 ? void 0 : comments.length) >= 1 &&
+                                        (comments === null || comments === void 0 ? void 0 : comments.length) !== 200 && (React.createElement("span", { style: {
+                                            fontSize: 12,
+                                            color: theme.palette.info.main,
+                                            marginLeft: 5,
+                                        } }, `${comments === null || comments === void 0 ? void 0 : comments.length}/200 max.`)),
+                                    (comments === null || comments === void 0 ? void 0 : comments.length) == 200 && (React.createElement("span", { style: {
+                                            fontSize: 12,
+                                            color: theme.palette.info.main,
+                                            marginLeft: 5,
+                                        } }, "Max. 200"))))))),
+                React.createElement(MesfModal.Actions, null,
+                    React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
+                        React.createElement(Grid2, { size: { md: 3, xs: 12 } },
+                            React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
+                        React.createElement(Grid2, { size: { md: 3, xs: 12 } },
+                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))),
+        React.createElement(ErrorModal, { error: error, onHide: () => setError(""), title: "Error Creating Shift" }),
+        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
+            React.createElement(Alert$1, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
+};
+
+const DeleteShift = ({ shiftSelected, show, onHide, suffixTitle, assetId, assetName, }) => {
+    var _a;
+    const [open, setOpen] = useState(false);
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [error, setError] = useState("");
+    const { control, setValue, reset, watch, formState: { errors }, } = useForm({ defaultValues: INITIAL_VALUES });
+    const deleteShift = useMutation({
+        mutationFn: (patternStart) => deleteShiftParameters(assetId, patternStart),
+        onSuccess: () => {
+            setOpen(true);
+            onHide(true);
+        },
+        onError: (error) => {
+            setError(error.message);
+        },
+        onSettled: () => {
+            setIsSubmitLoading(false);
+            setDeleteAlert(false);
+        },
+    });
+    const onDelete = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        setIsSubmitLoading(true);
+        yield deleteShift.mutate(data);
+    });
+    const handleClose = (event, reason) => {
+        if (reason === "clickaway") {
+            return;
+        }
+        setOpen(false);
+        setDeleteAlert(false);
+    };
+    const patternStart = watch("PatternStart");
+    const shiftsPerDay = watch("ShiftsPerDay");
+    const crewRotation = watch("CrewRotation");
+    const numberOfCrews = watch("NumberOfCrews");
+    const crewsCodes = watch("Crews");
+    const rotationPattern = watch("PatternDays");
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (show) {
+            reset();
+            setValue("PatternStart", (_a = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.PatternStart) !== null && _a !== void 0 ? _a : new Date());
+            setValue("ShiftCodes", (_b = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.ShiftCodes) !== null && _b !== void 0 ? _b : "");
+            setValue("Crews", (_c = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.Crews) !== null && _c !== void 0 ? _c : "");
+            setValue("PatternDays", (_d = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.PatternDays) !== null && _d !== void 0 ? _d : 0);
+            setValue("CrewRotation", (_e = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.CrewRotation) !== null && _e !== void 0 ? _e : "");
+            setValue("Comments", (_f = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.Comments) !== null && _f !== void 0 ? _f : "");
+        }
+    }, [show]);
+    return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: `Delete Shift${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
+        React.createElement(MesfModal, { title: "DELETE SHIFT", open: show, handleClose: () => onHide(false), id: "delete-shift-MesfModal", maxWidth: "md" },
+            React.createElement("form", null,
+                React.createElement(MesfModal.Content, null,
+                    React.createElement(Grid2, { container: true, spacing: 2, p: 1 },
+                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                            React.createElement(TextField, { label: "Asset", value: assetName, disabled: true, fullWidth: true, variant: "outlined", margin: "dense" })),
+                        React.createElement(Controller, { name: "PatternStart", control: control, render: ({ field: { value, onChange } }) => (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
+                                React.createElement(Grid2, { size: { md: 6, xs: 12 } },
+                                    React.createElement(DatePicker$1, { format: "MM/DD/YYYY", sx: {
+                                            minWidth: "100%",
+                                            borderTopLeftRadius: 3,
+                                            borderTopRightRadius: 3,
+                                        }, 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",
+                                                disabled: true,
+                                            },
+                                        } })),
+                                React.createElement(Grid2, { size: { md: 6, xs: 12 } },
+                                    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",
+                                                disabled: true,
+                                            },
+                                        } })))) }),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "ShiftsPerDay", control: control, rules: {
+                                    min: 1,
+                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: `# ${shiftsPerDay > 1 ? "Shifts" : "Shift"}  per day`, variant: "outlined", error: !!errors.ShiftsPerDay, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", value: crewRotation.length / rotationPattern, disabled: !!shiftSelected })) }),
+                            ((_a = errors.ShiftsPerDay) === null || _a === void 0 ? void 0 : _a.type) === "min" && (React.createElement(ErrorLabel, { text: "Shift per day is required" }))),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 }, style: { paddingBottom: "0" } },
+                            React.createElement(Controller, { name: "ShiftCodes", control: control, render: ({ field: { value } }) => (React.createElement(TextField, { label: "Shifts Ids", variant: "outlined", error: !!errors.ShiftCodes, fullWidth: true, margin: "dense", autoComplete: "off", value: value, disabled: !!shiftSelected })) })),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "NumberOfCrews", control: control, rules: {
+                                    min: 1,
+                                    max: 9,
+                                }, render: ({ field: { value } }) => (React.createElement(TextField, { label: `# ${numberOfCrews > 1 ? "Crews" : "Crew"}`, variant: "outlined", error: !!errors.NumberOfCrews, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", value: crewsCodes.length, disabled: !!shiftSelected })) })),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 }, style: { paddingBottom: "0" } },
+                            React.createElement(Controller, { name: "Crews", control: control, render: ({ field: { value } }) => (React.createElement(TextField, { label: "Crews Ids", variant: "outlined", error: !!errors.Crews, fullWidth: true, margin: "dense", autoComplete: "off", value: value, disabled: !!shiftSelected })) })),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "PatternDays", control: control, render: ({ field: { value } }) => (React.createElement(TextField, { label: "Rotation Pattern", variant: "outlined", error: !!errors.PatternDays, fullWidth: true, type: "number", margin: "dense", autoComplete: "off", value: value, disabled: !!shiftSelected })) })),
+                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                            React.createElement(Controller, { name: "CrewRotation", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { label: "Crew rotation", variant: "outlined", fullWidth: true, margin: "dense", autoComplete: "off", value: value, disabled: !!shiftSelected })) })),
+                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                            React.createElement(Controller, { name: "Comments", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Comments", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, disabled: !!shiftSelected })) })))),
+                React.createElement(MesfModal.Actions, null,
+                    React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
+                        React.createElement(Grid2, { size: { md: 3, xs: 12 }, style: { margin: 0 } },
+                            React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
+                        React.createElement(Grid2, { size: { md: 3, xs: 12 }, style: { margin: 0 } },
+                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading
+                                    ? isSubmitLoading
+                                    : shiftSelected
+                                        ? new Date(shiftSelected.PatternStart) < new Date() &&
+                                            true
+                                        : false, variant: "contained", color: "secondary", onClick: () => setDeleteAlert(true) }, "Delete"),
+                            shiftSelected &&
+                                new Date(shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.PatternStart) < new Date() && (React.createElement(Grid2, null,
+                                React.createElement(ErrorLabel, { text: "Can not delete before the current date" })))))),
+                React.createElement(Dialog$1, { open: deleteAlert, onClose: () => handleClose(), "aria-labelledby": "responsive-dialog-title" },
+                    React.createElement(DialogTitle$1, { id: "responsive-dialog-title" }, "WARNING"),
+                    React.createElement(DialogContent$1, null,
+                        React.createElement(DialogContentText, { style: { padding: 0, margin: 0 } }, "Be careful, once deleted you will not be able to recover this shift, are you sure you want to delete it?")),
+                    React.createElement(DialogActions$1, { style: { padding: "16px 24px" } },
+                        React.createElement(Button, { onClick: () => setDeleteAlert(false), autoFocus: true, color: "inherit" }, "CANCEL"),
+                        React.createElement(Button, { startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), autoFocus: true, color: "secondary", onClick: () => onDelete(patternStart) }, "Delete"))))),
+        React.createElement(ErrorModal, { error: error, onHide: () => setError("") }),
+        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
+            React.createElement(Alert$1, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
 };
 
-const LogbookSettingsContext = createContext(LogbookSettingsInitialState);
-const useLogbookSettings = () => useContext(LogbookSettingsContext);
-const LogbookSettingsProvider = ({ children, logbookSettings = {}, }) => {
-    // Merge default settings with provided settings
-    const settings = useMemo(() => ({
-        entry: Object.assign(Object.assign({}, LogbookSettingsInitialState.entry), (logbookSettings.entry || {})),
-        report: Object.assign(Object.assign({}, LogbookSettingsInitialState.report), (logbookSettings.report || {})),
-        section: Object.assign(Object.assign({}, LogbookSettingsInitialState.section), (logbookSettings.section || {})),
-    }), [logbookSettings]);
-    return (React__default.createElement(LogbookSettingsContext.Provider, { value: settings }, children));
+const EditShift = ({ shiftSelected, show, onHide, suffixTitle, assetId, assetName, }) => {
+    const theme = useTheme();
+    const [open, setOpen] = useState(false);
+    const [error, setError] = useState("");
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const [initialShiftPerDayAndCrewsNumber, setInitialShiftPerDayAndCrewsNumber,] = useState(false);
+    const { control, setValue, handleSubmit, reset, watch, formState: { errors }, } = useForm({ defaultValues: INITIAL_VALUES });
+    // Progress bar
+    const calculatePercentage = () => ((crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) / maxCrewRotationLength) * 100;
+    const createShift = useMutation({
+        mutationFn: ({ shiftData, isUpdate, }) => upsertShiftParameters(shiftData, assetId, isUpdate),
+        onSuccess: () => {
+            setOpen(true);
+            onHide(true);
+        },
+        onError: (error) => {
+            setError(error.message);
+        },
+        onSettled: () => {
+            setIsSubmitLoading(false);
+        },
+    });
+    const onSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        setIsSubmitLoading(true);
+        yield createShift.mutate({ shiftData: data, isUpdate: true });
+    });
+    const handleClose = (event, reason) => {
+        if (reason === "clickaway") {
+            return;
+        }
+        setOpen(false);
+    };
+    // const patternStart = watch('PatternStart');
+    const shiftsPerDay = watch("ShiftsPerDay");
+    const shiftCodes = watch("ShiftCodes");
+    const numberOfCrews = watch("NumberOfCrews");
+    const crewsCodes = watch("Crews");
+    const rotationPattern = watch("PatternDays");
+    const comments = watch("Comments");
+    const crewRotation = watch("CrewRotation");
+    const maxCrewRotationLength = shiftsPerDay * rotationPattern;
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (show) {
+            reset();
+            setValue("PatternStart", (_a = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.PatternStart) !== null && _a !== void 0 ? _a : new Date());
+            setValue("ShiftCodes", (_b = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.ShiftCodes) !== null && _b !== void 0 ? _b : "");
+            setValue("Crews", (_c = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.Crews) !== null && _c !== void 0 ? _c : "");
+            setValue("PatternDays", (_d = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.PatternDays) !== null && _d !== void 0 ? _d : 0);
+            setValue("CrewRotation", (_e = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.CrewRotation) !== null && _e !== void 0 ? _e : "");
+            setValue("Comments", (_f = shiftSelected === null || shiftSelected === void 0 ? void 0 : shiftSelected.Comments) !== null && _f !== void 0 ? _f : "");
+            setInitialShiftPerDayAndCrewsNumber(!initialShiftPerDayAndCrewsNumber);
+        }
+    }, [show]);
+    useEffect(() => {
+        setValue("ShiftsPerDay", crewRotation.length / rotationPattern);
+        setValue("NumberOfCrews", crewsCodes.length);
+    }, [initialShiftPerDayAndCrewsNumber]);
+    return (React.createElement(React.Fragment, null,
+        show && (React.createElement(HelmetDexteel, { title: `Edit Shift${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
+        React.createElement(MesfModal, { title: "EDIT SHIFT", open: show, handleClose: () => onHide(false), id: "edit-shift-modal", maxWidth: "md" },
+            React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+                React.createElement(MesfModal.Content, null,
+                    React.createElement(Grid2, { container: true, spacing: 2, p: 1 },
+                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                            React.createElement(TextField, { label: "Asset", value: assetName, disabled: true, fullWidth: true, variant: "outlined", margin: "dense" })),
+                        React.createElement(Controller, { name: "PatternStart", control: control, render: ({ field: { value, onChange } }) => (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
+                                React.createElement(Grid2, { size: { md: 6, xs: 12 } },
+                                    React.createElement(DatePicker$1, { format: "MM/DD/YYYY", sx: {
+                                            minWidth: "100%",
+                                            borderTopLeftRadius: 3,
+                                            borderTopRightRadius: 3,
+                                        }, 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$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: 6 } },
+                            React.createElement(Controller, { name: "ShiftsPerDay", control: control, rules: {
+                                    min: 1,
+                                }, render: ({ field: { onChange, value } }) => (React.createElement(TextField, { label: `# ${shiftsPerDay > 1 ? "Shifts" : "Shift"}  per day`, variant: "outlined", error: !!errors.ShiftsPerDay, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", value: value, onChange: 
+                                    // FIXME: límite de 10?
+                                    (evt) => parseInt(evt.target.value) >= 1 &&
+                                        parseInt(evt.target.value) <= 10 &&
+                                        onChange(evt) })) })),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "ShiftCodes", control: control, rules: {
+                                    required: `Please put ${shiftsPerDay} shifts`,
+                                    validate: (value) => value.length == shiftsPerDay,
+                                }, render: ({ field: { onChange, value }, fieldState: { error }, }) => (React.createElement(TextField, { label: "Shifts Ids", variant: "outlined", error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, fullWidth: true, margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
+                                        // TODO: aquí deberíamos prevenir, que no pueda haber dos valores iguales, . Ej. dos DNN
+                                        if (evt.target.value.length <= shiftsPerDay)
+                                            onChange(evt.target.value.toString().toUpperCase());
+                                    } })) }),
+                            shiftCodes.length < shiftsPerDay &&
+                                !!errors.ShiftCodes === false && (React.createElement(ErrorLabel, { text: `Insert: ${shiftsPerDay} ${shiftsPerDay == 1 ? "Id" : "Ids"}. ${shiftsPerDay > 1 ? "The Ids must be differents" : ""}` }))),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "NumberOfCrews", control: control, rules: {
+                                    required: "# Crews day is required",
+                                    min: 1,
+                                    max: 9,
+                                }, render: ({ field: { onChange, value }, fieldState: { error }, }) => (React.createElement(TextField, { label: `# ${numberOfCrews > 1 ? "Crews" : "Crew"}`, variant: "outlined", error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, fullWidth: true, margin: "dense", autoComplete: "off", type: "number", value: value, onChange: (evt) => {
+                                        if (parseInt(evt.target.value) >= 1 &&
+                                            parseInt(evt.target.value) <= 9)
+                                            onChange(evt);
+                                    } })) })),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "Crews", control: control, rules: {
+                                    required: `Please put ${numberOfCrews} crews`,
+                                    validate: (value) => value.length == numberOfCrews,
+                                }, render: ({ field: { onChange, value }, fieldState: { error }, }) => (React.createElement(TextField, { label: "Crews Ids", variant: "outlined", error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, disabled: numberOfCrews <= 0, fullWidth: true, margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
+                                        if (evt.target.value.length <= numberOfCrews)
+                                            onChange(evt.target.value.toString().toUpperCase());
+                                    } })) }),
+                            crewsCodes.length < numberOfCrews &&
+                                !!errors.Crews === false && (React.createElement(ErrorLabel, { text: `Insert: ${numberOfCrews} ${numberOfCrews == 1 ? "Crew" : "Crews"}. ${numberOfCrews > 1 ? "The Crews must be differents" : ""}` }))),
+                        React.createElement(Grid2, { size: { md: 6, xs: 6 } },
+                            React.createElement(Controller, { name: "PatternDays", control: control, 
+                                // rules={{
+                                //     required: true
+                                // }}
+                                render: ({ field: { value, onChange } }) => (React.createElement(TextField, { label: "Rotation Pattern", variant: "outlined", error: !!errors.PatternDays, fullWidth: true, type: "number", margin: "dense", autoComplete: "off", value: value, onChange: (evt) => {
+                                        // FIXME: consultar si estos valores están bien, son los limites del sP
+                                        if (parseInt(evt.target.value) >= 5 &&
+                                            parseInt(evt.target.value) <= 60)
+                                            onChange(evt);
+                                    } })) })),
+                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                            React.createElement(Controller, { name: "CrewRotation", control: control, rules: {
+                                    validate: (value) => value.length == maxCrewRotationLength,
+                                }, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { value: value, onChange: (evt) => {
+                                        if (evt.target.value.length <= maxCrewRotationLength)
+                                            onChange(evt.target.value.toString().toUpperCase());
+                                    }, error: !!errors.CrewRotation, label: "Crew rotation", variant: "outlined", fullWidth: true, margin: "dense", autoComplete: "off" })) }),
+                            React.createElement(Grid2, { container: true, height: 2 },
+                                React.createElement(Grid2, { style: {
+                                        height: 2,
+                                        width: `${calculatePercentage()}% `,
+                                        backgroundColor: `${crewRotation.length == maxCrewRotationLength
+                                            ? "#4CAF50"
+                                            : "#F44336"}`,
+                                        transition: " 0.2s ease",
+                                        margin: "0 5px",
+                                    } })),
+                            React.createElement(Grid2, { container: true },
+                                React.createElement(Grid2, null, (crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) >= 1 &&
+                                    (crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) !==
+                                        maxCrewRotationLength && (React.createElement("span", { style: {
+                                        fontSize: 12,
+                                        color: theme.palette.info.main,
+                                        marginLeft: 5,
+                                    } }, `${crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length}/${maxCrewRotationLength}`)))),
+                            !!errors.CrewRotation && (React.createElement(ErrorLabel, { text: `Please put ${maxCrewRotationLength} crews` })),
+                            numberOfCrews > 0 &&
+                                Number.isInteger(maxCrewRotationLength / numberOfCrews) ===
+                                    false && (React.createElement(Grid2, { container: true, style: { padding: "0", marginLeft: 5 } },
+                                React.createElement(ErrorLabel, { text: `Rotation # not a multiple of Shifts (${maxCrewRotationLength}) / Crews (${numberOfCrews})` })))),
+                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                            React.createElement(Controller, { name: "Comments", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { style: { margin: "8px 0" }, size: "medium", maxRows: 5, label: "Comments", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: (evt) => {
+                                        if (evt.target.value.length <= 200)
+                                            onChange(evt);
+                                    } })) }),
+                            React.createElement(Grid2, { container: true, style: { marginBottom: 18 } },
+                                React.createElement(Grid2, null,
+                                    (comments === null || comments === void 0 ? void 0 : comments.length) >= 1 &&
+                                        (comments === null || comments === void 0 ? void 0 : comments.length) !== 200 && (React.createElement("span", { style: {
+                                            fontSize: 12,
+                                            color: theme.palette.info.main,
+                                            marginLeft: 5,
+                                        } }, `${comments === null || comments === void 0 ? void 0 : comments.length}/200`)),
+                                    (comments === null || comments === void 0 ? void 0 : comments.length) == 200 && (React.createElement("span", { style: {
+                                            fontSize: 12,
+                                            color: theme.palette.info.main,
+                                            marginLeft: 5,
+                                        } }, "Max. 200"))))))),
+                React.createElement(MesfModal.Actions, null,
+                    React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
+                        React.createElement(Grid2, { size: { md: 3, xs: 12 }, style: { margin: 0 } },
+                            React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
+                        React.createElement(Grid2, { size: { md: 3, xs: 12 }, style: { margin: 0 } },
+                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))),
+        React.createElement(ErrorModal, { error: error, onHide: () => setError("") }),
+        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
+            React.createElement(Alert$1, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-const useSettingsOptionsFunctions = ({ setSettingId, setShowDeleteModal, setShowCreateModal, setShowEditModal, }) => {
+const useShiftsOptionsFunctions = ({ setShiftId, setShowDeleteModal, setShowCreateModal, setShowEditModal, }) => {
     const getMenuOptions = (data) => {
         let options = [];
         if (!data) {
             options = options.concat([
                 {
-                    name: "New Setting",
-                    key: "new_setting",
+                    name: "New Shift",
+                    key: "new_shift",
                     onClick: () => {
                         setShowCreateModal(true);
                     },
@@ -9240,27 +9587,27 @@ const useSettingsOptionsFunctions = ({ setSettingId, setShowDeleteModal, setShow
         else {
             options = options.concat([
                 {
-                    name: "New Setting",
-                    key: "new_setting",
+                    name: "New Shift",
+                    key: "new_shift",
                     onClick: () => {
                         setShowCreateModal(true);
                     },
                     icon: React__default.createElement(PlaylistAddIcon, null),
                 },
                 {
-                    name: "Edit Setting",
-                    key: "edit_setting",
+                    name: "Edit Shift",
+                    key: "edit_shift",
                     onClick: () => {
-                        setSettingId(data);
+                        setShiftId(data);
                         setShowEditModal(true);
                     },
                     icon: React__default.createElement(EditIcon, null),
                 },
                 {
-                    name: "Delete Setting",
-                    key: "delete_setting",
+                    name: "Delete Shift",
+                    key: "delete_shift",
                     onClick: () => {
-                        setSettingId(data);
+                        setShiftId(data);
                         setShowDeleteModal(true);
                     },
                     icon: React__default.createElement(DeleteIcon, null),
@@ -9274,33 +9621,62 @@ const useSettingsOptionsFunctions = ({ setSettingId, setShowDeleteModal, setShow
     };
 };
 
-const useTableData$4 = ({ setOpenModalEditSetting, setOpenModalDeleteSetting, showContextMenu, setSettingSelected, }) => {
+const useTableData$4 = ({ setShiftSelected, setOpenModalEditShift, setOpenModalDeleteShift, showContextMenu, }) => {
     const columnDefs = [
         {
-            field: "SettingName",
-            headerName: "Name",
+            field: "PatternStart",
+            headerName: "Pattern Start",
+            valueFormatter: ({ value }) => `${moment$g(value).format("L")}, ${moment$g(value).format("LTS")}`,
             minWidth: 180,
             flex: 4,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            },
+        },
+        {
+            field: "ShiftCodes",
+            headerName: "Shift Codes",
+            minWidth: 150,
+            flex: 2,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            },
         },
         {
-            field: "Value",
-            headerName: "Value",
-            minWidth: 180,
+            field: "Crews",
+            headerName: "Crews",
+            minWidth: 150,
             flex: 2,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            },
         },
         {
-            field: "Description",
-            headerName: "Description",
-            minWidth: 150,
-            flex: 4,
+            sortable: false,
+            field: "PatternDays",
+            headerName: "Shifts",
+            minWidth: 130,
+            flex: 1,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            },
         },
         {
             cellRenderer: (params) => {
-                return (React__default.createElement(Grid2, { container: true, sx: {
+                return (React__default.createElement(Grid2, { container: true, style: {
                         height: "100%",
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center",
+                    }, sx: {
                         opacity: 0,
                         transition: "opacity 0.1s ease-in-out",
                         ".ag-row-hover &": {
@@ -9315,329 +9691,101 @@ const useTableData$4 = ({ setOpenModalEditSetting, setOpenModalDeleteSetting, sh
                     } },
                     React__default.createElement(Grid2, { size: { xs: 12, md: 12 }, style: {
                             display: "flex",
-                            justifyContent: "space-evenly",
+                            justifyContent: "center",
                             alignItems: "center",
                         } },
-                        React__default.createElement(IconButton$1, { size: "small", onClick: () => {
-                                setSettingSelected(params === null || params === void 0 ? void 0 : params.data);
-                                setOpenModalEditSetting(true);
+                        React__default.createElement(Button, { style: {}, onClick: () => {
+                                setShiftSelected(params === null || params === void 0 ? void 0 : params.data);
+                                setOpenModalEditShift(true);
                             } },
                             React__default.createElement(EditIcon, { color: "primary" })),
-                        React__default.createElement(IconButton$1, { size: "small", onClick: () => {
-                                setSettingSelected(params === null || params === void 0 ? void 0 : params.data);
-                                setOpenModalDeleteSetting(true);
-                            } },
-                            React__default.createElement(DeleteIcon, { color: "secondary" })),
-                        React__default.createElement(IconButton$1, { size: "small", onClick: (e) => showContextMenu(e, params.data, "TableSettings") },
-                            React__default.createElement(FormatListBulletedSharpIcon, { color: "action" })))));
-            },
-            field: "",
-            flex: 1,
-            minWidth: 240,
-            editable: false,
-            autoHeight: false,
-            suppressNavigable: true,
-        },
-    ];
-    const defaultColDef = useMemo(() => {
-        return {
-            sortable: true,
-            wrapText: true,
-            autoHeight: true,
-            wrapHeaderText: true,
-            suppressHeaderMenuButton: true,
-            cellStyle: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-            },
-        };
-    }, []);
-    return { columnDefs, defaultColDef };
-};
-
-const INITIAL_VALUES = {
-    SettingName: "",
-    Value: "",
-    Description: "",
-};
-
-const upsertSettings = (_a) => __awaiter(void 0, [_a], void 0, function* ({ oldName, newName, description, value, }) {
-    const apiService = new MESApiService();
-    const parameters = [
-        { name: "OldName", value: oldName },
-        { name: "NewName", value: newName },
-        { name: "Description", value: description },
-        { name: "Value", value: value },
-    ];
-    const resp = yield apiService.callV2("[UTL].[SetSetting]", parameters);
-    if (!resp.ok) {
-        throw new Error(resp.message || "Error when upsert setting");
-    }
-});
-const deleteSetting = (settingName) => __awaiter(void 0, void 0, void 0, function* () {
-    const apiService = new MESApiService();
-    const parameters = [
-        { name: "SettingName", value: settingName },
-    ];
-    const resp = yield apiService.callV2("[UTL].[DeleteSetting]", parameters);
-    if (!resp.ok) {
-        throw new Error(resp.message || "Error when delete setting");
-    }
-});
-
-const CreateSetting = ({ settingSelected, show, onHide, suffixTitle, }) => {
-    const [open, setOpen] = useState(false);
-    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const [error, setError] = useState("");
-    const { control, handleSubmit, reset } = useForm({
-        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES,
-    });
-    const updateSetting = useMutation({
-        mutationFn: upsertSettings,
-        onSuccess: () => {
-            setOpen(true);
-            onHide(true);
-        },
-        onError: (error) => {
-            setError(error.message);
-        },
-        onSettled: () => {
-            setIsSubmitLoading(false);
-        },
-    });
-    const onSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
-        setIsSubmitLoading(true);
-        yield updateSetting.mutate({
-            oldName: "",
-            newName: data.SettingName,
-            description: data.Description,
-            value: data.Value,
-        });
-    });
-    const handleClose = (event, reason) => {
-        if (reason === "clickaway") {
-            return;
-        }
-        setOpen(false);
-    };
-    useEffect(() => {
-        if (show) {
-            reset();
-        }
-    }, [show]);
-    return (React.createElement(React.Fragment, null,
-        show && (React.createElement(HelmetDexteel, { title: `New Setting${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
-        React.createElement(Grid2, { container: true },
-            React.createElement(Grid2, null,
-                React.createElement(MesfModal, { title: "NEW SETTING", open: show, handleClose: () => onHide(false), id: "create-setting-modal", maxWidth: "md" },
-                    React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
-                        React.createElement(MesfModal.Content, null,
-                            React.createElement(Grid2, { container: true, spacing: 2 },
-                                React.createElement(Grid2, { size: { xs: 12, md: 6 } },
-                                    React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({}, field, { label: "Name", error: !!error, helperText: error ? error.message : null, autoComplete: "off" }))) })),
-                                React.createElement(Grid2, { size: { xs: 12, md: 6 } },
-                                    React.createElement(Controller, { name: "Value", control: control, rules: {
-                                            required: "Value is required",
-                                        }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({}, field, { label: "Value", error: !!error, helperText: error ? error.message : null, autoComplete: "off" }))) })),
-                                React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                                    React.createElement(Controller, { name: "Description", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { size: "medium", maxRows: 5, label: "Description", multiline: true, autoComplete: "off", value: value, onChange: (evt) => {
-                                                if (evt.target.value.length <= 200)
-                                                    onChange(evt);
-                                            } })) })))),
-                        React.createElement(MesfModal.Actions, null,
-                            React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
-                                React.createElement(Grid2, { size: { md: 3, xs: 12 } },
-                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
-                                React.createElement(Grid2, { size: { md: 3, xs: 12 } },
-                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
-        React.createElement(ErrorModal, { error: error, onHide: () => setError(""), title: "Error Creating Setting" }),
-        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-            React.createElement(Alert$1, { severity: "success", onClose: handleClose }, "The setting was created successfully"))));
-};
-
-const DeleteSetting = ({ settingSelected, show, onHide, suffixTitle, }) => {
-    const [open, setOpen] = useState(false);
-    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const [error, setError] = useState("");
-    const { control, handleSubmit, reset, setValue } = useForm({
-        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES,
-    });
-    const removeSetting = useMutation({
-        mutationFn: deleteSetting,
-        onSuccess: () => {
-            setOpen(true);
-            onHide(true);
-        },
-        onError: (error) => {
-            setError(error.message);
-        },
-        onSettled: () => {
-            setIsSubmitLoading(false);
-        },
-    });
-    const onSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
-        setIsSubmitLoading(true);
-        yield removeSetting.mutate(data.SettingName);
-    });
-    const handleClose = (event, reason) => {
-        if (reason === "clickaway") {
-            return;
-        }
-        setOpen(false);
-    };
-    useEffect(() => {
-        if (show) {
-            reset();
-            if (settingSelected) {
-                setValue("SettingName", settingSelected.SettingName);
-                setValue("Value", settingSelected.Value);
-                setValue("Description", settingSelected.Description);
-            }
-        }
-    }, [show]);
-    return (React.createElement(React.Fragment, null,
-        show && (React.createElement(HelmetDexteel, { title: `Delete Setting${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
-        React.createElement(Grid2, { container: true },
-            React.createElement(Grid2, null,
-                React.createElement(MesfModal, { title: "DELETE SETTING", open: show, handleClose: () => onHide(false), id: "delete-setting-modal", maxWidth: "md" },
-                    React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
-                        React.createElement(MesfModal.Content, null,
-                            React.createElement(Grid2, { container: true, spacing: 2 },
-                                React.createElement(Grid2, { size: { xs: 12, md: 6 } },
-                                    React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({ disabled: true }, field, { label: "Name", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" }))) })),
-                                React.createElement(Grid2, { size: { xs: 12, md: 6 } },
-                                    React.createElement(Controller, { name: "Value", control: control, rules: { required: "Value is required" }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({ disabled: true }, field, { label: "Value", variant: "outlined", error: !!error, helperText: error ? error.message : null, fullWidth: true, margin: "dense", autoComplete: "off" }))) })),
-                                React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                                    React.createElement(Controller, { name: "Description", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { disabled: true, size: "medium", maxRows: 5, label: "Description", multiline: true, autoComplete: "off", value: value, onChange: (evt) => {
-                                                if (evt.target.value.length <= 200)
-                                                    onChange(evt);
-                                            } })) })))),
-                        React.createElement(MesfModal.Actions, null,
-                            React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
-                                React.createElement(Grid2, { size: { md: 3, xs: 12 } },
-                                    React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
-                                React.createElement(Grid2, { size: { md: 3, xs: 12 } },
-                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "secondary", type: "submit" }, "Delete")))))))),
-        React.createElement(ErrorModal, { error: error, onHide: () => setError(""), title: "Error deleting Setting" }),
-        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-            React.createElement(Alert$1, { severity: "success", onClose: handleClose }, "The setting was deleted successfully"))));
-};
-
-const EditSetting = ({ settingSelected, show, onHide, suffixTitle, }) => {
-    const [open, setOpen] = useState(false);
-    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const [error, setError] = useState("");
-    const { control, handleSubmit, reset, setValue } = useForm({
-        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES,
-    });
-    const updateSetting = useMutation({
-        mutationFn: upsertSettings,
-        onSuccess: () => {
-            setOpen(true);
-            onHide(true);
-        },
-        onError: (error) => {
-            setError(error.message);
-        },
-        onSettled: () => {
-            setIsSubmitLoading(false);
+                        React__default.createElement(Button, { style: {}, onClick: () => {
+                                setShiftSelected(params === null || params === void 0 ? void 0 : params.data);
+                                setOpenModalDeleteShift(true);
+                            } },
+                            React__default.createElement(DeleteIcon, { color: "secondary" })),
+                        React__default.createElement(Button, { style: {}, onClick: (e) => showContextMenu(e, params.data, "TableShifts") },
+                            React__default.createElement(FormatListBulletedSharpIcon, { color: "action" })))));
+            },
+            field: "",
+            flex: 3,
+            minWidth: 240,
+            editable: false,
+            autoHeight: false,
+            suppressNavigable: true,
         },
-    });
-    const onSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        setIsSubmitLoading(true);
-        yield updateSetting.mutate({
-            oldName: (_a = settingSelected === null || settingSelected === void 0 ? void 0 : settingSelected.SettingName) !== null && _a !== void 0 ? _a : null,
-            newName: data.SettingName,
-            description: data.Description,
-            value: data.Value,
-        });
-    });
-    const handleClose = (event, reason) => {
-        if (reason === "clickaway") {
-            return;
-        }
-        setOpen(false);
-    };
-    useEffect(() => {
-        if (show) {
-            reset();
-            if (settingSelected) {
-                setValue("SettingName", settingSelected.SettingName);
-                setValue("Value", settingSelected.Value);
-                setValue("Description", settingSelected.Description);
-            }
-        }
-    }, [show]);
-    return (React.createElement(React.Fragment, null,
-        show && (React.createElement(HelmetDexteel, { title: `Edit Setting${suffixTitle ? ` - ${suffixTitle}` : ""}` })),
-        React.createElement(MesfModal, { title: "EDIT SETTING", open: show, handleClose: () => onHide(false), id: "edit-setting-modal", maxWidth: "md" },
-            React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
-                React.createElement(MesfModal.Content, null,
-                    React.createElement(Grid2, { container: true, spacing: 2 },
-                        React.createElement(Grid2, { size: { xs: 12, md: 6 } },
-                            React.createElement(Controller, { name: "SettingName", control: control, rules: { required: "Name is required" }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({}, field, { label: "Name", error: !!error, helperText: error ? error.message : null, autoComplete: "off" }))) })),
-                        React.createElement(Grid2, { size: { xs: 12, md: 6 } },
-                            React.createElement(Controller, { name: "Value", control: control, rules: {
-                                    required: "Value is required",
-                                }, render: ({ field, fieldState: { error } }) => (React.createElement(TextField, Object.assign({}, field, { label: "Value", error: !!error, helperText: error ? error.message : null, autoComplete: "off" }))) })),
-                        React.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                            React.createElement(Controller, { name: "Description", control: control, render: ({ field: { value, onChange } }) => (React.createElement(TextField, { size: "medium", maxRows: 5, label: "Description", multiline: true, variant: "outlined", fullWidth: true, autoComplete: "off", value: value, onChange: (evt) => {
-                                        if (evt.target.value.length <= 200)
-                                            onChange(evt);
-                                    } })) })))),
-                React.createElement(MesfModal.Actions, null,
-                    React.createElement(Grid2, { container: true, spacing: 2, justifyContent: "flex-end" },
-                        React.createElement(Grid2, { size: { md: 3, xs: 12 } },
-                            React.createElement(Button, { fullWidth: true, variant: "contained", color: "inherit", onClick: () => onHide(false) }, "Cancel")),
-                        React.createElement(Grid2, { size: { md: 3, xs: 12 } },
-                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))),
-        React.createElement(ErrorModal, { error: error, onHide: () => setError(""), title: "Error updating Setting" }),
-        React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-            React.createElement(Alert$1, { severity: "success", onClose: handleClose }, "The setting was edited successfully"))));
+    ];
+    return { columnDefs };
 };
 
-const useSearchSettings = () => {
+const useSearchShifts = (assetId) => {
     return useQuery({
-        queryKey: ["settings"],
-        queryFn: ({ signal }) => getUTLSettings(signal),
+        queryKey: ["shifts", assetId],
+        queryFn: ({ signal }) => getShiftParameters(assetId, signal),
     });
 };
-const TableSettings = () => {
-    const queryClient = useQueryClient();
-    const { showContextMenu, registerConfig } = useContextMenuMESF();
+const TableShiftsCrews = () => {
+    const gridRef = useRef(null);
     const [error, setError] = useState("");
-    const [gridApi, setGridApi] = useState(null);
-    const [filterValue, setFilterValue] = useState("");
-    const [settingSelected, setSettingSelected] = useState(null);
     const [openModalNew, setOpenModalNew] = useState(false);
-    const [openModalEditSetting, setOpenModalEditSetting] = useState(false);
-    const [openModalDeleteSetting, setOpenModalDeleteSetting] = useState(false);
-    const { data: rows, isLoading, isError, error: e } = useSearchSettings();
-    const { getMenuOptions } = useSettingsOptionsFunctions({
-        setSettingId: setSettingSelected,
-        setShowDeleteModal: setOpenModalDeleteSetting,
+    const [openModalEditShift, setOpenModalEditShift] = useState(false);
+    const [openModalDeleteShift, setOpenModalDeleteShift] = useState(false);
+    const [shiftSelected, setShiftSelected] = useState(null);
+    const { state: { settings }, } = useUTLSettingsContext();
+    const defaultAssetId = Number(get(settings, "DefaultAssetId", null));
+    const [selectedAssetId, setSelectedAssetId] = useState(defaultAssetId || null);
+    const { data: assets } = useSearchAssets();
+    const assetsList = useMemo(() => { var _a; return (_a = assets === null || assets === void 0 ? void 0 : assets.filter((a) => a.CanBeDefaultAsset)) !== null && _a !== void 0 ? _a : []; }, [assets]);
+    const selectedAssetName = useMemo(() => { var _a, _b; return (_b = (_a = assetsList.find((a) => a.AssetId === selectedAssetId)) === null || _a === void 0 ? void 0 : _a.AssetName) !== null && _b !== void 0 ? _b : ""; }, [assetsList, selectedAssetId]);
+    const { data: rows, isLoading, isError, error: e, refetch, } = useSearchShifts(selectedAssetId);
+    const formattedRows = rows === null || rows === void 0 ? void 0 : rows.map(({ PatternStart, ShiftCodes, Crews, PatternDays, CrewRotation, Comments, CanEdit, }) => ({
+        id: ShiftCodes,
+        PatternStart,
+        ShiftCodes,
+        Crews,
+        PatternDays,
+        CrewRotation,
+        Comments,
+        CanEdit,
+    }));
+    const defaultColDef = useMemo(() => {
+        return {
+            sortable: true,
+            wrapText: true,
+            autoHeight: true,
+            wrapHeaderText: true,
+            suppressHeaderMenuButton: true,
+            cellStyle: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            },
+        };
+    }, []);
+    const { getMenuOptions } = useShiftsOptionsFunctions({
+        setShiftId: setShiftSelected,
         setShowCreateModal: setOpenModalNew,
-        setShowEditModal: setOpenModalEditSetting,
+        setShowDeleteModal: setOpenModalDeleteShift,
+        setShowEditModal: setOpenModalEditShift,
     });
-    const { columnDefs, defaultColDef } = useTableData$4({
-        setOpenModalEditSetting,
-        setOpenModalDeleteSetting,
+    const { showContextMenu, registerConfig } = useContextMenuMESF();
+    const { columnDefs } = useTableData$4({
+        setShiftSelected,
+        setOpenModalEditShift,
+        setOpenModalDeleteShift,
         showContextMenu,
-        setSettingSelected,
     });
     const getContextMenuItems = (params) => {
         var _a, _b;
         const data = (_a = params.node) === null || _a === void 0 ? void 0 : _a.data;
         params.api.deselectAll();
         (_b = params.node) === null || _b === void 0 ? void 0 : _b.setSelected(true);
-        showContextMenu(event, data, "TableSettings");
+        showContextMenu(event, data, "TableShifts");
         return [];
     };
     useEffect(() => {
         registerConfig({
-            id: "TableSettings",
+            id: "TableShifts",
             getOptions: getMenuOptions,
         });
     }, []);
@@ -9646,124 +9794,219 @@ const TableSettings = () => {
             setError(e.message);
         }
     }, [e, isError]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid2, { container: true, justifyContent: "center", p: 1, spacing: 1 },
-            React__default.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                React__default.createElement(Typography$1, { variant: "h5", fontWeight: 600 }, "Settings")),
-            React__default.createElement(Grid2, { size: { md: 12, xs: 12 } },
-                React__default.createElement(TextField, { fullWidth: true, label: "Search", variant: "outlined", size: "small", margin: "dense", value: filterValue, onChange: (event) => {
-                        setFilterValue(event.target.value);
-                        gridApi === null || gridApi === void 0 ? void 0 : gridApi.setGridOption("quickFilterText", event.target.value);
-                    }, slotProps: {
-                        input: {
-                            startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
-                                React__default.createElement(IconButton$1, { edge: "start", type: "submit" },
-                                    React__default.createElement(SearchIcon, null)))),
-                        },
-                    } })),
-            React__default.createElement(Grid2, { container: true, size: { md: 12, xs: 12 } },
-                React__default.createElement(Grid2, { size: { md: 12, xs: 12 }, style: {
-                        height: "70vh",
-                    } },
-                    React__default.createElement(Paper, { style: { height: "100%", width: "100%" } },
-                        React__default.createElement(AgGridReact, { loading: isLoading, gridOptions: {
+    return (React.createElement(React.Fragment, null,
+        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 }, "Shifts / Crew")),
+            React.createElement(Grid2, { size: { md: 12, xs: 12 } },
+                React.createElement(FormControl, { size: "small", sx: { minWidth: 200 } },
+                    React.createElement(InputLabel, null, "Asset"),
+                    React.createElement(Select, { value: selectedAssetId !== null && selectedAssetId !== void 0 ? selectedAssetId : "", onChange: (e) => setSelectedAssetId(Number(e.target.value)), label: "Asset" }, assetsList.map((asset) => (React.createElement(MenuItem, { key: asset.AssetId, value: asset.AssetId }, asset.AssetName)))))),
+            React.createElement(Grid2, { container: true, justifyContent: "center", alignItems: "center" },
+                React.createElement(Grid2, { container: true, size: { md: 12, xs: 12 } },
+                    React.createElement(Grid2, { component: Paper, size: { md: 12, xs: 12 }, style: {
+                            height: "70vh",
+                        } },
+                        React.createElement(AgGridReact, { loading: isLoading, gridOptions: {
                                 theme: themeDXT,
-                            }, rowData: rows, columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: CenteredLazyLoading, getContextMenuItems: (e) => getContextMenuItems(e), rowSelection: "single", onRowDoubleClicked: (event) => {
-                                setSettingSelected(event.data);
-                                setOpenModalEditSetting(true);
-                            }, onGridReady: (params) => setGridApi(params.api) }))),
-                React__default.createElement(Grid2, { container: true, justifyContent: "flex-end" },
-                    React__default.createElement(Grid2, { size: { md: 2, xs: 12 } },
-                        React__default.createElement(Button, { variant: "contained", color: "primary", onClick: () => setOpenModalNew(!openModalNew), fullWidth: true }, "NEW SETTING"))))),
-        React__default.createElement(CreateSetting, { settingSelected: settingSelected, show: openModalNew, onHide: (shouldUpdate) => __awaiter(void 0, void 0, void 0, function* () {
+                            }, ref: gridRef, rowData: formattedRows || [], columnDefs: columnDefs, defaultColDef: defaultColDef, rowHeight: 34, headerHeight: 34, animateRows: true, loadingOverlayComponent: CenteredLazyLoading, getContextMenuItems: (e) => getContextMenuItems(e), rowSelection: "single", onRowDoubleClicked: (event) => {
+                                setShiftSelected(event.data);
+                                setOpenModalEditShift(true);
+                            } })),
+                    React.createElement(Grid2, { container: true, justifyContent: "flex-end" },
+                        React.createElement(Grid2, { size: { md: 2, xs: 12 } },
+                            React.createElement(Button, { variant: "contained", color: "primary", onClick: () => setOpenModalNew(!openModalNew), fullWidth: true }, "NEW SHIFT")))))),
+        React.createElement(CreateShift, { shiftSelected: shiftSelected, show: openModalNew, onHide: (shouldUpdate) => {
                 setOpenModalNew(false);
                 if (shouldUpdate)
-                    yield queryClient.invalidateQueries({ queryKey: ["settings"] });
-            }), suffixTitle: "Settings" }),
-        React__default.createElement(EditSetting, { settingSelected: settingSelected, show: openModalEditSetting, onHide: (shouldUpdate) => __awaiter(void 0, void 0, void 0, function* () {
-                setOpenModalEditSetting(false);
+                    refetch();
+            }, suffixTitle: "Shifts / Crew", assetId: selectedAssetId, assetName: selectedAssetName }),
+        React.createElement(EditShift, { shiftSelected: shiftSelected, show: openModalEditShift, onHide: (shouldUpdate) => {
+                setOpenModalEditShift(false);
                 if (shouldUpdate)
-                    yield queryClient.invalidateQueries({ queryKey: ["settings"] });
-            }), suffixTitle: "Settings" }),
-        React__default.createElement(DeleteSetting, { settingSelected: settingSelected, show: openModalDeleteSetting, onHide: (shouldUpdate) => __awaiter(void 0, void 0, void 0, function* () {
-                setOpenModalDeleteSetting(false);
+                    refetch();
+            }, suffixTitle: "Shifts / Crew", assetId: selectedAssetId, assetName: selectedAssetName }),
+        React.createElement(DeleteShift, { shiftSelected: shiftSelected, show: openModalDeleteShift, onHide: (shouldUpdate) => {
+                setOpenModalDeleteShift(false);
                 if (shouldUpdate)
-                    yield queryClient.invalidateQueries({ queryKey: ["settings"] });
-            }), suffixTitle: "Settings" }),
-        React__default.createElement(ErrorModal, { error: error, onHide: () => setError("") })));
+                    refetch();
+            }, suffixTitle: "Shifts / Crew", assetId: selectedAssetId, assetName: selectedAssetName })));
+};
+
+const ShiftsCrews = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HelmetDexteel, { title: "Shifts and Crews" }),
+        React.createElement(TableShiftsCrews, null)));
+};
+
+const ShiftsCrewsPage = (props) => {
+    return React.createElement(ShiftsCrews, null);
+};
+
+const AssetPage = () => {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DndProvider, { backend: HTML5Backend },
+            React__default.createElement(TreeAsset, null))));
+};
+
+const Asset = (props) => {
+    return React.createElement(AssetPage, null);
+};
+
+const UsersPage = (props) => {
+    return React.createElement(Users, null);
+};
+
+const CurrencyFormatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+});
+const NumberFormatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+});
+const IntegerFormatter = new Intl.NumberFormat("en-US", {});
+const DateTimeFormatter = new Intl.DateTimeFormat("en-US-u-hc-h23", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: false,
+    //  timeZone: 'America/Los_Angeles'
+});
+const DateFormatter = new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    // timeZone: 'America/Los_Angeles'
+});
+const TimeFormatter = new Intl.DateTimeFormat("en-US-u-hc-h23", {
+    hour: "2-digit",
+    minute: "numeric",
+    second: "numeric",
+    hour12: false,
+    // timeZone: 'America/Los_Angeles'
+});
+
+const getShiftStyle = (shift) => {
+    if (shift === "D") {
+        return { color: "#52a8b7" };
+    }
+    else if (shift === "N") {
+        return { color: "#A5A5A5" };
+    }
+    else {
+        return {};
+    }
 };
-
-const searchSettings = () => {
-    return useQuery({
-        queryKey: ["settings"],
-        queryFn: ({ signal }) => getUTLSettings(signal),
-    });
+const getCrewStyle = (crew) => {
+    if (crew === "A") {
+        return { color: "#0070C0" };
+    }
+    else if (crew === "B") {
+        return { color: "#FFD24A" };
+    }
+    else if (crew === "C") {
+        return { color: "#FD8359" };
+    }
+    else if (crew === "D") {
+        return { color: "#00B050" };
+    }
+    else {
+        return {};
+    }
 };
-const SettingsPage = () => {
+const GetShiftColor = (props) => {
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HelmetDexteel, { title: "Settings" }),
-        React__default.createElement(TableSettings, null)));
+        React__default.createElement(Square$1, { sx: Object.assign({ mr: 1 }, getShiftStyle(props.value)), fontSize: "small" })));
+};
+const GetCrewColor = (props) => {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Square$1, { sx: Object.assign({ mr: 1 }, getCrewStyle(props.value)), fontSize: "small" })));
 };
 
-const UTLSettingsInitialState = {
-    serverTimeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    settings: {},
+const AssetInitialState = {
+    areasList: [],
+    allAssets: [],
+    plantAssetId: 1,
 };
-const UTLSettingsReducer = createSlice({
+const AssetReducer = createSlice({
     name: "__",
-    initialState: UTLSettingsInitialState,
+    initialState: AssetInitialState,
     reducers: {
-        setServerTimeZone(state, { payload }) {
-            state.serverTimeZone = payload;
+        setAreasList(state, { payload }) {
+            state.areasList = payload;
         },
-        setSetting(state, { payload }) {
-            state.settings[payload.key] = payload.value;
+        setAllAssets(state, { payload }) {
+            state.allAssets = payload;
         },
-        initSettings(state, { payload }) {
-            state.settings = payload.reduce((acc, cur) => {
-                if (cur.SettingName.trim().toLowerCase() === "timezone") {
-                    const timeService = TimeService.getInstance();
-                    timeService.setTimeZone(cur.Value);
-                }
-                acc[cur.SettingName.trim()] = cur.Value;
-                return acc;
-            }, {});
+        setPlantAssetId(state, { payload }) {
+            state.plantAssetId = payload;
         },
     },
 });
 
-const UTLSettingsContext = createContext({
-    state: UTLSettingsReducer.getInitialState(),
-    actions: UTLSettingsReducer.actions,
-    isLoading: true,
+const AssetContext = createContext({
+    state: AssetReducer.getInitialState(),
+    actions: AssetReducer.actions,
 });
-const useUTLSettingsContext = () => useContext(UTLSettingsContext);
-const UTLSettingsProvider = ({ children }) => {
+const useAssetContext = () => useContext(AssetContext);
+const AssetProvider = ({ children, plantAssetId = 1, }) => {
     const [state, actions] = useComplexState({
-        initialState: UTLSettingsReducer.getInitialState(),
-        reducers: UTLSettingsReducer.caseReducers,
-    });
-    const { data: rows, isLoading, isError, error: e, isSuccess, refetch, } = searchSettings();
-    useEffect(() => {
-        if (isSuccess) {
-            const settings = rows;
-            const settingsTrimmed = settings.map((setting) => (Object.assign(Object.assign({}, setting), { SettingName: setting.SettingName.trim() })));
-            actions.initSettings(settingsTrimmed);
-        }
-    }, [isSuccess]);
-    useEffect(() => {
-        if (e && isError) {
-            console.error(e.message);
-        }
-    }, [e, isError]);
-    useMesfRealtime({
-        onReceiveMessage: (author, message) => {
-            if (message === "UTL.GetSettings") {
-                refetch();
-            }
+        initialState: {
+            areasList: [],
+            allAssets: [],
+            plantAssetId,
         },
+        reducers: AssetReducer.caseReducers,
     });
-    return (React__default.createElement(UTLSettingsContext.Provider, { value: { state, actions, isLoading } }, children));
+    return (React__default.createElement(AssetContext.Provider, { value: { state, actions } }, children));
+};
+
+const LogbookSettingsInitialState = {
+    entry: {
+        withAssetFilter: undefined,
+        filterAssets: undefined,
+        canEditAsset: false,
+        allowAttachments: false,
+        canEditShift: false,
+        showShiftCrew: false,
+        exportToExcel: false,
+        shiftsRange: 7,
+        presetAssetId: undefined,
+    },
+    report: {
+        withAssetFilter: undefined,
+        filterAssets: undefined,
+        showAttachments: false,
+        showAsset: false,
+        showShiftCrew: false,
+        exportToExcel: false,
+    },
+    section: {
+        schema: undefined,
+        withAssetFilter: undefined,
+        filterAssets: undefined,
+        canEditAsset: false,
+        allowAttachments: false,
+        showShiftCrew: false,
+        exportToExcel: false,
+        topSectionsCount: 5,
+    },
+};
+
+const LogbookSettingsContext = createContext(LogbookSettingsInitialState);
+const useLogbookSettings = () => useContext(LogbookSettingsContext);
+const LogbookSettingsProvider = ({ children, logbookSettings = {}, }) => {
+    // Merge default settings with provided settings
+    const settings = useMemo(() => ({
+        entry: Object.assign(Object.assign({}, LogbookSettingsInitialState.entry), (logbookSettings.entry || {})),
+        report: Object.assign(Object.assign({}, LogbookSettingsInitialState.report), (logbookSettings.report || {})),
+        section: Object.assign(Object.assign({}, LogbookSettingsInitialState.section), (logbookSettings.section || {})),
+    }), [logbookSettings]);
+    return (React__default.createElement(LogbookSettingsContext.Provider, { value: settings }, children));
 };
 
 const useFrontendVersionCheck = ({ endpoint = "/frontend/version", intervalMs = 60000, enabled = true, onUpdate, } = {}) => {
@@ -10264,9 +10507,9 @@ const QueryCacheInvalidations = () => {
                     React__default.createElement(MesfModal.Content, { dividers: true },
                         React__default.createElement(Grid2, { container: true, spacing: 3 },
                             React__default.createElement(Grid2, { size: { xs: 12 } },
-                                React__default.createElement(Controller, { control: control, name: "source", render: (params) => (React__default.createElement(Autocomplete$1, { options: actions, getOptionLabel: (option) => `${option.ActionName}`, value: params.field.value, onChange: (_, value) => params.field.onChange(value), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Select Source Action", variant: "outlined", size: "medium" }))), disabled: modal === "edit" })) })),
+                                React__default.createElement(Controller, { control: control, name: "source", render: (params) => (React__default.createElement(Autocomplete, { options: actions, getOptionLabel: (option) => `${option.ActionName}`, value: params.field.value, onChange: (_, value) => params.field.onChange(value), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Select Source Action", variant: "outlined", size: "medium" }))), disabled: modal === "edit" })) })),
                             React__default.createElement(Grid2, { size: { xs: 12 } },
-                                React__default.createElement(Controller, { control: control, name: "targets", render: (params) => (React__default.createElement(Autocomplete$1, { multiple: true, options: actions.filter((a) => { var _a; return a.ActionId !== ((_a = control._formValues.source) === null || _a === void 0 ? void 0 : _a.ActionId); }), getOptionLabel: (option) => {
+                                React__default.createElement(Controller, { control: control, name: "targets", render: (params) => (React__default.createElement(Autocomplete, { multiple: true, options: actions.filter((a) => { var _a; return a.ActionId !== ((_a = control._formValues.source) === null || _a === void 0 ? void 0 : _a.ActionId); }), getOptionLabel: (option) => {
                                             if (typeof option === "string") {
                                                 return option;
                                             }
@@ -10318,7 +10561,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",
@@ -10565,7 +10808,7 @@ const ResultsList = ({ results, onDeleteResult, onClearAll }) => {
 };
 
 const SPAutocomplete = ({ procedures, value, onChange, isLoading, disabled = false, }) => {
-    return (React__default.createElement(Autocomplete, { options: procedures, value: value, onChange: (_, newValue) => onChange(newValue), getOptionLabel: (option) => option.FullName, groupBy: (option) => option.SchemaName, disabled: disabled, isOptionEqualToValue: (option, val) => option.FullName === val.FullName, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Select Stored Procedure", variant: "outlined", fullWidth: true, slotProps: {
+    return (React__default.createElement(Autocomplete$1, { options: procedures, value: value, onChange: (_, newValue) => onChange(newValue), getOptionLabel: (option) => option.FullName, groupBy: (option) => option.SchemaName, disabled: disabled, isOptionEqualToValue: (option, val) => option.FullName === val.FullName, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Select Stored Procedure", variant: "outlined", fullWidth: true, slotProps: {
                 input: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 20 })) : (params.InputProps.endAdornment))) }),
             } }))), renderOption: (props, option) => (React__default.createElement("li", Object.assign({}, props, { key: option.FullName }),
             option.SchemaName,
@@ -10784,7 +11027,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,
@@ -11454,7 +11697,7 @@ const SaveUpdateDeleteViewModalV2 = ({ open, mode, handleClose, view, }) => {
             React__default.createElement("form", { onSubmit: handleSubmit(onSubmit) },
                 React__default.createElement(MesfModal.Content, { dividers: true, style: { padding: "15px 30px" } },
                     React__default.createElement(Grid2, { container: true, spacing: 1 },
-                        React__default.createElement(Grid2, { size: 12 }, mode === "create" && views.length > 0 && viewSelected ? (React__default.createElement(Autocomplete, { size: "small", id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: (option) => {
+                        React__default.createElement(Grid2, { size: 12 }, mode === "create" && views.length > 0 && viewSelected ? (React__default.createElement(Autocomplete$1, { size: "small", id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: (option) => {
                                 if (typeof option === "string") {
                                     return option;
                                 }
@@ -11585,21 +11828,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();
         }
     }
@@ -11635,11 +11878,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,
@@ -11648,7 +11891,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 });
@@ -11755,7 +11998,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");
                                     }
@@ -11778,7 +12021,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");
                                     }
@@ -11884,7 +12127,7 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                         backgroundColor: "white",
                         width: "100%",
                     } },
-                    React__default.createElement(Autocomplete, { size: "small", id: "view-selector", options: views, getOptionLabel: (option) => option.ViewName, value: viewSelected, isOptionEqualToValue: (option, value) => option.ViewId === (value === null || value === void 0 ? void 0 : value.ViewId), onChange: handleViewChange, noOptionsText: "No views available", renderOption: (props, option) => (React__default.createElement(Box, Object.assign({}, props, { component: "li", style: {
+                    React__default.createElement(Autocomplete$1, { size: "small", id: "view-selector", options: views, getOptionLabel: (option) => option.ViewName, value: viewSelected, isOptionEqualToValue: (option, value) => option.ViewId === (value === null || value === void 0 ? void 0 : value.ViewId), onChange: handleViewChange, noOptionsText: "No views available", renderOption: (props, option) => (React__default.createElement(Box, Object.assign({}, props, { component: "li", style: {
                                 display: "flex",
                                 justifyContent: "space-between",
                                 width: "100%",
@@ -12806,7 +13049,7 @@ const BitSelectorModal = ({ open, handleClose, viewTags, onAddBits, existingBitT
             React__default.createElement(Grid2, { container: true, spacing: 2 },
                 React__default.createElement(Grid2, { size: 12 },
                     React__default.createElement(Typography$1, { variant: "subtitle2", sx: { mb: 1 } }, "Select Source Tag"),
-                    React__default.createElement(Autocomplete, { size: "small", id: "source-tag-selector", options: availableTags, getOptionLabel: (option) => option.Alias || option.TagName, value: selectedTag, onChange: handleTagChange, noOptionsText: "No tags available in current view", renderOption: (props, option) => (React__default.createElement(Box, Object.assign({}, props, { component: "li" }),
+                    React__default.createElement(Autocomplete$1, { size: "small", id: "source-tag-selector", options: availableTags, getOptionLabel: (option) => option.Alias || option.TagName, value: selectedTag, onChange: handleTagChange, noOptionsText: "No tags available in current view", renderOption: (props, option) => (React__default.createElement(Box, Object.assign({}, props, { component: "li" }),
                             React__default.createElement(Box, { sx: {
                                     display: "flex",
                                     justifyContent: "space-between",
@@ -12916,7 +13159,7 @@ const LoadViewModalV2 = ({ open, handleClose }) => {
                                 React__default.createElement("input", { type: "checkbox", checked: allViewsChecked, onChange: handleAllViewsCheckbox }),
                                 React__default.createElement(Typography$1, null, "All Views")))),
                     React__default.createElement(Grid2, { size: 12 },
-                        React__default.createElement(Autocomplete, { size: "small", id: "list-of-views", noOptionsText: allViewsChecked
+                        React__default.createElement(Autocomplete$1, { size: "small", id: "list-of-views", noOptionsText: allViewsChecked
                                 ? "No views detected, please create a new view"
                                 : "No public views detected, please create a new view", options: displayedViews, getOptionLabel: (option) => option.ViewName, onChange: (ev, val) => setOptionSelected(val), defaultValue: optionSelected || viewSelected, style: { width: "100%" }, renderOption: (props, option) => (React__default.createElement(Box, Object.assign({}, props, { component: "li" }),
                                 React__default.createElement(Box, { sx: {
@@ -15569,7 +15812,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 }))),
@@ -15667,7 +15910,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: {
@@ -15693,7 +15936,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,
@@ -15747,7 +15990,7 @@ const useGridDefinitions$1 = ({ OnEdit, OnSend }) => {
     };
 };
 
-const moment$e = getMomentTz();
+const moment$c = getMomentTz();
 const getEntries$1 = (_a) => __awaiter(void 0, [_a], void 0, function* ({ shiftId, assetId, signal, }) {
     const apiService = new MESApiService();
     const parameters = [
@@ -15760,9 +16003,9 @@ const getEntries$1 = (_a) => __awaiter(void 0, [_a], void 0, function* ({ shiftI
     if (resp.ok) {
         let rows = get(resp, "data.tables[0].rows", []);
         rows = rows.map((entry) => (Object.assign(Object.assign({}, entry), { CreateTimestamp: entry.CreateTimestamp
-                ? moment$e.utc(entry["CreateTimestamp"]).toDate()
+                ? moment$c.utc(entry["CreateTimestamp"]).toDate()
                 : null, UpdateTimestamp: entry.UpdateTimestamp
-                ? moment$e.utc(entry["UpdateTimestamp"]).toDate()
+                ? moment$c.utc(entry["UpdateTimestamp"]).toDate()
                 : null })));
         return rows;
     }
@@ -15856,7 +16099,7 @@ const getEntryAttachments$1 = (params, signal) => __awaiter(void 0, void 0, void
     if (resp.ok) {
         let rows = get(resp, "data.tables[0].rows", []);
         rows = rows.map((attachment) => (Object.assign(Object.assign({}, attachment), { CreationTime: attachment.CreationTime
-                ? moment$e.utc(attachment.CreationTime).toDate()
+                ? moment$c.utc(attachment.CreationTime).toDate()
                 : new Date() })));
         return rows;
     }
@@ -15877,7 +16120,7 @@ const upsertEntryAttachment$1 = (_a) => __awaiter(void 0, [_a], void 0, function
         const attachment = get(resp, "data.tables[0].rows[0]", null);
         if (attachment) {
             return Object.assign(Object.assign({}, attachment), { CreationTime: attachment.CreationTime
-                    ? moment$e.utc(attachment.CreationTime).toDate()
+                    ? moment$c.utc(attachment.CreationTime).toDate()
                     : new Date() });
         }
         return null;
@@ -16173,7 +16416,7 @@ const AssetsFilter = ({ label = "Asset", value, onChange, filterAreaAssets = fal
     ];
     const selectedOption = options.find((option) => option.value === (value || null)) || options[0];
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Autocomplete, { size: "small", options: filterAreaAssets ? options.filter((o) => o.isAreaAsset) : options, value: selectedOption, onChange: (event, newValue) => {
+        React__default.createElement(Autocomplete$1, { size: "small", options: filterAreaAssets ? options.filter((o) => o.isAreaAsset) : options, value: selectedOption, onChange: (event, newValue) => {
                 var _a;
                 if (newValue) {
                     onChange((_a = newValue.value) !== null && _a !== void 0 ? _a : null);
@@ -16182,124 +16425,6 @@ const AssetsFilter = ({ label = "Asset", value, onChange, filterAreaAssets = fal
         React__default.createElement(ErrorModal, { error: error, onHide: () => setError("") })));
 };
 
-const moment$d = getMomentTz();
-const getShifts = (params, signal) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a;
-    const apiService = new MESApiService();
-    const parameters = [
-        {
-            name: "ShiftId",
-            value: (_a = params.shiftId) !== null && _a !== void 0 ? _a : null,
-        },
-    ];
-    const resp = yield apiService.callV2(`[MES].[GetShiftByParameters]`, parameters, signal);
-    if (resp.ok) {
-        let rows = get(resp, "data.tables[0].rows", []);
-        rows = rows.map((row) => {
-            (row.CurrentProductionDate = moment$d
-                .utc(row["CurrentProductionDate"])
-                .toDate()),
-                (row.CurrentStart = moment$d.utc(row["CurrentStart"]).toDate()),
-                (row.CurrentEnd = moment$d.utc(row["CurrentEnd"]).toDate()),
-                (row.PreviousProductionDate = moment$d
-                    .utc(row["PreviousProductionDate"])
-                    .toDate()),
-                (row.PreviousStart = moment$d.utc(row["PreviousStart"]).toDate()),
-                (row.PreviousEnd = moment$d.utc(row["PreviousEnd"]).toDate()),
-                (row.NextProductionDate = moment$d
-                    .utc(row["NextProductionDate"])
-                    .toDate()),
-                (row.NextStart = moment$d.utc(row["NextStart"]).toDate()),
-                (row.NextEnd = moment$d.utc(row["NextEnd"]).toDate()),
-                (row.LastProductionDate = moment$d
-                    .utc(row["LastProductionDate"])
-                    .toDate()),
-                (row.LastStart = moment$d.utc(row["LastStart"]).toDate()),
-                (row.LastEnd = moment$d.utc(row["LastEnd"]).toDate());
-            return row;
-        });
-        return rows;
-    }
-    else {
-        throw new Error(resp.message || "Error fetching shifts");
-    }
-});
-const getShiftsAroundCurrent = (_a) => __awaiter(void 0, [_a], void 0, function* ({ currentShiftId, shiftsRange, }) {
-    const apiService = new MESApiService();
-    const parameters = [
-        { name: "CurrentShiftId", value: currentShiftId || null },
-    ];
-    if (shiftsRange) {
-        parameters.push({ name: "ShiftsRange", value: shiftsRange });
-    }
-    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$d.utc(row.Start).toDate(), End: moment$d.utc(row.End).toDate() })));
-        return rows;
-    }
-    else {
-        throw new Error(resp.message || "Error fetching shifts");
-    }
-});
-
-const moment$c = getMomentTz();
-const useShiftsAroundCurrent = ({ currentShiftId, shiftsRange, }) => {
-    return useQuery({
-        queryKey: ["shiftsAroundCurrent", currentShiftId, shiftsRange],
-        queryFn: ({ signal }) => getShiftsAroundCurrent({ currentShiftId, shiftsRange }),
-    });
-};
-const ShiftAutocomplete = ({ currentShiftId, value, onShiftSelected, disabled, shiftsRange, }) => {
-    const [error, setError] = useState("");
-    const { data: rows, isLoading, error: e, isError, } = useShiftsAroundCurrent({
-        currentShiftId,
-        shiftsRange: shiftsRange,
-    });
-    const selectedShift = (rows === null || rows === void 0 ? void 0 : rows.find((type) => type.ShiftId === value)) || null;
-    useEffect(() => {
-        if (e && isError) {
-            setError(e.message);
-        }
-    }, [e, isError]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid2, { container: true },
-            React__default.createElement(Grid2, { size: { xs: 12 } },
-                React__default.createElement(Autocomplete$1, { loading: isLoading, options: rows || [], getOptionLabel: (option) => {
-                        return `${moment$c
-                            .utc(option.ProductionDate)
-                            .format("MM/DD/YYYY")} - ${option.Shift} - ${option.Crew}`;
-                    }, value: selectedShift, onChange: (event, newValue) => {
-                        if (newValue) {
-                            onShiftSelected(newValue);
-                        }
-                    }, disabled: disabled, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: "Shift", variant: "outlined", size: "small", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 20 })) : null)) }) }))) }))),
-        React__default.createElement(ErrorModal, { error: error, onHide: () => setError("") })));
-};
-
-const useShifts = (shiftId) => {
-    return useQuery({
-        queryKey: ["shifts", shiftId],
-        queryFn: ({ signal }) => getShifts({ shiftId }, signal),
-    });
-};
-const ShiftSelector = ({ label = "Shift - Crew", value, onChange = () => { }, fieldError, disabled = false, }) => {
-    const [error, setError] = useState("");
-    const { data: shifts, isLoading, isError, error: e } = useShifts(value);
-    const selectedShift = (shifts === null || shifts === void 0 ? void 0 : shifts.find((s) => s.CurrentShiftId === value)) || null;
-    useEffect(() => {
-        if (isError) {
-            setError(e.message);
-        }
-    }, [isError, e]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Autocomplete$1, { id: "clear-on-escape", clearOnEscape: true, options: shifts || [], getOptionLabel: (option) => `${option.CurrentShift} - ${option.CurrentCrew}`, disabled: disabled, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: label, variant: "outlined", fullWidth: true, size: "small", error: !!fieldError, helperText: fieldError === null || fieldError === void 0 ? void 0 : fieldError.message, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 20 })) : (React__default.createElement(React__default.Fragment, null, params.InputProps.endAdornment)))) }) }))), value: selectedShift, onChange: (event, newValue) => {
-                var _a;
-                onChange((_a = newValue === null || newValue === void 0 ? void 0 : newValue.CurrentShiftId) !== null && _a !== void 0 ? _a : null);
-            } }),
-        React__default.createElement(ErrorModal, { error: error, onHide: () => setError(""), title: "Error loading shifts" })));
-};
-
 const useEntrySubmission$1 = ({ onSuccess, onError, isNewEntry = false, onHide = () => { }, } = {}) => {
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
     const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
@@ -17300,7 +17425,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",
@@ -17911,7 +18036,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",
@@ -18533,7 +18658,7 @@ const SectionSelector = ({ value, onChange, topSectionsCount = 5, disabled = fal
             gap: 1,
             flexWrap: "wrap",
         } },
-        React__default.createElement(Autocomplete, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: value, onChange: (_, newValue) => onChange(newValue), inputValue: inputValue, onInputChange: (_, newInputValue) => setInputValue(newInputValue), options: options, loading: loading, disabled: disabled, getOptionLabel: (option) => option.SectionName, isOptionEqualToValue: (option, value) => option.SectionId === value.SectionId, sx: { minWidth: 120, maxWidth: 150 }, renderOption: (props, option) => (React__default.createElement(Box, Object.assign({ component: "li" }, props, { key: option.SectionId, sx: { display: "flex", justifyContent: "space-between" } }),
+        React__default.createElement(Autocomplete$1, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: value, onChange: (_, newValue) => onChange(newValue), inputValue: inputValue, onInputChange: (_, newInputValue) => setInputValue(newInputValue), options: options, loading: loading, disabled: disabled, getOptionLabel: (option) => option.SectionName, isOptionEqualToValue: (option, value) => option.SectionId === value.SectionId, sx: { minWidth: 120, maxWidth: 150 }, renderOption: (props, option) => (React__default.createElement(Box, Object.assign({ component: "li" }, props, { key: option.SectionId, sx: { display: "flex", justifyContent: "space-between" } }),
                 React__default.createElement(Typography$1, { fontWeight: 500 }, option.SectionName))), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: label, placeholder: "####", size: "small", slotProps: {
                     input: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null,
                             loading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 16 })) : null,
@@ -18579,7 +18704,7 @@ const SectionMultiSelect = ({ value, onChange, topSectionsCount = 5, disabled =
             gap: 1,
             flexWrap: "wrap",
         } },
-        React__default.createElement(Autocomplete, { multiple: true, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: value, onChange: (_, newValue) => onChange(newValue), inputValue: inputValue, onInputChange: (_, newInputValue) => setInputValue(newInputValue), options: options, loading: loading, disabled: disabled, getOptionLabel: (option) => option.SectionName, isOptionEqualToValue: (option, val) => option.SectionId === val.SectionId, limitTags: 2, size: "small", sx: { minWidth: 200, flex: 1 }, renderOption: (props, option) => (React__default.createElement(Box, Object.assign({ component: "li" }, props, { key: option.SectionId, sx: { display: "flex", justifyContent: "space-between" } }),
+        React__default.createElement(Autocomplete$1, { multiple: true, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: value, onChange: (_, newValue) => onChange(newValue), inputValue: inputValue, onInputChange: (_, newInputValue) => setInputValue(newInputValue), options: options, loading: loading, disabled: disabled, getOptionLabel: (option) => option.SectionName, isOptionEqualToValue: (option, val) => option.SectionId === val.SectionId, limitTags: 2, size: "small", sx: { minWidth: 200, flex: 1 }, renderOption: (props, option) => (React__default.createElement(Box, Object.assign({ component: "li" }, props, { key: option.SectionId, sx: { display: "flex", justifyContent: "space-between" } }),
                 React__default.createElement(Typography$1, { fontWeight: 500 }, option.SectionName))), renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, { label: label, placeholder: value.length === 0 ? "All sections" : "", size: "small", slotProps: {
                     input: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null,
                             loading ? (React__default.createElement(CircularProgress, { color: "inherit", size: 16 })) : null,
@@ -19643,7 +19768,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",
@@ -20222,7 +20347,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",
@@ -20461,7 +20586,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"),
@@ -20474,5 +20608,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES$1 as ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, ExcelIcon, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HelmetDexteel, IntegerFormatter, LogbookSettingsInitialState, LogbookSettingsProvider, Login, Logout, LongFilterPanel, MESApiService, MESFLogbookEntry$1 as MESFLogbookEntry, MESFLogbookReport$1 as MESFLogbookReport, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NavbarMenuBar, NumberFormatter, RemoveAssetDialog, SPExecutorPage, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getEntries$1 as getEntries, getError, getMomentTz, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, logbookNavbar, logbookRoutesMESF, renewToken, routeLogbookEntry$1 as routeLogbookEntry, routeLogbookReport, useSearchAssets as searchAssets, sectionLogbookNavbar, sectionLogbookRoutesMESF, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useEntries$1 as useEntries, useFrontendVersionCheck, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES$1 as ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, ExcelIcon, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HelmetDexteel, IntegerFormatter, LogbookSettingsInitialState, LogbookSettingsProvider, Login, Logout, LongFilterPanel, MESApiService, MESFLogbookEntry$1 as MESFLogbookEntry, MESFLogbookReport$1 as MESFLogbookReport, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NavbarMenuBar, NumberFormatter, RemoveAssetDialog, SPExecutorPage, ShiftAutocomplete, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, ShiftSelector, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getEntries$1 as getEntries, getError, getMomentTz, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, logbookNavbar, logbookRoutesMESF, renewToken, routeLogbookEntry$1 as routeLogbookEntry, routeLogbookReport, useSearchAssets as searchAssets, sectionLogbookNavbar, sectionLogbookRoutesMESF, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useEntries$1 as useEntries, useFrontendVersionCheck, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useShifts, useShiftsAroundCurrent, useShiftsByRange, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map