Quality Check

Manufacturing QC inspection form with pass/fail selectors, checklist items, measurement inputs, defect tagging, photo attachments, and results summary.

Check Form with Pass/Fail

Preview

Incoming Material Inspection

WO-2024-0912 — ERPlora Servo Motor Controller

In Progress

Inspector Carlos Vega

Date Feb 7, 2026

Batch LOT-2026-0412

Sample Size 5 / 200

Visual Inspection

Surface Finish*

Check for scratches, dents, or discoloration on all surfaces

Label Alignment*

Verify product label is centered and legible

Defect Category

Misaligned Torn Missing Wrong SKU

Notes

Color Consistency

Compare color against reference sample

<div class="quality-check">
  <div class="quality-check-header">
    <div>
      <h3 class="quality-check-title">Incoming Material Inspection</h3>
      <div class="quality-check-subtitle">WO-2024-0912 — ERPlora Servo Motor Controller</div>
    </div>
    <span class="quality-check-status quality-check-status-pending">
      <svg class="quality-check-status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      In Progress
    </span>
  </div>
  <div class="quality-check-meta">
    <div class="quality-check-meta-item">
      <span class="quality-check-meta-label">Inspector</span>
      <span class="quality-check-meta-value">Carlos Vega</span>
    </div>
    <div class="quality-check-meta-item">
      <span class="quality-check-meta-label">Date</span>
      <span class="quality-check-meta-value">Feb 7, 2026</span>
    </div>
    <div class="quality-check-meta-item">
      <span class="quality-check-meta-label">Batch</span>
      <span class="quality-check-meta-value">LOT-2026-0412</span>
    </div>
    <div class="quality-check-meta-item">
      <span class="quality-check-meta-label">Sample Size</span>
      <span class="quality-check-meta-value">5 / 200</span>
    </div>
  </div>
  <div class="quality-check-body">
    <div class="quality-check-section">
      <h4 class="quality-check-section-title">Visual Inspection</h4>

      <!-- Pass item -->
      <div class="quality-check-item quality-check-item-pass">
        <div class="quality-check-item-header">
          <div class="quality-check-item-info">
            <h5 class="quality-check-item-name">Surface Finish<span class="quality-check-item-required">*</span></h5>
            <div class="quality-check-item-description">Check for scratches, dents, or discoloration on all surfaces</div>
          </div>
          <div class="quality-check-selector">
            <button class="quality-check-selector-btn quality-check-selector-btn-pass quality-check-selector-btn-active">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
            <button class="quality-check-selector-btn quality-check-selector-btn-fail">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
            <button class="quality-check-selector-btn quality-check-selector-btn-na">N/A</button>
          </div>
        </div>
      </div>

      <!-- Fail item -->
      <div class="quality-check-item quality-check-item-fail">
        <div class="quality-check-item-header">
          <div class="quality-check-item-info">
            <h5 class="quality-check-item-name">Label Alignment<span class="quality-check-item-required">*</span></h5>
            <div class="quality-check-item-description">Verify product label is centered and legible</div>
          </div>
          <div class="quality-check-selector">
            <button class="quality-check-selector-btn quality-check-selector-btn-pass">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
            <button class="quality-check-selector-btn quality-check-selector-btn-fail quality-check-selector-btn-active">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
            <button class="quality-check-selector-btn quality-check-selector-btn-na">N/A</button>
          </div>
        </div>
        <div class="quality-check-defect">
          <span class="quality-check-defect-label">Defect Category</span>
          <div class="quality-check-defect-tags">
            <span class="quality-check-defect-tag quality-check-defect-tag-active">Misaligned</span>
            <span class="quality-check-defect-tag">Torn</span>
            <span class="quality-check-defect-tag">Missing</span>
            <span class="quality-check-defect-tag">Wrong SKU</span>
          </div>
        </div>
        <div class="quality-check-notes">
          <label class="quality-check-notes-label">Notes</label>
          <textarea class="quality-check-notes-input" placeholder="Describe the defect...">Label shifted 3mm to the right on 2 of 5 samples.</textarea>
        </div>
      </div>

      <!-- Unchecked item -->
      <div class="quality-check-item">
        <div class="quality-check-item-header">
          <div class="quality-check-item-info">
            <h5 class="quality-check-item-name">Color Consistency</h5>
            <div class="quality-check-item-description">Compare color against reference sample</div>
          </div>
          <div class="quality-check-selector">
            <button class="quality-check-selector-btn quality-check-selector-btn-pass">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
            <button class="quality-check-selector-btn quality-check-selector-btn-fail">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
            <button class="quality-check-selector-btn quality-check-selector-btn-na">N/A</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col overflow-hidden bg-base-100 rounded-box">
  <div class="flex items-center justify-between p-6 border-b border-base-300">
    <div>
      <h3 class="text-lg font-semibold m-0">Incoming Material Inspection</h3>
      <div class="text-sm text-base-content/60 mt-1">WO-2024-0912 — ERPlora Servo Motor Controller</div>
    </div>
    <span class="flex items-center gap-2 text-sm font-medium rounded-full py-2 px-4 bg-warning/15 text-warning">
      <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      In Progress
    </span>
  </div>
  <div class="flex flex-wrap gap-x-8 gap-y-4 text-sm p-4 px-6 bg-base-200">
    <div class="flex flex-col gap-0.5"><span class="text-xs uppercase text-base-content/40 tracking-wide">Inspector</span><span class="font-medium">Carlos Vega</span></div>
    <div class="flex flex-col gap-0.5"><span class="text-xs uppercase text-base-content/40 tracking-wide">Date</span><span class="font-medium">Feb 7, 2026</span></div>
    <div class="flex flex-col gap-0.5"><span class="text-xs uppercase text-base-content/40 tracking-wide">Batch</span><span class="font-medium">LOT-2026-0412</span></div>
    <div class="flex flex-col gap-0.5"><span class="text-xs uppercase text-base-content/40 tracking-wide">Sample Size</span><span class="font-medium">5 / 200</span></div>
  </div>
  <div class="p-6">
    <h4 class="text-base font-semibold mb-4 pb-2 border-b border-base-300">Visual Inspection</h4>
    <!-- Pass item -->
    <div class="flex flex-col p-4 border border-success bg-success/2 rounded-field mb-2">
      <div class="flex items-start justify-between gap-4">
        <div class="flex-1 min-w-0"><h5 class="text-base font-medium m-0">Surface Finish<span class="text-error ml-0.5">*</span></h5><div class="text-sm text-base-content/60 mt-1">Check for scratches, dents, or discoloration</div></div>
        <div class="flex shrink-0 gap-1">
          <button class="flex items-center justify-center w-10 h-10 rounded-field bg-success border-success text-white"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></button>
          <button class="flex items-center justify-center w-10 h-10 rounded-field bg-base-100 border border-base-300 text-base-content/60"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
          <button class="flex items-center justify-center w-10 h-10 rounded-field bg-base-100 border border-base-300 text-base-content/60 text-sm">N/A</button>
        </div>
      </div>
    </div>
    <!-- Fail item -->
    <div class="flex flex-col p-4 border border-error bg-error/2 rounded-field mb-2">
      <div class="flex items-start justify-between gap-4">
        <div class="flex-1 min-w-0"><h5 class="text-base font-medium m-0">Label Alignment<span class="text-error ml-0.5">*</span></h5><div class="text-sm text-base-content/60 mt-1">Verify product label is centered and legible</div></div>
        <div class="flex shrink-0 gap-1">
          <button class="flex items-center justify-center w-10 h-10 rounded-field bg-base-100 border border-base-300 text-base-content/60"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></button>
          <button class="flex items-center justify-center w-10 h-10 rounded-field bg-error border-error text-white"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
          <button class="flex items-center justify-center w-10 h-10 rounded-field bg-base-100 border border-base-300 text-base-content/60 text-sm">N/A</button>
        </div>
      </div>
      <div class="mt-4 pt-4 border-t border-base-300">
        <span class="block text-sm text-base-content/60 mb-2">Defect Category</span>
        <div class="flex flex-wrap gap-1">
          <span class="inline-flex items-center text-xs px-2 py-1 rounded-full bg-error/10 border border-error text-error">Misaligned</span>
          <span class="inline-flex items-center text-xs px-2 py-1 rounded-full bg-base-100 border border-base-300 text-base-content/60">Torn</span>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Toggle pass/fail/na on click
