@deix/rossini-identity-management 0.1.0

package/lib/components/groups/Groups.js

@@ -0,0 +1,78 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import GroupAddIcon from '@mui/icons-material/GroupAdd';
+import { Box, Button, Grid, IconButton, Link } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { useAPI, useLocale } from '@deix/rossini-core';
+import { SearchField } from '..';
+import CreateGroupDialog from './CreateGroupDialog';
+import GroupsTable from './GroupsTable';
+import groupsTranslations from '../../lang/groups';
+import { useDeleteGroup, useGroups } from '../../utils/hooks/groups';
+import GroupTabs from './GroupTabs';
+import { useQueryClient } from '@tanstack/react-query';
+const Groups = ({ apiUrl, additionalTabs = [] }) => {
+    const locale = useLocale();
+    const apiClient = useAPI(apiUrl);
+    const queryClient = useQueryClient();
+    const { data: groups } = useGroups(apiClient);
+    const { mutate: deleteGroup } = useDeleteGroup(queryClient, apiClient);
+    const [searchString, setSearchString] = useState('');
+    const [filteredGroups, setFilteredGroups] = useState();
+    const [selectedGroup, setSelectedGroup] = useState();
+    const [openGroupDialog, setOpenGroupDialog] = useState(false);
+    useEffect(() => {
+        if (groups && searchString === '') {
+            setFilteredGroups(groups);
+        }
+        else if (groups && searchString !== '') {
+            setFilteredGroups(groups.filter((group) => group.name.includes(searchString)));
+        }
+    }, [searchString, groups, setFilteredGroups]);
+    const handleDelete = (id) => {
+        deleteGroup(id);
+        setSelectedGroup(undefined);
+    };
+    return (React.createElement(Box, { sx: {
+            flexGrow: 1,
+            maxWidth: '100%',
+            overflowX: 'hidden',
+            paddingTop: 3,
+            paddingLeft: 3,
+            paddingRight: 3,
+        } },
+        !selectedGroup && (React.createElement(React.Fragment, null,
+            React.createElement(Grid, { container: true, spacing: 2, sx: { marginBottom: 2 } },
+                React.createElement(Grid, { item: true },
+                    React.createElement(SearchField, { placeholder: groupsTranslations.search[locale], onSearch: (value) => setSearchString(value) })),
+                React.createElement(Grid, { item: true },
+                    React.createElement(Button, { variant: 'contained', startIcon: React.createElement(GroupAddIcon, null), onClick: () => {
+                            setOpenGroupDialog(true);
+                            setSelectedGroup(undefined);
+                        } }, groupsTranslations.new[locale]))),
+            React.createElement(GroupsTable, { groups: filteredGroups, selectedGroup: selectedGroup, setSelectedGroup: (group) => {
+                    setSelectedGroup(group);
+                }, onDelete: handleDelete }))),
+        selectedGroup && (React.createElement(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                width: '100%',
+            } },
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                } },
+                React.createElement(IconButton, { "aria-label": 'delete', color: 'primary', onClick: () => setSelectedGroup(undefined), sx: { mr: 2 } },
+                    React.createElement(ArrowBackIcon, null)),
+                React.createElement(Link, { underline: 'none', href: '#', onClick: () => setSelectedGroup(undefined) }, groupsTranslations.title[locale]),
+                React.createElement(KeyboardArrowRightIcon, null),
+                selectedGroup.name),
+            React.createElement(GroupTabs, { group: selectedGroup, additionalTabs: additionalTabs }))),
+        React.createElement(CreateGroupDialog, { open: openGroupDialog, onClose: () => {
+                setOpenGroupDialog(false);
+            } })));
+};
+export default Groups;

