@iotready/nextjs-components-library 1.0.0-preview1

package/components/charts/TrendChart.js

@@ -0,0 +1,454 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Line } from 'react-chartjs-2';
+import { Chart as ChartJS, Colors, Title, LinearScale, Legend, Tooltip, TimeScale, PointElement, LineElement } from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import 'chartjs-adapter-moment';
+import { ToggleButtonGroup, ToggleButton, Box, Button, Typography } from "@mui/material";
+import moment from 'moment';
+import { LoadingButton } from '@mui/lab';
+import { CSVLink } from "react-csv";
+import CircularProgress from '@mui/material/CircularProgress';
+import ZoomOut from '@mui/icons-material/ZoomOut';
+import LoginIcon from '@mui/icons-material/Login';
+import SearchOffOutlinedIcon from '@mui/icons-material/SearchOffOutlined';
+import { LocalizationProvider, DateTimePicker } from "@mui/x-date-pickers";
+import 'moment/locale/it';
+// import 'moment/locale/en-gb'; // TODO set locale based on browser
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { ThemeProvider } from '@mui/material/styles';
+const lineOptions = {
+    parsing: false,
+    normalized: true,
+    spanGaps: true, // enable for all datasets
+    // showLine: false, // disable for all datasets
+    animation: false,
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+        intersect: false,
+        mode: 'nearest',
+        axis: 'x'
+    },
+    plugins: {
+        tooltip: {
+            callbacks: {
+                label: (context) => {
+                    return `${context.dataset.label}: ${context.parsed.y.toFixed(2)} ${context.dataset.unit}`;
+                }
+            },
+        },
+        zoom: {
+            zoom: {
+                drag: {
+                    enabled: true,
+                },
+                pinch: {
+                    enabled: true
+                },
+                mode: 'x',
+            },
+        },
+    },
+    scales: {
+        x: {
+            type: 'time',
+            time: {
+                unit: "hour",
+                displayFormats: {
+                    month: 'MMM YY',
+                    week: 'DD MMM YY',
+                    day: 'DD MMM YY',
+                    hour: 'DD MMM HH:mm',
+                    minute: 'HH:mm'
+                }
+            },
+            title: {
+                display: false,
+            },
+            ticks: {
+                stepSize: 1,
+            },
+            grid: {
+                drawOnChartArea: false,
+            }
+        },
+        y: {
+            ticks: {
+                callback: function (value) {
+                    if (Math.floor(value) === value) {
+                        return value;
+                    }
+                }
+            }
+        },
+    },
+};
+const chartConfigByPeriod = {
+    '1H': {
+        from: { days: 1 / 24 },
+        scaleUnit: 'minute',
+    },
+    '1D': {
+        from: { days: 1 },
+        scaleUnit: 'hour',
+    },
+    '1W': {
+        from: { days: 7 },
+        scaleUnit: 'day',
+    },
+    '1M': {
+        from: { days: 30 },
+        scaleUnit: 'week',
+    },
+    '3M': {
+        from: { days: 90 },
+        scaleUnit: 'month',
+    },
+    '6M': {
+        from: { days: 180 },
+        scaleUnit: 'month',
+    },
+    '1Y': {
+        from: { days: 365 },
+        scaleUnit: 'year',
+    },
+    'ALL': {
+        from: { days: 365 }, // not used
+        scaleUnit: 'year',
+    }
+};
+function GetPoints(data) {
+    const points = data.results[0].series[0].values.map((row) => {
+        return {
+            x: moment.unix(row[0]),
+            y: row[1]
+        };
+    });
+    return points;
+}
+function getPollTime(intervalInSeconds, pollTime) {
+    const CalculatedPollTime = Math.round(intervalInSeconds / 2880);
+    if (CalculatedPollTime <= pollTime) {
+        return pollTime + "s";
+    }
+    else {
+        return CalculatedPollTime + "s";
+    }
+}
+function getCsvData(data, measures) {
+    // Initialize the header with timestamp and measure names
+    const headers = ["timestamp", ...measures.map(measure => measure.name)];
+    const csvData = [];
+    // Add the header to the csvData
+    csvData.push(headers);
+    // Collect all timestamps and values for each measure
+    const timestampMap = {};
+    // Populate timestampMap with data for each timestamp
+    data.forEach((obj) => {
+        obj.results[0].series.forEach((series) => {
+            series.values.forEach((value) => {
+                const timestamp = moment.unix(value[0]).toISOString();
+                if (!timestampMap[timestamp]) {
+                    timestampMap[timestamp] = { timestamp: timestamp };
+                }
+                const measureName = series.name; // Assuming the series name corresponds to the measure name
+                if (measures.some(measure => measure.name === measureName)) {
+                    timestampMap[timestamp][measureName] = value[1]; // Assign the value to the measure
+                }
+            });
+        });
+    });
+    // Create rows from timestampMap
+    Object.values(timestampMap).forEach((entry) => {
+        const row = [entry.timestamp];
+        measures.forEach(measure => {
+            // Push the corresponding value or an empty string if undefined
+            row.push(entry[measure.name] !== undefined ? entry[measure.name] : "");
+        });
+        // Check if the row contains only empty values (besides the timestamp)
+        const hasNonEmptyValues = row.slice(1).some(value => value !== null && value !== '' && value !== undefined);
+        // If the row has at least one non-empty value or just the timestamp, add it to csvData
+        if (hasNonEmptyValues || row.length === 1) {
+            csvData.push(row);
+        }
+    });
+    // Join rows into a CSV string
+    return csvData.map(row => row.join(',')).join('\n');
+}
+// eslint-disable-next-line no-unused-vars
+const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, handleGetInfluxData, handleGetFirstTimestamp, theme, ...props }) => {
+    const [chartJsLoaded, setChartJsLoaded] = useState(false);
+    const [dataMeasures, setDataMeasures] = useState(null);
+    const [chartPeriod, setChartPeriod] = useState('1D');
+    const [chartPeriodConfig, setChartPeriodConfig] = useState(chartConfigByPeriod['1D']);
+    const [chartLoading, setChartLoading] = useState(false);
+    const [timeStart, setTimeStart] = useState(moment().subtract(1, 'day').unix());
+    const [timeEnd, setTimeEnd] = useState(moment().unix());
+    const [firstTimestamp, setFirstTimestamp] = useState();
+    const [datePickerUsed, setDatePickerUsed] = useState(false);
+    const [loadingButton, setLoadingButton] = useState(false);
+    const csvLinkRef = useRef(null);
+    const [csvData, setCsvData] = useState('');
+    const [options, setOptions] = useState({
+        ...lineOptions,
+        plugins: {
+            ...lineOptions.plugins,
+            legend: {
+                display: enableExportData ? true : false,
+                position: 'bottom', // Legenda sotto il grafico
+            },
+            zoom: {
+                // @ts-ignore
+                zoom: {
+                    ...lineOptions.plugins.zoom.zoom,
+                    onZoom: async (chart) => {
+                        setChartLoading(true);
+                        setZoomed(true);
+                        setTimeStart(Math.round(moment(chart.chart.scales.x.min).valueOf() / 1000));
+                        setTimeEnd(Math.round(moment(chart.chart.scales.x.max).valueOf() / 1000));
+                    }
+                }
+            }
+        }
+    });
+    const [zoomed, setZoomed] = useState(false);
+    const resetChart = () => {
+        setOptions({
+            ...options,
+            scales: {
+                ...options.scales,
+                y: {
+                    ...options.scales.y,
+                    min: 0,
+                    max: 1
+                }
+            }
+        });
+        setDataMeasures([...[]]);
+        setCsvData("");
+    };
+    const handleChange = (event, newPeriod) => {
+        setZoomed(false);
+        setDatePickerUsed(false);
+        setCsvData('');
+        if (newPeriod === "ALL") {
+            setTimeStart(firstTimestamp - 86400);
+            setTimeEnd(moment().unix());
+            setChartPeriod(newPeriod);
+            return;
+        }
+        const periodConfig = chartConfigByPeriod[newPeriod];
+        if (periodConfig) {
+            setTimeStart(Math.round(moment().subtract(periodConfig.from).valueOf() / 1000));
+            setTimeEnd(Math.round(moment().valueOf() / 1000));
+            setChartPeriod(newPeriod);
+            setChartPeriodConfig(periodConfig);
+        }
+    };
+    const handleExportData = async () => {
+        setLoadingButton(true);
+        const intervalInSeconds = timeEnd - timeStart;
+        const data = await Promise.all(measures.map(async (measure) => {
+            const polltime = getPollTime(intervalInSeconds, measure.polltime);
+            return await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, true);
+        }));
+        const csvData = getCsvData(data, measures);
+        setCsvData(csvData);
+        setLoadingButton(false);
+    };
+    useEffect(() => {
+        if (csvData.length > 0) {
+            csvLinkRef.current?.link.click();
+        }
+    }, [csvData]);
+    const loadDatasets = async (chartPeriod) => {
+        setChartLoading(true);
+        const intervalInSeconds = timeEnd - timeStart;
+        // Inizializza un array di promesse per ottenere i dati per ciascuna misura
+        const datasetsPromises = measures.map(async (measure) => {
+            const polltime = getPollTime(intervalInSeconds, measure.polltime);
+            const influxData = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, false);
+            const points = GetPoints(influxData);
+            return {
+                label: measure.name,
+                data: points,
+                unit: measure.unit,
+                // borderColor: `hsl(${index * 50}, 70%, 50%)`, // Colore unico per ogni dataset
+                borderWidth: 2,
+                pointRadius: 1,
+                pointHoverRadius: 5,
+                pointHoverBackgroundColor: 'rgba(52, 125, 236, 0.5)',
+                spanGaps: false,
+                fill: false
+            };
+        });
+        // Risolvi tutte le promesse per popolare i dataset
+        const datasets = await Promise.all(datasetsPromises);
+        let min = null;
+        let max = null;
+        let values = [];
+        datasets.forEach(dataset => {
+            values = [...values, ...dataset.data.map((point) => point.y).filter((data) => data !== null)];
+            const datasetMin = Math.min(...values);
+            const datasetMax = Math.max(...values);
+            if (min === null || datasetMin < min)
+                min = datasetMin;
+            if (max === null || datasetMax > max)
+                max = datasetMax;
+        });
+        let paddedMin = null;
+        let paddedMax = null;
+        if (min !== null && max !== null) {
+            const diff = Math.round((max - min) / 3) || 1;
+            paddedMin = min - diff;
+            paddedMax = max + diff;
+        }
+        setDataMeasures([...datasets]);
+        setOptions({
+            ...options,
+            scales: {
+                ...options.scales,
+                y: {
+                    ...options.scales.y,
+                    min: paddedMin,
+                    max: paddedMax,
+                },
+                x: {
+                    ...options.scales.x,
+                    min: moment.unix(timeStart).toString(),
+                    max: moment.unix(timeEnd).toString(),
+                    time: {
+                        ...options.scales.x.time,
+                        unit: chartPeriod.scaleUnit
+                    }
+                }
+            }
+        });
+    };
+    useEffect(() => {
+        const fetchFirstTimestamp = async () => {
+            const response = await handleGetFirstTimestamp(deviceId);
+            if (response) {
+                setFirstTimestamp(response);
+            }
+        };
+        fetchFirstTimestamp();
+    }, []);
+    useEffect(() => {
+        const timeDifference = Math.abs(moment(timeStart).valueOf() - moment(timeEnd).valueOf()); // Convert milliseconds to seconds
+        let newChartPeriod = '1D'; // Default to 1 day
+        if (timeDifference < 86400) { // Less than 1 day
+            newChartPeriod = '1H'; // Set to 1 day
+        }
+        else if (timeDifference < 604800) { // Less than 1 week
+            newChartPeriod = '1D'; // Set to 1 day
+        }
+        else if (timeDifference < 2629800) { // Less than 1 month
+            newChartPeriod = '1W'; // Set to 1 week
+        }
+        else if (timeDifference < 7889400) { // Less than 3 months
+            newChartPeriod = '1M'; // Set to 1 month
+        }
+        else if (timeDifference < 15778440) { // Less than 6 months
+            newChartPeriod = '3M'; // Set to 3 months
+        }
+        else if (timeDifference < 31556926) { // Less than 1 year
+            newChartPeriod = '6M'; // Set to 6 months
+        }
+        else {
+            newChartPeriod = '1Y'; // Set to 1 year
+        }
+        setChartPeriodConfig(chartConfigByPeriod[newChartPeriod]);
+        loadDatasets(chartPeriod).then(() => {
+            setChartLoading(false);
+        });
+    }, [timeEnd, timeStart]);
+    useEffect(() => {
+        const loadZoomPlugin = async () => {
+            const zoomPlugin = (await import('chartjs-plugin-zoom')).default;
+            ChartJS.register(Colors, Legend, Title, Tooltip, PointElement, LineElement, LinearScale, TimeScale, annotationPlugin, zoomPlugin, {
+                id: 'uniqueid5',
+                afterDraw: function (chart) {
+                    if (chart.tooltip?._active && chart.tooltip?._active.length) {
+                        const activePoint = chart.tooltip._active[0];
+                        const ctx = chart.ctx;
+                        const x = activePoint.element.x;
+                        const topY = chart.scales.y.top;
+                        const bottomY = chart.scales.y.bottom;
+                        ctx.save();
+                        ctx.beginPath();
+                        ctx.moveTo(x, topY);
+                        ctx.lineTo(x, bottomY);
+                        ctx.lineWidth = 1;
+                        ctx.strokeStyle = '#722257';
+                        ctx.stroke();
+                        ctx.restore();
+                    }
+                }
+            });
+            setChartJsLoaded(true);
+        };
+        loadZoomPlugin();
+        resetChart();
+    }, []);
+    const datePicker = _jsx(Box, { sx: { display: 'flex', alignItems: 'center', mr: { xs: 0, lg: 2 } }, children: _jsxs(LocalizationProvider, { dateAdapter: AdapterMoment, adapterLocale: "it", children: [_jsx(DateTimePicker, { value: moment(timeStart * 1000), 
+                    // format="DD/MM/YY hh:mm A"
+                    onChange: (newValue) => {
+                        setTimeStart((moment(newValue).unix()));
+                    }, maxDate: moment(timeEnd * 1000), slotProps: {
+                        textField: { size: 'small', sx: { width: { sm: 210 } } }
+                    } }), " \u00A0\u00A0 ", _jsx(Box, { children: "\u2013" }), " \u00A0\u00A0", _jsx(DateTimePicker, { value: moment(timeEnd * 1000), 
+                    // format="DD/MM/YY hh:mm A"
+                    onChange: (newValue) => {
+                        setTimeEnd((moment(newValue).unix()));
+                    }, minDate: moment(timeStart * 1000), slotProps: {
+                        textField: { size: 'small', sx: { width: { sm: 210 } } }
+                    } })] }) });
+    return (_jsxs(ThemeProvider, { theme: theme, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'flex-end' }, mb: 2 }, children: datePicker }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { children: [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
+                                    //@ts-ignore
+                                    , { 
+                                        //@ts-ignore
+                                        ref: csvLinkRef, data: csvData, filename: `export_${moment().toISOString()}.csv`, separator: ';' })] })), zoomed && (_jsxs(Button, { sx: { minWidth: '40px !important', boxShadow: 1, px: 1 }, variant: "contained", color: "secondary", size: 'small', onClick: () => {
+                                    if (datePickerUsed) {
+                                        setZoomed(false);
+                                    }
+                                    else if (chartPeriod === "ALL") {
+                                        setZoomed(false);
+                                        setTimeEnd(moment().unix());
+                                        setTimeStart(firstTimestamp - 86400);
+                                    }
+                                    else {
+                                        setZoomed(false);
+                                        setChartPeriodConfig(chartConfigByPeriod[chartPeriod]);
+                                        setTimeStart(chartPeriodConfig.from?.days
+                                            ? moment()
+                                                .subtract(chartConfigByPeriod[chartPeriod].from.days, 'days')
+                                                .unix()
+                                            : moment().subtract(1, 'day').unix());
+                                        setTimeEnd(moment().unix());
+                                    }
+                                }, children: [_jsx(ZoomOut, { fontSize: 'small' }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Reset" })] }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'none', lg: 'flex' } }, children: datePicker }), _jsxs(ToggleButtonGroup, { color: "primary", value: chartPeriod, exclusive: true, onChange: handleChange, size: "small", 
+                                // sx={{ boxShadow: 1 }}
+                                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(Box, { component: 'div', className: "chart-container", sx: { height: { xs: enableDatePicker && props.height ? `calc(${props.height} - 50px)` : props.height, lg: props.height }, minHeight: 300, mt: 2 }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
+                    _jsx(_Fragment, { children: dataMeasures && dataMeasures[0]?.data?.length ?
+                            (_jsx(Line, { options: options, data: {
+                                    datasets: dataMeasures || [{ data: [] }]
+                                } })) : _jsxs(Box, { sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                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: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        textAlign: 'center',
+                        height: '100%'
+                    }, children: _jsx(CircularProgress, {}) })) })] }));
+};
+export default TrendChart;

