Merge branch 'parth' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel

package-lock.json

@@ -1670,7 +1670,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {

src/Pages/Dashboard/AgencyName.tsx

@@ -0,0 +1,103 @@
+import { Box, HStack, Image, Input, Stack, Text } from "@chakra-ui/react";
+import React, { useState, useEffect } from "react";
+import { Button } from "../../components/ui/button";
+import { IoAddSharp } from "react-icons/io5";
+import delateIcon from "../../assets/deleteIcon.png";
+import { FaClockRotateLeft } from "react-icons/fa6";
+
+interface Todo {
+  id: number;
+  text: string;
+  completed: boolean;
+  timestamp: string;
+}
+
+const AgencyName: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [input, setInput] = useState<string>("");
+
+  
+  const getCurrentTime = () => {
+    const now = new Date();
+    return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+
+
+  const addTodo = () => {
+    if (input.trim() === "") return;
+    setTodos([...todos, { id: Date.now(), text: input, completed: false, timestamp: getCurrentTime() }]);
+    setInput(""); 
+  };
+
+  // Delete a task
+  const deleteTodo = (id: number) => {
+    setTodos(todos.filter((todo) => todo.id !== id));
+  };
+
+  useEffect(() => {
+    const savedTodos = localStorage.getItem("todos");
+    if (savedTodos) {
+      setTodos(JSON.parse(savedTodos));
+    }
+  }, []); // Runs only on mount
+
+  // 🔹 Save todos to localStorage whenever they change
+  useEffect(() => {
+    if (todos.length > 0) {
+      localStorage.setItem("todos", JSON.stringify(todos));
+    }
+  }, [todos]); // Runs when `todos` changes
+
+
+  return (
+    <Box p={"10px"}>
+      <HStack justifyContent={"space-between"} mb={5}>
+        <Text fontSize={"xs"} fontWeight={500}>
+          Add Agency Name
+        </Text>
+        <Button
+          bg={"#fff"}
+          color={"#222222CC"}
+          px={3}
+          fontSize={"12px"}
+          h={"28px"}
+          onClick={addTodo}
+        >
+          <IoAddSharp /> Add
+        </Button>
+      </HStack>
+      <Input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Add a task..."
+        backgroundColor={"#fff"}
+        size={"sm"}
+        w={"100%"}
+        p={2}
+        mb={4}
+      />
+      {todos.map((todo) => (
+        <HStack key={todo.id} backgroundColor={"#fff"} rounded={5} mb={3} p={4} justifyContent={'space-between'} alignItems={'inherit'}>
+          <Text fontSize={'sm'} color={'#222222bd'} fontWeight={400}>{todo.text}</Text>
+          <Stack display={'flex'} alignItems={'end'} w={'130px'}>
+            <Box display={'flex'} alignItems={'center'} gap={2}>
+                <FaClockRotateLeft fontSize={'10px'} style={{fontSize:'13px',color:'#222222bd'}} /> 
+                <Text fontSize={"xs"} color={"#222222bd"}>{todo.timestamp}</Text>
+            </Box>
+            <Box
+              onClick={() => deleteTodo(todo.id)}
+              bg={"none"}
+              color={"#22222299"}
+              cursor={'pointer'}
+            >
+              <Image w={"16px"} src={delateIcon} />
+            </Box>
+          </Stack>
+        </HStack>
+      ))}
+    </Box>
+  );
+};
+
+export default AgencyName;

src/Pages/Dashboard/Dashboard.tsx

@@ -19,17 +19,55 @@ import {
   SelectValueText,
 } from "../../components/ui/select";
 import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
+import { Button } from "../../components/ui/button";
+import {
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemTrigger,
+  AccordionRoot,
+} from "../../components/ui/accordion";
+import AgencyName from "./AgencyName";
+import CircularProgress from "../../components/Charts/CircularProgress";
+import CircularApp from "../../components/Charts/CircularProgress";
 
 const Dashboard = () => {
   const frameworks = createListCollection({
     items: [
-      { label: "React.js", value: "react" },
-      { label: "Vue.js", value: "vue" },
-      { label: "Angular", value: "angular" },
-      { label: "Svelte", value: "svelte" },
+      { label: "Today", value: "Today" },
+      { label: "Week", value: "Week" },
+      { label: "Month", value: "Month" },
+      { label: "Year", value: "Year" },
     ],
   });
 
+  const accItems = [
+    {
+      value: "1",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "2",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "3",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "4",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "5",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+  ];
+
   return (
     <MainFrame>
       <Box display={"flex"} p={"20px"} gap={5}>
@@ -47,16 +85,28 @@ const Dashboard = () => {
             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.Trigger fontSize={"xs"} value="tab-1">
+                Past 24 hrs
+              </Tabs.Trigger>
+              <Tabs.Trigger fontSize={"xs"} value="tab-2">
+                Total Users
+              </Tabs.Trigger>
+              <Tabs.Trigger fontSize={"xs"} value="tab-3">
+                New Signups
+              </Tabs.Trigger>
             </Tabs.List>
           </Tabs.Root>
           <Box>
             <SemiDoughnutChart />
           </Box>
 
-          <Box w={'80%'} m={'auto'} display={'flex'} justifyContent={'space-between'} mt={8}>
+          <Box
+            w={"80%"}
+            m={"auto"}
+            display={"flex"}
+            justifyContent={"space-between"}
+            mt={8}
+          >
             <Status.Root colorPalette="blue">
               <Status.Indicator />
               Recruiter <Text fontWeight={500}>2554</Text>
@@ -92,11 +142,50 @@ const Dashboard = () => {
         <Box
           w={"20%"}
           boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
-        ></Box>
+          p={'10px'}
+        >
+          <Text fontSize={"sm"} fontWeight={500} pt={3}>Number Of Groups created</Text>
+          <CircularApp />
+        </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 w={"50%"} bg={"#f2f2f2"} h={400} p={"10px"} overflow={'scroll'}>
+          <HStack justifyContent={"space-between"} mb={5}>
+            <Text fontSize={"xs"} fontWeight={500}>Faqs</Text>
+            <Button
+              bg={"#fff"}
+              color={"#222222CC"}
+              px={3}
+              fontSize={"12px"}
+              h={"28px"}
+            >
+              View ALL
+            </Button>
+          </HStack>
+          <AccordionRoot collapsible defaultValue={["b"]}>
+            {accItems.map((item, index) => (
+              <AccordionItem
+                key={index}
+                value={item.value}
+                bg={"#fff"}
+                mb={2}
+                p={"12px"}
+                rounded={5}
+                borderBottom={0}
+              >
+                <AccordionItemTrigger fontSize={"sm"} >
+                  {item.title}
+                </AccordionItemTrigger>
+                <AccordionItemContent fontSize={"xs"} color={'#222222CC'} pt={2}>
+                  {item.text}
+                </AccordionItemContent>
+              </AccordionItem>
+            ))}
+          </AccordionRoot>
+        </Box>
+        <Box w={"50%"} bg={"#f2f2f2"} h={400} overflow={'scroll'}>
+          <AgencyName />
+        </Box>
       </Box>
     </MainFrame>
   );

src/Pages/Login.tsx

@@ -50,8 +50,8 @@ const Login = () => {
     <VStack
       w={'100%'} h={'100vh'} bg={'#ffffff'}  >
 
-      <HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8}  h={'7%'} justifyContent={'flex-start'}>
-      <Image w={50} src={logo} />
+      <HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8} h={'7%'} justifyContent={'flex-start'}>
+        <Image w={50} src={logo} />
 
       </HStack>
 

src/Pages/ManageJobs/ManageJobsAdd.tsx

@@ -43,50 +43,59 @@ function ManageJobsAdd() {
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
                             <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                        </Field.Root>
+                        <Field.Root>
 
                             <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
                             <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
                             <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
                             <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
                             <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
                             <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
                             <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
+                        </Field.Root>
+                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
                             <Input placeholder="Enter the Country Selection"   /> */}
-                            <SelectRoot collection={frameworks} size="sm" w={'100%'}>
-                                <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
-                                <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-                                    borderRadius={"5px"}>
-                                    <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
-                                </SelectTrigger>
-                                <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
-                                    {frameworks.items.map((movie) => (
-                                        <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
-                                            fontSize="12px" >
-                                            {movie.label}
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </SelectRoot>
-
+                        <SelectRoot collection={frameworks} size="sm" w={'100%'}>
+                            <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
+                            <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                                borderRadius={"5px"}>
+                                <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
+                            </SelectTrigger>
+                            <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
+                                {frameworks.items.map((movie) => (
+                                    <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
+                                        fontSize="12px" >
+                                        {movie.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </SelectRoot>
+                        <Field.Root>
 
                             <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
                             <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
                             <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
                             <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                         </Field.Root>

src/Pages/ManageJobs/ViewManageJob.tsx

@@ -44,52 +44,53 @@ function ViewManageJob() {
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
                             <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
                             <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
                             <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
                             <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
                             <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
                             <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
                             <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
+                        </Field.Root>
+                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
                             <Input placeholder="Enter the Country Selection"   /> */}
-                            <SelectRoot collection={frameworks} size="sm" w={'100%'}>
-                                <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
-                                <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-                                    borderRadius={"5px"}>
-                                    <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
-                                </SelectTrigger>
-                                <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
-                                    {frameworks.items.map((movie) => (
-                                        <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
-                                            fontSize="12px" >
-                                            {movie.label}
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </SelectRoot>
-
+                        <SelectRoot collection={frameworks} size="sm" w={'100%'}>
+                            <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
+                            <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                                borderRadius={"5px"}>
+                                <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
+                            </SelectTrigger>
+                            <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
+                                {frameworks.items.map((movie) => (
+                                    <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
+                                        fontSize="12px" >
+                                        {movie.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </SelectRoot>
 
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
                             <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
                             <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
                             <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Upload Image</Field.Label>
                             <Input placeholder="Upload Image" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                         </Field.Root>

src/Pages/MyProfile/MyProfile.tsx

@@ -2,9 +2,9 @@ import MainFrame from "../../components/MainFrame"
 
 const MyProfile = () => {
   return (
-    
+
     <MainFrame >
-        MyProfile
+      MyProfile
     </MainFrame>
   )
 }

src/Pages/Profile/ChangePassword.tsx

@@ -0,0 +1,58 @@
+
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { FaRegEdit } from "react-icons/fa";
+import { Button } from "../../components/ui/button";
+import EnterPassword from "./EnterPassword";
+function Changepassword() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+                    Change Password
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3} pb={2} >
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>CHANGE PASSWORD</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={5}>
+                    <Stack p={2} >
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
+                    <EnterPassword />
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default Changepassword

src/Pages/Profile/EnterOTP.tsx

@@ -0,0 +1,109 @@
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Box, Input, Stack, Text } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import { useState } from "react";
+import { BiSolidEdit } from "react-icons/bi";
+
+function EnterOTP() {
+    const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
+
+    // Handle change for OTP inputs
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
+        const value = e.target.value;
+
+        // Prevent non-numeric input
+        if (/[^0-9]/.test(value)) return;
+
+        // Update the OTP state with the new value
+        const newOtp = [...otp];
+        newOtp[index] = value;
+        setOtp(newOtp);
+
+        // Move focus to the next input automatically
+        if (value && index < otp.length - 1) {
+            const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
+            if (nextInput) nextInput.focus();
+        }
+    };
+
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    Save
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3}>
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={2}>
+                    <Text color={"black"} textAlign={"center"}>OTP has been send to your E-mail Address</Text>
+                    <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
+                        <BiSolidEdit color="black" />
+                        <Text color="black" textAlign="center" ml={2}>9619565889</Text>
+                    </Box>
+
+
+                    <Stack direction="row" justify="center" pt={2}>
+
+                        {/* 4 OTP Inputs */}
+                        {otp.map((digit, index) => (
+                            <Input
+                                key={index}
+                                id={`otp-input-${index}`}
+                                value={digit}
+                                maxW="50px"
+                                color={"black"}
+                                textAlign="center"
+                                fontSize="20px"
+                                placeholder="0"
+                                border="1px solid grey"
+                                onChange={(e) => handleChange(e, index)}
+                                maxLength={1} // Only allows 1 character per input
+                            />
+                        ))}
+                    </Stack>
+                    <Box textAlign="center">
+                        <Text
+                            color="#4746F4"
+                            textDecoration="underline"
+                            fontWeight="bold"
+                            mt={3}
+                            cursor="pointer"
+                            display="inline-block"
+                            px={2} // Adds padding for better appearance
+                        >
+                            Resend OTP
+                        </Text>
+                    </Box>
+
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EnterOTP

src/Pages/Profile/EnterPassword.tsx

@@ -0,0 +1,55 @@
+
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Input, Stack } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import EnterOTP from "./EnterOTP";
+function EnterPassword() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    Save
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3} pb={2} >
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={5}>
+                    <Stack p={2} >
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
+                    <EnterOTP />
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EnterPassword

src/Pages/Profile/Profile.tsx

@@ -1,10 +1,60 @@
+import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react"
 import MainFrame from "../../components/MainFrame"
+import { FaCamera } from "react-icons/fa";
+import { Button } from "../../components/ui/button";
+import Changepassword from "./ChangePassword";
 
 const Profile = () => {
   return (
     <MainFrame >
-      Profile
-    </MainFrame>
+      <Stack p={5}>
+        <Box position="relative" width="fit-content"
+          display="inline-block"
+
+          cursor="pointer" onClick={() => alert("Avatar clicked!")}>
+          <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
+            <Avatar.Fallback />
+            <Avatar.Image src="https://bit.ly/sage-adebayo" />
+          </Avatar.Root>
+
+          <Box
+            position="absolute"
+            bottom="-2px"
+            left={"39px"}
+            p="2px"
+          >
+            <FaCamera color="black" size={16} />
+          </Box>
+        </Box>
+        <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
+        {/* <Text color={"black"} fontSize={"10px"}>Employee ID: <Text color={"black"} fontSize={"10px"}>#1245679</Text> </Text> */}
+        <Text color="black" fontSize="12px">
+          Employee ID: <span>#1245679</span>
+        </Text>
+        <Box w={"70%"} mt={5}>
+          <SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
+              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
+              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
+              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+
+          </SimpleGrid>
+          <Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
+          {/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+            Change Password
+          </Button> */}
+          <Changepassword />
+
+        </Box>
+
+      </Stack>
+
+    </MainFrame >
   )
 }
 

src/components/Charts/CircularProgress.tsx

@@ -0,0 +1,51 @@
+import { Box, Text } from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+
+const CircularProgress: React.FC<{ value: number; max: number }> = ({ value, max }) => {
+  const totalDots = 60; // Total number of dots in the circle
+  const filledDots = Math.round((value / max) * totalDots); // Number of filled dots
+
+  return (
+    <Box position={'relative'}>
+      <svg width="200" height="100%" viewBox="0 0 100 100">
+        {Array.from({ length: totalDots }).map((_, i) => {
+          const angle = (i / totalDots) * 360;
+          const x = 50 + 40 * Math.cos((angle * Math.PI) / 180);
+          const y = 50 + 40 * Math.sin((angle * Math.PI) / 180);
+
+          return (
+            <circle
+              key={i}
+              cx={x}
+              cy={y}
+              r="1"
+              fill={i < filledDots ? "#2563eb" : ""} // Blue for filled, Gray for empty
+              opacity={i < filledDots ? 1 : 0.1}
+            />
+          );
+        })}
+      </svg>
+      <Text position={'absolute'} left={'42%'} top={'44%'} fontSize={'md'} fontWeight={500}>{value}</Text>
+    </Box>
+  );
+};
+
+// Usage Example with Animation
+const CircularApp: React.FC = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => (prev < 350 ? prev + 20 : 350));
+    }, 300);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Box display={'flex'} justifyContent={'center'} alignItems={'center'} h={'90%'}>
+      <CircularProgress value={progress} max={450} />
+    </Box>
+  );
+};
+
+export default CircularApp;

src/components/EditSubAdmin.tsx

@@ -17,7 +17,9 @@ function EditSubAdmin() {
 
             <DialogContent
                 bg={"#fff"}
-                w={{ lg: "60%", md: "230px" }}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
                 height={'80vh'}
                 overflow={'scroll'}
                 p={2} // Reduced padding
@@ -33,7 +35,8 @@ function EditSubAdmin() {
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
                             <Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
+                            <Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                             <Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
                             <Input placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />