@iotready/nextjs-components-library 1.0.0-preview27 → 1.0.0-preview29

package/components/accounts/AccountMenu.js

@@ -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.email, src: userInfo.picture, children: userInfo.picture ? '' : 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" }) }), " 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() }) }) })] }) }));
 }

package/components/accounts/AccountProfile.js

@@ -74,7 +74,7 @@ const AccountProfile = ({ userAccount, handleSignOut, handleUpdateUser, handleUp
         setLoadingUpdateButton(true);
         if (userInfo) {
             try {
-                await handleUpdateUser(userInfo.id, { name: userInfo.name, firstname: userInfo.firstname, lastname: userInfo.lastname });
+                await handleUpdateUser(userInfo.id, { firstname: userInfo.firstname, lastname: userInfo.lastname });
                 if (afterUpdateCallback) {
                     afterUpdateCallback(userInfo);
                 }

package/components/charts/TrendChart.js

@@ -2,7 +2,7 @@
 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 { Chart as ChartJS, Colors, Title, LinearScale, Legend, Tooltip, TimeScale, PointElement, LineElement, Interaction } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import 'chartjs-adapter-moment';
 import { ToggleButtonGroup, ToggleButton, Box, Button, Typography } from "@mui/material";
@@ -23,6 +23,126 @@ import MuiTooltip from '@mui/material/Tooltip';
 import EditNoteIcon from '@mui/icons-material/EditNote';
 // import AspectRatioIcon from '@mui/icons-material/AspectRatio';
 import { FilterTagMode } from '../../server-actions/types';
+import { getRelativePosition } from 'chart.js/helpers';
+function findIndexForX(arr, t) {
+    if (!arr || arr.length === 0)
+        return -1;
+    if (t <= arr[0].x)
+        return 0;
+    let lo = 0;
+    let hi = arr.length - 1;
+    let res = -1;
+    while (lo <= hi) {
+        const mid = Math.floor((lo + hi) / 2);
+        const midX = arr[mid]?.x;
+        if (midX === undefined)
+            return -1;
+        if (midX === t)
+            return mid;
+        if (midX < t) {
+            res = mid;
+            lo = mid + 1;
+        }
+        else
+            hi = mid - 1;
+    }
+    return res;
+}
+// @ts-ignore
+Tooltip.positioners.myCustomPositioner = function (elements, eventPosition) {
+    const chart = this.chart;
+    const activePos = chart.__activePos;
+    if (!activePos || !activePos.closestPoint) {
+        return { x: eventPosition.x, y: eventPosition.y };
+    }
+    const closest = activePos.closestPoint.element;
+    const pixelX = activePos.closestPoint.pixelX;
+    const pixelY = closest?.y ?? eventPosition.y;
+    return { x: pixelX, y: pixelY };
+};
+// Definisci la modalità solo se Interaction è disponibile
+if (Interaction && Interaction.modes) {
+    // @ts-ignore
+    Interaction.modes.myCustomMode = function (chart, e, options, useFinalPosition) {
+        const pos = getRelativePosition(e, chart);
+        const xScale = chart.scales?.x;
+        const hoveredX = xScale && typeof xScale.getValueForPixel === "function"
+            ? xScale.getValueForPixel(pos.x)
+            : null;
+        const items = [];
+        let closestPoint = null;
+        let closestDistance = Infinity;
+        for (let datasetIndex = 0; datasetIndex < chart.data.datasets.length; datasetIndex++) {
+            const meta = chart.getDatasetMeta(datasetIndex);
+            if (!meta || !meta.data || meta.data.length === 0)
+                continue;
+            let found = null;
+            let pointPixelX = null;
+            for (let i = 0; i < meta.data.length; i++) {
+                const el = meta.data[i];
+                if (el && typeof el.inXRange === "function" && el.inXRange(pos.x, useFinalPosition)) {
+                    found = { element: el, datasetIndex, index: i };
+                    pointPixelX = el.x;
+                    break;
+                }
+            }
+            if (!found && hoveredX != null) {
+                const dataArr = chart.data.datasets[datasetIndex]?.data || [];
+                const idx = findIndexForX(dataArr, hoveredX);
+                if (idx >= 0 && meta.data[idx]) {
+                    found = { element: meta.data[idx], datasetIndex, index: idx };
+                    const valX = dataArr[idx].x;
+                    pointPixelX = xScale.getPixelForValue(valX);
+                }
+            }
+            if (found && pointPixelX != null) {
+                items.push(found);
+                const xMin = xScale?.left ?? 0;
+                const xMax = xScale?.right ?? chart.width;
+                console.log({ pointPixelX, xMin, xMax });
+                if (pointPixelX < xMin || pointPixelX > xMax) {
+                    continue; // ignora questo punto
+                }
+                // Aggiorna il closestPoint globale per la barra verticale
+                const distance = Math.abs(pointPixelX - pos.x);
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestPoint = { ...found, pixelX: pointPixelX };
+                }
+            }
+        }
+        chart.__activePos = hoveredX != null
+            ? {
+                value: hoveredX,
+                px: closestPoint ? closestPoint.pixelX : pos.x,
+                hasPoint: !!closestPoint
+            }
+            : null;
+        return items;
+    };
+}
+function getValueAtX(datasetData, t) {
+    if (!datasetData || datasetData.length === 0)
+        return null;
+    // se t è prima del primo punto -> primo valore
+    if (t <= datasetData[0].x)
+        return datasetData[0].y;
+    // binary search per ultimo index con x <= t
+    let lo = 0;
+    let hi = datasetData.length - 1;
+    let res = -1;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        const midX = datasetData[mid].x;
+        if (midX <= t) {
+            res = mid;
+            lo = mid + 1;
+        }
+        else
+            hi = mid - 1;
+    }
+    return res >= 0 ? datasetData[res].y : null;
+}
 const lineOptions = {
     parsing: false,
     normalized: true,
@@ -33,14 +153,38 @@ const lineOptions = {
     maintainAspectRatio: false,
     interaction: {
         intersect: false,
-        mode: 'nearest',
+        mode: 'myCustomMode',
         axis: 'x'
     },
     plugins: {
         tooltip: {
+            position: 'myCustomPositioner',
             callbacks: {
                 label: (context) => {
-                    return `${context.dataset.label}: ${context.parsed.y.toFixed(3)} ${context.dataset.unit}`;
+                    const ds = context.dataset || {};
+                    const parsed = context.parsed || {};
+                    const unit = ds.unit ?? '';
+                    const chart = context.chart;
+                    // 1) se parsed.y è disponibile usalo (gestisci stepped senza toFixed)
+                    if (parsed.y !== null && parsed.y !== undefined) {
+                        // se la serie è stepped vogliamo mostrare il valore grezzo (es. 1/0)
+                        if (ds.stepped)
+                            return `${ds.label}: ${parsed.y} ${unit}`;
+                        // numero normale -> 3 decimali
+                        return `${ds.label}: ${Number(parsed.y).toFixed(3)} ${unit}`;
+                    }
+                    // 2) fallback: usa parsed.x o context.parsed.x per calcolare il valore via getValueAtX
+                    const xVal = parsed.x ?? (context.parsed && context.parsed.x) ?? null;
+                    if (xVal != null && Array.isArray(ds.data)) {
+                        const val = getValueAtX(ds.data, xVal);
+                        if (val !== null && val !== undefined) {
+                            if (ds.stepped)
+                                return `${ds.label}: ${val} ${unit}`;
+                            return `${ds.label}: ${Number(val).toFixed(3)} ${unit}`;
+                        }
+                    }
+                    // 3) fallback finale
+                    return `${ds.label}: - ${unit}`;
                 }
             },
         },
@@ -487,7 +631,7 @@ const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDat
                 return acc;
             }, {});
         }
-        // 👇 Combina statiche + dinamiche
+        // Combina statiche + dinamiche
         const annotations = {
             // ...staticAnnotations,
             ...dynamicAnnotations
@@ -574,37 +718,36 @@ const TrendChart = ({ filter, measures1, annotationsDataFn, measures2, enableDat
             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;
-                        let topY1 = 0;
-                        let topY2 = 0;
-                        let bottomY1 = 0;
-                        let bottomY2 = 0;
-                        if (chart.scales.y1?.top) {
-                            topY1 = chart.scales.y1.top;
-                        }
-                        if (chart.scales.y2?.top) {
-                            topY2 = chart.scales.y2.top;
-                        }
-                        if (chart.scales.y1?.bottom) {
-                            bottomY1 = chart.scales.y1.bottom;
-                        }
-                        if (chart.scales.y2?.bottom) {
-                            bottomY2 = chart.scales.y2.bottom;
-                        }
-                        const topY = Math.max(topY1, topY2);
-                        const bottomY = Math.min(bottomY1, bottomY2);
-                        ctx.save();
-                        ctx.beginPath();
-                        ctx.moveTo(x, topY);
-                        ctx.lineTo(x, bottomY);
-                        ctx.lineWidth = 1;
-                        ctx.strokeStyle = '#722257';
-                        ctx.stroke();
-                        ctx.restore();
+                    if (!chart.__activePos?.hasPoint)
+                        return; // disegna solo sui punti
+                    const ctx = chart.ctx;
+                    const x = chart.__activePos.px; // pixel esatto del punto attivo
+                    let topY1 = 0;
+                    let topY2 = 0;
+                    let bottomY1 = 0;
+                    let bottomY2 = 0;
+                    if (chart.scales.y1?.top) {
+                        topY1 = chart.scales.y1.top;
+                    }
+                    if (chart.scales.y2?.top) {
+                        topY2 = chart.scales.y2.top;
+                    }
+                    if (chart.scales.y1?.bottom) {
+                        bottomY1 = chart.scales.y1.bottom;
+                    }
+                    if (chart.scales.y2?.bottom) {
+                        bottomY2 = chart.scales.y2.bottom;
                     }
+                    const topY = Math.max(topY1, topY2);
+                    const bottomY = Math.min(bottomY1, bottomY2);
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.moveTo(x, topY);
+                    ctx.lineTo(x, bottomY);
+                    ctx.lineWidth = 1;
+                    ctx.strokeStyle = '#722257';
+                    ctx.stroke();
+                    ctx.restore();
                 }
             });
             setChartJsLoaded(true);

package/components/groups/GroupsDevices.js

@@ -1,7 +1,7 @@
 "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, useRef, useState } from "react";
+import { cloneElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import AddIcon from '@mui/icons-material/Add';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
 import EditIcon from '@mui/icons-material/Edit';
@@ -10,7 +10,7 @@ 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, GridToolbarExport, GridToolbarQuickFilter } from "@mui/x-data-grid";
+import { DataGrid, GridToolbar, GridToolbarExport, GridToolbarFilterButton, GridToolbarQuickFilter } from "@mui/x-data-grid";
 import GroupUpdate from "./GroupUpdate";
 import BackIcon from '@mui/icons-material/ArrowBack';
 import dynamic from "next/dynamic";
@@ -113,9 +113,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         }
     }, [userInfo]);
     useEffect(() => {
-        if (usersGroup) {
-            getUsersList();
-        }
+        getUsersList();
     }, [usersGroup]);
     useEffect(() => {
         if (currentGroup && !checkboxSelection) {
@@ -221,11 +219,11 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
             setDeviceSelectedObjs([]);
         }
     }, [devicesToAdd]);
