Logo icon shown in organization details popup, but no option to upload logo while creating organization

src/components/Organization/ManagOrg.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   useCreateOrganization,
@@ -14,6 +14,7 @@ import Label from "../common/Label";
 import { useGlobalServices } from "../../hooks/masterHook/useMaster";
 import { zodResolver } from "@hookform/resolvers/zod";
 import SelectMultiple from "../common/SelectMultiple";
+import { LogoUpload } from "../Tenant/LogoUpload";
 
 const ManagOrg = () => {
   const { data: service, isLoading } = useGlobalServices();
@@ -31,10 +32,14 @@ const ManagOrg = () => {
     defaultValues: defaultOrganizationValues,
   });
 
+  const [logoPreview, setLogoPreview] = useState(null);
+  const [logoName, setLogoName] = useState("");
+
   const {
     handleSubmit,
     register,
     reset,
+    getValues,
     formState: { errors },
   } = method;
 
@@ -62,6 +67,7 @@ const ManagOrg = () => {
         email: organization.email || "",
         serviceIds: organization.services?.map((s) => s.id) || [],
         address: organization.address || "",
+        logoImage: organization.logoImage || "",
       });
     }
   }, [organization, reset, service?.data]);
@@ -93,6 +99,14 @@ const ManagOrg = () => {
     }
     onOpen({ startStep: 2 });
   };
+
+  useEffect(() => {
+    const logoImage = getValues("logoImage");
+    if (logoImage) {
+      setLogoPreview(logoImage);
+      setLogoName("Uploaded Logo");
+    }
+  }, [getValues]);
   return (
     <FormProvider {...method}>
       <form className="form" onSubmit={handleSubmit(onSubmit)}>
@@ -176,6 +190,17 @@ const ManagOrg = () => {
           )}
         </div>
 
+        <div className="col-sm-12">
+          <Label htmlFor="logoImage">Logo Image</Label>
+
+          <LogoUpload
+            preview={logoPreview}
+            setPreview={setLogoPreview}
+            fileName={logoName}
+            setFileName={setLogoName}
+          />
+        </div>
+
         <div className="d-flex justify-content-between gap-2 my-2">
           <button
             type="button"
@@ -199,8 +224,8 @@ const ManagOrg = () => {
               {isCreating || isUpdating
                 ? "Please Wait..."
                 : orgData
-                ? "Update"
-                : "Submit"}
+                  ? "Update"
+                  : "Submit"}
             </button>
           </div>
         </div>

src/components/Organization/OrganizationSchema.js

@@ -13,6 +13,7 @@ export const organizationSchema = z.object({
     .regex(phoneRegex, { message: "Invalid phone number" }),
   contactPerson: z.string().min(1, { message: "Person name required" }),
   address: z.string().min(1, { message: "Address is required!" }),
+  logoImage: z.string().min(1, { message: "Logo is required!" }),
   email: z
     .string().trim()
     .min(1, { message: "Email is required" })
@@ -28,6 +29,7 @@ export const defaultOrganizationValues = {
   contactPerson: "",
   address: "",
   email: "",
+  logoImage:"",
   serviceIds: [],
 };
 
@@ -54,4 +56,4 @@ export const spridSchema = z.object({
   spridSearchText: z
     .string()
     .regex(/^\d{4}$/, { message: "SPRID must be exactly 4 digits" }),
-});
+});