document.querySelectorAll('.quality-check-selector').forEach(sel => {
  sel.querySelectorAll('.quality-check-selector-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      // Remove active from all buttons in this selector
      sel.querySelectorAll('.quality-check-selector-btn').forEach(b =>
        b.classList.remove('quality-check-selector-btn-active'));
      btn.classList.add('quality-check-selector-btn-active');

      // Update item border color
      const item = btn.closest('.quality-check-item');
      item.classList.remove('quality-check-item-pass', 'quality-check-item-fail', 'quality-check-item-na');
      if (btn.classList.contains('quality-check-selector-btn-pass'))
        item.classList.add('quality-check-item-pass');
      else if (btn.classList.contains('quality-check-selector-btn-fail'))
        item.classList.add('quality-check-item-fail');
      else
        item.classList.add('quality-check-item-na');
    });
  });
});

Checklist with Measurements

Preview

Dimensional Inspection

ERPlora Titanium Shaft — ERP-TS-080

Pending

Critical Dimensions

Outer Diameter*

Measure at 3 points along shaft

Measured Value

In range 24.95 - 25.05 mm

Shaft Length*

End-to-end measurement

Measured Value

Out of range 150.0 - 150.5 mm

Surface Roughness

Ra value using profilometer

Measured Value

Ra μm

