handle empty field showing

src/components/Tenant/EditProfile.jsx

@@ -73,7 +73,7 @@ const EditProfile = ({ TenantId,onClose }) => {
 
       <div className="col-sm-6 mt-1">
         <Label htmlFor="firstName" required>First Name</Label>
-        <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} />
+        <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
         {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
       </div>
 

src/components/Tenant/Profile.jsx

@@ -4,6 +4,7 @@ import EditProfile from "./EditProfile";
 import GlobalModel from "../common/GlobalModel";
 import { useTenantContext } from "../../pages/Tenant/TenantPage";
 import { useTenantDetailsContext } from "../../pages/Tenant/TenantDetails";
+import IconButton from "../common/IconButton";
 
 const Profile = ({ data }) => {
   const {setEditTenant} = useTenantDetailsContext()
@@ -15,12 +16,16 @@ const Profile = ({ data }) => {
           <div className="col-12 my-2">
             <div className="d-flex flex-wrap align-items-start position-relative ">
               <div className=" d-flex align-items-start gap-2">
-                <img
+                {data.logoImage ? (<img
                   src={data.logoImage}
                   alt="Preview"
                   className="img-thumbnail rounded"
                   style={{ maxHeight: "35px" }}
-                />
+                />):(   <IconButton
+              iconClass="bx bx-sm bx-building"
+              color="warning"
+              size={8}
+            />)}
               </div>
               <div className="ms-2 ">
                 <h4 className="m-0">{data.name}</h4>
@@ -67,18 +72,20 @@ const Profile = ({ data }) => {
               <span className="ms-2">{data.contactNumber}</span>
             </div>
 
-            <div className="col-12  d-flex text-wrap align-items-start my-2 m-0">
+            {data.billingAddress && (
-              <i className="bx bx-sm bx-mark me-1"></i>
+              <div className="col-12  d-flex text-wrap align-items-start mt-4 m-0">
+              <i className='bx bxs-flag-alt bx-sm me-1'></i>
               <span className="fw-semibold">Address:</span>
               <span className="ms-2">{data.billingAddress}</span>
             </div>
+            )}
           </div>
         <div className="divider text-start ">
           <div className="divider-text">Organization</div>
         </div>
 
         <div className="col-12  d-flex align-items-center">
-          <i className="bx bx-sm bxs-building"></i>
+          <i className="bx bx-sm bxs-building me-1"></i>
           <span className="fw-semibold">Industry:</span>
           <span className="ms-2">{data?.industry?.name}</span>
         </div>
@@ -96,7 +103,7 @@ const Profile = ({ data }) => {
             <span className="ms-2">{data?.organizationSize}</span>
           </div>
           <div className="col-12 col-md-6 d-flex align-items-center">
-            <i className="bx bx-sm bxs-calendar"></i>
+            <i className="bx bx-sm bxs-calendar me-1"></i>
             <span className="fw-semibold">On-Boarding Date:</span>
             <span className="ms-2">
               {formatUTCToLocalTime(data?.onBoardingDate)}

src/pages/Tenant/TenantDetails.jsx

@@ -77,7 +77,7 @@ const TenantDetails = () => {
             <li key={tab.id} className="nav-item">
               <button
                 type="button"
-                className={`nav-link d-flex align-items-center gap-2 ${
+                className={`nav-link d-flex align-items-center text-tiny gap-2 ${
                   index === 0 ? "active" : ""
                 }`}
                 role="tab"