updated

dev-dist/sw.js

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

src/Pages/Login.tsx

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

src/Pages/ManageCMS/AboutUs/AboutUs.tsx

@@ -1,132 +1,68 @@
-// 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 { Box, HStack, Skeleton, Text } from "@chakra-ui/react";
+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();
 
-  console.log("Fetched About Us Data:", data);
+  const { data, isLoading } = useGetAboutUsQuery();
 
-  const context = useContext(GlobalStateContext);
-  if (!context) throw new Error("App must be used within a GlobalStateProvider");
+  const content = data?.data?.[0]?.content
+  console.log('====================================');
+  // 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>
 
-        {isLoading || isFetching ? (
-          <Spinner />
+    <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>
         ) : (
-          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>
         )}
-      </VStack>
+      </Box>
     </MainFrame>
-  );
-};
-
-export default AboutUs;
+  )
+}
+export default AboutUs

src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx

@@ -1,142 +1,119 @@
+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 } 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
-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({ aboutUsData }: { aboutUsData: any }) {
-    const [isOpen, setIsOpen] = useState(false);
+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
 
-    // RTK Query Mutation Hook
-    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation();
+  // Handle form submission
+  const handleSubmit = async (e: any) => {
+    e.preventDefault(); // Prevent default form submission
 
-    // React Hook Form
-    const {
-        control,
-        handleSubmit,
-        reset,
-        setValue,
-    } = useForm({
-        defaultValues: {
-            content: "",
-            languageCode: "",
-        },
-    });
+    try {
+      // Call the updateAboutUs mutation
+      const res = await updateAboutUs({ id: 2, updatedData: content }).unwrap();
+      console.log(res);
 
-    // 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
-    };
+      // Show success toast
+      //   toast({
+      //     title: "Success",
+      //     description: "About Us content updated successfully",
+      //     status: "success",
+      //     duration: 5000,
+      //     isClosable: true,
+      //   });
 
-    // Function to handle update submission
-    const onSubmit = async (formData: any) => {
-        if (!formData.content.trim()) return; // Prevent empty updates
+      // 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,
+      //   });
+    }
+  };
 
-        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);
-        }
-    };
+  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>
 
-    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>
+      <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>
 
-            <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>
+        <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>
 
-                <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>
+        <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>
 
-                <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>
-    );
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default AboutUsAddModel;
+export default AboutUsAddModel;

src/Pages/ManageCMS/FAQ/EditDetails.tsx

@@ -1,85 +1,3 @@
-// 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,
@@ -93,27 +11,24 @@ import {
 } from "../../../components/ui/dialog";
 import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
 import Edit from "../../../components/ActionIcons/Edit";
-
-function EditDetails(rowData: any) {
-
+function EditDetails() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-
-
-
-        <Button bg="transparent" color={"black"} h={"18px"}>    <Edit /></Button>
+        <Edit />
       </DialogTrigger>
 
       <DialogContent
         bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
         w={{ base: "90%", md: "400px" }}
         height={"auto"}
-        p={3}
+        p={3} // Reduced padding
+        bgSize={"md"}
       >
         <DialogHeader bg="white">
           <DialogTitle alignSelf="center" color="black" fontSize="14px">
-            Edit Details (ID: {rowData?.id})
+            Edit Details
           </DialogTitle>
         </DialogHeader>
 
@@ -121,17 +36,16 @@ function EditDetails(rowData: any) {
           <Stack py={3}>
             <Field.Root>
               <Field.Label color="black" pt={1} fontSize="12px">
-                Question
+                Questions
               </Field.Label>
               <Input
-                placeholder="Question"
+                placeholder="Questions"
                 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">
@@ -146,12 +60,10 @@ function EditDetails(rowData: any) {
                 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,6 +5,7 @@ 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";
@@ -27,13 +28,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 />}
+          AltertTiggerIcon={() => <Delete />} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -59,11 +58,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' }} />
               }
@@ -92,7 +91,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,14 +1,15 @@
 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/Pages/ManageCMS/TermsAndConditions/TermAndConditionSkeleton.tsx

@@ -0,0 +1,16 @@
+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,37 +1,57 @@
-import { Box, HStack, Text } from "@chakra-ui/react";
+import { Badge, HStack, Text, VStack } 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>
-      <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>
+    <MainFrame  transperant={true}>
+     
+     <VStack gap={4} pb={4} pt={0}>
+        {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"}
 
-          <HStack >
-            
-            <TermsAndConditionsAddModel />
-          </HStack>
-        </HStack>
-        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
-          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 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>
+              py={0}
+              px={0}
+            >
+              <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+              Terms And Conditions<Badge variant={'surface'}  colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {terms_cond_language?.language_name}</Badge>
+              </Text>
+
+              <TermsAndConditionsAddModel />
+            </HStack>
+            <Text
+              as="p"
+              fontSize="sm"
+              fontWeight={400}
+              color="#1D1D1D"
+            >
+              {content}
+            </Text>
+
+          </VStack>)}
+      </VStack>
     </MainFrame>
   )
 }