package/components/charts/index.d.ts

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

package/components/charts/index.js

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

package/components/groups/GroupUpdate.d.ts

@@ -0,0 +1,24 @@
+import { UserType } from '../../types';
+declare const GroupUpdate: ({ userInfo, groupInfo, usersGroup, usersList, devicesList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleUpdateGroup, handleUpdateDevice, handleDeleteGroup, container, containerProps, afterUpdateCallback, afterRemoveCallback, confirmMui }: {
+    userInfo: UserType;
+    groupInfo: any;
+    usersGroup: any[];
+    usersList: any[];
+    devicesList: {
+        id: string;
+        state: any;
+        managers: any[];
+    }[];
+    handleAddUserToGroup: (groupID: string, userName: string, userID: string) => Promise<any>;
+    handleRemoveUserFromGroup: (groupID: string, userID: string) => Promise<any>;
+    handleUpdateDevice: (id: string, body: any, user: UserType) => Promise<any>;
+    handleGetGroups: (productID: number, userInfo?: UserType) => Promise<any>;
+    handleUpdateGroup: (id: string, group: any) => Promise<void>;
+    handleDeleteGroup: (id: string) => Promise<void>;
+    container?: "Box" | "Card";
+    containerProps?: any;
+    afterUpdateCallback?: (groupInfo: any) => Promise<void>;
+    afterRemoveCallback?: () => Promise<void>;
+    confirmMui?: (options?: any) => Promise<void>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default GroupUpdate;

package/components/groups/GroupUpdate.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography, Card, CardContent, TableBody } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { useState } from 'react';
+import { FormControl, TextField, Autocomplete, Alert, Table, TableRow, TableCell } from '@mui/material';
+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 = ({ userInfo, groupInfo, usersGroup, usersList, devicesList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleUpdateGroup, handleUpdateDevice, handleDeleteGroup, container = 'Box', containerProps = {}, afterUpdateCallback, afterRemoveCallback, confirmMui }) => {
+    const [group, setGroup] = useState(groupInfo);
+    const [loadingUpdateButton, setLoadingUpdateButton] = useState(false);
+    const [loadingRemoveUserButton, setLoadingRemoveUserButton] = useState(false);
+    const [loadingAddUserButton, setLoadingAddUserButton] = useState(false);
+    const [loadingDeleteGroupButton, setLoadingDeleteGroupButton] = useState(false);
+    const [selectedUser, setSelectedUser] = useState(null);
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(null);
+    function handleChange(event) {
+        setGroup({ ...group, [event.target.name]: event.target.value });
+    }
+    const removeUserFromCurrentGroup = async (userId) => {
+        setLoadingRemoveUserButton(true);
+        try {
+            const response = await handleRemoveUserFromGroup(group.id, userId);
+            if (response) {
+                if (devicesList.length > 0) {
+                    // should check if device is present in other groups the user is member of
+                    const groupsData = await handleGetGroups(1008, { role: 'support', uid: userId });
+                    const userGroupIds = groupsData.map((group) => group.id);
+                    // for all devices in the group set the selectedUser as manager
+                    for (const device of devicesList) {
+                        // check device is in a group of user is member of
+                        const found = device.state.groups.some((gID) => userGroupIds.includes(gID));
+                        if (!found) {
+                            // remove user from managers
+                            const managers = device.managers && device.managers.filter(man => man !== userId) || [];
+                            await handleUpdateDevice(device.id, {
+                                managers
+                            }, userInfo);
+                        }
+                    }
+                }
+                if (afterUpdateCallback) {
+                    await afterUpdateCallback(group);
+                }
+            }
+        }
+        catch (err) {
+            console.log(err);
+        }
+        finally {
+            setLoadingRemoveUserButton(false);
+        }
+    };
+    const addUserToCurrentGroup = async () => {
+        setLoadingAddUserButton(true);
+        if (group && selectedUser) {
+            try {
+                const response = await handleAddUserToGroup(group.id, selectedUser.label, selectedUser.id);
+                if (response) {
+                    if (devicesList.length > 0) {
+                        for (const device of devicesList) {
+                            // for all devices in the group set the selectedUser as manager
+                            await handleUpdateDevice(device.id, {
+                                managers: [
+                                    ...(device?.managers || []),
+                                    selectedUser.id
+                                ]
+                            }, userInfo);
+                        }
+                    }
+                    if (afterUpdateCallback) {
+                        await afterUpdateCallback(group);
+                    }
+                    setSelectedUser(null);
+                }
+            }
+            catch (err) {
+                console.log(err);
+            }
+            finally {
+                setLoadingAddUserButton(false);
+            }
+        }
+        else {
+            console.log("No user");
+        }
+    };
+    const updateGroup = async () => {
+        setLoadingUpdateButton(true);
+        try {
+            await handleUpdateGroup(group.id, group);
+            if (afterUpdateCallback) {
+                afterUpdateCallback(group);
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        setLoadingUpdateButton(false);
+    };
+    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' } });
+            }
+            else {
+                confirm("Are you sure you want to delete the group?");
+            }
+            setLoadingDeleteGroupButton(true);
+            await handleDeleteGroup(group.id);
+            if (afterRemoveCallback) {
+                afterRemoveCallback();
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            setLoadingDeleteGroupButton(false);
+        }
+    };
+    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 ?
+                                    _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) => {
+                                            setSelectedUser(newValue);
+                                        }, renderInput: (params) => _jsx(TextField, { ...params, label: "Select user" }) }), _jsxs(LoadingButton, { variant: "contained", color: "success", loading: loadingAddUserButton, sx: { ml: 2 }, disabled: !selectedUser, onClick: () => addUserToCurrentGroup(), children: [_jsx(AddIcon, { sx: { mr: 1 } }), " Add"] })] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsx(Typography, { variant: 'body1', sx: { fontWeight: 'bold' }, children: "Delete group" }), _jsx(Alert, { severity: "error", sx: { mt: 2 }, action: _jsxs(LoadingButton, { variant: "contained", disabled: devicesList.length > 0, color: "error", loading: loadingDeleteGroupButton, onClick: () => deleteGroup(), size: 'small', children: [_jsx(DeleteIcon, { fontSize: "small", sx: { mr: 1 } }), " Delete"] }), children: devicesList.length === 0 ? 'This action cannot be undone' : 'You must manually remove devices from group before deletion' })] })] }) })] }));
+    };
+    return (container === "Card" ? (_jsx(Card, { ...containerProps, children: _jsx(CardContent, { children: renderGroupUpdate() }) })) : (_jsx(Box, { ...containerProps, children: renderGroupUpdate() })));
+};
+export default GroupUpdate;

