@iotready/nextjs-components-library 1.0.0-preview38 → 1.0.0-preview39

package/components/accounts/AccountMenu.d.ts

@@ -1,9 +1,10 @@
 import { UserType } from '../../types/user';
 import { Theme } from "@emotion/react";
-export default function UserMenuAccount({ userInfo, handleClick, handleSignOut, accountRoute, theme }: {
+export default function UserMenuAccount({ userInfo, handleClick, handleSignOut, accountRoute, theme, t }: {
     userInfo: UserType;
     handleClick: () => void;
     handleSignOut: () => Promise<void>;
     accountRoute?: string;
     theme: Theme;
+    t: (key: string, params?: any) => string;
 }): import("react/jsx-runtime").JSX.Element;

package/components/accounts/AccountMenu.js

@@ -5,7 +5,7 @@ import { Box, Typography, IconButton, Menu, MenuItem, Tooltip, Avatar, ListItem,
 import { Logout, Person } from "@mui/icons-material";
 import { useRouter } from 'next/navigation';
 import { ThemeProvider } from '@mui/material/styles';
-export default function UserMenuAccount({ userInfo, handleClick, handleSignOut, accountRoute = '/account', theme }) {
+export default function UserMenuAccount({ userInfo, handleClick, handleSignOut, accountRoute = '/account', theme, t }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const router = useRouter();
     const handleAccountClick = (event) => {
@@ -33,5 +33,5 @@ export default function UserMenuAccount({ userInfo, handleClick, handleSignOut,
                                 }
                             },
                         }
-                    }, children: [_jsxs(ListItem, { sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(ListItemIcon, { sx: { minWidth: 46 }, children: _jsx(Avatar, {}) }), _jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", children: userInfo.name?.replace('/', ' ') }), _jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 'normal' }, children: userInfo.email })] })] }), _jsxs(MenuItem, { onClick: () => { router.push(accountRoute); handleClick(); handleClose(); }, sx: { py: 1 }, children: [_jsx(ListItemIcon, { sx: { mr: 1 }, children: _jsx(Person, { fontSize: "small" }) }), " Manage account"] }), _jsxs(MenuItem, { onClick: async () => await handleSignOut(), sx: { py: 1 }, children: [_jsx(ListItemIcon, { sx: { mr: 1 }, children: _jsx(Logout, { fontSize: "small" }) }), " Sign Out"] })] }), _jsx(Tooltip, { title: "Open menu", children: _jsx(IconButton, { onClick: handleAccountClick, children: _jsx(Avatar, { sx: { bgcolor: 'secondary.main', color: 'secondary.contrastText' }, alt: userInfo.name !== " " ? userInfo.name : userInfo.email, src: userInfo.picture, children: userInfo.picture ? '' : userInfo.name !== " " ? userInfo.name?.charAt(0).toUpperCase() : userInfo.email?.charAt(0).toUpperCase() }) }) })] }) }));
+                    }, children: [_jsxs(ListItem, { sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(ListItemIcon, { sx: { minWidth: 46 }, children: _jsx(Avatar, {}) }), _jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", children: userInfo.name?.replace('/', ' ') }), _jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 'normal' }, children: userInfo.email })] })] }), _jsxs(MenuItem, { onClick: () => { router.push(accountRoute); handleClick(); handleClose(); }, sx: { py: 1 }, children: [_jsx(ListItemIcon, { sx: { mr: 1 }, children: _jsx(Person, { fontSize: "small" }) }), " ", t('library.accountMenu.manageAccount')] }), _jsxs(MenuItem, { onClick: async () => await handleSignOut(), sx: { py: 1 }, children: [_jsx(ListItemIcon, { sx: { mr: 1 }, children: _jsx(Logout, { fontSize: "small" }) }), " ", t('library.accountMenu.signOut')] })] }), _jsx(Tooltip, { title: t('library.accountMenu.openMenu'), children: _jsx(IconButton, { onClick: handleAccountClick, children: _jsx(Avatar, { sx: { bgcolor: 'secondary.main', color: 'secondary.contrastText' }, alt: userInfo.name !== " " ? userInfo.name : userInfo.email, src: userInfo.picture, children: userInfo.picture ? '' : userInfo.name !== " " ? userInfo.name?.charAt(0).toUpperCase() : userInfo.email?.charAt(0).toUpperCase() }) }) })] }) }));
 }

package/components/accounts/AccountProfile.d.ts

@@ -1,6 +1,6 @@
 import { UserType } from '../../types/user';
 import { Theme } from "@emotion/react";
-declare const AccountProfile: ({ userAccount, handleSignOut, handleUpdateUser, handleUpdatePassword, handleDeleteUser, container, containerProps, theme, afterUpdateCallback, confirmMui }: {
+declare const AccountProfile: ({ userAccount, handleSignOut, handleUpdateUser, handleUpdatePassword, handleDeleteUser, container, containerProps, theme, afterUpdateCallback, confirmMui, t }: {
     userAccount: UserType;
     handleSignOut: () => Promise<void>;
     handleUpdateUser: (id: string, user: Partial<UserType>) => Promise<void>;
@@ -11,5 +11,6 @@ declare const AccountProfile: ({ userAccount, handleSignOut, handleUpdateUser, h
     theme: Theme;
     afterUpdateCallback: (user: Partial<UserType>) => void;
     confirmMui?: (options?: any) => Promise<void>;
+    t: (key: string, params?: any) => string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default AccountProfile;

package/components/accounts/AccountProfile.js

@@ -6,7 +6,7 @@ import { LoadingButton } from '@mui/lab';
 import { VisibilityOff, Visibility, Delete } from '@mui/icons-material';
 import Grid from '@mui/material/Grid2';
 import { ThemeProvider } from '@mui/material/styles';
-const AccountProfile = ({ userAccount, handleSignOut, handleUpdateUser, handleUpdatePassword, handleDeleteUser, container = 'Box', containerProps = {}, theme, afterUpdateCallback = () => { }, confirmMui }) => {
+const AccountProfile = ({ userAccount, handleSignOut, handleUpdateUser, handleUpdatePassword, handleDeleteUser, container = 'Box', containerProps = {}, theme, afterUpdateCallback = () => { }, confirmMui, t }) => {
     const [userInfo, setUserInfo] = useState(userAccount);
     const [loadingUdateButton, setLoadingUpdateButton] = useState(false);
     const [loadingSaveButton, setLoadingSaveButton] = useState(false);
@@ -39,20 +39,20 @@ const AccountProfile = ({ userAccount, handleSignOut, handleUpdateUser, handleUp
     };
     const savePassword = async () => {
         if (password === "") {
-            setError('Password is required');
+            setError(t('library.accountProfile.passwordRequired'));
             return;
         }
         if (confirmPassword === "") {
-            setError('Confirm password is required');
+            setError(t('library.accountProfile.confirmPasswordRequired'));
             return;
         }
         if (password !== confirmPassword) {
-            setError('Password and Confirmation password must be the same');
+            setError(t('library.accountProfile.passwordsMustMatch'));
             return;
         }
         const passwordRegex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~ ]).{8,}$/;
         if (!passwordRegex.test(password)) {
-            setError(`Password must be longer than 8 characters and must contain 1 uppercase letter (A-Z), 1 lowercase letter (a-z), 1 digit (0-9) e 1 special symbol (!"#$%&'()*+,-./:;<=>?@[\]^_{|}~ ).`);
+            setError(t('library.accountProfile.passwordRequirements'));
             return;
         }
         setLoadingSaveButton(true);
@@ -61,7 +61,7 @@ const AccountProfile = ({ userAccount, handleSignOut, handleUpdateUser, handleUp
                 await handleUpdatePassword(userInfo.id, password);
                 setError("");
                 setShowEditPassword(false);
-                alert('Password updated');
+                alert(t('library.accountProfile.passwordUpdated'));
             }
             catch (err) {
                 console.log(err);
@@ -78,7 +78,7 @@ const AccountProfile = ({ userAccount, handleSignOut, handleUpdateUser, handleUp
                 if (afterUpdateCallback) {
                     afterUpdateCallback(userInfo);
                 }
-                alert('User updated');
+                alert(t('library.accountProfile.userUpdated'));
             }
             catch (err) {
                 console.log(err);
@@ -90,10 +90,10 @@ const AccountProfile = ({ userAccount, handleSignOut, handleUpdateUser, handleUp
         if (userInfo) {
             try {
                 if (confirmMui) {
-                    await confirmMui({ description: "Are you sure you want to delete the account?", confirmationText: "Yes, remove", confirmationButtonProps: { variant: 'contained', color: 'error' } });
+                    await confirmMui({ description: t('library.accountProfile.confirmDeleteAccount'), confirmationText: t('library.accountProfile.yesRemove'), confirmationButtonProps: { variant: 'contained', color: 'error' } });
                 }
                 else {
-                    confirm("Are you sure you want to delete the account?");
+                    confirm(t('library.accountProfile.confirmDeleteAccount'));
                 }
                 setLoadingDeleteButton(true);
                 await handleDeleteUser(userInfo.id);
@@ -137,17 +137,17 @@ const AccountProfile = ({ userAccount, handleSignOut, handleUpdateUser, handleUp
     }
   }*/
     const renderAccountProfile = (_jsxs(Box, { component: "div", children: [!userInfo.name ?
-                _jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: "Please complete the informations below" })
-                : '', _jsx(Grid, { container: true, spacing: 2, children: _jsxs(Grid, { size: { xs: 12, md: 9, lg: 6 }, children: [_jsxs(Box, { component: "div", children: [_jsx(Typography, { variant: "h6", children: "Profile name" }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(TextField, { fullWidth: true, label: "First name", name: "firstname", value: userInfo.firstname, onChange: handleChange, error: !userInfo.firstname || userInfo.firstname === "" ? true : false, helperText: !userInfo.firstname || userInfo.firstname === "" ? "Enter your first name" : '', size: "small" }) }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(TextField, { fullWidth: true, label: "Last name", name: "lastname", value: userInfo.lastname, onChange: handleChange, error: !userInfo.lastname || userInfo.lastname === "" ? true : false, helperText: !userInfo.lastname || userInfo.lastname === "" ? "Enter your last name" : '', size: "small" }) }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(LoadingButton, { variant: "contained", color: "primary", loading: loadingUdateButton, onClick: () => handleUpdate(), disabled: !userInfo.firstname || userInfo.firstname === "" || !userInfo.lastname || userInfo.lastname === "", children: "Update" }) })] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsx(Typography, { variant: "h6", children: "Security" }), !showEditPassword ? _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(Button, { variant: 'outlined', onClick: () => setShowEditPassword(!showEditPassword), children: "Set or edit your password" }) }) : '', showEditPassword ?
-                                    _jsxs(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: [_jsx(TextField, { required: true, fullWidth: true, name: "password", label: "New Password", type: showNewPassword ? 'text' : 'password', id: "password", size: 'small', autoComplete: "current-password", onChange: (e) => setPassword(e.target.value), value: password, slotProps: {
+                _jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('library.accountProfile.completeInfo') })
+                : '', _jsx(Grid, { container: true, spacing: 2, children: _jsxs(Grid, { size: { xs: 12, md: 9, lg: 6 }, children: [_jsxs(Box, { component: "div", children: [_jsx(Typography, { variant: "h6", children: t('library.accountProfile.profileName') }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(TextField, { fullWidth: true, label: t('library.accountProfile.firstName'), name: "firstname", value: userInfo.firstname, onChange: handleChange, error: !userInfo.firstname || userInfo.firstname === "" ? true : false, helperText: !userInfo.firstname || userInfo.firstname === "" ? t('library.accountProfile.enterFirstName') : '', size: "small" }) }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(TextField, { fullWidth: true, label: t('library.accountProfile.lastName'), name: "lastname", value: userInfo.lastname, onChange: handleChange, error: !userInfo.lastname || userInfo.lastname === "" ? true : false, helperText: !userInfo.lastname || userInfo.lastname === "" ? t('library.accountProfile.enterLastName') : '', size: "small" }) }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(LoadingButton, { variant: "contained", color: "primary", loading: loadingUdateButton, onClick: () => handleUpdate(), disabled: !userInfo.firstname || userInfo.firstname === "" || !userInfo.lastname || userInfo.lastname === "", children: t('library.accountProfile.update') }) })] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsx(Typography, { variant: "h6", children: t('library.accountProfile.security') }), !showEditPassword ? _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(Button, { variant: 'outlined', onClick: () => setShowEditPassword(!showEditPassword), children: t('library.accountProfile.setOrEditPassword') }) }) : '', showEditPassword ?
+                                    _jsxs(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: [_jsx(TextField, { required: true, fullWidth: true, name: "password", label: t('library.accountProfile.newPassword'), type: showNewPassword ? 'text' : 'password', id: "password", size: 'small', autoComplete: "current-password", onChange: (e) => setPassword(e.target.value), value: password, slotProps: {
                                                     input: {
                                                         endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { "aria-label": "toggle password visibility", onClick: handleClickShowPassword, onMouseDown: handleMouseDownPassword, edge: "end", children: showNewPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) }),
                                                     }
-                                                } }), _jsx(TextField, { sx: { mt: 2 }, required: true, fullWidth: true, label: "Confirm Password", type: showConfirmPassword ? 'text' : 'password', id: "confirm-password", size: 'small', autoComplete: "confirm-password", onChange: (e) => setConfirmPassword(e.target.value), value: confirmPassword, slotProps: {
+                                                } }), _jsx(TextField, { sx: { mt: 2 }, required: true, fullWidth: true, label: t('library.accountProfile.confirmPassword'), type: showConfirmPassword ? 'text' : 'password', id: "confirm-password", size: 'small', autoComplete: "confirm-password", onChange: (e) => setConfirmPassword(e.target.value), value: confirmPassword, slotProps: {
                                                     input: {
                                                         endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { "aria-label": "toggle password visibility", onClick: handleClickShowConfirmPassword, onMouseDown: handleMouseDownConfirmPassword, edge: "end", children: showConfirmPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) }),
                                                     }
-                                                } }), error !== '' ? _jsx(Box, { component: 'div', sx: { mt: 1 }, children: _jsx(Typography, { variant: 'subtitle2', color: 'error', children: error }) }) : '', _jsxs(Box, { component: "div", sx: { mt: 3 }, children: [_jsx(Button, { variant: "contained", color: "inherit", onClick: () => setShowEditPassword(false), sx: { mr: 2 }, children: "Cancel" }), _jsx(LoadingButton, { loading: loadingSaveButton, type: "submit", variant: "contained", color: "primary", onClick: () => savePassword(), children: "Save" })] })] }) : ''] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsx(Typography, { variant: 'h6', children: "Delete account" }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(Alert, { severity: "error", sx: { mt: 2 }, action: _jsxs(LoadingButton, { variant: "contained", color: "error", loading: loadingDeleteButton, onClick: () => handleDelete(), size: 'small', children: [_jsx(Delete, { fontSize: "small", sx: { mr: 1 } }), " Delete"] }), children: "This action cannot be undone" }) })] })] }, 3) })] }));
+                                                } }), error !== '' ? _jsx(Box, { component: 'div', sx: { mt: 1 }, children: _jsx(Typography, { variant: 'subtitle2', color: 'error', children: error }) }) : '', _jsxs(Box, { component: "div", sx: { mt: 3 }, children: [_jsx(Button, { variant: "contained", color: "inherit", onClick: () => setShowEditPassword(false), sx: { mr: 2 }, children: t('library.accountProfile.cancel') }), _jsx(LoadingButton, { loading: loadingSaveButton, type: "submit", variant: "contained", color: "primary", onClick: () => savePassword(), children: t('library.accountProfile.save') })] })] }) : ''] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsx(Typography, { variant: 'h6', children: t('library.accountProfile.deleteAccount') }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(Alert, { severity: "error", sx: { mt: 2 }, action: _jsxs(LoadingButton, { variant: "contained", color: "error", loading: loadingDeleteButton, onClick: () => handleDelete(), size: 'small', children: [_jsx(Delete, { fontSize: "small", sx: { mr: 1 } }), " ", t('library.accountProfile.deleteAccount')] }), children: t('library.accountProfile.actionCannotBeUndone') }) })] })] }, 3) })] }));
     return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsx(Card, { ...containerProps, children: _jsx(CardContent, { children: renderAccountProfile }) })) : (_jsx(Box, { ...containerProps, children: renderAccountProfile })) });
 };
 export default AccountProfile;

