@dexteel/mesf-core 7.17.2 → 7.18.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';
@@ -5568,7 +5568,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 +5580,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 +5608,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,6 +5627,7 @@ 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
@@ -5635,12 +5640,13 @@ const useShiftNavigatorManager = () => {
             }
         }
     });
-    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
@@ -5657,10 +5663,11 @@ 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
@@ -5723,7 +5730,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("");
@@ -5775,12 +5782,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 +5797,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) => {
                     if (date) {
-                        getShiftDataFromAPI(date.toDate(), 0).then(() => { });
+                        getShiftDataFromAPI(date.toDate(), 0, assetId).then(() => { });
                     }
                 }, slots: {
                     textField: TextField,
@@ -5817,13 +5824,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;
@@ -6142,6 +6149,170 @@ const ShiftPeriodNavigatorControl = ({ value, actualPeriod, onChange, showShiftA
                 React__default.createElement(SkipNextIcon, null)))));
 };
 
+const moment$e = 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$e
+                .utc(row["CurrentProductionDate"])
+                .toDate()),
+                (row.CurrentStart = moment$e.utc(row["CurrentStart"]).toDate()),
+                (row.CurrentEnd = moment$e.utc(row["CurrentEnd"]).toDate()),
+                (row.PreviousProductionDate = moment$e
+                    .utc(row["PreviousProductionDate"])
+                    .toDate()),
+                (row.PreviousStart = moment$e.utc(row["PreviousStart"]).toDate()),
+                (row.PreviousEnd = moment$e.utc(row["PreviousEnd"]).toDate()),
+                (row.NextProductionDate = moment$e
+                    .utc(row["NextProductionDate"])
+                    .toDate()),
+                (row.NextStart = moment$e.utc(row["NextStart"]).toDate()),
+                (row.NextEnd = moment$e.utc(row["NextEnd"]).toDate()),
+                (row.LastProductionDate = moment$e
+                    .utc(row["LastProductionDate"])
+                    .toDate()),
+                (row.LastStart = moment$e.utc(row["LastStart"]).toDate()),
+                (row.LastEnd = moment$e.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$e.utc(row.Start).toDate(), End: moment$e.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$e.utc(row.Start).toDate(), End: moment$e.utc(row.End).toDate() })));
+        return rows;
+    }
+    else {
+        throw new Error(resp.message || "Error fetching shifts");
+    }
+});
+
+const moment$d = 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$d
+                            .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
@@ -7739,14 +7910,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" }),
@@ -8233,259 +8404,249 @@ 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 INITIAL_VALUES$1 = {
-    PatternStart: new Date(),
-    ShiftCodes: "",
-    Crews: "",
-    User: "",
-    PatternDays: 5,
-    CrewRotation: "",
-    Comments: "",
-    CanEdit: false,
-    ShiftsPerDay: 1,
-    NumberOfCrews: 1,
+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 CreateShift = ({ shiftSelected, show, onHide, suffixTitle, }) => {
-    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$1,
-    });
-    // Progress bar
-    const calculatePercentage = () => ((crewRotation === null || crewRotation === void 0 ? void 0 : crewRotation.length) / maxCrewRotationLength) * 100;
-    const createShift = useMutation({
-        mutationFn: upsertShiftParameters,
-        onSuccess: () => {
-            setOpen(true);
-            onHide(true);
+const useTableData$5 = ({ setOpenModalEditSetting, setOpenModalDeleteSetting, showContextMenu, setSettingSelected, }) => {
+    const columnDefs = [
+        {
+            field: "SettingName",
+            headerName: "Name",
+            minWidth: 180,
+            flex: 4,
         },
-        onError: (error) => {
-            setError(error.message);
+        {
+            field: "Value",
+            headerName: "Value",
+            minWidth: 180,
+            flex: 2,
         },
-        onSettled: () => {
-            setIsSubmitLoading(false);
+        {
+            field: "Description",
+            headerName: "Description",
+            minWidth: 150,
+            flex: 4,
         },
-    });
-    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);
+        {
+            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 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 } = useForm({
+        defaultValues: settingSelected ? settingSelected : INITIAL_VALUES$1,
+    });
+    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);
     };
-    // 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 +8656,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 +8727,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 +8742,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 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 [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 [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 +8828,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$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" }),
+        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$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("") }),
+        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$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, { 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 +9532,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 +9566,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$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: "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 +9636,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(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);
+                                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,
         },
-    });
-    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 +9739,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 searchSettings = () => {
-    return useQuery({
-        queryKey: ["settings"],
-        queryFn: ({ signal }) => getUTLSettings(signal),
-    });
+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 SettingsPage = () => {
+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(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 +10452,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;
                                             }
@@ -10565,7 +10753,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,
@@ -11454,7 +11642,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;
                                 }
@@ -11884,7 +12072,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 +12994,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 +13104,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: {
@@ -15747,7 +15935,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 +15948,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 +16044,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 +16065,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 +16361,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 +16370,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);
@@ -18533,7 +18603,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 +18649,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,
@@ -20474,5 +20544,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