worked on the about

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.ahcfbbr0fl8"
+    "revision": "0.ch9snbb3598"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/Pages/Login.tsx

@@ -5,6 +5,7 @@ import {
   Image,
   Input,
   Text,
+  Theme,
   VStack,
 } from "@chakra-ui/react";
 import axios from "axios";

src/Pages/ManageCMS/AboutUs/AboutUs.tsx

@@ -1,68 +1,132 @@
-import { Box, HStack, Skeleton, Text } from "@chakra-ui/react";
+// import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
-import MainFrame from "../../../components/MainFrame"
+// import MainFrame from "../../../components/MainFrame"
-import AboutUsAddModel from "../../ManageCMS/AboutUs/AboutUsAddModel";
+// 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
+  const context = useContext(GlobalStateContext);
-  console.log('====================================');
+  if (!context) throw new Error("App must be used within a GlobalStateProvider");
-  // console.log(response);
-  console.log('====================================');
 
+  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>
+        {isLoading || isFetching ? (
-      <Box pb={4}>
+          <Spinner />
-        <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>
         ) : (
-          <Text
+          data?.data?.map(({ id, content, about_language }) => (
-            as="p"
+            <VStack
-            fontSize="sm"
+              bg={"#fff"}
-            fontWeight={400}
+              boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
-            color="#1D1D1D"
+              rounded={"lg"}
-            px={3}
+              p={3}
-            w="85%"
+              key={id}
-            mb="15px"
+            >
-          >
+
-            {content}
+              <HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
-          </Text>
+                <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,
+    DialogBody,
-  DialogCloseTrigger,
+    DialogCloseTrigger,
-  DialogContent,
+    DialogContent,
-  DialogFooter,
+    DialogFooter,
-  DialogHeader,
+    DialogHeader,
-  DialogRoot,
+    DialogRoot,
-  DialogTitle,
+    DialogTitle,
-  DialogTrigger,
+    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() {
+function AboutUsAddModel({ aboutUsData }: { aboutUsData: any }) {
-  const [content, setContent] = useState(""); // State for the textarea input
+    const [isOpen, setIsOpen] = useState(false);
-  const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation(); // Mutation for updating About Us
-  //   const toast = useToast(); // Toast for feedback
 
-  // Handle form submission
+    // RTK Query Mutation Hook
-  const handleSubmit = async (e: any) => {
+    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation();
-    e.preventDefault(); // Prevent default form submission
 
-    try {
+    // React Hook Form
-      // Call the updateAboutUs mutation
+    const {
-      const res = await updateAboutUs({ id: 2, updatedData: content }).unwrap();
+        control,
-      console.log(res);
+        handleSubmit,
+        reset,
+        setValue,
+    } = useForm({
+        defaultValues: {
+            content: "",
+            languageCode: "",
+        },
+    });
 
-      // Show success toast
+    // Function to handle edit click (pre-fill the editor)
-      //   toast({
+    const handleEditClick = (data: any) => {
-      //     title: "Success",
+        setValue("content", data.content); // Pre-fill the content field
-      //     description: "About Us content updated successfully",
+        setValue("languageCode", data.about_language.language_code); // Pre-fill the language code
-      //     status: "success",
+        setIsOpen(true); // Open dialog
-      //     duration: 5000,
+    };
-      //     isClosable: true,
-      //   });
 
-      // Clear the input field after successful submission
+    // Function to handle update submission
-      setContent("");
+    const onSubmit = async (formData: any) => {
-    } catch (error) {
+        if (!formData.content.trim()) return; // Prevent empty updates
-      // Show error toast
-      //   toast({
-      //     title: "Error",
-      //     description: "Failed to update About Us content",
-      //     status: "error",
-      //     duration: 5000,
-      //     isClosable: true,
-      //   });
-    }
-  };
 
-  return (
+        try {
-    <DialogRoot placement="center">
+            await updateAboutUs({
-      <DialogTrigger asChild>
+                id: aboutUsData.id,
-        <Button bgColor="#EEEEEE" pl={3} pr={3} size="xs" color="#000">
+                content: formData.content,
-          <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
+                language_code: formData.languageCode,
-          <Text color="#000" mt={1}>
+            }).unwrap();
-            Edit
+            setIsOpen(false); // Close dialog on success
-          </Text>
+            reset(); // Reset the form
-        </Button>
+        } catch (error) {
-      </DialogTrigger>
+            console.error("Update failed:", error);
+        }
+    };
 
-      <DialogContent
+    return (
-        bg="#fff"
+        <DialogRoot placement="center" open={isOpen}>
-        w={{ base: "90%", md: "400px" }}
+            <DialogTrigger asChild>
-        height="auto"
+                <Button
-        p={3}
+                    bgColor="#EEEEEE"
-      >
+                    pl={3}
-        <DialogHeader bg="white">
+                    pr={3}
-          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+                    size="xs"
-            Edit
+                    color="#000"
-          </DialogTitle>
+                    onClick={() => handleEditClick(aboutUsData)} // Set content before opening modal
-        </DialogHeader>
+                >
+                    <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
+                    <Text color="#000" mt={1}>Edit</Text>
+                </Button>
+            </DialogTrigger>
 
-        <DialogBody bg="white">
+            <DialogContent bg="#fff" w={{ base: "90%", md: "1200px" }} height="auto" p={3}>
-          <Stack py={3}>
+                <DialogHeader bg="white">
-            <Field.Root>
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">
-              <Field.Label color="black" pt={1} fontSize="12px">
+                        Edit About Us
-                AboutUs
+                    </DialogTitle>
-              </Field.Label>
+                </DialogHeader>
-              <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>
 
-        <DialogFooter display="flex" justifyContent="center" pt="2">
+                <DialogBody bg="white">
-          <Button
+                    <Stack py={3} mb={8}>
-            w="100%"
+                        <Field.Root>
-            bg="#02A0A0"
+                            <Field.Label color="black" pt={1} fontSize="12px">
-            color="#fff"
+                                About Us Content
-            onClick={handleSubmit} // Trigger handleSubmit on button click
+                            </Field.Label>
-            // isLoading={isLoading} // Show loading state while the mutation is in progress
+                            {/* Use Controller to integrate ReactQuill with React Hook Form */}
-          >
+                            <Controller
-            Save
+                                name="content"
-          </Button>
+                                control={control}
-        </DialogFooter>
+                                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" />
+                <DialogFooter display="flex" justifyContent="center" pt="2">
-      </DialogContent>
+                    <Button
-    </DialogRoot>
+                        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;

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
+        p={3}
-        bgSize={"md"}
       >
         <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,9 +27,11 @@ const managepost: any[] = [
     "Action": (
       <HStack justifyContent="center">
         <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
+          <Switch colorPalette={'teal'} size={"xs"} />
         </Box>
+        {/* <EditDetails /> */}
         <EditDetails />
+
         <AlertDailog
           AltertTiggerIcon={() => <Delete />}
           alertText="Delete Users"
@@ -58,7 +59,7 @@ const FAQ = () => {
           px={3}
         >
           <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-           FAQs
+            FAQs
           </Text>
 
           <HStack >

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx

@@ -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="10px" width="90%" />
-            <Skeleton height="20px" mb="15px" width="90%" />
+      <Skeleton height="20px" mb="15px" width="90%" />
-            <Skeleton height="20px" mb="10px" width="90%" />
+      <Skeleton height="20px" mb="10px" width="90%" />
-            <Skeleton height="20px" mb="10px" width="80%" />
+      <Skeleton height="20px" mb="10px" width="80%" />
-            <Skeleton height="20px" width="60%" />
+      <Skeleton height="20px" width="60%" />
-          </Box>
+    </Box>
   )
 }
 

src/Pages/ManageCMS/TermsAndConditions/TermAndConditionSkeleton.tsx

@@ -1,16 +0,0 @@
-import { Box, Skeleton } from '@chakra-ui/react'
-import React from 'react'
-
-const TermAndConditionSkeleton = () => {
-  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 TermAndConditionSkeleton

src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx

@@ -1,57 +1,37 @@
-import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
+import { Box, HStack, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
+import { p } from "framer-motion/client";
 import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";
-import {useGetTermsAndConditionQuery} from "../../../Redux/Service/terms.and.condition.service"
-import { useContext, useEffect } from "react";
-import GlobalStateContext from "../../../Contexts/GlobalStateContext";
-import { Spinner } from "../../../components/Sipnner/Spinner";
 
 
 const TermsAndConditions = () => {
-  
-  // Fetch data using RTK Query with type annotations
-    const { data, isLoading, isFetching } = useGetTermsAndConditionQuery();
-
-    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}>
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+           Terms And Conditions
+          </Text>
 
-     <VStack gap={4} pb={4} pt={0}>
+          <HStack >
-        {isLoading || isFetching ?
-          <Spinner /> : data?.data?.map(({ id, content, terms_cond_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}
+            <TermsAndConditionsAddModel />
-              px={0}
+          </HStack>
-            >
+        </HStack>
-              <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
-              Terms And Conditions<Badge variant={'surface'}  colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {terms_cond_language?.language_name}</Badge>
+          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>
+        </Text>
-
+        <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
-              <TermsAndConditionsAddModel />
+          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? 
-            </HStack>
+        </Text>
-            <Text
+     </Box>
-              as="p"
-              fontSize="sm"
-              fontWeight={400}
-              color="#1D1D1D"
-            >
-              {content}
-            </Text>
-
-          </VStack>)}
-      </VStack>
     </MainFrame>
   )
 }

src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx

@@ -1,4 +1,3 @@
-import React, { useState } from "react";
 import { FaRegEdit } from "react-icons/fa";
 import {
   DialogBody,
@@ -10,38 +9,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
-import { Field, Stack, Text } from "@chakra-ui/react";
+import { Field, Stack, Text, Textarea } 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
 
 function TermsAndConditionsAddModel() {
-  const [value, setValue] = useState(""); // State to manage the rich text content
-
-  // Configuration for the Quill editor toolbar
-  const modules = {
-    toolbar: [
-      [{ header: [1, 2, 3, 4, 5, 6, false] }],
-      ["bold", "italic", "underline", "strike"],
-      [{ list: "ordered" }, { list: "bullet" }],
-      ["link", "image"],
-      ["clean"],
-    ],
-  };
-
-  // Formats allowed in the Quill editor
-  const formats = [
-    "header",
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "list",
-    "bullet",
-    "link",
-    "image",
-  ];
-
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
@@ -59,9 +30,10 @@ function TermsAndConditionsAddModel() {
 
       <DialogContent
         bg={"#fff"}
-        w={{ base: "90%", md: "800px" }}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
         height={"auto"}
-        p={3}
+        p={3} // Reduced padding
         bgSize={"md"}
       >
         <DialogHeader bg="white">
@@ -76,21 +48,16 @@ function TermsAndConditionsAddModel() {
               <Field.Label color="black" pt={1} fontSize="12px">
                 TermsAndConditions
               </Field.Label>
-              {/* Replace Textarea with ReactQuill */}
+              <Textarea
-              <ReactQuill
+                placeholder=""
-                theme="snow" // Theme style
+                bgColor="#EEEEEE"
-                value={value}
+                color="black"
-                onChange={setValue}
+                border="none"
-                modules={modules}
+                p={2}
-                formats={formats}
+                fontSize="12px"
-                style={{
+                height={'140px'}
-                  width:"100%",
+                _focusVisible={{outline:'none'}}
-                  color: "black",
+                resize={'none'}
-                  border: "none",
-                  fontSize: "12px",
-                  height: "140px",
-                  
-                }}
               />
             </Field.Root>
           </Stack>

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>({
+    // updateAboutUs: builder.mutation<UpdateAboutUsResponse, UpdateAboutUsRequest>({
-      query: ({ id, updatedData }) => ({
+    //   query: ({ id, updatedData }) => ({
-        url: `/posts/${id}`,
+    //     url: `/posts/${id}`,
-        method: "POST",
+    //     method: "POST",
-        body: updatedData,
+    //     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/Redux/Service/terms.and.condition.service.ts

@@ -1,16 +1,26 @@
-import { createApi } from "@reduxjs/toolkit/query/react";
+import { createApi } from "@reduxjs/toolkit/query";
 import { baseQueryWithReauth } from "./apiSlice";
-import { TermsAndConditionsResponse } from "../../Types/termsAndConditionTypes";
 
-export const TermsAndCondition = createApi({
+export const termsAndCondition = createApi({
-    reducerPath: "TermsAndCondition",
+    reducerPath: "api",
     baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
     endpoints: (builder) => ({
-      getTermsAndCondition: builder.query<TermsAndConditionsResponse, void>({
-        query: () => "/term-and-condition",
-      }),
-    }),
-});
   
-// Correctly export the hook
+  
-export const { useGetTermsAndConditionQuery } = TermsAndCondition;
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = termsAndCondition;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };

src/Redux/Store.tsx

@@ -14,7 +14,6 @@ import { privacyPolicy } from "./Service/privacy.policy.service";
 import { privacy } from "./Service/privacy.service";
 import { myProfile } from "./Service/myprofie.service";
 import { masterModule } from "./Service/master.module.service";
-import { TermsAndCondition } from "./Service/terms.and.condition.service";
 
 export const store = configureStore({
   reducer: {
@@ -22,7 +21,6 @@ export const store = configureStore({
     [registerUser.reducerPath]: registerUser.reducer,
     [deactivatedAccounts.reducerPath]: deactivatedAccounts.reducer,
     [faqs.reducerPath]: faqs.reducer,
-    [TermsAndCondition.reducerPath]: TermsAndCondition.reducer,
     [managePosts.reducerPath]: managePosts.reducer,
     [manageSubAdmin.reducerPath]: manageSubAdmin.reducer,
     [manageJobs.reducerPath]: manageJobs.reducer,
@@ -42,7 +40,6 @@ export const store = configureStore({
       managePosts.middleware,
       faqs.middleware,
       manageSubAdmin.middleware,
-      TermsAndCondition.middleware,
       manageJobs.middleware,
       manageGroups.middleware,
       manageContactUs.middleware,

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/termsAndConditionTypes.tsx

@@ -1,18 +0,0 @@
-export interface TermsAndConditionsContent {
-    id: number;
-    language_master_xid: number;
-    content: string;
-    is_active: boolean;
-    terms_cond_language:{
-      id:number;
-      language_code:string;
-      language_name:string;
-    }
-  }
-  
-  export interface TermsAndConditionsResponse {
-    status: "success" | "error"; // Assuming it can be "success" or "error"
-    status_code: number;
-    message: string;
-    data: TermsAndConditionsContent[];
-  }

src/components/Sipnner/Spinner.tsx

@@ -1,6 +1,6 @@
 import { Center } from '@chakra-ui/react'
 import './Spinner.css'
-// import MainFrame from '../MainFrame'
+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>