[ update ]

src/Pages/SubAdmin/AddModel.tsx

@@ -1,80 +1,288 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
-import { IoMdAdd } from "react-icons/io"
-import { Checkbox } from "../../components/ui/checkbox"
+import { useState } from "react";
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import {
+  Field,
+  Grid,
+  Heading,
+  Input,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import { IoMdAdd } from "react-icons/io";
+import { Checkbox } from "../../components/ui/checkbox";
+import { useCreateSubAdminPostMutation } from "../../Redux/Service/manage.subadmin.service";
+import { toaster } from "../../components/ui/toaster";
 
-function AddModel() {
-    return (
+function AddModel({ refetch }: { refetch: VoidFunction }) {
+  const [createSubAdminPost, { isLoading }] = useCreateSubAdminPostMutation();
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button rounded={'md'} px={4} py={2} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> Add</Button>
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    dob: "",
+    gender: "",
+    email: "",
+    phone: ""
+  });
 
-            </DialogTrigger>
+  const [isOpen, setIsOpen] = useState(false);
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white"  >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px"
-                    >Add Sub Admin Account</DialogTitle>
-                </DialogHeader>
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+  const handleSubmit = async () => {
+    const { firstName, lastName, dob, gender, email, phone } = formData;
+    
+    if (!firstName || !lastName || !dob || !gender || !email || !phone) {
+      toaster.create({
+        title: "Error",
+        description: "Please fill in all required fields",
+        type: "error",
+      });
+      return;
+    }
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
-                            <Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+    const payload = {
+    //   principal_type_xid: 4,
+    //   principal_source_xid: 1,
+    //   user_name: `${firstName} ${lastName}`,
+      first_name: firstName,
+      last_name: lastName,
+      date_of_birth: dob,
+      gender,
+      email_address: email,   
+      phone_number: phone,
+      created_by: 1,
+    };
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
-                            <Input placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+    try {
+      const response = await createSubAdminPost(payload).unwrap();
+      
+      if (response.status === "success") {
+        toaster.create({
+          title: "Success",
+          description: response.message || "Sub-admin added successfully",
+          type: "success",
+        });
+        refetch();
+        setIsOpen(false);
+      }
+    } catch (error: any) {
+      toaster.create({
+        title: "Error",
+        description: error?.data?.message || "Failed to create sub-admin",
+        type: "error",
+      });
+    }
+  };
 
-                            <Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
-                            <Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+  return (
+    <DialogRoot
+      open={isOpen}
+      onOpenChange={(details) => setIsOpen(details.open)}
+      placement="center"
+    >
+      <DialogTrigger asChild>
+        <Button rounded={"md"} px={4} py={2} size={"xs"} bg={"#02A0A0"}>
+          <IoMdAdd /> Add
+        </Button>
+      </DialogTrigger>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
-                            <Input placeholder="Enter the Gender" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            <Heading mt={5} color={'#000'} fontSize={'sm'}>Permissions</Heading>
-                        </Field.Root>
-                        <Grid templateColumns="repeat(2, 1fr)" gap={4}>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage contact us</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>manage User</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage CMS</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Post</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Reports</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>My profile</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}> manage feedbacks</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage community</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}> Notification</Text></Checkbox>
-                        </Grid>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add Sub Admin Account
+          </DialogTitle>
+        </DialogHeader>
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+                name="firstName"
+                placeholder="Enter the First Name"
+                value={formData.firstName}
+                onChange={handleChange}
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
 
-    )
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Last Name
+              </Field.Label>
+              <Input
+                name="lastName"
+                placeholder="Enter the Last Name"
+                value={formData.lastName}
+                onChange={handleChange}
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                DOB
+              </Field.Label>
+              <Input
+                name="dob"
+                placeholder="YYYY-MM-DD"
+                value={formData.dob}
+                onChange={handleChange}
+                type="date"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Gender
+              </Field.Label>
+              <Input
+                name="gender"
+                placeholder="Enter the Gender"
+                value={formData.gender}
+                onChange={handleChange}
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Email
+              </Field.Label>
+              <Input
+                name="email"
+                placeholder="Enter the Email"
+                value={formData.email}
+                onChange={handleChange}
+                type="email"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Phone Number
+              </Field.Label>
+              <Input
+                name="phone"
+                placeholder="Enter the Phone Number"
+                value={formData.phone}
+                onChange={handleChange}
+                type="tel"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Heading mt={5} color={"#000"} fontSize={"sm"}>
+                Permissions
+              </Heading>
+            </Field.Root>
+
+            <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Dashboard</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage contact us</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage User</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage CMS</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Post</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Reports</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Sub-Admin</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>My Profile</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Jobs</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Feedbacks</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Community</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Notification</Text>
+              </Checkbox>
+            </Grid>
+          </Stack>
+        </DialogBody>
+
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            size={"xs"}
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            onClick={handleSubmit}
+            // isLoading={isLoading}
+            disabled={isLoading}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default AddModel
+export default AddModel;

