worked on the about

dev-dist/sw.js

@@ -82,11 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-<<<<<<< HEAD
-    "revision": "0.iv1sobg60j"
-=======
-    "revision": "0.3bv9k3911i8"
->>>>>>> 688f6740627f6cdb421849d1fb012420be1d9d10
+    "revision": "0.ch9snbb3598"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package-lock.json

@@ -22,6 +22,7 @@
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.54.2",
         "react-icons": "^5.4.0",
+        "react-quill": "^2.0.0",
         "react-redux": "^9.2.0",
         "react-router-dom": "^7.1.1",
         "vite-plugin-pwa": "^0.21.1"
@@ -3284,6 +3285,15 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "license": "MIT",
+      "dependencies": {
+        "parchment": "^1.1.2"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.3.18",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
@@ -5348,6 +5358,15 @@
         "node": ">= 0.2.0"
       }
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5574,6 +5593,26 @@
         }
       }
     },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -6085,12 +6124,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "license": "MIT"
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -6890,6 +6947,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -7829,6 +7902,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -7948,6 +8037,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -8206,6 +8301,34 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -8281,6 +8404,21 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-quill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
+      "integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/quill": "^1.3.10",
+        "lodash": "^4.17.4",
+        "quill": "^1.3.7"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.4.0",
+    "react-quill": "^2.0.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.1.1",
     "vite-plugin-pwa": "^0.21.1"

src/Contexts/GlobalStateContext.tsx

@@ -2,11 +2,12 @@
 import { createContext, Dispatch, SetStateAction } from 'react';
 
 // Define the shape of your context value
-type GlobalStateContextType = {
+export interface GlobalStateContextType {
   isAuthenticate: boolean;
   setIsAuthenticate: Dispatch<SetStateAction<boolean>>;
-};
-
+  isBarLoading: boolean;
+  setIsBarLoading: Dispatch<SetStateAction<boolean>>;
+}
 // Create the context with a default value of `undefined`
 const GlobalStateContext = createContext<GlobalStateContextType | undefined>(undefined);
 

src/Contexts/GlobalStateProvider.tsx

