From 6a73d33cda311325b74d431d54eee2967f3f0fce Mon Sep 17 00:00:00 2001
From: "Pratham.Mandavkar" <pratham.mandavkar@wdimails.com>
Date: Tue, 21 Jan 2025 12:14:28 +0530
Subject: [PATCH] N

---
 .../Component/DeleteConfirmationDialog.tsx    |  82 ++++++++++++++++++
 .../Component/EditRegisterUser.tsx            |  77 ++++++++++++++++
 .../RegisterUsers/RegisterUsers.tsx           |  30 ++++---
 src/assets/icons/delete.png                   | Bin 0 -> 2019 bytes
 4 files changed, 177 insertions(+), 12 deletions(-)
 create mode 100644 src/Pages/ManageUser/RegisterUsers/Component/DeleteConfirmationDialog.tsx
 create mode 100644 src/Pages/ManageUser/RegisterUsers/Component/EditRegisterUser.tsx
 create mode 100644 src/assets/icons/delete.png

diff --git a/src/Pages/ManageUser/RegisterUsers/Component/DeleteConfirmationDialog.tsx b/src/Pages/ManageUser/RegisterUsers/Component/DeleteConfirmationDialog.tsx
new file mode 100644
index 0000000..88af6e8
--- /dev/null
+++ b/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;
diff --git a/src/Pages/ManageUser/RegisterUsers/Component/EditRegisterUser.tsx b/src/Pages/ManageUser/RegisterUsers/Component/EditRegisterUser.tsx
new file mode 100644
index 0000000..e24a0e9
--- /dev/null
+++ b/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;
diff --git a/src/Pages/ManageUser/RegisterUsers/RegisterUsers.tsx b/src/Pages/ManageUser/RegisterUsers/RegisterUsers.tsx
index e0e1807..ed37e1e 100644
--- a/src/Pages/ManageUser/RegisterUsers/RegisterUsers.tsx
+++ b/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>
diff --git a/src/assets/icons/delete.png b/src/assets/icons/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..383f0f0af79be69ceba8ebe58e17ea4a1e5d8415
GIT binary patch
literal 2019
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

literal 0
HcmV?d00001