package/lib/components/groups/GroupsTable.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Group } from '../../types/groups';
+export interface TableProps {
+    groups?: Group[];
+    selectedGroup?: Group;
+    setSelectedGroup: (group: Group) => void;
+    onDelete: (id: string) => void;
+}
+declare const GroupsTable: ({ groups, selectedGroup, setSelectedGroup, onDelete, }: TableProps) => React.JSX.Element;
+export default GroupsTable;
+//# sourceMappingURL=GroupsTable.d.ts.map

package/lib/components/groups/GroupsTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupsTable.d.ts","sourceRoot":"","sources":["../../../src/components/groups/GroupsTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAW3C,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,2DAKd,UAAU,sBA8DZ,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/groups/GroupsTable.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { isStringTranslation, useLocale } from '@deix/rossini-core';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, useTheme, } from '@mui/material';
+import { useState } from 'react';
+import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
+const groupsTableColumns = [
+    {
+        id: 'name',
+        label: { en: 'Name', it: 'Nome' },
+    },
+];
+const GroupsTable = ({ groups = [], selectedGroup, setSelectedGroup, onDelete, }) => {
+    const locale = useLocale();
+    const muiTheme = useTheme();
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteId, setDeleteId] = useState();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TableContainer, null,
+            React.createElement(Table, { size: 'small' },
+                React.createElement(TableHead, null,
+                    React.createElement(TableRow, null,
+                        groupsTableColumns.map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
+                            ? col.label[locale]
+                            : col.label))),
+                        React.createElement(TableCell, { padding: 'none' }, ''))),
+                React.createElement(TableBody, null, groups.map((group, rowIdx) => (React.createElement(TableRow, { key: rowIdx, onClick: () => setSelectedGroup(group), sx: {
+                        cursor: 'pointer',
+                        background: selectedGroup && group.id === selectedGroup.id
+                            ? muiTheme.palette.primary.light
+                            : undefined,
+                    } },
+                    React.createElement(TableCell, null, group.name),
+                    React.createElement(TableCell, { padding: 'none', align: 'right' },
+                        React.createElement(IconButton, { size: 'small', onClick: (evt) => {
+                                evt.stopPropagation();
+                                setOpenConfirmationDialog(true);
+                                setDeleteId(group.id);
+                            } },
+                            React.createElement(DeleteIcon, null))))))))),
+        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => (deleteId ? onDelete(deleteId) : {}) })));
+};
+export default GroupsTable;

package/lib/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SearchField } from './SearchField';
+export { default as DeleteConfirmationDialog } from './DeleteConfirmationDialog';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/components/index.js

@@ -0,0 +1,2 @@
+export { default as SearchField } from './SearchField';
+export { default as DeleteConfirmationDialog } from './DeleteConfirmationDialog';

package/lib/components/users/CreateUserDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CreateUserDialogProps {
+    open: boolean;
+    onClose: () => void;
+}
+declare const CreateUserDialog: ({ open, onClose }: CreateUserDialogProps) => React.JSX.Element;
+export default CreateUserDialog;
+//# sourceMappingURL=CreateUserDialog.d.ts.map

package/lib/components/users/CreateUserDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateUserDialog.d.ts","sourceRoot":"","sources":["../../../src/components/users/CreateUserDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,gBAAgB,sBAAuB,qBAAqB,sBAqBjE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/users/CreateUserDialog.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useAPI, useLocale } from '@deix/rossini-core';
+import { Dialog, DialogContent, DialogTitle } from '@mui/material';
+import { useQueryClient } from '@tanstack/react-query';
+import { useConfig } from '../../config';
+import { useAddUser } from '../../utils/hooks/users';
+import UserForm from './UserForm';
+import usersTranslations from '../../lang/users';
+const CreateUserDialog = ({ open, onClose }) => {
+    const locale = useLocale();
+    const config = useConfig();
+    const apiClient = useAPI(config.generalProperties.apiURL);
+    const queryClient = useQueryClient();
+    const { mutate: addUser } = useAddUser(queryClient, apiClient);
+    const handleSave = (userFormData) => {
+        addUser(userFormData);
+        onClose();
+    };
+    return (React.createElement(Dialog, { open: open, fullWidth: true, maxWidth: 'sm', onClose: onClose },
+        React.createElement(DialogTitle, null, usersTranslations.create[locale]),
+        React.createElement(DialogContent, null,
+            React.createElement(UserForm, { mode: 'create', onSave: handleSave, onCancel: onClose }))));
+};
+export default CreateUserDialog;