Tolerance: 0.4 - 1.6 Ra μm

<div class="quality-check">
  <div class="quality-check-header">
    <div>
      <h3 class="quality-check-title">Dimensional Inspection</h3>
      <div class="quality-check-subtitle">ERPlora Titanium Shaft — ERP-TS-080</div>
    </div>
    <span class="quality-check-status quality-check-status-pending">
      <svg class="quality-check-status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      Pending
    </span>
  </div>
  <div class="quality-check-body">
    <div class="quality-check-section">
      <h4 class="quality-check-section-title">Critical Dimensions</h4>

      <div class="quality-check-item quality-check-item-pass">
        <div class="quality-check-item-header">
          <div class="quality-check-item-info">
            <h5 class="quality-check-item-name">Outer Diameter<span class="quality-check-item-required">*</span></h5>
            <div class="quality-check-item-description">Measure at 3 points along shaft</div>
          </div>
          <div class="quality-check-selector">
            <button class="quality-check-selector-btn quality-check-selector-btn-pass quality-check-selector-btn-active">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
            <button class="quality-check-selector-btn quality-check-selector-btn-fail">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
          </div>
        </div>
        <div class="quality-check-measurement">
          <label class="quality-check-measurement-label">Measured Value</label>
          <div class="quality-check-measurement-row">
            <input type="text" class="quality-check-measurement-input quality-check-measurement-input-success" value="25.02">
            <span class="quality-check-measurement-unit">mm</span>
          </div>
          <div class="quality-check-tolerance quality-check-tolerance-in-range">
            <span>In range</span>
            <span class="quality-check-tolerance-range">24.95 - 25.05 mm</span>
          </div>
        </div>
      </div>

      <div class="quality-check-item quality-check-item-fail">
        <div class="quality-check-item-header">
          <div class="quality-check-item-info">
            <h5 class="quality-check-item-name">Shaft Length<span class="quality-check-item-required">*</span></h5>
            <div class="quality-check-item-description">End-to-end measurement</div>
          </div>
          <div class="quality-check-selector">
            <button class="quality-check-selector-btn quality-check-selector-btn-pass">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
            <button class="quality-check-selector-btn quality-check-selector-btn-fail quality-check-selector-btn-active">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
          </div>
        </div>
        <div class="quality-check-measurement">
          <label class="quality-check-measurement-label">Measured Value</label>
          <div class="quality-check-measurement-row">
            <input type="text" class="quality-check-measurement-input quality-check-measurement-input-error" value="152.8">
            <span class="quality-check-measurement-unit">mm</span>
          </div>
          <div class="quality-check-tolerance quality-check-tolerance-out-of-range">
            <span>Out of range</span>
            <span class="quality-check-tolerance-range">150.0 - 150.5 mm</span>
          </div>
        </div>
      </div>

      <div class="quality-check-item">
        <div class="quality-check-item-header">
          <div class="quality-check-item-info">
            <h5 class="quality-check-item-name">Surface Roughness</h5>
            <div class="quality-check-item-description">Ra value using profilometer</div>
          </div>
          <div class="quality-check-selector">
            <button class="quality-check-selector-btn quality-check-selector-btn-pass">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
            <button class="quality-check-selector-btn quality-check-selector-btn-fail">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
          </div>
        </div>
        <div class="quality-check-measurement">
          <label class="quality-check-measurement-label">Measured Value</label>
          <div class="quality-check-measurement-row">
            <input type="text" class="quality-check-measurement-input" placeholder="Enter value...">
            <span class="quality-check-measurement-unit">Ra &mu;m</span>
          </div>
          <div class="quality-check-tolerance">
            <span>Tolerance:</span>
            <span class="quality-check-tolerance-range">0.4 - 1.6 Ra &mu;m</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Measurement inputs use .quality-check-measurement-input with
     .quality-check-measurement-input-success (green border) or
     .quality-check-measurement-input-error (red border) for validation.
     Tolerance display uses .quality-check-tolerance-in-range (green) or
     .quality-check-tolerance-out-of-range (red). -->

