@deix/rossini-identity-management 0.1.0 → 0.1.1

package/lib/app/[locale]/groups/{page.js → page.jsx}

@@ -4,6 +4,6 @@ import { useConfig } from '../../../config';
 import Groups from '../../../components/groups/Groups';
 const GroupsPage = () => {
     const config = useConfig();
-    return React.createElement(Groups, { apiUrl: config.generalProperties.apiURL });
+    return <Groups apiUrl={config.generalProperties.apiURL}/>;
 };
 export default GroupsPage;

package/lib/app/[locale]/{layout.js → layout.jsx}

@@ -18,7 +18,8 @@ export default function RootLayout({ children, }) {
             },
         },
     });
-    return (React.createElement(QueryClientProvider, { client: queryClient },
-        React.createElement(PageProvider, null, children),
-        React.createElement(ReactQueryDevtools, { initialIsOpen: false, buttonPosition: 'bottom-right' })));
+    return (<QueryClientProvider client={queryClient}>
+      <PageProvider>{children}</PageProvider>
+      <ReactQueryDevtools initialIsOpen={false} buttonPosition='bottom-right'/>
+    </QueryClientProvider>);
 }

package/lib/app/[locale]/users/{page.js → page.jsx}

@@ -4,6 +4,6 @@ import { useConfig } from '../../../config';
 import Users from '../../../components/users/Users';
 const UsersPage = () => {
     const config = useConfig();
-    return React.createElement(Users, { apiUrl: config.generalProperties.apiURL });
+    return <Users apiUrl={config.generalProperties.apiURL}/>;
 };
 export default UsersPage;

package/lib/app/{layout.js → layout.jsx}

@@ -14,7 +14,11 @@ export default function RootLayout({ children, }) {
         LOGOUT_URL: process.env.LOGOUT_URL || '',
         ACCOUNT_SETTINGS_URL: process.env.ACCOUNT_SETTINGS_URL || '',
     };
-    return (React.createElement("html", { lang: 'en' },
-        React.createElement("body", null,
-            React.createElement(ConfigProvider, { publicRuntimeEnv: publicRuntimeEnv }, children))));
+    return (<html lang='en'>
+      <body>
+        <ConfigProvider publicRuntimeEnv={publicRuntimeEnv}>
+          {children}
+        </ConfigProvider>
+      </body>
+    </html>);
 }

package/lib/components/AddItemDialog.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Autocomplete, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, } from '@mui/material';
+import { useLocale } from '@deix/rossini-core';
+import { useEffect, useState } from 'react';
+const translations = {
+    ok: {
+        en: 'Add',
+        it: 'Aggiungi',
+    },
+    cancel: {
+        en: 'Cancel',
+        it: 'Annulla',
+    },
+    search: {
+        en: 'Search...',
+        it: 'Cerca...',
+    },
+};
+const AddItemDialog = ({ title, options, open, onClose, onConfirm, }) => {
+    const locale = useLocale();
+    const [value, setValue] = useState(null);
+    // Reset the value when the dialog is closed
+    useEffect(() => {
+        if (!open) {
+            setValue(null);
+        }
+    }, [open]);
+    return (<Dialog open={open} fullWidth maxWidth='sm' onClose={onClose}>
+      <DialogTitle>{title[locale]}</DialogTitle>
+      <DialogContent>
+        <Autocomplete 
+    // multiple
+    options={options ?? []} getOptionLabel={(option) => option.label} getOptionKey={(option) => option.value} isOptionEqualToValue={(option, value) => option.value === value.value} renderInput={(params) => (<TextField {...params} label={translations.search[locale]} placeholder=''/>)} onChange={(event, newValue) => {
+            setValue(newValue);
+        }} value={value}/>
+      </DialogContent>
+      <DialogActions>
+        <Button size='small' variant='outlined' onClick={onClose}>
+          {translations.cancel[locale]}
+        </Button>
+        <Button variant='contained' onClick={() => {
+            onConfirm(value);
+            onClose();
+        }}>
+          {translations.ok[locale]}
+        </Button>
+      </DialogActions>
+    </Dialog>);
+};
+export default AddItemDialog;

