done

ef-api/models/property.js

@@ -318,6 +318,18 @@ const propertySchema = mongoose.Schema({
       },
     },
   ],
+
+  IAB:[
+    {
+      title: {
+        type: String,
+      },
+      URL: {
+        type: String,
+      },
+    },
+  ],
+
 });
 
 const PropertyModal = mongoose.model("property", propertySchema);

ef-ui/dist/index.html

@@ -54,7 +54,7 @@
  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.min.css" rel="stylesheet">
 
-   <script type="module" crossorigin src="/assets/index-NQYOhmIv.js"></script>
+   <script type="module" crossorigin src="/assets/index-wGi2QxgW.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BH_0_em5.css">
  </head>
 

ef-ui/dist/vendor/fontawesome-free/package-lock.json

@@ -0,0 +1,24 @@
+{
+  "name": "@fortawesome/fontawesome-free",
+  "version": "5.15.3",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@fortawesome/fontawesome-free",
+      "version": "5.15.3",
+      "hasInstallScript": true,
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-free": "file:"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "resolved": "",
+      "link": true
+    }
+  }
+}

ef-ui/dist/vendor/fontawesome-free/package.json

@@ -46,7 +46,9 @@
   "engines": {
     "node": ">=6"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "file:"
+  },
   "version": "5.15.3",
   "name": "@fortawesome/fontawesome-free",
   "main": "js/fontawesome.js",
@@ -55,4 +57,4 @@
   "scripts": {
     "postinstall": "node attribution.js"
   }
-}
+}

ef-ui/public/vendor/fontawesome-free/package-lock.json

@@ -0,0 +1,24 @@
+{
+  "name": "@fortawesome/fontawesome-free",
+  "version": "5.15.3",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@fortawesome/fontawesome-free",
+      "version": "5.15.3",
+      "hasInstallScript": true,
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-free": "file:"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "resolved": "",
+      "link": true
+    }
+  }
+}

ef-ui/public/vendor/fontawesome-free/package.json

@@ -46,7 +46,9 @@
   "engines": {
     "node": ">=6"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "file:"
+  },
   "version": "5.15.3",
   "name": "@fortawesome/fontawesome-free",
   "main": "js/fontawesome.js",
@@ -55,4 +57,4 @@
   "scripts": {
     "postinstall": "node attribution.js"
   }
-}
+}

ef-ui/src/components/Addproperty.jsx

@@ -12,11 +12,14 @@ const Addproperty = () => {
   const handleContinue = () => {
     if (activeTab === "propertydetails") setActiveTab("Images");
     if (activeTab === "Images") setActiveTab("Accounting");
+    if (activeTab === "Accounting") setActiveTab("IAB");
+    if (activeTab === "IAB") setActiveTab("IAB");
   };
 
   const handleBack = () => {
     if (activeTab === "Images") setActiveTab("propertydetails");
     if (activeTab === "Accounting") setActiveTab("Images");
+    if (activeTab === "IAB") setActiveTab("Accounting");
   };
 
   const dispatch = useDispatch();
@@ -124,6 +127,9 @@ const Addproperty = () => {
     InsuranceClaim: "0",
     LongTermRental: "0",
     FinancingCostClosingCost: "0",
+    IAB: [{ title: "IAB Title", URL: "Please enter URL" }],
+
+ 
   });
 
   const [submitted, setSubmitted] = useState(false);
@@ -1006,6 +1012,46 @@ const Addproperty = () => {
     }
   };
 