package/components/charts/TrendChart.d.ts

@@ -10,7 +10,7 @@ type Measure = {
     unit: string;
     stepped: boolean;
 };
-declare const TrendChart: ({ filter, measures1, annotationsDataFn, measures2, enableDatePicker, handleGetInfluxData, handleGetDwSlotsCB, handleExportDataCB, theme, initialTimeStart, initialTimeEnd }: {
+declare const TrendChart: ({ filter, measures1, annotationsDataFn, measures2, enableDatePicker, handleGetInfluxData, handleGetDwSlotsCB, handleExportDataCB, theme, initialTimeStart, initialTimeEnd, t }: {
     filter: {
         field: string;
         value: string;
@@ -34,5 +34,6 @@ declare const TrendChart: ({ filter, measures1, annotationsDataFn, measures2, en
     theme: Theme;
     initialTimeStart?: number;
     initialTimeEnd?: number;
+    t: (key: string, params?: any) => string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TrendChart;

package/components/charts/TrendChart.js

@@ -330,7 +330,7 @@ function getCsvData(data, measures) {
         .join('\n');
 }
 // eslint-disable-next-line no-unused-vars
-const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDatePicker, handleGetInfluxData, handleGetDwSlotsCB, handleExportDataCB, theme, initialTimeStart, initialTimeEnd }) => {
+const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDatePicker, handleGetInfluxData, handleGetDwSlotsCB, handleExportDataCB, theme, initialTimeStart, initialTimeEnd, t }) => {
     const [chartJsLoaded, setChartJsLoaded] = useState(false);
     // Dichiarazione di annotationsData come funzione che ritorna una Promise<any>
     const [annotationsData, setAnnotationsData] = useState(null);
@@ -804,7 +804,7 @@ const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDat
                             ":hover": { backgroundColor: 'action.hover' },
                             ml: enableDatePicker ? 1 : 0,
                             p: 0.85
-                        }, onClick: () => shiftChart('timeEnd'), children: _jsx(KeyboardArrowRightIcon, {}) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [!enableExportData && measures && measures.length === 1 ? _jsx(Typography, { variant: 'body1', sx: { mr: 2 }, children: measures[0].description || measures[0].name }) : '', enableExportData && (_jsxs(_Fragment, { children: [_jsxs(LoadingButton, { sx: { minWidth: '40px !important', mr: 1, px: 1 }, loading: loadingButton, type: "submit", variant: "text", color: "primary", onClick: handleExportData, disabled: !dataMeasures || !dataMeasures.length, size: 'small', children: [_jsx(LoginIcon, { fontSize: 'small', style: { transform: "rotate(90deg)" } }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Export" })] }), _jsx(CSVLink
+                        }, onClick: () => shiftChart('timeEnd'), children: _jsx(KeyboardArrowRightIcon, {}) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [!enableExportData && measures && measures.length === 1 ? _jsx(Typography, { variant: 'body1', sx: { mr: 2 }, children: measures[0].description || measures[0].name }) : '', enableExportData && (_jsxs(_Fragment, { children: [_jsxs(LoadingButton, { sx: { minWidth: '40px !important', mr: 1, px: 1 }, loading: loadingButton, type: "submit", variant: "text", color: "primary", onClick: handleExportData, disabled: !dataMeasures || !dataMeasures.length, size: 'small', children: [_jsx(LoginIcon, { fontSize: 'small', style: { transform: "rotate(90deg)" } }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: t('library.trendChart.export') })] }), _jsx(CSVLink
                                     //@ts-ignore
                                     , { 
                                         //@ts-ignore
@@ -850,7 +850,7 @@ const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDat
                                     '& .MuiToggleButton-root': {
                                         color: 'text.primary', fontSize: '0.95rem', fontWeight: 'normal', paddingTop: '6px', paddingBottom: '6px'
                                     }
-                                }, disabled: chartLoading, children: [_jsx(ToggleButton, { value: "1D", sx: { px: 1 }, children: "1d" }), _jsx(ToggleButton, { value: "1W", sx: { px: 1 }, children: "1w" }), _jsx(ToggleButton, { value: "1M", sx: { px: 1 }, children: "1M" }), _jsx(ToggleButton, { value: "3M", sx: { px: 1 }, children: "3M" }), _jsx(ToggleButton, { value: "6M", sx: { px: 1 }, children: "6M" }), _jsx(ToggleButton, { value: "1Y", sx: { px: 1 }, children: "1Y" }), _jsx(ToggleButton, { value: "ALL", sx: { px: 1 }, children: "ALL" })] }), _jsx(MuiTooltip, { placement: "top", arrow: true, title: "Connect point values", children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: spanGapsOption, disabled: chartLoading, onChange: () => handleSpanGaps(!spanGapsOption), sx: { ml: 1 }, children: _jsx(TimelineIcon, {}) }) }) }), annotationsDataFn && annotationsData !== null && (_jsx(MuiTooltip, { placement: "top", arrow: true, title: "Show annotations", children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: annotationsEnabled, disabled: chartLoading, onChange: () => setAnnotationsEnabled(!annotationsEnabled), sx: { ml: 1 }, children: _jsx(EditNoteIcon, {}) }) }) }))] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { mt: 2, height: '100%' }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
+                                }, disabled: chartLoading, children: [_jsx(ToggleButton, { value: "1D", sx: { px: 1 }, children: "1d" }), _jsx(ToggleButton, { value: "1W", sx: { px: 1 }, children: "1w" }), _jsx(ToggleButton, { value: "1M", sx: { px: 1 }, children: "1M" }), _jsx(ToggleButton, { value: "3M", sx: { px: 1 }, children: "3M" }), _jsx(ToggleButton, { value: "6M", sx: { px: 1 }, children: "6M" }), _jsx(ToggleButton, { value: "1Y", sx: { px: 1 }, children: "1Y" }), _jsx(ToggleButton, { value: "ALL", sx: { px: 1 }, children: "ALL" })] }), _jsx(MuiTooltip, { placement: "top", arrow: true, title: t('library.trendChart.connectPointValues'), children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: spanGapsOption, disabled: chartLoading, onChange: () => handleSpanGaps(!spanGapsOption), sx: { ml: 1 }, children: _jsx(TimelineIcon, {}) }) }) }), annotationsDataFn && annotationsData !== null && (_jsx(MuiTooltip, { placement: "top", arrow: true, title: t('library.trendChart.showAnnotations'), children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: annotationsEnabled, disabled: chartLoading, onChange: () => setAnnotationsEnabled(!annotationsEnabled), sx: { ml: 1 }, children: _jsx(EditNoteIcon, {}) }) }) }))] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { mt: 2, height: '100%' }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
                     _jsx(_Fragment, { children: dataMeasures && (dataMeasures.length > 1 || (dataMeasures.length === 1 && dataMeasures[0].data?.length)) ?
                             (_jsx(Line, { options: options, data: {
                                     // datasets: dataMeasures || [{ data: [] }]
@@ -862,7 +862,7 @@ const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDat
                                 justifyContent: 'center',
                                 textAlign: 'center',
                                 height: '100%',
-                            }, children: [_jsx(SearchOffOutlinedIcon, { sx: { fontSize: 50, color: 'grey.500', mb: 2 } }), _jsx(Typography, { variant: "body1", color: "textSecondary", align: "center", children: "No data measure" })] }) }) : (_jsx(Box, { sx: {
+                            }, children: [_jsx(SearchOffOutlinedIcon, { sx: { fontSize: 50, color: 'grey.500', mb: 2 } }), _jsx(Typography, { variant: "body1", color: "textSecondary", align: "center", children: t('library.trendChart.noDataMeasure') })] }) }) : (_jsx(Box, { sx: {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',

package/components/groups/GroupUpdate.d.ts

@@ -1,5 +1,5 @@
 import { AssetType, TrackleDeviceType, UserType } from '../../types';
-declare const GroupUpdate: ({ isOrg, labelEntity, groupInfo, usersGroup, usersList, devicesList, userInfo, handleAddUserToGroup, handleGetGroups, handleRemoveUserFromGroup, handleUpdateGroup, handleDeleteGroup, container, containerProps, afterUpdateCallback, afterRemoveCallback, confirmMui }: {
+declare const GroupUpdate: ({ isOrg, labelEntity, groupInfo, usersGroup, usersList, devicesList, userInfo, handleAddUserToGroup, handleGetGroups, handleRemoveUserFromGroup, handleUpdateGroup, handleDeleteGroup, container, containerProps, afterUpdateCallback, afterRemoveCallback, confirmMui, t }: {
     groupInfo: any;
     usersGroup: any[];
     usersList: any[];
@@ -18,5 +18,6 @@ declare const GroupUpdate: ({ isOrg, labelEntity, groupInfo, usersGroup, usersLi
     labelEntity: string;
     isOrg: boolean;
     userInfo: UserType;
+    t: (key: string, params?: any) => string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default GroupUpdate;

package/components/groups/GroupUpdate.js

@@ -8,7 +8,7 @@ import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { LoadingButton } from '@mui/lab';
-const GroupUpdate = ({ isOrg, labelEntity, groupInfo, usersGroup, usersList, devicesList, userInfo, handleAddUserToGroup, handleGetGroups, handleRemoveUserFromGroup, handleUpdateGroup, handleDeleteGroup, container = 'Box', containerProps = {}, afterUpdateCallback, afterRemoveCallback, confirmMui }) => {
+const GroupUpdate = ({ isOrg, labelEntity, groupInfo, usersGroup, usersList, devicesList, userInfo, handleAddUserToGroup, handleGetGroups, handleRemoveUserFromGroup, handleUpdateGroup, handleDeleteGroup, container = 'Box', containerProps = {}, afterUpdateCallback, afterRemoveCallback, confirmMui, t }) => {
     const [group, setGroup] = useState(groupInfo);
     const [organizationsGroup, setOrganizationsGroup] = useState(null);
     const [loadingUpdateButton, setLoadingUpdateButton] = useState(false);
@@ -75,10 +75,10 @@ const GroupUpdate = ({ isOrg, labelEntity, groupInfo, usersGroup, usersList, dev
     const deleteGroup = async () => {
         try {
             if (confirmMui) {
-                await confirmMui({ description: "Are you sure you want to delete the group?", confirmationText: "Yes, remove it", confirmationButtonProps: { variant: 'contained', color: 'error' } });
+                await confirmMui({ description: t('library.groupUpdate.confirmDeleteGroup', { entity: labelEntity.toLowerCase() }), confirmationText: t('library.groupUpdate.yesRemoveIt'), confirmationButtonProps: { variant: 'contained', color: 'error' } });
             }
             else {
-                confirm("Are you sure you want to delete the group?");
+                confirm(t('library.groupUpdate.confirmDeleteGroup', { entity: labelEntity.toLowerCase() }));
             }
             setLoadingDeleteGroupButton(true);
             await handleDeleteGroup(group.id, isOrg);
@@ -106,11 +106,11 @@ const GroupUpdate = ({ isOrg, labelEntity, groupInfo, usersGroup, usersList, dev
         getInitialData();
     }, []);
     const renderGroupUpdate = () => {
-        return (_jsxs(Box, { component: "div", children: [_jsx(Grid, { container: true, spacing: 2, children: _jsx(Grid, { size: { xs: 12, md: 8 }, children: _jsxs(Box, { component: "div", children: [_jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { sx: { flexGrow: 1 }, label: "Name", value: group.name, name: "name", onChange: handleChange }) }), _jsx(FormControl, { fullWidth: true, sx: { mt: 2 }, children: _jsx(TextField, { sx: { flexGrow: 1 }, label: "Description", value: group.description, name: "description", multiline: true, rows: 4, onChange: handleChange }) }), _jsx(LoadingButton, { variant: "contained", color: "primary", loading: loadingUpdateButton, sx: { mt: 2 }, onClick: () => updateGroup(), children: "Update" })] }) }) }), _jsx(Grid, { container: true, spacing: 2, sx: { mt: 4 }, children: _jsxs(Grid, { size: { xs: 12, md: 8 }, children: [_jsx(Typography, { variant: 'body1', sx: { fontWeight: 'bold' }, children: "Add members" }), _jsx(Box, { component: "div", sx: { mt: 2 }, children: usersGroup && usersGroup.length > 0 ?
+        return (_jsxs(Box, { component: "div", children: [_jsx(Grid, { container: true, spacing: 2, children: _jsx(Grid, { size: { xs: 12, md: 8 }, children: _jsxs(Box, { component: "div", children: [_jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { sx: { flexGrow: 1 }, label: t('library.groupUpdate.name'), value: group.name, name: "name", onChange: handleChange }) }), _jsx(FormControl, { fullWidth: true, sx: { mt: 2 }, children: _jsx(TextField, { sx: { flexGrow: 1 }, label: t('library.groupUpdate.description'), value: group.description, name: "description", multiline: true, rows: 4, onChange: handleChange }) }), _jsx(LoadingButton, { variant: "contained", color: "primary", loading: loadingUpdateButton, sx: { mt: 2 }, onClick: () => updateGroup(), children: t('library.groupUpdate.update') })] }) }) }), _jsx(Grid, { container: true, spacing: 2, sx: { mt: 4 }, children: _jsxs(Grid, { size: { xs: 12, md: 8 }, children: [_jsx(Typography, { variant: 'body1', sx: { fontWeight: 'bold' }, children: t('library.groupUpdate.addMembers') }), _jsx(Box, { component: "div", sx: { mt: 2 }, children: usersGroup && usersGroup.length > 0 ?
                                     _jsx(Table, { size: "small", children: _jsx(TableBody, { children: usersGroup.map((ug) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "body1", children: ug.user.fullName }) }), _jsx(TableCell, { align: 'right', children: _jsx(LoadingButton, { size: "small", color: "error", loading: loadingRemoveUserButton, onClick: () => removeUserFromCurrentGroup(ug.user.userId), children: _jsx(CloseIcon, { sx: { m: 0, p: 0 }, fontSize: "small" }) }) })] }, ug.id))) }) })
-                                    : _jsx(Box, { component: 'div', sx: { mt: 2 }, children: "No members found" }) }), _jsxs(Box, { component: "div", sx: { mt: 4, display: 'flex', alignItems: 'center' }, children: [_jsx(Autocomplete, { fullWidth: true, disablePortal: true, options: usersList || [], value: selectedUser, size: 'small', onChange: (event, newValue) => {
+                                    : _jsx(Box, { component: 'div', sx: { mt: 2 }, children: t('library.groupUpdate.noMembersFound') }) }), _jsxs(Box, { component: "div", sx: { mt: 4, display: 'flex', alignItems: 'center' }, children: [_jsx(Autocomplete, { fullWidth: true, disablePortal: true, options: usersList || [], value: selectedUser, size: 'small', onChange: (event, newValue) => {
                                             setSelectedUser(newValue);
-                                        }, renderInput: (params) => _jsx(TextField, { ...params, label: "Select user" }) }), _jsxs(LoadingButton, { variant: "contained", color: "primary", loading: loadingAddUserButton, sx: { ml: 2 }, disabled: !selectedUser, onClick: () => addUserToCurrentGroup(), children: [_jsx(AddIcon, { sx: { mr: 1 } }), " Add"] })] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsxs(Typography, { variant: 'body1', sx: { fontWeight: 'bold' }, children: ["Delete ", labelEntity.toLocaleLowerCase()] }), !isOrg ? (_jsx(Alert, { severity: "error", sx: { mt: 2 }, action: _jsxs(LoadingButton, { variant: "contained", disabled: devicesList.length > 0 || usersGroup.length > 0, color: "error", loading: loadingDeleteGroupButton, onClick: () => deleteGroup(), size: 'small', children: [_jsx(DeleteIcon, { fontSize: "small", sx: { mr: 1 } }), " Delete"] }), children: devicesList.length === 0 && usersGroup.length === 0 ? `This action cannot be undone` : `You must manually remove devices and members from ${labelEntity.toLocaleLowerCase()} before deletion` })) : organizationsGroup && (_jsx(Alert, { severity: "error", sx: { mt: 2 }, action: _jsxs(LoadingButton, { variant: "contained", disabled: devicesList.length > 0 || usersGroup.length > 0 || organizationsGroup.length > 0, color: "error", loading: loadingDeleteGroupButton, onClick: () => deleteGroup(), size: 'small', children: [_jsx(DeleteIcon, { fontSize: "small", sx: { mr: 1 } }), " Delete"] }), children: devicesList.length === 0 && usersGroup.length === 0 && organizationsGroup.length === 0 ? `This action cannot be undone` : `You must manually remove devices, members and groups from ${labelEntity.toLocaleLowerCase()} before deletion` }))] })] }) })] }));
+                                        }, renderInput: (params) => _jsx(TextField, { ...params, label: t('library.groupUpdate.selectUser') }) }), _jsxs(LoadingButton, { variant: "contained", color: "primary", loading: loadingAddUserButton, sx: { ml: 2 }, disabled: !selectedUser, onClick: () => addUserToCurrentGroup(), children: [_jsx(AddIcon, { sx: { mr: 1 } }), " ", t('library.groupUpdate.add')] })] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsx(Typography, { variant: 'body1', sx: { fontWeight: 'bold' }, children: t('library.groupUpdate.deleteGroup', { entity: labelEntity.toLowerCase() }) }), !isOrg ? (_jsx(Alert, { severity: "error", sx: { mt: 2 }, action: _jsxs(LoadingButton, { variant: "contained", disabled: devicesList.length > 0 || usersGroup.length > 0, color: "error", loading: loadingDeleteGroupButton, onClick: () => deleteGroup(), size: 'small', children: [_jsx(DeleteIcon, { fontSize: "small", sx: { mr: 1 } }), " ", t('library.groupUpdate.deleteGroup', { entity: labelEntity.toLowerCase() })] }), children: devicesList.length === 0 && usersGroup.length === 0 ? t('library.groupUpdate.actionCannotBeUndone') : t('library.groupUpdate.mustRemoveDevicesAndMembers', { entity: labelEntity.toLowerCase() }) })) : organizationsGroup && (_jsx(Alert, { severity: "error", sx: { mt: 2 }, action: _jsxs(LoadingButton, { variant: "contained", disabled: devicesList.length > 0 || usersGroup.length > 0 || organizationsGroup.length > 0, color: "error", loading: loadingDeleteGroupButton, onClick: () => deleteGroup(), size: 'small', children: [_jsx(DeleteIcon, { fontSize: "small", sx: { mr: 1 } }), " ", t('library.groupUpdate.deleteGroup', { entity: labelEntity.toLowerCase() })] }), children: devicesList.length === 0 && usersGroup.length === 0 && organizationsGroup.length === 0 ? t('library.groupUpdate.actionCannotBeUndone') : t('library.groupUpdate.mustRemoveDevicesMembersAndGroups', { entity: labelEntity.toLowerCase() }) }))] })] }) })] }));
     };
     return (container === "Card" ? (_jsx(Card, { ...containerProps, children: _jsx(CardContent, { children: renderGroupUpdate() }) })) : (_jsx(Box, { ...containerProps, children: renderGroupUpdate() })));
 };

