This commit is contained in:
omkieit 2024-09-24 22:54:12 +05:30
parent 4e938cd3a4
commit cd02a6405b
9 changed files with 1101 additions and 191 deletions

View File

@ -1,5 +1,19 @@
import mongoose from "mongoose"; import mongoose from "mongoose";
// Schema for property tax information
const propertyTaxInfoSchema = mongoose.Schema({
propertytaxowned: { type: String },
ownedyear: { type: String },
taxassessed: { type: String },
taxyear: { type: String },
});
// Schema for images
const imageSchema = mongoose.Schema({
title: { type: String }, // Title of the image
file: { type: String }, // Uploaded image URL
});
const propertySchema = mongoose.Schema({ const propertySchema = mongoose.Schema({
address: { type: String, required: true }, address: { type: String, required: true },
city: { type: String, required: true }, city: { type: String, required: true },
@ -10,9 +24,28 @@ const propertySchema = mongoose.Schema({
subdivision: { type: String, required: true }, subdivision: { type: String, required: true },
legal: { type: String, required: true }, legal: { type: String, required: true },
propertyType: { type: String, required: true }, propertyType: { type: String, required: true },
title: {type: String, required: true }, lotacres: { type: String, required: true },
yearBuild: { type: String, required: true }, yearBuild: { type: String, required: true },
totallivingsqft: { type: String, required: true },
beds: { type: String, required: true },
baths: { type: String, required: true },
stories: { type: String, required: true },
garage: { type: String, required: true },
garagesqft: { type: String, required: true },
poolspa: { type: String, required: true },
fireplaces: { type: String, required: true },
ac: { type: String, required: true },
heating: { type: String, required: true },
buildingstyle: { type: String, required: true },
sitevacant: { type: String, required: true },
extwall: { type: String, required: true },
roofing: { type: String, required: true },
totalSqft: { type: String, required: true }, totalSqft: { type: String, required: true },
// Remove individual property tax fields and replace with array
propertyTaxInfo: [propertyTaxInfoSchema], // Array of tax info objects
images: [imageSchema],
googleMapLink: { type: String },
userfirstname: String, userfirstname: String,
usermiddlename: String, usermiddlename: String,
userlastname: String, userlastname: String,
@ -33,10 +66,8 @@ const propertySchema = mongoose.Schema({
type: Number, type: Number,
default: new Date().getFullYear(), default: new Date().getFullYear(),
}, },
}); });
const PropertyModal = mongoose.model("property", propertySchema); const PropertyModal = mongoose.model("property", propertySchema);
export default PropertyModal; export default PropertyModal;

85
ef-ui/dist/assets/index-Bapz8xqd.js vendored Normal file

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

View File

@ -45,8 +45,8 @@
<script type="module" crossorigin src="/assets/index-VmwLz7OH.js"></script> <script type="module" crossorigin src="/assets/index-Bapz8xqd.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CAj3mSy-.css"> <link rel="stylesheet" crossorigin href="/assets/index-DepkKhoc.css">
</head> </head>

170
ef-ui/package-lock.json generated
View File

@ -20,6 +20,7 @@
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-file-base64": "^1.0.3",
"react-icons": "^5.3.0", "react-icons": "^5.3.0",
"react-loading-icons": "^1.1.0", "react-loading-icons": "^1.1.0",
"react-redux": "^9.1.2", "react-redux": "^9.1.2",
@ -972,6 +973,12 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
"license": "MIT"
},
"node_modules/asynckit": { "node_modules/asynckit": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@ -1174,6 +1181,23 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/core-js": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
"license": "MIT"
},
"node_modules/create-react-class": {
"version": "15.7.0",
"resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
"integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
}
},
"node_modules/cross-spawn": { "node_modules/cross-spawn": {
"version": "7.0.3", "version": "7.0.3",
"dev": true, "dev": true,
@ -1333,6 +1357,15 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/encoding": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
"license": "MIT",
"dependencies": {
"iconv-lite": "^0.6.2"
}
},
"node_modules/es-abstract": { "node_modules/es-abstract": {
"version": "1.23.3", "version": "1.23.3",
"dev": true, "dev": true,
@ -1750,6 +1783,21 @@
"reusify": "^1.0.4" "reusify": "^1.0.4"
} }
}, },
"node_modules/fbjs": {
"version": "0.8.18",
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
"integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
"license": "MIT",
"dependencies": {
"core-js": "^1.0.0",
"isomorphic-fetch": "^2.1.1",
"loose-envify": "^1.0.0",
"object-assign": "^4.1.0",
"promise": "^7.1.1",
"setimmediate": "^1.0.5",
"ua-parser-js": "^0.7.30"
}
},
"node_modules/file-entry-cache": { "node_modules/file-entry-cache": {
"version": "8.0.0", "version": "8.0.0",
"dev": true, "dev": true,
@ -2056,6 +2104,18 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
"license": "MIT",
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/ignore": { "node_modules/ignore": {
"version": "5.3.2", "version": "5.3.2",
"dev": true, "dev": true,
@ -2346,6 +2406,15 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/is-stream": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
"integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/is-string": { "node_modules/is-string": {
"version": "1.0.7", "version": "1.0.7",
"dev": true, "dev": true,
@ -2435,6 +2504,16 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/isomorphic-fetch": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
"integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
"license": "MIT",
"dependencies": {
"node-fetch": "^1.0.1",
"whatwg-fetch": ">=0.10.0"
}
},
"node_modules/iterator.prototype": { "node_modules/iterator.prototype": {
"version": "1.1.2", "version": "1.1.2",
"dev": true, "dev": true,
@ -2675,6 +2754,16 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/node-fetch": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
"integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
"license": "MIT",
"dependencies": {
"encoding": "^0.1.11",
"is-stream": "^1.0.1"
}
},
"node_modules/node-releases": { "node_modules/node-releases": {
"version": "2.0.18", "version": "2.0.18",
"dev": true, "dev": true,
@ -2899,6 +2988,15 @@
"integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==", "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"license": "MIT",
"dependencies": {
"asap": "~2.0.3"
}
},
"node_modules/prop-types": { "node_modules/prop-types": {
"version": "15.8.1", "version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@ -2974,6 +3072,34 @@
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/react-file-base64": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/react-file-base64/-/react-file-base64-1.0.3.tgz",
"integrity": "sha512-itGMFH6IkJUZF2p0YXQnUBqzUHFaMYcs+ssD9e4j1XJGHRibGe8kiLr6y46oAIw1JknX/bJUUogDJOk/o91TMg==",
"license": "MIT",
"dependencies": {
"react": "^15.6.1"
},
"peerDependencies": {
"react": "^15.0.2"
}
},
"node_modules/react-file-base64/node_modules/react": {
"version": "15.7.0",
"resolved": "https://registry.npmjs.org/react/-/react-15.7.0.tgz",
"integrity": "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==",
"license": "MIT",
"dependencies": {
"create-react-class": "^15.6.0",
"fbjs": "^0.8.9",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.0",
"prop-types": "^15.5.10"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-icons": { "node_modules/react-icons": {
"version": "5.3.0", "version": "5.3.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
@ -3267,6 +3393,12 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"license": "MIT"
},
"node_modules/scheduler": { "node_modules/scheduler": {
"version": "0.23.2", "version": "0.23.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@ -3314,6 +3446,12 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/setimmediate": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
"license": "MIT"
},
"node_modules/shebang-command": { "node_modules/shebang-command": {
"version": "2.0.0", "version": "2.0.0",
"dev": true, "dev": true,
@ -3581,6 +3719,32 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/ua-parser-js": {
"version": "0.7.39",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
"integrity": "sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/ua-parser-js"
},
{
"type": "paypal",
"url": "https://paypal.me/faisalman"
},
{
"type": "github",
"url": "https://github.com/sponsors/faisalman"
}
],
"license": "MIT",
"bin": {
"ua-parser-js": "script/cli.js"
},
"engines": {
"node": "*"
}
},
"node_modules/unbox-primitive": { "node_modules/unbox-primitive": {
"version": "1.0.2", "version": "1.0.2",
"dev": true, "dev": true,
@ -3708,6 +3872,12 @@
"loose-envify": "^1.0.0" "loose-envify": "^1.0.0"
} }
}, },
"node_modules/whatwg-fetch": {
"version": "3.6.20",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
"integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==",
"license": "MIT"
},
"node_modules/which": { "node_modules/which": {
"version": "2.0.2", "version": "2.0.2",
"dev": true, "dev": true,

View File

@ -22,6 +22,7 @@
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-file-base64": "^1.0.3",
"react-icons": "^5.3.0", "react-icons": "^5.3.0",
"react-loading-icons": "^1.1.0", "react-loading-icons": "^1.1.0",
"react-redux": "^9.1.2", "react-redux": "^9.1.2",

View File

@ -63,6 +63,6 @@
padding: 20px; padding: 20px;
margin-top: 10px; margin-top: 10px;
border-radius: 4px; border-radius: 4px;
background-color: #f9f9f9; /* Optional: light background for better contrast */ background-color: #f3eded; /* Optional: light background for better contrast */
} }

View File

@ -4,17 +4,18 @@ import { useState, useEffect } from "react";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import FileBase64 from "react-file-base64";
import "../addproperty.css"; import "../addproperty.css";
const Addproperty = () => { const Addproperty = () => {
const [activeTab, setActiveTab] = useState("propertydetails"); const [activeTab, setActiveTab] = useState("propertydetails");
const handleContinue = () => { const handleContinue = () => {
if (activeTab === "propertydetails") setActiveTab("shipping"); if (activeTab === "propertydetails") setActiveTab("Images");
}; };
const handleBack = () => { const handleBack = () => {
if (activeTab === "shipping") setActiveTab("propertydetails"); if (activeTab === "Images") setActiveTab("propertydetails");
}; };
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -31,20 +32,84 @@ const Addproperty = () => {
subdivision: "", subdivision: "",
legal: "", legal: "",
propertyType: "", propertyType: "",
title: "", lotacres: "",
yearBuild: "", yearBuild: "",
totalSqft: "", // Used in the shipping tab totallivingsqft: "",
beds: "",
baths: "",
stories: "",
garage: "",
garagesqft: "",
poolspa: "",
fireplaces: "",
ac: "",
heating: "",
buildingstyle: "",
sitevacant: "",
extwall: "",
roofing: "",
propertyTaxInfo: [
{ propertytaxowned: "", ownedyear: "", taxassessed: "", taxyear: "" },
],
images: [], // Array to hold image objects
googleMapLink: "", // Field for Google Maps link
totalSqft: "",
}); });
const [submitted, setSubmitted] = useState(false); const [submitted, setSubmitted] = useState(false);
const handleInputChange = (e) => { const handleImageChange = (file, index) => {
const updatedImages = [...formData.images];
updatedImages[index].file = file.base64; // store base64 format of image
setFormData({ ...formData, images: updatedImages });
};
const handleAddImage = () => {
setFormData({ setFormData({
...formData, ...formData,
[e.target.name]: e.target.value, images: [...formData.images, { title: "", file: "" }],
}); });
}; };
const handleDeleteImage = (index) => {
const updatedImages = formData.images.filter((_, i) => i !== index);
setFormData({ ...formData, images: updatedImages });
};
const handleImageTitleChange = (index, e) => {
const updatedImages = [...formData.images];
updatedImages[index].title = e.target.value;
setFormData({ ...formData, images: updatedImages });
};
const handleInputChange = (e, index, fieldName) => {
const { name, value } = e.target;
if (fieldName === "propertyTaxInfo") {
const updatedPropertyTaxInfo = [...formData.propertyTaxInfo];
updatedPropertyTaxInfo[index][name] = value;
setFormData({ ...formData, propertyTaxInfo: updatedPropertyTaxInfo });
} else {
setFormData({ ...formData, [name]: value });
}
};
const addPropertyTaxField = () => {
setFormData({
...formData,
propertyTaxInfo: [
...formData.propertyTaxInfo,
{ propertytaxowned: "", ownedyear: "", taxassessed: "", taxyear: "" },
],
});
};
const deletePropertyTaxField = (index) => {
const updatedPropertyTaxInfo = formData.propertyTaxInfo.filter(
(_, i) => i !== index
);
setFormData({ ...formData, propertyTaxInfo: updatedPropertyTaxInfo });
};
const handleSubmit = () => { const handleSubmit = () => {
if ( if (
formData.address && formData.address &&
@ -56,11 +121,25 @@ const Addproperty = () => {
formData.subdivision && formData.subdivision &&
formData.legal && formData.legal &&
formData.propertyType && formData.propertyType &&
formData.title && formData.lotacres &&
formData.yearBuild && formData.yearBuild &&
formData.totallivingsqft &&
formData.beds &&
formData.baths &&
formData.stories &&
formData.garage &&
formData.garagesqft &&
formData.poolspa &&
formData.fireplaces &&
formData.ac &&
formData.heating &&
formData.buildingstyle &&
formData.sitevacant &&
formData.extwall &&
formData.roofing &&
formData.totalSqft formData.totalSqft
) { ) {
// Add user info to formData // Add user info to formData, including the propertyTaxInfo array
const formDataWithUserInfo = { const formDataWithUserInfo = {
...formData, ...formData,
userfirstname: user?.result?.firstName, userfirstname: user?.result?.firstName,
@ -71,6 +150,16 @@ const Addproperty = () => {
userId: user?.result?.userId, userId: user?.result?.userId,
}; };
// Check if propertyTaxInfo is an array and has values
if (
Array.isArray(formData.propertyTaxInfo) &&
formData.propertyTaxInfo.length > 0
) {
formDataWithUserInfo.propertyTaxInfo = formData.propertyTaxInfo; // Include propertyTaxInfo
} else {
formDataWithUserInfo.propertyTaxInfo = []; // Ensure it's an empty array if not filled
}
// Dispatch the form data with user info // Dispatch the form data with user info
dispatch(submitProperty(formDataWithUserInfo)); dispatch(submitProperty(formDataWithUserInfo));
setSubmitted(true); setSubmitted(true);
@ -116,10 +205,10 @@ const Addproperty = () => {
</li> </li>
<li <li
role="presentation" role="presentation"
className={activeTab === "shipping" ? "active tab" : "tab"} className={activeTab === "Images" ? "active tab" : "tab"}
> >
<a onClick={() => setActiveTab("shipping")} role="tab"> <a onClick={() => setActiveTab("Images")} role="tab">
Delivery Address Images, Maps
</a> </a>
</li> </li>
</ul> </ul>
@ -127,12 +216,22 @@ const Addproperty = () => {
<div className="tab-content"> <div className="tab-content">
{activeTab === "propertydetails" && ( {activeTab === "propertydetails" && (
<div role="tabpanel" className="tab-pane active"> <div role="tabpanel" className="tab-pane active">
<form> <form>
<h3>Property Location</h3> <h3
style={{
color: "#fda417",
border: "#fda417",
fontSize: "20px",
fontWeight: "normal",
}}
>
Property Location
</h3>
<hr />
<div className="row gy-3"> <div className="row gy-3">
<div className="col-md-4"> <div className="col-md-4">
<div className="form-floating mb-3"> <div className="form-floating mb-3">
Property Address
<input <input
type="text" type="text"
className="form-control" className="form-control"
@ -142,11 +241,11 @@ const Addproperty = () => {
onChange={handleInputChange} onChange={handleInputChange}
required required
/> />
<label htmlFor="title">Property Address</label>
</div> </div>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<div className="form-floating mb-3"> <div className="form-floating mb-3">
City
<input <input
type="text" type="text"
className="form-control" className="form-control"
@ -156,10 +255,11 @@ const Addproperty = () => {
placeholder="city" placeholder="city"
required required
/> />
<label htmlFor="title">City</label>
</div> </div>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<div className="form-floating mb-3">
State
<select <select
className="form-floating mb-3 form-control" className="form-floating mb-3 form-control"
name="state" name="state"
@ -168,17 +268,66 @@ const Addproperty = () => {
required required
> >
<option value="">Please Select State</option> <option value="">Please Select State</option>
<option value="Residential">Residential</option> <option value="Alaska">Alaska</option>
<option value="Land">Land</option> <option value="Alabama">Alabama</option>
<option value="Commercial">Commercial</option> <option value="Arkansas">Arkansas</option>
<option value="Industrial">Industrial</option> <option value="Arizona">Arizona</option>
<option value="Water">Water</option> <option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="District Of Columbia">
District Of Columbia
</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Iowa">Iowa</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Maryland">Maryland</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Missouri">Missouri</option>
<option value="Mississippi">Mississippi</option>
<option value="Montana">Montana</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Nebraska">Nebraska</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="Nevada">Nevada</option>
<option value="New York">New York</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Virginia">Virginia</option>
<option value="Vermont">Vermont</option>
<option value="Washington">Washington</option>
<option value="Wisconsin">Wisconsin</option>
<option value="West Virginia">West Virginia</option>
<option value="Wyoming">Wyoming</option>
</select> </select>
</div> </div>
</div> </div>
</div>
<div className="row gy-3"> <div className="row gy-3">
<div className="col-md-4"> <div className="col-md-4">
County
<select <select
className="form-floating mb-3 form-control" className="form-floating mb-3 form-control"
name="county" name="county"
@ -187,15 +336,57 @@ const Addproperty = () => {
required required
> >
<option value="">Please Select County</option> <option value="">Please Select County</option>
<option value="Residential">Residential</option> <option value="Abbeville">Abbeville</option>
<option value="Land">Land</option> <option value="Aiken">Aiken</option>
<option value="Commercial">Commercial</option> <option value="Allendale">Allendale</option>
<option value="Industrial">Industrial</option> <option value="Anderson">Anderson</option>
<option value="Water">Water</option> <option value="Bamberg">Bamberg</option>
<option value="Barnwell">Barnwell</option>
<option value="Beaufort">Beaufort</option>
<option value="Berkeley">Berkeley</option>
<option value="Calhoun">Calhoun</option>
<option value="Charleston">Charleston</option>
<option value="Cherokee">Cherokee</option>
<option value="Chester">Chester</option>
<option value="Chesterfield">Chesterfield</option>
<option value="Clarendon">Clarendon</option>
<option value="Colleton">Colleton</option>
<option value="Darlington">Darlington</option>
<option value="Dillon">Dillon</option>
<option value="Dorchester">Dorchester</option>
<option value="Edgefield">Edgefield</option>
<option value="Fairfield">Fairfield</option>
<option value="Florence">Florence</option>
<option value="Georgetown">Georgetown</option>
<option value="Greenville">Greenville</option>
<option value="Greenwood">Greenwood</option>
<option value="Hampton">Hampton</option>
<option value="Horry">Horry</option>
<option value="Jasper">Jasper</option>
<option value="Kershaw">Kershaw</option>
<option value="Lancaster">Lancaster</option>
<option value="Laurens">Laurens</option>
<option value="Lee">Lee</option>
<option value="Lexington">Lexington</option>
<option value="Marion">Marion</option>
<option value="Marlboro">Marlboro</option>
<option value="McCormick">McCormick</option>
<option value="Newberry">Newberry</option>
<option value="Oconee">Oconee</option>
<option value="Orangeburg">Orangeburg</option>
<option value="Pickens">Pickens</option>
<option value="Richland">Richland</option>
<option value="Saluda">Saluda</option>
<option value="Spartanburg">Spartanburg</option>
<option value="Sumter">Sumter</option>
<option value="Union">Union</option>
<option value="Williamsburg">Williamsburg</option>
<option value="York">York</option>
</select> </select>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<div className="form-floating mb-3"> <div className="form-floating mb-3">
Zip
<input <input
type="text" type="text"
className="form-control" className="form-control"
@ -205,11 +396,11 @@ const Addproperty = () => {
placeholder="zip" placeholder="zip"
required required
/> />
<label htmlFor="zip">Zip</label>
</div> </div>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<div className="form-floating mb-3"> <div className="form-floating mb-3">
Parcel
<input <input
type="text" type="text"
className="form-control" className="form-control"
@ -219,16 +410,14 @@ const Addproperty = () => {
placeholder="parcel" placeholder="parcel"
required required
/> />
<label htmlFor="parcel">Parcel</label>
</div> </div>
</div> </div>
</div> </div>
<div className="row gy-3"> <div className="row gy-3">
<div className="col-md-4"> <div className="col-md-4">
<div className="form-floating mb-3"> <div className="form-floating mb-3">
Sub division
<input <input
type="text" type="text"
className="form-control" className="form-control"
@ -238,11 +427,11 @@ const Addproperty = () => {
placeholder="subdivision" placeholder="subdivision"
required required
/> />
<label htmlFor="subdivision">Sub division</label>
</div> </div>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<div className="form-floating mb-3"> <div className="form-floating mb-3">
Legal Description
<textarea <textarea
type="text" type="text"
className="form-control" className="form-control"
@ -252,14 +441,13 @@ const Addproperty = () => {
placeholder="legal" placeholder="legal"
required required
/> />
<label htmlFor="legal">Legal Description</label>
</div> </div>
</div> </div>
</div> </div>
<div className="row gy-3"> <div className="row gy-3">
<div className="col-md-4"> <div className="col-md-4">
Please Select Property Type
<select <select
className="form-floating mb-3 form-control" className="form-floating mb-3 form-control"
name="propertyType" name="propertyType"
@ -277,20 +465,21 @@ const Addproperty = () => {
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<div className="form-floating mb-3"> <div className="form-floating mb-3">
Lot Acres/Sqft
<input <input
type="text" type="text"
className="form-control" className="form-control"
name="title" name="lotacres"
value={formData.title} value={formData.lotacres}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="Property Title" placeholder="Lot Acres/Sqft"
required required
/> />
<label htmlFor="title">Property Title</label>
</div> </div>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<div className="form-floating mb-3"> <div className="form-floating mb-3">
Year Build
<input <input
type="text" type="text"
className="form-control" className="form-control"
@ -300,30 +489,325 @@ const Addproperty = () => {
placeholder="Year Build" placeholder="Year Build"
required required
/> />
<label htmlFor="yearBuild">Year Build</label>
</div> </div>
</div> </div>
</div> </div>
</form>
<button
className="btn btn-primary continue"
onClick={handleContinue}
style={{ backgroundColor: "#fda417", border: "#fda417" }}
>
Continue
</button>
</div>
)}
{activeTab === "shipping" && (
<div role="tabpanel" className="tab-pane active">
<h3>Shipping Address</h3>
<form>
<div className="row gy-3"> <div className="row gy-3">
<div className="col-md-4"> <div className="col-md-4">
<div className="form-floating mb-3"> <div className="form-floating mb-3">
Total Living SQFT
<input
type="text"
className="form-control"
name="totallivingsqft"
value={formData.totallivingsqft}
onChange={handleInputChange}
placeholder="Total Living SQFT"
required
/>
</div>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Beds
<input
type="text"
className="form-control"
name="beds"
value={formData.beds}
onChange={handleInputChange}
placeholder="Beds"
required
/>
</div>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Baths
<input
type="text"
className="form-control"
name="baths"
value={formData.baths}
onChange={handleInputChange}
placeholder="Baths"
required
/>
</div>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
Please Select Stories
<select
className="form-floating mb-3 form-control"
name="stories"
value={formData.stories}
onChange={handleInputChange}
required
>
<option value="">Please Select Stories</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div className="col-md-4">
Please Select Garage
<select
className="form-floating mb-3 form-control"
name="garage"
value={formData.garage}
onChange={handleInputChange}
required
>
<option value="">Please Select Garage</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Garage SQFT
<input
type="text"
className="form-control"
name="garagesqft"
value={formData.garagesqft}
onChange={handleInputChange}
placeholder="Garage SQFT"
required
/>
</div>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
Please Select Pool/SPA
<select
className="form-floating mb-3 form-control"
name="poolspa"
value={formData.poolspa}
onChange={handleInputChange}
required
>
<option value="">Please Select Pool/SPA</option>
<option value="N/A">N/A</option>
<option value="Yes- Pool Only">Yes- Pool Only</option>
<option value="Yes- SPA only">Yes- SPA only</option>
<option value="Yes - Both Pool and SPA">
Yes - Both Pool and SPA
</option>
<option value="4">None</option>
</select>
</div>
<div className="col-md-4">
Please Select Fire places
<select
className="form-floating mb-3 form-control"
name="fireplaces"
value={formData.fireplaces}
onChange={handleInputChange}
required
>
<option value="">Please Select Fire places</option>
<option value="N/A">N/A</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div className="col-md-4">
Please Select A/C
<select
className="form-floating mb-3 form-control"
name="ac"
value={formData.ac}
onChange={handleInputChange}
required
>
<option value="">Please Select A/C</option>
<option value="N/A">N/A</option>
<option value="Central">Central</option>
<option value="Heat Pump">Heat Pump</option>
<option value="Warm Air">Warm Air</option>
<option value="Forced Air">Forced Air</option>
<option value="Gas">Gas</option>
</select>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
Please Select Heating
<select
className="form-floating mb-3 form-control"
name="heating"
value={formData.heating}
onChange={handleInputChange}
required
>
<option value="">Please Select Heating</option>
<option value="N/A">N/A</option>
<option value="Central">Central</option>
<option value="Heat Pump">Heat Pump</option>
<option value="Warm Air">Warm Air</option>
<option value="Forced Air">Forced Air</option>
<option value="Gas">Gas</option>
</select>
</div>
<div className="col-md-4">
Please Select Building Style
<select
className="form-floating mb-3 form-control"
name="buildingstyle"
value={formData.buildingstyle}
onChange={handleInputChange}
required
>
<option value="">Please Select Building Style</option>
<option value="One Story">One Story</option>
<option value="Craftsman">Craftsman</option>
<option value="Log/Cabin">Log/Cabin</option>
<option value="Split-Level">Split-Level</option>
<option value="Split-Foyer">Split-Foyer</option>
<option value="Stick Built">Stick Built</option>
<option value="Single wide">Single wide</option>
<option value="Double wide">Double wide</option>
<option value="Duplex">Duplex</option>
<option value="Triplex">Triplex</option>
<option value="Quadruplex">Quadruplex</option>
<option value="Two Story">Two Story</option>
<option value="Victorian">Victorian</option>
<option value="Tudor">Tudor</option>
<option value="Modern">Modern</option>
<option value="Art Deco">Art Deco</option>
<option value="Bungalow">Bungalow</option>
<option value="Mansion">Mansion</option>
<option value="Farmhouse">Farmhouse</option>
<option value="Conventional">Conventional</option>
<option value="Ranch">Ranch</option>
<option value="Ranch with Basement">
Ranch with Basement
</option>
<option value="Cape Cod">Cape Cod</option>
<option value="Contemporary">Contemporary</option>
<option value="Colonial">Colonial</option>
<option value="Mediterranean">Mediterranean</option>
</select>
</div>
<div className="col-md-4">
Site Vacant
<select
className="form-floating mb-3 form-control"
name="sitevacant"
value={formData.sitevacant}
onChange={handleInputChange}
required
>
<option value="">Site Vacant</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
Please Select Ext Wall
<select
className="form-floating mb-3 form-control"
name="extwall"
value={formData.extwall}
onChange={handleInputChange}
required
>
<option value="">Please Select Ext Wall</option>
<option value="N/A">N/A</option>
<option value="Brick">Brick</option>
<option value="Brick/Vinyl Siding">
Brick/Vinyl Siding
</option>
<option value="Wood/Vinyl Siding">
Wood/Vinyl Siding
</option>
<option value="Brick/Wood Siding">
Brick/Wood Siding
</option>
<option value="Stone">Stone</option>
<option value="Masonry">Masonry</option>
<option value="Metal">Metal</option>
<option value="Fiberboard">Fiberboard</option>
<option value="Asphalt Siding">Asphalt Siding</option>
<option value="Concrete Block">Concrete Block</option>
<option value="Gable">Gable</option>
<option value="Brick Veneer">Brick Veneer</option>
<option value="Frame">Frame</option>
<option value="Siding">Siding</option>
<option value="Cement/Wood Fiber Siding">
Cement/Wood Fiber Siding
</option>
<option value="Fiber/Cement Siding">
Fiber/Cement Siding
</option>
<option value="Wood Siding">Wood Siding</option>
<option value="Vinyl Siding">Vinyl Siding</option>
<option value="Aluminium Siding">Aluminium Siding</option>
<option value="Wood/Vinyl Siding">
Alum/Vinyl Siding
</option>
</select>
</div>
<div className="col-md-4">
Please Select Roofing
<select
className="form-floating mb-3 form-control"
name="roofing"
value={formData.roofing}
onChange={handleInputChange}
required
>
<option value="">Please Select Roofing</option>
<option value="N/A">N/A</option>
<option value="Asphalt Shingle">Asphalt Shingle</option>
<option value="Green Roofs">Green Roofs</option>
<option value="Built-up Roofing">Built-up Roofing</option>
<option value="Composition Shingle">
Composition Shingle
</option>
<option value="Composition Shingle Heavy">
Composition Shingle Heavy
</option>
<option value="Solar tiles">Solar tiles</option>
<option value="Metal">Metal</option>
<option value="Stone-coated steel">
Stone-coated steel
</option>
<option value="Slate">Slate</option>
<option value="Rubber Slate">Rubber Slate</option>
<option value="Clay and Concrete tiles">
Clay and Concrete tiles
</option>
</select>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Total SQFT
<input <input
type="text" type="text"
className="form-control" className="form-control"
@ -333,10 +817,229 @@ const Addproperty = () => {
placeholder="Total SQFT" placeholder="Total SQFT"
required required
/> />
<label htmlFor="totalSqft">Total SQFT</label>
</div> </div>
</div> </div>
</div> </div>
<h3
style={{
color: "#fda417",
border: "#fda417",
fontSize: "20px",
fontWeight: "normal",
}}
>
<br />
Property Tax Information
</h3>
<hr />
{formData.propertyTaxInfo.map((taxInfo, index) => (
<div className="row gy-4" key={index}>
<div className="col-md-3">
<div className="form-floating mb-3">
Property Tax Owned
<input
type="text"
className="form-control"
name="propertytaxowned"
placeholder="Property Tax Owned"
value={taxInfo.propertytaxowned}
onChange={(e) =>
handleInputChange(e, index, "propertyTaxInfo")
}
required
/>
</div>
</div>
<div className="col-md-2">
<div className="form-floating mb-2">
Owed Year
<input
type="text"
className="form-control"
name="ownedyear"
placeholder="Owed Year"
value={taxInfo.ownedyear}
onChange={(e) =>
handleInputChange(e, index, "propertyTaxInfo")
}
required
/>
</div>
</div>
<div className="col-md-2">
<div className="form-floating mb-2">
Tax Assessed
<input
type="text"
className="form-control"
name="taxassessed"
placeholder="Tax Assessed"
value={taxInfo.taxassessed}
onChange={(e) =>
handleInputChange(e, index, "propertyTaxInfo")
}
required
/>
</div>
</div>
<div className="col-md-2">
<div className="form-floating mb-2">
Tax Year
<input
type="text"
className="form-control"
name="taxyear"
placeholder="Tax Year"
value={taxInfo.taxyear}
onChange={(e) =>
handleInputChange(e, index, "propertyTaxInfo")
}
required
/>
</div>
</div>
<div className="col-md-3">
<div className="form-floating mb-2">
<br />
<button
className="btn btn-danger"
onClick={() => deletePropertyTaxField(index)}
style={{ height: "25px", width: "35px" }}
>
X
</button>
</div>
</div>
{/* Adjusting the delete button column */}
{/* <div className="col-md-1 d-flex align-items-center">
<button
className="btn btn-danger"
onClick={() => deletePropertyTaxField(index)}
style={{ height: "40px", width: "40px" }}
>
X
</button>
</div> */}
</div>
))}
<button
className="btn btn-secondary"
onClick={addPropertyTaxField}
>
+ Add Another Property Tax Info
</button>
</form>
<button
className="btn btn-primary continue"
onClick={handleContinue}
style={{ backgroundColor: "#fda417", border: "#fda417" }}
>
Continue
</button>
</div>
)}
{activeTab === "Images" && (
<div role="tabpanel" className="tab-pane active">
<h3
style={{
color: "#fda417",
border: "#fda417",
fontSize: "20px",
fontWeight: "normal",
}}
>
Upload Images{" "}
</h3>
<form>
{formData.images.map((image, index) => (
<div key={index} className="row gy-3">
<div className="col-md-4">
<input
type="text"
className="form-control"
value={image.title}
placeholder="Image Title"
onChange={(e) => handleImageTitleChange(index, e)}
/>
</div>
<div className="col-md-4">
<FileBase64
multiple={false}
onDone={(file) => handleImageChange(file, index)}
/>
</div>
<div className="col-md-4">
<button
type="button"
className="btn btn-danger"
onClick={() => handleDeleteImage(index)}
>
Delete
</button>
</div>
{image.file && (
<div className="col-md-12">
<img
src={image.file}
alt="uploaded"
style={{ width: "150px", height: "150px" }}
/>
</div>
)}
</div>
))}
<button
type="button"
className="btn btn-primary"
onClick={handleAddImage}
style={{ backgroundColor: "#fda417", border: "#fda417" }}
>
+ Add Image
</button>
<hr />
<div className="mb-3">
<label htmlFor="googleMapLink" className="form-label">
<h3
style={{
color: "#fda417",
border: "#fda417",
fontSize: "20px",
fontWeight: "normal",
}}
>
Google Maps Link{" "}
</h3>
</label>
<input
type="text"
className="form-control"
name="googleMapLink"
value={formData.googleMapLink}
onChange={handleInputChange}
placeholder="Enter Google Maps link"
/>
</div>
{formData.googleMapLink && (
<iframe
title="Google Map"
width="100%"
height="300"
src={`https://www.google.com/maps/embed/v1/view?key=YOUR_API_KEY&center=${formData.googleMapLink}&zoom=10`}
frameBorder="0"
allowFullScreen
></iframe>
)}
</form> </form>
<button <button
className="btn btn-primary back" className="btn btn-primary back"