Siddhesh.More/SSA-Admin-Panel
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Merge branch 'parth' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into dev-rohit

Browse Source
This commit is contained in:
rockyeverlast
2025-02-25 14:02:21 +05:30
parent dc1aa2250f 9b97228ec8
commit a673ea69d4
11 changed files with 547 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/Pages/ManageCMS/AboutUs/AboutUs.tsx
View File

@@ -1,68 +1,132 @@
import { Box, HStack, Skeleton, Text } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame"
import AboutUsAddModel from "../../ManageCMS/AboutUs/AboutUsAddModel";
// import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
// import MainFrame from "../../../components/MainFrame"
// import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
// import { Spinner } from "../../../components/Sipnner/Spinner";
// import GlobalStateContext from "../../../Contexts/GlobalStateContext";
// import { useContext, useEffect } from "react";
// import AboutUsAddModel from "./AboutUsAddModel";
// const AboutUs = () => {
// const { data, isLoading, isFetching } = useGetAboutUsQuery();
// // const content = data?.data
// console.log('====================================');
// console.log(data);
// console.log('====================================');
// const context = useContext(GlobalStateContext);
// if (!context) throw new Error('App must be used within a GlobalStateProvider');
// const { setIsBarLoading } = context;
// useEffect(() => {
// setIsBarLoading(isFetching)
// }, [data])
// return (
// <MainFrame transperant={true}>
// <VStack gap={4} pb={4} pt={0}>
// {isLoading || isFetching ?
// <Spinner /> : data?.data?.map(({ id, content, about_language }) => <VStack bg={'#fff'}
// boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
// <HStack
// w={"100%"}
// justifyContent={"space-between"}
// py={0}
// px={0}
// >
// <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
// About Us <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {about_language?.language_name}</Badge>
// </Text>
// {/* <AboutUsAddModel /> */}
// <AboutUsAddModel/>
// </HStack>
// <Text
// as="p"
// fontSize="sm"
// fontWeight={400}
// color="#1D1D1D"
// >
// {content}
// </Text>
// </VStack>)}
// </VStack>
// </MainFrame>
// )
// }
// export default AboutUs
import { Badge, HStack, Stack, Text, VStack } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame";
import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
import { Spinner } from "../../../components/Sipnner/Spinner";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useContext, useEffect } from "react";
import AboutUsAddModel from "./AboutUsAddModel";
const AboutUs = () => {
const { data, isLoading, isFetching } = useGetAboutUsQuery();
const { data, isLoading } = useGetAboutUsQuery();
console.log("Fetched About Us Data:", data);
const content = data?.data?.[0]?.content
console.log('====================================');
// console.log(response);
console.log('====================================');
const context = useContext(GlobalStateContext);
if (!context) throw new Error("App must be used within a GlobalStateProvider");
const { setIsBarLoading } = context;
useEffect(() => {
setIsBarLoading(isFetching);
}, [isFetching, setIsBarLoading]);
return (
<MainFrame transperant={true}>
<VStack gap={4} pb={4} pt={0}>
<Stack bg={"#fff"} w={"100%"} mt={2} p={4} borderRadius={4}><Text color={"black"} textAlign={"left"} fontWeight={"600"} > About Us
</Text></Stack>
<MainFrame>
<Box pb={4}>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
AboutUs
</Text>
<HStack>
<AboutUsAddModel />
</HStack>
</HStack>
{/* Show Skeleton until content is available */}
{isLoading || !content ? (
<Box px={3} w="85%">
<Skeleton height="20px" mb="10px" />
<Skeleton height="20px" mb="10px" />
<Skeleton height="20px" mb="10px" />
<Skeleton height="20px" mb="10px" width="75%" />
<Skeleton height="20px" mb="15px" width="90%" />
<Skeleton height="20px" mb="10px" />
<Skeleton height="20px" mb="10px" width="85%" />
<Skeleton height="20px" mb="10px" />
<Skeleton height="20px" width="70%" />
</Box>
{isLoading || isFetching ? (
<Spinner />
) : (
<Text
as="p"
fontSize="sm"
fontWeight={400}
color="#1D1D1D"
px={3}
w="85%"
mb="15px"
>
{content}
</Text>
data?.data?.map(({ id, content, about_language }) => (
<VStack
bg={"#fff"}
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
rounded={"lg"}
p={3}
key={id}
>
<HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
<Badge
variant={"surface"}
colorPalette="cyan"
ms={2}
size={"sm"}
fontSize={"xs"}
px={2}
>
🎓 {about_language?.language_name}
</Badge>
</Text>
{/* Pass Data to AboutUsAddModel */}
<AboutUsAddModel aboutUsData={{ id, content, about_language }} />
</HStack>
<Text as="p" fontSize="sm" fontWeight={400} color="#1D1D1D">
{/* {content} */}
<div dangerouslySetInnerHTML={{ __html: content }} />
</Text>
</VStack>
))
)}
</Box>
</VStack>
</MainFrame>
)
}
export default AboutUs
);
};
export default AboutUs;

227
src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
View File

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

113
src/Pages/ManageCMS/FAQ/EditDetails.tsx
View File

@@ -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,31 @@ import {
} from "../../../components/ui/dialog";
import { Field, Input, Span, Stack, Textarea } from "@chakra-ui/react";
import Edit from "../../../components/ActionIcons/Edit";
function EditDetails() {
interface RowData {
id: string;
question: string;
answer: string;
}
function EditDetails(rowData: RowData) {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Span><Edit /></Span>
<Button bg="transparent" color={"black"} h={"18px"}> <Edit /></Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
// w={{ lg: "60%", md: "230px" }}
w={{ base: "90%", md: "400px" }}
height={"auto"}
p={3} // Reduced padding
bgSize={"md"}
p={3}
>
<DialogHeader bg="white">
<DialogTitle alignSelf="center" color="black" fontSize="14px">
Edit Details
Edit Details (ID: {rowData?.id})
</DialogTitle>
</DialogHeader>
@@ -36,16 +125,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">
@@ -58,13 +148,14 @@ function EditDetails() {
border="none"
p={2}
fontSize="12px"
height="120px"
resize={'none'}
_focusVisible={{outline:'none'}}
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

13
src/Pages/ManageCMS/FAQ/FAQ.tsx
View File

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

6
src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
View File

@@ -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 />

13
src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx
View File

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

35
src/Redux/Service/manage.aboutus.service.ts
View File

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

27
src/Types/aboutUsType.tsx Normal file
View File

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