package/lib/components/users/UserCredentials.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { User } from '../../types/users';
+interface UserCredentialsProps {
+    user: User;
+}
+declare const UserCredentials: ({ user }: UserCredentialsProps) => React.JSX.Element;
+export default UserCredentials;
+//# sourceMappingURL=UserCredentials.d.ts.map

package/lib/components/users/UserCredentials.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCredentials.d.ts","sourceRoot":"","sources":["../../../src/components/users/UserCredentials.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAOzC,UAAU,oBAAoB;IAC5B,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,QAAA,MAAM,eAAe,aAAc,oBAAoB,sBAmBtD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/users/UserCredentials.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useAPI, useLocale } from '@deix/rossini-core';
+import { Box, Button } from '@mui/material';
+import usersTranslations from '../../lang/users';
+import { useSendUpdatePasswordEmail } from '../../utils/hooks/users';
+import { useConfig } from '../../config';
+import { useQueryClient } from '@tanstack/react-query';
+const UserCredentials = ({ user }) => {
+    const locale = useLocale();
+    const config = useConfig();
+    const apiClient = useAPI(config.generalProperties.apiURL);
+    const queryClient = useQueryClient();
+    const { mutate: sendResetPasswordEmail } = useSendUpdatePasswordEmail(queryClient, apiClient);
+    return (React.createElement(Box, { sx: { mt: 2 } },
+        React.createElement(Button, { variant: 'contained', onClick: () => sendResetPasswordEmail(user.id) }, usersTranslations.sendResetPasswordEmail[locale])));
+};
+export default UserCredentials;

package/lib/components/users/UserDetails.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { User } from '../../types/users';
+export interface UserDetailsProps {
+    user: User;
+}
+declare const UserDetails: ({ user }: UserDetailsProps) => React.JSX.Element;
+export default UserDetails;
+//# sourceMappingURL=UserDetails.d.ts.map

package/lib/components/users/UserDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserDetails.d.ts","sourceRoot":"","sources":["../../../src/components/users/UserDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAIzC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,QAAA,MAAM,WAAW,aAAc,gBAAgB,sBAoB9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/users/UserDetails.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useAPI } from '@deix/rossini-core';
+import { useQueryClient } from '@tanstack/react-query';
+import { useConfig } from '../../config';
+import { useUpdateUser } from '../../utils/hooks/users';
+import UserForm from './UserForm';
+const UserDetails = ({ user }) => {
+    const config = useConfig();
+    const apiClient = useAPI(config.generalProperties.apiURL);
+    const queryClient = useQueryClient();
+    const { mutate: updateUser } = useUpdateUser(queryClient, apiClient);
+    const handleUpdate = (user) => {
+        updateUser(user);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(UserForm, { mode: 'modify', user: user, onSave: handleUpdate, onCancel: () => { } })));
+};
+export default UserDetails;

package/lib/components/users/UserForm.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { User } from '../../types/users';
+export interface UserFormFields extends User {
+    sendEmailOnCreation: boolean;
+}
+export interface UserFormProps {
+    onSave: (user: UserFormFields) => void;
+    onCancel?: () => void;
+    user?: User;
+    mode?: 'create' | 'modify';
+}
+declare const UserForm: ({ user, onSave, onCancel, mode, }: UserFormProps) => React.JSX.Element;
+export default UserForm;
+//# sourceMappingURL=UserForm.d.ts.map