-    const CustomToolbar = () => (_jsxs("div", { style: { display: 'flex', padding: '8px', justifyContent: 'space-between', paddingTop: '2px' }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, marginRight: '20px' }, children: [customToolbar && customToolbar.includes('filters') ?
-                        _jsx(GridToolbarExport, { sx: { mr: 2 } })
+    const CustomToolbar = useCallback((props) => (_jsxs("div", { style: { display: 'flex', padding: '8px', justifyContent: 'space-between', paddingTop: '2px' }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, marginRight: '20px' }, children: [customToolbar && customToolbar.includes('filters') ?
+                        _jsx(GridToolbarFilterButton, {})
                         : '', customToolbar && customToolbar.includes('export') ?
                         _jsx(GridToolbarExport, {})
-                        : ''] }), customToolbar && customToolbar.includes('quickfilter') && _jsx(GridToolbarQuickFilter, {})] }));
+                        : ''] }), customToolbar && customToolbar.includes('quickfilter') && _jsx(GridToolbarQuickFilter, {})] })), []);
     const renderDataGrid = (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { checkboxSelection: checkboxSelection, 
             // Se siamo in modalità aggiunta, includi gli ID già nel gruppo
             rowSelectionModel: (checkboxSelection && currentGroup === 'all')
@@ -279,9 +277,6 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
                     printOptions: { disableToolbarButton: true },
                 },
             }, initialState: {
-                sorting: {
-                    sortModel: [{ field: 'online', sort: 'desc' }],
-                },
                 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 })] }));

