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

1893 lines
75 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-10-12 18:25:32 +00:00
import FileBase64 from "react-file-base64";
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 18:25:32 +00:00
address: "",
city: "",
state: "",
zip: "",
propertyTaxInfo: [
{ propertytaxowned: "0", ownedyear: "0", taxassessed: "0", taxyear: "0" },
],
images: [{ title: "", file: "" }], // Array to hold image objects
googleMapLink: "", // Field for Google Maps link
done
2024-10-13 12:38:36 +00:00
purchaseCost: "0",
costPaidAtoB: [
{ title: "Closing Fees - Settlement Fee", price: "0" },
{ title: "Closing Fees - Owner's Title Insurance", price: "0" },
{ title: "Courier Fees", price: "0" },
{ title: "Wire Fee", price: "0" },
{ title: "E recording Fee", price: "0" },
{ title: "Recording Fee", price: "0" },
{ title: "Property Tax", price: "0" },
],
done
2024-10-12 18:25:32 +00:00
renovationRisk: null,
turnTime: "",
done
2024-10-13 12:38:36 +00:00
credits: [{ title: "Credits", price: "0" }],
done
2024-09-21 18:18:57 +00:00
});
done
2024-10-12 18:25:32 +00:00
const renovationRiskOptions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Array of options
done
2024-09-21 18:18:57 +00:00
useEffect(() => {
dispatch(fetchPropertyById(id));
}, [dispatch, id]);
useEffect(() => {
if (selectedProperty) {
setFormData({
done
2024-10-12 18:25:32 +00:00
address: selectedProperty.address || "",
city: selectedProperty.city || "",
state: selectedProperty.state || "",
zip: selectedProperty.zip || "",
parcel: selectedProperty.parcel || "",
subdivision: selectedProperty.subdivision || "",
legal: selectedProperty.legal || "",
costpersqft: selectedProperty.costpersqft || "",
propertyType: selectedProperty.propertyType || "",
lotacres: selectedProperty.lotacres || "",
yearBuild: selectedProperty.yearBuild || "",
totallivingsqft: selectedProperty.totallivingsqft || "",
beds: selectedProperty.beds || "",
baths: selectedProperty.baths || "",
stories: selectedProperty.stories || "",
garage: selectedProperty.garage || "",
garagesqft: selectedProperty.garagesqft || "",
poolspa: selectedProperty.poolspa || "",
fireplaces: selectedProperty.fireplaces || "",
ac: selectedProperty.ac || "",
heating: selectedProperty.heating || "",
buildingstyle: selectedProperty.buildingstyle || "",
sitevacant: selectedProperty.sitevacant || "",
extwall: selectedProperty.extwall || "",
roofing: selectedProperty.roofing || "",
totalSqft: selectedProperty.totalSqft || "",
renovationRisk: selectedProperty.renovationRisk,
closeDateAtoB: selectedProperty.closeDateAtoB,
closeDateBtoC: selectedProperty.closeDateBtoC,
purchaseCost: selectedProperty.purchaseCost,
done
2024-10-13 12:38:36 +00:00
costPaidAtoB: selectedProperty.costPaidAtoB,
totalPurchaseCosts: selectedProperty.totalPurchaseCosts,
credits:selectedProperty.credits,
totalPurchaseCostsaftercredits:selectedProperty.totalPurchaseCostsaftercredits,
done
2024-10-12 18:25:32 +00:00
// sellingPriceBtoC:selectedProperty.sellingPriceBtoC,
// fundspriortoclosing:selectedProperty.fundspriortoclosing,
// shorttermrental:selectedProperty.shorttermrental,
// OtherIncome:selectedProperty.OtherIncome,
// InsuranceClaim:selectedProperty.InsuranceClaim,
// LongTermRental:selectedProperty.LongTermRental,
propertyTaxInfo: selectedProperty.propertyTaxInfo || [
{
propertytaxowned: "0",
ownedyear: "0",
taxassessed: "0",
taxyear: "0",
},
],
images: selectedProperty.images || [{ title: "", file: "" }],
googleMapLink: selectedProperty.googleMapLink,
rateofreturn: selectedProperty.rateofreturn,
done
2024-09-21 18:18:57 +00:00
});
}
}, [selectedProperty]);
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
done
2024-10-12 18:25:32 +00:00
// Handle specific changes for propertyTaxInfo array
const handleInputChange = (e, index) => {
const { name, value } = e.target;
// Make a shallow copy of the propertyTaxInfo array
const updatedPropertyTaxInfo = [...formData.propertyTaxInfo];
// Make a shallow copy of the object you want to modify (taxInfo at index)
const updatedTaxInfo = { ...updatedPropertyTaxInfo[index] };
// Update the field in the copied object
updatedTaxInfo[name] = value;
// Replace the old object with the updated one in the array
updatedPropertyTaxInfo[index] = updatedTaxInfo;
// Finally, update the formData with the updated propertyTaxInfo array
setFormData({ ...formData, propertyTaxInfo: updatedPropertyTaxInfo });
};
done
2024-10-13 12:38:36 +00:00
// const handleSubmit = (e) => {
// e.preventDefault();
// dispatch(updateProperty({ id, propertyData: formData }));
// };
done
2024-09-21 19:01:44 +00:00
const handleSubmit = (e) => {
e.preventDefault();
done
2024-10-13 12:38:36 +00:00
// Calculate total purchase costs and update the formData
const totalPurchaseCosts = calculateTotalPurchaseCosts();
const totalcredits = calculateTotalCredits();
const totalPurchaseCostsaftercredits = calculateTotalPurchaseCostsWithCredits();
// Update the formData with the calculated total purchase cost
const updatedFormData = {
...formData,
totalPurchaseCosts: totalPurchaseCosts.toFixed(2), // Store as a string with 2 decimal places
totalcredits:totalcredits.toFixed(2),
totalPurchaseCostsaftercredits:totalPurchaseCostsaftercredits.toFixed(2)
};
// Dispatch the updated formData
dispatch(updateProperty({ id, propertyData: updatedFormData }));
done
2024-09-21 19:01:44 +00:00
};
done
2024-10-12 18:25:32 +00:00
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 handleImageChange = (file, index) => {
const updatedImages = [...formData.images];
updatedImages[index] = {
...updatedImages[index],
file: file.base64, // Store the base64 format of the image
};
setFormData({ ...formData, images: updatedImages });
};
const handleAddImage = () => {
setFormData({
...formData,
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] = {
...updatedImages[index],
title: e.target.value,
};
setFormData({ ...formData, images: updatedImages });
};
useEffect(() => {
calculateTurnTime(formData.closeDateAtoB, formData.closeDateBtoC);
}, [formData.closeDateAtoB, formData.closeDateBtoC]);
const [turnTime, setTurnTime] = useState("0 days"); // Store the calculated turn time
const calculateTurnTime = (closeDateAtoB, closeDateBtoC) => {
if (closeDateAtoB && closeDateBtoC) {
const dateA = new Date(closeDateAtoB);
const dateB = new Date(closeDateBtoC);
// Calculate difference in time
const diffTime = Math.abs(dateB - dateA);
// Calculate difference in days
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
// Update state with the calculated turn time
// setTurnTime(diffDays);
setTurnTime(`${diffDays} days`);
} else {
setTurnTime("0 days"); // Reset if dates are not available
}
};
done
2024-10-13 12:38:36 +00:00
const addCost = () => {
setFormData((prevData) => ({
...prevData,
costPaidAtoB: [...prevData.costPaidAtoB, { title: "", price: "" }],
}));
};
const deleteCost = (index) => {
const updatedCosts = formData.costPaidAtoB.filter((_, i) => i !== index);
setFormData((prevData) => ({
...prevData,
costPaidAtoB: updatedCosts,
}));
};
// Function to handle changes to title and price
const handleCostChange = (index, field, value) => {
const updatedCosts = [...formData.costPaidAtoB];
updatedCosts[index][field] = value;
setFormData((prevData) => ({
...prevData,
costPaidAtoB: updatedCosts,
}));
};
const handlePriceChange = (e, index) => {
let value = e.target.value;
// Remove the dollar sign before validating
value = value.replace(/^\$/, "").trim(); // Remove '$' if it exists
// Use a regular expression to allow only numbers and decimals
const isNumber = /^\d*\.?\d*$/.test(value);
// If valid number, update state, otherwise show the alert
if (isNumber || value === "") {
const updatedCosts = formData.costPaidAtoB.map((cost, i) =>
i === index
? { ...cost, price: value, isInvalid: false } // Reset isInvalid if valid number
: cost
);
setFormData({ ...formData, costPaidAtoB: updatedCosts });
} else {
const updatedCosts = formData.costPaidAtoB.map((cost, i) =>
i === index
? { ...cost, isInvalid: true } // Keep isInvalid true for invalid input
: cost
);
setFormData({ ...formData, costPaidAtoB: updatedCosts });
}
};
const calculateTotalPurchaseCosts = () => {
const totalCostsFromArray = formData.costPaidAtoB.reduce((total, cost) => {
const price = parseFloat(cost.price) || 0; // Convert price to number
return total + price;
}, 0);
const purchaseCost = parseFloat(formData.purchaseCost) || 0; // Convert purchase cost to number
return totalCostsFromArray + purchaseCost; // Return the total
};
const addCredits = () => {
setFormData((prevData) => ({
...prevData,
credits: [...prevData.credits, { title: "", price: "" }],
}));
};
const deleteCredits = (index) => {
const updatedCredits = formData.credits.filter((_, i) => i !== index);
setFormData((prevData) => ({
...prevData,
credits: updatedCredits,
}));
};
// Function to handle changes to credits title and price
const handleCreditChange = (index, field, value) => {
const updatedCredits = [...formData.credits];
updatedCredits[index][field] = value;
setFormData((prevData) => ({
...prevData,
credits: updatedCredits,
}));
};
const handleCreditPriceChange = (e, index) => {
const value = e.target.value;
// Regular expression to allow only numbers and optional decimals
const isNumber = /^\d*\.?\d*$/.test(value);
// If valid number, update state, otherwise show the alert
if (isNumber || value === "") {
const updatedCredits = formData.credits.map((credit, i) =>
i === index
? { ...credit, price: value, isInvalid: false } // Reset isInvalid if valid number
: credit
);
setFormData({ ...formData, credits: updatedCredits });
} else {
const updatedCredits = formData.credits.map((credit, i) =>
i === index
? { ...credit, isInvalid: true } // Set isInvalid true for invalid input
: credit
);
setFormData({ ...formData, credits: updatedCredits });
}
};
const calculateTotalCredits = () => {
return formData.credits.reduce((total, credits) => {
const price = parseFloat(credits.price);
return total + (isNaN(price) ? 0 : price); // Ensure only valid numbers are added
}, 0);
};
const calculateTotalPurchaseCostsWithCredits = () => {
// Calculate total from costPaidAtoB array
const totalCostsFromArray = formData.costPaidAtoB.reduce((total, cost) => {
const price = parseFloat(cost.price) || 0; // Convert price to number
return total + price;
}, 0);
// Calculate total from credits array
const totalCreditsFromArray = formData.credits.reduce((total, credit) => {
const price = parseFloat(credit.price) || 0; // Convert price to number
return total + price;
}, 0);
// Convert purchase cost to number
const purchaseCost = parseFloat(formData.purchaseCost) || 0;
return totalCostsFromArray + totalCreditsFromArray + purchaseCost;
};
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 />
done
2024-10-12 18:25:32 +00:00
<br /> <br /> <br /> <br /> <br /> <br />
done
2024-10-13 12:38:36 +00:00
<div className="card d-flex justify-content-center align-items-center">
<div className="justify-content-center">
done
2024-10-12 18:25:32 +00:00
<ul className="nav nav-tabs" role="tablist">
<li
role="presentation"
className={activeTab === "propertydetails" ? "active tab" : "tab"}
>
<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>
<li
role="presentation"
className={activeTab === "Accounting" ? "active tab" : "tab"}
>
<a onClick={() => setActiveTab("Accounting")} role="tab">
Accounting
</a>
</li>
</ul>
<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>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
done
2024-10-12 18:25:32 +00:00
<div className="row gy-3">
<div className="col-md-4">
County
<select
className="form-floating mb-3 form-control"
name="county"
value={formData.county}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<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>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
done
2024-10-12 18:25:32 +00:00
<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
done
2024-10-12 13:32:17 +00:00
<select
className="form-floating mb-3 form-control"
done
2024-10-12 18:25:32 +00:00
name="propertyType"
value={formData.propertyType}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
>
<option value="">Please Select</option>
done
2024-10-12 18:25:32 +00:00
<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>
done
2024-10-12 13:32:17 +00:00
</select>
</div>
done
2024-10-12 18:25:32 +00:00
<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>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<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>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<div className="row gy-3">
<div className="col-md-4">
Stories
<select
className="form-floating mb-3 form-control"
name="stories"
value={formData.stories}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<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>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<div className="col-md-4">
Garage
<select
className="form-floating mb-3 form-control"
name="garage"
value={formData.garage}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<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>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
done
2024-10-12 18:25:32 +00:00
<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}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<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>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<div className="col-md-4">
Fire places
<select
className="form-floating mb-3 form-control"
name="fireplaces"
value={formData.fireplaces}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<option value="">Please Select</option>
<option value="N/A">N/A</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<div className="col-md-4">
A/C
<select
className="form-floating mb-3 form-control"
name="ac"
value={formData.ac}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<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>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
done
2024-10-12 18:25:32 +00:00
<div className="row gy-3">
<div className="col-md-4">
Heating
<select
className="form-floating mb-3 form-control"
name="heating"
value={formData.heating}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<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>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<div className="col-md-4">
Building Style
<select
className="form-floating mb-3 form-control"
name="buildingstyle"
value={formData.buildingstyle}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<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>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<div className="col-md-4">
Site Vacant
<select
className="form-floating mb-3 form-control"
name="sitevacant"
value={formData.sitevacant}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<option value="">Please select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
done
2024-10-12 18:25:32 +00:00
<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}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<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>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<div className="col-md-4">
Roofing
<select
className="form-floating mb-3 form-control"
name="roofing"
value={formData.roofing}
done
2024-10-12 13:32:17 +00:00
onChange={handleChange}
required
done
2024-10-12 18:25:32 +00:00
>
<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>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
done
2024-10-12 18:25:32 +00:00
<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
}}
/>
{formData.propertyTaxInfo &&
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"
value={taxInfo.propertytaxowned}
onChange={(e) =>
handleInputChange(e, index, "propertyTaxInfo")
}
required
/>
</div>
</div>
<div className="col-md-2">
<div className="form-floating mb-2">
Owned Year
<input
type="text"
className="form-control"
name="ownedyear"
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"
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"
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>
</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="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
}}
/>
{formData.images.map((image, index) => (
<div key={index} className="row gy-3 align-items-center">
<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 d-flex align-items-center">
<FileBase64
multiple={false}
onDone={(file) => handleImageChange(file, index)}
/>
<button
type="button"
className="btn btn-danger"
onClick={() => handleDeleteImage(index)}
style={{
marginLeft: "5px", // Adjust this to minimize space between the buttons
}}
>
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
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 />
done
2024-10-12 13:32:17 +00:00
done
2024-10-13 12:38:36 +00:00
<div className="row gy-3 col-16">
done
2024-10-12 18:25:32 +00:00
{/* Close Date A to B */}
done
2024-10-12 13:32:17 +00:00
<div className="col-md-4">
done
2024-10-12 18:25:32 +00:00
<input
type="text"
className="form-control"
placeholder="Close Date A to B"
done
2024-10-12 13:32:17 +00:00
required
done
2024-10-12 18:25:32 +00:00
disabled
/>
done
2024-10-12 13:32:17 +00:00
</div>
<div className="col-md-4">
done
2024-10-12 18:25:32 +00:00
<input
type="date"
className="form-control"
name="closeDateAtoB"
value={formData.closeDateAtoB}
onChange={(e) => {
const value = e.target.value;
setFormData({
...formData,
closeDateAtoB: value,
});
calculateTurnTime(value, formData.closeDateBtoC);
}}
placeholder="Close Date A to B"
style={{ textAlign: "right" }}
done
2024-10-12 13:32:17 +00:00
required
done
2024-10-12 18:25:32 +00:00
/>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<div>
<p>
<span
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
[M-D-Y]{" "}
</span>
:{" "}
<span
style={{
color: "#000000",
fontSize: "14px",
fontWeight: "normal",
}}
>
{new Date(formData.closeDateAtoB).toLocaleDateString(
"en-US",
{
month: "numeric",
day: "numeric",
year: "numeric",
}
)}
</span>
</p>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
<div className="row gy-3">
done
2024-10-12 18:25:32 +00:00
{/* Close Date B to C */}
done
2024-10-12 13:32:17 +00:00
<div className="col-md-4">
done
2024-10-12 18:25:32 +00:00
<input
type="text"
className="form-control"
placeholder="Close Date B to C"
done
2024-10-12 13:32:17 +00:00
required
done
2024-10-12 18:25:32 +00:00
disabled
/>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
done
2024-10-12 13:32:17 +00:00
<div className="col-md-4">
done
2024-10-12 18:25:32 +00:00
<input
type="date"
className="form-control"
name="closeDateBtoC"
value={formData.closeDateBtoC}
onChange={(e) => {
const value = e.target.value;
setFormData({
...formData,
closeDateBtoC: value,
});
calculateTurnTime(formData.closeDateAtoB, value);
}}
placeholder="Close Date B to C"
style={{ textAlign: "right" }}
done
2024-10-12 13:32:17 +00:00
required
done
2024-10-12 18:25:32 +00:00
/>
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<div>
<p>
<span
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
[M-D-Y] :{" "}
</span>
<span
style={{
color: "#000000",
fontSize: "14px",
fontWeight: "normal",
}}
>
{new Date(formData.closeDateBtoC).toLocaleDateString(
"en-US",
{
month: "numeric",
day: "numeric",
year: "numeric",
}
)}
</span>
</p>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
done
2024-10-12 18:25:32 +00:00
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Renovation Risk
</span>
<div className="col-md-7">
{renovationRiskOptions.map((option) => (
<div
className="form-check form-check-inline"
key={option}
>
<input
className="form-check-input"
type="radio"
name="renovationRisk"
id={`renovationRisk${option}`}
value={option}
checked={formData.renovationRisk === option}
onChange={(e) => {
const value = parseInt(e.target.value, 10);
setFormData({
...formData,
renovationRisk: value,
});
}}
/>
<label
className="form-check-label"
htmlFor={`renovationRisk${option}`}
>
{option}
</label>
</div>
))}
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
</div>
<br />
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Rate of Return
</span>
done
2024-10-12 13:32:17 +00:00
<div className="col-md-4">
done
2024-10-12 18:25:32 +00:00
<input
type="text"
className="form-control"
name="rateofreturn"
// value={`$ ${calculaterateofreturn().toFixed(2)}`}
readOnly
style={{
borderColor: "#fda417", // Custom border color for the input field
color: "#fda417", // Optionally apply text color to the input text
textAlign: "right",
}}
done
2024-10-12 13:32:17 +00:00
required
done
2024-10-12 18:25:32 +00:00
/>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
done
2024-10-12 18:25:32 +00:00
<br />
done
2024-10-12 13:32:17 +00:00
done
2024-10-12 18:25:32 +00:00
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Turn Time
</span>
done
2024-10-12 13:32:17 +00:00
<div className="col-md-4">
done
2024-10-12 18:25:32 +00:00
<input
type="text"
className="form-control"
value={turnTime}
readOnly
style={{
borderColor: "#fda417", // Custom border color for the input field
color: "#fda417", // Optionally apply text color to the input text
textAlign: "right",
}}
required
/>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
done
2024-10-12 18:25:32 +00:00
<br />
done
2024-10-12 13:32:17 +00:00
done
2024-10-12 18:25:32 +00:00
<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
}}
/>
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
done
2024-10-13 12:38:36 +00:00
Purchase Price
done
2024-10-12 18:25:32 +00:00
</span>
done
2024-10-13 12:38:36 +00:00
<div className="col-md-4">
<input
type="text"
className={`form-control ${
formData.isPurchaseCostInvalid ? "is-invalid" : ""
}`}
value={`$ ${formData.purchaseCost}`} // Display the dollar sign in the input
name="purchaseCost"
onChange={(e) => {
let value = e.target.value.replace(/[^\d.]/g, ""); // Remove anything that’s not a digit or decimal point
const isValid = /^\d*\.?\d*$/.test(value); // Regex to allow only numbers and decimal points
setFormData({
...formData,
purchaseCost: 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
});
}
}}
placeholder="Enter Purchase Cost"
style={{ textAlign: "right" }}
required
/>
{formData.isPurchaseCostInvalid && (
<div className="invalid-feedback">
Please enter a valid number.
</div>
)}
</div>
done
2024-10-12 18:25:32 +00:00
</div>
done
2024-10-12 13:32:17 +00:00
<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",
}}
>
done
2024-10-13 12:38:36 +00:00
Costs paid out of Closing Hud A to B:
done
2024-10-12 13:32:17 +00:00
</span>
done
2024-10-13 12:38:36 +00:00
{formData.costPaidAtoB.map((cost, index) => (
<div key={index} className="row gy-3 align-items-center">
<div className="col-md-4">
<input
type="text"
className="form-control"
value={cost.title}
onChange={(e) =>
handleCostChange(index, "title", e.target.value)
}
placeholder="Title"
required
/>
</div>
<div className="col-md-4">
<input
type="text"
className={`form-control ${
cost.isInvalid ? "is-invalid" : ""
}`}
value={`$ ${cost.price}`}
onChange={(e) => handlePriceChange(e, index)}
placeholder="Price"
style={{ textAlign: "right" }}
required
/>
{cost.isInvalid && (
<div className="invalid-feedback">
Please enter a valid number.
</div>
)}
</div>
<div className="col-md-2 d-flex justify-content-start">
<button
className="btn btn-danger"
onClick={() => deleteCost(index)}
style={{ marginLeft: "5px" }}
>
x
</button>
</div>
</div>
))}
<div className="col-md-4">
<button
onClick={addCost}
className="btn btn-primary back"
style={{ backgroundColor: "#fda417", border: "#fda417" }}
>
<span
style={{
fontSize: "20px",
fontWeight: "normal",
}}
>
+
</span>{" "}
Add Extra Cost
</button>
</div>
done
2024-10-12 18:25:32 +00:00
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
done
2024-10-13 12:38:36 +00:00
Total Purchase Cost
done
2024-10-12 18:25:32 +00:00
</span>
done
2024-10-13 12:38:36 +00:00
<div className="col-md-4">
<input
type="text"
className="form-control"
name="totalPurchaseCosts"
value={`$ ${calculateTotalPurchaseCosts().toFixed(2)}`} // Add dollar sign before the calculated total and format it to 2 decimal places
readOnly
style={{
borderColor: "#fda417", // Custom border color for the input field
color: "#fda417", // Optionally apply text color to the input text
textAlign: "right",
}}
required
/>
</div>
done
2024-10-12 18:25:32 +00:00
</div>
<hr
done
2024-10-12 13:32:17 +00:00
style={{
done
2024-10-12 18:25:32 +00:00
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
done
2024-10-12 13:32:17 +00:00
}}
done
2024-10-12 18:25:32 +00:00
/>
done
2024-10-12 13:32:17 +00:00
done
2024-10-13 12:38:36 +00:00
<span
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
Credits received on settlement:
</span>
{formData.credits.map((credits, index) => (
<div key={index} className="row gy-3 align-items-center">
<div className="col-md-4">
<input
type="text"
className="form-control"
value={credits.title}
onChange={(e) =>
handleCreditChange(index, "title", e.target.value)
}
placeholder="credits"
required
/>
</div>
<div className="col-md-4">
<input
type="text"
className={`form-control ${
credits.isInvalid ? "is-invalid" : ""
}`} // Apply 'is-invalid' class when invalid
value={credits.price}
onChange={(e) => handleCreditPriceChange(e, index)} // New handler for price validation
placeholder="Price"
style={{ textAlign: "right" }}
required
/>
{credits.isInvalid && (
<div className="invalid-feedback">
Please enter a valid number.
</div>
)}
</div>
<div className="col-md-2 d-flex justify-content-start">
<button
className="btn btn-danger"
onClick={() => deleteCredits(index)}
style={{ marginLeft: "5px" }}
>
x
</button>
</div>
</div>
))}
<div className="col-md-4">
<button
className="btn btn-primary back"
onClick={addCredits}
style={{ backgroundColor: "#fda417", border: "#fda417" }}
>
done
2024-10-12 18:25:32 +00:00
<span
style={{
done
2024-10-13 12:38:36 +00:00
fontSize: "20px",
fontWeight: "normal",
done
2024-10-12 18:25:32 +00:00
}}
>
done
2024-10-13 12:38:36 +00:00
+
</span>{" "}
Add credits
</button>
</div>
done
2024-10-12 13:32:17 +00:00
done
2024-10-13 12:38:36 +00:00
<div className="row gy-3 align-items-center">
done
2024-10-12 13:32:17 +00:00
<span
done
2024-10-13 12:38:36 +00:00
className="col-md-4"
done
2024-10-12 13:32:17 +00:00
style={{
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
}}
>
done
2024-10-13 12:38:36 +00:00
Total credits received on settlement
done
2024-10-12 13:32:17 +00:00
</span>
done
2024-10-13 12:38:36 +00:00
<div className="col-md-4">
<input
type="text"
className="form-control"
name="totalcredits"
value={calculateTotalCredits()}
readOnly
done
2024-10-12 18:25:32 +00:00
style={{
done
2024-10-13 12:38:36 +00:00
borderColor: "#fda417", // Custom border color for the input field
color: "#fda417", // Optionally apply text color to the input text
textAlign: "right",
done
2024-10-12 18:25:32 +00:00
}}
done
2024-10-13 12:38:36 +00:00
required
/>
done
2024-10-12 18:25:32 +00:00
</div>
done
2024-10-13 12:38:36 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
<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
}}
/>
done
2024-09-21 18:18:57 +00:00
done
2024-10-12 18:25:32 +00:00
done
2024-10-13 12:38:36 +00:00
<div className="row gy-3 align-items-center">
<span
className="col-md-4"
done
2024-10-12 13:32:17 +00:00
style={{
done
2024-10-13 12:38:36 +00:00
color: "#fda417",
fontSize: "14px",
fontWeight: "bold",
done
2024-10-12 13:32:17 +00:00
}}
done
2024-10-13 12:38:36 +00:00
>
Total Purchase Cost after Credits Received
</span>
<div className="col-md-4">
<input
type="text"
className="form-control"
name="totalPurchaseCostsaftercredits"
value={calculateTotalPurchaseCostsWithCredits()}
readOnly
done
2024-10-12 18:25:32 +00:00
style={{
done
2024-10-13 12:38:36 +00:00
borderColor: "#fda417", // Custom border color for the input field
color: "#fda417", // Optionally apply text color to the input text
textAlign: "right",
done
2024-10-12 18:25:32 +00:00
}}
done
2024-10-13 12:38:36 +00:00
required
/>
done
2024-10-12 18:25:32 +00:00
</div>
done
2024-10-13 12:38:36 +00:00
</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
}}
/>
done
2024-10-12 13:32:17 +00:00
done
2024-10-13 12:38:36 +00:00
done
2024-10-12 18:25:32 +00:00
done
2024-10-13 12:38:36 +00:00
done
2024-10-12 13:32:17 +00:00
done
2024-10-12 18:25:32 +00:00
<br />
done
2024-10-12 13:32:17 +00:00
done
2024-10-12 18:25:32 +00:00
<br />
done
2024-10-12 13:32:17 +00:00
done
2024-10-13 12:38:36 +00:00
done
2024-10-12 13:32:17 +00:00
done
2024-10-12 18:25:32 +00:00
<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 />
done
2024-10-12 13:32:17 +00:00
</div>
done
2024-10-12 18:25:32 +00:00
)}
</div>
done
2024-10-12 13:32:17 +00:00
</div>
</div>
done
2024-09-30 15:39:00 +00:00
</>
done
2024-09-21 18:18:57 +00:00
);
};
export default EditProperty;