Suivi des SLA

<div class="sla-layout">
  <div class="sla-filters">
    <DatePicker label="Période" value="2026-06-01/2026-06-30" />
    <Select
      label="File"
      value="all"
      options={[{"value":"all","label":"Toutes"},{"value":"prod","label":"Production"},{"value":"sec","label":"Sécurité"},{"value":"perf","label":"Performance"}]}
    />
    <Select
      label="Priorité"
      value="all"
      options={[{"value":"all","label":"Toutes"},{"value":"critical","label":"Critique"},{"value":"high","label":"Haute"},{"value":"medium","label":"Moyenne"}]}
    />
  </div>
  <Alert tone="danger" title="2 tickets en dépassement SLA">INC-4821 (Panne module paiement) dépasse le SLA de 2h 15min. Action immédiate requise.</Alert>
  <div class="sla-kpi-row">
    <KpiCard
      label="Taux de respect SLA"
      value={0.847}
      format="percent"
      delta={-0.023}
      deltaFormat="percent"
      tone="category2"
    />
    <KpiCard
      label="Tickets en dépassement"
      value={8}
      delta={3}
      deltaFormat="absolute"
      tone="danger"
    />
    <KpiCard
      label="Tickets à risque"
      value={14}
      delta={-2}
      deltaFormat="absolute"
      tone="warning"
    />
    <KpiCard label="Délai moyen de résolution" value="4h 32min" tone="category3" />
  </div>
  <div class="sla-body">
    <div class="sla-pie-panel">
      <h3 class="sla-panel-title">Répartition par sévérité</h3>
      <DonutChart
        centerLabel="Tickets ouverts par sévérité"
        data={[{"label":"Critique","value":8,"tone":"danger"},{"label":"Haute","value":21,"tone":"warning"},{"label":"Moyenne","value":43,"tone":"category2"},{"label":"Basse","value":28,"tone":"category1"}]}
      />
    </div>
    <div class="sla-grid-panel">
      <div class="sla-grid-header">
        <h3 class="sla-panel-title">Tickets à risque ou en dépassement</h3>
        <Badge tone="danger">6 affichés</Badge>
      </div>
      <DataGrid
        columns={[{"key":"ref","label":"#","sortable":true},{"key":"sujet","label":"Sujet","sortable":true},{"key":"severite","label":"Sévérité","sortable":true},{"key":"file","label":"File","sortable":true},{"key":"echeance","label":"Échéance","sortable":true},{"key":"restant","label":"Restant","sortable":true},{"key":"statut","label":"Statut","sortable":true}]}
        rows={[{"id":"1","ref":"INC-4821","sujet":"Panne module paiement","severite":"Critique","file":"Production","echeance":"2026-06-19 10:00","restant":"-2h 15min","statut":"Dépassé"},{"id":"2","ref":"INC-4817","sujet":"Erreur authentification SSO","severite":"Critique","file":"Sécurité","echeance":"2026-06-19 11:30","restant":"47min","statut":"À risque"},{"id":"3","ref":"INC-4809","sujet":"Export rapport lent (>5 min)","severite":"Haute","file":"Performance","echeance":"2026-06-19 14:00","restant":"3h 12min","statut":"À risque"},{"id":"4","ref":"INC-4803","sujet":"Doublons synchronisation agenda","severite":"Haute","file":"Intégrations","echeance":"2026-06-19 16:45","restant":"5h 57min","statut":"En cours"},{"id":"5","ref":"INC-4798","sujet":"Alerte quota stockage","severite":"Moyenne","file":"Infrastructure","echeance":"2026-06-20 09:00","restant":"1j 1h","statut":"En cours"},{"id":"6","ref":"INC-4791","sujet":"Traduction manquante (DE)","severite":"Basse","file":"Localisation","echeance":"2026-06-22 18:00","restant":"3j 9h","statut":"Ouvert"}]}
        size="sm"
        pageSize={6}
      />
    </div>
  </div>
</div>