package/components/groups/GroupsDevices.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from "@emotion/react";
 import { UserType, AssetType, DevicePositionType, TrackleDeviceType } from "../../types";
-declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleGetUsersGroup, handleGetDevices, handleUpdateDevice, handleGetPositions, handleAddDevicesToGroup, handleRemoveDevicesFromGroup, handleCreateGroup, handleDeleteGroup, handleUpdateGroup, group, columnsArray, containerDataGrid, props, propsDatagrid, loadingComponent, containerProps, enableMaps, mapsHeight, mapsClickCallback, theme, confirmMui, propsHeaderGroups, forceGetDevices, customToolbar, groupsLabelAll, addDevicesLabel, noDevicesLabel, groupUpdateRoles, isOrg, currentOrg }: {
+declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleGetUsersGroup, handleGetDevices, handleUpdateDevice, handleGetPositions, handleAddDevicesToGroup, handleRemoveDevicesFromGroup, handleCreateGroup, handleDeleteGroup, handleUpdateGroup, group, columnsArray, containerDataGrid, props, propsDatagrid, loadingComponent, containerProps, enableMaps, mapsHeight, mapsClickCallback, theme, confirmMui, propsHeaderGroups, forceGetDevices, customToolbar, groupsLabelAll, addDevicesLabel, noDevicesLabel, groupUpdateRoles, isOrg, currentOrg, t, dataGridLocaleText }: {
     userInfo: UserType;
     handleGetUsersList: () => Promise<UserType[]>;
     handleAddUserToGroup: (groupID: string, userName: string, userID: string) => Promise<any>;
@@ -36,5 +36,7 @@ declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGro
     groupUpdateRoles?: string[];
     isOrg?: boolean;
     currentOrg?: string;
+    t: (key: string, params?: any) => string;
+    dataGridLocaleText?: Record<string, string>;
 }) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").AwaitedReactNode> | null;
 export default GroupsDevices;

