@iotready/nextjs-components-library 1.0.0-preview1

package/components/groups/GroupsDevices.js

@@ -0,0 +1,299 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, CircularProgress, Autocomplete, TextField, Input, IconButton, Button, Card, CardContent, CardHeader, Modal, Typography, Stack, Tab } from "@mui/material";
+import { cloneElement, isValidElement, useEffect, useMemo, useState } from "react";
+import AddIcon from '@mui/icons-material/Add';
+import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
+import EditIcon from '@mui/icons-material/Edit';
+import SettingsIcon from '@mui/icons-material/Settings';
+import ReadMoreIcon from '@mui/icons-material/ReadMore';
+import PlaylistRemoveIcon from '@mui/icons-material/PlaylistRemove';
+import CloseIcon from '@mui/icons-material/Close';
+import { LoadingButton, TabContext, TabList, TabPanel } from "@mui/lab";
+import { DataGrid, GridToolbar } from "@mui/x-data-grid";
+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 }) => {
+    const [devices, setDevices] = useState(null);
+    const [positions, setPositions] = useState([]);
+    const [loadingDevices, setLoadingDevices] = useState(false);
+    const [loadingGroups, setLoadingGroups] = useState(false);
+    const [loadingAdd, setLoadingAdd] = useState(false);
+    const [editGroup, setEditGroup] = useState(false);
+    const [checkboxSelection, setCheckboxSelection] = useState(false);
+    const [devicesToAdd, setDevicesToAdd] = useState([]);
+    const [currentGroup, setCurrentGroup] = useState(group);
+    const [selectedGroup, setSelectedGroup] = useState(group);
+    const [groups, setGroups] = useState(null);
+    const [usersList, setUsersList] = useState([]);
+    const [usersGroup, setUsersGroup] = useState([]);
+    const [groupInfo, setGroupInfo] = useState(null);
+    const [openAdd, setOpenAdd] = useState(false);
+    const [groupName, setGroupName] = useState('');
+    const [description, setDescription] = useState('');
+    const [groupUpdateVisible, setGroupUpdateVisible] = useState(false);
+    const [valueTab, setValueTab] = useState('1');
+    const handleChangeTab = (event, newValue) => {
+        setValueTab(newValue);
+    };
+    const Map = useMemo(() => dynamic(() => import("./Map"), {
+        loading: () => isValidElement(loadingComponent) ? cloneElement(loadingComponent, { height: mapsHeight }) : null,
+        ssr: false
+    }), []);
+    const getUsersList = async () => {
+        try {
+            let page = 1;
+            const pageSize = 100;
+            let usersData = [];
+            let moreData = true;
+            while (moreData) {
+                const usersList = await handleGetUsersList({
+                    page,
+                    pageSize,
+                });
+                if (usersList.users && usersList.users.length > 0) {
+                    usersData = [...usersData, ...usersList.users];
+                }
+                // Se il numero di utenti restituiti è minore di pageSize, non ci sono più pagine da caricare
+                moreData = usersList.users.length === pageSize;
+                page++;
+            }
+            const userGroupsUserIds = usersGroup.map((ug) => ug.user.userId);
+            setUsersList(usersData.filter((user) => user.role === 'support' && !userGroupsUserIds.includes(user.uid)).map((user) => {
+                const userName = user.name ? user.name.replace("/", " ") : "";
+                return { label: `${userName} (${user.email})`, id: user.uid };
+            }));
+        }
+        catch (err) {
+            console.log(err);
+        }
+    };
+    const fetchDevices = async (group, selected) => {
+        try {
+            setLoadingDevices(true);
+            const devices = await handleGetDevices(userInfo, group, selected);
+            setDevices(devices);
+            if (enableMaps) {
+                const positions = await handleGetPositions(devices);
+                setPositions(positions);
+            }
+        }
+        catch (error) {
+            console.log(error);
+        }
+        finally {
+            setLoadingDevices(false);
+        }
+    };
+    const getGroups = async () => {
+        try {
+            const responseData = await handleGetGroups(1008, userInfo);
+            setGroups(responseData);
+        }
+        catch (err) {
+            console.error(err);
+        }
+    };
+    const getUsersGroup = async (groupID) => {
+        try {
+            const responseData = await handleGetUsersGroup(groupID);
+            setUsersGroup(responseData);
+        }
+        catch (err) {
+            console.error(err);
+        }
+    };
+    useEffect(() => {
+        if (userInfo) {
+            getGroups();
+        }
+    }, [userInfo]);
+    useEffect(() => {
+        if (usersGroup) {
+            getUsersList();
+        }
+    }, [usersGroup]);
+    useEffect(() => {
+        if (currentGroup && !checkboxSelection) {
+            setSelectedGroup(currentGroup);
+            setGroupInfo(groups && groups.find((g) => g.id === currentGroup));
+            getUsersGroup(currentGroup);
+            fetchDevices(currentGroup, currentGroup);
+        }
+    }, [currentGroup]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setLoadingAdd(true);
+        try {
+            const newGroup = {
+                name: groupName,
+                description,
+                productID: 1008, // Assuming this is the correct productID
+            };
+            const id = await handleCreateGroup(newGroup);
+            await getGroups();
+            setCurrentGroup(id);
+            setGroupInfo({ ...newGroup, id });
+            setSelectedGroup(id);
+            setDevicesToAdd([]), setEditGroup(!editGroup);
+            setCheckboxSelection(!checkboxSelection);
+            fetchDevices(id, id);
+            handleCloseAdd();
+        }
+        catch (error) {
+            console.error('Error creating group:', error);
+            // Handle error (e.g., show error message to user)
+        }
+        finally {
+            setLoadingAdd(false);
+        }
+    };
+    const handleChangeGroupSelect = (event, newValue) => {
+        setCurrentGroup(newValue?.id || 'all');
+    };
+    const handleOpenAdd = () => setOpenAdd(true);
+    const handleCloseAdd = () => {
+        setOpenAdd(false);
+        setGroupName('');
+        setDescription('');
+    };
+    const addDevicesToCurrentGroup = () => {
+        setGroupUpdateVisible(false);
+        setCheckboxSelection(true);
+        setDevicesToAdd([]);
+        setSelectedGroup(currentGroup);
+        if (currentGroup !== 'all') {
+            setCurrentGroup('all');
+            fetchDevices('all', currentGroup);
+        }
+    };
+    const addToSelectedGroup = async () => {
+        setLoadingGroups(true);
+        try {
+            const selectedData = devices.filter((row) => devicesToAdd.includes(row.id));
+            const devicesToPatch = selectedData?.map((device) => ({ id: device.id, groups: device.state.groups, managers: device.managers }));
+            const devicesPatched = await handleAddDevicesToGroup(userInfo, selectedGroup, devicesToPatch);
+            if (devicesPatched && devicesPatched.length > 0) {
+                // get all members of the group
+                const userIdsToAdd = usersGroup.map((ug) => ug.user.userId);
+                if (userIdsToAdd.length > 0) {
+                    for (const device of devicesToPatch) {
+                        // add members to devices managers
+                        await handleUpdateDevice(device.id, {
+                            managers: [
+                                ...device.managers,
+                                ...userIdsToAdd
+                            ]
+                        }, userInfo);
+                    }
+                }
+                setLoadingGroups(false);
+                setCurrentGroup(selectedGroup);
+                setDevicesToAdd([...[]]);
+                fetchDevices(selectedGroup, selectedGroup);
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            setLoadingGroups(false);
+        }
+    };
+    const removeFromCurrentGroup = async () => {
+        setLoadingGroups(true);
+        try {
+            const devicesToRemove = devices.filter((row) => devicesToAdd.includes(row.id));
+            const devicesToPatch = devicesToRemove?.map((device) => ({ id: device.id, groups: device.state.groups, managers: device.managers }));
+            const devicesPatched = await handleRemoveDevicesFromGroup(userInfo, selectedGroup, devicesToPatch);
+            if (devicesPatched && devicesPatched.length > 0) {
+                for (const device of devicesToPatch) {
+                    if (device.managers.length > 0) {
+                        let managersToKeep = device.managers || [];
+                        for (const manager of device.managers) {
+                            // should check if device is present in other groups the user is member of
+                            const groupsData = await handleGetGroups(1008, { role: 'support', uid: manager });
+                            const userGroupIds = groupsData.map((group) => group.id);
+                            const found = device.groups && device.groups.some((gID) => userGroupIds.includes(gID));
+                            if (!found) {
+                                // @ts-ignore
+                                managersToKeep = managersToKeep.filter(man => man !== manager);
+                            }
+                        }
+                        await handleUpdateDevice(device.id, {
+                            managers: managersToKeep
+                        }, userInfo);
+                    }
+                }
+                setLoadingGroups(false);
+                setDevicesToAdd([]);
+                fetchDevices(currentGroup, selectedGroup);
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            setLoadingGroups(false);
+        }
+    };
+    const closeEditGroup = () => {
+        setCurrentGroup(selectedGroup);
+        setGroupUpdateVisible(false);
+        setDevicesToAdd([]);
+        setEditGroup(!editGroup);
+        setCheckboxSelection(!checkboxSelection);
+    };
+    const renderMaps = (_jsx(Map, { positions: positions, mapsClickCallback: mapsClickCallback, height: mapsHeight }));
+    const renderDataGrid = (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { checkboxSelection: checkboxSelection, onRowSelectionModelChange: (ids) => {
+                if (checkboxSelection) {
+                    setDevicesToAdd(ids);
+                }
+            }, rowSelectionModel: devicesToAdd, disableDensitySelector: true, disableColumnSelector: true, disableRowSelectionOnClick: true, loading: loadingDevices, rows: devices, columns: checkboxSelection ? columnsArray.filter(col => col.field !== 'id') : columnsArray, slots: {
+                noRowsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: currentGroup !== 'all' ? _jsxs(_Fragment, { children: [_jsx(Box, { children: "No devices in group" }), editGroup ? _jsxs(Button, { onClick: () => addDevicesToCurrentGroup(), variant: "outlined", color: "primary", size: "small", sx: { mt: 2 }, children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), " Add devices"] }) : ''] }) : "No devices" })),
+                noResultsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: "Filter returns no result" })),
+                toolbar: GridToolbar,
+            }, slotProps: {
+                toolbar: {
+                    showQuickFilter: true,
+                    csvOptions: { disableToolbarButton: true },
+                    printOptions: { disableToolbarButton: true },
+                },
+            }, initialState: {
+                sorting: {
+                    sortModel: [{ field: 'online', sort: 'desc' }],
+                },
+            }, ...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 renderDatagridAndMaps = (enableMaps ?
+        containerDataGrid === 'Card' ?
+            _jsx(Card, { ...containerProps, children: renderTabContext }) : _jsx(Box, { ...containerProps, children: renderTabContext }) : containerDataGrid === 'Card' ?
+        _jsx(Card, { ...containerProps, children: renderDataGrid }) : _jsx(Box, { ...containerProps, children: renderDataGrid }));
+    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', justifyContent: 'space-between', mb: 1, backgroundColor: editGroup ? 'secondary.light' : '', borderRadius: 3, px: editGroup ? 2 : 0, py: 1, height: 50 }, children: [editGroup ? _jsxs(Typography, { variant: 'subtitle1', children: [_jsx(Box, { component: 'span', sx: { display: { xs: 'none' } }, children: "Edit group" }), " ", _jsx("b", { children: groupInfo?.name })] }) : '', groups && !checkboxSelection && !(editGroup && currentGroup === 'all') ?
+                            _jsx(Autocomplete, { disablePortal: true, onChange: handleChangeGroupSelect, value: groupInfo?.name || 'All devices', disableClearable: currentGroup === 'all', isOptionEqualToValue: (o, v) => o.label === v, options: [{ label: '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: "Group" }) })
+                            : '', userInfo.role === 'admin' &&
+                            _jsxs(Box, { children: [checkboxSelection ?
+                                        _jsx(Input, { value: selectedGroup, type: 'hidden', size: 'small' })
+                                        : '', selectedGroup === '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" }), " group"] }) : '', 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" }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "\u00A0Group devices" })] }), _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" }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "\u00A0Group devices" })] }) :
+                                                _jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => addDevicesToCurrentGroup(), sx: { ml: 2 }, variant: "outlined", color: "primary", size: "small", children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), " Add devices"] }), _jsxs(Button, { onClick: () => setGroupUpdateVisible(true), sx: { ml: 2 }, variant: "outlined", color: "success", size: "small", children: [_jsx(SettingsIcon, { fontSize: "small" }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "\u00A0Manage group" })] })] })
+                                                : _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 group"] })
+                                        : '', selectedGroup !== 'all' ?
+                                        _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" }), " group"] }) }) : ''] })] }), _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 Group", action: _jsx(IconButton, { onClick: handleCloseAdd, children: _jsx(CloseIcon, {}) }) }), _jsx(CardContent, { children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TextField, { fullWidth: true, label: "Group 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, { confirmMui: confirmMui, userInfo: userInfo, 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 () => { closeEditGroup(); await getGroups(); setCurrentGroup('all'); }, container: 'Card', handleDeleteGroup: handleDeleteGroup, handleUpdateGroup: handleUpdateGroup, devicesList: devices.map((device) => ({ id: device.id, state: device.state, managers: device.managers })) })] }) }));
+};
+export default GroupsDevices;

package/components/groups/Map.d.ts

@@ -0,0 +1,14 @@
+import 'leaflet/dist/leaflet.css';
+import "leaflet-defaulticon-compatibility";
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
+export type Position = {
+    deviceID: string;
+    name: string;
+    lat: number;
+    lng: number;
+};
+export default function Map({ positions, height, mapsClickCallback }: {
+    positions: Position[];
+    height: string;
+    mapsClickCallback: (position: Position) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/components/groups/Map.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MapContainer, Marker, TileLayer, Popup } from "react-leaflet";
+import L from 'leaflet';
+import MarkerClusterGroup from 'react-leaflet-cluster';
+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 = () => { } }) {
+    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" }) });
+}

package/components/groups/index.d.ts

@@ -0,0 +1,3 @@
+export { default as GroupUpdate } from "./GroupUpdate";
+export { default as GroupsDevices } from "./GroupsDevices";
+export { default as Map } from "./Map";

package/components/groups/index.js

@@ -0,0 +1,3 @@
+export { default as GroupUpdate } from "./GroupUpdate";
+export { default as GroupsDevices } from "./GroupsDevices";
+export { default as Map } from "./Map";

package/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./accounts";
+export * from "./charts";
+export * from "./groups";
+export * from "./settings";
+export * from "./users";

package/components/index.js

@@ -0,0 +1,5 @@
+export * from "./accounts";
+export * from "./charts";
+export * from "./groups";
+export * from "./settings";
+export * from "./users";

package/components/settings/DynamicMenu.d.ts

@@ -0,0 +1,17 @@
+import { SvgIconProps } from "@mui/material/SvgIcon";
+import { Theme } from "@emotion/react";
+interface MenuItem {
+    name: string;
+    description: string;
+    page: ({ handleBack }: {
+        handleBack?: () => void;
+    }) => JSX.Element;
+    icon?: React.ReactElement<SvgIconProps>;
+}
+interface DynamicMenuProps {
+    menuItems: MenuItem[];
+    selectedIndex?: number | null;
+    theme: Theme;
+}
+declare const DynamicMenu: React.FC<DynamicMenuProps>;
+export default DynamicMenu;

package/components/settings/DynamicMenu.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, useState } from "react";
+import { Box, Card, CardContent, List, ListItemButton, ListItemText, styled, ThemeProvider } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+const ListItemButtonSettings = styled(ListItemButton)(({ theme, selected }) => ({
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    '& span': {
+        fontWeight: 'bold',
+        color: theme.palette.primary.contrastText,
+    },
+    '& p': {
+        color: theme.palette.primary.contrastText,
+    },
+    '&:hover': {
+        backgroundColor: theme.palette.primary.light,
+        color: theme.palette.primary.contrastText
+    },
+    ...(selected && {
+        '& span': {
+            fontWeight: 'bold',
+            color: '#000',
+        },
+        '& p': {
+            color: '#000'
+        },
+        '&.Mui-selected, &.Mui-selected:hover': {
+            backgroundColor: '#fff',
+        },
+    })
+}));
+// Stile personalizzato per ListItemButton
+const DynamicMenu = ({ menuItems, selectedIndex = null, theme }) => {
+    const [selected, setSelected] = useState(selectedIndex);
+    const handleMenuClick = (index) => {
+        setSelected(index); // Assicurati di non chiamarlo nel rendering
+    };
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Grid, { container: true, spacing: 2, sx: { width: '100%' }, children: _jsx(Grid, { size: { xs: 12, lg: 9 }, children: _jsx(Card, { sx: { borderRadius: 2 }, children: _jsx(CardContent, { sx: { p: 0, "&:last-child": { p: 0 } }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { size: { xs: 12, sm: 4 }, sx: { display: { xs: selected !== null ? 'none' : 'block', sm: 'block' } }, children: _jsx(List, { sx: { p: 0, height: "100%", backgroundColor: "primary.main" }, children: menuItems.map((item, index) => (_jsxs(ListItemButtonSettings, { selected: selected === index, onClick: () => handleMenuClick(index), children: [item.icon && _jsx(Box, { sx: { mr: 2 }, children: item.icon }), _jsx(ListItemText, { primary: _jsx("b", { children: item.name }), secondary: item.description }), _jsx(NavigateNextIcon, { sx: { display: { xs: "block", sm: "none" } } })] }, index))) }) }), _jsx(Grid, { size: { xs: 12, sm: 8, md: 6 }, sx: { display: { xs: selected === null ? 'none' : 'block', sm: 'block' } }, children: _jsx(Box, { component: "div", sx: { p: { xs: 2 }, py: { sm: 3 } }, children: selected !== null ? createElement(menuItems[selected].page, { handleBack: () => { setSelected(null); } }) : "" }) })] }) }) }) }) }) }));
+};
+export default DynamicMenu;