Requires: tw.min.css

// Auto-validate measurement against tolerance
function validateMeasurement(input, min, max) {
  const val = parseFloat(input.value);
  const item = input.closest('.quality-check-item');
  const tolerance = item.querySelector('.quality-check-tolerance');

  input.classList.remove(
    'quality-check-measurement-input-success',
    'quality-check-measurement-input-error'
  );
  tolerance.classList.remove(
    'quality-check-tolerance-in-range',
    'quality-check-tolerance-out-of-range'
  );

  if (isNaN(val)) return;

  if (val >= min && val <= max) {
    input.classList.add('quality-check-measurement-input-success');
    tolerance.classList.add('quality-check-tolerance-in-range');
    tolerance.querySelector('span').textContent = 'In range';
  } else {
    input.classList.add('quality-check-measurement-input-error');
    tolerance.classList.add('quality-check-tolerance-out-of-range');
    tolerance.querySelector('span').textContent = 'Out of range';
  }
}

Results Summary

Preview

Final Assembly QC Report

ERPlora Hydraulic Valve Assembly — Batch LOT-2026-0390

Failed

Inspection Results

Passed

Failed

N/A

Pending

8 passed, 2 failed, 1 N/A, 1 pending of 12 checks

Sign Off

Inspector

C. Vega

Supervisor

Tap to sign

Completed: Feb 7, 2026 at 14:32