package/components/groups/GroupsDevices.js

@@ -15,7 +15,7 @@ import GroupUpdate from "./GroupUpdate";
 import BackIcon from '@mui/icons-material/ArrowBack';
 import dynamic from "next/dynamic";
 import { ThemeProvider } from '@mui/material/styles';
-const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleGetUsersGroup, handleGetDevices, handleUpdateDevice, handleGetPositions, handleAddDevicesToGroup, handleRemoveDevicesFromGroup, handleCreateGroup, handleDeleteGroup, handleUpdateGroup, group = 'all', columnsArray = [], containerDataGrid = 'Card', props = {}, propsDatagrid = {}, loadingComponent = _jsx(CircularProgress, {}), containerProps = {}, enableMaps = true, mapsHeight = '400px', mapsClickCallback = () => { }, theme, confirmMui, propsHeaderGroups, forceGetDevices = 0, customToolbar, groupsLabelAll, addDevicesLabel, noDevicesLabel, groupUpdateRoles, isOrg = false, currentOrg }) => {
+const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleGetUsersGroup, handleGetDevices, handleUpdateDevice, handleGetPositions, handleAddDevicesToGroup, handleRemoveDevicesFromGroup, handleCreateGroup, handleDeleteGroup, handleUpdateGroup, group = 'all', columnsArray = [], containerDataGrid = 'Card', props = {}, propsDatagrid = {}, loadingComponent = _jsx(CircularProgress, {}), containerProps = {}, enableMaps = true, mapsHeight = '400px', mapsClickCallback = () => { }, theme, confirmMui, propsHeaderGroups, forceGetDevices = 0, customToolbar, groupsLabelAll, addDevicesLabel, noDevicesLabel, groupUpdateRoles, isOrg = false, currentOrg, t, dataGridLocaleText }) => {
     const [devices, setDevices] = useState([]);
     const [positions, setPositions] = useState([]);
     const [loadingDevices, setLoadingDevices] = useState(false);
@@ -37,11 +37,12 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const [groupUpdateVisible, setGroupUpdateVisible] = useState(false);
     const [valueTab, setValueTab] = useState('1');
     const clickedIdRef = useRef(null);
-    const labelEntity = isOrg ? "Organization" : "Group";
+    const labelEntity = isOrg ? t('library.groupsDevices.organization') : t('library.groupsDevices.group');
+    const labelEntityLower = labelEntity.toLowerCase();
     const handleChangeTab = (event, newValue) => {
         setValueTab(newValue);
     };
-    const Map = useMemo(() => dynamic(() => import("./Map"), {
+    const MapComponent = useMemo(() => dynamic(() => import("./Map"), {
         loading: () => isValidElement(loadingComponent) ? cloneElement(loadingComponent, { height: mapsHeight }) : null,
         ssr: false
     }), []);
@@ -212,7 +213,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         setEditGroup(!editGroup);
         setCheckboxSelection(!checkboxSelection);
     };
-    const renderMaps = (_jsx(Map, { positions: positions, mapsClickCallback: mapsClickCallback, height: mapsHeight }));
+    const renderMaps = (_jsx(MapComponent, { positions: positions, mapsClickCallback: mapsClickCallback, height: mapsHeight, t: t }));
     useEffect(() => {
         if (devicesToAdd.length <= 0) {
             setDeviceSelectedObjs([]);
@@ -223,7 +224,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
                         : '', customToolbar && customToolbar.includes('export') ?
                         _jsx(GridToolbarExport, {})
                         : ''] }), customToolbar && customToolbar.includes('quickfilter') && _jsx(GridToolbarQuickFilter, {})] })), []);
