@campxdev/react-blueprint 0.1.41 → 0.1.43

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
+    "@campxdev/campx-web-utils": "^0.1.3",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.20",
@@ -11,9 +12,6 @@
     "@mui/x-data-grid": "^7.5.1",
     "@storybook/addon-backgrounds": "^8.1.5",
     "@storybook/addon-designs": "^8.0.2",
-    "axios": "^1.7.2",
-    "framer-motion": "^11.2.9",
-    "js-cookie": "^3.0.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -22,11 +20,15 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
+    "axios": "^1.7.2",
+    "framer-motion": "^11.2.9",
+    "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "pullstate": "^1.24.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.4",
+    "react-joyride": "^2.8.2",
     "react-router-dom": "^6.24.0",
     "react-scripts": "^5.0.1",
     "storybook-dark-mode": "^4.0.1",

package/src/components/Assets/Icons/IconComponents/ActiveDevicesIcon.tsx

@@ -1,8 +1,6 @@
 import { useTheme } from "@mui/material";
 
-
-export const ActiveDevicesIcon = () => {
-  const size = 32
+export const ActiveDevicesIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
 

package/src/components/Assets/Icons/IconComponents/AdministratorIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const AdministratorIcon = () => {
-  const size = 32;
+export const AdministratorIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/AppsIcon.tsx

@@ -1,6 +1,4 @@
-export const AppsIcon = () => {
-  const size = 32;
-
+export const AppsIcon = ({ size = 32 }) => {
   return (
     <svg
       id="apps"

package/src/components/Assets/Icons/IconComponents/BulbIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const BulbIcon = () => {
-  const size = 32;
+export const BulbIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.highlight.highlightBlue;
 

package/src/components/Assets/Icons/IconComponents/CampxFullLogoIcon.tsx

@@ -2,7 +2,6 @@ import { useTheme } from "@mui/material";
 
 export const CampxFullLogoIcon = () => {
   const theme = useTheme();
-
   const color = theme.palette.mode === "dark" ? "#FFFFFF" : "#1e19f5";
 
   return (

package/src/components/Assets/Icons/IconComponents/CampxIcon.tsx

@@ -1,11 +1,10 @@
 import { useTheme } from "@mui/material";
 
-export const CampxIcon = () => {
-  const size = 32;
+export const CampxIcon = ({ size = 32 }) => {
   const theme = useTheme();
 
   const color = theme.palette.mode === "dark" ? "white" : "blue";
-  console.log(color);
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

package/src/components/Assets/Icons/IconComponents/CareerIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const CareerIcon = () => {
-  const size = 32;
+export const CareerIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/CheckedCheckBoxIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const CheckedCheckboxIcon = () => {
-  const size = 32;
+export const CheckedCheckboxIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/CheckedRadioIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const CheckedRadioIcon = () => {
-  const size = 32;
+export const CheckedRadioIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/ClogWheelIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const ClogWheelIcon = () => {
-  const size = 32;
+export const ClogWheelIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/CommutexIcon.tsx

@@ -0,0 +1,37 @@
+import { useTheme } from "@mui/material";
+
+export const CommutexIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      id="Group_4542"
+      data-name="Group 4542"
+      width={size}
+      height={size}
+      viewBox="0 0 290.182 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#6a2886" />
+          <stop offset="1" stop-color="#8234a4" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Union_49"
+        data-name="Union 49"
+        d="M192.681,400l-47.861-65.881L96.953,400H.975L0,399.287,135.693,212.52H.09v-25h136.26L48.761,67.083l-.02.024L0,.029.02,0H97.5l47.866,65.876L193.223,0H289.2l.98.707L154.448,187.524h135.64v25H153.867l87.549,120.4.02-.024,48.742,67.079-.02.029Z"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/CrossIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const CrossIcon = () => {
-  const size = 32;
+export const CrossIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/DashBoardIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const DashBoardIcon = () => {
-  const size = 32;
+export const DashBoardIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/DeviceIcon.tsx

@@ -1,13 +1,11 @@
 import { useTheme } from "@mui/material";
 
-export const DeviceIcon = () => {
-  const size = 32;
+export const DeviceIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <div>
       <svg
-        xmlns="http://www.w3.org/2000/svg"
         width={size}
         height={size}
         viewBox="0 0 20 20"

package/src/components/Assets/Icons/IconComponents/EnrollIcon.tsx

@@ -0,0 +1,35 @@
+import { useTheme } from "@mui/material";
+
+export const EnrollxIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 362.673 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#007ab1" />
+          <stop offset="1" stop-color="#149ecd" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Union_6"
+        data-name="Union 6"
+        d="M0,400H.017L0,399.971l48.484-66.726.02.027L145.335,200h95.476l.972.706L96.985,400Zm179.158-80.166L266.226,200H361.7l.972.7L276.121,319.834ZM361.7,200Zm0,0H266.228l-87.2-120.01h96.963l86.68,119.3Zm-216.367,0L48.5,66.729l-.02.027L0,.027.017,0h96.97L241.782,199.294l-.972.706ZM217.908.046h0ZM217.91.046Zm-97,0-.015-.02.02-.027h96.968l.032.042v0ZM0,0H.017Z"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/ExamResultIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const ExamResultIcon = () => {
-  const size = 32;
+export const ExamResultIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/ExamxIcon.tsx

@@ -0,0 +1,34 @@
+import { useTheme } from "@mui/material";
+
+export const ExamxIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      id="Group_4477"
+      data-name="Group 4477"
+      width={size}
+      height={size}
+      viewBox="0 0 388.283 400"
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#d86b00" />
+          <stop offset="1" stop-color="#ed9035" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Subtraction_66"
+        data-name="Subtraction 66"
+        d="M388.261,400H291.294l-.021-.027L.018,400,0,399.973l48.481-66.729.018.023L145.334,200,48.5,66.728l-.018.027L0,.03.018,0H388.264l.019.03L339.8,66.755l-.018-.027L242.943,200l96.837,133.268.018-.023,48.486,66.729-.021.026ZM153.486,77.69h0l38.344,52.8V269.442l-38.346,52.8,81.253-.052-38.286-52.746V130.491l38.286-52.749-81.251-.051Z"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/HelpIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const HelpIcon = () => {
-  const size = 32;
+export const HelpIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/HomeIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const HomeIcon = () => {
-  const size = 32;
+export const HomeIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/HostelxIcon.tsx

@@ -0,0 +1,51 @@
+import { useTheme } from "@mui/material";
+
+export const HostelxIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      id="Group_4511"
+      data-name="Group 4511"
+      width={size}
+      height={size}
+      viewBox="0 0 580.128 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#573dab" />
+          <stop offset="1" stop-color="#7251dd" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Subtraction_9"
+        data-name="Subtraction 9"
+        d="M99.7,205.6H.02L0,205.576l49.844-68.6.019.026L148.351,1.456l48.808,67.169.019-.027,1.034,1.423L99.7,205.6ZM248.052,1.421h0L247.019,0h.538l1,.725-.5.694Z"
+        transform="translate(141.741 194.395)"
+        fill="url(#linear-gradient)"
+      />
+      <path
+        id="Union_40"
+        data-name="Union 40"
+        d="M99.7,400H.02L0,399.968l49.846-68.594.016.024,98.491-135.549.231.316,43-59.186.02.028L290.09,1.456l.486.668.3-.417L438.488,204.88l-.1.073L530.266,331.4l.02-.024,49.842,68.594-.021.029H480.422L381.915,264.414l.039-.052-49.86-68.574-.017.024,0,0v0l-.5-.692.024-.018-9.8-13.486.129.02-31.532-43.4L241.445,205.6h-.474l-44.659,61.423L99.7,400v0ZM191.174,1.74,189.928.032,189.949,0h2.489l-1.263,1.74v0ZM389.79,1.42,388.759,0h.538l1,.728-.5.692Z"
+        fill="url(#linear-gradient)"
+      />
+      <path
+        id="Subtraction_10"
+        data-name="Subtraction 10"
+        d="M247.558,205.6H149.408L51.1,70.308l49.841-68.6L248.556,204.879l-1,.725ZM1.244,1.741h0L0,.03.019,0H2.508L1.245,1.74Z"
+        transform="translate(189.93 194.394)"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/InfoIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const InfoIcon = () => {
-  const size = 32;
+export const InfoIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.highlight.highlightBlue;
 

package/src/components/Assets/Icons/IconComponents/InstitutionsIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const InstitutionsIcon = () => {
-  const size = 32;
+export const InstitutionsIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
 

package/src/components/Assets/Icons/IconComponents/LeftIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const LeftIcon = () => {
-  const size = 32;
+export const LeftIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/LocationIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const LocationIcon = () => {
-  const size = 32;
+export const LocationIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
 

package/src/components/Assets/Icons/IconComponents/LogoutIcon.tsx

@@ -5,8 +5,10 @@ interface LogoutIconProps {
   hoverColor?: string;
 }
 
-export const LogoutIcon: React.FC<LogoutIconProps> = ({ hoverColor }) => {
-  const size = 32;
+export const LogoutIcon: React.FC<LogoutIconProps> = (
+  { hoverColor },
+  { size = 32 }
+) => {
   const theme = useTheme();
   const [isHovered, setIsHovered] = useState(false);
   const defaultColor = theme.palette.text.primary;

package/src/components/Assets/Icons/IconComponents/NavigationIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const NavigationIcon = () => {
-  const size = 32;
+export const NavigationIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/NotificationIcon.tsx

@@ -1,13 +1,11 @@
 import { useTheme } from "@mui/material";
 
-export const NotificationIcon = () => {
-  const size = 32;
+export const NotificationIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <>
       <svg
-        xmlns="http://www.w3.org/2000/svg"
         width={size}
         height={size}
         viewBox="0 0 20 20"

package/src/components/Assets/Icons/IconComponents/PayxIcon.tsx

@@ -0,0 +1,49 @@
+import { useTheme } from "@mui/material";
+
+export const PayxIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      id="Group_4464"
+      data-name="Group 4464"
+      width={size}
+      height={size}
+      viewBox="0 0 281.535 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.222"
+          y1="1"
+          x2="0.787"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#88b053" />
+          <stop offset="1" stop-color="#50840b" />
+        </linearGradient>
+      </defs>
+      <g id="Group_4461" data-name="Group 4461" transform="translate(0 0)">
+        <g id="Group_4460" data-name="Group 4460">
+          <path
+            id="Subtraction_8"
+            data-name="Subtraction 8"
+            d="M99.731,205.606,248.585.725l-1-.725H149.435L49.888,137.006l-.019-.027L.026,205.577l.019.029H99.731Z"
+            transform="translate(32.95 194.394)"
+            fill="url(#linear-gradient)"
+          />
+          <path
+            id="Subtraction_8-2"
+            data-name="Subtraction 8"
+            d="M148.88,0,.026,204.881l1,.725H99.176L198.723,68.6l.019.027L248.585.029,248.566,0H148.88Z"
+            transform="translate(-0.026 0)"
+            fill="url(#linear-gradient)"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/PeoplexIcon.tsx

@@ -0,0 +1,35 @@
+import { useTheme } from "@mui/material";
+
+export const PeoplexIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 532.854 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#d0002b" />
+          <stop offset="1" stop-color="#ea4a6b" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Union_42"
+        data-name="Union 42"
+        d="M279.636,400H151.53l-.024-.038,51.2-70.468L191.03,313.422,128.13,400H.024L0,399.959,64.052,311.8l.024.035,126.57-174.2.62.853,0-.006L266.8,242.03l75.965-103.542.006.009.385-.53,189.7,261.1-1.283.932H405.438l-62.9-86.573-11.8,16.247,50.617,69.389-1.283.932H279.64Zm0,0h0ZM290.045,50.418v0a50.416,50.416,0,1,1,100.832,0v0a50.416,50.416,0,1,1-100.832,0Zm-149.881,0v0a50.417,50.417,0,0,1,100.833,0v0a50.417,50.417,0,0,1-100.833,0Z"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/ProductFeaturesIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const ProductFeaturesIcon = () => {
-  const size = 32;
+export const ProductFeaturesIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/ProfileIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const ProfileIcon = () => {
-  const size = 32;
+export const ProfileIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
 
@@ -15,7 +14,7 @@ export const ProfileIcon = () => {
         height={size}
         viewBox="0 0 16 16"
         style={{
-          fill: color, // Set fill color to use the theme's primary text color
+          fill: color,
         }}
       >
         <g id="user-octagon">

package/src/components/Assets/Icons/IconComponents/RightIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const RightIcon = () => {
-  const size = 32;
+export const RightIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/TicketsIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const TicketsIcon = () => {
-  const size = 32;
+export const TicketsIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/ToursIcon.tsx

@@ -0,0 +1,68 @@
+export const ToursIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="118"
+      height="118"
+      viewBox="0 0 118 118"
+    >
+      <defs>
+        <filter
+          id="Rectangle_24558"
+          x="0"
+          y="0"
+          width="118"
+          height="118"
+          filterUnits="userSpaceOnUse"
+        >
+          <feOffset dx="6" dy="6" />
+          <feGaussianBlur stdDeviation="8" result="blur" />
+          <feFlood flood-opacity="0.059" />
+          <feComposite operator="in" in2="blur" />
+          <feComposite in="SourceGraphic" />
+        </filter>
+      </defs>
+      <g
+        id="Group_9777"
+        data-name="Group 9777"
+        transform="translate(-1822 -982)"
+      >
+        <g
+          id="Group_9776"
+          data-name="Group 9776"
+          transform="translate(1840 1000)"
+        >
+          <g
+            transform="matrix(1, 0, 0, 1, -18, -18)"
+            filter="url(#Rectangle_24558)"
+          >
+            <rect
+              id="Rectangle_24558-2"
+              data-name="Rectangle 24558"
+              width="70"
+              height="70"
+              rx="35"
+              transform="translate(18 18)"
+              fill="#fff"
+            />
+          </g>
+          <rect
+            id="Rectangle_24559"
+            data-name="Rectangle 24559"
+            width="54"
+            height="54"
+            rx="27"
+            transform="translate(8 8)"
+            fill="#d0d0e3"
+          />
+        </g>
+        <path
+          id="sun"
+          d="M4.914,11.712a.971.971,0,0,0-.971-.971H2.971a.971.971,0,0,0,0,1.942h.971A.971.971,0,0,0,4.914,11.712Zm.622,4.856-.69.69a.968.968,0,0,0,1.369,1.369l.69-.69a.971.971,0,0,0-1.369-1.369ZM11.712,4.914a.971.971,0,0,0,.971-.971V2.971a.971.971,0,0,0-1.942,0v.971A.971.971,0,0,0,11.712,4.914Zm5.5,2.273a.971.971,0,0,0,.68-.282l.69-.69a.971.971,0,1,0-1.369-1.369l-.641.69a.967.967,0,0,0,.641,1.651ZM5.555,6.9A.968.968,0,0,0,6.924,5.535l-.69-.69A.975.975,0,0,0,4.846,6.215Zm14.9,3.836h-.971a.971.971,0,0,0,0,1.942h.971a.971.971,0,0,0,0-1.942Zm-2.564,5.827a.971.971,0,0,0-1.321,1.321l.69.69a.968.968,0,1,0,1.369-1.369ZM11.712,6.37a5.342,5.342,0,1,0,5.342,5.342A5.342,5.342,0,0,0,11.712,6.37Zm0,8.741a3.4,3.4,0,1,1,3.4-3.4,3.4,3.4,0,0,1-3.4,3.4Zm0,3.4a.971.971,0,0,0-.971.971v.971a.971.971,0,0,0,1.942,0v-.971A.971.971,0,0,0,11.712,18.51Z"
+          transform="translate(1863.288 1023.288)"
+          fill="#323167"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/UncheckCheckBoxIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const UnCheckedCheckboxIcon = () => {
-  const size = 32;
+export const UnCheckedCheckboxIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.secondary.main;
   return (

package/src/components/Assets/Icons/IconComponents/UncheckedRadioIcon.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const UnCheckedRadioIcon = () => {
-  const size = 32;
+export const UnCheckedRadioIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (

package/src/components/Assets/Icons/IconComponents/Union4Icon.tsx

@@ -0,0 +1,35 @@
+import { useTheme } from "@mui/material";
+
+export const Union4Icon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 287.642 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#cba100" />
+          <stop offset="1" stop-color="#f8d759" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Union_4"
+        data-name="Union 4"
+        d="M241.763,400h.02Zm-96.968,0-.972-1.343L142.847,400H45.879l-.015-.024L73.94,361.328l20.405-28.086.02.024.972-1.338L0,200.7l.972-.7H96.445l47.378,65.2L191.2,200l-47.373-65.2L96.445,200H.972L0,199.3,95.337,68.071l-.972-1.338-.02.024L45.864.024,45.884,0h96.963l.977,1.343L144.795,0h96.968l.02.024L193.3,66.758l-.02-.024-.972,1.338L287.642,199.3l-.967.7.967.7L192.3,331.929l.972,1.338.02-.024,48.486,66.733-.02.024ZM45.864,0h.02Z"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/XIcon.tsx

@@ -0,0 +1,24 @@
+import { useTheme } from "@mui/material";
+
+export const XIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 689.881 714.902"
+      style={{
+        stroke: color,
+      }}
+    >
+      <path
+        id="Subtraction_130"
+        data-name="Subtraction 130"
+        d="M-3274.271-9547.1h-168.235l-99.271-136.635,86.525-119.091,184.132,253.437-3.152,2.289Zm-515.342,0h-168.234l-3.152-2.289,258.416-355.679L-3961-10260.741l1.733-1.259h170.4l172.806,237.845.035-.048,86.524,119.09-.035.049.12.164-86.525,119.091-.118-.162L-3789.613-9547.1h0Zm333.661-459.245h0l-86.525-119.091,99.222-136.567h170.4l1.733,1.259-184.833,254.4Z"
+        transform="translate(3961 10262)"
+        fill="#1e1ef5"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/Icons.tsx

@@ -1,35 +1,44 @@
 import { ActiveDevicesIcon } from "./IconComponents/ActiveDevicesIcon";
+import { AdministratorIcon } from "./IconComponents/AdministratorIcon";
 import { AppsIcon } from "./IconComponents/AppsIcon";
+import { BulbIcon } from "./IconComponents/BulbIcon";
+import { CampxFullLogoIcon } from "./IconComponents/CampxFullLogoIcon";
+import { CampxIcon } from "./IconComponents/CampxIcon";
 import { CareerIcon } from "./IconComponents/CareerIcon";
 import { CheckedCheckboxIcon } from "./IconComponents/CheckedCheckBoxIcon";
 import { CheckedRadioIcon } from "./IconComponents/CheckedRadioIcon";
 import { ClogWheelIcon } from "./IconComponents/ClogWheelIcon";
+import { CommutexIcon } from "./IconComponents/CommutexIcon";
+import { CrossIcon } from "./IconComponents/CrossIcon";
 import { DashBoardIcon } from "./IconComponents/DashBoardIcon";
 import { DeviceIcon } from "./IconComponents/DeviceIcon";
+import { EnrollxIcon } from "./IconComponents/EnrollIcon";
 import { ExamResultIcon } from "./IconComponents/ExamResultIcon";
+import { ExamxIcon } from "./IconComponents/ExamxIcon";
 import { ExportIcon } from "./IconComponents/ExportIcon";
 import { FilterIcon } from "./IconComponents/FilterIcon";
 import { HelpIcon } from "./IconComponents/HelpIcon";
 import { HomeIcon } from "./IconComponents/HomeIcon";
+import { HostelxIcon } from "./IconComponents/HostelxIcon";
 import { InfoIcon } from "./IconComponents/InfoIcon";
-
-import { BulbIcon } from "./IconComponents/BulbIcon";
-import { CampxIcon } from "./IconComponents/CampxIcon";
-import { CrossIcon } from "./IconComponents/CrossIcon";
 import { InstitutionsIcon } from "./IconComponents/InstitutionsIcon";
 import { LeftIcon } from "./IconComponents/LeftIcon";
 import { LocationIcon } from "./IconComponents/LocationIcon";
 import { LogoutIcon } from "./IconComponents/LogoutIcon";
 import { NavigationIcon } from "./IconComponents/NavigationIcon";
 import { NotificationIcon } from "./IconComponents/NotificationIcon";
+import { PayxIcon } from "./IconComponents/PayxIcon";
+import { PeoplexIcon } from "./IconComponents/PeoplexIcon";
 import { ProductFeaturesIcon } from "./IconComponents/ProductFeaturesIcon";
 import { ProfileIcon } from "./IconComponents/ProfileIcon";
 import { RightIcon } from "./IconComponents/RightIcon";
 import { TicketsIcon } from "./IconComponents/TicketsIcon";
+import { ToursIcon } from "./IconComponents/ToursIcon";
 import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
 import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
-import { AdministratorIcon } from "./IconComponents/AdministratorIcon";
-import { CampxFullLogoIcon } from "./IconComponents/CampxFullLogoIcon";
+import { Union4Icon } from "./IconComponents/Union4Icon";
+import { XIcon } from "./IconComponents/XIcon";
+
 export const Icons = {
   AppsIcon,
   CareerIcon,
@@ -62,4 +71,13 @@ export const Icons = {
   CampxIcon,
   AdministratorIcon,
   CampxFullLogoIcon,
+  CommutexIcon,
+  EnrollxIcon,
+  PeoplexIcon,
+  PayxIcon,
+  HostelxIcon,
+  ExamxIcon,
+  Union4Icon,
+  XIcon,
+  ToursIcon,
 };

package/src/components/Feedback/Tutorial/Tutorial.tsx

@@ -0,0 +1,113 @@
+import { axios } from "@campxdev/campx-web-utils";
+import { IconButton } from "@mui/material";
+import { ReactNode, useEffect, useState, useCallback } from "react";
+import ReactJoyride, { Step, CallBackProps, ACTIONS } from "react-joyride";
+import { ToursIcon } from "../../Assets/Icons/IconComponents/ToursIcon";
+import { Tooltip } from "../Tooltip/Tooltip";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+
+export interface TutorialProps {
+  steps: Step[];
+  children?: ReactNode;
+  tourName: string;
+  iconPosition?: "left" | "right";
+}
+
+export const Tutorial = ({
+  steps,
+  children,
+  tourName,
+  iconPosition = "right",
+}: TutorialProps) => {
+  const [run, setRun] = useState(false);
+  const userTours = localStorage.getItem("userTours") || "[]";
+
+  const startTour = useCallback(() => {
+    setRun(true);
+  }, []);
+
+  useEffect(() => {
+    if (userTours && !userTours.includes(tourName)) {
+      startTour();
+    }
+  }, [userTours, tourName, startTour]);
+
+  const handleJoyrideCallback = (data: CallBackProps) => {
+    const { action, status } = data;
+
+    if (action === ACTIONS.RESET) {
+      setRun(false);
+      completeTour().catch((err) => {
+        console.error("Failed to mark tour as complete:", err);
+      });
+    }
+  };
+
+  const completeTour = async () => {
+    try {
+      if (!userTours.includes(tourName)) {
+        localStorage.setItem(
+          "userTours",
+          JSON.stringify([...JSON.parse(userTours), tourName])
+        );
+      }
+      await axios.post("/square/tours/complete", { tourName });
+    } catch (error) {
+      console.error("Error completing the tour:", error);
+    }
+  };
+
+  return (
+    <div style={{ textAlign: iconPosition }}>
+      <Tooltip
+        title={<Typography variant="body1">Start Tour</Typography>}
+        placement="left"
+      >
+        <IconButton
+          onClick={startTour}
+          style={{ cursor: "pointer" }}
+          aria-label={`Start ${tourName} tour`}
+        >
+          <ToursIcon />
+        </IconButton>
+      </Tooltip>
+
+      <ReactJoyride
+        callback={handleJoyrideCallback}
+        steps={steps}
+        continuous={true}
+        run={run}
+        showSkipButton={true}
+        locale={{
+          last: "Finish",
+          next: "Next",
+          skip: "Skip",
+          back: "Previous",
+        }}
+        styles={{
+          buttonNext: {
+            backgroundColor: "#D27D2D",
+            color: "white",
+            height: "28px",
+            width: "100px",
+            padding: "0px",
+            fontFamily: "Roboto, sans-serif",
+          },
+          buttonBack: {
+            backgroundColor: "transparent",
+            color: "black",
+            borderRadius: "4px",
+            height: "28px",
+            width: "100px",
+            gap: "10px",
+            marginLeft: "5px",
+            padding: "0px",
+            border: "1px solid black",
+            fontFamily: "Roboto, sans-serif",
+          },
+        }}
+      />
+      {children}
+    </div>
+  );
+};

package/src/components/Feedback/exports.ts

@@ -1,2 +1,3 @@
 export * from "./Spinner/Spinner";
 export * from "./Tooltip/Tooltip";
+export * from "./Tutorial/Tutorial";

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -32,7 +32,7 @@ export const AppHeader = ({
             alert("help button clicked");
           }}
         >
-          <HelpIcon />
+          <HelpIcon size={24} />
         </StyledIconButton>
         <UserBox fullName={userFullName} actions={[]} />
       </Stack>

package/src/stories/Feedback/Tutorial.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Tutorial } from "../../components/Feedback/Tutorial/Tutorial";
+
+export default {
+  title: "Feedback/Tutorial",
+  component: Tutorial,
+  parameters: {
+    controls: {
+      exclude: ["children"],
+    },
+  },
+  argTypes: {
+    iconPosition: {
+      control: { type: "radio" },
+      options: ["left", "right"],
+      defaultValue: "right",
+    },
+    tourName: { control: "text" },
+    steps: { control: "object" },
+  },
+} as Meta<typeof Tutorial>;
+
+export const PrimaryTutorial: StoryObj<typeof Tutorial> = {
+  render: (args) => (
+    <div>
+      {/* Placeholder elements for the tutorial */}
+      <div
+        className="tutorial-target"
+        style={{ margin: "20px", border: "2px solid blue", padding: "10px" }}
+      >
+        Target 1: This element is the first target of the tutorial.
+      </div>
+      <div
+        className="next-target"
+        style={{ margin: "20px", border: "2px solid green", padding: "10px" }}
+      >
+        Target 2: This element is the next target of the tutorial.
+      </div>
+
+      <Tutorial {...args} />
+    </div>
+  ),
+  args: {
+    tourName: "Active Batches",
+    steps: [
+      {
+        target: ".tutorial-target",
+        content: "This is my first step",
+      },
+      {
+        target: ".next-target",
+        content: "This is the next step",
+      },
+    ],
+  },
+};

package/src/themes/commonTheme.ts

@@ -187,8 +187,7 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           tooltip: {
             backgroundColor: ColorTokens.surface.paperBackground,
-            padding: "20px 30px",
-            minWidth: "300px",
+            padding: "20px 20px",
             boxShadow: `0px 2px 5px ${ColorTokens.secondary.main}`,
             border: `1px solid ${ColorTokens.secondary.main}`,
           },