<div class="quality-check">
  <div class="quality-check-header">
    <div>
      <h3 class="quality-check-title">Final Assembly QC Report</h3>
      <div class="quality-check-subtitle">ERPlora Hydraulic Valve Assembly — Batch LOT-2026-0390</div>
    </div>
    <span class="quality-check-status quality-check-status-fail">
      <svg class="quality-check-status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
      Failed
    </span>
  </div>
  <div class="quality-check-summary">
    <h4 class="quality-check-summary-title">Inspection Results</h4>
    <div class="quality-check-summary-stats">
      <div class="quality-check-summary-stat">
        <div class="quality-check-summary-stat-icon quality-check-summary-stat-icon-pass">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div>
          <div class="quality-check-summary-stat-value">8</div>
          <div class="quality-check-summary-stat-label">Passed</div>
        </div>
      </div>
      <div class="quality-check-summary-stat">
        <div class="quality-check-summary-stat-icon quality-check-summary-stat-icon-fail">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </div>
        <div>
          <div class="quality-check-summary-stat-value">2</div>
          <div class="quality-check-summary-stat-label">Failed</div>
        </div>
      </div>
      <div class="quality-check-summary-stat">
        <div class="quality-check-summary-stat-icon quality-check-summary-stat-icon-na">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
        </div>
        <div>
          <div class="quality-check-summary-stat-value">1</div>
          <div class="quality-check-summary-stat-label">N/A</div>
        </div>
      </div>
      <div class="quality-check-summary-stat">
        <div class="quality-check-summary-stat-icon quality-check-summary-stat-icon-pending">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        </div>
        <div>
          <div class="quality-check-summary-stat-value">1</div>
          <div class="quality-check-summary-stat-label">Pending</div>
        </div>
      </div>
    </div>
    <div class="quality-check-progress">
      <div class="quality-check-progress-bar">
        <div class="quality-check-progress-pass" style="width: 66.7%"></div>
        <div class="quality-check-progress-fail" style="width: 16.7%"></div>
        <div class="quality-check-progress-na" style="width: 8.3%"></div>
      </div>
    </div>
    <div class="quality-check-progress-text">8 passed, 2 failed, 1 N/A, 1 pending of 12 checks</div>
  </div>
  <div class="quality-check-signature">
    <h4 class="quality-check-signature-title">Sign Off</h4>
    <div class="quality-check-signature-row">
      <div class="quality-check-signature-field">
        <label class="quality-check-signature-label">Inspector</label>
        <div class="quality-check-signature-pad quality-check-signature-pad-signed">
          <span style="font-family: 'Brush Script MT', cursive; font-size: 1.5rem; color: var(--color-base-content);">C. Vega</span>
        </div>
      </div>
      <div class="quality-check-signature-field">
        <label class="quality-check-signature-label">Supervisor</label>
        <div class="quality-check-signature-pad">
          <span class="quality-check-signature-placeholder">Tap to sign</span>
        </div>
      </div>
    </div>
    <div class="quality-check-timestamp">
      <span class="quality-check-timestamp-label">Completed:</span>
      Feb 7, 2026 at 14:32
    </div>
  </div>
  <div class="quality-check-footer">
    <div class="quality-check-actions">
      <button class="btn btn-error">Reject Batch</button>
      <button class="btn btn-outline">Request Re-inspection</button>
    </div>
    <button class="btn btn-outline btn-sm">
      <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
      Export PDF
    </button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col overflow-hidden bg-base-100 rounded-box">
  <div class="flex items-center justify-between p-6 border-b border-base-300">
    <div><h3 class="text-lg font-semibold m-0">Final Assembly QC Report</h3><div class="text-sm text-base-content/60 mt-1">ERPlora Hydraulic Valve Assembly</div></div>
    <span class="flex items-center gap-2 text-sm font-medium rounded-full py-2 px-4 bg-error/15 text-error">
      <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
      Failed
    </span>
  </div>
  <!-- Summary -->
  <div class="p-6 bg-base-200 border-t border-base-300">
    <h4 class="text-base font-semibold mb-4">Inspection Results</h4>
    <div class="flex flex-wrap gap-6 mb-6">
      <div class="flex items-center gap-2"><div class="flex items-center justify-center w-8 h-8 rounded-field bg-success/15 text-success"><svg class="w-4.5 h-4.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div><div><div class="text-xl font-semibold">8</div><div class="text-xs text-base-content/60">Passed</div></div></div>
      <div class="flex items-center gap-2"><div class="flex items-center justify-center w-8 h-8 rounded-field bg-error/15 text-error"><svg class="w-4.5 h-4.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div><div><div class="text-xl font-semibold">2</div><div class="text-xs text-base-content/60">Failed</div></div></div>
      <div class="flex items-center gap-2"><div class="flex items-center justify-center w-8 h-8 rounded-field bg-base-content/10 text-base-content/50"><svg class="w-4.5 h-4.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></div><div><div class="text-xl font-semibold">1</div><div class="text-xs text-base-content/60">N/A</div></div></div>
    </div>
    <div class="h-2 bg-base-300 rounded-full overflow-hidden flex mb-2"><div class="bg-success" style="width: 66.7%"></div><div class="bg-error" style="width: 16.7%"></div><div class="bg-base-content/50" style="width: 8.3%"></div></div>
    <div class="text-sm text-center text-base-content/60">8 passed, 2 failed, 1 N/A, 1 pending of 12 checks</div>
  </div>
  <!-- Footer -->
  <div class="flex items-center justify-between gap-4 p-6 border-t border-base-300">
    <div class="flex gap-2"><button class="btn btn-error">Reject Batch</button><button class="btn btn-outline">Re-inspect</button></div>
    <button class="btn btn-outline btn-sm">Export PDF</button>
  </div>
