Bugs fixes for Manage CMS module

2025-04-07 12:16:59 +05:30
parent 7e8c9c92d0
commit c9bbae35f9
11 changed files with 148 additions and 205 deletions
--- a/src/Pages/Login.tsx
+++ b/src/Pages/Login.tsx
@@ -46,8 +46,7 @@ const Login = () => {
    // Encode Basic Auth Credentials
    const username = import.meta.env.VITE_USER_NAME || ""; // Replace with actual username
    const password = import.meta.env.VITE_PASSWORD || ""; // Replace with actual password
-    const credentials = `${username}:${password}`; // Encode to Base64
-    const basicAuth = btoa(credentials);
+    const basicAuth = `${username}:${password}`; // Encode to Base64

    try {
      const res = await axios.post(
@@ -78,22 +77,18 @@ const Login = () => {
        console.log(res);
        console.log("====================================");
      }
-    } catch (error: any) {
-      console.log('error', error?.response);
+    } catch (error) {
+      console.log('error', error);

-      if (axios.isAxiosError(error) && error.response) {
-        toaster.create({
-          title: error.response.data?.message,
-          // title: "Something Went Wrong",
-          type: "info",
-        });
-      } else {
+      if (error) {
        toaster.create({
+          // title: error?.response?.data?.message,
          title: "Something Went Wrong",
          type: "info",
-        });
+        })
+        // console.log("Login failed", error?.response?.data?.message);
+        setIsLoading(false);
      }
-      setIsLoading(false);
    }
  });

--- a/src/Pages/ManageCMS/FAQ/EditDetails.tsx
+++ b/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,
@@ -99,6 +17,7 @@ import { Toaster, toaster } from "../../../components/ui/toaster";

 interface RowData {
  id: number;
+  principal_type_xid: number;
  question: string;
  answer: string;
 }
