done

ef-ui/dist/index.html

@@ -15,17 +15,14 @@
     <meta name="author" content="">
 
     <link rel="stylesheet" href="/css/bootstrap.min.css">
-<link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/style.css">
-<link rel="stylesheet" href="/css/responsive.css">
+    <link rel="stylesheet" href="/css/responsive.css">
+
 
 
-    <!-- bootstrap css -->
     <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
-    <!-- style css -->
     <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
-    <!-- Responsive-->
     <!-- <link rel="stylesheet" type="text/css" href="css/responsive.css"> -->
-    <!-- fevicon -->
     <!-- <link rel="icon" href="images/fevicon.png" type="image/gif" /> -->
     <link rel="icon" href="images/logo.png" type="image/gif" />
 
@@ -45,8 +42,8 @@
 <!-- <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-DAjohXmt.js"></script>
+   <script type="module" crossorigin src="/assets/index-CxbocabY.js"></script>
-   <link rel="stylesheet" crossorigin href="/assets/index-CyAHZLBw.css">
+   <link rel="stylesheet" crossorigin href="/assets/index-B4N2BY33.css">
  </head>
 
 

ef-ui/index.html

@@ -15,17 +15,14 @@
     <meta name="author" content="">
 
     <link rel="stylesheet" href="/css/bootstrap.min.css">
-<link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/style.css">
-<link rel="stylesheet" href="/css/responsive.css">
+    <link rel="stylesheet" href="/css/responsive.css">
+
 
 
-    <!-- bootstrap css -->
     <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
-    <!-- style css -->
     <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
-    <!-- Responsive-->
     <!-- <link rel="stylesheet" type="text/css" href="css/responsive.css"> -->
-    <!-- fevicon -->
     <!-- <link rel="icon" href="images/fevicon.png" type="image/gif" /> -->
     <link rel="icon" href="images/logo.png" type="image/gif" />
 

ef-ui/src/App.jsx

@@ -9,6 +9,7 @@ import PrivateRoute from "./components/PrivateRoute";
 import VerifyUser from "./components/EmailVerify";
 import ForgotPassword from "./components/ForgotPassword";
 import ResetPassword from "./components/ResetPassword";
