Added "quantity" property to each object in the data array.

src/Pages/OptiFiiExpense/WalletProgram.jsx

@@ -44,7 +44,7 @@ import { AiOutlineEdit } from "react-icons/ai";
 import { FaRegEye } from "react-icons/fa";
 import { PiReceipt } from "react-icons/pi";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import { Link } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import backFund from "../../assets/backfund.svg";
 import PrimaryButton from "../../Components/Buttons/PrimaryButton";
 import { FaArrowUpFromBracket } from "react-icons/fa6";
@@ -228,7 +228,9 @@ const WalletProgram = () => {
                   </MenuItem>
                 </MenuList>
               </Menu>
+              <NavLink to="/wallet-program/create-wallet">
               <PrimaryButton leftIcon={<AddIcon />} title={"Create wallet"} />
+              </NavLink>
             </Box>
           </Box>
           <Divider />

src/Pages/OptiFiiExpense/wallet/CreateWallet.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import {
+  Box,
+  Step,
+  StepDescription,
+  StepIcon,
+  StepIndicator,
+  StepNumber,
+  StepSeparator,
+  StepStatus,
+  StepTitle,
+  Stepper,
+  useSteps,
+} from "@chakra-ui/react";
+
+const steps = [
+  { title: "Wallet policy", description: "Wallet policy" },
+  { title: "Approval policy", description: "Approval policy" },
+  { title: "Submission policy", description: "Submission policy" },
+  { title: "Define budget", description: "Define budget" },
+];
+
+const CreateWallet = () => {
+  const { activeStep } = useSteps({
+    index: 1,
+    count: steps.length,
+  });
+  return (
+    <Box>
+      <Stepper index={activeStep}>
+        {steps.map((step, index) => (
+          <Step key={index}>
+            <StepIndicator>
+              <StepStatus
+                complete={<StepIcon />}
+                incomplete={<StepNumber />}
+                active={<StepNumber 
+                />}
+              />
+            </StepIndicator>
+
+            <Box flexShrink="0">
+              <StepTitle>{step.title}</StepTitle>
+              <StepDescription>{step.description}</StepDescription>
+            </Box>
+
+            <StepSeparator />
+          </Step>
+        ))}
+      </Stepper>
+    </Box>
+  );
+};
+
+export default CreateWallet;

src/Routes/Routes.js

@@ -19,6 +19,7 @@ import OptiFiiExpenseDashboard from "../Pages/OptiFiiExpense/OptiFiiExpenseDashb
 import GiftCard from "../Pages/OptiFiiGifsAndVouchers/GiftCard";
 import ApplicationStatus from "../Pages/OptiFiiGifsAndVouchers/id/ApplicationStatus";
 import DigitalApplicationStatus from "../Pages/OptiFiiGifsAndVouchers/id/DigitalApplication";
+import CreateWallet from "../Pages/OptiFiiExpense/wallet/CreateWallet";
 export const RouteLink = [
   { path: "/", Component: Dashbaord },
   { path: "/expenses", Component: Expenses },
@@ -41,4 +42,5 @@ export const RouteLink = [
   { path: "/gift-card", Component: GiftCard },
   { path: "/gift-card/application-status", Component: ApplicationStatus },
   { path: "/gift-card/digital-application-status", Component: DigitalApplicationStatus },
+  {path:"/wallet-program/create-wallet" , Component : CreateWallet}
 ];