<!-- HTML Structure -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Property Inspection Checklist</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

<!-- JavaScript/React Logic -->
const { jsPDF } = window.jspdf;

const PropertyInspectionChecklist = () => {
  const [formData, setFormData] = React.useState({
    propertyAddress: "",
    inspectorName: "",
    inspectionDate: new Date().toISOString().split("T")[0],
    conditionOptions: [
      { value: "Good", label: "Good" },
      { value: "Needs Repair", label: "Needs Repair" },
      { value: "Hazardous", label: "Hazardous" },
    ],
    sections: [
      // ... (sections data remains the same)
    ],
  });

  const handleConditionChange = (sectionIndex, itemIndex, value) => {
    const updatedSections = [...formData.sections];
    const conditionField = updatedSections[sectionIndex].items[itemIndex].conditionField;
    setFormData((prev) => ({
      ...prev,
      [conditionField]: value,
    }));
  };

  const handleCommentChange = (sectionIndex, itemIndex, value) => {
    const updatedSections = [...formData.sections];
    const commentField = updatedSections[sectionIndex].items[itemIndex].commentField;
    setFormData((prev) => ({
      ...prev,
      [commentField]: value,
    }));
  };

  const generatePDFReport = () => {
    // ... (PDF generation logic remains the same)
  };

  return (
    // ... (JSX component structure remains the same)
  );
};

// Render the component
ReactDOM.render(
  <React.StrictMode>
    <PropertyInspectionChecklist />
  </React.StrictMode>,
  document.getElementById("root")
);


  
    
    
    Property Inspection Checklist
    
    
    
    
    
  
  
    

  



const { jsPDF } = window.jspdf;

const PropertyInspectionChecklist = () => {
  const [formData, setFormData] = React.useState({
    propertyAddress: "",
    inspectorName: "",
    inspectionDate: new Date().toISOString().split("T")[0],
    conditionOptions: [
      { value: "Good", label: "Good" },
      { value: "Needs Repair", label: "Needs Repair" },
      { value: "Hazardous", label: "Hazardous" },
    ],
    sections: [
      // ... (sections data remains the same)
    ],
  });

  const handleConditionChange = (sectionIndex, itemIndex, value) => {
    const updatedSections = [...formData.sections];
    const conditionField = updatedSections[sectionIndex].items[itemIndex].conditionField;
    setFormData((prev) => ({
      ...prev,
      [conditionField]: value,
    }));
  };

  const handleCommentChange = (sectionIndex, itemIndex, value) => {
    const updatedSections = [...formData.sections];
    const commentField = updatedSections[sectionIndex].items[itemIndex].commentField;
    setFormData((prev) => ({
      ...prev,
      [commentField]: value,
    }));
  };

  const generatePDFReport = () => {
    // ... (PDF generation logic remains the same)
  };

  return (
    // ... (JSX component structure remains the same)
  );
};

// Render the component
ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);