Feature/wms 5 (#32)

* Start the home page

* Fix the Tile and Tile Grid Component and also created the homePage

* Recreated the tile component with TileBasic

* fix the tile component

* Fixed: tile length sizing

* Rename page export

* Added: page to routes

* Renamed: sidenav title

Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>

src/assets/images/ReportsIcon.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+const ReportsIcon = ({ width = 96, height = 96, color = '#007aff', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.31 16.95C11.12 16.95 10.93 16.88 10.78 16.73L9.28 15.23C8.99 14.94 8.99 14.46 9.28 14.17C9.57 13.88 10.05 13.88 10.34 14.17L11.31 15.14L14.78 11.67C15.07 11.38 15.55 11.38 15.84 11.67C16.13 11.96 16.13 12.44 15.84 12.73L11.84 16.73C11.7 16.88 11.5 16.95 11.31 16.95Z"
+      fill={color}
+    />
+    <path
+      d="M14.5 6.75H10.5C9.54 6.75 7.75 6.75 7.75 4C7.75 1.25 9.54 1.25 10.5 1.25H14.5C15.46 1.25 17.25 1.25 17.25 4C17.25 4.96 17.25 6.75 14.5 6.75ZM10.5 2.75C9.51 2.75 9.25 2.75 9.25 4C9.25 5.25 9.51 5.25 10.5 5.25H14.5C15.75 5.25 15.75 4.99 15.75 4C15.75 2.75 15.49 2.75 14.5 2.75H10.5Z"
+      fill={color}
+    />
+    <path
+      d="M15.5 22.75H9.5C3.88 22.75 2.75 20.17 2.75 16V10C2.75 5.44 4.4 3.49 8.46 3.28C8.87 3.26 9.23 3.57 9.25 3.99C9.27 4.41 8.95 4.75 8.54 4.77C5.7 4.93 4.25 5.78 4.25 10V16C4.25 19.7 4.98 21.25 9.5 21.25H15.5C20.02 21.25 20.75 19.7 20.75 16V10C20.75 5.78 19.3 4.93 16.46 4.77C16.05 4.75 15.73 4.39 15.75 3.98C15.77 3.57 16.12 3.25 16.54 3.27C20.6 3.49 22.25 5.44 22.25 9.99V15.99C22.25 20.17 21.12 22.75 15.5 22.75Z"
+      fill={color}
+    />
+  </svg>
+);
+export default ReportsIcon;
+
+ReportsIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/ScanIcon.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+
+const ScanIcon = ({ width = '96', height = '96', color = '#007AFF', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 96 96"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M8 36V28C8 16 16 8 28 8H68C80 8 88 16 88 28V36"
+      stroke={color}
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8 60V68C8 80 16 88 28 88H68C80 88 88 80 88 68V60"
+      stroke={color}
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8 48H88"
+      stroke={color}
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ScanIcon;
+
+ScanIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/SearchInventoryIcon.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+
+const SearchInventoryIcon = ({ width = '78', height = '86', color = '#007AFF', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 78 86"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M31 19H47C55 19 55 15 55 11C55 3 51 3 47 3H31C27 3 23 3 23 11C23 19 27 19 31 19Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M55 11.0801C68.32 11.8001 75 16.7201 75 35.0001V59.0001C75 75.0001 71 83.0001 51 83.0001H27C7 83.0001 3 75.0001 3 59.0001V35.0001C3 16.7601 9.68 11.8001 23 11.0801"
+      stroke={color}
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M37.6287 62.2582C45.7082 62.2582 52.2578 55.7086 52.2578 47.6292C52.2578 39.5497 45.7082 33 37.6287 33C29.5493 33 22.9996 39.5497 22.9996 47.6292C22.9996 55.7086 29.5493 62.2582 37.6287 62.2582Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M55.0004 64.9998L50.4288 60.4282"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SearchInventoryIcon;
+
+SearchInventoryIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

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 }) => (
   <svg
     width={width}
     height={height}