package/components/settings/index.d.ts

@@ -0,0 +1 @@
+export { default as DynamicMenu } from "./DynamicMenu";

package/components/settings/index.js

@@ -0,0 +1 @@
+export { default as DynamicMenu } from "./DynamicMenu";

package/components/users/UserUpdate.d.ts

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

package/components/users/UserUpdate.js

@@ -0,0 +1,26 @@
+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 [userRole, setUserRole] = useState(userInfo.role || roles[0]);
+    const [loadingButton, setLoadingButton] = useState(false);
+    const handleChangeRole = (event) => {
+        setUserRole(event.target.value);
+    };
+    const handleUpdate = async () => {
+        setLoadingButton(true);
+        try {
+            await handleUpdateUser(userInfo.id, { role: userRole });
+        }
+        catch (error) {
+            console.error(error);
+        }
+        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 _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsx(Card, { ...containerProps, children: _jsx(CardContent, { sx: { py: 0 }, children: renderUserUpdate() }) })) : (_jsx(Box, { ...containerProps, children: renderUserUpdate() })) });
+};
+export default UserUpdate;

package/components/users/UsersDataGrid.d.ts

@@ -0,0 +1,23 @@
+import { UserType } from '../../types/user';
+import { Theme } from '@emotion/react';
+declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, containerProps, props, loadingComponent, theme }: {
+    handleGetUsersList: ({ page, pageSize, filter }: {
+        page: number;
+        pageSize: number;
+        filter?: {
+            field?: string;
+            operator?: string;
+            value: string;
+        };
+    }) => Promise<{
+        users: UserType[];
+        rowCount: number;
+    }>;
+    pageSize: number;
+    container?: "Card" | "Box";
+    containerProps?: object | undefined;
+    props?: object | undefined;
+    loadingComponent?: React.ReactNode;
+    theme: Theme;
+}) => 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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { DataGrid, getGridStringOperators, GridLogicOperator, GridToolbar } from '@mui/x-data-grid';
+import { Card, Box, Button, CircularProgress, ThemeProvider } from '@mui/material';
+import moment from 'moment';
+import EditIcon from '@mui/icons-material/Edit';
+import { useRouter } from 'next/navigation';
+const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', containerProps = {}, props = {}, loadingComponent = _jsx(CircularProgress, {}), theme }) => {
+    const router = useRouter();
+    const [usersList, setUsersList] = useState(undefined);
+    const [userCount, setUserCount] = useState(undefined);
+    const [isLoading, setIsLoading] = useState(true);
+    const [paginationModel, setPaginationModel] = useState({
+        page: 0,
+        pageSize: pageSize || 1,
+    });
+    const [filterModel, setFilterModel] = useState({
+        items: [],
+        quickFilterLogicOperator: GridLogicOperator.Or,
+        quickFilterValues: []
+    });
+    const getUsersList = async () => {
+        setIsLoading(true);
+        try {
+            const usersList = await handleGetUsersList({
+                page: paginationModel.page + 1,
+                pageSize: paginationModel.pageSize,
+                filter: filterModel.quickFilterValues && filterModel.quickFilterValues.length > 0 ?
+                    { value: filterModel.quickFilterValues[0] }
+                    : filterModel.items.length > 0 ?
+                        { field: filterModel.items[0].field, operator: filterModel.items[0].operator, value: filterModel.items[0].value }
+                        : undefined
+            });
+            setUsersList(usersList.users);
+            setUserCount(usersList.rowCount);
+        }
+        catch (err) {
+            console.log(err);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    useEffect(() => {
+        getUsersList();
+    }, [paginationModel, filterModel]);
+    if (!usersList && isLoading) {
+        return loadingComponent;
+    }
+    const renderUsersList = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { disableDensitySelector: true, disableColumnSelector: true, disableRowSelectionOnClick: true, disableColumnResize: true, disableColumnSorting: true, columns: [
+                {
+                    field: 'role', filterable: false, disableColumnMenu: true, display: 'flex', flex: 0.125, minWidth: 80, headerName: 'Role', renderCell: (params) => (_jsx(_Fragment, { children: params.value ? params.value.charAt(0).toUpperCase() + params.value.slice(1) : '' }))
+                },
+                {
+                    field: 'name', filterOperators: getGridStringOperators().filter((operator) => operator.value === 'contains' || operator.value === 'equals'), display: 'flex', flex: 0.400, minWidth: 140, headerName: 'Full name', renderCell: (params) => (_jsx(_Fragment, { children: params.value ? params.value.replace('/', ' ') : '' }))
+                },
+                {
+                    field: 'email', filterOperators: getGridStringOperators().filter((operator) => operator.value === 'contains' || operator.value === 'equals'), display: 'flex', flex: 0.400, minWidth: 180, headerName: 'Email address', renderCell: (params) => (_jsx(_Fragment, { children: params.value }))
+                },
+                {
+                    field: 'lastSignInAt', filterable: false, disableColumnMenu: true, display: 'flex', minWidth: 160, headerName: 'Last Signed In', renderCell: (params) => (_jsx(_Fragment, { children: params.value ? moment(params.value).format('DD/MM/YYYY HH:mm:ss') : '' }))
+                },
+                {
+                    field: 'id', filterable: false, disableExport: true, disableColumnMenu: true, headerName: '', display: 'flex', align: 'right', renderCell: (params) => (_jsxs(Button, { onClick: () => router.push(`/users/${params.value}`), variant: 'contained', color: 'secondary', size: 'small', children: [_jsx(EditIcon, { fontSize: 'small', sx: { mr: 1 } }), " EDIT"] }))
+                }
+            ], rows: usersList, slots: {
+                toolbar: GridToolbar,
+            }, slotProps: {
+                toolbar: {
+                    printOptions: { disableToolbarButton: true },
+                    showQuickFilter: true,
+                },
+            }, rowCount: userCount, loading: isLoading, pageSizeOptions: [], paginationModel: paginationModel, paginationMode: "server", onPaginationModelChange: setPaginationModel, filterMode: "server", onFilterModelChange: setFilterModel, filterModel: filterModel, ...props }) }));
+    return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsx(Card, { ...containerProps, children: renderUsersList() })) : (_jsx(Box, { ...containerProps, children: renderUsersList() })) });
+};
+export default UsersDataGrid;

