[ working👷‍♂️ ]

2025-02-06 15:07:42 +05:30
parent 127cce73e6
commit aabbbfff8b
13 changed files with 758 additions and 107 deletions
--- 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;