src/components/Tenant/EditProfile.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Label from '../common/Label';
-import { useFormContext,useForm,FormProvider } from 'react-hook-form';
+import { useFormContext, useForm, FormProvider } from 'react-hook-form';
 import { useIndustries, useTenantDetails, useUpdateTenantDetails } from '../../hooks/useTenant';
 import { orgSize, reference } from '../../utils/constants';
 import { LogoUpload } from './LogoUpload';
@@ -8,18 +8,18 @@ import showToast from '../../services/toastService';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { EditTenant } from './TenantSchema';
 
-const EditProfile = ({ TenantId,onClose }) => {
+const EditProfile = ({ TenantId, onClose }) => {
   const { data, isLoading, isError, error } = useTenantDetails(TenantId);
   const [logoPreview, setLogoPreview] = useState(null);
   const [logoName, setLogoName] = useState("");
   const { data: Industries, isLoading: industryLoading, isError: industryError } = useIndustries();
-  const {mutate:UpdateTenant,isPending,} = useUpdateTenantDetails(()=>{
-    showToast("Tenant Details Updated Successfully","success")
+  const { mutate: UpdateTenant, isPending, } = useUpdateTenantDetails(() => {
+    showToast("Tenant Details Updated Successfully", "success")
     onClose()
 
   })
   const methods = useForm({
-    resolver:zodResolver(EditTenant),
+    resolver: zodResolver(EditTenant),
     defaultValues: {
       firstName: "",
       lastName: "",
@@ -40,8 +40,8 @@ const EditProfile = ({ TenantId,onClose }) => {
   const { register, reset, handleSubmit, formState: { errors } } = methods;
 
   const onSubmit = (formData) => {
-    const tenantPayload = {...formData,contactName:`${formData.firstName} ${formData.lastName}`,id:data.id,}
-     UpdateTenant({id:data.id,tenantPayload})
+    const tenantPayload = { ...formData, contactName: `${formData.firstName} ${formData.lastName}`, id: data.id, }
+    UpdateTenant({ id: data.id, tenantPayload })
   };
 
   useEffect(() => {
@@ -96,19 +96,19 @@ const EditProfile = ({ TenantId,onClose }) => {
         </div>
 
         <div className="col-sm-6 mt-1">
-        <Label htmlFor="domainName" required>Domain Name</Label>
+          <Label htmlFor="domainName" >Domain Name</Label>
           <input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
           {errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
         </div>
 
         <div className="col-sm-6 mt-1">
-        <Label htmlFor="taxId" required>Tax ID</Label>
+          <Label htmlFor="taxId" >Tax ID</Label>
           <input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
           {errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
         </div>
 
         <div className="col-sm-6 mt-1">
-        <Label htmlFor="officeNumber" required>Office Number</Label>
+          <Label htmlFor="officeNumber" >Office Number</Label>
           <input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
           {errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
         </div>

src/components/Tenant/OrganizationInfo.jsx

@@ -48,7 +48,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       const data = getValues();
       // onSubmitTenant(data);
       // onNext();
-      const tenantPayload = {...data,onBoardingDate:  moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
+      const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
       CreateTenant(tenantPayload);
     }
   };
@@ -73,7 +73,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       </div>
 
       <div className="col-sm-6">
-        <Label htmlFor="officeNumber" required>
+        <Label htmlFor="officeNumber" >
           Office Number
         </Label>
         <input
@@ -87,7 +87,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       </div>
 
       <div className="col-sm-6">
-        <Label htmlFor="domainName" required>
+        <Label htmlFor="domainName" >
           Domain Name
         </Label>
         <input
@@ -101,7 +101,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       </div>
 
       <div className="col-sm-6">
-        <Label htmlFor="taxId" required>
+        <Label htmlFor="taxId" >
           Tax ID
         </Label>
         <input
@@ -138,8 +138,10 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
 
         <select
-          className="form-select form-select-sm"
-          {...register("organizationSize")}
+          id="organizationSize"
+          className="form-select shadow-none border py-1 px-2"
+          style={{ fontSize: "0.875rem" }} // Bootstrap's small text size
+          {...register("organizationSize", { required: "Organization size is required" })}
         >
           {orgSize.map((org) => (
             <option key={org.val} value={org.val}>
@@ -147,17 +149,20 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
             </option>
           ))}
         </select>
+
         {errors.organizationSize && (
           <div className="danger-text">{errors.organizationSize.message}</div>
         )}
       </div>
 
+
       <div className="col-sm-6">
         <Label htmlFor="industryId" required>
           Industry
         </Label>
         <select
-          className="form-select form-select-sm"
+          id="industryId"
+          className="form-select shadow-none border py-1 px-2 small"
           {...register("industryId")}
         >
           {industryLoading ? (
@@ -177,9 +182,9 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
 
       <div className="col-sm-6">
         <Label htmlFor="reference">Reference</Label>
- 
         <select
-          className="form-select form-select-sm"
+          id="reference"
+          className="form-select shadow-none border py-1 px-2 small"
           {...register("reference")}
         >
           {reference.map((org) => (
@@ -193,6 +198,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         )}
       </div>
 
+
       <div className="col-sm-12">
         <Label htmlFor="description">Description</Label>
         <textarea

src/components/Tenant/TenantSchema.js

@@ -11,12 +11,12 @@ export const newTenantSchema = z.object({
     .regex(/^[A-Za-z]+$/, { message: "Last Name should contain only letters!" }),
   email: z.string().trim().email("Invalid email address"),
   description: z.string().trim().optional(),
-  domainName: z.string().trim().nonempty("Domain name is required"),
+  domainName: z.string().trim().optional(),
   billingAddress: z.string().trim().nonempty("Billing address is required"),
-  taxId: z.string().trim().nonempty("Tax ID is required"),
+  taxId: z.string().trim().optional(),
   logoImage: z.string().trim().optional(),
   organizationName: z.string().trim().nonempty("Organization name is required"),
-  officeNumber: z.string().trim().nonempty("Office number is required"),
+  officeNumber: z.string().trim().optional(),
   contactNumber: z.string().trim()
     .nonempty("Contact number is required")
     .regex(/^\+?[1-9]\d{7,14}$/, "Enter a valid contact number"),
@@ -26,10 +26,10 @@ export const newTenantSchema = z.object({
       return new Date(`${year}-${month}-${day}`);
     }
     return val;
-}, z.date({
+  }, z.date({
     required_error: "Onboarding date is required",
     invalid_type_error: "Invalid date format",
-})),
+  })),
   organizationSize: z.string().nonempty("Organization size is required"),
   industryId: z.string().uuid("Invalid industry ID"),
   reference: z.string().nonempty("Reference is required"),
@@ -136,20 +136,20 @@ export const EditTenant = z.object({
     .string().trim()
     .min(1, { message: "First Name is required!" })
     .regex(/^[A-Za-z]+$/, { message: "First Name should contain only letters!" }),
-lastName: z
+  lastName: z
     .string().trim()
     .min(1, { message: "Last Name is required!" })
     .regex(/^[A-Za-z]+$/, { message: "Last Name should contain only letters!" }),
   description: z.string().trim().optional(),
-  domainName: z.string().trim().min(1, { message: "Domain Name is required!" }),
+  domainName: z.string().trim().optional(),
   billingAddress: z.string().trim().min(1, { message: "Billing Address is required!" }),
-  taxId: z.string().trim().min(1, { message: "Tax ID is required!" }),
+  taxId: z.string().trim().optional(),
   logoImage: z.string().optional(),
-  officeNumber: z.string().trim().min(1, { message: "Office Number is required!" }),
+  officeNumber: z.string().trim().optional(),
   contactNumber: z.string().trim()
     .nonempty("Contact number is required")
     .regex(/^\+?[1-9]\d{7,14}$/, "Enter a valid contact number"),
   organizationSize: z.string().min(1, { message: "Organization Size is required!" }),
-  industryId: z.string().min(1,{ message: "Invalid Industry ID!" }),
+  industryId: z.string().min(1, { message: "Invalid Industry ID!" }),
   reference: z.string().optional(),
 });