package/components/users/UsersDataGrid.d.ts

@@ -1,7 +1,8 @@
+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 }: {
-    handleGetUsersList: ({ page, pageSize, filter }: {
+declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, containerProps, props, loadingComponent, theme, columns }: {
+    handleGetUsersList: ({ page, pageSize, filter, sortModel }: {
         page: number;
         pageSize: number;
         filter?: {
@@ -9,6 +10,7 @@ declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, contain
             operator?: string;
             value: string;
         };
+        sortModel: GridSortModel;
     }) => Promise<{
         users: UserType[];
         rowCount: number;
@@ -19,5 +21,6 @@ declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, contain
     props?: object | undefined;
     loadingComponent?: React.ReactNode;
     theme: Theme;
+    columns: any[];
 }) => 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

@@ -1,15 +1,23 @@
-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();
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+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 [usersList, setUsersList] = useState(undefined);
     const [userCount, setUserCount] = useState(undefined);
+    const filterType = {
+        email: 'Email',
+        name: 'Full name',
+        role: 'Role'
+    };
+    const [selectedFilterValue, setSelectedFilterValue] = useState(undefined);
+    const [selectedFilterType, setSelectedFilterType] = useState('email');
     const [isLoading, setIsLoading] = useState(true);
+    const [sortModel, setSortModel] = useState([
+        { field: "email", sort: "desc" },
+    ]);
     const [paginationModel, setPaginationModel] = useState({
         page: 0,
         pageSize: pageSize || 1,
@@ -29,7 +37,8 @@ const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', contai
                     { value: filterModel.quickFilterValues[0] }
                     : filterModel.items.length > 0 ?
                         { field: filterModel.items[0].field, operator: filterModel.items[0].operator, value: filterModel.items[0].value }
-                        : undefined
+                        : undefined,
+                sortModel
             });
             setUsersList(usersList.users);
             setUserCount(usersList.rowCount);
@@ -41,36 +50,44 @@ const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', contai
             setIsLoading(false);
         }
     };