@@ -138,7 +57,8 @@ function EditDetails({ rowData, refetch }: {rowData: RowData, refetch: VoidFunct
    const payload = {
      id: rowData?.id,
      question: faqQuestion,
-      answer: faqAnswer
+      answer: faqAnswer,
+      principal_type_xid: rowData?.principal_type_xid,
    };

    try {
@@ -161,6 +81,11 @@ function EditDetails({ rowData, refetch }: {rowData: RowData, refetch: VoidFunct
    } catch (error) {
      console.error("Error updating template:", error);
      // alert("Failed to update template");
+      toaster.create({
+        title: "Error",
+        description: "Something went wrong",
+        type: "error",
+      });
    }
  };

--- a/src/Pages/ManageCMS/FAQ/FAQ.tsx
+++ b/src/Pages/ManageCMS/FAQ/FAQ.tsx
@@ -1,4 +1,4 @@
-import { Box, HStack, Image, Text } from "@chakra-ui/react";
+import { Box, HStack, Image, Spinner, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
 import EditDetails from "./EditDetails";
 // import { InputGroup } from "../../../components/ui/input-group";
@@ -19,6 +19,7 @@ import { Toaster, toaster } from "../../../components/ui/toaster";

 const tableHeadRow = [
  "Sr. No",
+  'Category',
  "Question",
  "Answer",
  "Action",
@@ -52,7 +53,7 @@ const tableHeadRow = [
 // ];

 const FAQ = () => {
-  const { data, refetch, isLoading } = useGetFaqQuery()
+  const { data, refetch, isLoading, isFetching } = useGetFaqQuery()
  const [localData, setLocalData] = useState<any[]>([]);
  const [faqToggle] = useFaqToggleMutation()
  const [deleteFaqPost] = useDeleteFaqPostMutation()
@@ -69,13 +70,14 @@ const FAQ = () => {
  }, [data]);


-  const handleToggle = async (agencyId: string, currentStatus: number) => {
-    const newStatus = currentStatus ? 0 : 1;
+  const handleToggle = async (agencyId: number, currentStatus: string) => {
+    const newStatus = currentStatus === '1' ? '0' : '1';
    setLocalData((prevData) =>
      prevData.map((agency) =>
        agency.id === agencyId ? { ...agency, is_active: newStatus } : agency
      )
    );
+
    try {
      await faqToggle({ id: agencyId, is_active: newStatus }).unwrap();
      refetch()
@@ -91,8 +93,8 @@ const FAQ = () => {

  const handleDeleteFaq = async (faqId: number) => {
    try {
-      const response = await deleteFaqPost(faqId).unwrap();
-      if (response.success) {
+      const response = await deleteFaqPost({ id: faqId }).unwrap();
+      if (response?.status === "success") {
        toaster.create({
          title: "Success",
          description: "FAQ deleted successfully",
@@ -112,25 +114,29 @@ const FAQ = () => {
    }
  };

-
  const filteredData = localData?.filter((agency) =>
-    agency.translations.map((translation: any) => translation.question.toLowerCase()).some((question: string) =>
-      question.includes(searchTerm.toLowerCase())
-    ))
+    agency.translations.some((translation: any) => {
+      const searchLower = searchTerm.toLowerCase();
+      const questionMatch = translation.question?.toLowerCase().includes(searchLower);
+      const answerMatch = translation.answer?.toLowerCase().includes(searchLower);
+      return questionMatch || answerMatch;
+    })
+  );

-    console.log("filteredData", filteredData);
-    
+  console.log("filteredData", filteredData);

-  const managepost = filteredData?.map((agency: FaqData, index: number) => 
+
+  const managepost = filteredData?.flatMap((agency: FaqData, index: number) =>
    agency.translations.map((translation: any) => ({
-      'id': agency.id,
+      'id': translation.id,
      "Sr. No": index + 1,
      "Question": translation.question,
      "Answer": translation.answer,
+      'Category': agency.principal_type_xid === 2 ? "Job Seeker" : "Recruiter",

      "Action": (
        <HStack justifyContent="center">
-          <EditDetails rowData={{ id: agency.id, question: translation.question, answer: translation.answer }} refetch={refetch} />
+          <EditDetails rowData={{ id: agency.id, question: translation.question, answer: translation.answer, principal_type_xid: agency.principal_type_xid }} refetch={refetch} />

          <AlertDailog
            isOpen={deleteModal}
@@ -154,22 +160,30 @@ const FAQ = () => {
            <Switch
              colorPalette={'teal'}
              size={"xs"}
-              onChange={() => handleToggle(agency.id.toString(), Number(agency.is_active))}
+              onChange={() => handleToggle(Number(agency.id), agency.is_active.toString())}
              checked={Boolean(Number(agency.is_active))}
+              key={`switch-${agency.id}`}
            />
          </Box>
        </HStack>
      ),
-  })))
+    })))

-  // if (!isLoading && !data?.data) {
-  //   return (
-  //     <NoData />
-  //   )
-  // }
+  if (isFetching) {
+    return (
+      <HStack
+        w={"100%"}
+        justifyContent={"center"}
+        mb={4}
+        py={0}
+        px={3}
+      >
+        <Spinner color={'teal'}/>
+      </HStack>
+    )
+  }

  return (
-
    <MainFrame>
      <Box>
        <HStack
@@ -192,15 +206,16 @@ const FAQ = () => {
            <FaqAddModel refetch={refetch} />
          </HStack>
        </HStack>
+        {isFetching && <Spinner />}
        {!isLoading && !data?.data ? (
-          <NoData />
-        ) : <DataTable
+          <NoData message={'No data found'} text={'Please add new data'}/>
+        ) : (<DataTable
          sortableColumns={["Name"]}
          tableHeadRow={tableHeadRow}
          data={managepost}
          paginationData={data?.data}
          refetch={refetch}
-        />}
+        />)}
      </Box>
      <Toaster />
    </MainFrame>
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
@@ -21,6 +21,8 @@ const PrivacyPolicy = () => {
    setIsBarLoading(isFetching)
  }, [data])

+console.log('Privacy Policy Data:', data?.data);
+
  return (
    <MainFrame transperant={true}>
      <VStack gap={4} pb={4} pt={0}>
@@ -38,7 +40,7 @@ const PrivacyPolicy = () => {
                Privacy Policy <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {privacy_language?.language_name}</Badge>
              </Text>

-              <PrivacyPolicyAddModel policyData={data?.data} refetch={refetch} />
+              <PrivacyPolicyAddModel policyData={{ id, content, privacy_language }} refetch={refetch} />
            </HStack>
            <Text
              as="p"
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
@@ -4,12 +4,10 @@ import {
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
-  DialogHeader,
  DialogRoot,
-  DialogTitle,
  DialogTrigger,
 } from "../../../components/ui/dialog";
-import { Field, Stack, Text } from "@chakra-ui/react";
+import { Box, Field, Stack, Text } from "@chakra-ui/react";
 import { Button } from "../../../components/ui/button";
 import { useUpdatePrivacyPolicyMutation } from "../../../Redux/Service/privacy.policy.service";
 import { Controller, useForm } from "react-hook-form";
@@ -18,7 +16,6 @@ import ReactQuill from "react-quill";

 function PrivacyPolicyAddModel({ policyData, refetch }: { policyData: any, refetch: VoidFunction }) {
  const [isOpen, setIsOpen] = useState(false);
-  const [selectedId, setSelectedId] = useState(null);
  const [updatePrivacyPolicy] = useUpdatePrivacyPolicyMutation()
  const {
    control,
@@ -35,7 +32,6 @@ function PrivacyPolicyAddModel({ policyData, refetch }: { policyData: any, refet
  console.log('POLICY', policyData);

  const handleEditClick = (data: any) => {
-    setSelectedId(data?.id)
    setValue("content", data.content); // Pre-fill the content field
    setValue("languageCode", data.privacy_language.language_code); // Pre-fill the language code
    setIsOpen(true); // Open dialog
@@ -46,7 +42,7 @@ function PrivacyPolicyAddModel({ policyData, refetch }: { policyData: any, refet

    try {
      await updatePrivacyPolicy({
-        id: selectedId,
+        id: policyData.id,
        content: formData.content,
        language_code: formData.languageCode,
      }).unwrap();
@@ -60,14 +56,14 @@ function PrivacyPolicyAddModel({ policyData, refetch }: { policyData: any, refet

  return (
    <DialogRoot placement="center" open={isOpen}>
-      {policyData?.map((item: any) => (
+      <Box key={policyData.id}>
        <DialogTrigger asChild>
          <Button
            bgColor={"#EEEEEE"}
            pl={3} pr={3}
            size={"xs"}
            color={"#000"}
-            onClick={() => handleEditClick(item)}
+            onClick={() => handleEditClick(policyData)}
          >
            {" "}
            <FaRegEdit
@@ -79,21 +75,21 @@ function PrivacyPolicyAddModel({ policyData, refetch }: { policyData: any, refet
            </Text>
          </Button>
        </DialogTrigger>
-      ))}
+      </Box>

      <DialogContent
        bg={"#fff"}
-        // w={{ lg: "60%", md: "230px" }}
-        w={{ base: "90%", md: "400px" }}
+        minW={'600px'}
+        // w={{ base: "90%", md: "400px" }}
        height={"auto"}
        p={3} // Reduced padding
        bgSize={"md"}
      >
-        <DialogHeader bg="white">
+        {/* <DialogHeader bg="white">
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            Edit
          </DialogTitle>
-        </DialogHeader>
+        </DialogHeader> */}

        <DialogBody bg="white">
          <Stack py={3}>
--- a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
@@ -1,48 +1,58 @@
-import { Box, HStack, Text } from "@chakra-ui/react";
+import { Badge, HStack, Spinner, Stack, Text, VStack } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
-import { p } from "framer-motion/client";
 import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";
 import { useGetTermsQuery } from "../../../Redux/Service/terms.and.condition.service";


 const TermsAndConditions = () => {
-  const { data, refetch } = useGetTermsQuery()
-  const termsData = data?.data
+  const { data, refetch, isLoading, isFetching } = useGetTermsQuery()

  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}>
+          <Stack bg={"#fff"} w={"100%"} mt={2} p={4} borderRadius={4}><Text color={"black"} textAlign={"left"} fontWeight={"600"} >Terms and Conditions
+          </Text></Stack>

-          <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}
+              >

-            <TermsAndConditionsAddModel termsData={termsData} refetch={refetch}/>
-          </HStack>
-        </HStack>
-        {data?.data.map((item) => (
-          <Text
-            as={p}
-            fontSize={"sm"}
-            fontWeight={400}
-            color={"#1D1D1D"}
-            px={3} w={"85%"} mb={"15px"}
-            dangerouslySetInnerHTML={{ __html: item.content }}
-          />
-        ))}
+                <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}
+                    >
+                      🎓 {terms_cond_language?.language_name}
+                    </Badge>
+                  </Text>

-        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
-        </Text>
-      </Box>
+                  {/* Pass Data to AboutUsAddModel */}
+                  <TermsAndConditionsAddModel termsData={{ id, content, terms_cond_language }} refetch={refetch} />
+                </HStack>
+                <Text as="p" fontSize="sm" fontWeight={400} color="#1D1D1D">
+                  {/* {content} */}
+                  <div dangerouslySetInnerHTML={{ __html: content }} />
+                </Text>
+              </VStack>
+            ))
+          )}
+        </VStack>
+      </MainFrame>
    </MainFrame >
  )
 }
--- a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
@@ -16,9 +16,8 @@ import ReactQuill from "react-quill";
 import { useState } from "react";
 import { useUpdateTermsMutation } from "../../../Redux/Service/terms.and.condition.service";

-function TermsAndConditionsAddModel({ termsData, refetch }: { termsData: any, refetch: VoidFunction}) {
+function TermsAndConditionsAddModel({ termsData, refetch }: { termsData: any, refetch: VoidFunction }) {
  const [isOpen, setIsOpen] = useState(false);
-  const [selectedId, setSelectedId] = useState(null);
  const [updateTerms] = useUpdateTermsMutation()
  const {
    control,
@@ -33,7 +32,6 @@ function TermsAndConditionsAddModel({ termsData, refetch }: { termsData: any, re
  });

  const handleEditClick = (data: any) => {
-    setSelectedId(data?.id)
    setValue("content", data.content); // Pre-fill the content field
    setValue("languageCode", data.terms_cond_language.language_code); // Pre-fill the language code
    setIsOpen(true); // Open dialog
@@ -44,7 +42,7 @@ function TermsAndConditionsAddModel({ termsData, refetch }: { termsData: any, re

    try {
      await updateTerms({
-        id: selectedId,
+        id: termsData.id,
        content: formData.content,
        language_code: formData.languageCode,
      }).unwrap();
@@ -58,31 +56,28 @@ function TermsAndConditionsAddModel({ termsData, refetch }: { termsData: any, re

  return (
    <DialogRoot placement="center" open={isOpen}>
-      {termsData?.map((item: any) => (
-        <DialogTrigger asChild>
-          <Button
-            bgColor={"#EEEEEE"}
-            pl={3} pr={3}
-            size={"xs"}
-            color={"#000"}
-            onClick={() => handleEditClick(item)}
-          >
-            {" "}
-            <FaRegEdit
-              color="#000"
-              style={{ height: "14px", width: "14px" }}
-            />{" "}
-            <Text color={"#000"} mt={1}>
-              Edit
-            </Text>
-          </Button>
-        </DialogTrigger>
-      ))}
-
+      <DialogTrigger asChild>
+        <Button
+          bgColor={"#EEEEEE"}
+          pl={3} pr={3}
+          size={"xs"}
+          color={"#000"}
+          onClick={() => handleEditClick(termsData)}
+        >
+          {" "}
+          <FaRegEdit
+            color="#000"
+            style={{ height: "14px", width: "14px" }}
+          />{" "}
+          <Text color={"#000"} mt={1}>
+            Edit
+          </Text>
+        </Button>
+      </DialogTrigger>
      <DialogContent
        bg={"#fff"}
-        // w={{ lg: "60%", md: "230px" }}
-        w={{ base: "90%", md: "400px" }}
+        maxW={'600px'}
+        // w={{ base: "90%", md: "600px" }}
        height={"auto"}
        p={3} // Reduced padding
        bgSize={"md"}
--- a/src/Redux/Service/faqs.service.ts
+++ b/src/Redux/Service/faqs.service.ts
@@ -4,7 +4,7 @@ import { baseQueryWithReauth } from "./apiSlice";
 export interface FaqData {
  id: number;
  principal_type_xid: number;
-  is_active: string;
+  is_active: number;
  translations:{
    id: string,
    faqs_xid: number,
@@ -19,6 +19,10 @@ interface ApiResponse {
  status_code: number;
  message: string;
  data: { 
+    current_page: number,
+    last_page: number,
+    total: number,
+    from: number,
    data: FaqData[];
  };
 }
@@ -64,10 +68,11 @@ export const faqs = createApi({
      }),
    }),

-    deleteFaqPost: builder.mutation<{ success: boolean }, number>({
-      query: (id) => ({
-        url: `/faq-delete/${id}`,
-        method: "DELETE",
+    deleteFaqPost: builder.mutation<{ status: string; message: string }, { id: number }>({
+      query: ({ id }) => ({
+        url: `/faq-delete`,
+        method: "POST",
+        body: { id },
      }),
    }),

--- a/src/Redux/Service/manage.aboutus.service.ts
+++ b/src/Redux/Service/manage.aboutus.service.ts
@@ -39,7 +39,7 @@ export const aboutUs = createApi({
       updateAboutUs: builder.mutation({
        query: (updatedData) => ({
          url: "/about-us/update", // ✅ Updated URL
-          method: "PUT",
+          method: "POST",
          body: updatedData,
        }),
      }),
--- a/src/components/NoData.tsx
+++ b/src/components/NoData.tsx
@@ -1,12 +1,12 @@

 import { Center, Heading, Stack, Text } from '@chakra-ui/react';

-const NoData = () => {
+const NoData = ({ message, text }: { message:string, text:string }) => {
    return (
        <Center h="80vh" textAlign="center">
            <Stack gap={6}>
-                <Heading fontSize="xl">No data found</Heading>
-                <Text fontSize="sm">Please add new data</Text>
+                <Heading fontSize="xl">{message}</Heading>
+                <Text fontSize="sm">{text}</Text>
            </Stack>
        </Center>
    )