done

ef-api/models/property.js

@@ -23,6 +23,7 @@ const propertySchema = mongoose.Schema({
   parcel: { type: String, required: true },
   subdivision: { type: String, required: true },
   legal: { type: String, required: true },
+  costpersqft: { type: String, required: true },
   propertyType: { type: String, required: true },
   lotacres: { type: String, required: true },
   yearBuild: { type: String, required: true },

ef-ui/dist/index.html

@@ -45,7 +45,7 @@
 
 
 
-   <script type="module" crossorigin src="/assets/index-Bapz8xqd.js"></script>
+   <script type="module" crossorigin src="/assets/index-Rr-EF2Cj.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DepkKhoc.css">
  </head>
 

ef-ui/src/components/Addproperty.jsx

@@ -31,6 +31,7 @@ const Addproperty = () => {
     parcel: "",
     subdivision: "",
     legal: "",
+    costpersqft: "",
     propertyType: "",
     lotacres: "",
     yearBuild: "",
@@ -120,6 +121,7 @@ const Addproperty = () => {
       formData.parcel &&
       formData.subdivision &&
       formData.legal &&
+      formData.costpersqft &&
       formData.propertyType &&
       formData.lotacres &&
       formData.yearBuild &&
@@ -443,6 +445,21 @@ const Addproperty = () => {
                       />
                     </div>
                   </div>
+
+                  <div className="col-md-4">
+                    <div className="form-floating mb-3">
+                       Cost per SQFT
+                      <input
+                        type="text"
+                        className="form-control"
+                        name="costpersqft"
+                        value={formData.costpersqft}
+                        onChange={handleInputChange}
+                        placeholder="Cost per SQFT"
+                        required
+                      />
+                    </div>
+                  </div>
                 </div>
 
                 <div className="row gy-3">

ef-ui/src/components/PropertyView.jsx

@@ -1,7 +1,10 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { fetchPropertyById } from "../redux/features/propertySlice";
+import propertydummy from "../img/propertydummy.jpg";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
 
 
 
@@ -9,11 +12,13 @@ const PropertyView = () => {
   const { id } = useParams(); // Extract the property ID from the route
   const dispatch = useDispatch();
   const { selectedProperty, status, error } = useSelector((state) => state.property);
+  const [loading, setLoading] = useState(true); // Loader state
 
   useEffect(() => {
     // Fetch the property by ID when the component loads
     if (id) {
       dispatch(fetchPropertyById(id));
+      setLoading(false);
     }
   }, [id, dispatch]);
 
@@ -30,18 +35,137 @@ const PropertyView = () => {
   return (
     <>
 
-      <div className="container property-view">
+<Navbar />
-        {selectedProperty ? (
+      <br /> <br /> <br /> <br />
-          <div className="property-details">
-            <h1>{selectedProperty.title}</h1>
  
-            <p>Email: {selectedProperty.useremail}</p>
+      <div className="container col-12">
-            {/* Add more property details as needed */}
+        {loading ? (
+          <div className="loader">Loading...</div> // Loader
+        ) : selectedProperty ? (
+          <div className="py-3 py-md-5 bg-light">
+            {/* <div className="container"> */}
+            <div className="card-header bg-white">
+              <div className="row">
+                <div className="col-md-5 mt-3">
+                  <div className="bg-white border">
+                    <img
+                      src={propertydummy}
+                      className="w-70"
+                      alt="Img"
+                      style={{
+                        marginTop: "0px",
+                        maxWidth: "450px",
+                        maxHeight: "450px",
+                      }}
+                    />
+                  </div>
+                </div>
+                <div className="col-md-7 mt-3">
+                  <div className="product-view">
+                    <h4
+                      className="product-name"
+                      style={{ color: "#fda417", fontSize: "25px" }}
+                    >
+                      {selectedProperty.address}
+                      <label className="label-stock bg-success">
+                        Verified Property
+                      </label>
+                    </h4>
+                    <hr />
+                    <p className="product-path">
+                      <span style={{ color: "#fda417", fontSize: "15px" }}>
+                        city:{" "}
+                      </span>{" "}
+                      {selectedProperty.city} /
+                      <span style={{ color: "#fda417", fontSize: "15px" }}>
+                        County:{" "}
+                      </span>{" "}
+                      {selectedProperty.county} /
+                      <span style={{ color: "#fda417", fontSize: "15px" }}>
+                        State:{" "}
+                      </span>{" "}
+                      {selectedProperty.state} /
+                      <span style={{ color: "#fda417", fontSize: "15px" }}>
+                        Zipcode:
+                      </span>{" "}
+                      {selectedProperty.zip}
+                    </p>
+                    <div>
+                      <span
+                        className="selling-price"
+                        style={{ color: "#fda417", fontSize: "15px" }}
+                      >
+                        Total Living Square Foot:{" "}
+                      </span>
+                      {selectedProperty.totallivingsqft}
+                      <p></p>
+                      <span
+                        className=""
+                        style={{ color: "#fda417", fontSize: "15px" }}
+                      >
+                        Cost per Square Foot:{" "}
+                      </span>
+                      ${selectedProperty.costpersqft}/sqft
+                      <p></p>
+                      <span
+                        className=""
+                        style={{ color: "#fda417", fontSize: "15px" }}
+                      >
+                        Year Built:{" "}
+                      </span>
+                      {selectedProperty.yearBuild}
+                    </div>
+
+                    <div className="mt-3 card bg-white">
+  <h5 className="mb-0" style={{ color: "#fda417", fontSize: "15px" }}>
+    Legal Description
+  </h5>
+  <span>
+    {selectedProperty.legal
+      ? selectedProperty.legal
+      : "No data available"}
+  </span>
+</div>
+
+                  </div>
+                </div>
+              </div>
+              <div className="row">
+                <div className="col-md-12 mt-3">
+                  <div className="card">
+                    <div className="card-header bg-white">
+                      <h4
+                        className="product-name"
+                        style={{ color: "#fda417", fontSize: "25px" }}
+                      >
+                        Description
+                      </h4>
+                    </div>
+                    <div className="card-body">
+                      <p>
+                        Lorem Ipsum is simply dummy text of the printing and
+                        typesetting industry. Lorem Ipsum has been the
+                        industry's standard dummy text ever since the 1500s,
+                        when an unknown printer took a galley of type and
+                        scrambled it to make a type specimen book. It has
+                        survived not only five centuries, but also the leap into
+                        electronic typesetting, remaining essentially unchanged.
+                        It was popularised in the 1960s with the release of
+                        Letraset sheets containing Lorem Ipsum passages, and
+                        more recently with desktop publishing software like
+                        Aldus PageMaker including versions of Lorem Ipsum.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         ) : (
-          <p>Property not found.</p>
+          <p>No property details found.</p>
         )}
       </div>
+      <Footer />
 
     </>
   );

ef-ui/src/components/UserProperties.jsx

@@ -51,7 +51,7 @@ const UserProperties = () => {
                             to={`/property/${property.propertyId}`}
                             target="_blank"
                           >
-                            {property.title}
+                            {property.address}
                             {"....."}
                           </NavLink>
                         </h5>