done
This commit is contained in:
omkieit
parent
c5a90f460a
commit
74ab432012
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -54,8 +54,8 @@
|
|||
<!-- Custom styles for this template-->
|
||||
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||
|
||||
<script type="module" crossorigin src="/assets/index-CLeDwyzz.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DUngj0jf.css">
|
||||
<script type="module" crossorigin src="/assets/index-C07R3o0W.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BH_0_em5.css">
|
||||
</head>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import logo from "../logo.png";
|
||||
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { setLogout } from "../redux/features/authSlice";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import "../navbar.css";
|
||||
|
||||
const Navbar = () => {
|
||||
const { user } = useSelector((state) => ({ ...state.auth }));
|
||||
|
|
@ -16,167 +16,145 @@ const Navbar = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="navbar navbar-expand-lg w-100"
|
||||
style={{
|
||||
backgroundColor: "#000000",
|
||||
position: "fixed", // Make the navbar fixed at the top
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 1000, // Ensure the navbar is above other elements
|
||||
}}
|
||||
>
|
||||
<div className="container-fluid d-flex align-items-center justify-content-between">
|
||||
<div className="d-flex align-items-center">
|
||||
<img
|
||||
src={logo}
|
||||
alt="logo"
|
||||
width="75"
|
||||
height="75"
|
||||
className="img-fluid"
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
display: "inline-block",
|
||||
fontStyle: "italic",
|
||||
fontSize: "14px",
|
||||
color: "white",
|
||||
margin: "0 0 0 10px",
|
||||
}}
|
||||
>
|
||||
{/* Only Portal of Certified Realtor Lender and Borrowers */}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="navbar navbar-expand-lg w-100"
|
||||
style={{
|
||||
backgroundColor: "#000000",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<div className="container-fluid d-flex align-items-center justify-content-between">
|
||||
<div className="d-flex align-items-center">
|
||||
<img src={logo} alt="logo" width="75" height="75" className="img-fluid" />
|
||||
<p
|
||||
style={{
|
||||
display: "inline-block",
|
||||
fontStyle: "italic",
|
||||
fontSize: "14px",
|
||||
color: "white",
|
||||
margin: "0 0 0 10px",
|
||||
}}
|
||||
>
|
||||
{/* Only Portal of Certified Realtor Lender and Borrowers */}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item active">
|
||||
<NavLink
|
||||
to="/"
|
||||
className="nav-link"
|
||||
style={{
|
||||
color: "#fda417",
|
||||
border: "#fda417",
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Home
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/services" className="nav-link" style={{
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}>
|
||||
Services
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/searchmyproperties"
|
||||
className="nav-link"
|
||||
style={{
|
||||
color: "#fda417",
|
||||
border: "#fda417",
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Search Database
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/about" className="nav-link" style={{
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}>
|
||||
About
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/searchproperties"
|
||||
className="nav-link"
|
||||
style={{
|
||||
color: "#fda417",
|
||||
border: "#fda417",
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Search properties
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<NavLink to="/contact" className="nav-link" style={{
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}>
|
||||
Contact
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
{/* <div className="btn_main">
|
||||
<div className="started_text active">
|
||||
<NavLink to="/addproperty" className="nav-link">Add Property</NavLink>
|
||||
</div>
|
||||
|
||||
</div> */}
|
||||
</ul>
|
||||
|
||||
{user?.result?._id ? (
|
||||
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<li className="nav-item active">
|
||||
<NavLink
|
||||
to="/dashboard"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Dashboard
|
||||
</NavLink>
|
||||
) : (
|
||||
<NavLink
|
||||
to="/register"
|
||||
to="/"
|
||||
className="nav-link"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
color: "#fda417",
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Register
|
||||
Home
|
||||
</NavLink>
|
||||
)}
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/services" className="nav-link" style={{ fontSize: "20px", fontWeight: "normal" }}>
|
||||
Services
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/searchmyproperties"
|
||||
className="nav-link"
|
||||
style={{
|
||||
color: "#fda417",
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Search Database
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/about" className="nav-link" style={{ fontSize: "20px", fontWeight: "normal" }}>
|
||||
About
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/searchproperties"
|
||||
className="nav-link"
|
||||
style={{
|
||||
color: "#fda417",
|
||||
fontSize: "20px",
|
||||
fontWeight: "normal",
|
||||
}}
|
||||
>
|
||||
Search Properties
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<NavLink to="/contact" className="nav-link" style={{ fontSize: "20px", fontWeight: "normal" }}>
|
||||
Contact
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="navbar-right">
|
||||
{user?.result?._id ? (
|
||||
<NavLink to="/login">
|
||||
<p
|
||||
className="header-text"
|
||||
<>
|
||||
<NavLink
|
||||
to="/dashboard"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
color: "#fda417",
|
||||
marginRight: "20px",
|
||||
}}
|
||||
>
|
||||
Dashboard
|
||||
</NavLink>
|
||||
<span
|
||||
onClick={handleLogout}
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
color: "#fda417",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
className="nav-link logout-link"
|
||||
>
|
||||
Logout
|
||||
</p>
|
||||
</NavLink>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<NavLink
|
||||
to="/login"
|
||||
className="nav-link"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</NavLink>
|
||||
<>
|
||||
<NavLink
|
||||
to="/register"
|
||||
className="nav-link"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
color: "#fda417",
|
||||
marginRight: "20px",
|
||||
}}
|
||||
>
|
||||
Register
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/login"
|
||||
className="nav-link"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
color: "#fda417",
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</NavLink>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
|
||||
const ActiveUsers = () => {
|
||||
return (
|
||||
<div>
|
||||
<h2>Active Users</h2>
|
||||
<p>This is a sample component for Active Users.</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActiveUsers;
|
||||
|
|
@ -1,461 +1,334 @@
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { getProperties } from "../../redux/features/propertySlice";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import UserProperties from "./UserProperties";
|
||||
|
||||
const AdminDashboard = () => {
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const { properties } = useSelector((state) => state.property);
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem("token");
|
||||
navigate("/AdminPLogin");
|
||||
};
|
||||
// Set pagination state
|
||||
const page = 1;
|
||||
const limit = 10; // Number of results per page
|
||||
const keyword = "";
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{/* Page Wrapper */}
|
||||
<div id="wrapper">
|
||||
{/* Sidebar */}
|
||||
<ul className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||
{/* Sidebar - Brand */}
|
||||
<a 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">EL Admin <sup>2</sup></div>
|
||||
</a>
|
||||
{/* Divider */}
|
||||
<hr className="sidebar-divider my-0" />
|
||||
{/* Nav Item - Dashboard */}
|
||||
<li className="nav-item active">
|
||||
<a className="nav-link" href="index.html">
|
||||
<i className="fas fa-fw fa-tachometer-alt" />
|
||||
<span>Dashboard</span></a>
|
||||
</li>
|
||||
{/* Divider */}
|
||||
<hr className="sidebar-divider" />
|
||||
{/* Heading */}
|
||||
<div className="sidebar-heading">
|
||||
Interface
|
||||
</div>
|
||||
{/* Nav Item - Pages Collapse Menu */}
|
||||
<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>
|
||||
<a className="collapse-item" href="buttons.html">Active Users</a>
|
||||
<a className="collapse-item" href="cards.html">Inactive Users</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Nav Item - Utilities Collapse Menu */}
|
||||
<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>
|
||||
<a className="collapse-item" href="utilities-color.html">Add Property</a>
|
||||
<a className="collapse-item" href="utilities-border.html">Admin Properties</a>
|
||||
<a className="collapse-item" href="utilities-animation.html">User Properties</a>
|
||||
<a className="collapse-item" href="utilities-other.html">Other</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Divider */}
|
||||
<hr className="sidebar-divider" />
|
||||
{/* Heading */}
|
||||
<div className="sidebar-heading">
|
||||
Addons
|
||||
</div>
|
||||
|
||||
{/* Nav Item - Charts */}
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="charts.html">
|
||||
<i className="fas fa-fw fa-chart-area" />
|
||||
<span>Admin</span></a>
|
||||
</li>
|
||||
|
||||
{/* Divider */}
|
||||
<hr className="sidebar-divider d-none d-md-block" />
|
||||
{/* Sidebar Toggler (Sidebar) */}
|
||||
// State to track selected tab
|
||||
const [selectedTab, setSelectedTab] = useState("dashboard");
|
||||
|
||||
|
||||
</ul>
|
||||
{/* End of Sidebar */}
|
||||
{/* Content Wrapper */}
|
||||
<div id="content-wrapper" className="d-flex flex-column col-12" style={{paddingLeft:"55px"}}>
|
||||
{/* Main Content */}
|
||||
<div id="content col-12">
|
||||
{/* Topbar */}
|
||||
<nav className="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||
{/* Sidebar Toggle (Topbar) */}
|
||||
<button id="sidebarToggleTop" className="btn btn-link d-md-none rounded-circle mr-3">
|
||||
<i className="fa fa-bars" />
|
||||
</button>
|
||||
{/* Topbar Search */}
|
||||
<form className="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||
<div className="input-group">
|
||||
<input type="text" className="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" />
|
||||
<div className="input-group-append">
|
||||
<button className="btn btn-primary" type="button">
|
||||
<i className="fas fa-search fa-sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/* Topbar Navbar */}
|
||||
<ul className="navbar-nav ml-auto">
|
||||
{/* Nav Item - Search Dropdown (Visible Only XS) */}
|
||||
<li className="nav-item dropdown no-arrow d-sm-none">
|
||||
<a className="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i className="fas fa-search fa-fw" />
|
||||
</a>
|
||||
{/* Dropdown - Messages */}
|
||||
<div className="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
|
||||
<form className="form-inline mr-auto w-100 navbar-search">
|
||||
<div className="input-group">
|
||||
<input type="text" className="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" />
|
||||
<div className="input-group-append">
|
||||
<button className="btn btn-primary" type="button">
|
||||
<i className="fas fa-search fa-sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
{/* Nav Item - Alerts */}
|
||||
<li className="nav-item dropdown no-arrow mx-1">
|
||||
<a className="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i className="fas fa-bell fa-fw" />
|
||||
{/* Counter - Alerts */}
|
||||
<span className="badge badge-danger badge-counter">3+</span>
|
||||
</a>
|
||||
{/* Dropdown - Alerts */}
|
||||
<div className="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
|
||||
<h6 className="dropdown-header">
|
||||
Alerts Center
|
||||
</h6>
|
||||
<a className="dropdown-item d-flex align-items-center" href="#">
|
||||
<div className="mr-3">
|
||||
<div className="icon-circle bg-primary">
|
||||
<i className="fas fa-file-alt text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="small text-gray-500">December 12, 2019</div>
|
||||
<span className="font-weight-bold">A new monthly report is ready to download!</span>
|
||||
</div>
|
||||
</a>
|
||||
<a className="dropdown-item d-flex align-items-center" href="#">
|
||||
<div className="mr-3">
|
||||
<div className="icon-circle bg-success">
|
||||
<i className="fas fa-donate text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="small text-gray-500">December 7, 2019</div>
|
||||
$290.29 has been deposited into your account!
|
||||
</div>
|
||||
</a>
|
||||
<a className="dropdown-item d-flex align-items-center" href="#">
|
||||
<div className="mr-3">
|
||||
<div className="icon-circle bg-warning">
|
||||
<i className="fas fa-exclamation-triangle text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="small text-gray-500">December 2, 2019</div>
|
||||
Spending Alert: We've noticed unusually high spending for your account.
|
||||
</div>
|
||||
</a>
|
||||
<a className="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||
</div>
|
||||
</li>
|
||||
{/* Nav Item - Messages */}
|
||||
<li className="nav-item dropdown no-arrow mx-1">
|
||||
<a className="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i className="fas fa-envelope fa-fw" />
|
||||
{/* Counter - Messages */}
|
||||
<span className="badge badge-danger badge-counter">7</span>
|
||||
</a>
|
||||
{/* Dropdown - Messages */}
|
||||
<div className="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
|
||||
<h6 className="dropdown-header">
|
||||
Message Center
|
||||
</h6>
|
||||
<a className="dropdown-item d-flex align-items-center" href="#">
|
||||
<div className="dropdown-list-image mr-3">
|
||||
<img className="rounded-circle" src="img/undraw_profile_1.svg" alt="..." />
|
||||
<div className="status-indicator bg-success" />
|
||||
</div>
|
||||
<div className="font-weight-bold">
|
||||
<div className="text-truncate">Hi there! I am wondering if you can help me with a
|
||||
problem I've been having.</div>
|
||||
<div className="small text-gray-500">Emily Fowler · 58m</div>
|
||||
</div>
|
||||
</a>
|
||||
<a className="dropdown-item d-flex align-items-center" href="#">
|
||||
<div className="dropdown-list-image mr-3">
|
||||
<img className="rounded-circle" src="img/undraw_profile_2.svg" alt="..." />
|
||||
<div className="status-indicator" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-truncate">I have the photos that you ordered last month, how
|
||||
would you like them sent to you?</div>
|
||||
<div className="small text-gray-500">Jae Chun · 1d</div>
|
||||
</div>
|
||||
</a>
|
||||
<a className="dropdown-item d-flex align-items-center" href="#">
|
||||
<div className="dropdown-list-image mr-3">
|
||||
<img className="rounded-circle" src="img/undraw_profile_3.svg" alt="..." />
|
||||
<div className="status-indicator bg-warning" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-truncate">Last month's report looks great, I am very happy with
|
||||
the progress so far, keep up the good work!</div>
|
||||
<div className="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||
</div>
|
||||
</a>
|
||||
<a className="dropdown-item d-flex align-items-center" href="#">
|
||||
<div className="dropdown-list-image mr-3">
|
||||
<img className="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="..." />
|
||||
<div className="status-indicator bg-success" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-truncate">Am I a good boy? The reason I ask is because someone
|
||||
told me that people say this to all dogs, even if they aren't good...</div>
|
||||
<div className="small text-gray-500">Chicken the Dog · 2w</div>
|
||||
</div>
|
||||
</a>
|
||||
<a className="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||
</div>
|
||||
</li>
|
||||
<div className="topbar-divider d-none d-sm-block" />
|
||||
{/* Nav Item - User Information */}
|
||||
<li className="nav-item dropdown no-arrow">
|
||||
<a className="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
useEffect(() => {
|
||||
dispatch(getProperties({ page, limit, keyword }));
|
||||
}, [dispatch, page, keyword]);
|
||||
|
||||
console.log("properties", properties);
|
||||
|
||||
<NavLink
|
||||
to="/"
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // Prevent the default link behavior
|
||||
handleLogout(); // Call your logout function
|
||||
// Optionally, you can redirect after logout here if needed
|
||||
}}
|
||||
>
|
||||
<span className="mr-2 d-none d-lg-inline text-gray-600 big">Logout</span>
|
||||
</NavLink>
|
||||
{/*
|
||||
<img className="img-profile rounded-circle" src="img/undraw_profile.svg" /> */}
|
||||
</a>
|
||||
{/* Dropdown - User Information */}
|
||||
<div className="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
|
||||
<a className="dropdown-item" href="#">
|
||||
<i className="fas fa-user fa-sm fa-fw mr-2 text-gray-400" />
|
||||
Profile
|
||||
</a>
|
||||
<a className="dropdown-item" href="#">
|
||||
<i className="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400" />
|
||||
Settings
|
||||
</a>
|
||||
<a className="dropdown-item" href="#">
|
||||
<i className="fas fa-list fa-sm fa-fw mr-2 text-gray-400" />
|
||||
Activity Log
|
||||
</a>
|
||||
<div className="dropdown-divider" />
|
||||
<a className="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||
<i className="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400" />
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{/* End of Topbar */}
|
||||
{/* Begin Page Content */}
|
||||
<div className="container-fluid">
|
||||
{/* Page Heading */}
|
||||
<div className="d-sm-flex align-items-center justify-content-between mb-4">
|
||||
<h1 className="h3 mb-0 text-gray-800">Dashboard</h1>
|
||||
|
||||
</div>
|
||||
{/* Content Row */}
|
||||
<div className="row">
|
||||
{/* 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>
|
||||
const renderContent = () => {
|
||||
switch (selectedTab) {
|
||||
case "activeUsers":
|
||||
return <div>Active Users Content</div>;
|
||||
case "inactiveUsers":
|
||||
return <div>Inactive Users Content</div>;
|
||||
case "addProperty":
|
||||
return <div>Add Property Content</div>;
|
||||
case "userProperties":
|
||||
return <div>
|
||||
<UserProperties />
|
||||
</div>;
|
||||
case "adminProperties":
|
||||
return <div>Admin Properties Content</div>;
|
||||
default:
|
||||
return (
|
||||
<div>
|
||||
Welcome to the Dashboard
|
||||
<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-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 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 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>
|
||||
{/* 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>
|
||||
{/* Content Row */}
|
||||
<div className="row">
|
||||
{/* Area Chart */}
|
||||
<div className="col-xl-8 col-lg-7">
|
||||
<div className="card shadow mb-4">
|
||||
{/* Card Header - Dropdown */}
|
||||
<div className="card-header py-3 d-flex flex-row align-items-center justify-content-between">
|
||||
<h6 className="m-0 font-weight-bold text-primary">Welcome to Dashboard</h6>
|
||||
<div className="dropdown no-arrow">
|
||||
<a className="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i className="fas fa-ellipsis-v fa-sm fa-fw text-gray-400" />
|
||||
</a>
|
||||
<div className="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
|
||||
<div className="dropdown-header">Dropdown Header:</div>
|
||||
<a className="dropdown-item" href="#">Action</a>
|
||||
<a className="dropdown-item" href="#">Another action</a>
|
||||
<div className="dropdown-divider" />
|
||||
<a className="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Card Body */}
|
||||
<div className="card-body">
|
||||
<div className="chart-area">
|
||||
<canvas id="myAreaChart" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem("token");
|
||||
navigate("/AdminPLogin");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{/* Page Wrapper */}
|
||||
<div id="wrapper">
|
||||
{/* Sidebar */}
|
||||
<ul
|
||||
className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
|
||||
id="accordionSidebar"
|
||||
>
|
||||
{/* Sidebar - Brand */}
|
||||
<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>
|
||||
</div>
|
||||
{/* Pie Chart */}
|
||||
<div className="col-xl-4 col-lg-5">
|
||||
<div className="card shadow mb-4">
|
||||
|
||||
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
{/* Content Row */}
|
||||
<div className="row">
|
||||
{/* Content Column */}
|
||||
<div className="col-lg-6 mb-4">
|
||||
{/* Project Card Example */}
|
||||
|
||||
|
||||
</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={{ padding: "20px", maxwidth: "500%" }}
|
||||
>
|
||||
{/* Main Content */}
|
||||
<div className="main-content">{renderContent()}</div>
|
||||
</div>
|
||||
{/* End of Content Wrapper */}
|
||||
</div>
|
||||
{/* /.container-fluid */}
|
||||
{/* End of Page Wrapper */}
|
||||
</div>
|
||||
{/* End of Main Content */}
|
||||
{/* Footer */}
|
||||
<footer className="sticky-footer bg-white">
|
||||
<div className="container my-auto">
|
||||
<div className="copyright text-center my-auto">
|
||||
<span>Copyright © Your Website 2021</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{/* End of Footer */}
|
||||
</div>
|
||||
{/* End of Content Wrapper */}
|
||||
</div>
|
||||
{/* End of Page Wrapper */}
|
||||
{/* Scroll to Top Button*/}
|
||||
<a className="scroll-to-top rounded" href="#page-top">
|
||||
<i className="fas fa-angle-up" />
|
||||
</a>
|
||||
{/* Logout Modal*/}
|
||||
<div className="modal fade" id="logoutModal" tabIndex={-1} role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||
<button className="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||
<div className="modal-footer">
|
||||
<button className="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||
<a className="btn btn-primary" href="login.html">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminDashboard;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,181 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { getProperties } from "../../redux/features/propertySlice";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import propertydummy from "../../img/propertydummy.jpg";
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
const UserProperties = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { properties, totalPages } = useSelector((state) => state.property);
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
const limit = 5; // Number of properties per page
|
||||
|
||||
const keyword = "";
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(getProperties({ page, limit, keyword }));
|
||||
}, [dispatch, page, keyword]);
|
||||
|
||||
const handlePageChange = (newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="container-fluid"
|
||||
style={{ padding: "35px", paddingLeft: "120px" }}
|
||||
>
|
||||
{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>
|
||||
<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}`}>
|
||||
<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}`}>
|
||||
<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>
|
||||
|
||||
{/* Pagination Controls */}
|
||||
<div className="pagination">
|
||||
<button
|
||||
onClick={() => handlePageChange(page - 1)}
|
||||
disabled={page === 1}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
|
||||
{/* Show page numbers */}
|
||||
{Array.from({ length: totalPages }, (_, index) => index + 1).map(
|
||||
(pageNumber) =>
|
||||
pageNumber === page || // Current page
|
||||
pageNumber === 1 || // First page
|
||||
pageNumber === totalPages || // Last page
|
||||
(pageNumber >= page - 1 && pageNumber <= page + 1) ? ( // Pages near current page
|
||||
<button
|
||||
key={pageNumber}
|
||||
onClick={() => handlePageChange(pageNumber)}
|
||||
disabled={page === pageNumber}
|
||||
>
|
||||
{pageNumber}
|
||||
</button>
|
||||
) : pageNumber === 2 || pageNumber === totalPages - 1 ? ( // Add "..." between non-adjacent pages
|
||||
<span key={pageNumber}>...</span>
|
||||
) : null
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => handlePageChange(page + 1)}
|
||||
disabled={page === totalPages}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p>No active properties found.</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserProperties;
|
||||
|
|
@ -5,3 +5,13 @@
|
|||
.navbar {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.navbar .navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logout-link {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue