N

src/Pages/ManageUser/RegisterUsers/Component/DeleteConfirmationDialog.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+
+import {
+  DialogActionTrigger,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../../components/ui/dialog";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { DialogBody, Image, Text } from "@chakra-ui/react";
+import { Button } from "../../../../components/ui/button";
+import DelteIcon from "../../../../assets/icons/delete.png";
+
+interface DeleteConfirmationDialogProps {
+  onConfirm: () => void;
+}
+
+const DeleteConfirmationDialog: React.FC<DeleteConfirmationDialogProps> = ({
+  onConfirm,
+}) => {
+  return (
+    <DialogRoot role="alertdialog">
+      <DialogTrigger asChild>
+        <RiDeleteBin5Line cursor="pointer" size="18px" />
+      </DialogTrigger>
+      <DialogContent bgColor="#fff">
+        <DialogHeader display="flex" justifyContent="center">
+          {/* <DialogTitle>Are you sure?</DialogTitle> */}
+
+          <Image src={DelteIcon} h={"80px"} width="64.97px" />
+        </DialogHeader>
+        <DialogBody
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          color="black"
+        >
+          <Text
+            fontWeight={600}
+            fontSize="md"
+            color="#000000"
+            textAlign="center"
+          >
+            Delete User
+          </Text>
+          <p style={{ textAlign: "center", color: "#000000CC", width: "30%" }}>
+            {" "}
+            Are you sure you want to delete this user
+          </p>
+        </DialogBody>
+        <DialogFooter width="100%">
+          <DialogActionTrigger asChild>
+            <Button
+              width="50%"
+              color="black"
+              _hover={{ bgColor: "white" }}
+              variant="outline"
+              borderRadius="94px"
+            >
+              No
+            </Button>
+          </DialogActionTrigger>
+          <Button
+            borderRadius="94px"
+             width="50%"
+            colorPalette="teal"
+            onClick={onConfirm}
+          >
+            Yes{" "}
+          </Button>
+        </DialogFooter>
+        <DialogCloseTrigger />
+      </DialogContent>
+    </DialogRoot>
+  );
+};
+
+export default DeleteConfirmationDialog;

src/Pages/ManageUser/RegisterUsers/Component/EditRegisterUser.tsx

@@ -0,0 +1,77 @@
+import React, { useRef } from "react";
+import { Input, Stack } from "@chakra-ui/react";
+import { Button } from "../../../../components/ui/button";
+import {
+  DialogActionTrigger,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../../components/ui/dialog";
+import { Field } from "../../../../components/ui/field";
+import { FaRegEye } from "react-icons/fa";
+
+interface EditRegisterUser {
+  onConfirm: () => void;
+}
+
+const EditRegisterUser: React.FC<EditRegisterUser> = ({ onConfirm }) => {
+  const ref = useRef<HTMLInputElement>(null); // Initialize the ref properly
+
+  return (
+    <div>
+      <DialogRoot initialFocusEl={() => ref.current}>
+        <DialogTrigger asChild>
+          <FaRegEye cursor="pointer" size="18px" />
+        </DialogTrigger>
+        <DialogContent bgColor="#fff" color="black">
+          <DialogHeader>
+            <DialogTitle fontSize="md">Edit user Accounts</DialogTitle>
+          </DialogHeader>
+          <DialogBody pb="4">
+            <Stack gap="4">
+              <Field fontSize="sm" label="First Name">
+                <Input
+                  fontSize="sm"
+                  bgColor="#EEEEEE"
+                  borderRadius="50px"
+                  placeholder="First Name"
+                />
+              </Field>
+              <Field fontSize="sm" label="Gender">
+                <Input
+                  fontSize="sm"
+                  bgColor="#EEEEEE"
+                  borderRadius="50px"
+                  ref={ref}
+                  placeholder="Focus First"
+                />
+              </Field>
+
+              <Field fontSize="sm" label="Last Name">
+                <Input
+                  fontSize="sm"
+                  bgColor="#EEEEEE"
+                  borderRadius="50px"
+                  ref={ref}
+                  placeholder="Focus First"
+                />
+              </Field>
+            </Stack>
+          </DialogBody>
+          <DialogFooter>
+            <DialogActionTrigger asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogActionTrigger>
+            <Button onClick={onConfirm}>Save</Button>
+          </DialogFooter>
+        </DialogContent>
+      </DialogRoot>
+    </div>
+  );
+};
+
+export default EditRegisterUser;

src/Pages/ManageUser/RegisterUsers/RegisterUsers.tsx

@@ -1,22 +1,19 @@
-import {
-  Box,
-  HStack,
-  Input,
-  Text
-} from "@chakra-ui/react";
+import { Box, HStack, Input, Text } from "@chakra-ui/react";
 import { CiEdit } from "react-icons/ci";
 import { FaRegEye } from "react-icons/fa";
 import { LuSearch } from "react-icons/lu";
-import { RiDeleteBin5Line } from "react-icons/ri";
 import DataTable from "../../../components/DataTable";
 import MainFrame from "../../../components/MainFrame";
 import { InputGroup } from "../../../components/ui/input-group";
 import {
   PaginationItems,
   PaginationNextTrigger,
-  PaginationRoot
+  PaginationRoot,
 } from "../../../components/ui/pagination";
 import { Switch } from "../../../components/ui/switch";
+import { Button } from "../../../components/ui/button";
+import DeleteConfirmationDialog from "./Component/DeleteConfirmationDialog";
+import EditRegisterUser from "./Component/EditRegisterUser";
 
 // Table setup
 const tableHeadRow = [
@@ -41,7 +38,7 @@ const usersData: any[] = [
     "Type of User": "Admin",
     Language: "English",
     "Activate/Deactivate": (
-      <HStack justifyContent="center" >
+      <HStack justifyContent="center">
         <Text>Yes</Text>
         <Switch size="sm" colorPalette="teal" />
         <Text>No</Text>
@@ -49,9 +46,18 @@ const usersData: any[] = [
     ),
     Action: (
       <HStack justifyContent="center" gap={2}>
-        <FaRegEye cursor="pointer" size="18px" />
+        {/* <FaRegEye cursor="pointer" size="18px" /> */}
+        <EditRegisterUser
+          onConfirm={() => {
+            console.log("User deleted:", i + 1);
+          }}
+        />
         <CiEdit cursor="pointer" size="18px" />
-        <RiDeleteBin5Line cursor="pointer" size="18px" />
+        <DeleteConfirmationDialog
+          onConfirm={() => {
+            console.log("User deleted:", i + 1);
+          }}
+        />
       </HStack>
     ),
   })),
@@ -87,6 +93,7 @@ const RegisterUsers = () => {
       </HStack>
 
       <DataTable tableHeadRow={tableHeadRow} data={usersData} />
+
       <PaginationRoot
         p={4}
         mt={8}
@@ -95,7 +102,6 @@ const RegisterUsers = () => {
         defaultPage={1}
       >
         <HStack justifyContent="flex-end" mb={5}>
-          {/* <PaginationPrevTrigger /> */}
           <PaginationItems />
           <PaginationNextTrigger />
         </HStack>