package/lib/components/users/UserForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserForm.d.ts","sourceRoot":"","sources":["../../../src/components/users/UserForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,WAAW,cAAe,SAAQ,IAAI;IAC1C,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,sCAKX,aAAa,sBA8Jf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/users/UserForm.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useLocale } from '@deix/rossini-core';
+import { Button, FormControlLabel, Grid, Switch, TextField, } from '@mui/material';
+import { Controller, useForm } from 'react-hook-form';
+import { useEffect } from 'react';
+import usersTranslations from '../../lang/users';
+const UserForm = ({ user, onSave, onCancel, mode = 'create', }) => {
+    const locale = useLocale();
+    const { control, handleSubmit, setValue } = useForm({
+        defaultValues: {
+            id: user?.id || '',
+            username: user?.username || '',
+            firstName: user?.firstName || '',
+            lastName: user?.lastName || '',
+            email: user?.email || '',
+            emailVerified: user?.emailVerified || true,
+            enabled: user?.enabled || true,
+            sendEmailOnCreation: true,
+        },
+    });
+    useEffect(() => {
+        if (user) {
+            setValue('id', user?.id);
+            setValue('username', user?.username);
+            setValue('firstName', user?.firstName);
+            setValue('lastName', user?.lastName);
+            setValue('email', user?.email);
+            setValue('emailVerified', user?.emailVerified);
+            setValue('enabled', user?.enabled);
+            setValue('groups', user?.groups);
+            // The user already exists, we don't want to send an email
+            setValue('sendEmailOnCreation', false);
+        }
+    }, [user, setValue]);
+    const onSubmit = (data) => {
+        onSave(data);
+    };
+    return (React.createElement("form", { onSubmit: (event) => void handleSubmit(onSubmit)(event) },
+        React.createElement(Grid, { container: true, spacing: 2, sx: { mt: 2, maxWidth: 'sm' }, justifyContent: 'stretch' },
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Controller, { name: 'username', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.username[locale], disabled: mode === 'modify', sx: { flexShrink: 0 }, ...field })) })),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Controller, { name: 'firstName', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.firstName[locale], sx: { flexShrink: 0 }, ...field })) })),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Controller, { name: 'lastName', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.lastName[locale], sx: { flexShrink: 0 }, ...field })) })),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Controller, { name: 'email', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.email[locale], sx: { flexShrink: 0 }, ...field })) })),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Controller, { name: 'enabled', control: control, render: ({ field }) => (React.createElement(FormControlLabel, { sx: { ml: 1 }, control: React.createElement(Switch, { checked: field.value, size: 'small', ...field }), label: usersTranslations.enabled[locale] })) })),
+            mode === 'create' && (React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Controller, { name: 'sendEmailOnCreation', control: control, render: ({ field }) => (React.createElement(FormControlLabel, { sx: { ml: 1 }, control: React.createElement(Switch, { checked: field.value, size: 'small', ...field }), label: usersTranslations.sendResetPasswordEmail[locale] })) }))),
+            React.createElement(Grid, { item: true, sx: {
+                    mt: 2,
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: 2,
+                    width: '100%',
+                } },
+                mode === 'create' && (React.createElement(Button, { variant: 'outlined', onClick: onCancel }, usersTranslations.cancel[locale])),
+                React.createElement(Button, { variant: 'contained', type: 'submit' }, usersTranslations.save[locale])))));
+};
+export default UserForm;

package/lib/components/users/UserGroups.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { User } from '../../types/users';
+interface UserGroupsProps {
+    user: User;
+}
+declare const UserGroups: ({ user }: UserGroupsProps) => React.JSX.Element;
+export default UserGroups;
+//# sourceMappingURL=UserGroups.d.ts.map