package/lib/components/DeleteConfirmationDialog.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography, } from '@mui/material';
+import { useLocale } from '@deix/rossini-core';
+const translations = {
+    title: {
+        en: 'Delete item?',
+        it: 'Cancellare elemento?',
+    },
+    message: {
+        en: 'This is a permanent action',
+        it: "Questa è un'azione permanente",
+    },
+    yes: {
+        en: 'Yes',
+        it: 'Si',
+    },
+    no: {
+        en: 'No',
+        it: 'No',
+    },
+};
+const DeleteConfirmationDialog = ({ open, onClose, onConfirm, }) => {
+    const locale = useLocale();
+    return (<Dialog open={open} fullWidth maxWidth='sm' onClose={onClose}>
+      <DialogTitle>{translations.title[locale]}</DialogTitle>
+      <DialogContent>
+        <Typography variant='caption'>
+          {translations.message[locale]}
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button size='small' variant='outlined' onClick={onClose}>
+          {translations.no[locale]}
+        </Button>
+        <Button size='small' variant='contained' onClick={() => {
+            onConfirm();
+            onClose();
+        }}>
+          {translations.yes[locale]}
+        </Button>
+      </DialogActions>
+    </Dialog>);
+};
+export default DeleteConfirmationDialog;

package/lib/components/SearchField.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import SearchIcon from '@mui/icons-material/Search';
+import { IconButton, TextField, } from '@mui/material';
+import { useState } from 'react';
+const SearchField = ({ placeholder = 'Search...', onSearch, ...props }) => {
+    const [value, setValue] = useState('');
+    return (<>
+      <TextField size='small' placeholder={placeholder} value={value} onChange={(evt) => {
+            setValue(evt.target.value);
+            onSearch(evt.target.value);
+        }} {...props} InputProps={{
+            endAdornment: (<IconButton size='small' onClick={() => onSearch(value)}>
+              <SearchIcon />
+            </IconButton>),
+        }}/>
+    </>);
+};
+export default SearchField;

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