</div>

Requires: tw.min.css

// Calculate summary from check items
function calculateSummary(formEl) {
  const items = formEl.querySelectorAll('.quality-check-item');
  let pass = 0, fail = 0, na = 0, pending = 0;
  items.forEach(item => {
    if (item.classList.contains('quality-check-item-pass')) pass++;
    else if (item.classList.contains('quality-check-item-fail')) fail++;
    else if (item.classList.contains('quality-check-item-na')) na++;
    else pending++;
  });
  const total = pass + fail + na + pending;
  // Update summary stat values and progress bar widths
  return { pass, fail, na, pending, total };
}

Passed QC Report

Preview

Pre-ship QC Inspection

ERPlora Precision Gear Assembly — WO-2024-0830

Passed

Inspector Maria Sanchez

Date Feb 6, 2026

Batch LOT-2026-0405

Inspection Results

Passed

Failed

All 10 checks passed

Sign Off

Inspector

M. Sanchez

Supervisor

R. Torres

Completed: Feb 6, 2026 at 16:45

<div class="quality-check">
  <div class="quality-check-header">
    <div>
      <h3 class="quality-check-title">Pre-ship QC Inspection</h3>
      <div class="quality-check-subtitle">ERPlora Precision Gear Assembly — WO-2024-0830</div>
    </div>
    <span class="quality-check-status quality-check-status-pass">
      <svg class="quality-check-status-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
      Passed
    </span>
  </div>
  <div class="quality-check-meta">
    <div class="quality-check-meta-item">
      <span class="quality-check-meta-label">Inspector</span>
      <span class="quality-check-meta-value">Maria Sanchez</span>
    </div>
    <div class="quality-check-meta-item">
      <span class="quality-check-meta-label">Date</span>
      <span class="quality-check-meta-value">Feb 6, 2026</span>
    </div>
    <div class="quality-check-meta-item">
      <span class="quality-check-meta-label">Batch</span>
      <span class="quality-check-meta-value">LOT-2026-0405</span>
    </div>
  </div>
  <div class="quality-check-summary">
    <h4 class="quality-check-summary-title">Inspection Results</h4>
    <div class="quality-check-summary-stats">
      <div class="quality-check-summary-stat">
        <div class="quality-check-summary-stat-icon quality-check-summary-stat-icon-pass">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div>
          <div class="quality-check-summary-stat-value">10</div>
          <div class="quality-check-summary-stat-label">Passed</div>
        </div>
      </div>
      <div class="quality-check-summary-stat">
        <div class="quality-check-summary-stat-icon quality-check-summary-stat-icon-fail">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </div>
        <div>
          <div class="quality-check-summary-stat-value">0</div>
          <div class="quality-check-summary-stat-label">Failed</div>
        </div>
      </div>
    </div>
    <div class="quality-check-progress">
      <div class="quality-check-progress-bar">
        <div class="quality-check-progress-pass" style="width: 100%"></div>
      </div>
    </div>
    <div class="quality-check-progress-text">All 10 checks passed</div>
  </div>
  <div class="quality-check-signature">
    <h4 class="quality-check-signature-title">Sign Off</h4>
    <div class="quality-check-signature-row">
      <div class="quality-check-signature-field">
        <label class="quality-check-signature-label">Inspector</label>
        <div class="quality-check-signature-pad quality-check-signature-pad-signed">
          <span style="font-family: 'Brush Script MT', cursive; font-size: 1.5rem; color: var(--color-base-content);">M. Sanchez</span>
        </div>
      </div>
      <div class="quality-check-signature-field">
        <label class="quality-check-signature-label">Supervisor</label>
        <div class="quality-check-signature-pad quality-check-signature-pad-signed">
          <span style="font-family: 'Brush Script MT', cursive; font-size: 1.5rem; color: var(--color-base-content);">R. Torres</span>
        </div>
      </div>
    </div>
    <div class="quality-check-timestamp">
      <span class="quality-check-timestamp-label">Completed:</span>
      Feb 6, 2026 at 16:45
    </div>
  </div>
  <div class="quality-check-footer">
    <div class="quality-check-actions">
      <button class="btn btn-success">Approve &amp; Ship</button>
    </div>
    <button class="btn btn-outline btn-sm">Export PDF</button>
  </div>
