From 47c01ae7d59b3fe56164ba87e821f98e06832a36 Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Wed, 18 Sep 2024 12:00:03 +0200
Subject: [PATCH 01/12] added missing modifier for active status in users table

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/pages/users/users.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/users/users.js b/src/pages/users/users.js
index b5890dea..d640f8a0 100644
--- a/src/pages/users/users.js
+++ b/src/pages/users/users.js
@@ -62,6 +62,10 @@ const Users = ({}) => {
         setIsNewModalOpened(false);
     }
 
+    const getIconForActiveColumn = (active) => {
+        return <Icon icon={active ? 'check' : 'times'} />
+    }
+
     const handleEditUser = async (data) => {
         if(data){
             try {
@@ -188,7 +192,7 @@ const Users = ({}) => {
                 <DataColumn title='Username' width='150' dataKey='username' />
                 <DataColumn title='E-mail' dataKey='mail'/>
                 <DataColumn title='Role' dataKey='role'/>
-                <DataColumn title='Active' dataKey='active' modifier={(active) => {}}/>
+                <DataColumn title='Active' dataKey='active' modifier={(active) => getIconForActiveColumn(active)}/>
                 <ButtonColumn
                     width='200'
                     align='right'

From 4f90368412d641b76db1de600968a7bdd559fa73 Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Wed, 18 Sep 2024 13:58:41 +0200
Subject: [PATCH 02/12] added pages for usergroups and add usergroup dialog

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/app.js                                    |   8 ++
 src/branding/branding.js                      |   1 +
 src/branding/villasweb/villasweb-values.js    |   1 +
 src/common/menu.js                            |  14 +++
 .../usergroups/dialogs/addUsergroupDialog.js  | 117 ++++++++++++++++++
 src/pages/usergroups/styles.js                |  21 ++++
 .../tables/usergroup-scenarios-table.js       |  22 ++++
 .../tables/usergroup-users-table.js           |  22 ++++
 src/pages/usergroups/usergroup.js             |  46 +++++++
 src/pages/usergroups/usergroups.js            |  82 ++++++++++++
 src/store/apiSlice.js                         |  23 +++-
 src/store/endpoints/usergroup-endpoints.js    |  31 +++++
 12 files changed, 387 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/usergroups/dialogs/addUsergroupDialog.js
 create mode 100644 src/pages/usergroups/styles.js
 create mode 100644 src/pages/usergroups/tables/usergroup-scenarios-table.js
 create mode 100644 src/pages/usergroups/tables/usergroup-users-table.js
 create mode 100644 src/pages/usergroups/usergroup.js
 create mode 100644 src/pages/usergroups/usergroups.js
 create mode 100644 src/store/endpoints/usergroup-endpoints.js

diff --git a/src/app.js b/src/app.js
index 79405053..9456c324 100644
--- a/src/app.js
+++ b/src/app.js
@@ -37,6 +37,8 @@ import './styles/login.css';
 import branding from './branding/branding';
 import Logout from './pages/login/logout';
 import Infrastructure from './pages/infrastructure/infrastructure';
+import Usergroups from './pages/usergroups/usergroups';
+import Usergroup from './pages/usergroups/usergroup';
 import { useSelector } from 'react-redux';
 
 const App = () => {
@@ -72,6 +74,12 @@ const App = () => {
               <Route exact path="/scenarios">
                 <Scenarios />
               </Route>
+              <Route path="/usergroups">
+                  <Usergroups />
+              </Route>
+              <Route path="/usergroup/:usergroup">
+                  <Usergroup />
+              </Route>
               <Route exact path="/logout">
                 <Logout />
               </Route>
diff --git a/src/branding/branding.js b/src/branding/branding.js
index 2d3bf535..257e7ee9 100644
--- a/src/branding/branding.js
+++ b/src/branding/branding.js
@@ -157,6 +157,7 @@ class Branding {
       pages.scenarios = true;
       pages.infrastructure = true;
       pages.users = true;
+      pages.usergroups = true;
       pages.account = true;
       pages.api = true;
 
diff --git a/src/branding/villasweb/villasweb-values.js b/src/branding/villasweb/villasweb-values.js
index 3d235303..f1f368b2 100644
--- a/src/branding/villasweb/villasweb-values.js
+++ b/src/branding/villasweb/villasweb-values.js
@@ -23,6 +23,7 @@ const villasweb_values = {
     home: true,
     scenarios: true,
     infrastructure: true,
+    usergroups: true,
     account: true,
     api: true,
   },
diff --git a/src/common/menu.js b/src/common/menu.js
index b30eb1c5..82f82ece 100644
--- a/src/common/menu.js
+++ b/src/common/menu.js
@@ -99,6 +99,13 @@ const SideBarMenu = (props) => {
                 </NavLink>
               </li> : ''
             }
+            <li>
+              <NavLink
+                to="/usergroups"
+                title="Usegroups">
+                Usergroups
+              </NavLink>
+            </li>
             <li hidden={!values.pages.account}>
               <NavLink
                 to="/account"
@@ -156,6 +163,13 @@ const SideBarMenu = (props) => {
                 </NavLink>
               </li> : ''
             }
+            <li>
+              <NavLink
+                to="/usergroups"
+                title="Usegroups">
+                Usergroups
+              </NavLink>
+            </li>
             <li hidden={!values.pages.account}>
               <NavLink
                 to="/account"
diff --git a/src/pages/usergroups/dialogs/addUsergroupDialog.js b/src/pages/usergroups/dialogs/addUsergroupDialog.js
new file mode 100644
index 00000000..cac9f9d7
--- /dev/null
+++ b/src/pages/usergroups/dialogs/addUsergroupDialog.js
@@ -0,0 +1,117 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { useState } from 'react';
+import { Form, Col, Button} from 'react-bootstrap';
+import Dialog from '../../../common/dialogs/dialog';
+import { useGetScenariosQuery } from '../../../store/apiSlice';
+
+const AddUsergroupDialog = ({isModalOpened, onClose}) => {
+
+    const [name, setName] = useState('');
+    const [isValid, setIsValid] = useState(false);
+    const [selectedOption, setSelectedOption] = useState('addUsersToScenario');
+    const [selectedScenarioID, setSelectedScenarioID] = useState('');
+
+    const {data: {scenarios} = {}, isLoading: isLoadingScenarios} = useGetScenariosQuery();
+
+    const checkValidity = (name, scenarioID) => {
+        //group names have to be at lest 3 characters long and cannot start with spaces
+        const isNameValid = name.length >= 3 && !(/^\s/.test(name));
+        //scenario ID is chosen from the dropdown therefore we just make sure that empty option is not selected
+        const isScenarioIDValid = scenarioID !== '';
+        setIsValid(isNameValid && isScenarioIDValid);
+    }
+
+    const handleNameChange = (e) => {
+        const newName = e.target.value;
+        setName(newName);
+        checkValidity(newName, selectedScenarioID);
+    }
+
+    const handleRadioChange = (e) => {
+        setSelectedOption(e.target.value);
+    }
+
+    const handleClose = (canceled) => {
+        if(canceled) {
+            onClose(null);
+        } else {
+            onClose({name: name, scenarioID: selectedScenarioID, isDuplicateSelected: selectedOption === 'duplicateScenarioForUsers'});
+        }
+    }
+
+    const handleReset = () => {
+        setName('');
+    }
+
+    const handleSelectChange = (e) => {
+        setSelectedScenarioID(e.target.value);
+        checkValidity(name, e.target.value);
+    };
+
+    return (<Dialog
+      show={isModalOpened}
+      title="New User Group"
+      buttonTitle="Add"
+      onClose={handleClose}
+      onReset={handleReset}
+      valid={isValid}>
+      <Form>
+        <Form.Group as={Col} controlId="name" style={{marginBottom: '15px'}}>
+          <Form.Label>Name</Form.Label>
+          <Form.Control type="text" placeholder="Enter name" value={name} onChange={handleNameChange} />
+          <Form.Control.Feedback />
+        </Form.Group>
+        <Form.Group as={Col} controlId="radioGroup" style={{ marginBottom: '15px' }}>
+          <div>
+            <Form.Check
+              type="radio"
+              id="addUsersToScenario"
+              name="options"
+              label="Add users to scenario"
+              value="addUsersToScenario"
+              checked={selectedOption === 'addUsersToScenario'}
+              onChange={handleRadioChange}
+            />
+            <Form.Check
+              type="radio"
+              id="duplicateScenarioForUsers"
+              name="options"
+              label="Duplicate scenario for each user"
+              value="duplicateScenarioForUsers"
+              checked={selectedOption === 'duplicateScenarioForUsers'}
+              onChange={handleRadioChange}
+            />
+          </div>
+        </Form.Group>
+
+        <Form.Group controlId="scenario">
+        <Form.Label>Select Option</Form.Label>
+        {isLoadingScenarios ? <div>Loading...</div> : (
+            <Form.Control as="select" value={selectedScenarioID} onChange={handleSelectChange}>
+            <option value="">-- Select scenario --</option>
+            {scenarios.map(scenario => <option key={scenario.id} value={scenario.id}>{scenario.name}</option>)}
+            </Form.Control>
+        )}
+      </Form.Group>
+      </Form>
+    </Dialog>);
+}
+
+export default AddUsergroupDialog;
diff --git a/src/pages/usergroups/styles.js b/src/pages/usergroups/styles.js
new file mode 100644
index 00000000..826affee
--- /dev/null
+++ b/src/pages/usergroups/styles.js
@@ -0,0 +1,21 @@
+export const buttonStyle = {
+    marginLeft: '5px',
+}
+
+export const iconStyle = {
+  height: '25px',
+  width: '25px'
+}
+
+export const tableHeadingStyle = {
+  paddingTop: '30px'
+}
+
+export const dialogWarningLabel = {
+  background: '#eb4d2a', 
+  color: 'white'
+}
+
+export const signalDialogCheckButton = { 
+  float: 'right' 
+}
diff --git a/src/pages/usergroups/tables/usergroup-scenarios-table.js b/src/pages/usergroups/tables/usergroup-scenarios-table.js
new file mode 100644
index 00000000..01e43463
--- /dev/null
+++ b/src/pages/usergroups/tables/usergroup-scenarios-table.js
@@ -0,0 +1,22 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+const UsergroupScenariosTable = (props) => {
+    return <div></div>
+}
+
+export default UsergroupScenariosTable;
diff --git a/src/pages/usergroups/tables/usergroup-users-table.js b/src/pages/usergroups/tables/usergroup-users-table.js
new file mode 100644
index 00000000..08fae10c
--- /dev/null
+++ b/src/pages/usergroups/tables/usergroup-users-table.js
@@ -0,0 +1,22 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+const UsergroupUsersTable = (props) => {
+    return <div></div>
+}
+
+export default UsergroupUsersTable;
diff --git a/src/pages/usergroups/usergroup.js b/src/pages/usergroups/usergroup.js
new file mode 100644
index 00000000..d7f7e0a9
--- /dev/null
+++ b/src/pages/usergroups/usergroup.js
@@ -0,0 +1,46 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import { useParams } from "react-router-dom/cjs/react-router-dom.min";
+import { Table, DataColumn, LinkColumn } from "../../common/table";
+import { Row, Col } from "react-bootstrap";
+import UsergroupScenariosTable from "./tables/usergroup-scenarios-table";
+import UsergroupUsersTable from "./tables/usergroup-users-table";
+
+const Usergroup = (props) => {
+    // const params = useParams();
+    // const id = params.usergroup;
+    const usergroup = {name: 'Test Group'};
+
+    return (
+        <div className='section'>
+            <h1>{usergroup.name}</h1>
+            <Row>
+                <Col>
+                    <h4>Users</h4>
+                    <UsergroupUsersTable />
+                </Col>
+                <Col>
+                    <h4>Scenario Mappings</h4>
+                    <UsergroupScenariosTable />
+                </Col>
+            </Row>
+        </div>
+    );
+}
+
+export default Usergroup;
diff --git a/src/pages/usergroups/usergroups.js b/src/pages/usergroups/usergroups.js
new file mode 100644
index 00000000..70d6c714
--- /dev/null
+++ b/src/pages/usergroups/usergroups.js
@@ -0,0 +1,82 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import { useState } from "react";
+import { useGetUsergroupsQuery, useAddUserGroupMutation } from "../../store/apiSlice";
+import { Table, DataColumn, LinkColumn } from "../../common/table";
+import IconButton from "../../common/buttons/icon-button";
+import { buttonStyle, iconStyle } from "./styles";
+import AddUsergroupDialog from "./dialogs/addUsergroupDialog";
+
+const Usergroups = (props) => {
+    const {data: {usergroups} = {}, refetch: refetchUsergroups, isLoading} = useGetUsergroupsQuery();
+    const [addUserGroup] = useAddUserGroupMutation();
+    
+    const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+
+    const handleAddNewGroup = async (response) => {
+      if(response){
+        try {
+          //put data in correct structure
+          const usergroup = {Name: response.name, ScenarioMappings: [{Duplicate: response.isDuplicateSelected, ScenarioID: Number(response.scenarioID)}]};
+          await addUserGroup(usergroup).unwrap();
+      
+          refetchUsergroups();
+        } catch (err) {
+          console.log("Error adding usergroup: ", err);
+        }
+      }
+      setIsAddDialogOpen(false);
+    }
+    
+    if(isLoading) return <div>Loading</div>;
+
+    if(usergroups){
+      return (<div className="section"> 
+        <h1>
+          User Groups
+          <span className="icon-button">
+              <IconButton
+              childKey={0}
+              tooltip="Add Usergroup"
+              onClick={() => setIsAddDialogOpen(true)}
+              icon="plus"
+              buttonStyle={buttonStyle}
+              iconStyle={iconStyle}
+              />
+          </span>
+        </h1>
+        <Table data={usergroups}>
+            <DataColumn
+              title='ID'
+              dataKey='id'
+              width={70}
+            />
+            <LinkColumn
+              title="Name"
+              dataKey="name"
+              link="/usergroup/"
+              linkKey="id"
+            />
+        </Table>
+
+        <AddUsergroupDialog isModalOpened={isAddDialogOpen} onClose={handleAddNewGroup} />
+    </div>);
+    }
+}
+
+export default Usergroups;
diff --git a/src/store/apiSlice.js b/src/store/apiSlice.js
index 3080f15d..7a0703d5 100644
--- a/src/store/apiSlice.js
+++ b/src/store/apiSlice.js
@@ -1,3 +1,20 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { sessionToken } from '../localStorage';
 import { widgetEndpoints } from './endpoints/widget-endpoints';
@@ -11,6 +28,7 @@ import { signalEndpoints } from './endpoints/signal-endpoints';
 import { resultEndpoints } from './endpoints/result-endpoints';
 import { authEndpoints } from './endpoints/auth-endpoints';
 import { websocketEndpoints } from './endpoints/websocket-endpoints';
+import { usergroupEndpoints } from './endpoints/usergroup-endpoints';
 
 export const apiSlice = createApi({
   reducerPath: 'api',
@@ -36,6 +54,7 @@ export const apiSlice = createApi({
     ...signalEndpoints(builder),
     ...authEndpoints(builder),
     ...websocketEndpoints(builder),
+    ...usergroupEndpoints(builder),
   }),
 });
 
@@ -86,5 +105,7 @@ export const {
   useUpdateSignalMutation,
   useGetIcDataQuery,
   useLazyDownloadImageQuery,
-  useUpdateComponentConfigMutation
+  useUpdateComponentConfigMutation,
+  useGetUsergroupsQuery,
+  useAddUserGroupMutation
 } = apiSlice;
diff --git a/src/store/endpoints/usergroup-endpoints.js b/src/store/endpoints/usergroup-endpoints.js
new file mode 100644
index 00000000..15311483
--- /dev/null
+++ b/src/store/endpoints/usergroup-endpoints.js
@@ -0,0 +1,31 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+export const usergroupEndpoints = (builder) => ({
+    getUsergroups: builder.query({
+      query: () => 'usergroups',
+    }),
+    addUserGroup: builder.mutation({
+      query: (usergroup) => ({
+        url: '/usergroups',
+        method: 'POST',
+        body: {
+          userGroup: usergroup
+        },
+      }),
+    }),
+});

From f6f147f1fe240ad685bff8d5cf543d41157dd60d Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Wed, 18 Sep 2024 14:08:00 +0200
Subject: [PATCH 03/12] implemented delete usergroup

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/pages/usergroups/usergroups.js         | 41 +++++++++++++++++++---
 src/store/apiSlice.js                      |  3 +-
 src/store/endpoints/usergroup-endpoints.js |  8 ++++-
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/pages/usergroups/usergroups.js b/src/pages/usergroups/usergroups.js
index 70d6c714..942e495e 100644
--- a/src/pages/usergroups/usergroups.js
+++ b/src/pages/usergroups/usergroups.js
@@ -16,24 +16,28 @@
  ******************************************************************************/
 
 import { useState } from "react";
-import { useGetUsergroupsQuery, useAddUserGroupMutation } from "../../store/apiSlice";
-import { Table, DataColumn, LinkColumn } from "../../common/table";
+import { useGetUsergroupsQuery, useAddUsergroupMutation,useDeleteUsergroupMutation } from "../../store/apiSlice";
+import { Table, DataColumn, LinkColumn, ButtonColumn } from "../../common/table";
 import IconButton from "../../common/buttons/icon-button";
 import { buttonStyle, iconStyle } from "./styles";
 import AddUsergroupDialog from "./dialogs/addUsergroupDialog";
+import DeleteDialog from "../../common/dialogs/delete-dialog";
 
 const Usergroups = (props) => {
     const {data: {usergroups} = {}, refetch: refetchUsergroups, isLoading} = useGetUsergroupsQuery();
-    const [addUserGroup] = useAddUserGroupMutation();
+    const [addUsergroup] = useAddUsergroupMutation();
+    const [deleteUsergroup] = useDeleteUsergroupMutation();
     
     const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+    const [dialogUsegroup, setDialogUsergroup] = useState({});
 
     const handleAddNewGroup = async (response) => {
       if(response){
         try {
           //put data in correct structure
           const usergroup = {Name: response.name, ScenarioMappings: [{Duplicate: response.isDuplicateSelected, ScenarioID: Number(response.scenarioID)}]};
-          await addUserGroup(usergroup).unwrap();
+          await addUsergroup(usergroup).unwrap();
       
           refetchUsergroups();
         } catch (err) {
@@ -42,6 +46,20 @@ const Usergroups = (props) => {
       }
       setIsAddDialogOpen(false);
     }
+
+    const handleDeleteUsergroup = async (isConfirmed) => {
+      if(isConfirmed){
+        try{
+          await deleteUsergroup(dialogUsegroup.id);
+          refetchUsergroups();
+        } catch(error){
+          console.log('Error deleting usergroup', error)
+        }
+      }
+
+      setDialogUsergroup({});
+      setIsDeleteDialogOpen(false);
+    }
     
     if(isLoading) return <div>Loading</div>;
 
@@ -72,9 +90,24 @@ const Usergroups = (props) => {
               link="/usergroup/"
               linkKey="id"
             />
+            <ButtonColumn
+              width="200"
+              align="right"
+              deleteButton
+              onDelete={(index) => {
+                setDialogUsergroup(usergroups[index]);
+                setIsDeleteDialogOpen(true);
+              }}
+            />
         </Table>
 
         <AddUsergroupDialog isModalOpened={isAddDialogOpen} onClose={handleAddNewGroup} />
+        <DeleteDialog
+            title="scenario"
+            name={dialogUsegroup.name}
+            show={isDeleteDialogOpen}
+            onClose={(isConfirmed) => handleDeleteUsergroup(isConfirmed)}
+          />
     </div>);
     }
 }
diff --git a/src/store/apiSlice.js b/src/store/apiSlice.js
index 7a0703d5..f7295573 100644
--- a/src/store/apiSlice.js
+++ b/src/store/apiSlice.js
@@ -107,5 +107,6 @@ export const {
   useLazyDownloadImageQuery,
   useUpdateComponentConfigMutation,
   useGetUsergroupsQuery,
-  useAddUserGroupMutation
+  useAddUsergroupMutation,
+  useDeleteUsergroupMutation
 } = apiSlice;
diff --git a/src/store/endpoints/usergroup-endpoints.js b/src/store/endpoints/usergroup-endpoints.js
index 15311483..a710d6c7 100644
--- a/src/store/endpoints/usergroup-endpoints.js
+++ b/src/store/endpoints/usergroup-endpoints.js
@@ -19,7 +19,7 @@ export const usergroupEndpoints = (builder) => ({
     getUsergroups: builder.query({
       query: () => 'usergroups',
     }),
-    addUserGroup: builder.mutation({
+    addUsergroup: builder.mutation({
       query: (usergroup) => ({
         url: '/usergroups',
         method: 'POST',
@@ -28,4 +28,10 @@ export const usergroupEndpoints = (builder) => ({
         },
       }),
     }),
+    deleteUsergroup: builder.mutation({
+      query: (usergroupID) => ({
+        url: `usergroups/${usergroupID}`,
+        method: 'DELETE',
+      }),
+    }),
 });

From b1f120253245f19de06cd31d127fad8e2abb3a33 Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Wed, 18 Sep 2024 15:22:27 +0200
Subject: [PATCH 04/12] implemented get usergroup endpoint end added query call
 to usergroup page

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/pages/usergroups/usergroup.js          | 13 ++++++++-----
 src/store/apiSlice.js                      |  3 ++-
 src/store/endpoints/usergroup-endpoints.js |  3 +++
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/usergroups/usergroup.js b/src/pages/usergroups/usergroup.js
index d7f7e0a9..1575a316 100644
--- a/src/pages/usergroups/usergroup.js
+++ b/src/pages/usergroups/usergroup.js
@@ -20,11 +20,14 @@ import { Table, DataColumn, LinkColumn } from "../../common/table";
 import { Row, Col } from "react-bootstrap";
 import UsergroupScenariosTable from "./tables/usergroup-scenarios-table";
 import UsergroupUsersTable from "./tables/usergroup-users-table";
+import { useGetUserGroupByIdQuery } from "../../store/apiSlice";
 
 const Usergroup = (props) => {
-    // const params = useParams();
-    // const id = params.usergroup;
-    const usergroup = {name: 'Test Group'};
+    const params = useParams();
+    const usergroupID = params.usergroup;
+    const {data: {usergroup} = {}, isLoading} = useGetUserGroupByIdQuery(usergroupID);
+
+    if(isLoading) return <div className='loading'>Loading...</div>;
 
     return (
         <div className='section'>
@@ -32,11 +35,11 @@ const Usergroup = (props) => {
             <Row>
                 <Col>
                     <h4>Users</h4>
-                    <UsergroupUsersTable />
+                    <UsergroupUsersTable usergroupID={usergroupID} />
                 </Col>
                 <Col>
                     <h4>Scenario Mappings</h4>
-                    <UsergroupScenariosTable />
+                    <UsergroupScenariosTable usergroupID={usergroupID} />
                 </Col>
             </Row>
         </div>
diff --git a/src/store/apiSlice.js b/src/store/apiSlice.js
index f7295573..ebce8d36 100644
--- a/src/store/apiSlice.js
+++ b/src/store/apiSlice.js
@@ -108,5 +108,6 @@ export const {
   useUpdateComponentConfigMutation,
   useGetUsergroupsQuery,
   useAddUsergroupMutation,
-  useDeleteUsergroupMutation
+  useDeleteUsergroupMutation,
+  useGetUserGroupByIdQuery
 } = apiSlice;
diff --git a/src/store/endpoints/usergroup-endpoints.js b/src/store/endpoints/usergroup-endpoints.js
index a710d6c7..72d3d362 100644
--- a/src/store/endpoints/usergroup-endpoints.js
+++ b/src/store/endpoints/usergroup-endpoints.js
@@ -19,6 +19,9 @@ export const usergroupEndpoints = (builder) => ({
     getUsergroups: builder.query({
       query: () => 'usergroups',
     }),
+    getUserGroupById: builder.query({
+      query: (usergroupID) => `/usergroups/${usergroupID}`,
+    }),
     addUsergroup: builder.mutation({
       query: (usergroup) => ({
         url: '/usergroups',

From 756350cdad51e58c4c09e3d3035e156a774e650c Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Wed, 18 Sep 2024 15:58:45 +0200
Subject: [PATCH 05/12] implemented basics for users and scenarios tables of
 usergroups

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 .../tables/usergroup-scenarios-table.js       | 44 ++++++++++++++++-
 .../tables/usergroup-users-table.js           | 47 ++++++++++++++++++-
 src/pages/usergroups/usergroup.js             |  8 ++--
 src/store/apiSlice.js                         |  3 +-
 src/store/endpoints/usergroup-endpoints.js    |  5 +-
 5 files changed, 96 insertions(+), 11 deletions(-)

diff --git a/src/pages/usergroups/tables/usergroup-scenarios-table.js b/src/pages/usergroups/tables/usergroup-scenarios-table.js
index 01e43463..b6716e2e 100644
--- a/src/pages/usergroups/tables/usergroup-scenarios-table.js
+++ b/src/pages/usergroups/tables/usergroup-scenarios-table.js
@@ -15,8 +15,48 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-const UsergroupScenariosTable = (props) => {
-    return <div></div>
+import { useGetUsergroupByIdQuery } from "../../../store/apiSlice";
+import { Table, DataColumn, LinkColumn, ButtonColumn } from "../../../common/table";
+import { iconStyle, buttonStyle } from "../styles";
+import IconButton from "../../../common/buttons/icon-button";
+
+const UsergroupScenariosTable = ({usergroupID}) => {
+    const {data: {usergroup} = {}, isLoading} = useGetUsergroupByIdQuery(usergroupID);
+
+    const handleAddScenarioMapping = () => {
+
+    }
+
+    const getDuplicateLabel = (duplicate) => {
+        return duplicate ? <div>yes</div> : <div>no</div>;
+    }
+
+    if(isLoading) return <div>Loading...</div>;
+
+    return (<div className="section"> 
+        <h2>
+        Scenario Mappings
+        <span className="icon-button">
+            <IconButton
+                childKey={0}
+                tooltip="Add Scenario Mapping"
+                onClick={() => handleAddScenarioMapping()}
+                icon="plus"
+                buttonStyle={buttonStyle}
+                iconStyle={iconStyle}
+            />
+        </span>
+        </h2>
+        <Table data={usergroup.scenarioMappings}>
+            <DataColumn title='ID' dataKey='id' width={70}/>
+            <LinkColumn title="Scenario ID" dataKey="scenarioID" link="/scenarios/" linkKey="id" />
+            <DataColumn title='Duplicate' dataKey='duplicate' modifier={(duplicate) => getDuplicateLabel(duplicate)}/>
+            {/* <ButtonColumn
+            width="200"
+            align="right"
+            /> */}
+        </Table>
+    </div>);
 }
 
 export default UsergroupScenariosTable;
diff --git a/src/pages/usergroups/tables/usergroup-users-table.js b/src/pages/usergroups/tables/usergroup-users-table.js
index 08fae10c..30c1633d 100644
--- a/src/pages/usergroups/tables/usergroup-users-table.js
+++ b/src/pages/usergroups/tables/usergroup-users-table.js
@@ -15,8 +15,51 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-const UsergroupUsersTable = (props) => {
-    return <div></div>
+import { useGetUsersByUsergroupIdQuery } from "../../../store/apiSlice";
+import { Table, DataColumn, LinkColumn, ButtonColumn } from "../../../common/table";
+import { iconStyle, buttonStyle } from "../styles";
+import IconButton from "../../../common/buttons/icon-button";
+
+const UsergroupUsersTable = ({usergroupID}) => {
+    const {data: {users}=[], isLoading} = useGetUsersByUsergroupIdQuery(usergroupID);
+
+    const handleAddUser = () => {
+
+    }
+
+    if(isLoading) return <div>Loading...</div>;
+
+    return (<div className="section"> 
+        <h2>
+        Users
+        <span className="icon-button">
+            <IconButton
+                childKey={0}
+                tooltip="Add Users"
+                onClick={() => handleAddUser()}
+                icon="plus"
+                buttonStyle={buttonStyle}
+                iconStyle={iconStyle}
+            />
+        </span>
+        </h2>
+        <Table data={users}>
+            <DataColumn
+                title='ID'
+                dataKey='id'
+                width={70}
+            />
+            <DataColumn
+                title="Name"
+                dataKey="name"
+                width={70}
+            />
+            {/* <ButtonColumn
+            width="200"
+            align="right"
+            /> */}
+        </Table>
+    </div>);
 }
 
 export default UsergroupUsersTable;
diff --git a/src/pages/usergroups/usergroup.js b/src/pages/usergroups/usergroup.js
index 1575a316..0bc2c301 100644
--- a/src/pages/usergroups/usergroup.js
+++ b/src/pages/usergroups/usergroup.js
@@ -20,25 +20,23 @@ import { Table, DataColumn, LinkColumn } from "../../common/table";
 import { Row, Col } from "react-bootstrap";
 import UsergroupScenariosTable from "./tables/usergroup-scenarios-table";
 import UsergroupUsersTable from "./tables/usergroup-users-table";
-import { useGetUserGroupByIdQuery } from "../../store/apiSlice";
+import { useGetUsergroupByIdQuery } from "../../store/apiSlice";
 
 const Usergroup = (props) => {
     const params = useParams();
     const usergroupID = params.usergroup;
-    const {data: {usergroup} = {}, isLoading} = useGetUserGroupByIdQuery(usergroupID);
+    const {data: {usergroup} = {}, isLoading} = useGetUsergroupByIdQuery(usergroupID);
 
     if(isLoading) return <div className='loading'>Loading...</div>;
 
     return (
         <div className='section'>
             <h1>{usergroup.name}</h1>
-            <Row>
+            <Row className="mt-4">
                 <Col>
-                    <h4>Users</h4>
                     <UsergroupUsersTable usergroupID={usergroupID} />
                 </Col>
                 <Col>
-                    <h4>Scenario Mappings</h4>
                     <UsergroupScenariosTable usergroupID={usergroupID} />
                 </Col>
             </Row>
diff --git a/src/store/apiSlice.js b/src/store/apiSlice.js
index ebce8d36..57955ee9 100644
--- a/src/store/apiSlice.js
+++ b/src/store/apiSlice.js
@@ -109,5 +109,6 @@ export const {
   useGetUsergroupsQuery,
   useAddUsergroupMutation,
   useDeleteUsergroupMutation,
-  useGetUserGroupByIdQuery
+  useGetUsergroupByIdQuery,
+  useGetUsersByUsergroupIdQuery
 } = apiSlice;
diff --git a/src/store/endpoints/usergroup-endpoints.js b/src/store/endpoints/usergroup-endpoints.js
index 72d3d362..8fbaf9bd 100644
--- a/src/store/endpoints/usergroup-endpoints.js
+++ b/src/store/endpoints/usergroup-endpoints.js
@@ -19,7 +19,7 @@ export const usergroupEndpoints = (builder) => ({
     getUsergroups: builder.query({
       query: () => 'usergroups',
     }),
-    getUserGroupById: builder.query({
+    getUsergroupById: builder.query({
       query: (usergroupID) => `/usergroups/${usergroupID}`,
     }),
     addUsergroup: builder.mutation({
@@ -31,6 +31,9 @@ export const usergroupEndpoints = (builder) => ({
         },
       }),
     }),
+    getUsersByUsergroupId: builder.query({
+      query: (usergroupID) => `/usergroups/${usergroupID}/users`,
+    }),
     deleteUsergroup: builder.mutation({
       query: (usergroupID) => ({
         url: `usergroups/${usergroupID}`,

From 62b1bb860df2e14063de0967ad2a43d82f2f2f44 Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Wed, 25 Sep 2024 00:35:43 +0200
Subject: [PATCH 06/12] fixed an issue with notification system not being
 referenced correctly

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/app.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index 9456c324..15d512bc 100644
--- a/src/app.js
+++ b/src/app.js
@@ -16,6 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
+import { useRef, useEffect } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend }from 'react-dnd-html5-backend';
 import NotificationSystem from 'react-notification-system';
@@ -49,19 +50,28 @@ const App = () => {
     return decodedToken.exp < timeNow;
   }
 
+  const notificationSystem = useRef(null);
+
+  useEffect(() => {
+    NotificationsDataManager.setSystem(notificationSystem.current);
+
+    return () => {
+      NotificationsDataManager.setSystem(null);
+    };
+  }, []);
+
   const { isAuthenticated, token, user } = useSelector((state) => state.auth);
 
   if (!isAuthenticated || isTokenExpired(token)) {
     console.log("APP redirecting to logout/login");
     return (<Redirect to="/logout" />);
   } else {
-
     console.log("APP rendering app");
     const pages = branding.values.pages;
 
     return (<DndProvider backend={HTML5Backend} >
       <div className="app">
-        <NotificationSystem />
+        <NotificationSystem ref={notificationSystem} />
         <Header />
 
         <div className='app-body app-body-spacing'>

From 5aecee5ac3a6586d9dea00e674bb86291bd85a17 Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Thu, 26 Sep 2024 02:33:04 +0200
Subject: [PATCH 07/12] implemented users and mappings management for
 usergroups

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/pages/scenarios/tables/results-table.js   |  8 ++
 .../dialogs/addScenarioMappingDialog.js       | 97 +++++++++++++++++++
 .../dialogs/addUserToUsergroupDialog.js       | 81 ++++++++++++++++
 .../usergroups/dialogs/renameGroupDialog.js   | 69 +++++++++++++
 .../tables/usergroup-scenarios-table.js       | 79 ++++++++++++---
 .../tables/usergroup-users-table.js           | 57 +++++++----
 src/pages/usergroups/usergroup.js             | 48 ++++++++-
 src/pages/usergroups/usergroups.js            | 33 ++++---
 src/store/apiSlice.js                         |  5 +-
 src/store/endpoints/usergroup-endpoints.js    | 21 ++++
 10 files changed, 453 insertions(+), 45 deletions(-)
 create mode 100644 src/pages/usergroups/dialogs/addScenarioMappingDialog.js
 create mode 100644 src/pages/usergroups/dialogs/addUserToUsergroupDialog.js
 create mode 100644 src/pages/usergroups/dialogs/renameGroupDialog.js

diff --git a/src/pages/scenarios/tables/results-table.js b/src/pages/scenarios/tables/results-table.js
index f0ff4977..aca569c2 100644
--- a/src/pages/scenarios/tables/results-table.js
+++ b/src/pages/scenarios/tables/results-table.js
@@ -27,6 +27,7 @@ import {Button} from "react-bootstrap";
 import NotificationsFactory from "../../../common/data-managers/notifications-factory";
 import notificationsDataManager from "../../../common/data-managers/notifications-data-manager";
 import FileSaver from "file-saver";
+import moment from "moment";
 import { 
   useGetResultsQuery,
   useAddResultMutation,
@@ -142,6 +143,11 @@ const ResultsTable = (props) => {
       setIsDeleteModalOpened(false);
       setResultToDelete({});
     }
+
+    const stateUpdateModifier = (dateString) => {
+      const date = moment(dateString);
+      return `${date.fromNow()}`;
+    };
     
     return (
         <div>
@@ -175,11 +181,13 @@ const ResultsTable = (props) => {
             <DataColumn
               title='Created at'
               dataKey='createdAt'
+              modifier={(createdAt) => stateUpdateModifier(createdAt)}
               width={200}
             />
             <DataColumn
               title='Last update'
               dataKey='updatedAt'
+              modifier={(updatedAt) => stateUpdateModifier(updatedAt)}
               width={200}
             />
             <LinkbuttonColumn
diff --git a/src/pages/usergroups/dialogs/addScenarioMappingDialog.js b/src/pages/usergroups/dialogs/addScenarioMappingDialog.js
new file mode 100644
index 00000000..315385d1
--- /dev/null
+++ b/src/pages/usergroups/dialogs/addScenarioMappingDialog.js
@@ -0,0 +1,97 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { useState } from 'react';
+import { Form, Col, Button} from 'react-bootstrap';
+import Dialog from '../../../common/dialogs/dialog';
+import { useGetScenariosQuery } from '../../../store/apiSlice';
+
+const AddScenarioMappingDialog = ({isDialogOpened, onClose, mappings}) => {
+
+    const [name, setName] = useState('');
+    const [isValid, setIsValid] = useState(false);
+    const [selectedOption, setSelectedOption] = useState('addUsersToScenario');
+    const [selectedScenarioID, setSelectedScenarioID] = useState('');
+
+    const {data: {scenarios} = {}, isLoading: isLoadingScenarios} = useGetScenariosQuery();
+
+    const handleRadioChange = (e) => {
+        setSelectedOption(e.target.value);
+    }
+
+    const handleClose = (canceled) => {
+        if(canceled) {
+            onClose(null);
+        } else {
+            onClose({scenarioID: Number(selectedScenarioID), duplicate: selectedOption === 'duplicateScenarioForUsers'});
+        }
+    }
+
+    const handleSelectChange = (e) => {
+        setSelectedScenarioID(e.target.value);
+        setIsValid(e.target.value !== '');
+    };
+
+    return (<Dialog
+      show={isDialogOpened}
+      title="New User Group"
+      buttonTitle="Add"
+      onClose={handleClose}
+      onReset={() => {}}
+      valid={isValid}>
+      <Form>
+        <Form.Group as={Col} controlId="radioGroup" style={{ marginBottom: '15px' }}>
+          <div>
+            <Form.Check
+              type="radio"
+              id="addUsersToScenario"
+              name="options"
+              label="Add users to scenario"
+              value="addUsersToScenario"
+              checked={selectedOption === 'addUsersToScenario'}
+              onChange={handleRadioChange}
+            />
+            <Form.Check
+              type="radio"
+              id="duplicateScenarioForUsers"
+              name="options"
+              label="Duplicate scenario for each user"
+              value="duplicateScenarioForUsers"
+              checked={selectedOption === 'duplicateScenarioForUsers'}
+              onChange={handleRadioChange}
+            />
+          </div>
+        </Form.Group>
+
+        <Form.Group controlId="scenario">
+        <Form.Label>Select Option</Form.Label>
+        {isLoadingScenarios ? <div>Loading...</div> : (
+            <Form.Control as="select" value={selectedScenarioID} onChange={handleSelectChange}>
+            <option value="">-- Select scenario --</option>
+            {scenarios.map(scenario => {
+              //check if existing mappings are already added to the usergroup
+              if(!mappings.some(mapping => mapping.scenarioID === scenario.id)) return <option key={scenario.id} value={scenario.id}>{scenario.name}</option>;
+            })}
+            </Form.Control>
+        )}
+      </Form.Group>
+      </Form>
+    </Dialog>);
+}
+
+export default AddScenarioMappingDialog;
diff --git a/src/pages/usergroups/dialogs/addUserToUsergroupDialog.js b/src/pages/usergroups/dialogs/addUserToUsergroupDialog.js
new file mode 100644
index 00000000..64dab958
--- /dev/null
+++ b/src/pages/usergroups/dialogs/addUserToUsergroupDialog.js
@@ -0,0 +1,81 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { useState, useEffect } from 'react';
+import { Form, Col, Dropdown, Badge } from 'react-bootstrap';
+import Dialog from '../../../common/dialogs/dialog';
+import { useGetUsersQuery } from '../../../store/apiSlice';
+
+const AddUserToUsergroupDialog = ({isModalOpened, onClose, currentUsers}) => {
+
+    const [selectedUsers, setSelectedusers] = useState([]);
+    const [isValid, setIsValid] = useState(false);
+
+    const {data: {users} = {}, isLoading: isLoadingUsers} = useGetUsersQuery();
+
+    const toggleUser = (event, option) => {
+        event.preventDefault();
+        if (selectedUsers.includes(option)) {
+            setSelectedusers(prevState => ([...prevState.filter((item) => item !== option)]));
+        } else {
+            setSelectedusers(prevState => ([...prevState, option]));
+        }
+    }
+
+    useEffect(() => {
+        setIsValid(selectedUsers.length > 0);
+    }, [selectedUsers]);
+
+    const handleClose = (canceled) => {
+        if(!canceled){
+            onClose(selectedUsers);
+        } else {
+            onClose([]);
+        }
+    }
+
+    const handleReset = () => {
+        setSelectedusers([]);
+    }
+      
+    return (
+      <Dialog show={isModalOpened} title="Add Users" buttonTitle="Add" onClose={handleClose} onReset={handleReset} valid={isValid}>
+        <Dropdown autoClose="outside">
+            <Dropdown.Toggle variant="success" id="dropdown-basic">Select Options</Dropdown.Toggle>
+            <Dropdown.Menu>
+                {isLoadingUsers ? <div>Loading...</div> : [...users].filter(user => !currentUsers.some(currentUser => currentUser.id == user.id)).map(user => 
+                    <Dropdown.Item
+                        key={user.id} 
+                        onClick={(event) => toggleUser(event, user)}
+                        style={{
+                            backgroundColor: selectedUsers.includes(user) ? '#d3d3d3' : ''
+                        }}
+                    >
+                        {user.username}
+                    </Dropdown.Item>)}
+            </Dropdown.Menu>
+        </Dropdown>
+        <div className='mt-4'>
+            {selectedUsers.length > 0 ? selectedUsers.map(user => 
+                <Badge className="fs-6 me-2 mb-2" key={user.id} bg="primary">{user.username}</Badge>) : <div className="fst-italic">No users selected</div>}
+        </div>
+      </Dialog>
+    );    
+}
+
+export default AddUserToUsergroupDialog;
diff --git a/src/pages/usergroups/dialogs/renameGroupDialog.js b/src/pages/usergroups/dialogs/renameGroupDialog.js
new file mode 100644
index 00000000..cfab4667
--- /dev/null
+++ b/src/pages/usergroups/dialogs/renameGroupDialog.js
@@ -0,0 +1,69 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { useState, useEffect } from 'react';
+import { Form, Col, Button} from 'react-bootstrap';
+import Dialog from '../../../common/dialogs/dialog';
+
+const RenameUsergroupDialog = ({isModalOpened, onClose, oldName}) => {
+
+    const [name, setName] = useState(oldName);
+    const [isValid, setIsValid] = useState(false);
+
+    useEffect(() => {
+        if (isModalOpened && oldName) {
+            setName(oldName);
+        }
+    }, [isModalOpened, oldName]);
+
+    const handleNameChange = (e) => {
+        const newName = e.target.value;
+        setName(newName);
+        setIsValid(newName.length >= 3 && !(/^\s/.test(newName)));
+    }
+
+    const handleClose = (canceled) => {
+        if(canceled) {
+            onClose(null);
+        } else {
+            onClose(name);
+        }
+    }
+
+    const handleReset = () => {
+        setName('');
+    }
+
+    return (<Dialog
+      show={isModalOpened}
+      title="Rename User Group"
+      buttonTitle="Update"
+      onClose={handleClose}
+      onReset={handleReset}
+      valid={isValid}>
+      <Form>
+        <Form.Group as={Col} controlId="name" style={{marginBottom: '15px'}}>
+          <Form.Label>Name</Form.Label>
+          <Form.Control type="text" placeholder="Enter new name" value={name} onChange={handleNameChange} />
+          <Form.Control.Feedback />
+        </Form.Group>
+      </Form>
+    </Dialog>);
+}
+
+export default RenameUsergroupDialog;
diff --git a/src/pages/usergroups/tables/usergroup-scenarios-table.js b/src/pages/usergroups/tables/usergroup-scenarios-table.js
index b6716e2e..28e270cf 100644
--- a/src/pages/usergroups/tables/usergroup-scenarios-table.js
+++ b/src/pages/usergroups/tables/usergroup-scenarios-table.js
@@ -15,16 +15,60 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import { useGetUsergroupByIdQuery } from "../../../store/apiSlice";
+import { useState } from "react";
+import { useGetScenariosQuery, useGetUsergroupByIdQuery } from "../../../store/apiSlice";
 import { Table, DataColumn, LinkColumn, ButtonColumn } from "../../../common/table";
 import { iconStyle, buttonStyle } from "../styles";
 import IconButton from "../../../common/buttons/icon-button";
+import AddScenarioMappingDialog from "../dialogs/addScenarioMappingDialog";
+import { useUpdateUsergroupMutation } from "../../../store/apiSlice";
+import DeleteDialog from "../../../common/dialogs/delete-dialog";
 
 const UsergroupScenariosTable = ({usergroupID}) => {
-    const {data: {usergroup} = {}, isLoading} = useGetUsergroupByIdQuery(usergroupID);
+    const {data: {usergroup} = {}, isLoading, refetch} = useGetUsergroupByIdQuery(usergroupID);
+    const {data: {scenarios} = {}, isLoading: isScenariosLoading } = useGetScenariosQuery();
+    const [isAddScenarioDialogOpen, setIsAddScenarioDialogOpen] = useState(false);
+    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+    const [mappingToDelete, setMappingToDelete] = useState({scenarioID: null});
+    const [updateUsergroup] = useUpdateUsergroupMutation();
 
-    const handleAddScenarioMapping = () => {
+    const handleAddScenarioMapping = async (newMapping) => {
+        if(newMapping){
+            try{
+                //add new mapping while saving name and existing mappings if there are any
+                const oldMappings = usergroup.scenarioMappings.length > 0 ? [...usergroup.scenarioMappings] : [];
+                await updateUsergroup({usergroupID: usergroupID, usergroup: {name: usergroup.name, scenarioMappings: [...oldMappings, newMapping]}}).unwrap();
+                refetch();
+            } catch(error) {
+                console.log("Error updating mappings", error);
+            }
+        }
+        setIsAddScenarioDialogOpen(false);
+    }
+
+    const handleRemoveScenarioMapping = async (isConfirmed) => {
+        if(isConfirmed){
+            try {
+                //update usergroup with new mappings without the target
+                const newMappings = [...usergroup.scenarioMappings].filter(mapping => mapping.id !== mappingToDelete.id);
+                await updateUsergroup({usergroupID: usergroupID, usergroup: {name: usergroup.name, scenarioMappings: newMappings}}).unwrap();
+                refetch();
+            } catch (error) {
+                console.log("Error removing mapping", error);
+            }
+        }
+        setIsDeleteDialogOpen(false);
+        setMappingToDelete({scenarioID: null});
+    }
 
+    const getScenarioName = (scenarioID) => {
+        if(isScenariosLoading){
+            return <div>Loading...</div>;
+        }
+        
+        const scenario = scenarios.find((scenario) => scenario.id === scenarioID);
+
+        return scenario ? <div>{scenario.name}</div> : <div>unknown</div>;
     }
 
     const getDuplicateLabel = (duplicate) => {
@@ -40,7 +84,7 @@ const UsergroupScenariosTable = ({usergroupID}) => {
             <IconButton
                 childKey={0}
                 tooltip="Add Scenario Mapping"
-                onClick={() => handleAddScenarioMapping()}
+                onClick={() => setIsAddScenarioDialogOpen(true)}
                 icon="plus"
                 buttonStyle={buttonStyle}
                 iconStyle={iconStyle}
@@ -48,14 +92,27 @@ const UsergroupScenariosTable = ({usergroupID}) => {
         </span>
         </h2>
         <Table data={usergroup.scenarioMappings}>
-            <DataColumn title='ID' dataKey='id' width={70}/>
-            <LinkColumn title="Scenario ID" dataKey="scenarioID" link="/scenarios/" linkKey="id" />
-            <DataColumn title='Duplicate' dataKey='duplicate' modifier={(duplicate) => getDuplicateLabel(duplicate)}/>
-            {/* <ButtonColumn
-            width="200"
-            align="right"
-            /> */}
+            <LinkColumn title="Scenario ID" dataKey="scenarioID" link="/scenarios/" linkKey="scenarioID" width={120} />
+            <DataColumn title='Name' dataKey='scenarioID' modifier={(scenarioID) => getScenarioName(scenarioID)}/>
+            <DataColumn title='Duplicated' dataKey='duplicate' modifier={(duplicate) => getDuplicateLabel(duplicate)}/>
+            <ButtonColumn
+              width="200"
+              align="right"
+              deleteButton
+              onDelete={(index) => {
+                setMappingToDelete(usergroup.scenarioMappings[index]);
+                setIsDeleteDialogOpen(true);
+              }}
+            />
         </Table>
+
+        <AddScenarioMappingDialog isDialogOpened={isAddScenarioDialogOpen} mappings={usergroup.scenarioMappings} onClose={(newMapping) => handleAddScenarioMapping(newMapping)} />
+        <DeleteDialog
+          title="scenario mapping for scenario"
+          name={mappingToDelete.scenarioID}
+          show={isDeleteDialogOpen}
+          onClose={(isConfirmed) => handleRemoveScenarioMapping(isConfirmed)}
+        />
     </div>);
 }
 
diff --git a/src/pages/usergroups/tables/usergroup-users-table.js b/src/pages/usergroups/tables/usergroup-users-table.js
index 30c1633d..dd4a65f0 100644
--- a/src/pages/usergroups/tables/usergroup-users-table.js
+++ b/src/pages/usergroups/tables/usergroup-users-table.js
@@ -15,16 +15,40 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import { useGetUsersByUsergroupIdQuery } from "../../../store/apiSlice";
+import { useState } from "react";
+import { useGetUsersByUsergroupIdQuery, useAddUserToUsergroupMutation, useDeleteUserFromUsergroupMutation  } from "../../../store/apiSlice";
 import { Table, DataColumn, LinkColumn, ButtonColumn } from "../../../common/table";
 import { iconStyle, buttonStyle } from "../styles";
 import IconButton from "../../../common/buttons/icon-button";
+import AddUserToUsergroupDialog from "../dialogs/addUserToUsergroupDialog";
+import NotificationsFactory from "../../../common/data-managers/notifications-factory";
+import notificationsDataManager from "../../../common/data-managers/notifications-data-manager";
 
 const UsergroupUsersTable = ({usergroupID}) => {
-    const {data: {users}=[], isLoading} = useGetUsersByUsergroupIdQuery(usergroupID);
+    const {data: {users}=[], isLoading, refetch} = useGetUsersByUsergroupIdQuery(usergroupID);
+    const [isAddUserDialogOpen, setIsAddUserDialogOpen] = useState(false);
+    const [addUserToUsergroup] = useAddUserToUsergroupMutation();
+    const [removeUserFromGroup] = useDeleteUserFromUsergroupMutation();
 
-    const handleAddUser = () => {
+    const handleAddUser = async (selectedUsers) => {
+        if(selectedUsers.length > 0){
+            try {
+                await Promise.all(selectedUsers.map(user => addUserToUsergroup({usergroupID: usergroupID, username: user.username}).unwrap()));
+                refetch();
+            } catch (error) {
+                console.log('Error adding users', error);
+            }
+        }
+        setIsAddUserDialogOpen(false);
+    }
 
+    const handleRemoveUser = async (user) => {
+        try{
+            await removeUserFromGroup({usergroupID: usergroupID, username: user.username}).unwrap();
+            refetch();
+        } catch(error) {
+            console.log('Error removing users', error);
+        }
     }
 
     if(isLoading) return <div>Loading...</div>;
@@ -36,7 +60,7 @@ const UsergroupUsersTable = ({usergroupID}) => {
             <IconButton
                 childKey={0}
                 tooltip="Add Users"
-                onClick={() => handleAddUser()}
+                onClick={() => setIsAddUserDialogOpen(true)}
                 icon="plus"
                 buttonStyle={buttonStyle}
                 iconStyle={iconStyle}
@@ -44,21 +68,20 @@ const UsergroupUsersTable = ({usergroupID}) => {
         </span>
         </h2>
         <Table data={users}>
-            <DataColumn
-                title='ID'
-                dataKey='id'
-                width={70}
-            />
-            <DataColumn
-                title="Name"
-                dataKey="name"
-                width={70}
+            <DataColumn title='ID' dataKey='id' width={70} />
+            <DataColumn title="Username" dataKey="username" width={150} />
+            <ButtonColumn
+              width="200"
+              align="right"
+              deleteButton
+              onDelete={(index) => handleRemoveUser(users[index])}
             />
-            {/* <ButtonColumn
-            width="200"
-            align="right"
-            /> */}
         </Table>
+        <AddUserToUsergroupDialog 
+            isModalOpened={isAddUserDialogOpen} 
+            onClose={(selectedUsers) => handleAddUser(selectedUsers)}
+            currentUsers={users}
+        />
     </div>);
 }
 
diff --git a/src/pages/usergroups/usergroup.js b/src/pages/usergroups/usergroup.js
index 0bc2c301..ab74b17e 100644
--- a/src/pages/usergroups/usergroup.js
+++ b/src/pages/usergroups/usergroup.js
@@ -15,23 +15,55 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
+import { useState } from "react";
 import { useParams } from "react-router-dom/cjs/react-router-dom.min";
-import { Table, DataColumn, LinkColumn } from "../../common/table";
 import { Row, Col } from "react-bootstrap";
 import UsergroupScenariosTable from "./tables/usergroup-scenarios-table";
 import UsergroupUsersTable from "./tables/usergroup-users-table";
-import { useGetUsergroupByIdQuery } from "../../store/apiSlice";
+import IconButton from "../../common/buttons/icon-button";
+import { buttonStyle, iconStyle } from "./styles";
+import { useGetUsergroupByIdQuery, useUpdateUsergroupMutation } from "../../store/apiSlice";
+import RenameUsergroupDialog from "./dialogs/renameGroupDialog";
 
-const Usergroup = (props) => {
+const Usergroup = () => {
     const params = useParams();
     const usergroupID = params.usergroup;
-    const {data: {usergroup} = {}, isLoading} = useGetUsergroupByIdQuery(usergroupID);
+    const {data: {usergroup} = {}, isLoading, refetch} = useGetUsergroupByIdQuery(usergroupID);
+    const [isRenameModalOpened, setIsRenameModalOpened] = useState(false);
+    const [updateUsergroup] = useUpdateUsergroupMutation();
+
+    const handleRename = async (newName) => {
+        if(newName){
+            try {
+                //update only the name
+                await updateUsergroup({usergroupID: usergroup.id, usergroup: {name: newName, ScenarioMappings: usergroup.ScenarioMappings}}).unwrap();
+                refetch();
+            } catch (error) {
+                console.log('Error updating group', error);
+            }
+        }
+
+        setIsRenameModalOpened(false);
+    }
 
     if(isLoading) return <div className='loading'>Loading...</div>;
 
     return (
         <div className='section'>
-            <h1>{usergroup.name}</h1>
+            <h1>
+                {usergroup.name}
+                <span className="icon-button">
+                    <IconButton
+                        childKey={1}
+                        tooltip='Change name'
+                        onClick={() => setIsRenameModalOpened(true)}
+                        icon='edit'
+                        buttonStyle={buttonStyle}
+                        iconStyle={iconStyle}
+                    />
+                </span>
+            </h1>
+            
             <Row className="mt-4">
                 <Col>
                     <UsergroupUsersTable usergroupID={usergroupID} />
@@ -40,6 +72,12 @@ const Usergroup = (props) => {
                     <UsergroupScenariosTable usergroupID={usergroupID} />
                 </Col>
             </Row>
+
+            <RenameUsergroupDialog 
+                isModalOpened={isRenameModalOpened} 
+                onClose={handleRename}
+                oldName={usergroup.name}
+            /> 
         </div>
     );
 }
diff --git a/src/pages/usergroups/usergroups.js b/src/pages/usergroups/usergroups.js
index 942e495e..2b56b26b 100644
--- a/src/pages/usergroups/usergroups.js
+++ b/src/pages/usergroups/usergroups.js
@@ -22,6 +22,7 @@ import IconButton from "../../common/buttons/icon-button";
 import { buttonStyle, iconStyle } from "./styles";
 import AddUsergroupDialog from "./dialogs/addUsergroupDialog";
 import DeleteDialog from "../../common/dialogs/delete-dialog";
+import moment from "moment";
 
 const Usergroups = (props) => {
     const {data: {usergroups} = {}, refetch: refetchUsergroups, isLoading} = useGetUsergroupsQuery();
@@ -60,6 +61,11 @@ const Usergroups = (props) => {
       setDialogUsergroup({});
       setIsDeleteDialogOpen(false);
     }
+
+    const stateUpdateModifier = (dateString) => {
+      const date = moment(dateString);
+      return `${date.fromNow()}`;
+    };
     
     if(isLoading) return <div>Loading</div>;
 
@@ -69,12 +75,12 @@ const Usergroups = (props) => {
           User Groups
           <span className="icon-button">
               <IconButton
-              childKey={0}
-              tooltip="Add Usergroup"
-              onClick={() => setIsAddDialogOpen(true)}
-              icon="plus"
-              buttonStyle={buttonStyle}
-              iconStyle={iconStyle}
+                childKey={0}
+                tooltip="Add Usergroup"
+                onClick={() => setIsAddDialogOpen(true)}
+                icon="plus"
+                buttonStyle={buttonStyle}
+                iconStyle={iconStyle}
               />
           </span>
         </h1>
@@ -90,6 +96,11 @@ const Usergroups = (props) => {
               link="/usergroup/"
               linkKey="id"
             />
+            <DataColumn
+              title='Last Update'
+              dataKey='updatedAt'
+              modifier={(updatedAt) => stateUpdateModifier(updatedAt)}
+            />
             <ButtonColumn
               width="200"
               align="right"
@@ -103,11 +114,11 @@ const Usergroups = (props) => {
 
         <AddUsergroupDialog isModalOpened={isAddDialogOpen} onClose={handleAddNewGroup} />
         <DeleteDialog
-            title="scenario"
-            name={dialogUsegroup.name}
-            show={isDeleteDialogOpen}
-            onClose={(isConfirmed) => handleDeleteUsergroup(isConfirmed)}
-          />
+          title="scenario"
+          name={dialogUsegroup.name}
+          show={isDeleteDialogOpen}
+          onClose={(isConfirmed) => handleDeleteUsergroup(isConfirmed)}
+        />
     </div>);
     }
 }
diff --git a/src/store/apiSlice.js b/src/store/apiSlice.js
index 57955ee9..aa71ef07 100644
--- a/src/store/apiSlice.js
+++ b/src/store/apiSlice.js
@@ -110,5 +110,8 @@ export const {
   useAddUsergroupMutation,
   useDeleteUsergroupMutation,
   useGetUsergroupByIdQuery,
-  useGetUsersByUsergroupIdQuery
+  useGetUsersByUsergroupIdQuery,
+  useAddUserToUsergroupMutation,
+  useDeleteUserFromUsergroupMutation,
+  useUpdateUsergroupMutation
 } = apiSlice;
diff --git a/src/store/endpoints/usergroup-endpoints.js b/src/store/endpoints/usergroup-endpoints.js
index 8fbaf9bd..65d5d8dd 100644
--- a/src/store/endpoints/usergroup-endpoints.js
+++ b/src/store/endpoints/usergroup-endpoints.js
@@ -31,6 +31,27 @@ export const usergroupEndpoints = (builder) => ({
         },
       }),
     }),
+    updateUsergroup: builder.mutation({
+      query: ({ usergroupID, usergroup }) => ({
+        url: `/usergroups/${usergroupID}`,
+        method: 'PUT',
+        body: { usergroup },
+      }),
+    }),
+    addUserToUsergroup: builder.mutation({
+      query: ({ usergroupID, username }) => ({
+        url: `/usergroups/${usergroupID}/user`,
+        method: 'PUT',
+        params: { username },
+      }),
+    }),
+    deleteUserFromUsergroup: builder.mutation({
+      query: ({ usergroupID, username }) => ({
+        url: `/usergroups/${usergroupID}/user`,
+        method: 'DELETE',
+        params: { username },
+      }),
+    }),
     getUsersByUsergroupId: builder.query({
       query: (usergroupID) => `/usergroups/${usergroupID}/users`,
     }),

From 2984a45779d704f4e46eb328a5313187432c6cf2 Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Thu, 26 Sep 2024 13:29:02 +0200
Subject: [PATCH 08/12] removed unused useState hook

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/pages/usergroups/dialogs/addScenarioMappingDialog.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/usergroups/dialogs/addScenarioMappingDialog.js b/src/pages/usergroups/dialogs/addScenarioMappingDialog.js
index 315385d1..3c016b6b 100644
--- a/src/pages/usergroups/dialogs/addScenarioMappingDialog.js
+++ b/src/pages/usergroups/dialogs/addScenarioMappingDialog.js
@@ -23,7 +23,6 @@ import { useGetScenariosQuery } from '../../../store/apiSlice';
 
 const AddScenarioMappingDialog = ({isDialogOpened, onClose, mappings}) => {
 
-    const [name, setName] = useState('');
     const [isValid, setIsValid] = useState(false);
     const [selectedOption, setSelectedOption] = useState('addUsersToScenario');
     const [selectedScenarioID, setSelectedScenarioID] = useState('');

From 43e8bbba43314056aca53921da3b14ba35c782c7 Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Thu, 26 Sep 2024 15:19:18 +0200
Subject: [PATCH 09/12] made usergroup feature admin-only

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/app.js         | 22 ++++++++++++----------
 src/common/menu.js | 16 +++++++++-------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/app.js b/src/app.js
index 15d512bc..ab5c733c 100644
--- a/src/app.js
+++ b/src/app.js
@@ -84,12 +84,6 @@ const App = () => {
               <Route exact path="/scenarios">
                 <Scenarios />
               </Route>
-              <Route path="/usergroups">
-                  <Usergroups />
-              </Route>
-              <Route path="/usergroup/:usergroup">
-                  <Usergroup />
-              </Route>
               <Route exact path="/logout">
                 <Logout />
               </Route>
@@ -114,10 +108,18 @@ const App = () => {
               </>
             : '' }
             { pages.account ? <Route path="/account"><Account /></Route> : '' }
-            { user.role === "Admin" ?
-              <Route path="/users">
-                <Users />
-              </Route>
+            { user.role === "Admin" ? 
+              <>
+                <Route path="/users">
+                  <Users />
+                </Route>
+                <Route path="/usergroups">
+                    <Usergroups />
+                </Route>
+                <Route path="/usergroup/:usergroup">
+                    <Usergroup />
+                </Route>
+              </>
             : '' }
             { user.role === "Admin" || pages.api ?
               <Route path="/api" component={APIBrowser} />
diff --git a/src/common/menu.js b/src/common/menu.js
index 82f82ece..c0f755e4 100644
--- a/src/common/menu.js
+++ b/src/common/menu.js
@@ -163,13 +163,15 @@ const SideBarMenu = (props) => {
                 </NavLink>
               </li> : ''
             }
-            <li>
-              <NavLink
-                to="/usergroups"
-                title="Usegroups">
-                Usergroups
-              </NavLink>
-            </li>
+            {currentUser.role === 'Admin' ?
+              <li>
+                <NavLink
+                  to="/usergroups"
+                  title="Usegroups">
+                  Usergroups
+                </NavLink>
+              </li> : ''
+            }
             <li hidden={!values.pages.account}>
               <NavLink
                 to="/account"

From db8d9f1b3b79047e66a003f3a299a8a1afcc13b0 Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Thu, 26 Sep 2024 15:19:40 +0200
Subject: [PATCH 10/12] rtk query now takes token from auth slice

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/store/apiSlice.js  | 5 +++--
 src/store/authSlice.js | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/store/apiSlice.js b/src/store/apiSlice.js
index aa71ef07..816ed856 100644
--- a/src/store/apiSlice.js
+++ b/src/store/apiSlice.js
@@ -29,13 +29,14 @@ import { resultEndpoints } from './endpoints/result-endpoints';
 import { authEndpoints } from './endpoints/auth-endpoints';
 import { websocketEndpoints } from './endpoints/websocket-endpoints';
 import { usergroupEndpoints } from './endpoints/usergroup-endpoints';
+import { selectToken } from './authSlice';
 
 export const apiSlice = createApi({
   reducerPath: 'api',
   baseQuery: fetchBaseQuery({
     baseUrl: '/api/v2',
-    prepareHeaders: (headers) => {
-      const token = sessionToken;
+    prepareHeaders: (headers, {getState}) => {
+      const token = selectToken(getState());
       if (token) {
         headers.set('Authorization', `Bearer ${token}`);
       }
diff --git a/src/store/authSlice.js b/src/store/authSlice.js
index b0cf1f1a..4dba904e 100644
--- a/src/store/authSlice.js
+++ b/src/store/authSlice.js
@@ -31,7 +31,6 @@ const authSlice = createSlice({
   initialState,
   reducers: {
     setUser: (state, action) => {
-      console.log("setting up storage", action.payload.user, action.payload.token)
       localStorage.setItem('currentUser', JSON.stringify(action.payload.user));
       localStorage.setItem('token', action.payload.token);
       state.user = action.payload.user;
@@ -67,6 +66,8 @@ const authSlice = createSlice({
   },
 });
 
+export const selectToken = (state) => state.auth.token; 
+
 export const { setUser, deleteUser } = authSlice.actions;
 
 export default authSlice.reducer;
\ No newline at end of file

From 49dbbc61f74fc56c267d30a4341c14ecd915fc98 Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Thu, 26 Sep 2024 15:34:14 +0200
Subject: [PATCH 11/12] removed console logging and added notifications for
 usergroup-related possible error cases

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/pages/infrastructure/ic-action-board.js              | 1 -
 src/pages/usergroups/tables/usergroup-scenarios-table.js | 6 ++++--
 src/pages/usergroups/tables/usergroup-users-table.js     | 8 ++++----
 src/pages/usergroups/usergroup.js                        | 6 ++++--
 src/pages/usergroups/usergroups.js                       | 8 +++++---
 src/pages/users/users.js                                 | 1 -
 src/store/websocketSlice.js                              | 2 --
 7 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/pages/infrastructure/ic-action-board.js b/src/pages/infrastructure/ic-action-board.js
index 6e904645..f262bbc8 100644
--- a/src/pages/infrastructure/ic-action-board.js
+++ b/src/pages/infrastructure/ic-action-board.js
@@ -57,7 +57,6 @@ const ICActionBoard = (props) => {
 
   const onDelete = () => {
     checkedICsIds.forEach((id) => {
-      console.log(id)
       dispatch(deleteIC({token: sessionToken, id: id}));
     });
 
diff --git a/src/pages/usergroups/tables/usergroup-scenarios-table.js b/src/pages/usergroups/tables/usergroup-scenarios-table.js
index 28e270cf..4edd5b46 100644
--- a/src/pages/usergroups/tables/usergroup-scenarios-table.js
+++ b/src/pages/usergroups/tables/usergroup-scenarios-table.js
@@ -23,6 +23,8 @@ import IconButton from "../../../common/buttons/icon-button";
 import AddScenarioMappingDialog from "../dialogs/addScenarioMappingDialog";
 import { useUpdateUsergroupMutation } from "../../../store/apiSlice";
 import DeleteDialog from "../../../common/dialogs/delete-dialog";
+import notificationsDataManager from "../../../common/data-managers/notifications-data-manager";
+import NotificationsFactory from "../../../common/data-managers/notifications-factory";
 
 const UsergroupScenariosTable = ({usergroupID}) => {
     const {data: {usergroup} = {}, isLoading, refetch} = useGetUsergroupByIdQuery(usergroupID);
@@ -39,8 +41,8 @@ const UsergroupScenariosTable = ({usergroupID}) => {
                 const oldMappings = usergroup.scenarioMappings.length > 0 ? [...usergroup.scenarioMappings] : [];
                 await updateUsergroup({usergroupID: usergroupID, usergroup: {name: usergroup.name, scenarioMappings: [...oldMappings, newMapping]}}).unwrap();
                 refetch();
-            } catch(error) {
-                console.log("Error updating mappings", error);
+            } catch (err) {
+                notificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR(err.data.message));
             }
         }
         setIsAddScenarioDialogOpen(false);
diff --git a/src/pages/usergroups/tables/usergroup-users-table.js b/src/pages/usergroups/tables/usergroup-users-table.js
index dd4a65f0..662df06a 100644
--- a/src/pages/usergroups/tables/usergroup-users-table.js
+++ b/src/pages/usergroups/tables/usergroup-users-table.js
@@ -35,8 +35,8 @@ const UsergroupUsersTable = ({usergroupID}) => {
             try {
                 await Promise.all(selectedUsers.map(user => addUserToUsergroup({usergroupID: usergroupID, username: user.username}).unwrap()));
                 refetch();
-            } catch (error) {
-                console.log('Error adding users', error);
+            } catch (err) {
+                notificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR(err.data.message));
             }
         }
         setIsAddUserDialogOpen(false);
@@ -46,8 +46,8 @@ const UsergroupUsersTable = ({usergroupID}) => {
         try{
             await removeUserFromGroup({usergroupID: usergroupID, username: user.username}).unwrap();
             refetch();
-        } catch(error) {
-            console.log('Error removing users', error);
+        } catch (err) {
+            notificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR(err.data.message));
         }
     }
 
diff --git a/src/pages/usergroups/usergroup.js b/src/pages/usergroups/usergroup.js
index ab74b17e..bccf9efe 100644
--- a/src/pages/usergroups/usergroup.js
+++ b/src/pages/usergroups/usergroup.js
@@ -24,6 +24,8 @@ import IconButton from "../../common/buttons/icon-button";
 import { buttonStyle, iconStyle } from "./styles";
 import { useGetUsergroupByIdQuery, useUpdateUsergroupMutation } from "../../store/apiSlice";
 import RenameUsergroupDialog from "./dialogs/renameGroupDialog";
+import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
+import NotificationsFactory from "../../common/data-managers/notifications-factory";
 
 const Usergroup = () => {
     const params = useParams();
@@ -38,8 +40,8 @@ const Usergroup = () => {
                 //update only the name
                 await updateUsergroup({usergroupID: usergroup.id, usergroup: {name: newName, ScenarioMappings: usergroup.ScenarioMappings}}).unwrap();
                 refetch();
-            } catch (error) {
-                console.log('Error updating group', error);
+            } catch (err) {
+                notificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR(err.data.message));
             }
         }
 
diff --git a/src/pages/usergroups/usergroups.js b/src/pages/usergroups/usergroups.js
index 2b56b26b..8f1fa347 100644
--- a/src/pages/usergroups/usergroups.js
+++ b/src/pages/usergroups/usergroups.js
@@ -23,6 +23,8 @@ import { buttonStyle, iconStyle } from "./styles";
 import AddUsergroupDialog from "./dialogs/addUsergroupDialog";
 import DeleteDialog from "../../common/dialogs/delete-dialog";
 import moment from "moment";
+import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
+import NotificationsFactory from "../../common/data-managers/notifications-factory";
 
 const Usergroups = (props) => {
     const {data: {usergroups} = {}, refetch: refetchUsergroups, isLoading} = useGetUsergroupsQuery();
@@ -42,7 +44,7 @@ const Usergroups = (props) => {
       
           refetchUsergroups();
         } catch (err) {
-          console.log("Error adding usergroup: ", err);
+          notificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR(err.data.message));
         }
       }
       setIsAddDialogOpen(false);
@@ -53,8 +55,8 @@ const Usergroups = (props) => {
         try{
           await deleteUsergroup(dialogUsegroup.id);
           refetchUsergroups();
-        } catch(error){
-          console.log('Error deleting usergroup', error)
+        } catch (err) {
+          notificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR(err.data.message));
         }
       }
 
diff --git a/src/pages/users/users.js b/src/pages/users/users.js
index d640f8a0..c0826c28 100644
--- a/src/pages/users/users.js
+++ b/src/pages/users/users.js
@@ -110,7 +110,6 @@ const Users = ({}) => {
                     await addUserToScenarioMutation({ scenarioID: scenario.id, username: users.find(u => u.id === checkedUsersIDs[i]).username }).unwrap();
                 }
             } catch (error) {
-                console.log('ERROR', error)
                 if(error.data){
                     notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR(error.data.message));
                 } else {
diff --git a/src/store/websocketSlice.js b/src/store/websocketSlice.js
index 240ddcbc..9f0844ce 100644
--- a/src/store/websocketSlice.js
+++ b/src/store/websocketSlice.js
@@ -23,8 +23,6 @@ export const connectWebSocket = createAsyncThunk(
     'websocket/connect',
     async ({ url, id, length }, { dispatch, getState }) => {
 
-      console.log('Want to connect to', url);
-
       //check if we are already connected to this socket
       if(getState().websocket.activeSocketURLs.includes(url)) return;  
       

From 5b74c18a6d32c866a0096430190d7ec46c67825e Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Mon, 30 Sep 2024 16:25:58 +0200
Subject: [PATCH 12/12] moved usergroups table to the users page, removed
 usergroups page and added a new button to add users selected from users table

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/app.js                         |   4 -
 src/branding/branding.js           |   1 -
 src/common/menu.js                 |  16 ----
 src/pages/usergroups/usergroup.js  |   4 +-
 src/pages/usergroups/usergroups.js |   5 +-
 src/pages/users/users.js           | 127 ++++++++++++++++++++++-------
 6 files changed, 104 insertions(+), 53 deletions(-)

diff --git a/src/app.js b/src/app.js
index ab5c733c..6dd86414 100644
--- a/src/app.js
+++ b/src/app.js
@@ -38,7 +38,6 @@ import './styles/login.css';
 import branding from './branding/branding';
 import Logout from './pages/login/logout';
 import Infrastructure from './pages/infrastructure/infrastructure';
-import Usergroups from './pages/usergroups/usergroups';
 import Usergroup from './pages/usergroups/usergroup';
 import { useSelector } from 'react-redux';
 
@@ -113,9 +112,6 @@ const App = () => {
                 <Route path="/users">
                   <Users />
                 </Route>
-                <Route path="/usergroups">
-                    <Usergroups />
-                </Route>
                 <Route path="/usergroup/:usergroup">
                     <Usergroup />
                 </Route>
diff --git a/src/branding/branding.js b/src/branding/branding.js
index 257e7ee9..2d3bf535 100644
--- a/src/branding/branding.js
+++ b/src/branding/branding.js
@@ -157,7 +157,6 @@ class Branding {
       pages.scenarios = true;
       pages.infrastructure = true;
       pages.users = true;
-      pages.usergroups = true;
       pages.account = true;
       pages.api = true;
 
diff --git a/src/common/menu.js b/src/common/menu.js
index c0f755e4..b30eb1c5 100644
--- a/src/common/menu.js
+++ b/src/common/menu.js
@@ -99,13 +99,6 @@ const SideBarMenu = (props) => {
                 </NavLink>
               </li> : ''
             }
-            <li>
-              <NavLink
-                to="/usergroups"
-                title="Usegroups">
-                Usergroups
-              </NavLink>
-            </li>
             <li hidden={!values.pages.account}>
               <NavLink
                 to="/account"
@@ -163,15 +156,6 @@ const SideBarMenu = (props) => {
                 </NavLink>
               </li> : ''
             }
-            {currentUser.role === 'Admin' ?
-              <li>
-                <NavLink
-                  to="/usergroups"
-                  title="Usegroups">
-                  Usergroups
-                </NavLink>
-              </li> : ''
-            }
             <li hidden={!values.pages.account}>
               <NavLink
                 to="/account"
diff --git a/src/pages/usergroups/usergroup.js b/src/pages/usergroups/usergroup.js
index bccf9efe..e963b10e 100644
--- a/src/pages/usergroups/usergroup.js
+++ b/src/pages/usergroups/usergroup.js
@@ -17,7 +17,7 @@
 
 import { useState } from "react";
 import { useParams } from "react-router-dom/cjs/react-router-dom.min";
-import { Row, Col } from "react-bootstrap";
+import { Row, Col, Spinner } from "react-bootstrap";
 import UsergroupScenariosTable from "./tables/usergroup-scenarios-table";
 import UsergroupUsersTable from "./tables/usergroup-users-table";
 import IconButton from "../../common/buttons/icon-button";
@@ -48,7 +48,7 @@ const Usergroup = () => {
         setIsRenameModalOpened(false);
     }
 
-    if(isLoading) return <div className='loading'>Loading...</div>;
+    if(isLoading) return <Spinner />;
 
     return (
         <div className='section'>
diff --git a/src/pages/usergroups/usergroups.js b/src/pages/usergroups/usergroups.js
index 8f1fa347..9e24bb47 100644
--- a/src/pages/usergroups/usergroups.js
+++ b/src/pages/usergroups/usergroups.js
@@ -25,8 +25,9 @@ import DeleteDialog from "../../common/dialogs/delete-dialog";
 import moment from "moment";
 import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
 import NotificationsFactory from "../../common/data-managers/notifications-factory";
+import { Spinner } from "react-bootstrap";
 
-const Usergroups = (props) => {
+const Usergroups = () => {
     const {data: {usergroups} = {}, refetch: refetchUsergroups, isLoading} = useGetUsergroupsQuery();
     const [addUsergroup] = useAddUsergroupMutation();
     const [deleteUsergroup] = useDeleteUsergroupMutation();
@@ -69,7 +70,7 @@ const Usergroups = (props) => {
       return `${date.fromNow()}`;
     };
     
-    if(isLoading) return <div>Loading</div>;
+    if(isLoading) return <Spinner />;
 
     if(usergroups){
       return (<div className="section"> 
diff --git a/src/pages/users/users.js b/src/pages/users/users.js
index c0826c28..6e9c5e90 100644
--- a/src/pages/users/users.js
+++ b/src/pages/users/users.js
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useSelector } from "react-redux";
-import { Dropdown, DropdownButton } from 'react-bootstrap';
+import { Dropdown, DropdownButton, Spinner, Row, Col } from 'react-bootstrap';
 import { Table, ButtonColumn, CheckboxColumn, DataColumn } from "../../common/table";
 import Icon from "../../common/icon";
 import IconButton from "../../common/buttons/icon-button";
@@ -11,6 +11,7 @@ import DeleteDialog from "../../common/dialogs/delete-dialog";
 import { buttonStyle, iconStyle } from "./styles";
 import NotificationsFactory from "../../common/data-managers/notifications-factory";
 import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
+import Usergroups from "../usergroups/usergroups";
 import { 
     useGetUsersQuery, 
     useAddUserMutation,
@@ -18,26 +19,31 @@ import {
     useDeleteUserMutation,
     useGetScenariosQuery,
     useAddUserToScenarioMutation,
+    useGetUsergroupsQuery,
+    useAddUserToUsergroupMutation
 } from "../../store/apiSlice";
 
-const Users = ({}) => {
+const Users = () => {
 
     const { user: currentUser, token: sessionToken } = useSelector((state) => state.auth);
 
     const {data: fetchedUsers, refetch: refetchUsers} = useGetUsersQuery();
     const users = fetchedUsers ? fetchedUsers.users : [];
-    const { data: fetchedScenarios } = useGetScenariosQuery();
-    const scenarios = fetchedScenarios ? fetchedScenarios.scenarios : [];
+    const { data: {scenarios} = [], isLoading: isLoadingScenarios } = useGetScenariosQuery();
+    const {data: {usergroups} = [], isLoading: isLoadingUsergroups } = useGetUsergroupsQuery();
     const [checkedUsersIDs, setCheckedUsersIDs] = useState([]);
     const [addUserMutation] = useAddUserMutation();
     const [updateUserMutation] = useUpdateUserMutation();
     const [deleteUserMutation] = useDeleteUserMutation();
     const [addUserToScenarioMutation] = useAddUserToScenarioMutation();
+    const [addUserToUsergroup] = useAddUserToUsergroupMutation();
     const [isNewModalOpened, setIsNewModalOpened] = useState(false);
     const [isEditModalOpened, setIsEditModalOpened] = useState(false);
     const [isDeleteModalOpened, setIsDeleteModalOpened] = useState(false);
     const [scenario, setScenario] = useState({name: ''});
+    const [usergroup, setUsergroup] = useState({name: ''});
     const [isUsersToScenarioModalOpened, setUsersToScenarioModalOpened] = useState(false);
+    const [isUsersToUsegroupModalOpened, setUsersToUsegroupModalOpened] = useState(false);
     const [userToEdit, setUserToEdit] = useState({});
     const [userToDelete, setUserToDelete] = useState({});
     const [areAllUsersChecked, setAreAllUsersChecked] = useState(false);
@@ -124,6 +130,28 @@ const Users = ({}) => {
         setAreAllUsersChecked(false);
     }
 
+    const handleAddUsersToUsergroup = async (isCanceled) => {
+        if(!isCanceled){
+            try {
+                for(let i = 0; i < checkedUsersIDs.length; i++){
+                    await addUserToUsergroup({ usergroupID: usergroup.id, username: users.find(u => u.id === checkedUsersIDs[i]).username }).unwrap();
+                }
+            } catch (error) {
+                if(error.data){
+                    notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR(error.data.message));
+                } else {
+                console.log("error", error)
+                  notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR("Unknown error"));
+                }
+            }
+        }
+        
+        setUsersToUsegroupModalOpened(false);
+        setCheckedUsersIDs([]);
+        setUsergroup({name: ''});
+        setAreAllUsersChecked(false);
+    }
+
     const toggleCheckAllUsers = () => {
         if(checkedUsersIDs.length === users.length){
             setCheckedUsersIDs([]);
@@ -207,30 +235,69 @@ const Users = ({}) => {
                     }}
                 />
             </Table>
-            <span className='solid-button'>
-                <DropdownButton
-                    title='Add to Scenario'
-                    onSelect={(id) => {
-                        let scenario;
-                        if(scenarios.length > 0) {
-                            scenario = scenarios.find(s => s.id == id);
-                        }
-                        setScenario(scenario);
-                        setUsersToScenarioModalOpened(true);
-                    }}
-                >
-                {scenarios.map(scenario => (
-                    <Dropdown.Item key={scenario.id} eventKey={scenario.id}>{scenario.name}</Dropdown.Item>
-                ))}
-                </DropdownButton>
-            </span>
-
-            <UsersToScenarioDialog
-                show={isUsersToScenarioModalOpened}
-                users={users.filter(user => checkedUsersIDs.includes(user.id))}
-                scenario={scenario.name}
-                onClose={(canceled) => handleAddUserToScenario(canceled)}
-            />
+
+            <Row>
+                <Col md="auto">
+                    {isLoadingScenarios? <Spinner /> : <>
+                            <span className='solid-button'>
+                                <DropdownButton
+                                    title='Add to Scenario'
+                                    onSelect={(id) => {
+                                        let scenario;
+                                        if(scenarios.length > 0) {
+                                            scenario = scenarios.find(s => s.id == id);
+                                        }
+                                        setScenario(scenario);
+                                        setUsersToScenarioModalOpened(true);
+                                    }}
+                                >
+                                {scenarios.map(scenario => (
+                                    <Dropdown.Item key={scenario.id} eventKey={scenario.id}>{scenario.name}</Dropdown.Item>
+                                ))}
+                                </DropdownButton>
+                            </span>
+                            
+
+                            <UsersToScenarioDialog
+                                show={isUsersToScenarioModalOpened}
+                                users={users.filter(user => checkedUsersIDs.includes(user.id))}
+                                scenario={scenario.name}
+                                onClose={(canceled) => handleAddUserToScenario(canceled)}
+                            />
+                    </>}
+                </Col>
+
+                <Col md="auto">
+                {isLoadingUsergroups? <Spinner /> : <>
+                        <span className='solid-button'>
+                            <DropdownButton
+                                title='Add to Usegroup'
+                                onSelect={(id) => {
+                                    let usergroup;
+                                    if(usergroups.length > 0) {
+                                        usergroup = usergroups.find(s => s.id == id);
+                                    }
+                                    setUsergroup(usergroup);
+                                    setUsersToUsegroupModalOpened(true);
+                                }}
+                            >
+                            {usergroups.map(usergroup => (
+                                <Dropdown.Item key={usergroup.id} eventKey={usergroup.id}>{usergroup.name}</Dropdown.Item>
+                            ))}
+                            </DropdownButton>
+                        </span>
+
+                        {/* re-using same modal to implement adding suers to usergroup */}
+                        <UsersToScenarioDialog
+                            show={isUsersToUsegroupModalOpened}
+                            users={users.filter(user => checkedUsersIDs.includes(user.id))}
+                            scenario={usergroup.name}
+                            onClose={(canceled) => handleAddUsersToUsergroup(canceled)}
+                        />
+                    </>}
+                </Col>
+            </Row>
+
             <NewUserDialog 
                 show={isNewModalOpened} 
                 onClose={(data) => handleAddNewUser(data)} 
@@ -246,6 +313,10 @@ const Users = ({}) => {
                 show={isDeleteModalOpened} 
                 onClose={(e) => handleDeleteUser(e)} 
             />
+
+            <div className="mt-4">
+                <Usergroups />
+            </div>
         </div>
     )
 }