-    const renderDataGrid = (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { checkboxSelection: checkboxSelection, 
+    const renderDataGrid = (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { checkboxSelection: checkboxSelection, localeText: dataGridLocaleText, 
             // Se siamo in modalità aggiunta, includi gli ID già nel gruppo
             rowSelectionModel: (checkboxSelection && currentGroup === 'all')
                 ? [
@@ -303,9 +304,9 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
                 ? columnsArray.filter(col => col.field !== 'id')
                 : columnsArray, slots: {
                 noRowsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: currentGroup !== 'all'
-                        ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [noDevicesLabel || 'No devices', " in ", labelEntity.toLocaleLowerCase()] }), editGroup && (_jsxs(Button, { onClick: addDevicesToCurrentGroup, variant: "outlined", color: "primary", size: "small", sx: { mt: 2 }, children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), addDevicesLabel || 'Add devices'] }))] }))
-                        : noDevicesLabel || 'No devices' })),
-                noResultsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: "Filter returns no result" })),
+                        ? (_jsxs(_Fragment, { children: [_jsx(Box, { children: noDevicesLabel || t('library.groupsDevices.noDevicesInGroup', { entity: labelEntityLower }) }), editGroup && (_jsxs(Button, { onClick: addDevicesToCurrentGroup, variant: "outlined", color: "primary", size: "small", sx: { mt: 2 }, children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), addDevicesLabel || t('library.groupsDevices.addDevices')] }))] }))
+                        : noDevicesLabel || t('library.groupsDevices.noDevices') })),
+                noResultsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: t('library.groupsDevices.filterReturnsNoResult') })),
                 toolbar: customToolbar && customToolbar.length ? CustomToolbar : GridToolbar,
             }, slotProps: {
                 toolbar: {
@@ -316,7 +317,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
             }, initialState: {
                 pagination: { paginationModel: { pageSize: 100 } },
             }, ...propsDatagrid }) }));