+    const debouncedUpdateFilter = useMemo(() => debounce((value) => {
+        setFilterModel({
+            items: [{
+                    field: selectedFilterType || 'email',
+                    operator: 'startsWith',
+                    value: value
+                }],
+        });
+    }, 500), [selectedFilterType]);
+    const handleFilterModelChange = (value) => {
+        setSelectedFilterValue(value);
+        // const value = newModel.quickFilterValues?.[0] || '';
+        if (value.length >= 3 || value.length === 0) {
+            debouncedUpdateFilter(value);
+        }
+    };
     useEffect(() => {
         getUsersList();
-    }, [paginationModel, filterModel]);
+    }, [paginationModel, filterModel, sortModel]);
     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,
+    const handleSortModelChange = (model) => {
+        setSortModel(model);
+        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: {
+                toolbar: CustomToolbar,
             }, slotProps: {
                 toolbar: {
                     printOptions: { disableToolbarButton: true },
-                    showQuickFilter: true,
+                    showQuickFilter: false,
                 },
-            }, 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() })) });
+            }, rowCount: userCount, loading: isLoading, pageSizeOptions: [], paginationModel: paginationModel, paginationMode: "server", onPaginationModelChange: setPaginationModel, ...props }) }));
+    const renderFilter = () => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', mb: 2 }, 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: {
+                    endAdornment: selectedFilterValue ? (_jsx(IconButton, { size: "small", onClick: () => handleFilterModelChange(""), children: _jsx(ClearIcon, { fontSize: "small" }) })) : null,
+                } })] }));
+    return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsxs(_Fragment, { children: [renderFilter(), _jsx(Card, { ...containerProps, children: renderUsersList() })] })) : (_jsxs(_Fragment, { children: [renderFilter(), _jsx(Box, { ...containerProps, children: renderUsersList() })] })) });
 };
 export default UsersDataGrid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iotready/nextjs-components-library",
