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

src/Layouts/DefaultLayout.tsx

@@ -57,10 +57,10 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
         </HStack>
         <VStack  w={'100%'} p={2} pt={0}>
           {nav?.map(({ title, path, Icon, type, children, initPath }, index) => type === 'single' ?
-            <NavLink  className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
+            <NavLink  className="link" key={index} to={path||''} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
             <AccordionRoot border={location?.pathname.startsWith(initPath ?? path) ? "1px solid #02A0A0" : '1px' } key={index} bg={'#fff'} rounded={'lg'} collapsible>
               <AccordionItem rounded={'lg'} bg={'#fff'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
-                <AccordionItemTrigger className="Oxygen" color={'#fff'}   onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000',  fontSize: '14px',  }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
+                <AccordionItemTrigger className="Oxygen" color={'#fff'}   onClick={() => navigate(path||'')} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000',  fontSize: '14px',  }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
                 {children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
               </AccordionItem>
             </AccordionRoot>)}

src/Pages/Dashboard/Dashboard.tsx

@@ -26,7 +26,6 @@ import {
   SelectValueText
 } from "../../components/ui/select";
 import AgencyName from "./AgencyName";
-import { Spinner } from "../../components/Sipnner/Spinner";
 
 const Dashboard = () => {
   const frameworks = createListCollection({
@@ -59,16 +58,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 +111,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 +142,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 +159,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 +178,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/ManageCMS/FAQ/EditDetails.tsx

@@ -9,13 +9,13 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
-import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
+import { Field, Input, Span, Stack, Textarea } from "@chakra-ui/react";
 import Edit from "../../../components/ActionIcons/Edit";
 function EditDetails() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Edit />
+        <Span><Edit /></Span>
       </DialogTrigger>
 
       <DialogContent
@@ -56,10 +56,11 @@ function EditDetails() {
                 bgColor="#EEEEEE"
                 color="black"
                 border="none"
-                pl={1}
+                p={2}
                 fontSize="12px"
-                height="30px"
-                pt={1.5}
+                height="120px"
+                resize={'none'}
+                _focusVisible={{outline:'none'}}
               />
             </Field.Root>
           </Stack>

src/Pages/ManageGroups/EditDetailGroup.tsx

@@ -9,7 +9,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Avatar, Box, Field, Heading, Input, Stack } from "@chakra-ui/react";
+import { Avatar, Box, Field, Heading, Input, Span, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
 import { AvatarGroup } from "../../components/ui/avatar";
 import Edit from "../../components/ActionIcons/Edit";
@@ -17,7 +17,7 @@ function EditDetailGroups() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Edit />
+        <Span><Edit /></Span>
       </DialogTrigger>
 
       <DialogContent

src/Pages/ManageGroups/ViewManageGroup.tsx

@@ -7,7 +7,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Avatar, Box, Field, Heading, Input, Stack } from "@chakra-ui/react";
+import { Avatar, Box, Field, Heading, Input, Span, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
 import { AvatarGroup } from "../../components/ui/avatar";
 import View from "../../components/ActionIcons/View";
@@ -15,7 +15,7 @@ function ViewManageGroup() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <View />
+        <Span><View /></Span>
       </DialogTrigger>
 
       <DialogContent

src/Pages/ManageJobs/ManageJobsAdd.tsx

@@ -3,6 +3,7 @@ import {
   Icon,
   Input,
   SelectValueText,
+  Span,
   Stack,
   createListCollection,
 } from "@chakra-ui/react";
@@ -40,7 +41,7 @@ function ManageJobsAdd() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Edit />
+        <Span><Edit /></Span>
       </DialogTrigger>
 
       <DialogContent

src/Pages/ManageJobs/ViewManageJob.tsx

@@ -3,6 +3,7 @@ import {
   Icon,
   Input,
   SelectValueText,
+  Span,
   Stack,
   createListCollection,
 } from "@chakra-ui/react";
@@ -40,7 +41,7 @@ function ViewManageJob() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <View />
+        <Span><View /></Span>
       </DialogTrigger>
 
       <DialogContent

src/Pages/ManagePost/ManagePost.tsx

@@ -1,4 +1,4 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import { Box, HStack, Image, Input, Span, Text } from "@chakra-ui/react";
 import MainFrame from "../../components/MainFrame";
 import { InputGroup } from "../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
@@ -47,7 +47,7 @@ const managepost: any[] = [
       <HStack justifyContent="center">
         <ViewDailog />
         <AlertDailog
-          AltertTiggerIcon={() => <Delete />} 
+          AltertTiggerIcon={() => <Span><Delete /> </Span>} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"

src/Pages/ManagePost/ViewDailog.tsx

@@ -1,4 +1,4 @@
-import { Field, Icon, Image, Input, Stack } from "@chakra-ui/react"
+import { Field, Icon, Image, Input, Span, Stack } from "@chakra-ui/react"
 import { TbEdit } from "react-icons/tb"
 import img from "../../assets/waterfall.jpg"
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
@@ -9,7 +9,7 @@ function ViewDailog() {
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Edit />
+                <Span><Edit /></Span>
             </DialogTrigger>
 
             <DialogContent

src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx

@@ -1,5 +1,5 @@
 import { MdOutlineRemoveRedEye } from "react-icons/md";
-import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import { Field, Icon, Input, Span, Stack } from "@chakra-ui/react";
 import {
   DialogActionTrigger,
   DialogBody,
@@ -20,17 +20,19 @@ function EditRegisterUsers() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-            <Edit/>
+        <Span>
+          <Edit />
+        </Span>
       </DialogTrigger>
 
       <DialogContent
         bg={"#fff"}
-        w={{ base: '90%', md: '400px' }}
-        height={'80vh'}
-        overflow={'scroll'}
-        overflowX="hidden" 
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
         p={3} // Reduced padding
-        bgSize={'md'}
+        bgSize={"md"}
       >
         <DialogHeader bg="white" p={0}>
           <DialogTitle alignSelf="center" color="black" fontSize="14px">
@@ -45,49 +47,81 @@ function EditRegisterUsers() {
                 First Name
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                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
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Gender
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 DOB
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 OTP Verified
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Language
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
             </Field.Root>
           </Stack>
         </DialogBody>
         <DialogFooter mt={5}>
           <DialogActionTrigger asChild>
-            <Button rounded={'md'} w={"100%"} size={'sm'} bg={'#02A0A0'}>Save</Button>
+            <Button rounded={"md"} w={"100%"} size={"sm"} bg={"#02A0A0"}>
+              Save
+            </Button>
           </DialogActionTrigger>
         </DialogFooter>
         <DialogCloseTrigger color="black" />

src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx

@@ -1,4 +1,4 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import { Box, HStack, Image, Input, Span, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame";
 import AlertDailog from "../../../components/AlertDailog";
 import { RiDeleteBin5Line } from "react-icons/ri";
@@ -43,7 +43,7 @@ const registerUser: any[] = [
         <EditRegisterUsers />
         {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={() => <Delete />} // Pass as function
+          AltertTiggerIcon={() =><Delete /> } // Pass as function
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="Are You Sure You Want To Delete This User ?"

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, Span, Stack } from "@chakra-ui/react";
+import View from "../../../components/ActionIcons/View";
 import {
   DialogBody,
   DialogCloseTrigger,
@@ -9,23 +9,22 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
-import View from "../../../components/ActionIcons/View";
 
 function ViewRegisterUsers() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <View />
+        <Span><View /></Span>
       </DialogTrigger>
 
       <DialogContent
-        bg={"#fff"}
-        w={{ base: "90%", md: "400px" }}
-        height={"80vh"}
-        overflow={"scroll"}
-        overflowX="hidden"
-        p={3} // Reduced padding
-        bgSize={"md"}
+         bg={"#fff"}
+         w={{ base: '90%', md: '400px' }}
+         height={'80vh'}
+         overflow={'scroll'}
+         overflowX="hidden" 
+         p={3} // Reduced padding
+         bgSize={'md'}
       >
         <DialogHeader bg="white">
           <DialogTitle alignSelf="center" color="black" fontSize="14px">
@@ -40,72 +39,42 @@ function ViewRegisterUsers() {
                 First Name
               </Field.Label>
               <Input
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={1}
-                fontSize="12px"
-                height="30px"
+                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
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={1}
-                fontSize="12px"
-                height="30px"
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Gender
               </Field.Label>
               <Input
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={1}
-                fontSize="12px"
-                height="30px"
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 DOB
               </Field.Label>
               <Input
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={1}
-                fontSize="12px"
-                height="30px"
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 OTP Verified
               </Field.Label>
               <Input
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={1}
-                fontSize="12px"
-                height="30px"
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Language
               </Field.Label>
               <Input
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={1}
-                fontSize="12px"
-                height="30px"
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
             </Field.Root>
           </Stack>

src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx

@@ -9,14 +9,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
-import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import { Field, Icon, Input, Span, Stack } from "@chakra-ui/react";
 import Edit from "../../../components/ActionIcons/Edit";
 
 function EditAgencyMaster() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Edit />
+        <Span><Edit /></Span>
       </DialogTrigger>
 
       <DialogContent

src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx

@@ -8,7 +8,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
-import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import { Field, Icon, Input, Span, Stack } from "@chakra-ui/react";
 import { MdOutlineRemoveRedEye } from "react-icons/md";
 import { Button } from "../../../components/ui/button";
 import View from "../../../components/ActionIcons/View";
@@ -17,7 +17,7 @@ function ViewAgencyMaster() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <View />
+        <Span><View /></Span>
       </DialogTrigger>
 
       <DialogContent

src/Pages/MasterModule/Country/EditCountryModel.tsx

@@ -8,7 +8,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
-import { Field, Input, Stack } from "@chakra-ui/react";
+import { Field, Input, Span, Stack } from "@chakra-ui/react";
 import { Button } from "../../../components/ui/button";
 import Edit from "../../../components/ActionIcons/Edit";
 
@@ -16,7 +16,7 @@ function EditCountryModel() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Edit />
+        <Span><Edit /></Span>
       </DialogTrigger>
 
       <DialogContent

src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx

@@ -1,5 +1,5 @@
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { Box, Field, IconButton, Input, Span, Stack, Text, Textarea } from "@chakra-ui/react"
 import { Button } from "../../../components/ui/button"
 import { FaRegEdit } from "react-icons/fa";
 import Edit from "../../../components/ActionIcons/Edit";
@@ -13,7 +13,7 @@ function EditJobStatusModel() {
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-               <Edit />
+               <Span><Edit /></Span>
             </DialogTrigger>
 
             <DialogContent

src/Pages/MasterModule/JobType/EditJobModel.tsx

@@ -8,7 +8,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
-import { Field, Input, Stack } from "@chakra-ui/react";
+import { Field, Input, Span, Stack } from "@chakra-ui/react";
 import { Button } from "../../../components/ui/button";
 import Edit from "../../../components/ActionIcons/Edit";
 
@@ -16,7 +16,7 @@ function EditJobeModel() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Edit />
+        <Span><Edit /></Span>
       </DialogTrigger>
 
       <DialogContent

src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx

@@ -13,6 +13,7 @@ import {
   Field,
   IconButton,
   Input,
+  Span,
   Stack,
   Text,
   Textarea,
@@ -41,7 +42,7 @@ function EditTemplateModel() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Edit />
+        <Span><Edit /></Span>
       </DialogTrigger>
 
       <DialogContent

src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx

@@ -13,6 +13,7 @@ import {
   Field,
   IconButton,
   Input,
+  Span,
   Stack,
   Text,
   Textarea,
@@ -25,7 +26,7 @@ function EditWorkModel() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Edit />
+        <Span><Edit /></Span>
       </DialogTrigger>
 
       <DialogContent

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/Pages/SubAdmin/ViewSubAdmin.tsx

@@ -15,6 +15,7 @@ import {
   Heading,
   Icon,
   Input,
+  Span,
   Stack,
   Text,
 } from "@chakra-ui/react";
@@ -26,7 +27,7 @@ function ViewSubAdmin() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <View />
+        <Span><View /></Span>
       </DialogTrigger>
 
       <DialogContent

src/components/AlertDailog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { DialogBody, HStack, Icon, Image, Text } from "@chakra-ui/react";
+import { DialogBody, HStack, Icon, Image, Span, Text } from "@chakra-ui/react";
 import { Button } from "./ui/button";
 import {
   DialogActionTrigger,
@@ -9,7 +9,7 @@ import {
   DialogRoot,
   DialogTrigger,
 } from "./ui/dialog";
-import DeleteICN from '../assets/deleteIcon.png'
+import DeleteICN from "../assets/deleteIcon.png";
 
 interface DeleteConfirmationDialogProps {
   onConfirm?: () => void;
@@ -40,16 +40,18 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
         {button ? (
           button
         ) : (
-          <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            color={iconColor && iconColor}
-          >
-            <AltertTiggerIcon />
-          </Icon>
+          <Span>
+            <Icon
+              cursor={"pointer"}
+              p={0.5}
+              _hover={{ bg: "#00000015" }}
+              rounded={"md"}
+              boxSize={5}
+              color={iconColor && iconColor}
+            >
+              <AltertTiggerIcon />
+            </Icon>
+          </Span>
         )}
       </DialogTrigger>
       <DialogContent bgColor="#fff">
@@ -66,7 +68,7 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
           gap={2}
         >
           {/* {alertIcon && alertIcon} */}
-          <Image  w={'40px'} src={DeleteICN} />
+          <Image w={"40px"} src={DeleteICN} />
           <Text
             mt={3}
             fontWeight={600}
@@ -103,7 +105,7 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
               borderRadius="sm"
               width="50%"
               // bgColor="#007F33"
-              bgColor={'#02A0A0'}
+              bgColor={"#02A0A0"}
               color="white"
               // colorPalette="#007F33"
               onClick={onConfirm}

src/components/EditSubAdmin.tsx

@@ -1,4 +1,4 @@
-import { Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react";
+import { Field, Grid, Heading, Icon, Input, Span, Stack, Text } from "@chakra-ui/react";
 import { TbEdit } from "react-icons/tb";
 import { Button } from "./ui/button";
 import { Checkbox } from "./ui/checkbox";
@@ -19,7 +19,7 @@ function EditSubAdmin() {
       <DialogTrigger asChild>
           {/* <FaRegEdit style={{ cursor: "pointer" }} color="#000" /> */}
 
-          <Edit />
+          <Span><Edit /></Span>
         {/* <Button><FaRegEdit /></Button> */}
       </DialogTrigger>
 

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>

src/components/ui/tooltip.tsx

@@ -29,7 +29,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
       <ChakraTooltip.Root {...rest}>
         <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
         <Portal disabled={!portalled} container={portalRef}>
-          <ChakraTooltip.Positioner>
+          <ChakraTooltip.Positioner>  
             <ChakraTooltip.Content ref={ref} {...contentProps}>
               {showArrow && (
                 <ChakraTooltip.Arrow>