Aller au contenu

Production

Contrôle qualité

Disponible

Relevé de contrôle qualité en plusieurs étapes : sélection du lot, saisie des mesures, verdict conforme / non-conforme et pièce jointe du certificat. Score de conformité, répartition des défauts et alerte de non-conformité. Pour valider la qualité en fin d'opération.

Rendu multi-framework

Contrôle qualité · LOT-2026-0412 (données mock)

  1. Sélection du lot Terminé
  2. Saisie des mesures Terminé
  3. 3 Verdict En cours
  4. 4 Certificat

Score de conformité

87 %

Pièces inspectées

115 / 120

Non-conformités

15

Répartition des défauts — Lot LOT-2026-0412

  • Conforme: 87 (87%)
  • Défaut mineur: 9 (9.0%)
  • Défaut majeur: 4 (4.0%)

Non-conformité détectée

13 pièces présentent des défauts majeurs ou mineurs sur le lot LOT-2026-0412. Veuillez compléter le verdict et joindre le certificat de contrôle avant validation.

Étape 3 · Verdict et certification

ConformeNon-conforme
Voir le code (Svelte) 
<div class="qi-shell">
  <Stepper
    current={2}
    label="Contrôle qualité"
    steps={[{"label":"Sélection du lot","description":"Terminé"},{"label":"Saisie des mesures","description":"Terminé"},{"label":"Verdict","description":"En cours"},{"label":"Certificat"}]}
  />
  <div class="qi-kpis">
    <KpiCard label="Score de conformité" value="87 %" tone="category1" />
    <KpiCard label="Pièces inspectées" value="115 / 120" tone="category2" />
    <KpiCard label="Non-conformités" value="15" tone="category3" />
  </div>
  <div class="qi-section">
    <h3 class="qi-section-title">Répartition des défauts — Lot LOT-2026-0412</h3>
    <DonutChart
      data={[{"label":"Conforme","value":87,"tone":"category1"},{"label":"Défaut mineur","value":9,"tone":"category2"},{"label":"Défaut majeur","value":4,"tone":"category3"}]}
      centerLabel="Répartition"
    />
  </div>
  <Alert tone="danger" title="Non-conformité détectée">13 pièces présentent des défauts majeurs ou mineurs sur le lot LOT-2026-0412. Veuillez compléter le verdict et joindre le certificat de contrôle avant validation.</Alert>
  <div class="qi-section">
    <h3 class="qi-section-title">Étape 3 · Verdict et certification</h3>
    <Input
      label="Commentaire de l'inspecteur"
      placeholder="Ex. : défauts de soudure sur 4 pièces de la série B"
      value=""
    />
    <div class="qi-verdict-row">
      <Badge tone="success">Conforme</Badge>
      <Badge tone="danger">Non-conforme</Badge>
    </div>
    <FileUploader
      label="Certificat de contrôle (PDF ou image)"
      accept=".pdf,.png,.jpg"
      buttonLabel="Joindre le certificat"
    />
  </div>
  <div class="qi-actions">
    <Button variant="secondary">Précédent</Button>
    <Button variant="primary">Valider le contrôle</Button>
  </div>
</div>

Composants DS utilisés