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/Pages/ManageCMS/AboutUs/AboutUs.tsx

@@ -1,68 +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 pb={4}>
-        <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>
+          ))
         )}
-      </Box>
+      </VStack>
     </MainFrame>
-  )
-}
-export default AboutUs
+  );
+};
+
+export default AboutUs;

src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx

@@ -1,119 +1,142 @@
-import React, { useState } from "react";
 import { FaRegEdit } from "react-icons/fa";
 import {
-  DialogBody,
-  DialogCloseTrigger,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger,
+    DialogBody,
+    DialogCloseTrigger,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogRoot,
+    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();
 
-    try {
-      // Call the updateAboutUs mutation
-      const res = await updateAboutUs({ id: 2, updatedData: content }).unwrap();
-      console.log(res);
+    // React Hook Form
+    const {
+        control,
+        handleSubmit,
+        reset,
+        setValue,
+    } = useForm({
+        defaultValues: {
+            content: "",
+            languageCode: "",
+        },
+    });
 
-      // Show success toast
-      //   toast({
-      //     title: "Success",
-      //     description: "About Us content updated successfully",
-      //     status: "success",
-      //     duration: 5000,
-      //     isClosable: true,
-      //   });
+    // 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
+    };
 
-      // Clear the input field after successful submission
-      setContent("");
-    } catch (error) {
-      // Show error toast
-      //   toast({
-      //     title: "Error",
-      //     description: "Failed to update About Us content",
-      //     status: "error",
-      //     duration: 5000,
-      //     isClosable: true,
-      //   });
-    }
-  };
+    // Function to handle update submission
+    const onSubmit = async (formData: any) => {
+        if (!formData.content.trim()) return; // Prevent empty updates
 
-  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>
+        try {
+            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) {
+            console.error("Update failed:", error);
+        }
+    };
 
-      <DialogContent
-        bg="#fff"
-        w={{ base: "90%", md: "400px" }}
-        height="auto"
-        p={3}
-      >
-        <DialogHeader bg="white">
-          <DialogTitle alignSelf="center" color="black" fontSize="14px">
-            Edit
-          </DialogTitle>
-        </DialogHeader>
+    return (
+        <DialogRoot placement="center" open={isOpen}>
+            <DialogTrigger asChild>
+                <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>
+                </Button>
+            </DialogTrigger>
 
-        <DialogBody bg="white">
-          <Stack py={3}>
-            <Field.Root>
-              <Field.Label color="black" pt={1} fontSize="12px">
-                AboutUs
-              </Field.Label>
-              <Textarea
-                placeholder="Enter About Us content"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                p={2}
-                fontSize="12px"
-                height="140px" // Increased height for better usability
-                pt={1.5}
-                value={content} // Bind the state to the textarea
-                onChange={(e) => setContent(e.target.value)} 
-                resize={'none'}
-                _focusVisible={{outline:'none'}}
-              />
-            </Field.Root>
-          </Stack>
-        </DialogBody>
+            <DialogContent bg="#fff" w={{ base: "90%", md: "1200px" }} height="auto" p={3}>
+                <DialogHeader bg="white">
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">
+                        Edit About Us
+                    </DialogTitle>
+                </DialogHeader>
 
-        <DialogFooter display="flex" justifyContent="center" pt="2">
-          <Button
-            w="100%"
-            bg="#02A0A0"
-            color="#fff"
-            onClick={handleSubmit} // Trigger handleSubmit on button click
-            // isLoading={isLoading} // Show loading state while the mutation is in progress
-          >
-            Save
-          </Button>
-        </DialogFooter>
+                <DialogBody bg="white">
+                    <Stack py={3} mb={8}>
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">
+                                About Us Content
+                            </Field.Label>
+                            {/* 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>
+                </DialogBody>
 
-        <DialogCloseTrigger color="black" />
-      </DialogContent>
-    </DialogRoot>
-  );
+                <DialogFooter display="flex" justifyContent="center" pt="2">
+                    <Button
+                        w="100%"
+                        bg="#02A0A0"
+                        color="#fff"
+                        // isLoading={isLoading}
+                        onClick={handleSubmit(onSubmit)} // Use handleSubmit to trigger form submission
+                    >
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+            </DialogContent>
+        </DialogRoot>
+    );
 }
 
-export default AboutUsAddModel;
+export default AboutUsAddModel;

src/Pages/ManageCMS/FAQ/EditDetails.tsx

@@ -1,3 +1,85 @@
+// 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>
+
+//       </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>
+
+//         <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>
+//   );
+// }
+
+// export default EditDetails;
+
 import { Button } from "../../../components/ui/button";
 import {
   DialogBody,
@@ -11,24 +93,27 @@ import {
 } from "../../../components/ui/dialog";
 import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
 import Edit from "../../../components/ActionIcons/Edit";
-function EditDetails() {
+
+function EditDetails(rowData: any) {
+
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Edit />
+
+
+
+        <Button bg="transparent" color={"black"} h={"18px"}>    <Edit /></Button>
       </DialogTrigger>
 
       <DialogContent
         bg={"#fff"}
-        // w={{ lg: "60%", md: "230px" }}
         w={{ base: "90%", md: "400px" }}
         height={"auto"}
-        p={3} // Reduced padding
-        bgSize={"md"}
+        p={3}
       >
         <DialogHeader bg="white">
           <DialogTitle alignSelf="center" color="black" fontSize="14px">
-            Edit Details
+            Edit Details (ID: {rowData?.id})
           </DialogTitle>
         </DialogHeader>
 
@@ -36,16 +121,17 @@ function EditDetails() {
           <Stack py={3}>
             <Field.Root>
               <Field.Label color="black" pt={1} fontSize="12px">
-                Questions
+                Question
               </Field.Label>
               <Input
-                placeholder="Questions"
+                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">
@@ -60,10 +146,12 @@ function EditDetails() {
                 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

src/Pages/ManageCMS/FAQ/FAQ.tsx

@@ -5,7 +5,6 @@ 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";
@@ -28,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={() => <Delete />} 
+          AltertTiggerIcon={() => <Delete />}
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -58,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' }} />
               }
@@ -91,7 +92,7 @@ const FAQ = () => {
           tableHeadRow={tableHeadRow}
           data={managepost}
         />
-      </Box>       
+      </Box>
     </MainFrame>
   )
 }

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx

@@ -12,12 +12,12 @@ const PrivacyPolicy = () => {
 
   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}>
@@ -32,7 +32,7 @@ const PrivacyPolicy = () => {
               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>
+                Privacy Policy <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {privacy_language?.language_name}</Badge>
               </Text>
 
               <PrivacyPolicyAddModel />

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx

@@ -1,15 +1,14 @@
 import { Box, Skeleton } from '@chakra-ui/react'
-import React from '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>
+      <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>
   )
 }
 

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/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[];
+}