package/lib/components/users/UserGroups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserGroups.d.ts","sourceRoot":"","sources":["../../../src/components/users/UserGroups.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAsBzC,UAAU,eAAe;IACvB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,QAAA,MAAM,UAAU,aAAc,eAAe,sBA6F5C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/users/UserGroups.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Box, Button, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { isStringTranslation, useAPI, useLocale } from '@deix/rossini-core';
+import { useConfig } from '../../config';
+import { useAddUserToGroup, useRemoveUserFromGroup, useUserGroups, } from '../../utils/hooks/users';
+import { useState } from 'react';
+import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
+import { useQueryClient } from '@tanstack/react-query';
+import usersTranslations from '../../lang/users';
+import AddItemDialog from '../AddItemDialog';
+import { useGroups } from '../../utils/hooks/groups';
+const userGroupsTableColumns = [
+    {
+        id: 'name',
+        label: { en: 'Group', it: 'Gruppo' },
+    },
+];
+const UserGroups = ({ user }) => {
+    const locale = useLocale();
+    const config = useConfig();
+    const apiClient = useAPI(config.generalProperties.apiURL);
+    const queryClient = useQueryClient();
+    const { data: groups } = useGroups(apiClient);
+    const { data: userGroups } = useUserGroups(user?.id, apiClient);
+    const { mutate: addUserToGroup } = useAddUserToGroup(queryClient, apiClient);
+    const { mutate: removeUserFromGroup } = useRemoveUserFromGroup(queryClient, apiClient);
+    const [openAddGroupDialog, setOpenAddGroupDialog] = useState(false);
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteId, setDeleteId] = useState();
+    return (React.createElement(React.Fragment, null,
+        userGroups && userGroups.length > 0 && (React.createElement(Box, { maxWidth: 'sm' },
+            React.createElement(TableContainer, null,
+                React.createElement(Table, { size: 'small' },
+                    React.createElement(TableHead, null,
+                        React.createElement(TableRow, null,
+                            userGroupsTableColumns.map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
+                                ? col.label[locale]
+                                : col.label))),
+                            React.createElement(TableCell, { padding: 'none' }, ''))),
+                    React.createElement(TableBody, null, userGroups?.map((group, rowIdx) => (React.createElement(TableRow, { key: rowIdx },
+                        React.createElement(TableCell, null, group.name),
+                        React.createElement(TableCell, { padding: 'none', align: 'right' },
+                            React.createElement(IconButton, { size: 'small', onClick: (evt) => {
+                                    evt.stopPropagation();
+                                    setOpenConfirmationDialog(true);
+                                    setDeleteId(group.id);
+                                } },
+                                React.createElement(DeleteIcon, null))))))))))),
+        React.createElement(Button, { variant: 'outlined', startIcon: React.createElement(AddIcon, null), onClick: () => setOpenAddGroupDialog(true), sx: { marginTop: 2 } }, usersTranslations.addGroup[locale]),
+        React.createElement(AddItemDialog, { open: openAddGroupDialog, onClose: () => setOpenAddGroupDialog(false), onConfirm: (value) => {
+                if (value) {
+                    addUserToGroup({ userId: user.id, groupId: value?.value });
+                }
+            }, title: usersTranslations.addGroup, options: groups?.map((group) => ({
+                value: group.id,
+                label: group.name,
+            })) }),
+        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => deleteId
+                ? removeUserFromGroup({ userId: user.id, groupId: deleteId })
+                : {} })));
+};
+export default UserGroups;

package/lib/components/users/Users.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { UserTab } from './UsersTabs';
+interface UsersProps {
+    apiUrl: string;
+    additionalTabs?: UserTab[];
+}
+declare const Users: ({ apiUrl, additionalTabs }: UsersProps) => React.JSX.Element;
+export default Users;
+//# sourceMappingURL=Users.d.ts.map

package/lib/components/users/Users.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Users.d.ts","sourceRoot":"","sources":["../../../src/components/users/Users.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,OAAiB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEhD,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC;CAC5B;AAED,QAAA,MAAM,KAAK,+BAAqC,UAAU,sBA8HzD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/users/Users.js