-    const renderTabContext = (_jsxs(TabContext, { value: valueTab, children: [_jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: _jsxs(TabList, { onChange: handleChangeTab, sx: { minHeight: 20 }, children: [_jsx(Tab, { label: "List", value: "1", sx: { minHeight: 20 } }), _jsx(Tab, { label: "Map", value: "2", sx: { minHeight: 20 } })] }) }), _jsx(TabPanel, { value: "1", sx: { p: 0 }, children: renderDataGrid }), _jsx(TabPanel, { value: "2", sx: { p: 0 }, children: renderMaps })] }));
+    const renderTabContext = (_jsxs(TabContext, { value: valueTab, children: [_jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: _jsxs(TabList, { onChange: handleChangeTab, sx: { minHeight: 20 }, children: [_jsx(Tab, { label: t('library.groupsDevices.list'), value: "1", sx: { minHeight: 20 } }), _jsx(Tab, { label: t('library.groupsDevices.map'), value: "2", sx: { minHeight: 20 } })] }) }), _jsx(TabPanel, { value: "1", sx: { p: 0 }, children: renderDataGrid }), _jsx(TabPanel, { value: "2", sx: { p: 0 }, children: renderMaps })] }));
     const renderDatagridAndMaps = (enableMaps ?
         containerDataGrid === 'Card' ?
             _jsx(Card, { ...containerProps, children: renderTabContext }) : _jsx(Box, { ...containerProps, children: renderTabContext }) : containerDataGrid === 'Card' ?
@@ -324,30 +325,30 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     if (!userInfo || !groups || !devices)
         return loadingComponent;
     return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Box, { ...props, children: [_jsxs(Box, { component: "div", sx: { display: 'flex', alignItems: 'center', mb: 1, backgroundColor: editGroup && !isOrg ? 'secondary.light' : '', borderRadius: 3, px: editGroup ? 2 : 0, py: 1, height: 50, ...propsHeaderGroups }, children: [editGroup ? _jsx(Typography, { variant: isOrg ? 'h6' : 'subtitle1', children: _jsxs("b", { children: [labelEntity, " \"", groupInfo?.name, "\""] }) }) : '', groups && !checkboxSelection && !isOrg && !(editGroup && currentGroup === 'all') ?
-                            _jsx(Autocomplete, { disablePortal: true, onChange: handleChangeGroupSelect, value: groupInfo?.name || groupsLabelAll || 'All devices', disableClearable: currentGroup === 'all', isOptionEqualToValue: (o, v) => o.label === v, options: [{ label: groupsLabelAll || 'All devices', id: 'all' }, ...groups.map((grp) => ({ label: grp.name, id: grp.id }))], sx: { width: { xs: 200, sm: 300 }, textAlign: 'left' }, size: 'small', renderInput: (params) => _jsx(TextField, { ...params, label: labelEntity }) })
+                            _jsx(Autocomplete, { disablePortal: true, onChange: handleChangeGroupSelect, value: groupInfo?.name || groupsLabelAll || t('library.groupsDevices.allDevices'), disableClearable: currentGroup === 'all', isOptionEqualToValue: (o, v) => o.label === v, options: [{ label: groupsLabelAll || t('library.groupsDevices.allDevices'), id: 'all' }, ...groups.map((grp) => ({ label: grp.name, id: grp.id }))], sx: { width: { xs: 200, sm: 300 }, textAlign: 'left' }, size: 'small', renderInput: (params) => _jsx(TextField, { ...params, label: labelEntity }) })
                             : '', (userInfo.role === 'admin' || (groupUpdateRoles && groupUpdateRoles.includes(userInfo.role))) &&
                             _jsxs(Box, { sx: { ml: 2 }, children: [checkboxSelection ?
                                         _jsx(Input, { value: selectedGroup, type: 'hidden', size: 'small' })
-                                        : '', selectedGroup === 'all' && (currentOrg !== 'all') ? _jsxs(Button, { variant: "contained", color: "primary", onClick: () => { handleOpenAdd(); }, children: [_jsx(AddIcon, { sx: { mr: 1 } }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "Create\u00A0" }), " ", labelEntity.toLocaleLowerCase()] }) : '', editGroup ?
+                                        : '', selectedGroup === 'all' && (currentOrg !== 'all') ? _jsxs(Button, { variant: "contained", color: "primary", onClick: () => { handleOpenAdd(); }, children: [_jsx(AddIcon, { sx: { mr: 1 } }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: t('library.groupsDevices.createGroup', { entity: labelEntityLower }) })] }) : '', editGroup ?
                                         currentGroup === 'all' ?
-                                            checkboxSelection ? _jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => { setGroupUpdateVisible(false); setDevicesToAdd([]); setCurrentGroup(selectedGroup); setCheckboxSelection(true); fetchDevices(selectedGroup, selectedGroup); }, variant: "text", color: "inherit", size: "small", children: [_jsx(BackIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0Back to ", labelEntity.toLocaleLowerCase()] })] }), _jsxs(LoadingButton, { loading: loadingGroups, onClick: () => addToSelectedGroup(), variant: 'contained', size: "small", disabled: devicesToAdd.length === 0 || selectedGroup === 'all' || loadingGroups, sx: { ml: 2 }, children: [_jsx(ReadMoreIcon, { sx: { mr: 1 } }), " Add to group"] })] }) : ''
-                                            : devicesToAdd.length === 0 ? groupUpdateVisible ? _jsxs(Button, { onClick: () => setGroupUpdateVisible(false), sx: { ml: 2 }, variant: "text", color: "inherit", size: "small", children: [_jsx(BackIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0Back to ", labelEntity.toLocaleLowerCase()] })] }) :
-                                                _jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => addDevicesToCurrentGroup(), sx: { ml: 2 }, variant: "outlined", color: "primary", size: "small", children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), " ", addDevicesLabel || 'Add devices'] }), _jsxs(Button, { onClick: () => setGroupUpdateVisible(true), sx: { ml: 2 }, variant: "outlined", color: "success", size: "small", children: [_jsx(SettingsIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0Manage ", labelEntity.toLocaleLowerCase()] })] })] })
-                                                : _jsxs(LoadingButton, { loading: loadingGroups, onClick: async () => { setLoadingGroups(true); await removeFromCurrentGroup(); }, variant: "contained", color: "error", size: "small", disabled: loadingGroups, sx: { ml: 2 }, children: [_jsx(PlaylistRemoveIcon, { fontSize: "small", sx: { mr: 1 } }), " Remove from ", labelEntity.toLocaleLowerCase()] })
+                                            checkboxSelection ? _jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => { setGroupUpdateVisible(false); setDevicesToAdd([]); setCurrentGroup(selectedGroup); setCheckboxSelection(true); fetchDevices(selectedGroup, selectedGroup); }, variant: "text", color: "inherit", size: "small", children: [_jsx(BackIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0", t('library.groupsDevices.backToGroup', { entity: labelEntityLower })] })] }), _jsxs(LoadingButton, { loading: loadingGroups, onClick: () => addToSelectedGroup(), variant: 'contained', size: "small", disabled: devicesToAdd.length === 0 || selectedGroup === 'all' || loadingGroups, sx: { ml: 2 }, children: [_jsx(ReadMoreIcon, { sx: { mr: 1 } }), " ", t('library.groupsDevices.addToGroup')] })] }) : ''
+                                            : devicesToAdd.length === 0 ? groupUpdateVisible ? _jsxs(Button, { onClick: () => setGroupUpdateVisible(false), sx: { ml: 2 }, variant: "text", color: "inherit", size: "small", children: [_jsx(BackIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0", t('library.groupsDevices.backToGroup', { entity: labelEntityLower })] })] }) :
+                                                _jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => addDevicesToCurrentGroup(), sx: { ml: 2 }, variant: "outlined", color: "primary", size: "small", children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), " ", addDevicesLabel || t('library.groupsDevices.addDevices')] }), _jsxs(Button, { onClick: () => setGroupUpdateVisible(true), sx: { ml: 2 }, variant: "outlined", color: "success", size: "small", children: [_jsx(SettingsIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0", t('library.groupsDevices.manageGroup', { entity: labelEntityLower })] })] })] })
+                                                : _jsxs(LoadingButton, { loading: loadingGroups, onClick: async () => { setLoadingGroups(true); await removeFromCurrentGroup(); }, variant: "contained", color: "error", size: "small", disabled: loadingGroups, sx: { ml: 2 }, children: [_jsx(PlaylistRemoveIcon, { fontSize: "small", sx: { mr: 1 } }), " ", t('library.groupsDevices.removeFromGroup', { entity: labelEntityLower })] })
                                         : '', selectedGroup !== 'all' && !isOrg ?
                                         _jsx(_Fragment, { children: editGroup ?
-                                                _jsxs(Button, { variant: "text", color: "inherit", onClick: () => closeEditGroup(), sx: { ml: 2 }, children: [_jsx(CloseIcon, { fontSize: "small" }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "\u00A0Close edit" })] })
-                                                : _jsxs(Button, { variant: "contained", color: "secondary", onClick: () => { setDevicesToAdd([]); setEditGroup(!editGroup); setCheckboxSelection(!checkboxSelection); }, children: [_jsx(EditIcon, { sx: { mr: 1 } }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "Edit\u00A0" }), " ", labelEntity.toLocaleLowerCase()] }) }) : ''] })] }), _jsx(Modal, { open: openAdd, onClose: handleCloseAdd, children: _jsxs(Card, { sx: {
+                                                _jsxs(Button, { variant: "text", color: "inherit", onClick: () => closeEditGroup(), sx: { ml: 2 }, children: [_jsx(CloseIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0", t('library.groupsDevices.closeEdit')] })] })
+                                                : _jsxs(Button, { variant: "contained", color: "secondary", onClick: () => { setDevicesToAdd([]); setEditGroup(!editGroup); setCheckboxSelection(!checkboxSelection); }, children: [_jsx(EditIcon, { sx: { mr: 1 } }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: t('library.groupsDevices.editGroup', { entity: labelEntityLower }) })] }) }) : ''] })] }), _jsx(Modal, { open: openAdd, onClose: handleCloseAdd, children: _jsxs(Card, { sx: {
                             position: 'absolute',
                             top: '50%',
                             left: '50%',
                             transform: 'translate(-50%, -50%)',
                             width: 400,
                             borderRadius: 4
-                        }, children: [_jsx(CardHeader, { title: "New " + labelEntity, action: _jsx(IconButton, { onClick: handleCloseAdd, children: _jsx(CloseIcon, {}) }) }), _jsx(CardContent, { children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TextField, { fullWidth: true, label: labelEntity + " Name", value: groupName, onChange: (e) => setGroupName(e.target.value), required: true }), _jsx(TextField, { fullWidth: true, label: "Description", value: description, onChange: (e) => setDescription(e.target.value), margin: "normal", multiline: true, rows: 4 }), _jsxs(Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [_jsx(Button, { variant: "contained", color: "info", onClick: handleCloseAdd, children: "Cancel" }), _jsx(LoadingButton, { loading: loadingAdd, variant: "contained", color: "primary", type: "submit", children: "Create" })] })] }) })] }) }), !groupUpdateVisible && renderDatagridAndMaps, groupInfo && editGroup && groupUpdateVisible && _jsx(GroupUpdate, { userInfo: userInfo, confirmMui: confirmMui, usersGroup: usersGroup, usersList: usersList, handleGetGroups: handleGetGroups, handleUpdateDevice: handleUpdateDevice, handleAddUserToGroup: handleAddUserToGroup, handleRemoveUserFromGroup: handleRemoveUserFromGroup, groupInfo: groupInfo, afterUpdateCallback: async (groupInfo) => { setGroupInfo(groupInfo); await getGroups(); await getUsersGroup(groupInfo.id); }, afterRemoveCallback: async () => { if (!isOrg) {
+                        }, children: [_jsx(CardHeader, { title: t('library.groupsDevices.newGroup', { entity: labelEntity }), action: _jsx(IconButton, { onClick: handleCloseAdd, children: _jsx(CloseIcon, {}) }) }), _jsx(CardContent, { children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TextField, { fullWidth: true, label: t('library.groupsDevices.groupName', { entity: labelEntity }), value: groupName, onChange: (e) => setGroupName(e.target.value), required: true }), _jsx(TextField, { fullWidth: true, label: t('library.groupsDevices.description'), value: description, onChange: (e) => setDescription(e.target.value), margin: "normal", multiline: true, rows: 4 }), _jsxs(Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [_jsx(Button, { variant: "contained", color: "info", onClick: handleCloseAdd, children: t('library.groupsDevices.cancel') }), _jsx(LoadingButton, { loading: loadingAdd, variant: "contained", color: "primary", type: "submit", children: t('library.groupsDevices.create') })] })] }) })] }) }), !groupUpdateVisible && renderDatagridAndMaps, groupInfo && editGroup && groupUpdateVisible && _jsx(GroupUpdate, { userInfo: userInfo, confirmMui: confirmMui, usersGroup: usersGroup, usersList: usersList, handleGetGroups: handleGetGroups, handleUpdateDevice: handleUpdateDevice, handleAddUserToGroup: handleAddUserToGroup, handleRemoveUserFromGroup: handleRemoveUserFromGroup, groupInfo: groupInfo, afterUpdateCallback: async (groupInfo) => { setGroupInfo(groupInfo); await getGroups(); await getUsersGroup(groupInfo.id); }, afterRemoveCallback: async () => { if (!isOrg) {
                         closeEditGroup();
                         setCurrentGroup('all');
                         await getGroups();
-                    } }, container: 'Card', handleDeleteGroup: handleDeleteGroup, handleUpdateGroup: handleUpdateGroup, devicesList: devices, labelEntity: labelEntity, isOrg: isOrg })] }) }));
+                    } }, container: 'Card', handleDeleteGroup: handleDeleteGroup, handleUpdateGroup: handleUpdateGroup, devicesList: devices, labelEntity: labelEntity, isOrg: isOrg, t: t })] }) }));
 };
 export default GroupsDevices;