+
+
+
+
+    const addIAB = () => {
+    setFormData((prevData) => ({
+      ...prevData,
+      IAB: [...prevData.IAB, { title: "", URL: "" }],
+    }));
+  };
+
+  const deleteIAB = (index) => {
+    const updatedIAB = formData.IAB.filter(
+      (_, i) => i !== index
+    );
+    setFormData((prevData) => ({
+      ...prevData,
+      IAB: updatedIAB,
+    }));
+  };
+
+  // Function to handle changes to incidentalCost title and price
+  const handleIABTitle = (index, field, value) => {
+    const updatedIAB = [...formData.IAB];
+    updatedIAB[index][field] = value;
+    setFormData((prevData) => ({
+      ...prevData,
+      IAB: updatedIAB,
+    }));
+  };
+
+  const handleIABChange = (index, field, value) => {
+    const updatedIAB = [...formData.IAB];
+    updatedIAB[index][field] = value;
+    setFormData((prevData) => ({
+      ...prevData,
+      IAB: updatedIAB,
+    }));
+  };
+
   return (
     <>
       <div className="container tabs-wrap">
@@ -1037,6 +1083,14 @@ const Addproperty = () => {
               Accounting
             </a>
           </li>
+          <li
+            role="presentation"
+            className={activeTab === "IAB" ? "active tab" : "tab"}
+          >
+            <a onClick={() => setActiveTab("IAB")} role="tab">
+            IAB
+            </a>
+          </li>
         </ul>
 
         <div className="tab-content">
@@ -4028,15 +4082,125 @@ const Addproperty = () => {
                   type="button"
                   className="btn btn-primary continue"
                   style={{ backgroundColor: "#fda417", border: "#fda417" }}
-                  onClick={handleSubmit}
+                  onClick={handleContinue}
                 >
-                  Submit
+                  Continue
                 </button>{" "}
               </div>
               <br />
             </div>
           )}
+
+
+
+          {activeTab === "IAB" && (
+            <div role="tabpanel" className="card tab-pane active">
+
+
+            <span
+                style={{
+                  color: "#fda417",
+                  fontSize: "14px",
+                  fontWeight: "bold",
+                }}
+              >
+                Add IAB Links:
+              </span>
+
+              {formData.IAB.map((title, index) => (
+                <div key={index} className="row gy-3 align-items-center">
+                  <div className="col-md-4">
+                    <input
+                      type="text"
+                      className="form-control"
+                      value={title.title}
+                      onChange={(e) =>
+                        handleIABTitle(index, "title", e.target.value)
+                      }
+                      placeholder="Title"
+                      required
+                    />
+                  </div>
+                  <div className="col-md-4">
+                    <input
+                      type="text"
+                      className="form-control"
+                      value={title.URL}
+                      onChange={(e) =>
+                        handleIABChange(index, "URL", e.target.value)
+                      }
+                      placeholder="URL"
+                      style={{ textAlign: "right" }}
+                      required
+                    />
+                    {title.isInvalid && (
+                      <div className="invalid-feedback">
+                        Please enter a valid URL.
+                      </div>
+                    )}
+                  </div>
+
+                  
+                  <div className="col-md-2 d-flex justify-content-start">
+                    <button
+                      className="btn btn-danger"
+                      onClick={() => deleteIAB(index)}
+                      style={{ marginLeft: "5px" }}
+                    >
+                      x
+                    </button>
+                  </div>
+                </div>
+              ))}
+
+              <div className="col-md-4">
+                <button
+                  className="btn btn-primary back"
+                  onClick={addIAB}
+                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
+                >
+                  <span
+                    style={{
+                      fontSize: "20px",
+                      fontWeight: "normal",
+                    }}
+                  >
+                    +
+                  </span>{" "}
+                  Add IAB URL
+                </button>
+              </div>
+
+              <div className="col-md-4">
+                <button
+                  className="btn btn-primary back"
+                  onClick={handleBack}
+                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
+                >
+                  Go Back
+                </button>{" "}
+                <button
+                  type="button"
+                  className="btn btn-primary continue"
+                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
+                  onClick={handleSubmit}
+                >
+                  Submit
+                </button>{" "}
+              </div>
+
+      
+      
+
+
+            </div>
+          )}
+
+          
+
         </div>
+
+
       </div>
     </>
   );

ef-ui/src/components/Dashboard.jsx

