mohiit1502/plaidware-wms-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/wms-28 Warehouse Setup Page Design completed (#35)

Browse Source 
* feature/wms-28 Warehouse Setup Page Design completed
* Renamed, linted
This commit is contained in:
Hiren Padsala
2022-01-31 15:32:33 +05:30
committed by GitHub
parent 0e7952f83d
commit 4666a1e3b9
6 changed files with 176 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/images/InventoryIcon.js Normal file
View File

@@ -0,0 +1,17 @@
import PropTypes from 'prop-types';
const InventoryIcon = ({ width = 25, height = 24, ...props }) => (
<svg width={width} height={height} {...props} viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M37.24 58.7998L43.24 64.7998L59.24 48.7998" stroke="#007AFF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M40 24H56C64 24 64 20 64 16C64 8 60 8 56 8H40C36 8 32 8 32 16C32 24 36 24 40 24Z" stroke="#007AFF" strokeWidth="5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M64 16.0801C77.32 16.8001 84 21.7201 84 40.0001V64.0001C84 80.0001 80 88.0001 60 88.0001H36C16 88.0001 12 80.0001 12 64.0001V40.0001C12 21.7601 18.68 16.8001 32 16.0801" stroke="#007AFF" strokeWidth="5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
export default InventoryIcon;
InventoryIcon.propTypes = {
width: PropTypes.string,
height: PropTypes.string,
color: PropTypes.string
};

17
src/assets/images/LabelIcon.js Normal file
View File

@@ -0,0 +1,17 @@
import PropTypes from 'prop-types';
const LabelIcon = ({ width = 25, height = 24, ...props }) => (
<svg width={width} height={height} {...props} viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.619 62.1055L35.739 80.2255C43.179 87.6655 55.259 87.6655 62.739 80.2255L80.299 62.6655C87.739 55.2255 87.739 43.1455 80.299 35.6655L62.139 17.5855C58.339 13.7855 53.099 11.7455 47.739 12.0255L27.739 12.9855C19.739 13.3455 13.379 19.7055 12.979 27.6655L12.019 47.6655C11.779 53.0655 13.819 58.3055 17.619 62.1055Z" stroke="#007AFF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M38.939 48.9053C44.4618 48.9053 48.939 44.4281 48.939 38.9053C48.939 33.3824 44.4618 28.9053 38.939 28.9053C33.4161 28.9053 28.939 33.3824 28.939 38.9053C28.939 44.4281 33.4161 48.9053 38.939 48.9053Z" stroke="#007AFF" strokeWidth="5" strokeLinecap="round"/>
<path d="M52.939 68.9053L68.939 52.9053" stroke="#007AFF" strokeWidth="5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
export default LabelIcon;
LabelIcon.propTypes = {
width: PropTypes.string,
height: PropTypes.string,
color: PropTypes.string
};

17
src/assets/images/ProfileCircleIcon.js Normal file
View File

@@ -0,0 +1,17 @@
import PropTypes from 'prop-types';
const ProfileCircleIcon = ({ width = 25, height = 24, ...props }) => (
<svg width={width} height={height} {...props} viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48.4799 51.1199C48.1999 51.0799 47.8399 51.0799 47.5199 51.1199C40.4799 50.8799 34.8799 45.1199 34.8799 38.0399C34.8799 30.7999 40.7199 24.9199 47.9999 24.9199C55.2399 24.9199 61.1199 30.7999 61.1199 38.0399C61.0799 45.1199 55.5199 50.8799 48.4799 51.1199Z" stroke="#007AFF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M74.96 77.5202C67.84 84.0402 58.4 88.0002 48 88.0002C37.6 88.0002 28.16 84.0402 21.04 77.5202C21.44 73.7602 23.84 70.0802 28.12 67.2002C39.08 59.9202 57 59.9202 67.88 67.2002C72.16 70.0802 74.56 73.7602 74.96 77.5202Z" stroke="#007AFF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M48 88C70.0914 88 88 70.0914 88 48C88 25.9086 70.0914 8 48 8C25.9086 8 8 25.9086 8 48C8 70.0914 25.9086 88 48 88Z" stroke="#007AFF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
export default ProfileCircleIcon;
ProfileCircleIcon.propTypes = {
width: PropTypes.string,
height: PropTypes.string,
color: PropTypes.string
};

16
src/assets/images/WarehouseIcon.js Normal file
View File

@@ -0,0 +1,16 @@
import PropTypes from 'prop-types';
const WarehouseIcon = ({ width = 25, height = 24, ...props }) => (
<svg width={width} height={height} viewBox="0 0 96 96" {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M52.0401 11.6798L75.6401 22.1598C82.4401 25.1598 82.4401 30.1198 75.6401 33.1198L52.0401 43.5998C49.3601 44.7998 44.9601 44.7998 42.2801 43.5998L18.6801 33.1198C11.8801 30.1198 11.8801 25.1598 18.6801 22.1598L42.2801 11.6798C44.9601 10.4798 49.3601 10.4798 52.0401 11.6798Z" stroke="#007AFF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 44C12 47.36 14.52 51.24 17.6 52.6L44.76 64.68C46.84 65.6 49.2 65.6 51.24 64.68L78.4 52.6C81.48 51.24 84 47.36 84 44" stroke="#007AFF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 64C12 67.72 14.2 71.08 17.6 72.6L44.76 84.68C46.84 85.6 49.2 85.6 51.24 84.68L78.4 72.6C81.8 71.08 84 67.72 84 64" stroke="#007AFF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
export default WarehouseIcon;
WarehouseIcon.propTypes = {
width: PropTypes.string,
height: PropTypes.string,
color: PropTypes.string
};

102
src/pages/setup/index.js Normal file
View File

@@ -0,0 +1,102 @@
import DashboardNavbar from 'components/DashboardNavbar';
import DashboardLayout from 'layouts/DashboardLayout';
import { makeStyles } from '@mui/styles';
import MDBox from 'components/MDBox';
import { Grid } from '@mui/material';
import WarehouseIcon from 'assets/images/WarehouseIcon';
import InventoryIcon from 'assets/images/InventoryIcon';
import ProfileCircleIcon from 'assets/images/ProfileCircleIcon';
import LabelIcon from 'assets/images/LabelIcon';
const useStyles = makeStyles({
iconSize: {
width: '50%',
height: '50%',
marginBottom: '10px'
},
margin: {
marginBottom: '20px'
},
centerContent: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
marginLeft: '20px',
boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.05)',
borderRadius: '8px',
marginBottom: '20px',
cursor: 'pointer !important',
'& svg': {
'&path': {
stroke: '#007AFF !important'
}
},
'&:hover': {
backgroundColor: '#007AFF',
cursor: 'default',
color: 'white',
'& svg': {
'& path': {
stroke: '#fff'
}
}
}
}
});
function SetupHome() {
const classes = useStyles();
const data = [
{
name: 'Warehouse',
path: '/warehouse',
icon: <WarehouseIcon className={classes.iconSize} color="blue" />
},
{
name: 'Inventory',
path: '/',
icon: <InventoryIcon className={classes.iconSize} color="blue" />
},
{
name: 'User & Access',
path: '/',
icon: <ProfileCircleIcon className={classes.iconSize} color="blue" />
},
{
name: 'Labeling',
path: '/',
icon: <LabelIcon className={classes.iconSize} color="blue" />
}
];
return (
<DashboardLayout>
<DashboardNavbar />
<MDBox px={2} py={3}>
<Grid container spacing={2}>
{data.map((items) => (
<>
<Grid item xs={12} sm={6} md={6}>
<MDBox
key={items.name + items.path}
data={{ name: items.name, path: items.path }}
className={classes.centerContent}
sx={{
height: 230,
backgroundColor: ({ palette: { white } }) => white.main,
padding: '32px 40px'
}}
>
{items.icon}
{items.name}
</MDBox>
</Grid>
</>
))}
</Grid>
</MDBox>
</DashboardLayout>
);
}
export default SetupHome;

7
src/routes/index.js
View File

@@ -45,6 +45,7 @@ import LoginScreen from 'pages/authentication';
// @mui icons
import Icon from '@mui/material/Icon';
import WarehouseScreen from 'pages/warehouse';
import SetupHome from 'pages/setup';
import LabelingScreen from 'pages/labeling';
// Images
@@ -95,6 +96,12 @@ const protectedRoutes = [
key: 'Setup',
icon: <Icon fontSize="medium">dashboard</Icon>,
collapse: [
{
name: 'Setup Home',
key: 'warehouse-setup',
route: '/warehouse-setup',
component: <SetupHome />
},
{
name: 'Warehouse Design',
key: 'warehouse',