{/* Radio buttons for Lender and Borrower */}
diff --git a/ef-ui/src/components/SearchMysql.jsx b/ef-ui/src/components/SearchMysql.jsx
index 8ef8a97..884ad62 100644
--- a/ef-ui/src/components/SearchMysql.jsx
+++ b/ef-ui/src/components/SearchMysql.jsx
@@ -2,43 +2,228 @@ import { useEffect, useState } from "react";
import axios from "axios";
import Navbar from "./Navbar";
import Footer from "./Footer";
+import "../searchmysqlresults.css";
const SearchMysql = () => {
const [properties, setProperties] = useState([]);
+ const [totalRecords, setTotalRecords] = useState(0);
+ const [page, setPage] = useState(0); // Page number
+ const [limit] = useState(10); // Items per page
- // Fetch data from backend API
+ const fetchProperties = async () => {
+ try {
+ const res = await axios.get(
+ `${import.meta.env.VITE_REACT_APP_SECRET}/mysql/searchmysql`,
+ {
+ params: { limit, offset: page * limit },
+ headers: { "Cache-Control": "no-cache" }, // Disable caching
+ }
+ );
+ setProperties(res.data);
+ setTotalRecords(res.data.total); // Get total records from backend
+ } catch (err) {
+ console.log("Error fetching data:", err);
+ }
+ };
+
+ // Fetch data when page changes
useEffect(() => {
- const fetchAllProperties = async () => {
- try {
- const res = await axios.get(`${import.meta.env.VITE_REACT_APP_SECRET}/mysql/searchmysql`);
- setProperties(res.data); // Set the data to the state
- } catch (err) {
- console.log("Error fetching data:", err);
- }
- };
- fetchAllProperties();
- }, []);
+ fetchProperties();
+ }, [page]);
+
+ const totalPages = Math.ceil(totalRecords / limit);
return (
<>
-
-
-
- This is just a sample testing data to showcase the field named "client_name" present in table named : "client_info" available in the database named :"defaultdb".
-
- {/* Check if properties array is populated before mapping */}
- {properties && properties.length > 0 ? (
- properties.map((property, index) => (
-
-
{property.client_name}
{/* Display client_name */}
+
+
+ {/* Display properties */}
+ {properties.length > 0 ? (
+
+
- ))
+
+
+
+
+
+
+
+
+
+
+
+ {/* Pagination Controls */}
+
+
+
+ {" "}
+ Page {page + 1} of {totalPages}{" "}
+
+
+
+
+
+
+
+
+
+
+
+
+ {properties.map((property, index) => (
+
+
+
+
+ 
+ |
+
+
+ {property.address}
+
+
+ {property.city}, {property.county}, {property.state}
+ {" "}
+
+ House Id: {property.house_id}
+
+
+
+ |
+
+
+ Total Living Square foot
+
+ is{" "}
+
+ {property.total_living_sqft}
+
+
+ |
+
+
+ $ {property.cost_per_sqft}/sqft
+
+ |
+
+
+ Year built
+
+
+
+ {property.year_built}
+
+
+ |
+
+
+ {/*
+
+
+ | */}
+
+
+
+
+
+
+ {" "}
+ Page {page + 1} of {totalPages}{" "}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
) : (
No properties found.
)}
-
+ {/* Pagination Controls */}
-
);
};
diff --git a/ef-ui/src/main.jsx b/ef-ui/src/main.jsx
index 7ff3867..be0f182 100644
--- a/ef-ui/src/main.jsx
+++ b/ef-ui/src/main.jsx
@@ -1,7 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from "react-redux";
-import store from "./redux/store";
+import store from './redux/store';
import App from './App.jsx'
import './index.css'
diff --git a/ef-ui/src/redux/features/propertySlice.js b/ef-ui/src/redux/features/propertySlice.js
index c4bf5f8..a9a6d89 100644
--- a/ef-ui/src/redux/features/propertySlice.js
+++ b/ef-ui/src/redux/features/propertySlice.js
@@ -38,6 +38,9 @@ export const fetchPropertyById = createAsyncThunk(
}
);
+
+
+
const propertySlice = createSlice({
name: 'property',
initialState: {
@@ -46,6 +49,10 @@ const propertySlice = createSlice({
error: null,
userProperties: [],
selectedProperty: null,
+
+
+
+
},
reducers: {},
extraReducers: (builder) => {
@@ -84,8 +91,13 @@ const propertySlice = createSlice({
.addCase(fetchPropertyById.rejected, (state, action) => {
state.status = "failed";
state.error = action.payload;
- });
+ })
+
+
+ ;
},
});
+
export default propertySlice.reducer;
+
diff --git a/ef-ui/src/searchmysqlresults.css b/ef-ui/src/searchmysqlresults.css
new file mode 100644
index 0000000..58efab1
--- /dev/null
+++ b/ef-ui/src/searchmysqlresults.css
@@ -0,0 +1,257 @@
+body{
+ background:#dcdcdc;
+ margin-top:20px;}
+
+.widget-26 {
+ color: #3c4142;
+ font-weight: 400;
+}
+
+.widget-26 tr:first-child td {
+ border: 0;
+}
+
+.widget-26 .widget-26-job-emp-img img {
+ width: 35px;
+ height: 35px;
+ border-radius: 50%;
+}
+
+.widget-26 .widget-26-job-title {
+ min-width: 200px;
+}
+
+.widget-26 .widget-26-job-title a {
+ font-weight: 400;
+ font-size: 0.975rem;
+ color: #3c4142;
+ line-height: 1.5;
+}
+
+.widget-26 .widget-26-job-title a:hover {
+ color: #68CBD7;
+ text-decoration: none;
+}
+
+.widget-26 .widget-26-job-title .employer-name {
+ margin: 0;
+ line-height: 1.5;
+ font-weight: 400;
+ color: #3c4142;
+ font-size: 0.9125rem;
+ color: #3c4142;
+}
+
+.widget-26 .widget-26-job-title .employer-name:hover {
+ color: #68CBD7;
+ text-decoration: none;
+}
+
+.widget-26 .widget-26-job-title .time {
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.widget-26 .widget-26-job-info {
+ min-width: 100px;
+ font-weight: 400;
+}
+
+.widget-26 .widget-26-job-info p {
+ line-height: 1.5;
+ color: #3c4142;
+ font-size: 0.9125rem;
+}
+
+.widget-26 .widget-26-job-info .location {
+ color: #3c4142;
+}
+
+.widget-26 .widget-26-job-salary {
+ min-width: 70px;
+ font-weight: 400;
+ color: #3c4142;
+ font-size: 0.9125rem;
+}
+
+.widget-26 .widget-26-job-category {
+ padding: .5rem;
+ display: inline-flex;
+ white-space: nowrap;
+ border-radius: 15px;
+}
+
+.widget-26 .widget-26-job-category .indicator {
+ width: 13px;
+ height: 13px;
+ margin-right: .5rem;
+ float: left;
+ border-radius: 50%;
+}
+
+.widget-26 .widget-26-job-category span {
+ font-size: 0.8125rem;
+ color: #3c4142;
+ font-weight: 600;
+}
+
+.widget-26 .widget-26-job-starred svg {
+ width: 20px;
+ height: 20px;
+ color: #fd8b2c;
+}
+
+.widget-26 .widget-26-job-starred svg.starred {
+ fill: #fd8b2c;
+}
+.bg-soft-base {
+ background-color: #e1f5f7;
+}
+.bg-soft-warning {
+ background-color: #fff4e1;
+}
+.bg-soft-success {
+ background-color: #d1f6f2;
+}
+.bg-soft-danger {
+ background-color: #fedce0;
+}
+.bg-soft-info {
+ background-color: #d7efff;
+}
+
+
+.search-form {
+ width: 80%;
+ margin: 0 auto;
+ margin-top: 1rem;
+}
+
+.search-form input {
+ height: 100%;
+ background: transparent;
+ border: 0;
+ display: block;
+ width: 100%;
+ padding: 1rem;
+ height: 100%;
+ font-size: 1rem;
+}
+
+.search-form select {
+ background: transparent;
+ border: 0;
+ padding: 1rem;
+ height: 100%;
+ font-size: 1rem;
+}
+
+.search-form select:focus {
+ border: 0;
+}
+
+.search-form button {
+ height: 100%;
+ width: 100%;
+ font-size: 1rem;
+}
+
+.search-form button svg {
+ width: 24px;
+ height: 24px;
+}
+
+.search-body {
+ margin-bottom: 1.5rem;
+}
+
+.search-body .search-filters .filter-list {
+ margin-bottom: 1.3rem;
+}
+
+.search-body .search-filters .filter-list .title {
+ color: #3c4142;
+ margin-bottom: 1rem;
+}
+
+.search-body .search-filters .filter-list .filter-text {
+ color: #727686;
+}
+
+.search-body .search-result .result-header {
+ margin-bottom: 2rem;
+}
+
+.search-body .search-result .result-header .records {
+ color: #3c4142;
+}
+
+.search-body .search-result .result-header .result-actions {
+ text-align: right;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.search-body .search-result .result-header .result-actions .result-sorting {
+ display: flex;
+ align-items: center;
+}
+
+.search-body .search-result .result-header .result-actions .result-sorting span {
+ flex-shrink: 0;
+ font-size: 0.9125rem;
+}
+
+.search-body .search-result .result-header .result-actions .result-sorting select {
+ color: #68CBD7;
+}
+
+.search-body .search-result .result-header .result-actions .result-sorting select option {
+ color: #3c4142;
+}
+
+@media (min-width: 768px) and (max-width: 991.98px) {
+ .search-body .search-filters {
+ display: flex;
+ }
+ .search-body .search-filters .filter-list {
+ margin-right: 1rem;
+ }
+}
+
+.card-margin {
+ margin-bottom: 1.875rem;
+}
+
+@media (min-width: 992px){
+.col-lg-2 {
+ flex: 0 0 16.66667%;
+ max-width: 16.66667%;
+}
+}
+
+.card-margin {
+ margin-bottom: 1.875rem;
+}
+.card {
+ border: 0;
+ box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
+ -webkit-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
+ -moz-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
+ -ms-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
+}
+.card {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ word-wrap: break-word;
+ background-color: #ffffff;
+ background-clip: border-box;
+ border: 1px solid #e6e4e9;
+ border-radius: 8px;
+}
+
+
+