</div>

Requires: ux.min.css

<!-- Use .quality-check-status-pass for the green "Passed" badge in the header.
     A 100% green progress bar and signed signature pads indicate a completed successful inspection. -->

Requires: tw.min.css

// No JS needed for a completed report — all states are set via CSS classes.

Classes Reference

Class	Description
`.quality-check`	Main container
`.quality-check-header`	Header with title, subtitle, and status
`.quality-check-title`	Title heading
`.quality-check-subtitle`	Subtitle text
`.quality-check-status`	Status badge pill
`.quality-check-status-pending`	Pending / in-progress status (warning yellow)
`.quality-check-status-pass`	Passed status (success green)
`.quality-check-status-fail`	Failed status (error red)
`.quality-check-meta`	Meta info bar (inspector, date, batch, etc.)
`.quality-check-body`	Body content area
`.quality-check-section`	Section group with title
`.quality-check-section-title`	Section heading with bottom border
`.quality-check-item`	Single checklist item card
`.quality-check-item-pass`	Passed item (green border)
`.quality-check-item-fail`	Failed item (red border)
`.quality-check-item-na`	N/A item (muted, reduced opacity)
`.quality-check-selector`	Pass / Fail / N/A button group
`.quality-check-selector-btn`	Individual selector button (40x40)
`.quality-check-selector-btn-pass`	Pass button (green when active)
`.quality-check-selector-btn-fail`	Fail button (red when active)
`.quality-check-selector-btn-na`	N/A button (gray when active)
`.quality-check-selector-btn-active`	Active state modifier for selector buttons
`.quality-check-measurement`	Measurement input section
`.quality-check-measurement-input`	Monospace measurement input field
`.quality-check-measurement-input-success`	In-range input (green border)
`.quality-check-measurement-input-error`	Out-of-range input (red border)
`.quality-check-tolerance`	Tolerance range display
`.quality-check-tolerance-in-range`	In-range indicator (green)
`.quality-check-tolerance-out-of-range`	Out-of-range indicator (red)
`.quality-check-defect-tag`	Defect category tag pill
`.quality-check-defect-tag-active`	Selected defect tag (red)
`.quality-check-notes-input`	Notes / comments textarea
`.quality-check-photos`	Photo attachment section
`.quality-check-photo-add`	Add photo button (dashed border)
`.quality-check-summary`	Results summary section
`.quality-check-summary-stats`	Stats row (pass, fail, N/A, pending counts)
`.quality-check-progress`	Stacked progress bar container
`.quality-check-progress-pass`	Green segment of progress bar
`.quality-check-progress-fail`	Red segment of progress bar
`.quality-check-progress-na`	Gray segment of progress bar
`.quality-check-signature`	Signature section
`.quality-check-signature-pad`	Signature pad area (dashed border)
`.quality-check-signature-pad-signed`	Signed state (solid green border)
`.quality-check-footer`	Footer with action buttons
`.quality-check.glass`	Glass morphism variant