[ working👷‍♂️ ]

src/Pages/Dashboard/Dashboard.tsx

@@ -1,8 +1,105 @@
+import {
+  Box,
+  createListCollection,
+  Heading,
+  HStack,
+  Stack,
+  Status,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import BarChart from "../../components/Charts/BarChart";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+  SelectValueText,
+} from "../../components/ui/select";
+import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
 
 const Dashboard = () => {
-  return (
-    <div>Dashboard</div>
-  )
-}
+  const frameworks = createListCollection({
+    items: [
+      { label: "React.js", value: "react" },
+      { label: "Vue.js", value: "vue" },
+      { label: "Angular", value: "angular" },
+      { label: "Svelte", value: "svelte" },
+    ],
+  });
 
-export default Dashboard
+  return (
+    <MainFrame>
+      <Box display={"flex"} p={"20px"} gap={5}>
+        <Box w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
+          <Heading fontSize={"sm"} p={2}>
+            Total Users
+          </Heading>
+          <Tabs.Root
+            size={"sm"}
+            w={"80%"}
+            m={"auto"}
+            variant="enclosed"
+            fitted
+            defaultValue={"tab-1"}
+            mb={6}
+          >
+            <Tabs.List>
+              <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
+              <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+              <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+            </Tabs.List>
+          </Tabs.Root>
+          <Box>
+            <SemiDoughnutChart />
+          </Box>
+
+          <Box w={'80%'} m={'auto'} display={'flex'} justifyContent={'space-between'} mt={8}>
+            <Status.Root colorPalette="blue">
+              <Status.Indicator />
+              Recruiter <Text fontWeight={500}>2554</Text>
+            </Status.Root>
+            <Status.Root colorPalette="blue">
+              <Status.Indicator />
+              Customer <Text fontWeight={500}>1224</Text>
+            </Status.Root>
+          </Box>
+        </Box>
+        <Box
+          p={"20px"}
+          w={"50%"}
+          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+        >
+          <HStack alignItems={"center"} mb={4}>
+            <Text fontSize={"sm"}>Item approvals in</Text>
+            <SelectRoot collection={frameworks} size="xs" width="200px">
+              <SelectTrigger>
+                <SelectValueText p={2} placeholder="Select movie" />
+              </SelectTrigger>
+              <SelectContent p={2}>
+                {frameworks.items.map((movie) => (
+                  <SelectItem item={movie} key={movie.value}>
+                    {movie.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </SelectRoot>
+          </HStack>
+          <BarChart />
+        </Box>
+        <Box
+          w={"20%"}
+          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+        ></Box>
+      </Box>
+      <Box p={"20px"} display={"flex"} gap={5}>
+        <Box w={"50%"} bg={"#f2f2f2"} h={400}></Box>
+        <Box w={"50%"} bg={"#f2f2f2"} h={400}></Box>
+      </Box>
+    </MainFrame>
+  );
+};
+
+export default Dashboard;

src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx

@@ -0,0 +1,128 @@
+import { Field, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogActionTrigger,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Button } from "../../../components/ui/button";
+import { IoMdAdd } from "react-icons/io";
+
+function AddRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button px={5} size={"xs"} bg={"#02A0A0"}>
+          <IoMdAdd /> Add
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        maxW="90vw"
+        h="auto"
+        p={4}
+      >
+        <DialogHeader bg="white" p={0}>
+          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
+            Add User Accounts
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack pt={3} pb={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                First Name
+              </Field.Label>
+              <Input
+                name="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                Last Name
+              </Field.Label>
+              <Input
+                name="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Gender
+              </Field.Label>
+              <Input
+                name="Female"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                DOB
+              </Field.Label>
+              <Input
+                name="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                OTP Verified
+              </Field.Label>
+              <Input
+                name="Yes"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Language
+              </Field.Label>
+              <Input
+                name="English, Hindi, Marathi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter mt={5}>
+          <DialogActionTrigger asChild>
+            <Button rounded={"md"} w={"100%"} size={"sm"} bg={"#02A0A0"}>
+              Save
+            </Button>
+          </DialogActionTrigger>
+        </DialogFooter>
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default AddRegisterUsers;

src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx

@@ -0,0 +1,125 @@
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogActionTrigger,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { BiEdit } from "react-icons/bi";
+import { Button } from "../../../components/ui/button";
+
+function EditRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <BiEdit style={{ cursor: "pointer", fontSize: "16px" }} />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        maxW="90vw"
+        h="auto"
+        p={4}
+      >
+        <DialogHeader bg="white" p={0}>
+          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
+            Edit user Accounts
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack pt={3} pb={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                First Name
+              </Field.Label>
+              <Input
+                name="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                Last Name
+              </Field.Label>
+              <Input
+                name="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Gender
+              </Field.Label>
+              <Input
+                name="Female"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                DOB
+              </Field.Label>
+              <Input
+                name="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                OTP Verified
+              </Field.Label>
+              <Input
+                name="Yes"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Language
+              </Field.Label>
+              <Input
+                name="English, Hindi, Marathi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter mt={5}>
+          <DialogActionTrigger asChild>
+            <Button rounded={'md'} w={"100%"} size={'sm'} bg={'#02A0A0'}>Save</Button>
+          </DialogActionTrigger>
+        </DialogFooter>
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default EditRegisterUsers;

src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx

@@ -1,18 +1,18 @@
 import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame";
 import AlertDailog from "../../../components/AlertDailog";
-import { FcCancel } from "react-icons/fc";
 import { NavLink } from "react-router-dom";
-import { MdOutlineRemoveRedEye } from "react-icons/md";
 import { RiDeleteBin5Line } from "react-icons/ri";
 import DataTable from "../../../components/DataTable";
-import { HiCheck } from "react-icons/hi2";
-import { HiX } from "react-icons/hi";
 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";
+import ViewRegisterUsers from "./ViewRegisterUsers";
+import EditRegisterUsers from "./EditRegisterUsers";
+import { Button } from "../../../components/ui/button";
+import { IoMdAdd } from "react-icons/io";
+import AddRegisterUsers from "./AddRegisterUsers";
 
 const tableHeadRow = [
   "Sr. No",
@@ -42,24 +42,14 @@ const registerUser: any[] = [
     ),
     "Action": (
       <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>
-
+        <ViewRegisterUsers />
+        <EditRegisterUsers />
         {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
           AltertTiggerIcon={RiDeleteBin5Line}
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
-          alertCaption="are you sure you want to delete ?"
+          alertCaption="Are You Sure You Want To Delete This User ?"
           onConfirm={() => {
             console.log("User deleted:", i + 1);
           }}
@@ -105,6 +95,7 @@ const RegisterUsers = () => {
                 ps={8}
               />
             </InputGroup>
+            <AddRegisterUsers />
           </HStack>
         </HStack>
         <DataTable

src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx

@@ -0,0 +1,126 @@
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+
+function ViewRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <MdOutlineRemoveRedEye
+          color="#000"
+          style={{ cursor: "pointer", fontSize: "16px" }}
+        />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        maxW="90vw"
+        h="auto"
+        p={4}
+      >
+        <DialogHeader bg="white" p={0}>
+          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
+            View Details
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack pt={3} pb={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                First Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                Last Name
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Gender
+              </Field.Label>
+              <Input
+                value="Female"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                DOB
+              </Field.Label>
+              <Input
+                value="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                OTP Verified
+              </Field.Label>
+              <Input
+                value="Yes"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Language
+              </Field.Label>
+              <Input
+                value="English, Hindi, Marathi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default ViewRegisterUsers;

src/Routes/Nav.ts

@@ -17,7 +17,7 @@ export const nav = [
         },
         {
           title: "Manage Users",
-          path: "/register-users",
+          path: "",
           Icon: BiUserPin,
           type:'multiple',
           children: [
@@ -65,7 +65,7 @@ export const nav = [
         },
         {
           title: "Manage CMS",
-          path: "/faq",
+          path: "",
           Icon: AiOutlineFileText,
           type:'multiple',
           children: [
@@ -104,7 +104,7 @@ export const nav = [
         },
         {
           title: "Master Module",
-          path: "/agency-master",
+          path: "",
           Icon: BsBoxes,
           type:'multiple',
           children: [

src/components/AlertDailog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { DialogBody, HStack, Icon, Text } from "@chakra-ui/react";
+import { DialogBody, HStack, Icon, Image, Text } from "@chakra-ui/react";
 import { Button } from "./ui/button";
 import {
   DialogActionTrigger,
@@ -9,6 +9,7 @@ import {
   DialogRoot,
   DialogTrigger,
 } from "./ui/dialog";
+import DeleteICN from '../assets/deleteIcon.png'
 
 interface DeleteConfirmationDialogProps {
   onConfirm?: () => void;
@@ -65,7 +66,8 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
           p={8}
           gap={2}
         >
-          {alertIcon && alertIcon}
+          {/* {alertIcon && alertIcon} */}
+          <Image  w={'40px'} src={DeleteICN} />
           <Text
             mt={3}
             fontWeight={600}
@@ -84,7 +86,7 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
             {" "}
             {alertCaption}
           </Text>
-          <HStack mt={2} w={"100%"}>
+          <HStack mt={4} w={"100%"}>
             <DialogActionTrigger asChild>
               <Button
                 width="50%"

src/components/Charts/BarChart.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { BiBorderRadius } from "react-icons/bi";
+
+// ✅ Register the required components
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+const BarChart = () => {
+  // 📊 Chart Data
+  const data = {
+    labels: ["Jan", "Jan", "Jan", "Jan", "Jan","Jan", "Jan", "Jan"],
+    datasets: [
+      {
+        label: "Sales ($)",
+        data: [1, 2, 3, 5, 4,6,5,8],
+        backgroundColor: "#6976EB", // Light blue color
+        borderColor: "#6976EB",
+        borderWidth: 1,
+        borderRadius:4
+      },
+    ],
+  };
+
+  // ⚙️ Chart Options
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: { display: false },
+      title: { display: false, text: "Monthly Sales Data" },
+    },
+  };
+
+  return (
+    <div>
+      <Bar data={data} options={options} />
+    </div>
+  );
+};
+
+export default BarChart;

src/components/Charts/SemiDoughnutChart.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Doughnut } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { FaUser } from "react-icons/fa";
+
+// ✅ Register required components
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+const SemiDoughnutChart = () => {
+  // 📊 Chart Data
+  const data = {
+    labels: ["Recruiter", "Customer"],
+    datasets: [
+      {
+        data: [2554, 2800], // Values
+        backgroundColor: ["#E0E0E0", "#3D5AFE"], // Grey and Blue
+        borderWidth: 0, // No border
+        cutout: "90%", // Makes it a doughnut shape
+        circumference: 270, // Semi-circle
+        rotation: 225, // Starts from the top
+        
+      },
+    ],
+  };
+
+  // ⚙️ Chart Options
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: false }, // Hide legend
+      tooltip: { enabled: true },
+    },
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      <Doughnut data={data} options={options} />
+      <div
+        style={{
+          position: "absolute",
+          top: "55%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          fontSize: "20px",
+          fontWeight: "bold",
+          color: "#3D5AFE",
+          backgroundColor:'#ECEAF8',
+          padding:'15px',
+          borderRadius:'50%'
+        }}
+      >
+        <FaUser />
+      </div>
+    </div>
+  );
+};
+
+export default SemiDoughnutChart;

src/components/ViewDailog.tsx

@@ -1,87 +1,125 @@
-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, Image, Input, Stack } from "@chakra-ui/react"
-import img from "../assets/waterfall.jpg"
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Button } from "./ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import { Field, Image, Input, Stack } from "@chakra-ui/react";
+import img from "../assets/waterfall.jpg";
 function ViewDailog() {
-    return (
-        // <DialogRoot placement={"center"}
-        // >
-        //     <DialogTrigger asChild>
-        //         <Button variant="outline" size="sm">
-        //             <MdOutlineRemoveRedEye
-        //                 style={{ cursor: "pointer", fontSize: "16px" }}
-        //             />       </Button>
-        //     </DialogTrigger>
-        //     <DialogContent w={"700px"} h={"346px"}>
-        //         <DialogHeader bg={'#fff'} p={3}>
-        //             <DialogTitle alignSelf={"center"} color={"black"}>View Details</DialogTitle>
-        //         </DialogHeader>
-        //         <DialogBody bg={"#fff"}>
-        //             <Stack p={4}>
-        //                 <Field.Root>
-        //                     <Field.Label color={"black"}>Title</Field.Label>
-        //                     <Input placeholder="Enter the Title" bgColor={'#EEEEEE'} color={"black"} border={"none"} pl={2} />
-        //                     <Field.Label color={"black"}>Title</Field.Label>
-        //                     <Input placeholder="Enter the Title" bgColor={'#EEEEEE'} color={"black"} border={"none"} pl={2} />
-        //                     <Field.Label color={"black"}>Title</Field.Label>
-        //                     <Input placeholder="Enter the Title" bgColor={'#EEEEEE'} color={"black"} border={"none"} pl={2} />
-        //                     <Field.Label color={"black"}>Image</Field.Label>
-        //                     <Image src={img} />
-        //                 </Field.Root>
+  return (
+    // <DialogRoot placement={"center"}
+    // >
+    //     <DialogTrigger asChild>
+    //         <Button variant="outline" size="sm">
+    //             <MdOutlineRemoveRedEye
+    //                 style={{ cursor: "pointer", fontSize: "16px" }}
+    //             />       </Button>
+    //     </DialogTrigger>
+    //     <DialogContent w={"700px"} h={"346px"}>
+    //         <DialogHeader bg={'#fff'} p={3}>
+    //             <DialogTitle alignSelf={"center"} color={"black"}>View Details</DialogTitle>
+    //         </DialogHeader>
+    //         <DialogBody bg={"#fff"}>
+    //             <Stack p={4}>
+    //                 <Field.Root>
+    //                     <Field.Label color={"black"}>Title</Field.Label>
+    //                     <Input placeholder="Enter the Title" bgColor={'#EEEEEE'} color={"black"} border={"none"} pl={2} />
+    //                     <Field.Label color={"black"}>Title</Field.Label>
+    //                     <Input placeholder="Enter the Title" bgColor={'#EEEEEE'} color={"black"} border={"none"} pl={2} />
+    //                     <Field.Label color={"black"}>Title</Field.Label>
+    //                     <Input placeholder="Enter the Title" bgColor={'#EEEEEE'} color={"black"} border={"none"} pl={2} />
+    //                     <Field.Label color={"black"}>Image</Field.Label>
+    //                     <Image src={img} />
+    //                 </Field.Root>
 
-        //             </Stack>
-        //         </DialogBody>
-        //         {/* <DialogFooter>
-        //             <DialogActionTrigger asChild>
-        //                 <Button variant="outline">Cancel</Button>
-        //             </DialogActionTrigger>
-        //             <Button>Save</Button>
-        //         </DialogFooter> */}
-        //         <DialogCloseTrigger color={'black'} />
-        //     </DialogContent>
-        // </DialogRoot>
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button>
-            </DialogTrigger>
+    //             </Stack>
+    //         </DialogBody>
+    //         {/* <DialogFooter>
+    //             <DialogActionTrigger asChild>
+    //                 <Button variant="outline">Cancel</Button>
+    //             </DialogActionTrigger>
+    //             <Button>Save</Button>
+    //         </DialogFooter> */}
+    //         <DialogCloseTrigger color={'black'} />
+    //     </DialogContent>
+    // </DialogRoot>
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button bg={"transparent"} size="sm">
+          <MdOutlineRemoveRedEye
+            style={{ cursor: "pointer", fontSize: "16px" }}
+          />
+        </Button>
+      </DialogTrigger>
 
-            <DialogContent
-                bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
-            >
-                <DialogHeader bg="white" p={3}>
-                    <DialogTitle alignSelf="center" color="black">View Details</DialogTitle>
-                </DialogHeader>
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        maxW="90vw"
+        h="auto"
+        p={4}
+      >
+        <DialogHeader bg="white" p={3}>
+          <DialogTitle alignSelf="center" color="black">
+            View Details
+          </DialogTitle>
+        </DialogHeader>
 
-                <DialogBody bg="white">
-                    <Stack p={4} >
-                        <Field.Root>
-                            <Field.Label color="black" pt={2}>Title</Field.Label>
-                            <Input placeholder="Enter the Title" bgColor="#EEEEEE" color="black" border="none" pl={2} />
+        <DialogBody bg="white">
+          <Stack p={4}>
+            <Field.Root>
+              <Field.Label color="black" pt={2}>
+                Title
+              </Field.Label>
+              <Input
+                placeholder="Enter the Title"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+              />
 
-                            <Field.Label color="black" pt={2}>Subtitle</Field.Label>
-                            <Input placeholder="Enter the Subtitle" bgColor="#EEEEEE" color="black" border="none" pl={2} />
+              <Field.Label color="black" pt={2}>
+                Subtitle
+              </Field.Label>
+              <Input
+                placeholder="Enter the Subtitle"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+              />
 
-                            <Field.Label pt={2} color="black">Description</Field.Label>
-                            <Input placeholder="Enter the Description" bgColor="#EEEEEE" color="black" border="none" pl={2} />
+              <Field.Label pt={2} color="black">
+                Description
+              </Field.Label>
+              <Input
+                placeholder="Enter the Description"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+              />
 
-                            <Field.Label pt={2} color="black">Image</Field.Label>
-                            <Image src={img} w="100%" maxH="150px" objectFit="contain" />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
+              <Field.Label pt={2} color="black">
+                Image
+              </Field.Label>
+              <Image src={img} w="100%" maxH="150px" objectFit="contain" />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewDailog
+export default ViewDailog;