@@ -1 +1 @@
-{"version":3,"file":"CreateGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/groups/CreateGroupDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,iBAAiB,sBAAuB,sBAAsB,sBAqBnE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"CreateGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/groups/CreateGroupDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,iBAAiB,sBAAuB,sBAAsB,sBAoBnE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/groups/{CreateGroupDialog.js → CreateGroupDialog.jsx}

@@ -1,24 +1,25 @@
 import React from 'react';
-import { useAPI, useLocale } from '@deix/rossini-core';
+import { useLocale } from '@deix/rossini-core';
 import { Dialog, DialogContent, DialogTitle } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
-import { useConfig } from '../../config';
 import groupsTranslations from '../../lang/groups';
 import { useAddGroup } from '../../utils/hooks/groups';
 import GroupForm from './GroupForm';
+import { useAPIClient } from '../../utils/hooks/useAPIClient';
 const CreateGroupDialog = ({ open, onClose }) => {
     const locale = useLocale();
-    const config = useConfig();
-    const apiClient = useAPI(config.generalProperties.apiURL);
+    const apiClient = useAPIClient();
     const queryClient = useQueryClient();
     const { mutate: addGroup } = useAddGroup(queryClient, apiClient);
     const handleSave = (group) => {
         addGroup(group);
         onClose();
     };
-    return (React.createElement(Dialog, { open: open, fullWidth: true, maxWidth: 'sm', onClose: onClose },
-        React.createElement(DialogTitle, null, groupsTranslations.create[locale]),
-        React.createElement(DialogContent, null,
-            React.createElement(GroupForm, { mode: 'create', onSave: handleSave, onCancel: onClose }))));
+    return (<Dialog open={open} fullWidth maxWidth='sm' onClose={onClose}>
+      <DialogTitle>{groupsTranslations.create[locale]}</DialogTitle>
+      <DialogContent>
+        <GroupForm mode='create' onSave={handleSave} onCancel={onClose}/>
+      </DialogContent>
+    </Dialog>);
 };
 export default CreateGroupDialog;

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

@@ -1 +1 @@
-{"version":3,"file":"GroupDetails.d.ts","sourceRoot":"","sources":["../../../src/components/groups/GroupDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAI3C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,QAAA,MAAM,YAAY,cAAe,iBAAiB,sBAoBjD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"GroupDetails.d.ts","sourceRoot":"","sources":["../../../src/components/groups/GroupDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAK3C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,QAAA,MAAM,YAAY,cAAe,iBAAiB,sBAmBjD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/groups/{GroupDetails.js → GroupDetails.jsx}

@@ -1,18 +1,17 @@
 import React from 'react';
-import { useAPI } from '@deix/rossini-core';
 import { useQueryClient } from '@tanstack/react-query';
-import { useConfig } from '../../config';
 import { useUpdateGroup } from '../../utils/hooks/groups';
 import GroupForm from './GroupForm';
+import { useAPIClient } from '../../utils/hooks/useAPIClient';
 const GroupDetails = ({ group }) => {
-    const config = useConfig();
-    const apiClient = useAPI(config.generalProperties.apiURL);
+    const apiClient = useAPIClient();
     const queryClient = useQueryClient();
     const { mutate: updateGroup } = useUpdateGroup(queryClient, apiClient);
     const handleUpdate = (group) => {
         updateGroup(group);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(GroupForm, { mode: 'modify', group: group, onSave: handleUpdate, onCancel: () => { } })));
+    return (<>
+      <GroupForm mode='modify' group={group} onSave={handleUpdate} onCancel={() => { }}/>
+    </>);
 };
 export default GroupDetails;

package/lib/components/groups/GroupForm.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useLocale } from '@deix/rossini-core';
+import { Button, Grid, TextField } from '@mui/material';
+import { Controller, useForm } from 'react-hook-form';
+import { useEffect } from 'react';
+import groupsTranslations from '../../lang/groups';
+const GroupForm = ({ group, onCancel, onSave, mode }) => {
+    const locale = useLocale();
+    const { control, handleSubmit, setValue } = useForm({
+        defaultValues: {
+            id: group?.id,
+            name: group?.name,
+        },
+    });
+    useEffect(() => {
+        if (group) {
+            setValue('id', group?.id);
+            setValue('name', group?.name);
+        }
+    }, [group, setValue]);
+    const onSubmit = (data) => {
+        onSave(data);
+    };
+    return (<form onSubmit={(event) => void handleSubmit(onSubmit)(event)}>
+      <Grid container spacing={2} sx={{ mt: 2, maxWidth: 'sm' }} justifyContent='stretch'>
+        <Grid item xs={12}>
+          <Controller name='name' control={control} render={({ field }) => (<TextField size='small' fullWidth label={groupsTranslations.name[locale]} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid item sx={{
+            mt: 2,
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 2,
+            width: '100%',
+        }}>
+          {mode === 'create' && (<Button variant='outlined' onClick={onCancel}>
+              {groupsTranslations.cancel[locale]}
+            </Button>)}
+          <Button variant='contained' type='submit'>
+            {groupsTranslations.save[locale]}
+          </Button>
+        </Grid>
+      </Grid>
+    </form>);
+};
+export default GroupForm;

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

@@ -1 +1 @@
-{"version":3,"file":"GroupTabs.d.ts","sourceRoot":"","sources":["../../../src/components/groups/GroupTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAa,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAK3C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,iBAAiB,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,CAAC,EAAE,QAAQ,EAAE,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,8BAAoC,cAAc,sBAwChE,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"GroupTabs.d.ts","sourceRoot":"","sources":["../../../src/components/groups/GroupTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAa,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAK3C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,iBAAiB,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,CAAC,EAAE,QAAQ,EAAE,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,8BAAoC,cAAc,sBA4ChE,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/groups/GroupTabs.jsx

@@ -0,0 +1,33 @@
+'use client';
+import React, { useState } from 'react';
+import { Box, Tab, Tabs } from '@mui/material';
+import { useLocale } from '@deix/rossini-core';
+import GroupDetails from './GroupDetails';
+import groupsTranslations from '../../lang/groups';
+import GroupUsers from './GroupUsers';
+const GroupTabs = ({ group, additionalTabs = [] }) => {
+    const locale = useLocale();
+    const [selectedTab, setSelectedTab] = useState('DETAILS');
+    return (<Box sx={{
+            flexGrow: 1,
+            maxWidth: '100%',
+            overflowX: 'hidden',
+            alignSelf: 'stretch',
+        }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={selectedTab} onChange={(_evt, newValue) => {
+            setSelectedTab(newValue);
+        }} aria-label='basic tabs example'>
+          <Tab label={groupsTranslations.details[locale]} value='DETAILS'/>
+          <Tab label={groupsTranslations.users[locale]} value='USERS'/>
+          {additionalTabs.map((tab, index) => (<Tab key={`tab${index}`} label={tab.title[locale]} value={`ADDITIONAL_TAB_${index}`}/>))}
+        </Tabs>
+      </Box>
+      <Box sx={{ p: 1 }}>
+        {selectedTab === 'DETAILS' && <GroupDetails group={group}/>}
+        {selectedTab === 'USERS' && <GroupUsers group={group}/>}
+        {additionalTabs.map((tab, index) => selectedTab === `ADDITIONAL_TAB_${index}` && (<tab.component key={`tab${index}`} group={group}/>))}
+      </Box>
+    </Box>);
+};
+export default GroupTabs;

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

@@ -1 +1 @@
-{"version":3,"file":"GroupUsers.d.ts","sourceRoot":"","sources":["../../../src/components/groups/GroupUsers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AA+B3C,UAAU,eAAe;IACvB,KAAK,EAAE,KAAK,CAAC;CACd;AAED,QAAA,MAAM,UAAU,cAAe,eAAe,sBA+F7C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"GroupUsers.d.ts","sourceRoot":"","sources":["../../../src/components/groups/GroupUsers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AA8B3C,UAAU,eAAe;IACvB,KAAK,EAAE,KAAK,CAAC;CACd;AAED,QAAA,MAAM,UAAU,cAAe,eAAe,sBA8F7C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/groups/GroupUsers.jsx

@@ -0,0 +1,88 @@
+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, useLocale } from '@deix/rossini-core';
+import { useAddUserToGroup, useRemoveUserFromGroup, useUsers, } from '../../utils/hooks/users';
+import { useState } from 'react';
+import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
+import { useQueryClient } from '@tanstack/react-query';
+import AddItemDialog from '../AddItemDialog';
+import { useGroupUsers } from '../../utils/hooks/groups';
+import groupsTranslations from '../../lang/groups';
+import { useAPIClient } from '../../utils/hooks/useAPIClient';
+const groupUsersTableColumns = [
+    {
+        id: 'username',
+        label: { en: 'Username', it: 'Username' },
+    },
+    {
+        id: 'firstName',
+        label: { en: 'First name', it: 'Nome' },
+    },
+    {
+        id: 'lastName',
+        label: { en: 'Last name', it: 'Cognome' },
+    },
+];
+const GroupUsers = ({ group }) => {
+    const locale = useLocale();
+    const apiClient = useAPIClient();
+    const queryClient = useQueryClient();
+    const { data: users } = useUsers(apiClient);
+    const { data: groupUsers } = useGroupUsers(group?.id, apiClient);
+    const { mutate: addUserToGroup } = useAddUserToGroup(queryClient, apiClient);
+    const { mutate: removeUserFromGroup } = useRemoveUserFromGroup(queryClient, apiClient);
+    const [openAddUserDialog, setOpenAddUserDialog] = useState(false);
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteId, setDeleteId] = useState();
+    return (<>
+      {groupUsers && groupUsers.length > 0 && (<Box maxWidth='md'>
+          <TableContainer>
+            <Table size='small'>
+              <TableHead>
+                <TableRow>
+                  {groupUsersTableColumns.map((col) => (<TableCell key={col.id} align={col.align || 'inherit'}>
+                      {isStringTranslation(col.label)
+                    ? col.label[locale]
+                    : col.label}
+                    </TableCell>))}
+                  <TableCell padding='none'>{''}</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {groupUsers?.map((user, rowIdx) => (<TableRow key={rowIdx}>
+                    <TableCell>{user.username}</TableCell>
+                    <TableCell>{user.firstName}</TableCell>
+                    <TableCell>{user.lastName}</TableCell>
+                    <TableCell padding='none' align='right'>
+                      <IconButton size='small' onClick={(evt) => {
+                    evt.stopPropagation();
+                    setOpenConfirmationDialog(true);
+                    setDeleteId(user.id);
+                }}>
+                        <DeleteIcon />
+                      </IconButton>
+                    </TableCell>
+                  </TableRow>))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Box>)}
+      <Button variant='outlined' startIcon={<AddIcon />} onClick={() => setOpenAddUserDialog(true)} sx={{ marginTop: 2 }}>
+        {groupsTranslations.addUser[locale]}
+      </Button>
+      <AddItemDialog open={openAddUserDialog} onClose={() => setOpenAddUserDialog(false)} onConfirm={(value) => {
+            if (value) {
+                addUserToGroup({ userId: value?.value, groupId: group.id });
+            }
+        }} title={groupsTranslations.addUser} options={users?.map((user) => ({
+            value: user.id,
+            label: user.username || '',
+        }))}/>
+      <DeleteConfirmationDialog open={openConfirmationDialog} onClose={() => setOpenConfirmationDialog(false)} onConfirm={() => deleteId
+            ? removeUserFromGroup({ userId: deleteId, groupId: group.id })
+            : {}}/>
+    </>);
+};
+export default GroupUsers;

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

@@ -1 +1 @@
-{"version":3,"file":"Groups.d.ts","sourceRoot":"","sources":["../../../src/components/groups/Groups.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,OAAkB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGlD,UAAU,WAAW;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,QAAQ,EAAE,CAAC;CAC7B;AAED,QAAA,MAAM,MAAM,+BAAqC,WAAW,sBAqH3D,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Groups.d.ts","sourceRoot":"","sources":["../../../src/components/groups/Groups.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,OAAkB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIlD,UAAU,WAAW;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,QAAQ,EAAE,CAAC;CAC7B;AAED,QAAA,MAAM,MAAM,+BAAqC,WAAW,sBAuH3D,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/groups/{Groups.js → Groups.jsx}

@@ -12,6 +12,7 @@ import groupsTranslations from '../../lang/groups';
 import { useDeleteGroup, useGroups } from '../../utils/hooks/groups';
 import GroupTabs from './GroupTabs';
 import { useQueryClient } from '@tanstack/react-query';
+import { APIClientProvider } from '../../utils/hooks/useAPIClient';
 const Groups = ({ apiUrl, additionalTabs = [] }) => {
     const locale = useLocale();
     const apiClient = useAPI(apiUrl);
@@ -34,45 +35,59 @@ const Groups = ({ apiUrl, additionalTabs = [] }) => {
         deleteGroup(id);
         setSelectedGroup(undefined);
     };
-    return (React.createElement(Box, { sx: {
+    return (<APIClientProvider baseURL={apiUrl}>
+      <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: {
+        }}>
+        {!selectedGroup && (<>
+            <Grid container spacing={2} sx={{ marginBottom: 2 }}>
+              <Grid item>
+                <SearchField placeholder={groupsTranslations.search[locale]} onSearch={(value) => setSearchString(value)}/>
+              </Grid>
+              <Grid item>
+                <Button variant='contained' startIcon={<GroupAddIcon />} onClick={() => {
+                setOpenGroupDialog(true);
+                setSelectedGroup(undefined);
+            }}>
+                  {groupsTranslations.new[locale]}
+                </Button>
+              </Grid>
+            </Grid>
+            <GroupsTable groups={filteredGroups} selectedGroup={selectedGroup} setSelectedGroup={(group) => {
+                setSelectedGroup(group);
+            }} onDelete={handleDelete}/>
+          </>)}
+        {selectedGroup && (<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);
-            } })));
+            }}>
+            <Box sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+            }}>
+              <IconButton aria-label='delete' color='primary' onClick={() => setSelectedGroup(undefined)} sx={{ mr: 2 }}>
+                <ArrowBackIcon />
+              </IconButton>
+              <Link underline='none' href='#' onClick={() => setSelectedGroup(undefined)}>
+                {groupsTranslations.title[locale]}
+              </Link>
+              <KeyboardArrowRightIcon />
+              {selectedGroup.name}
+            </Box>
+            <GroupTabs group={selectedGroup} additionalTabs={additionalTabs}/>
+          </Box>)}
+        <CreateGroupDialog open={openGroupDialog} onClose={() => {
+            setOpenGroupDialog(false);
+        }}/>
+      </Box>
+    </APIClientProvider>);
 };
 export default Groups;

package/lib/components/groups/GroupsTable.jsx

@@ -0,0 +1,55 @@
+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 (<>
+      <TableContainer>
+        <Table size='small'>
+          <TableHead>
+            <TableRow>
+              {groupsTableColumns.map((col) => (<TableCell key={col.id} align={col.align || 'inherit'}>
+                  {isStringTranslation(col.label)
+                ? col.label[locale]
+                : col.label}
+                </TableCell>))}
+              <TableCell padding='none'>{''}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {groups.map((group, rowIdx) => (<TableRow key={rowIdx} onClick={() => setSelectedGroup(group)} sx={{
+                cursor: 'pointer',
+                background: selectedGroup && group.id === selectedGroup.id
+                    ? muiTheme.palette.primary.light
+                    : undefined,
+            }}>
+                <TableCell>{group.name}</TableCell>
+                <TableCell padding='none' align='right'>
+                  <IconButton size='small' onClick={(evt) => {
+                evt.stopPropagation();
+                setOpenConfirmationDialog(true);
+                setDeleteId(group.id);
+            }}>
+                    <DeleteIcon />
+                  </IconButton>
+                </TableCell>
+              </TableRow>))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <DeleteConfirmationDialog open={openConfirmationDialog} onClose={() => setOpenConfirmationDialog(false)} onConfirm={() => (deleteId ? onDelete(deleteId) : {})}/>
+    </>);
+};
+export default GroupsTable;

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

@@ -1 +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"}
+{"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,sBAoBjE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/users/{CreateUserDialog.js → CreateUserDialog.jsx}

@@ -1,24 +1,25 @@
 import React from 'react';
-import { useAPI, useLocale } from '@deix/rossini-core';
+import { 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';
+import { useAPIClient } from '../../utils/hooks/useAPIClient';
 const CreateUserDialog = ({ open, onClose }) => {
     const locale = useLocale();
-    const config = useConfig();
-    const apiClient = useAPI(config.generalProperties.apiURL);
+    const apiClient = useAPIClient();
     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 }))));
+    return (<Dialog open={open} fullWidth maxWidth='sm' onClose={onClose}>
+      <DialogTitle>{usersTranslations.create[locale]}</DialogTitle>
+      <DialogContent>
+        <UserForm mode='create' onSave={handleSave} onCancel={onClose}/>
+      </DialogContent>
+    </Dialog>);
 };
 export default CreateUserDialog;

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

@@ -1 +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"}
+{"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,sBAkBtD,CAAC;AAEF,eAAe,eAAe,CAAC"}