bugs fixed

src/App.css

@@ -8,7 +8,7 @@
 * {
   box-sizing: border-box;
   margin: 0;
-  padding: 0; 
+  padding: 0;
   /* font-family: "League Spartan", sans-serif !important; */
   /* font-family: "Poppins", sans-serif !important; */
   /* font-family: "Lato", sans-serif !important; */
@@ -22,36 +22,52 @@
 }
 
 .activee {
-  text-decoration: none; /* Remove underline */
+  text-decoration: none;
-  font-weight: bold; /* Optionally change font weight for active link */
+  /* Remove underline */
-  background: linear-gradient(
+  font-weight: bold;
-    to right,
+  /* Optionally change font weight for active link */
-    #7a45fb,
+  background: linear-gradient(to right,
-    /* #764aaf67, */
+      #7a45fb,
-    #de41b5
+      /* #764aaf67, */
-  ); /* Gradient background */
+      #de41b5);
-  -webkit-background-clip: text; /* Clip text to the background area */
+  /* Gradient background */
-  -webkit-text-fill-color: transparent; /* Fill text with the background color */
+  -webkit-background-clip: text;
+  /* Clip text to the background area */
+  -webkit-text-fill-color: transparent;
+  /* Fill text with the background color */
   transition: all 0.3s ease-in-out;
 }
 
 .active {
-  /* background-color: #210A33; */
+  /* background: linear-gradient(90deg, #5a47b2 50%, #6342ac 50%);
+  color: #fff;
+  font-weight: 600 !important; */
+  background: linear-gradient(90deg, #5a47b2 50%, #6342ac 50%);
+  color: #fff;
+  font-weight: 600 !important;
+  border-radius: 4px;
+  padding-left: 4px;
+}
+
+.custom-active {
+  background: transparent;
   color: #fff;
-  /* background-color: black; */
   font-weight: 600 !important;
 }
-a.single.active{
+
+a.single.active {
   border-left: 2px solid #fff;
   background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
 }
+
 .chakra-accordion__item.css-1t7rcca:has(.active) {
   background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
   border-left: 2px solid #fff;
 }
-.chakra-accordion__item .link:hover{
+
+/* .chakra-accordion__item .link:hover{
   background:transparent !important;
-}
+} */
 .link {
   text-decoration: none;
   transition: all 0.2s ease-in-out;
@@ -81,9 +97,11 @@ a.single.active{
 .web-text-small {
   font-size: 12px !important;
 }
+
 .web-text-xxsmall {
   font-size: 9px !important;
 }
+
 .web-text-xsmall {
   font-size: 11px !important;
 }
@@ -117,15 +135,18 @@ a.single.active{
 }
 
 .greeting {
-  text-decoration: none; /* Remove underline */
+  text-decoration: none;
-  font-weight: bold; /* Optionally change font weight for active link */
+  /* Remove underline */
-  background: linear-gradient(
+  font-weight: bold;
-    to right,
+  /* Optionally change font weight for active link */
-    #7a45fb,
+  background: linear-gradient(to right,
-    #de41b5
+      #7a45fb,
-  ); /* Gradient background */
+      #de41b5);
-  -webkit-background-clip: text; /* Clip text to the background area */
+  /* Gradient background */
-  -webkit-text-fill-color: transparent; /* Fill text with the background color */
+  -webkit-background-clip: text;
+  /* Clip text to the background area */
+  -webkit-text-fill-color: transparent;
+  /* Fill text with the background color */
   transition: all 0.3s ease-in-out;
 }
 
@@ -146,15 +167,14 @@ a.single.active{
   color: #000;
   font-weight: 700;
   right: 110px;
-  background-image: radial-gradient(
+  background-image: radial-gradient(circle,
-    circle,
+      #ffffff,
-    #ffffff,
+      #eee2f2,
-    #eee2f2,
+      #e7c3dc,
-    #e7c3dc,
+      #e5a3ba,
-    #e5a3ba,
+      #de858e);
-    #de858e
-  );
 }
+
 .team-slider .swiper-button-prev:after {
   position: absolute;
   top: 185px;
@@ -168,14 +188,12 @@ a.single.active{
   color: #000;
   font-weight: 700;
   left: 110px;
-  background-image: radial-gradient(
+  background-image: radial-gradient(circle,
-    circle,
+      #ffffff,
-    #ffffff,
+      #eee2f2,
-    #eee2f2,
+      #e7c3dc,
-    #e7c3dc,
+      #e5a3ba,
-    #e5a3ba,
+      #de858e);
-    #de858e
-  );
 }
 
 .text-animate {
@@ -184,7 +202,7 @@ a.single.active{
   animation-iteration-count: 1;
 }
 
-.table-scroll::-webkit-scrollbar{
+.table-scroll::-webkit-scrollbar {
   width: 2px !important;
   height: 10px !important;
 }
@@ -224,6 +242,7 @@ a.single.active{
   right: 0;
   opacity: 0.1;
 }
+
 .goog-te-banner-frame {
   display: none;
 }
@@ -231,9 +250,11 @@ a.single.active{
 .goog-te-banner-frame.skiptranslate {
   display: none !important;
 }
+
 .goog-logo-link {
   display: none !important;
 }
+
 .goog-te-gadget {
   color: transparent !important;
 }
@@ -244,14 +265,17 @@ a.single.active{
     color: #DE858E;
     /* margin-bottom: -40px; */
   }
+
   30% {
     letter-spacing: 10px;
     /* margin-bottom: -40px; */
   }
+
   85% {
     letter-spacing: 8px;
     /* margin-bottom: -40px; */
   }
+
   100% {
     /* margin-bottom: 20px; */
   }
@@ -265,6 +289,7 @@ a.single.active{
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -276,6 +301,7 @@ a.single.active{
   width: 64px;
   height: 10px;
 }
+
 .lds-ellipsis div {
   position: absolute;
   width: 10px;
@@ -284,42 +310,52 @@ a.single.active{
   background: #fff;
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
+
 .lds-ellipsis div:nth-child(1) {
   left: 6px;
   animation: lds-ellipsis1 0.6s infinite;
 }
+
 .lds-ellipsis div:nth-child(2) {
   left: 6px;
   animation: lds-ellipsis2 0.6s infinite;
 }
+
 .lds-ellipsis div:nth-child(3) {
   left: 26px;
   animation: lds-ellipsis2 0.6s infinite;
 }
+
 .lds-ellipsis div:nth-child(4) {
   left: 45px;
   animation: lds-ellipsis3 0.6s infinite;
 }
+
 @keyframes lds-ellipsis1 {
   0% {
     transform: scale(0);
   }
+
   100% {
     transform: scale(1);
   }
 }
+
 @keyframes lds-ellipsis3 {
   0% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0);
   }
 }
+
 @keyframes lds-ellipsis2 {
   0% {
     transform: translate(0, 0);
   }
+
   100% {
     transform: translate(19px, 0);
   }
@@ -368,7 +404,7 @@ a.single.active{
 
 
 
-/* From Uiverse.io by Nawsome */ 
+/* From Uiverse.io by Nawsome */
 .switch {
   display: block;
   background-color: black;
@@ -384,20 +420,20 @@ a.single.active{
   display: none;
 }
 
-.switch input:checked + .button {
+.switch input:checked+.button {
   transform: translateZ(20px) rotateX(25deg);
   box-shadow: 0 -10px 20px #ff1818;
 }
 
-.switch input:checked + .button .light {
+.switch input:checked+.button .light {
   animation: flicker 0.2s infinite 0.3s;
 }
 
-.switch input:checked + .button .shine {
+.switch input:checked+.button .shine {
   opacity: 1;
 }
 
-.switch input:checked + .button .shadow {
+.switch input:checked+.button .shadow {
   opacity: 0;
 }
 

src/Components/Doughnut/BarCharts.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import { Chart as ChartJS, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
+
+// Register components in Chart.js
+ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);
+
+const BarChart = () => {
+  // Data for the bar chart
+  const data = {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+    datasets: [
+      {
+        label: 'Sales',
+        data: [10, 40, 20, 50, 25, 45, 30, 10, 30, 50, 25, 60],
+        backgroundColor: '#7f3ad8',
+        borderColor: 'rgba(75, 192, 192, 1)',
+        borderWidth: 1,
+        borderRadius: 8,
+        width:"10px",
+      },
+    ],
+  };
+
+  // Options for the bar chart
+  const options = {
+    scales: {
+      x: {
+        barPercentage: 0.4, // Decrease this value to make bars narrower
+        categoryPercentage: 0.6, // Adjust this to control the space between categories
+      },
+      y: {
+        beginAtZero: true,
+        ticks: {
+          // Add 'k' to the labels
+          callback: function (value) {
+            return value + 'k';
+          },
+        },
+      },
+    },
+    plugins: {
+      tooltip: {
+        callbacks: {
+          // Customize the tooltip label
+          label: function (context) {
+            return context.raw + 'k';
+          },
+        },
+      },
+    },
+  };
+
+  return <Bar data={data} options={options} />;
+};
+
+export default BarChart;

src/Components/HeaderMain.jsx

@@ -12,6 +12,7 @@ import {
   PopoverArrow,
   PopoverBody,
   PopoverContent,
+  PopoverFooter,
   PopoverTrigger,
   Portal,
   Text,
@@ -26,28 +27,39 @@ import GlobalStateContext from "../Contexts/GlobalStateContext";
 import mainLogo from "../assets/optifii_logo.svg";
 import PrimaryButton from "./Buttons/PrimaryButton";
 import Notifications from "../Pages/Notifications/Notifications";
+import { FaRegUser } from "react-icons/fa6";
+import { BiLogOut } from "react-icons/bi";
+import Cookies from "js-cookie"; // Import the Cookies library
 
 const HeaderMain = ({
-  logOutHandler,
   slideDirecttion,
   isDrawerOpen,
   toggleDrawer,
 }) => {
   const navigate = useNavigate();
-  const { image } = useContext(GlobalStateContext);
+  const { image, setIsAuthenticate } = useContext(GlobalStateContext);
   const [searchTerm, setSearchTerm] = useState("");
 
+
+  const logOutHandler = () => {
+    setIsAuthenticate(false);
+    Cookies.remove("isAuthenticated");
+    localStorage.removeItem("refreshToken");
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("refreshTokenExp");
+    navigate("/");
+  };
+
   // For controlling the modal
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
     <Box
       w={"100%"}
-      h={{ base: "8%", xl: "6%" }}
+      h={{ base: "8%", xl: "9%" }}
       position={"relative"}
-      className={`pt-2 pb-2 fw-400 border-bottom d-flex ${
+      className={`pt-2 pb-2 fw-400 border-bottom d-flex ${slideDirecttion ? "ps-2" : ""
-        slideDirecttion ? "ps-2" : ""
+        } justify-content-between align-items-center`}
-      } justify-content-between align-items-center`}
       zIndex={999}
     >
       <Box display={"flex"} alignItems={"center"}>
@@ -93,7 +105,7 @@ const HeaderMain = ({
       <Box display={"flex"} justifyContent={"space-between"}>
         <Box display={"flex"} gap={2}>
           <Box className="header-icon" display={"flex"} gap={2} alignItems={"center"} me={10}>
-          <NavLink
+            <NavLink
               to="/contact-us"
               style={({ isActive }) => ({
                 borderBottom: isActive ? '1px solid #3725EA' : 'none',
@@ -136,6 +148,27 @@ const HeaderMain = ({
                     </Text>
                     <PrimaryButton onClick={() => navigate("/profile")} title={"View Profile"} />
                   </PopoverBody>
+                  <PopoverFooter border={"none"} pt={0} mb={4}>
+                    <HStack pl={6} spacing={1} cursor={"pointer"} w="fit-content" >
+                      <FaRegUser size={"16"} color="#666666" />
+                      <Text as={"span"} fontSize={"sm"} color={"#666666"} fontWeight={500} mb={0}>
+                        View as Admin
+                      </Text>
+                    </HStack>
+                    <HStack
+                      mt={2}
+                      pl={6}
+                      spacing={1}
+                      onClick={logOutHandler}
+                      cursor={"pointer"}
+                      w="fit-content" 
+                    >
+                      <BiLogOut size={"16"} color="#666666" />
+                      <Text as={"span"} fontSize={"sm"} color={"#666666"} fontWeight={500} mb={0}>
+                        Logout
+                      </Text>
+                    </HStack>
+                  </PopoverFooter>
                 </PopoverContent>
               </Portal>
 
@@ -164,4 +197,3 @@ const HeaderMain = ({
 };
 
 export default HeaderMain;
- 

src/Components/PayCards/Platinium.jsx

@@ -81,7 +81,7 @@ const Platinium = () => {
       </VStack>
 
       <Box width={"100%"} display={"flex"} justifyContent={"space-between"}>
-        <Image  src={platinum} />
+        <Image w={12}  src={platinum} />
         <Image w={24} src={RuPay} me={0.5} />
       </Box>
 

src/Components/PayCards/PlatiniumGift.jsx

@@ -87,7 +87,7 @@ const PlatiniumGift = () => {
 
       <Box 
         zIndex={9} width={"100%"} display={"flex"} justifyContent={"space-between"}>
-        <Image  src={platinum} />
+        <Image  w={12} src={platinum} />
         <Image w={24} src={RuPay} me={0.5} />
       </Box>
 

src/Contexts/GlobalStateProvider.jsx

@@ -51,7 +51,8 @@ const GlobalStateProvider = ({ children }) => {
   const [reportsHistory, setReportsHistory] = useState([
     {
       "id": 1,
-      "name": "Office Supplies - July 2024",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
       "lastUpdated": "31-07-2024 10:15 am",
       "reportType": "Expense",
       "totalExpense": 350.75,
@@ -59,7 +60,8 @@ const GlobalStateProvider = ({ children }) => {
     },
     {
       "id": 2,
-      "name": "Travel Reimbursement - Q2 2024",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
       "lastUpdated": "15-08-2024 02:45 pm",
       "reportType": "Expense",
       "totalExpense": 1250.00,
@@ -67,7 +69,8 @@ const GlobalStateProvider = ({ children }) => {
     },
     {
       "id": 3,
-      "name": "Client Meeting Expenses - August 2024",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
       "lastUpdated": "28-08-2024 09:30 am",
       "reportType": "Expense",
       "totalExpense": 600.50,
@@ -75,7 +78,8 @@ const GlobalStateProvider = ({ children }) => {
     },
     {
       "id": 4,
-      "name": "Marketing Campaign - Q3 2024",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
       "lastUpdated": "10-09-2024 11:00 am",
       "reportType": "Expense",
       "totalExpense": 2300.00,
@@ -83,136 +87,136 @@ const GlobalStateProvider = ({ children }) => {
     },
     {
       "id": 5,
-      "name": "Team Building Event - September 2024",
+      "name": "Reimbursement",
-      "lastUpdated": "22-09-2024 04:20 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "22-09-2024 04:20 pm",
       "reportType": "Expense",
       "totalExpense": 800.00,
       "status": "Fully Reimbursed"
     },
     {
       "id": 6,
-      "name": "Office Renovation - Phase 1",
+      "name": "Reimbursement",
-      "lastUpdated": "30-09-2024 03:10 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "30-09-2024 03:10 pm",
       "reportType": "Expense",
       "totalExpense": 4500.00,
       "status": "Saved"
     },
     {
       "id": 7,
-      "name": "Software Licenses - 2024 Renewal",
+      "name": "Reimbursement",
-      "lastUpdated": "05-10-2024 01:50 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "05-10-2024 01:50 pm",
       "reportType": "Expense",
       "totalExpense": 3200.00,
       "status": "Saved"
     },
     {
       "id": 8,
-      "name": "Conference Attendance - October 2024",
+      "name": "Reimbursement",
-      "lastUpdated": "15-10-2024 09:00 am",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-10-2024 09:00 am",
       "reportType": "Expense",
       "totalExpense": 1500.00,
       "status": "Partially Reimbursed"
     },
     {
       "id": 9,
-      "name": "Holiday Party - December 2024",
+      "name": "Reimbursement",
-      "lastUpdated": "20-12-2024 05:30 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "20-12-2024 05:30 pm",
       "reportType": "Expense",
       "totalExpense": 2500.00,
       "status": "Saved"
     },
     {
       "id": 10,
-      "name": "Client Gifts - End of Year 2024",
+      "name": "Reimbursement",
-      "lastUpdated": "31-12-2024 02:00 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "31-12-2024 02:00 pm",
       "reportType": "Expense",
       "totalExpense": 1200.00,
       "status": "Approved"
     },
     {
       "id": 11,
-      "name": "Training Programs - January 2025",
+      "name": "Reimbursement",
-      "lastUpdated": "15-01-2025 10:30 am",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-01-2025 10:30 am",
       "reportType": "Expense",
       "totalExpense": 900.00,
       "status": "Saved"
     },
     {
       "id": 7,
-      "name": "Software Licenses - 2024 Renewal",
+      "name": "Reimbursement",
-      "lastUpdated": "05-10-2024 01:50 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "05-10-2024 01:50 pm",
       "reportType": "Expense",
       "totalExpense": 3200.00,
       "status": "Saved"
     },
     {
       "id": 8,
-      "name": "Conference Attendance - October 2024",
+      "name": "Reimbursement",
-      "lastUpdated": "15-10-2024 09:00 am",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-10-2024 09:00 am",
       "reportType": "Expense",
       "totalExpense": 1500.00,
       "status": "Partially Reimbursed"
     },
     {
       "id": 9,
-      "name": "Holiday Party - December 2024",
+      "name": "Reimbursement",
-      "lastUpdated": "20-12-2024 05:30 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "20-12-2024 05:30 pm",
       "reportType": "Expense",
       "totalExpense": 2500.00,
       "status": "Saved"
     },
     {
       "id": 10,
-      "name": "Client Gifts - End of Year 2024",
+      "name": "Reimbursement",
-      "lastUpdated": "31-12-2024 02:00 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "31-12-2024 02:00 pm",
       "reportType": "Expense",
       "totalExpense": 1200.00,
       "status": "Approved"
     },
     {
       "id": 11,
-      "name": "Training Programs - January 2025",
+      "name": "Reimbursement",
-      "lastUpdated": "15-01-2025 10:30 am",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-01-2025 10:30 am",
       "reportType": "Expense",
       "totalExpense": 900.00,
       "status": "Saved"
     },
     {
       "id": 7,
-      "name": "Software Licenses - 2024 Renewal",
+      "name": "Reimbursement",
-      "lastUpdated": "05-10-2024 01:50 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "05-10-2024 01:50 pm",
       "reportType": "Expense",
       "totalExpense": 3200.00,
       "status": "Saved"
     },
     {
       "id": 8,
-      "name": "Conference Attendance - October 2024",
+      "name": "Reimbursement",
-      "lastUpdated": "15-10-2024 09:00 am",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-10-2024 09:00 am",
       "reportType": "Expense",
       "totalExpense": 1500.00,
       "status": "Partially Reimbursed"
     },
     {
       "id": 9,
-      "name": "Holiday Party - December 2024",
+      "name": "Reimbursement",
-      "lastUpdated": "20-12-2024 05:30 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "20-12-2024 05:30 pm",
       "reportType": "Expense",
       "totalExpense": 2500.00,
       "status": "Saved"
     },
     {
       "id": 10,
-      "name": "Client Gifts - End of Year 2024",
+      "name": "Reimbursement",
-      "lastUpdated": "31-12-2024 02:00 pm",
+      "reportFor": "Report for June 2024", "lastUpdated": "31-12-2024 02:00 pm",
       "reportType": "Expense",
       "totalExpense": 1200.00,
       "status": "Approved"
     },
     {
       "id": 11,
-      "name": "Training Programs - January 2025",
+      "name": "Reimbursement",
-      "lastUpdated": "15-01-2025 10:30 am",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-01-2025 10:30 am",
       "reportType": "Expense",
       "totalExpense": 900.00,
       "status": "Saved"
@@ -220,6 +224,55 @@ const GlobalStateProvider = ({ children }) => {
   ]
   )
 
+  const [reportsHistoryMini, setReportsHistoryMini] = useState([
+    {
+      "id": 1,
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Approved"
+    },
+    {
+      "id": 2,
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Rejected"
+    },
+    {
+      "id": 3,
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Approved"
+    },
+    {
+      "id": 4,
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Rejected"
+    },
+    {
+      "id": 5,
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Approved"
+    },
+  ]
+  )
+
 
 
   const [requestsTable, setRequestTable] = useState([
@@ -384,8 +437,9 @@ const GlobalStateProvider = ({ children }) => {
         reportsHistory,
         setReportsHistory,
         requestsTable,
-        setRequestTable, image, setImage, 
+        setRequestTable, image, setImage,
-        walletTable,setWalletTable,
+        walletTable, setWalletTable,
+        reportsHistoryMini, setReportsHistoryMini
       }}
     >
       {children}

src/Layout/DefaultLayout.jsx

@@ -442,7 +442,7 @@ const DashboardLayout = ({ isOnline }) => {
                                 }  d-flex align-items-center  p-0`}
                               >
                                 <NavLink
-                                  style={{ borderRadius: "2px" }}
+                                  style={{ borderRadius: "4px" }}
                                   className={`${
                                     true
                                       ? "p-2 ps-1 ms-2 web-text-medium "

src/Pages/ContactUs/ContactUs.jsx

@@ -19,8 +19,7 @@ const ContactUs = () => {
                 boxShadow={'sm'}
                 p={8}
             >
-
+                <HStack gap={12} alignItems={"center"} flexWrap={"wrap"} justify={"center"}>
-                <HStack gap={12} alignItems={"flex-start"} flexWrap={"wrap"} justify={"center"}>
 
                     <Box>
                         <Box
@@ -41,9 +40,10 @@ const ContactUs = () => {
                     </Box>
 
                     <Box w={"50%"} pl={16}>
-                        <ContactUsField label="Subject" placeholder="Enter your name" defaultValue="" />
+                    <Text fontWeight={600} fontSize={"xl"} textAlign={"center"} mb={6}>Get in touch</Text>
-                        <ContactUsField label="Email ID" placeholder="Enter your email" defaultValue="" />
+                        <ContactUsField label="Subject" placeholder="Subject" defaultValue="" />
-                        <ContactUsField label="Your Message" placeholder="Enter your message" defaultValue="" isTextarea />
+                        <ContactUsField label="Email ID" placeholder="Email ID" defaultValue="" />
+                        <ContactUsField label="Your Message" placeholder="Type your message here..." defaultValue="" isTextarea />
                         <PrimaryButton title={'Send'} width="100%" />
                     </Box>
                 </HStack>

src/Pages/Expenses/RequestReimbursement.jsx

@@ -284,6 +284,7 @@ const RequestReimbursement = () => {
                 <HStack mt={6} justifyContent={"center"}>
                     <PrimaryButton title={"Request Reimbursement"} />
                 </HStack>
+                
             </Box>
 
 

src/Pages/Gifts/VouchersTab.jsx

@@ -1,5 +1,5 @@
 import { Button } from "@chakra-ui/button";
-import { Search2Icon } from "@chakra-ui/icons";
+import { ChevronDownIcon, Search2Icon } from "@chakra-ui/icons";
 import { Input, InputGroup, InputLeftElement } from "@chakra-ui/input";
 import { Box, HStack, VStack } from "@chakra-ui/layout";
 import React, { useState } from "react";
@@ -12,6 +12,8 @@ import optifii_purple from '../../assets/optifii_purple.svg'
 import bewakoof from '../../assets/bewakoof.svg'
 import nyka from '../../assets/nyka.svg'
 import hAndm from '../../assets/h&m.svg'
+import { Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
+import { LuArrowDownWideNarrow, LuListFilter } from "react-icons/lu";
 
 const VouchersTab = () => {
   const [activeTab, setActiveTab] = useState("My Voucher"); // Set default active tab
@@ -19,88 +21,88 @@ const VouchersTab = () => {
 
   const brandData = [
     {
-      brandLogo:gap,
+      brandLogo: gap,
-      brandColor:"#002A5F",
+      brandColor: "#002A5F",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_white,
+      optifiiLogo: optifii_white,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:bewakoof,
+      brandLogo: bewakoof,
-      brandColor:"#FFB819",
+      brandColor: "#FFB819",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_white,
+      optifiiLogo: optifii_white,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:nyka,
+      brandLogo: nyka,
-      brandColor:"#FD2679",
+      brandColor: "#FD2679",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_white,
+      optifiiLogo: optifii_white,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:hAndm,
+      brandLogo: hAndm,
-      brandColor:"#ffffff",
+      brandColor: "#ffffff",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_purple,
+      optifiiLogo: optifii_purple,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:hAndm,
+      brandLogo: hAndm,
-      brandColor:"#ffffff",
+      brandColor: "#ffffff",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_purple,
+      optifiiLogo: optifii_purple,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:gap,
+      brandLogo: gap,
-      brandColor:"#002A5F",
+      brandColor: "#002A5F",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_white,
+      optifiiLogo: optifii_white,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:bewakoof,
+      brandLogo: bewakoof,
-      brandColor:"#FFB819",
+      brandColor: "#FFB819",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_white,
+      optifiiLogo: optifii_white,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:nyka,
+      brandLogo: nyka,
-      brandColor:"#FD2679",
+      brandColor: "#FD2679",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_white,
+      optifiiLogo: optifii_white,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:nyka,
+      brandLogo: nyka,
-      brandColor:"#FD2679",
+      brandColor: "#FD2679",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_white,
+      optifiiLogo: optifii_white,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:hAndm,
+      brandLogo: hAndm,
-      brandColor:"#ffffff",
+      brandColor: "#ffffff",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_purple,
+      optifiiLogo: optifii_purple,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:gap,
+      brandLogo: gap,
-      brandColor:"#002A5F",
+      brandColor: "#002A5F",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_white,
+      optifiiLogo: optifii_white,
-      patternColor:""
+      patternColor: ""
     },
     {
-      brandLogo:bewakoof,
+      brandLogo: bewakoof,
-      brandColor:"#FFB819",
+      brandColor: "#FFB819",
-      cardWorth:"10,000",
+      cardWorth: "10,000",
-      optifiiLogo:optifii_white,
+      optifiiLogo: optifii_white,
-      patternColor:""
+      patternColor: ""
     },
   ]
 
@@ -165,6 +167,7 @@ const VouchersTab = () => {
               </InputGroup>
               <Button
                 size={"sm"}
+                rightIcon={<ChevronDownIcon />}
                 variant={"outline"}
                 rounded={"md"}
                 fontWeight={500}
@@ -175,6 +178,7 @@ const VouchersTab = () => {
               </Button>
               <Button
                 size={"sm"}
+                rightIcon={<LuArrowDownWideNarrow color="#3725EA"/>}
                 variant={"outline"}
                 rounded={"md"}
                 fontWeight={500}

src/Pages/Home/Home.jsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
-import { Box, HStack, Text, VStack } from "@chakra-ui/layout";
+import { Box, Divider, HStack, Text, VStack } from "@chakra-ui/layout";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import RupayCard from "../../Components/PayCards/RupayCard";
 import Platinium from "../../Components/PayCards/Platinium";
@@ -9,8 +9,138 @@ import { HiOutlineCreditCard } from "react-icons/hi2";
 import { Progress } from "@chakra-ui/progress";
 import { Icon } from "@chakra-ui/icon";
 import { ArrowForwardIcon } from "@chakra-ui/icons";
+import { Select } from "@chakra-ui/react";
+import BarChart from "../../Components/Doughnut/BarCharts";
+import { BiWalletAlt } from "react-icons/bi";
+import { MdOutlineRamenDining } from "react-icons/md";
+import {
+  Button,
+  Radio,
+  Tag,
+  TagLabel,
+  useDisclosure,
+} from "@chakra-ui/react";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiScrollLight } from "react-icons/pi";
+import { useNavigate } from "react-router-dom";
+
 
 const Home = () => {
+
+  const { reportsHistoryMini } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Set isLoading to true
+    setIsLoading(true);
+
+    // Simulate a 3-second delay
+    const timer = setTimeout(() => {
+      setIsLoading(false); // Set isLoading to false after 3 seconds
+    }, 500);
+
+    // Cleanup the timer when the component unmounts or when the useEffect re-runs
+    return () => clearTimeout(timer);
+  }, []); // Empty dependency array means this effect runs once after the component mounts
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Name",
+    "Last Update",
+    "Report type",
+    "Total Expense",
+    "Status",
+  ];
+
+
+
+  const extractedArray = reportsHistoryMini.map((item, index) => ({
+    Name: <HStack>
+      <Icon as={PiScrollLight} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />
+
+      <Box>
+        <Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
+          {item?.name}
+        </Text>
+        <Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
+          {item?.reportFor}
+        </Text>
+      </Box>
+    </HStack>
+    ,
+    "Last Update":
+      item?.lastUpdated,
+    "Report type": item?.reportType,
+    "Total Expense": item?.totalExpense,
+    Status: (
+      <Tag
+        my={1}
+        size="sm"
+        borderRadius="full"
+        color={item?.status === "Approved" ? "green.500" : item?.status === "Rejected" ? "red.500" : "gray.500"}
+        border={`1px solid ${item?.status === "Approved" ? "green.500" : item?.status === "Rejected" ? "red.500" : "gray.500"}`}
+        bg={item?.status === "Approved" ? "green.100" : item?.status === "Rejected" ? "red.100" : "gray.100"}
+        p={1}
+        px={3}
+      >
+        <TagLabel>{item?.status}</TagLabel>
+      </Tag>
+
+    ),
+
+  }));
+
+  const transactions = [
+    {
+      id: 1,
+      type: 'Dine In',
+      icon: BiWalletAlt,
+      date: '22 March 2024 - 01:12 PM',
+      amount: '+ $500',
+      color: 'green.500',
+    },
+    {
+      id: 2,
+      type: 'Takeaway',
+      icon: MdOutlineRamenDining, // Replace with appropriate icon if needed
+      date: '21 March 2024 - 05:45 PM',
+      amount: '+ $200',
+      color: 'green.500',
+    },
+    {
+      id: 3,
+      type: 'Delivery',
+      icon: BiWalletAlt, // Replace with appropriate icon if needed
+      date: '20 March 2024 - 11:30 AM',
+      amount: '- $50',
+      color: 'red.500',
+    },
+    {
+      id: 3,
+      type: 'Delivery',
+      icon: BiWalletAlt, // Replace with appropriate icon if needed
+      date: '20 March 2024 - 11:30 AM',
+      amount: '- $50',
+      color: 'red.500',
+    },
+    {
+      id: 2,
+      type: 'Takeaway',
+      icon: MdOutlineRamenDining, // Replace with appropriate icon if needed
+      date: '21 March 2024 - 05:45 PM',
+      amount: '+ $200',
+      color: 'green.500',
+    },
+    // Add more objects as needed
+  ];
+
+
   return (
     <Box {...OPACITY_ON_LOAD} p={4} overflowX={"auto"}>
       <MiniHeader
@@ -18,144 +148,219 @@ const Home = () => {
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
       />
 
-      <HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4} mb={4}>
+      <Box>
-        <VStack
+        <HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4} mb={4}>
-          gap={4}
-          height={"100%"}
-          justifyContent={"space-between"}
-          p={0}
-          flexGrow={1}
-        >
-          {/* ==================[ Balance Available ]=============== */}
           <VStack
-            w={"100%"}
+            gap={4}
-            p={4}
+            height={"100%"}
-            bg={"#fff"}
+            justifyContent={"space-between"}
-            h={"65%"}
+            p={0}
-            shadow={"md"}
+            flexGrow={1}
-            rounded={"lg"}
           >
+            {/* ==================[ Balance Available ]=============== */}
             <VStack
               w={"100%"}
-              alignItems={"start"}
+              p={4}
-              justifyContent={"space-between"}
+              bg={"#fff"}
-              h={"100%"}
+              h={"65%"}
+              shadow={"md"}
+              rounded={"lg"}
             >
-              <HStack alignSelf={"start"} bg={"#F3F3F9"} p={2} rounded={"md"}>
+              <VStack
-                <Text
-                  bgGradient="linear(to-l, #3725EA, #5E0FCD)"
-                  bgClip="text"
-                  as="span"
-                  fontSize={"sm"}
-                  fontWeight={500}
-                >
-                  Balance Available
-                </Text>
-                <Text
-                  color={"gray.800"}
-                  as="span"
-                  fontSize={"sm"}
-                  fontWeight={500}
-                >
-                  {" "}
-                  $ 1,00,000
-                </Text>
-              </HStack>
-
-              <HStack w={"100%"} justifyContent={"space-between"}>
-                <VStack alignItems={"start"} gap={0}>
-                  <Text
-                    fontWeight={500}
-                    as={"span"}
-                    fontSize={"xs"}
-                    color={"gray.500"}
-                  >
-                    Spend
-                  </Text>
-                  <Text fontWeight={500} as={"span"} fontSize={"sm"}>
-                    $ 50,000
-                  </Text>
-                </VStack>
-
-                <VStack alignItems={"end"} gap={0}>
-                  <Text
-                    fontWeight={500}
-                    as={"span"}
-                    fontSize={"xs"}
-                    color={"gray.500"}
-                  >
-                    Money in wallet
-                  </Text>
-                  <Text fontWeight={500} as={"span"} fontSize={"sm"}>
-                    $ 50,000
-                  </Text>
-                </VStack>
-              </HStack>
-
-              <Progress
                 w={"100%"}
-                sx={{
+                alignItems={"start"}
-                  "& > div": {
+                justifyContent={"space-between"}
-                    backgroundImage: "linear-gradient(90deg, #6311CB, #a71c71)",
+                h={"100%"}
-                  },
+              >
-                }}
+                <HStack alignSelf={"start"} bg={"#F3F3F9"} p={2} rounded={"md"}>
-                rounded={"full"}
+                  <Text
-                size="sm"
+                    bgGradient="linear(to-l, #3725EA, #5E0FCD)"
-                value={80}
+                    bgClip="text"
-              />
+                    as="span"
+                    fontSize={"sm"}
+                    fontWeight={500}
+                  >
+                    Balance Available
+                  </Text>
+                  <Text
+                    color={"gray.800"}
+                    as="span"
+                    fontSize={"sm"}
+                    fontWeight={500}
+                  >
+                    {" "}
+                    $ 1,00,000
+                  </Text>
+                </HStack>
 
-              <HStack w={"100%"} justifyContent={"end"}>
+                <HStack w={"100%"} justifyContent={"space-between"}>
-                <Text color={"gray.500"} fontSize={"sm"} fontWeight={500}>
+                  <VStack alignItems={"start"} gap={0}>
-                  80%
+                    <Text
-                </Text>
+                      fontWeight={500}
-              </HStack>
+                      as={"span"}
+                      fontSize={"xs"}
+                      color={"gray.500"}
+                    >
+                      Spend
+                    </Text>
+                    <Text fontWeight={500} as={"span"} fontSize={"sm"}>
+                      $ 50,000
+                    </Text>
+                  </VStack>
+
+                  <VStack alignItems={"end"} gap={0}>
+                    <Text
+                      fontWeight={500}
+                      as={"span"}
+                      fontSize={"xs"}
+                      color={"gray.500"}
+                    >
+                      Money in wallet
+                    </Text>
+                    <Text fontWeight={500} as={"span"} fontSize={"sm"}>
+                      $ 50,000
+                    </Text>
+                  </VStack>
+                </HStack>
+
+                <Progress
+                  w={"100%"}
+                  sx={{
+                    "& > div": {
+                      backgroundImage: "linear-gradient(90deg, #6311CB, #a71c71)",
+                    },
+                  }}
+                  rounded={"full"}
+                  size="sm"
+                  value={80}
+                />
+
+                <HStack w={"100%"} justifyContent={"end"}>
+                  <Text color={"gray.500"} fontSize={"sm"} fontWeight={500}>
+                    80%
+                  </Text>
+                </HStack>
+              </VStack>
             </VStack>
+
+            {/* ==================[ Apply for physical card ]=============== */}
+            <HStack
+              border={"1px solid #3725EA"}
+              bg={"#F8F2FF"}
+              h={"35%"}
+              w={"100%"}
+              shadow={"md"}
+              rounded={"lg"}
+              p={3}
+              justifyContent={"space-evenly"}
+            >
+              <Icon
+                boxSize={12}
+                p={2.5}
+                backgroundImage="linear-gradient(to left, #5E0FCD, #3725EA)"
+                color={"#fff"}
+                rounded={"full"}
+                as={HiOutlineCreditCard}
+              />
+              <VStack gap={0} alignItems={"start"} w={290} px={2}>
+                <Text as={"span"} fontWeight={500} fontSize={"md"}>
+                  Apply for physical card
+                </Text>
+                <Text as={"span"} color={"gray.500"} fontSize={"xs"}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                </Text>
+              </VStack>
+
+              <Icon
+                boxSize={7}
+                p={1}
+                border={"1px solid #3725EA"}
+                color={"#3725EA"}
+                rounded={"full"}
+                as={ArrowForwardIcon}
+              />
+            </HStack>
           </VStack>
 
-          {/* ==================[ Apply for physical card ]=============== */}
+          {/* ==================[ Pay Cards ]=============== */}
-          <HStack
+          <Platinium />
-            border={"1px solid #3725EA"}
+          <RupayCard />
-            bg={"#F8F2FF"}
+          <PlatiniumGift />
-            h={"35%"}
+        </HStack>
-            w={"100%"}
+      </Box>
-            shadow={"md"}
-            rounded={"lg"}
-            p={3}
-            justifyContent={"space-evenly"}
-          >
-            <Icon
-              boxSize={12}
-              p={2.5}
-              backgroundImage="linear-gradient(to left, #5E0FCD, #3725EA)"
-              color={"#fff"}
-              rounded={"full"}
-              as={HiOutlineCreditCard}
-            />
-            <VStack gap={0} alignItems={"start"} w={290} px={2}>
-              <Text as={"span"} fontWeight={500} fontSize={"md"}>
-                Apply for physical card
-              </Text>
-              <Text as={"span"} color={"gray.500"} fontSize={"xs"}>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              </Text>
-            </VStack>
 
-            <Icon
+      <HStack alignItems={"start"} spacing={4}>
-              boxSize={7}
+
-              p={1}
+        <Box flex={1} rounded={"md"} mb={4} p={4} bg={"#fff"}>
-              border={"1px solid #3725EA"}
+          <HStack justifyContent={"space-between"}>
-              color={"#3725EA"}
+            <Text as={"span"} fontSize={"md"} fontWeight={600}>
-              rounded={"full"}
+              Wallet history
-              as={ArrowForwardIcon}
+            </Text>
-            />
+            <HStack>
+              <Select placeholder="Monthly" size={"sm"} rounded={"md"}>
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
+              </Select>
+            </HStack>
           </HStack>
-        </VStack>
+          <BarChart />
+        </Box>
+
+        <Box w={"35%"} h={400} rounded={"md"} mb={4} p={4} bg={"#fff"}>
+          <HStack justifyContent={"space-between"}>
+            <Text as={"span"} fontSize={"md"} fontWeight={600}>
+              Wallet history
+            </Text>
+            <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#818181"}>
+              See All
+            </Text>
+          </HStack>
+          <Box>
+            <VStack pt={3}>
+              {transactions?.map(({ id, type, icon, date, amount, color }) => <HStack id={id} bg={''} mb={2} alignItems={'center'} w={'100%'} justifyContent={'space-between'}>
+                <HStack  >
+                  <Icon color={'gray.800'} boxSize={10} rounded={'full'} p={2} bg={'#F6F6F6'} as={icon} />
+
+                  <VStack alignItems={'start'} gap={0}>
+                    <Text as={'span'} fontWeight={500} fontSize={'sm'} >{type}</Text>
+                    <Text as={'span'} fontWeight={500} color={'gray.500'} fontSize={'xs'} >{date}</Text>
+                  </VStack>
+                </HStack>
+
+                <Text me={2} fontSize={'sm'} fontWeight={500} as={'span'} color={color}>{amount}</Text>
+
+              </HStack>)}
+            </VStack>
+          </Box>
+        </Box>
 
-        {/* ==================[ Pay Cards ]=============== */}
-        <Platinium />
-        <RupayCard />
-        <PlatiniumGift />
       </HStack>
+
+      <Box
+        rounded={"md"}
+        p={4}
+        bg={"#fff"}
+        shadow={"md"}
+      >
+        <HStack justifyContent={"space-between"} mb={4}>
+          <Text fontSize={"lg"} fontWeight={600} mb={0}>
+            Reports
+          </Text>
+          <Text
+            onClick={() => navigate("/reports/history")}
+            as={"span"} fontSize={"sm"} fontWeight={500} color={"#818181"} cursor={"pointer"}>
+            See All
+          </Text>
+        </HStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+      </Box>
+
     </Box>
   );
 };

src/Pages/Profile/Profile.jsx

@@ -6,7 +6,7 @@ import { OPACITY_ON_LOAD } from '../../Layout/animations';
 import { AiOutlineEdit } from "react-icons/ai";
 import { BiCloudUpload } from "react-icons/bi";
 import { RxLockClosed } from "react-icons/rx";
-import { RiArrowRightSLine } from "react-icons/ri";
+import { RiArrowRightSLine, RiRotateLockLine } from "react-icons/ri";
 import { GoArrowSwitch } from "react-icons/go";
 import DisplayProfile from './DisplayProfile';
 import SwitchProfileModal from './SwitchProfileModal';
@@ -94,7 +94,7 @@ const Profile = () => {
                         bg={"#fff"}
                         justify={"center"}
                     >
-                        <RxLockClosed color='#6311CB' />
+                        <RiRotateLockLine  color='#6311CB' />
                     </HStack>
                     <Text
                         color={"#383838"}

src/Pages/Report/Report.jsx

@@ -4,6 +4,9 @@ import {
   Divider,
   HStack,
   Icon,
+  Input,
+  InputGroup,
+  InputLeftElement,
   Radio,
   Tag,
   TagLabel,
@@ -15,13 +18,13 @@ import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import NormalTable from "../../Components/DataTable/NormalTable";
-import { CalendarIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
+import { CalendarIcon, EmailIcon, SearchIcon, ViewIcon } from "@chakra-ui/icons";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
 import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
 import { AiOutlineEdit } from "react-icons/ai";
 import { FaRegEye } from "react-icons/fa";
-import { PiReceipt } from "react-icons/pi";
+import { PiReceipt, PiScrollLight } from "react-icons/pi";
 import AddReportModal from "../Requests/AddReportModal";
 import PrimaryButton from "../../Components/Buttons/PrimaryButton";
 
@@ -29,6 +32,8 @@ const Report = () => {
   const { reportsHistory } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const [searchTerm, setSearchTerm] = useState("");
+
 
   useEffect(() => {
     // Set isLoading to true
@@ -57,12 +62,12 @@ const Report = () => {
 
   const extractedArray = reportsHistory.map((item, index) => ({
     Name: <Radio colorScheme='purple' value='1'>
-      <Text as={'span'}  display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
+      <Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
-      
+
-    <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>
+        <Icon as={PiScrollLight} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>
     </Radio>
     ,
-    "Last Update": 
+    "Last Update":
       item?.lastUpdated,
     "Report type": item?.reportType,
     "Total Expense": item?.totalExpense,
@@ -75,28 +80,27 @@ const Report = () => {
           item?.status === "Approved"
             ? "green"
             : item?.status === "Fully Reimbursed"
-            ? "purple"
+              ? "purple"
-            : item?.status === "Disapproved"
+              : item?.status === "Disapproved"
-            ? "red"
+                ? "red"
-            : item?.status === "Saved"
+                : item?.status === "Saved"
-            ? "yellow"
+                  ? "yellow"
-            : item?.status === "Partially Reimbursed"
+                  : item?.status === "Partially Reimbursed"
-            ? "orange"
+                    ? "orange"
-            : "gray" // default color scheme if status doesn't match any condition
+                    : "gray" // default color scheme if status doesn't match any condition
         }
-        border={`1px solid ${
+        border={`1px solid ${item?.status === "Approved"
-          item?.status === "Approved"
+          ? "green"
-            ? "green"
+          : item?.status === "Fully Reimbursed"
-            : item?.status === "Fully Reimbursed"
             ? "purple"
             : item?.status === "Disapproved"
-            ? "red"
+              ? "red"
-            : item?.status === "Saved"
+              : item?.status === "Saved"
-            ? "orange"
+                ? "orange"
-            : item?.status === "Partially Reimbursed"
+                : item?.status === "Partially Reimbursed"
-            ? "orange"
+                  ? "orange"
-            : "gray" // default border color if status doesn't match any condition
+                  : "gray" // default border color if status doesn't match any condition
-        }`}
+          }`}
         p={1}
         px={3}
       >
@@ -110,13 +114,13 @@ const Report = () => {
         alignItems={"center"}
         justifyContent={"center"}
       >
-        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
+        <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
           <FaRegEye fontSize={"18px"} />
         </Button>
-        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
+        <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
           <AiOutlineEdit fontSize={"19px"} />
         </Button>
-        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
+        <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
           <RiDeleteBin5Line fontSize={"18px"} />
         </Button>
       </Box>
@@ -146,17 +150,34 @@ const Report = () => {
             Reports
           </Text>
           <HStack w={"100%"} justifyContent={"space-between"}>
-            <Button
+
-              fontWeight={500}
+
-              size={"sm"}
+            <HStack>
-              leftIcon={<CalendarIcon color={"purple.800"} />}
+              <InputGroup width={300} size="sm" >
-              colorScheme="gray"
+                <InputLeftElement pointerEvents="none">
-              color={"gray.700"}
+                  <SearchIcon color="gray.300" />
-              variant="outline"
+                </InputLeftElement>
-              fontSize={"xs"}
+                <Input
-            >
+                  type="search"
-              Select Date Range
+                  placeholder="Type to search..."
-            </Button>
+                  rounded="md"
+                  focusBorderColor="#3725EA"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </InputGroup>
+              <Button
+                fontWeight={500}
+                size={"sm"}
+                leftIcon={<CalendarIcon color={"purple.800"} />}
+                colorScheme="gray"
+                color={"gray.700"}
+                variant="outline"
+                fontSize={"xs"}
+              >
+                Select Date Range
+              </Button>
+            </HStack>
             <PrimaryButton title={'Add to Report'} onClick={onOpen} />
           </HStack>
         </VStack>
@@ -169,7 +190,7 @@ const Report = () => {
         />
       </Box>
 
-<AddReportModal isOpen={isOpen} onClose={onClose}/>
+      <AddReportModal isOpen={isOpen} onClose={onClose} />
     </Box>
   );
 };

src/Pages/Report/ReportsHistory.jsx

@@ -1,24 +1,202 @@
-import { Box, Input, Text, HStack, Button, Icon, Tag, Divider, flexbox, } from '@chakra-ui/react'
+import {
-import React, { useContext } from 'react'
+    Box,
-import MiniHeader from '../../Components/MiniHeader'
+    Button,
-import { OPACITY_ON_LOAD } from '../../Layout/animations'
+    Divider,
-import { MdOutlineRamenDining } from "react-icons/md";
+    HStack,
-import { RiDeleteBin5Line } from "react-icons/ri";
+    Icon,
-import { FaRegFilePdf } from "react-icons/fa";
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Radio,
+    Tag,
+    TagLabel,
+    Text,
+    VStack,
+    useDisclosure,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { CalendarIcon, EmailIcon, SearchIcon, ViewIcon } from "@chakra-ui/icons";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
+import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
 import { AiOutlineEdit } from "react-icons/ai";
-import GlobalStateContext from '../../Contexts/GlobalStateContext';
+import { FaRegEye } from "react-icons/fa";
+import { PiReceipt, PiScrollLight } from "react-icons/pi";
+import AddReportModal from "../Requests/AddReportModal";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
 
 const ReportsHistory = () => {
+    const { reportsHistory } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const { isOpen, onOpen, onClose } = useDisclosure()
+    const [searchTerm, setSearchTerm] = useState("");
+
+
+    useEffect(() => {
+        // Set isLoading to true
+        setIsLoading(true);
+
+        // Simulate a 3-second delay
+        const timer = setTimeout(() => {
+            setIsLoading(false); // Set isLoading to false after 3 seconds
+        }, 500);
+
+        // Cleanup the timer when the component unmounts or when the useEffect re-runs
+        return () => clearTimeout(timer);
+    }, []); // Empty dependency array means this effect runs once after the component mounts
+
+    // ===============================[ Table Header ]
+    const tableHeadRow = [
+        "Name",
+        "Last Update",
+        "Report type",
+        "Total Expense",
+        "Status",
+        "Actions",
+    ];
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = reportsHistory.map((item, index) => ({
+        Name: <HStack>
+            <Icon as={PiScrollLight} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />
+
+            <Box>
+                <Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
+                    {item?.name}
+                </Text>
+                <Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
+                    {item?.reportFor}
+                </Text>
+            </Box>
+        </HStack>
+        ,
+        "Last Update":
+            item?.lastUpdated,
+        "Report type": item?.reportType,
+        "Total Expense": item?.totalExpense,
+        Status: (
+            <Tag
+                my={1}
+                size={"sm"}
+                borderRadius="full"
+                colorScheme={
+                    item?.status === "Approved"
+                        ? "green"
+                        : item?.status === "Fully Reimbursed"
+                            ? "purple"
+                            : item?.status === "Disapproved"
+                                ? "red"
+                                : item?.status === "Saved"
+                                    ? "yellow"
+                                    : item?.status === "Partially Reimbursed"
+                                        ? "orange"
+                                        : "gray" // default color scheme if status doesn't match any condition
+                }
+                border={`1px solid ${item?.status === "Approved"
+                    ? "green"
+                    : item?.status === "Fully Reimbursed"
+                        ? "purple"
+                        : item?.status === "Disapproved"
+                            ? "red"
+                            : item?.status === "Saved"
+                                ? "orange"
+                                : item?.status === "Partially Reimbursed"
+                                    ? "orange"
+                                    : "gray" // default border color if status doesn't match any condition
+                    }`}
+                p={1}
+                px={3}
+            >
+                <TagLabel>{item?.status}</TagLabel>
+            </Tag>
+        ),
+        Actions: (
+            <Box
+                display={"flex"}
+                gap={1}
+                alignItems={"center"}
+                justifyContent={"center"}
+            >
+                <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
+                    <FaRegEye fontSize={"18px"} />
+                </Button>
+                <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
+                    <AiOutlineEdit fontSize={"19px"} />
+                </Button>
+                <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
+                    <RiDeleteBin5Line fontSize={"18px"} />
+                </Button>
+            </Box>
+        ),
+    }));
+
     return (
         <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
             <MiniHeader
                 title={"Reports History"}
-                backButton={true}
                 subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+                backButton={true}
             />
 
-        </Box>
+            <Box
-    )
+                rounded={"xl"}
-}
+                py={3}
+                // pb={0}
+                display={"flex"}
+                flexDirection={"column"}
+                bg={"#fff"}
+                shadow={"md"}
+                minH={"100%"}
+            >
+                <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+                    <Text fontSize={"lg"} fontWeight={600}>
+                        Reports
+                    </Text>
+                    <HStack w={"100%"} justifyContent={"space-between"}>
 
-export default ReportsHistory
+                        <InputGroup width={300} size="sm" >
+                            <InputLeftElement pointerEvents="none">
+                                <SearchIcon color="gray.300" />
+                            </InputLeftElement>
+                            <Input
+                                type="search"
+                                placeholder="Type to search..."
+                                rounded="md"
+                                focusBorderColor="#3725EA"
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                            />
+                        </InputGroup>
+
+                        <Button
+                            fontWeight={500}
+                            size={"sm"}
+                            leftIcon={<CalendarIcon color={"purple.800"} />}
+                            colorScheme="gray"
+                            color={"gray.700"}
+                            variant="outline"
+                            fontSize={"xs"}
+                        >
+                            Select Date Range
+                        </Button>
+                    </HStack>
+                </VStack>
+                <Divider />
+                <NormalTable
+                    emptyMessage={`We don't have any Sponers `}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                />
+            </Box>
+
+            <AddReportModal isOpen={isOpen} onClose={onClose} />
+        </Box>
+    );
+};
+
+export default ReportsHistory;

src/Pages/Requests/AddReportModal.jsx

@@ -15,7 +15,7 @@ const AddReportModal = ({isOpen, onClose}) => {
         <ModalHeader textAlign={'center'} fontSize={'md'}>Add Report</ModalHeader>
         <ModalCloseButton />
         <ModalBody display={'flex'} justifyContent={'center'}  flexDirection={'column'} gap={3} p={6} >
-            <SeccondaryButton onClick={()=> navigate('/reports/add-new-report')} leftIcon={<AddIcon />} title={"Add To Report"}/>
+            <SeccondaryButton onClick={()=> navigate('/reports/add-new-report')} leftIcon={<AddIcon />} title={"Add to New Report"}/>
             <SeccondaryButton onClick={()=> navigate('/reports')} leftIcon={<PiReceiptBold />} title={"Add To Existing Report"}/>
             
         </ModalBody>

src/Routes/Nav.js

@@ -1,13 +1,14 @@
 import { HiOutlineNewspaper } from "react-icons/hi";
 import { TbBrandMedium, TbSquareRoundedFilled } from "react-icons/tb";
 import {
+  RiCustomerService2Fill,
   RiLogoutBoxLine,
   RiMoneyDollarBoxLine,
 } from "react-icons/ri";
 import { RiExchangeBoxLine } from "react-icons/ri";
 import { VscSymbolClass } from "react-icons/vsc";
 import { FiHome, FiUsers } from "react-icons/fi";
-import {MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md";
+import {MdLogout, MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md";
 import {  GrNotification } from "react-icons/gr";
 import HomeIcon from "../assets/homeIcon.png"
 import { PiReceiptBold } from "react-icons/pi";
@@ -61,13 +62,13 @@ export const nav = [
     title: "Help & Support",
     type: "single",
     path: "/help-support",
-    Icon: MdOutlineLiveHelp,
+    Icon: RiCustomerService2Fill,
   },
   {
     title: "Logout",
     type: "single",
     path: "/",
-    Icon: RiLogoutBoxLine,
+    Icon: MdLogout,
   },
 ];
 

src/Routes/Routes.js

@@ -16,6 +16,7 @@ import BuyVoucherCard from "../Pages/Gifts/SelectDenomination";
 import ForWhom from "../Pages/Gifts/ForWhom";
 import WelcomeToOptifiiComponent from "../Pages/Onboarding/WelcomeFrame";
 import RequestReimbursement from "../Pages/Expenses/RequestReimbursement";
+import ReportsHistory from "../Pages/Report/ReportsHistory";
 
 
 
@@ -25,6 +26,7 @@ export const RouteLink = [
   { path: "/home", Component: Home },
   { path: "/expenses", Component: Expenses },
   { path: "/reports", Component: Report },
+  { path: "/reports/history", Component: ReportsHistory },
   { path: "/reports/add-new-report", Component: AddNewReport },
   // { path: "/reports/reports-history", Component: ReportsHistory },
   { path: "/requests", Component: Requests },