NYC Certificate of Insurance Generator

PRODUCER	INSURED
${formData.producerName} ${formData.producerAddress} Phone: ${formData.producerPhone} Email: ${formData.producerEmail}	${formData.companyName} ${formData.companyAddress} ${formData.companyCity}, ${formData.companyState} ${formData.companyZip} Phone: ${formData.companyPhone}

CERTIFICATE HOLDER
${formData.holderName} ${formData.holderAddress} ${formData.holderCity}, ${formData.holderState} ${formData.holderZip}

TYPE OF INSURANCE	ADDL INSRD	SUBR WVD	POLICY NUMBER	POLICY EFF DATE	POLICY EXP DATE	LIMITS
GENERAL LIABILITY Commercial General Liability Claims-Made ☐ Occur ☑	${formData.additionalInsured ? '☑' : '☐'}	${formData.waiverOfSubrogation ? '☑' : '☐'}	${formData.glPolicyNumber}	${formData.glEffectiveDate}	${formData.glExpirationDate}	EACH OCCURRENCE: $${parseInt(formData.glLimitPerOccurrence).toLocaleString()} GENERAL AGGREGATE: $${parseInt(formData.glLimitAggregate).toLocaleString()}
AUTOMOBILE LIABILITY Any Auto ☑ Owned Autos Only ☐ Hired Autos Only ☐ Non-Owned Autos Only ☐	${formData.additionalInsured ? '☑' : '☐'}	${formData.waiverOfSubrogation ? '☑' : '☐'}	${formData.autoPolicyNumber}	${formData.autoEffectiveDate}	${formData.autoExpirationDate}	COMBINED SINGLE LIMIT: $${parseInt(formData.autoLiabilityLimit).toLocaleString()}
UMBRELLA LIAB EXCESS LIAB ☐ DED ☐ RETENTION	${formData.additionalInsured ? '☑' : '☐'}	${formData.waiverOfSubrogation ? '☑' : '☐'}	${formData.umbrellaPolicyNumber}	${formData.umbrellaEffectiveDate}	${formData.umbrellaExpirationDate}	EACH OCCURRENCE: $${parseInt(formData.umbrellaLimit).toLocaleString()}
WORKERS COMPENSATION AND EMPLOYERS' LIABILITY Y/N: Y	N/A	${formData.waiverOfSubrogation ? '☑' : '☐'}	${formData.wcPolicyNumber}	${formData.wcEffectiveDate}	${formData.wcExpirationDate}	E.L. EACH ACCIDENT: $${parseInt(formData.wcLimitEL).toLocaleString()} E.L. DISEASE-EA EMPLOYEE: $${parseInt(formData.wcLimitEL).toLocaleString()} E.L. DISEASE-POLICY LIMIT: $${parseInt(formData.wcLimitEL).toLocaleString()}
CARGO INSURANCE	☐	☐	${formData.cargoPolicyNumber}	${formData.cargoEffectiveDate}	${formData.cargoExpirationDate}	LIMIT: $${parseInt(formData.cargoLimit).toLocaleString()}

DESCRIPTION OF OPERATIONS / LOCATIONS / VEHICLES
Moving services at ${formData.propertyAddress}, ${formData.propertyCity}, ${formData.propertyState} ${formData.propertyZip} Move Date: ${formData.moveDate} ${formData.additionalInsured ? 'Certificate Holder is included as Additional Insured.' : ''} ${formData.primaryNonContributory ? 'Insurance is Primary and Non-Contributory.' : ''} ${formData.additionalRemarks}

CERTIFICATE HOLDER	AUTHORIZED REPRESENTATIVE
${formData.holderName} ${formData.holderAddress} ${formData.holderCity}, ${formData.holderState} ${formData.holderZip}	SIGNATURE DATE