@@ -0,0 +1,84 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import { Box, Button, Grid, IconButton, Link } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { useAPI, useLocale } from '@deix/rossini-core';
+import { useQueryClient } from '@tanstack/react-query';
+import { SearchField } from '../../components';
+import CreateUserDialog from './CreateUserDialog';
+import UsersTable from './UsersTable';
+import usersTranslations from '../../lang/users';
+import { useDeleteUser, useUsers } from '../../utils/hooks/users';
+import UserTabs from './UsersTabs';
+const Users = ({ apiUrl, additionalTabs = [] }) => {
+    const locale = useLocale();
+    const apiClient = useAPI(apiUrl);
+    const queryClient = useQueryClient();
+    const { data: users } = useUsers(apiClient);
+    const { mutate: deleteUser } = useDeleteUser(queryClient, apiClient);
+    const [searchString, setSearchString] = useState('');
+    const [filteredUsers, setFilteredUsers] = useState();
+    const [selectedUser, setSelectedUser] = useState();
+    const [openCreateUserDialog, setOpenCreateUserDialog] = useState(false);
+    useEffect(() => {
+        if (users && searchString === '') {
+            setFilteredUsers(users);
+        }
+        else if (users && searchString !== '') {
+            setFilteredUsers(users.filter((user) => user.username?.toLowerCase().includes(searchString.toLowerCase()) ||
+                user.firstName
+                    ?.toLowerCase()
+                    .includes(searchString.toLowerCase()) ||
+                user.lastName
+                    ?.toLocaleLowerCase()
+                    .includes(searchString.toLowerCase())));
+        }
+    }, [searchString, users, setFilteredUsers]);
+    const handleDelete = (id) => {
+        deleteUser(id);
+        setSelectedUser(undefined);
+    };
+    return (React.createElement(Box, { sx: {
+            flexGrow: 1,
+            maxWidth: '100%',
+            overflowX: 'hidden',
+            paddingTop: 3,
+            paddingLeft: 3,
+            paddingRight: 3,
+        } },
+        !selectedUser && (React.createElement(React.Fragment, null,
+            React.createElement(Grid, { container: true, spacing: 2, sx: { marginBottom: 2 } },
+                React.createElement(Grid, { item: true },
+                    React.createElement(SearchField, { placeholder: usersTranslations.search[locale], onSearch: (value) => setSearchString(value) })),
+                React.createElement(Grid, { item: true },
+                    React.createElement(Button, { variant: 'contained', startIcon: React.createElement(PersonAddIcon, null), onClick: () => {
+                            setOpenCreateUserDialog(true);
+                            setSelectedUser(undefined);
+                        } }, usersTranslations.new[locale]))),
+            React.createElement(UsersTable, { users: filteredUsers, selectedUser: selectedUser, setSelectedUser: (user) => {
+                    setSelectedUser(user);
+                }, onDelete: handleDelete }))),
+        selectedUser && (React.createElement(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                width: '100%',
+            } },
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                } },
+                React.createElement(IconButton, { "aria-label": 'delete', color: 'primary', onClick: () => setSelectedUser(undefined), sx: { mr: 2 } },
+                    React.createElement(ArrowBackIcon, null)),
+                React.createElement(Link, { underline: 'none', href: '#', onClick: () => setSelectedUser(undefined) }, usersTranslations.title[locale]),
+                React.createElement(KeyboardArrowRightIcon, null),
+                selectedUser.username),
+            React.createElement(UserTabs, { user: selectedUser, additionalTabs: additionalTabs }))),
+        React.createElement(CreateUserDialog, { open: openCreateUserDialog, onClose: () => {
+                setOpenCreateUserDialog(false);
+            } })));
+};
+export default Users;

