fixed Modal provider component and setup organization creation

src/ModalProvider.jsx

@@ -1,14 +1,12 @@
 import React from 'react'
-import Modal from './components/common/Modal'
 import ManageOrganization from './components/Organization/ManageOrganization'
+import { useOrganizationModal } from './hooks/useOrganization';
 
 const ModalProvider = () => {
-  return (
-    <>
+  const { isOpen } = useOrganizationModal();
+
+  return <>{isOpen && <ManageOrganization />}</>; 
+};
 
-    <ManageOrganization/>
-    </>
-  )
-}
 
 export default ModalProvider

src/components/Organization/ManageOrganization.jsx

@@ -6,77 +6,135 @@ import {
   organizationSchema,
 } from "./OrganizationSchema";
 import Modal from "../common/Modal";
-import { useOrganization } from "../../hooks/useDirectory";
-import { useOrganizationModal } from "../../hooks/useOrganization";
+import { useCreateOrganization, useOrganizationModal } from "../../hooks/useOrganization";
 import Label from "../common/Label";
 import SelectMultiple from "../common/SelectMultiple";
+import { useServices } from "../../hooks/masterHook/useMaster";
 
 const ManageOrganization = () => {
   const orgModal = useOrganizationModal();
+  const { data: services,isLoading } = useServices();
+
   const method = useForm({
     resolver: zodResolver(organizationSchema),
     defaultValues: defaultOrganizationValues,
   });
 
-  const { handleSubmit, watch, register } = method;
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = method;
 
-  const onSubmit = () => {};
+  const {mutate:CreateOrganization,isPending} = useCreateOrganization(()=>{})
 
+  const onSubmit = (OrgPayload) => {
+    CreateOrganization()
+  };
+  console.log(services)
   const contentBody = (
     <FormProvider {...method}>
       <form className="form" onSubmit={handleSubmit(onSubmit)}>
         <div className="mb-1 text-start">
-          <Label htmlFor="organization" required>
+          <Label htmlFor="name" required>
             Organization Name
           </Label>
-          <input className="form-control form-control-sm" />
+          <input
+            className="form-control form-control-sm"
+            {...register("name")}
+          />
+          {errors.name && (
+            <span className="danger-text">{errors.name.message}</span>
+          )}
         </div>
+
         <div className="mb-1 text-start">
-          <Label htmlFor="organization" required>
+          <Label htmlFor="contactPerson" required>
             Contact Person
           </Label>
-          <input className="form-control form-control-sm" />
+          <input
+            className="form-control form-control-sm"
+            {...register("contactPerson")}
+          />
+          {errors.contactPerson && (
+            <span className="danger-text">{errors.contactPerson.message}</span>
+          )}
         </div>
+
         <div className="mb-1 text-start">
-          <Label htmlFor="organization" required>
+          <Label htmlFor="contactNumber" required>
             Contact Number
           </Label>
-          <input className="form-control form-control-sm" />
+          <input
+            className="form-control form-control-sm"
+            {...register("contactNumber")}
+          />
+          {errors.contactNumber && (
+            <span className="danger-text">{errors.contactNumber.message}</span>
+          )}
         </div>
+
         <div className="mb-1 text-start">
-          <Label htmlFor="organization" required>
+          <Label htmlFor="email" required>
             Email Address
           </Label>
-          <input className="form-control form-control-sm" />
+          <input
+            className="form-control form-control-sm"
+            {...register("email")}
+          />
+          {errors.email && (
+            <span className="danger-text">{errors.email.message}</span>
+          )}
         </div>
+
         <div className="mb-1 text-start">
           <SelectMultiple
             name="serviceIds"
             label="Services"
             required={true}
             valueKey="id"
+            options={services?.data || []}
           />
+          {errors.serviceIds && (
+            <span className="danger-text">{errors.serviceIds.message}</span>
+          )}
         </div>
+
         <div className="mb-1 text-start">
-          <Label htmlFor="organization" required>
+          <Label htmlFor="address" required>
             Address
           </Label>
-          <textarea className="form-control form-control-sm" rows={2} />
+          <textarea
+            className="form-control form-control-sm"
+            {...register("address")}
+            rows={2}
+          />
+          {errors.address && (
+            <span className="danger-text">{errors.address.message}</span>
+          )}
         </div>
+
         <div className="d-flex justify-content-end gap-2 my-2">
-          <button className="btn btn-sm btn-secondary">Cancel</button>
-          <button className="btn btn-sm btn-primary">Submit</button>
+          <button
+            type="button"
+            className="btn btn-sm btn-secondary"
+            onClick={orgModal.onClose} disabled={isPending || isLoading}
+          >
+            Cancel
+          </button>
+          <button type="submit" className="btn btn-sm btn-primary" disabled={isPending || isLoading}>
+            {isPending  ? "Please Wait...":"Submit"}
+          </button>
         </div>
       </form>
     </FormProvider>
   );
+
   return (
     <Modal
       isOpen={orgModal.isOpen}
       onClose={orgModal.onClose}
-      onSubmit={onSubmit}
-      title={"Manage Organization"}
-      actionLabel={"Submit"}
+      title="Manage Organization"
       body={contentBody}
     />
   );

src/components/Organization/OrganizationSchema.js

@@ -3,12 +3,13 @@ import { array, z } from "zod";
 const phoneRegex = /^\+?[1-9]\d{6,14}$/;
 
 export const organizationSchema = z.object({
-  organizationName: z.string().min(1, { message: "Name is required" }),
-  contactPhone: z
+  name: z.string().min(1, { message: "Name is required" }),
+  contactNumber: z
     .string()
     .trim()
-    .min(7)
-    .max(20)
+      .min(7, { message: "Contact number must be at least 7 digits" })
+  .max(20, { message: "Contact number cannot exceed 12 digits" })
+
     .regex(phoneRegex, { message: "Invalid phone number" }),
   contactPerson: z.string().min(1, { message: "Person name required" }),
   address: z.string().min(1, { message: "Address is required!" }),
@@ -16,17 +17,16 @@ export const organizationSchema = z.object({
     .string()
     .min(1, { message: "Email is required" })
     .email("Invalid email address"),
-  listOfServiceId: z
+  serviceIds: z
     .array(z.string())
     .min(1, { message: "Please insert service id" }),
 });
 
-
 export const defaultOrganizationValues = {
-    organizationSchema:"",
-    contactPhone:"",
-    contactPerson:"",
-    address:"",
-    email:"",
-    listOfServiceId:[]
-}
+  name: "",
+  contactNumber: "",
+  contactPerson: "",
+  address: "",
+  email: "",
+  serviceIds: [],
+};

src/components/common/SelectMultiple.jsx

@@ -12,7 +12,6 @@ const SelectMultiple = ({
   valueKey = "id",
   placeholder = "Please select...",
   IsLoading = false,
-  required = false,
 }) => {
   const { setValue, watch } = useFormContext();
   const selectedValues = watch(name) || [];
@@ -147,9 +146,7 @@ const SelectMultiple = ({
         className="multi-select-dropdown-container"
         style={{ position: "relative" }}
       >
-        <Label htmlFor={name} required={required}>
-          {label}
-        </Label>
+       <label>{label}</label>
 
         <div
           className="multi-select-dropdown-header"

src/hooks/masterHook/useMaster.js

@@ -9,7 +9,12 @@ import showToast from "../../services/toastService";
 
 
 
-
+export const useServices = ()=>{
+  return useQuery({
+    queryKey:["services"],
+    queryFn:async()=>  await MasterRespository.getServices()
+  })
+}
 
 export const useMasterMenu = ()=>{
   return useQuery({

src/hooks/useOrganization.js

@@ -1,16 +1,42 @@
 import { useSelector, useDispatch } from "react-redux";
-import { toggleOrgModal,openOrgModal,closeOrgModal } from "../slices/localVariablesSlice";
-
+import {
+  toggleOrgModal,
+  openOrgModal,
+  closeOrgModal,
+} from "../slices/localVariablesSlice";
+import { useMutation } from "@tanstack/react-query";
+import OrganizationRepository from "../repositories/OrganizationRespository";
+import showToast from "../services/toastService";
 
 export const useOrganizationModal = () => {
   const dispatch = useDispatch();
-  const isOpen = useSelector((state) => state.localVariables.OrganizationModal.isOpen);
+  const isOpen = useSelector(
+    (state) => state.localVariables.OrganizationModal.isOpen
+  );
 
   return {
     isOpen,
     onOpen: () => dispatch(openOrgModal()),
     onClose: () => dispatch(closeOrgModal()),
-    Togggle:()=> dispatch(toggleOrgModal(isOpen))
+    Togggle: () => dispatch(toggleOrgModal(isOpen)),
   };
 };
 
+export const useCreateOrganization = (onSuccessCallback) => {
+  return useMutation({
+    mutationFn: async (OrgPayload) =>
+      await OrganizationRepository.createOrganization(OrgPayload),
+    onSuccess: (_, variables) => {
+      showToast("Organization created successfully", "success");
+      if (onSuccessCallback) onSuccessCallback();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message ||
+          error.message ||
+          "Something went wrong please try again !",
+        "error"
+      );
+    },
+  });
+};

src/repositories/MastersRepository.jsx

@@ -106,4 +106,8 @@ export const MasterRespository = {
   createDocumentType: (data) => api.post(`/api/Master/document-type`, data),
   updateDocumentType: (id, data) =>
     api.put(`/api/Master/document-type/edit/${id}`, data),
+
+
+
+  getServices:()=>api.get("/api/Master/global-service/list")
 };

src/repositories/OrganizationRespository.jsx

@@ -0,0 +1,9 @@
+import { api } from "../utils/axiosClient";
+
+
+const OrganizationRepository =  {
+  createOrganization:(data)=>api.post('/api/Organization/create',data)
+}
+
+export default OrganizationRepository;
+