{steps.map((step, index) => { const StepIcon = step.icon; const stepNumber = index + 1; const isActive = stepNumber === currentStep; const isCompleted = stepNumber < currentStep; return (

{step.title}

{stepNumber < steps.length && (

)}

); })}

); const renderFormStep = () => { switch(currentStep) { case 1: return (

Certificate Holder

Building management or property owner requiring the COI

Certificate Holder Name * handleInputChange('holderName', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="XYZ Property Management LLC" />

Address * handleInputChange('holderAddress', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="456 Property Ave" />

City handleInputChange('holderCity', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="New York" />

State

ZIP Code handleInputChange('holderZip', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="10001" />

); case 3: return (

Property & Move Details

Information about the property and move date

Property Address * handleInputChange('propertyAddress', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="789 Apartment Building St, Apt 4B" />

City handleInputChange('propertyCity', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="New York" />

State

ZIP Code handleInputChange('propertyZip', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="10001" />

Move Date * handleInputChange('moveDate', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

); case 4: return (

Insurance Provider

Details about your insurance company and agent

Insurance Company * handleInputChange('insuranceCompany', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="ABC Insurance Co." />

Producer/Agent Name * handleInputChange('producerName', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="John Smith Insurance Agency" />

Producer Address handleInputChange('producerAddress', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="123 Insurance Blvd, New York, NY 10001" />

Producer Phone handleInputChange('producerPhone', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="(555) 987-6543" />

Producer Email handleInputChange('producerEmail', e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="agent@insurance.com" />

); case 5: return (

Insurance Coverage Details

Enter policy numbers, dates, and coverage limits

{/* General Liability */}

General Liability

Policy Number * handleInputChange('glPolicyNumber', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="GL123456789" />

Effective Date * handleInputChange('glEffectiveDate', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Expiration Date * handleInputChange('glExpirationDate', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Per Occurrence Limit

Aggregate Limit

{/* Auto Liability */}

Automobile Liability

Policy Number handleInputChange('autoPolicyNumber', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="AUTO123456789" />

Effective Date handleInputChange('autoEffectiveDate', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Expiration Date handleInputChange('autoExpirationDate', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Combined Single Limit

{/* Workers Compensation */}

Workers Compensation

Policy Number handleInputChange('wcPolicyNumber', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="WC123456789" />

Effective Date handleInputChange('wcEffectiveDate', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Expiration Date handleInputChange('wcExpirationDate', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

E.L. Each Accident

{/* Umbrella Liability */}

Umbrella Liability

Policy Number handleInputChange('umbrellaPolicyNumber', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="UMB123456789" />

Effective Date handleInputChange('umbrellaEffectiveDate', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Expiration Date handleInputChange('umbrellaExpirationDate', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Each Occurrence

{/* Cargo Insurance */}

Cargo Insurance

Policy Number handleInputChange('cargoPolicyNumber', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="CARGO123456789" />

Effective Date handleInputChange('cargoEffectiveDate', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Expiration Date handleInputChange('cargoExpirationDate', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Coverage Limit

{/* Additional Options */}

Additional Insurance Options

handleInputChange('additionalInsured', e.target.checked)} className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" /> Certificate Holder is Additional Insured

handleInputChange('waiverOfSubrogation', e.target.checked)} className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" /> Waiver of Subrogation

handleInputChange('primaryNonContributory', e.target.checked)} className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" /> Primary and Non-Contributory

Additional Remarks

handleInputChange('additionalRemarks', e.target.value)}
                  rows={3}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="Any additional requirements or notes..."
                />
              </div>
            </div>
          </div>
        );

case 6:
        return (
          <div className="space-y-6">
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold text-gray-800 mb-2">Review & Generate Certificate</h2>
              <p className="text-gray-600">Review your information and generate the COI</p>
            </div>
            
            {/* Summary Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="bg-blue-50 p-6 rounded-lg">
                <h3 className="font-semibold text-blue-800 mb-3 flex items-center">
                  <Building2 className="mr-2" size={20} />
                  Company Information
                </h3>
                <div className="space-y-2 text-sm">
                  <p><strong>Name:</strong> {formData.companyName}</p>
                  <p><strong>Address:</strong> {formData.companyAddress}</p>
                  <p><strong>Phone:</strong> {formData.companyPhone}</p>
                </div>
              </div>
              
              <div className="bg-gray-50 p-6 rounded-lg">
                <h3 className="font-semibold text-gray-800 mb-3 flex items-center">
                  <FileText className="mr-2" size={20} />
                  Certificate Holder
                </h3>
                <div className="space-y-2 text-sm">
                  <p><strong>Name:</strong> {formData.holderName}</p>
                  <p><strong>Address:</strong> {formData.holderAddress}</p>
                </div>
              </div>
              
              <div className="bg-blue-50 p-6 rounded-lg">
                <h3 className="font-semibold text-blue-800 mb-3 flex items-center">
                  <Shield className="mr-2" size={20} />
                  Insurance Coverage
                </h3>
                <div className="space-y-2 text-sm">
                  <p><strong>General Liability:</strong> ${parseInt(formData.glLimitPerOccurrence).toLocaleString()}</p>
                  <p><strong>Auto Liability:</strong> ${parseInt(formData.autoLiabilityLimit).toLocaleString()}</p>
                  <p><strong>Umbrella:</strong> ${parseInt(formData.umbrellaLimit).toLocaleString()}</p>
                  <p><strong>Cargo:</strong> ${parseInt(formData.cargoLimit).toLocaleString()}</p>
                </div>
              </div>
              
              <div className="bg-gray-50 p-6 rounded-lg">
                <h3 className="font-semibold text-gray-800 mb-3">Move Details</h3>
                <div className="space-y-2 text-sm">
                  <p><strong>Property:</strong> {formData.propertyAddress}</p>
                  <p><strong>Date:</strong> {formData.moveDate}</p>
                  <p><strong>Additional Insured:</strong> {formData.additionalInsured ? 'Yes' : 'No'}</p>
                </div>
              </div>
            </div>

{/* Action Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button
                onClick={() => setShowPreview(!showPreview)}
                className="flex items-center justify-center px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
              >
                {showPreview ? <EyeOff className="mr-2" size={20} /> : <Eye className="mr-2" size={20} />}
                {showPreview ? 'Hide Preview' : 'Show Preview'}
              </button>
              
              <button
                onClick={saveProfile}
                className="flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                <Save className="mr-2" size={20} />
                Save Profile
              </button>
              
              <button
                onClick={generatePDF}
                className="flex items-center justify-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
              >
                <Download className="mr-2" size={20} />
                Generate PDF
              </button>
            </div>

{/* Certificate Preview */}
            {showPreview && (
              <div className="mt-8 p-6 bg-white border-2 border-gray-300 rounded-lg">
                <div className="text-center mb-4">
                  <h3 className="text-lg font-bold">Certificate Preview</h3>
                </div>
                <div 
                  className="text-xs"
                  dangerouslySetInnerHTML={{ __html: generateCertificateHTML() }}
                />
              </div>
            )}
          </div>
        );

default:
        return null;
    }
  };

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="bg-blue-600 p-2 rounded-lg">
                <Shield className="text-white" size={24} />
              </div>
              <div>
                <h1 className="text-2xl font-bold text-gray-900">NYC COI Generator</h1>
                <p className="text-sm text-gray-600">Professional Certificate of Insurance Generator</p>
              </div>
            </div>
            
            {/* Saved Profiles Dropdown */}
            {savedProfiles.length > 0 && (
              <div className="relative">
                <select
                  onChange={(e) => {
                    if (e.target.value) {
                      const profile = savedProfiles.find(p => p.id.toString() === e.target.value);
                      if (profile) loadProfile(profile);
                    }
                  }}
                  className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="">Load Saved Profile</option>
                  {savedProfiles.map(profile => (
                    <option key={profile.id} value={profile.id}>
                      {profile.name}
                    </option>
                  ))}
                </select>
              </div>
            )}
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Step Indicator */}
        {renderStepIndicator()}

{/* Form Content */}
        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
          {renderFormStep()}
        </div>

{/* Navigation Buttons */}
        <div className="flex justify-between items-center">
          <button
            onClick={prevStep}
            disabled={currentStep === 1}
            className={`px-6 py-3 rounded-lg font-medium transition-colors ${
              currentStep === 1
                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                : 'bg-gray-600 text-white hover:bg-gray-700'
            }`}
          >
            Previous Step
          </button>
          
          <div className="text-sm text-gray-500">
            Step {currentStep} of {steps.length}
          </div>
          
          <button
            onClick={nextStep}
            disabled={currentStep === 6 || !validateStep(currentStep)}
            className={`px-6 py-3 rounded-lg font-medium transition-colors ${
              currentStep === 6 || !validateStep(currentStep)
                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                : 'bg-blue-600 text-white hover:bg-blue-700'
            }`}
          >
            {currentStep === 6 ? 'Complete' : 'Next Step'}
          </button>
        </div>

{/* Validation Errors */}
        {!validateStep(currentStep) && (
          <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center">
            <AlertCircle className="text-red-500 mr-2" size={20} />
            <span className="text-red-700 text-sm">
              Please fill in all required fields before proceeding.
            </span>
          </div>
        )}
      </main>

{/* Footer */}
      <footer className="bg-gray-800 text-white py-8 mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <p className="text-gray-400">
              © 2025 NYC COI Generator. Professional Certificate of Insurance solutions for moving companies.
            </p>
            <p className="text-sm text-gray-500 mt-2">
              Always verify coverage requirements with your insurance provider and property management company.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
};

// Render the component
        const container = document.getElementById('root');
        const root = ReactDOM.createRoot(container);
        root.render(<COIGenerator />);
    </script>
</body>
</html>