+import Addproperty from "./components/Addproperty";
 
 const App = () => {
   return (
@@ -36,6 +37,8 @@ const App = () => {
   element={<ResetPassword />}
 />
 
+<Route path="/addproperty" element={<Addproperty />}></Route>
+
 
 
      </Routes>

ef-ui/src/addproperty.css

@@ -0,0 +1,68 @@
+/* Styling for the tab list container */
+.nav-tabs {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 0;
+    padding-left: 0;
+  }
+  
+  /* Individual tabs with border */
+  .nav-tabs .tab {
+    border-right: 1px solid #ddd;  /* Add border between tabs */
+    padding: 10px;
+    flex-grow: 1;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  /* Remove border for the last tab */
+  .nav-tabs .tab:last-child {
+    border-right: none;
+  }
+  
+  /* Links inside the tabs */
+  .nav-tabs .tab a {
+    text-decoration: none;
+    color: #333;
+    display: block;
+    padding: 10px;
+  }
+  
+  /* Hover effect */
+  .nav-tabs .tab:hover {
+    background-color: #f5f5f5;
+  }
+  
+  /* Active tab styling */
+  .nav-tabs .active {
+    background-color: #fda417;
+    border-color: #fda417
+  }
+  
+  .nav-tabs .active a {
+    color: white;
+  }
+  
+  /* Tab content area */
+  .tab-content {
+    border: 1px solid #ddd;
+    border-top: none; /* Remove double border between tabs and content */
+    padding: 20px;
+    margin-top: -1px;
+  }
+  
+ /* Button styling */
+.btn {
+    margin: 10px 0;
+  }
+
+  .tab-pane {
+    border: 1px solid #ddd; /* Add border around each section */
+    padding: 20px;
+    margin-top: 10px;
+    border-radius: 4px;
+    background-color: #f9f9f9; /* Optional: light background for better contrast */
+  }
+  

ef-ui/src/components/Addproperty.jsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import "../addproperty.css"
+
+const Addproperty = () => {
+  const [activeTab, setActiveTab] = useState('billing');
+
+  const handleContinue = () => {
+    if (activeTab === 'billing') setActiveTab('shipping');
+    else if (activeTab === 'shipping') setActiveTab('review');
+  };
+
+  const handleBack = () => {
+    if (activeTab === 'review') setActiveTab('shipping');
+    else if (activeTab === 'shipping') setActiveTab('billing');
+  };
+
+  return (
+    <div className="container tabs-wrap">
+      <ul className="nav nav-tabs" role="tablist">
+        <li role="presentation" className={activeTab === 'billing' ? 'active tab' : 'tab'}>
+          <a onClick={() => setActiveTab('billing')} role="tab">Property Address</a>
+        </li>
+        <li role="presentation" className={activeTab === 'shipping' ? 'active tab' : 'tab'}>
+          <a onClick={() => setActiveTab('shipping')} role="tab">Request Investment Amount</a>
+        </li>
+        <li role="presentation" className={activeTab === 'review' ? 'active tab' : 'tab'}>
+          <a onClick={() => setActiveTab('review')} role="tab">Review &amp; Document</a>
+        </li>
+      </ul>
+
+      <div className="tab-content">
+        {activeTab === 'billing' && (
+          <div role="tabpanel" className="tab-pane active">
+            <h3>Property Details</h3>
+            <p>Property Address Form</p>
+            <button className="btn btn-primary continue" style={{
+                              backgroundColor: "#fda417",
+                              border: "#fda417",
+                            }} onClick={handleContinue}>Continue</button>
+          </div>
+        )}
+        {activeTab === 'shipping' && (
+          <div role="tabpanel" className="tab-pane active">
+            <h3>Investment Details</h3>
+            <p>Investment Details Form</p>
+            <button className="btn btn-primary back" style={{
+                              backgroundColor: "#fda417",
+                              border: "#fda417",
+                            }}  onClick={handleBack}>Go Back</button>{" "}
+            <button className="btn btn-primary continue" style={{
+                              backgroundColor: "#fda417",
+                              border: "#fda417",
+                            }}  onClick={handleContinue}>Continue</button>
+          </div>
+        )}
+        {activeTab === 'review' && (
+          <div role="tabpanel" className="tab-pane active">
+            <h3>Review &amp; Document</h3>
+            <p>Review &amp; Document Tab</p>
+            <button className="btn btn-primary back" style={{
+                              backgroundColor: "#fda417",
+                              border: "#fda417",
+                            }}  onClick={handleBack}>Go Back</button>{" "}
+            <button className="btn btn-primary continue" style={{
+                              backgroundColor: "#fda417",
+                              border: "#fda417",
+                            }} >Place Order</button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Addproperty;

ef-ui/src/components/Dashboard.jsx

@@ -1,81 +1,159 @@
+import { useState } from "react";
 import Footer from "./Footer";
 import Navbar from "./Navbar";
 import { useSelector } from "react-redux";
-
+import profilepic from "../img/samplepic.jpg";
+import Addproperty from "./Addproperty";
+import "../dashboard.css";
 
 const Dashboard = () => {
+  const { user } = useSelector((state) => ({ ...state.auth }));
+  const [activeTab, setActiveTab] = useState("dashboard");
 
-    const { user } = useSelector((state) => ({ ...state.auth }));
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case "addProperty":
+        return <Addproperty />;
+      case "activeProperties":
+        return <p>Here are your active properties.</p>;
+      case "closedProperties":
+        return <p>These are your closed properties.</p>;
+      default:
+        return (
+          <div className="d-flex justify-content-center mt-7 gap-2 p-3">
+            <div className="col-md-6">
+              <div className="card cardchildchild p-2">
+                <div className="profile1">
+                  <img
+                    src="https://i.imgur.com/NI5b1NX.jpg"
+                    height={90}
+                    width={90}
+                    className="rounded-circle"
+                  />
+                </div>
+                <div className="d-flex flex-column justify-content-center align-items-center mt-5">
+                  <span className="name">Bess Wills</span>
+                  <span className="mt-1 braceletid">Bracelet ID: SFG 38393</span>
+                  <span className="dummytext mt-3 p-3">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Text elit more smtit. Kimto lee.
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="col-md-6">
+              <div className="card cardchildchild p-2">
+                <div className="profile1">
+                  <img
+                    src="https://i.imgur.com/YyoCGsa.jpg"
+                    height={90}
+                    width={90}
+                    className="rounded-circle"
+                  />
+                </div>
+                <div className="d-flex flex-column justify-content-center align-items-center mt-5">
+                  <span className="name">Bess Wills</span>
+                  <span className="mt-1 braceletid">Bracelet ID: SFG 38393</span>
+                  <span className="dummytext mt-3 p-3">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Text elit more smtit. Kimto lee.
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+    }
+  };
 
+  return (
+    <>
+      <Navbar />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <div className="d-flex flex-row">
+        {/* Left sidebar */}
+        <div className="col-md-3">
+          <div className="card card1 p-5">
+            <img
+              className="img-fluid"
+              src={profilepic}
+              alt="ProfileImage"
+              style={{
+                marginTop: "0px",
+                maxWidth: "200px",
+                maxHeight: "200px",
+              }}
+            />
+            <hr className="hline" />
+            <div className="d-flex flex-column align-items-center">
+              <button
+                className={`btn ${activeTab === "dashboard" ? "active" : ""}`}
+                // style={{ backgroundColor: "#fda417", border: "#fda417" }}
+                onClick={() => setActiveTab("dashboard")}
+              >
+                <i className="fa fa-dashboard" style={{ color: "#F74B02" }} />
+                <span>Dashboard</span>
+              </button>
            
-    return (
+              <button
-
+                className={`btn mt-3 ${activeTab === "addProperty" ? "active" : ""}`}
-        <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
+                onClick={() => setActiveTab("addProperty")}
-
+              >
-            <Navbar />
+                <span className="pi pi-home" style={{ color: "#F74B02" }} />
-            <br /> <br /> <br /> <br />
+                <span>Add Property</span>
-
+              </button>
-            <main style={{ flex: 1 }}>
+              <button
-                <section
+                className={`btn mt-3 ${activeTab === "activeProperties" ? "active" : ""}`}
-                    className="py-19 py-md-5 py-xl-8"
+                onClick={() => setActiveTab("activeProperties")}
-                    style={{ backgroundColor: "#FFFFFF" }}
+              >
-                >
+                <span className="pi pi-home" style={{ color: "#F74B02" }} />
-
+                <span>Active Properties</span>
-
+              </button>
-
+              <button
-                    <div className="container-fluid px-0">
+                className={`btn mt-3 ${activeTab === "closedProperties" ? "active" : ""}`}
-
+                onClick={() => setActiveTab("closedProperties")}
-                        <div className="row gy-4 align-items-center justify-content-center ">
+              >
-                            <div className="col-12 col-md-6 col-xl-20 text-center text-md-start">
+                <span className="pi pi-home" style={{ color: "#F74B02" }} />
-                                <div className="text-bg-primary">
+                <span>Closed Properties</span>
-                                    <div className="px-4">
+              </button>
-                                        <hr className="border-primary-subtle mb-4" />
+              {/* <span className="other mt-4">Other Information</span>
-                                        <p className="lead mb-5">
+              <button className="btn mt-3">
-                                            A beautiful, easy-to-use, and secure Investor Portal that
+                <i className="fa fa-book" />
-                                            gives your investors everything they may need
+                <span>Knowledge</span>
-                                        </p>
+              </button> */}
-                                    </div>
+            </div>
-                                </div>
+          </div>
-                            </div>
-
-
-
-                            <div className="col-12 col-md-6 col-xl-5">
-                                <div
-                                    className="card border-0 rounded-4 shadow-lg"
-                                    style={{ width: "100%" }}
-                                >
-                                    <div className="card-body p-3 p-md-4 p-xl-5">
-                                        {user?.result?._id && (
-                                            <div className="form-group row">
-                                                <label htmlFor="firstName" className="col-sm-6 col-form-label">
-                                                    First Name:{" "}
-                                                    <span style={{ color: "#067ADC" }}>{user.result.firstName}</span>
-                                                </label>
-                                                <label htmlFor="middleName" className="col-sm-6 col-form-label">
-                                                    Middle Name:{" "}
-                                                    <span style={{ color: "#067ADC" }}>{user.result.middleName}</span>
-                                                </label>
-                                                <label htmlFor="lastName" className="col-sm-6 col-form-label">
-                                                    Last Name:{" "}
-                                                    <span style={{ color: "#067ADC" }}>{user.result.lastName}</span>
-                                                </label>
-                                                <label htmlFor="email" className="col-sm-6 col-form-label">
-                                                    Email:{" "}
-                                                    <span style={{ color: "#067ADC" }}>{user.result.email}</span>
-                                                </label>
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-            </main>
-            <Footer />
         </div>
-    );
+
+        {/* Main content area */}
+        <div className="col-md-9">
+          <div className="card card2 p-0">
+            {/* Static Dashboard greeting */}
+            <div className="hello d-flex justify-content-end align-items-center mt-3">
+              <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>
+
+            {/* Dynamic content based on the selected tab */}
+            <div className="tab-content p-3">
+              {renderTabContent()}
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
 };
 
 export default Dashboard;

ef-ui/src/components/Navbar.jsx

@@ -5,6 +5,7 @@ import { NavLink } from "react-router-dom";
 import { setLogout } from "../redux/features/authSlice";
 import { useNavigate } from "react-router-dom";
 
+
 const Navbar = () => {
   const { user } = useSelector((state) => ({ ...state.auth }));
   const dispatch = useDispatch();

ef-ui/src/dashboard.css

@@ -1,23 +1,239 @@
-/* Add these styles to your main CSS file */
+.btn.active {
-
+    background-color: #fda417; /* Highlight color for the active tab */
-  
+    color: #fff; /* Text color for the active tab */
-  .dashboard-wrapper {
+    border: 1px solid #fda417;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh; /* Ensure the wrapper takes full height */
   }
   
-  .dashboard-content {
-    flex: 1; /* This will make the content grow to fill the space between Navbar and Footer */
-  }
   
-  footer {
+  
+
+/*   
+
+* {
+    margin: 0;
+    padding: 0
+}
+
+body {
+    background-color: #fff
+}
+
+.card1 {
+    height: 100vh;
     width: 100%;
-    background-color: #333;
+    background-color: #fff;
-    color: white;
+    border: none
-    padding: 10px;
+}
-    text-align: center;
-    position: relative;
-    bottom: 0;
-  }
 
+.card2 {
+    height: 100vh;
+    width: 100%;
+    background-color: #f6f5fa;
+    border: none
+}
+
+.image span {
+    color: #fff;
+    font-size: 28px
+}
+
+.hline {
+    color: #a2a5d8
+}
+
+.btn {
+    height: 40px;
+    width: 100%;
+    border: none;
+    position: relative;
+    border-radius: 5px
+}
+
+.btn i {
+    position: absolute;
+    left: 10px;
+    color: #fff;
+    font-weight: 500;
+    font-size: 18px;
+    top: 10px
+}
+
+.btn span {
+    position: absolute;
+    right: 8px;
+    color: #fff;
+    font-weight: 400;
+    font-size: 16px;
+    top: 10px
+}
+
+.btn:hover {
+    background-color: #3ddcd1
+}
+
+.other {
+    color: #575c93
+}
+
+.hello span {
+    font-size: 25px;
+    font-weight: bold;
+    color: #3c3f61;
+    right: 40px
+}
+
+.shape {
+    background-color: #fff
+}
+
+.cardchild {
+    height: 100px;
+    width: 200px;
+    border: none;
+    position: relative;
+    border-radius: 10px
+}
+
+.type {
+    font-weight: 500
+}
+
+.number {
+    font-size: 25px;
+    color: #4f5366
+}
+
+.cardchild .logo1 {
+    position: absolute;
+    top: 15px;
+    right: 20px
+}
+
+.cardchild .percentage {
+    position: absolute;
+    bottom: 10px;
+    right: 15px;
+    color: #48ddd8;
+    font-weight: 500
+}
+
+.cardchild .logo2 {
+    position: absolute;
+    top: 15px;
+    right: 20px
+}
+
+.cardchild .percentage2 {
+    position: absolute;
+    bottom: 10px;
+    right: 15px;
+    color: #bb7484;
+    font-weight: 500
+}
+
+.cardchild .logo3 {
+    position: absolute;
+    top: 15px;
+    color: #bb7484;
+    right: 20px
+}
+
+.cardchild .percentage3 {
+    position: absolute;
+    bottom: 10px;
+    right: 15px;
+    color: #48ddd8;
+    font-weight: 500
+}
+
+.cardchild .logo4 {
+    position: absolute;
+    top: 15px;
+    right: 20px
+}
+
+.cardchild .percentage4 {
+    position: absolute;
+    bottom: 10px;
+    right: 15px;
+    color: #bb7484;
+    font-weight: 500
+}
+
+.cardchildchild {
+    width: 335px;
+    position: relative;
+    border: none;
+    border-radius: 15px;
+    cursor: pointer
+}
+
+.cardchildchild {
+    b
+}
+
+.cardchildchild .profile1 {
+    position: absolute;
+    border-radius: 50%;
+    top: -45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    right: 120px
+}
+
+.name {
+    font-size: 18px;
+    font-weight: 500
+}
+
+.braceletid {
+    font-size: 13px;
+    color: #bab9ba;
+    font-family: 'Source Sans Pro', sans-serif
+}
+
+
+
+.btn1 {
+    height: 35px;
+    width: 160px;
+    border: none;
+    background-color: #f8c01a;
+    cursor: pointer;
+    color: #fff;
+    font-weight: 500;
+    font-size: 16px;
+    border-radius: 20px
+}
+
+.btn1:hover {
+    background-color: #c72b2b
+}
+
+.icons {
+    font-size: 20px;
+    font-weight: 500
+}
+
+.dummytext {
+    font-size: 14px;
+    font-weight: normal;
+    color: #b0aeb1
+}
+
+.btn2 {
+    height: 35px;
+    width: 160px;
+    border: none;
+    background-color: #c72b2b;
+    cursor: pointer;
+    color: #fff;
+    font-weight: 500;
+    font-size: 16px;
+    border-radius: 20px
+}
+
+.btn2:hover {
+    background-color: #f8c01a
+} */