package/components/groups/Map.d.ts

@@ -2,8 +2,9 @@ import 'leaflet/dist/leaflet.css';
 import "leaflet-defaulticon-compatibility";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import { DevicePositionType } from "../../types/device";
-export default function Map({ positions, height, mapsClickCallback }: {
+export default function Map({ positions, height, mapsClickCallback, t }: {
     positions: DevicePositionType[];
     height: string;
     mapsClickCallback: (position: DevicePositionType) => void;
+    t: (key: string, params?: any) => string;
 }): import("react/jsx-runtime").JSX.Element;

package/components/groups/Map.js

@@ -6,12 +6,12 @@ import 'leaflet/dist/leaflet.css';
 import "leaflet-defaulticon-compatibility";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import { Box, Link } from "@mui/material";
-export default function Map({ positions, height, mapsClickCallback = () => { } }) {
+export default function Map({ positions, height, mapsClickCallback = () => { }, t }) {
     return positions.filter(pos => pos.lat !== null)?.length ? _jsxs(MapContainer, { bounds: L.latLngBounds(positions.filter(pos => pos.lat !== null)), zoom: 13, scrollWheelZoom: false, style: { width: '100%', height }, children: [_jsx(TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }), _jsx(MarkerClusterGroup, { chunkedLoading: true, children: positions.filter(pos => pos.lat !== null).map((position) => (_jsx(Marker, { position: [position.lat, position.lng], children: _jsx(Popup, { children: _jsxs(Link, { href: "#", onClick: () => mapsClickCallback(position), children: [_jsx("b", { children: position.name }), _jsx("br", {}), position.deviceID] }) }) }, position.deviceID))) })] }) : _jsx(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             height,
-        }, children: _jsx("small", { children: "No positions for devices" }) });
+        }, children: _jsx("small", { children: t('library.map.noPositionsForDevices') }) });
 }

package/components/users/UserUpdate.d.ts

@@ -1,11 +1,12 @@
 import { UserType } from '../../types/user';
 import { Theme } from '@emotion/react';
