Create APi Call in Create Tenant.

src/components/Tenant/CreateTenant.jsx

@@ -29,7 +29,6 @@ const CreateTenant = () => {
   const location = useLocation();
   const formData = location.state?.formData || null;
 
-  // Assume useCreateTenant also handles updates, so we destructure `updateTenant` as well.
   const { createTenant, updateTenant, loading, error, success } = useCreateTenant();
 
   const [form, setForm] = useState(initialData);
@@ -44,13 +43,12 @@ const CreateTenant = () => {
     if (formData) {
       const { contactName, contactNumber, logoImage, ...rest } = formData;
 
-      // A more robust way to split the name from the backend data
       let firstName = "";
       let lastName = "";
       if (contactName) {
         const nameParts = contactName.trim().split(" ");
-        firstName = nameParts.shift() || ""; // Take the first word
-        lastName = nameParts.join(" ") || ""; // Join the rest
+        firstName = nameParts.shift() || "";
+        lastName = nameParts.join(" ") || "";
       }
 
       setForm({
@@ -118,44 +116,55 @@ const CreateTenant = () => {
     setImagePreview(defaultAvatar);
   };
 
+  const handleClearForm = () => {
+    setForm(initialData);
+    setImagePreview(defaultAvatar);
+    setImageFile(null);
+  };
+
   const handleSubmit = useCallback(
     async (e) => {
       e.preventDefault();
 
-      // Prepare the data, ensuring firstName and lastName are included
+      // Determine the image to send to the API
+      // If there's a new file selected (imageFile), use it.
+      // If the image was reset (imagePreview is defaultAvatar), send null.
+      // Otherwise, use the existing logo image (imagePreview).
+      const finalLogoImage = imageFile
+        ? imageFile
+        : imagePreview === defaultAvatar
+        ? null
+        : imagePreview;
+
       const submissionData = {
-        ...form, // This spreads all fields from your form state, including firstName and lastName
-        logoImage: imagePreview,
+        ...form,
+        logoImage: finalLogoImage,
         contactNumber: form.phone,
         contactName: `${form.firstName} ${form.lastName}`.trim(),
       };
 
       let result;
       if (formData?.id) {
-        // This is the update path. Call the update function from the hook.
         result = await updateTenant(formData.id, submissionData);
 
         if (result) {
           alert("Tenant updated successfully!");
-          // Navigate back to the profile page with the updated tenant data
           navigate("/tenant/profile", { state: { newTenant: result } });
         } else {
           alert("Failed to update tenant. Please check the form and try again.");
         }
       } else {
-        // This is the creation path. Call the create function from the hook.
         result = await createTenant(submissionData);
 
         if (result) {
           alert("Tenant created successfully!");
-          // Navigate to the subscription page with the new tenant's data
           navigate("/tenant/profile/subscription", { state: { formData: result } });
         } else {
           alert("Failed to create tenant. Please check the form and try again.");
         }
       }
     },
-    [form, imagePreview, formData, navigate, createTenant, updateTenant]
+    [form, imagePreview, imageFile, formData, navigate, createTenant, updateTenant]
   );
 
   const RequiredLabel = ({ label }) => (
@@ -237,17 +246,19 @@ const CreateTenant = () => {
                   onChange={handleChange}
                 />
               </div>
+
               <div className="col-md-6">
-                <RequiredLabel label="Billing Address" />
+                <RequiredLabel label="Onboarding Date" />
                 <input
-                  type="text"
-                  name="billingAddress"
+                  type="date"
+                  name="onBoardingDate"
                   className="form-control form-control-sm"
-                  value={form.billingAddress}
+                  value={form.onBoardingDate}
                   onChange={handleChange}
                   required
                 />
               </div>
+
               <div className="col-md-6">
                 <RequiredLabel label="Organization Name" />
                 <input
@@ -319,26 +330,29 @@ const CreateTenant = () => {
                 />
               </div>
               <div className="col-md-6">
-                <label className="form-label small mb-1">Domain Name</label>
+                <RequiredLabel label="Domain Name" />
                 <input
                   type="text"
                   name="domainName"
                   className="form-control form-control-sm"
                   value={form.domainName}
                   onChange={handleChange}
-                />
-              </div>
-              <div className="col-md-6">
-                <RequiredLabel label="Onboarding Date" />
-                <input
-                  type="date"
-                  name="onBoardingDate"
-                  className="form-control form-control-sm"
-                  value={form.onBoardingDate}
-                  onChange={handleChange}
                   required
                 />
               </div>
+
+              <div className="col-12">
+                <RequiredLabel label="Billing Address" />
+                <textarea
+                  name="billingAddress"
+                  className="form-control form-control-sm"
+                  rows="2"
+                  value={form.billingAddress}
+                  onChange={handleChange}
+                  required
+                ></textarea>
+              </div>
+
               <div className="col-12">
                 <label className="form-label small mb-1">Description</label>
                 <textarea
@@ -406,13 +420,26 @@ const CreateTenant = () => {
               >
                 {loading ? "Saving..." : formData?.id ? "Update" : "Save & Continue"}
               </button>
-              <button
-                type="button"
-                className="btn btn-sm btn-secondary ms-2 px-4"
-                onClick={() => navigate("/tenant")}
-              >
-                Cancel
-              </button>
+
+              {!formData?.id && (
+                <button
+                  type="button"
+                  className="btn btn-sm btn-warning ms-2 px-4"
+                  onClick={handleClearForm}
+                >
+                  Clear
+                </button>
+              )}
+
+              {formData?.id && (
+                <button
+                  type="button"
+                  className="btn btn-sm btn-secondary ms-2 px-4"
+                  onClick={() => navigate("/tenant/profile")}
+                >
+                  Cancel
+                </button>
+              )}
             </div>
           </form>
         </div>

src/components/Tenant/Tenant.jsx

@@ -98,7 +98,7 @@ const Tenant = () => {
           </button>
         </div>
 
-        <div className="table-responsive p-5 pt-3">
+        <div className="table-responsive p-3 pt-3">
           <table className="table text-start align-middle">
             <thead>
               <tr className="fs-6">
@@ -121,19 +121,37 @@ const Tenant = () => {
                 return (
                   <tr key={tenant.id} style={{ height: "50px" }} className="align-middle">
                     <td>
-                      <div className="d-flex align-items-center gap-2">
+                      <div className={`d-flex align-items-center ${tenant.logoImage ? "gap-2" : ""}`}>
                         {tenant.logoImage ? (
-                          <img
-                            src={tenant.logoImage}
-                            alt={`${tenant.name} Logo`}
-                            style={{ width: "40px", height: "40px", borderRadius: "8px", objectFit: "cover" }}
-                          />
+                          <div
+                            style={{
+                              width: "36px",
+                              height: "36px",
+                              borderRadius: "50%",
+                              border: "2px solid #ccc",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                            }}
+                          >
+                            <img
+                              src={tenant.logoImage}
+                              alt={`${tenant.name} Logo`}
+                              style={{
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "50%",
+                                objectFit: "cover",
+                              }}
+                            />
+                          </div>
                         ) : (
                           <Avatar firstName={firstName} lastName={lastName} />
                         )}
-                        <span>{tenant.contactName}</span>
+                        <span className="ms-0">{tenant.contactName}</span>
                       </div>
                     </td>
+
                     <td><i className="bx bx-envelope text-primary me-2"></i>{tenant.email}</td>
                     <td><i className="bx bx-phone text-success me-2"></i>{tenant.contactNumber}</td>
                     <td><i className="bx bx-globe text-info me-2"></i>{tenant.domainName}</td>