package/components/users/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UsersDataGrid } from "./UsersDataGrid";
+export { default as UserUpdate } from "./UserUpdate";

package/components/users/index.js

@@ -0,0 +1,2 @@
+export { default as UsersDataGrid } from "./UsersDataGrid";
+export { default as UserUpdate } from "./UserUpdate";

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./server-actions";
+export * from "./types";

package/index.js

@@ -0,0 +1,4 @@
+// index.ts nella root della libreria
+export * from "./components";
+export * from "./server-actions";
+export * from "./types";

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@iotready/nextjs-components-library",
+  "version": "1.0.0-preview1",
+  "main": "index.js",
+  "scripts": {
+    "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",
+    "dev": "next dev",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.5",
+    "@mui/lab": "^6.0.0-beta.13",
+    "@mui/material": "^6.1.5",
+    "@mui/x-data-grid": "^7.21.0",
+    "@mui/x-date-pickers": "^7.21.0",
+    "chartjs-adapter-moment": "^1.0.1",
+    "chartjs-plugin-annotation": "^3.1.0",
+    "chartjs-plugin-zoom": "^2.0.1",
+    "firebase": "^10.13.1",
+    "leaflet": "^1.9.4",
+    "leaflet-defaulticon-compatibility": "^0.1.2",
+    "material-ui-confirm": "^3.0.16",
+    "moment": "^2.30.1",
+    "next": "^14.2.9",
+    "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
+    "react-csv": "^2.2.2",
+    "react-dom": "^18",
+    "react-leaflet-cluster": "^2.1.0",
+    "wretch": "^2.10.0"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.13",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-csv": "^1.1.10",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.9",
+    "typescript": "^5"
+  }
+}