-declare const UserUpdate: ({ userInfo, handleUpdateUser, container, containerProps, roles, theme }: {
+declare const UserUpdate: ({ userInfo, handleUpdateUser, container, containerProps, roles, theme, t }: {
     userInfo: UserType;
     handleUpdateUser: (userId: string, userInfo: Partial<UserType>) => Promise<void>;
     container?: "Card" | "Box";
     containerProps?: object | undefined;
     roles?: string[];
     theme: Theme;
+    t: (key: string, params?: any) => string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default UserUpdate;

package/components/users/UserUpdate.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Card, CardContent, FormControl, InputLabel, MenuItem, Select, ThemeProvider } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-const UserUpdate = ({ userInfo, handleUpdateUser, container = 'Box', containerProps = {}, roles = ['customer', 'support', 'admin'], theme }) => {
+const UserUpdate = ({ userInfo, handleUpdateUser, container = 'Box', containerProps = {}, roles = ['customer', 'support', 'admin'], theme, t }) => {
     const [userRole, setUserRole] = useState(userInfo.role || roles[0]);
     const [loadingButton, setLoadingButton] = useState(false);
     const handleChangeRole = (event) => {
@@ -19,7 +19,7 @@ const UserUpdate = ({ userInfo, handleUpdateUser, container = 'Box', containerPr
         setLoadingButton(false);
     };
     const renderUserUpdate = () => {
-        return (_jsxs(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { id: "select-role-label", children: "Role" }), _jsx(Select, { labelId: "select-role-label", id: "select-role", value: userRole || '', label: "Role", onChange: handleChangeRole, children: roles.map((role) => (_jsx(MenuItem, { value: role, children: role.charAt(0).toUpperCase() + role.slice(1) }, role))) })] }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(LoadingButton, { variant: "contained", color: "primary", loading: loadingButton, onClick: () => handleUpdate(), children: "Update" }) })] }));
+        return (_jsxs(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { id: "select-role-label", children: t('library.userUpdate.role') }), _jsx(Select, { labelId: "select-role-label", id: "select-role", value: userRole || '', label: t('library.userUpdate.role'), onChange: handleChangeRole, children: roles.map((role) => (_jsx(MenuItem, { value: role, children: role.charAt(0).toUpperCase() + role.slice(1) }, role))) })] }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(LoadingButton, { variant: "contained", color: "primary", loading: loadingButton, onClick: () => handleUpdate(), children: t('library.userUpdate.update') }) })] }));
     };
     return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsx(Card, { ...containerProps, children: _jsx(CardContent, { sx: { py: 0 }, children: renderUserUpdate() }) })) : (_jsx(Box, { ...containerProps, children: renderUserUpdate() })) });
 };

package/components/users/UsersDataGrid.d.ts

@@ -1,7 +1,7 @@
 import { GridSortModel } from '@mui/x-data-grid';
 import { UserType } from '../../types/user';
 import { Theme } from '@emotion/react';
-declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, containerProps, props, loadingComponent, theme, columns }: {
+declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, containerProps, props, loadingComponent, theme, columns, filterTypes, t, dataGridLocaleText }: {
     handleGetUsersList: ({ page, pageSize, filter, sortModel }: {
         page: number;
         pageSize: number;
@@ -22,5 +22,10 @@ declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, contain
     loadingComponent?: React.ReactNode;
     theme: Theme;
     columns: any[];
+    filterTypes?: {
+        [key: string]: string;
+    };
+    t: (key: string, params?: any) => string;
+    dataGridLocaleText?: Record<string, string>;
 }) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").AwaitedReactNode> | null;
 export default UsersDataGrid;

package/components/users/UsersDataGrid.js

@@ -4,13 +4,13 @@ import { DataGrid, GridLogicOperator, GridToolbarExport } from '@mui/x-data-grid
 import { Card, Box, CircularProgress, ThemeProvider, FormControl, IconButton, InputLabel, MenuItem, Select, TextField } from '@mui/material';
 import { ClearIcon } from "@mui/x-date-pickers";
 import debounce from 'lodash.debounce';
-const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', containerProps = {}, props = {}, loadingComponent = _jsx(CircularProgress, {}), theme, columns }) => {
+const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', containerProps = {}, props = {}, loadingComponent = _jsx(CircularProgress, {}), theme, columns, filterTypes, t, dataGridLocaleText }) => {
     const [usersList, setUsersList] = useState(undefined);
     const [userCount, setUserCount] = useState(undefined);
-    const filterType = {
-        email: 'Email Address',
-        name: 'Full name',
-        role: 'Role'
+    const filterType = filterTypes || {
+        email: t('library.usersDataGrid.emailAddress'),
+        name: t('library.usersDataGrid.fullName'),
+        role: t('library.usersDataGrid.role')
     };
     const [selectedFilterValue, setSelectedFilterValue] = useState(undefined);
     const [selectedFilterType, setSelectedFilterType] = useState('email');
@@ -77,7 +77,7 @@ const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', contai
         setPaginationModel(prev => ({ ...prev, page: 0 }));
     };
     const CustomToolbar = () => (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', p: 1, justifyContent: 'space-between' }, children: _jsx(GridToolbarExport, {}) }));
-    const renderUsersList = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { disableDensitySelector: true, disableColumnSelector: true, disableRowSelectionOnClick: true, onSortModelChange: handleSortModelChange, disableColumnResize: true, columns: columns, rows: usersList, slots: {
+    const renderUsersList = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { disableDensitySelector: true, disableColumnSelector: true, disableRowSelectionOnClick: true, onSortModelChange: handleSortModelChange, disableColumnResize: true, columns: columns, rows: usersList, localeText: dataGridLocaleText, slots: {
                 toolbar: CustomToolbar,
             }, slotProps: {
                 toolbar: {
@@ -85,7 +85,7 @@ const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', contai
                     showQuickFilter: false,
                 },
             }, rowCount: userCount, loading: isLoading, pageSizeOptions: [], paginationModel: paginationModel, paginationMode: "server", onPaginationModelChange: setPaginationModel, ...props }) }));
-    const renderFilter = () => (_jsxs(Box, { sx: { position: "absolute", top: 10, right: 10, zIndex: 1 }, children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { shrink: true, id: "filter-by-select-label", children: "Filter by" }), _jsx(Select, { value: selectedFilterType || '', onChange: (e) => setSelectedFilterType(e.target.value), labelId: "filter-by-select-label", label: "Filter by", size: "small", sx: { mr: 2 }, children: Object.entries(filterType).map(([key, label]) => (_jsx(MenuItem, { value: key, children: label }, key))) })] }), _jsx(TextField, { value: selectedFilterValue || "", onChange: (e) => handleFilterModelChange(e.target.value), placeholder: "Search...", size: "small", InputProps: {
+    const renderFilter = () => (_jsxs(Box, { sx: { position: "absolute", top: 10, right: 10, zIndex: 1 }, children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { shrink: true, id: "filter-by-select-label", children: t('library.usersDataGrid.filterBy') }), _jsx(Select, { value: selectedFilterType || '', onChange: (e) => setSelectedFilterType(e.target.value), labelId: "filter-by-select-label", label: t('library.usersDataGrid.filterBy'), size: "small", sx: { mr: 2 }, children: Object.entries(filterType).map(([key, label]) => (_jsx(MenuItem, { value: key, children: label }, key))) })] }), _jsx(TextField, { value: selectedFilterValue || "", onChange: (e) => handleFilterModelChange(e.target.value), placeholder: t('library.usersDataGrid.search'), size: "small", InputProps: {
                     endAdornment: selectedFilterValue ? (_jsx(IconButton, { size: "small", onClick: () => handleFilterModelChange(""), children: _jsx(ClearIcon, { fontSize: "small" }) })) : null,
                 } })] }));
     return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsx(_Fragment, { children: _jsxs(Card, { ...containerProps, sx: { position: 'relative', ...(containerProps?.sx) }, children: [renderFilter(), renderUsersList()] }) })) : (_jsxs(_Fragment, { children: [renderFilter(), _jsxs(Box, { ...containerProps, sx: { position: 'relative', ...(containerProps?.sx) }, children: [renderFilter(), renderUsersList()] })] })) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iotready/nextjs-components-library",
-  "version": "1.0.0-preview38",
+  "version": "1.0.0-preview39",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",
@@ -20,6 +20,7 @@
     "chartjs-plugin-annotation": "^3.1.0",
     "chartjs-plugin-zoom": "^2.0.1",
     "csv-parse": "^5.6.0",
+    "exceljs": "^4.4.0",
     "firebase-admin": "^13.4.0",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",