done
This commit is contained in:
parent
7be342c671
commit
8b3aa8c793
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -45,8 +45,8 @@
|
|||
|
||||
|
||||
|
||||
<script type="module" crossorigin src="/assets/index-BbUOB2Bi.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BtU0nZSp.css">
|
||||
<script type="module" crossorigin src="/assets/index-CcowhcXT.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CAj3mSy-.css">
|
||||
</head>
|
||||
|
||||
|
||||
|
|
|
@ -18,8 +18,6 @@ import Services from "./components/Services";
|
|||
import PropertyMysqlView from "./components/PropertyMysqlView";
|
||||
import EditProperty from "./components/EditProperty";
|
||||
|
||||
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
|
@ -64,17 +62,7 @@ const App = () => {
|
|||
<Route path="/properties/:house_id" element={<PropertyMysqlView />} />
|
||||
<Route path="/searchmyproperties" element={<SearchMysql />} />
|
||||
|
||||
|
||||
<Route
|
||||
path="/editproperty/:id"
|
||||
element={
|
||||
<EditProperty />
|
||||
|
||||
|
||||
}
|
||||
/>
|
||||
|
||||
|
||||
<Route path="/editproperty/:id" element={<EditProperty />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
|
|
@ -156,20 +156,20 @@ const Dashboard = () => {
|
|||
|
||||
{/* Main content area */}
|
||||
<div className="col-md-9">
|
||||
<div className="card card2 p-0">
|
||||
<div className="card card2 p-1">
|
||||
{/* Static Dashboard greeting */}
|
||||
<div className="hello d-flex justify-content-end align-items-center mt-3">
|
||||
<br />
|
||||
<span>
|
||||
Welcome to{" "}
|
||||
<span style={{ color: "#067ADC" }}>
|
||||
{user.result.title}. {user.result.firstName} {user.result.middleName} {user.result.lastName}
|
||||
</span>
|
||||
</span>
|
||||
<br /> <br /> <br />
|
||||
</div>
|
||||
<br />
|
||||
|
||||
|
||||
{/* Dynamic content based on the selected tab */}
|
||||
<div className="tab-content p-3">
|
||||
<div className="tab-content p-2">
|
||||
{renderTabContent()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -36,6 +36,7 @@ const PropertyMysqlView = () => {
|
|||
<>
|
||||
<Navbar />
|
||||
<br /> <br /> <br /> <br />
|
||||
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
|
||||
<div className="container col-12">
|
||||
{loading ? (
|
||||
<div className="loader">Loading...</div> // Loader
|
||||
|
|
|
@ -2,13 +2,12 @@ import { useEffect, useState } from "react";
|
|||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { fetchUserProperties } from "../redux/features/propertySlice";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import propertydummy from "../img/propertydummy.jpg";
|
||||
|
||||
const UserProperties = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { user } = useSelector((state) => ({ ...state.auth }));
|
||||
const { userProperties, totalPages } = useSelector(
|
||||
(state) => state.property
|
||||
);
|
||||
const { userProperties, totalPages } = useSelector((state) => state.property);
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
const limit = 5; // Number of properties per page
|
||||
|
@ -16,7 +15,7 @@ const UserProperties = () => {
|
|||
// Fetch user properties when "Active Properties" tab is selected
|
||||
useEffect(() => {
|
||||
dispatch(fetchUserProperties({ userId: user.result.userId, page, limit }));
|
||||
},[dispatch, user?.result?.userId, page]);
|
||||
}, [dispatch, user?.result?.userId, page]);
|
||||
|
||||
// Pagination handler
|
||||
const handlePageChange = (newPage) => {
|
||||
|
@ -30,6 +29,24 @@ const UserProperties = () => {
|
|||
<ul>
|
||||
{userProperties.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={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"
|
||||
|
@ -37,14 +54,87 @@ const UserProperties = () => {
|
|||
{property.title}
|
||||
{"....."}
|
||||
</NavLink>
|
||||
</h5>
|
||||
<div className="d-flex flex-row"></div>
|
||||
<div className="mt-1 mb-1 spec-1">
|
||||
<span>100% cotton</span>
|
||||
<span className="dot" />
|
||||
<span>Light weight</span>
|
||||
<span className="dot" />
|
||||
<span>
|
||||
Best finish
|
||||
<br />
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 mb-1 spec-1">
|
||||
<span>Unique design</span>
|
||||
<span className="dot" />
|
||||
<span>For men</span>
|
||||
<span className="dot" />
|
||||
<span>
|
||||
Casual
|
||||
<br />
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-justify text-truncate para mb-0">
|
||||
There are many variations of passages of
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
<div className="align-items-center align-content-center col-md-3 border-left mt-1">
|
||||
{/* <div className="d-flex flex-row align-items-center">
|
||||
<h4 className="mr-1">$14.99</h4>
|
||||
<span className="strike-text">$20.99</span>
|
||||
</div>
|
||||
<h6 className="text-success">Free shipping</h6> */}
|
||||
<div className="d-flex flex-column mt-4">
|
||||
<NavLink
|
||||
to={`/property/${property.propertyId}`}
|
||||
target="_blank"
|
||||
>
|
||||
<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>
|
||||
|
||||
<NavLink
|
||||
to={`/editproperty/${property.propertyId}`}
|
||||
target="_blank"
|
||||
>
|
||||
Edit
|
||||
{"....."}
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm mt-2"
|
||||
type="button"
|
||||
style={{
|
||||
backgroundColor: "#fda417",
|
||||
border: "#fda417",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="fa fa-edit"
|
||||
style={{ color: "#F74B02" }}
|
||||
/>{" "}
|
||||
{" "}
|
||||
Edit Details ..
|
||||
</button>
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
@ -64,8 +154,7 @@ const UserProperties = () => {
|
|||
pageNumber === page || // Current page
|
||||
pageNumber === 1 || // First page
|
||||
pageNumber === totalPages || // Last page
|
||||
(pageNumber >= page - 1 && pageNumber <= page + 1) // Pages near current page
|
||||
? (
|
||||
(pageNumber >= page - 1 && pageNumber <= page + 1) ? ( // Pages near current page
|
||||
<button
|
||||
key={pageNumber}
|
||||
onClick={() => handlePageChange(pageNumber)}
|
||||
|
@ -73,10 +162,9 @@ const UserProperties = () => {
|
|||
>
|
||||
{pageNumber}
|
||||
</button>
|
||||
)
|
||||
: pageNumber === 2 || pageNumber === totalPages - 1 // Add "..." between non-adjacent pages
|
||||
? <span key={pageNumber}>...</span>
|
||||
: null
|
||||
) : pageNumber === 2 || pageNumber === totalPages - 1 ? ( // Add "..." between non-adjacent pages
|
||||
<span key={pageNumber}>...</span>
|
||||
) : null
|
||||
)}
|
||||
|
||||
<button
|
||||
|
|
|
@ -1,8 +1,54 @@
|
|||
|
||||
|
||||
.btn.active {
|
||||
background-color: #fda417; /* Highlight color for the active tab */
|
||||
color: #fff; /* Text color for the active tab */
|
||||
background-color: #fda417;
|
||||
/* Highlight color for the active tab */
|
||||
color: #fff;
|
||||
/* Text color for the active tab */
|
||||
border: 1px solid #fda417;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: #eee
|
||||
}
|
||||
|
||||
.ratings i {
|
||||
font-size: 16px;
|
||||
color: red
|
||||
}
|
||||
|
||||
.strike-text {
|
||||
color: red;
|
||||
text-decoration: line-through
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.dot {
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
margin-top: 3px;
|
||||
background-color: #fda417;
|
||||
border-radius: 50%;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.spec-1 {
|
||||
color: #938787;
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.para {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue