done
This commit is contained in:
parent
7235883646
commit
9ab07ddfc0
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-CkItAeVW.js"></script>
|
<script type="module" crossorigin src="/assets/index-E_rWKug7.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-iEl-il0E.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-DUngj0jf.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -37,8 +37,8 @@
|
||||||
|
|
||||||
/* Active tab styling */
|
/* Active tab styling */
|
||||||
.nav-tabs .active {
|
.nav-tabs .active {
|
||||||
background-color: #fda417;
|
background-color: #f5f5f5;
|
||||||
border-color: #fda417
|
border-color: #f5f5f5
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tabs .active a {
|
.nav-tabs .active a {
|
||||||
|
|
|
@ -12,14 +12,13 @@ import { NavLink } from "react-router-dom";
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const [activeTab, setActiveTab] = useState("dashboard");
|
const [activeTab, setActiveTab] = useState("dashboard");
|
||||||
const { user } = useSelector((state) => state.auth);
|
const { user } = useSelector((state) => state.auth);
|
||||||
|
|
||||||
const renderTabContent = () => {
|
const renderTabContent = () => {
|
||||||
switch (activeTab) {
|
switch (activeTab) {
|
||||||
case "Userdetails":
|
case "Userdetails":
|
||||||
return <UserProfile />;
|
return <UserProfile />;
|
||||||
|
|
||||||
case "addProperty":
|
case "addProperty":
|
||||||
return <Addproperty />;
|
return <Addproperty />;
|
||||||
|
|
||||||
case "activeProperties":
|
case "activeProperties":
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -29,7 +28,6 @@ const Dashboard = () => {
|
||||||
);
|
);
|
||||||
case "closedProperties":
|
case "closedProperties":
|
||||||
return <p>These are your closed properties.</p>;
|
return <p>These are your closed properties.</p>;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
|
@ -38,31 +36,24 @@ const Dashboard = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<br />
|
<br /> <br /> <br /> <br /> <br />
|
||||||
<br />
|
<div className="d-flex" style={{ margin: "0", padding: "0" }}>
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<div className="d-flex flex-row">
|
|
||||||
{/* Left sidebar */}
|
{/* Left sidebar */}
|
||||||
<div className="col-md-3">
|
<div className="col-md-3 p-1" style={{ paddingRight: "2px", margin: "0" }}>
|
||||||
<div className="card card1 p-5">
|
<div className="card card1 p-5">
|
||||||
<img
|
<img
|
||||||
className="img-fluid"
|
className="img-fluid"
|
||||||
src={user.result.profileImage || profilepic}
|
src={user.result.profileImage || profilepic}
|
||||||
alt="ProfileImage"
|
alt="ProfileImage"
|
||||||
style={{
|
style={{
|
||||||
marginTop: "0px",
|
maxWidth: "250px",
|
||||||
maxWidth: "200px",
|
maxHeight: "250px",
|
||||||
maxHeight: "200px",
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<hr className="hline" />
|
<hr className="hline" />
|
||||||
<div className="d-flex flex-column align-items-center">
|
<div className="d-flex flex-column align-items-center">
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeTab === "dashboard" ? "active" : ""}`}
|
className={`btn ${activeTab === "dashboard" ? "active" : ""}`}
|
||||||
// style={{ backgroundColor: "#fda417", border: "#fda417" }}
|
|
||||||
onClick={() => setActiveTab("dashboard")}
|
onClick={() => setActiveTab("dashboard")}
|
||||||
>
|
>
|
||||||
<i className="fa fa-dashboard" style={{ color: "#F74B02" }} />
|
<i className="fa fa-dashboard" style={{ color: "#F74B02" }} />
|
||||||
|
@ -106,36 +97,30 @@ const Dashboard = () => {
|
||||||
<span className="fa fa-home" style={{ color: "#F74B02" }} />
|
<span className="fa fa-home" style={{ color: "#F74B02" }} />
|
||||||
<span>Closed Properties</span>
|
<span>Closed Properties</span>
|
||||||
</button>
|
</button>
|
||||||
{/* <span className="other mt-4">Other Information</span>
|
|
||||||
<button className="btn mt-3">
|
|
||||||
<i className="fa fa-book" />
|
|
||||||
<span>Knowledge</span>
|
|
||||||
</button> */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main content area */}
|
{/* Main content area */}
|
||||||
<div className="col-md-9">
|
<div className="col-md-9 p-1" style={{ paddingLeft: "2px", margin: "0" }}>
|
||||||
<div className="card card2 p-1">
|
<div className="card card2 p-2">
|
||||||
{/* Static Dashboard greeting */}
|
|
||||||
<br />
|
|
||||||
<span>
|
<span>
|
||||||
|
<br />
|
||||||
Welcome to{" "}
|
Welcome to{" "}
|
||||||
<span style={{ color: "#067ADC" }}>
|
<span style={{ color: "#067ADC" }}>
|
||||||
<NavLink
|
<NavLink
|
||||||
to={`/profile/${user.result.userId}`}
|
to={`/profile/${user.result.userId}`}
|
||||||
className="link-primary text-decoration-none"
|
className="link-primary text-decoration-none"
|
||||||
target="_blank"
|
|
||||||
>
|
>
|
||||||
{user.result.title}. {user.result.firstName}{" "}
|
{user.result.title}. {user.result.firstName}{" "}
|
||||||
{user.result.middleName} {user.result.lastName}
|
{user.result.middleName} {user.result.lastName}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<br /> <br /> <br /> <br />
|
{activeTab === "dashboard" && (
|
||||||
|
<>
|
||||||
<div className="banner_taital">
|
<br />
|
||||||
|
<div className="banner_taital">
|
||||||
<h1 style={{ color: "#fda417", fontSize: "30px",
|
<h1 style={{ color: "#fda417", fontSize: "30px",
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
fontWeight: "normal" }} className="services_taital">
|
fontWeight: "normal" }} className="services_taital">
|
||||||
|
@ -156,14 +141,11 @@ const Dashboard = () => {
|
||||||
workflows{" "}</h1>
|
workflows{" "}</h1>
|
||||||
|
|
||||||
</h1>
|
</h1>
|
||||||
<br /> <br /> <br /> <br /> <br />
|
<br /> <br /> <br /> <br /> <br /><br />
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
{/* Dynamic content based on the selected tab */}
|
|
||||||
|
|
||||||
{renderTabContent()}
|
{renderTabContent()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,6 +9,7 @@ import { Modal, Button, Form } from "react-bootstrap"; // Importing Modal compon
|
||||||
import { addFundDetails } from "../redux/features/propertySlice";
|
import { addFundDetails } from "../redux/features/propertySlice";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import { deleteFundDetail } from "../redux/features/propertySlice";
|
import { deleteFundDetail } from "../redux/features/propertySlice";
|
||||||
|
import "../propertyview.css";
|
||||||
|
|
||||||
const PropertyView = () => {
|
const PropertyView = () => {
|
||||||
const { id } = useParams(); // Extract the property ID from the route
|
const { id } = useParams(); // Extract the property ID from the route
|
||||||
|
@ -72,8 +73,26 @@ const PropertyView = () => {
|
||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
if (formData.fundValue <= 0 || formData.fundPercentage <= 0) {
|
// if (
|
||||||
return toast.error("Please enter valid funding details");
|
// formData.fundValue <= 0 ||
|
||||||
|
// formData.fundPercentage <= 0 ||
|
||||||
|
// formData.fundPercentage > 100
|
||||||
|
// ) {
|
||||||
|
// return toast.error("Please enter a valid funding amount and percentage (0-100)");
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (formData.fundValue <= 0) {
|
||||||
|
return toast.error("Please enter a valid funding amount greater than 0");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
formData.fundValue > (selectedProperty?.totalCoststoBuyAtoB || 0)
|
||||||
|
) {
|
||||||
|
return toast.error(`Funding amount cannot exceed ${selectedProperty?.totalCoststoBuyAtoB || "N/A"}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formData.fundPercentage <= 0 || formData.fundPercentage > 100) {
|
||||||
|
return toast.error("Please enter a valid interest percentage (0-100)");
|
||||||
}
|
}
|
||||||
|
|
||||||
const fundDetails = {
|
const fundDetails = {
|
||||||
|
@ -90,21 +109,29 @@ const PropertyView = () => {
|
||||||
// dispatch(deleteFundDetail({ id, fundDetailId }));
|
// dispatch(deleteFundDetail({ id, fundDetailId }));
|
||||||
// };
|
// };
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleDelete = (fundDetailId) => {
|
const handleDelete = (fundDetailId) => {
|
||||||
const token = JSON.parse(localStorage.getItem("profile")).token;
|
const token = JSON.parse(localStorage.getItem("profile")).token;
|
||||||
dispatch(deleteFundDetail({ id, fundDetailId, token }));
|
dispatch(deleteFundDetail({ id, fundDetailId, token }));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleDeleteWithConfirmation = (id) => {
|
||||||
|
const confirmed = window.confirm("Are you sure you want to delete this?");
|
||||||
|
if (confirmed) {
|
||||||
|
handleDelete(id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<br /> <br /> <br /> <br />
|
<br /> <br /> <br /> <br /><br />
|
||||||
<br /> <br />
|
|
||||||
<div className="container tabs-wrap col-12">
|
|
||||||
<Navbar />
|
|
||||||
|
|
||||||
<ul className="nav nav-tabs" role="tablist">
|
{/* <div className="container tabs-wrap col-12"> */}
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<ul className="nav nav-tabs" role="tablist" style={{borderRadius: "12px 12px 0 0"}}>
|
||||||
<li
|
<li
|
||||||
role="presentation"
|
role="presentation"
|
||||||
className={activeTab === "propertydetails" ? "active tab" : "tab"}
|
className={activeTab === "propertydetails" ? "active tab" : "tab"}
|
||||||
|
@ -132,7 +159,8 @@ const PropertyView = () => {
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div className="tab-content">
|
{/* <div className="tab-content"> */}
|
||||||
|
<div>
|
||||||
{activeTab === "propertydetails" && (
|
{activeTab === "propertydetails" && (
|
||||||
<div
|
<div
|
||||||
role="tabpanel"
|
role="tabpanel"
|
||||||
|
@ -388,33 +416,37 @@ const PropertyView = () => {
|
||||||
<div>
|
<div>
|
||||||
{activeTab === "Funding Details" && (
|
{activeTab === "Funding Details" && (
|
||||||
<div className="tab-pane active">
|
<div className="tab-pane active">
|
||||||
<div>
|
<div>
|
||||||
{selectedProperty.fundDetails.length === 0 ? (
|
{selectedProperty.fundDetails.length === 0 ? (
|
||||||
<p>No fund details available.</p>
|
<p>No fund details available.</p>
|
||||||
) : (
|
) : (
|
||||||
<ul>
|
<ul style={{ listStyleType: "none", padding: 0 }}>
|
||||||
{selectedProperty.fundDetails.map((detail, index) => (
|
{selectedProperty.fundDetails.map((detail, index) => (
|
||||||
<li key={index}>
|
<li key={index} className="d-flex align-items-center">
|
||||||
Fund Value: {detail.fundValue}, Fund Percentage:{" "}
|
<div className="d-flex align-items-center">
|
||||||
{detail.fundPercentage}%
|
<span>
|
||||||
{user?.result?.userId ? (
|
Total Fund Value: {detail.fundValue}, Interest Percentage: {detail.fundPercentage}%
|
||||||
<div>
|
|
||||||
{user?.result?._id === detail.userId && (
|
</span>
|
||||||
<button
|
<br /> <br />
|
||||||
onClick={() => handleDelete(detail._id)}
|
{user?.result?.userId && user?.result?._id === detail.userId && (
|
||||||
>
|
<button
|
||||||
Delete
|
className="btn btn-danger ms-2"
|
||||||
</button>
|
// onClick={() => handleDelete(detail._id)}
|
||||||
)}
|
onClick={() => handleDeleteWithConfirmation(detail._id)}
|
||||||
</div>
|
style={{ padding: "2px 10px", marginLeft: "8px" }}
|
||||||
) : (
|
>
|
||||||
<div></div>
|
x
|
||||||
)}
|
</button>
|
||||||
</li>
|
)}
|
||||||
))}
|
</div>
|
||||||
</ul>
|
</li>
|
||||||
)}
|
))}
|
||||||
</div>
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -432,7 +464,7 @@ const PropertyView = () => {
|
||||||
<Modal.Body>
|
<Modal.Body>
|
||||||
<Form onSubmit={handleSubmit}>
|
<Form onSubmit={handleSubmit}>
|
||||||
<Form.Group>
|
<Form.Group>
|
||||||
<Form.Label>Fund Value</Form.Label>
|
<Form.Label>Total Fund Value</Form.Label>
|
||||||
<Form.Control
|
<Form.Control
|
||||||
type="number"
|
type="number"
|
||||||
id="fundValue"
|
id="fundValue"
|
||||||
|
@ -441,8 +473,9 @@ const PropertyView = () => {
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
/>
|
/>
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
|
<br />
|
||||||
<Form.Group>
|
<Form.Group>
|
||||||
<Form.Label>Fund Percentage</Form.Label>
|
<Form.Label>Interest Percentage</Form.Label>
|
||||||
<Form.Control
|
<Form.Control
|
||||||
type="number"
|
type="number"
|
||||||
id="fundPercentage"
|
id="fundPercentage"
|
||||||
|
|
|
@ -51,3 +51,4 @@ body{
|
||||||
.shadow-none {
|
.shadow-none {
|
||||||
box-shadow: none!important;
|
box-shadow: none!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
/* Base tab styling */
|
||||||
|
.nav-tabs .tab a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 20px 20px 0 0; /* Rounded top, square bottom */
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active tab styling */
|
||||||
|
.nav-tabs .tab.active a {
|
||||||
|
background-color: #fd8b2c;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom-color: transparent; /* Hide bottom border for active tab */
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue