done

ef-api/controllers/mysqlproperty.js

@@ -106,7 +106,7 @@ export const PropertiesMysqlView = async (req, res) => {
 
   try {
     const query = `
-      SELECT address, city, county, state, total_living_sqft, year_built, cost_per_sqft
+      SELECT *
       FROM home_information
       WHERE house_id = ?
     `;

ef-ui/dist/index.html

@@ -42,8 +42,11 @@
 <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script> -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
 
-   <script type="module" crossorigin src="/assets/index-DdbR_cuq.js"></script>
-   <link rel="stylesheet" crossorigin href="/assets/index-DlbKQED5.css">
+
+
+
+   <script type="module" crossorigin src="/assets/index-BYlF52oq.js"></script>
+   <link rel="stylesheet" crossorigin href="/assets/index-BNXnzYgn.css">
  </head>
 
 
@@ -57,5 +60,7 @@
           <script src="js/jquery-3.0.0.min.js"></script>
           <script src="js/plugin.js"></script>
 
+          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
+
   </body>
 </html>

ef-ui/index.html

@@ -42,6 +42,9 @@
 <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script> -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
 
+
+
+
  </head>
 
 
@@ -56,5 +59,7 @@
           <script src="js/jquery-3.0.0.min.js"></script>
           <script src="js/plugin.js"></script>
 
+          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
+
   </body>
 </html>

ef-ui/src/components/PropertyMysqlView.jsx

@@ -3,6 +3,8 @@ import { useParams } from "react-router-dom";
 import axios from "axios";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
+import "../propertymysqlview.css";
+import propertydummy from "../img/propertydummy.jpg";
 
 const PropertyMysqlView = () => {
   const { house_id } = useParams(); // Get house_id from the URL
@@ -16,7 +18,8 @@ const PropertyMysqlView = () => {
     const fetchPropertyDetails = async () => {
       try {
         const res = await axios.get(
-          `${import.meta.env.VITE_REACT_APP_SECRET}/mysql/properties/${house_id}`
+          `${import.meta.env.VITE_REACT_APP_SECRET
+          }/mysql/properties/${house_id}`
         );
         setPropertyDetails(res.data); // Set the property details
       } catch (err) {
@@ -32,26 +35,134 @@ const PropertyMysqlView = () => {
   return (
     <>
       <Navbar />
-      <br />      <br />      <br />      <br />      <br />      <br />      <br />      <br />
-      <div className="container">
+      <br /> <br /> <br /> <br />
+      <div className="container col-12">
         {loading ? (
           <div className="loader">Loading...</div> // Loader
         ) : propertyDetails ? (
-          <div className="property-details">
-            <h2>Property Details</h2>
-            <p><strong>Address:</strong> {propertyDetails.address}</p>
-            <p><strong>City:</strong> {propertyDetails.city}</p>
-            <p><strong>County:</strong> {propertyDetails.county}</p>
-            <p><strong>State:</strong> {propertyDetails.state}</p>
-            <p><strong>Total Living Square Foot:</strong> {propertyDetails.total_living_sqft}</p>
-            <p><strong>Year Built:</strong> {propertyDetails.year_built}</p>
-            <p><strong>Cost per Square Foot:</strong> ${propertyDetails.cost_per_sqft}/sqft</p>
+          <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" }}
+                    >
+                      {propertyDetails.address}
+                      <label className="label-stock bg-success">
+                        Verified Property
+                      </label>
+                    </h4>
+                    <hr />
+                    <p className="product-path">
+                      <span style={{ color: "#fda417", fontSize: "15px" }}>
+                        city:{" "}
+                      </span>{" "}
+                      {propertyDetails.city} /
+                      <span style={{ color: "#fda417", fontSize: "15px" }}>
+                        County:{" "}
+                      </span>{" "}
+                      {propertyDetails.county} /
+                      <span style={{ color: "#fda417", fontSize: "15px" }}>
+                        State:{" "}
+                      </span>{" "}
+                      {propertyDetails.state} /
+                      <span style={{ color: "#fda417", fontSize: "15px" }}>
+                        Zipcode:
+                      </span>{" "}
+                      {propertyDetails.zip}
+                    </p>
+                    <div>
+                      <span
+                        className="selling-price"
+                        style={{ color: "#fda417", fontSize: "15px" }}
+                      >
+                        Total Living Square Foot:{" "}
+                      </span>
+                      {propertyDetails.total_living_sqft}
+                      <p></p>
+                      <span
+                        className=""
+                        style={{ color: "#fda417", fontSize: "15px" }}
+                      >
+                        Cost per Square Foot:{" "}
+                      </span>
+                      ${propertyDetails.cost_per_sqft}/sqft
+                      <p></p>
+                      <span
+                        className=""
+                        style={{ color: "#fda417", fontSize: "15px" }}
+                      >
+                        Year Built:{" "}
+                      </span>
+                      {propertyDetails.year_built}
+                    </div>
+
+                    <div className="mt-3 card bg-white">
+  <h5 className="mb-0" style={{ color: "#fda417", fontSize: "15px" }}>
+    Legal Summary report
+  </h5>
+  <span>
+    {propertyDetails.legal_summary_report
+      ? propertyDetails.legal_summary_report
+      : "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>No property details found.</p>
         )}
       </div>
-      <br />      <br />      <br />      <br />
       <Footer />
     </>
   );

ef-ui/src/propertymysqlview.css

@@ -0,0 +1,50 @@
+.product-view .product-name{
+    font-size: 24px;
+    color: #2874f0;
+}
+.product-view .product-name .label-stock{
+    font-size: 13px;
+    padding: 4px 13px;
+    border-radius: 5px;
+    color: #fff;
+    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
+    float: right;
+}
+.product-view .product-path{
+    font-size: 13px;
+    font-weight: 500;
+    color: #252525;
+    margin-bottom: 16px;
+}
+.product-view .selling-price{
+    font-size: 26px;
+    color: #000;
+    font-weight: 600;
+    margin-right: 8px;
+}
+.product-view .original-price{
+    font-size: 18px;
+    color: #937979;
+    font-weight: 400;
+    text-decoration: line-through;
+}
+.product-view .btn1{
+    border: 1px solid;
+    margin-right: 3px;
+    border-radius: 0px;
+    font-size: 14px;
+    margin-top: 10px;
+}
+.product-view .btn1:hover{
+    background-color: #2874f0;
+    color: #fff;
+}
+.product-view .input-quantity{
+    border: 1px solid #000;
+    margin-right: 3px;
+    font-size: 12px;
+    margin-top: 10px;
+    width: 58px;
+    outline: none;
+    text-align: center;
+}