src/Redux/Service/faqs.service.ts

@@ -69,6 +69,7 @@ export const faqs = createApi({
         body: { id, is_active },
       }),
     }),
+    
 
     deleteFaqPost: builder.mutation<{ status: string; message: string }, { id: number }>({
       query: ({ id }) => ({

src/Redux/Service/manage.subadmin.service.ts

@@ -40,7 +40,6 @@ interface ApiResponse {
   data: PaginatedData;
 }
 
-
 // export type SubAdminPost = {
 //   id: number;
 //   first_name: string,
@@ -80,11 +79,30 @@ interface SubAdminView {
   data: SubAdmin[];
 }
 
+interface CreateSubAdminPayload {
+  principal_type_xid: number;
+  principal_source_xid: number;
+  user_name: string;
+  first_name: string;
+  last_name: string;
+  date_of_birth: string;
+  gender: string;
+  email_address: string;
+  phone_number: string;
+  created_by: number;
+}
+
+interface CreateSubAdminResponse {
+  status: string;
+  status_code: number;
+  message: string;
+  data: UserData;
+}
 
 export const manageSubAdmin = createApi({
   reducerPath: "manageSubAdmin",
   baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-  tagTypes: ['SubAdmin'],
+  tagTypes: ["SubAdmin"],
   endpoints: (builder) => ({
     createFaqPost: builder.mutation<Post, Partial<Post>>({
       query: (data) => ({
@@ -94,11 +112,11 @@ export const manageSubAdmin = createApi({
       }),
     }),
     getSubAdmin: builder.query<ApiResponse, void>({
-      query: () => `/sub-admin`
+      query: () => `/sub-admin`,
     }),
 
     viewSubAdmin: builder.query<SubAdminView, number>({
-      query: (id) => `/sub-admin-view/${id}`
+      query: (id) => `/sub-admin-view/${id}`,
     }),
 
     updateSubAdmin: builder.mutation({
@@ -109,6 +127,15 @@ export const manageSubAdmin = createApi({
       }),
     }),
 
+   createSubAdminPost: builder.mutation<CreateSubAdminResponse, CreateSubAdminPayload>({
+    query: (data) => ({
+      url: "/sub-admin-create",
+      method: "POST",
+      body: data,
+    }),
+    invalidatesTags: ["SubAdmin"], // Add this to invalidate cache
+  }),
+
     faqToggle: builder.mutation({
       query: ({ id, is_active }) => ({
         url: `/faq-status`,
@@ -131,10 +158,11 @@ export const {
   useLazyViewSubAdminQuery,
   useUpdateSubAdminMutation,
   useDeleteSubAdminPostMutation,
+  useCreateSubAdminPostMutation
 } = manageSubAdmin;
 
 export type Post = {
   id: number;
   title: string;
   body: string;
-};
+};