diff --git a/src/components/BasicTable/TblContainer.js b/src/components/BasicTable/TblContainer.js new file mode 100644 index 0000000..0c6f38e --- /dev/null +++ b/src/components/BasicTable/TblContainer.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { Table } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import PropTypes from 'prop-types'; + +export default function TblContainer({ children, backgroundColor, color }) { + const useStyles = makeStyles({ + headDisplay: { + display: 'revert' + }, + table: { + '& thead th': { + fontWeight: '600', + color: color, + backgroundColor: backgroundColor + }, + '& tbody td': { + borderRadius: '2px', + fontWeight: 300, + borderRight: '1px solid #EBEBEB', + borderBottom: '1px solid #EBEBEB', + borderLeft: '1px solid #EBEBEB', + textAlign: 'left', + whiteSpace: 'nowrap' + }, + '& tbody tr:hover': { + cursor: 'pointer' + } + } + }); + const classes = useStyles(); + return ( + <> + {children}
+ + ); +} + +TblContainer.propTypes = { + children: PropTypes.node.isRequired, + backgroundColor: PropTypes.string.isRequired, + color: PropTypes.string.isRequired +}; diff --git a/src/components/BasicTable/index.js b/src/components/BasicTable/index.js index 1aeff11..3b1c58f 100644 --- a/src/components/BasicTable/index.js +++ b/src/components/BasicTable/index.js @@ -1,69 +1,40 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { styled } from '@mui/material/styles'; +import TblContainer from './TblContainer'; import { makeStyles } from '@mui/styles'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; +import { TableCell, TableHead, TableRow } from '@mui/material'; -const useStyles = makeStyles({ - headColor: { +const useStyles = makeStyles(() => ({ + headDisplay: { display: 'revert' - }, - rowStyle: { - color: '#007aff' - }, - tablebody: { - fontSize: '13px', - color: '#7F7F7F' } -}); +})); -const row = (x, i, header) => ( - - {header.map((y, k) => ( - {x[y.prop]} - ))} - -); - -export default function BasicTable({ data, header, backgroundColor }) { +export default function BasicTable({ children, headCells, backgroundColor, color }) { const classes = useStyles(); - const TableContainer = styled('div')( - () => ` - td, - th { - border-right: 1px solid #EBEBEB; - border-bottom: 1px solid #EBEBEB; - border-left: 1px solid #EBEBEB; - text-align: left; - white-space: nowrap; - background-color: white; - } - th { - background-color: ${backgroundColor};, - color: #9B9B9B; - } - ` - ); - return ( - - - - - {header && header.map((x, i) => {x.name})} + <> + + + + {headCells.map((headCell) => ( + {headCell.label} + ))} - {data.map((x, i) => row(x, i, header))} -
- + {children} + + ); } BasicTable.propTypes = { - data: PropTypes.array, - header: PropTypes.array, - backgroundColor: PropTypes.string + children: PropTypes.node.isRequired, + headCells: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + label: PropTypes.string.isRequired + }) + ).isRequired, + backgroundColor: PropTypes.string, + color: PropTypes.string }; diff --git a/src/config/ApiConfig.js b/src/config/ApiConfig.js index 2d0a10a..488f01b 100644 --- a/src/config/ApiConfig.js +++ b/src/config/ApiConfig.js @@ -45,7 +45,7 @@ UnauthorizedAPI.addMonitor(APIMonitor); AuthorizedAPI.addAsyncRequestTransform(async (request) => { LOGGER.log('request', request); let token = localStorage.getItem('token'); - request.headers.Authorization = `Bearer ${token}`; + request.headers.Authorization = token; }); export { AuthorizedAPI, UnauthorizedAPI }; diff --git a/src/constant/Endpoints.js b/src/constant/Endpoints.js index 74402cb..9c7d533 100644 --- a/src/constant/Endpoints.js +++ b/src/constant/Endpoints.js @@ -1,5 +1,6 @@ export default { LOGIN_USER: '/user/login', GET_WAREHOUSE_DATA: '/warehouse/all?page=0&perPage=50', - CREATE_WAREHOUSE:'/warehouse/' + CREATE_WAREHOUSE: '/warehouse/', + GET_USERS_DATA: '/user/all?page=0&perPage=10' }; diff --git a/src/pages/inventory/index.js b/src/pages/inventory/index.js index eddd348..87efa62 100644 --- a/src/pages/inventory/index.js +++ b/src/pages/inventory/index.js @@ -1,7 +1,7 @@ import DashboardNavbar from 'components/DashboardNavbar'; import Footer from 'components/Footer'; import DashboardLayout from 'layouts/DashboardLayout'; -import { Grid, InputLabel } from '@mui/material'; +import { Grid, InputLabel, TableBody, TableCell, TableRow } from '@mui/material'; import MDInput from 'components/MDInput'; import ImageUpload from 'components/ImageUpload'; import Switch from 'components/Switch'; @@ -38,81 +38,82 @@ const useStyles = makeStyles({ } }); +const stockBox = [ + { + text: 'Stock Tracking' + }, + { + text: 'Replenishment' + }, + { + text: 'Alerting' + }, + { + text: 'Check In/Out' + }, + { + text: 'Maintenance' + }, + { + text: 'Location' + } +]; + +const records = [ + { + level1: 'Ipsum', + level2: 'Vivera' + }, + { + level1: 'Ipsum', + level2: 'Vivera' + } +]; + +const headCells = [ + { + id: 'level1', + label: 'Level 1' + }, + { + id: 'level2', + label: 'Level 2' + } +]; + +const dropdownData = [ + { + ID: '1', + displayname: 'Regular, full time' + }, + { + ID: '2', + displayname: 'Regular, part time' + }, + { + ID: '3', + displayname: 'Contractor- Arise Max' + } +]; + +const dataInventory = [ + { + placeholder: 'Lorem Ipsum', + label: 'Inventory Type' + } +]; +const dataLevel = [ + { + placeholder: 'Lorem Ipsum', + label: 'Level 1' + }, + { + placeholder: 'Lorem Ipsum', + label: 'Level 2' + } +]; + function InventoryScreen() { - const stockBox = [ - { - text: 'Stock Tracking' - }, - { - text: 'Replenishment' - }, - { - text: 'Alerting' - }, - { - text: 'Check In/Out' - }, - { - text: 'Maintenance' - }, - { - text: 'Location' - } - ]; - - const tableData = [ - { - level1: 'Ipsum', - level2: 'Vivera' - }, - { - level1: 'Ipsum', - level2: 'Vivera' - } - ]; - - const header = [ - { - name: 'Level 1', - prop: 'level1' - }, - { - name: 'Level 2', - prop: 'level2' - } - ]; - - const dropdownData = [ - { - ID: '1', - displayname: 'Regular, full time' - }, - { - ID: '2', - displayname: 'Regular, part time' - }, - { - ID: '3', - displayname: 'Contractor- Arise Max' - } - ]; - - const dataInventory = [ - { - placeholder: 'Lorem Ipsum', - label: 'Inventory Type' - } - ]; - const dataLevel = [ - { - placeholder: 'Lorem Ipsum', - label: 'Level 1' - }, - { - placeholder: 'Lorem Ipsum', - label: 'Level 2' - } - ]; const previewImg = [1, 2, 3]; const classes = useStyles(); return ( @@ -203,18 +204,36 @@ function InventoryScreen() { - Widget hierarchy + + Widget hierarchy + + color="#343434" + > + + {records && + records.map((item) => ( + + {item.level1} + {item.level2} + + ))} + + diff --git a/src/pages/labeling/index.js b/src/pages/labeling/index.js index aeb1988..47f1559 100644 --- a/src/pages/labeling/index.js +++ b/src/pages/labeling/index.js @@ -4,7 +4,7 @@ import Footer from 'components/Footer'; import DashboardLayout from 'layouts/DashboardLayout'; import { makeStyles } from '@mui/styles'; import Dropdown from 'components/Dropdown'; -import { Grid } from '@mui/material'; +import { Grid, TableBody, TableCell, TableRow } from '@mui/material'; import BasicTable from 'components/BasicTable'; import MDButton from 'components/Button'; @@ -25,6 +25,60 @@ const useStyles = makeStyles({ } }); +const records = [ + { + warehouse: 'Ipsum', + zone: 'Vivera', + area: 'Nisi', + row: 'Nulla', + label: 'Mauris', + bay: '' + }, + { + warehouse: 'Ipsum', + zone: 'Vivera', + area: 'Nisi', + row: 'Nulla', + label: 'Mauris', + bay: '' + }, + { + warehouse: 'Ipsum', + zone: 'Vivera', + area: 'Nisi', + row: 'Nulla', + label: 'Mauris', + bay: '' + } +]; + +const headCells = [ + { + id: 'warehouse', + label: 'warehouse' + }, + { + id: 'zone', + label: 'Zone' + }, + { + id: 'area', + label: 'Area' + }, + { + id: 'row', + label: 'Row' + }, + { + id: 'Label', + label: 'label' + }, + { + id: 'Bay', + label: 'bay' + } +]; + function LabelingScreen() { const classes = useStyles(); @@ -71,59 +125,6 @@ function LabelingScreen() { } ]; - const tableData = [ - { - warehouse: 'Ipsum', - zone: 'Vivera', - area: 'Nisi', - row: 'Nulla', - label: 'Mauris', - bay: '' - }, - { - warehouse: 'Ipsum', - zone: 'Vivera', - area: 'Nisi', - row: 'Nulla', - label: 'Mauris', - bay: '' - }, - { - warehouse: 'Ipsum', - zone: 'Vivera', - area: 'Nisi', - row: 'Nulla', - label: 'Mauris', - bay: '' - } - ]; - - const header = [ - { - name: 'Warehouse', - prop: 'warehouse' - }, - { - name: 'Zone', - prop: 'zone' - }, - { - name: 'Area', - prop: 'area' - }, - { - name: 'Row', - prop: 'row' - }, - { - name: 'Label', - prop: 'label' - }, - { - name: 'Bay', - prop: 'bay' - } - ]; return ( @@ -138,11 +139,25 @@ function LabelingScreen() {
+ headCells={headCells} + records={records} + backgroundColor="#F4F4F4" + color="#8D8D8D" + > + + {records && + records.map((item) => ( + + {item.warehouse} + {item.zone} + {item.area} + {item.row} + {item.label} + {item.Bay} + + ))} + + {data2 && data2.map((item, index) => ( diff --git a/src/pages/useraccess/index.js b/src/pages/useraccess/index.js index 0faaf7d..cc1bd85 100644 --- a/src/pages/useraccess/index.js +++ b/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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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 ( @@ -182,16 +101,8 @@ function UserAccessScreen() { - + usersHandler()} /> - -
- -
- - - Item2 Detail - @@ -202,6 +113,32 @@ function UserAccessScreen() { + +
Item2 Detail
+ + + + + {records && + records.map((item) => ( + + +
+ + {item.fullName} +
+ + {item.role_name} + + ))} + + +