diff --git a/.gitignore b/.gitignore index 7c031d5..bc76bde 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,4 @@ yarn-error.log* yarn.lock commit.sh +pnpm-lock.yaml diff --git a/src/assets/images/ReportsIcon.js b/src/assets/images/ReportsIcon.js new file mode 100644 index 0000000..ad607b4 --- /dev/null +++ b/src/assets/images/ReportsIcon.js @@ -0,0 +1,31 @@ +import PropTypes from 'prop-types'; +const ReportsIcon = ({ width = 96, height = 96, color = '#007aff', ...props }) => ( + + + + + +); +export default ReportsIcon; + +ReportsIcon.propTypes = { + width: PropTypes.string, + height: PropTypes.string, + color: PropTypes.string +}; diff --git a/src/assets/images/ScanIcon.js b/src/assets/images/ScanIcon.js new file mode 100644 index 0000000..5193b97 --- /dev/null +++ b/src/assets/images/ScanIcon.js @@ -0,0 +1,45 @@ +import PropTypes from 'prop-types'; + +const ScanIcon = ({ width = '96', height = '96', color = '#007AFF', ...props }) => ( + + + + + +); + +export default ScanIcon; + +ScanIcon.propTypes = { + width: PropTypes.string, + height: PropTypes.string, + color: PropTypes.string +}; diff --git a/src/assets/images/SearchInventoryIcon.js b/src/assets/images/SearchInventoryIcon.js new file mode 100644 index 0000000..8db5cb0 --- /dev/null +++ b/src/assets/images/SearchInventoryIcon.js @@ -0,0 +1,51 @@ +import PropTypes from 'prop-types'; + +const SearchInventoryIcon = ({ width = '78', height = '86', color = '#007AFF', ...props }) => ( + + + + + + +); + +export default SearchInventoryIcon; + +SearchInventoryIcon.propTypes = { + width: PropTypes.string, + height: PropTypes.string, + color: PropTypes.string +}; diff --git a/src/assets/images/SetupIcon.js b/src/assets/images/SetupIcon.js index b3cfed6..2db6f87 100644 --- a/src/assets/images/SetupIcon.js +++ b/src/assets/images/SetupIcon.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -const SetupIcon = ({ width = 25, height = 24, color = '#292D32', ...props }) => ( +const SetupIcon = ({ width = 96, height = 96, color = '#007aff', ...props }) => ( ( ))} ); + export default function BasicTable({ data, header, backgroundColor }) { const classes = useStyles(); const TableContainer = styled('div')( diff --git a/src/components/ImageUpload/Index.js b/src/components/ImageUpload/Index.js deleted file mode 100644 index 4c3148d..0000000 --- a/src/components/ImageUpload/Index.js +++ /dev/null @@ -1,95 +0,0 @@ -import MDBox from 'components/MDBox'; -import UploadIcon from 'assets/images/UploadIcon'; -import MDTypography from 'components/MDTypography'; -import pxToRem from 'assets/theme-dark/functions/pxToRem'; -import Placeholder from 'assets/images/placeholder.png'; -import { Button } from '@mui/material'; -import Close from 'assets/images/Close'; - - -function ImageUpload () { - const PreviewImg = [1,2,3,4,5,6,7,8,9,10,11]; - return( - <> - - - - - - - Upload Product images - - - - {/* -----------img-preview----------- */} - - {PreviewImg.map((item)=>{ - return( - - placeholder - - - ); - })} - - - - ); -} - -export default ImageUpload; diff --git a/src/components/ImageUpload/index.js b/src/components/ImageUpload/index.js new file mode 100644 index 0000000..55e0ce5 --- /dev/null +++ b/src/components/ImageUpload/index.js @@ -0,0 +1,108 @@ +import MDBox from 'components/MDBox'; +import PropTypes from 'prop-types'; +import UploadIcon from 'assets/images/UploadIcon'; +import MDTypography from 'components/MDTypography'; +import pxToRem from 'assets/theme-dark/functions/pxToRem'; +import Placeholder from 'assets/images/placeholder.png'; +import { Button } from '@mui/material'; +import Close from 'assets/images/Close'; + +function ImageUpload({ heading, previewImg }) { + return ( + <> + + + + + + + {heading} + + + + {/* -----------img-preview----------- */} + + {previewImg.map((item) => { + return ( + + placeholder + + + ); + })} + + + + ); +} + +export default ImageUpload; +ImageUpload.propTypes = { + previewImg: PropTypes.array, + heading: PropTypes.string +}; diff --git a/src/components/Sidenav/index.js b/src/components/Sidenav/index.js index 38573fd..c52fbb9 100644 --- a/src/components/Sidenav/index.js +++ b/src/components/Sidenav/index.js @@ -59,7 +59,6 @@ function Sidenav({ color, brandName, routes, ...rest }) { const items = pathname.split('/').slice(1); const itemParentName = items[1]; const itemName = items[items.length - 1]; - let textColor = 'white'; @@ -120,9 +119,11 @@ function Sidenav({ color, brandName, routes, ...rest }) { }; // Render the all the collpases from the routes.js const renderCollapse = (collapses) => - collapses.map(({ name, collapse, route, href, key }) => { + collapses.map(({ name, collapse, route, href, key, hide }) => { let returnValue; + if (hide) return null; + if (collapse) { returnValue = ( { + ({ type, name, icon, title, collapse, noCollapse, key, href, hide }) => { let returnValue; + if (hide) return null; + if (type === 'collapse') { returnValue = href ? ( sidenavLogoLabel(theme, { miniSidenav })} > - + {brandName} diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js new file mode 100644 index 0000000..62c1c61 --- /dev/null +++ b/src/components/Tabs/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export default function TabPanel({ children, value, index }) { + return
{value === index &&

{children}

}
; +} + +TabPanel.propTypes = { + children: PropTypes.node, + value: PropTypes.number, + index: PropTypes.number +}; diff --git a/src/components/TileComponent/Tile/TileGrid.js b/src/components/TileComponent/Tile/TileGrid.js new file mode 100644 index 0000000..a1265e7 --- /dev/null +++ b/src/components/TileComponent/Tile/TileGrid.js @@ -0,0 +1,54 @@ +import React, { useEffect, useRef } from 'react'; +import PropTypes from 'prop-types'; +import Box from '@mui/material/Box'; +import { makeStyles } from '@mui/styles'; + +import Tile from './Tile'; + +const useStyles = makeStyles({ + menu: { + display: 'grid', + gap: '1.75rem', + backgroundColor: '#f9f9f9', + padding: '24px 48px', + '@media (max-width: 900px)': { + gridTemplateColumns: 'repeat(2, minmax(250px, auto)) !important' + }, + '@media (max-width: 690px)': { + gridTemplateColumns: 'repeat(1, minmax(250px, auto)) !important' + } + } +}); + +export default function TileGrid({ tiles }) { + const classes = useStyles(); + // to make the grid adjust its elemnts: + const myContainer = useRef(null); + let gridColumns = 2; + useEffect(() => { + const grid = myContainer.current; + const gridChild = grid.childElementCount; + gridColumns = Math.floor(Math.sqrt(gridChild)); + grid.style.gridTemplateColumns = `repeat(${gridColumns}, minmax(250px, auto))`; + }); + return ( + + {tiles && + tiles.map((tile) => ( + + {' '} + {tile.icon} + + ))} + + ); +} + +TileGrid.propTypes = { + // tiles: PropTypes.object({ + // name: PropTypes.string.isRequired, + // path: PropTypes.string.isRequired, + // icon: PropTypes.any + // }) + tiles: PropTypes.any +}; diff --git a/src/components/TileComponent/TileGrid.js b/src/components/TileComponent/TileGrid.js index a1265e7..81d3b9d 100644 --- a/src/components/TileComponent/TileGrid.js +++ b/src/components/TileComponent/TileGrid.js @@ -35,7 +35,7 @@ export default function TileGrid({ tiles }) { {tiles && tiles.map((tile) => ( - + {' '} {tile.icon} @@ -45,10 +45,5 @@ export default function TileGrid({ tiles }) { } TileGrid.propTypes = { - // tiles: PropTypes.object({ - // name: PropTypes.string.isRequired, - // path: PropTypes.string.isRequired, - // icon: PropTypes.any - // }) - tiles: PropTypes.any + tiles: PropTypes.array }; diff --git a/src/pages/homepage/index.js b/src/pages/homepage/index.js new file mode 100644 index 0000000..d1e99ea --- /dev/null +++ b/src/pages/homepage/index.js @@ -0,0 +1,58 @@ +import MDBox from 'components/MDBox'; +import DashboardNavbar from 'components/DashboardNavbar'; +import Footer from 'components/Footer'; +import DashboardLayout from 'layouts/DashboardLayout'; +import SetupIcon from 'assets/images/SetupIcon'; +import SearchInventoryIcon from 'assets/images/SearchInventoryIcon'; +import ReportsIcon from 'assets/images/ReportsIcon'; +import ScanIcon from 'assets/images/ScanIcon'; +import TileBasic from 'components/TileBasic'; +import { makeStyles } from '@mui/styles'; + +const useStyles = makeStyles({ + iconSize: { + width: '50%', + height: '50%', + marginBottom: '10px' + }, + margin: { + marginBottom: '20px' + } +}); + +function HomepageScreen() { + const classes = useStyles(); + const data = [ + { + name: 'Search Inventory', + path: '/', + icon: + }, + { + name: 'Scan', + path: '/', + icon: + }, + { + name: 'Setup', + path: '/', + icon: + }, + { + name: 'Reports', + path: '/', + icon: + } + ]; + + return ( + + + + + +