fixed Modal provider component and setup organization creation

src/components/Organization/ManageOrganization.jsx

@@ -6,16 +6,14 @@ import {
   organizationSchema,
 } from "./OrganizationSchema";
 import Modal from "../common/Modal";
-import {
-  useCreateOrganization,
-  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 { data: services,isLoading } = useServices();
 
   const method = useForm({
     resolver: zodResolver(organizationSchema),
@@ -25,20 +23,15 @@ const ManageOrganization = () => {
   const {
     handleSubmit,
     register,
-    reset,
     formState: { errors },
   } = method;
 
-  const { mutate: CreateOrganization, isPending } = useCreateOrganization(
-    () => {
-      reset(defaultOrganizationValues);
-      orgModal.onClose();
-    }
-  );
+  const {mutate:CreateOrganization,isPending} = useCreateOrganization(()=>{})
 
   const onSubmit = (OrgPayload) => {
-    CreateOrganization(OrgPayload);
+    CreateOrganization()
   };
+  console.log(services)
   const contentBody = (
     <FormProvider {...method}>
       <form className="form" onSubmit={handleSubmit(onSubmit)}>
@@ -85,18 +78,30 @@ const ManageOrganization = () => {
           <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
@@ -113,17 +118,12 @@ const ManageOrganization = () => {
           <button
             type="button"
             className="btn btn-sm btn-secondary"
-            onClick={orgModal.onClose}
-            disabled={isPending || isLoading}
+            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 type="submit" className="btn btn-sm btn-primary" disabled={isPending || isLoading}>
+            {isPending  ? "Please Wait...":"Submit"}
           </button>
         </div>
       </form>
@@ -134,9 +134,7 @@ const ManageOrganization = () => {
     <Modal
       isOpen={orgModal.isOpen}
       onClose={orgModal.onClose}
-      onSubmit={onSubmit}
-      title={"Manage Organization"}
-      actionLabel={"Submit"}
+      title="Manage Organization"
       body={contentBody}
     />
   );

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"