package/components/groups/GroupsDevices.d.ts

@@ -0,0 +1,37 @@
+import { UserType } from '../../types/user';
+import { Position } from "./Map";
+import { Theme } from "@emotion/react";
+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 }: {
+    userInfo: UserType;
+    handleGetUsersList: ({ page, pageSize }: {
+        page: number;
+        pageSize: number;
+    }) => Promise<{
+        users: UserType[];
+    }>;
+    handleAddUserToGroup: (groupID: string, userName: string, userID: string) => Promise<any>;
+    handleRemoveUserFromGroup: (groupID: string, userID: string) => Promise<any>;
+    handleGetGroups: (productID: number, userInfo?: UserType) => Promise<any>;
+    handleGetUsersGroup: (groupID: string) => Promise<any>;
+    handleCreateGroup: (group: any) => Promise<any>;
+    handleGetDevices: (user: UserType, group: string, selected: string) => Promise<any>;
+    handleGetPositions: (devices: any) => Promise<any>;
+    handleAddDevicesToGroup: (user: UserType, group: string, devicesToPatch: any[]) => Promise<any>;
+    handleRemoveDevicesFromGroup: (user: UserType, group: string, devicesToPatch: any[]) => Promise<any>;
+    handleDeleteGroup: (id: string) => Promise<void>;
+    handleUpdateGroup: (id: string, group: any) => Promise<void>;
+    handleUpdateDevice: (id: string, body: any, user: UserType) => Promise<any>;
+    group: string;
+    columnsArray: any[];
+    containerDataGrid?: "Card" | "Box";
+    props?: any;
+    propsDatagrid?: any;
+    loadingComponent?: React.ReactNode;
+    containerProps?: any;
+    enableMaps?: boolean;
+    mapsHeight: string;
+    mapsClickCallback?: (position: Position) => void;
+    theme: Theme;
+    confirmMui?: (options?: any) => Promise<void>;
+}) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").AwaitedReactNode> | null;
+export default GroupsDevices;