diff --git a/src/Components/DataTable/NormalTable.jsx b/src/Components/DataTable/NormalTable.jsx
index 4456794..86c90aa 100644
--- a/src/Components/DataTable/NormalTable.jsx
+++ b/src/Components/DataTable/NormalTable.jsx
@@ -9,30 +9,36 @@ import {
   Tr,
   Skeleton,
   TableCaption,
-  Tfoot,
+  Radio,
+  RadioGroup,
+  CheckboxGroup,
+  Checkbox,
 } from "@chakra-ui/react";
 import EmptySearchList from "../EmptySearchList";
 import { TABLE_PAGINATION } from "../../Constants/Paginations";
 
-const DataTable = ({
+const NormalTable = ({
   data,
   isLoading,
   tableHeadRow,
   emptyMessage,
   centered,
   total,
+  showRadioButton, // New prop for showing the radio button
+  selectedRadio,
+  setSelectedRadio, // State for managing radio button selection
 }) => {
-  console.log(data);
-
   const columnWidth =
     data && data[0]
       ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
       : "auto";
+
+  const handleRadioChange = (value) => {
+    setSelectedRadio(value);
+  };
+
   return (
-    <TableContainer
-      overflowX={"auto"}
-      className="h-auto w-100 table-scroll"
-    >
+    <TableContainer overflowX={"auto"} className="h-auto w-100 table-scroll">
       {data?.length === 0 ? (
         <EmptySearchList message={emptyMessage} />
       ) : (
@@ -40,15 +46,11 @@ const DataTable = ({
           <TableCaption p={total ? 0 : null}>
             {total ? total : "OptiFii v1.0.0"}
           </TableCaption>
-          <Thead 
-          // bgGradient="linear(to-r, gray.50, gray.50)"
-          bg="#6311cb37"
-          >
+          <Thead bg="#6311cb37">
             <Tr>
               {tableHeadRow.map((heading, index) => (
                 <Th
                   color={"purple.900"}
-                  // fontSize={'sm'}
                   textAlign={
                     tableHeadRow.length - 1 === index || centered
                       ? "center"
@@ -56,15 +58,19 @@ const DataTable = ({
                   }
                   key={index}
                   p={4}
-                  // width="20px" // Adjust width as needed
-                  // color={"#fff"}
-                  whiteSpace="normal" // Allow text to wrap
-                  wordBreak="normal" // Ensure long words break properly
-                  overflowWrap="normal" // Break long words if necessary
+                  whiteSpace="normal"
+                  wordBreak="normal"
+                  overflowWrap="normal"
                   textTransform={"none"}
                 >
-                  {isLoading ? <Skeleton height="20px" /> : heading}
-                  {/* {heading} */}
+                  {/* Conditionally render radio button in the heading */}
+                  {showRadioButton && heading === "Select" ? (
+                    <CheckboxGroup value={selectedRadio}>
+                      <Checkbox isDisabled /> {/* Disabled radio button in header */}
+                    </CheckboxGroup>
+                  ) : (
+                    isLoading ? <Skeleton height="20px" /> : heading
+                  )}
                 </Th>
               ))}
             </Tr>
@@ -76,15 +82,12 @@ const DataTable = ({
                     <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
                       {tableHeadRow.map((_, i) => (
                         <Td
-                          // width={"fit-content"}
                           key={i}
                           style={{
                             whiteSpace: "nowrap",
                             textOverflow: "ellipsis",
                           }}
-
                           className="web-text-small"
-                          // w={columnWidth}
                         >
                           <Skeleton height="20px" mb={1} mt={1} />
                         </Td>
@@ -93,7 +96,10 @@ const DataTable = ({
                   )
                 )
               : data?.map((item, index) => (
-                  <Tr bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
+                  <Tr  cursor={'pointer'} 
+                  transition={'0.2s all'}
+                  _hover={{ shadow: "lg" }} 
+                   h={12} bg={index % 2 === 0 ? "" : "#6311cb14"} key={index}>
                     {tableHeadRow.map((heading, i) => (
                       <Td
                         textAlign={
@@ -110,7 +116,17 @@ const DataTable = ({
                         }}
                         className="web-text-small"
                       >
-                        {item[heading]}
+                        {/* Conditionally render radio button in the table body */}
+                        {showRadioButton && heading === "Select" ? (
+                          <CheckboxGroup
+                            value={selectedRadio}
+                            onChange={handleRadioChange}
+                          >
+                            <Checkbox bg={'#fff'} value={item.id} /> {/* Dynamic radio buttons */}
+                          </CheckboxGroup>
+                        ) : (
+                          item[heading]
+                        )}
                       </Td>
                     ))}
                   </Tr>
@@ -122,4 +138,4 @@ const DataTable = ({
   );
 };
 
-export default DataTable;
+export default NormalTable;
\ No newline at end of file
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 234d6bd..a4f0252 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -42,237 +42,237 @@ export const generateUniqueId = () => {
 const GlobalStateProvider = ({ children }) => {
   const [isAuthenticate, setIsAuthenticate] = useState(false);
 
-  const [ employees, setEmployees ] = useState([
+  const [employees, setEmployees] = useState([
     {
-      "id": 1, 
-      "EmpID":"124589",
+      "id": 1,
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 2,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 3,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 4,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 5,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Inactive",
+      "Role": "Sr. Manager",
+      "status": "Inactive",
     },
     {
       "id": 6,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Inactive",
+      "Role": "Sr. Manager",
+      "status": "Inactive",
     },
     {
       "id": 7,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 8,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Inactive",
+      "Role": "Sr. Manager",
+      "status": "Inactive",
     },
     {
       "id": 9,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 10,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 11,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Inactive",
+      "Role": "Sr. Manager",
+      "status": "Inactive",
     },
     {
       "id": 7,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 8,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 9,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 10,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Inactive",
+      "Role": "Sr. Manager",
+      "status": "Inactive",
     },
     {
       "id": 11,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 7,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 8,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 9,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 10,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     },
     {
       "id": 11,
-      "EmpID":"124589",
+      "EmpID": "124589",
       "Name": "Status",
       "emailAddress": "in***@wdimails.com",
       "mobileNumber": "+91 ***8451254",
       "Grade": "L1",
       "Department": "Sales",
-      "Role":"Sr. Manager",
-      "status":"Active",
+      "Role": "Sr. Manager",
+      "status": "Active",
     }
   ]
   )
@@ -449,82 +449,82 @@ const GlobalStateProvider = ({ children }) => {
   ]
   )
 
-  const [ department, setDepartment ] = useState([
+  const [department, setDepartment] = useState([
     {
-      "id": 1, 
-      "department":"FInance",
+      "id": 1,
+      "department": "FInance",
       "role": "Sr. Manager",
       "createdBy": "Reethik Thota",
       "dateTime": "12 June 2024, 10.00 am",
       "approvedBy": "Pooja Patade",
     },
     {
-      "id": 2, 
-      "department":"FInance",
+      "id": 2,
+      "department": "FInance",
       "role": "Sr. Manager",
       "createdBy": "Reethik Thota",
       "dateTime": "12 June 2024, 10.00 am",
       "approvedBy": "Pooja Patade",
     },
     {
-      "id": 3, 
-      "department":"FInance",
+      "id": 3,
+      "department": "FInance",
       "role": "Sr. Manager",
       "createdBy": "Reethik Thota",
       "dateTime": "12 June 2024, 10.00 am",
       "approvedBy": "Pooja Patade",
     },
     {
-      "id": 4, 
-      "department":"FInance",
+      "id": 4,
+      "department": "FInance",
       "role": "Sr. Manager",
       "createdBy": "Reethik Thota",
       "dateTime": "12 June 2024, 10.00 am",
       "approvedBy": "Pooja Patade",
     },
     {
-      "id": 5, 
-      "department":"FInance",
+      "id": 5,
+      "department": "FInance",
       "role": "Sr. Manager",
       "createdBy": "Reethik Thota",
       "dateTime": "12 June 2024, 10.00 am",
       "approvedBy": "Pooja Patade",
     },
     {
-      "id": 6, 
-      "department":"FInance",
+      "id": 6,
+      "department": "FInance",
       "role": "Sr. Manager",
       "createdBy": "Reethik Thota",
       "dateTime": "12 June 2024, 10.00 am",
       "approvedBy": "Pooja Patade",
     },
     {
-      "id": 7, 
-      "department":"FInance",
+      "id": 7,
+      "department": "FInance",
       "role": "Sr. Manager",
       "createdBy": "Reethik Thota",
       "dateTime": "12 June 2024, 10.00 am",
       "approvedBy": "Pooja Patade",
     },
     {
-      "id": 8, 
-      "department":"FInance",
+      "id": 8,
+      "department": "FInance",
       "role": "Sr. Manager",
       "createdBy": "Reethik Thota",
       "dateTime": "12 June 2024, 10.00 am",
       "approvedBy": "Pooja Patade",
     },
     {
-      "id": 9, 
-      "department":"FInance",
+      "id": 9,
+      "department": "FInance",
       "role": "Sr. Manager",
       "createdBy": "Reethik Thota",
       "dateTime": "12 June 2024, 10.00 am",
       "approvedBy": "Pooja Patade",
     },
     {
-      "id": 10, 
-      "department":"FInance",
+      "id": 10,
+      "department": "FInance",
       "role": "Sr. Manager",
       "createdBy": "Reethik Thota",
       "dateTime": "12 June 2024, 10.00 am",
@@ -533,10 +533,10 @@ const GlobalStateProvider = ({ children }) => {
   ]
   )
 
-  const [ roles, setRoles ] = useState([
+  const [roles, setRoles] = useState([
     {
-      "id": 1, 
-      "role":"Sr Manager",
+      "id": 1,
+      "role": "Sr Manager",
       "department": "Finance",
       "createdDuration": "11 June 2024, 10 am",
       "createdBy": "Pooja Patade",
@@ -544,8 +544,8 @@ const GlobalStateProvider = ({ children }) => {
       "status": "Published",
     },
     {
-      "id": 2, 
-      "role":"Sr Manager",
+      "id": 2,
+      "role": "Sr Manager",
       "department": "Finance",
       "createdDuration": "11 June 2024, 10 am",
       "createdBy": "Pooja Patade",
@@ -553,8 +553,8 @@ const GlobalStateProvider = ({ children }) => {
       "status": "Published",
     },
     {
-      "id": 3, 
-      "role":"Sr Manager",
+      "id": 3,
+      "role": "Sr Manager",
       "department": "Finance",
       "createdDuration": "11 June 2024, 10 am",
       "createdBy": "Pooja Patade",
@@ -562,8 +562,8 @@ const GlobalStateProvider = ({ children }) => {
       "status": "Saved as draft",
     },
     {
-      "id": 4, 
-      "role":"Sr Manager",
+      "id": 4,
+      "role": "Sr Manager",
       "department": "Finance",
       "createdDuration": "11 June 2024, 10 am",
       "createdBy": "Pooja Patade",
@@ -571,8 +571,8 @@ const GlobalStateProvider = ({ children }) => {
       "status": "Published",
     },
     {
-      "id": 5, 
-      "role":"Sr Manager",
+      "id": 5,
+      "role": "Sr Manager",
       "department": "Finance",
       "createdDuration": "11 June 2024, 10 am",
       "createdBy": "Pooja Patade",
@@ -580,8 +580,8 @@ const GlobalStateProvider = ({ children }) => {
       "status": "Saved as draft",
     },
     {
-      "id": 6, 
-      "role":"Sr Manager",
+      "id": 6,
+      "role": "Sr Manager",
       "department": "Finance",
       "createdDuration": "11 June 2024, 10 am",
       "createdBy": "Pooja Patade",
@@ -589,8 +589,8 @@ const GlobalStateProvider = ({ children }) => {
       "status": "Saved as draft",
     },
     {
-      "id": 7, 
-      "role":"Sr Manager",
+      "id": 7,
+      "role": "Sr Manager",
       "department": "Finance",
       "createdDuration": "11 June 2024, 10 am",
       "createdBy": "Pooja Patade",
@@ -598,8 +598,8 @@ const GlobalStateProvider = ({ children }) => {
       "status": "Saved as draft",
     },
     {
-      "id": 8, 
-      "role":"Sr Manager",
+      "id": 8,
+      "role": "Sr Manager",
       "department": "Finance",
       "createdDuration": "11 June 2024, 10 am",
       "createdBy": "Pooja Patade",
@@ -607,8 +607,8 @@ const GlobalStateProvider = ({ children }) => {
       "status": "Saved as draft",
     },
     {
-      "id": 9, 
-      "role":"Sr Manager",
+      "id": 9,
+      "role": "Sr Manager",
       "department": "Finance",
       "createdDuration": "11 June 2024, 10 am",
       "createdBy": "Pooja Patade",
@@ -616,8 +616,8 @@ const GlobalStateProvider = ({ children }) => {
       "status": "Published",
     },
     {
-      "id": 10, 
-      "role":"Sr Manager",
+      "id": 10,
+      "role": "Sr Manager",
       "department": "Finance",
       "createdDuration": "11 June 2024, 10 am",
       "createdBy": "Pooja Patade",
@@ -628,82 +628,82 @@ const GlobalStateProvider = ({ children }) => {
   ]
   )
 
-  const [ employeePermissions, setEmployeePermissions ] = useState([
+  const [employeePermissions, setEmployeePermissions] = useState([
     {
-      "id": "12451", 
-      "name":"Kartikey Gautam",
+      "id": "12451",
+      "name": "Kartikey Gautam",
       "emailID": "kg@wdimails.com",
       "department": "Finance",
       "role": "Sr. Accountant",
       "permissions": "Subadmin",
     },
     {
-      "id": "12451", 
-      "name":"Kartikey Gautam",
+      "id": "12451",
+      "name": "Kartikey Gautam",
       "emailID": "kg@wdimails.com",
       "department": "Finance",
       "role": "Sr. Accountant",
       "permissions": "Subadmin",
     },
     {
-      "id": "12451", 
-      "name":"Kartikey Gautam",
+      "id": "12451",
+      "name": "Kartikey Gautam",
       "emailID": "kg@wdimails.com",
       "department": "Finance",
       "role": "Sr. Accountant",
       "permissions": "Subadmin",
     },
     {
-      "id": "12451", 
-      "name":"Kartikey Gautam",
+      "id": "12451",
+      "name": "Kartikey Gautam",
       "emailID": "kg@wdimails.com",
       "department": "Finance",
       "role": "Sr. Accountant",
       "permissions": "Subadmin",
     },
     {
-      "id": "12451", 
-      "name":"Kartikey Gautam",
+      "id": "12451",
+      "name": "Kartikey Gautam",
       "emailID": "kg@wdimails.com",
       "department": "Finance",
       "role": "Sr. Accountant",
       "permissions": "Subadmin",
     },
     {
-      "id": "12451", 
-      "name":"Kartikey Gautam",
+      "id": "12451",
+      "name": "Kartikey Gautam",
       "emailID": "kg@wdimails.com",
       "department": "Finance",
       "role": "Sr. Accountant",
       "permissions": "Subadmin",
     },
     {
-      "id": "12451", 
-      "name":"Kartikey Gautam",
+      "id": "12451",
+      "name": "Kartikey Gautam",
       "emailID": "kg@wdimails.com",
       "department": "Finance",
       "role": "Sr. Accountant",
       "permissions": "Subadmin",
     },
     {
-      "id": "12451", 
-      "name":"Kartikey Gautam",
+      "id": "12451",
+      "name": "Kartikey Gautam",
       "emailID": "kg@wdimails.com",
       "department": "Finance",
       "role": "Sr. Accountant",
       "permissions": "Subadmin",
     },
     {
-      "id": "12451", 
-      "name":"Kartikey Gautam",
+      "id": "12451",
+      "name": "Kartikey Gautam",
       "emailID": "kg@wdimails.com",
       "department": "Finance",
       "role": "Sr. Accountant",
       "permissions": "Subadmin",
     },
     {
-      "id": "12451", 
-      "name":"Kartikey Gautam",
+      "id": "12451",
+      "name": "Kartikey Gautam",
       "emailID": "kg@wdimails.com",
       "department": "Finance",
       "role": "Sr. Accountant",
@@ -713,280 +713,391 @@ const GlobalStateProvider = ({ children }) => {
   ]
   )
 
-  const [ reimbursementStatus, setReimbursementStatus ] = useState([
+  const [reimbursementStatus, setReimbursementStatus] = useState([
     {
-      "reportName": "Jan 12, 2022", 
-      "reportBy":"in***@wdimails.com",
+      "reportName": "Jan 12, 2022",
+      "reportBy": "in***@wdimails.com",
       "reportAmount": "+91 ***8451254",
       "dateTime": "Sales",
       "orderStatus": "Approved",
       "approver": "Sales",
-      "disburser":"Sales",
+      "disburser": "Sales",
     },
     {
-      "reportName": "Jan 12, 2022", 
-      "reportBy":"in***@wdimails.com",
+      "reportName": "Jan 12, 2022",
+      "reportBy": "in***@wdimails.com",
       "reportAmount": "+91 ***8451254",
       "dateTime": "Sales",
       "orderStatus": "Approved",
       "approver": "Sales",
-      "disburser":"Sales",
+      "disburser": "Sales",
     },
     {
-      "reportName": "Jan 12, 2022", 
-      "reportBy":"in***@wdimails.com",
+      "reportName": "Jan 12, 2022",
+      "reportBy": "in***@wdimails.com",
       "reportAmount": "+91 ***8451254",
       "dateTime": "Sales",
       "orderStatus": "Approved",
       "approver": "Sales",
-      "disburser":"Sales",
+      "disburser": "Sales",
     },
     {
-      "reportName": "Jan 12, 2022", 
-      "reportBy":"in***@wdimails.com",
+      "reportName": "Jan 12, 2022",
+      "reportBy": "in***@wdimails.com",
       "reportAmount": "+91 ***8451254",
       "dateTime": "Sales",
       "orderStatus": "Fully reimbursed",
       "approver": "Sales",
-      "disburser":"Sales",
+      "disburser": "Sales",
     },
     {
-      "reportName": "Jan 12, 2022", 
-      "reportBy":"in***@wdimails.com",
+      "reportName": "Jan 12, 2022",
+      "reportBy": "in***@wdimails.com",
       "reportAmount": "+91 ***8451254",
       "dateTime": "Sales",
       "orderStatus": "Fully reimbursed",
       "approver": "Sales",
-      "disburser":"Sales",
+      "disburser": "Sales",
     },
   ]
   )
 
-  const [ advanceStatus, setAdvanceStatus ] = useState([
+  const [advanceStatus, setAdvanceStatus] = useState([
     {
-      "reportName": "Jan 12, 2022", 
-      "reportBy":"in***@wdimails.com",
+      "reportName": "Jan 12, 2022",
+      "reportBy": "in***@wdimails.com",
       "reportAmount": "+91 ***8451254",
       "dateTime": "Sales",
       "orderStatus": "Approved",
       "approver": "Sales",
-      "disburser":"Sales",
+      "disburser": "Sales",
     },
     {
-      "reportName": "Jan 12, 2022", 
-      "reportBy":"in***@wdimails.com",
+      "reportName": "Jan 12, 2022",
+      "reportBy": "in***@wdimails.com",
       "reportAmount": "+91 ***8451254",
       "dateTime": "Sales",
       "orderStatus": "Approved",
       "approver": "Sales",
-      "disburser":"Sales",
+      "disburser": "Sales",
     },
     {
-      "reportName": "Jan 12, 2022", 
-      "reportBy":"in***@wdimails.com",
+      "reportName": "Jan 12, 2022",
+      "reportBy": "in***@wdimails.com",
       "reportAmount": "+91 ***8451254",
       "dateTime": "Sales",
       "orderStatus": "Approved",
       "approver": "Sales",
-      "disburser":"Sales",
+      "disburser": "Sales",
     },
     {
-      "reportName": "Jan 12, 2022", 
-      "reportBy":"in***@wdimails.com",
+      "reportName": "Jan 12, 2022",
+      "reportBy": "in***@wdimails.com",
       "reportAmount": "+91 ***8451254",
       "dateTime": "Sales",
       "orderStatus": "Fully reimbursed",
       "approver": "Sales",
-      "disburser":"Sales",
+      "disburser": "Sales",
     },
     {
-      "reportName": "Jan 12, 2022", 
-      "reportBy":"in***@wdimails.com",
+      "reportName": "Jan 12, 2022",
+      "reportBy": "in***@wdimails.com",
       "reportAmount": "+91 ***8451254",
       "dateTime": "Sales",
       "orderStatus": "Fully reimbursed",
       "approver": "Sales",
-      "disburser":"Sales",
+      "disburser": "Sales",
     },
 
   ]
   )
 
-  const [digital , setDigital]=useState([
+  const [digital, setDigital] = useState([
     {
-      id:1,
-      "orderid":"#451245",
-      "laodStatus":"Fully Loaded",
-      "dateTime":"10 June 2024, 10am",
-      "totalvaluation":"₹ 70,000",
-      "activationStatus":"Active",
-      "CardDeliveryStatus" : "Delivered",
-      "quantity":"500"
+      id: 1,
+      "orderid": "#451245",
+      "laodStatus": "Fully Loaded",
+      "dateTime": "10 June 2024, 10am",
+      "totalvaluation": "₹ 70,000",
+      "activationStatus": "Active",
+      "CardDeliveryStatus": "Delivered",
+      "quantity": "500"
     },
     {
-      id:2,
-      "orderid":"#451245",
-      "laodStatus":"Fully Loaded",
-      "dateTime":"10 June 2024, 10am",
-      "totalvaluation":"₹ 70,000",
-      "activationStatus":"Active",
-      "CardDeliveryStatus" : "Not Delivered",
-      "quantity":"500"
+      id: 2,
+      "orderid": "#451245",
+      "laodStatus": "Fully Loaded",
+      "dateTime": "10 June 2024, 10am",
+      "totalvaluation": "₹ 70,000",
+      "activationStatus": "Active",
+      "CardDeliveryStatus": "Not Delivered",
+      "quantity": "500"
     },
     {
-      id:3,
-      "orderid":"#451245",
-      "laodStatus":"Fully Loaded",
-      "dateTime":"10 June 2024, 10am",
-      "totalvaluation":"₹ 70,000",
-      "activationStatus":"Activate",
-      "CardDeliveryStatus" : "Delivered",
-      "quantity":"500"
+      id: 3,
+      "orderid": "#451245",
+      "laodStatus": "Fully Loaded",
+      "dateTime": "10 June 2024, 10am",
+      "totalvaluation": "₹ 70,000",
+      "activationStatus": "Activate",
+      "CardDeliveryStatus": "Delivered",
+      "quantity": "500"
     },
     {
-      id:3,
-      "orderid":"#451245",
-      "laodStatus":"Fully Loaded",
-      "dateTime":"10 June 2024, 10am",
-      "totalvaluation":"₹ 70,000",
-      "activationStatus":"Partially Active",
-      "CardDeliveryStatus" : "Partially Delivered",
-      "quantity":"500"
-      
+      id: 3,
+      "orderid": "#451245",
+      "laodStatus": "Fully Loaded",
+      "dateTime": "10 June 2024, 10am",
+      "totalvaluation": "₹ 70,000",
+      "activationStatus": "Partially Active",
+      "CardDeliveryStatus": "Partially Delivered",
+      "quantity": "500"
+
     },
     {
-      id:4,
-      "orderid":"#451245",
-      "laodStatus":"Fully Loaded",
-      "dateTime":"10 June 2024, 10am",
-      "totalvaluation":"₹ 70,000",
-      "activationStatus":"Active",
-      "CardDeliveryStatus" : "Not Delivered",
-      "quantity":"500"
+      id: 4,
+      "orderid": "#451245",
+      "laodStatus": "Fully Loaded",
+      "dateTime": "10 June 2024, 10am",
+      "totalvaluation": "₹ 70,000",
+      "activationStatus": "Active",
+      "CardDeliveryStatus": "Not Delivered",
+      "quantity": "500"
     },
     {
-      id:5,
-      "orderid":"#451245",
-      "laodStatus":"Fully Loaded",
-      "dateTime":"10 June 2024, 10am",
-      "totalvaluation":"₹ 70,000",
-      "activationStatus":"Partially Active",
-      "CardDeliveryStatus" : "Not Delivered",
-      "quantity":"500"
+      id: 5,
+      "orderid": "#451245",
+      "laodStatus": "Fully Loaded",
+      "dateTime": "10 June 2024, 10am",
+      "totalvaluation": "₹ 70,000",
+      "activationStatus": "Partially Active",
+      "CardDeliveryStatus": "Not Delivered",
+      "quantity": "500"
     },
     {
-      id:6,
-      "orderid":"#451245",
-      "laodStatus":"Fully Loaded",
-      "dateTime":"10 June 2024, 10am",
-      "totalvaluation":"₹ 70,000",
-      "activationStatus":"Active",
-      "CardDeliveryStatus" : "Delivered",
-      "quantity":"500"
+      id: 6,
+      "orderid": "#451245",
+      "laodStatus": "Fully Loaded",
+      "dateTime": "10 June 2024, 10am",
+      "totalvaluation": "₹ 70,000",
+      "activationStatus": "Active",
+      "CardDeliveryStatus": "Delivered",
+      "quantity": "500"
     },
     {
-      id:7,
-      "orderid":"#451245",
-      "laodStatus":"Fully Loaded",
-      "dateTime":"10 June 2024, 10am",
-      "totalvaluation":"₹ 70,000",
-      "activationStatus":"Activate",
-      "CardDeliveryStatus" : "Delivered",
-      "quantity":"500"
+      id: 7,
+      "orderid": "#451245",
+      "laodStatus": "Fully Loaded",
+      "dateTime": "10 June 2024, 10am",
+      "totalvaluation": "₹ 70,000",
+      "activationStatus": "Activate",
+      "CardDeliveryStatus": "Delivered",
+      "quantity": "500"
     },
     {
-      id:8,
-      "orderid":"#451245",
-      "laodStatus":"Fully Loaded",
-      "dateTime":"10 June 2024, 10am",
-      "totalvaluation":"₹ 70,000",
-      "activationStatus":"Activate",
-      "CardDeliveryStatus" : "Delivered",
-      "quantity":"500"
+      id: 8,
+      "orderid": "#451245",
+      "laodStatus": "Fully Loaded",
+      "dateTime": "10 June 2024, 10am",
+      "totalvaluation": "₹ 70,000",
+      "activationStatus": "Activate",
+      "CardDeliveryStatus": "Delivered",
+      "quantity": "500"
     },
   ])
 
-  const [ApplicationStatus , setApplicationStatus] = useState([
+  const [ApplicationStatus, setApplicationStatus] = useState([
     {
-      EmpID:124589,
-      Name :"Pooja Shah",
-      emailAddress :"in***@wdimails.com",
-      mobileNumber :"+91 *** 154874",
-      Department:"Sales",
-      LoadStatus :"10,000",
-      ActiveStatus:"Active"
+      EmpID: 124589,
+      Name: "Pooja Shah",
+      emailAddress: "in***@wdimails.com",
+      mobileNumber: "+91 *** 154874",
+      Department: "Sales",
+      LoadStatus: "10,000",
+      ActiveStatus: "Active"
     },
     {
-      EmpID:124589,
-      Name :"Pooja Shah",
-      emailAddress :"in***@wdimails.com",
-      mobileNumber :"+91 *** 154874",
-      Department:"Sales",
-      LoadStatus :"10,000",
-      ActiveStatus:"Activate"
+      EmpID: 124589,
+      Name: "Pooja Shah",
+      emailAddress: "in***@wdimails.com",
+      mobileNumber: "+91 *** 154874",
+      Department: "Sales",
+      LoadStatus: "10,000",
+      ActiveStatus: "Activate"
     },
     {
-      EmpID:124589,
-      Name :"Pooja Shah",
-      emailAddress :"in***@wdimails.com",
-      mobileNumber :"+91 *** 154874",
-      Department:"Sales",
-      LoadStatus :"load Card",
-      ActiveStatus:"Activate"
+      EmpID: 124589,
+      Name: "Pooja Shah",
+      emailAddress: "in***@wdimails.com",
+      mobileNumber: "+91 *** 154874",
+      Department: "Sales",
+      LoadStatus: "load Card",
+      ActiveStatus: "Activate"
     },
     {
-      EmpID:124589,
-      Name :"Pooja Shah",
-      emailAddress :"in***@wdimails.com",
-      mobileNumber :"+91 *** 154874",
-      Department:"Sales",
-      LoadStatus :"10,000",
-      ActiveStatus:"Active"
+      EmpID: 124589,
+      Name: "Pooja Shah",
+      emailAddress: "in***@wdimails.com",
+      mobileNumber: "+91 *** 154874",
+      Department: "Sales",
+      LoadStatus: "10,000",
+      ActiveStatus: "Active"
     },
     {
-      EmpID:124589,
-      Name :"Pooja Shah",
-      emailAddress :"in***@wdimails.com",
-      mobileNumber :"+91 *** 154874",
-      Department:"Sales",
-      LoadStatus :"load Card",
-      ActiveStatus:"Activate"
+      EmpID: 124589,
+      Name: "Pooja Shah",
+      emailAddress: "in***@wdimails.com",
+      mobileNumber: "+91 *** 154874",
+      Department: "Sales",
+      LoadStatus: "load Card",
+      ActiveStatus: "Activate"
     },
     {
-      EmpID:124589,
-      Name :"Pooja Shah",
-      emailAddress :"in***@wdimails.com",
-      mobileNumber :"+91 *** 154874",
-      Department:"Sales",
-      LoadStatus :"load Card",
-      ActiveStatus:"Activate"
+      EmpID: 124589,
+      Name: "Pooja Shah",
+      emailAddress: "in***@wdimails.com",
+      mobileNumber: "+91 *** 154874",
+      Department: "Sales",
+      LoadStatus: "load Card",
+      ActiveStatus: "Activate"
     },
     {
-      EmpID:124589,
-      Name :"Pooja Shah",
-      emailAddress :"in***@wdimails.com",
-      mobileNumber :"+91 *** 154874",
-      Department:"Sales",
-      LoadStatus :"10,000",
-      ActiveStatus:"Activate"
+      EmpID: 124589,
+      Name: "Pooja Shah",
+      emailAddress: "in***@wdimails.com",
+      mobileNumber: "+91 *** 154874",
+      Department: "Sales",
+      LoadStatus: "10,000",
+      ActiveStatus: "Activate"
     },
     {
-      EmpID:124589,
-      Name :"Pooja Shah",
-      emailAddress :"in***@wdimails.com",
-      mobileNumber :"+91 *** 154874",
-      Department:"Sales",
-      LoadStatus :"10,000",
-      ActiveStatus:"Activate"
+      EmpID: 124589,
+      Name: "Pooja Shah",
+      emailAddress: "in***@wdimails.com",
+      mobileNumber: "+91 *** 154874",
+      Department: "Sales",
+      LoadStatus: "10,000",
+      ActiveStatus: "Activate"
     },
     {
-      EmpID:124589,
-      Name :"Pooja Shah",
-      emailAddress :"in***@wdimails.com",
-      mobileNumber :"+91 *** 154874",
-      Department:"Sales",
-      LoadStatus :"load Card",
-      ActiveStatus:"Activate"
+      EmpID: 124589,
+      Name: "Pooja Shah",
+      emailAddress: "in***@wdimails.com",
+      mobileNumber: "+91 *** 154874",
+      Department: "Sales",
+      LoadStatus: "load Card",
+      ActiveStatus: "Activate"
+    },
+  ])
+
+  const [AdvanceExpenseRequest, setAdvanceExpenseRequest] = useState([
+    {
+      id: 1,
+      ReportName: "Advance expense report 2024",
+      ReportBy: {
+        profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+        profName: "Raju",
+      },
+      ReportAmount: "₹ 50000",
+      DateTime: "10 June, 2924 10 am",
+      Approver: "Reethik thota",
+      Disburser: "Manav sain",
+      Action: "View"
+    },
+    {
+      id: 2,
+      ReportName: "Advance expense report 2024",
+      ReportBy: {
+        profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+        profName: "Raju",
+      },
+      ReportAmount: "₹ 50000",
+      DateTime: "10 June, 2924 10 am",
+      Approver: "Reethik thota",
+      Disburser: "Manav sain",
+      Action: "View"
+    },
+    {
+      id: 3,
+      ReportName: "Advance expense report 2024",
+      ReportBy: {
+        profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+        profName: "Raju",
+      },
+      ReportAmount: "₹ 50000",
+      DateTime: "10 June, 2924 10 am",
+      Approver: "Reethik thota",
+      Disburser: "Manav sain",
+      Action: "View"
+    },
+    {
+      id: 4,
+      ReportName: "Advance expense report 2024",
+      ReportBy: {
+        profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+        profName: "Raju",
+      },
+      ReportAmount: "₹ 50000",
+      DateTime: "10 June, 2924 10 am",
+      Approver: "Reethik thota",
+      Disburser: "Manav sain",
+      Action: "View"
+    },
+    {
+      id: 5,
+      ReportName: "Advance expense report 2024",
+      ReportBy: {
+        profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+        profName: "Raju",
+      },
+      ReportAmount: "₹ 50000",
+      DateTime: "10 June, 2924 10 am",
+      Approver: "Reethik thota",
+      Disburser: "Manav sain",
+      Action: "View"
+    },
+  ])
+
+  const [AdvanceExpenseRequestView, setAdvanceExpenseRequestView] = useState([
+    {
+      "DateTime": "10 June, 2924 10 am",
+      "Merchant": "Dine in",
+      "Category": "Food",
+      "Paymentmode": "Expense card",
+      "ReimburseAmount": "₹ 50000",
+      "Bills": "",
+      "Disburser": "Manav sain",
+      "Action": ""
+    },
+    {
+      "DateTime": "10 June, 2924 10 am",
+      "Merchant": "Airtel postpaid",
+      "Category": "Telecom",
+      "Paymentmode": "Expense card",
+      "ReimburseAmount": "₹ 50000",
+      "Bills": "",
+      "Disburser": "Manav sain",
+      "Action": ""
+    },
+    {
+      "DateTime": "10 June, 2924 10 am",
+      "Merchant": "Lorem ipsme",
+      "Category": "Fuel",
+      "Paymentmode": "Expense card",
+      "ReimburseAmount": "₹ 50000",
+      "Bills": "",
+      "Disburser": "Manav sain",
+      "Action": ""
+    },
+    {
+      "DateTime": "10 June, 2924 10 am",
+      "Merchant": "Dine in",
+      "Category": "Food",
+      "Paymentmode": "Expense card",
+      "ReimburseAmount": "₹ 50000",
+      "Bills": "",
+      "Disburser": "Manav sain",
+      "Action": ""
     },
   ])
 
@@ -997,7 +1108,7 @@ const GlobalStateProvider = ({ children }) => {
         setReportsHistory,
         isAuthenticate,
         setIsAuthenticate,
-        employees, 
+        employees,
         setEmployees,
         department,
         setDepartment,
@@ -1012,7 +1123,11 @@ const GlobalStateProvider = ({ children }) => {
         digital,
         setDigital,
         ApplicationStatus,
-        setAdvanceStatus
+        setAdvanceStatus,
+        AdvanceExpenseRequest,
+        setAdvanceExpenseRequest,
+        AdvanceExpenseRequestView,
+        setAdvanceExpenseRequestView
       }}
     >
       {children}
diff --git a/src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx b/src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx
index b6bc504..446db9d 100644
--- a/src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx
+++ b/src/Pages/OptiFiiExpense/AdvanceExpenseRequest.jsx
@@ -1,15 +1,464 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import {
+  Avatar,
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  Flex,
+  HStack,
+  Icon,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Radio,
+  Select,
+  Tag,
+  TagLabel,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import {
+  Tabs,
+  TabList,
+  Tab,
+  TabIndicator,
+  TabPanels,
+  TabPanel,
+} 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 womenpfp from "../../assets/womenpfp1.png";
+import {
+  AddIcon,
+  CalendarIcon,
+  ChevronDownIcon,
+  EmailIcon,
+  SearchIcon,
+  ViewIcon,
+} from "@chakra-ui/icons";
+import {
+  MdFilterList,
+  MdNotificationsNone,
+  MdOutlineHeadsetMic,
+} from "react-icons/md";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { Link, NavLink, useNavigate } from "react-router-dom";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import { LuListFilter } from "react-icons/lu";
+import { BsFilterRight } from "react-icons/bs";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+
+
 
 const AdvanceExpenseRequest = () => {
-  return (
-    <Box h={"100%"} p={6}>
-      <MiniHeader
-        title={"My Requests"}
-        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
-        backButton={true}
+  const { AdvanceExpenseRequest } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [users, setusers] = useState(50);
+  const navigate = useNavigate();
+
+
+
+  useEffect(() => {
+    // Set isLoading to true
+    setIsLoading(true);
+
+    // Simulate a 3-second delay
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ===============================[ Table Header ]
+
+  const tableHeadRow = [
+    "Sr. no",
+    "Report name",
+    "Report by",
+    "Report amount",
+    "Date & time",
+    "Approver",
+    "Disburser",
+    "Action",
+  ];
+
+  const pendingTable = AdvanceExpenseRequest.map((item, index) => ({
+    "Sr. no": (
+      <Checkbox colorScheme="purple">
+        <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?.id}
+        </Text>
+      </Checkbox>
+    ),
+    "Report name": (
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+        color="#3725EA"
+      >
+        {item?.ReportName}
+      </Text>
+    ),
+    "Report by": (
+      <Flex align={'center'} gap={2}>
+        <Avatar size={'sm'} name={item?.ReportBy?.profName} src={item?.ReportBy?.profImage} />
+        <Text as={'span'}>{item?.ReportBy?.profName}</Text>
+      </Flex>
+    ),
+    "Report amount": item?.ReportAmount,
+    "Date & time": item?.DateTime,
+    "Approver": item?.Approver,
+    "Disburser": item?.Disburser,
+    "Action": (
+      <Text
+        as={"button"}
+        onClick={() => navigate('/advance-expense-request-view')}
+        fontSize={"xs"}
+        color="#fff"
+        bg={'#6311CB'}
+        py={1.5} px={5}
+        borderRadius={5}
+      >{item?.Action}</Text>
+    ),
+  }));
+  const completedTable = AdvanceExpenseRequest.map((item, index) => ({
+    "Sr. no": (
+      <Checkbox colorScheme="purple">
+        <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?.id}
+        </Text>
+      </Checkbox>
+    ),
+    "Report name": (
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+        color="#3725EA"
+      >
+        {item?.ReportName}
+      </Text>
+    ),          
+    "Report by": (
+      <Flex align={'center'} gap={2}>
+        <Avatar size={'sm'} name={item?.ReportBy?.profName} src={item?.ReportBy?.profImage} />
+        <Text as={'span'}>{item?.ReportBy?.profName}</Text>
+      </Flex>
+    ),
+    "Report amount": item?.ReportAmount,
+    "Date & time": item?.DateTime,
+    "Approver": item?.Approver,
+    "Disburser": item?.Disburser,
+    "Action": (
+      <Text
+        as={"button"}
+        fontSize={"xs"}
+        color="#fff"
+        bg={'#6311CB'}
+        py={1.5} px={5}
+        borderRadius={5}
+      >{item?.Action}</Text>
+    ),
+  }));
+  const rejectedTable = AdvanceExpenseRequest.map((item, index) => ({
+    "Sr. no": (
+      <Checkbox colorScheme="purple">
+        <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?.id}
+        </Text>
+      </Checkbox>
+    ),
+    "Report name": (
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+        color="#3725EA"
+      >
+        {item?.ReportName}
+      </Text>
+    ),
+    "Report by": (
+      <Flex align={'center'} gap={2}>
+        <Avatar size={'sm'} name={item?.ReportBy?.profName} src={item?.ReportBy?.profImage} />
+        <Text as={'span'}>{item?.ReportBy?.profName}</Text>
+      </Flex>
+    ),
+    "Report amount": item?.ReportAmount,
+    "Date & time": item?.DateTime,
+    "Approver": item?.Approver,
+    "Disburser": item?.Disburser,
+    "Action": (
+      <Text
+        as={"button"}
+        fontSize={"xs"}
+        color="#fff"
+        bg={'#6311CB'}
+        py={1.5} px={5}
+        borderRadius={5}
+      >{item?.Action}</Text>
+    ),
+  }));
+
+
+
+  const tabsData = [
+    {
+      label: 'Pending',
+      num: 50,
+      content: <NormalTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={pendingTable}
+        isLoading={isLoading}
       />
+    },
+    {
+      label: 'Completed',
+      content: <NormalTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={completedTable}
+        isLoading={isLoading}
+      />
+    },
+    {
+      label: 'Rejected',
+      content: <NormalTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={rejectedTable}
+        isLoading={isLoading}
+      />
+    }
+  ];
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <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}>
+          <Box
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            w={"100%"}
+          >
+            <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>
+          </Box>
+          <Divider />
+          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+            <Flex align={'center'} gap={5}>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<BsFilterRight fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Sort
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+              <Flex align={'center'} gap={2}>
+                <Text as={'span'} fontSize={'xs'}>Show</Text>
+                <Select borderRadius={5} size={"sm"}>
+                  <option value='10'>10</option>
+                  <option value='30'>30</option>
+                  <option value='50'>50</option>
+                  <option value='80'>80</option>
+                </Select>
+                <Text as={'span'} fontSize={'xs'}>entries</Text>
+              </Flex>
+
+
+            </Flex>
+            <Box>
+              <Link to={"#"} style={{ marginRight: "8px" }}>
+                {/* <SecondaryButton
+                  leftIcon={<Image me={2} src={backFund} w={"17px"} />}
+                  title={"Pull back funds"}
+                /> */}
+              </Link>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<FaArrowUpFromBracket />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  colorScheme="gray"
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Export
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>
+                    <Image src={pdfIcon} me={2} /> Export as PDF
+                  </MenuItem>
+                  <MenuItem fontSize={"sm"}>
+                    <Image src={ExcelIcon} me={2} /> Export as Excel
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<LuListFilter fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Filter
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+          </HStack>
+        </VStack>
+        <Tabs position="relative" variant="unstyled">
+          <TabList color="#B0B0B0">
+            {tabsData?.map((tab, index) => (
+              <Tab
+                key={index}
+                fontSize="small"
+                _selected={{
+                  color: "#6311CB",
+                  fontWeight: "medium",
+                }}
+                display={'flex'}
+                alignItems={'center'}
+                gap={2}
+              >
+                {tab?.label}
+                {tab?.label == "Pending" &&
+                  <Text
+                    as={"span"}
+                    fontSize={"xs"}
+                    color="#fff"
+                    bg={'#6311CB'}
+                    py={1} px={2}
+                    borderRadius={5}
+                  >{tab?.num}</Text>}
+              </Tab>
+            ))}
+
+          </TabList>
+          <TabIndicator
+            mt="-1.5px"
+            height="2px"
+            bg="blue.500"
+            borderRadius="1px"
+            color="red"
+          />
+          <TabPanels>
+            {tabsData?.map((tabCont, index) => (
+              <TabPanel key={index}>
+                {tabCont?.content}
+              </TabPanel>
+            ))}
+
+          </TabPanels>
+        </Tabs>
+      </Box>
     </Box>
   );
 };
diff --git a/src/Pages/OptiFiiExpense/AdvanceExpenseRequestView.jsx b/src/Pages/OptiFiiExpense/AdvanceExpenseRequestView.jsx
new file mode 100644
index 0000000..148116b
--- /dev/null
+++ b/src/Pages/OptiFiiExpense/AdvanceExpenseRequestView.jsx
@@ -0,0 +1,275 @@
+import {
+    Box,
+    Button,
+    HStack,
+    VStack,
+    Icon,
+    Checkbox,
+    Tag,
+    TagLabel,
+    Text,
+    Image,
+    useDisclosure,
+    Alert,
+    CloseButton,
+    AlertDescription,
+    Flex,
+} 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 { RiDeleteBin5Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { LiaFileInvoiceSolid } from "react-icons/lia";
+import { PiReceipt } from "react-icons/pi";
+import { MdOutlineNoFood } from "react-icons/md";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { IoMdCheckmark } from "react-icons/io";
+import { RxCross2 } from "react-icons/rx";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton"
+import SecondaryButton from "../../Components/Buttons/SecondaryButton"
+import { FaCheck } from "react-icons/fa";
+
+const AdvanceExpenseRequestView = () => {
+
+    const [alertStatus, setAlertStatus] = useState(null);
+
+    const handleApprove = () => {
+        setAlertStatus('success');
+    };
+
+    const handleReject = () => {
+        setAlertStatus('error');
+    };
+
+    const { AdvanceExpenseRequestView } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+
+    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 = [
+        "Date & time",
+        "Merchant",
+        "Category",
+        "Payment mode",
+        "Reimburse Amount",
+        "Bills",
+        "Action",
+    ];
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = AdvanceExpenseRequestView.map((item, index) => ({
+        "Date & time": item?.DateTime,
+        "Merchant": item?.Merchant,
+        "Category": item?.Category,
+        "Payment mode": item?.Paymentmode,
+        "Reimburse Amount": item?.ReimburseAmount,
+        "Bills": (
+            <HStack
+            >
+                <Box p={2} bg={"#ebe0f8"} rounded={"full"}>
+                    <LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
+                </Box>
+                <Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
+                    Invoice243
+                </Text>
+            </HStack>
+        ),
+        "Action": (
+            <Flex align={'center'} gap={3}>
+                <Text
+                    as={'span'}
+                    py={2} px={3} borderRadius={5} border={'1px solid #00A438'} color={'#00A438'} bg={'#dbf2e3'}
+                    display={'flex'}
+                    align={'center'}
+                    justifyContent={'center'}
+                    gap={1.5}
+                >
+                    <Flex align={'center'} as="span">
+                        <FaCheck />
+                    </Flex>
+                    Approve
+                </Text>
+                <Text
+                    as={'span'}
+                    py={2} px={3} borderRadius={5} border={'1px solid #EE1B24'} color={'#EE1B24'} bg={'#fee9ea'}
+                    display={'flex'}
+                    align={'center'}
+                    justifyContent={'center'}
+                    gap={1.5}
+                >
+                    <Flex align={'center'} as="span">
+                        <RxCross2 />
+                    </Flex>
+                    Reject
+                </Text>
+
+            </Flex>
+        )
+    }));
+
+    return (
+
+
+
+
+
+        <Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
+            {/* <MiniHeader
+        title={"My Requests"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        backButton={true}
+      /> */}
+            {alertStatus === 'success' && (
+                <Alert status="success" bg="#6311CB" color="#fff" rounded={"md"} mb={4}>
+                    <Box>
+                        <HStack>
+                            <IoMdCheckmark size={16} />
+                            <Text fontSize="xs" mb={0} fontWeight={500}>
+                                Approved by giftryt
+                            </Text>
+                        </HStack>
+                    </Box>
+                </Alert>
+            )}
+
+            {alertStatus === 'error' && (
+                <Alert status="error" bg="#EE1B24" color="#fff" rounded={"md"} mb={4}>
+                    <Box>
+                        <HStack>
+                            <RxCross2 size={16} />
+                            <Text fontSize="xs" mb={0} fontWeight={500}>
+                                Rejected by giftryt
+                            </Text>
+                        </HStack>
+                    </Box>
+                </Alert>
+            )}
+            <Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
+                <HStack width={"100%"} mb={8}>
+                    <Box bg={"#e5f6eb"} border={"1px solid #00A438"} px={4} py={1} rounded={"md"} h={14} flex={1}>
+                        <HStack>
+                            <IoMdCheckmark color="#00A438" />
+                            <Text color={"#00A438"} fontSize={"sm"} mb={1} fontWeight={500}>
+                                Approved
+                            </Text>
+                        </HStack>
+                        <Text color={"#667085"} fontSize={"xs"} fontWeight={400} mb={0}>
+                            By Sr. Manager
+                        </Text>
+                    </Box>
+                    <HStack bg={"#00A438"} px={4} py={1} rounded={"md"} h={14} justifyContent={"start"} flex={1}>
+                        <Text color={"#fff"} fontSize={"sm"} mb={0} fontWeight={400}>
+                            In progress
+                        </Text>
+                    </HStack>
+                    <VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
+                        <Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
+                            Pending
+                        </Text>
+                        <Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
+                            By Sr. Manager
+                        </Text>
+                    </VStack>
+                    <VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
+                        <Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
+                            Pending
+                        </Text>
+                        <Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
+                            By Sr. Manager
+                        </Text>
+                    </VStack>
+                    <VStack bg={"#f9f9f9"} px={4} py={1} rounded={"md"} h={14} spacing={1} alignItems={"start"} flex={1}>
+                        <Text color={"#79797B"} fontSize={"sm"} mb={0} fontWeight={400}>
+                            Pending
+                        </Text>
+                        <Text color={"#79797B"} fontSize={"xs"} mb={0} fontWeight={400}>
+                            By Sr. Manager
+                        </Text>
+                    </VStack>
+
+                </HStack>
+
+                <HStack justifyContent={"space-between"} mb={6}>
+                    <Box>
+                        <Text color={"#667085"} fontSize={"xs"} mb={1}>
+                            Report number : 1254587841
+                        </Text>
+                        <Text color={"#252C32"} fontSize={"sm"} mb={0} fontWeight={500}>
+                            Reimbursement report 2024
+                        </Text>
+                    </Box>
+                    <Box >
+                        <Text color={"#667085"} fontSize={"xs"} mb={1}>
+                            Amount to be reimbursed
+                        </Text>
+                        <Text color={"#252C32"} textAlign={'right'} fontSize={"sm"} fontWeight={500} mb={0}>
+                            ₹ 50,000
+                        </Text>
+                    </Box>
+                </HStack>
+
+                <HStack justifyContent={"space-between"} mb={6}>
+                    <Box>
+                        <Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
+                            Submitted by
+                        </Text>
+                        <HStack mb={4} alignItems={"start"}>
+                            <Image
+                                borderRadius='full'
+                                boxSize='40px'
+                                src='https://bit.ly/dan-abramov'
+                                alt='Dan Abramov'
+                            />
+                            <Box>
+                                <Text color={"#000000"} fontSize={"sm"} mb={0} fontWeight={500}>
+                                    Pooja Shah
+                                </Text>
+                                <Text color={"#667085"} fontSize={"xs"} mb={0} fontWeight={400}>
+                                    poojashah @wdipl.com
+                                </Text>
+                            </Box>
+                        </HStack>
+
+                        <Text color={"#252C32"} fontSize={"xs"} mb={0} fontWeight={400}>
+                            Duration - 10 June - 28 June
+                        </Text>
+                    </Box>
+                </HStack>
+
+                <NormalTable
+                    emptyMessage={`We don't have any Sponers `}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                    showRadioButton={true}
+                />
+
+                <HStack justifyContent={"end"} my={4} spacing={4}>
+                    <SecondaryButton title="Reject" onClick={handleReject} />
+                    <PrimaryButton title="Approve" onClick={handleApprove} />
+                </HStack>
+
+            </Box>
+
+      
+
+        </Box>
+    );
+};
+
+export default AdvanceExpenseRequestView;
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index 336e7bd..e1f6572 100644
--- a/src/Routes/Routes.js
+++ b/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 GiftDashboard from "../Pages/OptiFiiGifsAndVouchers/GiftDashboard";
+import AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
 export const RouteLink = [
   { path: "/", Component: Dashbaord },
   { path: "/expenses", Component: Expenses },
@@ -30,6 +31,7 @@ export const RouteLink = [
   { path: "/wallet-program", Component: WalletProgram },
   { path: "/reimbursement-request", Component: ReimbursementRequest },
   { path: "/advance-expense-request", Component: AdvanceExpenseRequest },
+  { path: "/advance-expense-request-view", Component: AdvanceExpenseRequestView },
   { path: "/optiFii-benefit", Component: OptiFiiTaxBenefit },
   { path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },
   { path: "/reports", Component: Report },