package/lib/components/users/UsersTable.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Group } from '../../types/groups';
+import { User } from '../../types/users';
+export interface TableProps {
+    users?: User[];
+    groups?: Group[];
+    selectedUser?: User;
+    setSelectedUser: (user: User) => void;
+    onDelete: (id: string) => void;
+}
+declare const UsersTable: ({ users, selectedUser, setSelectedUser, onDelete, }: TableProps) => React.JSX.Element;
+export default UsersTable;
+//# sourceMappingURL=UsersTable.d.ts.map

package/lib/components/users/UsersTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsersTable.d.ts","sourceRoot":"","sources":["../../../src/components/users/UsersTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAuBzC,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,QAAA,MAAM,UAAU,wDAKb,UAAU,sBAoEZ,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/users/UsersTable.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { isStringTranslation, useLocale } from '@deix/rossini-core';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, useTheme, } from '@mui/material';
+import { useState } from 'react';
+import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
+const usersTableColumns = [
+    {
+        id: 'firstName',
+        label: { en: 'First Name', it: 'Nome' },
+    },
+    {
+        id: 'lastName',
+        label: { en: 'Last Name', it: 'Cognome' },
+    },
+    {
+        id: 'username',
+        label: { en: 'Username', it: 'Username' },
+    },
+    { id: 'email', label: 'Email' },
+    {
+        id: 'enabled',
+        label: { en: 'Enabled', it: 'Utente Abilitato' },
+    },
+];
+const UsersTable = ({ users = [], selectedUser, setSelectedUser, onDelete, }) => {
+    const locale = useLocale();
+    const muiTheme = useTheme();
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteId, setDeleteId] = useState();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TableContainer, null,
+            React.createElement(Table, { size: 'small' },
+                React.createElement(TableHead, null,
+                    React.createElement(TableRow, null,
+                        usersTableColumns.map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
+                            ? col.label[locale]
+                            : col.label))),
+                        React.createElement(TableCell, { padding: 'none' }, ''))),
+                React.createElement(TableBody, null, users.map((user, rowIdx) => (React.createElement(TableRow, { key: rowIdx, onClick: () => setSelectedUser(user), sx: {
+                        cursor: 'pointer',
+                        background: selectedUser && user.id === selectedUser.id
+                            ? muiTheme.palette.primary.light
+                            : undefined,
+                    } },
+                    React.createElement(TableCell, null, user.firstName),
+                    React.createElement(TableCell, null, user.lastName),
+                    React.createElement(TableCell, null, user.username),
+                    React.createElement(TableCell, null, user.email),
+                    React.createElement(TableCell, null, user.enabled ? React.createElement(CheckIcon, null) : React.createElement(CloseIcon, null)),
+                    React.createElement(TableCell, { padding: 'none', align: 'right' },
+                        React.createElement(IconButton, { size: 'small', onClick: (evt) => {
+                                evt.stopPropagation();
+                                setOpenConfirmationDialog(true);
+                                setDeleteId(user.id);
+                            } },
+                            React.createElement(DeleteIcon, null))))))))),
+        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => (deleteId ? onDelete(deleteId) : {}) })));
+};
+export default UsersTable;

package/lib/components/users/UsersTabs.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StringTranslation } from '@deix/rossini-core';
+import { User } from '../../types/users';
+export interface UserTab {
+    title: StringTranslation;
+    component: React.FunctionComponent<{
+        user: User;
+    }>;
+}
+export interface UserTabsProps {
+    user: User;
+    additionalTabs?: UserTab[];
+}
+declare const UserTabs: ({ user, additionalTabs }: UserTabsProps) => React.JSX.Element;
+export default UserTabs;
+//# sourceMappingURL=UsersTabs.d.ts.map

package/lib/components/users/UsersTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsersTabs.d.ts","sourceRoot":"","sources":["../../../src/components/users/UsersTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAa,MAAM,oBAAoB,CAAC;AAElE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAKzC,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,iBAAiB,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;CACpD;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,6BAAmC,aAAa,sBAgD7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}