src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from "react";
 import { FaRegEdit } from "react-icons/fa";
 import {
   DialogBody,
@@ -9,10 +10,38 @@ 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
 
 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>
@@ -30,10 +59,9 @@ function TermsAndConditionsAddModel() {
 
       <DialogContent
         bg={"#fff"}
-        // w={{ lg: "60%", md: "230px" }}
-        w={{ base: "90%", md: "400px" }}
+        w={{ base: "90%", md: "800px" }}
         height={"auto"}
-        p={3} // Reduced padding
+        p={3}
         bgSize={"md"}
       >
         <DialogHeader bg="white">
@@ -48,16 +76,21 @@ function TermsAndConditionsAddModel() {
               <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'}
+              {/* Replace Textarea with ReactQuill */}
+              <ReactQuill
+                theme="snow" // Theme style
+                value={value}
+                onChange={setValue}
+                modules={modules}
+                formats={formats}
+                style={{
+                  width:"100%",
+                  color: "black",
+                  border: "none",
+                  fontSize: "12px",
+                  height: "140px",
+                  
+                }}
               />
             </Field.Root>
           </Stack>
@@ -74,4 +107,4 @@ function TermsAndConditionsAddModel() {
   );
 }
 
-export default TermsAndConditionsAddModel;
+export default TermsAndConditionsAddModel;

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,22 +30,16 @@ 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,
-    //   }),
-    // }),
-       // 🔹 PUT: Update an About Us entry
-       updateAboutUs: builder.mutation({
-        query: (updatedData) => ({
-          url: "/about-us/update", // ✅ Updated URL
-          method: "POST",
-          body: updatedData,
-        }),
+    updateAboutUs: builder.mutation<UpdateAboutUsResponse, UpdateAboutUsRequest>({
+      query: ({ id, updatedData }) => ({
+        url: `/posts/${id}`,
+        method: "POST",
+        body: updatedData,
       }),
+    }),
+
     // 🔹 DELETE: Remove a post by ID
     deletePost: builder.mutation<{ success: boolean }, number>({
       query: (id) => ({
@@ -84,12 +78,12 @@ export type Post = {
 
 
 export type UpdateAboutUsRequest={
-  id: number; updatedData: string,language_code:string
+  id: number; updatedData: string
 }
 
 
 export type UpdateAboutUsResponse={
-  id: number; updatedData: string,language_code:string
+  id: number; updatedData: string
 }
 
 
@@ -100,3 +94,10 @@ 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,26 +1,16 @@
-import { createApi } from "@reduxjs/toolkit/query";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";
+import { TermsAndConditionsResponse } from "../../Types/termsAndConditionTypes";
 
-export const termsAndCondition = createApi({
-    reducerPath: "api",
+export const TermsAndCondition = createApi({
+    reducerPath: "TermsAndCondition",
     baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
     endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
+      getTermsAndCondition: builder.query<TermsAndConditionsResponse, void>({
+        query: () => "/term-and-condition",
+      }),
     }),
-  });
-  
-  export const {  } = termsAndCondition;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
+});
+
+// Correctly export the hook
+export const { useGetTermsAndConditionQuery } = TermsAndCondition;

src/Redux/Store.tsx

@@ -14,6 +14,7 @@ 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: {
@@ -21,6 +22,7 @@ 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,
@@ -40,6 +42,7 @@ export const store = configureStore({
       managePosts.middleware,
       faqs.middleware,
       manageSubAdmin.middleware,
+      TermsAndCondition.middleware,
       manageJobs.middleware,
       manageGroups.middleware,
       manageContactUs.middleware,

src/Types/aboutUsType.tsx

@@ -1,27 +0,0 @@
-// 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

@@ -0,0 +1,18 @@
+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>