@@ -58,7 +58,7 @@ const Dashboard = () => {
   return (
     <>
       <Navbar />
-      <br />      <br />      <br />      <br />      <br />
+      <br />      <br />      <br />          
       <div className="d-flex" style={{ margin: "0", padding: "0" }}>
         {/* Left sidebar */}
         <div className="col-md-3 p-1" style={{ paddingRight: "2px", margin: "0" }}>

ef-ui/src/components/EditProperty.jsx

@@ -14,11 +14,14 @@ const EditProperty = () => {
   const handleContinue = () => {
     if (activeTab === "propertydetails") setActiveTab("Images");
     if (activeTab === "Images") setActiveTab("Accounting");
+    if (activeTab === "Accounting") setActiveTab("IAB");
+    if (activeTab === "IAB") setActiveTab("IAB");
   };
 
   const handleBack = () => {
     if (activeTab === "Images") setActiveTab("propertydetails");
     if (activeTab === "Accounting") setActiveTab("Images");
+    if (activeTab === "IAB") setActiveTab("Accounting");
   };
 
   const { selectedProperty } = useSelector((state) => state.property);
@@ -128,6 +131,7 @@ const EditProperty = () => {
     InsuranceClaim: "0",
     LongTermRental: "0",
     FinancingCostClosingCost: "0",
+    IAB: [{ title: "IAB Title", URL: "Please enter URL" }],
   });
 
   const renovationRiskOptions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Array of options
@@ -207,6 +211,7 @@ const EditProperty = () => {
         images: selectedProperty.images || [{ title: "", file: "" }],
         googleMapLink: selectedProperty.googleMapLink,
         rateofreturn: selectedProperty.rateofreturn,
+        IAB:selectedProperty.IAB,
       });
     }
   }, [selectedProperty]);
@@ -1038,11 +1043,49 @@ const EditProperty = () => {
     return rateofreturn;
   };
 
+
+
+  const addIAB = () => {
+    setFormData((prevData) => ({
+      ...prevData,
+      IAB: [...prevData.IAB, { title: "", URL: "" }],
+    }));
+  };
+
+  const deleteIAB = (index) => {
+    const updatedIAB = formData.IAB.filter(
+      (_, i) => i !== index
+    );
+    setFormData((prevData) => ({
+      ...prevData,
+      IAB: updatedIAB,
+    }));
+  };
+
+  // Function to handle changes to incidentalCost title and price
+  const handleIABTitle = (index, field, value) => {
+    const updatedIAB = [...formData.IAB];
+    updatedIAB[index][field] = value;
+    setFormData((prevData) => ({
+      ...prevData,
+      IAB: updatedIAB,
+    }));
+  };
+
+  const handleIABChange = (index, field, value) => {
+    const updatedIAB = [...formData.IAB];
+    updatedIAB[index][field] = value;
+    setFormData((prevData) => ({
+      ...prevData,
+      IAB: updatedIAB,
+    }));
+  };
+
   return (
     <>
       <Navbar />
-      <br /> <br /> <br /> <br /> <br /> <br />
+      <br /> <br /> <br /> <br /> 
-      <div className="card d-flex justify-content-center align-items-center">
+      <div className="card d-flex justify-content-center align-items-center col-12" style={{ padding: "35px", paddingLeft: "250px" }}>
         <div className="justify-content-center">
           <ul className="nav nav-tabs" role="tablist">
             <li
@@ -1070,6 +1113,16 @@ const EditProperty = () => {
                 Accounting
               </a>
             </li>
+
+            <li
+              role="presentation"
+              className={activeTab === "IAB" ? "active tab" : "tab"}
+            >
+              <a onClick={() => setActiveTab("IAB")} role="tab">
+                IAB
+              </a>
+            </li>
+
           </ul>
 
           <div className="tab-content">
@@ -4087,8 +4140,119 @@ const EditProperty = () => {
                   </div>
                 </div>
 
-                <br />
+
-                <div className="col-md-4">
+
+             
+          <div className="col-md-6">
+                  <button
+                    className="btn btn-primary back"
+                    onClick={handleBack}
+                    style={{ backgroundColor: "#fda417", border: "#fda417" }}
+                  >
+                    Go Back
+                  </button>{" "}
+                  <button
+                    type="button"
+                    className="btn btn-primary continue"
+                    style={{ backgroundColor: "#fda417", border: "#fda417" }}
+                    onClick={handleContinue}
+                  >
+                    Continue
+                  </button>{" "}
+                </div>
+
+
+
+  
+
+              
+
+              </div>
+            )}
+
+
+
+
+            {activeTab === "IAB" && (
+            <div role="tabpanel" className="card tab-pane active">
+
+
+            <span
+                style={{
+                  color: "#fda417",
+                  fontSize: "14px",
+                  fontWeight: "bold",
+                }}
+              >
+                Add IAB Links:
+              </span>
+
+              {formData.IAB.map((title, index) => (
+                <div key={index} className="row gy-3 align-items-center">
+                  <div className="col-md-4">
+                    <input
+                      type="text"
+                      className="form-control"
+                      value={title.title}
+                      onChange={(e) =>
+                        handleIABTitle(index, "title", e.target.value)
+                      }
+                      placeholder="Title"
+                      required
+                    />
+                  </div>
+                  <div className="col-md-4">
+                    <input
+                      type="text"
+                      className="form-control"
+                      value={title.URL}
+                      onChange={(e) =>
+                        handleIABChange(index, "URL", e.target.value)
+                      }
+                      placeholder="URL"
+                      style={{ textAlign: "right" }}
+                      required
+                    />
+                    {title.isInvalid && (
+                      <div className="invalid-feedback">
+                        Please enter a valid URL.
+                      </div>
+                    )}
+                  </div>
+
+                  
+                  <div className="col-md-2 d-flex justify-content-start">
+                    <button
+                      className="btn btn-danger"
+                      onClick={() => deleteIAB(index)}
+                      style={{ marginLeft: "5px" }}
+                    >
+                      x
+                    </button>
+                  </div>
+                </div>
+              ))}
+
+              <div className="col-md-4">
+                <button
+                  className="btn btn-primary back"
+                  onClick={addIAB}
+                  style={{ backgroundColor: "#fda417", border: "#fda417" }}
+                >
+                  <span
+                    style={{
+                      fontSize: "20px",
+                      fontWeight: "normal",
+                    }}
+                  >
+                    +
+                  </span>{" "}
+                  Add IAB URL
+                </button>
+              </div>
+
+              
+          <div className="col-md-6">
                   <button
                     className="btn btn-primary back"
                     onClick={handleBack}
@@ -4105,11 +4269,24 @@ const EditProperty = () => {
                     Submit
                   </button>{" "}
                 </div>
-                <br />
+
-              </div>
+              
-            )}
+      
+      
+
+
+            </div>
+
+            
+          )}
+
+
           </div>