-  "version": "1.0.0-preview27",
+  "version": "1.0.0-preview29",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",
@@ -23,6 +23,7 @@
     "firebase-admin": "^13.4.0",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
+    "lodash.debounce": "^4.0.8",
     "material-ui-confirm": "^3.0.16",
     "moment": "^2.30.1",
     "next": "^14.2.9",
@@ -35,6 +36,7 @@
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.13",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-csv": "^1.1.10",

package/server-actions/trackle.d.ts

@@ -15,6 +15,10 @@ export declare function createCustomer(trackleConfig: TrackleConfig, uid: string
     organization: string;
     uid: string;
 }>;
+export declare function removeCustomer(trackleConfig: TrackleConfig, uid: string): Promise<{
+    organization: string;
+    uid: string;
+}>;
 export declare function getDevices(trackleConfig: TrackleConfig, productId?: number, uid?: string, query?: string): Promise<{
     devices: any[];
 }>;

package/server-actions/trackle.js

@@ -55,14 +55,28 @@ export async function createCustomer(trackleConfig, uid) {
         .post({ uid })
         .json();
 }
+export async function removeCustomer(trackleConfig, uid) {
+    return await wretch(`${trackleConfig.apiUrl}/orgs/${trackleConfig.orgName}/customers/${uid}`)
+        .headers({
+        Authorization: `Basic ${btoa(`${trackleConfig.clientId}:${trackleConfig.clientSecret}`)}`
+    })
+        .delete().json();
+}
 export async function getDevices(trackleConfig, productId, uid, query) {
     const api = uid ? wretchApi(trackleConfig, uid) : wretchApi(trackleConfig);
-    const response = await api
-        .get(uid
-        ? `/devices${query ? "?" + query : ""}`
-        : `/products/${productId}/devices${query ? "?" + query : ""}`)
-        .setTimeout(trackleConfig.apiTimeout)
-        .json();
+    let response;
+    try {
+        response = await api
+            .get(uid
+            ? `/devices${query ? "?" + query : ""}`
+            : `/products/${productId}/devices${query ? "?" + query : ""}`)
+            .setTimeout(trackleConfig.apiTimeout)
+            .json();
+    }
+    catch (error) {
+        console.error("Error fetching devices:", error);
+        throw error;
+    }
     return (uid ? { devices: response } : response);
 }
 export async function getDevice(trackleConfig, id, productId, uid) {