Untitled
unknown
plain_text
a year ago
55 kB
1
Indexable
Never
import React, { useState,useCallback } from "react";
import backspace from "../assets/backspace (1).png";
import styles from "../styles/Addpropertyform.module.css";
import {
FormControl,
Select,
Stack,
Checkbox,
RadioGroup,
FormControlLabel,
MenuItem,
Backdrop,
CircularProgress,
} from "@mui/material";
import OutlinedInput from "@mui/material/OutlinedInput";
import Radio from "@mui/material/Radio";
import ListItemText from "@mui/material/ListItemText";
import { useNavigate ,useLocation} from "react-router-dom";
import "react-toastify/dist/ReactToastify.css";
import dayjs from "dayjs";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
import { MobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";
import { url } from "../constData";
import axios from "axios";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { customAlphabet } from 'nanoid'
import Navbar from "./Navbar";
import Footer from "./Footer";
const Addpropertyform = () => {
const navigate = useNavigate();
const location = useLocation();
// const manageby = location?.state?.manageby;
const manageby = sessionStorage.getItem("manageby");
const [propertyaddress, setPropertyaddress] = useState({
houseNo: "",
localArea: "",
city: ""
});
const nanoid = customAlphabet('1234567890', 8);
const properyId = nanoid();
// console.log(properyId);
const SessionformData = JSON.parse(sessionStorage.getItem("PropertyFormData"));
const [formData, setFormData] = useState({
propertyname: "",
propertyaddress: "",
image1: "",
image2: "",
image3: "",
image4: "",
video: "",
propertySubscribed: "",
inspectionReport: "",
utilityBills: "",
tenancyContract: "",
statementAcc: "",
subscriptionAgreement: "",
description: "",
area: null,
selectedBedrooms: "",
selectedPropertyType: "",
selectedPropertyFor: "Sale",
selectedAmount: "",
selectedDate: "",
selectedTime: "",
selectedAmenities: [],
selectedFurnishing: "",
selectedListing: "",
price: null,
propertyId: properyId,
lat: null,
lon: null,
addBy: manageby,
});
// if(SessionformData){
// const confirmm = confirm("Do you want to continue with previous data?");
// console.log(confirmm);
// if(confirm === true){
// setFormData(previousformData => ({ ...previousformData, ...SessionformData }));
// // sessionStorage.removeItem("PropertyFormData");
// }
// }
console.log(formData);
const userData = JSON.parse(localStorage.getItem("user"));
const token = JSON.parse(localStorage.getItem("token"));
const[open, setOpen] = useState(false);
const handleAddressChange = useCallback((event)=>{
const {name, value} = event.target;
setPropertyaddress({...propertyaddress, [name]: value});
setFormData({...formData, propertyaddress: propertyaddress.houseNo +" "+propertyaddress.localArea +" "+ propertyaddress.city});
})
console.log(formData);
const handleChange = (event) => {
const {name, value} = event.target;
setFormData({...formData, [name]: value});
if(name === 'selectedPropertyFor' && value === 'Sale'){
setFormData({...formData,[name]: value, selectedAmount:'' });
}
};
const handleAddress = (event) => {
const value = propertyaddress?.localArea+" "+propertyaddress?.city+" ";
setTimeout(async() => {
try{
const {data} = await axios.get(`https://nominatim.openstreetmap.org/search.php?q=${value}&format=json&polygon=1&addressdetails=1`)
// console.log(res.data)
formData.lat = data[0].lat;
formData.lon = data[0].lon;
console.log(formData.lat, formData.lon);
// setFormData({...formData, lat: data[0].lat, lon: data[0].lon});
} catch(err){
console.log(err);
}
}, 2000);
};
const handleSubmit = async(e) => {
try{
const form = new FormData();
form.append("name", formData.propertyname);
form.append("address", formData.propertyaddress);
form.append("image1", formData.image1);
form.append("image2", formData.image2);
form.append("image3", formData.image3);
form.append("image4", formData.image4);
form.append("video1", formData.video);
form.append("property_subscribed", formData.propertySubscribed);
form.append("inspection_report", formData.inspectionReport);
form.append("uitility_bills", formData.utilityBills);
form.append("tenancy_contract", formData.tenancyContract);
form.append("statement_acc", formData.statementAcc);
form.append("subscription_agreement", formData.subscriptionAgreement);
form.append("description", formData.description);
form.append("area", formData.area);
form.append("no_bedrooms", formData.selectedBedrooms);
form.append("property_type", formData.selectedPropertyType);
form.append("property_for", formData.selectedPropertyFor);
form.append("date", formData.selectedDate);
form.append("time", formData.selectedTime);
form.append("amenities", formData.selectedAmenities);
form.append("furnishing_status", formData.selectedFurnishing);
form.append("listing_type", formData.selectedListing);
form.append("price", formData.price);
form.append("property_id", formData.propertyId);
form.append("lat", formData.lat);
form.append("lon", formData.lon);
form.append("amount", formData.selectedAmount);
form.append("addBy", formData.addBy);
setOpen(true);
console.log("here called");
if(formData.selectedPropertyFor ==="Rent" && userData?.propertyManageSubscription!=='Free'&&userData.propertyManageSubscription!==undefined&&userData?.propertyManageSubscription!=='null'&&userData?.propertyManageSubscription!==''&&formData?.selectedListing==='Public'&&manageby==='By Admin'){
// if(formData.propertySubscribed === "" && formData.inspectionReport === "" && formData.utilityBills === "" && formData.tenancyContract === "" && formData.statementAcc === "" && formData.subscriptionAgreement === "" && formData.video === "" && formData.image1 === "" && formData.image2 === "" && formData.image3 === "" && formData.image4 === ""){
// setOpen(false);
// return toast.error("Please upload all the documents");
// }
console.log(" rent and public");
const res = await axios.post(
`${url}/api/property/add/property/${userData?._id}`,
form,
{
headers: {
authorization: token,
},
}
);
if (res.status === 200) {
sessionStorage.removeItem("PropertyFormData");
toast.success("Property added successfully");
setOpen(false);
navigate("/qliqrealestate");
// console.log(res);
}
}
else if(formData.selectedPropertyFor==="Sale"&&formData?.selectedListing==='Private'&&userData.listingSubscription==='Premium'){
// if(formData.inspectionReport === "" && formData.utilityBills === "" && formData.tenancyContract === "" && formData.statementAcc === "" && formData.video === "" && formData.image1 === "" && formData.image2 === "" && formData.image3 === "" && formData.image4 === ""){
// setOpen(false);
// return toast.error("Please upload all the documents");
// }
console.log("sale and private");
if(manageby==='By Admin'|| manageby==='By Self'){
const res = await axios.post(
`${url}/api/property/add/property/${userData?._id}`,
form,
{
headers: {
authorization: token,
},
}
);
if (res.status === 200) {
sessionStorage.removeItem("PropertyFormData");
toast.success("Property added successfully");
setOpen(false);
navigate("/qliqrealestate");
// console.log(res);
}
}
}
else if(formData.selectedPropertyFor==="Rent"&&formData?.selectedListing==='Private'&&userData.listingSubscription==='Premium'&&userData?.propertyManageSubscription!=='Free'&&userData.propertyManageSubscription!==undefined&&userData?.propertyManageSubscription!=='null'&&userData?.propertyManageSubscription!==''){
// if(formData.propertySubscribed === "" && formData.inspectionReport === "" && formData.utilityBills === "" && formData.tenancyContract === "" && formData.statementAcc === "" && formData.subscriptionAgreement === "" && formData.video === "" && formData.image1 === "" && formData.image2 === "" && formData.image3 === "" && formData.image4 === ""){
// setOpen(false);
// return toast.error("Please upload all the documents");
// }
console.log("rent and private");
if(manageby==='By Admin'|| manageby==='By Self'){
const res = await axios.post(
`${url}/api/property/add/property/${userData?._id}`,
form,
{
headers: {
authorization: token,
},
}
);
if (res.status === 200) {
sessionStorage.removeItem("PropertyFormData");
toast.success("Property added successfully");
setOpen(false);
navigate("/qliqrealestate");
// console.log(res);
}
}
}
else if(formData.selectedPropertyFor==="Rent"&&formData?.selectedListing==='Public'&&userData?.propertyManageSubscription==='Premium'||userData?.propertyManageSubscription==='Platinum'&&manageby==='By Admin'){
// if(formData.propertySubscribed === "" && formData.inspectionReport === "" && formData.utilityBills === "" && formData.tenancyContract === "" && formData.statementAcc === "" && formData.subscriptionAgreement === "" && formData.video === "" && formData.image1 === "" && formData.image2 === "" && formData.image3 === "" && formData.image4 === ""){
// setOpen(false);
// return toast.error("Please upload all the documents");
// }
console.log("rent and public");
const res = await axios.post(
`${url}/api/property/add/property/${userData?._id}`,
form,
{
headers: {
authorization: token,
},
}
);
if (res.status === 200) {
sessionStorage.removeItem("PropertyFormData");
toast.success("Property added successfully");
setOpen(false);
navigate("/qliqrealestate");
// console.log(res);
}
}
else if(formData.selectedPropertyFor==="Sale"&&formData?.selectedListing==='Public'){
// if(formData.inspectionReport === "" && formData.utilityBills === "" && formData.tenancyContract === "" && formData.statementAcc === "" && formData.video === "" && formData.image1 === "" && formData.image2 === "" && formData.image3 === "" && formData.image4 === ""){
// setOpen(false);
// return toast.error("Please upload all the documents");
// }
console.log("sale and public");
const res = await axios.post(
`${url}/api/property/add/property/${userData?._id}`,
form,
{
headers: {
authorization: token,
},
}
);
if (res.status === 200) {
sessionStorage.removeItem("PropertyFormData");
toast.success("Property added successfully");
setOpen(false);
navigate("/qliqrealestate");
// console.log(res);
}
}
else{
setOpen(false);
sessionStorage.setItem("PropertyFormData", JSON.stringify(formData));
if (formData.selectedListing === 'Private' && formData.selectedPropertyFor === 'Sale' && userData?.listingSubscription === 'Free') {
alert("Please subscribe to add and Listing property as Private");
navigate("/subscription");
} else if (formData.selectedPropertyFor === 'Rent' && formData.selectedListing === 'Private' && userData?.listingSubscription == 'Free' || userData?.propertyManageSubscription === 'Free') {
alert("Please subscribe to add and Listing property as Private for Rent");
if (userData?.propertyManageSubscription === 'Free') {
if(confirm("Do you want to subscribe for Property Management?") === true)
navigate("/subscription/rent");
else{
navigate("/qliqrealestate");
}
}else{
if(confirm("Do you want to subscribe for Listing?") === true)
navigate("/subscription");
else{
navigate("/qliqrealestate");
}
}
} else {
alert("Please Check your form again");
}
}
} catch (err) {
setOpen(false);
toast.error("Error: " + err.response.status);
// console.log(err);
}
};
const rooms = [
"2 BHK",
"3 BHK",
"4 BHK",
"5 BHK",
"6 BHK",
"7 BHK",
"8 BHK",
"9+ BHK",
];
const propertyType = [
"Residential land",
"House/Villa",
"Farm House",
"Residential Apartment",
];
const listing = ["Public", "Private"];
const propertyfor = ["Sale", "Rent"];
const amount = ["Per day", "Per month", "Per quarter", "Per year"];
const amenities = [
"Parking",
"Power Backup",
"Park",
"Personal Security",
"Lift",
"Gymnasium",
"Club House",
"Gas Pipeline",
];
const furnishing = ["Furnished", "Semi-Furnished", "Unfurnished"];
return (
<>
<Navbar />
<ToastContainer />
<Backdrop
sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={open}
>
<CircularProgress color="inherit" />
</Backdrop>
<div className={styles.maindiv}>
<div className={styles.backspacediv}>
<div>
<img
style={{ marginTop: "-0.2vmax" }}
onClick={() => navigate("/qliqrealestate")}
src={backspace}
/>
</div>
<div>
<label>Back</label>
</div>
</div>
<div className={styles.div}>
{/* div1 */}
<div className={styles.box}>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="propn-input">
Property Name
</label>
<input
className={styles.input}
type="text"
id="propn-input"
name="propertyname"
value={formData.propertyname}
onChange={handleChange}
placeholder="Property Name"
style={{ fontSize: "1.2vmax" }}
required
/>
</div>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="propAdd-input">
Property Address
</label>
<input
className={styles.input}
type="text"
id="propAdd-input"
name="houseNo"
value={propertyaddress.houseNo}
onChange={handleAddressChange}
placeholder="House No. and Street Name"
required
/>
<input
className={styles.input}
type="text"
id="propAdd-input"
name="localArea"
value={propertyaddress.localArea}
onChange={handleAddressChange}
onKeyUp={handleAddress}
placeholder="Local Area"
required
/>
<input
className={styles.input}
type="text"
id="propAdd-input"
name="city"
value={propertyaddress.city}
onChange={handleAddressChange}
onKeyUp={handleAddress}
placeholder="City"
required
/>
</div>
</div>
{/* div2 */}
<div className={styles.mainbuttondiv}>
<div className={styles.buttondiv2}>
<Stack>
<label className={styles.button} htmlFor="image1">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Upload image-1
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*"
id="image1"
name="image1"
onChange={(e) => {
setFormData({ ...formData, image1: e.target.files[0] });
}}
required
/>
</Stack>
<Stack>
<label className={styles.button} htmlFor="image2">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Upload image-2
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*"
id="image2"
name="image2"
onChange={(e) => {
setFormData({ ...formData, image2: e.target.files[0] });
}}
required
/>
</Stack>
<Stack>
<label className={styles.button} htmlFor="image3">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Upload image-3
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*"
id="image3"
name="image3"
onChange={(e) => {
setFormData({ ...formData, image3: e.target.files[0] });
}}
/>
</Stack>
<Stack>
<label className={styles.button} htmlFor="image4">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Upload image-4
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*"
id="image4"
name="image4"
onChange={(e) => {
setFormData({ ...formData, image4: e.target.files[0] });
}}
/>
</Stack>
</div>
<div className={styles.buttondiv2}>
<Stack>
<label className={styles.button} htmlFor="video">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Upload Video
</label>
<input
type="file"
style={{ display: "none" }}
accept="video/*"
id="video"
name="video"
onChange={(e) => {
setFormData({ ...formData, video: e.target.files[0] });
}}
/>
</Stack>
</div>
</div>
{/* div3 */}
<div className={styles.mainbuttondiv2}>
<div style={{ marginBottom: "1vmax" }}>
<label className={styles.label} htmlFor="">
Upload Document
</label>
</div>
{formData.selectedPropertyFor === "Sale"?
<>
<div className={styles.buttondiv}>
<Stack>
<label className={styles.button} htmlFor="prop-Sub">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Property Subscribed
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
id="prop-Sub"
name="propertySubscribed"
onChange={(e) => {
setFormData({
...formData,
propertySubscribed: e.target.files[0],
});
}}
/>
</Stack>
<Stack>
<label className={styles.button} htmlFor="insp-rep">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Inspection Report
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
id="insp-rep"
name="inspectionReport"
onChange={(e) => {
setFormData({
...formData,
inspectionReport: e.target.files[0],
});
}}
required
/>
</Stack>
<Stack>
<label className={styles.button} htmlFor="util-bills">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Utility Bills
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
id="util-bills"
name="utilityBills"
onChange={(e) => {
setFormData({
...formData,
utilityBills: e.target.files[0],
});
}}
/>
</Stack>
<Stack>
<label className={styles.button} htmlFor="ten-cont">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Tenacy Contract
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
id="ten-cont"
name="tenancyContract"
onChange={(e) => {
setFormData({
...formData,
tenancyContract: e.target.files[0],
});
}}
/>
</Stack>
</div>
<div className={styles.buttondiv}>
<Stack>
<label className={styles.button} htmlFor="state-ac">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Statement of A/C
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
id="state-ac"
name="statementAcc"
onChange={(e) => {
setFormData({
...formData,
statementAcc: e.target.files[0],
});
}}
/>
</Stack>
<Stack>
<label className={styles.button} htmlFor="prop-Sub">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Subscription Agreement
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
id="prop-Sub"
name="subscriptionAgreement"
onChange={(e) => {
setFormData({
...formData,
subscriptionAgreement: e.target.files[0],
});
}}
/>
</Stack>
</div>
</>
:
<div className={styles.buttondiv}>
<Stack>
<label className={styles.button} htmlFor="insp-rep">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Inspection Report
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
id="insp-rep"
name="inspectionReport"
onChange={(e) => {
setFormData({
...formData,
inspectionReport: e.target.files[0],
});
}}
required
/>
</Stack>
<Stack>
<label className={styles.button} htmlFor="util-bills">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Utility Bills
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
id="util-bills"
name="utilityBills"
onChange={(e) => {
setFormData({
...formData,
utilityBills: e.target.files[0],
});
}}
/>
</Stack>
<Stack>
<label className={styles.button} htmlFor="ten-cont">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Tenacy Contract
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
id="ten-cont"
name="tenancyContract"
onChange={(e) => {
setFormData({
...formData,
tenancyContract: e.target.files[0],
});
}}
/>
</Stack>
<div className={styles.buttondiv2}>
<Stack>
<label className={styles.button} htmlFor="state-ac">
<svg width="16" height="16" fill="currentColor">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z" />
</svg>
Statement of A/C
</label>
<input
type="file"
style={{ display: "none" }}
accept="image/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
id="state-ac"
name="statementAcc"
onChange={(e) => {
setFormData({
...formData,
statementAcc: e.target.files[0],
});
}}
/>
</Stack>
</div>
</div>
}
</div>
{/* div4 */}
<div className={styles.box}>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="desc-input">
Description
</label>
<input
className={styles.input}
type="text"
id="desc-input"
name="description"
placeholder="Description"
onChange={handleChange}
value={formData.description}
style={{ fontSize: "1.2vmax" }}
required
/>
</div>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="area-input">
Area
</label>
<input
className={styles.input}
type="number"
id="area-input"
name="area"
placeholder="Area"
onChange={handleChange}
value={formData.area}
style={{ fontSize: "1.2vmax" }}
required
/>
</div>
</div>
{/* div5 */}
<div className={styles.box}>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="listing-input">
Listing Type
</label>
<FormControl className={styles.input}>
<Select
placeholder="Enter Description"
value={
formData.selectedListing.length === 0
? "Select Listing Type"
: formData.selectedListing
}
onChange={handleChange}
input={<OutlinedInput />}
renderValue={(selected) => selected}
id="listing-input"
name="selectedListing"
sx={{
boxShadow: "none",
".MuiOutlinedInput-notchedOutline": { border: 0 },
"&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
}}
required
>
{listing.map((name) => (
<MenuItem key={name} value={name}>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
></RadioGroup>
<FormControlLabel
control={<Radio />}
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
checked={formData.selectedListing.indexOf(name) > -1}
/>
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="bedroom-input">
No.of bedrooms
</label>
<FormControl className={styles.input}>
<Select
placeholder="Enter Description"
value={
formData.selectedBedrooms.length === 0
? "Select Number of Bedroom"
: formData.selectedBedrooms
}
onChange={handleChange}
input={<OutlinedInput />}
renderValue={(selected) => selected}
id="bedroom-input"
name="selectedBedrooms"
sx={{
boxShadow: "none",
".MuiOutlinedInput-notchedOutline": { border: 0 },
"&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
}}
required
>
{rooms.map((name) => (
<MenuItem key={name} value={name}>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
></RadioGroup>
<FormControlLabel
control={<Radio />}
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
checked={formData.selectedBedrooms.indexOf(name) > -1}
/>
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
</div>
{/* div6 */}
<div className={styles.box}>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="">
Property type
</label>
<FormControl className={styles.input}>
<Select
placeholder="Enter Description"
value={
formData.selectedPropertyType.length === 0
? "Select Property Type"
: formData.selectedPropertyType
}
onChange={handleChange}
input={<OutlinedInput />}
renderValue={(selected) => selected}
id="property-input"
name="selectedPropertyType"
sx={{
boxShadow: "none",
".MuiOutlinedInput-notchedOutline": { border: 0 },
"&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
}}
required
>
{propertyType.map((name) => (
<MenuItem key={name} value={name}>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="female"
name="radio-buttons-group"
></RadioGroup>
<FormControlLabel
control={<Radio />}
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
checked={
formData.selectedPropertyType.indexOf(name) > -1
}
/>
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="">
Property for
</label>
<FormControl className={styles.input}>
<Select
placeholder="Enter Description"
value={
formData.selectedPropertyFor.length === 0
? "Select Property For"
: formData.selectedPropertyFor
}
onChange={handleChange}
input={<OutlinedInput />}
name="selectedPropertyFor"
renderValue={(selected) => selected}
sx={{
boxShadow: "none",
".MuiOutlinedInput-notchedOutline": { border: 0 },
"&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
}}
required
>
{propertyfor.map((name) => (
<MenuItem key={name} value={name} notchedOutline>
<Checkbox
checked={
formData.selectedPropertyFor.indexOf(name) > -1
}
/>
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
</div>
{/* div7 */}
<div className={styles.box}>
{formData.selectedPropertyFor === "Rent" ?
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="amount-input">
Amount
</label>
<div className={styles.amountinput}>
<input
type="number"
id="amount-input"
name="price"
value={formData.price}
onChange={handleChange}
placeholder="Amount"
required
className={styles.priceinput}
/>
<FormControl >
<Select
placeholder="Enter Description"
value={
formData.selectedAmount.length === 0
? "Select Amount"
: formData.selectedAmount
}
onChange={handleChange}
input={<OutlinedInput style={{borderLeft:'2px solid gray',borderRadius:'0'}}/>}
name="selectedAmount"
renderValue={(selected) => selected}
sx={{
boxShadow: "none",
".MuiOutlinedInput-notchedOutline": { border: 0 },
"&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
}}
required
>
{amount.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox
checked={formData.selectedAmount.indexOf(name) > -1}
/>
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
</div>:<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="amount-input">
Amount
</label>
<input
className={styles.priceinput2}
type="number"
id="amount-input"
name="price"
value={formData.price}
onChange={handleChange}
placeholder="Amount"
required
/>
</div>
}
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="date-input">
Date
</label>
{/* <input className={styles.input} type="text" /> */}
<LocalizationProvider dateAdapter={AdapterDayjs}>
<MobileDatePicker
label="Date"
value={formData.selectedDate}
onChange={(newValue) => {
setFormData({ ...formData, selectedDate: newValue });
}}
name="date"
className={styles.input}
style={{ cursor: "pointer" }}
sx={{
// Add the following style to remove the outline
"& .MuiInputBase-input": {
cursor: "pointer",
},
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
},
"&:hover .MuiOutlinedInput-notchedOutline": {
border: "none",
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: "none",
},
}}
required
/>
</LocalizationProvider>
</div>
</div>
{/* div8 */}
<div className={styles.box}>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="time-input">
Time
</label>
{/* <input className={styles.input} type="text" /> */}
<LocalizationProvider dateAdapter={AdapterDayjs}>
<MobileTimePicker
defaultValue={dayjs("2022-04-17T15:30")}
value={formData.selectedTime}
className={styles.input}
name="time"
onChange={(newValue) => {
setFormData({ ...formData, selectedTime: newValue });
}}
sx={{
// Add the following style to remove the outline
"& .MuiInputBase-input": {
cursor: "pointer",
},
"& .MuiOutlinedInput-notchedOutline": {
border: "none",
},
"&:hover .MuiOutlinedInput-notchedOutline": {
border: "none",
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: "none",
},
}}
required
/>
</LocalizationProvider>
</div>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="propid-input">
Property id
</label>
<input
className={styles.input}
type="text"
id="propid-input"
placeholder="Property id"
onChange={handleChange}
value={formData.propertyId}
name="propertyId"
style={{ fontSize: "1.2vmax" }}
required
/>
</div>
</div>
{/* div9 */}
<div className={styles.box}>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="">
Amenities
</label>
<FormControl className={styles.input}>
<Select
multiple
value={formData.selectedAmenities}
onChange={handleChange}
input={<OutlinedInput id="amenities-select" />}
name="selectedAmenities"
sx={{
boxShadow: "none",
".MuiOutlinedInput-notchedOutline": { border: 0 },
"&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
}}
renderValue={(selected) => selected.join(", ")}
>
<MenuItem value="" disabled>
<em>Enter Description</em>
</MenuItem>
{amenities.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox
checked={formData.selectedAmenities.indexOf(name) > -1}
/>
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
<div className={styles.inputdiv}>
<label className={styles.label} htmlFor="propid-input">
Furnishing Status
</label>
<FormControl className={styles.input}>
<Select
placeholder="Enter Furnishing Status"
value={
formData.selectedFurnishing.length === 0
? "Select Furnishing Status"
: formData.selectedFurnishing
}
onChange={handleChange}
input={<OutlinedInput />}
name="selectedFurnishing"
renderValue={(selected) => selected}
sx={{
boxShadow: "none",
".MuiOutlinedInput-notchedOutline": { border: 0 },
"&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: 0,
},
}}
required
>
{furnishing.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox
checked={formData.selectedFurnishing.indexOf(name) > -1}
/>
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
</div>
{/* div10 */}
<div className={styles.divsubmitbutton}>
<button className={styles.submitbutton} onClick={handleSubmit}>
Submit
</button>
</div>
</div>
</div>
<Footer />
</>
);
};
export default Addpropertyform;