init projet

2026-05-20 10:43:18 +02:00
parent 51f27903bb
commit 9a402b0b34
57 changed files with 5622 additions and 0 deletions
@@ -0,0 +1,64 @@
+/* Carte affichée dans le dashboard pour chaque monitoring */
+
+import { useNavigate } from 'react-router-dom';
+import Badge from './Badge';
+import styles from './MonitoringCard.module.css';
+
+/* Détermine le statut visuel selon le nombre d'erreurs */
+function getStatut(nbErreurs) {
+  if (nbErreurs === 0) return { label: 'OK', variant: 'ok', color: 'var(--color-ok)' };
+  if (nbErreurs < 10) return { label: 'Attention', variant: 'warning', color: 'var(--color-warning)' };
+  return { label: 'Critique', variant: 'critical', color: 'var(--color-primary)' };
+}
+
+export default function MonitoringCard({ monitoring }) {
+  const navigate = useNavigate();
+  const nbErreurs = monitoring.nb_erreurs ?? monitoring.count ?? 0;
+  const monitoringId = monitoring.id ?? monitoring.id_monito;
+  const statut = getStatut(nbErreurs);
+
+  /* Calcul du pourcentage de la barre de progression (max 100%) */
+  const progressPct = Math.min((nbErreurs / 20) * 100, 100);
+
+  return (
+    <div className={styles.card} style={{ borderTopColor: statut.color }}>
+      <div className={styles.header}>
+        <div className={styles.titleRow}>
+          <span className={styles.chevron}>›</span>
+          <h3 className={styles.title}>{monitoring.nom || monitoring.monito_intitule || monitoring.libelle || 'Monitoring'}</h3>
+        </div>
+        <div className={styles.badges}>
+          {monitoring.bdd_source && (
+            <Badge variant={monitoring.bdd_source.toLowerCase() === 'sage' ? 'sage' : 'crm'}>
+              {monitoring.bdd_source}
+            </Badge>
+          )}
+          {monitoring.categorie && <Badge variant="info">{monitoring.categorie}</Badge>}
+        </div>
+      </div>
+
+      <div className={styles.erreurs}>
+        <span className={styles.nb} style={{ color: statut.color }}>{nbErreurs}</span>
+        <span className={styles.erreursLabel}>erreur{nbErreurs !== 1 ? 's' : ''}</span>
+      </div>
+
+      {/* Barre de progression colorée selon le statut */}
+      <div className={styles.progressBar}>
+        <div
+          className={styles.progressFill}
+          style={{ width: `${progressPct}%`, backgroundColor: statut.color }}
+        />
+      </div>
+
+      <div className={styles.footer}>
+        <Badge variant={statut.variant}>{statut.label}</Badge>
+        <button
+          className={styles.detailBtn}
+          onClick={() => navigate(`/monitoring/${monitoringId}`)}
+        >
+          Voir le détail →
+        </button>
+      </div>
+    </div>
+  );
+}