+
+       
         </div>
+
+  
       </div>
     </>
   );

ef-ui/src/components/ProfileView.jsx

@@ -31,8 +31,7 @@ const ProfileView = () => {
       <br />
       <br />
       <br />
-      <br />
+      
-
       <div className="main-body">
         {/* /Breadcrumb */}
         <div className="row gutters-sm">

ef-ui/src/components/admin/Dashboard.jsx

@@ -1,20 +1,26 @@
-import {  useState } from "react";
+import { useState, useEffect } from "react";
 import { NavLink } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
-
+import { useSelector, useDispatch } from "react-redux";
-import UserProperties from "./UserProperties";
+import { getProperties } from "../../redux/features/propertySlice";
+import propertydummy from "../../img/propertydummy.jpg";
 
 const AdminDashboard = () => {
-
   const navigate = useNavigate();
-
+  const dispatch = useDispatch();
-
+  const { properties, totalPages } = useSelector((state) => state.property);
-
+  const [page, setPage] = useState(1);
-
+  const limit = 5; // Number of properties per page
-  // State to track selected tab
+  const keyword = "";
   const [selectedTab, setSelectedTab] = useState("dashboard");
 
+  useEffect(() => {
+    dispatch(getProperties({ page, limit, keyword }));
+  }, [dispatch, page, keyword]);
 
+  const handlePageChange = (newPage) => {
+    setPage(newPage);
+  };
 
   const renderContent = () => {
     switch (selectedTab) {
@@ -25,131 +31,140 @@ const AdminDashboard = () => {
       case "addProperty":
         return <div>Add Property Content</div>;
       case "userProperties":
-        return <div>
+        return (
-        <UserProperties />
+          <div className="container-fluid" style={{ padding: "35px", paddingLeft: "120px" }}>
-        </div>;
+            {properties.length > 0 ? (
+              <>
+                <ul>
+                  {properties.map((property) => (
+                    <li key={property._id}>
+                      <div className="container">
+                        <div className="col-md-12">
+                          <div className="row p-2 bg-white border rounded mt-2">
+                            <div className="col-md-3 mt-1">
+                              <img
+                                src={property.images[0].file || propertydummy}
+                                className="w-70"
+                                alt="Img"
+                                style={{
+                                  marginTop: "0px",
+                                  maxWidth: "200px",
+                                  maxHeight: "200px",
+                                }}
+                              />
+                            </div>
+                            <div className="col-md-6 mt-1">
+                              <h5>
+                                <NavLink
+                                  to={`/property/${property.propertyId}`}
+                                  target="_blank"
+                                >
+                                  {property.address}
+                                  {"....."}
+                                </NavLink>
+                              </h5>
+                              <p className="text-justify text-truncate para mb-0">
+                                There are many variations of passages of
+                              </p>
+                            </div>
+                            <div className="align-items-center align-content-center col-md-3 border-left mt-1">
+                              <div className="d-flex flex-column mt-4">
+                                <NavLink to={`/property/${property.propertyId}`}>
+                                  <button
+                                    className="btn btn-outline-primary btn-sm mt-2"
+                                    type="button"
+                                    style={{
+                                      backgroundColor: "#fda417",
+                                      border: "#fda417",
+                                    }}
+                                  >
+                                    <span
+                                      className="fa fa-eye"
+                                      style={{ color: "#F74B02" }}
+                                    />{" "}
+                                    View Details
+                                  </button>
+                                </NavLink>
+                                <button
+                                  className="btn btn-outline-primary btn-sm mt-2"
+                                  type="button"
+                                  style={{
+                                    backgroundColor: "#fda417",
+                                    border: "#fda417",
+                                  }}
+                                  onClick={() => setSelectedTab("editDetails")}
+                                >
+                                  <span
+                                    className="fa fa-edit"
+                                    style={{ color: "#F74B02" }}
+                                  />{" "}
+                                  Edit Details
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+                <div className="pagination">
+                  <button
+                    onClick={() => handlePageChange(page - 1)}
+                    disabled={page === 1}
+                  >
+                    Previous
+                  </button>
+                  {Array.from({ length: totalPages }, (_, index) => index + 1).map(
+                    (pageNumber) =>
+                      pageNumber === page ||
+                      pageNumber === 1 ||
+                      pageNumber === totalPages ||
+                      (pageNumber >= page - 1 && pageNumber <= page + 1) ? (
+                        <button
+                          key={pageNumber}
+                          onClick={() => handlePageChange(pageNumber)}
+                          disabled={page === pageNumber}
+                        >
+                          {pageNumber}
+                        </button>
+                      ) : pageNumber === 2 || pageNumber === totalPages - 1 ? (
+                        <span key={pageNumber}>...</span>
+                      ) : null
+                  )}
+                  <button
+                    onClick={() => handlePageChange(page + 1)}
+                    disabled={page === totalPages}
+                  >
+                    Next
+                  </button>
+                </div>
+              </>
+            ) : (
+              <p>No active properties found.</p>
+            )}
+          </div>
+        );
       case "adminProperties":
         return <div>Admin Properties Content</div>;
+      case "newPage": // New page with dummy content
+        return (
+          <div style={{ padding: "20px" }}>
+            <h3>New Page</h3>
+            <p>This is some dummy text. You can replace it with your content later.</p>
+          </div>
+        );
+      case "editDetails": // New case for the Edit Details page
+        return (
+          <div style={{ padding: "20px" }}>
+            <h3>Edit Property Details</h3>
+            <p>You can add your edit details here.</p>
+          </div>
+        );
       default:
         return (
           <div>
-
+            <NavLink to={`/AdminPLogin/admininfo`}>Welcome to the Dashboard</NavLink>
-
-<NavLink to={`/AdminPLogin/admininfo`}>
-                      
-Welcome to the Dashboard
-                        
-                          </NavLink>
-
-
-           
-            <div
-              className="container-fluid"
-              style={{ padding: "20px", maxwidth: "150%" }}
-            >
-              {/* Content Row */}
-              <div className="row"  style={{ padding: "30px", maxwidth: "180%" }} >
-                {/* Earnings (Monthly) Card Example */}
-                <div className="col-xl-3 col-md-6 mb-4">
-                  <div className="card border-left-primary shadow h-100 py-2">
-                    <div className="card-body">
-                      <div className="row no-gutters align-items-center">
-                        <div className="col mr-2">
-                          <div className="text-xs font-weight-bold text-primary text-uppercase mb-1">
-                            Total Users
-                          </div>
-                          <div className="h5 mb-0 font-weight-bold text-gray-800">
-                            40,000,000
-                          </div>
-                        </div>
-                        <div className="col-auto">
-                          <i className="fas fa-calendar fa-2x text-gray-300" />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                {/* Earnings (Monthly) Card Example */}
-                <div className="col-xl-3 col-md-6 mb-4">
-                  <div className="card border-left-success shadow h-100 py-2">
-                    <div className="card-body">
-                      <div className="row no-gutters align-items-center">
-                        <div className="col mr-2">
-                          <div className="text-xs font-weight-bold text-success text-uppercase mb-1">
-                            Total payments
-                          </div>
-                          <div className="h5 mb-0 font-weight-bold text-gray-800">
-                            $215,000
-                          </div>
-                        </div>
-                        <div className="col-auto">
-                          <i className="fas fa-dollar-sign fa-2x text-gray-300" />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                {/* Earnings (Monthly) Card Example */}
-                <div className="col-xl-3 col-md-6 mb-4">
-                  <div className="card border-left-info shadow h-100 py-2">
-                    <div className="card-body">
-                      <div className="row no-gutters align-items-center">
-                        <div className="col mr-2">
-                          <div className="text-xs font-weight-bold text-info text-uppercase mb-1">
-                            Total Properties
-                          </div>
-                          <div className="row no-gutters align-items-center">
-                            <div className="col-auto">
-                              <div className="h5 mb-0 mr-3 font-weight-bold text-gray-800">
-                                50,000
-                              </div>
-                            </div>
-                            <div className="col">
-                              <div className="progress progress-sm mr-2">
-                                <div
-                                  className="progress-bar bg-info"
-                                  role="progressbar"
-                                  style={{ width: "50%" }}
-                                  aria-valuenow={50}
-                                  aria-valuemin={0}
-                                  aria-valuemax={100}
-                                />
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="col-auto">
-                          <i className="fas fa-clipboard-list fa-2x text-gray-300" />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                {/* Pending Requests Card Example */}
-                <div className="col-xl-3 col-md-6 mb-4">
-                  <div className="card border-left-warning shadow h-100 py-2">
-                    <div className="card-body">
-                      <div className="row no-gutters align-items-center">
-                        <div className="col mr-2">
-                          <div className="text-xs font-weight-bold text-warning text-uppercase mb-1">
-                            Pending Inquires
-                          </div>
-                          <div className="h5 mb-0 font-weight-bold text-gray-800">
-                            18
-                          </div>
-                        </div>
-                        <div className="col-auto">
-                          <i className="fas fa-comments fa-2x text-gray-300" />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              {/* Content Row */}
-              <div className="row">{/* Area Chart */}</div>
-              {/* Content Row */}
-            </div>
           </div>
         );
     }
@@ -161,174 +176,135 @@ Welcome to the Dashboard
   };
 
   return (
-    <>
+    <div id="wrapper">
-      <div>
+      <ul
-        {/* Page Wrapper */}
+        className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
-        <div id="wrapper">
+        id="accordionSidebar"
-          {/* Sidebar */}
+      >
-          <ul
+        <span
-            className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
+          className="sidebar-brand d-flex align-items-center justify-content-center"
-            id="accordionSidebar"
+        >
-          >
+          <div className="sidebar-brand-icon rotate-n-15">
-            {/* Sidebar - Brand */}
+            <i className="fas fa-laugh-wink" />
-            <span
-              className="sidebar-brand d-flex align-items-center justify-content-center"
-              href="index.html"
-            >
-              <div className="sidebar-brand-icon rotate-n-15">
-                <i className="fas fa-laugh-wink" />
-              </div>
-              <div className="sidebar-brand-text mx-3">
-                Admin <sup>EL</sup>
-              </div>
-            </span>
-            <hr className="sidebar-divider my-0" />
-
-            <li className="nav-item active">
-              <NavLink
-                to="#"
-                onClick={() => setSelectedTab("dashboard")}
-                className="nav-link link-primary text-decoration-none"
-              >
-                <i className="fas fa-fw fa-tachometer-alt" />
-                <span>Dashboard</span>
-              </NavLink>
-            </li>
-
-            <hr className="sidebar-divider" />
-            <div className="sidebar-heading">Interface</div>
-
-            <li className="nav-item">
-              <a
-                className="nav-link collapsed"
-                href="#"
-                data-toggle="collapse"
-                data-target="#collapseTwo"
-                aria-expanded="true"
-                aria-controls="collapseTwo"
-              >
-                <i className="fas fa-fw fa-cog" />
-                <span>Users</span>
-              </a>
-              <div
-                id="collapseTwo"
-                className="collapse"
-                aria-labelledby="headingTwo"
-                data-parent="#accordionSidebar"
-              >
-                <div className="bg-white py-2 collapse-inner rounded">
-                  <h6 className="collapse-header">Registered Users:</h6>
-
-                  <NavLink
-                    to="#"
-                    onClick={() => setSelectedTab("activeUsers")}
-                    className="collapse-item link-primary text-decoration-none"
-                  >
-                    Active Users
-                  </NavLink>
-
-                  <NavLink
-                    to="#"
-                    onClick={() => setSelectedTab("inactiveUsers")}
-                    className="collapse-item link-primary text-decoration-none"
-                  >
-                    Inactive Users
-                  </NavLink>
-                </div>
-              </div>
-            </li>
-
-            <li className="nav-item">
-              <a
-                className="nav-link collapsed"
-                href="#"
-                data-toggle="collapse"
-                data-target="#collapseUtilities"
-                aria-expanded="true"
-                aria-controls="collapseUtilities"
-              >
-                <i className="fas fa-fw fa-wrench" />
-                <span>Properties</span>
-              </a>
-              <div
-                id="collapseUtilities"
-                className="collapse"
-                aria-labelledby="headingUtilities"
-                data-parent="#accordionSidebar"
-              >
-                <div className="bg-white py-2 collapse-inner rounded">
-                  <h6 className="collapse-header">Details:</h6>
-
-                  <NavLink
-                    to="#"
-                    onClick={() => setSelectedTab("addProperty")}
-                    className="collapse-item link-primary text-decoration-none"
-                  >
-                    Add Property
-                  </NavLink>
-                  <NavLink
-                    to="#"
-                    onClick={() => setSelectedTab("userProperties")}
-                    className="collapse-item link-primary text-decoration-none"
-                  >
-                    User Properties
-                  </NavLink>
-                  <NavLink
-                    to="#"
-                    onClick={() => setSelectedTab("adminProperties")}
-                    className="collapse-item link-primary text-decoration-none"
-                  >
-                    Admin Properties
-                  </NavLink>
-                </div>
-              </div>
-            </li>
-            <hr className="sidebar-divider" />
-            <div className="sidebar-heading">Addons</div>
-
-            <li className="nav-item">
-              <NavLink
-                to="#"
-                onClick={() => setSelectedTab("admin")}
-                className="nav-link link-primary text-decoration-none"
-              >
-                <i className="fas fa-fw fa-chart-area" />
-                Admin
-              </NavLink>
-            </li>
-
-            <hr className="sidebar-divider d-none d-md-block" />
-
-            <li className="nav-item">
-              <NavLink
-                to="/"
-                onClick={(e) => {
-                  e.preventDefault(); // Prevent the default link behavior
-                  handleLogout();
-                }}
-                className="nav-link link-primary text-decoration-none"
-              >
-                <i className="fas fa-fw fa-sign-out-alt" />
-                <span>Logout</span>
-              </NavLink>
-            </li>
-          </ul>
-          {/* End of Sidebar */}
-
-          {/* Content Wrapper */}
-          <div
-            id="content-wrapper"
-            className="content col-12"
-            style={{ paddingRight: "40px", maxwidth: "100%" }}
-          >
-            {/* Main Content */}
-            <div className="main-content">{renderContent()}</div>
           </div>
-          {/* End of Content Wrapper */}
+          <div className="sidebar-brand-text mx-3">
+            Admin <sup>EL</sup>
+          </div>
+        </span>
+        <hr className="sidebar-divider my-0" />
+        <li className="nav-item active">
+          <NavLink
+            to="#"
+            onClick={() => setSelectedTab("dashboard")}
+            className="nav-link link-primary text-decoration-none"
+          >
+            <i className="fas fa-fw fa-tachometer-alt" />
+            <span>Dashboard</span>
+          </NavLink>
+        </li>
+        <hr className="sidebar-divider" />
+        <div className="sidebar-heading">Interface</div>
+        <li className="nav-item">
+          <a
+            className="nav-link collapsed"
+            href="#"
+            data-toggle="collapse"
+            data-target="#collapseTwo"
+            aria-expanded="true"
+            aria-controls="collapseTwo"
+          >
+            <i className="fas fa-fw fa-cog" />
+            <span>Users</span>
+          </a>
+          <div
+            id="collapseTwo"
+            className="collapse"
+            aria-labelledby="headingTwo"
+            data-parent="#accordionSidebar"
+          >
+            <div className="bg-white py-2 collapse-inner rounded">
+              <h6 className="collapse-header">Registered Users:</h6>
+              <NavLink
+                to="#"
+                onClick={() => setSelectedTab("activeUsers")}
+                className="collapse-item link-primary text-decoration-none"
+              >
+                Active Users
+              </NavLink>
+              <NavLink
+                to="#"
+                onClick={() => setSelectedTab("inactiveUsers")}
+                className="collapse-item link-primary text-decoration-none"
+              >
+                Inactive Users
+              </NavLink>
+            </div>
+          </div>
+        </li>
+        <li className="nav-item">
+          <a
+            className="nav-link collapsed"
+            href="#"
+            data-toggle="collapse"
+            data-target="#collapseUtilities"
+            aria-expanded="true"
+            aria-controls="collapseUtilities"
+          >
+            <i className="fas fa-fw fa-wrench" />
+            <span>Properties</span>
+          </a>
+          <div
+            id="collapseUtilities"
+            className="collapse"
+            aria-labelledby="headingUtilities"
+            data-parent="#accordionSidebar"
+          >
+            <div className="bg-white py-2 collapse-inner rounded">
+              <h6 className="collapse-header">Details:</h6>
+              <NavLink
+                to="#"
+                onClick={() => setSelectedTab("addProperty")}
+                className="collapse-item link-primary text-decoration-none"
+              >
+                Add Property
+              </NavLink>
+              <NavLink
+                to="#"
+                onClick={() => setSelectedTab("userProperties")}
+                className="collapse-item link-primary text-decoration-none"
+              >
+                User Properties
+              </NavLink>
+              <NavLink
+                to="#"
+                onClick={() => setSelectedTab("adminProperties")}
+                className="collapse-item link-primary text-decoration-none"
+              >
+                Admin Properties
+              </NavLink>
+              <NavLink
+                to="#"
+                onClick={() => setSelectedTab("newPage")}
+                className="collapse-item link-primary text-decoration-none"
+              >
+                New Page
+              </NavLink>
+            </div>
+          </div>
+        </li>
+        <li className="nav-item">
+          <NavLink to="#" onClick={handleLogout} className="nav-link link-primary text-decoration-none">
+            <i className="fas fa-fw fa-sign-out-alt" />
+            <span>Logout</span>
+          </NavLink>
+        </li>
+      </ul>
+      <div id="content-wrapper" className="d-flex flex-column">
+        <div id="content">
+          <div className="container-fluid">{renderContent()}</div>
         </div>
-        {/* End of Page Wrapper */}
       </div>
-    </>
+    </div>
   );
 };
 

ef-ui/src/components/admin/UserProperties.jsx

@@ -109,7 +109,9 @@ const UserProperties = () => {
                             </button>
                           </NavLink>
 
-                          <NavLink to={`/admineditproperty/${property.propertyId}`}>
+                          <NavLink
+                            to={`/admineditproperty/${property.propertyId}`}
+                          >
                             <button
                               className="btn btn-outline-primary btn-sm mt-2"
                               type="button"