Quality Control & Defect Tracking

Log inspection batches, track defect rates, and prioritize fixes with Pareto analysis.

Overview

Quality Control & Defect Tracking is a single-page browser app for manufacturing and operations teams who need to record QC batches, monitor pass/fail status, and spot recurring defect types. Log batches in a form, review color-coded rates in a grid, group by product, chart Pareto and trend lines, import or export Excel workbooks, and resume work with automatic browser save.

Key features

Summary cards

• Total batches — count of logged inspection batches.
• Avg defect rate — mean defect rate % across all batches.
• Failed batches — batches with Fail status.
• Total defects — sum of defects found across batches.
• Cards update when batches are added, imported, or deleted.

Log inspection batch form

• Alpine.js form with batch ID, product selector, defects found, total units, primary defect type, inspection date, and status (Pass / Review / Fail).
• Defect rate auto-calculates as defects ÷ total units × 100 and previews with color coding before submit.
• Log batch adds a row to the grid and refreshes charts and summary cards.

Pareto chart

• Chart.js combined bar and line chart for the top five defect types.
• Bars show defect counts; red line shows cumulative percentage for 80/20 analysis.
• Updates when batches change or import adds new data.

Defect rate trend

• Line chart plots defect rate % by batch ID in inspection-date order.
• Helps spot whether quality is improving or worsening over recent batches.

QC batch grid

• AG Grid with Batch ID, Product, Defects Found, Total Units, Defect Rate, Status, and Inspect Date.
• Defect rate and status columns use green, amber, and red color coding.
• Delete removes a batch; optional Group by product adds pinned subtotal rows per product.

Excel import and export

• Export Excel downloads `quality-control-batches.xlsx` with QC Batches and Defect Pareto sheets.
• Import Excel merges rows from a spreadsheet with the same column layout.

Theme and persistence

• Dark mode toggle (☀️ / 🌙) with Tailwind class switching and theme-aware AG Grid and Chart.js colors.
• Batches and next ID auto-save to browser localStorage on every change; dark mode preference is remembered.

Data & persistence

Sample data includes six inspection batches across Widget Pro, Widget Lite, Gear Assembly, and Sensor Module with varied defect types (Scratch, Dent, Crack, Misalign). Edits auto-save to localStorage; sample data loads when no saved state exists. Excel import/export uses SheetJS.

Charts & reporting

Chart.js powers the Pareto defect-type chart and the defect-rate trend line. Four KPI summary cards summarize batch volume and quality metrics. Pinned product subtotals appear when grouping is enabled.

Built with

Tailwind CSS, Alpine.js, AG Grid Community, Chart.js, and SheetJS (xlsx).

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.