[ working ]

src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx

@@ -1,12 +1,78 @@
-import MainFrame from "../../../components/MainFrame"
+import { Box, HStack, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame";
+import DataTable from "../../../components/DataTable";
+import { Switch } from "../../../components/ui/switch";
+import { InputGroup } from "../../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
 
+const tableHeadRow = [
+  "Sr. No",
+  "First Name",
+  "Last Name",
+  "Company name",
+  "Activate/Deactivate",
+];
+
+const manageUser: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "First Name": "Ritesh",
+    "Last Name": "akanksha@gmail.com",
+    "Company name": "9876543210",
+    "Activate/Deactivate": (
+      <Box display={'flex'} justifyContent={'center'}>
+        <Switch colorPalette={'teal'} />
+      </Box>
+    ),
+  })),
+];
 
 const DeactivatedAccounts = () => {
   return (
     <MainFrame>
-      DeactivatedAccounts
-    </MainFrame>
-  )
-}
+      <Box>
+      <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+             Deactivated User Accounts
+          </Text>
 
-export default DeactivatedAccounts
+          <HStack>
+            <InputGroup
+              startElement={
+                <LuSearch fontSize={"xs"}  style={{position:'relative',left:'10px'}} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={4}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={manageUser}
+        />
+      </Box>
+    </MainFrame>
+  );
+};
+
+export default DeactivatedAccounts;

src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx

@@ -12,11 +12,12 @@ import { Switch } from "../../../components/ui/switch";
 import { Button } from "../../../components/ui/button";
 import { InputGroup } from "../../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
+import { BiEdit } from "react-icons/bi";
 
 const tableHeadRow = [
   "Sr. No",
   "First Name",
-  "Mobile Number ",
+  "Mobile Number",
   "Gender",
   "DOB",
   "Type Of User",
@@ -29,7 +30,7 @@ const registerUser: any[] = [
   ...Array.from({ length: 12 }, (_, i) => ({
     "Sr. No": i + 1,
     "First Name": "Ritesh",
-    "Mobile Number ": "akanksha@gmail.com",
+    "Mobile Number": "akanksha@gmail.com",
     "Gender": "9876543210",
     "DOB": "Female",
     "Type Of User": "15-01-1990",
@@ -40,22 +41,19 @@ const registerUser: any[] = [
       </Box>
     ),
     "Action": (
-      <HStack justifyContent="center">
-        <AlertDailog
-          AltertTiggerIcon={FcCancel}
-          alertText="Suspend User"
-          alertIcon={<Image src={""} h={"39px"} />}
-          alertCaption="Are you sure you want to deactivate this user?"
-          onConfirm={() => {
-            console.log("User deleted:", i + 1);
-          }}
-        />
+      <HStack justifyContent="center">  
         <NavLink to="/manage-user/active-user/view-active-user">
           <MdOutlineRemoveRedEye
             style={{ cursor: "pointer", fontSize: "16px" }}
           />
         </NavLink>
 
+        <NavLink to="/manage-user/active-user/view-active-user">
+          <BiEdit
+            style={{ cursor: "pointer", fontSize: "16px" }}
+          />
+        </NavLink>
+
         {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
           AltertTiggerIcon={RiDeleteBin5Line}