@@ -1,14 +1,21 @@
-import { ReactNode, useState } from 'react';
-import GlobalStateContext from './GlobalStateContext';
-
+import { ReactNode, useState } from "react";
+import GlobalStateContext from "./GlobalStateContext";
 
 
 
 const GlobalStateProvider = ({ children }: { children: ReactNode }) => {
   const [isAuthenticate, setIsAuthenticate] = useState<boolean>(true);
+  const [isBarLoading, setIsBarLoading] = useState<boolean>(false); // ✅ Fixed typo
+
+ 
 
   return (
-    <GlobalStateContext.Provider value={{ isAuthenticate, setIsAuthenticate }}>
+    <GlobalStateContext.Provider value={{
+      isAuthenticate,
+      setIsAuthenticate,
+      isBarLoading,
+      setIsBarLoading, // ✅ Fixed typo
+    }}>
       {children}
     </GlobalStateContext.Provider>
   );

src/Layouts/DefaultLayout.tsx

@@ -24,7 +24,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
   if (!context) {
     throw new Error('App must be used within a GlobalStateProvider');
   }
-  const { setIsAuthenticate } = context;
+  const { setIsAuthenticate, isBarLoading } = context;
   const [ logOutAdmin ] = useLogOutMutation()
 
 
@@ -48,7 +48,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
 
   return (
     <VStack gap={0} w="100%" h="100vh" bg="#F2F2F2">
-    <ProgressBar isLoading={false}  />
+    <ProgressBar isLoading={isBarLoading}  />
     <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="calc(100% - 4px)"  p={0}>
       
       <VStack pt={0} zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" overflow={'auto'} >
@@ -56,9 +56,9 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
           <Image w={55} src={logo} />
         </HStack>
         <VStack  w={'100%'} p={2} pt={0}>
-          {nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
+          {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> :
-            <AccordionRoot key={index} bg={'#fff'} rounded={'lg'} collapsible>
+            <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>
                 {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>)}

src/Pages/ManageCMS/AboutUs/AboutUs.tsx

@@ -1,74 +1,132 @@
-import { Box, HStack, Skeleton, Text } from "@chakra-ui/react";
-import MainFrame from "../../../components/MainFrame"
-import AboutUsAddModel from "../../ManageCMS/AboutUs/AboutUsAddModel";
+// import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
+// import MainFrame from "../../../components/MainFrame"
+// import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
+// import { Spinner } from "../../../components/Sipnner/Spinner";
+// import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+// import { useContext, useEffect } from "react";
+// import AboutUsAddModel from "./AboutUsAddModel";
+
+
+
+// const AboutUs = () => {
+
+//   const { data, isLoading, isFetching } = useGetAboutUsQuery();
+
+//   // const content = data?.data
+//   console.log('====================================');
+//   console.log(data);
+//   console.log('====================================');
+
+//   const context = useContext(GlobalStateContext);
+//   if (!context) throw new Error('App must be used within a GlobalStateProvider');
+
+//   const { setIsBarLoading } = context;
+//   useEffect(() => {
+//     setIsBarLoading(isFetching)
+//   }, [data])
+
+//   return (
+//     <MainFrame transperant={true}>
+//       <VStack gap={4} pb={4} pt={0}>
+//         {isLoading || isFetching ?
+//           <Spinner /> : data?.data?.map(({ id, content, about_language }) => <VStack bg={'#fff'}
+//             boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
+//             <HStack
+//               w={"100%"}
+//               justifyContent={"space-between"}
+
+//               py={0}
+//               px={0}
+//             >
+//               <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+//                 About Us <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {about_language?.language_name}</Badge>
+//               </Text>
+
+//               {/* <AboutUsAddModel /> */}
+//               <AboutUsAddModel/>
+//             </HStack>
+//             <Text
+//               as="p"
+//               fontSize="sm"
+//               fontWeight={400}
+//               color="#1D1D1D"
+//             >
+//               {content}
+//             </Text>
+
+//           </VStack>)}
+//       </VStack>
+//     </MainFrame>
+//   )
+// }
+// export default AboutUs
+
+import { Badge, HStack, Stack, Text, VStack } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame";
 import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
-
-
+import { Spinner } from "../../../components/Sipnner/Spinner";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect } from "react";
+import AboutUsAddModel from "./AboutUsAddModel";
 
 const AboutUs = () => {
+  const { data, isLoading, isFetching } = useGetAboutUsQuery();
 
-  const { data, isLoading } = useGetAboutUsQuery();
+  console.log("Fetched About Us Data:", data);
 
-  const content = data?.data?.[0]?.content
-  console.log('====================================');
-  // console.log(response);
-  console.log('====================================');
+  const context = useContext(GlobalStateContext);
+  if (!context) throw new Error("App must be used within a GlobalStateProvider");
 
+  const { setIsBarLoading } = context;
+  useEffect(() => {
+    setIsBarLoading(isFetching);
+  }, [isFetching, setIsBarLoading]);
 
   return (
+    <MainFrame transperant={true}>
+      <VStack gap={4} pb={4} pt={0}>
+        <Stack bg={"#fff"} w={"100%"} mt={2} p={4} borderRadius={4}><Text color={"black"} textAlign={"left"} fontWeight={"600"} >             About Us
+        </Text></Stack>
 
-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-            AboutUs
-          </Text>
-
-          <HStack>
-
-            <AboutUsAddModel />
-          </HStack>
-        </HStack>
-        {/* Show Skeleton until content is available */}
-        {isLoading || !content ? (
-          <Box px={3} w="85%">
-            <Skeleton height="20px" mb="10px" />
-            <Skeleton height="20px" mb="10px" />
-            <Skeleton height="20px" mb="10px" />
-            <Skeleton height="20px" mb="10px" width="75%" />
-            <Skeleton height="20px" mb="15px" width="90%" />
-            <Skeleton height="20px" mb="10px" />
-            <Skeleton height="20px" mb="10px" width="85%" />
-            <Skeleton height="20px" mb="10px" />
-            <Skeleton height="20px" width="70%" />
-          </Box>
+        {isLoading || isFetching ? (
+          <Spinner />
         ) : (
-          <Text
-            as="p"
-            fontSize="sm"
-            fontWeight={400}
-            color="#1D1D1D"
-            px={3}
-            w="85%"
-            mb="15px"
-          >
-            {content}
-          </Text>
+          data?.data?.map(({ id, content, about_language }) => (
+            <VStack
+              bg={"#fff"}
+              boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+              rounded={"lg"}
+              p={3}
+              key={id}
+            >
+
+              <HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
+                <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+                  <Badge
+                    variant={"surface"}
+                    colorPalette="cyan"
+                    ms={2}
+                    size={"sm"}
+                    fontSize={"xs"}
+                    px={2}
+                  >
+                    🎓 {about_language?.language_name}
+                  </Badge>
+                </Text>
+
+                {/* Pass Data to AboutUsAddModel */}
+                <AboutUsAddModel aboutUsData={{ id, content, about_language }} />
+              </HStack>
+              <Text as="p" fontSize="sm" fontWeight={400} color="#1D1D1D">
+                {/* {content} */}
+                <div dangerouslySetInnerHTML={{ __html: content }} />
+              </Text>
+            </VStack>
+          ))
         )}
-        {/* <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
-          {content}
-        </Text> */}
-        {/* <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text> */}
-      </Box>
+      </VStack>
     </MainFrame>
-  )
-}
-export default AboutUs
+  );
+};
+
+export default AboutUs;

src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx

@@ -1,76 +1,3 @@
-// import { FaRegEdit } from "react-icons/fa"
-// import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-// import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-// import { Button } from "../../../components/ui/button"
-// import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service"
-
-// function AboutUsAddModel() {
-
-//     const [ updateAboutUs ] = useUpdateAboutUsMutation()
-
-
-//     try {
-//         const res = updateAboutUs({id:2, updatedData:''})
-//         console.log(res);
-
-
-//     } catch (error) {
-
-//     }
-
-
-
-
-//     return (
-
-//         <DialogRoot placement="center">
-//             <DialogTrigger asChild>
-//                 {/* <Button bg={"transparent"} size="sm">
-//                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-//                 </Button> */}
-//                 <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
-
-//             </DialogTrigger>
-
-//             <DialogContent
-//                 bg={"#fff"}
-//                 // w={{ lg: "60%", md: "230px" }}
-//                 w={{ base: '90%', md: '400px' }}
-//                 height={"auto"}
-
-//                 p={3} // Reduced padding
-//                 bgSize={'md'}
-//             >
-//                 <DialogHeader bg="white" >
-//                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-//                 </DialogHeader>
-
-//                 <DialogBody bg="white">
-//                     <Stack py={3} >
-
-//                         <Field.Root>
-//                             <Field.Label color="black" pt={1} fontSize="12px">AboutUs</Field.Label>
-//                             <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-//                         </Field.Root>
-//                     </Stack>
-//                 </DialogBody>
-//                 <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-//                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
-//                         Save
-//                     </Button>
-//                 </DialogFooter>
-
-//                 <DialogCloseTrigger color="black" />
-//             </DialogContent>
-//         </DialogRoot >
-
-//     )
-// }
-
-// export default AboutUsAddModel
-
-
-import React, { useState } from "react";
 import { FaRegEdit } from "react-icons/fa";
 import {
     DialogBody,
@@ -82,87 +9,113 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "../../../components/ui/dialog";
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
+import { Field, Stack, Text } from "@chakra-ui/react";
 import { Button } from "../../../components/ui/button";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css"; // Import the styles
+import { useState } from "react";
 import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service";
+import { useForm, Controller } from "react-hook-form"; // Import React Hook Form
 
-function AboutUsAddModel() {
-    const [content, setContent] = useState(""); // State for the textarea input
-    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation(); // Mutation for updating About Us
-    //   const toast = useToast(); // Toast for feedback
+function AboutUsAddModel({ aboutUsData }: { aboutUsData: any }) {
+    const [isOpen, setIsOpen] = useState(false);
 
-    // Handle form submission
-    const handleSubmit = async (e: any) => {
-        e.preventDefault(); // Prevent default form submission
+    // RTK Query Mutation Hook
+    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation();
+
+    // React Hook Form
+    const {
+        control,
+        handleSubmit,
+        reset,
+        setValue,
+    } = useForm({
+        defaultValues: {
+            content: "",
+            languageCode: "",
+        },
+    });
+
+    // Function to handle edit click (pre-fill the editor)
+    const handleEditClick = (data: any) => {
+        setValue("content", data.content); // Pre-fill the content field
+        setValue("languageCode", data.about_language.language_code); // Pre-fill the language code
+        setIsOpen(true); // Open dialog
+    };
+
+    // Function to handle update submission
+    const onSubmit = async (formData: any) => {
+        if (!formData.content.trim()) return; // Prevent empty updates
 
         try {
-            // Call the updateAboutUs mutation
-            const res = await updateAboutUs({ id: 2, updatedData: content }).unwrap();
-            console.log(res);
-
-            // Show success toast
-            //   toast({
-            //     title: "Success",
-            //     description: "About Us content updated successfully",
-            //     status: "success",
-            //     duration: 5000,
-            //     isClosable: true,
-            //   });
-
-            // Clear the input field after successful submission
-            setContent("");
+            await updateAboutUs({
+                id: aboutUsData.id,
+                content: formData.content,
+                language_code: formData.languageCode,
+            }).unwrap();
+            setIsOpen(false); // Close dialog on success
+            reset(); // Reset the form
         } catch (error) {
-            // Show error toast
-            //   toast({
-            //     title: "Error",
-            //     description: "Failed to update About Us content",
-            //     status: "error",
-            //     duration: 5000,
-            //     isClosable: true,
-            //   });
+            console.error("Update failed:", error);
         }
     };
 
     return (
-        <DialogRoot placement="center">
+        <DialogRoot placement="center" open={isOpen}>
             <DialogTrigger asChild>
-                <Button bgColor="#EEEEEE" pl={3} pr={3} size="xs" color="#000">
+                <Button
+                    bgColor="#EEEEEE"
+                    pl={3}
+                    pr={3}
+                    size="xs"
+                    color="#000"
+                    onClick={() => handleEditClick(aboutUsData)} // Set content before opening modal
+                >
                     <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
-                    <Text color="#000" mt={1}>
-                        Edit
-                    </Text>
+                    <Text color="#000" mt={1}>Edit</Text>
                 </Button>
             </DialogTrigger>
 
-            <DialogContent
-                bg="#fff"
-                w={{ base: "90%", md: "400px" }}
-                height="auto"
-                p={3}
-            >
+            <DialogContent bg="#fff" w={{ base: "90%", md: "1200px" }} height="auto" p={3}>
                 <DialogHeader bg="white">
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">
-                        Edit
+                        Edit About Us
                     </DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3}>
+                    <Stack py={3} mb={8}>
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">
-                                AboutUs
+                                About Us Content
                             </Field.Label>
-                            <Textarea
-                                placeholder="Enter About Us content"
-                                bgColor="#EEEEEE"
-                                color="black"
-                                border="none"
-                                pl={1}
-                                fontSize="12px"
-                                height="100px" // Increased height for better usability
-                                pt={1.5}
-                                value={content} // Bind the state to the textarea
-                                onChange={(e) => setContent(e.target.value)} // Update state on change
+                            {/* Use Controller to integrate ReactQuill with React Hook Form */}
+                            <Controller
+                                name="content"
+                                control={control}
+                                render={({ field }) => (
+                                    <ReactQuill
+                                        value={field.value}
+                                        onChange={field.onChange}
+                                        placeholder="Enter About Us content"
+                                        modules={{
+                                            toolbar: [
+                                                [{ 'header': [1, 2, false] }],
+                                                ['bold', 'italic', 'underline', 'strike'],
+                                                ['link', 'image'],
+                                                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+                                                ['clean']
+                                            ],
+                                        }}
+                                        formats={[
+                                            'header',
+                                            'bold', 'italic', 'underline', 'strike',
+                                            'list', 'bullet',
+                                            'link', 'image'
+                                        ]}
+                                        style={{ color: "black", border: "none", fontSize: "12px", height: "170px", width: "100%" }}
+                                    />
+                                )}
                             />
                         </Field.Root>
                     </Stack>
@@ -173,14 +126,14 @@ function AboutUsAddModel() {
                         w="100%"
                         bg="#02A0A0"
                         color="#fff"
-                        onClick={handleSubmit} // Trigger handleSubmit on button click
-                    // isLoading={isLoading} // Show loading state while the mutation is in progress
+                        // isLoading={isLoading}
+                        onClick={handleSubmit(onSubmit)} // Use handleSubmit to trigger form submission
                     >
                         Save
                     </Button>
                 </DialogFooter>
 
-                <DialogCloseTrigger color="black" />
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
             </DialogContent>
         </DialogRoot>
     );

src/Pages/ManageCMS/FAQ/EditDetails.tsx

@@ -1,64 +1,167 @@
-import { TbEdit } from "react-icons/tb";
-import { Button } from "../../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Grid, Icon, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { FaRegEdit } from "react-icons/fa";
-function EditDetails() {
-    return (
+// import { Button } from "../../../components/ui/button";
+// import {
+//   DialogBody,
+//   DialogCloseTrigger,
+//   DialogContent,
+//   DialogFooter,
+//   DialogHeader,
+//   DialogRoot,
+//   DialogTitle,
+//   DialogTrigger,
+// } from "../../../components/ui/dialog";
+// import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
+// import Edit from "../../../components/ActionIcons/Edit";
+// function EditDetails() {
+//   return (
+//     <DialogRoot placement="center">
+//       <DialogTrigger asChild>
+//         {/*  */}
+//         <Button bg={"#fff"} color={"black"}><Edit /></Button>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-                {/* <Button><FaRegEdit /></Button> */}
+//       </DialogTrigger>
 
-            </DialogTrigger>
+//       <DialogContent
+//         bg={"#fff"}
+//         // w={{ lg: "60%", md: "230px" }}
+//         w={{ base: "90%", md: "400px" }}
+//         height={"auto"}
+//         p={3} // Reduced padding
+//         bgSize={"md"}
+//       >
+//         <DialogHeader bg="white">
+//           <DialogTitle alignSelf="center" color="black" fontSize="14px">
+//             Edit Details
+//           </DialogTitle>
+//         </DialogHeader>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+//         <DialogBody bg="white">
+//           <Stack py={3}>
+//             <Field.Root>
+//               <Field.Label color="black" pt={1} fontSize="12px">
+//                 Questions
+//               </Field.Label>
+//               <Input
+//                 placeholder="Questions"
+//                 bgColor="#EEEEEE"
+//                 color="black"
+//                 border="none"
+//                 pl={1}
+//                 fontSize="12px"
+//                 height="30px"
+//               />
 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Details</DialogTitle>
-                </DialogHeader>
+//               <Field.Label color="black" pt={1} fontSize="12px">
+//                 Answer
+//               </Field.Label>
+//               <Textarea
+//                 placeholder="Answer"
+//                 bgColor="#EEEEEE"
+//                 color="black"
+//                 border="none"
+//                 pl={1}
+//                 fontSize="12px"
+//                 height="30px"
+//                 pt={1.5}
+//               />
+//             </Field.Root>
+//           </Stack>
+//         </DialogBody>
+//         <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+//           <Button w="100%" bg="#02A0A0" color={"#fff"}>
+//             Save
+//           </Button>
+//         </DialogFooter>
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+//         <DialogCloseTrigger color="black" />
+//       </DialogContent>
+//     </DialogRoot>
+//   );
+// }
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+// export default EditDetails;
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
+import { Button } from "../../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
+import Edit from "../../../components/ActionIcons/Edit";
 
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
+function EditDetails(rowData: any) {
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
 
-    )
+
+
+        <Button bg="transparent" color={"black"} h={"18px"}>    <Edit /></Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit Details (ID: {rowData?.id})
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Question
+              </Field.Label>
+              <Input
+                placeholder="Question"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                defaultValue={rowData?.question} // Pre-fill question
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Answer
+              </Field.Label>
+              <Textarea
+                placeholder="Answer"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                pt={1.5}
+                defaultValue={rowData?.answer} // Pre-fill answer
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditDetails
+export default EditDetails;

src/Pages/ManageCMS/FAQ/FAQ.tsx

@@ -5,9 +5,9 @@ import { InputGroup } from "../../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
 import DataTable from "../../../components/DataTable";
 import AlertDailog from "../../../components/AlertDailog";
-import { RiDeleteBin5Line } from "react-icons/ri";
 import { Switch } from "../../../components/ui/switch";
 import FaqAddModel from "./FaqAddModel";
+import Delete from "../../../components/ActionIcons/Delete";
 
 
 // table data
@@ -27,11 +27,13 @@ const managepost: any[] = [
     "Action": (
       <HStack justifyContent="center">
         <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
+          <Switch colorPalette={'teal'} size={"xs"} />
         </Box>
+        {/* <EditDetails /> */}
         <EditDetails />
+
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />}
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -57,11 +59,11 @@ const FAQ = () => {
           px={3}
         >
           <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-           FAQs
+            FAQs
           </Text>
 
           <HStack >
-            <InputGroup 
+            <InputGroup
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -90,7 +92,7 @@ const FAQ = () => {
           tableHeadRow={tableHeadRow}
           data={managepost}
         />
-      </Box>       
+      </Box>
     </MainFrame>
   )
 }

src/Pages/ManageCMS/FAQ/FaqAddModel.tsx

@@ -1,57 +1,84 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { IoMdAdd } from "react-icons/io"
-import { Button } from "../../../components/ui/button"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react";
+import { IoMdAdd } from "react-icons/io";
+import { Button } from "../../../components/ui/button";
 
 function FaqAddModel() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button px={5} size={"xs"} bg={"#02A0A0"}>
+          <IoMdAdd /> <Text>Add</Text>
+        </Button>
+      </DialogTrigger>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button px={5} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add
+          </DialogTitle>
+        </DialogHeader>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Questions
+              </Field.Label>
+              <Input
+                placeholder="Questions"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                _focusVisible={{outline:'none'}}
+                size={'sm'}
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Answer
+              </Field.Label>
+              <Textarea
+                placeholder="Answer"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height="120px"
+                resize={'none'}
+                _focusVisible={{outline:'none'}}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3} >
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default FaqAddModel
+export default FaqAddModel;

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx

@@ -1,66 +1,53 @@
-import { Box, HStack, Text, Skeleton } from "@chakra-ui/react";
-import MainFrame from "../../../components/MainFrame";
-import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
+import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
 import { useGetPrivacyPolicyQuery } from "../../../Redux/Service/privacy.policy.service";
+import MainFrame from "../../../components/MainFrame";
+import { Spinner } from "../../../components/Sipnner/Spinner";
+import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect } from "react";
 
 
 const PrivacyPolicy = () => {
-  // Fetch data using RTK Query with type annotations
-  const { data, isLoading } = useGetPrivacyPolicyQuery();
+  const { data, isLoading, isFetching } = useGetPrivacyPolicyQuery();
 
-  console.log(isLoading);
-  
+  const context = useContext(GlobalStateContext);
+  if (!context) throw new Error('App must be used within a GlobalStateProvider');
 
-  // Log the response for debugging
-  console.log("====================================");  
-  console.log(data);
-  console.log("====================================");
-  
-  // Extract content array from the response
-  const content = data?.data?.[0]?.content;
+  const { setIsBarLoading } = context;
+  useEffect(() => {
+    setIsBarLoading(isFetching)
+  }, [data])
 
   return (
-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-            Privacy Policy
-          </Text>
+    <MainFrame transperant={true}>
+      <VStack gap={4} pb={4} pt={0}>
+        {isLoading || isFetching ?
+          <Spinner /> : data?.data?.map(({ id, content, privacy_language }) => <VStack bg={'#fff'}
+            boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
+            <HStack
+              w={"100%"}
+              justifyContent={"space-between"}
 
-          <HStack>
-            <PrivacyPolicyAddModel />
-          </HStack>
-        </HStack>
+              py={0}
+              px={0}
+            >
+              <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+                Privacy Policy <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {privacy_language?.language_name}</Badge>
+              </Text>
 
-        {/* Render multiple skeletons or content based on loading state */}
-        {isLoading || !content ? (
-          <Box px={3} pb={3} w="90%">
-            <Skeleton height="20px" mb="10px" width="90%" />
-            <Skeleton height="20px" mb="15px" width="90%" />
-            <Skeleton height="20px" mb="10px" width="90%" />
-            <Skeleton height="20px" mb="10px" width="80%" />
-            <Skeleton height="20px" width="60%" />
-          </Box>
-        ) : (
-          <Text
-            as="p"
-            fontSize="sm"
-            fontWeight={400}
-            color="#1D1D1D"
-            px={3}
-            w="85%"
-            mb="15px"
-          >
-            {content}
-          </Text>
-        )}
-      </Box>
+              <PrivacyPolicyAddModel />
+            </HStack>
+            <Text
+              as="p"
+              fontSize="sm"
+              fontWeight={400}
+              color="#1D1D1D"
+            >
+              {content}
+            </Text>
+
+          </VStack>)}
+      </VStack>
     </MainFrame>
   );
 };

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx

@@ -1,53 +1,80 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
 
 function PrivacyPolicyAddModel() {
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
+        <Button bgColor={"#EEEEEE"} pl={3} pr={3} size={"xs"} color={"#000"}>
+          {" "}
+          <FaRegEdit
+            color="#000"
+            style={{ height: "14px", width: "14px" }}
+          />{" "}
+          <Text color={"#000"} mt={1}>
+            Edit
+          </Text>
+        </Button>
+      </DialogTrigger>
 
-            </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                PrivacyPolicy
+              </Field.Label>
+              <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height={'140px'}
+                _focusVisible={{outline:'none'}}
+                resize={'none'}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white"  >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3} >
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">PrivacyPolicy</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default PrivacyPolicyAddModel
+export default PrivacyPolicyAddModel;

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx

@@ -0,0 +1,15 @@
+import { Box, Skeleton } from '@chakra-ui/react'
+
+const PrivacyPolicySkeleton = () => {
+  return (
+    <Box px={3} pb={3} w="90%">
+      <Skeleton height="20px" mb="10px" width="90%" />
+      <Skeleton height="20px" mb="15px" width="90%" />
+      <Skeleton height="20px" mb="10px" width="90%" />
+      <Skeleton height="20px" mb="10px" width="80%" />
+      <Skeleton height="20px" width="60%" />
+    </Box>
+  )
+}
+
+export default PrivacyPolicySkeleton

src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx

@@ -1,53 +1,77 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
 
 function TermsAndConditionsAddModel() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button bgColor={"#EEEEEE"} pl={3} pr={3} size={"xs"} color={"#000"}>
+          {" "}
+          <FaRegEdit
+            color="#000"
+            style={{ height: "14px", width: "14px" }}
+          />{" "}
+          <Text color={"#000"} mt={1}>
+            Edit
+          </Text>
+        </Button>
+      </DialogTrigger>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                TermsAndConditions
+              </Field.Label>
+              <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height={'140px'}
+                _focusVisible={{outline:'none'}}
+                resize={'none'}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">TermsAndConditions</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default TermsAndConditionsAddModel
+export default TermsAndConditionsAddModel;

src/Pages/ManageGroups/EditDetailGroup.tsx

@@ -1,92 +1,119 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Avatar, Box, Field, Heading, Input, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
-import { FaRegEdit } from "react-icons/fa";
 import { AvatarGroup } from "../../components/ui/avatar";
-import { TbEdit } from "react-icons/tb";
+import Edit from "../../components/ActionIcons/Edit";
 function EditDetailGroups() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-            </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit details
+          </DialogTitle>
+        </DialogHeader>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Group Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit details</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Description
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Members
+              </Field.Label>
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+              <Box
+                bgColor="#EEEEEE"
+                border="none"
+                w="100%"
+                display="flex"
+                p={1}
+                rounded={4}
+              >
+                <AvatarGroup gap="0" spaceX="-3" size={"xs"}>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
-
-                            <Box
-                                bgColor="#EEEEEE"
-                                border="none"
-                                w="100%"
-                                display="flex"
-                                p={1}
-                                rounded={4}
-                            >
-                                <AvatarGroup gap="0" spaceX="-3" size={"xs"} >
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
-                                    </Avatar.Root>
-                                    <Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
-                                        <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
-                                    </Avatar.Root>
-                                </AvatarGroup>
-                            </Box>
-                        </Field.Root>
-                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
-                        <Switch />
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>   <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
+                  </Avatar.Root>
+                  <Avatar.Root
+                    variant="solid"
+                    border={"none"}
+                    backgroundColor={"transparent"}
+                  >
+                    <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
+                  </Avatar.Root>
+                </AvatarGroup>
+              </Box>
+            </Field.Root>
+            <Heading color="black" pt={1} fontSize="12px">
+              public/Private
+            </Heading>
+            <Switch />
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button size={"xs"} w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>{" "}
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditDetailGroups
+export default EditDetailGroups;

src/Pages/ManageGroups/ManageGroups.tsx

@@ -1,16 +1,16 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react"
-import MainFrame from "../../components/MainFrame"
-import { InputGroup } from "../../components/ui/input-group"
-import { LuSearch } from "react-icons/lu"
-import DataTable from "../../components/DataTable"
-import AlertDailog from "../../components/AlertDailog"
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import { InputGroup } from "../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../components/DataTable";
+import AlertDailog from "../../components/AlertDailog";
 import { RiDeleteBin5Line } from "react-icons/ri";
-import ViewManageGroup from "./ViewManageGroup"
-import EditDetailGroups from "./EditDetailGroup"
-import AddGroup from "./AddGroup"
+import ViewManageGroup from "./ViewManageGroup";
+import EditDetailGroups from "./EditDetailGroup";
+import AddGroup from "./AddGroup";
+import Delete from "../../components/ActionIcons/Delete";
 // import ViewSubAdmin from "./ViewSubAdmin"
 
-
 // table data
 
 const tableHeadRow = [
@@ -26,21 +26,15 @@ const managepost: any[] = [
   ...Array.from({ length: 12 }, (_, i) => ({
     "Sr. No": i + 1,
     "Group Name": "ABC",
-    "Description": "Lorem ipsum",
-    "Date": "12/01/1987",
+    Description: "Lorem ipsum",
+    Date: "12/01/1987",
     "Group type": "Private",
-    "Action": (
+    Action: (
       <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
         <ViewManageGroup />
         <EditDetailGroups />
-
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -54,8 +48,7 @@ const managepost: any[] = [
 ];
 const ManageGroups = () => {
   return (
-
-    <MainFrame >
+    <MainFrame>
       <Box>
         <HStack
           w={"100%"}
@@ -68,10 +61,13 @@ const ManageGroups = () => {
             Manage Groups
           </Text>
 
-          <HStack >
+          <HStack>
             <InputGroup
               startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
               }
               color={"#000"}
             >
@@ -85,9 +81,9 @@ const ManageGroups = () => {
                 size={"xs"}
                 fontSize={"sm"}
                 placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                 ps={8}
-                border={'none'}
+                border={"none"}
               />
             </InputGroup>
             {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
@@ -99,7 +95,8 @@ const ManageGroups = () => {
           tableHeadRow={tableHeadRow}
           data={managepost}
         />
-      </Box>    </MainFrame>
-  )
-}
-export default ManageGroups
+      </Box>{" "}
+    </MainFrame>
+  );
+};
+export default ManageGroups;

src/Pages/ManageGroups/ViewManageGroup.tsx

@@ -1,94 +1,116 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "../../components/ui/checkbox"
-import { MdOutlineRemoveRedEye } from "react-icons/md";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Avatar, Box, Field, Heading, Input, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
 import { AvatarGroup } from "../../components/ui/avatar";
-import { TbEdit } from "react-icons/tb";
+import View from "../../components/ActionIcons/View";
 function ViewManageGroup() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
 
-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            View details
+          </DialogTitle>
+        </DialogHeader>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Group Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View details</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Description
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Members
+              </Field.Label>
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+              <Box
+                bgColor="#EEEEEE"
+                border="none"
+                w="100%"
+                display="flex"
+                p={1}
+                rounded={4}
+              >
+                <AvatarGroup gap="0" spaceX="-3" size={"xs"}>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
+                  </Avatar.Root>
+                  <Avatar.Root
+                    variant="solid"
+                    border={"none"}
+                    backgroundColor={"transparent"}
+                  >
+                    <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
+                  </Avatar.Root>
+                </AvatarGroup>
+              </Box>
+            </Field.Root>
+            <Heading color="black" pt={1} fontSize="12px">
+              public/Private
+            </Heading>
+            <Switch />
+          </Stack>
+        </DialogBody>
 
-                            <Box
-                                bgColor="#EEEEEE"
-                                border="none"
-                                w="100%"
-                                display="flex"
-                                p={1}
-                                rounded={4}
-                            >
-                                <AvatarGroup gap="0" spaceX="-3" size={"xs"} >
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
-                                    </Avatar.Root>
-                                    <Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
-                                        <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
-                                    </Avatar.Root>
-                                </AvatarGroup>
-                            </Box>
-
-                        </Field.Root>
-                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
-                        <Switch />
-                    </Stack>
-                </DialogBody>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewManageGroup
+export default ViewManageGroup;

src/Pages/ManageJobs/ManageJobs.tsx

@@ -7,7 +7,7 @@ import MainFrame from "../../components/MainFrame";
 import { InputGroup } from "../../components/ui/input-group";
 import ManageJobsAdd from "./ManageJobsAdd";
 import ViewManageJob from "./ViewManageJob";
-
+import Delete from "../../components/ActionIcons/Delete";
 
 // table data
 
@@ -26,21 +26,15 @@ const managepost: any[] = [
     "Sr. No": i + 1,
     "Job Title": "Freelance content writer",
     "Workspace mode": "Onsite",
-    "Category": "IT",
+    Category: "IT",
     "Sub-category": "Flutter dev",
-    "Salary": "3.5 LPA",
-    "Action": (
+    Salary: "3.5 LPA",
+    Action: (
       <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
-        {/* <ViewDailog /> */}
         <ViewManageJob />
         <ManageJobsAdd />
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />}
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -55,7 +49,6 @@ const managepost: any[] = [
 
 const ManageJobs = () => {
   return (
-
     <MainFrame>
       <Box>
         <HStack
@@ -69,10 +62,13 @@ const ManageJobs = () => {
             View job Posting
           </Text>
 
-          <HStack >
-            <InputGroup 
+          <HStack>
+            <InputGroup
               startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
               }
               color={"#000"}
             >
@@ -86,7 +82,7 @@ const ManageJobs = () => {
                 size={"xs"}
                 fontSize={"sm"}
                 placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                 ps={8}
               />
             </InputGroup>
@@ -98,8 +94,8 @@ const ManageJobs = () => {
           tableHeadRow={tableHeadRow}
           data={managepost}
         />
-      </Box>       
+      </Box>
     </MainFrame>
-  )
-}
-export default ManageJobs
+  );
+};
+export default ManageJobs;

src/Pages/ManageJobs/ManageJobsAdd.tsx

@@ -1,125 +1,261 @@
-import { Field, Icon, Input, SelectValueText, Stack, createListCollection } from "@chakra-ui/react";
+import {
+  Field,
+  Icon,
+  Input,
+  SelectValueText,
+  Stack,
+  createListCollection,
+} from "@chakra-ui/react";
 import { Button } from "../../components/ui/button";
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
 
 import { TbEdit } from "react-icons/tb";
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+} from "../../components/ui/select";
+import Edit from "../../components/ActionIcons/Edit";
 
 const frameworks = createListCollection({
-    items: [
-        { label: "React.js", value: "react" },
-        { label: "Vue.js", value: "vue" },
-        { label: "Angular", value: "angular" },
-        { label: "Svelte", value: "svelte" },
-    ],
-})
+  items: [
+    { label: "React.js", value: "react" },
+    { label: "Vue.js", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+  ],
+});
 function ManageJobsAdd() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        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">
+            Add Details
+          </DialogTitle>
+        </DialogHeader>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                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">Add Details</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                        <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.Root>
-                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <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.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>
-                        <Field.Root>
+            <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>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+          >
+            Save
+          </Button>
+        </DialogFooter>
 
-                            <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>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ManageJobsAdd
+export default ManageJobsAdd;

src/Pages/ManageJobs/ViewManageJob.tsx

@@ -1,119 +1,276 @@
-import { Field, Icon, Input, SelectValueText, Stack, createListCollection, } from "@chakra-ui/react"
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import {
+  Field,
+  Icon,
+  Input,
+  SelectValueText,
+  Stack,
+  createListCollection,
+} from "@chakra-ui/react";
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
 
-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+} from "../../components/ui/select";
+import View from "../../components/ActionIcons/View";
 
 const frameworks = createListCollection({
-    items: [
-        { label: "React.js", value: "react" },
-        { label: "Vue.js", value: "vue" },
-        { label: "Angular", value: "angular" },
-        { label: "Svelte", value: "svelte" },
-    ],
-})
+  items: [
+    { label: "React.js", value: "react" },
+    { label: "Vue.js", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+  ],
+});
 function ViewManageJob() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        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">
+            Add Details
+          </DialogTitle>
+        </DialogHeader>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                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">Add Details</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                        <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.Root>
-                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <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.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>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
+            <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>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+          >
+            Save
+          </Button>
+        </DialogFooter>
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewManageJob
+export default ViewManageJob;

src/Pages/ManagePost/ManagePost.tsx

@@ -1,14 +1,14 @@
-
-import { Box, HStack, Image, Input, Text } from '@chakra-ui/react'
-import MainFrame from '../../components/MainFrame'
-import { InputGroup } from '../../components/ui/input-group'
-import { LuSearch } from 'react-icons/lu'
-import DataTable from '../../components/DataTable'
-import AlertDailog from '../../components/AlertDailog'
-import { Switch } from '../../components/ui/switch'
-import img from "../../assets/waterfall.jpg"
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import { InputGroup } from "../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../components/DataTable";
+import AlertDailog from "../../components/AlertDailog";
+import { Switch } from "../../components/ui/switch";
+import img from "../../assets/waterfall.jpg";
 import { RiDeleteBin5Line } from "react-icons/ri";
-import ViewDailog from './ViewDailog'
+import ViewDailog from "./ViewDailog";
+import Delete from "../../components/ActionIcons/Delete";
 // import ViewDailog from './ViewDailog'
 
 // table data
@@ -25,31 +25,29 @@ const tableHeadRow = [
 const managepost: any[] = [
   ...Array.from({ length: 12 }, (_, i) => ({
     "Sr. No": i + 1,
-    "Images": (
+    Images: (
       // <Image w={50} src={img} />
-      <Image rounded={'lg'} w={100} h={50} src={img} />
-
-
+      <Image rounded={"lg"} w={100} h={50} src={img} />
+    ),
+    Description: (
+      <Text>
+        {`Lorem ipsum dolor, sit amet consectetur adipisicing elit.}`.slice(
+          0,
+          30
+        ) + "..."}
+      </Text>
     ),
-    "Description": (<Text>
-      {`Lorem ipsum dolor, sit amet consectetur adipisicing elit.}`.slice(0, 30) + '...'}
-    </Text>),
     "Publish Data": "12/01/2025",
     "Activate/Deactivate": (
-      <Box w={'100%'} >
-        <Switch size={'sm'} colorPalette={'teal'} />
+      <Box w={"100%"}>
+        <Switch size={"sm"} colorPalette={"teal"} />
       </Box>
     ),
-    "Action": (
+    Action: (
       <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
         <ViewDailog />
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -79,7 +77,10 @@ const ManagePost = () => {
           <HStack>
             <InputGroup
               startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
               }
               color={"#000"}
             >
@@ -93,7 +94,7 @@ const ManagePost = () => {
                 size={"xs"}
                 fontSize={"sm"}
                 placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                 ps={8}
               />
             </InputGroup>
@@ -106,7 +107,7 @@ const ManagePost = () => {
         />
       </Box>
     </MainFrame>
-  )
-}
+  );
+};
 
-export default ManagePost
+export default ManagePost;

src/Pages/ManagePost/ViewDailog.tsx

@@ -2,22 +2,14 @@ import { Field, Icon, Image, Input, 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"
+import Edit from "../../components/ActionIcons/Edit"
 
 function ViewDailog() {
     return (
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
+                <Edit />
             </DialogTrigger>
 
             <DialogContent

src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx

@@ -9,6 +9,7 @@ import { LuSearch } from "react-icons/lu";
 import ViewRegisterUsers from "./ViewRegisterUsers";
 import EditRegisterUsers from "./EditRegisterUsers";
 import AddRegisterUsers from "./AddRegisterUsers";
+import Delete from "../../../components/ActionIcons/Delete";
 
 const tableHeadRow = [
   "Sr. No",
@@ -42,7 +43,7 @@ const registerUser: any[] = [
         <EditRegisterUsers />
         {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          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

@@ -9,31 +9,23 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
+import View from "../../../components/ActionIcons/View";
 
 function ViewRegisterUsers() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-      <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
+        <View />
       </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">
@@ -48,42 +40,72 @@ 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

@@ -1,83 +1,152 @@
-import { FaRegEdit } from "react-icons/fa"
-import { Button } from "../../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Icon, Input, Stack, } from "@chakra-ui/react"
-import { TbEdit } from "react-icons/tb"
-
+import { Button } from "../../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditAgencyMaster() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        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">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Agency name
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                RC No.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                State
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Registered Office Address
+              </Field.Label>
+              <Input
+                value="Active"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Website/Domain
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                GST no.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Action
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
           >
-            <TbEdit />
-          </Icon>
-            </DialogTrigger>
+            Save
+          </Button>
+        </DialogFooter>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                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">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                    <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Agency name</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
-                            <Input value="Active" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditAgencyMaster
+export default EditAgencyMaster;

src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx

@@ -1,83 +1,153 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Icon, Input, Stack, } from "@chakra-ui/react"
-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { Button } from "../../../components/ui/button"
-
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Button } from "../../../components/ui/button";
+import View from "../../../components/ActionIcons/View";
 
 function ViewAgencyMaster() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        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">
+            Add
+          </DialogTitle>
+        </DialogHeader>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Agency name
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                RC No.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                State
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Registered Office Address
+              </Field.Label>
+              <Input
+                value="Active"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Website/Domain
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                GST no.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Action
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
           >
-            <MdOutlineRemoveRedEye />
-          </Icon>
-            </DialogTrigger>
+            Save
+          </Button>
+        </DialogFooter>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                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">Add</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                    <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Agency name</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
-                            <Input value="Active" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewAgencyMaster
+export default ViewAgencyMaster;

src/Pages/MasterModule/Country/EditCountryModel.tsx

@@ -1,61 +1,67 @@
-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 { Button } from "../../../components/ui/button"
-import { FaRegEdit } from "react-icons/fa";
-
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  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 Edit from "../../../components/ActionIcons/Edit";
 
 function EditCountryModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-   
-    return (
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Country
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Country</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditCountryModel
+export default EditCountryModel;

src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx

@@ -2,6 +2,7 @@ import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHead
 import { Box, Field, IconButton, Input, 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";
 
 
 function EditJobStatusModel() {
@@ -12,13 +13,7 @@ function EditJobStatusModel() {
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
-
+               <Edit />
             </DialogTrigger>
 
             <DialogContent

src/Pages/MasterModule/JobType/EditJobModel.tsx

@@ -1,62 +1,67 @@
-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 { Button } from "../../../components/ui/button"
-import { FiUpload } from "react-icons/fi";
-import { FaRegEdit } from "react-icons/fa";
-
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  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 Edit from "../../../components/ActionIcons/Edit";
 
 function EditJobeModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-   
-    return (
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Job Type
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job Type</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditJobeModel
+export default EditJobeModel;

src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx

@@ -1,100 +1,143 @@
-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 { Button } from "../../../components/ui/button"
+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 { Button } from "../../../components/ui/button";
 import { FiUpload } from "react-icons/fi";
 import { useState } from "react";
 import { FaRegEdit } from "react-icons/fa";
-
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditTemplateModel() {
+  const [images, setImages] = useState<string[]>([]);
 
-    const [images, setImages] = useState<string[]>([]);
+  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const selectedFiles = Array.from(event.target.files);
 
-    const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (event.target.files) {
-        const selectedFiles = Array.from(event.target.files);
-  
-        const newImages = selectedFiles.map((file) => {
-          return URL.createObjectURL(file); // Convert to preview URL
-        });
-  
-        setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
-      }
-    };
+      const newImages = selectedFiles.map((file) => {
+        return URL.createObjectURL(file); // Convert to preview URL
+      });
 
-   
-    return (
+      setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
+    }
+  };
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-               
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
-            </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add
+          </DialogTitle>
+        </DialogHeader>
 
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Template Name
+              </Field.Label>
+              <Input
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3}>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Images
+              </Field.Label>
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+                px={3}
+                bgColor="#EEEEEE"
+                border="none"
+                width="100%"
+                height="50px"
+                cursor="pointer"
+                position="relative"
+              >
+                <Input
+                  type="file"
+                  accept="image/*"
+                  opacity={0}
+                  position="absolute"
+                  bgColor="#EEEEEE"
+                  border="none"
+                  pl={1}
+                  width="100%"
+                  height="100%"
+                  cursor="pointer"
+                  onChange={handleImageChange}
+                />
+                <Box display="flex" gap={2} overflow="hidden">
+                  {images.length > 0 ? (
+                    images.map((img, index) => (
+                      <img
+                        key={index}
+                        src={img}
+                        alt={`Uploaded ${index}`}
+                        style={{
+                          maxHeight: "40px",
+                          maxWidth: "70px",
+                          objectFit: "contain",
+                        }}
+                      />
+                    ))
+                  ) : (
+                    <Box width="70px" height="40px" /> // Placeholder to maintain layout
+                  )}
+                </Box>
+                <FiUpload color="#000" />
+              </Box>
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Template Name</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+              {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
-                            <Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%"  height="50px" cursor="pointer"  position="relative">
-                            <Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%"  cursor="pointer" onChange={handleImageChange}/>
-                            <Box display="flex" gap={2} overflow="hidden">
-                                {images.length > 0 ? (
-                                images.map((img, index) => (
-                                    <img
-                                    key={index}
-                                    src={img}
-                                    alt={`Uploaded ${index}`}
-                                    style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
-                                    />
-                                ))
-                                ) : (
-                                <Box width="70px" height="40px" /> // Placeholder to maintain layout
-                                )}
-                            </Box>
-                              <FiUpload color="#000" />
-                            </Box>
-                           
-                            {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
-
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditTemplateModel
+export default EditTemplateModel;

src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx

@@ -1,61 +1,76 @@
-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 { Button } from "../../../components/ui/button"
+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 { Button } from "../../../components/ui/button";
 import { FaRegEdit } from "react-icons/fa";
-
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditWorkModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-   
-    return (
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Workspace Mode
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Workspace Mode</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditWorkModel
+export default EditWorkModel;

src/Pages/Profile/Profile.tsx

@@ -1,7 +1,6 @@
-import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react"
-import MainFrame from "../../components/MainFrame"
+import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react";
 import { FaCamera } from "react-icons/fa";
-import { Button } from "../../components/ui/button";
+import MainFrame from "../../components/MainFrame";
 import Changepassword from "./ChangePassword";
 
 const Profile = () => {
@@ -10,13 +9,11 @@ const Profile = () => {
       <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"
@@ -27,7 +24,6 @@ const Profile = () => {
           </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>
@@ -35,14 +31,16 @@ const Profile = () => {
           <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>
+              <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>
+              <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>
-
+              <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}>

src/Pages/SubAdmin/SubAdmin.tsx

@@ -8,6 +8,7 @@ import { RiDeleteBin5Line } from "react-icons/ri";
 import AddModel from "./AddModel"
 import EditSubAdmin from "../../components/EditSubAdmin"
 import ViewSubAdmin from "./ViewSubAdmin"
+import Delete from "../../components/ActionIcons/Delete"
 
 
 // table data
@@ -37,7 +38,7 @@ const managepost: any[] = [
         <EditSubAdmin />
 
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"

src/Pages/SubAdmin/ViewSubAdmin.tsx

@@ -1,93 +1,183 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "../../components/ui/checkbox"
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import {
+  Field,
+  Grid,
+  Heading,
+  Icon,
+  Input,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import { Checkbox } from "../../components/ui/checkbox";
 import { MdOutlineRemoveRedEye } from "react-icons/md";
 import { FaRegEdit } from "react-icons/fa";
+import View from "../../components/ActionIcons/View";
 function ViewSubAdmin() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
 
-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
-               
-                    {/* <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize:'16px'}} color="#000"/> */}
-               
-                {/* <Button><MdOutlineRemoveRedEye /></Button> */}
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        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">
+            View Sub Admin Account
+          </DialogTitle>
+        </DialogHeader>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                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">View Sub Admin Account</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Last Name
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Field.Label color="black" pt={1} fontSize="12px">
+                ID
+              </Field.Label>
+              <Input
+                value="ID"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+              <Field.Label color="black" pt={1} fontSize="12px">
+                DOB
+              </Field.Label>
+              <Input
+                value="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">ID</Field.Label>
-                            <Input value="ID" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
-                            <Input value="11/02/1989" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
-                            <Input value="Male" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly
-                            />
-                            <Heading mt={5} color={'#000'} fontSize={'sm'}>Permissions</Heading>
-                        </Field.Root>
-                        <Grid templateColumns="repeat(2, 1fr)" gap={4}>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage contact us</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>manage User</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage CMS</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage Post</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage Reports</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>My profile</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}> manage feedbacks</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}>Manage community</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}> Notification</Text></Checkbox>
-                        </Grid>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"} >
-                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Gender
+              </Field.Label>
+              <Input
+                value="Male"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
+              <Heading mt={5} color={"#000"} fontSize={"sm"}>
+                Permissions
+              </Heading>
+            </Field.Root>
+            <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Dashboard</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage contact us</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>manage User</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage CMS</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage Post</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage Reports</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>manage Sub-Admin</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>My profile</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Jobs</Text>{" "}
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}> manage feedbacks</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage community</Text>{" "}
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}> Notification</Text>
+              </Checkbox>
+            </Grid>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button> */}
-                </DialogFooter>
+        </DialogFooter>
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewSubAdmin
+export default ViewSubAdmin;

src/Redux/Service/manage.aboutus.service.ts

@@ -1,6 +1,6 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";
-
+import { AboutUsResponse } from "../../Types/aboutUsType";
 export const aboutUs = createApi({
   reducerPath: "aboutUs",
   baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
@@ -30,16 +30,22 @@ export const aboutUs = createApi({
         body: data,
       }),
     }),
-
     // 🔹 PUT: Update an existing post
-    updateAboutUs: builder.mutation<UpdateAboutUsResponse, UpdateAboutUsRequest>({
-      query: ({ id, updatedData }) => ({
-        url: `/posts/${id}`,
-        method: "POST",
-        body: updatedData,
+    // updateAboutUs: builder.mutation<UpdateAboutUsResponse, UpdateAboutUsRequest>({
+    //   query: ({ id, updatedData }) => ({
+    //     url: `/posts/${id}`,
+    //     method: "POST",
+    //     body: updatedData,
+    //   }),
+    // }),
+       // 🔹 PUT: Update an About Us entry
+       updateAboutUs: builder.mutation({
+        query: (updatedData) => ({
+          url: "/about-us/update", // ✅ Updated URL
+          method: "POST",
+          body: updatedData,
+        }),
       }),
-    }),
-
     // 🔹 DELETE: Remove a post by ID
     deletePost: builder.mutation<{ success: boolean }, number>({
       query: (id) => ({
@@ -78,12 +84,12 @@ export type Post = {
 
 
 export type UpdateAboutUsRequest={
-  id: number; updatedData: string
+  id: number; updatedData: string,language_code:string
 }
 
 
 export type UpdateAboutUsResponse={
-  id: number; updatedData: string
+  id: number; updatedData: string,language_code:string
 }
 
 
@@ -94,10 +100,3 @@ export type AboutUs = {
   is_active: boolean;
 };
 
-// First define your interface
-interface AboutUsResponse {
-  data: {
-    content: string;
-    // other fields...
-  }[];
-}

src/Routes/Nav.ts

@@ -17,18 +17,18 @@ export const nav = [
         },
         {
           title: "Manage Users",
-          path: "/register-users",
+          initPath: "/manage-users",
           Icon: BiUserPin,
           type:'multiple',
           children: [
             {
               title: "Register Users",
-              path: "/register-users",
+              path: "/manage-users/register-users",
               Icon: GoDotFill,
             },
             {
               title: "Deactivated Accounts",
-              path: "/deactivated-accounts",
+              path: "/manage-users/deactivated-accounts",
               Icon: GoDotFill,
             },
           ],
@@ -65,33 +65,33 @@ export const nav = [
         },
         {
           title: "Manage CMS",
-          path: "/faq",
+          initPath: "/manage-cms",
           Icon: AiOutlineFileText,
           type:'multiple',
           children: [
             {
               title: "FAQs",
-              path: "/faq",
+              path: "/manage-cms/faq",
               Icon: GoDotFill,
             },
             {
               title: "About Us",
-              path: "/about-us",
+              path: "/manage-cms/about-us",
               Icon: GoDotFill,
             },
             {
               title: "Privacy Policy",
-              path: "/privacy-policy",
+              path: "/manage-cms/privacy-policy",
               Icon: GoDotFill,
             },
             {
               title: "Terms And Conditions",
-              path: "/terms-conditions",
+              path: "/manage-cms/terms-conditions",
               Icon: GoDotFill,
             },
             {
               title: "Privacy",
-              path: "/privacy",
+              path: "/manage-cms/privacy",
               Icon: GoDotFill,
             },
           ],
@@ -104,38 +104,38 @@ export const nav = [
         },
         {
           title: "Master Module",
-          path: "/agency-master",
+          initPath: "/master-module",
           Icon: BsBoxes,
           type:'multiple',
           children: [
             {
               title: "Agency Master",
-              path: "/agency-master",
+              path: "/master-module/agency-master",
               Icon: GoDotFill,
             },
             {
               title: "Template Master",
-              path: "/template-master",
+              path: "/master-module/template-master",
               Icon: GoDotFill,
             },
             {
               title: "Job Type",
-              path: "/job-type",
+              path: "/master-module/job-type",
               Icon: GoDotFill,
             },
             {
               title: "Workspace Mode",
-              path: "/workspace-mode",
+              path: "/master-module/workspace-mode",
               Icon: GoDotFill,
             },
             {
               title: "Country",
-              path: "/country",
+              path: "/master-module/country",
               Icon: GoDotFill,
             },
             {
               title: "Job Status",
-              path: "/job-status",
+              path: "/master-module/job-status",
               Icon: GoDotFill,
             },
           ],

src/Routes/Routes.ts

@@ -27,27 +27,40 @@ import { Spinner } from "../components/Sipnner/Spinner";
 export const RouteLink = [
     { path: "/", Component: Dashboard },
     { path: "/dashboard", Component: Dashboard },
-    { path: "/register-users", Component: RegisterUsers },
-    { path: "/deactivated-accounts", Component: DeactivatedAccounts },
+    { path: "/manage-users/register-users", Component: RegisterUsers },
+    { path: "/manage-users/deactivated-accounts", Component: DeactivatedAccounts },
     { path: "/manage-post", Component: ManagePost },
     { path: "/sub-admin", Component: SubAdmin},
     { path: "/manage-jobs", Component: ManageJobs},
     { path: "/manage-groups", Component: ManageGroups },
     { path: "/manage-contact", Component: ManageContact},
-    { path: "/faq", Component: FAQ},
-    { path: "/about-us", Component: AboutUs},
-    { path: "/privacy-policy", Component: PrivacyPolicy},
-    { path: "/terms-conditions", Component: TermsAndConditions},
-    { path: "/privacy", Component: Privacy},
+
+
+
+    { path: "/manage-cms/faq", Component: FAQ},
+    { path: "/manage-cms/about-us", Component: AboutUs},
+    { path: "/manage-cms/privacy-policy", Component: PrivacyPolicy},
+    { path: "/manage-cms/terms-conditions", Component: TermsAndConditions},
+    { path: "/manage-cms/privacy", Component: Spinner},
+
+
+
     { path: "/my-profile", Component: MyProfile},
     { path: "/manage-notification", Component: Notification},
+
+
+
+
+
     { path: "/profile", Component: Profile},
-    { path: "/agency-master", Component: AgencyMaster},
-    { path: "/template-master", Component: TemplateMaster},
-    { path: "/job-type", Component: JobType},
-    { path: "/workspace-mode", Component: WorkspaceMode},
-    { path: "/country", Component: Country},
-    { path: "/job-status", Component: JobStatus},
+
+
+    { path: "/master-module/agency-master", Component: AgencyMaster},
+    { path: "/master-module/template-master", Component: TemplateMaster},
+    { path: "/master-module/job-type", Component: JobType},
+    { path: "/master-module/workspace-mode", Component: WorkspaceMode},
+    { path: "/master-module/country", Component: Country},
+    { path: "/master-module/job-status", Component: JobStatus},
     // { path: "/job-status", Component: Spinner},
 
 ]

src/Types/aboutUsType.tsx

@@ -0,0 +1,27 @@
+// First define your interface
+// export interface AboutUsResponse {
+//     data: {
+//         content: string;
+//         // other fields...
+//     }[];
+// }
+
+
+export interface AboutUsContent {
+    id: number;
+    language_master_xid: number;
+    content: string;
+    is_active: boolean;
+    about_language: {
+        id: number;
+        language_code: string;
+        language_name: string;
+    }
+}
+
+export interface AboutUsResponse {
+    status: "success" | "error"; // Assuming it can be "success" or "error"
+    status_code: number;
+    message: string;
+    data: AboutUsContent[];
+}

src/Types/privacyPolicyTypes.tsx

@@ -3,6 +3,11 @@ export interface PrivacyPolicyContent {
   language_master_xid: number;
   content: string;
   is_active: boolean;
+  privacy_language:{
+    id:number;
+    language_code:string;
+    language_name:string;
+  }
 }
 
 export interface PrivacyPolicyResponse {

src/components/ActionIcons/Delete.tsx

@@ -0,0 +1,34 @@
+import { Icon, Image } from "@chakra-ui/react";
+import { Tooltip } from "../ui/tooltip";
+import { RiDeleteBin5Line } from "react-icons/ri";
+
+const Delete = () => {
+  return (
+    <Tooltip
+      content="Delete"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#fed7d7",
+          color: "#822727",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+        // color={iconColor && iconColor}
+      >
+        <RiDeleteBin5Line />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default Delete;

src/components/ActionIcons/Edit.tsx

@@ -1,22 +1,33 @@
-import { Icon } from '@chakra-ui/react'
-import { TbEdit } from 'react-icons/tb'
-import { Tooltip } from '../ui/tooltip'
+import { Icon } from "@chakra-ui/react";
+import { TbEdit } from "react-icons/tb";
+import { Tooltip } from "../ui/tooltip";
 
 const Edit = () => {
   return (
-    <Tooltip content='Edit' >
-    <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-        </Tooltip>
-  )
-}
+    <Tooltip
+      content="Edit"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#c6f6d5",
+          color: "#22543d",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+      >
+        <TbEdit />
+      </Icon>
+    </Tooltip>
+  );
+};
 
-export default Edit
+export default Edit;

src/components/ActionIcons/View.tsx

@@ -0,0 +1,34 @@
+import { Icon } from "@chakra-ui/react";
+import { Tooltip } from "../ui/tooltip";
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+
+const View = () => {
+  return (
+    <Tooltip
+      content="View"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#ccecec",
+          color: "#055757",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+        // color={iconColor && iconColor}
+      >
+        <MdOutlineRemoveRedEye />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default View;

src/components/EditSubAdmin.tsx

@@ -12,22 +12,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "./ui/dialog";
+import Edit from "./ActionIcons/Edit";
 function EditSubAdmin() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
           {/* <FaRegEdit style={{ cursor: "pointer" }} color="#000" /> */}
 
-          <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
+          <Edit />
         {/* <Button><FaRegEdit /></Button> */}
       </DialogTrigger>
 

src/components/MainFrame.tsx

@@ -9,19 +9,20 @@ const MotionVStack = motion(VStack)
 interface MainFrameProps {
   children: React.ReactNode
   title?: string
+  transperant?:boolean
 }
 
-const MainFrame: FC<MainFrameProps> = ({ children }) => {
+const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
   return (
-    <MotionVStack  rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%"  p={0} pe={2} ps={1.5}  pb={2}>
+    <MotionVStack overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
       <Box
         w="100%"
-        // h="100%"
-        bg="#ffffff"
+        // minH="100%"
+        bg={transperant?'transperant':"#ffffff"}
         // overflow={'scroll'}
         rounded="lg"
-        boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
-        pt={3}
+        boxShadow={transperant?'none':'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
+        pt={transperant?0:3}
         
       >
         {children}

src/components/Sipnner/Spinner.tsx

@@ -1,6 +1,7 @@
 import { Center } from '@chakra-ui/react'
 import './Spinner.css'
-export const Spinner = () => <Center w={'100%'} h={'100%'}> <div className='loader'/></Center>
+import MainFrame from '../MainFrame'
+export const Spinner = () =><Center boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} w={'100%'} h={'89vh'} bg={'#fff'} > <div className='loader'/></Center>
 
 
 

src/index.css

@@ -42,6 +42,7 @@ body {
   transition: all 0.5s;
   border-radius: 8px;
   /* background-color: #e2e8f01c; */
+  
 }
 
 .active:hover {
@@ -153,11 +154,13 @@ body {
   width: 6px;
   height: 8px;
   cursor: pointer;
+
 }
 
 /* Scrollbar track */
 ::-webkit-scrollbar-track {
   background: transparent; /* No visible track */
+  border-radius: 50%;
 }
 
 /* Scrollbar thumb (the draggable part) */