gitomkie
/
estatesfunding
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
estatesfunding/ef-ui/src/components/EditProperty.jsx

1514 lines
60 KiB
React
Raw Normal View History

done
2024-09-21 18:18:57 +00:00
import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchPropertyById } from "../redux/features/propertySlice";
done
2024-09-21 19:01:44 +00:00
import { updateProperty } from "../redux/features/propertySlice";
done
2024-09-21 18:18:57 +00:00
import { useParams } from "react-router-dom";
done
2024-09-30 15:39:00 +00:00
import Navbar from "./Navbar";
done
2024-09-21 18:18:57 +00:00
const EditProperty = () => {
const { id } = useParams();
const dispatch = useDispatch();
done
2024-10-12 13:32:17 +00:00
const [activeTab, setActiveTab] = useState("propertydetails");
const handleContinue = () => {
if (activeTab === "propertydetails") setActiveTab("Images");
if (activeTab === "Images") setActiveTab("Accounting");
};
const handleBack = () => {
if (activeTab === "Images") setActiveTab("propertydetails");
if (activeTab === "Accounting") setActiveTab("Images");
};
done
2024-09-21 18:18:57 +00:00
const { selectedProperty } = useSelector((state) => state.property);
const [formData, setFormData] = useState({
done
2024-10-12 13:32:17 +00:00
// propertyType: "",
// yearBuild: "",
// totalSqft: "",
done
2024-09-21 18:18:57 +00:00
});
useEffect(() => {
dispatch(fetchPropertyById(id));
}, [dispatch, id]);
useEffect(() => {
if (selectedProperty) {
setFormData({
done
2024-10-12 13:32:17 +00:00
address:selectedProperty.address,
done
2024-09-21 18:18:57 +00:00
propertyType: selectedProperty.propertyType,
yearBuild: selectedProperty.yearBuild,
totalSqft: selectedProperty.totalSqft,
});
}
}, [selectedProperty]);
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
done
2024-09-21 19:01:44 +00:00
const handleSubmit = (e) => {
e.preventDefault();
dispatch(updateProperty({ id, propertyData: formData }));
};
done
2024-09-21 18:18:57 +00:00
return (
done
2024-09-30 15:39:00 +00:00
<>
done
2024-10-12 13:32:17 +00:00
<Navbar />
<br /> <br /> <br /> <br /> <br /> <br />
<div className="d-flex justify-content-center align-items-center" >
<div className="card justify-content-center">
<ul className="nav nav-tabs" role="tablist">
<li
role="presentation"
className={activeTab === "propertydetails" ? "active tab" : "tab"}
done
2024-09-21 18:18:57 +00:00
>
done
2024-10-12 13:32:17 +00:00
<a onClick={() => setActiveTab("propertydetails")} role="tab">
Property Details
</a>
</li>
<li
role="presentation"
className={activeTab === "Images" ? "active tab" : "tab"}
>
<a onClick={() => setActiveTab("Images")} role="tab">
Images, Maps
</a>
</li>
done
2024-09-21 18:18:57 +00:00
done
2024-10-12 13:32:17 +00:00
<li
role="presentation"
className={activeTab === "Accounting" ? "active tab" : "tab"}
>
<a onClick={() => setActiveTab("Accounting")} role="tab">
Accounting
</a>
</li>
</ul>
done
2024-09-21 18:18:57 +00:00
done
2024-10-12 13:32:17 +00:00
<div className="tab-content">
{activeTab === "propertydetails" && (
<div role="tabpanel" className="card tab-pane active">
<form>
<h3
style={{
color: "#fda417",
border: "#fda417",
fontSize: "20px",
fontWeight: "normal",
}}
>
Property Location
</h3>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<div className="row gy-3">
<div className="col-md-4">
<div className="form-floating mb-3">
Property Address
<input
type="text"
className="form-control"
name="address"
value={formData.address}
onChange={handleChange}
required
/>
</div>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
City
<input
type="text"
className="form-control"
name="city"
value={formData.city}
onChange={handleChange}
required
/>
</div>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
State
<select
className="form-floating mb-3 form-control"
name="state"
value={formData.state}
onChange={handleChange}
required
>
<option value="">Please Select</option>
<option value="Alaska">Alaska</option>
<option value="Alabama">Alabama</option>
<option value="Arkansas">Arkansas</option>
<option value="Arizona">Arizona</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="Texas">Travis</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>
</div>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
County
<select
className="form-floating mb-3 form-control"
name="county"
value={formData.county}
onChange={handleChange}
required
>
<option value="">Please Select</option>
<option value="Abbeville">Abbeville</option>
<option value="Aiken">Aiken</option>
<option value="Allendale">Allendale</option>
<option value="Anderson">Anderson</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>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Zip
<input
type="text"
className="form-control"
name="zip"
value={formData.zip}
onChange={handleChange}
required
/>
</div>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Parcel
<input
type="text"
className="form-control"
name="parcel"
value={formData.parcel}
onChange={handleChange}
required
/>
</div>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
<div className="form-floating mb-3">
Sub division
<input
type="text"
className="form-control"
name="subdivision"
value={formData.subdivision}
onChange={handleChange}
required
/>
</div>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Legal Description
<textarea
type="text"
className="form-control"
name="legal"
value={formData.legal}
onChange={handleChange}
required
/>
</div>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Cost per SQFT
<input
type="text"
className="form-control"
name="costpersqft"
value={formData.costpersqft}
onChange={handleChange}
required
/>
</div>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
Property Type
<select
className="form-floating mb-3 form-control"
name="propertyType"
value={formData.propertyType}
onChange={handleChange}
required
>
<option value="">Please Select</option>
<option value="Residential">Residential</option>
<option value="Land">Land</option>
<option value="Commercial">Commercial</option>
<option value="Industrial">Industrial</option>
<option value="Water">Water</option>
</select>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Lot Acres/Sqft
<input
type="text"
className="form-control"
name="lotacres"
value={formData.lotacres}
onChange={handleChange}
required
/>
</div>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Year Build
<input
type="text"
className="form-control"
name="yearBuild"
value={formData.yearBuild}
onChange={handleChange}
required
/>
</div>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
<div className="form-floating mb-3">
Total Living SQFT
<input
type="text"
className="form-control"
name="totallivingsqft"
value={formData.totallivingsqft}
onChange={handleChange}
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={handleChange}
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={handleChange}
required
/>
</div>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
Stories
<select
className="form-floating mb-3 form-control"
name="stories"
value={formData.stories}
onChange={handleChange}
required
>
<option value="">Please Select</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">
Garage
<select
className="form-floating mb-3 form-control"
name="garage"
value={formData.garage}
onChange={handleChange}
required
>
<option value="">Please Select</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={handleChange}
required
/>
</div>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
Pool/SPA
<select
className="form-floating mb-3 form-control"
name="poolspa"
value={formData.poolspa}
onChange={handleChange}
required
>
<option value="">Please Select</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">
Fire places
<select
className="form-floating mb-3 form-control"
name="fireplaces"
value={formData.fireplaces}
onChange={handleChange}
required
>
<option value="">Please Select</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">
A/C
<select
className="form-floating mb-3 form-control"
name="ac"
value={formData.ac}
onChange={handleChange}
required
>
<option value="">Please Select</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">
Heating
<select
className="form-floating mb-3 form-control"
name="heating"
value={formData.heating}
onChange={handleChange}
required
>
<option value="">Please Select</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">
Building Style
<select
className="form-floating mb-3 form-control"
name="buildingstyle"
value={formData.buildingstyle}
onChange={handleChange}
required
>
<option value="">Please Select</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={handleChange}
required
>
<option value="">Please select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div className="row gy-3">
<div className="col-md-4">
Ext Wall
<select
className="form-floating mb-3 form-control"
name="extwall"
value={formData.extwall}
onChange={handleChange}
required
>
<option value="">Please Select</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">
Roofing
<select
className="form-floating mb-3 form-control"
name="roofing"
value={formData.roofing}
onChange={handleChange}
required
>
<option value="">Please Select</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
type="text"
className="form-control"
name="totalSqft"
value={formData.totalSqft}
onChange={handleChange}
required
/>
</div>
</div>
</div>
<h3
style={{
color: "#fda417",
border: "#fda417",
fontSize: "20px",
fontWeight: "normal",
}}
>
<br />
Property Tax Information
</h3>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
</form>
<button
className="btn btn-primary continue"
onClick={handleContinue}
style={{ backgroundColor: "#fda417", border: "#fda417" }}
>
Continue
</button>
</div>
)}
{activeTab === "Images" && (
<div role="tabpanel" className="card tab-pane active">
<h3
style={{
color: "#fda417",
border: "#fda417",
fontSize: "20px",
fontWeight: "normal",
}}
>
Upload Images{" "}
</h3>
<form>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<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={handleChange}
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>
<button
className="btn btn-primary back"
onClick={handleBack}
style={{ backgroundColor: "#fda417", border: "#fda417" }}
>
Go Back
</button>{" "}
<button
className="btn btn-primary continue"
onClick={handleContinue}
style={{ backgroundColor: "#fda417", border: "#fda417" }}
>
Continue
</button>
</div>
)}
{activeTab === "Accounting" && (
<div
className="card"
style={{
color: "#fda417",
border: "1px solid #fda417",
padding: "10px",
borderRadius: "8px",
}}
>
<br />
<br />
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<span
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Costs paid out of Closing Hud A to B:
</span>
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Total credits received on settlement
</span>
</div>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Total Purchase Cost after Credits Received
</span>
</div>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<span
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Cash Adjustments:
</span>
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Total Cash Adjustments on Settlement
</span>
</div>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Total Cash Required on Settlement
</span>
</div>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<span
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Incidental Cost:
</span>
done
2024-09-21 18:18:57 +00:00
done
2024-10-12 13:32:17 +00:00
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Total Renovations & Holding Cost
</span>
</div>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Total Costs to Buy A to B
</span>
</div>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Total Cost to Sell B to C
</span>
</div>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Gross Proceeds per HUD
</span>
</div>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<span
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Adjustments:
</span>
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Total Adjustments
</span>
</div>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Funds Available for distribution
</span>
</div>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<span
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Income Statement Adjustments:
</span>
<hr
style={{
borderColor: "#fda417", // Set the color of the line
borderWidth: "1px", // Optional: Adjust the thickness of the line
backgroundColor: "#fda417", // Optional: Apply color if using for background
height: "1px", // Optional: Set height to match the border width
}}
/>
<span
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Net Profit Computation
</span>
<div className="row gy-3 align-items-center">
<div className="col-md-4">
<input
type="text"
className="form-control"
placeholder="Total Costs to Buy A to B"
required
disabled
/>
</div>
</div>
<br />
<div className="row gy-3">
<div className="col-md-4">
<input
type="text"
className="form-control"
placeholder="Funds Prior to Closing"
required
disabled
/>
</div>
<div className="col-md-4">
<input
type="text"
className={`form-control ${
formData.isfundspriortoclosingInvalid ? "is-invalid" : ""
}`}
value={formData.fundspriortoclosing}
name="fundspriortoclosing"
onChange={(e) => {
const value = e.target.value;
const isValid = /^\d*\.?\d*$/.test(value); // Regex to allow only numbers and decimal points
setFormData({
...formData,
fundspriortoclosing: value,
isfundspriortoclosingInvalid: !isValid, // Set isPurchaseCostInvalid to true if the value is not a valid number
});
}}
onKeyPress={(e) => {
const charCode = e.charCode;
// Allow only numbers and decimal points
if ((charCode < 48 || charCode > 57) && charCode !== 46) {
e.preventDefault(); // Prevent non-numeric input
setFormData({
...formData,
isfundspriortoclosingInvalid: true, // Set isPurchaseCostInvalid to true to show the alert
});
}
}}
style={{ textAlign: "right" }}
required
/>
{formData.isfundspriortoclosingInvalid && (
<div className="invalid-feedback">
Please enter a valid number.
</div>
)}
</div>
</div>
<br />
<div className="row gy-3">
<div className="col-md-4">
<input
type="text"
className="form-control"
placeholder="Net B to C Sale Value"
required
disabled
/>
</div>
</div>
<br />
<div className="row gy-3">
<div className="col-md-4">
<input
type="text"
className="form-control"
placeholder="Short Term Rental"
required
disabled
/>
</div>
<div className="col-md-4">
<input
type="text"
className={`form-control ${
formData.isPurchaseCostInvalid ? "is-invalid" : ""
}`}
value={formData.shorttermrental}
name="shorttermrental"
onChange={(e) => {
const value = e.target.value;
const isValid = /^\d*\.?\d*$/.test(value); // Regex to allow only numbers and decimal points
setFormData({
...formData,
shorttermrental: value,
isPurchaseCostInvalid: !isValid, // Set isPurchaseCostInvalid to true if the value is not a valid number
});
}}
onKeyPress={(e) => {
const charCode = e.charCode;
// Allow only numbers and decimal points
if ((charCode < 48 || charCode > 57) && charCode !== 46) {
e.preventDefault(); // Prevent non-numeric input
setFormData({
...formData,
isPurchaseCostInvalid: true, // Set isPurchaseCostInvalid to true to show the alert
});
}
}}
style={{ textAlign: "right" }}
required
/>
{formData.isPurchaseCostInvalid && (
<div className="invalid-feedback">
Please enter a valid number.
</div>
)}
</div>
</div>
<br />
<div className="row gy-3">
<div className="col-md-4">
<input
type="text"
className="form-control"
placeholder="Other Income"
required
disabled
/>
</div>
<div className="col-md-4">
<input
type="text"
className={`form-control ${
formData.isPurchaseCostInvalid ? "is-invalid" : ""
}`}
value={formData.OtherIncome}
name="OtherIncome"
onChange={(e) => {
const value = e.target.value;
const isValid = /^\d*\.?\d*$/.test(value); // Regex to allow only numbers and decimal points
setFormData({
...formData,
OtherIncome: value,
isPurchaseCostInvalid: !isValid, // Set isPurchaseCostInvalid to true if the value is not a valid number
});
}}
onKeyPress={(e) => {
const charCode = e.charCode;
// Allow only numbers and decimal points
if ((charCode < 48 || charCode > 57) && charCode !== 46) {
e.preventDefault(); // Prevent non-numeric input
setFormData({
...formData,
isPurchaseCostInvalid: true, // Set isPurchaseCostInvalid to true to show the alert
});
}
}}
style={{ textAlign: "right" }}
required
/>
{formData.isPurchaseCostInvalid && (
<div className="invalid-feedback">
Please enter a valid number.
</div>
)}
</div>
</div>
<br />
<div className="row gy-3">
<div className="col-md-4">
<input
type="text"
className="form-control"
placeholder="Insurance Claim"
required
disabled
/>
</div>
<div className="col-md-4">
<input
type="text"
className={`form-control ${
formData.isPurchaseCostInvalid ? "is-invalid" : ""
}`}
value={formData.InsuranceClaim}
name="InsuranceClaim"
onChange={(e) => {
const value = e.target.value;
const isValid = /^\d*\.?\d*$/.test(value); // Regex to allow only numbers and decimal points
setFormData({
...formData,
InsuranceClaim: value,
isPurchaseCostInvalid: !isValid, // Set isPurchaseCostInvalid to true if the value is not a valid number
});
}}
onKeyPress={(e) => {
const charCode = e.charCode;
// Allow only numbers and decimal points
if ((charCode < 48 || charCode > 57) && charCode !== 46) {
e.preventDefault(); // Prevent non-numeric input
setFormData({
...formData,
isPurchaseCostInvalid: true, // Set isPurchaseCostInvalid to true to show the alert
});
}
}}
style={{ textAlign: "right" }}
required
/>
{formData.isPurchaseCostInvalid && (
<div className="invalid-feedback">
Please enter a valid number.
</div>
)}
</div>
</div>
<br />
<div className="row gy-3">
<div className="col-md-4">
<input
type="text"
className="form-control"
placeholder="Long Term Rental"
required
disabled
/>
</div>
<div className="col-md-4">
<input
type="text"
className={`form-control ${
formData.isPurchaseCostInvalid ? "is-invalid" : ""
}`}
value={formData.LongTermRental}
name="LongTermRental"
onChange={(e) => {
const value = e.target.value;
const isValid = /^\d*\.?\d*$/.test(value); // Regex to allow only numbers and decimal points
setFormData({
...formData,
LongTermRental: value,
isPurchaseCostInvalid: !isValid, // Set isPurchaseCostInvalid to true if the value is not a valid number
});
}}
onKeyPress={(e) => {
const charCode = e.charCode;
// Allow only numbers and decimal points
if ((charCode < 48 || charCode > 57) && charCode !== 46) {
e.preventDefault(); // Prevent non-numeric input
setFormData({
...formData,
isPurchaseCostInvalid: true, // Set isPurchaseCostInvalid to true to show the alert
});
}
}}
style={{ textAlign: "right" }}
required
/>
{formData.isPurchaseCostInvalid && (
<div className="invalid-feedback">
Please enter a valid number.
</div>
)}
</div>
</div>
<br />
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Net Profit Before Financing Costs
</span>
</div>
<br />
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Financing Cost/Other Closing Costs
</span>
<div className="col-md-4">
<input
type="text"
className={`form-control ${
formData.isFinancingCostClosingCostInvalid
? "is-invalid"
: ""
}`}
value={formData.FinancingCostClosingCost}
name="FinancingCostClosingCost"
onChange={(e) => {
const value = e.target.value;
const isValid = /^\d*\.?\d*$/.test(value); // Regex to allow only numbers and decimal points
setFormData({
...formData,
FinancingCostClosingCost: value,
isFinancingCostClosingCostInvalid: !isValid, // Set isPurchaseCostInvalid to true if the value is not a valid number
});
}}
onKeyPress={(e) => {
const charCode = e.charCode;
// Allow only numbers and decimal points
if ((charCode < 48 || charCode > 57) && charCode !== 46) {
e.preventDefault(); // Prevent non-numeric input
setFormData({
...formData,
isFinancingCostClosingCostInvalid: true, // Set isPurchaseCostInvalid to true to show the alert
});
}
}}
style={{ textAlign: "right" }}
required
/>
{formData.isFinancingCostClosingCostInvalid && (
<div className="invalid-feedback">
Please enter a valid number.
</div>
)}
</div>
</div>
<br />
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Net Profit
</span>
</div>
<div className="col-md-4">
<button
className="btn btn-primary back"
onClick={handleBack}
style={{ backgroundColor: "#fda417", border: "#fda417" }}
>
Go Back
</button>{" "}
<button
type="button"
className="btn btn-primary continue"
style={{ backgroundColor: "#fda417", border: "#fda417" }}
onClick={handleSubmit}
>
Submit
</button>{" "}
</div>
<br />
</div>
)}
</div>
</div>
</div>
done
2024-09-30 15:39:00 +00:00
</>
done
2024-09-21 18:18:57 +00:00
);
};
export default EditProperty;