update

src/Pages/Dashboard/Dashboard.tsx

@@ -59,16 +59,11 @@ const Dashboard = () => {
       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"} pt={'8px'} gap={5}>
+      <Box  display={"flex"} p={"20px"} pe={'20px'}  gap={5}>
         <Box rounded={'lg'} w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
           <Heading fontSize={"sm"} p={2}>
             Total Users
@@ -117,7 +112,7 @@ const Dashboard = () => {
         </Box>
         <Box
           p={"20px"}
-          w={"50%"}
+          w={"49%"}
           rounded={'lg'}
           boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
         >
@@ -148,8 +143,8 @@ const Dashboard = () => {
           <CircularApp />
         </Box>
       </Box>
-      <Box p={"20px"} pt={0} display={"flex"} gap={5}>
-        <Box  w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={400} p={"10px"} overflow={'auto'}>
+      <Box  p={"20px"} pt={0} display={"flex"} gap={5}>
+        <Box  w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} p={"10px"} overflow={'auto'}>
           <HStack justifyContent={"space-between"} mb={5}>
             <Text fontSize={"xs"} fontWeight={500}>Faqs</Text>
             <Button
@@ -165,6 +160,7 @@ const Dashboard = () => {
           <AccordionRoot collapsible defaultValue={["b"]}>
             {accItems.map((item, index) => (
               <AccordionItem
+              boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} 
                 key={index}
                 value={item.value}
                 bg={"#fff"}
@@ -183,11 +179,10 @@ const Dashboard = () => {
             ))}
           </AccordionRoot>
         </Box>
-        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={400} overflow={'auto'}>
+        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} overflow={'auto'}>
           <AgencyName />
         </Box>
       </Box>
-     
     </MainFrame>
   );
 };

src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx

@@ -1,5 +1,5 @@
-import { MdOutlineRemoveRedEye } from "react-icons/md";
-import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import View from "../../../components/ActionIcons/View";
 import {
   DialogBody,
   DialogCloseTrigger,
@@ -9,7 +9,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
-import View from "../../../components/ActionIcons/View";
 
 function ViewRegisterUsers() {
   return (

src/Pages/Profile/ChangePassword.tsx

@@ -1,28 +1,22 @@
 
-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 { Field, Input, Stack } from "@chakra-ui/react";
 import { Button } from "../../components/ui/button";
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
 import EnterPassword from "./EnterPassword";
 function Changepassword() {
     return (
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+                <Button bg="#02A0A0" size={'2xs'} color={"#fff"} px={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
+                p={2} 
                 bgSize={'md'}
             >
                 <DialogHeader bg="white" pt={3} pb={2} >
@@ -33,22 +27,17 @@ function Changepassword() {
                     <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>
+                            <Input color="black" pl={1} fontSize="12px"  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>
+                            <Input color="black" pl={1} fontSize="12px"  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 >
 

src/Pages/Profile/Profile.tsx

@@ -1,18 +1,24 @@
-import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react";
+import { Avatar, Box, HStack, Text, VStack } from "@chakra-ui/react";
 import { FaCamera } from "react-icons/fa";
+import EditableInput from "../../components/EditableInput";
 import MainFrame from "../../components/MainFrame";
+import { Field } from "../../components/ui/field";
 import Changepassword from "./ChangePassword";
 
 const Profile = () => {
   return (
     <MainFrame >
-      <Stack p={5}>
-        <Box position="relative" width="fit-content"
-          display="inline-block"
+      <HStack  alignItems={'flex-start'} justifyContent={'center'} pt={0} h={'89vh'} w={'100%'} >
+
+        <VStack   w={'50%'} p={3} rounded={'lg'} mb={3}>
+
+<HStack shadow={'md'} rounded={'lg'} justifyContent={'space-between'} alignItems={'flex-end'}  w={'100%'} px={3}  py={3} >
+        <VStack  w={'100%'} alignItems={'flex-start'} gap={0}>
+        <Box mb={2} position="relative" width="fit-content"
           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.Image src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
           </Avatar.Root>
           <Box
             position="absolute"
@@ -20,37 +26,42 @@ const Profile = () => {
             left={"39px"}
             p="2px"
           >
-            <FaCamera color="black" size={16} />
+            <FaCamera  color="#ccc" size={16} />
           </Box>
         </Box>
-        <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
-        <Text color="black" fontSize="12px">
+        <Text color={"black"} as={'span'} fontSize={'sm'} fontWeight={"bold"}>Ritesh Pandey</Text>
+        <Text color="black" as={'span'} fontSize={'xs'}>
           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 />
+        </VStack>
 
-        </Box>
+        
+        <Changepassword />
+        </HStack>
 
-      </Stack>
+        
+        <VStack  w={"100%"} >
+        <Field mt={4} label="First Name" fontSize="xs" required>
+              <EditableInput defaultValue="Ritesh" placeholder="Enter first name" />
+            </Field>
+
+            <Field mt={4} label="Last Name" fontSize="xs" required>
+              <EditableInput defaultValue="Pandey" placeholder="Enter last name" />
+            </Field>
+
+            <Field mt={4} label="Mobile Number" fontSize="xs" required>
+              <EditableInput defaultValue={"98234567892"} placeholder="Mobile Number" type='number' />
+            </Field>
+
+
+
+
+
+
+        </VStack>
+        </VStack>
+
+      </HStack>
 
     </MainFrame >
   )

src/components/EditableInput.tsx

@@ -0,0 +1,53 @@
+import { Editable } from "@chakra-ui/react";
+import { FC } from "react";
+
+interface InputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  defaultValue?: string;
+  placeholder?: string;
+  props?: any;
+  type?:string
+}
+const EditableInput: FC<InputProps> = ({
+  value,
+  onChange,
+  defaultValue,
+  placeholder,
+  type,
+  ...props
+}) => {
+  return (
+    <Editable.Root
+      {...props}
+      value={value}
+      onChange={() => onChange && onChange}
+      w={"100%"}
+      size={"sm"}
+      textAlign="start"
+      defaultValue={defaultValue || ""}
+    >
+      <Editable.Preview
+        bg={"#00000006"}
+        fontSize={"xs"}
+        w={"100%"}
+        bgSize={"sm"}
+        ps={3}
+        // _hover={{ backgroundColor: "#00000010" }}
+      />
+      <Editable.Input
+        fontSize={"xs"}
+        placeholder={placeholder}
+        w={"100%"}
+        border={"#ccc 1px solid"}
+        type={type}
+        _focus={{ bg: "#02A0A015" }}
+        outline={"#007F33"}
+        bgSize={"xs"}
+        ps={3}
+      />
+    </Editable.Root>
+  );
+};
+
+export default EditableInput;

src/components/MainFrame.tsx

@@ -10,14 +10,15 @@ interface MainFrameProps {
   children: React.ReactNode
   title?: string
   transperant?:boolean
+  props?:any
 }
 
-const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
+const MainFrame: FC<MainFrameProps> = ({ children, transperant, props }) => {
   return (
-    <MotionVStack overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
+    <MotionVStack {...props} overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
       <Box
         w="100%"
-        // minH="100%"
+        // h="100%"
         bg={transperant?'transperant':"#ffffff"}
         // overflow={'scroll'}
         rounded="lg"

src/components/ui/field.tsx

@@ -15,7 +15,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
     return (
       <ChakraField.Root ref={ref} {...rest}>
         {label && (
-          <ChakraField.Label>
+          <ChakraField.Label fontSize={'xs'}>
             {label}
             <ChakraField.RequiredIndicator fallback={optionalText} />
           </ChakraField.Label>