[ working👷‍♂️ ]

2025-02-06 15:07:42 +05:30
parent 127cce73e6
commit aabbbfff8b
13 changed files with 758 additions and 107 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,11 @@
        "@chakra-ui/react": "^3.2.3",
        "@emotion/react": "^11.14.0",
        "@emotion/styled": "^11.14.0",
+        "chart.js": "^4.4.7",
        "framer-motion": "^11.18.0",
        "next-themes": "^0.4.4",
        "react": "^18.3.1",
+        "react-chartjs-2": "^5.3.0",
        "react-dom": "^18.3.1",
        "react-hook-form": "^7.54.2",
        "react-icons": "^5.4.0",
@@ -1668,7 +1670,6 @@
    },
    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
      "version": "1.3.0",
-      "extraneous": true,
      "inBundle": true,
      "license": "MIT",
      "engines": {
@@ -2660,6 +2661,12 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5220,6 +5227,18 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/chart.js": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
+      "integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
    "node_modules/chokidar": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -8048,6 +8067,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-chartjs-2": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+      "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/react-dom": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
--- a/package.json
+++ b/package.json
@@ -13,9 +13,11 @@
    "@chakra-ui/react": "^3.2.3",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
+    "chart.js": "^4.4.7",
    "framer-motion": "^11.18.0",
    "next-themes": "^0.4.4",
    "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.54.2",
    "react-icons": "^5.4.0",
--- a/src/Pages/Dashboard/Dashboard.tsx
+++ b/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;
--- a/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
+++ b/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;
--- a/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
+++ b/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;
--- a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
+++ b/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
--- a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
+++ b/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;
--- a/src/Routes/Nav.ts
+++ b/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: [
--- a/src/assets/deleteIcon.png
+++ b/src/assets/deleteIcon.png
--- a/src/components/AlertDailog.tsx
+++ b/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%"
--- a/src/components/Charts/BarChart.tsx
+++ b/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;
--- a/src/components/Charts/SemiDoughnutChart.tsx
+++ b/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;
--- a/src/components/ViewDailog.tsx
+++ b/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;