Feature/wms 53 (#53)

* create warehouse
* edit warehouse changes
* Update: linted and formatted
* add warehouse button
* user access changes
* basic table component changes
* Updated: eslint errors
* basic table component changes
* update: linted

Co-authored-by: [Diksha] <[diksha39511@gmail.com]>
Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>

src/pages/useraccess/index.js

@@ -1,22 +1,30 @@
+import React, { useEffect } from 'react';
 import MDBox from 'components/MDBox';
 import DashboardNavbar from 'components/DashboardNavbar';
 import Footer from 'components/Footer';
 import DashboardLayout from 'layouts/DashboardLayout';
+import { styled } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
 import BasicTable from 'components/BasicTable';
-import { Grid } from '@mui/material';
+import { Grid, TableBody, TableCell, TableRow } from '@mui/material';
 import SearchBar from 'components/SearchBar';
+import EditIcon from '@mui/icons-material/Edit';
 import MDButton from 'components/Button';
 import { useState } from 'react';
-import EditIcon from '@mui/icons-material/Edit';
 import { Tabs, Tab } from '@mui/material';
 import TabPanel from 'components/Tabs';
+import UsersActions from 'redux/UsersRedux';
+import { API } from 'constant';
+import { useDispatch, useSelector } from 'react-redux';
+import { UsersSelectors } from 'redux/UsersRedux';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   iconSize: {
-    width: '50%',
-    height: '50%',
-    marginBottom: '10px'
+    width: '2%',
+    height: '2%',
+    marginBottom: '10px',
+    color: theme.palette.primary.light,
+    marginRight: '8px'
   },
   margin: {
     marginBottom: '20px'
@@ -27,152 +35,63 @@ const useStyles = makeStyles({
   marginTable: {
     marginTop: '20px'
   },
+  iconwrap: {
+    display: 'flex',
+    alignItems: 'center'
+  },
   tabs: {
     '& .MuiButtonBase-root.MuiTab-root': {
       padding: '12px 0px',
       borderRadius: '0px'
     },
     '& .Mui-selected': {
-      textDecoration: 'underline',
-      backgroundColor: '#017AFF'
+      backgroundColor: '#017AFF',
+      color: 'white'
     }
   }
-});
+}));
+const headCells = [
+  { id: 'fullName', label: 'Name' },
+  { id: 'role_name', label: 'Roles' }
+];
 
 function UserAccessScreen() {
   const classes = useStyles();
+  const dispatch = useDispatch();
   const [value, setValue] = useState(0);
+  const usersData = useSelector(UsersSelectors.getUsersDetail);
+  const [records, setRecords] = useState([]);
+
+  useEffect(() => {
+    if (usersData.length) {
+      let users = JSON.parse(JSON.stringify(usersData));
+      users = users.map((item) => {
+        item.role_name = item.roles.map((role) => role.name).join(',');
+        return item;
+      });
+      setRecords(users);
+    }
+  }, [usersData]);
 
   const handleTabs = (e, val) => {
     setValue(val);
   };
 
-  const header = [
-    {
-      name: '',
-      prop: 'icon'
-    },
-    {
-      name: 'User Name',
-      prop: 'username'
-    },
-    {
-      name: 'Phone Number',
-      prop: 'phonenumber'
-    },
-    {
-      name: 'Roles',
-      prop: 'roles'
-    },
-    {
-      name: 'Last Updated by & Date',
-      prop: 'lastupdated'
-    },
-    {
-      name: 'Created by & Date',
-      prop: 'Createdby'
-    },
-    {
-      name: 'Last Login',
-      prop: 'lastlogin'
-    },
-    {
-      name: 'Access',
-      prop: 'access'
+  const usersHandler = () => {
+    dispatch(
+      UsersActions.getUsersAction({
+        loader: 'loading-request',
+        slug: API.GET_USERS_DATA,
+        method: 'get'
+      })
+    );
+  };
+
+  const StyledTableRow = styled(TableRow)(({ theme }) => ({
+    '&:nth-of-type(even)': {
+      backgroundColor: theme.palette.action.hover
     }
-  ];
-  const data = [
-    {
-      icon: <EditIcon />,
-      username: 'Floyd Miles',
-      phonenumber: '(704)555-0127',
-      roles: 'Administrator',
-      lastupdated: 'System| 1/1/2022 11:23:00 AM',
-      Createdby: 'System| 1/1/2022 11:23:00 AM',
-      lastlogin: 'System| 1/1/2022 11:23:00 AM',
-      access: 'Active'
-    },
-    {
-      icon: <EditIcon />,
-      username: 'Floyd Miles',
-      phonenumber: '(704)555-0127',
-      roles: 'Administrator',
-      lastupdated: 'System| 1/1/2022 11:23:00 AM',
-      Createdby: 'System| 1/1/2022 11:23:00 AM',
-      lastlogin: 'System| 1/1/2022 11:23:00 AM',
-      access: 'Active'
-    },
-    {
-      icon: <EditIcon />,
-      username: 'Floyd Miles',
-      phonenumber: '(704)555-0127',
-      roles: 'Administrator',
-      lastupdated: 'System| 1/1/2022 11:23:00 AM',
-      Createdby: 'System| 1/1/2022 11:23:00 AM',
-      lastlogin: 'System| 1/1/2022 11:23:00 AM',
-      access: 'Active'
-    },
-    {
-      icon: <EditIcon />,
-      username: 'Floyd Miles',
-      phonenumber: '(704)555-0127',
-      roles: 'Administrator',
-      lastupdated: 'System| 1/1/2022 11:23:00 AM',
-      Createdby: 'System| 1/1/2022 11:23:00 AM',
-      lastlogin: 'System| 1/1/2022 11:23:00 AM',
-      access: 'Active'
-    },
-    {
-      icon: <EditIcon />,
-      username: 'Floyd Miles',
-      phonenumber: '(704)555-0127',
-      roles: 'Administrator',
-      lastupdated: 'System| 1/1/2022 11:23:00 AM',
-      Createdby: 'System| 1/1/2022 11:23:00 AM',
-      lastlogin: 'System| 1/1/2022 11:23:00 AM',
-      access: 'Active'
-    },
-    {
-      icon: <EditIcon />,
-      username: 'Floyd Miles',
-      phonenumber: '(704)555-0127',
-      roles: 'Administrator',
-      lastupdated: 'System| 1/1/2022 11:23:00 AM',
-      Createdby: 'System| 1/1/2022 11:23:00 AM',
-      lastlogin: 'System| 1/1/2022 11:23:00 AM',
-      access: 'Active'
-    },
-    {
-      icon: <EditIcon />,
-      username: 'Floyd Miles',
-      phonenumber: '(704)555-0127',
-      roles: 'Administrator',
-      lastupdated: 'System| 1/1/2022 11:23:00 AM',
-      Createdby: 'System| 1/1/2022 11:23:00 AM',
-      lastlogin: 'System| 1/1/2022 11:23:00 AM',
-      access: 'Active'
-    },
-    {
-      icon: <EditIcon />,
-      username: 'Floyd Miles',
-      phonenumber: '(704)555-0127',
-      roles: 'Administrator',
-      lastupdated: 'System| 1/1/2022 11:23:00 AM',
-      Createdby: 'System| 1/1/2022 11:23:00 AM',
-      lastlogin: 'System| 1/1/2022 11:23:00 AM',
-      access: 'Active'
-    },
-    {
-      icon: <EditIcon />,
-      username: 'Floyd Miles',
-      phonenumber: '(704)555-0127',
-      roles: 'Administrator',
-      lastupdated: 'System| 1/1/2022 11:23:00 AM',
-      Createdby: 'System| 1/1/2022 11:23:00 AM',
-      lastlogin: 'System| 1/1/2022 11:23:00 AM',
-      access: 'Active'
-    }
-  ];
+  }));
 
   return (
     <DashboardLayout>
@@ -182,16 +101,8 @@ function UserAccessScreen() {
           <Grid item xs={12} sm={4} md={4}>
             <Tabs value={value} className={classes.tabs} onChange={handleTabs}>
               <Tab label="Roles" />
-              <Tab label="Users" />
+              <Tab label="Users" onClick={() => usersHandler()} />
             </Tabs>
-            <TabPanel value={value} index={0}>
-              <div className={classes.marginTable}>
-                <BasicTable data={data} header={header} backgroundColor="#017AFF" />
-              </div>
-            </TabPanel>
-            <TabPanel value={value} index={1}>
-              Item2 Detail
-            </TabPanel>
           </Grid>
           <Grid item xs={12} sm={4} md={6}>
             <SearchBar />
@@ -202,6 +113,32 @@ function UserAccessScreen() {
             </MDButton>
           </Grid>
         </Grid>
+        <TabPanel value={value} index={0}>
+          <div className={classes.marginTable}>Item2 Detail</div>
+        </TabPanel>
+        <TabPanel value={value} index={1}>
+          <BasicTable
+            headCells={headCells}
+            records={records}
+            backgroundColor="#007AFF"
+            color="#fff"
+          >
+            <TableBody>
+              {records &&
+                records.map((item) => (
+                  <StyledTableRow key={item.id}>
+                    <TableCell>
+                      <div className={classes.iconwrap}>
+                        <EditIcon className={classes.iconSize} />
+                        {item.fullName}
+                      </div>
+                    </TableCell>
+                    <TableCell>{item.role_name}</TableCell>
+                  </StyledTableRow>
+                ))}
+            </TableBody>
+          </BasicTable>
+        </TabPanel>
       </MDBox>
       <Footer />
     </DashboardLayout>